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**
|
||||
>
|
||||
@@ -14,112 +14,174 @@
|
||||
**Hoofdstuk 2: Intermediate** (Les 4-9)
|
||||
|
||||
## 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
|
||||
|
||||
### Supabase Overview
|
||||
### Wat is Supabase?
|
||||
- Open-source Firebase alternative
|
||||
- Hosted Postgres database
|
||||
- Gratis tier voor development
|
||||
- Mooie UI om tabellen te beheren
|
||||
|
||||
**Core Features:**
|
||||
- Postgres database
|
||||
- Authentication
|
||||
- Storage
|
||||
- Realtime
|
||||
- Edge Functions
|
||||
- Vector database
|
||||
### Supabase UI Tour
|
||||
- Dashboard overview
|
||||
- Table Editor: tabellen maken zonder SQL
|
||||
- Kolommen toevoegen (text, number, boolean, timestamp)
|
||||
- Data handmatig invoeren en bekijken
|
||||
|
||||
### Waarom Supabase + AI Perfect Combo
|
||||
- AI helpt met complexe database dingen
|
||||
### Database Basics (zonder SQL kennis)
|
||||
- Tabellen = spreadsheets met regels
|
||||
- Kolommen = velden (naam, email, etc.)
|
||||
- Rijen = individuele records
|
||||
- Primary key: unieke identifier per rij
|
||||
|
||||
### Skills voor Supabase
|
||||
- "supabase-postgres-best-practices" skill
|
||||
### Supabase Client in Next.js
|
||||
|
||||
### Database Design met AI + Skills
|
||||
- Natuurlijke taal → genormaliseerd schema
|
||||
**Installatie:**
|
||||
```bash
|
||||
npm install @supabase/supabase-js
|
||||
```
|
||||
|
||||
### Row Level Security (RLS)
|
||||
- RLS policies met AI + Skills
|
||||
- Waarom RLS belangrijk is
|
||||
**Setup:**
|
||||
```ts
|
||||
import { createClient } from '@supabase/supabase-js'
|
||||
|
||||
### TypeScript Types
|
||||
- Supabase CLI auto-genereert types van database
|
||||
const supabase = createClient(
|
||||
process.env.NEXT_PUBLIC_SUPABASE_URL!,
|
||||
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
|
||||
)
|
||||
```
|
||||
|
||||
### Supabase Client
|
||||
- Setup
|
||||
- Basis CRUD operaties
|
||||
- Realtime subscriptions intro
|
||||
- Supabase Storage intro
|
||||
### CRUD Operaties (met AI hulp)
|
||||
|
||||
### Focus
|
||||
AI + Skills doen zwaar werk, jij leert concepten
|
||||
**Create:**
|
||||
```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
|
||||
- OpenCode/WebStorm
|
||||
- Supabase
|
||||
- supabase-postgres-best-practices skill
|
||||
- Supabase (gratis tier)
|
||||
- Next.js
|
||||
- Cursor/OpenCode
|
||||
|
||||
---
|
||||
|
||||
## 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
|
||||
### Bouw een Todo App met Supabase
|
||||
|
||||
### 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):**
|
||||
- Prompt: "Ontwerp database schema voor todo app met users, todos (title, description, due_date, priority, completed), categories, proper relationships."
|
||||
**Deel 2: Database via UI (20 min)**
|
||||
- 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):**
|
||||
- Prompt: "Maak RLS policies: users kunnen alleen hun eigen todos zien/bewerken."
|
||||
**Deel 3: Next.js Integratie (1 uur)**
|
||||
- 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):**
|
||||
- Setup Supabase client
|
||||
- Bouw UI:
|
||||
- Create todo
|
||||
- List todos
|
||||
- Complete/delete
|
||||
- Filter by category
|
||||
- Implementeer CRUD met error handling
|
||||
- Test of RLS werkt
|
||||
**Deel 4: Auth toevoegen (20 min)**
|
||||
- Installeer `@supabase/auth-ui-react`
|
||||
- Voeg login pagina toe met Auth UI component
|
||||
- Check of user ingelogd is
|
||||
|
||||
### Deliverable
|
||||
- Werkende Todo app met Supabase backend
|
||||
- Login functionaliteit
|
||||
- CRUD operaties werken
|
||||
|
||||
---
|
||||
|
||||
## Huiswerk (2 uur)
|
||||
|
||||
### Extend Todo App
|
||||
### Extend de 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
|
||||
**Feature 1: Filtering (30 min)**
|
||||
- Filter op: Alle / Actief / Voltooid
|
||||
- Sorteer op datum
|
||||
|
||||
**Deployment:**
|
||||
- Deploy naar Vercel met proper env vars
|
||||
**Feature 2: User-specifieke todos (30 min)**
|
||||
- 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:
|
||||
- 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?
|
||||
**Deploy (30 min)**
|
||||
- Deploy naar Vercel
|
||||
- Voeg environment variables toe in Vercel dashboard
|
||||
- Test of alles werkt in productie
|
||||
|
||||
### Deliverable
|
||||
- Deployed Todo app op Vercel
|
||||
- Screenshot van werkende app
|
||||
- Link naar live versie
|
||||
|
||||
---
|
||||
|
||||
## 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
|
||||
- Een Supabase project opzetten
|
||||
- Tabellen maken via de Supabase UI (zonder SQL)
|
||||
- De Supabase client installeren en configureren
|
||||
- Basis CRUD operaties uitvoeren (create, read, update, delete)
|
||||
- Simpele authenticatie implementeren met Auth UI
|
||||
- Environment variables correct gebruiken
|
||||
|
||||
Reference in New Issue
Block a user