Skip to content

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.

Wat moet ik geïnstalleerd hebben staan?

Installeer alleen de software die je nog niet eerder hebt geïnstalleerd:

  1. Installeer Visual Studio Code, deze kun je hier downloaden.

  2. Installeer de volgende plugins voor Visual Studio Code. Dit kan via de browser, of vanuit Visual Studio Code zelf in de Extensions sectie van de linker menubalk:

  3. Installeer NodeJS, deze kun je voor jouw systeem downloaden via https://nodejs.org/en/download/prebuilt-installer.

    • Let op! Installeer versie 22.x.x!

  4. Installeer en configureer Git, voor uitleg zie de HBO-ICT Knowledgebase.

Hoe begin je met het startproject?

Deze stappen hoef je maar eenmalig uit te voeren:

  1. Clone het aangemaakte project met Git naar je computer, dit kan je via de terminal doen met een git clone commando, vanuit Visual Studio Code zelf of met een visueel programma als Fork.

  2. Open na het clonen de map in Visual Studio Code met File > Open Folder....

  3. Ga in de menubalk naar View > Open View... en zoek naar “NPM”. Als je nu in de Explorer-sectie op de package.json klikt, krijg je een extra paneel erbij met de naam “NPM Scripts”.

  4. In het “NPM Scripts”-paneel, klik met rechts op package.json en klik op Run Install. Of ga in de menubalk naar Terminal > New Terminal en voer handmatig het commando npm install in.

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 een terminal in 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.

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 resultaat in de console. Van deze resultaten kun je screenshot maken en op Portfolow uploaden, tesamen met een link naar de oplossingen van de gemaakte opdrachten.