fix: lesson 4

2026-03-02 14:45:39 +01:00
parent d021fe8379
commit 63f84655e0
13 changed files with 4953 additions and 235 deletions
--- a/Samenvattingen/Les03-Samenvatting.md
+++ b/Samenvattingen/Les03-Samenvatting.md
@@ -1,125 +1,114 @@
-# Les 3: AI Ethics, Privacy & Security + WebStorm Integration
+# Les 3: Cursor Setup & Basics

-> 📋 **Lesmateriaal nog niet uitgewerkt**
+> ✅ **Les gegeven op woensdag 26 februari 2026**
 >
-> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
-> - Les03-Slide-Overzicht.md
-> - Les03-Lesplan.md
-> - Les03-Bijlage-A-Lesopdracht.md
-> - Les03-Bijlage-B-Huiswerkopdracht.md
+> Lesmateriaal volledig uitgewerkt:
+> - [Slide-Overzicht](../Les03-Cursor-Basics/Les03-Slide-Overzicht.md)
+> - [Lesplan](../Les03-Cursor-Basics/Les03-Lesplan.md)
+> - [Docenttekst](../Les03-Cursor-Basics/Les03-Docenttekst.md)
+> - [Keynote Notes](../Les03-Cursor-Basics/Les03-Docenttekst-Notes.md)
+> - [Lesopdracht](../Les03-Cursor-Basics/Les03-Bijlage-A-Lesopdracht.md)
+> - [Huiswerkopdracht](../Les03-Cursor-Basics/Les03-Bijlage-B-Huiswerkopdracht.md)
+> - [Hands-On Opdracht (PDF)](../Les03-Cursor-Basics/Les03-Hands-On-Opdracht.pdf)
+> - [Huiswerkopdracht (PDF)](../Les03-Cursor-Basics/Les03-Huiswerkopdracht.pdf)
+> - Debug Challenge zips: standaard (5 fouten), hard (12 fouten), super hard (18 fouten)

 ---

 ## Hoofdstuk
 **Deel 1: AI Foundations** (Les 1-4)

+## Context
+Oorspronkelijk zou les 3 gaan over AI Ethics, Privacy & Security. Tim heeft besloten om in plaats daarvan een praktische les over Cursor te geven. Dit sluit beter aan bij wat studenten nodig hebben en was een goede keuze — studenten waren enthousiast.
+
 ## Beschrijving
-Cruciale kennis over veilig en ethisch werken met AI, gecombineerd met professionele IDE workflow.
+Praktische les over Cursor als primaire AI-powered editor. Studenten leren Cursor installeren, configureren en gebruiken om een compleet Next.js project op te zetten.

 ---

 ## Te Behandelen

-### Groepsdiscussie (15 min)
-Bespreek klassikaal de blog posts uit Les 2 - wat waren de ervaringen met AI-assisted coding? Welke limitations ontdekte je?
+### Blok 1: Cursor Overzicht (15 min)
+- Wat is Cursor? VS Code fork met AI
+- Free vs Pro vs Student Plan (500 fast requests/maand)
+- Request types: Tab Completion (gratis), Chat, Composer, Inline Edit (elk 1 request)

-### Deel 1: Ethics, Privacy & Security (1 uur)
+### Blok 2: Samen Doen — Setup Check (10 min)
+- Terminal check: node -v, git --version, npm -v, npx -v
+- Cursor Student Plan activeren via cursor.com/students

-**Privacy Risico's - Wat NOOIT te delen:**
- API keys
- Client data
- Credentials
- Persoonlijke informatie
+### Blok 3: Cursor Skills & Docs (10 min)
+- Settings → Features → Docs: Next.js, React, Tailwind toevoegen
+- @docs mentions in Chat voor framework-specifieke hulp

-**Overige Onderwerpen:**
- Data ownership bij AI services
- Bias in AI models
- Security vulnerabilities (SQL injection, XSS, prompt injection)
- GDPR/AVG compliance basics
- Professional responsibility als developer
- Wanneer gebruik je AI wel/niet?
+### Blok 4: Nieuw Project Aanmaken (15 min)
+- git init → npx create-next-app@latest
+- TypeScript, Tailwind, App Router, src/ directory

-### Deel 2: WebStorm Integration (1 uur)
+### Blok 5: .cursorrules Genereren (10 min)
+- Via Cursor Chat (Ctrl+L / Cmd+L) — kost 1 request
+- Project-specifieke regels voor Next.js, Tailwind, TypeScript

-**WebStorm Setup:**
- WebStorm installatie (gratis via school licentie)
- OpenCode plugin voor WebStorm installeren en configureren
+### Blok 6: Keyboard Shortcuts & Request Management (15 min)
+- Tab = gratis autocomplete
+- Ctrl+K / Cmd+K = Inline Edit (1 request)
+- Ctrl+L / Cmd+L = Chat (1 request)
+- Ctrl+I / Cmd+I = Composer (1 request)
+- Slim combineren van taken in 1 prompt

-**Voordelen IDE vs Standalone:**
- Project context
- Git integration
- Debugging
- Refactoring tools
+### Pauze (15 min)

-**Live Demo:**
- Zelfde taak in OpenCode standalone vs WebStorm
+### Blok 7: Hands-On — Bouw Componenten (75 min)
+- Taak 1: Hero Component via Composer
+- Taak 2: Styling tweaken via Inline Edit
+- Taak 3: Extra feature naar keuze (FeatureCards, ContactForm, of Footer)
+- Git commit
+- Verder bouwen voor wie klaar is

 ---

 ## Tools
- WebStorm (school licentie)
- OpenCode plugin
- Git
+- Cursor (Student Plan — gratis Pro voor studenten)
+- Git & GitHub
+- Node.js + npx
+- Next.js, TypeScript, Tailwind CSS

 ---

-## Lesopdracht (2 uur)
+## Lesopdracht (75 min — hands-on na pauze)
+Beschikbaar als losse PDF: [Les03-Hands-On-Opdracht.pdf](../Les03-Cursor-Basics/Les03-Hands-On-Opdracht.pdf)

-### Deel 1: Security Workshop (1 uur)
-
-**Groepswerk (30 min):**
- Docent toont 3 AI-generated code snippets met security/privacy issues
- Studenten identificeren problemen in groepjes
-
-**Individueel (30 min):**
- Laat AI code genereren voor een login form
- Review op security
- Fix problemen
- Maak persoonlijke "AI Safety Checklist" voor toekomstig gebruik
-
-### Deel 2: WebStorm Setup (1 uur)
-
-**Setup:**
- Installeer WebStorm met school licentie
- Installeer OpenCode plugin
- Configureer met je model
-
-**Vergelijking:**
- Rebuild een component uit Les 2 in WebStorm
- Ervaar het verschil
-
-**Documentatie:**
- Voordelen van IDE vs standalone
- Welke workflow prefereer je?
+Stappen:
+1. Nieuw project aanmaken (git init, npx create-next-app, npm run dev)
+2. Cursor configureren (Skills/Docs, .cursorrules genereren)
+3. Componenten bouwen (Hero via Composer, styling via Inline Edit, extra feature)
+4. Git commit

 ---

-## Huiswerk (2 uur)
+## Huiswerk: Debug Challenge

-**Bouw Secure Feature:**
-Kies één van:
- Contact form met server-side validatie
- User authentication flow met JWT
+Studenten krijgen een intentioneel kapot Next.js project en moeten het repareren met Cursor. Drie moeilijkheidsniveaus:

-**Process:**
-1. Laat AI initial code genereren
-2. Review met je Safety Checklist
-3. Identificeer en fix alle security/privacy issues
+| Niveau | Fouten | Categorieën | Geschatte tijd |
+|--------|--------|-------------|----------------|
+| **Standaard** | 5 | Missing deps, typos, missing imports, inline styles → Tailwind | 1.5-2 uur |
+| **Hard** | 12 | + logische fouten, React anti-patterns, useEffect bugs | 2-3 uur |
+| **Super Hard** | 18 | + Next.js Server/Client, circular deps, TypeScript, Context | 3-4 uur |

-**Uitgebreide README:**
- Wat AI genereerde
- Welke issues je vond (security, privacy, GDPR)
- Hoe je ze fixt
- Lessons learned
- Waarom WebStorm workflow beter/slechter is dan standalone OpenCode
+Inleveren via Teams: GitHub link + screenshot + beschrijving van gefixt fouten.
+
+Deadline: Vóór Les 4.

 ---

 ## Leerdoelen
 Na deze les kan de student:
- Privacy risico's bij AI-gebruik identificeren
- Security vulnerabilities in AI-gegenereerde code herkennen
- GDPR/AVG compliance basics begrijpen
- WebStorm met OpenCode plugin configureren
- Het verschil tussen standalone en IDE-geïntegreerde workflow beoordelen
- Een persoonlijke AI Safety Checklist toepassen
+- Cursor installeren en het Student Plan activeren
+- Skills/Docs configureren voor Next.js, React en Tailwind
+- Een .cursorrules bestand genereren via Cursor Chat
+- Een nieuw Next.js project opzetten met npx create-next-app
+- De keyboard shortcuts (Tab, Ctrl+K, Ctrl+L, Ctrl+I) toepassen
+- Requests efficiënt beheren door taken te combineren
+- Componenten bouwen met Composer en Inline Edit
+- Fouten debuggen met behulp van Cursor
--- a/Samenvattingen/Les04-Samenvatting.md
+++ b/Samenvattingen/Les04-Samenvatting.md
@@ -1,131 +1,93 @@
-# Les 4: Effectief Prompting, Iteratief Werken & Skills
-
-> 📋 **Lesmateriaal nog niet uitgewerkt**
->
-> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
-> - Les04-Slide-Overzicht.md
-> - Les04-Lesplan.md
-> - Les04-Bijlage-A-Lesopdracht.md
-> - Les04-Bijlage-B-Huiswerkopdracht.md
+# Les 4: TypeScript Fundamentals

 ---

 ## Hoofdstuk
-**Deel 1: AI Foundations** (Les 1-4)
+**Deel 2: Technical Foundations** (Les 4-9)

 ## Beschrijving
-Geavanceerde prompt engineering technieken en introductie tot Skills.sh voor herbruikbare AI best practices.
+Introductie tot TypeScript: waarom het waardevol is, hoe je types schrijft, en de basis die nodig is om straks React/Next.js te typen. Deel 1 van 2 TypeScript-lessen.

 ---

 ## Te Behandelen

-### Groepsdiscussie (15 min)
-Bespreek klassikaal de security/privacy bevindingen uit Les 3 - welke issues vonden jullie in AI-gegenereerde code? Hoe zien jullie AI Safety Checklists eruit?
+### Waarom TypeScript? (15 min)
+- Het probleem met JavaScript: runtime errors die je pas ziet als het te laat is
+- Live demo: JS vs TS in Cursor — zelfde code, maar TS vangt fouten vooraf
+- Voordelen: compile-time errors, betere autocomplete, zelf-documenterend, AI tools begrijpen getypte code beter
+- TypeScript is de standaard: Next.js, React, alles is TypeScript

-### Geavanceerde Prompt Engineering
- Zero-shot vs few-shot prompting
- Chain-of-thought reasoning
- Role prompting
- Constraint-based prompting
+### Basic Types & Type Inference (15 min)
+- Primitives: `string`, `number`, `boolean`
+- Arrays: `number[]`, `string[]`, `Array<T>`
+- Type inference: TypeScript raadt types vaak zelf
+- Regel: annotate function parameters, laat TS de rest inferren

-### Skills.sh Introductie
- Wat zijn Skills (herbruikbare best-practices packages)
- Hoe Skills werken (procedurele kennis voor AI agents)
- Skills installeren via CLI (`npx skills add <skill-name>`)
- Skills gebruiken in OpenCode/WebStorm
- Hoe Skills de kwaliteit verhogen zonder extra prompting
+### Interfaces & Type Aliases (15 min)
+- Interfaces: beschrijven de shape van objecten
+- Optional properties met `?`
+- Type aliases: `type Status = "pending" | "approved" | "rejected"`
+- Union types en literal types
+- Interface vs Type: wanneer welke?

-### Iteratief Werken
- Start simpel → voeg complexiteit toe
- Context effectief gebruiken
+### Functies & Errors (10 min)
+- Function parameters en return types typen
+- Veelvoorkomende TypeScript errors lezen en oplossen
+- Hoe Cursor helpt met TypeScript errors (Cmd+K → fix)

 ---

 ## Tools
- OpenCode/WebStorm
- Skills.sh
- vercel-react-best-practices skill
+- Cursor (Student Plan)
+- TypeScript
+- Node.js / ts-node

 ---

-## Lesopdracht (2 uur)
+## Lesopdracht (75 min)

-### Deel 1: Skills Setup (30 min)
+### TypeScript Escaperoom 🔐

-**Installatie:**
- Installeer Skills CLI
- Add "vercel-react-best-practices" skill
+Gamified TypeScript leerervaring met 8 "kamers" (puzzels):

-**Vergelijking:**
- Bouw component ZONDER skill active
- Bouw zelfde component WITH skill active
- Zie het verschil in code quality
+| Kamer | Concept | Moeilijkheid |
+|-------|---------|--------------|
+| 1 | Basic Types | ⭐ Makkelijk |
+| 2 | Type Inference | ⭐ Makkelijk |
+| 3 | Interfaces | ⭐⭐ Medium |
+| 4 | Optional Properties | ⭐⭐ Medium |
+| 5 | Union Types | ⭐⭐ Medium |
+| 6 | Type Aliases | ⭐⭐ Medium |
+| 7 | Functies Typen | ⭐⭐⭐ Moeilijk |
+| 8 | Boss Room (alles samen) | ⭐⭐⭐ Moeilijk |

-**Documenteer concrete verschillen:**
- Types
- Error handling
- Accessibility
- Performance patterns
-
-### Deel 2: Iterative Build Challenge met Skills (1u 30min)
-
-**Bouw data filtering systeem voor productlijst in 4 iteraties (~25 min elk):**
-
-| Iteratie | Focus |
-|----------|-------|
-| 1 | Basis filter dropdown (category) |
-| 2 | Meer filters (price range slider, brand checkboxes, rating stars) met Skills guidance |
-| 3 | UX polish (clear all filters button, active filter chips, mobile responsive, loading states) |
-| 4 | URL state management & advanced features (sorting, search) |
-
-**Documenteer per iteratie:**
- Hoe hielpen Skills?
- Welke best practices werden automatisch toegepast?
+Studenten fixen TypeScript code in elke kamer. Als alles compiled, krijgen ze de escape code: **TYPE-SAFE-CODE-LOCK-OPEN-DOOR-FREE-DOM!**

 ---

 ## Huiswerk (2 uur)

-### Deel 1: Prompt Library (1 uur)
+### JS → TypeScript Converter

-Maak persoonlijke "prompt library" met 8 herbruikbare, geoptimaliseerde prompts voor:
-1. Component creation
-2. Bug fixing
-3. Refactoring
-4. Testing
-5. API integration
-6. Form validation
-7. Responsive layout
-8. Performance optimization
+Studenten krijgen een werkend JavaScript project (4 bestanden: users, products, orders, utils) en moeten alles omzetten naar TypeScript:

-**Vereisten:**
- Test elk met ChatGPT EN Claude
- Verfijn tot consistent goede output
- Format: Markdown document met prompt templates
+- Interfaces schrijven voor alle objecten
+- Union types voor statussen en categorieën
+- Functies volledig typen
+- Geen `any` toegestaan
+- Tests (al in TypeScript) moeten slagen

-### Deel 2: Skills Exploration (1 uur)
-
-**Installeer 3 relevante Skills:**
-1. "web-design-guidelines"
-2. "frontend-design"
-3. "supabase-postgres-best-practices" OF andere relevante skill
-
-**Per skill:**
- Bouw klein component/feature met de skill active
- Documenteer wat de skill doet
- Concrete voorbeelden van hoe ze AI output beïnvloeden
-
-**Bonus:** Bekijk "skill-creator" skill
-
-**Delen:** Als GitHub gist
+**Verificatie:** `npm run check` (0 errors) + `npm test` (alle tests groen)

 ---

 ## Leerdoelen
 Na deze les kan de student:
- Geavanceerde prompt technieken toepassen (zero-shot, few-shot, chain-of-thought)
- Skills installeren en gebruiken
- Het verschil zien tussen output met en zonder Skills
- Iteratief werken (simpel → complex)
- Een persoonlijke prompt library opbouwen
+- Uitleggen waarom TypeScript waardevol is voor developers
+- Basic types gebruiken (string, number, boolean, arrays)
+- Type inference begrijpen en toepassen
+- Interfaces en type aliases schrijven
+- Union types en literal types gebruiken
+- Optional properties en functies typen
+- TypeScript errors lezen en oplossen met Cursor