Commit 708fd2e1 authored by Turid Cecilie Dahl's avatar Turid Cecilie Dahl
Browse files

Readme changes

parent 6a31c696
## Dokumentasjon
### `React`
I prosjektet er det blitt brukt react og JSX, for å lage produktet. Gruppen lagde prosjektet ved å benytte React sin innebygde *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, ect. Siden gruppen ikke hadde noen tidligere erfaring med React, ble resten av filstrukturen satt opp slik som ble anbefalt etter mangfoldige søk på web. Det vil si at man har en egen components-mappe med jsx-komponenter og assets-mappe med media-filer som bilderfiler i json og lydfiler i mp3. 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 utgangspunkt 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 Node sin innebygde *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, ect. Siden gruppen ikke hadde noen tidligere erfaring med React, ble resten av filstrukturen satt opp slik som ble anbefalt etter mangfoldige søk på web. Det vil si at man har en egen components-mappe med jsx-komponenter og assets-mappe med media-filer som bilderfiler i json og lydfiler i mp3. 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 utgangspunkt i det som gruppen fant som anbefalt, og brukt React-funksjonaliteter flittig.
Underveis i prosjektet har gruppen opprettholdt kravet om å kunne de ordinære mekanismene i React for å lagre og endre state/data, og å implementere alle UI-elementer fra bunnen av.
......@@ -19,7 +19,7 @@ I prosjektet er det brukt både *local storage* og *session storage*. *Local sto
### `Responsive Web Design`
Viewport ble satt ved å legge inn en <meta>-tag med *name=”viewport”*. Inne i <meta>-taggen ble *width*, dvs. bredden til skjermen, satt til å følge bredden til vinduet vist på skjermen. I tillegg ble *initial-scale*, dvs. den initielle zoomen når nettsiden lastes, satt til å være 1.0.
Media-queries er flittig brukt i *App.css*, for å endre på utseende avhengig av hvilken størrelse det er på skjermen. Her har gruppen valgt å ta utgangspunkt i fire ulike størrelser: 1200px, 992px, 768px, 600px og 410px. Disse er henholdsvis: store enheter (datamaskiner), middels store enheter (nettbrett), små enheter (mobile nettbrett og store mobiltelefoner), ekstra små enheter (mobiltelefoner), og enda mindre enheter (små mobiltelefoner). Dermed har hovedgruppene av alle enheter blitt dekket.
Media-queries er flittig brukt i *App.css*, for å endre på utseende avhengig av hvilken størrelse det er på skjermen. Her har gruppen valgt å ta utgangspunkt i flere ulike størrelser, som intervall mellom: større enn 1200px, 1200px, 992px, 768px, 600px, 410px og mindre enn 410px. Disse er henholdsvis: ekstra store enheter (store datamaskinskjermer og prosjektorer), store enheter (datamaskiner og prosjektorer), middels enheter (nettbrett), små enheter (mobile nettbrett og store mobiltelefoner), ekstra små enheter (mobiltelefoner), og enda mindre enheter (små mobiltelefoner). Dermed har hovedgruppene av alle enheter blitt dekket. Gruppen har i tillegg tatt hensyn til om enheten er i portrettmodus eller landskapsmodus.
Bildet, teksten, lydavspilleren og interaksjonskomponentene som er vist på nettsiden skalerer til størrelsen på skjermen. Dette gjøres ved å bestemme *height* og *weight* med *vh* og *vw*.
......@@ -38,6 +38,8 @@ Gruppen har også testet nettsiden manuelt med development build på PC, mobil o
Git har blitt hyppig brukt gjennom hele prosjektprosessen. Etter *create-react-app* ble kjørt så ble prosjektet pushet til gitlab. Deretter forsikret gruppen seg om at alt av git-funksjonalitet fungerte hos alle gruppemedlemmene. Alle i gruppen bruker Visual Studio Code (VS Code) som tekst-editor, og VS Code har innebygd kompatibilitet med git. Dermed ble git brukt hos alle, og da gruppen opplevde merge conflics, kunne det lett løses i VS Code.
Hver uke har det blitt laget issues som har blitt utdelt til et medlem og satt frist til neste møte, 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 brancher basert på hvilken funksjonalitet som ble utviklet. Derfor ble det laget en branch til hver issue. I noen tilfeller ble tilhørende issues samlet til en overordnet branch. Gruppen kunne vurdert å da slå sammen issuesene som ble tilhørende samme branch, men allikevel ønsket gruppemedlemmene å ha relativt detaljerte issues og valgte ikke å slå issuesene sammen. Etter å ha prøvd begge disse fremgangsmåtene for branch-struktur, har gruppen foretrukket å ha en branch per issue/overordnede issue. Det kan komme av at da blir det mer oversiktlig og at andre kan jobbe på en annen branch lettere om de ønsker. På den andre siden, kan det bli litt rotete med så mange brancher. Dermed har ikke gruppen helt fastslått hva slags branch-struktur som vil benyttes i fremtidige prosjekter.
I løpet av prosjektet har gruppen ikke tatt utgangspunkt i *mobile first*. Dette er fordi gruppen hadde mer tidligere erfaring med nettdesign på datamaskin, og følte det var hensiktsmessig å ta utgangspunkt i noe kjent.
### `Kilder`
3 Try REACTJS Tutorial - Display Json Data. (2018). Hentet fra:
......
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