306 lines
6.5 KiB
Markdown
306 lines
6.5 KiB
Markdown
# Les 9: Supabase Basics
|
|
|
|
---
|
|
|
|
## Hoofdstuk
|
|
**Deel 2: Technical Foundations** (Les 5-9)
|
|
|
|
## Beschrijving
|
|
Leer werken met Supabase: een complete backend-as-a-service met database en authenticatie. Pas je database schema uit Les 8 toe en bouw je eerste full-stack app.
|
|
|
|
---
|
|
|
|
## Te Behandelen
|
|
|
|
### Wat is Supabase?
|
|
|
|
**Supabase = Database + Auth in één**
|
|
- PostgreSQL database (gratis tier: 500MB)
|
|
- Ingebouwde authenticatie
|
|
- Real-time subscriptions
|
|
- File storage
|
|
- Auto-generated API
|
|
|
|
**Waarom Supabase voor beginners:**
|
|
- Geen eigen server nodig
|
|
- Visuele Table Editor (geen SQL kennis nodig)
|
|
- Simpele JavaScript SDK
|
|
- Gratis tier is ruim voldoende
|
|
|
|
---
|
|
|
|
### Supabase Project Aanmaken
|
|
|
|
**Stap 1:** Ga naar [supabase.com](https://supabase.com) en maak account
|
|
|
|
**Stap 2:** Klik "New Project"
|
|
- Naam: `todo-app`
|
|
- Database Password: (bewaar deze!)
|
|
- Region: `West EU (Frankfurt)` (dichtst bij NL)
|
|
|
|
**Stap 3:** Wacht ~2 minuten tot project klaar is
|
|
|
|
**Stap 4:** Ga naar Settings → API en kopieer:
|
|
- `Project URL`
|
|
- `anon public` key
|
|
|
|
---
|
|
|
|
### Je Database Schema Implementeren
|
|
|
|
In Les 8 heb je een database schema ontworpen. Nu gaan we dat implementeren!
|
|
|
|
**In Supabase Dashboard → Table Editor:**
|
|
|
|
1. Klik "New Table"
|
|
2. Gebruik je schema uit Les 8
|
|
3. Voeg kolommen toe met de juiste types
|
|
4. Definieer Primary Keys en Foreign Keys
|
|
|
|
**Voorbeeld: todos tabel**
|
|
|
|
| Name | Type | Default | Primary |
|
|
|------|------|---------|---------|
|
|
| id | int8 | - | ✓ (auto) |
|
|
| title | text | - | |
|
|
| completed | bool | false | |
|
|
| created_at | timestamptz | now() | |
|
|
|
|
---
|
|
|
|
### Environment Variables
|
|
|
|
**Wat zijn environment variables?**
|
|
- Configuratie die NIET in je code hoort
|
|
- API keys, database URLs, secrets
|
|
- Verschillend per omgeving (lokaal vs productie)
|
|
|
|
**Maak `.env.local` in je project root:**
|
|
```bash
|
|
# .env.local - NOOIT committen naar Git!
|
|
NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
|
|
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.xxxxx
|
|
```
|
|
|
|
**Maak ook `.env.example` (WEL committen):**
|
|
```bash
|
|
# .env.example - template voor anderen
|
|
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
|
|
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
|
|
```
|
|
|
|
---
|
|
|
|
### Supabase SDK Installeren
|
|
|
|
```bash
|
|
npm install @supabase/supabase-js
|
|
```
|
|
|
|
**Maak `src/lib/supabase.ts`:**
|
|
```typescript
|
|
import { createClient } from '@supabase/supabase-js'
|
|
|
|
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
|
|
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
|
|
|
|
export const supabase = createClient(supabaseUrl, supabaseAnonKey)
|
|
```
|
|
|
|
---
|
|
|
|
### CRUD Operaties
|
|
|
|
**C - Create (toevoegen):**
|
|
```typescript
|
|
const { data, error } = await supabase
|
|
.from('todos')
|
|
.insert({ title: 'Nieuwe taak' })
|
|
```
|
|
|
|
**R - Read (ophalen):**
|
|
```typescript
|
|
const { data, error } = await supabase
|
|
.from('todos')
|
|
.select('*')
|
|
.order('created_at', { ascending: false })
|
|
```
|
|
|
|
**U - Update (wijzigen):**
|
|
```typescript
|
|
const { data, error } = await supabase
|
|
.from('todos')
|
|
.update({ completed: true })
|
|
.eq('id', todoId)
|
|
```
|
|
|
|
**D - Delete (verwijderen):**
|
|
```typescript
|
|
const { error } = await supabase
|
|
.from('todos')
|
|
.delete()
|
|
.eq('id', todoId)
|
|
```
|
|
|
|
---
|
|
|
|
### Authenticatie met Auth UI
|
|
|
|
**Installeer auth packages:**
|
|
```bash
|
|
npm install @supabase/auth-ui-react @supabase/auth-ui-shared
|
|
```
|
|
|
|
**Login component:**
|
|
```tsx
|
|
import { Auth } from '@supabase/auth-ui-react'
|
|
import { ThemeSupa } from '@supabase/auth-ui-shared'
|
|
import { supabase } from '@/lib/supabase'
|
|
|
|
export function LoginForm() {
|
|
return (
|
|
<Auth
|
|
supabaseClient={supabase}
|
|
appearance={{ theme: ThemeSupa }}
|
|
providers={[]}
|
|
magicLink={true}
|
|
/>
|
|
)
|
|
}
|
|
```
|
|
|
|
**Huidige user checken:**
|
|
```typescript
|
|
const { data: { user } } = await supabase.auth.getUser()
|
|
|
|
if (user) {
|
|
// User is ingelogd
|
|
console.log('Logged in as:', user.email)
|
|
} else {
|
|
// Redirect naar login
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
### Deployment naar Vercel
|
|
|
|
**Stap 1: Push naar GitHub**
|
|
```bash
|
|
git add .
|
|
git commit -m "Add Supabase integration"
|
|
git push
|
|
```
|
|
|
|
**Stap 2: Deploy op Vercel**
|
|
1. Ga naar [vercel.com](https://vercel.com)
|
|
2. "Add New Project"
|
|
3. Import je GitHub repo
|
|
4. **BELANGRIJK:** Voeg Environment Variables toe!
|
|
- `NEXT_PUBLIC_SUPABASE_URL`
|
|
- `NEXT_PUBLIC_SUPABASE_ANON_KEY`
|
|
5. Klik "Deploy"
|
|
|
|
**Stap 3: Supabase Redirect URLs**
|
|
1. Ga naar Supabase → Authentication → URL Configuration
|
|
2. Voeg toe bij "Redirect URLs":
|
|
- `https://jouw-app.vercel.app/**`
|
|
|
|
---
|
|
|
|
## Tools
|
|
- Supabase
|
|
- Next.js
|
|
- OpenCode/WebStorm
|
|
- Vercel
|
|
- Git
|
|
|
|
---
|
|
|
|
## Lesopdracht (2 uur)
|
|
|
|
### Bouw een Todo App met Supabase
|
|
|
|
**Groepsdiscussie (15 min):**
|
|
Bespreek klassikaal de database schemas uit Les 8 - wie heeft welke structuur gekozen en waarom?
|
|
|
|
**Deel 1: Supabase Setup (30 min)**
|
|
|
|
1. Maak Supabase account en project
|
|
2. Maak je tabellen via Table Editor (gebaseerd op Les 8 schema)
|
|
3. Kopieer credentials
|
|
4. Installeer `@supabase/supabase-js`
|
|
5. Maak `src/lib/supabase.ts`
|
|
6. Configureer `.env.local`
|
|
|
|
Test: `npm run dev` werkt zonder errors
|
|
|
|
**Deel 2: CRUD Interface (1 uur)**
|
|
|
|
Bouw UI voor todos:
|
|
1. Lijst van todos tonen
|
|
2. Form om nieuwe todo toe te voegen
|
|
3. Checkbox om todo af te vinken
|
|
4. Delete button per todo
|
|
|
|
Gebruik AI hulp voor de components!
|
|
|
|
**Deel 3: Authenticatie (30 min)**
|
|
|
|
1. Installeer auth packages
|
|
2. Maak login pagina met Auth UI
|
|
3. Toon alleen app voor ingelogde users
|
|
4. Test: login met magic link
|
|
|
|
### Deliverable
|
|
- Werkende Todo app lokaal
|
|
- GitHub repository met code
|
|
- Screenshot van werkende app
|
|
|
|
---
|
|
|
|
## Huiswerk (2 uur)
|
|
|
|
### Deploy naar Productie + Uitbreiden
|
|
|
|
**Deel 1: Deployment (30 min)**
|
|
|
|
1. Push naar GitHub
|
|
2. Deploy naar Vercel
|
|
3. Configureer env vars in Vercel
|
|
4. Voeg Vercel URL toe aan Supabase Redirect URLs
|
|
5. Test: app werkt op productie URL!
|
|
|
|
**Deel 2: Features Uitbreiden (1 uur)**
|
|
|
|
Voeg toe:
|
|
1. Filter buttons: Alle / Actief / Voltooid
|
|
2. Sorteer op datum (nieuwste eerst)
|
|
3. Loading state tijdens data ophalen
|
|
4. Error state bij problemen
|
|
5. Empty state: "Geen todos gevonden"
|
|
|
|
**Deel 3: Polish (30 min)**
|
|
|
|
1. Styling verbeteren met Tailwind
|
|
2. Responsive design (mobile friendly)
|
|
3. Kleine animaties (fade in/out)
|
|
|
|
### Deliverable
|
|
- Deployed app op Vercel (werkende URL!)
|
|
- Alle features werken in productie
|
|
- Screenshot van productie app
|
|
|
|
---
|
|
|
|
## Leerdoelen
|
|
Na deze les kan de student:
|
|
- Een Supabase project aanmaken en configureren
|
|
- Database schema implementeren via Table Editor
|
|
- Environment variables correct beheren
|
|
- De Supabase client installeren en configureren
|
|
- CRUD operaties uitvoeren met de Supabase SDK
|
|
- Authenticatie implementeren met Auth UI
|
|
- Deployen naar Vercel met environment variables
|
|
- Database principles uit Les 8 toepassen in de praktijk
|