fix: lessons
This commit is contained in:
@@ -1,233 +1,77 @@
|
||||
# Les 11: Van Idee naar Prototype
|
||||
# Les 11: Vercel AI SDK — Praat met je eigen data
|
||||
|
||||
> ✅ **Deze les is volledig uitgewerkt**
|
||||
|
||||
## Lesmateriaal
|
||||
|
||||
- [Slide Overzicht](../Les11-AI-SDK/Les11-Slide-Overzicht.md)
|
||||
- [Docenttekst](../Les11-AI-SDK/Les11-Docenttekst.md)
|
||||
- [Lesstof](../Les11-AI-SDK/Les11-Lesstof.md)
|
||||
- [Lesopdracht](../Les11-AI-SDK/Les11-Lesopdracht.md)
|
||||
- [Huiswerk](../Les11-AI-SDK/Les11-Huiswerk.md)
|
||||
|
||||
---
|
||||
|
||||
## Hoofdstuk
|
||||
**Deel 3: Full-Stack Development** (Les 9-12)
|
||||
## Deel
|
||||
**Deel 3 — AI Development** (Les 11-16)
|
||||
|
||||
## Beschrijving
|
||||
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.
|
||||
Eerste echte AI-les. We bouwen een Next.js-app from scratch, koppelen Supabase, seeden 500 fictieve bands van het "Polderfest 2027" festival en laten studenten met natuurlijke taal vragen stellen aan hun eigen data via de Vercel AI SDK.
|
||||
|
||||
---
|
||||
|
||||
## Te Behandelen (~45 min)
|
||||
## Te Behandelen
|
||||
|
||||
- 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)
|
||||
### Theorie
|
||||
- Waarom een AI SDK i.p.v. de OpenAI API direct
|
||||
- De vier kern-functies: `generateText`, `streamText`, `generateObject`, `streamObject`
|
||||
- Provider-agnostic werken (OpenAI ↔ Anthropic ↔ Google ↔ Groq)
|
||||
- Streaming en de UX-impact
|
||||
- "Praat met je data": pattern voor LLM + database
|
||||
|
||||
---
|
||||
|
||||
### Van Idee naar Feature Breakdown
|
||||
|
||||
**Stap 1: Beschrijf je idee in 1 zin**
|
||||
```
|
||||
"Ik wil een app waar je recepten kan zoeken op basis van ingrediënten die je hebt"
|
||||
```
|
||||
|
||||
**Stap 2: Werk uit wat gebruikers willen**
|
||||
```
|
||||
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: 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
|
||||
|
||||
**Visualiseer je app:**
|
||||
```
|
||||
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 Denken
|
||||
|
||||
**MVP = Minimum Viable Product**
|
||||
|
||||
Het eenvoudigst mogelijke product dat nog steeds waarde levert.
|
||||
|
||||
**❌ Niet MVP:**
|
||||
- Alle features tegelijk
|
||||
- Perfect design met animaties
|
||||
- Geavanceerde filters
|
||||
- Social features
|
||||
|
||||
**✅ Wel MVP:**
|
||||
- Core functionaliteit werkt
|
||||
- Basis styling (Tailwind)
|
||||
- Happy path werkt
|
||||
- Data persists (database)
|
||||
|
||||
---
|
||||
|
||||
### Database Planning
|
||||
|
||||
**Voor recipe app:**
|
||||
```
|
||||
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
|
||||
```
|
||||
|
||||
**Relations:**
|
||||
- users → favorites (one-to-many)
|
||||
- users → saved_recipes (one-to-many)
|
||||
- recipes → favorites (one-to-many)
|
||||
### Live demo's (klassikaal)
|
||||
1. Next.js scaffold + Supabase koppelen
|
||||
2. Seed-script met 500 fictieve bands
|
||||
3. AI SDK installeren + eerste chat-route met `streamText`
|
||||
4. `useChat` hook + vragen stellen aan de data
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
- Cursor
|
||||
- ChatGPT (voor planning)
|
||||
- Pen & papier (voor sketches)
|
||||
- Vercel AI SDK v6
|
||||
- Next.js 16 + Server Actions
|
||||
- Supabase (Postgres + seed-script)
|
||||
- OpenAI / Anthropic providers
|
||||
- Polderfest-demo (in repo: `Les11-AI-SDK/polderfest-demo`)
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (2 uur, klassikaal)
|
||||
## Lesopdracht (in-class, 60 min)
|
||||
|
||||
### Kies je Eindproject & Plan Architectuur
|
||||
Studenten kijken klassikaal mee tijdens de demo's. In-class oefening:
|
||||
- Maak een eigen API key bij OpenAI of Groq
|
||||
- Test de demo lokaal: kun je vragen stellen aan de Polderfest-data?
|
||||
- Wijzig de system prompt: laat de AI antwoorden als een festival-roadie
|
||||
|
||||
**Groepsdiscussie (15 min):**
|
||||
Bespreek klassikaal de styling ervaringen uit Les 10 - welke Tailwind en shadcn/ui patterns werkten goed?
|
||||
|
||||
**Deel 1: Idee Kiezen (30 min)**
|
||||
|
||||
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: Feature Breakdown (30 min)**
|
||||
|
||||
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?)
|
||||
|
||||
**Deel 3: Architecture Planning (45 min)**
|
||||
|
||||
1. Schets database schema
|
||||
2. List de main components
|
||||
3. Plan folder structure
|
||||
4. Identify donde AI integreert (tool calling? Chat? Completion?)
|
||||
|
||||
**Deel 4: Start Codebase (15 min)**
|
||||
|
||||
1. Maak GitHub repo
|
||||
2. Create-next-app setup
|
||||
3. Push initial commit
|
||||
|
||||
### Deliverable
|
||||
- Project description document
|
||||
- Feature breakdown met user stories
|
||||
- Database schema diagram (hand-drawn ok)
|
||||
- Component tree visualization
|
||||
- GitHub repo met initial setup
|
||||
**Inleveren:** Screenshot van werkende lokale demo.
|
||||
|
||||
---
|
||||
|
||||
## Huiswerk (2 uur)
|
||||
## Huiswerk (take-home)
|
||||
|
||||
### Bouw Basis Architecture
|
||||
Bouw een eigen "praat met je data" mini-app:
|
||||
- Eigen dataset (eigen interesse, min. 50 records)
|
||||
- Werkende chat-UI via AI SDK
|
||||
- Deploy naar Vercel
|
||||
- README met setup-stappen
|
||||
|
||||
**Deel 1: Folder Structure (30 min)**
|
||||
|
||||
Create proper folder structure:
|
||||
- src/components/ui/
|
||||
- src/components/features/
|
||||
- src/lib/
|
||||
- src/hooks/
|
||||
- src/types/
|
||||
- docs/
|
||||
|
||||
**Deel 2: Type Definitions (30 min)**
|
||||
|
||||
Schrijf TypeScript types voor je project:
|
||||
- User type
|
||||
- Main data types
|
||||
- API response types
|
||||
|
||||
**Deel 3: Component Skeleton (1 uur)**
|
||||
|
||||
Maak skeleton components:
|
||||
- Main layout
|
||||
- 3-4 main feature components (without logic)
|
||||
- Proper props interfaces
|
||||
- Basic Tailwind styling
|
||||
|
||||
### Deliverable
|
||||
- GitHub commits met folder structure
|
||||
- types/ folder met je data types
|
||||
- Skeleton components
|
||||
- README.md met project description
|
||||
**Inleveren:** GitHub URL + Vercel URL via Teams.
|
||||
|
||||
---
|
||||
|
||||
## Leerdoelen
|
||||
|
||||
Na deze les kan de student:
|
||||
- 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
|
||||
- Een Next.js-app koppelen aan Supabase + AI SDK
|
||||
- Streaming chat implementeren met `streamText` + `useChat`
|
||||
- Een eigen dataset seeden en die met een LLM bevragen
|
||||
- Het verschil uitleggen tussen direct OpenAI calls en de AI SDK
|
||||
|
||||
Reference in New Issue
Block a user