Ontwerp en maak voor een opdrachtgever een interface waar gebruikers blij van worden
Deze leertaak hoort bij sprint 11 "Pleasurable UI". Dit is een leertaak die je in een team uitvoert voor een opdrachtgever.
In het college S11W1-01-Sprintplanning en S11W1-02-Feature-branches-pull-requests wordt de opdracht en de werkwijze uitgelegd.
Je leert hoe je met een team een interactieve website kan ontwerpen en maken.
Je werkt in een team aan de website voor een opdrachtgever. Zorg dat je duidelijk afspraken maakt en elkaar dagelijks op de hoogte houdt van vorderingen. Samen met jouw team ben je verantwoordelijk voor de planning, het samenwerkingsproces én het eindresultaat.
Deze opdracht gaat over alle fases van de DLC analyseren, ontwerpen, bouwen, integreren en testen.
In de analysefase inventariseer je wat er moet gebeuren om de leertaak uit te voeren. Bekijk en bespreek al het gemaakte werk, maak afspraken met je team en een planning.
- Lees de instructies van deze leertaak met je team zorgvuldig door
- Bekijk de verschillende fases van de DLC en wat je per fase gaat doen
- Bekijk de planning van sprint 11 en wat je per week gaat doen
- Bespreek met het projectteam wat je aan werk verwacht en maak aantekeningen. (wat komt je bekend voor, wat heb je al vaker gedaan of wat lijkt je lastig)
- Bekijk het gemaakte werk van de teamleden zodat jullie een duidelijk beeld krijgen van wat er al gemaakt is
In de analysefase bespreek je als team welke werkzaamheden er zijn, wie wat gaat doen en maak je een planning. Er is veel werk aan de winkel deze sprint, maak afspraken om elke dag aan het project te werken en hoe jullie elkaar op de hoogte houden van de vorderingen.
- Één teamlid forkt de leertaak en voegt teamleden toe als 'collaborators'
- De andere teamleden clonen de geforkte-repo, zo kun je makkelijk wijzigingen doorvoeren en ophalen
- Maak een project board aan en koppel het aan de gezamenlijke repository om bij te kunnen houden wie wat doet
- Plan voor de aankomende weken de reviews en noteer de planning in jullie project board.
- Doe dagelijks een standup, bespreek met je team welke werkzaamheden er zijn en wie wat heeft gedaan.
- Gebruik het project board om grip te houden op de planning, sleep taken naar done als ze klaar zijn, schrijf nieuwe taken als dat nodig is.
In de ontwerpfase bepaal je met je team wat je gaat maken. Bepaal de sitemap & UML diagram van jullie website en per pagina de url/routes. Schets daarna een wireframe & breakdown per onderdeel van de website. Maak tot slot code-afspraken.
Bepaal welke pagina's jullie gaan ontwerpen en bouwen, welke url's daarbij horen en de data die erbij hoort. Doe dit met het hele team zodat iedereen op de hoogte is en jullie ideeën kunnen uitwisselen:
- Teken een sitemap met alle pagina's voor de opdracht voor de opdrachtgever (overzicht-, detail-, formulierpagina, etc ...)
- Schrijf per pagina de url en de parameters die moet worden meegestuurd
- Werk alle routes uit: Schets de functies en methodes die worden uitgevoerd en de bijbehorende EJS
- Noteer welke data wordt opgehaald en gepost met de Directus-API en of het een GET of POST is
- Schrijf ook op welke data wordt doorgegeven aan een volgende functie, methode of view
Schets per pagina en onderdelen gezamenlijk een wireframe en/of wireflow en maak een breakdown van de HTML, CSS en Client-side JS. Het is belangrijk om dit gezamenlijk te doen, nu maak je met het team afspraken over code, semantiek en naamgeving.
Maak voor elke pagina, of onderdeel, een ontwerp op basis van de huisstijl. (Bijvoorbeeld in Figma) Dit wordt het ontwerp dat jullie gaan realiseren. Het ontwerp zal tijdens de werkzaamheden veranderen. Dat is prima. Soms zal je de veranderingen bijhouden in het Figma file, soms is dat niet nodig.
Maak code afspraken met je team over de Node-code, (semantische) HTML, gestructureerde CSS en conventies. Denk na over de HTML structuur en nesting van elementen, en het voorkomen van layout shifts, toepassen van perceived performance en loading hints aan de browser en het toepassen van responsive images. Maak afspraken over de volgorde van de CSS, van generiek-naar-specifiek. Bedenk een goede volgorde in de Node en de routing. Maak afspraken over het schrijven van comments. Etc ..
In de bouwfase realiseer je de beslissingen uit de ontwerpfase. Met het team werk je op 1 code base. Zet je code Mobile First op en werk met Progressive Enhancement. In je team werken jullie met de feature branches.
Met je team ga je allemaal aan features werken, jullie maken verschillende variaties van dezelfde features, of je verdeelt de werkzaamheden en werkt aan verschillende features.
Als je aan een feature gaat werken maak je eerst op GitHub een nieuwe branch aan vanaf de main branch, vervolgens pull je deze naar je lokale systeem. Je maakt regelmatig commits en implementeert de 'feature'. Als je klaar bent push je alles naar github en doe je vanaf de feature-branch een pull-request naar main. In het pull-request wordt jouw code bekeken, getest en goedgekeurd door jouw teamleden.
Pas de code afspraken toe en en doe een code-review met je team voordat je de code merged (integreert) met de main branch.
Zorg dat je met je team Mobile First bouwt. Zet eerst de (semantische) HTML van de pagina's en/of onderdelen op. Pas daarna CSS toe om de huisstijl goed toe te passen. Voeg daarna media-queries of andere responsive CSS technieken toe voor M, L en of XL schermen.
Bouw de website volgens het principe van Progressive Enhancement. Zorg dat eerst de functional en reliable laag het goed doet, daarna de usable laag, voordat je gaat experimenteren met de pleasurable UI.
In de integratiefase voer je de aanpassingen door zodat iedereen ze kan zien en er op verder kan bouwen.
- Integreer jouw code naar de gezamenlijke repo
- Maak een pull-request voor de feature waar je aan hebt gewerkt
- Handel het pull-request af, zorg voor een helder gedocumenteerd pull-request door bij de afhandeling relevante berichten te typen.
- Zorg dat je teamgenoten de nieuwe code integreren
In de testfase controleer je of jouw aanpassingen werken zoals bedoeld.
Definitions of done
Deze opdracht is done als:
- Je hebt je website samen ontworpen en gemaakt en de website is online gepubliceerd
- Je hebt je proces bijgehouden van het iteratief (samen)werken in de Wiki
- Je toont aan dat je in de bouw-, integratie- en testfase verschillende methoden en technieken hebt ingezet om samen te werken met code
- Je hebt client-side scripting technieken gebruikt om een interface te ontwerpen en maken waar gebruikers blij van worden