fix: better order
This commit is contained in:
Tim Rijkse
@@ -1,12 +1,4 @@
|
||||
# Les 5: AI voor Content en Asset Generation
|
||||
|
||||
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
||||
>
|
||||
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
|
||||
> - Les05-Slide-Overzicht.md
|
||||
> - Les05-Lesplan.md
|
||||
> - Les05-Bijlage-A-Lesopdracht.md
|
||||
> - Les05-Bijlage-B-Huiswerkopdracht.md
|
||||
# Les 5: AI Tool Selection & Workflows
|
||||
|
||||
---
|
||||
|
||||
@@ -14,112 +6,302 @@
|
||||
**Hoofdstuk 2: Intermediate** (Les 4-9)
|
||||
|
||||
## Beschrijving
|
||||
AI-gegenereerde visuals en assets voor professionele webprojecten.
|
||||
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.
|
||||
|
||||
---
|
||||
|
||||
## Te Behandelen
|
||||
|
||||
### Image Generation Tools Vergelijking
|
||||
- DALL-E 3 (via ChatGPT Plus)
|
||||
- Leonardo.ai
|
||||
- Ideogram
|
||||
- Midjourney alternatives
|
||||
### Waarom Tool Selection Belangrijk Is
|
||||
|
||||
### Prompt Engineering voor Images
|
||||
- Style descriptors
|
||||
- Mood en colors
|
||||
- Composition
|
||||
- Aspect ratios
|
||||
- Negative prompts
|
||||
Je kent nu meerdere AI tools:
|
||||
- ChatGPT (brainstormen, planning, uitleg)
|
||||
- Claude (lange context, nuance, analyse)
|
||||
- v0.dev (UI prototyping)
|
||||
- OpenCode (code schrijven met project context)
|
||||
|
||||
### Asset Generation Workflow voor Web
|
||||
- Hero images
|
||||
- Icons
|
||||
- Illustrations
|
||||
- Backgrounds
|
||||
**Het probleem:** Elke tool heeft sterke en zwakke punten. De juiste tool kiezen bespaart tijd en levert betere resultaten.
|
||||
|
||||
### Image Optimization voor Web
|
||||
- Compression
|
||||
- Formats (WebP, AVIF, etc.)
|
||||
- Responsive images
|
||||
---
|
||||
|
||||
### Copyright & Licenties
|
||||
- Copyright overwegingen bij AI-generated content
|
||||
- Wat mag wel/niet
|
||||
### Tool Vergelijking
|
||||
|
||||
### Integratie in Next.js
|
||||
- Next.js Image component optimalisatie
|
||||
- Best practices
|
||||
| Tool | Sterk in | Minder sterk in | Kosten |
|
||||
|------|----------|-----------------|--------|
|
||||
| **ChatGPT** | Brainstormen, uitleg, planning, algemene kennis | Grote codebases, lange context | Gratis / Pro €20/maand |
|
||||
| **Claude** | Lange documenten, nuance, analyse, veiligheid | Soms te voorzichtig, geen images genereren | Gratis / Pro $20/maand |
|
||||
| **v0.dev** | UI components, snel prototypen, Tailwind | Complexe logica, backend | Gratis tier |
|
||||
| **OpenCode** | Code schrijven, project context, terminal | Geen web access, geen images | Gratis |
|
||||
|
||||
---
|
||||
|
||||
### Tool Selection Framework
|
||||
|
||||
**Stap 1: Identificeer de taak**
|
||||
- Wat wil je bereiken?
|
||||
- Hoe complex is het?
|
||||
- Hoeveel context is nodig?
|
||||
|
||||
**Stap 2: Kies de juiste tool**
|
||||
|
||||
```
|
||||
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
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Workflow Patterns
|
||||
|
||||
**Pattern 1: Planning → Prototyping → Implementation**
|
||||
```
|
||||
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
|
||||
|
||||
---
|
||||
|
||||
### Je Eigen Workflow Documenteren
|
||||
|
||||
Maak een `docs/WORKFLOW.md` in je project:
|
||||
|
||||
```markdown
|
||||
# Mijn AI Workflow
|
||||
|
||||
## Planning Fase
|
||||
- Tool: ChatGPT
|
||||
- Wat: Feature breakdown, technische beslissingen
|
||||
- Template prompt: "Ik wil [feature]. Wat zijn de stappen?"
|
||||
|
||||
## UI Design Fase
|
||||
- Tool: v0.dev
|
||||
- Wat: Component prototypes
|
||||
- Template prompt: "Modern [component] with [requirements]"
|
||||
|
||||
## Implementation Fase
|
||||
- Tool: OpenCode
|
||||
- Wat: Code schrijven en integreren
|
||||
- Template prompt: "Maak [component] in [locatie] met [requirements]"
|
||||
|
||||
## Debugging
|
||||
- Tool: OpenCode (eerst), Claude (als het complex is)
|
||||
- Wat: Errors oplossen
|
||||
- Template prompt: "Ik krijg deze error: [error]. Dit is mijn code: [code]"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
- DALL-E 3 (ChatGPT Plus)
|
||||
- Leonardo.ai
|
||||
- Ideogram
|
||||
- Next.js Image component
|
||||
- ChatGPT
|
||||
- Claude
|
||||
- v0.dev
|
||||
- OpenCode/WebStorm
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (2 uur)
|
||||
|
||||
### Complete Visual Identity Challenge
|
||||
### Tool Comparison Challenge
|
||||
|
||||
**Kies thema voor fictieve SaaS landing page:**
|
||||
- Project management
|
||||
- Fitness app
|
||||
- Educational platform
|
||||
- Of eigen keuze
|
||||
**Deel 1: Dezelfde Taak, Drie Tools (1 uur)**
|
||||
|
||||
**Genereer complete asset set:**
|
||||
Bouw een "Contact Form" component met alle drie de tools:
|
||||
|
||||
| Asset | Specificaties |
|
||||
|-------|---------------|
|
||||
| Hero image | 16:9 landscape |
|
||||
| Feature icons | 6 stuks, consistent style, SVG-ready |
|
||||
| Custom illustraties | 2 stuks voor sections |
|
||||
| Background pattern | Seamless texture |
|
||||
| Favicon | Multiple sizes |
|
||||
1. **ChatGPT (20 min)**
|
||||
- Vraag om code + uitleg
|
||||
- Noteer: hoe lang duurde het, kwaliteit output, wat miste?
|
||||
|
||||
**Vereisten:**
|
||||
- Alle assets visueel consistent (coherent color palette, matching style, professional look)
|
||||
- Geoptimaliseerd voor web (<200KB per image, correct formats)
|
||||
- Geïntegreerd in Next.js landing page met Tailwind CSS
|
||||
- Proper Image component usage
|
||||
2. **v0.dev (20 min)**
|
||||
- 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
|
||||
- Screenshot van alle 3 contact forms
|
||||
- Ingevuld vergelijkingsschema
|
||||
- `docs/WORKFLOW.md` bestand
|
||||
|
||||
---
|
||||
|
||||
## Huiswerk (2 uur)
|
||||
|
||||
### Portfolio Project Visual Refresh
|
||||
### Bouw Je Tool Selection Cheat Sheet
|
||||
|
||||
**Opdracht:**
|
||||
- Kies een bestaand project uit eerdere lessen (of bouw nieuw landing page project)
|
||||
- Vervang ALLE placeholder images met professioneel AI-gegenereerde assets
|
||||
- Doel: cohesieve visual identity die eruitziet als professional design work
|
||||
**Deel 1: Cheat Sheet Maken (1 uur)**
|
||||
|
||||
**Case Study Blog Post (400 woorden):**
|
||||
Maak een persoonlijke "Tool Selection Cheat Sheet" (1 pagina):
|
||||
|
||||
Schrijf over:
|
||||
- Prompts die werkten
|
||||
- Iteratie proces
|
||||
- Challenges encountered
|
||||
- AI vs stock photos/Unsplash comparison
|
||||
- Time saved estimate
|
||||
- Quality assessment
|
||||
- Zou je dit in productie gebruiken?
|
||||
- Tips voor anderen
|
||||
```markdown
|
||||
# Mijn AI Tool Cheat Sheet
|
||||
|
||||
**Include:** Before/after screenshots
|
||||
## 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]
|
||||
|
||||
## Mijn Favoriete Combinaties
|
||||
1. [Workflow 1]
|
||||
2. [Workflow 2]
|
||||
```
|
||||
|
||||
**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 je cheat sheet
|
||||
- Voer uit en noteer resultaat
|
||||
- Update cheat sheet indien nodig
|
||||
|
||||
**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
|
||||
- Tool Selection Cheat Sheet (1 pagina)
|
||||
- 2 gebouwde components (Testimonial Card, Dark Mode Toggle)
|
||||
- Reflectie (400 woorden)
|
||||
|
||||
---
|
||||
|
||||
## Leerdoelen
|
||||
Na deze les kan de student:
|
||||
- Verschillende image generation tools vergelijken
|
||||
- Effectieve prompts schrijven voor image generatie
|
||||
- Consistente visual assets genereren voor webprojecten
|
||||
- Images optimaliseren voor web performance
|
||||
- Copyright overwegingen bij AI-generated content begrijpen
|
||||
- Assets integreren in Next.js met proper optimization
|
||||
- De sterke en zwakke punten van elke AI tool benoemen
|
||||
- De juiste tool kiezen voor een specifieke taak
|
||||
- Meerdere tools combineren in een effectieve workflow
|
||||
- Een persoonlijke workflow documenteren
|
||||
- Template prompts schrijven per tool
|
||||
- Kritisch evalueren welke tool wanneer het beste werkt
|
||||
|
||||
@@ -1,12 +1,4 @@
|
||||
# Les 6: MCP (Model Context Protocol) & Component Libraries
|
||||
|
||||
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
||||
>
|
||||
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
|
||||
> - Les06-Slide-Overzicht.md
|
||||
> - Les06-Lesplan.md
|
||||
> - Les06-Bijlage-A-Lesopdracht.md
|
||||
> - Les06-Bijlage-B-Huiswerkopdracht.md
|
||||
# Les 6: Hands-on: Van Idee naar Prototype
|
||||
|
||||
---
|
||||
|
||||
@@ -14,130 +6,283 @@
|
||||
**Hoofdstuk 2: Intermediate** (Les 4-9)
|
||||
|
||||
## Beschrijving
|
||||
Revolutionaire manier om AI te verbinden met data sources via MCP, gecombineerd met systematisch component library bouwen.
|
||||
Pas alles wat je hebt geleerd toe in een hands-on sessie. Ga van een vaag idee naar een werkend prototype met behulp van je AI workflow.
|
||||
|
||||
---
|
||||
|
||||
## Te Behandelen
|
||||
|
||||
### MCP (Model Context Protocol)
|
||||
### Van Idee naar Feature Breakdown
|
||||
|
||||
**Wat is MCP?**
|
||||
- Anthropic's protocol om LLMs veilig te verbinden met externe tools en data
|
||||
**Het probleem:** Je hebt een idee, maar waar begin je?
|
||||
|
||||
**Waarom MCP belangrijk is:**
|
||||
- Gestructureerde data access
|
||||
- Security
|
||||
- Reusability
|
||||
**Stap 1: Beschrijf je idee in 1-2 zinnen**
|
||||
```
|
||||
"Ik wil een app waar je kunt bijhouden welke planten water nodig hebben."
|
||||
```
|
||||
|
||||
**MCP Servers:**
|
||||
- Filesystem
|
||||
- Databases (Supabase/PostgreSQL)
|
||||
- APIs (GitHub, Slack, Google Drive)
|
||||
- Web search
|
||||
**Stap 2: Vraag AI om feature breakdown**
|
||||
```
|
||||
Prompt: Ik wil een plant watering tracker app bouwen.
|
||||
Wat zijn de minimale features voor een werkend prototype?
|
||||
Denk aan: wat moet een gebruiker kunnen doen?
|
||||
```
|
||||
|
||||
**MCP Installatie en Configuratie:**
|
||||
- Claude Desktop configuratie
|
||||
**Stap 3: Prioriteer (MVP denken)**
|
||||
- Wat is essentieel? → In prototype
|
||||
- Wat is nice-to-have? → Later
|
||||
|
||||
### Component Libraries & Design Systems
|
||||
---
|
||||
|
||||
**Shadcn/ui:**
|
||||
- Systematisch bouwen met Shadcn/ui
|
||||
- Design tokens en consistency
|
||||
### Component Thinking
|
||||
|
||||
**Component Patterns:**
|
||||
- Component composition patterns
|
||||
- Building data-driven components die MCP data consumeren
|
||||
- Accessibility in component libraries
|
||||
- Documentation patterns
|
||||
**Vraag jezelf af:**
|
||||
- Welke "blokken" zie ik op het scherm?
|
||||
- Welke blokken worden herhaald?
|
||||
- Welke blokken komen op meerdere pagina's?
|
||||
|
||||
**Voorbeeld: Plant Tracker**
|
||||
```
|
||||
Herhaalde componenten:
|
||||
- PlantCard (naam, foto, laatste water datum)
|
||||
- WaterButton (markeer als water gegeven)
|
||||
|
||||
Pagina componenten:
|
||||
- PlantList (toont alle PlantCards)
|
||||
- AddPlantForm (nieuw plant toevoegen)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### MVP (Minimum Viable Product) Denken
|
||||
|
||||
**Wat is MVP?**
|
||||
De simpelste versie van je app die nog steeds waarde levert.
|
||||
|
||||
**❌ Niet MVP:**
|
||||
- Alle features tegelijk
|
||||
- Perfect design
|
||||
- Edge cases afhandelen
|
||||
- Login systeem
|
||||
|
||||
**✅ Wel MVP:**
|
||||
- Core functionaliteit werkt
|
||||
- Basis styling
|
||||
- Happy path werkt
|
||||
- Hardcoded data is oké
|
||||
|
||||
---
|
||||
|
||||
### De Prototype Workflow
|
||||
|
||||
```
|
||||
1. IDEE (1-2 zinnen)
|
||||
↓
|
||||
2. FEATURES (AI breakdown)
|
||||
↓
|
||||
3. PRIORITEER (wat is MVP?)
|
||||
↓
|
||||
4. COMPONENTS (welke blokken?)
|
||||
↓
|
||||
5. BOUWEN (tool per stap)
|
||||
↓
|
||||
6. ITEREREN (feedback → aanpassen)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Voorbeeld: Weer Widget Prototype
|
||||
|
||||
**Stap 1: Idee**
|
||||
"Simpele weer widget met 3-daagse forecast"
|
||||
|
||||
**Stap 2: AI Feature Breakdown**
|
||||
```
|
||||
Vraag aan ChatGPT:
|
||||
"Wat zijn de minimale features voor een weer widget met 3-daagse forecast?"
|
||||
|
||||
Antwoord:
|
||||
- Huidige temperatuur tonen
|
||||
- Weer icoon (zon, regen, etc.)
|
||||
- 3-daagse forecast (dag + temp + icoon)
|
||||
- Locatie tonen
|
||||
```
|
||||
|
||||
**Stap 3: MVP Selectie**
|
||||
- ✅ Huidige temperatuur
|
||||
- ✅ Weer icoon
|
||||
- ✅ 3 dagen forecast
|
||||
- ❌ Locatie selectie (later)
|
||||
- ❌ Animated icons (later)
|
||||
|
||||
**Stap 4: Components**
|
||||
```
|
||||
WeatherWidget/
|
||||
├── CurrentWeather (temp + icoon)
|
||||
├── ForecastDay (dag + temp + icoon)
|
||||
└── ForecastList (3x ForecastDay)
|
||||
```
|
||||
|
||||
**Stap 5: Bouwen**
|
||||
1. v0.dev: "Weather widget with current temp and 3 day forecast, minimal design"
|
||||
2. OpenCode: "Integreer dit in mijn project, maak components in src/components/weather/"
|
||||
|
||||
**Stap 6: Itereren**
|
||||
- Wat werkt niet?
|
||||
- Wat kan beter?
|
||||
- Vraag AI om verbeteringen
|
||||
|
||||
---
|
||||
|
||||
### Mini-Project Ideeën
|
||||
|
||||
Kies een van deze voor je lesopdracht:
|
||||
|
||||
| Project | Core Feature | Complexiteit |
|
||||
|---------|-------------|--------------|
|
||||
| **Weer Widget** | 3-daagse forecast | ⭐ |
|
||||
| **Quiz App** | 3 vragen + score | ⭐ |
|
||||
| **Recipe Card** | Ingrediënten toggle | ⭐ |
|
||||
| **Pomodoro Timer** | Start/stop + countdown | ⭐⭐ |
|
||||
| **Expense Tracker** | Lijst + totaal | ⭐⭐ |
|
||||
|
||||
---
|
||||
|
||||
### Documenteer Je Proces
|
||||
|
||||
Maak aantekeningen tijdens het bouwen:
|
||||
|
||||
```markdown
|
||||
# Mijn Prototype: [naam]
|
||||
|
||||
## Idee
|
||||
[1-2 zinnen]
|
||||
|
||||
## Feature Breakdown
|
||||
1. [feature 1]
|
||||
2. [feature 2]
|
||||
3. [feature 3]
|
||||
|
||||
## MVP Selectie
|
||||
- ✅ [wat wel]
|
||||
- ❌ [wat niet (nog)]
|
||||
|
||||
## Components
|
||||
- [Component 1]
|
||||
- [Component 2]
|
||||
|
||||
## Prompts die Werkten
|
||||
```
|
||||
[prompt]
|
||||
```
|
||||
→ [wat leverde het op]
|
||||
|
||||
## Wat Ging Fout
|
||||
- [probleem 1] → [hoe opgelost]
|
||||
|
||||
## Lessons Learned
|
||||
- [les 1]
|
||||
- [les 2]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
- Claude Desktop
|
||||
- MCP servers
|
||||
- Shadcn/ui
|
||||
- OpenCode/WebStorm
|
||||
- Supabase
|
||||
- ChatGPT (voor planning)
|
||||
- v0.dev (voor prototypes)
|
||||
- OpenCode/WebStorm (voor implementation)
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (2 uur)
|
||||
|
||||
### Deel 1: MCP Setup (45 min)
|
||||
### Bouw Je Mini-Prototype
|
||||
|
||||
**Installatie:**
|
||||
- Installeer Claude Desktop app
|
||||
- Configureer MCP servers:
|
||||
- Filesystem server (access local files)
|
||||
- Supabase MCP server (connect to database)
|
||||
**Deel 1: Planning (30 min)**
|
||||
|
||||
**Test MCP:**
|
||||
- Vraag Claude om data uit je Supabase database te tonen
|
||||
- Of files uit je project te analyseren
|
||||
- Zie hoe Claude real-time data kan ophalen en gebruiken
|
||||
1. Kies een project uit de lijst (of bedenk eigen simpel idee)
|
||||
2. Schrijf je idee in 1-2 zinnen
|
||||
3. Vraag ChatGPT om feature breakdown
|
||||
4. Selecteer MVP features (max 3)
|
||||
5. Schets de components op papier
|
||||
|
||||
### Deel 2: Component Library met MCP Data (1u 15min)
|
||||
**Deel 2: Bouwen (1 uur)**
|
||||
|
||||
**Bouw Shadcn-based component library met AI in OpenCode/WebStorm:**
|
||||
1. Genereer UI in v0.dev
|
||||
2. Open project in OpenCode
|
||||
3. Integreer en pas aan
|
||||
4. Zorg dat het werkt (happy path)
|
||||
|
||||
| Component | Features |
|
||||
|-----------|----------|
|
||||
| DataTable | Sortable, filterable, pagination |
|
||||
| Card | Variant system |
|
||||
| Form components | Input, Select, Textarea met validation states |
|
||||
| Button | Size variants, loading states, icon support |
|
||||
**Focus op WORKFLOW, niet perfectie!**
|
||||
|
||||
**MCP Integration:**
|
||||
- Bouw Dashboard component die via MCP data uit Supabase haalt
|
||||
- Toon data in je components
|
||||
- Test: wijzig data in database, zie updates via MCP
|
||||
**Deel 3: Documentatie (30 min)**
|
||||
|
||||
Maak `docs/PROTOTYPE-LOG.md`:
|
||||
- Je idee
|
||||
- Feature breakdown
|
||||
- MVP keuzes
|
||||
- Prompts die werkten
|
||||
- Wat ging fout en hoe opgelost
|
||||
- Lessons learned
|
||||
|
||||
### Deliverable
|
||||
- Werkend prototype (kan simpel zijn)
|
||||
- `docs/PROTOTYPE-LOG.md` met je proces
|
||||
- Screenshot van werkend prototype
|
||||
|
||||
---
|
||||
|
||||
## Huiswerk (2 uur)
|
||||
|
||||
### Deel 1: Extend Component Library (1 uur)
|
||||
### Verbeter en Reflecteer
|
||||
|
||||
**Voeg 5 extra components toe:**
|
||||
1. Modal/Dialog
|
||||
2. Toast notifications
|
||||
3. Dropdown Menu
|
||||
4. Tabs
|
||||
5. Accordion
|
||||
**Deel 1: Prototype Verbeteren (1 uur)**
|
||||
|
||||
**Alle components moeten hebben:**
|
||||
- TypeScript
|
||||
- Accessibility (ARIA)
|
||||
- Dark mode support
|
||||
- Responsive
|
||||
1. Fix eventuele bugs
|
||||
2. Voeg 1 extra feature toe
|
||||
3. Verbeter styling
|
||||
4. Handle 1 edge case
|
||||
|
||||
**Gebruik AI + Skills voor consistent design**
|
||||
**Deel 2: Peer Review (30 min)**
|
||||
|
||||
### Deel 2: MCP Deep Dive (1 uur)
|
||||
- Deel je prototype met een klasgenoot
|
||||
- Krijg feedback
|
||||
- Geef feedback op hun prototype
|
||||
|
||||
**Experimenteer met extra MCP servers:**
|
||||
- Install GitHub MCP server (access repos/issues)
|
||||
- Of Google Drive MCP server
|
||||
- Of custom MCP server voor een API
|
||||
**Deel 3: Reflectie (30 min)**
|
||||
|
||||
**Bouw feature die MCP data combineert:**
|
||||
- Bijv. dashboard dat GitHub issues + Supabase data toont
|
||||
Schrijf "Lessons Learned" document (300 woorden):
|
||||
- Wat ging goed in je workflow?
|
||||
- Waar liep je vast?
|
||||
- Welke tool was het meest nuttig?
|
||||
- Wat doe je volgende keer anders?
|
||||
- Hoe voelde het om met AI te bouwen vs alleen?
|
||||
|
||||
**Documenteer:**
|
||||
- Wat kun je allemaal met MCP?
|
||||
- Wat zijn limitations?
|
||||
- Hoe verschilt dit van normale API calls?
|
||||
### Deliverable
|
||||
- Verbeterd prototype
|
||||
- Peer review feedback (gegeven en ontvangen)
|
||||
- Lessons Learned document (300 woorden)
|
||||
|
||||
**Deel als GitHub repo met MCP setup instructions**
|
||||
---
|
||||
|
||||
## Voorbereiding Les 7
|
||||
|
||||
In Les 7 gaan we echt bouwen met Next.js. Zorg dat je klaar bent:
|
||||
- Node.js geïnstalleerd (versie 18+)
|
||||
- Git geconfigureerd
|
||||
- GitHub account aangemaakt
|
||||
- OpenCode/WebStorm werkt
|
||||
|
||||
Test: run `node --version` in je terminal. Je zou v18 of hoger moeten zien.
|
||||
|
||||
---
|
||||
|
||||
## Leerdoelen
|
||||
Na deze les kan de student:
|
||||
- MCP begrijpen en configureren in Claude Desktop
|
||||
- MCP servers koppelen (filesystem, Supabase, APIs)
|
||||
- Een systematische component library bouwen met Shadcn/ui
|
||||
- Data-driven components bouwen die MCP data consumeren
|
||||
- Accessibility implementeren in component libraries
|
||||
- Het verschil tussen MCP en normale API calls uitleggen
|
||||
- Van een vaag idee naar concrete features gaan
|
||||
- AI gebruiken voor feature breakdown
|
||||
- MVP denken toepassen (essentieel vs nice-to-have)
|
||||
- Een app opdelen in components
|
||||
- De complete workflow doorlopen (idee → prototype)
|
||||
- Het bouwproces documenteren
|
||||
- Reflecteren op wat werkt en wat niet
|
||||
|
||||
@@ -14,100 +14,255 @@
|
||||
**Hoofdstuk 2: Intermediate** (Les 4-9)
|
||||
|
||||
## Beschrijving
|
||||
Leer de basics van Supabase: een database opzetten, data opslaan/ophalen, en simpele authenticatie. AI helpt je met de complexiteit.
|
||||
Zet je eerste "echte" Next.js project op en koppel het aan Supabase voor database en authenticatie. Je leert de complete flow van lokaal ontwikkelen tot productie deployment.
|
||||
|
||||
---
|
||||
|
||||
## Te Behandelen
|
||||
|
||||
### Wat is Supabase?
|
||||
- Open-source Firebase alternative
|
||||
- Hosted Postgres database
|
||||
- Gratis tier voor development
|
||||
- Mooie UI om tabellen te beheren
|
||||
### Stap 1: Next.js Project Aanmaken
|
||||
|
||||
### Supabase UI Tour
|
||||
- Dashboard overview
|
||||
- Table Editor: tabellen maken zonder SQL
|
||||
- Kolommen toevoegen (text, number, boolean, timestamp)
|
||||
- Data handmatig invoeren en bekijken
|
||||
Dit is de eerste keer dat je een volledig Next.js project opzet.
|
||||
|
||||
### Database Basics (zonder SQL kennis)
|
||||
- Tabellen = spreadsheets met regels
|
||||
- Kolommen = velden (naam, email, etc.)
|
||||
- Rijen = individuele records
|
||||
- Primary key: unieke identifier per rij
|
||||
```bash
|
||||
# Maak nieuw project
|
||||
npx create-next-app@latest todo-app
|
||||
|
||||
### Supabase Client in Next.js
|
||||
# Beantwoord de vragen:
|
||||
# ✔ Would you like to use TypeScript? → Yes
|
||||
# ✔ Would you like to use ESLint? → Yes
|
||||
# ✔ Would you like to use Tailwind CSS? → Yes
|
||||
# ✔ Would you like to use `src/` directory? → Yes
|
||||
# ✔ Would you like to use App Router? → Yes
|
||||
# ✔ Would you like to customize the default import alias? → No
|
||||
|
||||
# Ga naar project folder
|
||||
cd todo-app
|
||||
|
||||
# Open in je editor
|
||||
code . # of: cursor .
|
||||
```
|
||||
|
||||
### Stap 2: Project Structuur Begrijpen
|
||||
|
||||
```
|
||||
todo-app/
|
||||
├── src/
|
||||
│ └── app/
|
||||
│ ├── layout.tsx # Root layout (header, footer)
|
||||
│ ├── page.tsx # Homepage (/)
|
||||
│ └── globals.css # Global styles + Tailwind
|
||||
├── public/ # Static files (images, etc.)
|
||||
├── .env.local # Environment variables (maak zelf aan)
|
||||
├── next.config.js # Next.js configuratie
|
||||
├── tailwind.config.ts # Tailwind configuratie
|
||||
├── package.json # Dependencies
|
||||
└── tsconfig.json # TypeScript configuratie
|
||||
```
|
||||
|
||||
### Stap 3: Lokaal Draaien
|
||||
|
||||
```bash
|
||||
# Start development server
|
||||
npm run dev
|
||||
|
||||
# Open browser: http://localhost:3000
|
||||
```
|
||||
|
||||
### Stap 4: Supabase Project Aanmaken
|
||||
|
||||
**Op supabase.com:**
|
||||
|
||||
1. Ga naar [supabase.com](https://supabase.com) en maak account (gratis)
|
||||
2. Klik "New Project"
|
||||
3. Kies een naam (bijv. `todo-app`)
|
||||
4. Kies een database wachtwoord (bewaar deze!)
|
||||
5. Kies region: `West EU (Frankfurt)` (dichtst bij NL)
|
||||
6. Wacht ~2 minuten tot project klaar is
|
||||
|
||||
**Credentials ophalen:**
|
||||
|
||||
1. Ga naar Settings → API
|
||||
2. Kopieer:
|
||||
- `Project URL` → dit wordt `NEXT_PUBLIC_SUPABASE_URL`
|
||||
- `anon public` key → dit wordt `NEXT_PUBLIC_SUPABASE_ANON_KEY`
|
||||
|
||||
### Stap 5: Environment Variables (Lokaal)
|
||||
|
||||
Maak `.env.local` in je project root:
|
||||
|
||||
```bash
|
||||
# .env.local (NOOIT committen naar Git!)
|
||||
NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
|
||||
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.xxxxx
|
||||
```
|
||||
|
||||
Maak ook `.env.example` (deze WEL committen):
|
||||
|
||||
```bash
|
||||
# .env.example (template voor anderen)
|
||||
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
|
||||
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
|
||||
```
|
||||
|
||||
**Check .gitignore:**
|
||||
```
|
||||
# .gitignore moet bevatten:
|
||||
.env*.local
|
||||
```
|
||||
|
||||
### Stap 6: Supabase SDK Installeren
|
||||
|
||||
**Installatie:**
|
||||
```bash
|
||||
npm install @supabase/supabase-js
|
||||
```
|
||||
|
||||
**Setup:**
|
||||
```ts
|
||||
### Stap 7: Supabase Client Maken
|
||||
|
||||
Maak `src/lib/supabase.ts`:
|
||||
|
||||
```typescript
|
||||
import { createClient } from '@supabase/supabase-js'
|
||||
|
||||
const supabase = createClient(
|
||||
process.env.NEXT_PUBLIC_SUPABASE_URL!,
|
||||
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
|
||||
)
|
||||
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
|
||||
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
|
||||
|
||||
export const supabase = createClient(supabaseUrl, supabaseAnonKey)
|
||||
```
|
||||
|
||||
### CRUD Operaties (met AI hulp)
|
||||
### Stap 8: Database Tabel Maken (via UI)
|
||||
|
||||
**Create:**
|
||||
```ts
|
||||
**In Supabase Dashboard:**
|
||||
|
||||
1. Ga naar Table Editor
|
||||
2. Klik "New Table"
|
||||
3. Naam: `todos`
|
||||
4. Kolommen:
|
||||
| Name | Type | Default | Primary |
|
||||
|------|------|---------|---------|
|
||||
| id | int8 | - | ✓ (auto) |
|
||||
| title | text | - | |
|
||||
| completed | bool | false | |
|
||||
| created_at | timestamptz | now() | |
|
||||
| user_id | uuid | auth.uid() | |
|
||||
|
||||
5. Klik "Save"
|
||||
|
||||
### Stap 9: CRUD Operaties
|
||||
|
||||
```typescript
|
||||
// CREATE - nieuwe todo toevoegen
|
||||
const { data, error } = await supabase
|
||||
.from('todos')
|
||||
.insert({ title: 'Nieuwe taak', completed: false })
|
||||
```
|
||||
.insert({ title: 'Nieuwe taak' })
|
||||
|
||||
**Read:**
|
||||
```ts
|
||||
// READ - todos ophalen
|
||||
const { data, error } = await supabase
|
||||
.from('todos')
|
||||
.select('*')
|
||||
```
|
||||
.order('created_at', { ascending: false })
|
||||
|
||||
**Update:**
|
||||
```ts
|
||||
// UPDATE - todo afvinken
|
||||
const { data, error } = await supabase
|
||||
.from('todos')
|
||||
.update({ completed: true })
|
||||
.eq('id', 1)
|
||||
```
|
||||
.eq('id', todoId)
|
||||
|
||||
**Delete:**
|
||||
```ts
|
||||
// DELETE - todo verwijderen
|
||||
const { error } = await supabase
|
||||
.from('todos')
|
||||
.delete()
|
||||
.eq('id', 1)
|
||||
.eq('id', todoId)
|
||||
```
|
||||
|
||||
### Simpele Authentication
|
||||
- Supabase Auth UI component (plug & play)
|
||||
- Magic Link login (geen wachtwoord nodig)
|
||||
- Session checken met `supabase.auth.getUser()`
|
||||
### Stap 10: Authenticatie Setup
|
||||
|
||||
### Environment Variables
|
||||
- `.env.local` voor secrets
|
||||
- `NEXT_PUBLIC_` prefix voor client-side
|
||||
- Nooit API keys committen naar Git
|
||||
```bash
|
||||
npm install @supabase/auth-ui-react @supabase/auth-ui-shared
|
||||
```
|
||||
|
||||
### AI Helpt Met
|
||||
- Database schema suggesties
|
||||
- Query schrijven als je vastloopt
|
||||
- Error messages begrijpen
|
||||
- Code voorbeelden genereren
|
||||
**Login component:**
|
||||
```tsx
|
||||
import { Auth } from '@supabase/auth-ui-react'
|
||||
import { ThemeSupa } from '@supabase/auth-ui-shared'
|
||||
import { supabase } from '@/lib/supabase'
|
||||
|
||||
export function LoginForm() {
|
||||
return (
|
||||
<Auth
|
||||
supabaseClient={supabase}
|
||||
appearance={{ theme: ThemeSupa }}
|
||||
providers={[]}
|
||||
magicLink={true}
|
||||
/>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
**Session checken:**
|
||||
```typescript
|
||||
const { data: { user } } = await supabase.auth.getUser()
|
||||
|
||||
if (user) {
|
||||
// User is ingelogd
|
||||
} else {
|
||||
// Redirect naar login
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Deployment naar Vercel (Productie)
|
||||
|
||||
### Stap 1: GitHub Repository
|
||||
|
||||
```bash
|
||||
# In je project folder
|
||||
git init
|
||||
git add .
|
||||
git commit -m "Initial commit"
|
||||
|
||||
# Maak repo op GitHub, dan:
|
||||
git remote add origin https://github.com/jouw-username/todo-app.git
|
||||
git push -u origin main
|
||||
```
|
||||
|
||||
### Stap 2: Vercel Deployment
|
||||
|
||||
1. Ga naar [vercel.com](https://vercel.com)
|
||||
2. "Add New Project"
|
||||
3. Import je GitHub repository
|
||||
4. **BELANGRIJK:** Voeg Environment Variables toe:
|
||||
- `NEXT_PUBLIC_SUPABASE_URL` → je Supabase URL
|
||||
- `NEXT_PUBLIC_SUPABASE_ANON_KEY` → je anon key
|
||||
5. Klik "Deploy"
|
||||
|
||||
### Stap 3: Supabase URL Toestaan
|
||||
|
||||
In Supabase Dashboard:
|
||||
1. Ga naar Authentication → URL Configuration
|
||||
2. Voeg je Vercel URL toe aan "Redirect URLs":
|
||||
- `https://jouw-app.vercel.app/**`
|
||||
|
||||
---
|
||||
|
||||
## Overzicht: Lokaal vs Productie
|
||||
|
||||
| Aspect | Lokaal | Productie |
|
||||
|--------|--------|-----------|
|
||||
| URL | `localhost:3000` | `jouw-app.vercel.app` |
|
||||
| Env vars | `.env.local` | Vercel Dashboard |
|
||||
| Database | Supabase (zelfde) | Supabase (zelfde) |
|
||||
| Command | `npm run dev` | Automatisch via Vercel |
|
||||
|
||||
**Let op:** Je gebruikt dezelfde Supabase database voor lokaal en productie. Voor een echt project zou je aparte databases hebben, maar voor deze cursus is dat niet nodig.
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
- Supabase (gratis tier)
|
||||
- Next.js
|
||||
- Supabase (gratis tier)
|
||||
- Vercel (gratis tier)
|
||||
- Cursor/OpenCode
|
||||
|
||||
---
|
||||
@@ -116,72 +271,79 @@ const { error } = await supabase
|
||||
|
||||
### Bouw een Todo App met Supabase
|
||||
|
||||
**Deel 1: Supabase Setup (20 min)**
|
||||
- Maak gratis Supabase account
|
||||
- Maak nieuw project
|
||||
- Kopieer URL en anon key naar `.env.local`
|
||||
|
||||
**Deel 2: Database via UI (20 min)**
|
||||
- Maak `todos` tabel via Table Editor
|
||||
- Kolommen: `id` (auto), `title` (text), `completed` (boolean), `created_at` (timestamp)
|
||||
- Voeg 3 test todos toe via UI
|
||||
|
||||
**Deel 3: Next.js Integratie (1 uur)**
|
||||
**Deel 1: Project Setup (30 min)**
|
||||
- Run `npx create-next-app@latest todo-app` met juiste opties
|
||||
- Maak Supabase account en project aan
|
||||
- Configureer `.env.local` met credentials
|
||||
- Installeer `@supabase/supabase-js`
|
||||
- Maak Supabase client
|
||||
- Bouw simpele UI:
|
||||
- Lijst van todos ophalen en tonen
|
||||
- Form om nieuwe todo toe te voegen
|
||||
- Checkbox om todo af te vinken
|
||||
- Delete button
|
||||
- Maak `src/lib/supabase.ts`
|
||||
- Test: `npm run dev` werkt zonder errors
|
||||
|
||||
**Deel 4: Auth toevoegen (20 min)**
|
||||
- Installeer `@supabase/auth-ui-react`
|
||||
- Voeg login pagina toe met Auth UI component
|
||||
- Check of user ingelogd is
|
||||
**Deel 2: Database (20 min)**
|
||||
- Maak `todos` tabel via Supabase Table Editor
|
||||
- Voeg 3 test todos toe via de UI
|
||||
- Test: data is zichtbaar in Table Editor
|
||||
|
||||
**Deel 3: CRUD Interface (50 min)**
|
||||
- Bouw UI om todos te tonen (lijst)
|
||||
- Voeg form toe om nieuwe todo te maken
|
||||
- Voeg checkbox toe om todo af te vinken
|
||||
- Voeg delete button toe
|
||||
- Test: alle CRUD operaties werken
|
||||
|
||||
**Deel 4: Authenticatie (20 min)**
|
||||
- Installeer auth packages
|
||||
- Maak login pagina met Auth UI
|
||||
- Toon alleen todos voor ingelogde user
|
||||
- Test: login met magic link werkt
|
||||
|
||||
### Deliverable
|
||||
- Werkende Todo app met Supabase backend
|
||||
- Login functionaliteit
|
||||
- CRUD operaties werken
|
||||
- Werkende Todo app lokaal
|
||||
- GitHub repository met code
|
||||
- Screenshot van werkende app
|
||||
|
||||
---
|
||||
|
||||
## Huiswerk (2 uur)
|
||||
|
||||
### Extend de Todo App
|
||||
### Deploy naar Productie + Uitbreiden
|
||||
|
||||
**Feature 1: Filtering (30 min)**
|
||||
- Filter op: Alle / Actief / Voltooid
|
||||
- Sorteer op datum
|
||||
|
||||
**Feature 2: User-specifieke todos (30 min)**
|
||||
- Voeg `user_id` kolom toe aan todos tabel
|
||||
- Filter todos op ingelogde user
|
||||
- Elke user ziet alleen eigen todos
|
||||
|
||||
**Feature 3: Polish (30 min)**
|
||||
- Loading states
|
||||
- Error handling met toast messages
|
||||
- Empty state ("Geen todos gevonden")
|
||||
|
||||
**Deploy (30 min)**
|
||||
**Deel 1: Deployment (30 min)**
|
||||
- Push code naar GitHub
|
||||
- Deploy naar Vercel
|
||||
- Voeg environment variables toe in Vercel dashboard
|
||||
- Test of alles werkt in productie
|
||||
- Configureer environment variables in Vercel
|
||||
- Voeg Vercel URL toe aan Supabase Redirect URLs
|
||||
- Test: app werkt op productie URL
|
||||
|
||||
**Deel 2: Features Uitbreiden (1 uur)**
|
||||
- Filter buttons: Alle / Actief / Voltooid
|
||||
- Sorteer op datum (nieuwste eerst)
|
||||
- Toon alleen todos van ingelogde user (filter op `user_id`)
|
||||
- Loading state tijdens data ophalen
|
||||
- Error state bij problemen
|
||||
- Empty state: "Geen todos gevonden"
|
||||
|
||||
**Deel 3: Polish (30 min)**
|
||||
- Styling verbeteren met Tailwind
|
||||
- Responsive design (mobile friendly)
|
||||
- Kleine animaties (fade in/out)
|
||||
|
||||
### Deliverable
|
||||
- Deployed Todo app op Vercel
|
||||
- Screenshot van werkende app
|
||||
- Link naar live versie
|
||||
- Deployed app op Vercel (werkende URL)
|
||||
- Alle features werken in productie
|
||||
- Screenshot van productie app
|
||||
|
||||
---
|
||||
|
||||
## Leerdoelen
|
||||
Na deze les kan de student:
|
||||
- Een Supabase project opzetten
|
||||
- Tabellen maken via de Supabase UI (zonder SQL)
|
||||
- Een Next.js project opzetten met `npx create-next-app`
|
||||
- De project structuur begrijpen en navigeren
|
||||
- Een Supabase project aanmaken en configureren
|
||||
- Environment variables correct beheren (lokaal en productie)
|
||||
- De Supabase client installeren en configureren
|
||||
- Basis CRUD operaties uitvoeren (create, read, update, delete)
|
||||
- Simpele authenticatie implementeren met Auth UI
|
||||
- Environment variables correct gebruiken
|
||||
- Tabellen maken via de Supabase UI
|
||||
- CRUD operaties uitvoeren met de Supabase SDK
|
||||
- Authenticatie implementeren met Auth UI
|
||||
- Deployen naar Vercel met environment variables
|
||||
- Het verschil tussen lokale en productie omgeving begrijpen
|
||||
|
||||
@@ -1,155 +1,320 @@
|
||||
# Les 8: Claude Code - Agentic Coding Mode
|
||||
|
||||
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
||||
>
|
||||
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
|
||||
> - Les08-Slide-Overzicht.md
|
||||
> - Les08-Lesplan.md
|
||||
> - Les08-Bijlage-A-Lesopdracht.md
|
||||
> - Les08-Bijlage-B-Huiswerkopdracht.md
|
||||
# Les 8: Supabase Basics
|
||||
|
||||
---
|
||||
|
||||
## Hoofdstuk
|
||||
**Hoofdstuk 3: Advanced** (Les 8-18)
|
||||
**Hoofdstuk 2: Intermediate** (Les 4-9)
|
||||
|
||||
## Beschrijving
|
||||
Kennismaking met Claude Code - autonome AI coding agent die zelfstandig multi-file changes kan plannen en uitvoeren.
|
||||
Leer werken met Supabase: een complete backend-as-a-service met database en authenticatie. Je bouwt je eerste full-stack app met data die persistent is.
|
||||
|
||||
---
|
||||
|
||||
## Te Behandelen
|
||||
|
||||
### Wat is Claude Code?
|
||||
- Agentic coding mode
|
||||
- AI neemt initiatief
|
||||
- Plant multi-step changes
|
||||
- Bewerkt multiple files autonoom
|
||||
### Wat is Supabase?
|
||||
|
||||
### Verschil met Chat-Based Coding
|
||||
- Jij beschrijft WAT
|
||||
- Claude Code figured out HOE en doet het
|
||||
**Supabase = Database + Auth in één**
|
||||
- PostgreSQL database (gratis tier: 500MB)
|
||||
- Ingebouwde authenticatie
|
||||
- Real-time subscriptions
|
||||
- File storage
|
||||
- Auto-generated API
|
||||
|
||||
### Claude Desktop Modes
|
||||
- Chat
|
||||
- Projects
|
||||
- Cowork
|
||||
- Code
|
||||
**Waarom Supabase voor beginners:**
|
||||
- Geen eigen server nodig
|
||||
- Visuele Table Editor (geen SQL kennis nodig)
|
||||
- Simpele JavaScript SDK
|
||||
- Gratis tier is ruim voldoende
|
||||
|
||||
### Wanneer Claude Code Gebruiken
|
||||
- Nieuwe features
|
||||
- Grote refactoring
|
||||
- Complexe bugs
|
||||
- Test generation
|
||||
---
|
||||
|
||||
### Hoe Claude Code Werkt
|
||||
1. High-level instructie
|
||||
2. Claude analyseert
|
||||
3. Maakt plan
|
||||
4. Bewerkt files
|
||||
5. Runt tests
|
||||
6. Itereert
|
||||
### Supabase Project Aanmaken
|
||||
|
||||
### Skills in Claude Code
|
||||
- Automatisch toegepast
|
||||
**Stap 1:** Ga naar [supabase.com](https://supabase.com) en maak account
|
||||
|
||||
### Best Practices
|
||||
- Geef duidelijke high-level doelen
|
||||
- Laat autonoom werken
|
||||
- Review changes zorgvuldig
|
||||
**Stap 2:** Klik "New Project"
|
||||
- Naam: `todo-app`
|
||||
- Database Password: (bewaar deze!)
|
||||
- Region: `West EU (Frankfurt)` (dichtst bij NL)
|
||||
|
||||
### Vergelijking
|
||||
| Tool | Aanpak |
|
||||
|------|--------|
|
||||
| OpenCode/WebStorm | Step-by-step guidance |
|
||||
| Claude Code | Autonome agent |
|
||||
**Stap 3:** Wacht ~2 minuten tot project klaar is
|
||||
|
||||
**Stap 4:** Ga naar Settings → API en kopieer:
|
||||
- `Project URL`
|
||||
- `anon public` key
|
||||
|
||||
---
|
||||
|
||||
### Tabel Maken via Table Editor
|
||||
|
||||
**In Supabase Dashboard:**
|
||||
|
||||
1. Ga naar "Table Editor"
|
||||
2. Klik "New Table"
|
||||
3. Naam: `todos`
|
||||
4. Kolommen:
|
||||
|
||||
| Name | Type | Default | Primary |
|
||||
|------|------|---------|---------|
|
||||
| id | int8 | - | ✓ (auto) |
|
||||
| title | text | - | |
|
||||
| completed | bool | false | |
|
||||
| created_at | timestamptz | now() | |
|
||||
|
||||
5. Klik "Save"
|
||||
|
||||
**Test:** Voeg een paar rijen toe via de UI om te zien dat het werkt.
|
||||
|
||||
---
|
||||
|
||||
### Environment Variables
|
||||
|
||||
**Wat zijn environment variables?**
|
||||
- Configuratie die NIET in je code hoort
|
||||
- API keys, database URLs, secrets
|
||||
- Verschillend per omgeving (lokaal vs productie)
|
||||
|
||||
**Maak `.env.local` in je project root:**
|
||||
```bash
|
||||
# .env.local - NOOIT committen naar Git!
|
||||
NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
|
||||
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.xxxxx
|
||||
```
|
||||
|
||||
**Maak ook `.env.example` (WEL committen):**
|
||||
```bash
|
||||
# .env.example - template voor anderen
|
||||
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
|
||||
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
|
||||
```
|
||||
|
||||
**Check `.gitignore` bevat:**
|
||||
```
|
||||
.env*.local
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Supabase SDK Installeren
|
||||
|
||||
```bash
|
||||
npm install @supabase/supabase-js
|
||||
```
|
||||
|
||||
**Maak `src/lib/supabase.ts`:**
|
||||
```typescript
|
||||
import { createClient } from '@supabase/supabase-js'
|
||||
|
||||
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
|
||||
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
|
||||
|
||||
export const supabase = createClient(supabaseUrl, supabaseAnonKey)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### CRUD Operaties
|
||||
|
||||
**C - Create (toevoegen):**
|
||||
```typescript
|
||||
const { data, error } = await supabase
|
||||
.from('todos')
|
||||
.insert({ title: 'Nieuwe taak' })
|
||||
```
|
||||
|
||||
**R - Read (ophalen):**
|
||||
```typescript
|
||||
const { data, error } = await supabase
|
||||
.from('todos')
|
||||
.select('*')
|
||||
.order('created_at', { ascending: false })
|
||||
```
|
||||
|
||||
**U - Update (wijzigen):**
|
||||
```typescript
|
||||
const { data, error } = await supabase
|
||||
.from('todos')
|
||||
.update({ completed: true })
|
||||
.eq('id', todoId)
|
||||
```
|
||||
|
||||
**D - Delete (verwijderen):**
|
||||
```typescript
|
||||
const { error } = await supabase
|
||||
.from('todos')
|
||||
.delete()
|
||||
.eq('id', todoId)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Authenticatie met Auth UI
|
||||
|
||||
**Installeer auth packages:**
|
||||
```bash
|
||||
npm install @supabase/auth-ui-react @supabase/auth-ui-shared
|
||||
```
|
||||
|
||||
**Login component:**
|
||||
```tsx
|
||||
import { Auth } from '@supabase/auth-ui-react'
|
||||
import { ThemeSupa } from '@supabase/auth-ui-shared'
|
||||
import { supabase } from '@/lib/supabase'
|
||||
|
||||
export function LoginForm() {
|
||||
return (
|
||||
<Auth
|
||||
supabaseClient={supabase}
|
||||
appearance={{ theme: ThemeSupa }}
|
||||
providers={[]}
|
||||
magicLink={true}
|
||||
/>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
**Huidige user checken:**
|
||||
```typescript
|
||||
const { data: { user } } = await supabase.auth.getUser()
|
||||
|
||||
if (user) {
|
||||
// User is ingelogd
|
||||
console.log('Logged in as:', user.email)
|
||||
} else {
|
||||
// Redirect naar login
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Deployment naar Vercel
|
||||
|
||||
**Stap 1: Push naar GitHub**
|
||||
```bash
|
||||
git add .
|
||||
git commit -m "Add Supabase integration"
|
||||
git push
|
||||
```
|
||||
|
||||
**Stap 2: Deploy op Vercel**
|
||||
1. Ga naar [vercel.com](https://vercel.com)
|
||||
2. "Add New Project"
|
||||
3. Import je GitHub repo
|
||||
4. **BELANGRIJK:** Voeg Environment Variables toe!
|
||||
- `NEXT_PUBLIC_SUPABASE_URL`
|
||||
- `NEXT_PUBLIC_SUPABASE_ANON_KEY`
|
||||
5. Klik "Deploy"
|
||||
|
||||
**Stap 3: Supabase Redirect URLs**
|
||||
1. Ga naar Supabase → Authentication → URL Configuration
|
||||
2. Voeg toe bij "Redirect URLs":
|
||||
- `https://jouw-app.vercel.app/**`
|
||||
|
||||
---
|
||||
|
||||
### Lokaal vs Productie
|
||||
|
||||
| Aspect | Lokaal | Productie |
|
||||
|--------|--------|-----------|
|
||||
| URL | `localhost:3000` | `jouw-app.vercel.app` |
|
||||
| Env vars | `.env.local` | Vercel Dashboard |
|
||||
| Database | Supabase (zelfde) | Supabase (zelfde) |
|
||||
| Command | `npm run dev` | Automatisch via Vercel |
|
||||
|
||||
**Let op:** Je gebruikt dezelfde Supabase database voor lokaal en productie. Voor echte projecten zou je aparte databases hebben.
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
- Claude Desktop (Code mode)
|
||||
- Skills.sh
|
||||
- Supabase
|
||||
- Next.js
|
||||
- OpenCode/WebStorm
|
||||
- Vercel
|
||||
- Git
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (2 uur)
|
||||
|
||||
### Deel 1: Claude Code Verkenning (30 min)
|
||||
### Bouw een Todo App met Supabase
|
||||
|
||||
**Setup:**
|
||||
- Open Claude Desktop
|
||||
- Navigeer naar Code mode
|
||||
- Installeer relevante Skills eerst
|
||||
**Deel 1: Supabase Setup (30 min)**
|
||||
|
||||
**Complexe Taak:**
|
||||
> "Bouw multi-step form wizard: 3 stappen (personal info, company details, preferences), progress indicator, validatie per step, data in useState, animations tussen steps, TypeScript, Shadcn components."
|
||||
1. Maak Supabase account en project
|
||||
2. Maak `todos` tabel via Table Editor
|
||||
3. Kopieer credentials
|
||||
4. Installeer `@supabase/supabase-js`
|
||||
5. Maak `src/lib/supabase.ts`
|
||||
6. Configureer `.env.local`
|
||||
|
||||
- Laat Claude Code autonoom werken
|
||||
- Kijk hoe het plant en uitvoert
|
||||
- Vergelijk: hoe anders is dit dan manual prompting in OpenCode?
|
||||
Test: `npm run dev` werkt zonder errors
|
||||
|
||||
### Deel 2: Autonome Feature Development (1u 30min)
|
||||
**Deel 2: CRUD Interface (1 uur)**
|
||||
|
||||
**Bouw User Dashboard met Stats:**
|
||||
Bouw UI voor todos:
|
||||
1. Lijst van todos tonen
|
||||
2. Form om nieuwe todo toe te voegen
|
||||
3. Checkbox om todo af te vinken
|
||||
4. Delete button per todo
|
||||
|
||||
Requirements:
|
||||
- Haal user data uit Supabase
|
||||
- Toon profile info
|
||||
- 4 stat cards
|
||||
- Activity feed
|
||||
- Charts met recharts
|
||||
- Alles responsive
|
||||
- Loading states
|
||||
- Error handling
|
||||
Gebruik AI hulp voor de components!
|
||||
|
||||
**Process:**
|
||||
- Geef high-level beschrijving
|
||||
- Relevante context files (@mentions)
|
||||
- Laat autonoom werken
|
||||
**Deel 3: Authenticatie (30 min)**
|
||||
|
||||
**Track:**
|
||||
- Hoeveel iteraties?
|
||||
- Manual fixes nodig?
|
||||
- Vergelijk tijd vs handmatig bouwen
|
||||
1. Installeer auth packages
|
||||
2. Maak login pagina met Auth UI
|
||||
3. Toon alleen app voor ingelogde users
|
||||
4. Test: login met magic link
|
||||
|
||||
### Deliverable
|
||||
- Werkende Todo app lokaal
|
||||
- GitHub repository met code
|
||||
- Screenshot van werkende app
|
||||
|
||||
---
|
||||
|
||||
## Huiswerk (2 uur)
|
||||
|
||||
### Deel 1: Complexe Refactoring (1 uur)
|
||||
### Deploy naar Productie + Uitbreiden
|
||||
|
||||
**Neem Todo app uit Les 7, gebruik Claude Code voor grote refactoring:**
|
||||
**Deel 1: Deployment (30 min)**
|
||||
|
||||
> "Extract alle Supabase queries naar aparte queries.ts file met proper error handling en TypeScript types. Update alle components om nieuwe query functions te gebruiken."
|
||||
1. Push naar GitHub
|
||||
2. Deploy naar Vercel
|
||||
3. Configureer env vars in Vercel
|
||||
4. Voeg Vercel URL toe aan Supabase Redirect URLs
|
||||
5. Test: app werkt op productie URL!
|
||||
|
||||
- Laat autonoom handlen
|
||||
- Verifieer dat alles werkt
|
||||
- Documenteer: hoe goed handelde Claude Code het?
|
||||
**Deel 2: Features Uitbreiden (1 uur)**
|
||||
|
||||
### Deel 2: Comparison Essay (1 uur)
|
||||
Voeg toe:
|
||||
1. Filter buttons: Alle / Actief / Voltooid
|
||||
2. Sorteer op datum (nieuwste eerst)
|
||||
3. Loading state tijdens data ophalen
|
||||
4. Error state bij problemen
|
||||
5. Empty state: "Geen todos gevonden"
|
||||
|
||||
**Schrijf vergelijkings essay (500 woorden):**
|
||||
**Deel 3: Polish (30 min)**
|
||||
|
||||
OpenCode/WebStorm (step-by-step) vs Claude Code (autonome agent)
|
||||
1. Styling verbeteren met Tailwind
|
||||
2. Responsive design (mobile friendly)
|
||||
3. Kleine animaties (fade in/out)
|
||||
|
||||
**Vergelijk op:**
|
||||
- Autonomie niveau
|
||||
- Snelheid
|
||||
- Accuratesse
|
||||
- Wanneer welke gebruiken
|
||||
|
||||
**Include:** Concrete voorbeelden
|
||||
|
||||
**Final verdict:** Tool voorkeur going forward?
|
||||
### Deliverable
|
||||
- Deployed app op Vercel (werkende URL!)
|
||||
- Alle features werken in productie
|
||||
- Screenshot van productie app
|
||||
|
||||
---
|
||||
|
||||
## Leerdoelen
|
||||
Na deze les kan de student:
|
||||
- Claude Code (agentic mode) activeren en gebruiken
|
||||
- Het verschil uitleggen tussen chat-based en agentic coding
|
||||
- High-level instructies geven voor autonome development
|
||||
- Multi-file changes laten plannen en uitvoeren door Claude Code
|
||||
- De juiste tool kiezen (OpenCode vs Claude Code) per situatie
|
||||
- Een Supabase project aanmaken en configureren
|
||||
- Tabellen maken via de Table Editor (zonder SQL)
|
||||
- Environment variables correct beheren
|
||||
- De Supabase client installeren en configureren
|
||||
- CRUD operaties uitvoeren met de Supabase SDK
|
||||
- Authenticatie implementeren met Auth UI
|
||||
- Deployen naar Vercel met environment variables
|
||||
- Het verschil tussen lokale en productie omgeving begrijpen
|
||||
|
||||
@@ -1,139 +1,294 @@
|
||||
# Les 9: AI Agents - Custom GPTs & Claude Projects
|
||||
|
||||
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
||||
>
|
||||
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
|
||||
> - Les09-Slide-Overzicht.md
|
||||
> - Les09-Lesplan.md
|
||||
> - Les09-Bijlage-A-Lesopdracht.md
|
||||
> - Les09-Bijlage-B-Huiswerkopdracht.md
|
||||
|
||||
---
|
||||
|
||||
## Hoofdstuk
|
||||
**Hoofdstuk 3: Advanced** (Les 8-18)
|
||||
**Hoofdstuk 2: Intermediate** (Les 4-9)
|
||||
|
||||
## Beschrijving
|
||||
Deep dive in AI agents - autonome systemen die kunnen plannen, tools gebruiken, en taken uitvoeren.
|
||||
Leer werken met AI Agents: gepersonaliseerde AI assistenten die je kunt trainen op jouw specifieke taken en werkwijze.
|
||||
|
||||
---
|
||||
|
||||
## Te Behandelen
|
||||
|
||||
### Wat zijn AI Agents?
|
||||
- Verschil tussen chatbot vs agent
|
||||
|
||||
### Agent Capabilities
|
||||
- Tool use
|
||||
- Memory
|
||||
- Planning
|
||||
- Learning
|
||||
- Proactief gedrag
|
||||
**Chatbot vs Agent:**
|
||||
|
||||
### Agent Frameworks Landschap
|
||||
- Custom GPTs
|
||||
- Claude Projects
|
||||
- LangChain
|
||||
- AutoGPT
|
||||
- CrewAI
|
||||
| Chatbot | Agent |
|
||||
|---------|-------|
|
||||
| Reageert op vragen | Neemt initiatief |
|
||||
| Geen geheugen | Onthoudt context |
|
||||
| Algemene kennis | Specifieke expertise |
|
||||
| Eenmalige interactie | Langere samenwerkingen |
|
||||
|
||||
### Custom GPTs Deep Dive
|
||||
- Instructions
|
||||
- Conversation starters
|
||||
- Knowledge base upload
|
||||
- Capabilities
|
||||
**Agent = AI met:**
|
||||
- Custom instructies (hoe moet hij zich gedragen)
|
||||
- Eigen kennis (documenten, voorbeelden)
|
||||
- Specifieke taken (waar is hij goed in)
|
||||
|
||||
### Use Cases voor Developers
|
||||
- Code review agent
|
||||
- Testing agent
|
||||
- Documentation generator
|
||||
---
|
||||
|
||||
### Claude Projects Deep Dive
|
||||
- Custom instructions
|
||||
- Project knowledge
|
||||
- Example conversations
|
||||
- Advanced features (artifacts, long context, tool use)
|
||||
### Custom GPTs (ChatGPT)
|
||||
|
||||
### Projects Combineren met MCP
|
||||
- Access tot externe data
|
||||
**Wat is een Custom GPT?**
|
||||
Een gepersonaliseerde versie van ChatGPT voor specifieke taken.
|
||||
|
||||
### Real-World Developer Agents Bouwen
|
||||
**Onderdelen:**
|
||||
1. **Instructions:** Hoe moet de GPT zich gedragen?
|
||||
2. **Conversation starters:** Voorbeeld prompts
|
||||
3. **Knowledge:** Upload documenten als context
|
||||
4. **Capabilities:** Web browsing, code interpreter, DALL-E
|
||||
|
||||
**Voorbeeld: Code Reviewer GPT**
|
||||
|
||||
*Instructions:*
|
||||
```
|
||||
Je bent een strenge code reviewer voor React/TypeScript projecten.
|
||||
|
||||
Bij elke code review check je:
|
||||
1. TypeScript types correct?
|
||||
2. React best practices gevolgd?
|
||||
3. Geen hardcoded values?
|
||||
4. Error handling aanwezig?
|
||||
5. Accessibility (ARIA labels)?
|
||||
|
||||
Geef feedback in dit format:
|
||||
- ✅ Goed: [wat is goed]
|
||||
- ⚠️ Verbeter: [wat kan beter]
|
||||
- ❌ Fix: [wat moet gefixed worden]
|
||||
|
||||
Wees streng maar constructief.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Claude Projects
|
||||
|
||||
**Wat is een Claude Project?**
|
||||
Een Claude-omgeving met custom context voor een specifiek project.
|
||||
|
||||
**Onderdelen:**
|
||||
1. **Project Knowledge:** Upload relevante documenten
|
||||
2. **Custom Instructions:** Hoe moet Claude zich gedragen
|
||||
3. **Conversation History:** Context blijft bewaard
|
||||
|
||||
**Voordelen:**
|
||||
- Langere context dan ChatGPT
|
||||
- Betere nuance in antwoorden
|
||||
- Artifacts voor code en documenten
|
||||
|
||||
**Voorbeeld: Project voor je Todo App**
|
||||
|
||||
*Custom Instructions:*
|
||||
```
|
||||
Dit is mijn Todo app project.
|
||||
|
||||
Tech stack:
|
||||
- Next.js 14 met App Router
|
||||
- TypeScript
|
||||
- Tailwind CSS
|
||||
- Supabase voor database en auth
|
||||
|
||||
Code conventies:
|
||||
- Functional components
|
||||
- Named exports
|
||||
- Async/await (geen .then)
|
||||
|
||||
Als je code schrijft, volg altijd deze conventies.
|
||||
```
|
||||
|
||||
*Project Knowledge:*
|
||||
- Upload je belangrijkste component files
|
||||
- Upload je Supabase schema
|
||||
|
||||
---
|
||||
|
||||
### Wanneer Welke Gebruiken?
|
||||
|
||||
| Situatie | Tool |
|
||||
|----------|------|
|
||||
| Snelle code review | Custom GPT |
|
||||
| Werken aan specifiek project | Claude Project |
|
||||
| Documentatie genereren | Custom GPT |
|
||||
| Lange context nodig | Claude Project |
|
||||
| Wil delen met anderen | Custom GPT |
|
||||
| Privé project context | Claude Project |
|
||||
|
||||
---
|
||||
|
||||
### Custom GPT Maken
|
||||
|
||||
**Stap 1:** Ga naar chat.openai.com → "Explore GPTs" → "Create"
|
||||
|
||||
**Stap 2:** Vul in:
|
||||
- Naam: "React Code Reviewer"
|
||||
- Beschrijving: "Reviews React/TypeScript code"
|
||||
- Instructions: (zie voorbeeld hierboven)
|
||||
|
||||
**Stap 3:** Test met echte code
|
||||
|
||||
**Stap 4:** Itereer op instructions
|
||||
- Wat mist hij?
|
||||
- Wat doet hij verkeerd?
|
||||
- Pas aan en test opnieuw
|
||||
|
||||
---
|
||||
|
||||
### Claude Project Maken
|
||||
|
||||
**Stap 1:** Ga naar claude.ai → "Projects" → "Create project"
|
||||
|
||||
**Stap 2:** Geef project een naam
|
||||
|
||||
**Stap 3:** Upload Project Knowledge
|
||||
- Drag & drop je belangrijkste files
|
||||
- Of kopieer/plak code snippets
|
||||
|
||||
**Stap 4:** Schrijf Custom Instructions
|
||||
- Beschrijf je tech stack
|
||||
- Beschrijf je conventies
|
||||
- Beschrijf wat je wilt dat Claude doet
|
||||
|
||||
**Stap 5:** Start chatten binnen het project
|
||||
|
||||
---
|
||||
|
||||
### Agent Instructions Schrijven
|
||||
|
||||
**Goede instructions bevatten:**
|
||||
|
||||
1. **Rol:** Wie is de agent?
|
||||
```
|
||||
Je bent een senior React developer die code reviewt.
|
||||
```
|
||||
|
||||
2. **Context:** Wat is de situatie?
|
||||
```
|
||||
Je reviewt code voor een startup met strakke deadlines.
|
||||
Focus op kritieke issues, niet op style preferences.
|
||||
```
|
||||
|
||||
3. **Gedrag:** Hoe moet hij reageren?
|
||||
```
|
||||
Wees direct maar vriendelijk.
|
||||
Geef altijd een voorbeeld van de betere oplossing.
|
||||
```
|
||||
|
||||
4. **Format:** Hoe moet output eruitzien?
|
||||
```
|
||||
Gebruik markdown formatting.
|
||||
Groepeer feedback per categorie.
|
||||
```
|
||||
|
||||
5. **Beperkingen:** Wat moet hij NIET doen?
|
||||
```
|
||||
Herschrijf niet de hele codebase.
|
||||
Focus op de gevraagde code, niet op andere files.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Praktische Agent Ideeën
|
||||
|
||||
| Agent | Doel |
|
||||
|-------|------|
|
||||
| **Code Reviewer** | Check code op bugs en best practices |
|
||||
| **Doc Generator** | Genereer documentatie voor components |
|
||||
| **Bug Debugger** | Help bij error messages uitleggen |
|
||||
| **Refactor Helper** | Suggesties voor code verbetering |
|
||||
| **Test Writer** | Genereer unit tests |
|
||||
| **Rubber Duck** | Denk hardop mee over problemen |
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
- Custom GPTs (OpenAI)
|
||||
- Claude Projects (Anthropic)
|
||||
- MCP
|
||||
- ChatGPT (Custom GPTs)
|
||||
- Claude Desktop (Projects)
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (2 uur)
|
||||
|
||||
### Deel 1: Build Code Review Agent (1 uur)
|
||||
### Bouw Je Eerste AI Agents
|
||||
|
||||
**Groepswerk (20 min):**
|
||||
In groepjes van 2-3:
|
||||
- Definieer comprehensive code review checklist:
|
||||
- TypeScript
|
||||
- React patterns
|
||||
- Accessibility
|
||||
- Security
|
||||
- Performance
|
||||
- Code organization
|
||||
**Deel 1: Custom GPT - Code Reviewer (45 min)**
|
||||
|
||||
**Maak Agent (30 min):**
|
||||
- Maak Custom GPT OF Claude Project met checklist als instructions
|
||||
- Upload sample "goede" code als knowledge base (10 min)
|
||||
1. Ga naar ChatGPT → Create GPT
|
||||
2. Maak "Code Reviewer" met deze checklist:
|
||||
- TypeScript types
|
||||
- React best practices
|
||||
- Error handling
|
||||
- Accessibility
|
||||
- Performance
|
||||
3. Upload sample "goede" code als knowledge
|
||||
4. Test met code uit je Todo app
|
||||
5. Itereer op de instructions
|
||||
|
||||
### Deel 2: Build Documentation Agent (1 uur)
|
||||
**Deel 2: Claude Project - Todo App Context (45 min)**
|
||||
|
||||
**Individueel:**
|
||||
1. Maak nieuw Claude Project
|
||||
2. Upload je Todo app files als knowledge
|
||||
3. Schrijf custom instructions met je tech stack
|
||||
4. Test: vraag Claude om een nieuwe feature te bouwen
|
||||
5. Vergelijk: kent hij je project context?
|
||||
|
||||
Maak agent die comprehensive documentatie genereert.
|
||||
**Deel 3: Vergelijking (30 min)**
|
||||
|
||||
**Instructions:**
|
||||
> "Je bent documentatie expert. Gegeven component code, genereer:
|
||||
> 1. Component overview
|
||||
> 2. Props documentatie
|
||||
> 3. Usage voorbeelden
|
||||
> 4. Accessibility notes
|
||||
> 5. Veel voorkomende valkuilen"
|
||||
Test dezelfde vraag in beide:
|
||||
```
|
||||
Review deze code en geef verbeter suggesties:
|
||||
[plak je TodoList component]
|
||||
```
|
||||
|
||||
- Upload component library uit Les 6 als knowledge base
|
||||
- Test agent met component
|
||||
Documenteer:
|
||||
- Welke geeft betere feedback?
|
||||
- Welke voelt meer "op maat"?
|
||||
- Wanneer zou je welke gebruiken?
|
||||
|
||||
### Deliverable
|
||||
- Werkende Custom GPT (link delen)
|
||||
- Claude Project met project context
|
||||
- Vergelijkings notities
|
||||
|
||||
---
|
||||
|
||||
## Huiswerk (2 uur)
|
||||
|
||||
### Deel 1: Test Agents in Workflow (1 uur)
|
||||
### Personal Dev Assistant
|
||||
|
||||
**Bouw nieuwe Todo app feature:**
|
||||
- Bijv. "Collaboration - invite users om todos te delen"
|
||||
**Deel 1: Bouw Je Personal Assistant (1 uur)**
|
||||
|
||||
**Gebruik beide agents:**
|
||||
- Code Review agent om code te reviewen
|
||||
- Documentation agent om te documenteren
|
||||
Maak een Custom GPT of Claude Project die:
|
||||
- Jouw coding standards kent
|
||||
- Jouw tech stack begrijpt
|
||||
- Jouw workflow ondersteunt
|
||||
|
||||
**Track:**
|
||||
- Hoe helpful?
|
||||
- Vingen ze echte issues?
|
||||
- Zou je dagelijks gebruiken?
|
||||
**Include in instructions:**
|
||||
- Jouw voorkeuren (tabs vs spaces, etc.)
|
||||
- Jouw tech stack details
|
||||
- Typische taken die je doet
|
||||
- Hoe je feedback wilt krijgen
|
||||
|
||||
### Deel 2: Personal Dev Assistant (1 uur)
|
||||
**Deel 2: Test in Echt Werk (45 min)**
|
||||
|
||||
**Maak comprehensive "Personal Dev Assistant" agent afgestemd op JOUW workflow.**
|
||||
Gebruik je assistant voor echte taken:
|
||||
1. Code review van een component
|
||||
2. Help bij een bug
|
||||
3. Genereer documentatie
|
||||
|
||||
**Include:**
|
||||
- Jouw coding standards
|
||||
- Preferred patterns
|
||||
- Tech stack specifics
|
||||
- Veel voorkomende taken
|
||||
- Troubleshooting kennis
|
||||
**Deel 3: Reflectie (15 min)**
|
||||
|
||||
- Test extensively
|
||||
- Deel agent config als gist
|
||||
Schrijf korte reflectie (300 woorden):
|
||||
- Hoe helpful was je agent?
|
||||
- Wat zou je verbeteren?
|
||||
- Ga je dit blijven gebruiken?
|
||||
|
||||
### Deliverable
|
||||
- Personal Dev Assistant (GPT link of Claude Project screenshot)
|
||||
- 3 voorbeelden van gebruik
|
||||
- Reflectie (300 woorden)
|
||||
|
||||
---
|
||||
|
||||
@@ -141,7 +296,7 @@ Maak agent die comprehensive documentatie genereert.
|
||||
Na deze les kan de student:
|
||||
- Het verschil uitleggen tussen chatbots en AI agents
|
||||
- Custom GPTs bouwen met instructions en knowledge base
|
||||
- Claude Projects opzetten met custom instructions
|
||||
- Specialized developer agents bouwen (code review, documentation)
|
||||
- Agents combineren met MCP voor externe data access
|
||||
- Een personal dev assistant agent maken
|
||||
- Claude Projects opzetten met custom instructions en context
|
||||
- Effectieve agent instructions schrijven
|
||||
- De juiste tool kiezen (Custom GPT vs Claude Project)
|
||||
- Een personal dev assistant maken voor eigen workflow
|
||||
|
||||
@@ -1,12 +1,4 @@
|
||||
# Les 10: Project Setup & Repository Structure
|
||||
|
||||
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
||||
>
|
||||
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
|
||||
> - Les10-Slide-Overzicht.md
|
||||
> - Les10-Lesplan.md
|
||||
> - Les10-Bijlage-A-Lesopdracht.md
|
||||
> - Les10-Bijlage-B-Huiswerkopdracht.md
|
||||
# Les 10: Introduction to Cursor
|
||||
|
||||
---
|
||||
|
||||
@@ -14,205 +6,273 @@
|
||||
**Hoofdstuk 3: Advanced** (Les 10-18)
|
||||
|
||||
## Beschrijving
|
||||
Leer hoe je een professioneel project opzet met goede folder structuur, documentatie, en AI-configuratie files. Dit vormt de basis voor je eindopdracht.
|
||||
Kennismaking met Cursor - de professionele AI code editor. Leer de core features en ontdek waarom dit de tool is voor serieuze AI-assisted development.
|
||||
|
||||
---
|
||||
|
||||
## Te Behandelen
|
||||
|
||||
### Waarom Project Structure Belangrijk Is
|
||||
- AI tools werken beter met duidelijke structuur
|
||||
- Makkelijker samenwerken
|
||||
- Sneller nieuwe features toevoegen
|
||||
- Professionele uitstraling
|
||||
### Waarom Cursor?
|
||||
|
||||
### Ideale Folder Structuur
|
||||
**Tot nu toe gebruikten we:**
|
||||
- OpenCode (gratis, goed voor leren)
|
||||
- Claude Desktop (voor agents en projects)
|
||||
|
||||
```
|
||||
project/
|
||||
├── .cursor/
|
||||
│ └── rules/ # Cursor instructies
|
||||
│ ├── general.mdc # Algemene project regels
|
||||
│ └── components.mdc # Component-specifieke regels
|
||||
├── docs/
|
||||
│ ├── PROMPT-LOG.md # Belangrijke AI prompts
|
||||
│ ├── AI-DECISIONS.md # Architectuur beslissingen
|
||||
│ └── PROJECT-BRIEF.md # Project beschrijving
|
||||
├── src/
|
||||
│ ├── app/ # Next.js App Router
|
||||
│ ├── components/
|
||||
│ │ ├── ui/ # Basis UI components
|
||||
│ │ └── features/ # Feature-specifieke components
|
||||
│ ├── lib/ # Utilities en helpers
|
||||
│ └── types/ # TypeScript types
|
||||
├── .env.local # Environment variables
|
||||
├── .env.example # Template voor env vars
|
||||
├── .gitignore
|
||||
└── README.md
|
||||
**Cursor is de volgende stap:**
|
||||
- Purpose-built voor AI-assisted coding
|
||||
- Professionele editor (gebaseerd op VS Code)
|
||||
- Superieure AI integratie
|
||||
- Free tier beschikbaar (voldoende voor de cursus)
|
||||
|
||||
---
|
||||
|
||||
### Free vs Pro
|
||||
|
||||
| Aspect | Free Tier | Pro ($20/maand) |
|
||||
|--------|-----------|-----------------|
|
||||
| Tab completion | ✅ | ✅ |
|
||||
| CMD+K edits | Beperkt | Onbeperkt |
|
||||
| Chat | Beperkt | Onbeperkt |
|
||||
| Composer | Beperkt | Onbeperkt |
|
||||
| Models | GPT-4, Claude | Alle modellen |
|
||||
|
||||
**Voor deze cursus:** Free tier is voldoende!
|
||||
|
||||
---
|
||||
|
||||
### Installatie
|
||||
|
||||
1. Ga naar [cursor.sh](https://cursor.sh)
|
||||
2. Download voor jouw OS
|
||||
3. Installeer
|
||||
4. Open Cursor
|
||||
5. Sign in met GitHub
|
||||
|
||||
**Eerste keer:**
|
||||
- Cursor vraagt om settings te importeren van VS Code (optioneel)
|
||||
- Accept default keybindings
|
||||
|
||||
---
|
||||
|
||||
### Core Features
|
||||
|
||||
#### 1. Tab Completion
|
||||
AI-powered autocomplete die hele blokken code voorspelt.
|
||||
|
||||
**Hoe het werkt:**
|
||||
- Begin met typen
|
||||
- Cursor suggereert code in grijs
|
||||
- Druk Tab om te accepteren
|
||||
- Druk Escape om te negeren
|
||||
|
||||
**Tip:** Schrijf een comment over wat je wilt, en Tab completion vult de code in.
|
||||
|
||||
```typescript
|
||||
// Function that calculates the total price with tax
|
||||
// [Tab completion vult de functie in]
|
||||
```
|
||||
|
||||
### .cursorrules Files
|
||||
#### 2. CMD+K (Inline Editing)
|
||||
Selecteer code en vraag AI om het aan te passen.
|
||||
|
||||
**Wat zijn .cursorrules?**
|
||||
- Markdown files met instructies voor Cursor
|
||||
- Project-specifieke regels en conventies
|
||||
- Worden automatisch meegenomen in context
|
||||
**Hoe het werkt:**
|
||||
1. Selecteer code (of zet cursor op een regel)
|
||||
2. Druk CMD+K (Mac) of Ctrl+K (Windows)
|
||||
3. Typ je instructie
|
||||
4. Enter om te genereren
|
||||
5. Accept of Reject de wijziging
|
||||
|
||||
**Voorbeeld `general.mdc`:**
|
||||
```markdown
|
||||
# Project Rules
|
||||
**Voorbeelden:**
|
||||
- "Add error handling"
|
||||
- "Convert to TypeScript"
|
||||
- "Make this responsive"
|
||||
- "Add loading state"
|
||||
|
||||
## Tech Stack
|
||||
- Next.js 14 met App Router
|
||||
- TypeScript (strict mode)
|
||||
- Tailwind CSS voor styling
|
||||
- Supabase voor backend
|
||||
#### 3. Chat (Sidebar)
|
||||
Converseer met AI over je code.
|
||||
|
||||
## Code Conventies
|
||||
- Gebruik functionele components
|
||||
- Prefer named exports
|
||||
- Destructure props
|
||||
- Gebruik async/await (geen .then())
|
||||
**Hoe het werkt:**
|
||||
1. CMD+Shift+L opent Chat
|
||||
2. Stel je vraag
|
||||
3. AI heeft context van je open file
|
||||
|
||||
## Styling
|
||||
- Tailwind classes, geen inline styles
|
||||
- Mobile-first approach
|
||||
- Gebruik design tokens waar mogelijk
|
||||
**Voorbeelden:**
|
||||
- "Explain what this function does"
|
||||
- "How can I optimize this?"
|
||||
- "What's wrong with this code?"
|
||||
|
||||
#### 4. @ Mentions
|
||||
Refereer naar files, folders, of documentatie.
|
||||
|
||||
**Syntax:**
|
||||
- `@filename.tsx` - specifieke file
|
||||
- `@folder/` - hele folder
|
||||
- `@Docs` - officiële docs zoeken
|
||||
- `@Web` - web zoeken
|
||||
|
||||
**Voorbeeld:**
|
||||
```
|
||||
@components/Button.tsx - How can I add a loading prop to this?
|
||||
```
|
||||
|
||||
### docs/ Folder
|
||||
#### 5. Composer Mode
|
||||
Multi-file generatie in één keer.
|
||||
|
||||
**PROMPT-LOG.md**
|
||||
- Log van belangrijke prompts die tot goede code leidden
|
||||
- Minimaal 10 prompts documenteren
|
||||
- Format: doel → prompt → resultaat
|
||||
**Hoe het werkt:**
|
||||
1. CMD+I opent Composer
|
||||
2. Beschrijf wat je wilt bouwen
|
||||
3. AI genereert meerdere files tegelijk
|
||||
4. Review en accept changes
|
||||
|
||||
**AI-DECISIONS.md**
|
||||
- Architectuur beslissingen gemaakt met AI hulp
|
||||
- Waarom bepaalde keuzes gemaakt
|
||||
- Trade-offs en alternatieven
|
||||
**Wanneer gebruiken:**
|
||||
- Nieuwe features met meerdere components
|
||||
- Refactoring over meerdere files
|
||||
- Boilerplate code genereren
|
||||
|
||||
**PROJECT-BRIEF.md**
|
||||
- Wat doet het project?
|
||||
- Wie is de doelgroep?
|
||||
- Welke features zijn er?
|
||||
---
|
||||
|
||||
### Environment Variables
|
||||
### Workflow Vergelijking
|
||||
|
||||
**.env.example** (commit naar Git):
|
||||
```
|
||||
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
|
||||
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
|
||||
OPENAI_API_KEY=your-openai-key
|
||||
```
|
||||
| Taak | OpenCode | Cursor |
|
||||
|------|----------|--------|
|
||||
| Snelle fix | Chat | CMD+K |
|
||||
| Nieuwe component | Chat | Tab completion + CMD+K |
|
||||
| Multi-file feature | Meerdere chats | Composer |
|
||||
| Code uitleg | Chat | Chat + @ mentions |
|
||||
| Refactoring | Chat | CMD+K of Composer |
|
||||
|
||||
**.env.local** (NOOIT committen):
|
||||
```
|
||||
NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
|
||||
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...
|
||||
OPENAI_API_KEY=sk-...
|
||||
```
|
||||
---
|
||||
|
||||
### README.md Best Practices
|
||||
- Project titel en korte beschrijving
|
||||
- Screenshots of demo GIF
|
||||
- Installatie instructies
|
||||
- Environment variables uitleg
|
||||
- Beschikbare scripts (`npm run dev`, etc.)
|
||||
### Tips voor Beginners
|
||||
|
||||
### Git Best Practices
|
||||
- Kleine, focused commits
|
||||
- Duidelijke commit messages
|
||||
- Feature branches
|
||||
- `.gitignore` correct ingesteld
|
||||
1. **Start met Tab completion**
|
||||
- Gewoon typen en kijken wat er gebeurt
|
||||
- Comments zijn je vriend
|
||||
|
||||
2. **CMD+K voor snelle edits**
|
||||
- Selecteer precies wat je wilt aanpassen
|
||||
- Wees specifiek in je instructie
|
||||
|
||||
3. **Chat voor vragen**
|
||||
- Als je iets niet begrijpt
|
||||
- Als je opties wilt vergelijken
|
||||
|
||||
4. **@ mentions voor context**
|
||||
- AI weet niet automatisch over andere files
|
||||
- Voeg relevante files toe met @
|
||||
|
||||
---
|
||||
|
||||
### Keyboard Shortcuts Cheat Sheet
|
||||
|
||||
| Actie | Mac | Windows |
|
||||
|-------|-----|---------|
|
||||
| Tab completion accept | Tab | Tab |
|
||||
| Inline edit | CMD+K | Ctrl+K |
|
||||
| Open Chat | CMD+Shift+L | Ctrl+Shift+L |
|
||||
| Open Composer | CMD+I | Ctrl+I |
|
||||
| Accept suggestion | CMD+Y | Ctrl+Y |
|
||||
| Reject suggestion | CMD+N | Ctrl+N |
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
- Cursor
|
||||
- Git & GitHub
|
||||
- Next.js
|
||||
- VS Code / WebStorm
|
||||
- GitHub
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (2 uur)
|
||||
|
||||
### Richt je Eindproject Repository In
|
||||
### Cursor Verkennen
|
||||
|
||||
**Deel 1: Repository Setup (30 min)**
|
||||
- Maak nieuwe GitHub repository
|
||||
- Clone lokaal
|
||||
- Run `npx create-next-app@latest` met TypeScript + Tailwind
|
||||
- Push initial commit
|
||||
**Deel 1: Setup (20 min)**
|
||||
|
||||
**Deel 2: Folder Structuur (30 min)**
|
||||
- Maak `docs/` folder met:
|
||||
- `PROJECT-BRIEF.md` (beschrijf je eindproject idee)
|
||||
- `PROMPT-LOG.md` (lege template)
|
||||
- `AI-DECISIONS.md` (lege template)
|
||||
- Maak `.cursor/rules/` folder met:
|
||||
- `general.mdc` (project regels)
|
||||
- Reorganiseer `src/` folder
|
||||
1. Download en installeer Cursor
|
||||
2. Sign in met GitHub
|
||||
3. Open je Todo app project
|
||||
4. Verken de interface
|
||||
|
||||
**Deel 3: Environment Setup (20 min)**
|
||||
- Maak `.env.example` met alle benodigde variabelen
|
||||
- Maak `.env.local` met echte waarden
|
||||
- Controleer `.gitignore` (env files moeten erin staan!)
|
||||
**Deel 2: Tab Completion (30 min)**
|
||||
|
||||
**Deel 4: README & Git (40 min)**
|
||||
- Schrijf complete README.md
|
||||
- Maak eerste feature branch
|
||||
- Commit alle changes met goede messages
|
||||
- Push en maak PR (voor jezelf)
|
||||
Maak nieuwe file `src/components/LoadingSpinner.tsx`:
|
||||
1. Typ comment: `// Loading spinner component with size prop`
|
||||
2. Laat Tab completion de rest doen
|
||||
3. Itereer met meer comments
|
||||
4. Noteer: hoe goed is de completion?
|
||||
|
||||
**Deel 3: CMD+K Oefenen (30 min)**
|
||||
|
||||
Open je TodoList component:
|
||||
1. Selecteer de list rendering code
|
||||
2. CMD+K → "Add loading state with skeleton"
|
||||
3. Selecteer een button
|
||||
4. CMD+K → "Add disabled state while loading"
|
||||
5. Selecteer een function
|
||||
6. CMD+K → "Add try-catch with error toast"
|
||||
|
||||
Noteer wat werkt en wat niet.
|
||||
|
||||
**Deel 4: Chat + @ Mentions (20 min)**
|
||||
|
||||
1. Open Chat (CMD+Shift+L)
|
||||
2. Vraag: "@TodoList.tsx What could I improve in this component?"
|
||||
3. Vraag: "@lib/supabase.ts How do I add real-time subscriptions?"
|
||||
4. Probeer @Docs voor Next.js documentatie
|
||||
|
||||
**Deel 5: Composer Proberen (20 min)**
|
||||
|
||||
1. Open Composer (CMD+I)
|
||||
2. Vraag: "Create a Settings page with dark mode toggle and notification preferences. Use our existing component style."
|
||||
3. Review de gegenereerde files
|
||||
4. Accept of reject
|
||||
|
||||
### Deliverable
|
||||
- GitHub repository met complete structuur
|
||||
- Alle docs files aanwezig
|
||||
- .cursorrules file geschreven
|
||||
- README compleet
|
||||
- Screenshot van werkende Tab completion
|
||||
- 3 voorbeelden van CMD+K edits
|
||||
- Notities: wat werkt wel/niet goed
|
||||
|
||||
---
|
||||
|
||||
## Huiswerk (2 uur)
|
||||
|
||||
### Verfijn je Project Setup
|
||||
### Bouw Feature met Cursor
|
||||
|
||||
**Deel 1: .cursorrules Uitbreiden (45 min)**
|
||||
- Voeg `components.mdc` toe met component conventies
|
||||
- Voeg `api.mdc` toe met API/Supabase regels
|
||||
- Test of Cursor de regels oppikt
|
||||
**Deel 1: Feature Bouwen (1.5 uur)**
|
||||
|
||||
**Deel 2: Documentatie (45 min)**
|
||||
- Vul `PROJECT-BRIEF.md` volledig in:
|
||||
- Projectnaam en tagline
|
||||
- Probleem dat je oplost
|
||||
- Target audience
|
||||
- Core features (3-5)
|
||||
- Nice-to-have features
|
||||
- Tech stack keuzes
|
||||
- Start `AI-DECISIONS.md` met eerste beslissing
|
||||
Voeg "Due Dates" toe aan je Todo app:
|
||||
1. Elk todo kan een due date hebben
|
||||
2. Toon due date in de lijst
|
||||
3. Sorteer op due date
|
||||
4. Markeer overdue items in rood
|
||||
|
||||
**Deel 3: Basis Components (30 min)**
|
||||
- Maak `src/components/ui/` met basic components:
|
||||
- Button.tsx
|
||||
- Card.tsx
|
||||
- Input.tsx
|
||||
- Gebruik Cursor met je nieuwe .cursorrules
|
||||
**Gebruik ALLE Cursor features:**
|
||||
- Tab completion voor nieuwe code
|
||||
- CMD+K voor aanpassingen
|
||||
- Chat voor vragen
|
||||
- Composer voor multi-file changes
|
||||
|
||||
**Deel 2: Reflectie (30 min)**
|
||||
|
||||
Schrijf vergelijking (400 woorden):
|
||||
- Cursor vs OpenCode: wat is beter?
|
||||
- Welke feature gebruik je het meest?
|
||||
- Is free tier voldoende?
|
||||
- Ga je overstappen?
|
||||
|
||||
### Deliverable
|
||||
- Uitgebreide .cursorrules (minimaal 2 files)
|
||||
- Volledig ingevulde PROJECT-BRIEF.md
|
||||
- Basis UI components gemaakt met Cursor
|
||||
- Screenshot van Cursor die je rules gebruikt
|
||||
- Werkende Due Dates feature
|
||||
- GitHub commit met de changes
|
||||
- Reflectie (400 woorden)
|
||||
|
||||
---
|
||||
|
||||
## Leerdoelen
|
||||
Na deze les kan de student:
|
||||
- Een professionele project structuur opzetten
|
||||
- .cursorrules files schrijven voor project-specifieke AI instructies
|
||||
- Documentatie files maken (PROMPT-LOG, AI-DECISIONS, PROJECT-BRIEF)
|
||||
- Environment variables correct beheren
|
||||
- Git best practices toepassen
|
||||
- Een README schrijven die anderen kunnen volgen
|
||||
- Cursor installeren en configureren
|
||||
- Tab completion effectief gebruiken
|
||||
- CMD+K gebruiken voor inline edits
|
||||
- Chat gebruiken met @ mentions voor context
|
||||
- Composer mode gebruiken voor multi-file generatie
|
||||
- Het verschil beoordelen tussen Cursor en OpenCode
|
||||
- De juiste Cursor feature kiezen per taak
|
||||
|
||||
@@ -1,173 +1,448 @@
|
||||
# Les 11: Introduction to Cursor - De Professionele AI Editor
|
||||
|
||||
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
||||
>
|
||||
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
|
||||
> - Les11-Slide-Overzicht.md
|
||||
> - Les11-Lesplan.md
|
||||
> - Les11-Bijlage-A-Lesopdracht.md
|
||||
> - Les11-Bijlage-B-Huiswerkopdracht.md
|
||||
# Les 11: Project Setup & Repository Structure
|
||||
|
||||
---
|
||||
|
||||
## Hoofdstuk
|
||||
**Hoofdstuk 3: Advanced** (Les 8-18)
|
||||
**Hoofdstuk 3: Advanced** (Les 10-18)
|
||||
|
||||
## Beschrijving
|
||||
Kennismaking met Cursor als premium AI code editor - best of both worlds tussen IDE en AI power.
|
||||
Zet je eindproject professioneel op met de juiste structuur, documentatie, en AI-configuratie. Je past alles toe wat je hebt geleerd en maakt je project klaar voor Cursor.
|
||||
|
||||
---
|
||||
|
||||
## Te Behandelen
|
||||
|
||||
### Waarom Cursor na OpenCode/WebStorm + Claude Code?
|
||||
- Purpose-built for AI
|
||||
- Bliksem snel
|
||||
- Superieure tab completion
|
||||
- CMD+K inline editing
|
||||
- Composer mode
|
||||
- @ mentions systeem
|
||||
### Waarom Goede Structuur Belangrijk Is
|
||||
|
||||
### Skills Compatibiliteit
|
||||
- Al je Skills werken ook in Cursor
|
||||
**Voor AI:**
|
||||
- AI begrijpt beter wat je project doet
|
||||
- Betere code suggestions
|
||||
- Minder hallucinaties
|
||||
|
||||
### Installatie
|
||||
- Download
|
||||
- GitHub integration
|
||||
- 2-week Pro trial
|
||||
**Voor jezelf:**
|
||||
- Makkelijker navigeren
|
||||
- Sneller features bouwen
|
||||
- Betere samenwerking
|
||||
|
||||
### Core Features
|
||||
---
|
||||
|
||||
| Feature | Beschrijving |
|
||||
|---------|-------------|
|
||||
| Tab completion | AI-powered autocomplete |
|
||||
| CMD+K | Inline editing |
|
||||
| Chat | Conversatie met context |
|
||||
| @ mentions | Reference files, folders, docs |
|
||||
| Composer mode | Multi-file generation |
|
||||
### Eindproject Aanmaken
|
||||
|
||||
### Skills Migratie
|
||||
- Skills van OpenCode werken meteen in Cursor
|
||||
```bash
|
||||
# Kies een goede naam voor je project
|
||||
npx create-next-app@latest ai-recipe-generator
|
||||
# of: smart-budget-buddy
|
||||
# of: travel-planner-ai
|
||||
# of: jouw-eigen-idee
|
||||
|
||||
### Cost Discussie
|
||||
- Free tier vs Pro ($20/maand)
|
||||
# Beantwoord de vragen:
|
||||
# ✔ Would you like to use TypeScript? → Yes
|
||||
# ✔ Would you like to use ESLint? → Yes
|
||||
# ✔ Would you like to use Tailwind CSS? → Yes
|
||||
# ✔ Would you like to use `src/` directory? → Yes
|
||||
# ✔ Would you like to use App Router? → Yes
|
||||
# ✔ Would you like to customize the default import alias? → No
|
||||
|
||||
### Wanneer Wat Gebruiken?
|
||||
cd ai-recipe-generator
|
||||
```
|
||||
|
||||
| Tool | Gebruik voor |
|
||||
|------|--------------|
|
||||
| OpenCode/WebStorm | Leren |
|
||||
| Claude Code | Grote autonome taken |
|
||||
| Cursor | Dagelijkse development |
|
||||
---
|
||||
|
||||
### De Ideale Folder Structuur
|
||||
|
||||
```
|
||||
ai-recipe-generator/
|
||||
├── .cursor/
|
||||
│ └── rules/
|
||||
│ └── general.mdc # Cursor instructies
|
||||
├── docs/
|
||||
│ ├── PROJECT-BRIEF.md # Project beschrijving
|
||||
│ ├── PROMPT-LOG.md # AI prompts logboek
|
||||
│ └── AI-DECISIONS.md # Architectuur beslissingen
|
||||
├── src/
|
||||
│ ├── app/
|
||||
│ │ ├── api/ # API routes (voor AI)
|
||||
│ │ ├── layout.tsx
|
||||
│ │ └── page.tsx
|
||||
│ ├── components/
|
||||
│ │ ├── ui/ # Herbruikbare UI components
|
||||
│ │ └── features/ # Feature-specifieke components
|
||||
│ ├── lib/
|
||||
│ │ └── supabase.ts # Supabase client
|
||||
│ └── types/
|
||||
│ └── index.ts # TypeScript types
|
||||
├── .env.example # Template voor env vars
|
||||
├── .env.local # Echte env vars (niet committen!)
|
||||
├── .gitignore
|
||||
└── README.md
|
||||
```
|
||||
|
||||
**Maak de folders aan:**
|
||||
```bash
|
||||
mkdir -p .cursor/rules
|
||||
mkdir -p docs
|
||||
mkdir -p src/components/ui
|
||||
mkdir -p src/components/features
|
||||
mkdir -p src/lib
|
||||
mkdir -p src/types
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### .cursorrules Files
|
||||
|
||||
**.cursor/rules/general.mdc:**
|
||||
```markdown
|
||||
# Project: AI Recipe Generator
|
||||
|
||||
## Tech Stack
|
||||
- Next.js 14 met App Router
|
||||
- TypeScript (strict mode)
|
||||
- Tailwind CSS voor styling
|
||||
- Supabase voor database en auth
|
||||
- Vercel AI SDK voor chat features
|
||||
|
||||
## Code Conventies
|
||||
- Gebruik functionele React components
|
||||
- Gebruik named exports (geen default exports)
|
||||
- Destructure props in function signature
|
||||
- Gebruik async/await (geen .then() chains)
|
||||
- Schrijf TypeScript types voor alle props en data
|
||||
|
||||
## File Naming
|
||||
- Components: PascalCase (Button.tsx, RecipeCard.tsx)
|
||||
- Utilities: camelCase (formatDate.ts, fetchRecipes.ts)
|
||||
- Types: PascalCase met 'Type' suffix (RecipeType.ts)
|
||||
|
||||
## Styling
|
||||
- Alleen Tailwind classes, geen inline styles
|
||||
- Mobile-first approach
|
||||
- Gebruik consistent spacing (4, 8, 16, 24, 32)
|
||||
|
||||
## Supabase
|
||||
- Client in src/lib/supabase.ts
|
||||
- Gebruik typed queries waar mogelijk
|
||||
- Handle errors expliciet
|
||||
|
||||
## AI Features
|
||||
- API routes in src/app/api/
|
||||
- Gebruik Vercel AI SDK useChat hook
|
||||
- Stream responses voor betere UX
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### docs/ Folder
|
||||
|
||||
#### docs/PROJECT-BRIEF.md
|
||||
```markdown
|
||||
# Project Brief: AI Recipe Generator
|
||||
|
||||
## Projectnaam
|
||||
AI Recipe Generator
|
||||
|
||||
## Tagline
|
||||
"Ontdek recepten op basis van wat je in huis hebt"
|
||||
|
||||
## Probleem
|
||||
Mensen hebben vaak ingrediënten in huis maar weten niet wat ze
|
||||
ermee kunnen maken. Ze verspillen voedsel of bestellen onnodig.
|
||||
|
||||
## Oplossing
|
||||
Een app waar je ingrediënten invoert en AI receptsuggesties genereert.
|
||||
Je kunt chatten met de AI voor variaties en tips.
|
||||
|
||||
## Doelgroep
|
||||
- Studenten met beperkt budget
|
||||
- Thuiskoks die inspiratie zoeken
|
||||
- Mensen die voedselverspilling willen verminderen
|
||||
|
||||
## Core Features
|
||||
1. Ingrediënten invoeren
|
||||
2. AI genereert recepten op basis van ingrediënten
|
||||
3. Chat interface voor follow-up vragen
|
||||
4. Recepten opslaan als favoriet
|
||||
5. Login om favorieten te bewaren
|
||||
|
||||
## Nice-to-have Features
|
||||
- Dieetwensen (vegetarisch, glutenvrij, etc.)
|
||||
- Boodschappenlijst genereren
|
||||
- Recept delen
|
||||
|
||||
## Tech Stack
|
||||
- Frontend: Next.js, TypeScript, Tailwind CSS
|
||||
- Backend: Supabase (database, auth)
|
||||
- AI: Vercel AI SDK met OpenAI
|
||||
- Deployment: Vercel
|
||||
```
|
||||
|
||||
#### docs/PROMPT-LOG.md
|
||||
```markdown
|
||||
# Prompt Log
|
||||
|
||||
Dit document bevat de belangrijkste prompts die ik heb gebruikt.
|
||||
|
||||
## Template per prompt:
|
||||
|
||||
### [Datum] - [Onderwerp]
|
||||
**Doel:** Wat wilde ik bereiken?
|
||||
**Prompt:**
|
||||
\`\`\`
|
||||
De exacte prompt die ik gebruikte
|
||||
\`\`\`
|
||||
**Resultaat:** Wat was het resultaat? Werkte het?
|
||||
**Geleerd:** Wat heb ik hiervan geleerd?
|
||||
|
||||
---
|
||||
|
||||
## Prompts
|
||||
|
||||
### [Datum] - Project Setup
|
||||
**Doel:** Basis project structuur opzetten
|
||||
**Prompt:**
|
||||
\`\`\`
|
||||
[Nog in te vullen tijdens development]
|
||||
\`\`\`
|
||||
**Resultaat:**
|
||||
**Geleerd:**
|
||||
|
||||
---
|
||||
|
||||
(Voeg minimaal 10 prompts toe tijdens je project)
|
||||
```
|
||||
|
||||
#### docs/AI-DECISIONS.md
|
||||
```markdown
|
||||
# AI Decisions Log
|
||||
|
||||
Dit document bevat architectuur- en designbeslissingen gemaakt met AI hulp.
|
||||
|
||||
## Template per beslissing:
|
||||
|
||||
### [Datum] - [Beslissing titel]
|
||||
**Context:** Wat was de situatie?
|
||||
**Vraag aan AI:** Wat heb ik gevraagd?
|
||||
**Opties:** Welke opties werden voorgesteld?
|
||||
**Keuze:** Wat heb ik gekozen en waarom?
|
||||
**Trade-offs:** Wat zijn de voor- en nadelen?
|
||||
|
||||
---
|
||||
|
||||
## Beslissingen
|
||||
|
||||
### [Datum] - Database Schema
|
||||
**Context:** Ik moet bepalen hoe ik recepten opsla.
|
||||
**Vraag aan AI:** "Wat is een goede database structuur voor een recept app?"
|
||||
**Opties:**
|
||||
1. Één tabel met JSON voor ingrediënten
|
||||
2. Genormaliseerde tabellen (recipes, ingredients, recipe_ingredients)
|
||||
**Keuze:** Optie 1 - één tabel met JSON
|
||||
**Trade-offs:**
|
||||
- Pro: Simpeler, sneller te implementeren
|
||||
- Con: Minder flexibel voor complexe queries
|
||||
|
||||
---
|
||||
|
||||
(Voeg minimaal 5 beslissingen toe tijdens je project)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Environment Variables
|
||||
|
||||
**.env.example (WEL committen):**
|
||||
```bash
|
||||
# Supabase
|
||||
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
|
||||
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
|
||||
|
||||
# OpenAI (voor Vercel AI SDK)
|
||||
OPENAI_API_KEY=your-openai-key
|
||||
```
|
||||
|
||||
**.env.local (NIET committen):**
|
||||
```bash
|
||||
# Supabase
|
||||
NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
|
||||
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.xxxxx
|
||||
|
||||
# OpenAI
|
||||
OPENAI_API_KEY=sk-xxxxx
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### README.md Best Practices
|
||||
|
||||
```markdown
|
||||
# AI Recipe Generator
|
||||
|
||||
Ontdek recepten op basis van wat je in huis hebt.
|
||||
|
||||
## Features
|
||||
- Voer ingrediënten in die je hebt
|
||||
- AI genereert receptsuggesties
|
||||
- Chat voor follow-up vragen
|
||||
- Sla favoriete recepten op
|
||||
|
||||
## Tech Stack
|
||||
- Next.js 14 (App Router)
|
||||
- TypeScript
|
||||
- Tailwind CSS
|
||||
- Supabase
|
||||
- Vercel AI SDK
|
||||
|
||||
## Getting Started
|
||||
|
||||
### Prerequisites
|
||||
- Node.js 18+
|
||||
- npm of yarn
|
||||
- Supabase account
|
||||
- OpenAI API key
|
||||
|
||||
### Installation
|
||||
|
||||
1. Clone de repository:
|
||||
\`\`\`bash
|
||||
git clone https://github.com/jouw-username/ai-recipe-generator.git
|
||||
cd ai-recipe-generator
|
||||
\`\`\`
|
||||
|
||||
2. Installeer dependencies:
|
||||
\`\`\`bash
|
||||
npm install
|
||||
\`\`\`
|
||||
|
||||
3. Kopieer environment variables:
|
||||
\`\`\`bash
|
||||
cp .env.example .env.local
|
||||
\`\`\`
|
||||
|
||||
4. Vul je credentials in `.env.local`
|
||||
|
||||
5. Start development server:
|
||||
\`\`\`bash
|
||||
npm run dev
|
||||
\`\`\`
|
||||
|
||||
6. Open [http://localhost:3000](http://localhost:3000)
|
||||
|
||||
## Scripts
|
||||
- `npm run dev` - Start development server
|
||||
- `npm run build` - Build voor productie
|
||||
- `npm run lint` - Run ESLint
|
||||
|
||||
## Deployment
|
||||
Deze app is gedeployed op Vercel: [link naar productie]
|
||||
|
||||
## Author
|
||||
[Jouw naam]
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### GitHub Repository Aanmaken
|
||||
|
||||
```bash
|
||||
# Initialiseer Git (als dat nog niet is gebeurd)
|
||||
git init
|
||||
|
||||
# Maak eerste commit
|
||||
git add .
|
||||
git commit -m "Initial Next.js setup with project structure"
|
||||
|
||||
# Maak repository op GitHub.com, dan:
|
||||
git remote add origin https://github.com/jouw-username/ai-recipe-generator.git
|
||||
git branch -M main
|
||||
git push -u origin main
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
- Next.js
|
||||
- Cursor
|
||||
- GitHub
|
||||
- Skills.sh
|
||||
- Git & GitHub
|
||||
- Supabase
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (2 uur)
|
||||
|
||||
### Deel 1: Setup & Skills Migration (30 min)
|
||||
### Richt je Eindproject Repository In
|
||||
|
||||
**Installatie:**
|
||||
- Install Cursor
|
||||
- Connect GitHub
|
||||
- Activate Pro trial
|
||||
**Deel 1: Project Aanmaken (20 min)**
|
||||
- Kies je eindproject (Recipe Generator / Budget Buddy / Travel Planner / eigen idee)
|
||||
- Run `npx create-next-app@latest [project-naam]`
|
||||
- Open in Cursor
|
||||
|
||||
**Verificatie:**
|
||||
- Verifieer Skills werken (`npx skills list`)
|
||||
- Test prompt met skill
|
||||
**Deel 2: Folder Structuur (20 min)**
|
||||
- Maak alle folders aan volgens de structuur
|
||||
- Maak alle bestanden aan
|
||||
- Test: folder structuur is compleet
|
||||
|
||||
**Eerste Indrukken:**
|
||||
- Bouw component
|
||||
- Test tab completion
|
||||
- Test CMD+K
|
||||
- Test Chat met @ mentions
|
||||
- Documenteer verschillen vs OpenCode
|
||||
**Deel 3: .cursorrules (30 min)**
|
||||
- Schrijf `general.mdc` met jouw project details
|
||||
- Pas de tech stack, conventies, en styling regels aan
|
||||
- Test: open een file en vraag Cursor iets - volgt hij je regels?
|
||||
|
||||
### Deel 2: Feature Comparison (45 min)
|
||||
**Deel 4: Documentatie (30 min)**
|
||||
- Vul PROJECT-BRIEF.md volledig in
|
||||
- Maak templates klaar in PROMPT-LOG.md en AI-DECISIONS.md
|
||||
- Schrijf complete README.md
|
||||
|
||||
**Rebuild filtering system uit Les 4 in Cursor:**
|
||||
- Time het
|
||||
**Deel 5: Git (20 min)**
|
||||
- Initialiseer Git
|
||||
- Maak GitHub repository
|
||||
- Push alles
|
||||
|
||||
**Gebruik alle features:**
|
||||
- Extensive tab completion
|
||||
- CMD+K
|
||||
- Chat
|
||||
- @ mentions
|
||||
- Try Composer
|
||||
|
||||
**Vergelijk:**
|
||||
- Tijd
|
||||
- Code quality
|
||||
- Experience
|
||||
|
||||
### Deel 3: Composer Mode (45 min)
|
||||
|
||||
**Test Composer mode - Bouw analytics dashboard:**
|
||||
- Sidebar nav
|
||||
- Top navbar
|
||||
- 4 stat cards
|
||||
- Line chart
|
||||
- Activity feed
|
||||
|
||||
**Process:**
|
||||
- Geef high-level beschrijving
|
||||
- Laat autonoom werken
|
||||
- Feedback in Composer chat
|
||||
|
||||
**Vergelijk:** Cursor Composer vs Claude Code
|
||||
### Deliverable
|
||||
- GitHub repository URL
|
||||
- Volledig ingevulde PROJECT-BRIEF.md
|
||||
- Werkende .cursorrules file
|
||||
- Screenshot van Cursor die je regels volgt
|
||||
|
||||
---
|
||||
|
||||
## Huiswerk (2 uur)
|
||||
|
||||
### Bouw Complete Mini-App met Cursor
|
||||
### Verfijn Setup & Start Bouwen
|
||||
|
||||
**Kies 1 van 4:**
|
||||
1. Weather App
|
||||
2. Expense Tracker
|
||||
3. Recipe Finder
|
||||
4. Habit Tracker
|
||||
**Deel 1: Extra .cursorrules (30 min)**
|
||||
- Maak `components.mdc` met component conventies
|
||||
- Maak `api.mdc` met API route conventies
|
||||
- Test beide in Cursor
|
||||
|
||||
**Requirements:**
|
||||
- Full CRUD met Supabase
|
||||
- Responsive
|
||||
- TypeScript strict
|
||||
- Shadcn
|
||||
- Deployed naar Vercel
|
||||
**Deel 2: Basis Components (1 uur)**
|
||||
Maak 3-5 basis UI components in `src/components/ui/`:
|
||||
- Button.tsx
|
||||
- Card.tsx
|
||||
- Input.tsx
|
||||
- (optioneel: Modal.tsx, Toast.tsx)
|
||||
|
||||
**Challenge:** Maximaliseer Cursor + Skills
|
||||
Gebruik Cursor met je .cursorrules!
|
||||
Log effectieve prompts in PROMPT-LOG.md
|
||||
|
||||
### Track Metrics
|
||||
- Tab completion usage
|
||||
- CMD+K count
|
||||
- Composer usage
|
||||
- Skills active
|
||||
- AI vs manual ratio
|
||||
**Deel 3: Supabase Setup (30 min)**
|
||||
- Maak nieuw Supabase project voor eindopdracht
|
||||
- Configureer `.env.local` en `.env.example`
|
||||
- Bespreek met AI welke tabellen je nodig hebt
|
||||
- Maak eerste tabel aan
|
||||
- Documenteer in AI-DECISIONS.md
|
||||
|
||||
### Deliverables
|
||||
- Deployed app
|
||||
- GitHub repo
|
||||
- Comprehensive reflectie (600 woorden):
|
||||
- Is Cursor worth switching?
|
||||
- Cursor vs Claude Code?
|
||||
- Free vs Pro?
|
||||
- Skills performance?
|
||||
- Final verdict?
|
||||
### Deliverable
|
||||
- Minimaal 2 .cursorrules files
|
||||
- Minimaal 3 UI components
|
||||
- Supabase project gekoppeld
|
||||
- Eerste entries in PROMPT-LOG.md en AI-DECISIONS.md
|
||||
|
||||
---
|
||||
|
||||
## Leerdoelen
|
||||
Na deze les kan de student:
|
||||
- Cursor installeren en configureren
|
||||
- Skills migreren naar Cursor
|
||||
- Core features gebruiken (Tab, CMD+K, Chat, @ mentions, Composer)
|
||||
- Het verschil beoordelen tussen Cursor en andere AI tools
|
||||
- Composer mode gebruiken voor multi-file generatie
|
||||
- Een weloverwogen keuze maken over welke tool wanneer te gebruiken
|
||||
- Een professionele project structuur opzetten
|
||||
- .cursorrules files schrijven die Cursor instrueren
|
||||
- Documentatie files aanmaken (PROJECT-BRIEF, PROMPT-LOG, AI-DECISIONS)
|
||||
- Environment variables correct beheren
|
||||
- Een GitHub repository aanmaken en pushen
|
||||
- De basis leggen voor AI-assisted development met goede context
|
||||
|
||||
@@ -1,153 +1,363 @@
|
||||
# Les 12: Advanced Context Management & AI-Vriendelijke Code
|
||||
|
||||
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
||||
>
|
||||
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
|
||||
> - Les12-Slide-Overzicht.md
|
||||
> - Les12-Lesplan.md
|
||||
> - Les12-Bijlage-A-Lesopdracht.md
|
||||
> - Les12-Bijlage-B-Huiswerkopdracht.md
|
||||
# Les 12: MCP & Context Management
|
||||
|
||||
---
|
||||
|
||||
## Hoofdstuk
|
||||
**Hoofdstuk 3: Advanced** (Les 8-18)
|
||||
**Hoofdstuk 3: Advanced** (Les 10-18)
|
||||
|
||||
## Beschrijving
|
||||
Masterclass in context management voor maximale AI effectiveness.
|
||||
Leer over MCP (Model Context Protocol) en hoe je context effectief beheert voor betere AI-assisted development.
|
||||
|
||||
---
|
||||
|
||||
## Te Behandelen
|
||||
|
||||
### Context Windows Begrijpen
|
||||
- Tokens (~4 chars = 1 token)
|
||||
- Context sizes:
|
||||
- GPT-4: 128K tokens
|
||||
- Claude: 200K tokens
|
||||
### Wat is MCP?
|
||||
|
||||
### Waarom Context Belangrijk
|
||||
- Meer context = beter begrip
|
||||
- Maar ook: langzamer + duurder
|
||||
**MCP = Model Context Protocol**
|
||||
|
||||
Een protocol van Anthropic waarmee AI tools veilig kunnen verbinden met externe data bronnen.
|
||||
|
||||
**Zonder MCP:**
|
||||
- Je kopieert handmatig data naar Claude
|
||||
- Context gaat verloren tussen sessies
|
||||
- Geen toegang tot live data
|
||||
|
||||
**Met MCP:**
|
||||
- Claude kan direct je files lezen
|
||||
- Toegang tot databases, APIs, GitHub
|
||||
- Real-time data in je conversations
|
||||
|
||||
---
|
||||
|
||||
### MCP Servers
|
||||
|
||||
MCP werkt met "servers" - kleine programma's die specifieke data bronnen ontsluiten.
|
||||
|
||||
**Populaire MCP Servers:**
|
||||
|
||||
| Server | Wat het doet |
|
||||
|--------|--------------|
|
||||
| **filesystem** | Lees/schrijf lokale files |
|
||||
| **github** | Toegang tot repos, issues, PRs |
|
||||
| **postgres** | Direct database queries |
|
||||
| **slack** | Berichten en channels |
|
||||
| **brave-search** | Web zoeken |
|
||||
|
||||
---
|
||||
|
||||
### Claude Desktop + MCP Configureren
|
||||
|
||||
**Stap 1:** Open Claude Desktop settings
|
||||
|
||||
**Stap 2:** Ga naar "Developer" → "Edit Config"
|
||||
|
||||
**Stap 3:** Voeg MCP servers toe in `claude_desktop_config.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"mcpServers": {
|
||||
"filesystem": {
|
||||
"command": "npx",
|
||||
"args": [
|
||||
"-y",
|
||||
"@modelcontextprotocol/server-filesystem",
|
||||
"/Users/jouw-username/projects/ai-recipe-generator"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Stap 4:** Herstart Claude Desktop
|
||||
|
||||
**Stap 5:** Je ziet nu een 🔧 icoon in Claude - dit toont actieve MCP servers
|
||||
|
||||
---
|
||||
|
||||
### Filesystem MCP Testen
|
||||
|
||||
Met filesystem MCP kan Claude:
|
||||
- Je project files lezen
|
||||
- File structuur bekijken
|
||||
- Code analyseren
|
||||
|
||||
**Test prompt:**
|
||||
```
|
||||
Analyseer mijn project structuur en geef me een overzicht
|
||||
van de belangrijkste files en hun functies.
|
||||
```
|
||||
|
||||
Claude kan nu direct je files lezen zonder dat je ze kopieert!
|
||||
|
||||
---
|
||||
|
||||
### GitHub MCP
|
||||
|
||||
```json
|
||||
{
|
||||
"mcpServers": {
|
||||
"github": {
|
||||
"command": "npx",
|
||||
"args": ["-y", "@modelcontextprotocol/server-github"],
|
||||
"env": {
|
||||
"GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_xxxxx"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Wat kun je doen:**
|
||||
- "Toon mijn open issues"
|
||||
- "Maak een nieuwe branch"
|
||||
- "Wat zijn de recente commits?"
|
||||
|
||||
---
|
||||
|
||||
## Context Management
|
||||
|
||||
### Wat is Context?
|
||||
|
||||
**Context = alle informatie die AI heeft tijdens een conversatie**
|
||||
|
||||
- Je vraag
|
||||
- Eerdere berichten
|
||||
- Geüploade files
|
||||
- MCP data
|
||||
|
||||
**Beperking:** AI heeft een "context window" - maximale hoeveelheid tokens.
|
||||
|
||||
| Model | Context Window |
|
||||
|-------|----------------|
|
||||
| GPT-4 | ~128K tokens |
|
||||
| Claude 3.5 | ~200K tokens |
|
||||
| Claude 3 Opus | ~200K tokens |
|
||||
|
||||
**1 token ≈ 4 karakters** (of ~¾ woord)
|
||||
|
||||
---
|
||||
|
||||
### Waarom Context Belangrijk Is
|
||||
|
||||
**Meer context = beter begrip**
|
||||
|
||||
Met context over je project kan AI:
|
||||
- Consistente code genereren
|
||||
- Bestaande patterns volgen
|
||||
- Juiste imports gebruiken
|
||||
|
||||
**Te veel context = problemen**
|
||||
- Langzamere responses
|
||||
- Hogere kosten
|
||||
- AI raakt "afgeleid"
|
||||
|
||||
---
|
||||
|
||||
### Context Strategieën
|
||||
- Alleen relevante files
|
||||
- Start breed → narrow down
|
||||
- Sequential context
|
||||
- Prunen
|
||||
|
||||
### Project Documentatie voor AI
|
||||
**1. Start Breed, Narrow Down**
|
||||
```
|
||||
Begin: "Bekijk mijn hele project structuur"
|
||||
Dan: "Focus op de components folder"
|
||||
Dan: "Specifiek TodoList.tsx"
|
||||
```
|
||||
|
||||
| Document | Doel |
|
||||
|----------|------|
|
||||
| README | Project overview |
|
||||
| ARCHITECTURE | System design |
|
||||
| COMPONENTS | Component library docs |
|
||||
**2. Alleen Relevante Files**
|
||||
- Niet je hele codebase delen
|
||||
- Focus op files die relevant zijn voor de taak
|
||||
|
||||
### Hoe AI Docs Leest
|
||||
- Structuur matters
|
||||
- Voorbeelden helpen
|
||||
**3. @ Mentions in Cursor**
|
||||
```
|
||||
@components/Button.tsx @lib/utils.ts
|
||||
Hoe kan ik een loading state toevoegen aan de Button?
|
||||
```
|
||||
|
||||
### AI-Vriendelijke Code Organisatie
|
||||
- Semantische naming
|
||||
- Kleine focused files
|
||||
- Proper separation
|
||||
- Comprehensive comments (WHY niet WHAT)
|
||||
**4. Fresh Start bij Nieuwe Taken**
|
||||
- Nieuwe chat voor nieuwe onderwerpen
|
||||
- Voorkomt context pollution
|
||||
|
||||
### Context Pruning
|
||||
- Wanneer fresh chat
|
||||
- .cursorignore
|
||||
- Vorige context samenvatten
|
||||
---
|
||||
|
||||
### Knowledge Persistence
|
||||
- Claude Projects voor long-term memory
|
||||
### .cursorignore
|
||||
|
||||
### Tool Vergelijking
|
||||
Context handling in:
|
||||
- Cursor
|
||||
- OpenCode
|
||||
- Claude Code
|
||||
Net als .gitignore, maar voor Cursor's AI indexing.
|
||||
|
||||
**Maak `.cursorignore` in je project root:**
|
||||
```
|
||||
# Dependencies
|
||||
node_modules/
|
||||
|
||||
# Build outputs
|
||||
.next/
|
||||
dist/
|
||||
build/
|
||||
|
||||
# Large files
|
||||
*.log
|
||||
*.lock
|
||||
|
||||
# Sensitive
|
||||
.env.local
|
||||
```
|
||||
|
||||
**Waarom:**
|
||||
- Snellere indexing
|
||||
- Geen irrelevante suggestions
|
||||
- Betere focus op je code
|
||||
|
||||
---
|
||||
|
||||
### Context Optimalisatie Checklist
|
||||
|
||||
✅ **Goede project documentatie**
|
||||
- README met overview
|
||||
- Duidelijke folder structuur
|
||||
- Comments in complexe code
|
||||
|
||||
✅ **Semantische naming**
|
||||
- `fetchUserData()` niet `getData()`
|
||||
- `UserProfileCard.tsx` niet `Card1.tsx`
|
||||
|
||||
✅ **Kleine, focused files**
|
||||
- Max ~300 regels per file
|
||||
- Eén verantwoordelijkheid per file
|
||||
|
||||
✅ **Proper imports**
|
||||
- Absolute imports (`@/components/...`)
|
||||
- Georganiseerde imports
|
||||
|
||||
---
|
||||
|
||||
### Context in Cursor vs Claude Desktop
|
||||
|
||||
| Aspect | Cursor | Claude Desktop + MCP |
|
||||
|--------|--------|---------------------|
|
||||
| Automatische context | Open files | MCP servers |
|
||||
| File access | @ mentions | Filesystem MCP |
|
||||
| Project begrip | .cursorrules | Project Knowledge |
|
||||
| Beste voor | Coding | Research, planning |
|
||||
|
||||
**Combineer ze:**
|
||||
- Claude Desktop + MCP voor planning en grote analyses
|
||||
- Cursor voor daadwerkelijk coderen
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
- Cursor
|
||||
- Claude Desktop
|
||||
- MCP servers
|
||||
- Cursor
|
||||
- .cursorignore
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (2 uur)
|
||||
|
||||
### Context Optimization Challenge
|
||||
### MCP Setup & Context Optimalisatie
|
||||
|
||||
**Setup:** Docent biedt messy codebase (10-15 files, onduidelijk, missing docs)
|
||||
**Deel 1: Claude Desktop MCP Setup (45 min)**
|
||||
|
||||
### Phase 1: Assessment (30 min)
|
||||
- Test Cursor begrip met 4 vragen
|
||||
- Score X/10
|
||||
1. Open Claude Desktop settings
|
||||
2. Configureer filesystem MCP voor je eindproject folder
|
||||
3. Herstart Claude Desktop
|
||||
4. Verifieer: vraag Claude om je project te analyseren
|
||||
|
||||
### Phase 2: Documentation (45 min)
|
||||
Maak comprehensive docs met AI:
|
||||
- README
|
||||
- ARCHITECTURE.md
|
||||
- COMPONENTS.md
|
||||
Test prompts:
|
||||
- "Wat is de structuur van mijn project?"
|
||||
- "Welke dependencies gebruik ik?"
|
||||
- "Analyseer mijn TodoList component"
|
||||
|
||||
### Phase 3: Organization (45 min)
|
||||
Refactor voor clarity:
|
||||
- Rename files/functions
|
||||
- Split files <300 lines
|
||||
- Add comments
|
||||
- Organize folders
|
||||
- Improve imports
|
||||
**Deel 2: GitHub MCP (optioneel) (30 min)**
|
||||
|
||||
### Phase 4: Re-test (30 min)
|
||||
- Zelfde 4 vragen
|
||||
- Score verbetering
|
||||
- Analyseer wat hielp
|
||||
1. Maak GitHub Personal Access Token
|
||||
2. Configureer GitHub MCP
|
||||
3. Test met je eindproject repo
|
||||
|
||||
Test prompts:
|
||||
- "Toon mijn recente commits"
|
||||
- "Wat zijn mijn open issues?"
|
||||
|
||||
**Deel 3: Context Optimalisatie (45 min)**
|
||||
|
||||
1. Maak `.cursorignore` voor je project
|
||||
2. Voeg node_modules, .next, etc. toe
|
||||
3. Herindexeer project in Cursor
|
||||
|
||||
4. Test context kwaliteit:
|
||||
- Vraag Cursor iets over je project
|
||||
- Zijn de antwoorden accuraat?
|
||||
- Gebruikt hij de juiste patterns?
|
||||
|
||||
5. Verbeter indien nodig:
|
||||
- Voeg comments toe aan complexe code
|
||||
- Verbeter naming
|
||||
- Split grote files
|
||||
|
||||
### Deliverable
|
||||
- Werkende MCP configuratie (screenshot)
|
||||
- .cursorignore file
|
||||
- Notities over context kwaliteit
|
||||
|
||||
---
|
||||
|
||||
## Huiswerk (2 uur)
|
||||
|
||||
### Maak Context Management Playbook
|
||||
### Context Deep Dive
|
||||
|
||||
### Deel 1: Playbook (1 uur)
|
||||
**Deel 1: MCP Experimenteren (1 uur)**
|
||||
|
||||
Schrijf gids over:
|
||||
- Pre-project checklist
|
||||
- Folder structure templates
|
||||
- File naming conventions
|
||||
- Prompting templates
|
||||
- Wanneer welke tool
|
||||
- Context management tijdens development
|
||||
- AI begrip meten
|
||||
- Red flags
|
||||
- Pro tips
|
||||
- Troubleshooting
|
||||
Kies en configureer nog een MCP server:
|
||||
- brave-search (voor web zoeken)
|
||||
- sqlite (voor lokale databases)
|
||||
- Of een andere uit de [MCP registry](https://github.com/modelcontextprotocol/servers)
|
||||
|
||||
### Deel 2: Templates (30 min)
|
||||
Test uitgebreid:
|
||||
- Wat kun je ermee?
|
||||
- Wanneer is het nuttig?
|
||||
- Wat zijn beperkingen?
|
||||
|
||||
Maak 3 templates:
|
||||
1. README.md
|
||||
2. ARCHITECTURE.md
|
||||
3. COMPONENT_TEMPLATE.md
|
||||
**Deel 2: Context Playbook (1 uur)**
|
||||
|
||||
### Deel 3: Test (30 min)
|
||||
- Start vers Next.js project
|
||||
- Pas playbook toe
|
||||
- Test of Cursor meteen begrijpt
|
||||
- Itereer
|
||||
Schrijf een persoonlijk "Context Management Playbook" (1 pagina):
|
||||
|
||||
**Deel als GitHub repo**
|
||||
```markdown
|
||||
# Mijn Context Management Playbook
|
||||
|
||||
## Wanneer gebruik ik wat?
|
||||
|
||||
### Claude Desktop + MCP
|
||||
- [situaties]
|
||||
|
||||
### Cursor met @ mentions
|
||||
- [situaties]
|
||||
|
||||
## Mijn .cursorignore template
|
||||
- [wat ignore ik altijd]
|
||||
|
||||
## Context strategieën
|
||||
- [wat werkt voor mij]
|
||||
|
||||
## Red flags
|
||||
- [wanneer is context slecht]
|
||||
|
||||
## Optimalisatie tips
|
||||
- [mijn beste tips]
|
||||
```
|
||||
|
||||
### Deliverable
|
||||
- Extra MCP server geconfigureerd
|
||||
- Context Management Playbook (1 pagina)
|
||||
- Documentatie in AI-DECISIONS.md over je context keuzes
|
||||
|
||||
---
|
||||
|
||||
## Leerdoelen
|
||||
Na deze les kan de student:
|
||||
- MCP begrijpen en uitleggen
|
||||
- MCP servers configureren in Claude Desktop
|
||||
- Filesystem en GitHub MCP gebruiken
|
||||
- Context windows en token limits begrijpen
|
||||
- Effectieve context strategieën toepassen
|
||||
- Project documentatie schrijven die AI helpt
|
||||
- AI-vriendelijke code structuur implementeren
|
||||
- Context pruning toepassen (.cursorignore, fresh chats)
|
||||
- Code organisatie verbeteren voor betere AI interactie
|
||||
- .cursorignore effectief gebruiken
|
||||
- Context strategieën toepassen
|
||||
- De juiste tool kiezen voor context management
|
||||
|
||||
@@ -1,174 +1,284 @@
|
||||
# Les 13: Mastering Cursor met Claude Opus & Advanced Skills
|
||||
|
||||
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
||||
>
|
||||
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
|
||||
> - Les13-Slide-Overzicht.md
|
||||
> - Les13-Lesplan.md
|
||||
> - Les13-Bijlage-A-Lesopdracht.md
|
||||
> - Les13-Bijlage-B-Huiswerkopdracht.md
|
||||
# Les 13: Mastering Cursor
|
||||
|
||||
---
|
||||
|
||||
## Hoofdstuk
|
||||
**Hoofdstuk 3: Advanced** (Les 8-18)
|
||||
**Hoofdstuk 3: Advanced** (Les 10-18)
|
||||
|
||||
## Beschrijving
|
||||
Geavanceerde technieken met Cursor en high-end models.
|
||||
Verdieping in Cursor's geavanceerde features. Leer model keuze, Composer Mode, @ mentions, en .cursorrules optimaal gebruiken.
|
||||
|
||||
---
|
||||
|
||||
## Te Behandelen
|
||||
|
||||
### Model Deep Dive
|
||||
### Model Keuze
|
||||
|
||||
**Waarom Claude Opus voor Complex:**
|
||||
- Superieure reasoning
|
||||
- 200K context
|
||||
- Beste multi-file orchestration
|
||||
**Wanneer welk model?**
|
||||
|
||||
**Wanneer Welk Model? (Complexity Matrix)**
|
||||
| Model | Gebruik voor | Kosten |
|
||||
|-------|-------------|--------|
|
||||
| **Haiku** | Simpele taken, autocomplete | Goedkoop |
|
||||
| **Sonnet** | Dagelijks werk, de meeste taken | Medium |
|
||||
| **Opus** | Complexe architectuur, multi-file | Duur |
|
||||
|
||||
| Complexiteit | Model |
|
||||
|--------------|-------|
|
||||
| Simpel | Haiku |
|
||||
| Gemiddeld | Sonnet |
|
||||
| Complex | Opus |
|
||||
**Vuistregels:**
|
||||
- Tab completion: Haiku (automatisch)
|
||||
- CMD+K: Sonnet (default)
|
||||
- Composer: Sonnet of Opus
|
||||
- Complexe debugging: Opus
|
||||
|
||||
### Composer Mode Mastery
|
||||
- Multi-file generatie
|
||||
- Agent-like planning
|
||||
- Autonome iteratie
|
||||
---
|
||||
|
||||
### Wanneer Composer vs Chat
|
||||
- Composer: nieuwe features
|
||||
- Chat: begrip/vragen
|
||||
### Composer Mode Diepgaand
|
||||
|
||||
### @ Mentions Deep Dive
|
||||
**Wat is Composer?**
|
||||
Multi-file generatie in één keer. Cursor plant en voert wijzigingen uit over meerdere bestanden.
|
||||
|
||||
**Alle Types:**
|
||||
- @Files
|
||||
- @Folders
|
||||
- @Code
|
||||
- @Docs
|
||||
- @Web
|
||||
**Wanneer Composer gebruiken:**
|
||||
- Nieuwe feature met meerdere components
|
||||
- Refactoring over meerdere files
|
||||
- Boilerplate generatie
|
||||
- Complexe wijzigingen
|
||||
|
||||
**Advanced patterns**
|
||||
**Composer Workflow:**
|
||||
1. CMD+I opent Composer
|
||||
2. Beschrijf je doel duidelijk
|
||||
3. Voeg context toe met @ mentions
|
||||
4. Laat Cursor plannen
|
||||
5. Review het plan
|
||||
6. Accept of reject per file
|
||||
7. Itereer met feedback
|
||||
|
||||
**Voorbeeld prompt:**
|
||||
```
|
||||
Create a user profile page with:
|
||||
- @components/ui/ style components
|
||||
- Profile header with avatar
|
||||
- Edit form with validation
|
||||
- Save to @lib/supabase.ts
|
||||
- Loading and error states
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### @ Mentions Systeem
|
||||
|
||||
**Alle types:**
|
||||
|
||||
| Mention | Wat het doet | Voorbeeld |
|
||||
|---------|--------------|-----------|
|
||||
| `@file.tsx` | Specifieke file | `@Button.tsx` |
|
||||
| `@folder/` | Hele folder | `@components/` |
|
||||
| `@codebase` | Zoek in codebase | `@codebase auth logic` |
|
||||
| `@Docs` | Officiële docs | `@Docs Next.js routing` |
|
||||
| `@Web` | Web zoeken | `@Web Supabase auth setup` |
|
||||
|
||||
**Best practices:**
|
||||
- Wees specifiek met file mentions
|
||||
- Gebruik folder mentions voor context
|
||||
- @Docs voor up-to-date informatie
|
||||
- Combineer mentions voor betere context
|
||||
|
||||
---
|
||||
|
||||
### .cursorrules Advanced
|
||||
|
||||
**Meerdere rules files:**
|
||||
|
||||
```
|
||||
.cursor/
|
||||
└── rules/
|
||||
├── general.mdc # Project-brede regels
|
||||
├── components.mdc # Component conventies
|
||||
├── api.mdc # API route regels
|
||||
└── testing.mdc # Test conventies
|
||||
```
|
||||
|
||||
**Effectieve rules schrijven:**
|
||||
|
||||
```markdown
|
||||
# Component Rules
|
||||
|
||||
## Structure
|
||||
Alle components moeten volgen:
|
||||
1. Props interface bovenaan
|
||||
2. Component function
|
||||
3. Named export onderaan
|
||||
|
||||
## Example
|
||||
\`\`\`tsx
|
||||
interface ButtonProps {
|
||||
label: string
|
||||
onClick: () => void
|
||||
variant?: 'primary' | 'secondary'
|
||||
}
|
||||
|
||||
export function Button({ label, onClick, variant = 'primary' }: ButtonProps) {
|
||||
return (
|
||||
<button onClick={onClick} className={...}>
|
||||
{label}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
\`\`\`
|
||||
|
||||
## DON'Ts
|
||||
- Geen default exports
|
||||
- Geen inline styles
|
||||
- Geen any types
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Codebase Indexing
|
||||
- Hoe Cursor indexeert
|
||||
- Optimaliseren
|
||||
|
||||
### .cursorrules Files
|
||||
- Project-specifieke instructies die persistent zijn
|
||||
- Powerful patterns
|
||||
- Hoe effectieve rules schrijven
|
||||
**Hoe Cursor indexeert:**
|
||||
- Scant alle files in je project
|
||||
- Bouwt semantic understanding
|
||||
- Gebruikt voor autocomplete en context
|
||||
|
||||
### Skills + Composer
|
||||
- Hoe Skills Composer krachtiger maken
|
||||
**Optimaliseren:**
|
||||
1. Goede `.cursorignore` (node_modules, .next, etc.)
|
||||
2. Semantische naming
|
||||
3. Duidelijke file structuur
|
||||
4. Comments waar nodig
|
||||
|
||||
**Re-indexeren:**
|
||||
CMD+Shift+P → "Reindex"
|
||||
|
||||
---
|
||||
|
||||
### Cost Management
|
||||
- Token usage monitoren
|
||||
- Free tier strategies
|
||||
- Wanneer Pro worth it
|
||||
|
||||
**Token gebruik monitoren:**
|
||||
- Cursor toont token count in chat
|
||||
- Check monthly usage in settings
|
||||
|
||||
**Bespaartips:**
|
||||
1. Gebruik Haiku voor simpele taken
|
||||
2. Beperk context (niet hele codebase)
|
||||
3. Wees specifiek in prompts
|
||||
4. Fresh chat voor nieuwe onderwerpen
|
||||
|
||||
**Free tier strategie:**
|
||||
- Focus op Tab completion (onbeperkt)
|
||||
- Gebruik CMD+K spaarzaam
|
||||
- Composer alleen voor grote taken
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
- Cursor
|
||||
- Claude Opus/Sonnet/Haiku
|
||||
- Skills.sh
|
||||
- Claude models (Haiku/Sonnet/Opus)
|
||||
- .cursorrules
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (2 uur)
|
||||
|
||||
### Complexe Feature met Cursor Composer + Claude + Skills
|
||||
### Multi-Step Form Wizard
|
||||
|
||||
**Bouw Multi-Step Form Wizard:**
|
||||
**Bouw met Composer:**
|
||||
|
||||
| Stap | Features |
|
||||
|------|----------|
|
||||
| 1 | Personal info met avatar |
|
||||
| 2 | Company info met autocomplete |
|
||||
| 3 | Preferences (dynamic based on previous) |
|
||||
| 4 | Review & confirm met edit |
|
||||
| 1 | Personal info (naam, email) |
|
||||
| 2 | Preferences (theme, notifications) |
|
||||
| 3 | Review & confirm |
|
||||
| 4 | Success animation |
|
||||
|
||||
**Extra Requirements:**
|
||||
- Progress indicator met validation visualization
|
||||
- Per-step validation
|
||||
**Requirements:**
|
||||
- Progress indicator
|
||||
- Per-stap validatie
|
||||
- localStorage persistence
|
||||
- Success animation met confetti
|
||||
- Error handling throughout
|
||||
- TypeScript strict
|
||||
- Shadcn components
|
||||
- Tailwind styling
|
||||
- Mobile responsive
|
||||
|
||||
### Process
|
||||
1. Install/verify Skills
|
||||
2. Use Composer met Opus/Sonnet - comprehensive prompt
|
||||
3. Let orchestrate
|
||||
4. CMD+K voor refinements
|
||||
5. Chat met @ mentions voor vragen
|
||||
**Process:**
|
||||
|
||||
### Track
|
||||
- Welk model wanneer
|
||||
- Composer iterations
|
||||
- Skills impact
|
||||
- @ mentions patterns
|
||||
- Cost estimate
|
||||
**Deel 1: Composer Setup (30 min)**
|
||||
1. Open Composer (CMD+I)
|
||||
2. Schrijf comprehensive prompt
|
||||
3. Include @ mentions naar relevante files
|
||||
4. Kies Sonnet of Opus
|
||||
|
||||
**Deel 2: Generatie & Review (45 min)**
|
||||
1. Laat Composer genereren
|
||||
2. Review elke file
|
||||
3. Accept wat goed is
|
||||
4. Reject wat niet past
|
||||
|
||||
**Deel 3: Refinement (45 min)**
|
||||
1. Gebruik CMD+K voor kleine fixes
|
||||
2. Chat voor vragen
|
||||
3. Itereer tot het werkt
|
||||
|
||||
### Deliverable
|
||||
- Working wizard
|
||||
- Analyse document
|
||||
- Werkende form wizard
|
||||
- Notities: welk model wanneer, hoeveel iteraties
|
||||
|
||||
---
|
||||
|
||||
## Huiswerk (2 uur)
|
||||
|
||||
### Maak Perfect .cursorrules File
|
||||
### Perfecte .cursorrules
|
||||
|
||||
### Deel 1: Research (30 min)
|
||||
- Bestudeer 3-5 .cursorrules voorbeelden online
|
||||
- Analyseer wat effectief maakt
|
||||
**Deel 1: Research (30 min)**
|
||||
- Zoek 3-5 .cursorrules voorbeelden online
|
||||
- Analyseer wat ze effectief maakt
|
||||
|
||||
### Deel 2: Write Comprehensive (1 uur)
|
||||
**Deel 2: Write Comprehensive Rules (1 uur)**
|
||||
|
||||
Maak definitieve .cursorrules voor JOUW stack.
|
||||
Maak complete .cursorrules voor je eindproject:
|
||||
|
||||
**Include:**
|
||||
- Project context
|
||||
- Code style
|
||||
- TypeScript conventions
|
||||
- React/Next.js patterns
|
||||
- Styling guidelines
|
||||
- Error handling
|
||||
- Accessibility
|
||||
- Testing
|
||||
- Security
|
||||
- Common pitfalls
|
||||
- Skills reference
|
||||
```markdown
|
||||
# [Project Naam]
|
||||
|
||||
### Deel 3: Test & Iterate (30 min)
|
||||
- Nieuw project met .cursorrules
|
||||
- Use Composer
|
||||
- Verifieer Cursor volgt rules
|
||||
- Itereer
|
||||
## Tech Stack
|
||||
[Jouw stack]
|
||||
|
||||
## Code Conventions
|
||||
[Jouw conventies]
|
||||
|
||||
## File Naming
|
||||
[Jouw regels]
|
||||
|
||||
## Component Structure
|
||||
[Jouw patterns]
|
||||
|
||||
## Styling
|
||||
[Tailwind regels]
|
||||
|
||||
## API Routes
|
||||
[Route conventies]
|
||||
|
||||
## Error Handling
|
||||
[Error patterns]
|
||||
|
||||
## DON'Ts
|
||||
[Wat te vermijden]
|
||||
```
|
||||
|
||||
**Deel 3: Test (30 min)**
|
||||
1. Start nieuw component
|
||||
2. Vraag Cursor om het te bouwen
|
||||
3. Check: volgt Cursor je regels?
|
||||
4. Itereer indien nodig
|
||||
|
||||
### Deliverable
|
||||
- .cursorrules file
|
||||
- Uitleg document
|
||||
- Test results
|
||||
- Deel als gist
|
||||
- Complete .cursorrules file
|
||||
- Screenshot van Cursor die regels volgt
|
||||
- Korte analyse: wat werkt goed, wat niet
|
||||
|
||||
---
|
||||
|
||||
## Leerdoelen
|
||||
Na deze les kan de student:
|
||||
- Het juiste Claude model kiezen per complexiteit
|
||||
- Composer mode effectief gebruiken voor complexe features
|
||||
- @ mentions strategisch inzetten
|
||||
- .cursorrules files schrijven voor consistent gedrag
|
||||
- Skills combineren met Composer voor betere output
|
||||
- Token usage monitoren en kosten beheren
|
||||
- Het juiste Claude model kiezen per taak
|
||||
- Composer Mode effectief gebruiken voor multi-file features
|
||||
- @ mentions strategisch inzetten voor context
|
||||
- Geavanceerde .cursorrules files schrijven
|
||||
- Codebase indexing optimaliseren
|
||||
- Token gebruik monitoren en kosten beheren
|
||||
|
||||
@@ -1,158 +1,329 @@
|
||||
# Les 15: AI-Driven Testing & Quality Assurance
|
||||
|
||||
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
||||
>
|
||||
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
|
||||
> - Les15-Slide-Overzicht.md
|
||||
> - Les15-Lesplan.md
|
||||
> - Les15-Bijlage-A-Lesopdracht.md
|
||||
> - Les15-Bijlage-B-Huiswerkopdracht.md
|
||||
# Les 15: Vercel AI SDK - AI Features in je App
|
||||
|
||||
---
|
||||
|
||||
## Hoofdstuk
|
||||
**Hoofdstuk 3: Advanced** (Les 8-18)
|
||||
**Hoofdstuk 3: Advanced** (Les 10-18)
|
||||
|
||||
## Beschrijving
|
||||
AI voor testen en code kwaliteit.
|
||||
Bouw AI-powered features in je apps met de Vercel AI SDK. Leer hoe je chat interfaces, streaming responses en AI-gegenereerde content implementeert.
|
||||
|
||||
---
|
||||
|
||||
## Te Behandelen
|
||||
|
||||
### Waarom Testen Belangrijk
|
||||
- Vang bugs vroeg
|
||||
- Vertrouwen in refactoring
|
||||
- Documentatie van gedrag
|
||||
### Waarom Vercel AI SDK?
|
||||
|
||||
### Types van Tests
|
||||
**Het probleem:** Direct API calls naar OpenAI/Anthropic zijn complex:
|
||||
- Streaming handmatig implementeren
|
||||
- Error handling
|
||||
- State management
|
||||
|
||||
| Type | Scope |
|
||||
|------|-------|
|
||||
| Unit | Individuele functies |
|
||||
| Component | React components |
|
||||
| Integration | Meerdere units samen |
|
||||
| E2E | Volledige user flows |
|
||||
**De oplossing:** Vercel AI SDK
|
||||
- Simpele React hooks
|
||||
- Built-in streaming
|
||||
- Provider-agnostic (OpenAI, Anthropic, etc.)
|
||||
- Edge-ready
|
||||
|
||||
### AI voor Test Generation
|
||||
- Beschrijf wat te testen
|
||||
- AI schrijft comprehensive suites
|
||||
- Dekt edge cases
|
||||
---
|
||||
|
||||
### Testing Tools
|
||||
### Installatie & Setup
|
||||
|
||||
| Tool | Gebruik |
|
||||
|------|---------|
|
||||
| Vitest | Snelle moderne test runner |
|
||||
| React Testing Library | User perspectief |
|
||||
| MSW | API mocking |
|
||||
| Playwright | E2E testing |
|
||||
```bash
|
||||
npm install ai @ai-sdk/openai
|
||||
# of voor Anthropic:
|
||||
npm install ai @ai-sdk/anthropic
|
||||
```
|
||||
|
||||
### Testing Supabase
|
||||
- Mocken database calls
|
||||
- RLS testen
|
||||
- Edge Functions testen
|
||||
**Environment variable:**
|
||||
```bash
|
||||
# .env.local
|
||||
OPENAI_API_KEY=sk-xxxxx
|
||||
```
|
||||
|
||||
### Code Review met AI
|
||||
- Geautomatiseerde reviews
|
||||
- Issues vinden (security, performance, accessibility)
|
||||
- Fixes suggereren
|
||||
---
|
||||
|
||||
### Debugging met AI
|
||||
- Plak error
|
||||
- AI legt uit en suggereert fix
|
||||
### Core Hooks
|
||||
|
||||
### Code Kwaliteit Metrics
|
||||
- Coverage >70%
|
||||
- Mutation testing
|
||||
- Complexity analyse
|
||||
#### useChat - Voor Conversaties
|
||||
|
||||
### Cursor's AI voor Automated Test Generation
|
||||
```tsx
|
||||
'use client'
|
||||
import { useChat } from 'ai/react'
|
||||
|
||||
### Integration met Workflow
|
||||
- Tests on git push
|
||||
- CI/CD
|
||||
export function ChatComponent() {
|
||||
const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat()
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-screen">
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
{messages.map(m => (
|
||||
<div key={m.id} className={m.role === 'user' ? 'text-right' : 'text-left'}>
|
||||
<span className="inline-block p-2 rounded-lg bg-gray-100">
|
||||
{m.content}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="p-4 border-t">
|
||||
<input
|
||||
value={input}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Type a message..."
|
||||
className="w-full p-2 border rounded"
|
||||
/>
|
||||
<button type="submit" disabled={isLoading}>
|
||||
{isLoading ? 'Sending...' : 'Send'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
#### useCompletion - Voor Single Completions
|
||||
|
||||
```tsx
|
||||
import { useCompletion } from 'ai/react'
|
||||
|
||||
export function SummaryComponent() {
|
||||
const { completion, input, handleInputChange, handleSubmit, isLoading } = useCompletion()
|
||||
|
||||
return (
|
||||
<div>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<textarea
|
||||
value={input}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Paste text to summarize..."
|
||||
/>
|
||||
<button type="submit">Summarize</button>
|
||||
</form>
|
||||
{completion && <p>{completion}</p>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### API Routes
|
||||
|
||||
**app/api/chat/route.ts:**
|
||||
```typescript
|
||||
import { openai } from '@ai-sdk/openai'
|
||||
import { streamText } from 'ai'
|
||||
|
||||
export async function POST(req: Request) {
|
||||
const { messages } = await req.json()
|
||||
|
||||
const result = streamText({
|
||||
model: openai('gpt-4o-mini'),
|
||||
system: 'You are a helpful cooking assistant. Suggest recipes based on ingredients.',
|
||||
messages,
|
||||
})
|
||||
|
||||
return result.toDataStreamResponse()
|
||||
}
|
||||
```
|
||||
|
||||
**Met custom system prompt:**
|
||||
```typescript
|
||||
const result = streamText({
|
||||
model: openai('gpt-4o-mini'),
|
||||
system: `You are a recipe assistant for the AI Recipe Generator app.
|
||||
|
||||
When the user provides ingredients:
|
||||
1. Suggest 2-3 recipes they could make
|
||||
2. List required additional ingredients (if any)
|
||||
3. Provide brief cooking instructions
|
||||
|
||||
Be concise and practical.`,
|
||||
messages,
|
||||
})
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Streaming Responses
|
||||
|
||||
**Waarom streaming?**
|
||||
- Betere UX (user ziet direct resultaat)
|
||||
- Snellere perceived performance
|
||||
- Geen wachten op complete response
|
||||
|
||||
**Hoe het werkt:**
|
||||
1. Server stuurt tokens één voor één
|
||||
2. Client rendert elke token direct
|
||||
3. User ziet "typing" effect
|
||||
|
||||
**Loading indicator:**
|
||||
```tsx
|
||||
{isLoading && (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="animate-pulse">●</div>
|
||||
<span>AI is thinking...</span>
|
||||
</div>
|
||||
)}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Integratie met Supabase
|
||||
|
||||
**Conversations opslaan:**
|
||||
|
||||
```typescript
|
||||
// Maak tabel in Supabase:
|
||||
// conversations: id, user_id, created_at
|
||||
// messages: id, conversation_id, role, content, created_at
|
||||
|
||||
// Na elke message:
|
||||
async function saveMessage(conversationId: string, role: string, content: string) {
|
||||
await supabase.from('messages').insert({
|
||||
conversation_id: conversationId,
|
||||
role,
|
||||
content
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
**In je component:**
|
||||
```tsx
|
||||
const { messages, input, handleSubmit } = useChat({
|
||||
onFinish: async (message) => {
|
||||
await saveMessage(conversationId, message.role, message.content)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Error Handling
|
||||
|
||||
```tsx
|
||||
const { messages, error, reload } = useChat()
|
||||
|
||||
{error && (
|
||||
<div className="p-4 bg-red-100 text-red-700 rounded">
|
||||
<p>Something went wrong. Please try again.</p>
|
||||
<button onClick={reload}>Retry</button>
|
||||
</div>
|
||||
)}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Cost Management
|
||||
|
||||
**Model keuze:**
|
||||
| Model | Kosten | Gebruik voor |
|
||||
|-------|--------|--------------|
|
||||
| gpt-4o-mini | Goedkoop | Meeste taken |
|
||||
| gpt-4o | Duur | Complexe reasoning |
|
||||
| claude-3-haiku | Goedkoop | Simpele taken |
|
||||
| claude-3-sonnet | Medium | Balans |
|
||||
|
||||
**Bespaartips:**
|
||||
1. Gebruik gpt-4o-mini als default
|
||||
2. Korte system prompts
|
||||
3. Beperk conversation history
|
||||
4. Caching waar mogelijk
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
- Vercel AI SDK (`ai` package)
|
||||
- Next.js API Routes
|
||||
- OpenAI API / Anthropic API
|
||||
- Cursor
|
||||
- Vitest
|
||||
- React Testing Library
|
||||
- MSW
|
||||
- Playwright
|
||||
- Supabase
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (2 uur)
|
||||
|
||||
### Voeg Comprehensive Tests Toe met Cursor + AI
|
||||
### Bouw een AI Chat Component
|
||||
|
||||
### Setup (30 min)
|
||||
- Install dependencies (Vitest, RTL)
|
||||
- Configureer Vitest
|
||||
- Maak test utils
|
||||
- Verifieer met smoke test
|
||||
**Deel 1: Setup (20 min)**
|
||||
1. `npm install ai @ai-sdk/openai`
|
||||
2. Voeg `OPENAI_API_KEY` toe aan `.env.local`
|
||||
3. Maak `app/api/chat/route.ts`
|
||||
|
||||
### Schrijf Tests met Cursor (1 uur)
|
||||
**Deel 2: Basic Chat (40 min)**
|
||||
1. Maak `components/Chat.tsx`
|
||||
2. Implementeer `useChat` hook
|
||||
3. Bouw chat UI met Tailwind
|
||||
4. Test streaming werkt
|
||||
|
||||
| Type | Aantal | Tijd |
|
||||
|------|--------|------|
|
||||
| Unit Tests | 3-4 utility functies | 20 min |
|
||||
| Component Tests | 3-4 components | 30 min |
|
||||
| Integration Tests | 1-2 flows | 10 min |
|
||||
**Deel 3: System Prompt (30 min)**
|
||||
1. Schrijf system prompt voor je eindproject:
|
||||
- Recipe Generator: cooking assistant
|
||||
- Budget Buddy: financial advisor
|
||||
- Travel Planner: travel expert
|
||||
2. Test met relevante vragen
|
||||
|
||||
### Run & Fix (30 min)
|
||||
- Run `npm test`
|
||||
- AI helpt failures fixen
|
||||
- Bereik >70% coverage
|
||||
**Deel 4: Supabase Integratie (30 min)**
|
||||
1. Maak `messages` tabel
|
||||
2. Sla berichten op met `onFinish`
|
||||
3. Laad history bij page load
|
||||
|
||||
### Track
|
||||
- Test schrijf snelheid met AI?
|
||||
### Deliverable
|
||||
- Werkende AI chat met streaming
|
||||
- Custom system prompt
|
||||
- Messages opgeslagen in Supabase
|
||||
|
||||
---
|
||||
|
||||
## Huiswerk (2 uur)
|
||||
|
||||
### Implementeer AI Code Review Workflow
|
||||
### Bouw AI Feature voor Eindproject
|
||||
|
||||
### Deel 1: Maak Agent (1 uur)
|
||||
**Deel 1: Core AI Feature (1 uur)**
|
||||
|
||||
Custom GPT/Claude Project voor code review.
|
||||
Implementeer de AI chat die past bij je eindproject:
|
||||
|
||||
**Instructions moeten checken op:**
|
||||
- TypeScript safety
|
||||
| Project | AI Feature |
|
||||
|---------|-----------|
|
||||
| Recipe Generator | "Wat kan ik maken met kip en rijst?" |
|
||||
| Budget Buddy | "Analyseer mijn uitgaven deze maand" |
|
||||
| Travel Planner | "Plan een weekend Barcelona" |
|
||||
|
||||
- Custom system prompt
|
||||
- Context uit je database meegeven
|
||||
|
||||
**Deel 2: UX Polish (30 min)**
|
||||
|
||||
Voeg toe:
|
||||
- Streaming indicator
|
||||
- Suggested prompts / quick actions
|
||||
- Copy response button
|
||||
- Clear chat button
|
||||
- Error handling
|
||||
- Accessibility
|
||||
- Performance
|
||||
- Security
|
||||
- Best practices
|
||||
|
||||
**Upload "goede" code als knowledge base**
|
||||
**Deel 3: Documentatie (30 min)**
|
||||
|
||||
### Deel 2: Review 3 Components (1 uur)
|
||||
- Review 3 components
|
||||
- Documenteer ALLE issues
|
||||
- Categoriseer severity
|
||||
- Fix in Cursor
|
||||
- Re-review
|
||||
|
||||
### Deel 3: Enhance Template
|
||||
- Add testing setup aan Starter Template
|
||||
- Add Code Review agent
|
||||
Maak `docs/AI-FEATURE.md`:
|
||||
- Welke AI feature heb je gebouwd?
|
||||
- Wat doet de system prompt?
|
||||
- Hoe integreert het met Supabase?
|
||||
- Welke model keuzes heb je gemaakt?
|
||||
|
||||
### Deliverable
|
||||
- Agent (link)
|
||||
- Review rapport (issues/fixes/before-after)
|
||||
- Reflectie over AI-assisted QA
|
||||
- AI feature in eindproject
|
||||
- Deployed preview
|
||||
- AI-FEATURE.md documentatie
|
||||
|
||||
---
|
||||
|
||||
## Leerdoelen
|
||||
Na deze les kan de student:
|
||||
- Verschillende test types begrijpen en implementeren
|
||||
- AI gebruiken om tests te genereren
|
||||
- Testing tools configureren (Vitest, RTL, MSW, Playwright)
|
||||
- Code review agents bouwen
|
||||
- AI gebruiken voor debugging
|
||||
- Code kwaliteit meten met coverage en metrics
|
||||
- Vercel AI SDK installeren en configureren
|
||||
- `useChat` en `useCompletion` hooks gebruiken
|
||||
- Streaming responses implementeren
|
||||
- API routes opzetten voor AI providers
|
||||
- Custom system prompts schrijven
|
||||
- Chat history opslaan in Supabase
|
||||
- Error handling en loading states implementeren
|
||||
- Kostenbewust omgaan met AI APIs
|
||||
|
||||
@@ -1,12 +1,4 @@
|
||||
# Les 16: Vercel AI SDK - AI Features in je App
|
||||
|
||||
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
||||
>
|
||||
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
|
||||
> - Les16-Slide-Overzicht.md
|
||||
> - Les16-Lesplan.md
|
||||
> - Les16-Bijlage-A-Lesopdracht.md
|
||||
> - Les16-Bijlage-B-Huiswerkopdracht.md
|
||||
# Les 16: Deployment & Production
|
||||
|
||||
---
|
||||
|
||||
@@ -14,180 +6,222 @@
|
||||
**Hoofdstuk 3: Advanced** (Les 10-18)
|
||||
|
||||
## Beschrijving
|
||||
Bouw AI-powered features in je apps met de Vercel AI SDK. Leer hoe je chat interfaces, streaming responses en AI-gegenereerde content implementeert.
|
||||
Deploy je eindproject naar productie. Leer environment variables, Vercel deployment, en basis performance optimalisatie.
|
||||
|
||||
---
|
||||
|
||||
## Te Behandelen
|
||||
|
||||
### Waarom Vercel AI SDK?
|
||||
- Abstractie over raw API calls
|
||||
- Built-in streaming support
|
||||
- React hooks voor eenvoudige integratie
|
||||
- Provider-agnostic (OpenAI, Anthropic, etc.)
|
||||
- Edge-ready
|
||||
### Vercel Deployment Flow
|
||||
|
||||
### Installatie & Setup
|
||||
```bash
|
||||
npm install ai openai
|
||||
# of voor Anthropic:
|
||||
npm install ai @anthropic-ai/sdk
|
||||
```
|
||||
**Hoe Vercel werkt:**
|
||||
1. Connect GitHub repository
|
||||
2. Push naar main → automatische deploy
|
||||
3. Push naar andere branch → preview URL
|
||||
4. Alles automatisch (build, SSL, CDN)
|
||||
|
||||
### Core Hooks
|
||||
**Waarom Vercel voor Next.js:**
|
||||
- Gemaakt door dezelfde makers
|
||||
- Zero-config deployment
|
||||
- Gratis tier ruim voldoende
|
||||
- Automatische HTTPS
|
||||
- Global CDN
|
||||
|
||||
#### `useChat` - Voor Conversaties
|
||||
```tsx
|
||||
import { useChat } from 'ai/react';
|
||||
---
|
||||
|
||||
export function ChatComponent() {
|
||||
const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat();
|
||||
### Environment Variables in Vercel
|
||||
|
||||
return (
|
||||
<div>
|
||||
{messages.map(m => (
|
||||
<div key={m.id}>{m.role}: {m.content}</div>
|
||||
))}
|
||||
<form onSubmit={handleSubmit}>
|
||||
<input value={input} onChange={handleInputChange} />
|
||||
<button type="submit" disabled={isLoading}>Send</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
**Lokaal (.env.local) vs Productie (Vercel Dashboard):**
|
||||
|
||||
#### `useCompletion` - Voor Single Completions
|
||||
- Tekst generatie
|
||||
- Samenvattingen
|
||||
- One-shot responses
|
||||
| Waar | Bestand/Locatie | Voorbeeld |
|
||||
|------|-----------------|-----------|
|
||||
| Lokaal | `.env.local` | Development |
|
||||
| Vercel | Dashboard → Settings → Env Vars | Production |
|
||||
|
||||
### API Routes Setup
|
||||
**Stap voor stap:**
|
||||
1. Ga naar je Vercel project
|
||||
2. Settings → Environment Variables
|
||||
3. Voeg toe:
|
||||
- `NEXT_PUBLIC_SUPABASE_URL`
|
||||
- `NEXT_PUBLIC_SUPABASE_ANON_KEY`
|
||||
- `OPENAI_API_KEY`
|
||||
4. Selecteer environment (Production, Preview, Development)
|
||||
5. Save & Redeploy
|
||||
|
||||
```ts
|
||||
// app/api/chat/route.ts
|
||||
import { openai } from '@ai-sdk/openai';
|
||||
import { streamText } from 'ai';
|
||||
**Let op:**
|
||||
- `NEXT_PUBLIC_` prefix = zichtbaar in browser
|
||||
- Zonder prefix = alleen server-side (API routes)
|
||||
|
||||
export async function POST(req: Request) {
|
||||
const { messages } = await req.json();
|
||||
---
|
||||
|
||||
const result = streamText({
|
||||
model: openai('gpt-4o'),
|
||||
messages,
|
||||
});
|
||||
### Supabase Productie Setup
|
||||
|
||||
return result.toDataStreamResponse();
|
||||
}
|
||||
```
|
||||
**Redirect URLs configureren:**
|
||||
1. Ga naar Supabase → Authentication → URL Configuration
|
||||
2. Voeg toe bij "Redirect URLs":
|
||||
- `https://jouw-app.vercel.app/**`
|
||||
- `https://jouw-app.vercel.app`
|
||||
|
||||
### Streaming Responses
|
||||
- Waarom streaming: betere UX, snellere perceived performance
|
||||
- Hoe het werkt: Server-Sent Events (SSE)
|
||||
- Token-by-token rendering
|
||||
- Loading states tijdens streaming
|
||||
**Waarom:**
|
||||
- Auth redirects werken alleen naar toegestane URLs
|
||||
- Wildcards (`**`) voor sub-routes
|
||||
|
||||
### Integratie met Supabase
|
||||
- Chat history opslaan in database
|
||||
- User-specific conversations
|
||||
- Message threading
|
||||
---
|
||||
|
||||
### Error Handling
|
||||
- Network errors
|
||||
- Rate limiting
|
||||
- Token limits
|
||||
- Graceful degradation
|
||||
### Deployment Checklist
|
||||
|
||||
### Cost Management
|
||||
- Token counting
|
||||
- Model selection (gpt-4o-mini vs gpt-4o)
|
||||
- Caching strategies
|
||||
- Usage monitoring
|
||||
**Voor deployment:**
|
||||
- [ ] `npm run build` werkt lokaal
|
||||
- [ ] Geen TypeScript errors
|
||||
- [ ] Environment variables gedocumenteerd in `.env.example`
|
||||
- [ ] `.gitignore` bevat `.env*.local`
|
||||
- [ ] README up-to-date
|
||||
|
||||
**Na deployment:**
|
||||
- [ ] App laadt correct
|
||||
- [ ] Auth werkt (login/logout)
|
||||
- [ ] Data wordt opgehaald uit Supabase
|
||||
- [ ] AI features werken (indien van toepassing)
|
||||
- [ ] Geen console errors
|
||||
|
||||
---
|
||||
|
||||
### Performance Basics
|
||||
|
||||
**Lighthouse Audit:**
|
||||
1. Open Chrome DevTools
|
||||
2. Tab "Lighthouse"
|
||||
3. Klik "Analyze page load"
|
||||
4. Aim for score >80 in elke categorie
|
||||
|
||||
**Quick wins:**
|
||||
- Gebruik Next.js `Image` component (niet `<img>`)
|
||||
- Lazy load components die niet direct nodig zijn
|
||||
- Verwijder ongebruikte dependencies
|
||||
|
||||
---
|
||||
|
||||
### Security Checklist
|
||||
|
||||
**Belangrijk voor productie:**
|
||||
- [ ] API keys nooit in client-side code
|
||||
- [ ] Supabase RLS enabled (Row Level Security)
|
||||
- [ ] Error messages geven geen gevoelige info
|
||||
- [ ] HTTPS (automatisch via Vercel)
|
||||
|
||||
---
|
||||
|
||||
### Monitoring Basics
|
||||
|
||||
**Vercel Dashboard toont:**
|
||||
- Deployments history
|
||||
- Function logs
|
||||
- Analytics (optioneel)
|
||||
|
||||
**Supabase Dashboard toont:**
|
||||
- Database usage
|
||||
- Auth logs
|
||||
- API requests
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
- Vercel AI SDK (`ai` package)
|
||||
- Next.js API Routes
|
||||
- OpenAI API / Anthropic API
|
||||
- Cursor
|
||||
- Supabase (voor chat history)
|
||||
- Vercel
|
||||
- GitHub
|
||||
- Supabase
|
||||
- Chrome DevTools (Lighthouse)
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (2 uur)
|
||||
|
||||
### Bouw een AI Chat Component
|
||||
### Deploy Je Eindproject
|
||||
|
||||
**Stap 1: Setup (20 min)**
|
||||
- Installeer `ai` en `openai` packages
|
||||
- Configureer environment variables
|
||||
- Maak API route `/api/chat`
|
||||
**Deel 1: Pre-Deployment Check (30 min)**
|
||||
|
||||
**Stap 2: Basic Chat (40 min)**
|
||||
- Implementeer `useChat` hook
|
||||
- Bouw chat UI met Tailwind
|
||||
- Test streaming responses
|
||||
Run door de checklist:
|
||||
1. `npm run build` - fix eventuele errors
|
||||
2. Check TypeScript errors
|
||||
3. Maak/update `.env.example`
|
||||
4. Update README met project info
|
||||
|
||||
**Stap 3: Supabase Integratie (40 min)**
|
||||
- Maak `conversations` en `messages` tabellen
|
||||
- Sla berichten op na elke response
|
||||
- Laad conversation history bij page load
|
||||
**Deel 2: Vercel Deployment (30 min)**
|
||||
|
||||
**Stap 4: Polish (20 min)**
|
||||
- Loading indicators
|
||||
- Error states
|
||||
- Scroll to bottom
|
||||
- Clear conversation button
|
||||
1. Ga naar [vercel.com](https://vercel.com)
|
||||
2. "Add New Project"
|
||||
3. Import je GitHub repository
|
||||
4. Voeg environment variables toe
|
||||
5. Deploy!
|
||||
|
||||
**Deel 3: Supabase Config (20 min)**
|
||||
|
||||
1. Voeg Vercel URL toe aan Supabase redirect URLs
|
||||
2. Test auth in productie
|
||||
3. Verifieer data access
|
||||
|
||||
**Deel 4: Testing & Lighthouse (40 min)**
|
||||
|
||||
1. Test alle features in productie:
|
||||
- Login/logout
|
||||
- CRUD operaties
|
||||
- AI chat (indien aanwezig)
|
||||
2. Run Lighthouse audit
|
||||
3. Fix issues tot score >80
|
||||
4. Screenshot resultaat
|
||||
|
||||
### Deliverable
|
||||
- Werkende AI chat met streaming
|
||||
- Conversation history in Supabase
|
||||
- Clean UI met goede UX
|
||||
- Werkende productie URL
|
||||
- Lighthouse screenshot (score >80)
|
||||
- Test rapport: wat werkt, wat niet
|
||||
|
||||
---
|
||||
|
||||
## Huiswerk (2 uur)
|
||||
|
||||
### Bouw AI Feature voor Eindproject
|
||||
### Polish & Documentatie
|
||||
|
||||
Kies 1 passend bij je eindproject:
|
||||
**Deel 1: Bug Fixes (1 uur)**
|
||||
|
||||
| Eindproject | AI Feature |
|
||||
|-------------|------------|
|
||||
| AI Recipe Generator | Chat: "Wat kan ik maken met kip en rijst?" |
|
||||
| Smart Budget Buddy | Chat: "Analyseer mijn uitgaven deze maand" |
|
||||
| Travel Planner AI | Chat: "Plan een weekend Barcelona" |
|
||||
1. Test je app grondig in productie
|
||||
2. Fix gevonden bugs
|
||||
3. Test edge cases:
|
||||
- Lege states
|
||||
- Error states
|
||||
- Loading states
|
||||
4. Redeploy
|
||||
|
||||
### Deel 1: Implementatie (1 uur)
|
||||
- Pas `useChat` aan voor jouw use case
|
||||
- Custom system prompt voor context
|
||||
- Relevante data uit Supabase meegeven als context
|
||||
**Deel 2: Performance Optimization (30 min)**
|
||||
|
||||
### Deel 2: UX Polish (30 min)
|
||||
- Streaming met typing indicator
|
||||
- Suggested prompts / quick actions
|
||||
- Copy response button
|
||||
- Regenerate button
|
||||
1. Run Lighthouse opnieuw
|
||||
2. Fix top 3 performance issues
|
||||
3. Document wat je hebt verbeterd
|
||||
|
||||
### Deel 3: Documentatie (30 min)
|
||||
- Documenteer je AI feature in `docs/AI-FEATURE.md`
|
||||
- Beschrijf system prompt keuzes
|
||||
- Leg integratie met Supabase uit
|
||||
**Deel 3: Documentatie Afronden (30 min)**
|
||||
|
||||
Update je `README.md`:
|
||||
- Werkende productie URL
|
||||
- Features lijst
|
||||
- Tech stack
|
||||
- Setup instructies
|
||||
- Screenshots
|
||||
|
||||
Update `docs/`:
|
||||
- PROMPT-LOG.md (minimaal 10 entries)
|
||||
- AI-DECISIONS.md (minimaal 5 entries)
|
||||
|
||||
### Deliverable
|
||||
- AI feature geïntegreerd in eindproject
|
||||
- Documentatie
|
||||
- Deployed preview
|
||||
- Geoptimaliseerde productie app
|
||||
- Complete documentatie
|
||||
- Lighthouse score >85
|
||||
|
||||
---
|
||||
|
||||
## Leerdoelen
|
||||
Na deze les kan de student:
|
||||
- Vercel AI SDK installeren en configureren
|
||||
- `useChat` en `useCompletion` hooks gebruiken
|
||||
- Streaming responses implementeren
|
||||
- API routes opzetten voor AI providers
|
||||
- Chat history opslaan in Supabase
|
||||
- Error handling en loading states implementeren
|
||||
- Kosten bewust omgaan met AI APIs
|
||||
- Een Next.js app deployen naar Vercel
|
||||
- Environment variables configureren in Vercel
|
||||
- Supabase redirect URLs instellen voor productie
|
||||
- Een deployment checklist doorlopen
|
||||
- Lighthouse gebruiken voor performance audit
|
||||
- Basis security checks uitvoeren
|
||||
- Productie monitoring begrijpen
|
||||
|
||||
@@ -1,198 +1,187 @@
|
||||
# Les 17: Advanced Deployment & Production (Vercel)
|
||||
|
||||
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
||||
>
|
||||
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
|
||||
> - Les17-Slide-Overzicht.md
|
||||
> - Les17-Lesplan.md
|
||||
> - Les17-Bijlage-A-Lesopdracht.md
|
||||
> - Les17-Bijlage-B-Huiswerkopdracht.md
|
||||
# Les 17: Eindopdracht Kickoff
|
||||
|
||||
---
|
||||
|
||||
## Hoofdstuk
|
||||
**Hoofdstuk 3: Advanced** (Les 8-18)
|
||||
**Hoofdstuk 3: Advanced** (Les 10-18)
|
||||
|
||||
## Beschrijving
|
||||
Production-ready deployment.
|
||||
Bespreking van de eindopdracht requirements, planning maken, en laatste vragen beantwoorden voordat studenten zelfstandig verder werken.
|
||||
|
||||
---
|
||||
|
||||
## Te Behandelen
|
||||
|
||||
### Vercel Deployment Deep Dive
|
||||
### Eindopdracht Overview
|
||||
|
||||
**Hoe werkt Vercel:**
|
||||
- Edge network
|
||||
- Serverless
|
||||
- Automatic builds
|
||||
**Wat is de eindopdracht?**
|
||||
- Bouw een AI-powered web applicatie
|
||||
- Gebruik alle tools die je hebt geleerd
|
||||
- Vrije keuze in implementatie
|
||||
|
||||
**Git Integratie:**
|
||||
- Push main → deploy
|
||||
- Branches → preview URLs
|
||||
- Preview deployments
|
||||
- Instant rollbacks
|
||||
- Environments
|
||||
**Drie voorbeeldprojecten:**
|
||||
1. **AI Recipe Generator** - Recepten op basis van ingrediënten
|
||||
2. **Smart Budget Buddy** - Financieel overzicht met AI insights
|
||||
3. **Travel Planner AI** - Reisplanning met AI suggesties
|
||||
|
||||
### Environment Variables
|
||||
- Verschillende vars per environment
|
||||
- Secrets handlen
|
||||
- Accessing (process.env, NEXT_PUBLIC_)
|
||||
- Best practices
|
||||
**Of:** Eigen idee (met goedkeuring docent)
|
||||
|
||||
### Custom Domains
|
||||
- Domein toevoegen
|
||||
- DNS config
|
||||
- HTTPS automatic
|
||||
- Multiple domains
|
||||
---
|
||||
|
||||
### Performance Optimization
|
||||
### Requirements Doorlopen
|
||||
|
||||
| Categorie | Technieken |
|
||||
|-----------|------------|
|
||||
| Images | Next.js Image, lazy loading, responsive, WebP/AVIF |
|
||||
| Fonts | next/font, font-display, reducing files |
|
||||
| Code | Dynamic imports, lazy loading, route-based splitting |
|
||||
| General | Bundle analyse, caching strategies, connection pooling |
|
||||
**Technische vereisten:**
|
||||
- Next.js 14 met App Router
|
||||
- TypeScript
|
||||
- Tailwind CSS
|
||||
- Supabase (database + auth)
|
||||
- Vercel AI SDK (chat of completion feature)
|
||||
- Deployed op Vercel
|
||||
|
||||
### Vercel Analytics
|
||||
**Documentatie vereisten:**
|
||||
- `docs/PROJECT-BRIEF.md` - Project beschrijving
|
||||
- `docs/PROMPT-LOG.md` - Minimaal 10 prompts
|
||||
- `docs/AI-DECISIONS.md` - Minimaal 5 beslissingen
|
||||
- Complete README met setup instructies
|
||||
|
||||
**Web Vitals:**
|
||||
- CLS (Cumulative Layout Shift)
|
||||
- FID (First Input Delay)
|
||||
- LCP (Largest Contentful Paint)
|
||||
- FCP (First Contentful Paint)
|
||||
- TTFB (Time to First Byte)
|
||||
---
|
||||
|
||||
**Features:**
|
||||
- Real user monitoring
|
||||
- Speed insights
|
||||
- Audience insights
|
||||
### Beoordelingscriteria
|
||||
|
||||
### Error Tracking
|
||||
- Edge Function logs
|
||||
- Error boundaries
|
||||
- Logging services (Sentry, LogRocket)
|
||||
| Criterium | Weging |
|
||||
|-----------|--------|
|
||||
| Technische uitvoering | 40% |
|
||||
| AI integratie | 25% |
|
||||
| Documentatie (PROMPT-LOG, AI-DECISIONS) | 20% |
|
||||
| Code kwaliteit & organisatie | 15% |
|
||||
|
||||
### CI/CD
|
||||
- GitHub Actions
|
||||
- Automated testing
|
||||
- Type checking
|
||||
- Linting
|
||||
- E2E on previews
|
||||
**Minimale vereisten:**
|
||||
- App werkt in productie
|
||||
- Auth + CRUD werkt
|
||||
- AI feature werkt
|
||||
- Documentatie compleet
|
||||
|
||||
### Supabase Production
|
||||
- Connection pooling
|
||||
- Backups
|
||||
- Monitoring
|
||||
- Rate limiting
|
||||
---
|
||||
|
||||
### Security Checklist
|
||||
- Env vars secure
|
||||
- No secrets exposed
|
||||
- HTTPS
|
||||
- CSP headers
|
||||
- Rate limiting
|
||||
- Validation
|
||||
- Dependency updates
|
||||
### Timeline
|
||||
|
||||
**Nu tot deadline:**
|
||||
- Les 17: Kickoff, planning maken
|
||||
- Les 18: Werksessie met docent support
|
||||
- Daarna: Zelfstandig afronden
|
||||
|
||||
**Tips:**
|
||||
- Focus eerst op werkende MVP
|
||||
- Dan pas polish
|
||||
- Documenteer TIJDENS het bouwen
|
||||
|
||||
---
|
||||
|
||||
### Veel Voorkomende Vragen
|
||||
|
||||
**Q: Mag ik een ander project doen dan de voorbeelden?**
|
||||
A: Ja, met goedkeuring. Bespreek je idee met de docent.
|
||||
|
||||
**Q: Moet ik alle AI tools gebruiken?**
|
||||
A: Je moet minimaal Cursor en Vercel AI SDK gebruiken. De rest is optioneel.
|
||||
|
||||
**Q: Wat als ik vastloop?**
|
||||
A: Documenteer het probleem in PROMPT-LOG, vraag hulp in Les 18.
|
||||
|
||||
**Q: Hoeveel prompts moet ik loggen?**
|
||||
A: Minimaal 10, maar meer is beter. Focus op prompts waarvan je iets leerde.
|
||||
|
||||
---
|
||||
|
||||
### Planning Maken
|
||||
|
||||
**Wat moet je nog doen?**
|
||||
|
||||
Maak checklist:
|
||||
- [ ] Core features compleet
|
||||
- [ ] AI feature werkt
|
||||
- [ ] Auth werkt
|
||||
- [ ] Design afgewerkt
|
||||
- [ ] Edge cases gehandled
|
||||
- [ ] Documentatie compleet
|
||||
- [ ] Deployed en getest
|
||||
|
||||
**Prioriteer:**
|
||||
1. Wat werkt nog niet?
|
||||
2. Wat is kritiek vs nice-to-have?
|
||||
3. Hoeveel tijd heb je?
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
- Vercel
|
||||
- GitHub Actions
|
||||
- Sentry/LogRocket
|
||||
- Lighthouse
|
||||
- Cursor
|
||||
- Alle geleerde tools
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (2 uur)
|
||||
|
||||
### Production-Ready Deployment van Beste Project
|
||||
### Plan Je Afronding
|
||||
|
||||
**(Todo app aanbevolen)**
|
||||
**Deel 1: Status Check (30 min)**
|
||||
|
||||
### Phase 1: Pre-Deployment Checklist (30 min)
|
||||
Beantwoord voor jezelf:
|
||||
1. Welke features werken al?
|
||||
2. Welke features missen nog?
|
||||
3. Wat is je grootste blocker?
|
||||
4. Hoe staat je documentatie ervoor?
|
||||
|
||||
Verify:
|
||||
- Env vars
|
||||
- Error boundaries
|
||||
- Loading states
|
||||
- 404 page
|
||||
- SEO basics
|
||||
- Favicon
|
||||
- TypeScript errors
|
||||
Maak een eerlijke inschatting.
|
||||
|
||||
### Phase 2: Performance Optimization (45 min)
|
||||
**Deel 2: Planning Maken (30 min)**
|
||||
|
||||
- Run Lighthouse (aim 90+)
|
||||
- Fix met Cursor:
|
||||
- Optimize images
|
||||
- Reduce bundle
|
||||
- Optimize fonts
|
||||
- Improve Core Web Vitals
|
||||
- Re-run
|
||||
- Document
|
||||
Maak gedetailleerde planning:
|
||||
- Wat doe je vandaag?
|
||||
- Wat doe je in Les 18?
|
||||
- Wat doe je thuis?
|
||||
- Wanneer ben je klaar?
|
||||
|
||||
### Phase 3: Deploy & Monitor (45 min)
|
||||
**Deel 3: Begin Met Hoogste Prioriteit (1 uur)**
|
||||
|
||||
- Deploy naar Vercel
|
||||
- Custom domain (optional)
|
||||
- Enable Analytics
|
||||
- Setup error monitoring
|
||||
- Maak monitoring dashboard
|
||||
- Test grondig
|
||||
Start met de belangrijkste ontbrekende onderdelen:
|
||||
- Werkt je AI feature? → Prioriteit 1
|
||||
- Werkt auth? → Prioriteit 2
|
||||
- Is het deployed? → Prioriteit 3
|
||||
|
||||
Vraag hulp als je vastloopt!
|
||||
|
||||
### Deliverable
|
||||
- Production URL
|
||||
- Lighthouse screenshot
|
||||
- Dashboard access
|
||||
- Statusoverzicht: wat werkt, wat niet
|
||||
- Planning voor afronden
|
||||
- Voortgang op hoogste prioriteit
|
||||
|
||||
---
|
||||
|
||||
## Huiswerk (2 uur)
|
||||
## Huiswerk
|
||||
|
||||
### Maak Production Deployment Playbook
|
||||
### Werk aan je Eindopdracht
|
||||
|
||||
### Deel 1: Comprehensive Checklist (1 uur)
|
||||
**Dit is geen nieuw huiswerk - gebruik deze tijd om je eindopdracht af te ronden.**
|
||||
|
||||
Schrijf checklists voor:
|
||||
- Pre-Deployment
|
||||
- Environment Setup
|
||||
- Performance Requirements
|
||||
- Monitoring Setup
|
||||
- Post-Deployment
|
||||
- Rollback Plan
|
||||
Focus op:
|
||||
1. Features compleet maken
|
||||
2. Bugs fixen
|
||||
3. Documentatie bijwerken
|
||||
4. Testen in productie
|
||||
|
||||
### Deel 2: GitHub Actions (optional, 30 min)
|
||||
- Setup automated checks op PRs
|
||||
|
||||
### Deel 3: Monitoring Dashboard (30 min)
|
||||
|
||||
Bouw admin dashboard met:
|
||||
- Deployment status
|
||||
- Errors
|
||||
- Performance metrics
|
||||
- Database usage
|
||||
- API usage
|
||||
- Custom metrics
|
||||
- Auto-refresh 5min
|
||||
**Bereid vragen voor:**
|
||||
Schrijf op waar je hulp bij nodig hebt voor Les 18 (werksessie).
|
||||
|
||||
### Deliverable
|
||||
- Playbook
|
||||
- GitHub Actions
|
||||
- Dashboard
|
||||
- Reflectie (200 woorden)
|
||||
- Voortgang op eindopdracht
|
||||
- Lijst met vragen voor Les 18
|
||||
|
||||
---
|
||||
|
||||
## Leerdoelen
|
||||
Na deze les kan de student:
|
||||
- Vercel deployment configureren met Git integration
|
||||
- Environment variables veilig beheren
|
||||
- Custom domains configureren
|
||||
- Performance optimaliseren voor Web Vitals
|
||||
- Analytics en monitoring opzetten
|
||||
- CI/CD implementeren met GitHub Actions
|
||||
- Security best practices toepassen voor productie
|
||||
- De eindopdracht requirements begrijpen
|
||||
- Een realistische planning maken
|
||||
- Prioriteiten stellen voor afronden
|
||||
- Eigen voortgang eerlijk inschatten
|
||||
- Hulp vragen waar nodig
|
||||
|
||||
@@ -1,205 +1,178 @@
|
||||
# Les 18: Eindopdracht Intro, Planning & Advanced Topics
|
||||
|
||||
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
||||
>
|
||||
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
|
||||
> - Les18-Slide-Overzicht.md
|
||||
> - Les18-Lesplan.md
|
||||
> - Les18-Bijlage-A-Lesopdracht.md
|
||||
> - Les18-Bijlage-B-Huiswerkopdracht.md
|
||||
# Les 18: Eindproject Werksessie
|
||||
|
||||
---
|
||||
|
||||
## Hoofdstuk
|
||||
**Hoofdstuk 3: Advanced** (Les 8-18)
|
||||
**Hoofdstuk 3: Advanced** (Les 10-18)
|
||||
|
||||
## Beschrijving
|
||||
Voorbereiden op eindproject - culminatie van alles geleerd.
|
||||
Werksessie voor het afronden van je eindproject. Geen nieuwe theorie - focus op bouwen, vragen stellen, en hulp krijgen.
|
||||
|
||||
---
|
||||
|
||||
## Te Behandelen
|
||||
## Opzet van de Les
|
||||
|
||||
### Eindopdracht Walkthrough
|
||||
- 10 project opties
|
||||
- Complexiteit niveaus
|
||||
- Vereiste features
|
||||
### Korte Standup (15 min)
|
||||
|
||||
### Requirements Deep Dive
|
||||
- Verplichte onderdelen
|
||||
- Bonus punten
|
||||
- Grading rubric
|
||||
**Elke student deelt (max 1 minuut):**
|
||||
1. Waar sta ik?
|
||||
2. Wat is mijn grootste blocker?
|
||||
3. Wat wil ik vandaag afronden?
|
||||
|
||||
### Timeline & Realistic Planning
|
||||
- 2 weken
|
||||
- Dagelijkse milestones
|
||||
### Werktijd (1u 45min)
|
||||
|
||||
### Hoe Juiste Project Kiezen
|
||||
**Studenten werken zelfstandig:**
|
||||
- Docent loopt rond
|
||||
- Vraag hulp wanneer nodig
|
||||
- Peer support aangemoedigd
|
||||
|
||||
Overweeg:
|
||||
- Interesse
|
||||
- Skills
|
||||
- Ambitie
|
||||
- Uniciteit
|
||||
|
||||
### Project Planning met Cursor
|
||||
AI als planning partner:
|
||||
- Break down user stories
|
||||
- Schat complexiteit
|
||||
- Prioriteer MVP
|
||||
- Maak timeline
|
||||
- Identificeer risico's
|
||||
|
||||
### Database Schema Design Workshop
|
||||
|
||||
**Interactieve sessie:**
|
||||
- Studenten stellen voor
|
||||
- Klas bekritiseert
|
||||
- AI suggereert
|
||||
- Leer van elkaar
|
||||
|
||||
**Veel Voorkomende Patterns:**
|
||||
- User management
|
||||
- Content ownership
|
||||
- Many-to-many
|
||||
- Soft deletes
|
||||
- Timestamps
|
||||
|
||||
**Gebruik Supabase skill voor schema generatie**
|
||||
|
||||
**RLS Policy Patterns**
|
||||
|
||||
### Geavanceerde Architecture Patterns
|
||||
- Feature-based folders
|
||||
- API route organisatie
|
||||
- State management strategieën
|
||||
- Component patterns
|
||||
|
||||
### Code Organisatie
|
||||
- Project structuur die schaalt
|
||||
- Documentatie die belangrijk is
|
||||
- Git workflow
|
||||
|
||||
### Accessibility Deep Dive
|
||||
|
||||
**WCAG Compliance:**
|
||||
- A (minimum)
|
||||
- AA (doel) ✓
|
||||
- AAA (excellent)
|
||||
|
||||
**Focus areas:**
|
||||
- Keyboard navigatie
|
||||
- Screen readers
|
||||
- Color contrast
|
||||
- Forms accessibility
|
||||
|
||||
### Final Polish Workshop
|
||||
- Code quality review met Cursor
|
||||
- Bug hunting
|
||||
- UI/UX polish
|
||||
- Performance check
|
||||
**Focus gebieden:**
|
||||
- Features afronden
|
||||
- Bugs fixen
|
||||
- Documentatie completeren
|
||||
- Presentatie skills
|
||||
- Deployment issues oplossen
|
||||
|
||||
---
|
||||
|
||||
## Veelvoorkomende Problemen
|
||||
|
||||
### AI Chat Werkt Niet
|
||||
|
||||
**Check:**
|
||||
1. API key correct in `.env.local`?
|
||||
2. API key ook in Vercel env vars?
|
||||
3. Correct model gekozen?
|
||||
4. API route syntax correct?
|
||||
|
||||
### Auth Werkt Niet in Productie
|
||||
|
||||
**Check:**
|
||||
1. Redirect URLs in Supabase toegevoegd?
|
||||
2. Beide URLs: met en zonder trailing slash?
|
||||
3. Wildcard (`**`) voor sub-routes?
|
||||
|
||||
### Deployment Faalt
|
||||
|
||||
**Check:**
|
||||
1. `npm run build` lokaal succesvol?
|
||||
2. Alle TypeScript errors gefixed?
|
||||
3. Alle env vars in Vercel?
|
||||
|
||||
### Supabase Data Toont Niet
|
||||
|
||||
**Check:**
|
||||
1. RLS policies correct?
|
||||
2. Correct env vars?
|
||||
3. Supabase client correct geïnitialiseerd?
|
||||
|
||||
---
|
||||
|
||||
## Documentatie Checklist
|
||||
|
||||
**PROMPT-LOG.md (minimaal 10 entries):**
|
||||
- [ ] Prompts die goed werkten
|
||||
- [ ] Prompts die NIET werkten (en wat je leerde)
|
||||
- [ ] Verschillende tools gebruikt
|
||||
|
||||
**AI-DECISIONS.md (minimaal 5 entries):**
|
||||
- [ ] Database schema beslissing
|
||||
- [ ] UI/UX keuzes
|
||||
- [ ] Technische trade-offs
|
||||
- [ ] Problemen en oplossingen
|
||||
|
||||
**README.md:**
|
||||
- [ ] Project beschrijving
|
||||
- [ ] Features lijst
|
||||
- [ ] Tech stack
|
||||
- [ ] Setup instructies
|
||||
- [ ] Productie URL
|
||||
|
||||
---
|
||||
|
||||
## Peer Review (optioneel)
|
||||
|
||||
**Als je klaar bent, help een klasgenoot:**
|
||||
1. Test hun app
|
||||
2. Geef feedback
|
||||
3. Help met bugs
|
||||
|
||||
---
|
||||
|
||||
## Afsluiting (laatste 10 min)
|
||||
|
||||
**Check-out:**
|
||||
- Wie is klaar?
|
||||
- Wie heeft nog vragen?
|
||||
- Deadline reminder
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
- Cursor
|
||||
- Supabase
|
||||
- Skills.sh
|
||||
- Planning tools
|
||||
- Alle geleerde tools
|
||||
- Elkaar!
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (2 uur)
|
||||
|
||||
### Plan Je Eindopdracht
|
||||
### Werk aan je Eindproject
|
||||
|
||||
### Phase 1: Project Selectie (30 min)
|
||||
- Review alle 10 opties
|
||||
- Kies ÉÉN
|
||||
- Documenteer redenering
|
||||
**Dit is WERKTIJD.**
|
||||
|
||||
### Phase 2: Gedetailleerde Planning met AI (1 uur)
|
||||
Er is geen specifieke opdracht behalve: werk aan je eindproject.
|
||||
|
||||
**Gebruik Cursor + Claude Projects/Custom GPT**
|
||||
**Prioriteiten:**
|
||||
1. ❌ Wat werkt nog niet? → Fix het
|
||||
2. ✅ Wat werkt al? → Maak het af
|
||||
3. 📝 Documentatie → Vul aan
|
||||
|
||||
| Stap | Output |
|
||||
|------|--------|
|
||||
| Feature Breakdown | User stories lijst |
|
||||
| Database Schema Design | Schema met AI + Supabase skill |
|
||||
| Architecture Planning | Folder structuur, patterns |
|
||||
| Timeline | Dagelijkse milestones |
|
||||
**Vraag hulp:**
|
||||
- Als je langer dan 15 minuten vastloopt
|
||||
- Als je niet weet waar te beginnen
|
||||
- Als je feedback wilt op je aanpak
|
||||
|
||||
### Phase 3: Project Setup (30 min)
|
||||
|
||||
- GitHub repo aanmaken
|
||||
- Initialiseer Next.js
|
||||
- Install dependencies
|
||||
- Setup .cursorrules
|
||||
- README met plan
|
||||
- Supabase project (tables + RLS)
|
||||
- Install Skills
|
||||
- Deploy initiële versie
|
||||
- Commit
|
||||
**Aan het eind van de les:**
|
||||
- App werkt in productie
|
||||
- Of: je weet precies wat nog moet gebeuren
|
||||
|
||||
### Deliverable
|
||||
- Project Proposal Document
|
||||
- Initiële repo setup compleet
|
||||
- Voortgang op eindproject
|
||||
- Duidelijk beeld van wat nog moet
|
||||
|
||||
---
|
||||
|
||||
## Huiswerk (2 uur)
|
||||
## Huiswerk
|
||||
|
||||
### Start Bouwen Core Features
|
||||
### Rond Je Eindproject Af
|
||||
|
||||
### Week 1 Doelen
|
||||
- Auth compleet
|
||||
- Database schema
|
||||
- Core feature #1
|
||||
- Basis layout + navigatie
|
||||
**Dit is de laatste les. Alles wat nog moet, doe je zelfstandig.**
|
||||
|
||||
### Deze Week's Taken
|
||||
1. Supabase Auth setup
|
||||
2. Database implementatie
|
||||
3. Basis layout
|
||||
4. Eerste core feature
|
||||
**Checklist voor inleveren:**
|
||||
- [ ] App werkt op productie URL
|
||||
- [ ] Login/logout werkt
|
||||
- [ ] CRUD operaties werken
|
||||
- [ ] AI feature werkt
|
||||
- [ ] PROMPT-LOG.md heeft 10+ entries
|
||||
- [ ] AI-DECISIONS.md heeft 5+ entries
|
||||
- [ ] README is compleet
|
||||
- [ ] Code is opgeruimd
|
||||
|
||||
### Requirements
|
||||
- Gebruik Cursor + Composer + Skills extensief
|
||||
- Commit frequent
|
||||
- Test elke feature
|
||||
- Documenteer blockers
|
||||
**Tips:**
|
||||
- Test alles als "nieuwe gebruiker"
|
||||
- Vraag iemand anders om te testen
|
||||
- Check of alles in productie werkt (niet alleen lokaal)
|
||||
|
||||
### Deliverable
|
||||
- Progress update (250 woorden)
|
||||
- GitHub repo
|
||||
- Deployed preview URL
|
||||
|
||||
---
|
||||
|
||||
## 10 Eindopdracht Opties (Referentie)
|
||||
|
||||
1. Task Management App
|
||||
2. Personal Finance Tracker
|
||||
3. Recipe Collection App
|
||||
4. Fitness Tracker
|
||||
5. Event Planning Platform
|
||||
6. Learning Management System
|
||||
7. Portfolio Builder
|
||||
8. Job Application Tracker
|
||||
9. Travel Planner
|
||||
10. Habit Tracker
|
||||
|
||||
*(Details per optie in aparte eindopdracht document)*
|
||||
- Complete eindopdracht
|
||||
- Ingeleverd voor deadline
|
||||
|
||||
---
|
||||
|
||||
## Leerdoelen
|
||||
Na deze les kan de student:
|
||||
- Een geschikt eindproject kiezen
|
||||
- Gedetailleerd plannen met AI assistance
|
||||
- Database schema's ontwerpen met best practices
|
||||
- Geavanceerde architecture patterns toepassen
|
||||
- Accessibility requirements implementeren (WCAG AA)
|
||||
- Een project opzetten met alle geleerde tools en technieken
|
||||
- Zelfstandig problemen oplossen
|
||||
- Hulp vragen wanneer nodig
|
||||
- Een project afronden en inleveren
|
||||
- Documentatie completeren
|
||||
- Peer feedback geven en ontvangen
|
||||
|
||||
Reference in New Issue
Block a user