170 lines
3.6 KiB
Markdown
170 lines
3.6 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
|
||
**Afbeelding:** Supabase + Next.js logo's
|
||
|
||
---
|
||
|
||
### Slide 2: Terugblik vorige les
|
||
**Titel:** Terugblik — Waar waren we?
|
||
|
||
**Bullets:**
|
||
- Stemmen werkt lokaal (in-memory data)
|
||
- QuickPoll app heeft 2 pages: / en /poll/[id]
|
||
- VoteForm component ziet stemmen onmiddellijk
|
||
- Nu: alles naar een echte database
|
||
|
||
**Code snippet (links):**
|
||
```javascript
|
||
// OUD
|
||
const polls = [
|
||
{ question: "...", options: [...], votes: [...] }
|
||
];
|
||
```
|
||
|
||
---
|
||
|
||
### Slide 3: Planning vandaag
|
||
**Titel:** Planning — Les 8 (3 uur)
|
||
|
||
**Timeline:**
|
||
- 09:00-09:10 | Welkom & Terugblik (10 min)
|
||
- 09:10-10:15 | **DEEL 1: Live Coding — Supabase koppelen** (65 min)
|
||
- 10:15-10:30 | Pauze (15 min)
|
||
- 10:30-11:30 | **DEEL 2: Zelf Doen — /create pagina** (60 min)
|
||
- 11:30-11:45 | Vragen & Reflectie (15 min)
|
||
- 11:45-12:00 | Huiswerk & Afsluiting (15 min)
|
||
|
||
---
|
||
|
||
### 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
|
||
├─ id (1)
|
||
├─ poll_id (1)
|
||
├─ text ("JS")
|
||
├─ votes (10)
|
||
```
|
||
|
||
---
|
||
|
||
### Slide 5: Live Coding Deel 1 — Supabase × Next.js
|
||
**Titel:** Live Coding — Deel 1: Supabase koppelen
|
||
|
||
**Ondertitel:** Stap-voor-stap
|
||
|
||
**Stappen:**
|
||
1. npm install @supabase/supabase-js
|
||
2. .env.local (API keys)
|
||
3. lib/supabase.ts (client)
|
||
4. types/index.ts (Poll + Option)
|
||
5. lib/data.ts (queries herschrijven)
|
||
6. app/page.tsx (Server Component)
|
||
7. components/PollItem.tsx (percentage bars)
|
||
8. components/VoteForm.tsx (Client Component)
|
||
9. app/poll/[id]/page.tsx (detail)
|
||
10. app/api/polls/[id]/route.ts (API)
|
||
11. Testen!
|
||
|
||
**Spreaker:** "We werken samen naar een werkende Supabase integratie."
|
||
|
||
---
|
||
|
||
### Slide 6: Server vs Client: Wie doet wat?
|
||
**Titel:** Server vs Client: Wie doet wat?
|
||
|
||
**Twee kolommen:**
|
||
|
||
**SERVER Component:**
|
||
- `export default async function HomePage() { ... }`
|
||
- `const polls = await getPolls()` ✓
|
||
- Data fetching
|
||
- Direct naar database
|
||
- TypeScript compile-time
|
||
|
||
**CLIENT Component:**
|
||
- `'use client'`
|
||
- `const [voted, setVoted] = useState(...)`
|
||
- Interactief: klikken, typen, formulieren
|
||
- useEffect, event handlers
|
||
- Browser runtime
|
||
|
||
**Zeg:** "Server haalt data, Client maakt het interactief."
|
||
|
||
---
|
||
|
||
### Slide 7: Pauze
|
||
**Titel:** Pauze
|
||
|
||
**Tekst:** Supabase is gekoppeld! Na de pauze: /create pagina bouwen
|
||
|
||
**Icoon:** Koffie/pauze emojis
|
||
|
||
---
|
||
|
||
### Slide 8: Zelf Doen — /create pagina bouwen
|
||
**Titel:** Zelf Doen
|
||
|
||
**Ondertitel:** /create pagina bouwen
|
||
|
||
**Stappen:**
|
||
1. **RLS INSERT policy** toevoegen in Supabase dashboard
|
||
2. **Form bouwen** met vraag + minimaal 2 opties
|
||
3. **Insert logica:** Eerst poll, dan options met poll_id
|
||
4. **Redirect** naar homepage na succes
|
||
5. **Link toevoegen** op homepage naar /create
|
||
|
||
**Docent zegt:** "Zelf doen, 60 minuten. Ik loop rond!"
|
||
|
||
---
|
||
|
||
### Slide 9: Huiswerk
|
||
**Titel:** Huiswerk
|
||
|
||
**Verplicht:**
|
||
- /create pagina afmaken (als niet klaar)
|
||
- Validatie toevoegen (vraag niet leeg, min 2 opties)
|
||
|
||
**Extra:**
|
||
- Delete functionaliteit
|
||
- SQL queries direct in Supabase testen
|
||
- Realtime subscriptions uittesten
|
||
- Styling verbeteren
|
||
|
||
---
|
||
|
||
### Slide 10: Afsluiting
|
||
**Titel:** Tot volgende week!
|
||
|
||
**Voorkant:**
|
||
- "Volgende les: Supabase Auth"
|
||
- "Inloggen, registreren"
|
||
- "Bepalen wie wat mag doen"
|
||
|
||
**Achtergrond:** Supabase Auth afbeelding
|