fix: les 9

2026-04-22 07:05:35 +02:00
parent d5599a601c
commit 4606e96dcc
9 changed files with 3125 additions and 763 deletions
--- a/Samenvattingen/Les09-Samenvatting.md
+++ b/Samenvattingen/Les09-Samenvatting.md
@@ -1,126 +1,96 @@
-# Les 9: Full-Stack Mini Project
+# Les 9: Cursor Deep Dive (Student Plan)

 ---

 ## Hoofdstuk
-**Deel 3: Integration & AI Tooling** (Les 9-12)
+**Deel 2: Technical Foundations** (Les 4-9)

 ## Beschrijving
-Combineer alles wat je geleerd hebt (TypeScript, Next.js, Supabase) in een kleine werkende applicatie. Dit is je eerste "echte" full-stack project en voorbereiding op het werken met AI tools.
+Studenten hebben Cursor met het Student Plan. Tijd voor een deep dive in de 5 professionele workflows: **Rules & Skills, Plan Mode, Agent Mode, Debug Mode, en Code Review & Testing**. We bouwen een nieuwe app from scratch: **LinkVault** (bookmark manager, in-memory, Next.js 16 + TypeScript + Tailwind).

 ---

-## Te Behandelen
+## Lesopbouw (3 uur)

-### Groepsdiscussie (15 min)
-Bespreek klassikaal de Supabase ervaringen uit Les 8 - welke uitdagingen kwamen jullie tegen bij authenticatie en RLS?
-
-### Doel van deze les
-
-Je hebt nu alle bouwstenen:
- TypeScript (Les 4)
- Next.js met App Router (Les 5-6)
- Supabase database & auth (Les 7-8)
-
-Vandaag combineren we dit in een **werkende mini-app**. Geen nieuwe concepten - alleen integratie en toepassing.
+| Tijd | Onderwerp | Vorm |
+|------|-----------|------|
+| 09:00–09:10 | Welkom + terugblik | Klassikaal |
+| 09:10–09:35 | Theorie: Agent Harness, Rules, Plan/Debug/Review Mode | Klassikaal |
+| 09:35–09:55 | Setup: nieuw project + 3 `.cursor/rules` bestanden | Samen |
+| 09:55–10:15 | Plan Mode: plan LinkVault → review → Build | Klassikaal |
+| 10:15–10:30 | Pauze | — |
+| 10:30–11:05 | Agent Mode: features bouwen | Klassikaal |
+| 11:05–11:25 | Debug Mode: deterministische bug vinden en fixen | Klassikaal |
+| 11:25–11:45 | Code Review & Testing + semantic commits + git push | Klassikaal |
+| 11:45–11:55 | (Optioneel) PR review met Cursor | Klassikaal |
+| 11:55–12:00 | Afsluiting + huiswerk | Klassikaal |

 ---

-### Mini Project: Personal Bookmarks
+## De 5 Kernvaardigheden

-Een simpele bookmark manager waar je links kunt opslaan.
+### 1. Rules & Skills
+- `.cursor/rules/` directory met `.mdc` bestanden (YAML frontmatter)
+- 3 bestanden: `project.mdc` (alwaysApply), `components.mdc` (globs: tsx), `styles.mdc` (globs: css/tsx)
+- Houd rules kort, specifiek, en wijs naar voorbeelden

-**Features:**
- Login met Supabase Auth
- Bookmarks toevoegen (URL + titel)
- Bookmarks bekijken en verwijderen
+### 2. Plan Mode
+- `Shift+Tab` → agent researcht, stelt vragen, maakt interactief plan
+- Plan bewerken in markdown → "Build" klikken
+- Start elke feature met een plan

-**Tech stack:**
- Next.js 14 met App Router
- TypeScript
- Tailwind CSS
- Supabase (auth + database)
- React Query
+### 3. Agent Mode
+- Agent = uitvoeren (files, terminal, multi-file). Ask = alleen vragen.
+- Goede context geven: `@file`, `@folder`, `@codebase`, `@docs`
+- Itereren met screenshots en feedback

---
+### 4. Debug Mode
+- Voor complexe bugs: hypotheses → logging → reproduceren → analyseren → fix
+- Tim introduceert bug handmatig (deterministic) → studenten debuggen

-### Stap-voor-stap
-
-#### Database Schema
-
-**Tabel: bookmarks**
-| Kolom | Type |
-|-------|------|
-| id | uuid (PK) |
-| user_id | uuid (FK naar auth.users) |
-| url | text |
-| title | text |
-| created_at | timestamptz |
-
-**RLS:** Users kunnen alleen eigen bookmarks zien, toevoegen en verwijderen.
-
-#### Wat je bouwt
-
-1. **Login pagina** - Supabase Auth
-2. **Dashboard** - Lijst van bookmarks
-3. **Add form** - URL + titel invoeren
-4. **Delete** - Bookmark verwijderen
+### 5. Code Review & Testing
+- "Find Issues" voor self-review
+- Tests schrijven met Agent Mode
+- Semantic commits: achteraf changes opdelen in logische groepen
+- (Optioneel) PR review met Cursor

 ---

 ## Tools
- VS Code
- Supabase Dashboard
- Browser DevTools
+- Cursor (Student Plan)
+- Next.js 16
+- TypeScript
+- Tailwind CSS

 ---

-## Lesopdracht (2.5 uur)
-
-### Bouw de Bookmark Manager
-
-**Checkpoints:**
-
-| Tijd | Wat klaar moet zijn |
-|------|---------------------|
-| 30 min | Project setup + database schema |
-| 60 min | Auth werkt (login/logout) |
-| 90 min | Bookmarks toevoegen en bekijken |
-| 120 min | Delete werkt |
-| 150 min | Styling en testen |
-
-**Minimale eisen:**
- [ ] Login/logout werkt
- [ ] Bookmarks toevoegen werkt
- [ ] Bookmarks worden getoond
- [ ] Delete werkt
-
-### Deliverable
- Werkende lokale applicatie
- Screenshot van je app met data
-
---
-
-## Huiswerk (1 uur)
-
-### Reflectie
-
-Schrijf korte reflectie (200 woorden):
- Wat ging goed bij het integreren?
- Waar liep je vast?
- Wat zou je volgende keer anders doen?
-
-Maak een lijst van 3 verbeterpunten voor je code.
-
-### Deliverable
- Reflectie (200 woorden)
- 3 verbeterpunten
+## Lesmateriaal
+- `Les09-Slide-Overzicht.md`
+- `Les09-Docenttekst.md`
+- `Les09-Huiswerk.md`

 ---

 ## Leerdoelen
 Na deze les kan de student:
- Een complete full-stack applicatie bouwen met Next.js, TypeScript en Supabase
- CRUD operaties implementeren met React Query
- Authenticatie integreren in een applicatie
- Zelfstandig integratieproblemen oplossen
+- Uitleggen hoe een coding agent werkt (harness: instructions + tools + model)
+- `.cursor/rules` opzetten met meerdere bestanden (alwaysApply, globs)
+- Plan Mode gebruiken om een feature te plannen
+- Agent Mode inzetten voor multi-file feature development
+- Debug Mode gebruiken voor systematisch debuggen
+- Code review doen met "Find Issues" en tests schrijven
+- Semantic commits maken en een PR aanmaken
+- Een app from scratch bouwen met alle 5 technieken
+
+---
+
+## Voorbereiding docent
+- [ ] `npx create-next-app@latest` getest
+- [ ] 3 `.cursor/rules` bestanden voorbereid
+- [ ] Plan Mode demo doorgelopen
+- [ ] Bug voor Debug Mode voorbereid (tag.toUpperCase() in filter)
+- [ ] GitHub repo klaar voor push demo
+
+---
+
+*Laatste update: april 2026*