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)

npm install @supabase/supabase-js
.env.local met SUPABASE URL + ANON KEY
lib/supabase.ts client
types/index.ts updaten (Poll, Option)
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)

RLS INSERT policy voor polls en options
INSERT theorie (poll inserten → id terugkrijgen → options met poll_id)
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

4.3 KiB Raw Blame History Unescape Escape