106 lines
3.6 KiB
Markdown
106 lines
3.6 KiB
Markdown
# 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**
|