Commit 7f033306 authored by Turid Cecilie Dahl's avatar Turid Cecilie Dahl
Browse files

Written more in README, and fixed session storage after get favorite refresh

parent 8ebff70c
# Webutvikling # Webutvikling
Git test fra VS Code - Turid Mappen hvor alle gruppeprosjektene i Webutvikling vil være
asdfghjklø \ No newline at end of file
\ No newline at end of file
Dokumentasjonen skal diskutere, forklare og vise til alle de viktigste valgene og løsningene på krav til funksjonaltet og krav til teknologi. 800-1000 ord er en fornuftig lengde. Dokumentasjonen skal diskutere, forklare og vise til alle de viktigste valgene og løsningene på krav til funksjonalitet og krav til teknologi. 800-1000 ord er en fornuftig lengde.
## Documentasjon ## Dokumentasjon
### `React` ### `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. 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. 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.
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.
### `Ajax`
SVG-filene og json-filene 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 oppdaterer nettsiden, vil man komme tilbake på nettsiden med den samme radioknapp-kombinasjonen.
### `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.
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*.
For å skape en flytende og fleksibel layout har det blitt benyttet CSS-Flexbox. Det ble diskutert om CSS-Grid heller skulle brukes, men siden flere av gruppemedlemmene hadde brukt CSS-grid i prosjekt 1 og ønsket å lære seg Flexbox også, ble Flexbox valgt. Siden nettsiden benytter både rader og kolonner, kunne CSS-grid ha blitt brukt istedenfor, men Flexbox funket fint for dette formålet.
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 har gruppa valgt ut noen få komponenter som det er skrevet enhetstester til. Ellers ble det skrevet flere snapshot-tester for å bl.a. teste om websiden ble rendret riktig, samt mer detaljerte snapshot-tester av enkeltkomponenter.
Gruppen har også testet nettsiden manuelt med development build på PC, mobil og andre enheter gjennom nettleser-verktøyet *toogle device toolbar*.
### `Virtuell Maskin`
### `Bruk av git og koding`
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.
### `Kilder`
#3 Try REACTJS Tutorial - Display Json Data. (2018). Hentet fra:
https://www.youtube.com/watch?v=9C85o8jIgUU&fbclid=IwAR08HyNZ-VLLTn50-NO7ogQB21CqWJmxRKlWQqhE3rtPjgMDUsQrbCDNOQU
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. Berebecki, P. (udatert). React JS Radio buttons. Hentet fra CodePen website:
https://codepen.io/PiotrBerebecki/details/mAxPvj
### `Ajax` Bowen, B. (udatert). Load SVG Using Fetch API. Hentet fra CodePen website:
(Si noe om xml og json?) https://codepen.io/osublake/details/OMRdKq
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. Cavalcante, R. P. G. (2018, mai 4). Webpack and Dynamic Imports: Doing it Right. Hentet fra Medium website:
https://medium.com/front-end-weekly/webpack-and-dynamic-imports-doing-it-right-72549ff49234
### `HTML Web Storage` Cronin, M. (2018, juni 12). That data looks so fetching on you: Understanding the JS Fetch API. Hentet fra Medium website:
https://itnext.io/that-data-looks-so-fetching-on-you-understanding-the-js-fetch-api-880eae0c8d25
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. Element.insertAdjacentHTML(). (2019, mars 23). Hentet fra MDN Web Docs website:
https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
### `Responsive Web Design` Fedosejev, A. (udatert). Radio Buttons In React.js - React Tips. Hentet fra
Viewport http://react.tips/radio-buttons-in-reactjs/
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. Fullstack React: Introduction to Promises. (2016, oktober 19). Hentet fra Fullstack React website:
https://www.fullstackreact.com/30-days-of-react/day-15/?fbclid=IwAR3LEuy6bI6J1EkhfSpDb8VOCA-KmsJd3fmX6405jmlhAHXoBhccAeDUsDQ
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*. Gowtham, S. (2019, februar 1). React Testing tutorial for beginners using jest. Hentet fra Reactgo website:
https://reactgo.com/react-testing-tutorial-jest/
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. HTML5 Web Storage. (udatert). Hentet fra
https://www.w3schools.com/html/html5_webstorage.asp
Det er ikke brukt noen eksterne CSS-rammeverk. javascript - Cancel All Subscriptions and Asyncs in the componentWillUnmount Method, how? (2018, august 28). Hentet fra Stack Overflow website:
https://stackoverflow.com/questions/52061476/cancel-all-subscriptions-and-asyncs-in-the-componentwillunmount-method-how?fbclid=IwAR0nyMKDJHRvYrGiH1-TUEhRHr5G8cuSgpsaZpLt4wXhz8p5FYlpzHUZeEw
### `Testing` javascript - Fetch -API returning HTML instead of JSON. (2016, november 15). Hentet fra Stack Overflow website:
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. https://stackoverflow.com/questions/40602751/fetch-api-returning-html-instead-of-json?fbclid=IwAR2yR9LlcLHrtk9kn674l99i-yYekMarOFfWT0HGna1NcGj22-aevk26q_c
### `Virtuell Maskin` Kingsley, S. (2018, august 16). Working with refs in React. Hentet fra CSS-Tricks website:
https://css-tricks.com/working-with-refs-in-react/
### `Bruk av git og koding` React Tutorial - Learn React - React Crash Course [2019]. (2018). Hentet fra
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. https://www.youtube.com/watch?v=Ke90Tje7VS0
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. Singh, P. (2019, april 16). Remove all the child elements of a DOM node in JavaScript. Hentet fra GeeksforGeeks website:
https://www.geeksforgeeks.org/remove-all-the-child-elements-of-a-dom-node-in-javascript/
### `Kilder` Window.localStorage. (2019, august 14). Hentet fra MDN Web Docs website:
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
Zuzevich, D. (2017, januar 29). Build An Image Slider With React & ES6. Hentet fra Medium website:
https://medium.com/@ItsMeDannyZ/build-an-image-slider-with-react-es6-264368de68e4
\ No newline at end of file
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
"name": "prosjekt2", "name": "prosjekt2",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"homepage": "http://it2810-11.idi.ntnu.no/prosjekt2",
"dependencies": { "dependencies": {
"react": "^16.9.0", "react": "^16.9.0",
"react-dom": "^16.9.0", "react-dom": "^16.9.0",
......
...@@ -23,8 +23,6 @@ class MiddlePart extends React.Component{ ...@@ -23,8 +23,6 @@ class MiddlePart extends React.Component{
imageIndex: sessionStorage.currentImage, imageIndex: sessionStorage.currentImage,
textIndex: sessionStorage.currentText textIndex: sessionStorage.currentText
} }
console.log("yo")
console.log(sessionStorage.currentIndex)
} }
else{ else{
this.state = { this.state = {
...@@ -68,6 +66,9 @@ class MiddlePart extends React.Component{ ...@@ -68,6 +66,9 @@ class MiddlePart extends React.Component{
imageIndex: localStorage.favImage, imageIndex: localStorage.favImage,
textIndex: localStorage.favText textIndex: localStorage.favText
}); });
sessionStorage.currentSound = localStorage.favSound
sessionStorage.currentImage = localStorage.favImage
sessionStorage.currentText = localStorage.favText
this._fetchFav = true; this._fetchFav = true;
} }
} }
......
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