Januari 2021 - 2022
Januari 2021 - 2022
Notitie
Exameninhoud
Let op, de voorbeeldexamens zijn gebruikt in het academiejaar 2021 - 2022 en komen dus niet volledig overeen met de leerstof van dit academiejaar. Je kan de opgaven waar met class components gewerkt wordt natuurlijk wel maken met functiecomponenten, de oefening met recoil en useEffect kan je maken met react-query. Tenslotte kan je voor elke vragen testen schrijven. De voorbeeldexamens geven dus wel een goed beeld van de complexiteit van het examen. Het examen zal dit academiejaar kleiner zijn omdat alle leerstof beter samenhangt en we geen 3 verschillende manieren meer moeten testen.
Maak een nieuw React project aan, zorg er voor dat alle standaard bestanden in de src map verwijderd worden en je vanaf nul begint. Download vervolgens onderstaande startbestanden en plaats deze in je nieuwe project.
In de startbestanden kan je een CSS-bestand vinden, zorg dat dit voor je volledige project gebruikt wordt.
Daarnaast zijn er in de startbestanden ook enkele API-klassen te vinden, deze pas je niet aan. In de API-klassen is documentatie voorzien voor elke functie. De bestanden shoppingBasketAPI.js en productAPI.js gebruik je doorheen het examen, de andere 2 files heb je niet rechtstreeks nodig, deze worden enkel gebruikt door de code in shoppingBasketAPI.js en productAPI.js. Je mag enkel gebruik maken van de geëxporteerde functies.
Om dit examen succesvol te maken zijn volgende bibliotheken nodig:
npm install react-spinners uuid cancelable-promise
Het examen bestaat uit het opbouwen van een "webshop" waarmee gebruikers producten kunnen bekijken en deze toevoegen aan hun winkelmandje.
Hou volgende punten in acht tijdens het maken van je examen:
- Alle asynchrone GET (getProduct, getProductById, getBasket) oproepen moeten correct afgehandeld worden.
- Indien je problemen hebt met de routing voeg je de componenten onder elkaar toe aan de home page.
- Indien je problemen hebt met de "admin view" voeg je de admin functionaliteit toe aan de "user view".
- Zoek NIET naar CSS problemen, als de website er niet exact uitziet zoals in het screenshot is dit geen probleem. Het is enkel belangrijk dat je het meegeleverde CSS bestand op de correcte locatie plaatst en correct linkt in je applicatie.
- Zit je echt vast op een probleem, dan ga je beter voort naar de volgende opgave in de plaats van te blijven zoeken. Ook als je code niet 100% werkt kan je punten verdienen.
Je hebt 3u en 15 minuten de tijd voor dit examen.
Navbar
Bouw een NavBar component waarin volgende links aanwezig zijn
- Products: Verwijst naar een pad "/products"
- Shopping Basket: Verwijst naar een pad "/basket"
Naast deze 2 links is er ook een checkbox aanwezig die aangeeft of de site in admin modus staat of in gebruikers modus. Maak gebruikt van context om de waarde van deze checkbox bij te houden.
Om onderstaande layout te bekomen kan je de Navbar component omringen in een div met de CSS-klasse 'navbar'.
Products pagina
Bouw een class component Products die bezocht kan worden via het '/products' pad. Deze component toont een overzicht van alle producten in de webshop. Om dit overzicht te bouwen maak je gebruikt van de getProducts() methode uit het bestand productAPI.js.
Een product bestaat uit de naam van het product, de gemiddelde rating gemeten over alle reviews heen en de shortDescription. Tenslotte zijn er 2 knoppen aanwezig, de eerste knop wordt gebruikt om naar de detailpagina te gaan, de tweede knop wordt gebruikt om het product toe te voegen aan het winkelmandje. Hiervoor kan je gebruikmaken van de functie addProductToBasket uit het bestand shoppingBasketAPI.js.
Tijdens het laden van de componenten wordt de Loading component getoond die in de startbestanden aanwezig is.
Om onderstaande layout na te bouwen, kan je een product omringen met een div waaraan de CSS-klasse 'product' toegevoegd wordt. Daarnaast kan je de volledige applicatie omringen in een div met de CSS-klasse 'container'.
Als de website zich in "Admin modus" bevindt, dan wordt er bovenaan een extra knop getoond waarmee een nieuw product aangemaakt kan worden. Daarnaast worden de knoppen ook aangepast, de eerste knop verwijst nog steeds naar de detailpagina. De tweede knop wordt gebruikt om het product te verwijderen. Hiervoor kan je de functie deleteProduct() gebruiken uit productAPI().
Shopping basket
Maak een nieuwe component ShoppingBasket die gebruik maakt van Recoil voor state management. Deze component toont een overzicht van alle producten die de gebruiker toegevoegd heeft aan het winkelmandje. Verder kan de gebruiker het aantal keer dat een product in het winkelmandje zit verhogen of verlagen. De gebruiker kan tenslotte op de naam van een product klikken om naar de detailpagina gebracht te worden. Tijdens het uitwerken van de opgave kan je gebruik maken van de removeProductFromBasket(), addProductToBasket(), getBasket(), en updateBasket() functies uit het bestand shoppingBasketAPI.js. Niet elke functie is nodig, welke je gebruikt hangt af van hoe je de functionaliteit geïmplementeerd hebt.
Voor deze oefening is demo data voorzien, als de vorige opgave gelukt is, kan je hier nog steeds aan beginnen ( automatisch ingeladen in de getBasket() methode). De Loading component wordt opnieuw getoond tijdens het laden van de inhoud van het winkelmandje.
Details
Bouw een component ProductDetails waarmee de details van een product bekeken kunnen worden. Gebruik hooks om de data op te halen via de getProductById() functie uit het bestand productAPI.js.
Voor een product wordt de titel getoond en de beschrijving. Daarnaast wordt er een overzicht gegeven van alle attributen en alle reviews voor het product. De reviews worden standaard geminimaliseerd getoond, de gebruiker kan op de knoppen "Show more" en "Show less" klikken om de reviews respectievelijk dicht of open te klappen.
Als de applicatie zich in "admin mode" bevind, dan kunnen attributen toegevoegd en verwijderd worden. Natuurlijk moeten deze wijzigingen bewaard worden nadat de pagina herladen wordt.