fix: lessons
This commit is contained in:
@@ -1,308 +1,90 @@
|
||||
# Les 18: Deployment & Production + Eindopdracht
|
||||
# Les 18: Advanced AI Toolbox — Voice, Vision, Image, Local, Edge
|
||||
|
||||
> ✅ **Deze les is volledig uitgewerkt — laatste les**
|
||||
|
||||
## Lesmateriaal
|
||||
|
||||
- [Slide Overzicht](../Les18-AI-Toolbox-Next/Les18-Slide-Overzicht.md)
|
||||
- [Docenttekst](../Les18-AI-Toolbox-Next/Les18-Docenttekst.md)
|
||||
- [Lesstof](../Les18-AI-Toolbox-Next/Les18-Lesstof.md)
|
||||
- [Lesopdracht](../Les18-AI-Toolbox-Next/Les18-Lesopdracht.md)
|
||||
- [Huiswerk](../Les18-AI-Toolbox-Next/Les18-Huiswerk.md)
|
||||
|
||||
---
|
||||
|
||||
## Hoofdstuk
|
||||
**Deel 4: Advanced AI & Deployment** (Les 13-18)
|
||||
## Deel
|
||||
**Deel 4 — Production & Advanced** (Les 17-18)
|
||||
|
||||
## Beschrijving
|
||||
Deploy je eindproject naar productie. Leer environment variables, Vercel deployment, en basis performance optimalisatie. Bespreking van de eindopdracht requirements en afrondende werksessie.
|
||||
Laatste les. Vijf korte demo's van alle modaliteiten die we nog NIET hebben gezien: voice (Whisper + TTS), vision (GPT-4o), image generation (Flux), local LLMs (Ollama) en edge AI (Vercel AI Gateway). Wrap-up van alle 18 lessen + vooruitblik eindopdracht.
|
||||
|
||||
---
|
||||
|
||||
## Te Behandelen
|
||||
|
||||
### Groepsdiscussie (15 min)
|
||||
Bespreek klassikaal de AI feature ervaringen uit Les 17 - welke system prompts werkten goed en welke challenges kwamen jullie tegen?
|
||||
### Theorie
|
||||
- Het AI-landschap eind 2026 (providers + modi)
|
||||
- Per feature: welke modaliteit past?
|
||||
- Open-source vs. cloud — privacy, cost, latency
|
||||
- Resources & community om bij te blijven
|
||||
|
||||
### Vercel Deployment Flow
|
||||
|
||||
**Hoe Vercel werkt:**
|
||||
1. Connect GitHub repository
|
||||
2. Push naar main → automatische deploy
|
||||
3. Push naar andere branch → preview URL
|
||||
4. Alles automatisch (build, SSL, CDN)
|
||||
|
||||
**Waarom Vercel voor Next.js:**
|
||||
- Gemaakt door dezelfde makers
|
||||
- Zero-config deployment
|
||||
- Gratis tier ruim voldoende
|
||||
- Automatische HTTPS
|
||||
- Global CDN
|
||||
|
||||
---
|
||||
|
||||
### Environment Variables in Vercel
|
||||
|
||||
**Lokaal (.env.local) vs Productie (Vercel Dashboard):**
|
||||
|
||||
| Waar | Bestand/Locatie | Voorbeeld |
|
||||
|------|-----------------|-----------|
|
||||
| Lokaal | `.env.local` | Development |
|
||||
| Vercel | Dashboard → Settings → Env Vars | Production |
|
||||
|
||||
**Stap voor stap:**
|
||||
1. Ga naar je Vercel project
|
||||
2. Settings → Environment Variables
|
||||
3. Voeg toe:
|
||||
- `NEXT_PUBLIC_SUPABASE_URL`
|
||||
- `NEXT_PUBLIC_SUPABASE_ANON_KEY`
|
||||
- `OPENAI_API_KEY`
|
||||
4. Selecteer environment (Production, Preview, Development)
|
||||
5. Save & Redeploy
|
||||
|
||||
**Let op:**
|
||||
- `NEXT_PUBLIC_` prefix = zichtbaar in browser
|
||||
- Zonder prefix = alleen server-side (API routes)
|
||||
|
||||
---
|
||||
|
||||
### Supabase Productie Setup
|
||||
|
||||
**Redirect URLs configureren:**
|
||||
1. Ga naar Supabase → Authentication → URL Configuration
|
||||
2. Voeg toe bij "Redirect URLs":
|
||||
- `https://jouw-app.vercel.app/**`
|
||||
- `https://jouw-app.vercel.app`
|
||||
|
||||
**Waarom:**
|
||||
- Auth redirects werken alleen naar toegestane URLs
|
||||
- Wildcards (`**`) voor sub-routes
|
||||
|
||||
---
|
||||
|
||||
### Deployment Checklist
|
||||
|
||||
**Voor deployment:**
|
||||
- [ ] `npm run build` werkt lokaal
|
||||
- [ ] Geen TypeScript errors
|
||||
- [ ] Environment variables gedocumenteerd in `.env.example`
|
||||
- [ ] `.gitignore` bevat `.env*.local`
|
||||
- [ ] README up-to-date
|
||||
|
||||
**Na deployment:**
|
||||
- [ ] App laadt correct
|
||||
- [ ] Auth werkt (login/logout)
|
||||
- [ ] Data wordt opgehaald uit Supabase
|
||||
- [ ] AI features werken (indien van toepassing)
|
||||
- [ ] Geen console errors
|
||||
|
||||
---
|
||||
|
||||
### Performance Basics
|
||||
|
||||
**Lighthouse Audit:**
|
||||
1. Open Chrome DevTools
|
||||
2. Tab "Lighthouse"
|
||||
3. Klik "Analyze page load"
|
||||
4. Aim for score >80 in elke categorie
|
||||
|
||||
**Quick wins:**
|
||||
- Gebruik Next.js `Image` component (niet `<img>`)
|
||||
- Lazy load components die niet direct nodig zijn
|
||||
- Verwijder ongebruikte dependencies
|
||||
|
||||
---
|
||||
|
||||
### Security Checklist
|
||||
|
||||
**Belangrijk voor productie:**
|
||||
- [ ] API keys nooit in client-side code
|
||||
- [ ] Supabase RLS enabled (Row Level Security)
|
||||
- [ ] Error messages geven geen gevoelige info
|
||||
- [ ] HTTPS (automatisch via Vercel)
|
||||
|
||||
---
|
||||
|
||||
## Eindopdracht Overview
|
||||
|
||||
### Wat is de eindopdracht?
|
||||
- Bouw een AI-powered web applicatie
|
||||
- Gebruik alle tools die je hebt geleerd
|
||||
- Vrije keuze in implementatie
|
||||
|
||||
**Drie voorbeeldprojecten:**
|
||||
1. **AI Recipe Generator** - Recepten op basis van ingrediënten
|
||||
2. **Smart Budget Buddy** - Financieel overzicht met AI insights
|
||||
3. **Travel Planner AI** - Reisplanning met AI suggesties
|
||||
|
||||
**Of:** Eigen idee (met goedkeuring docent)
|
||||
|
||||
---
|
||||
|
||||
### Technische Vereisten
|
||||
|
||||
**Stack:**
|
||||
- Next.js 14 met App Router
|
||||
- TypeScript
|
||||
- Tailwind CSS
|
||||
- Supabase (database + auth)
|
||||
- Vercel AI SDK (chat of completion feature)
|
||||
- Deployed op Vercel
|
||||
|
||||
**Documentatie vereisten:**
|
||||
- `docs/PROJECT-BRIEF.md` - Project beschrijving
|
||||
- `docs/PROMPT-LOG.md` - Minimaal 10 prompts
|
||||
- `docs/AI-DECISIONS.md` - Minimaal 5 beslissingen
|
||||
- Complete README met setup instructies
|
||||
|
||||
---
|
||||
|
||||
### Beoordelingscriteria
|
||||
|
||||
| Criterium | Weging |
|
||||
|-----------|--------|
|
||||
| Technische uitvoering | 40% |
|
||||
| AI integratie | 25% |
|
||||
| Documentatie (PROMPT-LOG, AI-DECISIONS) | 20% |
|
||||
| Code kwaliteit & organisatie | 15% |
|
||||
|
||||
**Minimale vereisten:**
|
||||
- App werkt in productie
|
||||
- Auth + CRUD werkt
|
||||
- AI feature werkt
|
||||
- Documentatie compleet
|
||||
|
||||
---
|
||||
|
||||
### Veelvoorkomende Problemen
|
||||
|
||||
**AI Chat Werkt Niet:**
|
||||
1. API key correct in `.env.local`?
|
||||
2. API key ook in Vercel env vars?
|
||||
3. Correct model gekozen?
|
||||
4. API route syntax correct?
|
||||
|
||||
**Auth Werkt Niet in Productie:**
|
||||
1. Redirect URLs in Supabase toegevoegd?
|
||||
2. Beide URLs: met en zonder trailing slash?
|
||||
3. Wildcard (`**`) voor sub-routes?
|
||||
|
||||
**Deployment Faalt:**
|
||||
1. `npm run build` lokaal succesvol?
|
||||
2. Alle TypeScript errors gefixed?
|
||||
3. Alle env vars in Vercel?
|
||||
### Live demo's
|
||||
1. **Voice** — Whisper transcribe + TTS via ElevenLabs
|
||||
2. **Vision** — GPT-4o foto-analyse (defect detection, OCR, receipts)
|
||||
3. **Image gen** — Flux via Fal.ai (festival-poster prompt)
|
||||
4. **Local LLM** — Ollama + llama4:8b offline
|
||||
5. **Edge AI** — Vercel AI Gateway met automatic fallback
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
- Vercel
|
||||
- GitHub
|
||||
- Supabase
|
||||
- Chrome DevTools (Lighthouse)
|
||||
- Cursor
|
||||
- OpenAI Whisper + GPT-4o + DALL-E
|
||||
- ElevenLabs TTS
|
||||
- Fal.ai (Flux image generation)
|
||||
- Ollama + llama4 (lokaal)
|
||||
- Vercel AI Gateway
|
||||
- Cloudflare Workers AI
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (2 uur)
|
||||
## Lesopdracht (in-class, 30 min)
|
||||
|
||||
### Deploy Je Eindproject
|
||||
Studenten kijken klassikaal mee tijdens de 5 demo's. In-class oefening:
|
||||
- Kies één modaliteit die je het interessantst vindt
|
||||
- Schets in 5 zinnen een feature voor je eindopdracht die deze modaliteit gebruikt
|
||||
|
||||
**Deel 1: Pre-Deployment Check (30 min)**
|
||||
|
||||
Run door de checklist:
|
||||
1. `npm run build` - fix eventuele errors
|
||||
2. Check TypeScript errors
|
||||
3. Maak/update `.env.example`
|
||||
4. Update README met project info
|
||||
|
||||
**Deel 2: Vercel Deployment (30 min)**
|
||||
|
||||
1. Ga naar [vercel.com](https://vercel.com)
|
||||
2. "Add New Project"
|
||||
3. Import je GitHub repository
|
||||
4. Voeg environment variables toe
|
||||
5. Deploy!
|
||||
|
||||
**Deel 3: Supabase Config (20 min)**
|
||||
|
||||
1. Voeg Vercel URL toe aan Supabase redirect URLs
|
||||
2. Test auth in productie
|
||||
3. Verifieer data access
|
||||
|
||||
**Deel 4: Testing & Lighthouse (40 min)**
|
||||
|
||||
1. Test alle features in productie:
|
||||
- Login/logout
|
||||
- CRUD operaties
|
||||
- AI chat (indien aanwezig)
|
||||
2. Run Lighthouse audit
|
||||
3. Fix issues tot score >80
|
||||
4. Screenshot resultaat
|
||||
|
||||
### Deliverable
|
||||
- Werkende productie URL
|
||||
- Lighthouse screenshot (score >80)
|
||||
- Test rapport: wat werkt, wat niet
|
||||
**Inleveren:** Schets via Teams chat.
|
||||
|
||||
---
|
||||
|
||||
## Huiswerk (Eindopdracht Afronden)
|
||||
## Huiswerk (take-home)
|
||||
|
||||
### Rond Je Eindproject Af
|
||||
Bouw één gekozen modaliteit naar productie:
|
||||
- Werkend op Vercel
|
||||
- Cost-monitoring actief (Les 17)
|
||||
- README + 200-woord reflectie: cost, latency, privacy
|
||||
|
||||
**Dit is de laatste les. Gebruik deze tijd om je eindopdracht af te ronden.**
|
||||
**Inleveren:** GitHub + Vercel URL via Teams + Brightspace.
|
||||
|
||||
**Deel 1: Bug Fixes (1 uur)**
|
||||
---
|
||||
|
||||
1. Test je app grondig in productie
|
||||
2. Fix gevonden bugs
|
||||
3. Test edge cases:
|
||||
- Lege states
|
||||
- Error states
|
||||
- Loading states
|
||||
4. Redeploy
|
||||
|
||||
**Deel 2: Performance Optimization (30 min)**
|
||||
|
||||
1. Run Lighthouse opnieuw
|
||||
2. Fix top 3 performance issues
|
||||
3. Document wat je hebt verbeterd
|
||||
|
||||
**Deel 3: Documentatie Afronden (30 min)**
|
||||
|
||||
Update je `README.md`:
|
||||
- Werkende productie URL
|
||||
- Features lijst
|
||||
- Tech stack
|
||||
- Setup instructies
|
||||
- Screenshots
|
||||
|
||||
Complete `docs/`:
|
||||
- PROMPT-LOG.md (minimaal 10 entries)
|
||||
- AI-DECISIONS.md (minimaal 5 entries)
|
||||
|
||||
**Checklist voor inleveren:**
|
||||
- [ ] App werkt op productie URL
|
||||
- [ ] Login/logout werkt
|
||||
- [ ] CRUD operaties werken
|
||||
- [ ] AI feature werkt
|
||||
- [ ] PROMPT-LOG.md heeft 10+ entries
|
||||
- [ ] AI-DECISIONS.md heeft 5+ entries
|
||||
- [ ] README is compleet
|
||||
- [ ] Code is opgeruimd
|
||||
|
||||
**Tips:**
|
||||
- Test alles als "nieuwe gebruiker"
|
||||
- Vraag iemand anders om te testen
|
||||
- Check of alles in productie werkt (niet alleen lokaal)
|
||||
|
||||
### Deliverable
|
||||
- Complete eindopdracht
|
||||
- Deployed en werkend
|
||||
- Alle documentatie compleet
|
||||
- Ingeleverd voor deadline
|
||||
## Eindopdracht (volgt na les)
|
||||
De eindopdracht doen studenten thuis. Eisen blijven gelden uit het curriculum-overzicht:
|
||||
- Next.js + TypeScript + Tailwind
|
||||
- Supabase met auth en RLS
|
||||
- AI SDK met Tool Calling
|
||||
- Externe API
|
||||
- Deployed op Vercel
|
||||
- Pitch (8-12 min) na inleveren
|
||||
|
||||
---
|
||||
|
||||
## Leerdoelen
|
||||
Na deze les kan de student:
|
||||
- Een Next.js app deployen naar Vercel
|
||||
- Environment variables configureren in Vercel
|
||||
- Supabase redirect URLs instellen voor productie
|
||||
- Een deployment checklist doorlopen
|
||||
- Lighthouse gebruiken voor performance audit
|
||||
- Basis security checks uitvoeren
|
||||
- De eindopdracht requirements begrijpen
|
||||
- Een project afronden en inleveren
|
||||
- Documentatie voltooien volgens de vereisten
|
||||
- Het AI-landschap eind 2026 schetsen (providers + modaliteiten)
|
||||
- Per feature de juiste modaliteit kiezen
|
||||
- Een voice-feature (Whisper + TTS) implementeren
|
||||
- Een vision-feature met GPT-4o bouwen
|
||||
- Een lokaal model draaien via Ollama
|
||||
- Vercel AI Gateway gebruiken voor automatic fallback
|
||||
- Bepalen welke modaliteit past bij privacy- en cost-eisen
|
||||
|
||||
Reference in New Issue
Block a user