fix: les 6
This commit is contained in:
@@ -1,237 +1,233 @@
|
||||
# Les 11: Hands-on: Van Idee naar Prototype
|
||||
# Les 11: Van Idee naar Prototype
|
||||
|
||||
---
|
||||
|
||||
## Hoofdstuk
|
||||
**Deel 3: AI Tooling & Prototyping** (Les 10-12)
|
||||
**Deel 3: Full-Stack Development** (Les 9-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.
|
||||
Proces van vaag idee naar werkend prototype. Feature breakdown, component thinking, MVP planning, user stories, en voorbereiding op eindproject. Kiezen van eindproject idea en architectuur opzetten.
|
||||
|
||||
---
|
||||
|
||||
## Te Behandelen
|
||||
## Te Behandelen (~45 min)
|
||||
|
||||
- Hoe ga je van vaag idee naar concrete features?
|
||||
- Feature breakdown method en AI-hulp
|
||||
- Component thinking: UI opdelen in herbruikbare stukken
|
||||
- MVP (Minimum Viable Product) denken
|
||||
- User stories schrijven (As a user I want to...)
|
||||
- Prioritizing features: must-have, nice-to-have, later
|
||||
- Database schema planning voor je idee
|
||||
- Project architecture design
|
||||
- Folder structure planning
|
||||
- Eindproject idee kiezen (vereenvoudigde versie)
|
||||
|
||||
---
|
||||
|
||||
### Van Idee naar Feature Breakdown
|
||||
|
||||
**Het probleem:** Je hebt een idee, maar waar begin je?
|
||||
|
||||
**Stap 1: Beschrijf je idee in 1-2 zinnen**
|
||||
**Stap 1: Beschrijf je idee in 1 zin**
|
||||
```
|
||||
"Ik wil een app waar je kunt bijhouden welke planten water nodig hebben."
|
||||
"Ik wil een app waar je recepten kan zoeken op basis van ingrediënten die je hebt"
|
||||
```
|
||||
|
||||
**Stap 2: Vraag AI om feature breakdown**
|
||||
**Stap 2: Werk uit wat gebruikers willen**
|
||||
```
|
||||
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?
|
||||
User stories:
|
||||
- Als gebruiker wil ik ingrediënten kunnen invoeren
|
||||
- Als gebruiker wil ik recepten suggesties krijgen
|
||||
- Als gebruiker wil ik recepten kunnen opslaan
|
||||
```
|
||||
|
||||
**Stap 3: Prioriteer (MVP denken)**
|
||||
- Wat is essentieel? → In prototype
|
||||
- Wat is nice-to-have? → Later
|
||||
**Stap 3: Break down in features**
|
||||
```
|
||||
Core Features:
|
||||
- Ingredient input form
|
||||
- Recipe search/filter
|
||||
- Save favorites
|
||||
- View saved recipes
|
||||
|
||||
Nice-to-have:
|
||||
- Meal planning
|
||||
- Shopping list generator
|
||||
- Nutritional info
|
||||
- Export recipes
|
||||
```
|
||||
|
||||
**Stap 4: Prioriteer (MVP)**
|
||||
- ✅ Input form + recipe search
|
||||
- ✅ Display results
|
||||
- ✅ Save/favorites
|
||||
- ❌ Shopping list (later)
|
||||
- ❌ Meal planning (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**
|
||||
**Visualiseer je app:**
|
||||
```
|
||||
Herhaalde componenten:
|
||||
- PlantCard (naam, foto, laatste water datum)
|
||||
- WaterButton (markeer als water gegeven)
|
||||
|
||||
Pagina componenten:
|
||||
- PlantList (toont alle PlantCards)
|
||||
- AddPlantForm (nieuw plant toevoegen)
|
||||
App
|
||||
├── Header
|
||||
├── SearchForm (input + submit)
|
||||
├── RecipeList
|
||||
│ └── RecipeCard (repeated)
|
||||
│ ├── Title
|
||||
│ ├── Ingredients
|
||||
│ ├── Favorite button
|
||||
│ └── View details
|
||||
└── Footer
|
||||
```
|
||||
|
||||
**Questions to ask:**
|
||||
- Welke componenten worden herhaald?
|
||||
- Welke componenten zijn child components?
|
||||
- Welke componenten hebben state?
|
||||
- Waar gaat data vandaan?
|
||||
|
||||
---
|
||||
|
||||
### MVP (Minimum Viable Product) Denken
|
||||
### MVP Denken
|
||||
|
||||
**Wat is MVP?**
|
||||
De simpelste versie van je app die nog steeds waarde levert.
|
||||
**MVP = Minimum Viable Product**
|
||||
|
||||
Het eenvoudigst mogelijke product dat nog steeds waarde levert.
|
||||
|
||||
**❌ Niet MVP:**
|
||||
- Alle features tegelijk
|
||||
- Perfect design
|
||||
- Edge cases afhandelen
|
||||
- Login systeem
|
||||
- Perfect design met animaties
|
||||
- Geavanceerde filters
|
||||
- Social features
|
||||
|
||||
**✅ Wel MVP:**
|
||||
- Core functionaliteit werkt
|
||||
- Basis styling
|
||||
- Basis styling (Tailwind)
|
||||
- Happy path werkt
|
||||
- Hardcoded data is oké
|
||||
- Data persists (database)
|
||||
|
||||
---
|
||||
|
||||
### De Prototype Workflow
|
||||
### Database Planning
|
||||
|
||||
**Voor recipe app:**
|
||||
```
|
||||
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)
|
||||
users table:
|
||||
- id, email, password_hash, created_at
|
||||
|
||||
recipes table:
|
||||
- id, title, ingredients, instructions, created_at
|
||||
|
||||
favorites table:
|
||||
- id, user_id, recipe_id, created_at
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 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 | ⭐⭐ |
|
||||
**Relations:**
|
||||
- users → favorites (one-to-many)
|
||||
- users → saved_recipes (one-to-many)
|
||||
- recipes → favorites (one-to-many)
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
- Cursor
|
||||
- ChatGPT (voor planning)
|
||||
- v0.dev (voor prototypes)
|
||||
- OpenCode/WebStorm (voor implementation)
|
||||
- Pen & papier (voor sketches)
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (2 uur)
|
||||
## Lesopdracht (2 uur, klassikaal)
|
||||
|
||||
### Bouw Je Mini-Prototype
|
||||
### Kies je Eindproject & Plan Architectuur
|
||||
|
||||
**Groepsdiscussie (15 min):**
|
||||
Bespreek klassikaal de Tool Selection reflecties uit Les 10 - welke workflows werken het beste?
|
||||
Bespreek klassikaal de styling ervaringen uit Les 10 - welke Tailwind en shadcn/ui patterns werkten goed?
|
||||
|
||||
**Deel 1: Planning (30 min)**
|
||||
**Deel 1: Idee Kiezen (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
|
||||
Kies één van deze projecten OF je eigen idee (met goedkeuring docent):
|
||||
- **AI Recipe Generator** - Input: ingredients, Output: recipe suggestions + cooking tips
|
||||
- **Smart Budget Buddy** - Track expenses, AI insights on spending patterns
|
||||
- **Travel Planner AI** - Generate itineraries based on preferences
|
||||
- **Study Buddy AI** - Quiz generation, note-taking, Q&A helper
|
||||
- **Jouw eigen idee**
|
||||
|
||||
**Deel 2: Bouwen (1 uur)**
|
||||
**Deel 2: Feature Breakdown (30 min)**
|
||||
|
||||
1. Genereer UI in v0.dev
|
||||
2. Open project in OpenCode
|
||||
3. Integreer en pas aan
|
||||
4. Zorg dat het werkt (happy path)
|
||||
Voor je gekozen project:
|
||||
1. Schrijf project description (2-3 zinnen)
|
||||
2. Maak 3-5 user stories
|
||||
3. Break down in core vs nice-to-have features
|
||||
4. Selecteer MVP (wat is essentieel?)
|
||||
|
||||
**Focus op WORKFLOW, niet perfectie!**
|
||||
**Deel 3: Architecture Planning (45 min)**
|
||||
|
||||
**Deel 3: Documentatie (15 min)**
|
||||
1. Schets database schema
|
||||
2. List de main components
|
||||
3. Plan folder structure
|
||||
4. Identify donde AI integreert (tool calling? Chat? Completion?)
|
||||
|
||||
Maak `docs/PROTOTYPE-LOG.md`:
|
||||
- Je idee
|
||||
- Feature breakdown
|
||||
- MVP keuzes
|
||||
- Prompts die werkten
|
||||
- Wat ging fout en hoe opgelost
|
||||
**Deel 4: Start Codebase (15 min)**
|
||||
|
||||
1. Maak GitHub repo
|
||||
2. Create-next-app setup
|
||||
3. Push initial commit
|
||||
|
||||
### Deliverable
|
||||
- Werkend prototype (kan simpel zijn)
|
||||
- `docs/PROTOTYPE-LOG.md` met je proces
|
||||
- Screenshot van werkend prototype
|
||||
- Project description document
|
||||
- Feature breakdown met user stories
|
||||
- Database schema diagram (hand-drawn ok)
|
||||
- Component tree visualization
|
||||
- GitHub repo met initial setup
|
||||
|
||||
---
|
||||
|
||||
## Huiswerk (2 uur)
|
||||
|
||||
### Verbeter en Reflecteer
|
||||
### Bouw Basis Architecture
|
||||
|
||||
**Deel 1: Prototype Verbeteren (1 uur)**
|
||||
**Deel 1: Folder Structure (30 min)**
|
||||
|
||||
1. Fix eventuele bugs
|
||||
2. Voeg 1 extra feature toe
|
||||
3. Verbeter styling
|
||||
4. Handle 1 edge case
|
||||
Create proper folder structure:
|
||||
- src/components/ui/
|
||||
- src/components/features/
|
||||
- src/lib/
|
||||
- src/hooks/
|
||||
- src/types/
|
||||
- docs/
|
||||
|
||||
**Deel 2: Peer Review (30 min)**
|
||||
**Deel 2: Type Definitions (30 min)**
|
||||
|
||||
- Deel je prototype met een klasgenoot
|
||||
- Krijg feedback
|
||||
- Geef feedback op hun prototype
|
||||
Schrijf TypeScript types voor je project:
|
||||
- User type
|
||||
- Main data types
|
||||
- API response types
|
||||
|
||||
**Deel 3: Reflectie (30 min)**
|
||||
**Deel 3: Component Skeleton (1 uur)**
|
||||
|
||||
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?
|
||||
Maak skeleton components:
|
||||
- Main layout
|
||||
- 3-4 main feature components (without logic)
|
||||
- Proper props interfaces
|
||||
- Basic Tailwind styling
|
||||
|
||||
### Deliverable
|
||||
- Verbeterd prototype
|
||||
- Peer review feedback (gegeven en ontvangen)
|
||||
- Lessons Learned document (300 woorden)
|
||||
- GitHub commits met folder structure
|
||||
- types/ folder met je data types
|
||||
- Skeleton components
|
||||
- README.md met project description
|
||||
|
||||
---
|
||||
|
||||
## 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
|
||||
- Een project idee van vaag naar concreet uitwerken
|
||||
- User stories schrijven
|
||||
- Feature breakdown maken
|
||||
- MVP bepalen
|
||||
- Database schema ontwerpen
|
||||
- Component architecture plannen
|
||||
- Project codebase opzetten
|
||||
- TypeScript types structureren
|
||||
- Voorbereiding maken op verdere implementatie
|
||||
|
||||
Reference in New Issue
Block a user