fix: lesson 4
This commit is contained in:
Tim Rijkse
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user