127 lines
2.9 KiB
Markdown
127 lines
2.9 KiB
Markdown
# Les 7: Backend Made Easy met Supabase + AI + Skills
|
|
|
|
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
|
>
|
|
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
|
|
> - Les07-Slide-Overzicht.md
|
|
> - Les07-Lesplan.md
|
|
> - Les07-Docenttekst.md
|
|
> - Les07-Bijlage-A-Lesopdracht.md
|
|
> - Les07-Bijlage-B-Huiswerkopdracht.md
|
|
|
|
---
|
|
|
|
## Hoofdstuk
|
|
**Hoofdstuk 2: Intermediate** (Les 4-9)
|
|
|
|
## Beschrijving
|
|
Gebruik AI om backend te bouwen zonder backend expert te zijn. Focus op Supabase + AI + Skills combinatie.
|
|
|
|
---
|
|
|
|
## Te Behandelen
|
|
|
|
### Supabase Overview
|
|
- Open-source Firebase alternative
|
|
|
|
**Core Features:**
|
|
- Postgres database
|
|
- Authentication
|
|
- Storage
|
|
- Realtime
|
|
- Edge Functions
|
|
- Vector database
|
|
|
|
### Waarom Supabase + AI Perfect Combo
|
|
- AI helpt met complexe database dingen
|
|
|
|
### Skills voor Supabase
|
|
- "supabase-postgres-best-practices" skill
|
|
|
|
### Database Design met AI + Skills
|
|
- Natuurlijke taal → genormaliseerd schema
|
|
|
|
### Row Level Security (RLS)
|
|
- RLS policies met AI + Skills
|
|
- Waarom RLS belangrijk is
|
|
|
|
### TypeScript Types
|
|
- Supabase CLI auto-genereert types van database
|
|
|
|
### Supabase Client
|
|
- Setup
|
|
- Basis CRUD operaties
|
|
- Realtime subscriptions intro
|
|
- Supabase Storage intro
|
|
|
|
### Focus
|
|
AI + Skills doen zwaar werk, jij leert concepten
|
|
|
|
---
|
|
|
|
## Tools
|
|
- OpenCode/WebStorm
|
|
- Supabase
|
|
- supabase-postgres-best-practices skill
|
|
- Next.js
|
|
|
|
---
|
|
|
|
## Lesopdracht (2 uur)
|
|
|
|
### Deel 1: Supabase Skills Setup (10 min)
|
|
- Installeer "supabase-postgres-best-practices" skill in OpenCode/WebStorm
|
|
- Maak gratis Supabase project
|
|
- Bewaar credentials
|
|
|
|
### Deel 2: Bouw Todo App Backend (1u 50min)
|
|
|
|
**Database Schema met AI + Skill (30 min):**
|
|
- Prompt: "Ontwerp database schema voor todo app met users, todos (title, description, due_date, priority, completed), categories, proper relationships."
|
|
|
|
**RLS Policies met AI + Skill (30 min):**
|
|
- Prompt: "Maak RLS policies: users kunnen alleen hun eigen todos zien/bewerken."
|
|
|
|
**Next.js Integratie (50 min):**
|
|
- Setup Supabase client
|
|
- Bouw UI:
|
|
- Create todo
|
|
- List todos
|
|
- Complete/delete
|
|
- Filter by category
|
|
- Implementeer CRUD met error handling
|
|
- Test of RLS werkt
|
|
|
|
---
|
|
|
|
## Huiswerk (2 uur)
|
|
|
|
### Extend Todo App
|
|
|
|
**Nieuwe Features:**
|
|
1. **Categories systeem** - create/assign/filter, colors
|
|
2. **User profile pagina** - avatar upload naar Storage, display name
|
|
3. **Stats dashboard** - completed vs incomplete charts, trends
|
|
|
|
**Deployment:**
|
|
- Deploy naar Vercel met proper env vars
|
|
|
|
### Reflectie (400 woorden)
|
|
|
|
Schrijf over:
|
|
- Verschil in security/quality met vs zonder Supabase skill?
|
|
- Nieuwe patterns geleerd?
|
|
- Queries die je fout zou schrijven zonder AI?
|
|
- Zou je backend bouwen zonder AI hulp?
|
|
|
|
---
|
|
|
|
## Leerdoelen
|
|
Na deze les kan de student:
|
|
- Supabase project opzetten en configureren
|
|
- Database schema's ontwerpen met AI + Skills
|
|
- Row Level Security (RLS) policies implementeren
|
|
- TypeScript types genereren van database
|
|
- CRUD operaties implementeren met Supabase client
|
|
- De supabase-postgres-best-practices skill effectief gebruiken
|