Doe mee Mijn portaal

Oefeningen: Bouwen met AI

Automatiseren en bouwen, niveau 3. Hoort bij de training Bouwen met AI. Geschreven voor tijdens de training; zelf oefenen kan ook, sla dan over wat de trainer voordoet of klaarzet.

Vijf oefeningen over twee sessies, plus het huiswerk ertussen. Oefening 1 tot 3 in sessie 1, oefening 4 en 5 in sessie 2.

De vaste werkwijze geldt bij elke oefening: eigen taak, "klaar als ..." vooraf, kleine stappen, precies bijsturen, AI stelt voor en jij beslist, geheimen nooit in de chat. En per taak de vier fasen: verkennen, plannen, bouwen, vastleggen.

De trainer heeft vooraf gekozen welke AI-codeerassistent de groep gebruikt (de trainer werkt zelf met Claude Code) en op welk platform je live zet. De voorbeeldopdrachten hieronder zijn geschreven voor een assistent die in een projectmap werkt, bestanden kan maken en bewerken, en commando's kan draaien. Werkt jouw assistent anders, dan zegt de trainer wat je aanpast.

Twee manieren van bijsturen, die je bij elke oefening gebruikt:

[schermafbeelding erbij]
Ik zie: [één zin]. Ik verwachtte: [één zin]. Pas alleen dat aan en laat zien hoe ik het kan controleren.

Je schreef: "[zin uit het antwoord van de AI]". Dat klopt niet: [correctie in één zin]. Pas alleen dat aan.

Na twee correcties die niet werkten: niet een derde keer. Dan:

Stop. Zet alles terug naar de laatst vastgelegde staat. Ik geef een nieuwe opdracht.

En je schrijft de opdracht opnieuw, met erin wat er de vorige keer misging.

Oefening 1. AI interviewt jou, en schrijft de spec (20 min, sessie 1)

Doel: van een idee naar een korte spec die zegt wat de tool doet, wat niet, en wanneer hij klaar is. Je laat de AI de vragen stellen, zodat je niet bouwt op een idee dat alleen in je hoofd bestaat.

Klaar als: je hebt een spec van maximaal één A4 met zeven kopjes (wat, voor wie, doet wel, doet niet, gegevens, klaar als sessie 1, klaar als sessie 2), en hij komt door de haalbaarheidstoets van de handout.

Stappen:

  1. Maak een lege projectmap met een korte naam zonder spaties (bijvoorbeeld urenteller). Start de assistent in die map.
  2. Plak de opdracht hieronder, met je idee in drie zinnen erin. Beantwoord de vragen één voor één. Zeg "weet ik niet" als je het niet weet; dat is een goed antwoord, de AI kiest dan het eenvoudigste.
  3. Lees de spec. Doe de haalbaarheidstoets: één scherm, één soort gebruiker, geen inloggen voor meerdere mensen, geen betalingen, geen koppeling met diensten die je niet kent, gegevens liefst in de browser of in één bestand, past op een A4.
  4. Maak kleiner waar nodig. Alles wat je schrapt gaat naar "doet niet" of op de later-lijst.
  5. Laat de spec opslaan als bestand in de projectmap (SPEC.md).

Voorbeeldopdracht om te kopiëren:

Ik wil een kleine tool bouwen met jou als codeerassistent. Ik kan niet programmeren en dat hoeft ook niet; jij programmeert, ik beslis.

Mijn idee, in drie zinnen: [idee].

Interview me eerst. Stel één vraag tegelijk, maximaal acht vragen, over: wat het precies moet doen, voor wie, wat het niet hoeft te doen, welke gegevens erin gaan en van wie die zijn, en wanneer het klaar is. Als ik "weet ik niet" zeg, kies jij het eenvoudigste.

Schrijf daarna een spec van maximaal één A4, in gewone taal, met deze kopjes:
Wat, Voor wie, Doet wel, Doet niet, Gegevens, Klaar als (sessie 1: vandaag, in ongeveer een uur bouwen), Klaar als (sessie 2: over een week, dan moet het online staan).

Houd het klein: één scherm, één soort gebruiker, geen inloggen voor meerdere mensen, geen betalingen. Stel geen extra functies voor. Sla de spec op als SPEC.md. Begin nog niet met bouwen.

Wat je controleert:

  • Staat er iets in "doet wel" wat je niet gevraagd hebt? Schrappen. De AI stelt graag functies voor; jij beslist.
  • Is "klaar als sessie 1" iets wat je op het scherm kunt zien en één ding dat werkt? Zo niet: kleiner.
  • Gegevens van anderen? Dan: een eenvoudig wachtwoord in "doet wel", en in de training alleen verzonnen gegevens.
  • Snap je elk woord in de spec? Zo niet: laat het uitleggen in gewone taal, en laat het dan herschrijven.

Variant voor wie sneller is: vraag de AI drie dingen te noemen die in de praktijk vaak misgaan bij dit soort tool (bijvoorbeeld: gegevens kwijt bij vernieuwen van de pagina). Zet ze onder "doet wel" of "doet niet". Niet meer dan drie.

Oefening 2. Projectinstructies, verkennen en plan (30 min, sessie 1)

Doel: de AI een geheugen geven (projectinstructies) en een plan laten maken dat jij goedkeurt voordat er iets gebouwd wordt.

Klaar als: er staat een bestand met projectinstructies in je projectmap, en er ligt een plan van maximaal zes stappen waarvan elke stap zegt wat je ziet en welke check de AI zelf draait. Jij hebt het plan goedgekeurd, en er is nog niets gebouwd.

Stappen:

  1. Plak opdracht A: projectinstructies maken. Lees het bestand dat de AI maakt. Staat er iets in wat je niet snapt of niet wilt: citeer de zin en zeg wat anders moet.
  2. Plak opdracht B: verkennen en plan maken. Lees het plan.
  3. Keur goed, of stuur bij: schrap een stap, splits een stap die te groot is, laat een woord uitleggen. Pas als je elke stap snapt, zeg je: "Goedgekeurd. Begin nog niet; ik geef per stap de opdracht."
  4. Schrijf in je logboek: wat je gevraagd hebt, en wat je aan het plan veranderde.

Voorbeeldopdracht A om te kopiëren (projectinstructies):

Maak in de hoofdmap van dit project een bestand met projectinstructies die jij bij elke sessie leest. (Bij Claude Code heet dat CLAUDE.md; gebruik de naam die bij deze assistent hoort.)

Zet erin:
1. Wat dit project is, in drie zinnen, op basis van SPEC.md.
2. Deze regels:
   - Eén taak tegelijk. Doe niets wat ik niet vroeg.
   - Maak eerst een plan en wacht op mijn goedkeuring voordat je bouwt.
   - Na elke stap: draai zelf een check (een test, een build of een schermafbeelding) en zeg me precies hoe ik het zelf kan bekijken.
   - Test wat je bouwde voordat je zegt dat het klaar is.
   - Geheimen (sleutels, wachtwoorden) horen in een .env-bestand dat niet wordt vastgelegd, of in de secret-instellingen van de host. Nooit in de chat, nooit in de code. Vraag mij nooit om een geheim in de chat te plakken.
   - Leg uit in gewone taal, zonder jargon. Gebruik je een vakterm, zet er tussen haakjes bij wat het betekent.
   - Houd het eenvoudig. Geen extra functies, bibliotheken of instellingen die niet nodig zijn voor de spec.
3. Een kop "Beslissingen" (nog leeg) waar we later afspraken bijschrijven, met datum.
4. Een kop "Later-lijst" (nog leeg).

Laat me het bestand zien. Verander verder niets.

Voorbeeldopdracht B om te kopiëren (verkennen en plan):

Verken eerst de projectmap en vat in drie zinnen samen wat er staat. Zeg ook welke opzet (taal, bestanden) je voorstelt en waarom dat de eenvoudigste keuze is die de trainer later live kan zetten op [platform dat de trainer koos].

Maak dan een plan om SPEC.md te bouwen, in maximaal zes stappen. Per stap:
- Wat je bouwt, in één zin in gewone taal.
- Wat ik daarna op het scherm kan zien.
- Welke check jij zelf draait voordat je zegt dat de stap klaar is (een test, een build, of een schermafbeelding).

Stap 1 moet binnen 20 minuten iets zichtbaars opleveren. De stappen tot en met [nummer] samen zijn "klaar als sessie 1" uit de spec.

Begin nog niet met bouwen. Wacht op mijn goedkeuring.

Wat je controleert:

  • Elke stap heeft iets wat je kunt zien en een check die de AI zelf draait. Zo niet: "Stap [nummer] heeft geen check. Voeg er een toe."
  • Stelt de AI een opzet voor met woorden die je niet kent? Vraag: "Leg in gewone taal uit wat [woord] is en waarom ik het nodig heb. Als het niet nodig is, haal het weg."
  • Staan er stappen in die niet in de spec staan? Schrappen.
  • Is er al iets gebouwd zonder dat je goedkeurde? Zet terug en zeg in de projectinstructies nog eens dat je eerst goedkeurt.

Variant voor wie sneller is: vraag de AI om bij elke stap te zeggen wat er misgaat als de stap mislukt, en hoe je dat merkt. Zet dat in het plan.

Oefening 3. Bouwen, één stap tegelijk (65 min, sessie 1)

Doel: stap 1 en 2 van het plan bouwen, met de hele cyclus per stap: opdracht met "klaar als", check door de AI, eigen blik, bijsturen, vastleggen.

Klaar als: "klaar als sessie 1" uit je spec klopt op je eigen laptop, elke gebouwde stap is vastgelegd (gecommit), en er staat één regel onder "Beslissingen" in je projectinstructies.

Stappen, per stap van het plan:

  1. Plak de bouwopdracht hieronder met het stapnummer en de "klaar als"-zin van die stap.
  2. Wacht. Lees wat de AI zegt over zijn eigen check. Kijk dan zelf: open het in de browser of waar de AI zegt.
  3. Klopt het? Dan vastleggen (opdracht hieronder). Klopt het niet? Bijsturen, op één van de twee manieren bovenaan dit bestand. Na twee keer: terug naar de laatst vastgelegde staat en een betere opdracht.
  4. Schrijf één regel in je logboek.
  5. Volgende stap.

Voorbeeldopdracht om te kopiëren (bouwen):

Voer stap [nummer] van het plan uit. Doe niets anders; geen extra's, geen "handige" toevoegingen.

Klaar als: [zin uit het plan].

Draai daarna je eigen check en laat me zien wat je zag. Zeg me dan precies hoe ik het zelf kan bekijken (welk adres of welk commando). Als iets niet lukte, zeg dat eerlijk in plaats van eromheen te werken.

Voorbeeldopdracht om te kopiëren (vastleggen):

Stap [nummer] is goed. Leg de huidige staat vast (commit) met een beschrijving van één regel in gewone taal. Controleer eerst dat er geen geheimen of persoonsgegevens in de vastgelegde bestanden staan. Zet onder "Beslissingen" in de projectinstructies, met datum: [wat je besloot, bijvoorbeeld "gegevens blijven in de browser"].

Wat je controleert:

  • Je hebt het zelf gezien, niet alleen gelezen dat het werkt. De AI zegt "klaar" ook als het niet werkt; dat is de vergissing die de trainer in de demo liet zien.
  • Elke stap is apart vastgelegd. Als je iets moet terugdraaien, draai je één stap terug, niet een uur.
  • Heeft de AI iets gebouwd wat je niet vroeg? Citeer en laat weghalen, of zet het bewust op de later-lijst. Niet stilzwijgend laten staan.
  • Logboek bijgehouden?

Variant voor wie sneller is: stap 3 van het plan, met dezelfde cyclus. Of: vraag de AI een eenvoudige automatische test te schrijven voor het ene ding dat werkt, en hem te draaien. Laat uitleggen wat de test controleert, in gewone taal.

Huiswerk tussen de sessies (hooguit een uur bouwen)

Geen oefening met nummer, wel dezelfde werkwijze.

  1. Eén stap uit je plan, zelf. Dezelfde cyclus als oefening 3: bouwopdracht met "klaar als", check door de AI, eigen blik, bijsturen (hoogstens twee keer), vastleggen. Hooguit een uur. Lukt het niet: zet terug naar de laatst vastgelegde staat en schrijf in je logboek wat je zag. Dat is geen mislukking; het is stof voor sessie 2.
  2. Logboek. Per opdracht: wat vroeg je, wat kwam er, wat deed je ermee, wat zou je anders vragen. Neem het mee.
  3. Spec kleiner maken. Lees "klaar als sessie 2". Schrap wat niet hoeft. Kleiner is beter; alles wat je schrapt kan later nog.
  4. Accounts. Maak een account aan bij het hostingplatform en de online opslagplaats die de trainer koos (instructie in de tussenmail). Nog niets live zetten.
  5. Niets nieuws bouwen. Nieuwe ideeën: later-lijst.

Klaar als: één stap meer vastgelegd dan aan het eind van sessie 1 (of een logboek dat zegt waarom niet), een kleinere spec, en twee werkende accounts.

Oefening 4. Afbouwen en testen (50 min, sessie 2)

Doel: de laatste stappen tot "klaar als sessie 2", en dan twee keer testen: de AI test zijn eigen werk, en jij doet de rode-knop-test.

Klaar als: "klaar als sessie 2" klopt op je laptop, de AI heeft getest en jij hebt getest, de fouten die ertoe doen zijn gerepareerd, en alles is vastgelegd.

Stappen:

  1. Bouw de resterende stappen met de cyclus van oefening 3. Houd je aan "klaar als sessie 2"; de rest is later-lijst.
  2. Om uiterlijk 1:00 (30 minuten na de start van het blok): stop met bouwen, ook als niet alles af is. Leg vast wat werkt.
  3. Plak de testopdracht hieronder. Lees de lijst die de AI maakt.
  4. Doe zelf de rode-knop-test (hieronder). Schrijf op wat jij vindt dat de AI niet vond.
  5. Kies samen met de AI wat gerepareerd moet voor live (wat gegevens kwijt maakt of de pagina onbruikbaar maakt) en wat kan wachten (later-lijst). Laat alleen dat repareren, één ding tegelijk.
  6. Vastleggen.

Voorbeeldopdracht om te kopiëren (de AI test zijn eigen werk):

Test wat je gebouwd hebt alsof je een gebruiker bent die het voor het eerst ziet en de spec niet kent. Doorloop alles wat in SPEC.md onder "doet wel" staat.

Probeer ook bewust:
- een leeg formulier of een lege invoer versturen
- een heel groot getal, een negatief getal, tekst waar een getal hoort
- twee keer snel achter elkaar klikken
- de pagina vernieuwen: zijn de gegevens er nog?
- het scherm smal maken, zoals op een telefoon

Maak een lijst van wat niet klopt, met per punt: wat je deed, wat er gebeurde, wat er had moeten gebeuren. Repareer nog niets; ik kies wat we eerst doen. Zeg het eerlijk als je iets niet kunt testen.

De rode-knop-test (doe je zelf, zonder de AI):

  1. Leeg formulier versturen.
  2. Iets geks invullen (heel lang, heel groot, verkeerd type).
  3. Twee keer snel klikken.
  4. Pagina vernieuwen en kijken of de gegevens er nog zijn.
  5. Op je telefoon, of in een smal browservenster.

Voorbeeldopdracht om te kopiëren (repareren):

Repareer alleen dit: [één punt uit de lijst]. Klaar als: [wat er dan moet gebeuren]. Draai daarna je check en zeg hoe ik het zelf kan zien. Verander niets anders.

Wat je controleert:

  • Vond jij iets wat de AI niet vond? Dat is het punt van twee keer testen. Schrijf het in je logboek.
  • Zei de AI bij een punt "dit werkt al"? Controleer het zelf. Als het niet klopt: citeren en corrigeren.
  • Niets gerepareerd wat niet op de lijst stond.
  • Vastgelegd, met een regel onder "Beslissingen" over wat op de later-lijst ging en waarom.

Variant voor wie sneller is: laat de AI een automatische test schrijven voor het belangrijkste punt van de rode-knop-test (bijvoorbeeld: gegevens blijven bewaard na vernieuwen), en hem draaien. Laat uitleggen wat de test doet. Dat is de check die bij elke volgende stap meedraait.

Oefening 5. Live zetten en afsluitcheck (50 min, sessie 2)

Doel: je tool op een adres dat werkt, met geheimen op de goede plek, en de afsluitcheck die je bij elk volgend project herhaalt.

Klaar als: de URL werkt op je telefoon en op de laptop van een buur; geheimen staan alleen in .env (lokaal) en in de secret-instellingen van de host; alles is gecommit en gepusht; de afsluitcheck is vier keer "ja".

Stappen (de trainer heeft het platform gekozen en deelt een stappenlijst met schermafbeeldingen van dat moment; die gaat vóór deze beschrijving):

  1. Vraag de AI het project klaar te maken voor live (opdracht hieronder). Lees wat hij veranderde; het hoort weinig te zijn.
  2. Zet het project in de online opslagplaats (push). De AI kan dit meestal doen of precies zeggen wat je typt.
  3. Maak op het hostingplatform een nieuw project en koppel het aan je opslagplaats, volgens de stappenlijst van de trainer.
  4. Heeft je tool geheimen (een wachtwoord, een sleutel)? Zet die in de secret-instellingen van het platform, met dezelfde naam als in je .env. Typ de waarde daar, nergens anders. Niet in de chat.
  5. Laat het platform bouwen. Wacht op de URL.
  6. Open de URL op je telefoon. Laat een buur hem openen. Doe de rode-knop-test nog één keer op de live versie, kort.
  7. Afsluitcheck, hardop:
    • Gecommit? (Alles vastgelegd, niets rondslingerend.)
    • Live? (Gepusht, en het platform heeft de laatste versie gebouwd.)
    • Werkt de URL? (Op je telefoon en bij iemand anders.)
    • Geheimen op hun plek? (Alleen in .env en in de secret-instellingen; niet in de code, niet in de chat.)
  8. Zet de URL en de datum onder "Beslissingen" in je projectinstructies. Vastleggen.

Voorbeeldopdracht om te kopiëren (klaarmaken voor live):

We zetten dit project live op [platform dat de trainer koos]. Maak het daarvoor klaar met zo min mogelijk veranderingen. Zeg me vooraf wat je gaat veranderen en waarom, in gewone taal, en wacht op mijn goedkeuring.

Controleer ook:
- dat .env niet wordt vastgelegd en er een .env.example is met alleen de namen van de geheimen, zonder waarden
- dat er nergens in de code een geheim of een persoonsgegeven staat
- dat de tool werkt als een geheim ontbreekt: dan een duidelijke melding, geen kapotte pagina

Vraag me nooit om een geheim in de chat te plakken. Zeg alleen welke naam ik in de secret-instellingen van het platform moet zetten.

Voorbeeldopdracht om te kopiëren (als het bouwen op het platform mislukt; precies bijsturen):

Het live zetten mislukt. Dit is de foutmelding van het platform (ik heb sleutels en adressen weggehaald):
[foutmelding]
Ik verwachtte: een werkende URL. Wat is de meest waarschijnlijke oorzaak, en wat is één ding om te proberen? Verander niets voordat ik ja zeg.

Wat je controleert:

  • De URL werkt bij iemand anders, niet alleen bij jou.
  • Heb je ergens een geheim in de chat geplakt? Dan: nieuw geheim aanmaken, oude intrekken, nieuwe in .env en in de secret-instellingen. Vandaag nog.
  • De afsluitcheck is vier keer "ja". Eén "nee" is een open punt voor je logboek, niet iets om te verzwijgen.
  • Kun je aan je buur in eigen woorden uitleggen wat de tool doet, hoe hij in elkaar zit, waar de gegevens staan, en wat je als eerste zou veranderen? Dat is blok 5 van sessie 2. Lukt een deel niet: laat de AI dat deel in gewone taal uitleggen, en vertel het dan opnieuw. Werkend hebben is niet hetzelfde als snappen.

Variant voor wie sneller is: kies één punt van de later-lijst, doe hem als één taak met de hele cyclus (opdracht met "klaar als", check, eigen blik, vastleggen), push, en kijk of het platform vanzelf de nieuwe versie bouwt. Dat is hoe elk volgend project gaat: één taak, afsluitcheck, klaar.