289 lines
5.7 KiB
Markdown
289 lines
5.7 KiB
Markdown
# Les 6: Hands-on: Van Idee naar Prototype
|
|
|
|
---
|
|
|
|
## Hoofdstuk
|
|
**Hoofdstuk 2: Intermediate** (Les 4-9)
|
|
|
|
## 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
|
|
|
|
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
|
|
- ChatGPT (voor planning)
|
|
- v0.dev (voor prototypes)
|
|
- OpenCode/WebStorm (voor implementation)
|
|
|
|
---
|
|
|
|
## Lesopdracht (2 uur)
|
|
|
|
### Bouw Je Mini-Prototype
|
|
|
|
**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 (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)
|
|
|
|
### 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)
|
|
|
|
---
|
|
|
|
## 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:
|
|
- 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
|