README.md 4.26 KB
Newer Older
Hedda's avatar
Hedda committed
1
2
3
4
npm install react-navigation

# Installasjon og bruk

Amalie Henni's avatar
Amalie Henni committed
5
#_todo_
Hedda's avatar
Hedda committed
6

Amalie Henni's avatar
Amalie Henni committed
7
#### _TRENGER MER HER_
Hedda's avatar
Hedda committed
8

Amalie Henni's avatar
Amalie Henni committed
9
10
11
1. Kjør `npm install` i frontend-mappen
2. Kjør `npm install` i backend-mappen
3. Deretter kjør `npm start` i backend-mappen
Hedda's avatar
Hedda committed
12

Amalie Henni's avatar
Amalie Henni committed
13
# Dokumentasjon
Hedda's avatar
Hedda committed
14

Amalie Henni's avatar
Amalie Henni committed
15
Vi har laget en app som viser frem steder i verden. Den har en hjem-side, en utforsker-side og en favoritt-side. Nederst vises en tab-bar som brukes til å navigere mellom de tre sidene. Ved å trykke på taben med huset kommer man til hjem-siden, ved å trykke på søkeikonet, kommer man inn til utforsk-siden og ved å trykke på hjertet kommer man til sin favoritt.
Hedda's avatar
Hedda committed
16

Amalie Henni's avatar
Amalie Henni committed
17
Hjem-siden er en oversiktsside der man kan få et visst intrykk av hva appen gjør. Der vises også de fem mest populære byene, altså de lokasjonskortene som flest har trykket seg inn på for å se mer informasjon om.
Hedda's avatar
Hedda committed
18

Amalie Henni's avatar
Amalie Henni committed
19
Det er på utforskersiden mye av funksjonaliteten ligger, blant annet søking, filtrering og sortering. Søkingen gjøres med søkebaren og filtrering/sortering gjøres ved hjelp av dropdown-menyene.
Hedda's avatar
Hedda committed
20

Amalie Henni's avatar
Amalie Henni committed
21
Den siste tab-en, favoritt-siden, viser fram ditt favorittsted. Dette kan man velge når man er inne på et lokasjonskort. Det er kun mulig med én favoritt.
Hedda's avatar
Hedda committed
22

Solveig Hergot Langås's avatar
Solveig Hergot Langås committed
23
24
## Funksjonalitet

Amalie Henni's avatar
Amalie Henni committed
25
26
27
28
29
Når det gjelder søk, så må man søke på hele byen/landet for at det skal komme opp.
Hadde vi hatt mer tid (og prosjektet ga mer poeng) skulle vi også fått implementert slik at man kunne søke med ufullstendige ord.
Feks man søker "p" og alle landene/byene som starter på "p" dukker opp. Vi har også et issue på dette med label "could be nice".

## Design
Solveig Hergot Langås's avatar
Solveig Hergot Langås committed
30

Amalie Henni's avatar
Amalie Henni committed
31
Vi har gått for et minimaslistisk design for å gjøre siden oversiktelig og for at den skal være enkel å bruke. Vi har for det meste brukt react sine eksterne biblioteker, og det gjør at siden holder seg konsistent i design.
Solveig Hergot Langås's avatar
Solveig Hergot Langås committed
32

Amalie Henni's avatar
Amalie Henni committed
33
## Frontend
Hedda's avatar
Hedda committed
34

Amalie Henni's avatar
Amalie Henni committed
35
Appen er skrevet i React Native, og til state management bruker vi Redux. Vi initialiserte prosjektet og tester appen ved å bruke Expo. I tillegg har vi tatt i bruk ulike biblioteker som for eksempel react-navigation-tab og react-native-material-menu. Hvis man ønsker å se resten, finner man fler i package.json der de står i dependencies.
Hedda's avatar
Hedda committed
36
37
38

## Backend

Amalie Henni's avatar
Amalie Henni committed
39
40
41
42
43
44
45
46
47
48
49
50
51
Selvom man kunne benytte seg av samme server som sist, valgte vi å gjøre om litt på vår. Dette fordi vi fikk tilbakemeldinger på prosjekt 3 om at vi ikke hadde det beste oppsettet (f.eks fordi vi sorterte i frontend), og dette var ikke like kompatibelt med veldig store datasett. Vi har også ryddet opp i fetchene og laget egen fil som kjører fetchmetoder for å gjøre det hele mer oversiktelig.

Vi har da en routers-mappe i backend som inneholder en api-fil. Her ligger all routing, samt sortering dersom det er valgt av bruker. Den sorterer da dersom det er lagret noe om dette i redux.

I frontend har vi også en api-mappe som inneholder en fetchers-fil. Denne inneholder en GetData-funksjon som hente riktig data utfra hvilken input den får, eks på riktig søkeord osv.

Selve databasen er lik som sist, og det samme er koblingen mellom server og app. Forskjellen er da at vi har ryddet opp i koden så den er mer oversiktelig, vi har prøvd å få mest mulig gjenbruk av kode og slippe å skrive ting dobbelt opp.

Av teknologier til backend har vi brukt Express, MondoDB og Mongoose.

## Git og kommentering

I dette prosjektet er master-branchen "hellig" og skal alltid ha velfungerende og kjørende kode. Til utviklingen har vi opprettet ulike brancher til de forskjellige issuesene, samt merket hver commit med hvilken issue de tilhører. De stedene vi ikke har lagt til dette, er det fordi vi committer en quick fix eller at committen ikke tilhører noen spesiell issue. Vi har også laget merge requests når vi skal merge til master. Dette gjør det lettere å oppdage merge conflicts og at vi ikke merger dårlig kode til master.
Hedda's avatar
Hedda committed
52

Amalie Henni's avatar
Amalie Henni committed
53
Vi har kommentert koden på en saklig måte, og prøvd å supplere koden strategisk og konstruktivt. For å gjøre koden vår enda mer ryddig enn i prosjekt 3, har vi prøvd å gi alle komponenter og funksjoner fornuftige navn slik at man lett skal skjønne hva de er og gjør, tillegg til å gjøre ting konsistent og oversiktlig.
Hedda's avatar
Hedda committed
54

Amalie Henni's avatar
Amalie Henni committed
55
## Testing
Hedda's avatar
Hedda committed
56

Amalie Henni's avatar
Amalie Henni committed
57
For ende-til-ende-testing har vi brykt Cypress. Da får vi testet applikasjonen tilstrekkelig på en enkel og oversiktlig måte. I tillegg er det lett å følge testene og se hva som skjer.