update readme

parent e294dc99
## IT2810 - Group 36
Dette repoet inneholder løsningen til gruppe 36 for prosjekt 2 i IT2810.
#### Contributors
Wang, Stine Johanne Gjære. Styve, Svein Olav. Aubert, Karl Petter Egseth.
#### Applikasjonsstruktur
Nettsiden er organisert i fire hoveddeler: kategori-velger, utstilling, tabs og historie/favoritt.
Kategori-velgeren gir brukeren mulighet for å velge en kategori for hver av medietypene bilde, tekst og lyd. For hver av medietypene kan brukeren velge en av tre kategorier: “City”, “Jungle” og “Seaside”. Basert på kategori-valgene vil brukeren kunne velge mellom fire forskjellige utstillinger ved å trykke på en av de fire fanene. Utstillingen endres med en gang brukeren gjør en endring.
Utstillingen består av et bilde, en tekst og en lyd. Alle mediafilene lastes kun dersom de trengs og lagres i nettleserens cache slik de ikke trengs å lastes på nytt. Ved å inspisere nettverkstrafikken i nettleseren (Chrome DevTools) kan vi bekrefte at bruk av caching fungerer etter ønske og medieelementer kun lastes én gang. Samlingen av mediafiler er organisert i en katalogstruktur basert på medietype, med videre fordeling i tre kategorier per medietype som hver inneholder fire filer. Lastingen av filer gjøres med fetch().
Komponentene er implementert som class og function basert på hva som var mest hensiktsmessig for komponenten. Generelt sett valgte vi å implementere komponenter som function så lenge komponenten ikke trengte state.
#### Lagring
HTML Web Storage er brukt til flere formål. Vi har valgt å lagre kunstverket som brukeren så på da nettleseren ble lukket, slik at brukeren ser det samme kunstverket neste gang nettsiden besøkes. Dette blir gjort ved å lagre brukervalgene for kategorier og tab i localstorage. Første gang en bruker besøker nettsiden vil en tilfeldig utstilling vises. Brukeren har også mulighet til å lagre en favoritt-utstilling, som også er implementert ved bruk av localstorage. Disse endringene vedvarer dersom nettleseren startes på nytt, så brukeren ikke mister favoritten sin.
Session storage brukes til å lagre en historikk av alle kunstverkene brukeren har sett på i løpet av et besøk på nettsiden. Brukeren har mulighet til å navigere fram og tilbake i historikken ved bruk av navigerings-piler samt å trykke direkte på et innslag i historikken. Brukeren kan scrolle i historikken for å finne ønsket innslag. Dersom brukeren gjør et manuelt valg av kategori eller tab vil all framtidig historikk overskrives av det valget, basert på hvor i historien brukeren står.
#### Snapshot-tester
Svært enkel snapshottesting er gjort for utvalgte komponenter ved bruk av Jest. Dette sikrer at brukergrensesnittet ikke endrer seg uforventet når man gjør endringer. Dersom grensesnittet skulle endre seg vil testen for den spesifikke komponenten mislykkes, og man må ta stilling til om endringen var tilsiktet eller ikke. Dersom endringen er ønskelig oppdaterer man snapshotten, hvis ikke har man oppdaget en feil og må rette den.
#### Repsonsiv design
Vi har valgt å bruke CSS-grid til utformingen av galleriet. Grid føltes godt tilpasset arbeidsoppgaven, og plassering av elementer, samt deres størrelse ble enklere å jobbe med. Vi dro spesielt nytte av å kunne angi kolonne- og radstørrelser ved hjelp av “fr”-enheten (fraction) og å kunne angi start- og sluttposisjon på elementet i griden. Videre, siden man bygger komponenter av andre komponenter i React, kan det være hensiktsmessig å fylle “hoved-griden” (App.js) med flere “sub-grids”.
Til responsive design har vi i hovedsak brukt CSS media queries, og valgt å fokusere på de tre vanligste skjermstørrelsene (monitor, pad og telefon). Media queries samarbeider veldig godt med grid, siden man enkelt kan forandre hvor mye plass hvert grid-element skal ta opp, og hvor mange rader/kolonner en grid skal inneholde. Etter å satt opp gridene ble det også enklere å skalere innholdet. Eksempelvis satte vi bildene sitt min-width-attributt til 100%, som gjør at det skalerer i henhold til griden (og dermed størrelsen til viewporten).
Da vi begynte oppgaven, fokuserte vi hovedsakelig på nettleser-versjonen. Under produksjon var dette enklest å jobbe med, siden man da kan bruke bl. a. Chrome Dev Tools sin innebygde konsoll. Dette ble brukt til å undersøke states og kommunikasjon mellom komponenter. Etter vi var ferdig med det stadiet, kunne vi enklere fokusere på å sette sammen komponentene vi hadde laget, styling og responsiveness. Chrome Dev Tools hjalp også med å kunne se om mediafiler ble cachet eller lastet inn på nytt.
#### Responsive tester
Ved bruk av “inspect” i Chrome, har vi fått testet nettsiden i iPhone, iPad og vanlig monitor-format. I tillegg har vi testet nettsiden på hver av våre smarttelefoner, både Android og iOS. I starten hadde vi noen problemer med at tabsene i navigasjonsbaren endret bredde når de ble trykket på, og at bildet også ble større enn det skulle og ikke ble tilpasset skjermstørrelsen. Dette ble fikset og nå skal siden fungere fint på både mobil, tablet og laptop. På mobil har vi også testet både horisontal og vertikal visning av nettsiden.
<br>
......
Markdown is supported
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