26 KiB
Les 3: Cursor - AI-Powered Code Editor
Docenttekst (Spreektekst voor Tim)
Totale lesduur: 3 uur (180 minuten) Totale spreektijd: ~90 minuten (verdeeld over blokken) Hands-on praktijk: ~75 minuten Pauze: 15 minuten (10:15-10:30)
BLOK 1: WELKOM & MEDEDELING (10 min)
Slide 1: Titelslide - Welkom Les 3, Cursor!
[09:00 - 09:02]
"Goedemorgen iedereen, welkom bij Les 3! Vandaag gaan we kennismaken met Cursor, een code editor die echt gemaakt is voor developers. Dit is geen random AI tool – het is gebouwd VOOR programmeurs. In de vorige les hebben jullie gemerkt dat OpenCode wat problemen had: token limits, EACCES errors, en niet echt ontworpen voor professionele development. Cursor lost dat allemaal op. We gaan hem vandaag installeren, je eerste project bouwen, en je zult zien hoe snel je daarmee dingen kunt maken."
[Glimlach, maak oogcontact. Stel de energie in voor een praktische, hands-on les.]
Slide 2: Planning vandaag
[09:02 - 09:05]
"Dit is de planning voor vandaag. We starten met een korte terugblik op waarom Cursor beter is dan OpenCode. Dan gaan we Cursor installeren en je account opzetten – dat gaat snel. Daarna laat ik alle features zien: Chat, Inline Edit, Composer, Tab Completion, en @mentions. We doen een interfacetour zodat je precies weet waar alles zit.
Vervolgens duiken we in het inrichten van Cursor Skills – dat is belangrijk, je gaat framework documentatie inladen zodat de AI beter kan helpen. We maken je eerste .cursorrules file, en ik leg uit hoe je request limit management moet denken.
Om 09:40 doen we een live demo: ik bouw in real-time een Next.js project van nul tot werkend. Dan krijgen jullie rond 10:00 een praktische opdracht. Jullie bouwen zelf een project, en we hebben een pauze van 10:15 tot 10:30. Na de pauze werken jullie verder, en we afsluiten met het delen van jullie resultaten, een samenvatting, en huiswerk."
[Wijs naar timeline op slide. Ga niet te snel. Geef studenten een gevoel van progressie.]
Slide 3: Terugblik Les 2 - Waarom Cursor beter is
[09:05 - 09:08]
"Laten we even teruggaan naar Les 2 met OpenCode. Veel van jullie hebben vast gelopen tegen problemen, toch? Token limits die onverwacht opraken, EACCES permission errors als je externe packages wilde installeren, en eigenlijk voelde het meer als een AI chatbot dan als een echte code editor.
Cursor is fundamenteel anders. Het is GEBOUWD voor developers. Cursor ziet je hele codebase tegelijk – Chat werkt niet op fragmenten, maar snapt je hele project. De AI completion (Tab completion) is ingebouwd en super snel. Bovendien: het Hobby plan is helemaal gratis, en studenten kunnen upgraden naar het Student plan, ook gratis, via cursor.com/students. Geen creditcard nodig.
En het allerbelangrijkste: Cursor heeft een INGEBOUWDE terminal. Je kunt node -v, npm install, en git commands rechtstreeks uitvoeren zonder naar een ander venster te hoppen. Alles gebeurt in één editor."
[Maak oogcontact. Zeg duidelijk "gratis" – dat is een belangrijk voordeel.]
Slide 4: Wat is Cursor? Features en pricing
[09:08 - 09:10]
"Oké, wat IS Cursor precies? Het is eigenlijk VS Code – dezelfde editor die de helft van de wereld gebruikt – maar dan met krachtige AI features ingebouwd. Je krijgt vijf hoofdfeatures:
Eerste: Chat (Ctrl+L). Je kunt vragen stellen over je code. De AI ziet je hele codebase en kan context begrijpen. Je kunt vragen 'Hoe werkt deze functie?' of 'Wat doet dit component?'. Wees specifiek in je vragen, dan krijg je betere antwoorden.
Tweede: Inline Edit (Ctrl+K). Je selecteert code, geeft een instructie zoals 'Zet dit om naar Tailwind classes', en de AI edit precies dat stukje. Super handig voor kleine aanpassingen.
Derde: Composer (Ctrl+I). Dit is voor grotere taken. Je kunt zeggen 'Voeg een product pagina toe met filtering en cart functionaliteit', en de AI genereert meerdere files tegelijk. Echt krachtig.
Vierde: Tab Completion. De AI voorspelt je code. Je begint te typen, en het suggereert wat je waarschijnlijk wilt. Je drukt Tab en klaar. Dit kost GEEN requests – het is gratis!
Vijfde: @mentions. Je kunt context geven door @file, @folder, @web, en @docs te gebruiken. @docs is echt belangrijk: je kunt framework documentatie inladen, zodat de AI tegen de juiste versie van React of Next.js praat.
Nu: pricing. Het Hobby plan is gratis en volstaat voor het meeste. Je krijgt beperkte requests – precies genoeg om te oefenen. Als je Student ben, kun je naar cursor.com/students gaan en upgraden naar Student, ook gratis, met veel meer requests."
[Toon de vijf features op je vingers. Zeg "GRATIS" luidop voor Tab Completion – veel studenten snappen niet dat dit geen request kost.]
BLOK 2: INSTALLATIE & SETUP (20 min)
Slide 5: Download en installatie
[09:10 - 09:14]
"Goed, laten we beginnen met installatie. Je gaat naar cursor.com en klikt op Download. Cursor draait op Mac, Windows, en Linux – dus voor iedereen. De installer is heel eenvoudig: je downloadt het, opent het, sleep je Cursor naar je Applications folder, en klaar. Als je op Windows bent, run je de .exe en volg je de stappen.
Dit kost ongeveer twee minuten. Als je al VS Code hebt, hoef je niks te desinstalleren – Cursor en VS Code kunnen naast elkaar bestaan zonder problemen."
[Navigeer naar cursor.com en wijs de download knop aan. Laat zien hoe het eruit ziet op Mac en Windows (screenshot).]
Slide 6: Account aanmaken en upgraden
[09:14 - 09:18]
"Zodra Cursor open is, maak je een account aan. Je hoeft NIET direct Student plan te nemen – begin met Hobby. Je geeft je emailadres en een wachtwoord in. Cursor stuurt je een bevestigingsmail.
BELANGRIJK: als je Student bent, upgrade je NA deze eerste setup. Je gaat naar cursor.com/students, logt in met diezelfde email, en kiest Student plan. Geen creditcard, geen gedoe – je werkt gewoon mee met onze les en je bent gedekt.
Na login zie je je Hobby account. Dan gaan we gelijk verder met setup."
[Toon account maken op je eigen machine. Zeg duidelijk: "Hobby EERST, Student plan LATER". CHECKPOINT: check rond of iedereen ingelogd is.]
Slide 7: Interface tour
[09:18 - 09:22]
"Oké, je bent ingelogd. Laten we de interface doornemen zodat je weet waar alles zit.
Links zie je de Activity Bar – kleine iconen voor Files, Search, Source Control, en Run & Debug. Dit is hetzelfde als VS Code.
Daaronder zie je de Sidebar – dit is waar je bestanden staan als je Files opent.
In het midden: de Editor. Dit is waar je code schrijft en bewerkt.
Aan de rechterkant – en dit is NIEUW vergeleken met normale VS Code – de Chat Panel. Dit open je met Ctrl+L. Hier stel je vragen over je code.
Onder de editor zie je de Terminal – Ctrl+backtick, dus Ctrl+` – hier voer je commands uit.
Het mooie is: ALLES zit in één window. Je hoeft niet tussen VS Code en ChatGPT heen en weer te springen."
[Beweeg je cursor rond op de interface. Duid elke component aan. Open de Chat Panel met Ctrl+L, sluit het weer met Escape.]
Slide 8: Terminal setup check SAMEN
[09:22 - 09:30]
"Nu gaan we even checken of je setup klaar is. Dit doen we via de Terminal. Open Terminal met Ctrl+backtick – dus Ctrl+`.
Je ziet prompt. We gaan drie commands checken:
Eerste: node -v – dit geeft je Node.js versie. Je wilt versie 18 of hoger. Als je error ziet 'command not found', moet je Node.js installeren via nodejs.org.
Tweede: git --version – dit geeft je Git versie. Versie 2.20 of hoger is prima.
Derde: npm -v – dit is de Package Manager die met Node.js komt. Ook 7.0 of hoger.
Vierde: npx -v – dit is ESSENTIEEL. npx gebruiken we straks om create-next-app te draaien. Als npx niet werkt, kun je geen nieuw project aanmaken. npx komt normaal mee met npm, dus als npm werkt, werkt npx ook. Maar even checken!
Wie errors ziet, geen paniek. Steek je hand op, ik help je. Dit duurt twee minuten per persoon."
[Open je eigen Terminal. Typ de vier commands. Laat zien wat output eruitziet. Sta twee minuten stil en help studenten die problemen hebben.]
[CHECKPOINT: zorg dat iedereen node, git, npm EN npx werkend heeft. Dit is essentieel voor de rest van de les.]
BLOK 3: CURSOR FEATURES (15 min)
Slide 9: Chat Panel - Vragen over je code
[09:30 - 09:36]
"Nu duiken we in de échte kracht van Cursor: de Features. Laten we beginnen met Chat Panel.
Je opent Chat met Ctrl+L. Ik open het nu even op mijn scherm. Je ziet een textbox waar je kunt typen. Het bijzondere: Cursor ziet je HELE project, niet gewoon het stukje code dat je hebt geselect.
Stel je voor: je hebt een Next.js project met 15 componenten. Je kunt in Chat vragen: 'Hoe werkt de authentication flow in dit project?' en de AI snapt je hele setup en geeft een ingewikkeld antwoord.
Tips voor goede Chat vragen:
- Wees specifiek. Zeg niet 'Fix dit' maar 'Zet alle inline styles om naar Tailwind classes en zorg dat de layout hetzelfde blijft.'
- Geef context. 'In de ProductCard component, de border is nu blauw, kan hij rood zijn en dikker?'
- Stel vervolgvragen. De AI onthoudt wat je eerder vroeg.
Chat kost één request per bericht. Hop voorzichtig – je hebt beperkte requests op Hobby."
[Open Chat (Ctrl+L). Typ een voorbeeld vraag. Laat zien hoe antwoord zich opent.]
Slide 10: Inline Edit - Snelle code changes
[09:36 - 09:41]
"Volgende feature: Inline Edit (Ctrl+K). Dit is voor als je kleine stukken wilt aanpassen.
Stel je voor: je hebt een component met inline styles – die lelijke style={{color: 'red', marginTop: '10px'}}. Je wilt dit naar Tailwind. Je selecteert die hele component code, drukt Ctrl+K, en je typt: 'Zet alle inline styles om naar Tailwind classes, keep the same styling.'
Cursor selecteert precies dat stukje, geeft een preview, en je ziet de diff. Je kunt dan een diff accepteren of afwijzen. Super handig voor refactoring.
Voorbeeld in mijn hoofd: Input: Component met inline styles Instructie: 'Convert to Tailwind' Output: Dezelfde component, maar nu className='text-red-600 mt-2.5'
Dit kost ook één request. Gebruik het voor kleine, chirurgische aanpassingen."
[Maak een voorbeeld component met inline styles. Demonstreer Ctrl+K en de AI vervanging.]
Slide 11: Composer - Multi-file grote taken
[09:41 - 09:46]
"Nu het heavyweight: Composer (Ctrl+I). Dit is voor als je GROTE dingen wilt doen – dingen die meerdere files raken.
Stel je voor: je hebt een Next.js app met één pagina. Je wilt een heel nieuwe feature: een Admin Dashboard met login, user list, en stats panel. Dit raakt misschien 5 bestanden: nieuwe route, nieuwe component, styles, database queries, alles.
In plaats van dit in stukken te vragen in Chat, openen je Composer met Ctrl+I. Je zegt: 'Voeg een Admin Dashboard toe met login, user management, en stats. Zet het op /admin route.'
Composer genereert ALLES tegelijk – alle files, alle imports, alle routing. Je ziet een preview, klikt 'Accept', en BOEM – je project heeft een werkende admin dashboard.
Dit is échte time-saver. En ja, dit kost ook één request – niet meer, niet minder, want Cursor snapt dat je één logische taak doet."
[Open je eigen project. Open Composer (Ctrl+I). Laat zien hoe je een multi-file taak kunt beschrijven.]
Slide 12: Tab Completion - AI code voorspelling
[09:46 - 09:50]
"Feature vier: Tab Completion. Dit is mijn favoriet. En het BELANGRIJKSTE: dit kost GEEN requests. Nul. Gratis.
Je begint gewoon code te typen. Terwijl je typt, ziet Cursor wat je waarschijnlijk wilt doen. Je typt:
const handleClick = () => {
En Cursor suggereert al wat je waarschijnlijk volgende doet. Je drukt Tab en het wordt aanvaard. Je typt verder, Tab, verder, Tab. Dit gaat super snel.
Waarom is dit gratis? Omdat Tab Completion niet intensief is voor Cursor – het is lokale voorspelling, niet een volledige AI analyse. Dus gebruik dit VEEL! Dit moet je reflexmatig doen.
Tip: als je een suggestion ziet die je niet wilt, druk je gewoon Escape of tik je wat anders. Geen probleem.
Dit is echt de feature waar je sneller in je code wordt als je het goed gebruikt."
[Demonstreer Tab Completion in je editor. Typ langzaam zodat Cursor suggestions toont. Druk Tab en laat zien hoe snel dit gaat.]
Slide 13: @mentions - Context voor je vragen
[09:50 - 09:55]
"Laatste feature: @mentions. Dit is hoe je de AI context geeft.
Je kent het van Slack en Discord: als je @iemand typt, tag je ze. In Cursor Chat doe je iets soortgelijks.
Je kunt typen:
- @file – je verwijst naar een specifiek bestand. Voorbeeld: '@pages/api/auth.js write a logout endpoint'
- @folder – je verwijst naar een hele folder. Voorbeeld: '@components analyze this folder and tell me architecture'
- @web – de AI zoekt het web op. Voorbeeld: 'how do I connect to @web stripe payment gateway?'
- @docs – DIT IS HEEL BELANGRIJK – je verwijst naar framework documentatie. Voorbeeld: '@docs latest react patterns for state management'
@docs is een game changer. Als je @docs docs react typen, zal de AI antwoorden tegen de officieële React documentatie, niet tegen oude tutorials. Dit voorkomt dat je advice krijgt van 2019.
We gaan straks je Skills opzetten, en daar laad je @docs in. Ongelofelijk powerful."
[Typ in Chat: '@docs how do I use hooks?' Laat zien dat niks gebeurt totdat Skills ingesteld zijn – dat doen we volgende slide.]
BLOK 4: SKILLS, RULES & REQUESTS (15 min)
Slide 14: Cursor Skills - Framework documentatie inladen
[09:55 - 10:05]
"Oké, volgende stap. Ik zei net dat @docs belangrijk is. Daarvoor moeten we eerst je Cursor Skills instellen. Dit is hoe je documentatie inlaadt zodat de AI weet tegen welke versies het praat.
We doen dit SAMEN, dus volg mee op je eigen machine.
Stap 1: Ga naar Settings. Op Mac: Cmd+, (command komma). Op Windows: Ctrl+, (control komma). De Settings paneel opent.
Stap 2: Je zoekt naar 'Features' en je klikt op Features.
Stap 3: Je zoekt naar 'Docs' – je ziet 'Cursor Docs' instelling. Daar klikt je op.
Stap 4: Je ziet een + knop. Je klikt erop. Nu kun je documentatie toevoegen. Dit zijn de drie die ik aanraad:
- Next.js: je gaat naar nextjs.org/docs en je pakt die URL. Voeg toe.
- React: react.dev is de officieële React docs. Voeg toe.
- Tailwind CSS: tailwindcss.com/docs. Voeg toe.
Na toevoegen kun je in Chat @docs gebruiken en de AI leest tegen jouw documentatie. Test het: type in Chat '@docs what is the latest way to do routing in next.js?' en je krijgt antwoord uit de officieële Next.js documentatie, niet uit random StackOverflow.
Dit is echt belangrijk voor professioneel werken."
[DOEN, niet demo. Zorg dat iedereen dit meegedaan heeft. Help met technische vragen. CHECKPOINT: vraag "Iedereen Skills ingesteld?" en wacht op bevestiging.]
Slide 15: .cursorrules - Jouw AI richtlijnen
[10:05 - 10:12]
"Nu gaan we een .cursorrules bestand maken. Dit is NIET handmatig geschreven – Cursor genereert dit voor je.
Een .cursorrules file is een bestand in de root van je project waarin je aan Cursor zegt: 'Hey, als je met mijn code werkt, volg deze richtlijnen.'
Voorbeeld richtlijnen:
- 'Alle componenten moeten TypeScript hebben type annotations'
- 'Gebruik Tailwind, geen CSS modules'
- 'Nederlandse comments in de code'
- 'Altijd error handling toevoegen'
Dit is SUPER handig omdat je je preferences maar één keer ingesteld hebt, en dan volgt de AI altijd.
Hoe maak je het? Heel makkelijk:
Stap 1: Je opent Chat (Ctrl+L).
Stap 2: Je plakt deze prompt:
'Genereer een .cursorrules bestand voor een Next.js + Tailwind CSS + TypeScript project. Include richtlijnen voor: code style, components best practices, error handling, en Nederlandse comments. Output het volledige bestand klaar om te kopieën.'
Stap 3: Cursor genereert een complete .cursorrules file. Je kopieert dit.
Stap 4: In je project maak je een nieuw bestand genaamd .cursorrules in de root folder. Je plakt de content en je saved.
Klaar! Dát is één request, en nu volgt Cursor altijd jouw rules.
Dit is echt tijd besparen. Je zegt nooit meer 'gebruik TypeScript' – dat weet Cursor al."
[Open Chat. Paste je eigen .cursorrules prompt (aanwezig op je machine). Laat zien hoe output eruitziet. Demonstreer kopieën naar nieuw bestand.]
Slide 16: Request management - Budget uitzetten
[10:12 - 10:20]
"Oké, de grote vraag: requests. Op Hobby heb je BEPERKT aantal requests. Je wilt ze slim gebruiken.
Hier is de breakdown:
- Tab Completion: GRATIS. Ongelimiteerd. Gebruik dit voor kleine dingen.
- Chat: 1 request per bericht. Wees voorzichtig.
- Inline Edit: 1 request. Snel maar denk je in voor je tikt.
- Composer: 1 request, ongeacht hoe groot. Dit is eigenlijk heel voordelig voor grote dingen.
Budget tips:
Eén: Denk eerst, prompt daarna. Voordat je iets vraagt, bepaal je wat je PRECIES wilt. Maak een kopje koffie, bedenk je vraag, tik dan. Dit voorkomt vijf mislukte requests.
Twee: Combineer taken. In plaats van drie aparte Chat vragen, maak je één grote vraag. Zeg alles in één bericht.
Drie: Gebruik Tab Completion voor kleine dingen. Import statements, losse variabelen, functies. Dit bespaart requests.
Vier: Composer voor grote refactors. Als je iets aan meerdere files moet doen, doe je het in Composer, niet in aparte Chat vragen.
Vijf: @mentions voor efficiency. @docs helpt je beter vragen stellen, minder 'wat is het beste patroon' vragen.
Op Hobby krijg je genoeg om deze hele les te doen en meer. Maar als je gaat echt projecten bouwen, upgrade je naar Student. Dan heb je veel meer."
[Toon scherm met request counter. Leg uit waar je request status ziet (rechtsboven in Cursor).]
BLOK 5: LIVE DEMO (15 min)
Slide 17: Live Demo - Van nul naar werkende website
[10:20 - 10:35]
"Oké, genoeg theorie. Ik bouw nu in real-time een werkende Next.js website. Dit doet twee dingen: één, je ziet hoe snel dit echt gaat, en twee, je ziet de volledige workflow die je straks zelf doet.
Stap 1: Project setup
mkdir my-demo-site
cd my-demo-site
git init
Ik heb een folder, git aan. Cursor openen.
Stap 2: Next.js project
npx create-next-app@latest . --typescript --tailwind --app
Ik zeg Yes op TypeScript, Yes op Tailwind, Yes op App Router. Dit duurt ongeveer een minuut.
Stap 3: Dev server
npm run dev
Nu draait http://localhost:3000 met de default Next.js pagina.
Stap 4: .cursorrules via Chat
Ctrl+L. Ik paste mijn prompt. Één request. Copy. Make file .cursorrules. Done.
Stap 5: HeroSection via Composer Ctrl+I. 'Create a Hero section component in app/components/HeroSection.tsx with a headline, subheading, and a Call-to-Action button. Use Tailwind classes. Make it look modern.'
Cursor genereert de hele component. Één request. Ik accepteer.
Stap 6: Integrate in page Ik open app/page.tsx. Voeg import HeroSection. Zet het in HTML. Refresh browser. BOOM. Werkende website, mooi design.
Stap 7: Git commit
git add .
git commit -m "Initial setup with HeroSection"
Totaal: Ik gebruikte 2 requests (één voor .cursorrules, één voor HeroSection). Tab Completion hielp met imports en minor edits. Van nul naar werkende website in 15 minuten. Dat kan jij straks ook."
[ECHTE DEMO, niet gerendeert. Wys elke stap live. Stop niet totdat npm run dev werkt en browser toont mooi design. Timing is belangrijk – studenten moeten zien dat dit ECHT snel gaat.]
BLOK 6: HANDS-ON PRAKTIJK (75 min + 15 min pauze)
Slide 18: Hands-on opdracht - Studenten bouwen eigen project
[10:35 - 10:50] (+ pauze 10:15-10:30, dan verder tot 11:30]
"Jullie beurt. Hier is wat je gaat doen. Dit is dezelfde workflow als mijn demo, maar je doet het zelf.
Opdracht: Bouw een NIEUW project. Mag elk onderwerp zijn – portfolio site, blog, product showcase, whatever. Belangrijkste: je volgt deze stappen:
Stap 1: Project initialize
mkdir my-awesome-project
cd my-awesome-project
git init
Stap 2: Next.js setup
npx create-next-app@latest . --typescript --tailwind --app
TypeScript = Yes, Tailwind = Yes, App Router = Yes.
Stap 3: Cursor Skills check Zorg dat je Next.js, React, en Tailwind documentatie ingeladen hebt. Test @docs.
Stap 4: .cursorrules genereren Chat, één prompt, één request. Kopieën naar bestand.
Stap 5: Componenten bouwen Gebruik Composer (Ctrl+I) om componenten te genereren:
- HeroSection (headline, subheading, CTA)
- FeatureCards (3-4 feature cards met iconen en beschrijvingen)
- TestimonialSection (3 testimonials)
- Footer
Elke Composer request = één component.
Stap 6: Integreren in main page Import alle componenten in app/page.tsx. npm run dev. Check dat alles looks good.
Stap 7: Git commit
git add .
git commit -m "Complete project setup with all components"
Timing:
- Nu tot 10:15: je begint. Ik loop rond, ik help met problemen.
- 10:15-10:30: PAUZE. Stretch, koffie, toilet.
- 10:30-11:15: jullie bouwen verder. Meer componenten, refinement, styling tweaks. Ik help.
Checks tussendoor:
- Is npm run dev werkend?
- Hoe veel requests heb je gebruikt?
- Zit je stuck? Vraag me.
Let op: dit is HANDS-ON. Je moet dit zelf doen, niet copy-paste van mij. De waarde zit in het leren van de workflow."
[Zet timer op. Check na 10 minuten wie klaar is met setup. Help trackers. Zorg dat iedereen minstens HeroSection werkend heeft voor de pauze.]
[Na pauze: motiveer studenten, help met volgende componenten, praise progress.]
BLOK 7: AFSLUITING (15 min)
Slide 19: Resultaten delen
[11:15 - 11:25]
"Goed werk iedereen! Nu gaan we een paar resultaten delen. Ik wil 3-4 van jullie zien wat je hebt gebouwd.
[Roep studenten op om hun project op scherm te delen. Laat hun website zien. Zeg wat je goed vindt – 'Leuke kleuren!' of 'Mooie layout, hoe heb je die FeatureCards gedaan?' Geef high-fives digitaal of letterlijk.]
Dit is echt professioneel werk. En je hebt dit in anderhalf uur gebouwd. Besef je dat? Met OpenCode zou dit twee keer zo lang geduurd hebben."
[Echt naar mensen luisteren. 3-4 korte demo's, niet lang. Maak het positief.]
Slide 20: Samenvatting - De les in vijf punten
[11:25 - 11:35]
"Laten we samenvatten wat je vandaag geleerd hebt.
Eén: Setup. Je kunt Cursor installeren, een account maken, Skills configureren. Dit is standaard, je doet dit nu automatisch.
Twee: AI Features. Je kent Chat, Inline Edit, Composer, Tab Completion, @mentions. Elke feature heeft een use case. Chat voor vragen, Composer voor grote dingen, Tab Completion voor snelheid.
Drie: Workflow. Initialize project, create Next.js app, .cursorrules, build components, integrate, commit. Dit is de bouwsteen voor alle projecten voortaan.
Vier: Request Management. Je weet dat je beperkt hebt, je plant je requests, je combineert taken. Je denkt, daarna prompt.
Vijf: Speed. Je bouwde een website in anderhalf uur. Dat gaat niet slimmer worden – dat is de norm voortaan.
Dit zijn de fundamentals. Volgende les gaan we dieper: effectief prompting, hoe je betere vragen stelt, hoe je iteratief werkt met de AI. Dat is waar de echte magie gebeurt."
[Zeg duidelijk, maak oogcontact. Dit is de afsluiting.]
Slide 21: Huiswerk - DEBUG CHALLENGE
[11:35 - 11:40]
"Huiswerk. Dit is een DEBUG CHALLENGE. Je gaat een zip bestand krijgen via Teams. Die zip bevat een half-gebouwde Next.js project – EXPRES met fouten.
Wat zit erin:
- Missende dependencies (package.json incomplete)
- Syntax errors (typos in components)
- Inline styles die naar Tailwind moeten
- Import statements die broken zijn
- Misschien een API route die niet werkt
Je taak:
- Download de zip
- Extract em
- Open in Cursor
- USE Cursor om ALLE fouten te fixen. Niet handmatig repareren – dat is het punt niet. Gebruik Chat, Inline Edit, Composer. Leer hoe je de AI gebruikt om bugs op te spotten en te fixen.
- Als alles werkend is: npm run dev moet geen errors geven
- Push naar je GitHub
Due: volgende les. Zorg dat je een werkend project hebt en een GitHub link.
Dit is echt oefenen. Debugging met AI is een skill. Je leert het nu."
[Upload de zip naar Teams. Zeg de naam van het bestand luid.]
Slide 22: Volgende les preview
[11:40 - 11:45]
"Volgende les: Effectief Prompting & Iteratief Werken. We gaan dieper.
Vandaag maakte je basale prompts. Volgende keer leren we:
- Prompt engineering: hoe je vragen stelt zodat de AI beter begrijpt wat je wilt
- Iteratie: hoe je feedback geeft en verbeteringen doet, stap voor stap
- Context building: hoe je de AI steeds meer context geeft voor betere resultaten
- Real-world scenarios: fixing bugs, refactoring code, building complex features
Dit is waar development met AI echt wordt. Prompting is een skill, net als typen of debuggen. We gaan het trainen.
Tot volgende week!"
[Smile. Dit is motiverend. Zeg "Goed gedaan vandaag" en bedank iedereen voor de aandacht.]
TIMING OVERVIEW
| Blok | Slides | Duratie | Totaal (min) |
|---|---|---|---|
| BLOK 1: Welkom & Mededeling | 1-4 | 10 min | 0-10 |
| BLOK 2: Installatie & Setup | 5-8 | 20 min | 10-30 |
| BLOK 3: Cursor Features | 9-13 | 15 min | 30-45 |
| BLOK 4: Skills, Rules & Requests | 14-16 | 15 min | 45-60 |
| BLOK 5: Live Demo | 17 | 15 min | 60-75 |
| BLOK 6: Hands-on (incl. pauze) | 18 | 75 min + 15 min pauze | 75-165 |
| Pauze: 10:15-10:30 | |||
| BLOK 7: Afsluiting | 19-22 | 10 min | 165-175 |
| TOTAAL | 22 | 175 minuten (2h 55min) |
EXTRA NOTES VOOR TIM
- Checkpoints: Slide 6, 8, 14 – zorg dat iedereen op dezelfde plek is voor je verdergaat
- Problemen: Bij terminal setup kan het 5 minuten extra kosten. Plan dit in.
- Live demo timing: dit duurt 15 minuten ECHT. Niet sneller – studenten moeten het zien gebeuren.
- Hands-on pauze: 10:15-10:30 is VAST. Studenten hebben dit nodig.
- Request usage: controleer rond 10:45 dat niemand meer dan 5 requests gebruikt heeft. Anders raken ze op.
- Debugging hw: zip bestand moet express simple bugs hebben (missing import, extra comma, inline style). Niet complex.
- Energy: rond minuut 120 zakt energie. Zet muziek op pauze, trek grappen, keep it real.