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