2.9 KiB
2.9 KiB
Les 16: Building AI-Powered Features & Workflow Automation
📋 Lesmateriaal nog niet uitgewerkt
De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
- Les16-Slide-Overzicht.md
- Les16-Lesplan.md
- Les16-Bijlage-A-Lesopdracht.md
- Les16-Bijlage-B-Huiswerkopdracht.md
Hoofdstuk
Hoofdstuk 3: Advanced (Les 8-18)
Beschrijving
Integreer AI mogelijkheden in apps.
Te Behandelen
AI APIs Overzicht
- OpenAI API
- Anthropic API
- Pricing
- Rate limits
Veel Voorkomende AI Features
- Tekst generatie
- Samenvatting
- Chatbots
- Semantische zoeken
- Aanbevelingen
- Sentiment analyse
- Vertaling
API Integratie Patterns
- Streaming responses
- Error handling
- Caching
- Prompt optimalisatie
API Keys Verbergen
⚠️ NOOIT in frontend!
Gebruik Supabase Edge Functions:
- Server-side
- Keys in env vars
- Verify requests (auth)
- Rate limiting
Streaming UI
- Toon AI responses real-time
- Vercel AI SDK of manual
Cost Management
- Tokens tellen
- Cache queries
- Goedkopere modellen
- Monitor spend
Workflow Automation
- n8n/Pipedream intro
Praktische Automations
- Form → AI → Supabase
- Cron → data → AI → email
- GitHub webhook → AI → Slack
Integration Patterns met Supabase
Cursor voor Snelle API Integratie
Tools
- Supabase Edge Functions
- OpenAI/Anthropic API
- n8n/Pipedream
- Cursor
Lesopdracht (2 uur)
Bouw 2 features: 1 AI-powered app feature + 1 workflow automation
Deel 1: AI Feature (1 uur)
Kies 1 met Cursor:
| Optie | Beschrijving |
|---|---|
| A | AI Blog Post Generator |
| B | Smart Summarizer |
| C | AI Writing Assistant |
| D | Intelligent Search |
Implementeer via Supabase Edge Function
Deel 2: Workflow Automation (1 uur)
Kies n8n OF Pipedream
Bouw 1:
| Optie | Flow |
|---|---|
| A | Smart Form Processor |
| B | Daily AI Summary |
Test end-to-end
Deliverable
- Beide features deployed + working + gedocumenteerd
Huiswerk (2 uur)
Polish & Extend AI Feature
Deel 1: UX (30 min)
- Streaming
- Copy button met toast
- History (Supabase)
- Loading skeletons
- Empty states
- Keyboard shortcuts
Deel 2: Monitoring & Safety (30 min)
- Request logging
- Usage dashboard
- Rate limiting
- Content filtering
- Timeout handling
Deel 3: Documentation (30 min)
- API docs
- User guide
- Add to Starter Template
Deel 4: Build 2 Automations voor Eindopdracht (30 min)
- 2 n8n/Pipedream automations die echt helpen
Deliverable
- Production AI feature
- Automations
- Docs
- Reflectie (300 woorden)
Leerdoelen
Na deze les kan de student:
- AI APIs integreren (OpenAI, Anthropic)
- API keys veilig verbergen via Edge Functions
- Streaming UI implementeren
- Kosten beheren en monitoren
- Workflow automation tools gebruiken (n8n/Pipedream)
- Praktische AI-powered features bouwen