README.md 7.28 KB
Newer Older
Mikkel Marstein's avatar
Mikkel Marstein committed
1
2
3
4
5
6
# Om applikasjonen
Applikasjonen gir en oversikt over verdens land. Ved å velge et land kan man se detaljer om landet, slik som hovedstad, språk og valuta. Listen med land kan også filtreres, sorteres og søkes i. All denne dataen er lagret i databasen vår. En bruker kan også selv lagre data til databasen gjennom å merke land som favoritt. Denne dataen blir hentet opp gjennom å vise antallet som har merket landet som favoritt når man velger å se detaljer om landet. 
# Database
Databasen vi har valgt å bruke er MongoDB. Denne valgte vi fordi den er godt tilpasset vårt formål, har en fleksibel dokument-datamodell og fordi det er en populær database, noe som gjør det enkelt å finne dokumentasjon, finne løsninger på eventuelle feil og få hjelp til oppsett. Databasen ble installert på vår virtuelle maskin, og det ble lagt inn data gjennom en JSON-fil. Denne dataen består av land lagret som dokumenter i en collection ved navn “countries”, som igjen ligger i databasen “it2810”. Hvert land har felt for navn på landet (på engelsk), navn på landet (på det offisielle språket), telefonkode, kontinent, hovedstad, valuta og språk. Vi har i tillegg lagt til et felt for antall ganger landet er blitt lagret som favoritt, som utdypes i “Brukergenerert data” i dokumentasjonen. Ved innhenting av denne dataen i backend, valgte vi å fjerne telefonkode-feltet fra skjemaet, da vi ikke anså dette som relevant informasjon.
# GraphQL
For å hente data fra databasen brukes GraphQL. Dette gjør at etter vi har beskrevet dataformatet, kan vi hente ut ganske nøyaktig det vi ønsker. Dermed slipper vi problematikk knyttet til “over-” eller “under-fetching”, der vi enten får mer eller mindre data enn ønsket. Dataen vi får er derfor relativt forutsigbar. 
Mikkel Marstein's avatar
Mikkel Marstein committed
7

Mikkel Marstein's avatar
Mikkel Marstein committed
8
For å sette opp en GraphQL-server har vi brukt Express. Denne er koblet til MongoDB-databasen vår gjennom bruk av Mongoose, og gjør at vi kan spørre om og oppdatere data som ligger lagret her gjennom queries og mutations. I GraphQL-skjemaet vårt har vi definert felter for Country-objekter, som tilsvarer ett land, queries for å hente ut en liste med land eller antall land som oppfyller en betingelse og én mutation for å endre “favoritt”-feltet når en ny bruker merker landet som favoritt. 
Mikkel Marstein's avatar
Mikkel Marstein committed
9
10


Mikkel Marstein's avatar
Mikkel Marstein committed
11
12
13
14
15
16
# Sortering, filtrering og søk
For å kunne sortere, filtrere, søke og hente ut bestemte mengder data, har vi definert et par resolvers i backend. Den ene tar inn ulike filtrerings og sorteringsargumenter og returnerer et begrenset antall “Country” data objekter. Vi har laget muligheten for: 
- Søk etter navn til land som inneholder et bestemt ord 
- Filtrere på kontinent
- Sortere på lands navn eller houvedstad( alphabetisk og analphabetisk)
- Definere start og mengde til resultatene
Mikkel Marstein's avatar
Mikkel Marstein committed
17

Mikkel Marstein's avatar
Mikkel Marstein committed
18
Den andre resolver tar også inn ulike filtre og returnerer antallet resultater som tilfredsstiller filter kravene. Dette bruker vi til å regne ut hvor mange sider med resultater vi har.
Mikkel Marstein's avatar
Mikkel Marstein committed
19

Mikkel Marstein's avatar
Mikkel Marstein committed
20
# Redux
Mikkel Marstein's avatar
Mikkel Marstein committed
21

Mikkel Marstein's avatar
Mikkel Marstein committed
22
Ingen av gruppemedlemmene hadde noe særlig kunnskap om Redux eller Mobx før prosjektet. Derfor valgte vi å benytte oss av Redux, slik at vi får satt oss ordentlig inn i state management. I tillegg var det hensiktsmessig med Redux når man programmerer funksjonell programmering.
Mikkel Marstein's avatar
Mikkel Marstein committed
23

Mikkel Marstein's avatar
Mikkel Marstein committed
24
Gjennom Redux gir vi komponentene direkte tilgang til data de behøver. Vi har blant annet Redux i Searchbar-mappen “SearchbarStore.tsx” og i display-mappen “store.tsx”. 
Mikkel Marstein's avatar
Mikkel Marstein committed
25
26
27



Mikkel Marstein's avatar
Mikkel Marstein committed
28
29
# Brukergenerert data
Grunnet en feil vi fikk når bruker skulle oppdatere data i databasen fra frontend, fikk vi ikke tid til å implementere dette kravet slik vi ønsket. Til tross for at det var mulig å endre data fra backend gjennom GraphQL-mutation, fikk vi et problem med at forespørselen ble blokkert av “CORS policy” når den ble sendt fra frontend. Likevel velger vi her å forklare hva vi gjorde for å forsøke og tilfredsstille kravet, og hva som var den opprinnelige planen. 
Mikkel Marstein's avatar
Mikkel Marstein committed
30

Mikkel Marstein's avatar
Mikkel Marstein committed
31
For å løse kravet om brukergenerert data, valgte vi å gi brukeren mulighet til å merke land som favoritt. I databasen lagret vi antall ganger dette hadde blitt gjort for hvert enkelt land som et “favoritt”-felt i objektet, og brukeren skulle få dette tallet presentert når den valgte å se mer detaljer om et spesifikt land. Denne dataen skulle hentes gjennom GraphQL-queries til API-et, og lagres gjennom GraphQL-mutations. 
Mikkel Marstein's avatar
Mikkel Marstein committed
32

Mikkel Marstein's avatar
Mikkel Marstein committed
33
For å merke et land som favoritt, måtte brukeren trykke på den lille stjernen som dukker opp når man ser mer detaljer om landet. Dette er en UI-komponent hentet fra et eksternt bibliotek. Komponenten endrer farge ved klikk, og skulle bli lagret til databasen i form av å øke “favoritt”-feltet med 1. 
Mikkel Marstein's avatar
Mikkel Marstein committed
34

Mikkel Marstein's avatar
Mikkel Marstein committed
35
For å hindre at samme bruker merker et land som favoritt flere enn én gang, og dermed kan øke tallet i “favoritt”-feltet til landet flere ganger, brukte vi HTML web storage. Vi vurderte om vi skulle implementere en løsning for å opprette og logge inn med bruker, men anså dette som overkompliserende. Derfor konkluderte vi med å bruke localstorage, slik at når brukeren merket et land som favoritt ble dette lagret lokalt i browseren uten “utløpsdato”. Etter dette ble brukeren hindret fra å merke samme land igjen. 
Mikkel Marstein's avatar
Mikkel Marstein committed
36

Mikkel Marstein's avatar
Mikkel Marstein committed
37
38
# Universell utforming
For å gjøre siden universelt utformet, har vi blant annet gjort knappene for landene, søkebaren og filtreringsmulighetene store og tydelige, og gjort kontrastene mellom fargene store. Dette gjør applikasjonen lettere å bruke for svaksynte. Vi har også lagt til alt-tekst til bilder på siden, slik at blant annet de som bruker skjermleser grunnet dårlig syn skjønner hva det er bilde av selv uten å se det. I tillegg er hovedfunksjonene på siden, nemlig søking, filtrering og sortering, samt navigering mellom sider, tilgjengelig kun ved bruk av tab- og enter-tasten på tastatur. Dermed er applikasjonen mulig å bruke for dem som ikke kan benytte seg av mus.
Mikkel Marstein's avatar
Mikkel Marstein committed
39

Mikkel Marstein's avatar
Mikkel Marstein committed
40
41
42
43
# Funksjonelle krav
Vi bruker bootstrap cards for å vise frem dataen vi henter. Når man trykker på et card utvides det med mer informasjon om landet. Alle kortene har også en redux store som inneholder hvilket kort som er det aktive kortet.
På design fronten bruker vi media queries flere steder for å ta høyde for skalering. I headeren har vi ulike filter knapper som omgjøres til en hamburgerbar man kan åpne og lukke ved liten skjerm. Dessverre grunnet mye sykdom den siste helgen rakk vi ikke helt å fikse stylingen til filter knappene.
Testing (enhetstesting og end-2-end testing)
Mikkel Marstein's avatar
Mikkel Marstein committed
44

Mikkel Marstein's avatar
Mikkel Marstein committed
45
# Enhetstesting
Mikkel Marstein's avatar
Mikkel Marstein committed
46

Mikkel Marstein's avatar
Mikkel Marstein committed
47
48
49
Skriv inn “yarn test” i terminalen for å kjøre testene. Vi har implementert et par tester for å teste de ulike komponentene.   
# 
End-2-end testing
Mikkel Marstein's avatar
Mikkel Marstein committed
50

Mikkel Marstein's avatar
Mikkel Marstein committed
51
For å teste ut end- 2 end testingen har vi valgt å benytte oss av rammeverket cypress. Skriv inn “cypress:open” i terminalen for å kjøre testen. Gjennom Cypress får vi testet ut om programflyten fungerer som den er designet for. I tillegg håndterer den testing av lengre sekvenser av interaksjoner. Testingen i Cypress er mer brukerorienterte. 
Mikkel Marstein's avatar
Mikkel Marstein committed
52

Mikkel Marstein's avatar
Mikkel Marstein committed
53
54
55
For å kjøre end- 2- end testingen, må både frontend og backend (serveren ) kjøre samtidig. Deretter lag en ny terminal, og skriv inn “cypress:open”

I end- 2- end testingen har vi blant testet ut at inputen fra søkebaren blir registrert, samt at den finner det den søker etter. Videre har vi også testet ut om knappene og layouten har forventet oppførsel. 
Mikkel Marstein's avatar
Mikkel Marstein committed
56