AI-opdracht voor de cursus

Bouw stap voor stap een eenvoudige wielren-app met AI

Deze opdracht is opgezet als begeleide werkpagina. Je loopt door 5 stappen heen en gebruikt per stap een prompthulp om een goede prompt voor jouw AI-tool te maken.

Uitleg

Zo gebruik je deze opdracht

Je bouwt stap voor stap aan dezelfde app. Je hoeft het niet allemaal zelf technisch te bedenken. Gebruik AI slim: laat de AI eerst korte vragen stellen, werk daarna verder in kleine stappen en blijf in dezelfde chat doorwerken.

Wat ga je maken?

  • Een basis-app met datum, renner, tijd en een knop om op te slaan.
  • Een slimme invoer waarin je ook nieuwe namen kunt toevoegen en waarbij de gegevens worden opgeslagen.
  • Een overzicht van de laatste 10 tijden en een download functie naar Excel.
  • Een tweede tab met een grafiek van de laatste 30 tijden.
  • Een nette en prettig leesbare eindversie.

Vraag de AI niet om meteen alles in één keer perfect te maken. Werk liever per stap en laat de AI eerst 2 of 3 korte verduidelijkende vragen stellen voordat die gaat bouwen.

Blijf in dezelfde chat Werk stap voor stap Vraag om 1 index.html Laat AI eerst vragen stellen

Stap 1

Zet de basis van je app neer

In deze stap maak je de eerste versie van de app. Het hoeft nog niet allemaal slim of compleet te zijn. Het doel is dat je een duidelijke basis hebt met de belangrijkste invoervelden.

Wat maak je in deze stap?

  • Een titel bovenaan de pagina.
  • Een veld voor de datum.
  • Een dropdown voor de renner.
  • Een veld voor de tijd.
  • Een knop om de tijd op te slaan.

Vraag AI om te beginnen met een rustige basisversie. Zeg dat je vooral een eerste werkbaar scherm wilt en nog niet meteen alle extra functies.

  • Vraag om één index.html bestand.
  • Vraag om een simpele en overzichtelijke opmaak.
  • Laat AI eerst 2 of 3 korte verduidelijkende vragen stellen.

Controlepunt

Je bent klaar voor de volgende stap als je een eerste scherm hebt waarop je datum, renner en tijd kunt zien en invullen.

Stap 2

Maak de invoer slimmer en sla gegevens op

Nu breid je de eerste versie uit. Je maakt de invoer prettiger in gebruik én zorgt dat de app gegevens kan onthouden.

Wat voeg je toe?

  • Datum standaard op vandaag zetten.
  • Een eerste lijst met namen in de dropdown.
  • Een veld om een nieuwe naam toe te voegen.
  • Een knop om die nieuwe naam aan de lijst toe te voegen.
  • Datum, renner en tijd opslaan.
  • Gegevens bewaren in localStorage.
  • Eenvoudige controles op lege of ongeldige invoer.

Vertel de AI dat dit een uitbreiding is op je bestaande app. Vraag dus niet om opnieuw te beginnen, maar om je huidige versie slim uit te breiden.

  • Vraag AI om de bestaande code als basis te houden.
  • Laat AI eerst vragen welke namen al in de lijst moeten staan.
  • Vraag om eenvoudige opslag en eenvoudige controles, niet te ingewikkeld.

Controlepunt

Je bent klaar voor de volgende stap als de datum standaard op vandaag staat, je nieuwe renners kunt toevoegen en opgeslagen gegevens na verversen bewaard blijven.

Stap 3

Laat de laatste 10 tijden zien en voeg een Excel-download toe

Opslaan is handig, maar pas echt nuttig als je de resultaten ook meteen terugziet en kunt meenemen naar Excel.

Wat voeg je toe?

  • Een tabel onderaan de pagina.
  • De laatste 10 tijden tonen.
  • Nieuwe invoer meteen zichtbaar maken.
  • De nieuwste tijd bovenaan zetten.
  • Een downloadknop toevoegen voor Excel, bijvoorbeeld als .csv-bestand.

Vraag AI om een overzichtelijke tabel en een eenvoudige downloadfunctie. Het doel is dat je snel resultaat ziet én de gegevens kunt exporteren.

  • Laat AI eerst vragen welke kolommen jij wilt tonen.
  • Vraag om de nieuwste invoer bovenaan te zetten.
  • Vraag om een simpele Excel-download, bijvoorbeeld als CSV.

Controlepunt

Je bent klaar voor de volgende stap als nieuwe tijden direct in het overzicht verschijnen en je de gegevens kunt downloaden voor Excel.

Stap 4

Voeg een tweede tabblad met grafiek toe

In deze stap maak je van de app meer dan een invoerscherm. Je voegt een tweede tab toe waarin je de laatste 30 tijden in een grafiek ziet.

Wat voeg je toe?

  • Een tweede tabblad of knop om naar de grafiek te gaan.
  • Een eenvoudige grafiek van de laatste 30 tijden.
  • Eventueel een filter op renner.
  • Een duidelijk verschil tussen invoer en overzicht.

Houd ook hier de vraag eenvoudig. Het doel is niet een perfecte grafiek, maar een extra laag inzicht. Vraag eventueel om een eenvoudige canvas-oplossing.

  • Vraag om een simpele grafiek, geen ingewikkelde library.
  • Laat AI eerst vragen of je een lijn- of staafgrafiek wilt.
  • Vraag om maximaal de laatste 30 tijden te gebruiken.

Controlepunt

Je bent klaar voor de volgende stap als je tussen invoer en grafiek kunt schakelen en een eerste visuele weergave van de laatste 30 tijden ziet.

Stap 5

Werk de app netjes af

De app werkt nu in de basis. In deze laatste stap maak je hem duidelijker, rustiger en prettiger in gebruik.

Wat verbeter je in deze stap?

  • Rustige kleuren en voldoende witruimte.
  • Probeer de huisstijlkleuren van de KNWU te gebruiken.
  • Duidelijke knoppen en logische indeling.
  • Een actieve tab die goed zichtbaar is.
  • Kleine meldingen zoals “tijd opgeslagen”.
  • Een uitstraling die af voelt.

Vraag niet alleen om “maak het mooier”, maar benoem wat je verwacht. Denk aan rust, duidelijkheid, ruimte en eenvoudige feedback voor de gebruiker.

  • Vraag AI om de bestaande structuur te behouden.
  • Vraag om subtiele verbeteringen, geen compleet nieuw ontwerp.
  • Laat AI eerst vragen welke sfeer jij wilt: sportief, strak of rustig.

Klaar?

Als laatste kun je AI vragen om de complete eindversie van je index.html terug te geven, zodat je die direct kunt testen of online kunt zetten.