Ontwerp en maak met een team een website voor je squad met Node en data uit de whois.fdnd.nl API.
Deze leertaak hoort bij sprint 7 "Connect Your Tribe". Dit is een leertaak die je in een team uitvoert.
In het S07W2-01-Squadpage wordt uitgelegd wat je gaat doen.
Elke frontender bij FDND staat in een database die te bereiken is via de API op whois.fdnd.nl. In een team ga je met deze data een website voor je squad ontwerpen en maken, zodat je met elkaar in contact kan blijven.
Je leert met een team een website ontwerpen en bouwen op basis van een bestaande API.
Met je team bedenk en schets je verschillende ideeën voor een website voor je squad. Met de website wil je op een (interactieve) manier mede-studenten kunnen opzoeken, gegevens bekijken, een student pingen, een vraag kunnen stellen, of iets anders. Vervolgens werken alle teamleden een ander idee uit met Node en JSON. Jouw team kiest daarna het beste, mooiste of meest originele ontwerp en deze presenteren jullie aan de squad.
Voor deze opdracht doorloop je alle fases van de DLC analyseren, ontwerpen, bouwen, integreren en testen.
In de analysefase inventariseer je wat er moet gebeuren om een taak uit te voeren en formuleer je een aantal uitgangspunten waar je ontwerp aan moet voldoen.
- Lees de instructies van deze leertaak zorgvuldig door.
- Onderzoek wat je allemaal kan doen met de WHOIS API.
- Bespreek met jouw team wat je aan werk verwacht, en vul een teamvanvas in
- Bedenk hoe jullie gaan samenwerken en plan de belangrijke momenten in. Gebruik Github Projectboard om dit te organiseren
In de ontwerpfase ga je met je team verschillende ideeën voor een website voor je squad bedenken en schetsen.
- Ideegeneratie: Eerst bedenk je met je team verschillende ideeën voor de website.
- Maak een breakdown van de schets, bedenk welke data je uit de WHOIS API kan gebruiken voor je ontwerp.
- Werk je schets netjes uit in Figma, Illustrator of ga meteen los in de browser.
In de bouwfase werken alle teamleden een ander idee uit met Node en JSON.
- Fork deze leertaak en clone deze op jouw computer.
- Open deze leertaak in jouw editor (bijv. Visual Studio Code).
- Open de terminal en voer het commando
npm installin. Je gebruikt NPM om Express inclusief alle afhankelijkheden te installeren. - Start je server met
npm start, en onderzoek wat de code op dit moment doet. - Pas alles aan naar eigen wens.
Als je online wil testen moet je je project publiceren op internet. Omdat we met Node werken, kan dat niet met GitHub Pages, omdat daar alleen statische pagina's kunnen worden gehost. Voor een Node project moet een serveromgeving opgestart worden. Wij gebruiken cyclic.sh als hostingpartij maar je mag natuurlijk je eigen voorkeur volgen als die anders is.
- Commit en Push jouw project naar GitHub
- Login bij cyclic.sh
- Klik op Deploy om een nieuwe App aan te maken
- Selecteer het tabblad Link Your Own om jouw project te publiceren.
- Zoek de juiste repository. Cyclic importeert jouw code en voert
npm startuit. - Er wordt een unieke naam voor jouw project gegenereerd. Op jouw Cyclic pagina zie je alle apps die je hebt aangemaakt
- Open je squad page in je browser, check of alles werkt en voeg de url van de App toe aan jouw repository op GitHub.
In de testfase controleer je of jouw website voldoet aan standaarden. Jouw team kiest daarna het beste, mooiste of meest originele ontwerp en deze presenteren jullie aan de squad.
Deze opdracht is done als:
- Je hebt een website voor je squad ontworpen en gemaakt met Node en de WHOIS API
- Je website is online gepubliceerd
- Je hebt gewerkt volgens de verschillende fases van de development-lifecycle en je iteratieve werkwijze is gedocumenteerd in de Wiki
- Je hebt comments in je Node-code waarmee de code is uitgelegd
- Je hebt comments in de EJS bestanden waarmee een loop en/of andere code is uitgelegd
- Je hebt in de Readme bij 'Kenmerken' uitgelegd wat Node is, wat Express is en wat EJS doet