novi-lessons/Samenvattingen/Les06-Samenvatting.md

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:

# 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