36 KiB
36 KiB
Les 3: Cursor - AI-Powered Code Editor
Slide-Overzicht (180 minuten / 3 uur)
BLOK 1: WELKOM & MEDEDELING
Duur: 10 minuten | Slides 1-4
Slide 1: Titelslide
Les 3: Cursor - AI-Powered Code Editor
╔════════════════════════════════════════╗
║ LES 3: CURSOR ║
║ AI-Powered Code Editor ║
║ ║
║ Tim ║
║ NOVI Hogeschool ║
╚════════════════════════════════════════╝
Timing: 2 minuten
Slide 2: Planning Vandaag
| Blok | Onderdeel | Duur |
|---|---|---|
| Blok 1 | Welkom & Mededeling | 10 min |
| Blok 2 | Installatie & Setup | 20 min |
| Blok 3 | Cursor Features | 15 min |
| Blok 4 | Skills, Rules & Requests | 15 min |
| Blok 5 | Live Demo: Nieuw Project | 15 min |
| PAUZE | 15 min | |
| Blok 6 | Hands-On Opdracht | 75 min |
| Blok 7 | Afsluiting | 15 min |
Timing: 2 minuten
Doelen van vandaag:
- Cursor installeren en setup afronden
- Cursor Skills installeren (Next.js, React, Tailwind)
- .cursorrules genereren met AI Chat
- Nieuw project opzetten met npx create-next-app
- Een component bouwen volgens de regels
Slide 3: Mededeling Huiswerk & Les 2 Terugblik
Wat is er gebeurd in Les 2?
- Jullie hebben OpenCode gebruikt voor AI-assisted development
- OpenCode had token limieten op free plan → snel op
- Terminal problemen: EACCES, permission denied, SSH issues
Waarom schakelen we over naar Cursor?
- ✅ Cursor is ontworpen voor developers
- ✅ Gratis Student plan beschikbaar (500 fast requests/maand)
- ✅ VS Code fork → terminal ingebouwd (geen losse terminal nodig)
- ✅ Leest je hele codebase als context
- ✅ Installeerbare Skills voor frameworks (Next.js, React, Tailwind)
Timing: 3 minuten
Slide 4: Wat is Cursor?
╔════════════════════════════════════════╗
║ CURSOR = VS CODE + AI ║
║ ║
║ • Gebaseerd op VS Code ║
║ • Ingebouwde AI assistent ║
║ • Gratis voor studenten (Pro plan) ║
║ • 500 fast requests/maand ║
║ ║
║ Models beschikbaar: ║
║ - GPT-4o (standaard) ║
║ - Claude 3.5 Sonnet ║
║ - Claude 3.5 Haiku (sneller) ║
╚════════════════════════════════════════╝
Key Features:
- Chat Panel (Ctrl+L) - Vraag AI over je code
- Inline Edit (Ctrl+K) - Selecteer code → AI past aan
- Composer (Ctrl+I) - Multi-file edits voor grotere taken
- Tab Completion - AI voorspelt je volgende lijn code
- @ Mentions - Context geven: @file, @folder, @web, @docs
Pricing (voor ons):
- Hobby account (gratis) = Beperkte requests, langzamer
- Student Pro (gratis via cursor.com/students) = 500 fast requests/maand
- ⚠️ Start vandaag met Hobby, upgrade naar Student later
Timing: 3 minuten
BLOK 2: INSTALLATIE & SETUP
Duur: 20 minuten | Slides 5-8
Slide 5: Download Cursor
Stap 1: Ga naar cursor.com
Kies je besturingssysteem:
├── 🍎 macOS (Intel / Apple Silicon)
├── 🪟 Windows (Installer)
└── 🐧 Linux (Snap / Appimage / Deb)
Installatie:
- macOS: Open
.dmg, sleep Cursor naar Applications folder - Windows: Run installer, default locations
- Linux: Snap of direct executable
Controle: Na installatie, start Cursor → je ziet welcome screen
Timing: 3 minuten
Slide 6: Account Aanmaken & Student Plan
Stap 1: Start Cursor → Sign Up
Stap 2: Kies HOBBY account
┌─────────────────────────────────────────┐
│ ACCOUNT OPTIONS │
├─────────────────────────────────────────┤
│ ✓ Hobby (gratis, basic features) │
│ → Start hier! │
│ │
│ ○ Student (gratis, 500 fast requests) │
│ → Upgrade later via cursor.com/students│
│ │
│ ○ Pro (betaald) │
│ → Niet nodig voor ons │
└─────────────────────────────────────────┘
Stap 3: E-mail & wachtwoord → verifieer e-mail
Stap 4: UPGRADE NAAR STUDENT (vandaag of morgen)
- Ga naar https://cursor.com/students
- Log in met je account
- Voer NOVI e-mail in
- Volg verification process
⚠️ CHECKPOINT: Je ziet Cursor welcome screen
Timing: 5 minuten
Slide 7: Interface Tour - De Onderdelen
╔════════════════════════════════════════════════════════════╗
║ CURSOR INTERFACE ║
╠════════════════════════════════════════════════════════════╣
║ ┌────────────────────────────────────────────────────────┐ ║
║ │ ACTIVITY BAR │ ║
║ │ (Links: Explorer, Search, Source Control, Extensions) │ ║
║ └────────────────────────────────────────────────────────┘ ║
║ ┌────────────────────────────────────────────────────────┐ ║
║ │ SIDEBAR │ EDITOR │ CHAT │ ║
║ │ (Files/Folders) │ (Code hier) │ (Ctrl+L)│ ║
║ │ │ │ │ ║
║ │ • project/ │ import... │ ╭─────╮ │ ║
║ │ ├── src/ │ │ │ Chat│ ║
║ │ ├── public/ │ function... │ ╰─────╯ ║
║ │ └── package.json │ │ │ ║
║ └────────────────────────────────────────────────────────┘ ║
║ ┌────────────────────────────────────────────────────────┐ ║
║ │ TERMINAL (Ctrl+`) │ ║
║ │ $ npm run dev │ ║
║ └────────────────────────────────────────────────────────┘ ║
╚════════════════════════════════════════════════════════════╝
Belangrijkste onderdelen:
| Onderdeel | Functie | Shortcut |
|---|---|---|
| Sidebar | Bekijk bestanden/folders | Ctrl+B (toggle) |
| Editor | Schrijf en edit je code | Midden |
| Terminal | Run commands (npm, git, etc.) | Ctrl+` |
| Chat Panel | Vraag AI over je code | Ctrl+L |
| Command Palette | Commands zoeken | Ctrl+Shift+P |
Timing: 4 minuten
Slide 8: Terminal Setup Check - SAMEN DOEN
Stap 1: Open Terminal → Druk `Ctrl+`` (backtick)
Stap 2: Run deze commands (1 per 1)
# Check Node.js versie
node -v
# Verwacht: v20.x.x of hoger ✓
# Check Git versie
git --version
# Verwacht: git version 2.x.x ✓
# Check npm
npm -v
# Verwacht: 10.x.x ✓
# Check npx (nodig voor create-next-app!)
npx -v
# Verwacht: 10.x.x ✓ (zelfde versie als npm)
Veel voorkomende errors & fixes:
ERROR: "command not found: node"
→ Node.js niet geïnstalleerd
→ FIX: Download van nodejs.org (v20+) of gebruik nvm
ERROR: "command not found: npx"
→ Oude Node versie of npm niet goed geïnstalleerd
→ FIX: npm install -g npx OF nvm install 20
ERROR: "EACCES: permission denied"
→ FIX: chmod +x [bestand] of gebruik nvm
⚠️ CHECKPOINT: node, git, npm EN npx werken allemaal
Timing: 8 minuten
BLOK 3: CURSOR FEATURES
Duur: 15 minuten | Slides 9-13
Slide 9: Chat Panel (Ctrl+L)
Wat is Chat Panel? Vraag AI vragen over je code. AI kan je hele codebase zien.
Hoe gebruik je het:
1. Druk Ctrl+L
2. Chat panel opent rechts
3. Type je vraag
4. AI analyseert en antwoordt
VOORBEELD VRAGEN:
├─ "Wat doet deze functie?"
├─ "Hoe kan ik dit component beter maken?"
├─ "Genereer een .cursorrules voor dit project"
├─ "Leg uit wat package.json doet"
└─ "Wat zijn alle routes in dit project?"
Pro tip: Wees specifiek in je vragen → bespaart requests!
Timing: 3 minuten
Slide 10: Inline Edit (Ctrl+K)
Wat is Inline Edit? Selecteer code → geef AI instructie → AI past aan.
Hoe gebruik je het:
STAP 1: Selecteer code (klik+drag)
STAP 2: Druk Ctrl+K → prompt popup
STAP 3: Type je instructie
STAP 4: Accept (Enter) of Reject (Esc)
VOORBEELD:
// Origineel (inline styles):
<div style={{padding: '20px', backgroundColor: 'blue'}}>
// Selecteer, Ctrl+K: "Converteer naar Tailwind classes"
// Result:
<div className="p-5 bg-blue-500">
Wanneer: Kleine aanpassingen, styling, inline styles → Tailwind
Timing: 3 minuten
Slide 11: Composer (Ctrl+I)
Wat is Composer? Multi-file editor: grote opdrachten, meerdere files tegelijk.
Hoe gebruik je het:
STAP 1: Druk Ctrl+I → Composer opent
STAP 2: Typ je taak
"Voeg /about pagina toe met hero en content sectie"
STAP 3: AI creëert plan + preview
STAP 4: Review & Accept alle changes
VOORBEELD:
Je zegt: "Maak een ContactForm component met Tailwind"
Composer maakt aan:
├─ components/ContactForm.tsx
├─ Update app/contact/page.tsx
└─ Voegt form validatie toe
Wanneer: Nieuwe pagina's, grote features, meerdere files
Timing: 3 minuten
Slide 12: Tab Completion
Wat is Tab Completion? AI voorspelt je volgende lijn code terwijl je typt.
Je typt:
const users = fetch(
AI voorstelt (grijs):
const users = fetch('/api/users')
.then(res => res.json())
Je drukt TAB → ingevoegd!
Pro tip: Tab completion is GRATIS / kost geen premium requests! → Gebruik dit zo veel mogelijk i.p.v. Chat/Composer voor kleine dingen.
Timing: 2 minuten
Slide 13: @ Mentions - Context geven
@file → Specifiek bestand meegeven
@folder → Hele folder meegeven
@web → Internet zoeken
@docs → Documentatie referenties (Next.js, React, Tailwind!)
VOORBEELD:
"Hoe maak ik een server component? @docs Next.js"
→ AI zoekt in Next.js documentatie voor antwoord
Timing: 2 minuten
BLOK 4: SKILLS, RULES & REQUESTS
Duur: 15 minuten | Slides 14-16
Slide 14: Cursor Skills Installeren
⚠️ SAMEN DOEN - Iedereen volgt mee!
Wat zijn Cursor Skills/Docs? Documentatie die Cursor kan raadplegen via @docs. Hierdoor begrijpt AI je frameworks beter.
Stap 1: Open Cursor Settings
Ctrl+Shift+P → "Cursor Settings" → Features → Docs
Stap 2: Voeg documentatie toe
┌─────────────────────────────────────────┐
│ + Add new doc │
├─────────────────────────────────────────┤
│ 1. Next.js │
│ URL: https://nextjs.org/docs │
│ │
│ 2. React │
│ URL: https://react.dev │
│ │
│ 3. Tailwind CSS │
│ URL: https://tailwindcss.com/docs │
│ │
│ (Optioneel) │
│ 4. shadcn/ui │
│ URL: https://ui.shadcn.com │
└─────────────────────────────────────────┘
Stap 3: Test het!
Chat (Ctrl+L): "Hoe maak ik een layout in Next.js? @docs Next.js"
→ AI gebruikt de officiële Next.js docs als bron
Waarom?
- AI geeft betere, up-to-date antwoorden
- Geen verouderde patterns
- Specifiek voor jouw stack
⚠️ CHECKPOINT: Minimaal Next.js en Tailwind docs toegevoegd
Timing: 5 minuten
Slide 15: .cursorrules - Genereren met AI Chat
Wat is .cursorrules? Een bestand in je project root dat AI vertelt hoe jij wilt werken.
⚠️ WE GAAN DIT NIET HANDMATIG SCHRIJVEN We laten Cursor Chat het genereren! Dat bespaart tijd en geeft een goed startpunt.
Hoe:
STAP 1: Open Chat (Ctrl+L)
STAP 2: Typ dit prompt:
"Genereer een .cursorrules bestand voor een Next.js project.
Het project gebruikt:
- Next.js App Router
- Tailwind CSS voor styling
- TypeScript
- Functional components met React hooks
- Nederlandse comments
Maak regels voor file structure, naming conventions,
en styling guidelines."
STAP 3: Kopieer de output
STAP 4: Maak nieuw bestand: .cursorrules (in project root)
STAP 5: Paste + Save (Ctrl+S)
Dit kost 1 request → efficiënt!
Timing: 5 minuten
Slide 16: Request Management - Hobby Account Tips
⚠️ BELANGRIJK: Jullie requests zijn beperkt!
Hobby account: Beperkt aantal premium requests per maand Student account: 500 fast requests per maand (upgrade z.s.m.!)
Hoe zuinig omgaan met requests:
╔════════════════════════════════════════════════════════╗
║ GRATIS / GOEDKOOP: ║
║ ✅ Tab Completion (kost GEEN premium request) ║
║ ✅ Code typen met AI suggesties ║
║ ║
║ KOST 1 REQUEST: ║
║ ⚡ Chat vraag (Ctrl+L) ║
║ ⚡ Inline Edit (Ctrl+K) ║
║ ⚡ Composer actie (Ctrl+I) ║
║ ║
║ TIPS OM REQUESTS TE BESPAREN: ║
║ 1. Denk EERST, prompt DAARNA ║
║ 2. Combineer taken in 1 prompt ║
║ ✗ "Maak een button" → "Maak het blauw" ║
║ → "Voeg hover toe" = 3 requests ║
║ ✓ "Maak een blauwe button met hover effect" ║
║ = 1 request! ║
║ 3. Gebruik Tab Completion voor kleine dingen ║
║ 4. Lees error messages ZELF eerst ║
║ 5. Gebruik @docs voor framework vragen ║
╚════════════════════════════════════════════════════════╝
Timing: 5 minuten
BLOK 5: LIVE DEMO - NIEUW PROJECT
Duur: 15 minuten | Slide 17
Slide 17: Demo - Nieuw Project Opzetten (blijft op scherm)
Docent demonstreert de HELE workflow die studenten straks zelf doen:
╔═════════════════════════════════════════════════════════╗
║ LIVE DEMO: NIEUW PROJECT ║
╠═════════════════════════════════════════════════════════╣
║ ║
║ STAP 1: Git Repository (2 min) ║
║ ├─ $ mkdir my-cursor-project ║
║ ├─ $ cd my-cursor-project ║
║ ├─ $ git init ║
║ └─ Open in Cursor: File → Open Folder ║
║ ║
║ STAP 2: npx Scaffold (3 min) ║
║ ├─ Terminal in Cursor (Ctrl+`) ║
║ ├─ $ npx create-next-app@latest . ║
║ │ ├─ TypeScript? → Yes ║
║ │ ├─ ESLint? → Yes ║
║ │ ├─ Tailwind CSS? → Yes ║
║ │ ├─ src/ directory? → Yes ║
║ │ ├─ App Router? → Yes ║
║ │ └─ Import alias? → @/* (default) ║
║ └─ $ npm run dev → localhost:3000 ║
║ ║
║ STAP 3: Skills Check (1 min) ║
║ ├─ Settings → Docs → Next.js, React, Tailwind ║
║ └─ (al gedaan in Slide 14) ║
║ ║
║ STAP 4: .cursorrules via Chat (3 min) ║
║ ├─ Ctrl+L → Chat ║
║ ├─ "Genereer .cursorrules voor Next.js + Tailwind" ║
║ ├─ Kopieer output → maak .cursorrules ║
║ └─ Save (Ctrl+S) → 1 request gebruikt ║
║ ║
║ STAP 5: Component Bouwen (4 min) ║
║ ├─ Ctrl+I → Composer ║
║ ├─ "Maak een HeroSection component met: ║
║ │ - Grote titel, subtitel ║
║ │ - Gradient achtergrond ║
║ │ - CTA button ║
║ │ - Tailwind styling, responsive" ║
║ ├─ Accept → component gemaakt ║
║ ├─ Voeg toe aan page.tsx ║
║ └─ Refresh browser → ZIE RESULTAAT! ║
║ ║
║ STAP 6: Git Commit (2 min) ║
║ ├─ $ git add . ║
║ ├─ $ git commit -m "Initial project with hero" ║
║ └─ (Push naar GitHub komt later) ║
║ ║
╚═════════════════════════════════════════════════════════╝
Kernboodschap: "Van niks naar werkende website in 15 minuten!"
Timing: 15 minuten (hele blok is demo)
BLOK 6: HANDS-ON OPDRACHT
Duur: 75 minuten + 15 minuten pauze | Slide 18
Slide 18: Aan de Slag! (blijft op scherm)
╔════════════════════════════════════════════════════════════╗
║ LES 3 HANDS-ON OPDRACHT ║
║ Bouw je eigen project met Cursor! ║
╚════════════════════════════════════════════════════════════╝
STAP 1: NIEUW PROJECT AANMAKEN
═════════════════════════════════════════════════════════════
□ Open Cursor Terminal (Ctrl+`)
□ Maak een nieuwe map:
$ mkdir ~/projects/mijn-project
$ cd ~/projects/mijn-project
□ Initialiseer Git:
$ git init
□ Scaffold met npx:
$ npx create-next-app@latest .
Antwoorden op de vragen:
┌────────────────────────────────────┐
│ TypeScript? → Yes │
│ ESLint? → Yes │
│ Tailwind CSS? → Yes │
│ src/ directory? → Yes │
│ App Router? → Yes │
│ Import alias @/*? → Yes (Enter) │
└────────────────────────────────────┘
□ Start dev server:
$ npm run dev
□ Open browser: http://localhost:3000
→ Je ziet de Next.js welcome pagina!
✓ CHECKPOINT 1: localhost:3000 toont Next.js default pagina
STAP 2: CURSOR CONFIGUREREN
═════════════════════════════════════════════════════════════
□ Check dat je Docs/Skills hebt (Slide 14):
Settings → Features → Docs
→ Next.js, React, Tailwind moeten erin staan
□ Genereer .cursorrules via Chat:
Ctrl+L → Chat Panel
Typ: "Genereer een .cursorrules bestand voor dit project.
We gebruiken Next.js App Router, Tailwind CSS,
TypeScript, en functional components met hooks.
Nederlandse comments. Geef regels voor
file structure, naming, en styling."
□ Maak .cursorrules bestand:
- File → New File → naam: .cursorrules
- Plak de output van Chat
- Save (Ctrl+S)
⚡ Dit kostte 1 request - goed besteed!
✓ CHECKPOINT 2: .cursorrules staat in project root
STAP 3: BOUW EEN COMPONENT (de fun part!)
═════════════════════════════════════════════════════════════
⚠️ LET OP: Combineer taken in 1 prompt om requests te sparen!
TAAK 1: HERO COMPONENT (Composer, 1 request)
─────────────────────────────────────────────
□ Druk Ctrl+I → Composer
□ Typ: "Maak een HeroSection component in
src/components/HeroSection.tsx.
Met grote titel, subtitel, gradient achtergrond,
CTA button, responsive Tailwind styling.
Voeg de HeroSection toe aan src/app/page.tsx
(vervang de default Next.js content)."
□ Review de preview
□ Click Accept
□ Refresh localhost:3000 → ZIE JE HERO!
→ DOEL: 1 Composer prompt = werkend component!
TAAK 2: STYLING TWEAKEN (Inline Edit, 1 request)
─────────────────────────────────────────────────
□ Open src/components/HeroSection.tsx
□ Selecteer de hele component code
□ Druk Ctrl+K → Inline Edit
□ Typ: "Voeg een hover animatie toe aan de button.
Maak de gradient mooier met meer kleuren.
Zorg voor goede spacing op mobiel."
□ Accept (Enter)
□ Refresh browser → Verbeterd!
→ DOEL: Quick styling fix met 1 request
TAAK 3: EXTRA FEATURE (Composer, 1 request)
────────────────────────────────────────────
□ Druk Ctrl+I → Composer
□ Kies EEN van deze:
A) "Maak een FeatureCards component met 3 cards.
Elke card heeft een icon (emoji), titel, en tekst.
Responsive grid: 1 kolom mobiel, 3 kolommen desktop.
Tailwind styling. Voeg toe onder de Hero op page.tsx."
B) "Maak een ContactForm component met naam, email,
en bericht velden. Tailwind styling.
Voeg toe op een nieuwe /contact pagina."
C) "Maak een Footer component met links, copyright,
en social media icons (emoji). Voeg toe aan layout.tsx."
□ Accept → Refresh browser
→ DOEL: 2e component gemaakt = project groeit!
✓ CHECKPOINT 3: Minimaal 2 componenten werken op je site
STAP 4: GIT COMMIT
═════════════════════════════════════════════════════════════
□ Terminal (Ctrl+`) in Cursor:
$ git add .
$ git commit -m "Add hero and feature components"
□ (Optioneel) Maak GitHub repo en push:
$ gh repo create mijn-project --public --source=. --push
OF:
Ga naar github.com → New Repository → volg instructies
✓ CHECKPOINT 4: Code gecommit!
═════════════════════════════════════════════════════════════
☕ PAUZE: 10:15 - 10:30 (15 minuten)
═════════════════════════════════════════════════════════════
Na pauze: Verder bouwen! Voeg meer componenten toe.
Gebruik je overige requests SLIM.
═════════════════════════════════════════════════════════════
NA PAUZE: VERDER BOUWEN
═════════════════════════════════════════════════════════════
□ Voeg nog 1-2 componenten toe met Composer
(let op: je requests zijn beperkt!)
□ Gebruik Tab Completion voor kleine code (GRATIS!)
□ Gebruik Inline Edit voor styling fixes (1 request per fix)
□ Probeer @docs te gebruiken:
Chat: "Hoe werkt de App Router? @docs Next.js"
═════════════════════════════════════════════════════════════
DOELEN BEREIKT?
═════════════════════════════════════════════════════════════
✓ Nieuw project gescaffold met npx
✓ Cursor Skills/Docs geïnstalleerd
✓ .cursorrules gegenereerd met Chat
✓ Minimaal 2 componenten gebouwd
✓ Alles werkt op localhost:3000
✓ Git commits gemaakt
✓ Requests slim gebruikt! 🎉
═════════════════════════════════════════════════════════════
HELP NODIG?
═════════════════════════════════════════════════════════════
npx create-next-app faalt:
→ Check Node versie: node -v (moet v18+)
→ Probeer: npx create-next-app@latest mijn-project
npm run dev faalt:
→ Check of je in de juiste map staat: pwd
→ $ rm -rf node_modules && npm install
Cursor Chat/Composer reageert niet:
→ Check internet
→ Check requests: cursor.com/account
→ Restart Cursor
Git problemen:
→ $ git status → check wat er mis is
→ $ git add . && git commit -m "message"
Timing: 75 minuten + 15 minuten pauze
BLOK 7: AFSLUITING
Duur: 15 minuten | Slides 19-22
Slide 19: Resultaten Delen
Show & Tell (5 minuten)
╔═══════════════════════════════════════════════════════╗
║ TOON JE PROJECT AAN DE KLAS ║
║ (3-4 studenten, ~1 minuut per project) ║
╚═══════════════════════════════════════════════════════╝
Wat we kijken naar:
- Welke componenten heb je gemaakt? ✓
- Werkt het op localhost? ✓
- Hoe veel requests heb je gebruikt? ✓
- Hoe ziet je .cursorrules eruit? ✓
Timing: 5 minuten
Slide 20: Samenvatting
╔════════════════════════════════════════════════════════╗
║ CURSOR - WAT HEBBEN WE GELEERD? ║
╠════════════════════════════════════════════════════════╣
║ ║
║ SETUP ║
║ ├─ Cursor installeren + Hobby/Student account ║
║ ├─ Skills/Docs toevoegen (Next.js, React, Tailwind) ║
║ └─ .cursorrules genereren met AI Chat ║
║ ║
║ AI FEATURES ║
║ ├─ Chat (Ctrl+L) → vragen, analyse, genereren ║
║ ├─ Composer (Ctrl+I) → grote taken, meerdere files ║
║ ├─ Inline Edit (Ctrl+K) → kleine aanpassingen ║
║ ├─ Tab Completion → gratis code suggesties ║
║ └─ @mentions → context geven (@file, @docs) ║
║ ║
║ WORKFLOW ║
║ ├─ npx create-next-app → scaffold ║
║ ├─ .cursorrules → AI kent je regels ║
║ ├─ Composer → componenten bouwen ║
║ └─ git commit → code opslaan ║
║ ║
║ REQUEST MANAGEMENT ║
║ ├─ Tab Completion = GRATIS ║
║ ├─ Combineer taken in 1 prompt ║
║ └─ Denk EERST, prompt DAARNA ║
║ ║
╚════════════════════════════════════════════════════════╝
Timing: 3 minuten
Slide 21: Huiswerk - Debug Challenge!
Download het huiswerk-zipbestand van Teams
╔════════════════════════════════════════════════════════╗
║ LES 3 HUISWERK: DEBUG CHALLENGE ║
╚════════════════════════════════════════════════════════╝
OPDRACHT:
Download het zipbestand "les3-debug-challenge.zip" van Teams.
Dit is een Next.js project met EXPRES FOUTEN erin!
Jouw taak: Fix ALLE fouten met behulp van Cursor.
FOUTEN DIE JE GAAT TEGENKOMEN:
═════════════════════════════════════════════════════════
1. MISSENDE DEPENDENCIES
→ npm install zal FALEN
→ Bekijk de error message
→ Gebruik Cursor Chat: "Welke dependencies missen er?"
→ Fix package.json en installeer opnieuw
2. SYNTAX ERRORS
→ npm run dev zal ERRORS geven
→ Lees de error messages in de terminal
→ Gebruik Cursor om de fouten te vinden en te fixen
→ Tip: ESLint helpt hier ook!
3. INLINE STYLES → TAILWIND
→ Sommige componenten gebruiken inline styles
→ Gebruik Inline Edit (Ctrl+K) om ze naar Tailwind
te converteren
→ Selecteer de code, Ctrl+K:
"Converteer alle inline styles naar Tailwind classes"
4. SKILL NODIG!
→ Voor de Tailwind conversie heb je de Tailwind docs
nodig in Cursor
→ Check dat je Tailwind docs hebt toegevoegd
(Settings → Docs)
INLEVEREN (voor Les 4):
═════════════════════════════════════════════════════════
□ Werkend project (npm run dev zonder errors)
□ Alle inline styles omgezet naar Tailwind
□ Push naar GitHub
□ Vercel deployment (optioneel maar aanbevolen)
POST OP TEAMS:
→ GitHub link
→ Screenshot van werkende site
→ Kort: "Dit waren de fouten die ik tegenkwam en
hoe ik ze heb opgelost"
Tips:
- Lees ERROR MESSAGES - ze vertellen je precies wat fout is
- Gebruik de terminal in Cursor (niet een losse terminal!)
- Chat is je vriend: "Wat betekent deze error: [plak error]"
- Tab Completion is gratis - gebruik het!
Timing: 5 minuten
Slide 22: Volgende Les - Effectief Prompting
╔════════════════════════════════════════════════════════╗
║ LES 4: EFFECTIEF PROMPTING & ║
║ ITERATIEF WERKEN MET AI ║
╚════════════════════════════════════════════════════════╝
Onderwerpen:
├─ Prompt engineering 101 (betere vragen stellen)
├─ Iteratief refinement (prompt → review → verbeter)
├─ Debugging met AI (errors → fixes)
├─ Code reviews met AI
└─ .cursorrules verfijnen
Voorbereiding:
└─ Huiswerk debug challenge MOET af zijn!
Tot ziens volgende week! 🚀
Timing: 2 minuten
BIJLAGE: TROUBLESHOOTING CHEAT SHEET
Common Issues & Solutions
TERMINAL ISSUES
ERROR: "command not found: npx"
→ Node.js niet geïnstalleerd of te oude versie
→ FIX: nvm install 20 && nvm use 20
ERROR: "EACCES: permission denied"
→ File permissions probleem
→ FIX: gebruik nvm (geen sudo nodig)
ERROR: "create-next-app faalt"
→ Node versie te oud
→ FIX: node -v (moet v18+), anders nvm install 20
CURSOR ISSUES
Chat/Composer not responding
→ Check internet connection
→ Restart Cursor
→ Check requests: cursor.com/account
.cursorrules wordt niet gelezen
→ Check: bestand in project ROOT (niet in src/)
→ Check: bestandsnaam exact ".cursorrules" (met punt)
Extensions not loading
→ Command Palette → Reload Window
GIT ISSUES
"fatal: not a git repository"
→ $ git init (in project folder)
"nothing to commit"
→ Alle files al gecommit, maak eerst wijzigingen
TIMING SUMMARY
| Blok | Onderdeel | Duur |
|---|---|---|
| 1 | Welkom & Mededeling | 10 min |
| 2 | Installatie & Setup | 20 min |
| 3 | Cursor Features | 15 min |
| 4 | Skills, Rules & Requests | 15 min |
| 5 | Live Demo: Nieuw Project | 15 min |
| PAUZE | 15 min | |
| 6 | Hands-On Opdracht | 75 min |
| 7 | Afsluiting | 15 min |
| TOTAAL | 180 min |
NOTITIES VOOR TIM
-
Voorbereiding:
- Test npx create-next-app op eigen machine
- Cursor Skills/Docs vooraf toevoegen (Next.js, React, Tailwind)
- .cursorrules genereren als demo
- Maak het huiswerk zipbestand klaar met fouten (les3-debug-challenge.zip)
-
Huiswerk zip moet bevatten:
- Next.js project met:
- package.json met missende dependency (bijv.
lucide-reactused maar niet in deps) - Syntax error in een component (missing closing tag of typo)
- 3-4 componenten met inline styles (style={{...}}) i.p.v. Tailwind
- Een component die een import mist
- package.json met missende dependency (bijv.
- Next.js project met:
-
Tijdens les:
- Terminal checks (Slide 8) zijn KRITISCH
- Benadruk request management VOOR hands-on begint
- npx create-next-app duurt 1-2 min, laat iedereen wachten
- Loop rond tijdens hands-on, help met npx/npm issues
-
Request bewust:
- Demo gebruikt ~3 requests (cursorrules + hero + feature)
- Studenten moeten ~5-7 requests in de les gebruiken
- Tab Completion benadrukken als gratis alternatief
Einde Slide-Overzicht Les 3