117 lines
4.3 KiB
Markdown
117 lines
4.3 KiB
Markdown
# Les 8: Van In-Memory naar Supabase (Self-Paced + /create)
|
||
|
||
---
|
||
|
||
## Hoofdstuk
|
||
**Deel 2: Technical Foundations** (Les 4-9)
|
||
|
||
## Beschrijving
|
||
Vervolg op Les 7. Studenten kregen vorige les niet alles af, dus loopt de docent de Supabase-koppeling rustig opnieuw door — nu in een **self-paced PDF** met copy-paste blokken en TODO-blokken. Daarna bouwen studenten zelfstandig de **/create pagina** (hun eerste INSERT).
|
||
|
||
**Aanpak:** Deel 1-3 doet de docent klassikaal door de PDF heen. Deel 4 (de /create pagina) doen studenten zelfstandig met de docent als coach.
|
||
|
||
---
|
||
|
||
## Lesopbouw (3 uur)
|
||
|
||
| Tijd | Onderwerp | Vorm |
|
||
|------|-----------|------|
|
||
| 09:00–09:15 | Welkom + Intro + PDF uitdelen | Klassikaal |
|
||
| 09:15–09:45 | **PDF Deel 1** — Setup (npm, .env, supabase.ts, types, vote_option SQL) | Klassikaal |
|
||
| 09:45–10:00 | **PDF Deel 2** — Queries (`getPolls`, `getPollById`, `votePoll`) | Klassikaal |
|
||
| 10:00–10:15 | **PDF Deel 3** — Componenten (page, PollItem, VoteForm, [id]) | Klassikaal |
|
||
| 10:15–10:30 | Pauze | — |
|
||
| 10:30–10:45 | Uitleg INSERT theorie + RLS policy + start Deel 4 | Klassikaal |
|
||
| 10:45–11:30 | **PDF Deel 4** — /create pagina bouwen | **Zelfstandig** |
|
||
| 11:30–12:00 | Vragen + Huiswerk + Vooruitblik Auth | Klassikaal |
|
||
|
||
---
|
||
|
||
## Lesopdracht (PDF)
|
||
Studenten krijgen één PDF met vier delen. Grijze blokken zijn copy-paste, gele TODO-blokken vullen ze zelf in.
|
||
|
||
### Deel 1 — Setup (klassikaal)
|
||
1. `npm install @supabase/supabase-js`
|
||
2. `.env.local` met SUPABASE URL + ANON KEY
|
||
3. `lib/supabase.ts` client
|
||
4. `types/index.ts` updaten (`Poll`, `Option`)
|
||
5. **vote_option SQL functie** aanmaken in Supabase SQL Editor (voorkomt PGRST202 error)
|
||
|
||
### Deel 2 — Queries (klassikaal, TODO's invullen)
|
||
- `getPolls()` — `select("*, options(*)")`
|
||
- `getPollById(id)` — `eq("id", id).single()`
|
||
- `votePoll(optionId)` — `rpc("vote_option", { option_id })`
|
||
|
||
### Deel 3 — Componenten (klassikaal, copy-paste)
|
||
- `app/page.tsx` (async Server Component)
|
||
- `components/PollItem.tsx` (Client, percentage bars)
|
||
- `components/VoteForm.tsx` (Client)
|
||
- `app/poll/[id]/page.tsx` (Server Component, **Next.js 15 `params` is een Promise**)
|
||
|
||
### Deel 4 — /create pagina (zelfstandig)
|
||
1. RLS INSERT policy voor `polls` en `options`
|
||
2. INSERT theorie (poll inserten → id terugkrijgen → options met `poll_id`)
|
||
3. `app/create/page.tsx` — volledig formulier in PDF, alleen `handleSubmit` TODO invullen
|
||
|
||
---
|
||
|
||
## Belangrijke leermomenten
|
||
- **Self-paced PDF werkt beter dan live coding** voor deze klas — studenten kunnen op eigen tempo
|
||
- **Next.js 15 breaking change:** `params` is nu een `Promise<{ id: string }>`. Je moet `const { id } = await params`
|
||
- **Supabase RPC functies:** `vote_option` aanmaken in SQL Editor — anders PGRST202 error
|
||
- **RLS policies:** Zonder INSERT policy faalt elke `.insert()` met "row-level security violation"
|
||
- **Server vs Client Components:** Server haalt data (`async` + `await`), Client doet interactie (`'use client'` + `useState`)
|
||
|
||
---
|
||
|
||
## Tools
|
||
- Next.js 15
|
||
- Supabase (SQL Editor, Table Editor, RLS)
|
||
- `@supabase/supabase-js`
|
||
- TypeScript
|
||
- Cursor / VS Code
|
||
|
||
---
|
||
|
||
## Huiswerk
|
||
**Verplicht:**
|
||
- /create pagina afmaken (als niet klaar)
|
||
- Validatie toevoegen (vraag niet leeg, minimaal 2 opties)
|
||
|
||
**Extra:**
|
||
- Delete functionaliteit
|
||
- SQL queries direct testen in Supabase
|
||
- Realtime subscriptions uitproberen
|
||
- Styling polish
|
||
|
||
---
|
||
|
||
## Lesmateriaal
|
||
- `Les08-Slide-Overzicht.md`
|
||
- `Les08-Docenttekst.md`
|
||
- `Les08-Lesopdracht.pdf` (de self-paced handleiding)
|
||
- `Les08-Slides.pptx`
|
||
|
||
---
|
||
|
||
## Leerdoelen
|
||
Na deze les kan de student:
|
||
- De Supabase JavaScript client installeren en configureren
|
||
- Environment variables gebruiken voor API keys
|
||
- Data ophalen via Supabase queries (`select` met relaties, `eq`, `single`)
|
||
- Een PostgreSQL function aanroepen via `.rpc()`
|
||
- Het verschil uitleggen tussen Server en Client Components in Next.js 15
|
||
- Een formulier bouwen dat data INSERT in Supabase
|
||
- RLS policies schrijven voor publieke read en insert
|
||
- Veelvoorkomende Supabase errors herkennen en oplossen (PGRST202, RLS violation)
|
||
|
||
---
|
||
|
||
## Voorbereiding docent
|
||
- [ ] QuickPoll project werkt lokaal op localhost:3000
|
||
- [ ] Supabase project met `polls` + `options` tabellen
|
||
- [ ] `vote_option` RPC functie aangemaakt
|
||
- [ ] SELECT RLS policies staan aan
|
||
- [ ] Lesopdracht PDF gedeeld met studenten (digitaal)
|
||
- [ ] Whiteboard voor de vier query-patronen
|