157 lines
3.3 KiB
Markdown
157 lines
3.3 KiB
Markdown
# Les 14: Supabase Advanced - Realtime, Storage & Edge Functions
|
|
|
|
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
|
>
|
|
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
|
|
> - Les14-Slide-Overzicht.md
|
|
> - Les14-Lesplan.md
|
|
> - Les14-Docenttekst.md
|
|
> - Les14-Bijlage-A-Lesopdracht.md
|
|
> - Les14-Bijlage-B-Huiswerkopdracht.md
|
|
|
|
---
|
|
|
|
## Hoofdstuk
|
|
**Hoofdstuk 3: Advanced** (Les 8-18)
|
|
|
|
## Beschrijving
|
|
Geavanceerde Supabase features voor productie apps.
|
|
|
|
---
|
|
|
|
## Te Behandelen
|
|
|
|
### Realtime Subscriptions
|
|
- Hoe Postgres broadcasts
|
|
- Subscriben op table changes
|
|
- Channel-based real-time (presence, broadcast)
|
|
- Collaborative features
|
|
- Reconnections handlen
|
|
|
|
### Supabase Storage
|
|
- File uploads (images, PDFs)
|
|
- Buckets organiseren
|
|
- Image transformations (resize, format, quality)
|
|
- Signed URLs
|
|
- Storage RLS policies
|
|
|
|
### Edge Functions Deep Dive
|
|
- Deno runtime
|
|
- TypeScript
|
|
- At edge
|
|
- Waarom gebruiken:
|
|
- Hide API keys
|
|
- Server-side logic
|
|
- Scheduled tasks
|
|
- Webhooks
|
|
|
|
### AI Integratie Patterns
|
|
- Call OpenAI/Anthropic veilig
|
|
- Streaming responses
|
|
|
|
### Praktische Patterns
|
|
- Form processing
|
|
- Emails
|
|
- Data verrijking
|
|
|
|
### Authentication Advanced
|
|
- Social logins (Google, GitHub, Discord)
|
|
- Magic links
|
|
- Email confirmatie
|
|
- Password reset
|
|
- Session management
|
|
|
|
### Error Handling & Debugging
|
|
- Supabase error messages
|
|
- RLS debuggen
|
|
- Logging
|
|
|
|
### Cursor Composer
|
|
- Voor complexe multi-feature development
|
|
|
|
---
|
|
|
|
## Tools
|
|
- Supabase (Realtime, Storage, Edge Functions)
|
|
- Cursor
|
|
- OpenAI/Anthropic API
|
|
|
|
---
|
|
|
|
## Lesopdracht (2 uur)
|
|
|
|
### Level Up Todo App met 3 Advanced Features (met Cursor)
|
|
|
|
### Feature 1: Realtime Collaboration (40 min)
|
|
|
|
Real-time updates wanneer user A/B changes:
|
|
- Subscribe
|
|
- Update UI
|
|
- Show "live" indicator
|
|
- Handle reconnection
|
|
|
|
**Test met multiple windows**
|
|
|
|
### Feature 2: File Attachments met Storage (40 min)
|
|
|
|
Attach files (images/PDFs):
|
|
- Upload button
|
|
- Thumbnail voor images (transformations)
|
|
- Download voor PDFs
|
|
- Delete optie
|
|
- Proper RLS
|
|
|
|
### Feature 3: AI-Powered Task Suggestions met Edge Function (40 min)
|
|
|
|
"Suggest Subtasks" button:
|
|
- Edge Function
|
|
- OpenAI/Anthropic API (hide key)
|
|
- AI returns 3-5 subtasks
|
|
- Auto-create in database
|
|
- Stream results
|
|
|
|
**Use Cursor Composer voor alle 3 features orchestreren**
|
|
|
|
---
|
|
|
|
## Huiswerk (2 uur)
|
|
|
|
### Bouw Production-Ready Supabase Starter Template
|
|
|
|
**Use Cursor Composer + Skills**
|
|
|
|
### Include:
|
|
|
|
| Feature | Details |
|
|
|---------|---------|
|
|
| Complete Auth | Email + Google, protected routes HOC, profile met avatar |
|
|
| Database Examples | Schema met relationships, RLS gedocumenteerd, types auto-generated |
|
|
| Realtime Demo | Chat of live updates |
|
|
| Storage Demo | Upload met preview, optimization |
|
|
| Edge Function | Met AI, error handling, rate limiting |
|
|
| Documentation | Setup, env vars, extend, patterns, troubleshooting |
|
|
|
|
### Structureer als GitHub Template
|
|
|
|
**Test:**
|
|
- Clone
|
|
- Rename
|
|
- Deploy naar Vercel
|
|
- Aim: <10 min
|
|
|
|
### Deliverable
|
|
- Template repo
|
|
- Setup video
|
|
- Reflectie
|
|
|
|
---
|
|
|
|
## Leerdoelen
|
|
Na deze les kan de student:
|
|
- Realtime subscriptions implementeren voor collaborative features
|
|
- Supabase Storage gebruiken met transformations en RLS
|
|
- Edge Functions schrijven met AI integratie
|
|
- Advanced authentication implementeren (social, magic links)
|
|
- Errors debuggen in Supabase (RLS, queries)
|
|
- Een production-ready Supabase starter template bouwen
|