238 lines
5.1 KiB
Markdown
238 lines
5.1 KiB
Markdown
# Les 11: Hands-on: Van Idee naar Prototype
|
|
|
|
---
|
|
|
|
## Hoofdstuk
|
|
**Deel 3: AI Tooling & Prototyping** (Les 10-12)
|
|
|
|
## Beschrijving
|
|
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
|
|
|
|
### Van Idee naar Feature Breakdown
|
|
|
|
**Het probleem:** Je hebt een idee, maar waar begin je?
|
|
|
|
**Stap 1: Beschrijf je idee in 1-2 zinnen**
|
|
```
|
|
"Ik wil een app waar je kunt bijhouden welke planten water nodig hebben."
|
|
```
|
|
|
|
**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?
|
|
```
|
|
|
|
**Stap 3: Prioriteer (MVP denken)**
|
|
- Wat is essentieel? → In prototype
|
|
- Wat is nice-to-have? → Later
|
|
|
|
---
|
|
|
|
### Component Thinking
|
|
|
|
**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
|
|
|
|
| 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 | ⭐⭐ |
|
|
|
|
---
|
|
|
|
## Tools
|
|
- ChatGPT (voor planning)
|
|
- v0.dev (voor prototypes)
|
|
- OpenCode/WebStorm (voor implementation)
|
|
|
|
---
|
|
|
|
## Lesopdracht (2 uur)
|
|
|
|
### Bouw Je Mini-Prototype
|
|
|
|
**Groepsdiscussie (15 min):**
|
|
Bespreek klassikaal de Tool Selection reflecties uit Les 10 - welke workflows werken het beste?
|
|
|
|
**Deel 1: Planning (30 min)**
|
|
|
|
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: Bouwen (1 uur)**
|
|
|
|
1. Genereer UI in v0.dev
|
|
2. Open project in OpenCode
|
|
3. Integreer en pas aan
|
|
4. Zorg dat het werkt (happy path)
|
|
|
|
**Focus op WORKFLOW, niet perfectie!**
|
|
|
|
**Deel 3: Documentatie (15 min)**
|
|
|
|
Maak `docs/PROTOTYPE-LOG.md`:
|
|
- Je idee
|
|
- Feature breakdown
|
|
- MVP keuzes
|
|
- Prompts die werkten
|
|
- Wat ging fout en hoe opgelost
|
|
|
|
### Deliverable
|
|
- Werkend prototype (kan simpel zijn)
|
|
- `docs/PROTOTYPE-LOG.md` met je proces
|
|
- Screenshot van werkend prototype
|
|
|
|
---
|
|
|
|
## Huiswerk (2 uur)
|
|
|
|
### Verbeter en Reflecteer
|
|
|
|
**Deel 1: Prototype Verbeteren (1 uur)**
|
|
|
|
1. Fix eventuele bugs
|
|
2. Voeg 1 extra feature toe
|
|
3. Verbeter styling
|
|
4. Handle 1 edge case
|
|
|
|
**Deel 2: Peer Review (30 min)**
|
|
|
|
- Deel je prototype met een klasgenoot
|
|
- Krijg feedback
|
|
- Geef feedback op hun prototype
|
|
|
|
**Deel 3: Reflectie (30 min)**
|
|
|
|
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?
|
|
|
|
### Deliverable
|
|
- Verbeterd prototype
|
|
- Peer review feedback (gegeven en ontvangen)
|
|
- Lessons Learned document (300 woorden)
|
|
|
|
---
|
|
|
|
## Leerdoelen
|
|
Na deze les kan de student:
|
|
- 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
|