Commit 8ebff70c authored by Turid Cecilie Dahl's avatar Turid Cecilie Dahl
Browse files

Written more in the README file

parent 8a38b8e9
......@@ -3,25 +3,39 @@ Dokumentasjonen skal diskutere, forklare og vise til alle de viktigste valgene o
## Documentasjon
### `React`
I prosjektet er det blitt brukt react og JSX, for å lage produktet. Gruppen lagde prosjektet ved å benytte react sin innebydge *create-react-app*. Dette satte opp ulike mapper og filer som er nødvendig for en react web applikasjon, for eksempel src mappa, App.js fil og ect. Siden gruppen ikke hadde noen tidligere erfaring med react, ble resten av filstrukturen satt opp slik som ble anbefalt på mange google søk. Det vil si at man har en egen components mappe med jsx komponenter og assets mappe med media filer som bilder og lyd. Videre har gruppen lært og utnyttet react sine funksjonaliteter som state, props og refs. I dette prosjektet er komponentene skrevet hovedsakelig med bruk av klasser i ES6, men noen er laget som funksjoner for å kunne lære hvordan man kan gjøre det samme på ulike måter. Med andre ord har prosjektet blitt laget med utganspunkt i det som gruppen fant som anbefalt, og brukt react funksjonaliteter flittig.
I prosjektet er det blitt brukt react og JSX, for å lage produktet. Gruppen lagde prosjektet ved å benytte react sin innebydge *create-react-app*. Dette satte opp ulike mapper og filer som er nødvendig for en react web applikasjon, for eksempel src mappa, App.js fil og ect. Siden gruppen ikke hadde noen tidligere erfaring med react, ble resten av filstrukturen satt opp slik som ble anbefalt på mange google søk. Det vil si at man har en egen components mappe med jsx komponenter og assets mappe med media filer som bilder og lyd. Gjennom prosjektet har *npm start* blitt brukt for å lage *development build* av prosjektet. Videre har gruppen lært og utnyttet react sine funksjonaliteter som state, props og refs. I dette prosjektet er komponentene skrevet hovedsakelig med bruk av klasser i ES6, men noen er laget som funksjoner for å kunne lære hvordan man kan gjøre det samme på ulike måter. Med andre ord har prosjektet blitt laget med utganspunkt i det som gruppen fant som anbefalt, og brukt react funksjonaliteter flittig.
Underveis i prosjektet har gruppen passet på å opprettholde kravet om å kun de ordinære mekanismene i React for å lagre og endre state/data, og å implementere alt av UI-elementer fra bunnen av.
### `Ajax`
SVG bildene og teksten som er brukt lastes inn via ajax sin fetch metode. Dette gjør at filene kun lastes inn dersom det er nødvendig. I motsetning gjøres henting av lyd kun med vanlig importering.
(Si noe om xml og json?)
SVG bildene og teksten som er brukt lastes inn via ajax sin *fetch* metode. Dette gjør at filene kun lastes inn dersom det er nødvendig. I motsetning gjøres henting av lyd kun med vanlig importering.
Gruppen har valgt å ikke implementere noen egen form for caching, ettersom dette allerede eksisterer i moderne nettlesere.
### `HTML Web Storage`
I prosjektet er det brukt både *local storage* og *session storage*. *Local storage* har gruppen valgt å utnytte ved å gi brukeren mulighet for å lagre sin favoritt kombinasjon av radioknappene. *Session storage* brukes til at dersom man refresher nettsiden, vil man komme tilbake på nettsiden med den samme radioknapp-kombinasjon.
### `Responsive Web Design`
Viewport
Media-queries er flittig brukt i *App.css*, for å endre på utseende avhengig av hvilken størrelse det er på skjermen. Her har utviklingsgruppa valgt å ta utgangspunkt i fire ulike størrelser: 1200px, 992px, 768px og 600px. Disse er henholdsvis: store enheter (datamaskiner), middels store enheter (nettbrett), småe enheter (mobile nettbrett og store mobiltelefoner) og ekstra små enheter (mobiltelefoner). Dermed har hovedgruppene av enheter blitt dekket.
Bildet og interaksjonsmuligheter som er vist på nettsiden skalerer i forhold til størrelsen på skjermen. Dette gjøres ved å bestemme *height* og *weight* med *vh* og *vw*.
### `Node.js and NPM`
For å skape en flytende og fleksibel layout har det blitt benyttet flexbox. Det ble diskutert om CSS-grid heller skulle brukes, men siden flexbox sin endimensjonalitet passet fint ble det valgt. I tillegg ble det valgt fordi flere av gruppemedlemmene hadde brukt CSS-grid på prosjekt 1, og ønsket å lære seg flexbox også. Slik applikasjonen er nå så er dimensjonen i kolonner og når skjermen blir liten, vil bildet, teksten og lyden havne under hverandre.
Det er ikke brukt noen eksterne CSS-rammeverk.
### `Testing`
Det er mange ulike måter å kjøre tester på, men gruppen har bestemt seg for å ha testene sine i en *_tests_* mappe. Der er det lagd logikk tester. I tillegg er det laget snapshot tester.
### `Virtuell Maskin`
### `Bruk av git og koding`
Git har blitt hyppig brukt gjennom hele prosjektsprosessen. Med engang etter *create-react-app* ble kjørt så ble det pushet til gitlab, og passet på at alt av git fungerte hos alle gruppemedlemmene. Alle i gruppen bruker Visual Studio Code, og den editoren har innebydg kompatibilitet med git. Dermed ble det brukt hos alle, og da det ble merge conflics kunne det lett resolves i VS Code.
Hver uke har det blitt laget issues som har blitt utdelt til et medlem og satt frist til neste møte eller neste uke eller senere. Den første uken av prosjektet prøvde gruppen å ha en branch per medlem. Dette fungerte greit, men andre uke ønsket gruppen å heller ha flere brancher, slik at det var en for hver hoved issue. Etter å ha prøvd begge disse fremgangsmåtene for branchstruktur, har gruppen foretrukket å ha en branch per hovedissue. Det kan komme av at da blir det mer oversiktlig og andre kan jobbe litt på en annen branch lettere om de ønsker. På den andre siden så kan det bli litt rotete med så mange brancher. Dermed er ikke gruppen helt satt i stein hva slags framgangsmåte de vil ha for branchstruktur.
### `Læringsmål`
\ No newline at end of file
### `Kilder`
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