146 lines
3.0 KiB
Markdown
146 lines
3.0 KiB
Markdown
# Les 8 — Slide-overzicht
|
|
## Van In-Memory naar Supabase (10 slides)
|
|
|
|
---
|
|
|
|
## Slide-indeling
|
|
|
|
### Slide 1: Titelslide
|
|
**Titel:** Les 8 — Van In-Memory naar Supabase
|
|
**Ondertitel:** Koppelen van Supabase aan Next.js
|
|
|
|
---
|
|
|
|
### Slide 2: Terugblik vorige les
|
|
**Titel:** Terugblik — Waar waren we?
|
|
|
|
**Bullets:**
|
|
- Stemmen werkt lokaal (in-memory data)
|
|
- QuickPoll app: / en /poll/[id] pagina's
|
|
- VoteForm component → stemmen onmiddellijk
|
|
- Nu: alles naar een echte database!
|
|
|
|
---
|
|
|
|
### Slide 3: Planning vandaag
|
|
**Titel:** Planning — Les 8 (3 uur)
|
|
|
|
**Timeline:**
|
|
- 09:00-09:15 | Welkom & Intro (15 min)
|
|
- 09:15-09:45 | **KLASSIKAAL: Setup** — PDF Deel 1 (30 min)
|
|
- 09:45-10:00 | **KLASSIKAAL: Queries** — PDF Deel 2 (15 min)
|
|
- 10:00-10:15 | **KLASSIKAAL: Componenten** — PDF Deel 3 (15 min)
|
|
- 10:15-10:30 | Pauze (15 min)
|
|
- 10:30-10:45 | Uitleg INSERT + start Deel 4 (15 min)
|
|
- 10:45-11:30 | **ZELFSTANDIG: /create pagina** — PDF Deel 4 (45 min)
|
|
- 11:30-12:00 | Vragen + Huiswerk (30 min)
|
|
|
|
**Aanpak:** Deel 1-3 klassikaal met de PDF. Deel 4 zelfstandig.
|
|
|
|
---
|
|
|
|
### Slide 4: Van Array naar Database
|
|
**Titel:** Van In-Memory Array naar Supabase
|
|
|
|
**Links:** In-memory (OUD)
|
|
```javascript
|
|
const polls = [
|
|
{ question: "Favoriete taal?",
|
|
options: ["JS", "Python"],
|
|
votes: [10, 5]
|
|
}
|
|
];
|
|
```
|
|
|
|
**Rechts:** Supabase Database (NIEUW)
|
|
```
|
|
polls tabel
|
|
├─ id (1)
|
|
├─ question ("Favoriete taal?")
|
|
└─ options[] (relatie)
|
|
|
|
options tabel
|
|
├─ poll_id (1)
|
|
├─ text ("JS")
|
|
└─ votes (10)
|
|
```
|
|
|
|
---
|
|
|
|
### Slide 5: Supabase Queries
|
|
**Titel:** Supabase Queries
|
|
**Ondertitel:** Vier operaties die je nodig hebt
|
|
|
|
**Queries:**
|
|
- SELECT alles: `.from("polls").select("*, options(*)")`
|
|
- SELECT een: `.eq("id", 5).single()`
|
|
- INSERT: `.insert({ question }).select().single()`
|
|
- RPC: `.rpc("vote_option", { option_id })`
|
|
|
|
**Tekst:** Dit zijn de TODO blokken in de PDF!
|
|
|
|
---
|
|
|
|
### Slide 6: Server vs Client: Wie doet wat?
|
|
**Titel:** Server vs Client
|
|
**Ondertitel:** Wie doet wat?
|
|
|
|
**Twee kolommen:**
|
|
|
|
**SERVER Component:**
|
|
- async function
|
|
- await getPolls()
|
|
- Data fetching
|
|
- Direct naar DB
|
|
|
|
**CLIENT Component:**
|
|
- 'use client'
|
|
- useState, onClick
|
|
- Interactief: klik, type
|
|
- useEffect
|
|
|
|
**Zeg:** "Server haalt data, Client maakt het interactief."
|
|
|
|
---
|
|
|
|
### Slide 7: Pauze
|
|
**Titel:** Pauze
|
|
|
|
**Tekst:** Deel 1-3 klaar! Na de pauze: zelfstandig /create pagina bouwen.
|
|
|
|
---
|
|
|
|
### Slide 8: Zelf Doen — /create pagina
|
|
**Titel:** Zelf Doen — PDF Deel 4
|
|
|
|
**Ondertitel:** Het formulier staat in de PDF — jij schrijft de INSERT!
|
|
|
|
**Stappen:**
|
|
1. RLS INSERT policy toevoegen (Stap 4.1)
|
|
2. Copy-paste app/create/page.tsx (Stap 4.3)
|
|
3. handleSubmit TODO invullen (de INSERT logica)
|
|
4. Testen: poll aanmaken → verschijnt op homepage
|
|
|
|
---
|
|
|
|
### Slide 9: Huiswerk
|
|
**Titel:** Huiswerk
|
|
|
|
**Verplicht:**
|
|
- /create pagina afmaken
|
|
- Validatie toevoegen (vraag niet leeg, min 2 opties)
|
|
|
|
**Extra:**
|
|
- Delete functionaliteit
|
|
- SQL queries in Supabase testen
|
|
- Styling verbeteren
|
|
|
|
---
|
|
|
|
### Slide 10: Afsluiting
|
|
**Titel:** Tot volgende week!
|
|
|
|
**Tekst:**
|
|
- Volgende les: Supabase Auth
|
|
- Inloggen, registreren & bepalen wie wat mag
|