Commit 1a422edd authored by Alexander Orvik's avatar Alexander Orvik

Bootstrap project structure

Refactor structure in terms of routing, add hot reloading
and storing media
parent 86593425
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
# Dokumentasjon
## Available Scripts
## Innhold of funksjonalitet
Når vi startet prosjektet, valgte vi å følge utkastet til layouten, uten å ta så mange kreative friheter. Det var først når vi fikk funksjonaliteten på plass, at vi valgte å style nettsiden. Den er fortsatt lik utkastet, men vi tok valg som "dark mode" og "hamburgermeny", som etter vår mening gir mer brukervennliget og er penere estetisk.
In the project directory, you can run:
Etter vår forståelse av oppgaveteksten har vi tre kategorier for hver type medie man kan velge mellom, hvor mediene er "art, poem, sound", og kategoriene er "shrek, car, potato". I tillegg har vi 4 forskjellige bilder/dikt/lyder for hver kategori, slik at man får en ny kombinasjon når man velger en annen tab. Vi har da i alt 36 forskjellige medier, 12 tilhørende hver kategori.
### `npm start`
Vi valgte å ha en velkomsttekst på siden når man åpner den, hvor det står at man må velge kategori for hvert medie, eller trykke knappen for en tilfeldig kombinasjon.
Runs the app in the development mode.<br>
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
The page will reload if you make edits.<br>
You will also see any lint errors in the console.
## Krav til teknologi
React: Vi valgte å fokusere på funksjonelle komponenter med hooks, siden det etter vårt inntrykk er det som vil bli mest relevant i framtiden, men vi har også vist bruk av klassebaserte komponenter i komponenten ConfigurationShowHide. Vi har ikke brukt noen npm moduler (utenom de som tilhører create react app) eller bibioteker, og alle komponenter er selvlagde.
### `npm test`
AJAX: Vi har brukt javascripts fetch API for henting av medier. Alle mediene er lagret i public mappen, alt i public mappen kan fetches med en relativ url path. Diktene er lagret som en array av strenger i en json fil, disse blir fetchet of rendret direkte til ReactDOMen. Bildene og lydfilene blir derimot fetchet som blobber of en javascriptt FileReader er brukt for å gjøre om dette til en URL som kan legges in i src attributten hos en img og audio tag.
Launches the test runner in the interactive watch mode.<br>
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
Caching: Fetch APIen har et alternativ for hvordan data skal caches. Vi har valgt å bruke alternativet force-cache som gjør at alle filer alltid blir cachet og dersom en fil er cachet vil den alltid laste inn den cachede filen. Dette har vi bekreftet at fungerer ved å skru av serveren og se at filer fortsatt kan bli fetchet fra cachen.
### `npm run build`
HTML web storage: For localstorage valgte vi å implementere muligheten for å lagre en favorittkombinasjon, og senere gå tilbake til den kombinasjonen. Denne funksjonaliteten finner man i hamburgermenyen under valg av kategorier. Session storage er brukt til å lagre hvilken tab man ser på. Når websiden initialiseres vil den velge den tabben som er lagret i session storage dersom det er lagret en tab der. Dette gjør at dersom siden blir reloadet vil man beholde valg av tab.
Builds the app for production to the `build` folder.<br>
It correctly bundles React in production mode and optimizes the build for the best performance.
Responsive web design: En viktig del av responsiveness til nettsiden, er hamburgermenyen vi har laget. Den gjør bl.a at siden blir mye enklere å navigere på mobile enheter. Vi har også flytende layout, ved at bildet er ved siden av lyd og dikt på pc, mens de ligger under hverandre på mobile enheter, dette brukte vi media queries til. Vi har også skalert bildet slik at det har en maks størrelse, og aldri tar mer plass enn en viss verdi. viewport er satt til "content="width=device-width, initial-scale=1"", og vi har brukt viewport height og viewport width i css'en. Det meste av det responsive designet er gjort ved bruk av flex-box, men noe av designet er gjort med grid-box siden configuration menyen skal dekke over andre elementer på mobile enheter.
The build is minified and the filenames include the hashes.<br>
Your app is ready to be deployed!
Node.js og NPM: vi har fulgt oppskriften og brukt create-react-app for å lage nettsiden.
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
Testing: Her har vi tatt i bruk en ekstremt enkel snapshot test basert på jest. En snapshot test fungerer ved å ta et 'bilde' av hva som blir renderet av en komnponent og da ser på diffen på bildet og reelle outputet hver gang testen kjøres. Her har vi brukt root-noden som komponenten som blir sammenlignet, som i hovedsak er egentlig ekstremt upraktisk da hver minste endring kommer til å triggere en feil som gjør at man konstant må ippdatere bildet som igjen går litt imot hensikten med snapshot testing. Videre har nettsiden blitt testet på chrome, safari. Videre har vi testet nettsiden på forskjellige mobile enheter, både i horisontal og vertikal stilling, og alt fungerer som de skal.
### `npm run eject`
## Innstalasjon på server:
Deployment av production build var gjort basert på instruksjoner fra arbeidskravet. Prosjektet ble buildet gjennom npm run build. Deretter ble build mappen sendt til webserveren og deretter flyttet til /var/www/html/ og ligger når tilgjengelig der.
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).
### Code Splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
### Analyzing the Bundle Size
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
### Making a Progressive Web App
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
### Advanced Configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
### Deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
### `npm run build` fails to minify
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
## Bruk av git, koding
Vi har etter vår beste evne forsøkt å holde god oversikt i koden, med navngivning som passet best til situasjonene. Vi benyttet oss av issues for å holde kontroll på hva som skulle gjøres, og branches for å ha god oversikt over hva som ble pushet til develop. Vi har også valgt at hver gang en feature er ferdig, må en annen person lese over diffen og godkjenne merge-requesten.
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