Commit 1753a85c authored by Adrian's avatar Adrian

Merged master into Stylingdev

parents 75376c15 cbb073ad
# Project4
# Drinks - project 4
## Innhold og Funksjonalitet
Appen gir et søkegrensesnitt der du kan søke opp alle varene fra vinmonopolet. Når listen, laget med hjelp av react-native-elements, lastes står det Loading.., og når den er ferdig lastet kommer det en listevisning av objektene. Resultatsettet lastes dynamisk når man scroller ned og trykker på «LOAD MORE» knappen. Trykker man på et listelement dukker det opp et overlay, hentet fra react-native-elements, med detaljert visning av den varen.
Hamburgermenyen øverst til venstre gjør det mulig å filtrere resultatsettet. Her kan man velge mellom kategorier av de forskjellige varene. Radioknappene er laget med react-native-radio-form pakken. I tillegg kan man sortere resultatlisten alfabetisk, etter pris og volum. Sorteringen blir gjort med hjelp av react-native-picker-select pakken.
Persistent lagring av data med favoritter.
## git
Prosjektet er delt opp i issues og hver commit er markert med hvilken issue det løser. Gruppen benytter seg av best practice i forbindelse med pushing, merging og generelt samarbeid med git.
## Teknologi
**Database og Api:**
Vi har valgt å bruke en annen backend for denne oppgaven. Vi ville gjerne ha en backend som var lettere å implementere og gjorde sortering osv. enklere for oss i dette prosjektet. Etter diskusjon innad og med andre grupper endte vi opp med en løsning som bruker GraphQL. Gruppe 26 lot oss bruke deres database og backend, noe som viste seg å være et godt valg, med mye innebygget funksjonalitet.
Backenden har god støtte for filtrering, søking og lignende queries som vi har benyttet oss av i stor grad. Data hentes fra http://it2810-26.idi.ntnu.no:4000/.
Ved bruk av en annen backend har vi fått større innsikt i hvordan det kan gjøres, og mer peiling på hvordan fetching av data kan gjøres mer dynamisk enn vi har gjort i tidligere prosjekter.
**React Native:**
Appen er laget i React Native og vi har brukt expo-cli i utviklingen. Dette viste seg å gi et enkelt og raskt oppsett av react native, med mye dokumentasjon og hjelp.
**Andre teknologier og rammeverk**
Prosjektet inneholder en god del enkle rammeverk og teknologier for å forenkle både styling og funksjonalitet. Installering av disse følger under, og linker med dokumentasjon ligger under kilder.
Grunnlaget for bruken av de fleste av disse går på enkleste vei mot et pent resultat for appen.
Redux er brukt for håndtering av state, noe som er valgt å holdes konsekvent for at gruppen skal få god øving. Dette er veldig relevant for fremtidig arbeid.
## Testing
Testing av applikasjonen er gjort på en iphone 6s, Huawei Mate 20 pro og OnePlus 6t. Vi har gjort end to end testing ved å gå over funksjonaliteten i kravene og sørget for at alt fungerer slik det er tenkt.
## npm install
react-native-elements
react-native-radio-form
### npm install
react-native-community/async-storage
npm install react-native-picker-select
react-native-picker-select
react-native-shapes
npm install --save react-redux
npm install apollo-boost @apollo/react-hooks graphql
## Kjør prosjektet
expo start
npm i react-native-shapes
## KILDER:
KILDER:
https://react-native-elements.github.io/react-native-elements/docs/getting_started.html
https://www.npmjs.com/package/react-native-chart-kit
https://www.npmjs.com/package/react-native-radio-form
https://react-native-elements.github.io/react-native-elements/docs/header.html
......
......@@ -2,8 +2,8 @@
"devToolsPort": 19002,
"expoServerPort": 19000,
"packagerPort": 19001,
"packagerPid": 15292,
"packagerPid": 16200,
"expoServerNgrokUrl": "https://93-ggc.anonymous.p4.exp.direct",
"packagerNgrokUrl": "https://packager.93-ggc.anonymous.p4.exp.direct",
"ngrokPid": 16696
"ngrokPid": 12996
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment