rubberducky/novi-lessons

Fork 0

Files

Tim Rijkse 7d50c78e39 fix: add lesson 3

2026-02-27 13:56:19 +01:00

36 KiB

Raw Blame History

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-react used 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
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

36 KiB Raw Blame History

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

Slide 2: Planning Vandaag

Slide 3: Mededeling Huiswerk & Les 2 Terugblik

Slide 4: Wat is Cursor?

BLOK 2: INSTALLATIE & SETUP

Duur: 20 minuten | Slides 5-8

Slide 5: Download Cursor

Slide 6: Account Aanmaken & Student Plan

Slide 7: Interface Tour - De Onderdelen

Slide 8: Terminal Setup Check - SAMEN DOEN

BLOK 3: CURSOR FEATURES

Duur: 15 minuten | Slides 9-13

Slide 9: Chat Panel (Ctrl+L)

Slide 10: Inline Edit (Ctrl+K)

Slide 11: Composer (Ctrl+I)

Slide 12: Tab Completion

Slide 13: @ Mentions - Context geven

BLOK 4: SKILLS, RULES & REQUESTS

Duur: 15 minuten | Slides 14-16

Slide 14: Cursor Skills Installeren

Slide 15: .cursorrules - Genereren met AI Chat

Slide 16: Request Management - Hobby Account Tips

BLOK 5: LIVE DEMO - NIEUW PROJECT

Duur: 15 minuten | Slide 17

Slide 17: Demo - Nieuw Project Opzetten (blijft op scherm)

BLOK 6: HANDS-ON OPDRACHT

Duur: 75 minuten + 15 minuten pauze | Slide 18

Slide 18: Aan de Slag! (blijft op scherm)

BLOK 7: AFSLUITING

Duur: 15 minuten | Slides 19-22

Slide 19: Resultaten Delen

Slide 20: Samenvatting

Slide 21: Huiswerk - Debug Challenge!

Slide 22: Volgende Les - Effectief Prompting

BIJLAGE: TROUBLESHOOTING CHEAT SHEET

Common Issues & Solutions

TIMING SUMMARY

NOTITIES VOOR TIM

36 KiB

Raw Blame History