fix: les 9
This commit is contained in:
162
readme.md
162
readme.md
@@ -42,9 +42,9 @@ Dit format betrekent meer interactie, sneller feedback en meer mogelijkheden voo
|
||||
| 04 | [TypeScript Fundamentals](Samenvattingen/Les04-Samenvatting.md) | 2 | ✅ Gegeven |
|
||||
| 05 | [Next.js — Het React Framework (Part 1)](Samenvattingen/Les05-Samenvatting.md) | 2 | ✅ Gegeven (v1) |
|
||||
| 06 | [Next.js — QuickPoll Vervolg (Part 2)](Samenvattingen/Les06-Samenvatting.md) | 2 | 📋 Gepland |
|
||||
| 07 | [Database Principles & Supabase Setup](Samenvattingen/Les07-Samenvatting.md) | 2 | 📋 Samenvatting |
|
||||
| 08 | [Supabase: Auth & CRUD](Samenvattingen/Les08-Samenvatting.md) | 2 | 📋 Samenvatting |
|
||||
| 09 | [Full-Stack Mini Project](Samenvattingen/Les09-Samenvatting.md) | 3 | 📋 Samenvatting |
|
||||
| 07 | [Van In-Memory naar Supabase (Introductie)](Samenvattingen/Les07-Samenvatting.md) | 2 | ✅ Gegeven |
|
||||
| 08 | [Van In-Memory naar Supabase (Self-Paced + /create)](Samenvattingen/Les08-Samenvatting.md) | 2 | 📋 Gepland |
|
||||
| 09 | [Cursor Deep Dive (Student Plan)](Samenvattingen/Les09-Samenvatting.md) | 2 | 📋 Gepland |
|
||||
| 10 | [Styling: Tailwind CSS & shadcn/ui](Samenvattingen/Les10-Samenvatting.md) | 3 | 📋 Samenvatting |
|
||||
| 11 | [Van Idee naar Prototype](Samenvattingen/Les11-Samenvatting.md) | 3 | 📋 Samenvatting |
|
||||
| 12 | [Project Setup & AI Config (.cursorrules, claude.md)](Samenvattingen/Les12-Samenvatting.md) | 3 | 📋 Samenvatting |
|
||||
@@ -62,7 +62,7 @@ Dit format betrekent meer interactie, sneller feedback en meer mogelijkheden voo
|
||||
| Deel | Lessen | Tools | Kosten |
|
||||
|------|--------|-------|--------|
|
||||
| Deel 1: AI Foundations | 1-3 | ChatGPT, v0.dev, OpenCode, **Cursor** | Gratis (Cursor Student Plan) |
|
||||
| Deel 2: Technical Foundations | 4-8 | TypeScript, Next.js, Supabase | Gratis |
|
||||
| Deel 2: Technical Foundations | 4-9 | TypeScript, Next.js, Supabase, Supabase Auth | Gratis |
|
||||
| Deel 3: Full-Stack Development | 9-12 | Next.js, Supabase, Tailwind, **shadcn/ui**, Cursor | Gratis |
|
||||
| Deel 4: Advanced AI & Deployment | 13-18 | Cursor, Vercel AI SDK, Vercel | Gratis (Cursor Student Plan) |
|
||||
|
||||
@@ -225,9 +225,11 @@ Kennismaking met AI, LLMs en de basis van AI-assisted development met Cursor.
|
||||
|
||||
# Deel 2: Technical Foundations
|
||||
|
||||
**5 lessen · 10 EC**
|
||||
**6 lessen · 10 EC**
|
||||
|
||||
Stevige technische basis: TypeScript, Next.js, databases en Supabase.
|
||||
Stevige technische basis: TypeScript, Next.js, Supabase database en Cursor deep dive.
|
||||
|
||||
> **Curriculum-shift:** Deel 2 telt nu 6 lessen i.p.v. 5. Tijdens het geven van Les 7 bleek dat studenten meer tijd nodig hadden voor het Supabase-traject. Daarom is Les 8 (Self-paced redo + /create) toegevoegd. Les 9 is een Cursor Deep Dive nu studenten de Student Plan hebben. **Supabase Auth schuift naar Les 10. Les 10-18 schuiven hierdoor één plek op en moeten nog opnieuw gepland worden.**
|
||||
|
||||
---
|
||||
|
||||
@@ -304,83 +306,127 @@ Stevige technische basis: TypeScript, Next.js, databases en Supabase.
|
||||
|
||||
---
|
||||
|
||||
### Les 7: Database Principles & Supabase Setup
|
||||
### Les 7: Van In-Memory naar Supabase (Introductie)
|
||||
|
||||
**Tools:** Diagramming tool (draw.io/Excalidraw), Supabase, Cursor
|
||||
**Tools:** Next.js 15, Supabase (Table Editor, SQL Editor), `@supabase/supabase-js`, Cursor, TypeScript
|
||||
|
||||
**Docent vertelt:**
|
||||
- Wat is een relationele database? Tabellen, rijen, kolommen
|
||||
- Primary Keys, Foreign Keys en relaties
|
||||
- Relatie types: one-to-one, one-to-many, many-to-many
|
||||
- Normalisatie basics
|
||||
- Wat is Supabase? (database + auth in één)
|
||||
- Supabase project setup
|
||||
- Table Editor: tabellen maken zonder SQL
|
||||
- Environment variables configuratie
|
||||
**Docent vertelt (~75 min, klassikaal):**
|
||||
- Recap Les 6: QuickPoll met in-memory data — wat mist nog?
|
||||
- Server Component + Client Component patroon (kernmoment)
|
||||
- Wat is Supabase? Open-source Firebase alternatief op Postgres
|
||||
- Tabellen, primary keys, foreign keys, CASCADE
|
||||
- RLS policies basics
|
||||
- SQL: SELECT, WHERE, JOIN
|
||||
- Environment variables in Next.js (`NEXT_PUBLIC_` prefix)
|
||||
- Supabase JavaScript client (`from`, `select`, `eq`, `single`)
|
||||
|
||||
**Studenten doen:**
|
||||
- Database schema tekenen voor eigen project
|
||||
- Supabase account en project aanmaken
|
||||
- Tabellen maken via UI (op basis van eigen schema)
|
||||
- `.env.local` configureren
|
||||
- Supabase client instellen
|
||||
**Samen bouwen (~120 min, klassikaal):**
|
||||
- **Deel 1:** Poll afmaken — `votePoll()`, POST route, Server/Client split, percentage bars
|
||||
- **Deel 2:** Supabase no-code — project, polls + options tabellen met foreign key, RLS, testdata, SQL Editor
|
||||
- **Deel 3:** Supabase koppelen — `npm install`, `.env.local`, `lib/supabase.ts`, types, `data.ts` herschrijven, components aanpassen, testen
|
||||
|
||||
**Lesopdracht:**
|
||||
1. Teken database schema voor jouw eindproject
|
||||
2. Maak Supabase project
|
||||
3. Implementeer je tabellen in Table Editor
|
||||
4. Configureer `.env.local`
|
||||
5. Test connectie met Supabase client
|
||||
**Lesopdracht:** Volg klassikaal mee. Aan het eind draait je QuickPoll app met data uit Supabase.
|
||||
|
||||
**Huiswerk:** Refine je database schema, voeg meer relaties toe, dokumenteer decisions, bereid Les 8 vor.
|
||||
**Huiswerk:** /create pagina bouwen (formulier → INSERT). *Bleek voor de meeste studenten te zwaar — daarom wordt dit in Les 8 herhaald.*
|
||||
|
||||
**Lesmateriaal:**
|
||||
- [Slide-Overzicht](Les07-Supabase/Les07-Slide-Overzicht.md)
|
||||
- [Docenttekst](Les07-Supabase/Les07-Docenttekst.md)
|
||||
- [Live Coding Guide](Les07-Supabase/Les07-Live-Coding-Guide.md)
|
||||
- [Lesopdracht (PDF)](Les07-Supabase/Les07-Lesopdracht.pdf)
|
||||
- [Slides (PPTX)](Les07-Supabase/Les07-Slides.pptx)
|
||||
|
||||
[→ Ga naar Les 7 Samenvatting](Samenvattingen/Les07-Samenvatting.md)
|
||||
|
||||
---
|
||||
|
||||
### Les 8: Supabase: Auth & CRUD
|
||||
### Les 8: Van In-Memory naar Supabase (Self-Paced + /create)
|
||||
|
||||
**Tools:** Supabase, Next.js, Cursor, React Query
|
||||
**Tools:** Next.js 15, Supabase (SQL Editor, RLS), `@supabase/supabase-js`, Cursor, TypeScript
|
||||
|
||||
**Docent vertelt:**
|
||||
- Supabase Authentication: email/password, OAuth basics
|
||||
- User sessions en JWT tokens
|
||||
- Row Level Security (RLS) policies
|
||||
- CRUD operaties in Supabase
|
||||
- Realtime subscriptions introduceer
|
||||
- Error handling en validation
|
||||
- Best practices: secrets, security
|
||||
**Achtergrond:** Studenten kregen vorige les niet door Deel 3 heen. Deze les loopt de docent de Supabase-koppeling rustig opnieuw door — nu via een **self-paced PDF** met copy-paste blokken en TODO-blokken. Daarna bouwen studenten zelfstandig de **/create pagina** (hun eerste INSERT).
|
||||
|
||||
**Studenten doen:**
|
||||
- **Groepsdiscussie:** Database schemas van vorige les - aanpassingen nodig?
|
||||
- Auth setup met email/password
|
||||
- User sessions implementeren
|
||||
- RLS policies schrijven
|
||||
- CRUD app bouwen (Todo, Notes, Bookmarks)
|
||||
- Realtime features testen
|
||||
**Aanpak:** Deel 1-3 klassikaal door de PDF. Deel 4 (/create pagina) zelfstandig met docent als coach.
|
||||
|
||||
**Lesopdracht:**
|
||||
1. Setup Supabase Auth (email/password)
|
||||
2. Maak login/signup forms
|
||||
3. Implementeer user sessions
|
||||
4. Schrijf RLS policies voor je tabellen
|
||||
5. Bouw complete CRUD app met auth
|
||||
**Tijdsindeling:**
|
||||
- 09:00–09:15 Welkom + PDF uitdelen
|
||||
- 09:15–09:45 **PDF Deel 1** — Setup (npm, .env, supabase.ts, types, `vote_option` SQL functie)
|
||||
- 09:45–10:00 **PDF Deel 2** — Queries (`getPolls`, `getPollById`, `votePoll` met TODO's)
|
||||
- 10:00–10:15 **PDF Deel 3** — Componenten (page, PollItem, VoteForm, [id])
|
||||
- 10:15–10:30 Pauze
|
||||
- 10:30–10:45 Uitleg INSERT theorie + RLS policy
|
||||
- 10:45–11:30 **ZELFSTANDIG: PDF Deel 4** — /create pagina
|
||||
- 11:30–12:00 Vragen + Huiswerk + Vooruitblik Auth
|
||||
|
||||
**Huiswerk:** Add OAuth provider (Google/GitHub), implementeer logout en password reset, deploy naar Vercel met env secrets.
|
||||
**Belangrijke leermomenten:**
|
||||
- Self-paced PDF werkt beter dan live coding voor deze klas
|
||||
- Next.js 15: `params` is nu een `Promise<{ id: string }>` → `const { id } = await params`
|
||||
- Supabase RPC: `vote_option` PostgreSQL function aanmaken (anders PGRST202 error)
|
||||
- RLS INSERT policy nodig vóór `.insert()` (anders "row-level security violation")
|
||||
|
||||
**Lesopdracht:** PDF met 4 delen — grijze blokken zijn copy-paste, gele TODO-blokken vullen studenten zelf in.
|
||||
|
||||
**Huiswerk:** /create pagina afmaken, validatie toevoegen (vraag niet leeg, min 2 opties). Extra: delete functie, SQL queries, realtime, styling.
|
||||
|
||||
**Lesmateriaal:**
|
||||
- [Slide-Overzicht](Les08-Van-InMemory-naar-Supabase/Les08-Slide-Overzicht.md)
|
||||
- [Docenttekst](Les08-Van-InMemory-naar-Supabase/Les08-Docenttekst.md)
|
||||
- [Lesopdracht (PDF)](Les08-Van-InMemory-naar-Supabase/Les08-Lesopdracht.pdf) — self-paced handleiding
|
||||
- [Slides (PPTX)](Les08-Van-InMemory-naar-Supabase/Les08-Slides.pptx)
|
||||
|
||||
[→ Ga naar Les 8 Samenvatting](Samenvattingen/Les08-Samenvatting.md)
|
||||
|
||||
---
|
||||
|
||||
# Deel 3: Full-Stack Development
|
||||
### Les 9: Cursor Deep Dive (Student Plan)
|
||||
|
||||
**4 lessen · 7 EC**
|
||||
**Tools:** Cursor (Student Plan), Next.js 16, TypeScript, Tailwind CSS
|
||||
|
||||
Integratie van alle geleerde technieken, styling en voorbereiding op eindproject.
|
||||
**Context:** Studenten hebben Cursor met het Student Plan (500 fast requests/maand). Tijd voor een deep dive in 5 professionele workflows die elke developer nodig heeft bij het werken met coding agents.
|
||||
|
||||
**We bouwen een nieuwe app from scratch: LinkVault** — een bookmark manager. In-memory data, geen Supabase.
|
||||
|
||||
**Docent vertelt (~25 min):**
|
||||
- Hoe werkt een coding agent? Het Harness concept (instructions + tools + model)
|
||||
- Rules & Skills: `.cursor/rules/` met 3 `.mdc` bestanden (project, components, styles)
|
||||
- Context management: nieuw feature = nieuwe chat, @file/@codebase/@docs combineren
|
||||
- Plan Mode: Shift+Tab → plan → review → edit → Build
|
||||
- Agent Mode vs Ask Mode: wanneer welke?
|
||||
- Debug Mode: hypotheses → logging → reproduceren → analyseren → fix
|
||||
- Code Review & Testing: "Find Issues", tests schrijven, semantic commits
|
||||
|
||||
**Samen bouwen (~120 min, klassikaal):**
|
||||
1. Setup: `npx create-next-app@latest` + 3 `.cursor/rules` bestanden
|
||||
2. Plan Mode: plan LinkVault → review → Build
|
||||
3. Agent Mode: features bouwen (edit bookmark, tag filtering)
|
||||
4. Debug Mode: deterministische bug (handmatig geïntroduceerd) vinden en fixen
|
||||
5. Code Review: "Find Issues" + unit tests + semantic commits + git push
|
||||
6. (Optioneel) PR review met Cursor
|
||||
|
||||
**Lesopdracht:** Bouw LinkVault mee met alle 5 technieken.
|
||||
|
||||
**Huiswerk:** Bouw je eigen app from scratch (recepten, films, notities, of eigen idee) met dezelfde 5 technieken. Reflectie schrijven (200 woorden). Zie `Les09-Huiswerk.md`.
|
||||
|
||||
**Lesmateriaal:**
|
||||
- [Slide-Overzicht](Les09-Cursor-Deep-Dive/Les09-Slide-Overzicht.md)
|
||||
- [Docenttekst](Les09-Cursor-Deep-Dive/Les09-Docenttekst.md)
|
||||
- [Huiswerk](Les09-Cursor-Deep-Dive/Les09-Huiswerk.md)
|
||||
|
||||
[→ Ga naar Les 9 Samenvatting](Samenvattingen/Les09-Samenvatting.md)
|
||||
|
||||
---
|
||||
|
||||
### Les 9: Full-Stack Mini Project
|
||||
# Deel 3: Full-Stack Development
|
||||
|
||||
**4 lessen · 7 EC** *(nog te herplannen — Les 10-12 schuiven naar Les 11-13)*
|
||||
|
||||
Integratie van alle geleerde technieken, styling en voorbereiding op eindproject.
|
||||
|
||||
> **Let op:** De onderstaande lessen 9-12 zijn nog op de oude nummering. Na de Les 7/8/9 herschikking schuift dit blok één plek op (Les 10 = Mini Project, Les 11 = Styling, etc.). Bestanden zijn nog niet hernoemd.
|
||||
|
||||
---
|
||||
|
||||
### Les 9 (oud → wordt Les 10): Full-Stack Mini Project
|
||||
|
||||
**Tools:** Cursor, Supabase, Browser DevTools
|
||||
|
||||
|
||||
Reference in New Issue
Block a user