Fork deze leertaak en ga aan de slag. Onderstaande outline ga je gedurende deze taak in jouw eigen GitHub omgeving uitwerken. De instructie vind je in: docs/INSTRUCTIONS.md
Voor funda heb ik meerder pagina's gemaakt waarbij je als user je ge creeerde lijsten ziet mer daarin de huizen die je aan een bepaalde lijst hebt toegevoegd. Bij zo'n huis kan je ook een star rating achterlaten + een text weld wil je eventueel nog wat anders over het huis delen
1e user story: Als user kan ik bij de link die naar de lijsten pagina gaat zien welke lijsten ik allemaal heb.
2e user story: in zo'n lijst zie ik de huizen die ik heb toegevoegd en kan ik een star rating bij ze achterlaten
In elke fase van de DLC heb ik meerdere technieken gebruikt om mijn werk zo goed mogelijk te maken
analyse
In de analyse fase was ik op de eerste dag bezig geweest met mijn team met het maken van een (de)briefing. In zo'n (de)briefing vind je dingen zoals informatie over het bedrijf en de opdrachtgever, opdrachts omschrijving en bepaalde afspraken over de opdracht.
Bij het bedrijfs bezoek stelde ik wat vragen over de opdracht waarbij ik met verduidelijking en voorstellen kwam. Daarbij documenteerde ik ook hun antwoord op mijn vraag met daarbij een link met hoe ik dat heb aangepakt.
als laatst heb ik voor mezelf opgeschreven de structuur van mijn opdracht er uit komt te zien zodat ik alvast een beetje een idee heb met wat ik moet schetsen en bouwen
ontwerp
Bij het ontwerpen heb ik verschillende soorten schetsen gemaakt zowel op pen en papier als in figma om mij een duidelijker beeld tegeven van hoe mijn website eruit komt te zien.
Als eerst begon ik een simpele UML diagram te schetsen. Met deze schets begon ik beeld te krijgen welke http protocol ik moet gebruiken, naar welke pagina's je kan gaan en welke naam elke pagina krijgt
Daarna heb ik in figma https://www.figma.com/design/TPpMxivU4jLHzIJUg49wrq/Funda-%3A)?node-id=0-1&t=h4fqYRflYJI2NGpr-0 een breakdownschets gemaakt. Deze schets heeft ervoor gezorgd dat ik weet hoe ik mijn website er uit wil laten zien en welk element alles krijgt.
De laatste schets is een zero state schets. Deze schets geeft mij beeld hoe de lijst.ejs eruit komt te zien wanneer je een lijst hebt aangemaakt. In zo'n zero state staat een welkoms boodschap met daarbij een korte instructie voor de gebruiker met wat hij precies moet doen.
bouwen
Heb gewerkt met verschillende soorten code (ejs, css, serverside-js en clientside-js)
-
node: dit project werkt met node.js
-
de package die erbij hoort is express: die gebruik ik voor server.js
-
nodemon: dit is optional, maar wel een handige toel om te gebruiken
-
ejs: Deze sprint heb ik vergeleken met de andere sprints meer met partials gewerkt. Partials zijn bepaalde onderdelen die je in een ejs file maakt en vervolgens in een andere ejs kan stoppen met
<%- include('nav.ejs') %>. -
css: hier is niet veel bijzonders. Wat hier anders is is dat de pagina's nu hun eigen css file hebben om de code meer leesbaar te maken.
-
serverside-JS: met de server js zorg ik ervoor dat elke pagina de juist data krijgt. Naast dat heb ik met de server ook een functie kunnen maken dat je je star rating op een bepaald his kan sturen naar de directus api met een post method
-
clientside-JS: zelfde als de server maar dit zorgt ervoor dat de pagina niet refresehd en die vervolgens ook bepaalde styling geeft aan elementen die vervolgens laten zien dat zo'n post gelukt is
integreren
In deze fase is dat ik mijn werk push naar mijn git repo en vervolgens om de tijd er een pull request er van maak. Deze pull request is nodig, omdat ik met de opdracht gever heb afgesproken dat hij af en toe naar mijn code kan kijken en vervolgens er feedback op kan geven.
In deze integratie fase zie je dus hoe ik een pull request maak en wat ik daar allemaal inzet
testen
In deze fase voer ik verschillende tests uit om er zeker van te zijn dat het werk dat ik maak ook goed is.
De eerste test die ik heb gedaan is een performance test waarbij ik kijk hoe goed alles op mijn website runt.
De 2de test is een user test. Waarbij een user gaat kijken of de scenarios die ik heb geschreven ook duidelijk zijn op mijn website en geeft eventueel feedback.
De 3de test is een korte pe (progressive enhanccement test). Bij zo'n Pe test kijk ik of alles werkend is wanneer javascript uit staat en ook css. Als iets ontbreekt of iets niet werkend is laat ik vervolgens zien hoe ik dat heb opgelost
- clone de code. klik op de groene knop code en clone het of download zip.
- als je node hebt open je de terminal. Boven aan vind je de terminal button of klik ctrl + `
- type
npm installom alle packages te downloaden om de server te kunnen starten. - dan type npm start of npm run dev om de server te starten.
- wil je de server sluiten doe dan dit in de terminal ctrl + c.
link van mijn site: https://proof-of-concept-tw2p.onrender.com/
This project is licensed under the terms of the MIT license.