Bouw je eerste nuttige app met AI

Stap 1: Beschrijf het probleem in je eigen woorden

Boodschappen doen doet bijna iedereen, en dat maakt het een perfect eerste project. Je hoeft niets van programmeren te begrijpen om te zien of een boodschappenlijst werkt: je typt brood, melk en eieren in, je ziet het totaal en je vinkt dingen af zodra je ze gekocht hebt. Het resultaat kun je deze week al echt gebruiken.

Voordat je een AI-tool opent, maak je deze drie zinnen af op papier of in een notitie. Dit is de belangrijkste programmeervaardigheid van het hele boek: een wens omzetten in concrete regels.

1. Ik moet opschrijven… (bijvoorbeeld: elk artikel, hoeveel ik ervan nodig heb en de prijs per stuk).
2. Ik wil dat het programma uitrekent… (bijvoorbeeld: de prijs van elke regel en het totaal voor alle boodschappen).
3. Ik weet dat het programma werkt als… (bijvoorbeeld: twee artikelen van 25 per stuk geven 50, en een artikel afvinken verandert het totaal niet).

Stap 2: Bouw de eerste kleine versie

De eerste versie is één bestand dat in je webbrowser opent. Er hoeft geen ontwikkelomgeving geïnstalleerd te worden, er is geen server en je hoeft niet in te loggen. Kopieer de prompt hieronder precies zoals hij is naar je AI-assistent (Claude, ChatGPT of iets vergelijkbaars).

Help me mijn eerste eenvoudige app te bouwen. Ik ben een absolute beginner.

Maak een boodschappenlijst in één bestand met de naam boodschappen.html dat ik in mijn webbrowser kan openen. Zet alle stijlen en alle JavaScript in dit ene bestand, zonder externe bibliotheken.

Ik wil de naam van het artikel, het aantal en de prijs per stuk invoeren. Een knop voegt het artikel toe aan de lijst. Toon de prijs van elke regel en onderaan het totaal voor alle boodschappen. Laat me een artikel verwijderen en als gekocht markeren. Een artikel als gekocht markeren mag het totaal niet veranderen.

Weiger een lege naam, ongeldige getallen, een negatieve prijs en een aantal van nul of minder. Accepteer in de prijs zowel een decimale komma als een decimale punt.

Leg eerst kort het plan uit. Schrijf daarna de volledige code en de precieze stappen om het bestand op te slaan en te openen. Voeg nog geen andere functies toe.

1. Kopieer de code. Gebruik de kopieerknop in het antwoord van de AI, zodat je de hele code krijgt, van de eerste tot de laatste regel.
2. Sla het op als boodschappen.html. Open een eenvoudige teksteditor (Notepad op Windows, TextEdit in de modus voor platte tekst op een Mac), plak de code en sla hem op als boodschappen.html. Kies 'Alle bestanden' als bestandstype, niet 'Tekstdocumenten'.
3. Open het in de browser. Dubbelklik op het bestand of sleep het naar een browservenster. Je zou je boodschappenlijst moeten zien, niet een pagina vol code.

Stap 3: Controleer of het niet alleen een mooi plaatje is

Een app die er goed uitziet, is nog geen app die werkt. Loop deze tabel regel voor regel door en vergelijk wat je ziet met het juiste resultaat. Dit is je eerste echte test.

Als een regel niet klopt, repareer de code dan nog niet met de hand. Vertel de AI precies welke regel misging, wat je invoerde en wat je in plaats daarvan zag, en vraag hem alleen dat ene probleem op te lossen.

Stap 4: Breng zelf één wijziging aan

Breng nu je eerste wijziging aan zonder dat de AI hem voor je schrijft. Vraag de AI: 'Waar in mijn code staat de kop van de app?' Hij wijst je een regel aan die er ongeveer zo uitziet: <h1>Boodschappenlijst</h1>.

1. Zoek de kop. Open boodschappen.html in je teksteditor en zoek de regel die de AI aanwees.
2. Verander de tekst. Vervang de woorden tussen <h1> en </h1> door je eigen titel, bijvoorbeeld 'Zaterdagboodschappen'. Verwijder de punthaken niet.
3. Opslaan en vernieuwen. Sla het bestand op, ga terug naar de browser en vernieuw de pagina. Je nieuwe titel zou moeten verschijnen.

Vraag de AI daarna om je eigen bestand in drie delen uit te leggen, met jouw code als voorbeeld. Je zult zien dat elke webapp uit dezelfde drie lagen bestaat:

Stap 5: Leer de app iets nieuws

Echte programma's groeien in kleine stappen. Voeg één nieuwe functie toe en test daarna opnieuw. Stuur de AI in hetzelfde gesprek dit vervolgverzoek:

Voeg een budget toe aan mijn boodschappenlijst. Laat me het bedrag invoeren dat ik wil uitgeven. Toon hoeveel er over is. Als het totaal boven het budget komt, toon dan een duidelijke waarschuwing met het bedrag waarmee ik erover zit. Laat al het andere precies zo werken als voorheen, en laat me het volledige bijgewerkte bestand zien.

Je hebt nu een echte app gebouwd, gestart, getest en aangepast. Dat is nog niet alles wat programmeren inhoudt, maar het is de routine die je in elke volgende les herhaalt: duidelijk beschrijven, de AI laten genereren, controleren aan de hand van verwachte resultaten en steeds één ding tegelijk veranderen.