README.md 3.22 KB
Newer Older
Jens Kristian's avatar
Jens Kristian committed
1
2
3
4
# Project structure
* https://reactjs.org/docs/faq-structure.html

# Resources
Sander Haga's avatar
Sander Haga committed
5
* https://alligator.io/react/tabs-component/ 
Jens Kristian Espevik's avatar
Jens Kristian Espevik committed
6
* https://www.taniarascia.com/getting-started-with-react/
Sander Haga's avatar
Sander Haga committed
7
8
* https://reactjs.org/docs/faq-ajax.html
* https://www.youtube.com/watch?v=sBws8MSXN7A&t=1466s
Sander Haga's avatar
Sander Haga committed
9
10
11

# Krav til funksjonalitet

Sander Haga's avatar
Sander Haga committed
12
#### Responsive Web Design
Bendik's avatar
Bendik committed
13
14
15
Responsive design ble lagt til sent i prosessen. På grunn av manglende kunnskap om viewport, flex og grid ble det noe manglende finpuss på stylen. 
Vi har brukt media queries for å skille mellom stor og liten skjerm. Viewport har blitt brukt for tekststørrelse så den ikke blir alt for liten i forhold til skjermen.
Vi har brukt grid for å få til et flytende layout. Det er vanskelig å bedømme om vi har et skalerende bilde, ettersom vi ikke rakk å få til at bildet blir lastet inn riktig.
Sander Haga's avatar
Sander Haga committed
16

Sander Haga's avatar
Sander Haga committed
17
# Krav til bruk av teknologi
Sander Haga's avatar
Sander Haga committed
18

Sander Haga's avatar
Sander Haga committed
19
#### React
Sander Haga's avatar
Sander Haga committed
20

Sander Haga's avatar
Sander Haga committed
21
22
23
24
I _MediaTypes.js_ har vi en arrowfunksjon __categories__ som er med på rendre listen over de forskjellige mediatypene, kategorisert riktig og med tilhørende radio buttons.
__handleChange__ i _App.js_ skal ønskelig egentlig håndtere endring av state ved endring av valg av kategori. Den gjør ikke helt som den skal, men det er så langt vi kom med implementasjonen.
__handleClick__ i _App.js_ lagrer de nåverende valgene til local storage når knappen nederst på siden trykkes. Dette printes så ut i konsollen for å se at det stemmer med de faktiske valgene.

Sander Haga's avatar
Sander Haga committed
25
#### AJAX
Sander Haga's avatar
Sander Haga committed
26

Bendik's avatar
Bendik committed
27
28
29
30
AJAX har blitt delvis inmplementert, ettersom gruppen ikke fikk til å fetche noe som helst før ca klokka 21 på innleveringsdagen.
Det ble implementert ved hjelp av å legge til en state i ArtView, og gruppa la til fetch-funksjonene inni ComponentDidMount. Da gruppa til slutt fikk det til, dukket det opp to problemer som vi ikke har rukket å fikse:
nemlig at lyden ikke blir lastet inn riktig, og at vi endte opp med ren tekst som SVG-bilde. Plana var å bruke en DOMParser, men gruppa hadde ikke tid til å finne ut hvordan det funker.
Planen for å fikse forskjellig utstilling for hver ArtView var å bruke tallet til ArtView (0,1,2,3) for å peke på hvilken tab man er i.
Sander Haga's avatar
Sander Haga committed
31

Sander Haga's avatar
Sander Haga committed
32
#### HTML Web Storage
Sander Haga's avatar
Sander Haga committed
33

Sander Haga's avatar
Sander Haga committed
34
I _App.js_ håndteres den lokale lagringen av valgene som brukeren har for øyeblikket med funksjonen __handleClick__.
Sander Haga's avatar
Sander Haga committed
35
Her er funksjonen skrevet slik at man klan sjekke at riktig data er lagret, ved å skrive den ut i konsollen.
Sander Haga's avatar
Sander Haga committed
36
37
Det var også krav om å implementere session storage, men dette fikk vi dessverre ikke tid til å implementere.
Slik vi har skjønt det gjøres dette på veldig lik måte som ved local storage.
Sander Haga's avatar
Sander Haga committed
38

Sander Haga's avatar
Sander Haga committed
39
#### Node.js og NPM
Sander Haga's avatar
Sander Haga committed
40

Sander Haga's avatar
Sander Haga committed
41
42
43
For å sette opp prosjektet og få noe kjørbart rett fra start, brukte vi facebook's [create-react-app](https://github.com/facebook/create-react-app) via Node.
Her brukte vi da Node til å kjøre prosjektet på en lokal server på pcen, da ved __npm start__.

Sander Haga's avatar
Sander Haga committed
44
45
46
47
48
#### Bruk av Git

Vi har gjennom hele prosjektet passet på å branche ut da vi selv skulle implementere en egen funksjon.
Her kunne vi dog vært flinkere på å navngi branchene vi brancha ut i, siden vi kunne møt på tilfeller hvor vi ville kjørt tilbake til en tidligere kjent versjon av prosjektet.
Uansett, siden vi var flinke til å branche ut og inn slapp vi mange unødvendige mergeconflicts, som sparte oss mye tid.