rubberducky/novi-lessons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: les 10

Browse Source
This commit is contained in:
Tim Rijkse
2026-02-02 08:29:06 +01:00
parent b39c4245c2
commit b0804d0adf
2 changed files with 90 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

294
Samenvattingen/Les10-Samenvatting.md
View File

@@ -1,270 +1,126 @@
# Les 10: AI Tool Selection & Workflows # Les 10: Full-Stack Mini Project
--- ---
## Hoofdstuk ## Hoofdstuk
**Deel 3: AI Tooling & Prototyping** (Les 10-12) **Deel 3: Integration & AI Tooling** (Les 10-12)
## Beschrijving ## Beschrijving
Leer de sterke en zwakke punten van elke AI tool kennen. Ontwikkel een framework om de juiste tool te kiezen voor de juiste taak en bouw je eigen workflow. 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.
--- ---
## Te Behandelen ## Te Behandelen
### Waarom Tool Selection Belangrijk Is ### Groepsdiscussie (15 min)
Bespreek klassikaal de Supabase ervaringen uit Les 9 - welke uitdagingen kwamen jullie tegen bij authenticatie en RLS?
Je kent nu meerdere AI tools: ### Doel van deze les
- ChatGPT (brainstormen, planning, uitleg)
- Claude (lange context, nuance, analyse)
- v0.dev (UI prototyping)
- OpenCode (code schrijven met project context)
**Het probleem:** Elke tool heeft sterke en zwakke punten. De juiste tool kiezen bespaart tijd en levert betere resultaten. Je hebt nu alle bouwstenen:
- TypeScript (Les 5)
- Next.js met App Router (Les 6-7)
- Supabase database & auth (Les 8-9)
Vandaag combineren we dit in een **werkende mini-app**. Geen nieuwe concepten - alleen integratie en toepassing.
--- ---
### Tool Vergelijking ### Mini Project: Personal Bookmarks
| Tool | Sterk in | Minder sterk in | Kosten | Een simpele bookmark manager waar je links kunt opslaan.
|------|----------|-----------------|--------|
| **ChatGPT** | Brainstormen, uitleg, planning, algemene kennis | Grote codebases, lange context | Gratis / Pro €20/maand | **Features:**
| **Claude** | Lange documenten, nuance, analyse, veiligheid | Soms te voorzichtig, geen images genereren | Gratis / Pro $20/maand | - Login met Supabase Auth
| **v0.dev** | UI components, snel prototypen, Tailwind | Complexe logica, backend | Gratis tier | - Bookmarks toevoegen (URL + titel)
| **OpenCode** | Code schrijven, project context, terminal | Geen web access, geen images | Gratis | - Bookmarks bekijken en verwijderen
**Tech stack:**
- Next.js 14 met App Router
- TypeScript
- Tailwind CSS
- Supabase (auth + database)
- React Query
--- ---
### Tool Selection Framework ### Stap-voor-stap
**Stap 1: Identificeer de taak** #### Database Schema
- Wat wil je bereiken?
- Hoe complex is het?
- Hoeveel context is nodig?
**Stap 2: Kies de juiste tool** **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.
Als je wilt... Gebruik...
─────────────────────────────────────────────────
Brainstormen over een idee → ChatGPT
Een lange codebase analyseren → Claude
Snel een UI component maken → v0.dev
Code schrijven met project context → OpenCode
Een complex document begrijpen → Claude
Uitleg krijgen over een concept → ChatGPT
React component met styling → v0.dev
Feature implementeren in project → OpenCode
```
--- #### Wat je bouwt
### Workflow Patterns 1. **Login pagina** - Supabase Auth
2. **Dashboard** - Lijst van bookmarks
**Pattern 1: Planning → Prototyping → Implementation** 3. **Add form** - URL + titel invoeren
``` 4. **Delete** - Bookmark verwijderen
1. ChatGPT: Brainstorm features, maak planning
2. v0.dev: Genereer UI prototypes
3. OpenCode: Implementeer met project context
```
**Pattern 2: Research → Design → Build**
```
1. ChatGPT/Claude: Research beste aanpak
2. v0.dev: Design components
3. OpenCode: Bouw en integreer
```
**Pattern 3: Quick Iteration**
```
1. v0.dev: Snel component genereren
2. OpenCode: Aanpassen en integreren
3. Repeat
```
---
### Praktijk: Dezelfde Taak, Drie Tools
**Opdracht:** Bouw een Contact Form component
**Met ChatGPT:**
```
Prompt: Ik wil een contact form maken met React en Tailwind.
Velden: naam, email, bericht. Validatie nodig.
Geef me de code en leg uit hoe het werkt.
```
→ Krijg: Uitleg + code, maar zonder project context
**Met v0.dev:**
```
Prompt: Modern contact form with name, email, message fields.
Tailwind styling, validation, responsive design.
```
→ Krijg: Visueel prototype, direct te gebruiken
**Met OpenCode:**
```
Prompt: Maak een ContactForm component in src/components/
met naam, email en bericht velden. Gebruik onze bestaande
Input en Button components. Voeg Zod validatie toe.
```
→ Krijg: Geïntegreerde code die past in je project
---
### Wanneer Combineer Je Tools?
**Scenario 1: Nieuwe feature bouwen**
1. ChatGPT: "Hoe zou je een dark mode toggle implementeren in React?"
2. v0.dev: "Dark mode toggle component with smooth transition"
3. OpenCode: "Integreer deze toggle in onze navbar, sla preference op in localStorage"
**Scenario 2: Bug oplossen**
1. OpenCode: Vraag om bug te identificeren
2. Claude: Als de foutmelding complex is, vraag om uitleg
3. OpenCode: Implementeer de fix
**Scenario 3: Nieuwe technologie leren**
1. ChatGPT: "Leg uit hoe React Server Components werken"
2. v0.dev: "Example of React Server Component with data fetching"
3. OpenCode: "Help me dit toe te passen in mijn Next.js project"
---
### Anti-Patterns (Wat Niet Te Doen)
**❌ Verkeerde tool voor de taak:**
- ChatGPT vragen om een hele app te bouwen → te weinig context
- v0.dev vragen om complexe backend logica → niet zijn sterke punt
- OpenCode vragen om design inspiratie → kan geen images maken
**❌ Heen en weer kopiëren zonder begrip:**
- Kopieer niet blind code van ChatGPT naar je project
- Begrijp eerst WAT de code doet
**❌ Dezelfde prompt in elke tool:**
- Pas je prompt aan per tool
- v0.dev wil visuele beschrijvingen
- OpenCode wil project-specifieke context
--- ---
## Tools ## Tools
- ChatGPT - VS Code
- Claude - Supabase Dashboard
- v0.dev - Browser DevTools
- OpenCode/WebStorm
--- ---
## Lesopdracht (2 uur) ## Lesopdracht (2.5 uur)
### Tool Comparison Challenge ### Bouw de Bookmark Manager
**Deel 1: Dezelfde Taak, Drie Tools (1 uur)** **Checkpoints:**
Bouw een "Contact Form" component met alle drie de tools: | 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 |
1. **ChatGPT (20 min)** **Minimale eisen:**
- Vraag om code + uitleg - [ ] Login/logout werkt
- Noteer: hoe lang duurde het, kwaliteit output, wat miste? - [ ] Bookmarks toevoegen werkt
- [ ] Bookmarks worden getoond
2. **v0.dev (20 min)** - [ ] Delete werkt
- Genereer visueel prototype
- Noteer: hoe snel, hoe mooi, hoe aanpasbaar?
3. **OpenCode (20 min)**
- Integreer in bestaand project
- Noteer: hoe goed past het, hoeveel aanpassing nodig?
**Deel 2: Analyse (30 min)**
Vul dit schema in:
| Aspect | ChatGPT | v0.dev | OpenCode |
|--------|---------|--------|----------|
| Tijd tot werkend component | | | |
| Kwaliteit code | | | |
| Visueel design | | | |
| Past in project | | | |
| Hoeveel aanpassing nodig | | | |
| Totaalscore (1-10) | | | |
**Deel 3: Workflow Documentatie (30 min)**
- Maak `docs/WORKFLOW.md` in je project
- Documenteer je ideale workflow per taaktype
- Inclusief template prompts voor elke tool
### Deliverable ### Deliverable
- Screenshot van alle 3 contact forms - Werkende lokale applicatie
- Ingevuld vergelijkingsschema - Screenshot van je app met data
- `docs/WORKFLOW.md` bestand
--- ---
## Huiswerk (2 uur) ## Huiswerk (1 uur)
### Bouw Je Tool Selection Cheat Sheet ### Reflectie
**Deel 1: Cheat Sheet Maken (1 uur)** Schrijf korte reflectie (200 woorden):
- Wat ging goed bij het integreren?
- Waar liep je vast?
- Wat zou je volgende keer anders doen?
Maak een persoonlijke "Tool Selection Cheat Sheet" (1 pagina): Maak een lijst van 3 verbeterpunten voor je code.
```markdown
# Mijn AI Tool Cheat Sheet
## Wanneer gebruik ik wat?
### ChatGPT
- ✅ Gebruik voor: [jouw ervaring]
- ❌ Niet voor: [jouw ervaring]
- 💡 Beste prompt tip: [jouw tip]
### Claude
- ✅ Gebruik voor: [jouw ervaring]
- ❌ Niet voor: [jouw ervaring]
- 💡 Beste prompt tip: [jouw tip]
### v0.dev
- ✅ Gebruik voor: [jouw ervaring]
- ❌ Niet voor: [jouw ervaring]
- 💡 Beste prompt tip: [jouw tip]
### OpenCode
- ✅ Gebruik voor: [jouw ervaring]
- ❌ Niet voor: [jouw ervaring]
- 💡 Beste prompt tip: [jouw tip]
```
**Deel 2: Testen op Nieuwe Taken (45 min)**
Test je cheat sheet op 2 nieuwe taken:
1. Bouw een "Testimonial Card" component
2. Voeg een "Dark Mode Toggle" toe
Per taak: kies tools op basis van cheat sheet, voer uit, update cheat sheet.
**Deel 3: Reflectie (15 min)**
Schrijf korte reflectie (400 woorden):
- Welke tool is jouw favoriet en waarom?
- Wanneer combineer je tools?
- Wat ga je anders doen na deze les?
### Deliverable ### Deliverable
- Tool Selection Cheat Sheet (1 pagina) - Reflectie (200 woorden)
- 2 gebouwde components - 3 verbeterpunten
- Reflectie (400 woorden)
--- ---
## Leerdoelen ## Leerdoelen
Na deze les kan de student: Na deze les kan de student:
- De sterke en zwakke punten van elke AI tool benoemen - Een complete full-stack applicatie bouwen met Next.js, TypeScript en Supabase
- De juiste tool kiezen voor een specifieke taak - CRUD operaties implementeren met React Query
- Meerdere tools combineren in een effectieve workflow - Authenticatie integreren in een applicatie
- Een persoonlijke workflow documenteren - Zelfstandig integratieproblemen oplossen
- Template prompts schrijven per tool
- Kritisch evalueren welke tool wanneer het beste werkt

39
readme.md
View File

@@ -19,7 +19,7 @@ Een 18-weekse cursus die studenten meeneemt van AI-beginner naar AI-powered deve
| 07 | [Next.js Fundamentals 2: API Routes & Data Fetching](Samenvattingen/Les07-Samenvatting.md) | 2 | 📋 Samenvatting | | 07 | [Next.js Fundamentals 2: API Routes & Data Fetching](Samenvattingen/Les07-Samenvatting.md) | 2 | 📋 Samenvatting |
| 08 | [Database Principles](Samenvattingen/Les08-Samenvatting.md) | 2 | 📋 Samenvatting | | 08 | [Database Principles](Samenvattingen/Les08-Samenvatting.md) | 2 | 📋 Samenvatting |
| 09 | [Supabase Basics](Samenvattingen/Les09-Samenvatting.md) | 2 | 📋 Samenvatting | | 09 | [Supabase Basics](Samenvattingen/Les09-Samenvatting.md) | 2 | 📋 Samenvatting |
| 10 | [AI Tool Selection & Workflows](Samenvattingen/Les10-Samenvatting.md) | 3 | 📋 Samenvatting | | 10 | [Full-Stack Mini Project](Samenvattingen/Les10-Samenvatting.md) | 3 | 📋 Samenvatting |
| 11 | [Hands-on: Van Idee naar Prototype](Samenvattingen/Les11-Samenvatting.md) | 3 | 📋 Samenvatting | | 11 | [Hands-on: Van Idee naar Prototype](Samenvattingen/Les11-Samenvatting.md) | 3 | 📋 Samenvatting |
| 12 | [Introduction to Cursor](Samenvattingen/Les12-Samenvatting.md) | 3 | 📋 Samenvatting | | 12 | [Introduction to Cursor](Samenvattingen/Les12-Samenvatting.md) | 3 | 📋 Samenvatting |
| 13 | [Prompt Engineering & Custom GPTs](Samenvattingen/Les13-Samenvatting.md) | 4 | 📋 Samenvatting | | 13 | [Prompt Engineering & Custom GPTs](Samenvattingen/Les13-Samenvatting.md) | 4 | 📋 Samenvatting |
@@ -37,7 +37,7 @@ Een 18-weekse cursus die studenten meeneemt van AI-beginner naar AI-powered deve
|------|--------|-------|--------| |------|--------|-------|--------|
| Deel 1: AI Foundations | 1-4 | ChatGPT, v0.dev, OpenCode, WebStorm | Gratis (WebStorm via school) | | Deel 1: AI Foundations | 1-4 | ChatGPT, v0.dev, OpenCode, WebStorm | Gratis (WebStorm via school) |
| Deel 2: Technical Foundations | 5-9 | TypeScript, Next.js, React Query, Supabase | Gratis | | Deel 2: Technical Foundations | 5-9 | TypeScript, Next.js, React Query, Supabase | Gratis |
| Deel 3: AI Tooling & Prototyping | 10-12 | ChatGPT, Claude, v0.dev, OpenCode, Cursor | Free tier beschikbaar | | Deel 3: Integration & AI Tooling | 10-12 | Next.js, Supabase, Cursor | Free tier beschikbaar |
| Deel 4: Advanced AI Features | 13-18 | Cursor, Custom GPTs, Claude Projects, Vercel AI SDK, Tool Calling, Agents | Free tier beschikbaar | | Deel 4: Advanced AI Features | 13-18 | Cursor, Custom GPTs, Claude Projects, Vercel AI SDK, Tool Calling, Agents | Free tier beschikbaar |
**Eindopdracht:** Cursor (free tier voldoende) **Eindopdracht:** Cursor (free tier voldoende)
@@ -333,41 +333,32 @@ Stevige technische basis: TypeScript, Next.js, databases en Supabase.
--- ---
# Deel 3: AI Tooling & Prototyping # Deel 3: Integration & AI Tooling
**3 lessen · 5 EC** **3 lessen · 5 EC**
AI tools effectief inzetten voor professionele development. Integratie van alle geleerde technieken en introductie van professionele AI tools.
--- ---
### Les 10: AI Tool Selection & Workflows ### Les 10: Full-Stack Mini Project
**Tools:** ChatGPT, Claude, v0.dev, OpenCode **Tools:** VS Code, Supabase, Browser DevTools
**Docent vertelt:** **Docent vertelt:**
- Overzicht van alle AI tools die we kennen - Je hebt nu alle bouwstenen: TypeScript, Next.js, Supabase
- Sterke en zwakke punten per tool - Vandaag combineren we alles in een werkende mini-app
- Wanneer gebruik je welke tool? - Geen nieuwe concepten - alleen integratie en toepassing
- Tool selection framework: taak → tool
- Workflow patterns voor AI-assisted development
**Studenten doen:** **Studenten doen:**
- Dezelfde taak uitvoeren in 3 verschillende tools - **Groepsdiscussie:** Bespreek Supabase ervaringen uit Les 9 - welke uitdagingen bij auth en RLS?
- Output vergelijken en analyseren - Bookmark manager bouwen: login, bookmarks toevoegen/bekijken/verwijderen
- Tool selection framework invullen - Alle geleerde technieken combineren
- Eigen workflow documenteren - Zelfstandig integratieproblemen oplossen
| Tool | Sterk in | Minder sterk in | **Lesopdracht:** Bouw een Personal Bookmarks app met login, CRUD operaties, en RLS. Checkpoints: 30 min setup, 60 min auth, 90 min CRUD, 120 min delete, 150 min polish.
|------|----------|-----------------|
| ChatGPT | Brainstormen, uitleg, planning | Grote codebases |
| Claude | Lange context, nuance, analyse | Soms te voorzichtig |
| v0.dev | UI components, snel prototypen | Complexe logica |
| OpenCode | Code schrijven, project context | Geen web access |
**Lesopdracht:** Bouw een "Contact Form" component met 3 tools (ChatGPT planning → v0.dev UI → OpenCode logica). Documenteer per tool: wat werkte, wat niet, hoe lang duurde het. **Huiswerk:** Reflectie schrijven (200 woorden): wat ging goed, waar liep je vast. Maak lijst van 3 verbeterpunten voor je code.
**Huiswerk:** Maak je eigen "Tool Selection Cheat Sheet", test het op 2 nieuwe taken, reflecteer op je workflow (400 woorden).
[→ Ga naar Les 10](Samenvattingen/Les10-Samenvatting.md) [→ Ga naar Les 10](Samenvattingen/Les10-Samenvatting.md)