# Lesplan Les 3: Cursor - AI-Powered Code Editor

---

## Lesgegevens

| Item | Details |
|------|---------|
| **Les** | 3 van 18 |
| **Onderwerp** | Cursor - AI-Powered Code Editor |
| **Deel** | 1: AI Foundations (Les 1-4) |
| **Duur** | 3 uur (180 minuten) |
| **Spreektijd** | ~55 minuten |
| **Hands-on** | ~75 minuten |
| **Pauze** | 15 minuten (10:15-10:30) |

---

## Leerdoelen

Na deze les kan de student:

1. Uitleggen wat Cursor is en waarom het beter is dan OpenCode
2. Cursor installeren en een Hobby/Student account aanmaken
3. Cursor Skills/Docs installeren voor Next.js, React en Tailwind
4. Een .cursorrules bestand genereren met AI Chat
5. Een nieuw Next.js project opzetten met npx create-next-app
6. De vijf AI features gebruiken: Chat, Inline Edit, Composer, Tab Completion, @mentions
7. Efficiënt omgaan met requests (Hobby account management)

---

## Voorbereiding docent

### Technische setup
- [ ] Cursor geïnstalleerd
- [ ] Student account geactiveerd
- [ ] npx create-next-app getest
- [ ] Cursor Skills/Docs toegevoegd (Next.js, React, Tailwind)
- [ ] Demo .cursorrules gegenereerd
- [ ] Huiswerk zipbestand gemaakt (les3-debug-challenge.zip) met:
  - Missende dependencies in package.json
  - Syntax errors in componenten
  - Inline styles die naar Tailwind moeten
  - Missing imports

### Student voorkennis (uit Les 1-2)
- GitHub account, basis git
- npm/node.js geïnstalleerd
- Terminal basics

---

## Lesverloop

### Blok 1: Welkom & Mededeling (10 minuten)

| Tijd | Activiteit | Slides |
|------|------------|--------|
| 09:00-09:02 | Welkom, titelslide | 1 |
| 09:02-09:04 | Planning vandaag | 2 |
| 09:04-09:07 | Terugblik Les 2, waarom Cursor | 3 |
| 09:07-09:10 | Wat is Cursor? Features overzicht | 4 |

**Kernboodschap:** "Cursor is speciaal gemaakt voor developers. Geen token limits, ingebouwde terminal, gratis Student plan."

---

### Blok 2: Installatie & Setup (20 minuten)

| Tijd | Activiteit | Slides |
|------|------------|--------|
| 09:10-09:13 | Download Cursor | 5 |
| 09:13-09:18 | Account aanmaken (Hobby → Student later) | 6 |
| 09:18-09:22 | Interface tour | 7 |
| 09:22-09:30 | Terminal Setup Check SAMEN | 8 |

**Checkpoints:**
- ✓ Cursor geïnstalleerd en geopend
- ✓ node -v, git --version, npm -v werken

---

### Blok 3: Cursor Features (15 minuten)

| Tijd | Activiteit | Slides |
|------|------------|--------|
| 09:30-09:33 | Chat Panel (Ctrl+L) | 9 |
| 09:33-09:36 | Inline Edit (Ctrl+K) | 10 |
| 09:36-09:39 | Composer (Ctrl+I) | 11 |
| 09:39-09:41 | Tab Completion (GRATIS!) | 12 |
| 09:41-09:43 | @ Mentions + @docs | 13 |

**Kernboodschap:** "Vijf features, elk voor ander doel. Tab Completion is GRATIS - gebruik dat voor kleine dingen!"

---

### Blok 4: Skills, Rules & Requests (15 minuten)

| Tijd | Activiteit | Slides |
|------|------------|--------|
| 09:43-09:48 | Cursor Skills installeren (Next.js, React, Tailwind docs) - SAMEN DOEN | 14 |
| 09:48-09:53 | .cursorrules genereren met Chat | 15 |
| 09:53-09:58 | Request management tips (Hobby account) | 16 |

**Checkpoints:**
- ✓ Docs toegevoegd in Cursor Settings
- ✓ Studenten begrijpen request kosten

**Belangrijk:** Benadruk dat Tab Completion GRATIS is. Chat/Composer/Inline Edit kosten elk 1 request.

---

### Blok 5: Live Demo (15 minuten)

| Tijd | Activiteit | Slides |
|------|------------|--------|
| 09:58-10:13 | LIVE DEMO: Nieuw project workflow | 17 |

**Demo flow:**
1. mkdir + git init (1 min)
2. npx create-next-app@latest . (2 min)
3. npm run dev → toon localhost:3000 (1 min)
4. Chat: genereer .cursorrules (3 min, 1 request)
5. Composer: maak HeroSection component (4 min, 1 request)
6. Toon resultaat in browser (1 min)
7. git add + commit (1 min)

**Doel:** Studenten zien de hele workflow in 15 minuten

---

### Blok 6: Hands-On Opdracht (75 min + 15 min pauze)

#### Deel 1 (10:13-10:15, intro + start)

| Tijd | Activiteit |
|------|------------|
| 10:13-10:15 | Opdracht uitleggen (Slide 18 op scherm) |

#### Hands-on Deel 1 (start - 10:15)

Studenten starten met STAP 1 (npx create-next-app)

---

#### ☕ PAUZE (10:15-10:30)

---

#### Hands-on Deel 2 (10:30-11:45)

**Check [10:45]:**
"Wie heeft npx gedaan? Wie heeft .cursorrules? Wie heeft een component?"

**Check [11:00]:**
"Wie heeft al 2 componenten? Hoeveel requests heb je nog over?"

**Check [11:30]:**
"Wie heeft git gecommit? Wie wil zijn project laten zien?"

---

### Blok 7: Afsluiting (15 minuten)

| Tijd | Activiteit | Slides |
|------|------------|--------|
| 11:45-11:50 | Resultaten delen (3-4 studenten) | 19 |
| 11:50-11:53 | Samenvatting | 20 |
| 11:53-11:58 | Huiswerk uitleggen (DEBUG CHALLENGE!) | 21 |
| 11:58-12:00 | Volgende les preview | 22 |

---

## Materialen

- **Slide-Overzicht:** Les03-Slide-Overzicht.md
- **Lesopdracht:** Les03-Bijlage-A-Lesopdracht.md
- **Huiswerkopdracht:** Les03-Bijlage-B-Huiswerkopdracht.md

### Huiswerk zipbestand voorbereiden

**les3-debug-challenge.zip moet bevatten:**
- Een Next.js project (App Router, TypeScript, Tailwind)
- package.json met 1-2 missende dependencies (bijv. lucide-react gebruikt maar niet in deps)
- 1-2 syntax errors (missing closing tag, typo in import)
- 3-4 componenten met inline styles (style={{...}}) die naar Tailwind moeten
- Een component met een missing import

---

## Veelvoorkomende problemen

| Probleem | Oorzaak | Oplossing |
|----------|---------|-----------|
| npx create-next-app faalt | Node.js te oud | nvm install 20 && nvm use 20 |
| npm run dev werkt niet | Verkeerde folder | cd naar project folder, npm install |
| Chat/Composer reageert niet | Requests op of internet | Check cursor.com/account, check internet |
| .cursorrules werkt niet | Niet in root of typo | Check bestandsnaam en locatie |
| Cursor crash | Memory issue | Restart Cursor |
| Terminal commands not found | PATH niet goed | Restart Cursor, check nvm |

## Request Budget Planning

| Activiteit | Requests |
|------------|----------|
| .cursorrules genereren (Chat) | 1 |
| Hero component (Composer) | 1 |
| Styling tweaken (Inline Edit) | 1 |
| Extra component (Composer) | 1 |
| Vragen/debugging (Chat) | 2-3 |
| **Totaal in de les** | **~6-7** |

Tab Completion kost GEEN requests - benadruk dit!

---

## Voorbereiding Tim

**1-2 dagen voor les:**
- [ ] npx create-next-app testen op eigen machine
- [ ] Cursor Skills/Docs toevoegen
- [ ] .cursorrules genereren als demo
- [ ] Huiswerk zip maken met fouten
- [ ] Upload zip naar Teams

**Dag voor les:**
- [ ] Projector test
- [ ] Internet snelheid checken
- [ ] Cursor fresh install testen (wie upgrade snel?)

**Tijdens les:**
- [ ] Iedereen npx create-next-app laten draaien
- [ ] Terminal checks KRITISCH (slide 8)
- [ ] Request management benadrukken
- [ ] Active walking tijdens hands-on

---

**Succes met Les 3!**