Van blauwdruk tot meesterwerk

Praktische tips voor het bouwen van je eigen applicaties die jou weken aan uitzoekwerk besparen

Je wilt proberen zelf een webapplicatie bouwen om je werk / interactie met klanten te automatiseren maar je hebt er geen 30K Euro voor over om het te laten bouwen. Of je bent gewoon nieuwsgierig naar wat er mogelijk is. De beschikbare Artificial Intelligence (AI) tools maken het bouwen van applicaties toegankelijker dan ooit. Maar de juiste aanpak maakt het verschil tussen een frustrerend experiment en een werkend resultaat. Hier zijn een aantal van mijn belangrijkste inzichten uit de praktijk.

De basis

A. Installeer een ontwikkelomgeving

Een ontwikkelomgeving is de fabriek waarin je de applicatie maakt. Visual Studio Code is al jaren een veel gebruikte ontwikkelomgeving. Hierin bouw je je eigen applicaties, maar dit vereist ook best wat technische kennis van hoe je een project inricht. Als je geen ervaring met programmeren hebt, is Cursor een veel logischer start (of de tegenhanger van Google: AntiGravity). Dit komt omdat je in gewone mensentaal tegen de ingebouwde AI-agenten kunt praten. Zij nemen vervolgens de technische handelingen uit handen en voeren zelfstandig taken uit.

Mijn advies: start bij Cursor (https://cursor.com/download). Ik heb een betaald abonnement á 20 euro per maand en daarin loop ik zelden tegen limieten aan.

B. Werk in een virtuele omgeving

Stel je voor: je werkt aan verschillende softwareprojecten op je computer. Project A heeft versie 2.0 nodig van een bepaald hulpprogramma, maar project B werkt alleen met versie 1.5. Hoe voorkom je dat ze elkaar in de weg zitten?

Daar is een virtual environment (virtuele omgeving) voor bedacht. Het is als een afgeschermde werkruimte op je computer waar je project zijn eigen set aan hulpprogramma's kan hebben, zonder dat andere projecten daar last van hebben.

Waarom is dit handig?

  • Geen conflicten: Elk project heeft zijn eigen versies van programma's

  • Schoon werken: Je computer raakt niet vol met allemaal verschillende versies door elkaar

  • Makkelijk delen: Andere ontwikkelaars kunnen jouw project gemakkelijk overnemen omdat alle benodigde onderdelen netjes bij elkaar staan

Hier een aantal terminal commando's voor het 1) aanmaken, 2) activeren en 3) deactiveren van een virtuele omgeving in Cursor:

1) python -m venv venv
2) .\venv\Scripts\activate 
3) Deactivate

Ok. Nu je basissetup staat, gaan we naar de echte tijdwinnaars...

Tip 1: Gebruik zoveel mogelijk frameworks en standaarden

Een enorme timesaver is het gebruiken van standaarden en frameworks. Dit zijn sets van afspraken, beproefde bouwstenen en werkwijzen die duizenden ontwikkelaars vóór jou al hebben gebruikt en hebben verfijnd. In plaats van alles zelf te bedenken, bouw je voort op wat al werkt. Dat scheelt niet alleen tijd, maar zorgt er ook voor dat je code professioneler en onderhoudbaarder wordt. En bovendien bouw je veel sneller!

Het mooie is dat je hiermee je Cursor AI-agenten een kader meegeeft en ze aan regels kunt laten houden - ik leg later uit hoe je dat doet.

Ontwikkelframework

Een ontwikkelframework biedt voorgedefinieerde bibliotheken (libraries) en een duidelijke structuur waardoor je code schoon en beheersbaar blijft. Je hoeft niet zelf het wiel uit te vinden voor basisfunctionaliteiten zoals informatie opzoeken en wegschrijven naar de database, gebruikersauthenticatie of toegang tot het bestandssysteem op de lokale computer.

Dát is je voordeel: je kunt je focussen op wat jouw applicatie uniek maakt, in plaats van alles vanaf nul op te bouwen. Ik heb tot nu toe het meest gewerkt met Python Flask omdat het alles biedt voor relatief eenvoudige applicaties. Maar er zijn vele andere frameworks mogelijk:

  • Django (Python) - compleet framework met alles ingebouwd waaronder een Content Management Systeem waarmee je standaard je database kunt onderhouden.

  • FastAPI (Python) - modern en snel, ideaal voor API's

  • Express.js (Node.js) - lichtgewicht en flexibel

  • Ruby on Rails (Ruby) - "convention over configuration"

  • Laravel (PHP) - elegant en rijk aan functies

  • Spring Boot (Java) - krachtig voor enterprise applicaties

User Interface framework

Waar ik in het begin veel tijd aan kwijt was, was het bouwen van de user interface. Ik wilde dat mijn applicatie er netjes uit zag en ik heb vele gefrustreerde uren geprobeerd formulieren door AI agenten te laten layouten en elke keer deden ze net iets dat ik niet wilde.

Tot ik ontdekte dat er ook frameworks zijn voor de gebruikersinterface. Na wat speurwerk koos ik voor DaisyUI - een component bibliotheek die bovenop Tailwind CSS is gebouwd. Dit versnelde de ontwikkeling van de "interface" enorm. Vanaf nu zag ineens elk scherm er uniform uit.

Wat is DaisyUI precies? DaisyUI (daisyui.com) biedt kant-en-klare UI-componenten zoals knoppen, formulieren, kaarten en navigatiemenu's. In plaats van zelf alle styling te schrijven, gebruik je gewoon class names zoals btn-primary of card en je interface ziet er meteen professioneel uit.

Hoe bespaart het tijd?

  • Consistente uitstraling: Alle componenten passen automatisch bij elkaar

  • Responsive design: Werkt out-of-the-box op mobiel en desktop

  • Theming: Wissel met één regel code tussen complete kleurenschema's

  • Minder CSS schrijven: Focus op functionaliteit, niet op pixels verschuiven

Voor Cursor AI is dit extra handig: je kunt de AI simpelweg vragen "maak een formulier met DaisyUI componenten" en het weet precies welke class names te gebruiken.

UX design patronen

Naast technische frameworks help ik mijn AI-agent ook met een design_patterns.md bestand. Dit is een markdown-document waarin ik beschrijf hoe gebruikersinteracties in mijn applicatie werken. Dit bestand voorkomt dat Cursor bij elke nieuwe feature opnieuw moet bedenken hoe interacties werken. Consistentie is essentieel voor een professionele gebruikerservaring.

Wat staat erin?

  • Hoe formulieren zich gedragen zoals "waar verschijnen foutmeldingen?"

  • Wanneer toon je een loading indicator?

  • Hoe ziet feedback na een actie eruit zoals toast messages / bevestigingen?

  • Navigatiepatronen: welk scherm wordt geladen na het klikken op opslaan?

  • Responsive gedrag: wat gebeurt er op kleine schermen (iPads en smartphones)?

Hoe maak ik een design_patterns bestand aan?

  1. Maak een bestand design_patterns.md (md staat voor MarkDown - dit is een bestandsformaat) in de root folder van je project.

  2. Vraag Cursor dit bestand voor je aan te maken op basis van "best practices". Een voorbeeld van wat er dan zoal in je document komt te staan:

## Formulier validatie
- Valideer real-time tijdens het typen voor directe feedback
- Toon foutmeldingen onder het betreffende veld in rode tekst
- Disable de submit-knop totdat alle velden valid zijn
- Na succesvolle submit: toon groene toast message en redirect naar overzicht

  1. Lees het output bestand van Cursor goed door en pas aan waar je dat wilt. Als je erachter komt dat Cursor telkens een dezelfde fouten maakt bij de User Interactie, maak dan veranderingen aan dit document en Cursor doet voortaan wat je wilt.

Het .cursorrules bestand

Een heel krachtig instrument is het .cursorrules bestand. Dit heeft exact die naam inclusief de punt. Waarom is dit zo krachtig? Dit is een instructieset die Cursor automatisch leest bij elke AI-interactie. Hiermee train je de AI om volgens jouw gekozen standaarden te werken. Het is alsof je een ontwikkelaar hebt ingewerkt die precies weet hoe jij werkt.

Gebruik optioneel het commando /generate gevolgd door je commando om Cursor direct taken te laten uitvoeren op basis van je regels.

Hoe maak je een goed .cursorrules bestand?

  1. Maak het bestand aan in de root van je project (let op: het begint met een punt)

  2. Ga naar de website https://cursorrules.org/ en kies de door jou gekozen ontwikkeltaal en frameworks (in mijn geval: Python Flask, PostGreSQL database, Tailwind CSS voor de styling) en kopieer een passend voorbeeld. Plak dit in je .cursorrules bestand.

  3. Laat Cursor vervolgens jouw project bekijken en laat hem op basis van het gedownloade .cursorrules document een op maat gemaakt .cursorrules document bouwen. Geef hem instructies om de door jouw gekozen "techstack" te gebruiken. In mijn geval:
    - Gebruik de programmeertaal Python, Flask als ontwikkelframework, TailwindCSS voor styling en Postgresql als database.
    - De regels duidelijk met kopjes per categorie te structureren.
    - Verwijs naar documentatie: Voeg links toe naar de officiële docs van je frameworks

  4. Update regelmatig: Als je merkt dat Cursor structureel een bepaalde handeling verkeerd uitvoert, voeg dan een regel toe.

    Een voorbeeld stukje van de kopjes in een .cursorrules bestand

# Ontwikkelframework
- We gebruiken Python Flask met Blueprints voor modulaire opbouw
- Database: SQLAlchemy ORM met PostgreSQL
- Gebruik type hints in alle Python functies

# UI Framework
- Frontend: DaisyUI componenten bovenop Tailwind CSS
- Gebruik semantische HTML5 elementen
- Alle UI moet responsive zijn (mobile-first)

# Code conventies
- Functies en variabelen in snake_case
- Classes in PascalCase
- Maximaal 80 karakters per regel
- Schrijf docstrings voor alle functies

# Design patterns
- Zie design_patterns.md voor UX-richtlijnen
- Error handling: gebruik try-except met logging
- Alle API responses in JSON met standaard structuur: {success, data, error}

Door mij gebruikte tech stack

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5

Tip 2: Begin met het eind voor ogen

Schrijf eerst een lijst met functionele eisen

Begin niet meteen met bouwen. Neem eerst de tijd om helder te krijgen wat je applicatie precies moet doen. Schrijf een lijst met functionele eisen – wat moet de software kunnen? Hier kun je ook een willekeurig ander AI-tool voor gebruiken zoals ChatGPT of Claude.

Besteed hier écht aandacht aan en lees goed door wat er allemaal gegenereerd wordt. Denk goed na of je inderdaad wilt dat het zo werkt. Stel kritische vragen: Klopt deze user flow? Is dit intuïtief? Ontbreekt er iets essentieel?

Als je tevreden bent, leg je de output vast in een markdown-document in je project (bijvoorbeeld functional_design.md). Dit wordt je kompas tijdens het ontwikkelen. Bonus: je kunt Cursor vragen om de functionele designs te reviewen en te verbeteren.

Maak wireframes

Laat Cursor dit bestand vervolgens omzetten in een wireframe – een schets van je gebruikersinterface. Je verbaast je over wat AI met tekst aan UI-design kan doen. Het genereert simpele HTML-pagina's met je belangrijkste schermen, compleet met knoppen, formulieren en navigatie.

Pas als je tevreden bent met de wireframes en het functioneel ontwerp, begin je met écht bouwen. Deze voorbereiding voorkomt dat je halverwege ontdekt dat je fundamentele keuzes verkeerd hebt gemaakt.

Tip 3: Laat de AI zijn eigen werkplanning maken

Dit was voor mij een absolute gamechanger: vraag Cursor om een prompt voor zichzelf te schrijven die de implementatie in stappen uitrolt.

Zoiets als: "Maak een implementatieplan voor deze feature, werk modulair en vraag na elke stap om mijn feedback voordat je verder gaat."

Cursor maakt dan een stapsgewijs plan:

  1. Database model aanpassen

  2. API endpoints maken

  3. Frontend componenten bouwen

  4. Validatie toevoegen

  5. Testen en verfijnen

Na elke stap stopt de AI en vraagt: "Werkt dit zoals verwacht? Mag ik door naar de volgende stap?"

Zo kun je bijsturen en blijf je in control. Ik ontdekte deze aanpak relatief laat, maar de kwaliteit verbeterde direct dramatisch. Je voorkomt dat de AI in één keer een berg code genereert waar fouten diep in verstopt zitten.

Tip 4: Centraliseer je prompts

In het begin werkte ik chaotisch: ChatGPT voor functioneel design, Claude voor tekstuele uitleg, Word voor aantekeningen, en Cursor voor de code. Veel geswitcht, veel gezocht naar "die ene prompt van vorige week".

Oplossing: Maak één markdown-bestand aan in een prompts folder in je project en houd daar je backlog bij. Bijvoorbeeld prompts/backlog.md:

# -------------- Technische implementatieprompt maken --------------
Je bent expert software developer. Maak een prompt voor jezelf om zorgvuldig en stap voor stap onderstaande wensen te realiseren. Maak alleen de prompt en laat die mij reviewen voordat je iets gaat implementeren.
- 

# -------------- inchecken van je software -------------------------
Het is weer tijd om een versie in GitHub in te checken. Bekijk wat er gewijzigd is in de code sinds de laatste commit. Hoe zou een expert ontwikkelaar deze wijzigingen  puntsgewijs samenvatten? Geef de commit een korte maar treffende titel.

Tip 5: Werk met versiebeheer

Installeer GitHub. Niet alleen om je code te backuppen, maar om altijd terug te kunnen naar je laatste werkende versie.

Waarom?

  • Je kunt vrijuit experimenteren – en als het misgaat, kun je je wijzigingen ongedaan maken.

  • Je ziet precies wat er veranderd is tussen versies

  • Je kunt verschillende features parallel ontwikkelen in branches

  • Bovendien deploy je je applicatie zo eenvoudig op een webserver

Die tijdreisknop voorkomt hoofdpijn. Geloof me: de eerste keer dat je per ongeluk een database leeggooit of werkende code overschrijft, wil je Git al hebben ingesteld. Cursor heeft GitHub-integratie ingebouwd. Klik op het Git-icoon links, en je ziet alle wijzigingen. Met simpele knoppen commit en push je naar GitHub.

Laat Cursor je commit-proces automatiseren

Nog een stap verder: je kunt Cursor ook zijn eigen script laten maken voor het inchecken van een nieuwe versie van je project.

Ikzelf heb Cursor een script laten ontwikkelen dat gebruikmaakt van een AI-tool om een automatische samenvatting te genereren van alle zaken die zijn veranderd in de software. In plaats van zelf te typen "diverse bugfixes" of "updates", analyseert het script alle wijzigingen en genereert een heldere, gestructureerde en vooral complete commit message.

Dit verhoogt de kwaliteit van je versiebeheer enorm. Maanden later kun je precies terugzien wat er wanneer is veranderd en waarom. Je toekomstige zelf (of een collega die het project overneemt) zal je dankbaar zijn voor deze duidelijke geschiedenis.

Hoe doe je dit? Vraag Cursor simpelweg: "Maak een script dat de wijzigingen in mijn project analyseert en vergelijkt met de laatste versie in GitHub en automatisch een gestructureerde commit message genereert met behulp van AI." De AI begrijpt wat je bedoelt en bouwt het voor je.

Voor mij is het opslaan van een nieuwe versie in GitHub nu een kwestie van 1 commando intypen. Ik loop alleen de gegenereerde beschrijving na op gekke dingen en die kom ik heel zelden tegen. Easy does it!

Tip 6: Test, test en test nogmaals

AI is niet feilloos – test alles

Cruciaal om te beseffen: AI is en blijft je assistent en niet degene die de leiding heeft. De code die Cursor genereert is een voorstel, maar het blijft AI, dus het is niet feilloos.

Blijf zelf nadenken en stuur bij. Lees de gegenereerde code, begrijp wat het doet, en test of het écht werkt zoals bedoeld. Ik heb meerdere keren bugs ontdekt in wat er op het scherm perfect uit zag (bijv. verkeerde gebruikers bleken toegang te hebben, of de randgevallen waren niet goed).

Automatiseer je tests waar mogelijk

Sommige tests kun je gelukkig automatiseren. Zo heb ik - nadat ik een aantal keer had ervaren dat bepaalde applicatie routes foutmeldingen gaven - Cursor de opdracht gegeven om zogenaamde "smoketests" te bouwen. Daarmee kan ik alle zogenaamde "endpoints" (pagina's van de applicatie) in één keer automatisch testen en weet ik zeker dat ik die eerste foutmeldingen niet krijg. Ik draai deze tests na elke nieuwe oplevering om zeket te stellen dat alle basisfunctionaliteit het nog doet. Voordeel: het bespaart vooral tijd, maar bouwt ook aan het vertrouwen in je applicatie

Je kunt Cursor vragen om test-scripts te genereren. Vraag bijvoorbeeld: "Maak een smoketest die alle API endpoints controleert" of "Schrijf unit tests voor de gebruikersregistratie functie".

Maar onthoud: geautomatiseerde tests testen wat je ze opdraagt te testen. Blijf ook handmatig experimenteren met je applicatie, klik op rare plekken, vul gekke waardes in. Gebruikers zijn creatief in het vinden van bugs die je niet had voorzien.

Aan de slag - veel succes en plezier met bouwen!

Deze tips besparen je weken, zo niet maanden van trial-and-error. Pak een kop koffie, open Cursor en werk van boven naar beneden. Volg de stappen, experimenteer, maak fouten en leer. En deel vooral je ervaringen – met mij of met anderen die pionieren in deze nieuwe manier van ontwikkelen. We staan aan het begin van een revolutie in softwareontwikkeling. Samen leren we sneller.