Codelabs

In deze sectie vind je verschillende codelabs om jezelf te ontwikkelen als programmeur. Lees dit artikel goed door voor je aan de slag gaat!

Wat is een codelab?

Een codelab is een verzameling van opdrachten die steeds meer kennis en kunde vereisen en daardoor oplopen in moeilijkheid.

Hoe is een codelab gestructureerd?

De meeste codelabs zijn opgedeeld in verschillende onderwerpen die bestaan uit twee soorten opdrachten:

• Oefeningen
• Toetsen

Oefeningen zijn bedoeld om bekend te raken met de nieuwe onderwerpen. Bij het maken van deze opdrachten kun je docenten, internet of zelfs AI om hulp vragen om zaken uit te leggen!

Toetsen zijn bedoeld om te controleren of je de nieuwe onderwerpen goed begrijpt. Hoewel wij dit niet controleren, is het de bedoeling dat je deze zoveel mogelijk zonder hulp maakt. Als je vastloopt kun je natuurlijk altijd een docent om hulp vragen, maar vaak betekent dit dat het wellicht handig is om de oefenopdrachten nog een keer te maken!

Kun je de opdrachten door elkaar heen maken?

Alles kan, de opdrachten staan echter wel op volgorde van de benodigde kennis en zijn daarmee dus oplopend in moeilijkheid. Merk je dat een opdracht te moeilijk is, ga dan terug naar eerdere opdrachten.

Hoe begin je met een codelab?

Voor een codelab is een startproject nodig. Deze kun je via de Git-tool op Brightspace voor jezelf aanmaken, kies dan voor “2025 - 2026: Codelabs”. Dit kan pas nadat jezelf via de Course Selector hebt ingeschreven voor “Propedeuse SE - semester 1”.

Tenzij anders vermeld kun je alle codelabs in slechts één kopie van dit startproject maken.

Hoe begin je met het startproject?

In het kort:

1. Haal met Git de repository binnen op je computer.
2. Open de map in VSCode.
3. Installeer de packages van de package.json.

Dit hoef je maar eenmalig uit te voeren.

Hoe begin je met een opdracht?

Het startproject dat je voor jezelf aanmaakt is nagenoeg leeg. Aan het begin van elke opdracht vind je een commando die je vanuit VSCode uitvoert, bijvoorbeeld:

npx @hboictcloud/codelab-cli new programming/opdracht1

Dit zorgt er dan voor dat de benodigde bestanden van de opdracht voor je worden klaargezet in de /apps. Daarna kun je de rest van de instructies van de opdracht volgen.

Waar bestaat een opdracht uit?

Alle opdrachten hebben een soortgelijke opzet:

• Opzet
• Beschrijving
• Stappenplan
• Hints en andere opmerkingen

Elke opdracht komt daarnaast met een geautomatiseerde test om te controleren of je oplossing klopt.

Hoe maak je een opdracht?

Je maakt de opdracht met de programmeertaal TypeScript. Het startproject geeft je de benodigde materialen om hiermee te kunnen werken.

Samenvattend werkt je startproject met:

• NodeJS om code op basis van JavaScript uit te kunnen voeren op je computer.
• Vite om code geschreven in TypeScript om te zetten in JavaScript.
• Vitest om code automatisch te testen.
• ESLint om code te controleren op standaarden.

Na het uitvoeren van het commando aan het begin van de opdracht, voer je eenmalig een npm install uit.

Daarna kun je vanuit de map van de opdracht met npm run dev de code opstarten. Ieder keer dat je nu de code aanpast zal die automatisch opnieuw opstarten.

Ben je klaar met de opdracht? Dan kun je met npm run test de code controleren op fouten!

Kun je gemaakte opdrachten als bewijs gebruiken in Portflow?

Dat kan zeker! De automatische tests genereren een webpagina met de resultaten, deze worden via Gitlab Pages gepubliceerd. Van deze resultaten kun je screenshot maken en op Portfolow uploaden, tesamen met een link naar je gemaakte opdrachten.