Les 7: Van In-Memory naar Supabase (Introductie)

Hoofdstuk

Deel 2: Technical Foundations (Les 4-9)

Beschrijving

Eerste kennismaking met Supabase. Studenten maken hun QuickPoll uit Les 6 af, leren wat een relationele database is via de Supabase GUI (geen SQL nodig), en koppelen voor het eerst een echte database aan hun Next.js app.

Reflectie na geven: Te veel materiaal voor één les. Studenten kwamen niet door Deel 3 heen. Daarom is Les 8 toegevoegd waarin de Supabase-koppeling rustig opnieuw wordt doorlopen, plus een /create pagina.

Lesopbouw

Deel 1 — Poll afmaken (30 min, klassikaal)

Onaffe stukken uit Les 6 wegwerken:

votePoll() functie in data.ts
POST route die echt verwerkt (geen console.log meer)
Server Component + VoteForm split — kernmoment van de les
GET route + visuele percentage bars in PollItem

Deel 2 — Supabase Introductie, No Code (45 min)

Voor de meeste studenten hun eerste database ervaring.

Wat is Supabase? Open-source Firebase alternatief op Postgres
Project aanmaken (via GitHub login)
polls tabel aanmaken via Table Editor (id, question, created_at)
options tabel aanmaken met foreign key naar polls (CASCADE)
RLS policies uitleggen en SELECT policies aanzetten
Testdata invoeren via de GUI
SQL Editor: eerste SELECT, WHERE en JOIN query

Pauze (15 min)

Deel 3 — Supabase koppelen aan Next.js (60 min)

npm install @supabase/supabase-js
.env.local met NEXT_PUBLIC_SUPABASE_URL + NEXT_PUBLIC_SUPABASE_ANON_KEY
lib/supabase.ts client
Types updaten (Poll, Option)
data.ts herschrijven met Supabase queries (select, eq, single)
Homepage async maken
PollItem, VoteForm, detailpagina aanpassen
Testen op localhost — data overleeft restart

Vragen + Huiswerk (15 min)

Huiswerk: /create pagina bouwen (formulier → INSERT in Supabase) — voor de meeste studenten te zwaar gebleken, daarom in Les 8 herhaald.

Kernconcepten

Server Component vs Client Component patroon
Database-as-a-service (Supabase = Postgres + Auth + REST + Realtime)
Tabellen, kolommen, primary keys, foreign keys, CASCADE
Row Level Security (RLS) basics
Environment variables in Next.js (NEXT_PUBLIC_ prefix)
Supabase JavaScript client: from, select, eq, single

Tools

Next.js 15
Supabase (Table Editor, SQL Editor)
Cursor / VS Code
TypeScript
@supabase/supabase-js

Lesopdracht

Volg de docent klassikaal mee door Deel 1 → 3. Aan het eind draait je QuickPoll app met data uit Supabase.

Huiswerk

/create pagina afmaken (formulier dat een nieuwe poll insert)
Validatie toevoegen
Eventueel: extra SQL queries proberen

Lesmateriaal

Les07-Slide-Overzicht.md
Les07-Docenttekst.md
Les07-Live-Coding-Guide.md
Les07-Lesopdracht.pdf
Les07-Slides.pptx

Leerdoelen

Na deze les kan de student:

Uitleggen wat Supabase is en wanneer je het inzet
Een Supabase project aanmaken via de GUI
Tabellen met relaties (foreign keys) aanmaken in de Table Editor
RLS policies opzetten voor publieke read access
De Supabase JavaScript client installeren en configureren
Environment variables gebruiken voor API keys
Data ophalen met select, eq en relaties (options(*))
Het Server Component + Client Component patroon toepassen

Lessons Learned (voor v2)

3 hoofddelen in 1 les is te ambitieus voor het tempo van deze klas
/create pagina als huiswerk werkt niet — studenten hebben begeleiding nodig bij hun eerste INSERT
Splits Supabase introductie en concrete code-koppeling over twee lessen → Les 8 voegt dit toe

3.6 KiB Raw Blame History