Commit 612168c1 authored by Mikkel Marstein's avatar Mikkel Marstein
Browse files

Update README.md

parent d762f6eb
# Getting Started with Create React App
# 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.
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
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.
## Available Scripts
In the project directory, you can run:
# 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
### `yarn start`
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.
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
# Redux
The page will reload if you make edits.\
You will also see any lint errors in the console.
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.
### `yarn test`
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”.
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `yarn build`
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
# 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.
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
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.
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
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.
### `yarn eject`
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.
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
# 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.
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
# 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)
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
# Enhetstesting
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
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
## Learn More
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.
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
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.
To learn React, check out the [React documentation](https://reactjs.org/).
Supports Markdown
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