fix: add lesson files
This commit is contained in:
153
Samenvattingen/Les16-Samenvatting.md
Normal file
153
Samenvattingen/Les16-Samenvatting.md
Normal file
@@ -0,0 +1,153 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user