Redesign je visitekaartje 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 individueel uitvoert.
In het S07W1-02-Deep-Dive-Node en S07W1-03-API-en-JSON wordt stap voor stap behandeld wat je moet doen.
Elke frontender bij FDND stelt zichzelf binnen de tribe voor door middel van een visitekaartje. De data voor het visitekaartje staat in een database die te bereiken is via de API op whois.fdnd.nl. Met deze data ga je jouw visitekaartje redesignen.
Je leert met Node jouw visitekaartje server-side te maken.
In deze opdracht doorloop je twee keer de fases van de development-lifecycle. Eerst bouw je jouw visitekaartje in Node, daarna doorloop je nogmaals de cyclus om je visitekaartje met een REST API en JSON te (her)ontwerpen, bouwen en publiceren via een hosting systeem voor Node projecten.
In deze eerste ronde bouw je op basis van een voorbeeld jouw visitekaartje uit Sprint 1 exact na. Je besteedt dus geen aandacht aan een herontwerp, dat komt later.
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. Voor je met deze leertaak kan beginnen moet je ontwikkelomgeving ingericht worden door Node te installeren.
^`
(control + `) te gebruiken. Er opent een terminalscherm in de hoofdmap van jouw project.npm install
uit door het in te typen en op enter te drukken. Je gebruikt NPM, de Node Package Manager om een express inclusief alle afhankelijkheden te installeren.
npm start
uit te voeren. Als het goed is komt een melding te staan over het opstarten van de server: Application started on http://localhost:8000, open deze url in je browser.^c
(control + c) in te voeren. Deze toetsencombinatie wordt in de terminal gebruikt om de huidige taak te stoppen en controle (vandaar de c) terug te krijgen van het programma.We slaan deze eerste cycle de ontwerpfase over maar als je wilt kan je nog eens terugkijken naar de ontwerpen die je in Sprint 1: Your Tribe maakte en je verbazen over hoe ver je al gekomen bent in een half jaar ;)
In de bouwfase zet je jouw eerdere visiekaartje over naar Node.
/public
map. Als je dat nodig vindt richt je mappen in onder /public
, bijvoorbeeld /public/style
voor je stylesheets en /public/images
voor je afbeeldingen. Zoals in het college is uitgelegd zijn bestanden in de /public/
map bij het opstarten van jouw Node/Express omgeving bereikbaar op http://localhost:8000
. Als je straks vanuit jouw HTML verwijst dan doe je dat dus naar /style/style.css
als je CSS bestand in het mapje /public/style/style.css
staat.<head>
sectie, inclusief de <body>
openen tag komen in /views/partials/head.ejs
te staan. De </body>
en </html>
tags komen in /views/partials/foot.ejs
te staan. Deze delen zetten we apart neer omdat ze op elke pagina in een site hetzelfde zijn. Met Embedded JavaScript (EJS) kunnen we deze delen includen en hoeven we onszelf minder te herhalen.. DRY FTW!/views/index.ejs
. Let op: overschrijf bij het kopiëren de eerste en laatste regel niet! De opdracht die je hier ziet is de EJS manier om bestanden te includen: <%- include('./partials/head') %>
zegt zoveel als, neem de inhoud van het head.ejs
bestand en plaats dat hier./views/partials/menu.ejs
en include het op dezelfde manier als bij (3).Integreren slaan we over omdat dat met Node een aantal extra stappen kost.
Testen doen we deze cycle maar kort; je checkt of jouw visitekaartje werkt in deze nieuwe omgeving.
npm start
uit te voeren. Als het goed is, komt een melding te staan over het opstarten van de server: Application started on http://localhost:8000, open deze url in je browser.^c
(control + c) in te voeren.Voor je aan de slag kunt met het herontwerpen en bouwen van je visitekaartje moet je jouw gegevens in de WHOIS API aanvullen, daarna bepaal je hoe je te werk gaat.
(Optioneel, als je daar headspace voor hebt) Richt een project board in op GitHub:
Het doel en resultaat van dit project is het opnieuw ontwerpen en ontwikkelen van jouw visitekaartje. Enerzijds leer je nieuwe technieken inzetten, je maakt jouw visitekaartje met Node/Express/EJS gebaseerd op een REST API met JSON. Anderzijds maak je na een half jaar oefening een kaartje wat beter representeert wie jij bent als frontender.
Je realiseert jouw beslissingen uit de ontwerpfase in Node, HTML en CSS.
.ejs
bestanden in /views/
en misschien/views/partials
aan te passen. Zet de verwijzing naar CSS even uit en check door je server te starten met npm start
even of je wijzigingen goed doorgevoerd zijn..css
bestanden aan te passen en check even of je wijzigingen goed doorgevoerd zijn.Fetch API
de aanroep naar whois.fdnd.nl
in server.js
aan, en check of er geen foutmeldingen ontstaan.Als je helemaal klaar bent en alles lokaal werkt ga je verder met het publiceren van jouw project op internet. Omdat we met Node werken is dit iets ingewikkelder dan voorheen, er moet namelijk een serveromgeving opgestart worden. Wij gebruiken cyclic.sh als hostingpartij maar je mag natuurlijk je eigen voorkeur volgen als die anders is.
npm start
uit.https://wandering-hare-overshirt.cyclic.app/
.In de testfase controleer je of jouw aanpassingen werken zoals bedoeld en jouw visitekaartje voldoet aan standaarden.
Het is een goede gewoonte om standaard even wat tests uit te voeren. Besteed hier niet te veel tijd aan, een half uurtje moet genoeg zijn.
Deze opdracht is done als: