FRONT END: GEVORDERD – EXAMEN JUNI 2022
DE UCLL PROMOMATERIAAL WEBSHOP
Dit examen verloopt als gewone opdracht via Toledo. Je zal dit document terugvinden bij
/Examen. Je kan de bijhorende code downloaden van https://github.com/DavidUrting/ucllfrontend-gevorderd-examen-webshop. In geval github niet beschikbaar zou zijn kan je de
code ook downloaden als zip file via /Examen.
Het examen duurt maximaal 2,5 uur. Eens dat je klaar bent, zip je alles en laad je dat weer
op bij de opdracht. Zorg ervoor dat alles wordt opgeladen (dus zowel de /client als de
/server folders).
FUNCTIONELE VEREISTEN
De UCLL promomateriaal webshop wordt gebruikt door studenten voor de aankoop van
leer- en studiemateriaal waarop het logo van UCLL staat. Aangezien er op die manier
reklame wordt gemaakt voor UCLL, wordt het materiaal tegen een goedkopere prijs
aangeboden. Een win-win situatie! Bij grotere bestellingen wordt zelfs nog een korting
toegekend.
De backend ontwikkelaars hebben al hard gewerkt aan een Node/Express toepassing die:



een lijst van alle producten teruggeeft met de id van het product, de naam van het
product en de kostprijs ervan,
een totaalprijs met extra korting berekent op basis van de inhoud van de
winkelwagen. De totaalprijs (zonder korting) moet je zelf berekenen,
een bestelling kan registreren op basis van de inhoud van de winkelwagen en een
gebruikersnaam.
De bedoeling is dat jij – als front end ontwikkelaar – de nodige html, javascript en css voorziet
om van deze toepassing een mooi geheel te maken. De backend moet je dus niet voorzien,
die is er al.
De front end moet het volgende kunnen:
1. Alle producten tonen aan de linkerkant van het scherm. Elk product heeft een ‘+’
knop om een product toe te voegen aan de winkelwagen.
2. Alle producten in de winkelwagen tonen, aan de rechterkant van het scherm.
a. Als er meermaals op de ‘+’ van een product wordt geklikt mag je gewoon
telkens één extra lijn toevoegen aan de winkelwagen.
b. Bonus: kan je de winkelwagen zo maken dat je per product telkens één lijn
toont en een kolom die het aantal artikelen van dat product toont?
3. Verder moet ook de totaalprijs getoond worden, alsook de totaalprijs met korting.
a. De totaalprijs moet je zelf berekenen.
b. De totaalprijs met korting is een supergeheim algoritme dat enkel de backend
developers kennen. Het wordt dus door de backend berekend en
teruggestuurd naar de client.
i. (!) Telkens er op ‘+’ gedrukt wordt moet je de volledige winkelwagen
naar de backend sturen zodat de prijs kan herberekend worden.
4. Als de gebruiker klaar is met de winkelwagen te vullen moet hij/zij een username
invullen en op ‘Bestellen’ klikken. De backend zal dan een order ID (string)
terugsturen. Die string moet je tonen met de vermelding: ‘Bedankt, uw order ORDERID
wordt zo snel mogelijk verwerkt.’ ORDERID vervang je uiteraard met de string die de
backend heeft teruggestuurd.
a. Als er geen username is ingevuld geef je een foutmelding: ‘U dient een
gebruikersnaam in te vullen’.
b. Als de winkelwagen nog leeg is geef je een foutmelding: ‘U moet minstens
één product aan de winkelwagen toevoegen’.
5. Bonus: kan je ook ‘-‘ knoppen voorzien op de items in de winkelwagen om het artikel
te verwijderen of het aantal te verlagen?
TECHNISCHE VEREISTEN
Breid de code uit met het frontend deel. Voor het bundelen van je javascript file(s) mag je
gebruik maken van de webpack (= extra traject) build pipeline. Ook het gebruik van jQuery
behoort tot het extra traject en is dus niet verplicht.
Wat meer info over de ajax functionateliteiten (zie ook de README.md alsook de
commentaar in /server/app.js):



De lijst van alle producten haal je op door een GET call te doen naar /api/products.
Wat je terugkrijgt is een array van product objecten. Elke product object heeft een id
(number), name (string) en cost (number).
De totale prijs met korting haal je op door een POST call te doen naar /api/cart. In de
body moet je de winkelwagen meesturen (als een array van productId numbers
bijvoorbeeld, meer info: zie app.js). Als antwoord krijg je een object dat een
totalPriceWithReduction (number) property heeft. Daarin staat de prijs waarin de
eventuele korting werd meegeteld.
De bestelling van de winkelwagen doe je door een POST call te doen naar
/api/order. In de body moet je ook weer de inhoud van de winkelwagen meesturen
maar ook de username. Dat doe je door een object met username (string) en
cartItems (array) op te sturen. Als antwoord krijg je een object dat een orderId
(string) property heeft.
De backend ontwikkelaars hebben hun code ook gedocumenteerd: lees die documentatie
na indien het niet direct duidelijk is hoe je de API moet gebruiken! Verder is er ook een
Postman collection voorzien: deze kan je gebruiken om de API te exploreren.
Aandacht voor styling is een pluspunt, je moet minstens gebruik maken van 5 en je mag dat
uitbreiden met je eigen CSS. Maar zorg er eerst voor dat de functionaliteit goed zit!
BELANGRIJK
1. Ga stapsgewijs te werk:
o Maak eerst je html structuur op (table, section, ...).
o Maak dan een javascript bestand en voeg dat toe aan je html document.
 Plaats hierin eventueel een console.log. Kan je de log boodschap zien
verschijnen op de console?
o Haal dan alle producten op en toon die op je scherm in de kolommen ‘ID’,
‘Naam’ en ‘Kostprijs (€)’. Dit doe je door een fetch te doen naar
/api/products.
 Opgelet: je bent niet verplicht een table te gebruiken. Je mag
bijvoorbeeld ook Bootstrap cards gebruiken of andere manieren.
o Voeg vervolgens de ‘+’ knoppen toe en koppel de ‘click’ handlers. In de click
handlers zet je een console.log om te controleren of dat al werkt.
o Implementeer dan de functionaliteit van die ‘+’ knoppen:
 Voeg het product toe aan je winkelwagen en werk het scherm bij.
 Bereken dan de nieuwe totaalprijs.
 Doe een POST naar /api/cart met de inhoud van je winkelwagen en
lees de response uit: daarin staat de totaalprijs met korting.
o ...
o Voorzie dan pas specifieke styling en/of bonus functionaliteiten.
2. Als je ergens vastzit: geen paniek!
o Laat het even voor wat het is en werk iets anders uit. Probeer eventueel
bonus-functionaliteit uit te werken: zo kan je toch nog extra punten scoren.
o Probeer er rond te werken/alternatieven te vinden.
3. Dit is een volledig open boek examen, je mag alle materiaal raadplegen.
o Het kopiëren van grote stukken code van internet is niet toegestaan.
o Kleinere stukjes code kopiëren van 1 à 2 lijnen mag wel (vb. van
stackoverflow), maar vermeld dan wel steeds je bronnen (vb. de URL van de
stackoverflow post).
4. Het gebruik van communicatiemiddelen (gsm, chat, discord, email, Teams, …) is niet
toegestaan.
o Het uitwisselen van code/oplossingen is uiteraard helemaal niet toegestaan!
5. Indienen:
o Maak een {Familienaam}{Voornaam}.zip file van je solution. Controleer of al je
files in de zip file zitten.
o De zip file mag je vervolgens opladen via Toledo.
Veel succes!