188 lines
4.1 KiB
Markdown
188 lines
4.1 KiB
Markdown
# Les 7: Backend Basics met Supabase
|
|
|
|
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
|
>
|
|
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
|
|
> - Les07-Slide-Overzicht.md
|
|
> - Les07-Lesplan.md
|
|
> - Les07-Bijlage-A-Lesopdracht.md
|
|
> - Les07-Bijlage-B-Huiswerkopdracht.md
|
|
|
|
---
|
|
|
|
## Hoofdstuk
|
|
**Hoofdstuk 2: Intermediate** (Les 4-9)
|
|
|
|
## Beschrijving
|
|
Leer de basics van Supabase: een database opzetten, data opslaan/ophalen, en simpele authenticatie. AI helpt je met de complexiteit.
|
|
|
|
---
|
|
|
|
## Te Behandelen
|
|
|
|
### Wat is Supabase?
|
|
- Open-source Firebase alternative
|
|
- Hosted Postgres database
|
|
- Gratis tier voor development
|
|
- Mooie UI om tabellen te beheren
|
|
|
|
### Supabase UI Tour
|
|
- Dashboard overview
|
|
- Table Editor: tabellen maken zonder SQL
|
|
- Kolommen toevoegen (text, number, boolean, timestamp)
|
|
- Data handmatig invoeren en bekijken
|
|
|
|
### Database Basics (zonder SQL kennis)
|
|
- Tabellen = spreadsheets met regels
|
|
- Kolommen = velden (naam, email, etc.)
|
|
- Rijen = individuele records
|
|
- Primary key: unieke identifier per rij
|
|
|
|
### Supabase Client in Next.js
|
|
|
|
**Installatie:**
|
|
```bash
|
|
npm install @supabase/supabase-js
|
|
```
|
|
|
|
**Setup:**
|
|
```ts
|
|
import { createClient } from '@supabase/supabase-js'
|
|
|
|
const supabase = createClient(
|
|
process.env.NEXT_PUBLIC_SUPABASE_URL!,
|
|
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
|
|
)
|
|
```
|
|
|
|
### CRUD Operaties (met AI hulp)
|
|
|
|
**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
|
|
- Supabase (gratis tier)
|
|
- Next.js
|
|
- Cursor/OpenCode
|
|
|
|
---
|
|
|
|
## Lesopdracht (2 uur)
|
|
|
|
### Bouw een Todo App met Supabase
|
|
|
|
**Deel 1: Supabase Setup (20 min)**
|
|
- Maak gratis Supabase account
|
|
- Maak nieuw project
|
|
- Kopieer URL en anon key naar `.env.local`
|
|
|
|
**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
|
|
|
|
**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
|
|
|
|
**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 de Todo App
|
|
|
|
**Feature 1: Filtering (30 min)**
|
|
- Filter op: Alle / Actief / Voltooid
|
|
- Sorteer op datum
|
|
|
|
**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
|
|
|
|
**Feature 3: Polish (30 min)**
|
|
- Loading states
|
|
- Error handling met toast messages
|
|
- Empty state ("Geen todos gevonden")
|
|
|
|
**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:
|
|
- 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
|