150 lines
3.7 KiB
Markdown
150 lines
3.7 KiB
Markdown
# Les 7 — Slide Overzicht
|
||
## Van In-Memory naar Supabase
|
||
|
||
---
|
||
|
||
## Slide 1: Titelslide
|
||
**Layout:** Split (cream links, blauw rechts) — Keynote stijl
|
||
- NOVI Hogeschool logo
|
||
- "AI leerlijn"
|
||
- **Next.js**
|
||
- **Les 7**
|
||
|
||
---
|
||
|
||
## Slide 2: Terugblik vorige les
|
||
**Layout:** Cream + blauw blob rechts
|
||
- **Titel:** Terugblik vorige les
|
||
- Links: Wat we gebouwd hebben
|
||
- Next.js QuickPoll app van scratch
|
||
- TypeScript types, API routes, pages
|
||
- Server Components + Client Components
|
||
- Loading, Error, Not-Found states
|
||
- Middleware
|
||
- Rechts: Wat nog mist
|
||
- Stemmen werkt niet echt
|
||
- Data verdwijnt bij restart
|
||
- Geen echte database
|
||
|
||
---
|
||
|
||
## Slide 3: Planning
|
||
**Layout:** Gele achtergrond + decoratieve blobs
|
||
- **Titel:** Planning
|
||
- Deel 1: Poll afmaken — 30 min
|
||
- votePoll functie, POST route, bug fix, visuele feedback
|
||
- Deel 2: Supabase Introductie (No Code) — 45 min
|
||
- Account, tabellen, foreign keys, RLS, SQL
|
||
- Pauze — 15 min
|
||
- Deel 3: Supabase koppelen — 60 min
|
||
- Client, environment variables, data.ts, testen
|
||
- Afsluiting — 30 min
|
||
|
||
---
|
||
|
||
## Slide 4: Wat is Supabase?
|
||
**Layout:** Cream + blauw blob rechts
|
||
- **Titel:** Wat is Supabase?
|
||
- Open-source Firebase alternatief
|
||
- PostgreSQL database — 30+ jaar, professioneel
|
||
- Auth — login, registratie, OAuth
|
||
- Storage — bestanden uploaden
|
||
- Realtime — live updates
|
||
- Edge Functions — serverless
|
||
- Gratis tier voor leren en kleine projecten
|
||
|
||
---
|
||
|
||
## Slide 5: Van Array naar Database
|
||
**Layout:** Cream + blauw blob rechts
|
||
- **Titel:** Van Array naar Database
|
||
- Links: code block met de oude in-memory array
|
||
```
|
||
let polls: Poll[] = [
|
||
{ id: "1", question: "...", options: [...], votes: [...] }
|
||
];
|
||
```
|
||
- Rechts: twee tabellen
|
||
- polls: id, question, created_at
|
||
- options: id, poll_id, text, votes
|
||
- Pijl van links naar rechts: "Normalisatie"
|
||
- Uitleg: "Eén array → twee tabellen met een relatie"
|
||
|
||
---
|
||
|
||
## Slide 6: Live Coding — Deel 1
|
||
**Layout:** Blauw volledig + cream blob links
|
||
- **Titel:** Live Coding
|
||
- **Subtitel:** Deel 1: Poll afmaken
|
||
- Stappen:
|
||
- votePoll() functie
|
||
- POST route werkend
|
||
- Bug fix: optionIndex
|
||
- Visuele feedback
|
||
|
||
---
|
||
|
||
## Slide 7: Supabase Setup — Deel 2
|
||
**Layout:** Blauw volledig + cream blob links
|
||
- **Titel:** Supabase Setup
|
||
- **Subtitel:** Deel 2: No Code — alles via de browser
|
||
- Stappen:
|
||
- Project aanmaken
|
||
- Tabellen: polls + options
|
||
- Foreign keys & relaties
|
||
- RLS policies
|
||
- Testdata + SQL Editor
|
||
|
||
---
|
||
|
||
## Slide 8: Pauze
|
||
**Layout:** Cream + grote blauwe cirkel
|
||
- **Titel:** Pauze
|
||
- **Subtitel:** 15 minuten
|
||
- "Deel 1 & 2 staan er. Na de pauze: koppelen aan Next.js!"
|
||
|
||
---
|
||
|
||
## Slide 9: Live Coding — Deel 3
|
||
**Layout:** Blauw volledig + cream blob links
|
||
- **Titel:** Live Coding
|
||
- **Subtitel:** Deel 3: Supabase × Next.js
|
||
- Stappen:
|
||
- @supabase/supabase-js installeren
|
||
- .env.local + supabase client
|
||
- data.ts herschrijven
|
||
- Components + pages aanpassen
|
||
- Testen: stem → refresh → data bewaard!
|
||
|
||
---
|
||
|
||
## Slide 10: Vragen?
|
||
**Layout:** Cream + blauw blob rechts
|
||
- **Titel:** Vragen?
|
||
- Reflectievragen:
|
||
- Snap je het verschil tussen in-memory en database?
|
||
- Kun je uitleggen wat een foreign key doet?
|
||
- Begrijp je hoe RLS werkt?
|
||
|
||
---
|
||
|
||
## Slide 11: Huiswerk
|
||
**Layout:** Cream + blauw blob rechts
|
||
- **Titel:** Huiswerk
|
||
- Opdracht: /create pagina bouwen
|
||
1. Formulier met vraag + opties
|
||
2. Opslaan in Supabase (INSERT)
|
||
3. Navbar link toevoegen
|
||
4. Redirect na aanmaken
|
||
- Extra:
|
||
- SQL queries schrijven (meeste stemmen, sorteren)
|
||
- Validatie toevoegen
|
||
|
||
---
|
||
|
||
## Slide 12: Afsluiting
|
||
**Layout:** Blauw volledig + cream/roze/zwart blobs links
|
||
- **Titel:** Tot volgende week!
|
||
- Volgende les: Supabase Auth — inloggen & registreren
|
||
- "Van array naar echte database. Goed gedaan!"
|