fix: update supabase lessons to make them a bit simpler
This commit is contained in:
Tim Rijkse
@@ -1,4 +1,4 @@
|
|||||||
# Les 7: Backend Made Easy met Supabase + AI + Skills
|
# Les 7: Backend Basics met Supabase
|
||||||
|
|
||||||
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
||||||
>
|
>
|
||||||
@@ -14,112 +14,174 @@
|
|||||||
**Hoofdstuk 2: Intermediate** (Les 4-9)
|
**Hoofdstuk 2: Intermediate** (Les 4-9)
|
||||||
|
|
||||||
## Beschrijving
|
## Beschrijving
|
||||||
Gebruik AI om backend te bouwen zonder backend expert te zijn. Focus op Supabase + AI + Skills combinatie.
|
Leer de basics van Supabase: een database opzetten, data opslaan/ophalen, en simpele authenticatie. AI helpt je met de complexiteit.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Te Behandelen
|
## Te Behandelen
|
||||||
|
|
||||||
### Supabase Overview
|
### Wat is Supabase?
|
||||||
- Open-source Firebase alternative
|
- Open-source Firebase alternative
|
||||||
|
- Hosted Postgres database
|
||||||
|
- Gratis tier voor development
|
||||||
|
- Mooie UI om tabellen te beheren
|
||||||
|
|
||||||
**Core Features:**
|
### Supabase UI Tour
|
||||||
- Postgres database
|
- Dashboard overview
|
||||||
- Authentication
|
- Table Editor: tabellen maken zonder SQL
|
||||||
- Storage
|
- Kolommen toevoegen (text, number, boolean, timestamp)
|
||||||
- Realtime
|
- Data handmatig invoeren en bekijken
|
||||||
- Edge Functions
|
|
||||||
- Vector database
|
|
||||||
|
|
||||||
### Waarom Supabase + AI Perfect Combo
|
### Database Basics (zonder SQL kennis)
|
||||||
- AI helpt met complexe database dingen
|
- Tabellen = spreadsheets met regels
|
||||||
|
- Kolommen = velden (naam, email, etc.)
|
||||||
|
- Rijen = individuele records
|
||||||
|
- Primary key: unieke identifier per rij
|
||||||
|
|
||||||
### Skills voor Supabase
|
### Supabase Client in Next.js
|
||||||
- "supabase-postgres-best-practices" skill
|
|
||||||
|
|
||||||
### Database Design met AI + Skills
|
**Installatie:**
|
||||||
- Natuurlijke taal → genormaliseerd schema
|
```bash
|
||||||
|
npm install @supabase/supabase-js
|
||||||
|
```
|
||||||
|
|
||||||
### Row Level Security (RLS)
|
**Setup:**
|
||||||
- RLS policies met AI + Skills
|
```ts
|
||||||
- Waarom RLS belangrijk is
|
import { createClient } from '@supabase/supabase-js'
|
||||||
|
|
||||||
### TypeScript Types
|
const supabase = createClient(
|
||||||
- Supabase CLI auto-genereert types van database
|
process.env.NEXT_PUBLIC_SUPABASE_URL!,
|
||||||
|
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
|
||||||
|
)
|
||||||
|
```
|
||||||
|
|
||||||
### Supabase Client
|
### CRUD Operaties (met AI hulp)
|
||||||
- Setup
|
|
||||||
- Basis CRUD operaties
|
|
||||||
- Realtime subscriptions intro
|
|
||||||
- Supabase Storage intro
|
|
||||||
|
|
||||||
### Focus
|
**Create:**
|
||||||
AI + Skills doen zwaar werk, jij leert concepten
|
```ts
|
||||||
|
const { data, error } = await supabase
|
||||||
|
.from('todos')
|
||||||
|
.insert({ title: 'Nieuwe taak', completed: false })
|
||||||
|
```
|
||||||
|
|
||||||
|
**Read:**
|
||||||
|
```ts
|
||||||
|
const { data, error } = await supabase
|
||||||
|
.from('todos')
|
||||||
|
.select('*')
|
||||||
|
```
|
||||||
|
|
||||||
|
**Update:**
|
||||||
|
```ts
|
||||||
|
const { data, error } = await supabase
|
||||||
|
.from('todos')
|
||||||
|
.update({ completed: true })
|
||||||
|
.eq('id', 1)
|
||||||
|
```
|
||||||
|
|
||||||
|
**Delete:**
|
||||||
|
```ts
|
||||||
|
const { error } = await supabase
|
||||||
|
.from('todos')
|
||||||
|
.delete()
|
||||||
|
.eq('id', 1)
|
||||||
|
```
|
||||||
|
|
||||||
|
### Simpele Authentication
|
||||||
|
- Supabase Auth UI component (plug & play)
|
||||||
|
- Magic Link login (geen wachtwoord nodig)
|
||||||
|
- Session checken met `supabase.auth.getUser()`
|
||||||
|
|
||||||
|
### Environment Variables
|
||||||
|
- `.env.local` voor secrets
|
||||||
|
- `NEXT_PUBLIC_` prefix voor client-side
|
||||||
|
- Nooit API keys committen naar Git
|
||||||
|
|
||||||
|
### AI Helpt Met
|
||||||
|
- Database schema suggesties
|
||||||
|
- Query schrijven als je vastloopt
|
||||||
|
- Error messages begrijpen
|
||||||
|
- Code voorbeelden genereren
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Tools
|
## Tools
|
||||||
- OpenCode/WebStorm
|
- Supabase (gratis tier)
|
||||||
- Supabase
|
|
||||||
- supabase-postgres-best-practices skill
|
|
||||||
- Next.js
|
- Next.js
|
||||||
|
- Cursor/OpenCode
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Lesopdracht (2 uur)
|
## Lesopdracht (2 uur)
|
||||||
|
|
||||||
### Deel 1: Supabase Skills Setup (10 min)
|
### Bouw een Todo App met Supabase
|
||||||
- Installeer "supabase-postgres-best-practices" skill in OpenCode/WebStorm
|
|
||||||
- Maak gratis Supabase project
|
|
||||||
- Bewaar credentials
|
|
||||||
|
|
||||||
### Deel 2: Bouw Todo App Backend (1u 50min)
|
**Deel 1: Supabase Setup (20 min)**
|
||||||
|
- Maak gratis Supabase account
|
||||||
|
- Maak nieuw project
|
||||||
|
- Kopieer URL en anon key naar `.env.local`
|
||||||
|
|
||||||
**Database Schema met AI + Skill (30 min):**
|
**Deel 2: Database via UI (20 min)**
|
||||||
- Prompt: "Ontwerp database schema voor todo app met users, todos (title, description, due_date, priority, completed), categories, proper relationships."
|
- Maak `todos` tabel via Table Editor
|
||||||
|
- Kolommen: `id` (auto), `title` (text), `completed` (boolean), `created_at` (timestamp)
|
||||||
|
- Voeg 3 test todos toe via UI
|
||||||
|
|
||||||
**RLS Policies met AI + Skill (30 min):**
|
**Deel 3: Next.js Integratie (1 uur)**
|
||||||
- Prompt: "Maak RLS policies: users kunnen alleen hun eigen todos zien/bewerken."
|
- Installeer `@supabase/supabase-js`
|
||||||
|
- Maak Supabase client
|
||||||
|
- Bouw simpele UI:
|
||||||
|
- Lijst van todos ophalen en tonen
|
||||||
|
- Form om nieuwe todo toe te voegen
|
||||||
|
- Checkbox om todo af te vinken
|
||||||
|
- Delete button
|
||||||
|
|
||||||
**Next.js Integratie (50 min):**
|
**Deel 4: Auth toevoegen (20 min)**
|
||||||
- Setup Supabase client
|
- Installeer `@supabase/auth-ui-react`
|
||||||
- Bouw UI:
|
- Voeg login pagina toe met Auth UI component
|
||||||
- Create todo
|
- Check of user ingelogd is
|
||||||
- List todos
|
|
||||||
- Complete/delete
|
### Deliverable
|
||||||
- Filter by category
|
- Werkende Todo app met Supabase backend
|
||||||
- Implementeer CRUD met error handling
|
- Login functionaliteit
|
||||||
- Test of RLS werkt
|
- CRUD operaties werken
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Huiswerk (2 uur)
|
## Huiswerk (2 uur)
|
||||||
|
|
||||||
### Extend Todo App
|
### Extend de Todo App
|
||||||
|
|
||||||
**Nieuwe Features:**
|
**Feature 1: Filtering (30 min)**
|
||||||
1. **Categories systeem** - create/assign/filter, colors
|
- Filter op: Alle / Actief / Voltooid
|
||||||
2. **User profile pagina** - avatar upload naar Storage, display name
|
- Sorteer op datum
|
||||||
3. **Stats dashboard** - completed vs incomplete charts, trends
|
|
||||||
|
|
||||||
**Deployment:**
|
**Feature 2: User-specifieke todos (30 min)**
|
||||||
- Deploy naar Vercel met proper env vars
|
- Voeg `user_id` kolom toe aan todos tabel
|
||||||
|
- Filter todos op ingelogde user
|
||||||
|
- Elke user ziet alleen eigen todos
|
||||||
|
|
||||||
### Reflectie (400 woorden)
|
**Feature 3: Polish (30 min)**
|
||||||
|
- Loading states
|
||||||
|
- Error handling met toast messages
|
||||||
|
- Empty state ("Geen todos gevonden")
|
||||||
|
|
||||||
Schrijf over:
|
**Deploy (30 min)**
|
||||||
- Verschil in security/quality met vs zonder Supabase skill?
|
- Deploy naar Vercel
|
||||||
- Nieuwe patterns geleerd?
|
- Voeg environment variables toe in Vercel dashboard
|
||||||
- Queries die je fout zou schrijven zonder AI?
|
- Test of alles werkt in productie
|
||||||
- Zou je backend bouwen zonder AI hulp?
|
|
||||||
|
### Deliverable
|
||||||
|
- Deployed Todo app op Vercel
|
||||||
|
- Screenshot van werkende app
|
||||||
|
- Link naar live versie
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Leerdoelen
|
## Leerdoelen
|
||||||
Na deze les kan de student:
|
Na deze les kan de student:
|
||||||
- Supabase project opzetten en configureren
|
- Een Supabase project opzetten
|
||||||
- Database schema's ontwerpen met AI + Skills
|
- Tabellen maken via de Supabase UI (zonder SQL)
|
||||||
- Row Level Security (RLS) policies implementeren
|
- De Supabase client installeren en configureren
|
||||||
- TypeScript types genereren van database
|
- Basis CRUD operaties uitvoeren (create, read, update, delete)
|
||||||
- CRUD operaties implementeren met Supabase client
|
- Simpele authenticatie implementeren met Auth UI
|
||||||
- De supabase-postgres-best-practices skill effectief gebruiken
|
- Environment variables correct gebruiken
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
# Les 10: Supabase Automation - Cron Jobs, Webhooks & AI Workflows
|
# Les 10: Project Setup & Repository Structure
|
||||||
|
|
||||||
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
||||||
>
|
>
|
||||||
@@ -11,144 +11,208 @@
|
|||||||
---
|
---
|
||||||
|
|
||||||
## Hoofdstuk
|
## Hoofdstuk
|
||||||
**Hoofdstuk 3: Advanced** (Les 8-18)
|
**Hoofdstuk 3: Advanced** (Les 10-18)
|
||||||
|
|
||||||
## Beschrijving
|
## Beschrijving
|
||||||
Leer dingen automatiseren met Supabase cron jobs die AI agents triggeren voor intelligente workflows.
|
Leer hoe je een professioneel project opzet met goede folder structuur, documentatie, en AI-configuratie files. Dit vormt de basis voor je eindopdracht.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Te Behandelen
|
## Te Behandelen
|
||||||
|
|
||||||
### Waarom Automatiseren?
|
### Waarom Project Structure Belangrijk Is
|
||||||
- Verminder manual werk
|
- AI tools werken beter met duidelijke structuur
|
||||||
- Consistente executie
|
- Makkelijker samenwerken
|
||||||
- Scale zonder effort
|
- Sneller nieuwe features toevoegen
|
||||||
- 24/7 beschikbaarheid
|
- Professionele uitstraling
|
||||||
|
|
||||||
### Types van Automation
|
### Ideale Folder Structuur
|
||||||
- Scheduled tasks (cron jobs)
|
|
||||||
- Event-driven (webhooks)
|
|
||||||
- AI-powered workflows
|
|
||||||
|
|
||||||
### Supabase Edge Functions voor Automation
|
```
|
||||||
- Deno runtime
|
project/
|
||||||
- TypeScript
|
├── .cursor/
|
||||||
- Serverless at edge
|
│ └── rules/ # Cursor instructies
|
||||||
|
│ ├── general.mdc # Algemene project regels
|
||||||
|
│ └── components.mdc # Component-specifieke regels
|
||||||
|
├── docs/
|
||||||
|
│ ├── PROMPT-LOG.md # Belangrijke AI prompts
|
||||||
|
│ ├── AI-DECISIONS.md # Architectuur beslissingen
|
||||||
|
│ └── PROJECT-BRIEF.md # Project beschrijving
|
||||||
|
├── src/
|
||||||
|
│ ├── app/ # Next.js App Router
|
||||||
|
│ ├── components/
|
||||||
|
│ │ ├── ui/ # Basis UI components
|
||||||
|
│ │ └── features/ # Feature-specifieke components
|
||||||
|
│ ├── lib/ # Utilities en helpers
|
||||||
|
│ └── types/ # TypeScript types
|
||||||
|
├── .env.local # Environment variables
|
||||||
|
├── .env.example # Template voor env vars
|
||||||
|
├── .gitignore
|
||||||
|
└── README.md
|
||||||
|
```
|
||||||
|
|
||||||
### Scheduled Edge Functions (Cron Jobs)
|
### .cursorrules Files
|
||||||
- Timing configuratie
|
|
||||||
- Use cases
|
|
||||||
|
|
||||||
### Webhook Edge Functions
|
**Wat zijn .cursorrules?**
|
||||||
- Getriggerd door database changes
|
- Markdown files met instructies voor Cursor
|
||||||
|
- Project-specifieke regels en conventies
|
||||||
|
- Worden automatisch meegenomen in context
|
||||||
|
|
||||||
### AI Integratie in Edge Functions
|
**Voorbeeld `general.mdc`:**
|
||||||
- Call OpenAI/Anthropic APIs
|
```markdown
|
||||||
- Process data met AI
|
# Project Rules
|
||||||
|
|
||||||
### Supabase Cron Jobs
|
## Tech Stack
|
||||||
- pg_cron extension
|
- Next.js 14 met App Router
|
||||||
- Schedule taken in Postgres
|
- TypeScript (strict mode)
|
||||||
|
- Tailwind CSS voor styling
|
||||||
|
- Supabase voor backend
|
||||||
|
|
||||||
### Database Webhooks
|
## Code Conventies
|
||||||
- Supabase Realtime broadcasts
|
- Gebruik functionele components
|
||||||
- INSERT/UPDATE/DELETE triggers
|
- Prefer named exports
|
||||||
|
- Destructure props
|
||||||
|
- Gebruik async/await (geen .then())
|
||||||
|
|
||||||
### Edge Functions Chainen
|
## Styling
|
||||||
webhook → Edge Function → AI → actie
|
- Tailwind classes, geen inline styles
|
||||||
|
- Mobile-first approach
|
||||||
|
- Gebruik design tokens waar mogelijk
|
||||||
|
```
|
||||||
|
|
||||||
### AI Automation Workflow Patterns
|
### docs/ Folder
|
||||||
- Nieuwe user → AI onboarding email
|
|
||||||
- Content → AI moderatie → approve/reject
|
|
||||||
- Dagelijks → data → AI summary → email
|
|
||||||
|
|
||||||
### AI Agents in Automation
|
**PROMPT-LOG.md**
|
||||||
- Monitoring agents
|
- Log van belangrijke prompts die tot goede code leidden
|
||||||
- Data verrijking agents
|
- Minimaal 10 prompts documenteren
|
||||||
|
- Format: doel → prompt → resultaat
|
||||||
|
|
||||||
|
**AI-DECISIONS.md**
|
||||||
|
- Architectuur beslissingen gemaakt met AI hulp
|
||||||
|
- Waarom bepaalde keuzes gemaakt
|
||||||
|
- Trade-offs en alternatieven
|
||||||
|
|
||||||
|
**PROJECT-BRIEF.md**
|
||||||
|
- Wat doet het project?
|
||||||
|
- Wie is de doelgroep?
|
||||||
|
- Welke features zijn er?
|
||||||
|
|
||||||
|
### Environment Variables
|
||||||
|
|
||||||
|
**.env.example** (commit naar Git):
|
||||||
|
```
|
||||||
|
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
|
||||||
|
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
|
||||||
|
OPENAI_API_KEY=your-openai-key
|
||||||
|
```
|
||||||
|
|
||||||
|
**.env.local** (NOOIT committen):
|
||||||
|
```
|
||||||
|
NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
|
||||||
|
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...
|
||||||
|
OPENAI_API_KEY=sk-...
|
||||||
|
```
|
||||||
|
|
||||||
|
### README.md Best Practices
|
||||||
|
- Project titel en korte beschrijving
|
||||||
|
- Screenshots of demo GIF
|
||||||
|
- Installatie instructies
|
||||||
|
- Environment variables uitleg
|
||||||
|
- Beschikbare scripts (`npm run dev`, etc.)
|
||||||
|
|
||||||
|
### Git Best Practices
|
||||||
|
- Kleine, focused commits
|
||||||
|
- Duidelijke commit messages
|
||||||
|
- Feature branches
|
||||||
|
- `.gitignore` correct ingesteld
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Tools
|
## Tools
|
||||||
- Supabase (Edge Functions, pg_cron)
|
- Cursor
|
||||||
- Claude API / OpenAI API
|
- Git & GitHub
|
||||||
- Resend / SendGrid (email)
|
- Next.js
|
||||||
|
- VS Code / WebStorm
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Lesopdracht (2 uur)
|
## Lesopdracht (2 uur)
|
||||||
|
|
||||||
Bouw 2 automation workflows: 1 scheduled + 1 event-driven met AI.
|
### Richt je Eindproject Repository In
|
||||||
|
|
||||||
### Deel 1: Scheduled - Daily Summary Email (1 uur)
|
**Deel 1: Repository Setup (30 min)**
|
||||||
|
- Maak nieuwe GitHub repository
|
||||||
|
- Clone lokaal
|
||||||
|
- Run `npx create-next-app@latest` met TypeScript + Tailwind
|
||||||
|
- Push initial commit
|
||||||
|
|
||||||
**Flow:**
|
**Deel 2: Folder Structuur (30 min)**
|
||||||
```
|
- Maak `docs/` folder met:
|
||||||
Supabase cron (dagelijks 9:00)
|
- `PROJECT-BRIEF.md` (beschrijf je eindproject idee)
|
||||||
→ Edge Function
|
- `PROMPT-LOG.md` (lege template)
|
||||||
→ Haal gisteren's data op
|
- `AI-DECISIONS.md` (lege template)
|
||||||
→ Claude API voor intelligente samenvatting
|
- Maak `.cursor/rules/` folder met:
|
||||||
→ Email via Resend/SendGrid
|
- `general.mdc` (project regels)
|
||||||
```
|
- Reorganiseer `src/` folder
|
||||||
|
|
||||||
- Implementatie
|
**Deel 3: Environment Setup (20 min)**
|
||||||
- Test
|
- Maak `.env.example` met alle benodigde variabelen
|
||||||
- Documentatie
|
- Maak `.env.local` met echte waarden
|
||||||
|
- Controleer `.gitignore` (env files moeten erin staan!)
|
||||||
|
|
||||||
### Deel 2: Event-Driven - AI Content Moderation (1 uur)
|
**Deel 4: README & Git (40 min)**
|
||||||
|
- Schrijf complete README.md
|
||||||
|
- Maak eerste feature branch
|
||||||
|
- Commit alle changes met goede messages
|
||||||
|
- Push en maak PR (voor jezelf)
|
||||||
|
|
||||||
**Trigger:** Webhook bij nieuwe todo
|
### Deliverable
|
||||||
|
- GitHub repository met complete structuur
|
||||||
**Flow:**
|
- Alle docs files aanwezig
|
||||||
```
|
- .cursorrules file geschreven
|
||||||
INSERT
|
- README compleet
|
||||||
→ Webhook
|
|
||||||
→ Edge Function
|
|
||||||
→ Claude API moderatie check
|
|
||||||
→ Flag if problematisch
|
|
||||||
→ Enrich if clean (tags, effort estimate, subtask suggestions)
|
|
||||||
→ Save to database
|
|
||||||
```
|
|
||||||
|
|
||||||
- Implementatie
|
|
||||||
- Test
|
|
||||||
- Documentatie
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Huiswerk (2 uur)
|
## Huiswerk (2 uur)
|
||||||
|
|
||||||
### Deel 1: Intelligente Notificaties (1 uur)
|
### Verfijn je Project Setup
|
||||||
|
|
||||||
**Cron 8:00:**
|
**Deel 1: .cursorrules Uitbreiden (45 min)**
|
||||||
- Haal due todos op
|
- Voeg `components.mdc` toe met component conventies
|
||||||
- Per user: Claude genereert gepersonaliseerd motiverend bericht
|
- Voeg `api.mdc` toe met API/Supabase regels
|
||||||
- Email met AI message + todo lijst
|
- Test of Cursor de regels oppikt
|
||||||
|
|
||||||
### Deel 2: AI Task Breakdown Agent (1 uur)
|
**Deel 2: Documentatie (45 min)**
|
||||||
|
- Vul `PROJECT-BRIEF.md` volledig in:
|
||||||
|
- Projectnaam en tagline
|
||||||
|
- Probleem dat je oplost
|
||||||
|
- Target audience
|
||||||
|
- Core features (3-5)
|
||||||
|
- Nice-to-have features
|
||||||
|
- Tech stack keuzes
|
||||||
|
- Start `AI-DECISIONS.md` met eerste beslissing
|
||||||
|
|
||||||
**Webhook op INSERT:**
|
**Deel 3: Basis Components (30 min)**
|
||||||
- Als todo lang/complex → automatisch Claude aanroepen
|
- Maak `src/components/ui/` met basic components:
|
||||||
- Suggestie 3-5 subtaken
|
- Button.tsx
|
||||||
- Auto-create in database
|
- Card.tsx
|
||||||
|
- Input.tsx
|
||||||
|
- Gebruik Cursor met je nieuwe .cursorrules
|
||||||
|
|
||||||
**Test met complex todo**
|
### Deliverable
|
||||||
|
- Uitgebreide .cursorrules (minimaal 2 files)
|
||||||
### Deliverables
|
- Volledig ingevulde PROJECT-BRIEF.md
|
||||||
- 4 werkende automations
|
- Basis UI components gemaakt met Cursor
|
||||||
- Documentatie
|
- Screenshot van Cursor die je rules gebruikt
|
||||||
- Reflectie (300 woorden):
|
|
||||||
- Kracht van automation?
|
|
||||||
- Wat nog meer automatiseren?
|
|
||||||
- Gebruik in echte projecten?
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Leerdoelen
|
## Leerdoelen
|
||||||
Na deze les kan de student:
|
Na deze les kan de student:
|
||||||
- Supabase Edge Functions schrijven en deployen
|
- Een professionele project structuur opzetten
|
||||||
- Cron jobs configureren met pg_cron
|
- .cursorrules files schrijven voor project-specifieke AI instructies
|
||||||
- Webhooks triggeren op database changes
|
- Documentatie files maken (PROMPT-LOG, AI-DECISIONS, PROJECT-BRIEF)
|
||||||
- AI APIs integreren in Edge Functions
|
- Environment variables correct beheren
|
||||||
- Scheduled en event-driven workflows bouwen
|
- Git best practices toepassen
|
||||||
- Praktische AI automation patterns implementeren
|
- Een README schrijven die anderen kunnen volgen
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
# Les 14: Supabase Advanced - Realtime, Storage & Edge Functions
|
# Les 14: Debugging & Code Review met AI
|
||||||
|
|
||||||
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
||||||
>
|
>
|
||||||
@@ -11,145 +11,201 @@
|
|||||||
---
|
---
|
||||||
|
|
||||||
## Hoofdstuk
|
## Hoofdstuk
|
||||||
**Hoofdstuk 3: Advanced** (Les 8-18)
|
**Hoofdstuk 3: Advanced** (Les 10-18)
|
||||||
|
|
||||||
## Beschrijving
|
## Beschrijving
|
||||||
Geavanceerde Supabase features voor productie apps.
|
Leer hoe je AI effectief inzet voor debugging en code review. Begrijp foutmeldingen, los problemen op, en verbeter je code kwaliteit.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Te Behandelen
|
## Te Behandelen
|
||||||
|
|
||||||
### Realtime Subscriptions
|
### Waarom AI voor Debugging?
|
||||||
- Hoe Postgres broadcasts
|
- AI begrijpt error messages vaak beter dan Google
|
||||||
- Subscriben op table changes
|
- Kan context van jouw code meenemen
|
||||||
- Channel-based real-time (presence, broadcast)
|
- Suggereert oplossingen specifiek voor jouw situatie
|
||||||
- Collaborative features
|
- Leert je patterns herkennen
|
||||||
- Reconnections handlen
|
|
||||||
|
|
||||||
### Supabase Storage
|
### Error Messages Begrijpen
|
||||||
- File uploads (images, PDFs)
|
|
||||||
- Buckets organiseren
|
|
||||||
- Image transformations (resize, format, quality)
|
|
||||||
- Signed URLs
|
|
||||||
- Storage RLS policies
|
|
||||||
|
|
||||||
### Edge Functions Deep Dive
|
**Typische JavaScript/React errors:**
|
||||||
- Deno runtime
|
- `TypeError: Cannot read properties of undefined`
|
||||||
- TypeScript
|
- `ReferenceError: x is not defined`
|
||||||
- At edge
|
- `SyntaxError: Unexpected token`
|
||||||
- Waarom gebruiken:
|
- `Hydration error` (Next.js specifiek)
|
||||||
- Hide API keys
|
|
||||||
- Server-side logic
|
|
||||||
- Scheduled tasks
|
|
||||||
- Webhooks
|
|
||||||
|
|
||||||
### AI Integratie Patterns
|
**Hoe AI vragen:**
|
||||||
- Call OpenAI/Anthropic veilig
|
```
|
||||||
- Streaming responses
|
Ik krijg deze error:
|
||||||
|
[plak error message]
|
||||||
|
|
||||||
### Praktische Patterns
|
In deze code:
|
||||||
- Form processing
|
[plak relevante code]
|
||||||
- Emails
|
|
||||||
- Data verrijking
|
|
||||||
|
|
||||||
### Authentication Advanced
|
Wat gaat er mis en hoe los ik het op?
|
||||||
- Social logins (Google, GitHub, Discord)
|
```
|
||||||
- Magic links
|
|
||||||
- Email confirmatie
|
|
||||||
- Password reset
|
|
||||||
- Session management
|
|
||||||
|
|
||||||
### Error Handling & Debugging
|
### Debugging Workflow met AI
|
||||||
- Supabase error messages
|
|
||||||
- RLS debuggen
|
|
||||||
- Logging
|
|
||||||
|
|
||||||
### Cursor Composer
|
**Stap 1: Isoleer het probleem**
|
||||||
- Voor complexe multi-feature development
|
- Waar treedt de error op?
|
||||||
|
- Wat was de laatste wijziging?
|
||||||
|
- Kan je het reproduceren?
|
||||||
|
|
||||||
|
**Stap 2: Verzamel context**
|
||||||
|
- Error message (volledig!)
|
||||||
|
- Relevante code
|
||||||
|
- Wat je verwacht vs wat er gebeurt
|
||||||
|
|
||||||
|
**Stap 3: Vraag AI**
|
||||||
|
- Wees specifiek
|
||||||
|
- Geef context
|
||||||
|
- Vraag om uitleg, niet alleen fix
|
||||||
|
|
||||||
|
**Stap 4: Begrijp de oplossing**
|
||||||
|
- Vraag door als je het niet snapt
|
||||||
|
- Leer het pattern voor volgende keer
|
||||||
|
|
||||||
|
### Console.log Debugging
|
||||||
|
- Strategisch plaatsen
|
||||||
|
- Variabele waarden checken
|
||||||
|
- Flow van code volgen
|
||||||
|
- AI kan helpen met waar te loggen
|
||||||
|
|
||||||
|
### Browser DevTools Basics
|
||||||
|
- Console tab: errors en logs
|
||||||
|
- Network tab: API calls checken
|
||||||
|
- Elements tab: HTML/CSS inspecteren
|
||||||
|
- React DevTools: component state bekijken
|
||||||
|
|
||||||
|
### Code Review met AI
|
||||||
|
|
||||||
|
**Wat kan AI reviewen:**
|
||||||
|
- Code kwaliteit en leesbaarheid
|
||||||
|
- Potentiële bugs
|
||||||
|
- Performance issues
|
||||||
|
- Security problemen
|
||||||
|
- Best practices
|
||||||
|
|
||||||
|
**Goede review prompt:**
|
||||||
|
```
|
||||||
|
Review deze code op:
|
||||||
|
1. Bugs of edge cases die ik mis
|
||||||
|
2. Performance verbeteringen
|
||||||
|
3. Leesbaarheid
|
||||||
|
4. Best practices voor React/Next.js
|
||||||
|
|
||||||
|
[plak code]
|
||||||
|
```
|
||||||
|
|
||||||
|
### Veelvoorkomende Issues die AI Vindt
|
||||||
|
- Missing error handling
|
||||||
|
- Memory leaks (useEffect cleanup)
|
||||||
|
- Onnodig re-renders
|
||||||
|
- Hardcoded values
|
||||||
|
- Missing loading/error states
|
||||||
|
- Accessibility issues
|
||||||
|
|
||||||
|
### Refactoring met AI
|
||||||
|
- "Hoe kan ik deze code simplificeren?"
|
||||||
|
- "Extract dit naar een custom hook"
|
||||||
|
- "Maak dit component meer herbruikbaar"
|
||||||
|
|
||||||
|
### Wanneer NIET AI Vertrouwen
|
||||||
|
- Als je de oplossing niet begrijpt
|
||||||
|
- Bij security-gerelateerde code (dubbel check!)
|
||||||
|
- Bij verouderde info (check versie docs)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Tools
|
## Tools
|
||||||
- Supabase (Realtime, Storage, Edge Functions)
|
|
||||||
- Cursor
|
- Cursor
|
||||||
- OpenAI/Anthropic API
|
- Browser DevTools
|
||||||
|
- React DevTools
|
||||||
|
- Console/Terminal
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Lesopdracht (2 uur)
|
## Lesopdracht (2 uur)
|
||||||
|
|
||||||
### Level Up Todo App met 3 Advanced Features (met Cursor)
|
### Debugging Challenge
|
||||||
|
|
||||||
### Feature 1: Realtime Collaboration (40 min)
|
Je krijgt een project met opzettelijke bugs. Los ze op met AI hulp.
|
||||||
|
|
||||||
Real-time updates wanneer user A/B changes:
|
**Deel 1: Setup (10 min)**
|
||||||
- Subscribe
|
- Clone het buggy project (wordt gedeeld)
|
||||||
- Update UI
|
- Run `npm install` en `npm run dev`
|
||||||
- Show "live" indicator
|
- Zie alle errors!
|
||||||
- Handle reconnection
|
|
||||||
|
|
||||||
**Test met multiple windows**
|
**Deel 2: Bug Hunting (1 uur 20 min)**
|
||||||
|
|
||||||
### Feature 2: File Attachments met Storage (40 min)
|
Los de volgende bugs op (met AI hulp):
|
||||||
|
|
||||||
Attach files (images/PDFs):
|
| Bug | Symptoom |
|
||||||
- Upload button
|
|-----|----------|
|
||||||
- Thumbnail voor images (transformations)
|
| 1 | App crashed bij opstarten |
|
||||||
- Download voor PDFs
|
| 2 | Data wordt niet geladen |
|
||||||
- Delete optie
|
| 3 | Form submit werkt niet |
|
||||||
- Proper RLS
|
| 4 | Styling is broken op mobile |
|
||||||
|
| 5 | Infinite loop bij useEffect |
|
||||||
|
| 6 | Button click doet niets |
|
||||||
|
|
||||||
### Feature 3: AI-Powered Task Suggestions met Edge Function (40 min)
|
**Per bug:**
|
||||||
|
- Identificeer de error message
|
||||||
|
- Vraag AI om hulp met context
|
||||||
|
- Implementeer de fix
|
||||||
|
- Documenteer wat je geleerd hebt
|
||||||
|
|
||||||
"Suggest Subtasks" button:
|
**Deel 3: Documentatie (30 min)**
|
||||||
- Edge Function
|
- Voeg toe aan je `PROMPT-LOG.md`:
|
||||||
- OpenAI/Anthropic API (hide key)
|
- De prompts die je gebruikte
|
||||||
- AI returns 3-5 subtasks
|
- Wat werkte wel/niet
|
||||||
- Auto-create in database
|
|
||||||
- Stream results
|
|
||||||
|
|
||||||
**Use Cursor Composer voor alle 3 features orchestreren**
|
### Deliverable
|
||||||
|
- Alle 6 bugs gefixed
|
||||||
|
- PROMPT-LOG.md bijgewerkt
|
||||||
|
- Korte notities per bug: wat was het probleem, hoe opgelost
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Huiswerk (2 uur)
|
## Huiswerk (2 uur)
|
||||||
|
|
||||||
### Bouw Production-Ready Supabase Starter Template
|
### Code Review Je Eigen Project
|
||||||
|
|
||||||
**Use Cursor Composer + Skills**
|
**Deel 1: Self-Review met AI (1 uur)**
|
||||||
|
- Kies 3 belangrijke files uit je eindproject
|
||||||
|
- Laat AI ze reviewen met een goede prompt
|
||||||
|
- Documenteer bevindingen in `AI-DECISIONS.md`
|
||||||
|
|
||||||
### Include:
|
**Per file noteer:**
|
||||||
|
- Welke issues AI vond
|
||||||
|
- Welke je hebt gefixed
|
||||||
|
- Welke je bewust negeert (en waarom)
|
||||||
|
|
||||||
| Feature | Details |
|
**Deel 2: Refactoring (45 min)**
|
||||||
|---------|---------|
|
- Kies 1 component dat te complex is
|
||||||
| Complete Auth | Email + Google, protected routes HOC, profile met avatar |
|
- Vraag AI om refactoring suggesties
|
||||||
| Database Examples | Schema met relationships, RLS gedocumenteerd, types auto-generated |
|
- Implementeer de verbeteringen
|
||||||
| Realtime Demo | Chat of live updates |
|
- Vergelijk before/after
|
||||||
| 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
|
**Deel 3: Debugging Checklist (15 min)**
|
||||||
|
- Maak persoonlijke debugging checklist
|
||||||
**Test:**
|
- Wat check je eerst bij errors?
|
||||||
- Clone
|
- Welke prompts werken goed voor jou?
|
||||||
- Rename
|
|
||||||
- Deploy naar Vercel
|
|
||||||
- Aim: <10 min
|
|
||||||
|
|
||||||
### Deliverable
|
### Deliverable
|
||||||
- Template repo
|
- AI-DECISIONS.md met review bevindingen
|
||||||
- Setup video
|
- 1 gerefactored component
|
||||||
- Reflectie
|
- Persoonlijke debugging checklist
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Leerdoelen
|
## Leerdoelen
|
||||||
Na deze les kan de student:
|
Na deze les kan de student:
|
||||||
- Realtime subscriptions implementeren voor collaborative features
|
- Error messages lezen en begrijpen
|
||||||
- Supabase Storage gebruiken met transformations en RLS
|
- Effectieve debugging prompts schrijven voor AI
|
||||||
- Edge Functions schrijven met AI integratie
|
- Browser DevTools gebruiken voor debugging
|
||||||
- Advanced authentication implementeren (social, magic links)
|
- Code laten reviewen door AI
|
||||||
- Errors debuggen in Supabase (RLS, queries)
|
- Feedback van AI kritisch evalueren
|
||||||
- Een production-ready Supabase starter template bouwen
|
- Refactoring uitvoeren met AI suggesties
|
||||||
|
- Documenteren wat geleerd is van debugging sessies
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
# Les 16: Building AI-Powered Features & Workflow Automation
|
# Les 16: Vercel AI SDK - AI Features in je App
|
||||||
|
|
||||||
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
||||||
>
|
>
|
||||||
@@ -11,153 +11,183 @@
|
|||||||
---
|
---
|
||||||
|
|
||||||
## Hoofdstuk
|
## Hoofdstuk
|
||||||
**Hoofdstuk 3: Advanced** (Les 8-18)
|
**Hoofdstuk 3: Advanced** (Les 10-18)
|
||||||
|
|
||||||
## Beschrijving
|
## Beschrijving
|
||||||
Integreer AI mogelijkheden in apps.
|
Bouw AI-powered features in je apps met de Vercel AI SDK. Leer hoe je chat interfaces, streaming responses en AI-gegenereerde content implementeert.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Te Behandelen
|
## Te Behandelen
|
||||||
|
|
||||||
### AI APIs Overzicht
|
### Waarom Vercel AI SDK?
|
||||||
- OpenAI API
|
- Abstractie over raw API calls
|
||||||
- Anthropic API
|
- Built-in streaming support
|
||||||
- Pricing
|
- React hooks voor eenvoudige integratie
|
||||||
- Rate limits
|
- Provider-agnostic (OpenAI, Anthropic, etc.)
|
||||||
|
- Edge-ready
|
||||||
|
|
||||||
### Veel Voorkomende AI Features
|
### Installatie & Setup
|
||||||
|
```bash
|
||||||
|
npm install ai openai
|
||||||
|
# of voor Anthropic:
|
||||||
|
npm install ai @anthropic-ai/sdk
|
||||||
|
```
|
||||||
|
|
||||||
|
### Core Hooks
|
||||||
|
|
||||||
|
#### `useChat` - Voor Conversaties
|
||||||
|
```tsx
|
||||||
|
import { useChat } from 'ai/react';
|
||||||
|
|
||||||
|
export function ChatComponent() {
|
||||||
|
const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{messages.map(m => (
|
||||||
|
<div key={m.id}>{m.role}: {m.content}</div>
|
||||||
|
))}
|
||||||
|
<form onSubmit={handleSubmit}>
|
||||||
|
<input value={input} onChange={handleInputChange} />
|
||||||
|
<button type="submit" disabled={isLoading}>Send</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### `useCompletion` - Voor Single Completions
|
||||||
- Tekst generatie
|
- Tekst generatie
|
||||||
- Samenvatting
|
- Samenvattingen
|
||||||
- Chatbots
|
- One-shot responses
|
||||||
- Semantische zoeken
|
|
||||||
- Aanbevelingen
|
|
||||||
- Sentiment analyse
|
|
||||||
- Vertaling
|
|
||||||
|
|
||||||
### API Integratie Patterns
|
### API Routes Setup
|
||||||
- Streaming responses
|
|
||||||
- Error handling
|
|
||||||
- Caching
|
|
||||||
- Prompt optimalisatie
|
|
||||||
|
|
||||||
### API Keys Verbergen
|
```ts
|
||||||
|
// app/api/chat/route.ts
|
||||||
|
import { openai } from '@ai-sdk/openai';
|
||||||
|
import { streamText } from 'ai';
|
||||||
|
|
||||||
⚠️ **NOOIT in frontend!**
|
export async function POST(req: Request) {
|
||||||
|
const { messages } = await req.json();
|
||||||
|
|
||||||
**Gebruik Supabase Edge Functions:**
|
const result = streamText({
|
||||||
- Server-side
|
model: openai('gpt-4o'),
|
||||||
- Keys in env vars
|
messages,
|
||||||
- Verify requests (auth)
|
});
|
||||||
|
|
||||||
|
return result.toDataStreamResponse();
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Streaming Responses
|
||||||
|
- Waarom streaming: betere UX, snellere perceived performance
|
||||||
|
- Hoe het werkt: Server-Sent Events (SSE)
|
||||||
|
- Token-by-token rendering
|
||||||
|
- Loading states tijdens streaming
|
||||||
|
|
||||||
|
### Integratie met Supabase
|
||||||
|
- Chat history opslaan in database
|
||||||
|
- User-specific conversations
|
||||||
|
- Message threading
|
||||||
|
|
||||||
|
### Error Handling
|
||||||
|
- Network errors
|
||||||
- Rate limiting
|
- Rate limiting
|
||||||
|
- Token limits
|
||||||
### Streaming UI
|
- Graceful degradation
|
||||||
- Toon AI responses real-time
|
|
||||||
- Vercel AI SDK of manual
|
|
||||||
|
|
||||||
### Cost Management
|
### Cost Management
|
||||||
- Tokens tellen
|
- Token counting
|
||||||
- Cache queries
|
- Model selection (gpt-4o-mini vs gpt-4o)
|
||||||
- Goedkopere modellen
|
- Caching strategies
|
||||||
- Monitor spend
|
- Usage monitoring
|
||||||
|
|
||||||
### 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
|
## Tools
|
||||||
- Supabase Edge Functions
|
- Vercel AI SDK (`ai` package)
|
||||||
- OpenAI/Anthropic API
|
- Next.js API Routes
|
||||||
- n8n/Pipedream
|
- OpenAI API / Anthropic API
|
||||||
- Cursor
|
- Cursor
|
||||||
|
- Supabase (voor chat history)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Lesopdracht (2 uur)
|
## Lesopdracht (2 uur)
|
||||||
|
|
||||||
Bouw 2 features: 1 AI-powered app feature + 1 workflow automation
|
### Bouw een AI Chat Component
|
||||||
|
|
||||||
### Deel 1: AI Feature (1 uur)
|
**Stap 1: Setup (20 min)**
|
||||||
|
- Installeer `ai` en `openai` packages
|
||||||
|
- Configureer environment variables
|
||||||
|
- Maak API route `/api/chat`
|
||||||
|
|
||||||
**Kies 1 met Cursor:**
|
**Stap 2: Basic Chat (40 min)**
|
||||||
|
- Implementeer `useChat` hook
|
||||||
|
- Bouw chat UI met Tailwind
|
||||||
|
- Test streaming responses
|
||||||
|
|
||||||
| Optie | Beschrijving |
|
**Stap 3: Supabase Integratie (40 min)**
|
||||||
|-------|-------------|
|
- Maak `conversations` en `messages` tabellen
|
||||||
| A | AI Blog Post Generator |
|
- Sla berichten op na elke response
|
||||||
| B | Smart Summarizer |
|
- Laad conversation history bij page load
|
||||||
| C | AI Writing Assistant |
|
|
||||||
| D | Intelligent Search |
|
|
||||||
|
|
||||||
**Implementeer via Supabase Edge Function**
|
**Stap 4: Polish (20 min)**
|
||||||
|
- Loading indicators
|
||||||
### Deel 2: Workflow Automation (1 uur)
|
- Error states
|
||||||
|
- Scroll to bottom
|
||||||
**Kies n8n OF Pipedream**
|
- Clear conversation button
|
||||||
|
|
||||||
**Bouw 1:**
|
|
||||||
|
|
||||||
| Optie | Flow |
|
|
||||||
|-------|------|
|
|
||||||
| A | Smart Form Processor |
|
|
||||||
| B | Daily AI Summary |
|
|
||||||
|
|
||||||
**Test end-to-end**
|
|
||||||
|
|
||||||
### Deliverable
|
### Deliverable
|
||||||
- Beide features deployed + working + gedocumenteerd
|
- Werkende AI chat met streaming
|
||||||
|
- Conversation history in Supabase
|
||||||
|
- Clean UI met goede UX
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Huiswerk (2 uur)
|
## Huiswerk (2 uur)
|
||||||
|
|
||||||
### Polish & Extend AI Feature
|
### Bouw AI Feature voor Eindproject
|
||||||
|
|
||||||
### Deel 1: UX (30 min)
|
Kies 1 passend bij je eindproject:
|
||||||
- Streaming
|
|
||||||
- Copy button met toast
|
|
||||||
- History (Supabase)
|
|
||||||
- Loading skeletons
|
|
||||||
- Empty states
|
|
||||||
- Keyboard shortcuts
|
|
||||||
|
|
||||||
### Deel 2: Monitoring & Safety (30 min)
|
| Eindproject | AI Feature |
|
||||||
- Request logging
|
|-------------|------------|
|
||||||
- Usage dashboard
|
| AI Recipe Generator | Chat: "Wat kan ik maken met kip en rijst?" |
|
||||||
- Rate limiting
|
| Smart Budget Buddy | Chat: "Analyseer mijn uitgaven deze maand" |
|
||||||
- Content filtering
|
| Travel Planner AI | Chat: "Plan een weekend Barcelona" |
|
||||||
- Timeout handling
|
|
||||||
|
|
||||||
### Deel 3: Documentation (30 min)
|
### Deel 1: Implementatie (1 uur)
|
||||||
- API docs
|
- Pas `useChat` aan voor jouw use case
|
||||||
- User guide
|
- Custom system prompt voor context
|
||||||
- Add to Starter Template
|
- Relevante data uit Supabase meegeven als context
|
||||||
|
|
||||||
### Deel 4: Build 2 Automations voor Eindopdracht (30 min)
|
### Deel 2: UX Polish (30 min)
|
||||||
- 2 n8n/Pipedream automations die echt helpen
|
- Streaming met typing indicator
|
||||||
|
- Suggested prompts / quick actions
|
||||||
|
- Copy response button
|
||||||
|
- Regenerate button
|
||||||
|
|
||||||
|
### Deel 3: Documentatie (30 min)
|
||||||
|
- Documenteer je AI feature in `docs/AI-FEATURE.md`
|
||||||
|
- Beschrijf system prompt keuzes
|
||||||
|
- Leg integratie met Supabase uit
|
||||||
|
|
||||||
### Deliverable
|
### Deliverable
|
||||||
- Production AI feature
|
- AI feature geïntegreerd in eindproject
|
||||||
- Automations
|
- Documentatie
|
||||||
- Docs
|
- Deployed preview
|
||||||
- Reflectie (300 woorden)
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Leerdoelen
|
## Leerdoelen
|
||||||
Na deze les kan de student:
|
Na deze les kan de student:
|
||||||
- AI APIs integreren (OpenAI, Anthropic)
|
- Vercel AI SDK installeren en configureren
|
||||||
- API keys veilig verbergen via Edge Functions
|
- `useChat` en `useCompletion` hooks gebruiken
|
||||||
- Streaming UI implementeren
|
- Streaming responses implementeren
|
||||||
- Kosten beheren en monitoren
|
- API routes opzetten voor AI providers
|
||||||
- Workflow automation tools gebruiken (n8n/Pipedream)
|
- Chat history opslaan in Supabase
|
||||||
- Praktische AI-powered features bouwen
|
- Error handling en loading states implementeren
|
||||||
|
- Kosten bewust omgaan met AI APIs
|
||||||
|
|||||||
101
readme.md
101
readme.md
@@ -16,14 +16,14 @@ Een 18-weekse cursus die studenten meeneemt van AI-beginner naar AI-powered deve
|
|||||||
| 04 | [Effectief Prompting, Iteratief Werken & Skills](Samenvattingen/Les04-Samenvatting.md) | 2 | 📋 Samenvatting |
|
| 04 | [Effectief Prompting, Iteratief Werken & Skills](Samenvattingen/Les04-Samenvatting.md) | 2 | 📋 Samenvatting |
|
||||||
| 05 | [AI voor Content en Asset Generation](Samenvattingen/Les05-Samenvatting.md) | 2 | 📋 Samenvatting |
|
| 05 | [AI voor Content en Asset Generation](Samenvattingen/Les05-Samenvatting.md) | 2 | 📋 Samenvatting |
|
||||||
| 06 | [MCP & Component Libraries](Samenvattingen/Les06-Samenvatting.md) | 2 | 📋 Samenvatting |
|
| 06 | [MCP & Component Libraries](Samenvattingen/Les06-Samenvatting.md) | 2 | 📋 Samenvatting |
|
||||||
| 07 | [Backend Made Easy met Supabase + AI](Samenvattingen/Les07-Samenvatting.md) | 2 | 📋 Samenvatting |
|
| 07 | [Backend Basics met Supabase](Samenvattingen/Les07-Samenvatting.md) | 2 | 📋 Samenvatting |
|
||||||
| 08 | [Claude Code - Agentic Coding Mode](Samenvattingen/Les08-Samenvatting.md) | 2 | 📋 Samenvatting |
|
| 08 | [Claude Code - Agentic Coding Mode](Samenvattingen/Les08-Samenvatting.md) | 2 | 📋 Samenvatting |
|
||||||
| 09 | [AI Agents - Custom GPTs & Claude Projects](Samenvattingen/Les09-Samenvatting.md) | 2 | 📋 Samenvatting |
|
| 09 | [AI Agents - Custom GPTs & Claude Projects](Samenvattingen/Les09-Samenvatting.md) | 2 | 📋 Samenvatting |
|
||||||
| 10 | [Supabase Automation - Cron Jobs & Webhooks](Samenvattingen/Les10-Samenvatting.md) | 3 | 📋 Samenvatting |
|
| 10 | [Project Setup & Repository Structure](Samenvattingen/Les10-Samenvatting.md) | 3 | 📋 Samenvatting |
|
||||||
| 11 | [Introduction to Cursor](Samenvattingen/Les11-Samenvatting.md) | 3 | 📋 Samenvatting |
|
| 11 | [Introduction to Cursor](Samenvattingen/Les11-Samenvatting.md) | 3 | 📋 Samenvatting |
|
||||||
| 12 | [Advanced Context Management](Samenvattingen/Les12-Samenvatting.md) | 3 | 📋 Samenvatting |
|
| 12 | [Advanced Context Management](Samenvattingen/Les12-Samenvatting.md) | 3 | 📋 Samenvatting |
|
||||||
| 13 | [Mastering Cursor met Claude Opus](Samenvattingen/Les13-Samenvatting.md) | 3 | 📋 Samenvatting |
|
| 13 | [Mastering Cursor met Claude Opus](Samenvattingen/Les13-Samenvatting.md) | 3 | 📋 Samenvatting |
|
||||||
| 14 | [Supabase Advanced - Realtime & Edge Functions](Samenvattingen/Les14-Samenvatting.md) | 3 | 📋 Samenvatting |
|
| 14 | [Debugging & Code Review met AI](Samenvattingen/Les14-Samenvatting.md) | 3 | 📋 Samenvatting |
|
||||||
| 15 | [AI-Driven Testing & Quality Assurance](Samenvattingen/Les15-Samenvatting.md) | 3 | 📋 Samenvatting |
|
| 15 | [AI-Driven Testing & Quality Assurance](Samenvattingen/Les15-Samenvatting.md) | 3 | 📋 Samenvatting |
|
||||||
| 16 | [Building AI-Powered Features](Samenvattingen/Les16-Samenvatting.md) | 3 | 📋 Samenvatting |
|
| 16 | [Building AI-Powered Features](Samenvattingen/Les16-Samenvatting.md) | 3 | 📋 Samenvatting |
|
||||||
| 17 | [Advanced Deployment & Production](Samenvattingen/Les17-Samenvatting.md) | 3 | 📋 Samenvatting |
|
| 17 | [Advanced Deployment & Production](Samenvattingen/Les17-Samenvatting.md) | 3 | 📋 Samenvatting |
|
||||||
@@ -102,7 +102,7 @@ Kennismaking met AI, LLMs en de basis van AI-assisted development.
|
|||||||
|
|
||||||
**6 lessen · 10 EC**
|
**6 lessen · 10 EC**
|
||||||
|
|
||||||
Verdieping in prompt engineering, backend development met Supabase, en introductie tot AI agents en MCP.
|
Verdieping in prompt engineering, Supabase basics, en introductie tot AI agents en MCP.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -148,7 +148,7 @@ Verdieping in prompt engineering, backend development met Supabase, en introduct
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 2.2 Backend & Database
|
## 2.2 MCP & Supabase
|
||||||
|
|
||||||
### Les 6: MCP & Component Libraries
|
### Les 6: MCP & Component Libraries
|
||||||
|
|
||||||
@@ -170,21 +170,22 @@ Verdieping in prompt engineering, backend development met Supabase, en introduct
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Les 7: Backend Made Easy met Supabase + AI + Skills
|
### Les 7: Backend Basics met Supabase
|
||||||
|
|
||||||
**Tools:** OpenCode/WebStorm, Supabase, supabase-postgres-best-practices skill, Next.js
|
**Tools:** Supabase, Next.js, Cursor/OpenCode
|
||||||
|
|
||||||
**Theorie/Uitleg:**
|
**Theorie/Uitleg:**
|
||||||
- Supabase overview: Postgres, Auth, Storage, Realtime, Edge Functions
|
- Wat is Supabase: open-source Firebase alternative
|
||||||
- Waarom Supabase + AI perfect combo
|
- Supabase UI Tour: Table Editor, tabellen maken zonder SQL
|
||||||
- Database design met AI + Skills
|
- Database basics: tabellen, kolommen, rijen (geen SQL kennis nodig)
|
||||||
- Row Level Security (RLS) policies
|
- Supabase client setup in Next.js
|
||||||
- TypeScript types auto-genereren
|
- CRUD operaties: create, read, update, delete
|
||||||
- Supabase client setup en CRUD operaties
|
- Simpele authenticatie met Auth UI component
|
||||||
|
- Environment variables correct gebruiken
|
||||||
|
|
||||||
**Lesopdracht:** Bouw Todo App backend: database schema met AI, RLS policies, Next.js integratie met CRUD.
|
**Lesopdracht:** Bouw Todo App met Supabase: maak tabel via UI, setup client, bouw CRUD interface, voeg login toe met Auth UI.
|
||||||
|
|
||||||
**Huiswerk:** Extend Todo app met categories, user profile (avatar upload), stats dashboard. Deploy naar Vercel.
|
**Huiswerk:** Extend Todo app met filtering, user-specifieke todos, loading/error states. Deploy naar Vercel.
|
||||||
|
|
||||||
[→ Ga naar Les 7](Samenvattingen/Les07-Samenvatting.md)
|
[→ Ga naar Les 7](Samenvattingen/Les07-Samenvatting.md)
|
||||||
|
|
||||||
@@ -242,21 +243,22 @@ Geavanceerde AI tools, testing, deployment en het eindproject.
|
|||||||
|
|
||||||
## 3.1 Advanced AI Tools
|
## 3.1 Advanced AI Tools
|
||||||
|
|
||||||
### Les 10: Supabase Automation - Cron Jobs, Webhooks & AI Workflows
|
### Les 10: Project Setup & Repository Structure
|
||||||
|
|
||||||
**Tools:** Supabase (Edge Functions, pg_cron), Claude/OpenAI API, Resend/SendGrid
|
**Tools:** Cursor, Git & GitHub, Next.js
|
||||||
|
|
||||||
**Theorie/Uitleg:**
|
**Theorie/Uitleg:**
|
||||||
- Types van automation: scheduled tasks, event-driven, AI-powered
|
- Waarom goede project structuur belangrijk is voor AI tools
|
||||||
- Supabase Edge Functions (Deno, TypeScript, serverless)
|
- Ideale folder structuur voor Next.js projecten
|
||||||
- Scheduled Edge Functions (cron jobs)
|
- .cursorrules files: project-specifieke instructies voor Cursor
|
||||||
- Webhook Edge Functions
|
- docs/ folder: PROMPT-LOG.md, AI-DECISIONS.md, PROJECT-BRIEF.md
|
||||||
- AI integratie in Edge Functions
|
- Environment variables beheren (.env.local vs .env.example)
|
||||||
- AI Automation workflow patterns
|
- README.md best practices
|
||||||
|
- Git best practices: commits, branches, .gitignore
|
||||||
|
|
||||||
**Lesopdracht:** Bouw 2 automations: Daily Summary Email (cron → AI samenvatting → email), AI Content Moderation (webhook bij nieuwe todo → AI check → enrich/flag).
|
**Lesopdracht:** Richt je eindproject repository in: GitHub repo, folder structuur, .cursorrules, docs/ files, environment setup, complete README.
|
||||||
|
|
||||||
**Huiswerk:** Bouw intelligente notificaties (gepersonaliseerd AI bericht), AI Task Breakdown Agent (complex todo → auto subtaken). 4 werkende automations + reflectie.
|
**Huiswerk:** Verfijn setup: uitgebreide .cursorrules (meerdere files), volledig ingevulde PROJECT-BRIEF.md, basis UI components bouwen met Cursor.
|
||||||
|
|
||||||
[→ Ga naar Les 10](Samenvattingen/Les10-Samenvatting.md)
|
[→ Ga naar Les 10](Samenvattingen/Les10-Samenvatting.md)
|
||||||
|
|
||||||
@@ -321,22 +323,25 @@ Geavanceerde AI tools, testing, deployment en het eindproject.
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 3.2 Testing & Advanced Supabase
|
## 3.2 Debugging & Testing
|
||||||
|
|
||||||
### Les 14: Supabase Advanced - Realtime, Storage & Edge Functions
|
### Les 14: Debugging & Code Review met AI
|
||||||
|
|
||||||
**Tools:** Supabase (Realtime, Storage, Edge Functions), Cursor, OpenAI/Anthropic API
|
**Tools:** Cursor, Browser DevTools, React DevTools
|
||||||
|
|
||||||
**Theorie/Uitleg:**
|
**Theorie/Uitleg:**
|
||||||
- Realtime Subscriptions: table changes, channels, presence
|
- Waarom AI effectief is voor debugging
|
||||||
- Supabase Storage: uploads, buckets, transformations, signed URLs
|
- Error messages begrijpen (TypeError, ReferenceError, Hydration errors)
|
||||||
- Edge Functions Deep Dive: Deno runtime, AI integratie
|
- Debugging workflow met AI: isoleer → verzamel context → vraag AI → begrijp
|
||||||
- Advanced Authentication: social logins, magic links
|
- Console.log debugging strategieën
|
||||||
- Error handling & debugging
|
- Browser DevTools basics (Console, Network, Elements)
|
||||||
|
- Code review met AI: kwaliteit, bugs, performance, security
|
||||||
|
- Refactoring met AI hulp
|
||||||
|
- Wanneer AI niet te vertrouwen
|
||||||
|
|
||||||
**Lesopdracht:** Level up Todo app met 3 features: Realtime Collaboration, File Attachments met Storage, AI-Powered Task Suggestions via Edge Function.
|
**Lesopdracht:** Debugging Challenge: los 6 opzettelijke bugs op in een project met AI hulp, documenteer wat je leert in PROMPT-LOG.md.
|
||||||
|
|
||||||
**Huiswerk:** Bouw Production-Ready Supabase Starter Template met complete auth, database examples, realtime demo, storage demo, Edge Function, documentatie.
|
**Huiswerk:** Code review je eigen eindproject met AI (3 files), refactor 1 complex component, maak persoonlijke debugging checklist.
|
||||||
|
|
||||||
[→ Ga naar Les 14](Samenvattingen/Les14-Samenvatting.md)
|
[→ Ga naar Les 14](Samenvattingen/Les14-Samenvatting.md)
|
||||||
|
|
||||||
@@ -364,21 +369,24 @@ Geavanceerde AI tools, testing, deployment en het eindproject.
|
|||||||
|
|
||||||
## 3.3 AI Features & Deployment
|
## 3.3 AI Features & Deployment
|
||||||
|
|
||||||
### Les 16: Building AI-Powered Features & Workflow Automation
|
### Les 16: Vercel AI SDK - AI Features in je App
|
||||||
|
|
||||||
**Tools:** Supabase Edge Functions, OpenAI/Anthropic API, n8n/Pipedream, Cursor
|
**Tools:** Vercel AI SDK, Next.js API Routes, OpenAI/Anthropic API, Cursor
|
||||||
|
|
||||||
**Theorie/Uitleg:**
|
**Theorie/Uitleg:**
|
||||||
- AI APIs overzicht: OpenAI, Anthropic, pricing, rate limits
|
- Vercel AI SDK introductie: waarom een SDK vs raw API calls
|
||||||
- Veel voorkomende AI features: tekst generatie, samenvatting, chatbots
|
- Installatie en configuratie (`ai` package)
|
||||||
- API integratie patterns: streaming, error handling, caching
|
- Core hooks: `useChat` voor conversaties, `useCompletion` voor single completions
|
||||||
- API keys verbergen via Edge Functions
|
- Streaming responses: hoe het werkt, waarom het UX verbetert
|
||||||
- Streaming UI implementeren
|
- API Routes opzetten voor AI (OpenAI/Anthropic providers)
|
||||||
- Workflow automation met n8n/Pipedream
|
- Chat UI bouwen met `useChat` hook (messages, input, handleSubmit)
|
||||||
|
- Conversation history opslaan in Supabase
|
||||||
|
- Error handling en loading states
|
||||||
|
- Rate limiting en cost management
|
||||||
|
|
||||||
**Lesopdracht:** Bouw 1 AI-powered feature (Blog Generator/Summarizer/Writing Assistant) + 1 workflow automation (Smart Form Processor/Daily AI Summary).
|
**Lesopdracht:** Bouw een AI Chat component met Vercel AI SDK: setup API route, implementeer `useChat` hook, style met Tailwind, sla chat history op in Supabase.
|
||||||
|
|
||||||
**Huiswerk:** Polish AI feature (streaming, history, rate limiting), bouw 2 automations voor eindopdracht, documentatie.
|
**Huiswerk:** Extend naar volledige AI feature voor je eindproject (Recipe Generator / Budget Advisor / Travel Planner), voeg streaming UI toe, implementeer conversation history, documenteer je implementatie.
|
||||||
|
|
||||||
[→ Ga naar Les 16](Samenvattingen/Les16-Samenvatting.md)
|
[→ Ga naar Les 16](Samenvattingen/Les16-Samenvatting.md)
|
||||||
|
|
||||||
@@ -431,8 +439,9 @@ Geavanceerde AI tools, testing, deployment en het eindproject.
|
|||||||
## Tech Stack
|
## Tech Stack
|
||||||
|
|
||||||
- **Frontend:** React, Next.js, Tailwind CSS
|
- **Frontend:** React, Next.js, Tailwind CSS
|
||||||
- **Backend:** Supabase (Postgres, Auth, Storage, Realtime, Edge Functions)
|
- **Backend:** Supabase (Postgres database, Auth)
|
||||||
- **AI Tools:** ChatGPT, Claude, v0.dev, OpenCode, Cursor, Claude Code
|
- **AI Tools:** ChatGPT, Claude, v0.dev, OpenCode, Cursor, Claude Code
|
||||||
|
- **AI SDK:** Vercel AI SDK (`ai` package) voor AI features in apps
|
||||||
- **Testing:** Vitest, React Testing Library, Playwright
|
- **Testing:** Vitest, React Testing Library, Playwright
|
||||||
- **Deployment:** Vercel, GitHub Actions
|
- **Deployment:** Vercel, GitHub Actions
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user