fix: lesson 4
This commit is contained in:
Tim Rijkse
126
readme.md
126
readme.md
@@ -13,7 +13,7 @@ Een 18-weekse cursus die studenten meeneemt van AI-beginner naar AI-powered deve
|
||||
| **v1** | Gegeven | Originele lessen (Les01, Les02 mappen) |
|
||||
| **[v2](v2/)** | In ontwikkeling | Verbeterde lessen op basis van feedback |
|
||||
|
||||
**Feedback & Reflectie:** [v1-feedback.md](v1-feedback.md) - Bevindingen na het geven van les 1 en 2
|
||||
**Feedback & Reflectie:** [v1-feedback.md](v1-feedback.md) - Bevindingen na het geven van les 1, 2 en 3
|
||||
|
||||
---
|
||||
|
||||
@@ -25,9 +25,9 @@ Een 18-weekse cursus die studenten meeneemt van AI-beginner naar AI-powered deve
|
||||
|-----|-----------|------|--------|
|
||||
| 01 | [Introductie tot AI en Large Language Models](Samenvattingen/Les01-Samenvatting.md) | 1 | ✅ Gegeven |
|
||||
| 02 | [AI Code Assistants (OpenCode → Cursor)](Samenvattingen/Les02-Samenvatting.md) | 1 | ✅ Gegeven |
|
||||
| 03 | [Cursor Setup & Basics](Samenvattingen/Les03-Samenvatting.md) | 1 | 🔨 In ontwikkeling |
|
||||
| 04 | [Effectief Prompting, Iteratief Werken & Skills](Samenvattingen/Les04-Samenvatting.md) | 1 | 📋 Samenvatting |
|
||||
| 05 | [TypeScript Basics](Samenvattingen/Les05-Samenvatting.md) | 2 | 📋 Samenvatting |
|
||||
| 03 | [Cursor Setup & Basics](Samenvattingen/Les03-Samenvatting.md) | 1 | ✅ Gegeven |
|
||||
| 04 | [TypeScript Fundamentals](Samenvattingen/Les04-Samenvatting.md) | 2 | 🔨 In ontwikkeling |
|
||||
| 05 | [TypeScript voor React/Next.js](Samenvattingen/Les05-Samenvatting.md) | 2 | 📋 Samenvatting |
|
||||
| 06 | [Next.js 1: Pages, Routing & Layouts](Samenvattingen/Les06-Samenvatting.md) | 2 | 📋 Samenvatting |
|
||||
| 07 | [Next.js 2: Server Components & Data Fetching](Samenvattingen/Les07-Samenvatting.md) | 2 | 📋 Samenvatting |
|
||||
| 08 | [Next.js 3: API Routes & Server Actions](Samenvattingen/Les08-Samenvatting.md) | 2 | 📋 Samenvatting |
|
||||
@@ -48,8 +48,8 @@ Een 18-weekse cursus die studenten meeneemt van AI-beginner naar AI-powered deve
|
||||
|
||||
| Deel | Lessen | Tools | Kosten |
|
||||
|------|--------|-------|--------|
|
||||
| Deel 1: AI Foundations | 1-4 | ChatGPT, v0.dev, OpenCode, **Cursor** | Gratis (Cursor Student Plan) |
|
||||
| Deel 2: Technical Foundations | 5-10 | TypeScript, Next.js, Supabase | Gratis |
|
||||
| Deel 1: AI Foundations | 1-3 | ChatGPT, v0.dev, OpenCode, **Cursor** | Gratis (Cursor Student Plan) |
|
||||
| Deel 2: Technical Foundations | 4-10 | TypeScript, Next.js, Supabase | Gratis |
|
||||
| Deel 3: Full-Stack Development | 11-14 | Next.js, Supabase, Tailwind, **shadcn/ui**, Cursor | Gratis |
|
||||
| Deel 4: Advanced AI & Deployment | 15-18 | Cursor, Vercel AI SDK, Vercel | Gratis (Cursor Student Plan) |
|
||||
|
||||
@@ -59,7 +59,7 @@ Een 18-weekse cursus die studenten meeneemt van AI-beginner naar AI-powered deve
|
||||
|
||||
# Deel 1: AI Foundations
|
||||
|
||||
**4 lessen · 7 EC**
|
||||
**3 lessen · 5 EC**
|
||||
|
||||
Kennismaking met AI, LLMs en de basis van AI-assisted development met Cursor.
|
||||
|
||||
@@ -141,92 +141,104 @@ Kennismaking met AI, LLMs en de basis van AI-assisted development met Cursor.
|
||||
|
||||
### Les 3: Cursor Setup & Basics
|
||||
|
||||
**Tools:** Cursor, Git, GitHub
|
||||
**Tools:** Cursor (Student Plan), Git, GitHub, Next.js, TypeScript, Tailwind CSS
|
||||
|
||||
**Docent vertelt:**
|
||||
- Cursor overview: tab completion, inline edits, chat, composer
|
||||
- Free tier vs Student Plan vs Pro
|
||||
- Installatie en first-time setup
|
||||
- Keyboard shortcuts: `Tab` (autocomplete), `Ctrl+K` (inline), `Ctrl+L` (chat), `Ctrl+Shift+L` (composer)
|
||||
- AI model keuze: wanneer Haiku vs Sonnet?
|
||||
- Privacy & security: hoe Cursor data behandelt
|
||||
- `.cursorrules` introduceer: custom instructions voor je project
|
||||
- Cursor overview: VS Code fork met AI, tab completion, inline edits, chat, composer
|
||||
- Free vs Pro vs Student Plan (500 fast requests/maand)
|
||||
- Request types en kosten: Tab = gratis, Chat/Composer/Inline Edit = 1 request
|
||||
- Cursor Skills & Docs: framework documentatie toevoegen via Settings → Features → Docs
|
||||
- .cursorrules genereren via Chat (1 request, goed besteed)
|
||||
- Keyboard shortcuts: `Tab`, `Ctrl+K`, `Ctrl+L`, `Ctrl+I`
|
||||
|
||||
**Studenten doen:**
|
||||
- **Groepsdiscussie:** Bespreek klassikaal ervaringen van vorige les - wat vond je van Cursor vs OpenCode?
|
||||
- Cursor installeren en Student Plan activeren
|
||||
- Een van je Les 2 projecten openen in Cursor
|
||||
- Tab completion, Ctrl+K, en Ctrl+L uitproberen
|
||||
- Begint `.cursorrules` bestand voor je project
|
||||
- Terminal setup check (node, git, npm, npx)
|
||||
- Cursor Student Plan activeren
|
||||
- Nieuw project: git init → npx create-next-app@latest
|
||||
- Skills/Docs configureren (Next.js, React, Tailwind)
|
||||
- .cursorrules genereren via Chat
|
||||
- Hands-on (75 min): Hero component bouwen, styling tweaken, extra feature toevoegen
|
||||
- Git commit
|
||||
|
||||
**Lesopdracht:** Open je Les 2 project in Cursor, voeg 3 nieuwe features toe (elk met ander shortcut: Tab, Ctrl+K, Chat), test telkens of het werkt, noteer: welke shortcut voelt het nuttigst?
|
||||
**Lesopdracht:** Bouw een nieuw Next.js project met Cursor: scaffold, configureer, bouw minimaal 2 componenten, commit.
|
||||
|
||||
**Huiswerk:** Experimenteer met Cursor Composer (Ctrl+Shift+L) op een bestaande component, schrijf reflectie (300 woorden) vergelijk je Cursor/OpenCode ervaringen, maak start-`.cursorrules` voor je eindproject.
|
||||
**Huiswerk:** Debug Challenge — intentioneel kapot project fixen met Cursor. Drie niveaus: standaard (5 fouten), hard (12 fouten), super hard (18 fouten).
|
||||
|
||||
[→ Ga naar Les 3](Samenvattingen/Les03-Samenvatting.md)
|
||||
**Lesmateriaal:**
|
||||
- [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)
|
||||
|
||||
[→ Ga naar Les 3 Samenvatting](Samenvattingen/Les03-Samenvatting.md)
|
||||
|
||||
---
|
||||
|
||||
### Les 4: Effectief Prompting, Iteratief Werken & Skills
|
||||
### Les 4: TypeScript Fundamentals
|
||||
|
||||
**Tools:** OpenCode/WebStorm, Skills.sh
|
||||
**Tools:** Cursor (Student Plan), TypeScript, Node.js
|
||||
|
||||
**Docent vertelt:**
|
||||
- Zero-shot vs few-shot prompting (met voorbeelden)
|
||||
- Chain-of-thought reasoning: laat AI stap voor stap denken
|
||||
- Role prompting en constraint-based prompting
|
||||
- Skills.sh: wat het is en waarom het werkt
|
||||
- Iteratief werken: start simpel → voeg complexiteit toe
|
||||
- Waarom TypeScript? Het probleem met JavaScript runtime errors
|
||||
- Live demo: JS vs TS in Cursor — zelfde code, maar TS vangt fouten vooraf
|
||||
- Basic types: string, number, boolean, arrays
|
||||
- Type inference: wanneer TypeScript types zelf raadt
|
||||
- Interfaces en type aliases
|
||||
- Union types en literal types
|
||||
- Functies typen: parameters en return types
|
||||
- Veelvoorkomende TypeScript errors lezen en oplossen
|
||||
|
||||
**Studenten doen:**
|
||||
- **Groepsdiscussie:** Bespreek klassikaal ervaringen met OpenCode - wat werkte, wat niet?
|
||||
- Verschillende prompt technieken uitproberen
|
||||
- Skills.sh installeren en eerste skill toevoegen
|
||||
- Vergelijk output met/zonder skill
|
||||
- Bouw feature in 4 iteraties (simpel → complex)
|
||||
- TypeScript Escaperoom: 8 kamers met type-puzzels van makkelijk naar moeilijk
|
||||
- Elke kamer leert een concept (basics → inference → interfaces → unions → functies)
|
||||
- Escape code ontgrendelen door alle type-errors te fixen
|
||||
|
||||
**Lesopdracht:** Installeer Skills.sh, vergelijk output met/zonder skill, bouw data filtering systeem in 4 iteraties (basis filter → multi-filter → sort → search).
|
||||
**Lesopdracht:** TypeScript Escaperoom — los 8 kamers met TypeScript puzzels op. Gebruik Cursor's autocomplete en error fixing.
|
||||
|
||||
**Huiswerk:** Maak persoonlijke prompt library met 8 templates voor verschillende taken, installeer en test 3 Skills, documenteer concrete verschillen.
|
||||
**Huiswerk:** JS → TypeScript Converter — zet een werkend JavaScript project (users, products, orders, utils) volledig om naar TypeScript. Tests (al in TS) moeten slagen.
|
||||
|
||||
[→ Ga naar Les 4](Samenvattingen/Les04-Samenvatting.md)
|
||||
**Lesmateriaal:**
|
||||
- [Slide-Overzicht](Les04-TypeScript-Fundamentals/Les04-Slide-Overzicht.md)
|
||||
- [Lesplan](Les04-TypeScript-Fundamentals/Les04-Lesplan.md)
|
||||
- [Docenttekst](Les04-TypeScript-Fundamentals/Les04-Docenttekst.md)
|
||||
- [Lesopdracht](Les04-TypeScript-Fundamentals/Les04-Bijlage-A-Lesopdracht.md)
|
||||
- [Huiswerkopdracht](Les04-TypeScript-Fundamentals/Les04-Bijlage-B-Huiswerkopdracht.md)
|
||||
|
||||
[→ Ga naar Les 4 Samenvatting](Samenvattingen/Les04-Samenvatting.md)
|
||||
|
||||
---
|
||||
|
||||
# Deel 2: Technical Foundations
|
||||
|
||||
**6 lessen · 10 EC**
|
||||
**7 lessen · 12 EC**
|
||||
|
||||
Stevige technische basis: TypeScript, Next.js, databases en Supabase.
|
||||
|
||||
---
|
||||
|
||||
### Les 5: TypeScript Basics
|
||||
### Les 5: TypeScript voor React/Next.js
|
||||
|
||||
**Tools:** OpenCode/WebStorm, TypeScript
|
||||
**Tools:** Cursor, TypeScript, React, Next.js
|
||||
|
||||
**Docent vertelt:**
|
||||
- Waarom TypeScript? Voordelen boven JavaScript
|
||||
- Basic types: string, number, boolean, array, object
|
||||
- Type inference: wanneer TypeScript types zelf raadt
|
||||
- Interfaces en type aliases
|
||||
- TypeScript met React: Props typen, useState met types
|
||||
- TypeScript + React: props typen, useState met types
|
||||
- Event handlers en callback types
|
||||
- Generics basics (Array<T>, Promise<T>)
|
||||
- Veel voorkomende TypeScript errors en hoe ze op te lossen
|
||||
- API response types en async functies
|
||||
- Type narrowing en utility types (Partial, Pick, Omit)
|
||||
- JS naar TS omzetten in een React project
|
||||
|
||||
**Studenten doen:**
|
||||
- JavaScript file omzetten naar TypeScript
|
||||
- Interfaces schrijven voor eigen data
|
||||
- React component met typed props maken
|
||||
- TypeScript errors debuggen
|
||||
- React components typen met interfaces
|
||||
- useState en useEffect met types gebruiken
|
||||
- Event handlers correct typen
|
||||
- Bestaand React project omzetten naar TypeScript
|
||||
|
||||
**Lesopdracht:**
|
||||
1. Zet bestaand JS component om naar TypeScript
|
||||
2. Maak interface voor User en Product data
|
||||
3. Bouw typed React component met props
|
||||
4. Fix 5 TypeScript errors in gegeven code
|
||||
**Lesopdracht:** Bouw getypte React componenten met Cursor. Type props, state, events en API responses.
|
||||
|
||||
**Huiswerk:** Maak 3 nieuwe components volledig in TypeScript, schrijf interfaces voor je eindproject data, maak cheat sheet met TypeScript patterns.
|
||||
**Huiswerk:** Zet een compleet React project om van JavaScript naar TypeScript. Alle componenten, hooks en API calls volledig typen.
|
||||
|
||||
[→ Ga naar Les 5](Samenvattingen/Les05-Samenvatting.md)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user