154 lines
2.6 KiB
Markdown
154 lines
2.6 KiB
Markdown
# Les 16: Building AI-Powered Features & Workflow Automation
|
|
|
|
## 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
|