# 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