diff --git a/Samenvattingen/Les10-Samenvatting.md b/Samenvattingen/Les10-Samenvatting.md index 99079e4..757f6c7 100644 --- a/Samenvattingen/Les10-Samenvatting.md +++ b/Samenvattingen/Les10-Samenvatting.md @@ -1,270 +1,126 @@ -# Les 10: AI Tool Selection & Workflows +# Les 10: Full-Stack Mini Project --- ## Hoofdstuk -**Deel 3: AI Tooling & Prototyping** (Les 10-12) +**Deel 3: Integration & AI Tooling** (Les 10-12) ## Beschrijving -Leer de sterke en zwakke punten van elke AI tool kennen. Ontwikkel een framework om de juiste tool te kiezen voor de juiste taak en bouw je eigen workflow. +Combineer alles wat je geleerd hebt (TypeScript, Next.js, Supabase) in een kleine werkende applicatie. Dit is je eerste "echte" full-stack project en voorbereiding op het werken met AI tools. --- ## Te Behandelen -### Waarom Tool Selection Belangrijk Is +### Groepsdiscussie (15 min) +Bespreek klassikaal de Supabase ervaringen uit Les 9 - welke uitdagingen kwamen jullie tegen bij authenticatie en RLS? -Je kent nu meerdere AI tools: -- ChatGPT (brainstormen, planning, uitleg) -- Claude (lange context, nuance, analyse) -- v0.dev (UI prototyping) -- OpenCode (code schrijven met project context) +### Doel van deze les -**Het probleem:** Elke tool heeft sterke en zwakke punten. De juiste tool kiezen bespaart tijd en levert betere resultaten. +Je hebt nu alle bouwstenen: +- TypeScript (Les 5) +- Next.js met App Router (Les 6-7) +- Supabase database & auth (Les 8-9) + +Vandaag combineren we dit in een **werkende mini-app**. Geen nieuwe concepten - alleen integratie en toepassing. --- -### Tool Vergelijking +### Mini Project: Personal Bookmarks -| Tool | Sterk in | Minder sterk in | Kosten | -|------|----------|-----------------|--------| -| **ChatGPT** | Brainstormen, uitleg, planning, algemene kennis | Grote codebases, lange context | Gratis / Pro €20/maand | -| **Claude** | Lange documenten, nuance, analyse, veiligheid | Soms te voorzichtig, geen images genereren | Gratis / Pro $20/maand | -| **v0.dev** | UI components, snel prototypen, Tailwind | Complexe logica, backend | Gratis tier | -| **OpenCode** | Code schrijven, project context, terminal | Geen web access, geen images | Gratis | +Een simpele bookmark manager waar je links kunt opslaan. + +**Features:** +- Login met Supabase Auth +- Bookmarks toevoegen (URL + titel) +- Bookmarks bekijken en verwijderen + +**Tech stack:** +- Next.js 14 met App Router +- TypeScript +- Tailwind CSS +- Supabase (auth + database) +- React Query --- -### Tool Selection Framework +### Stap-voor-stap -**Stap 1: Identificeer de taak** -- Wat wil je bereiken? -- Hoe complex is het? -- Hoeveel context is nodig? +#### Database Schema -**Stap 2: Kies de juiste tool** +**Tabel: bookmarks** +| Kolom | Type | +|-------|------| +| id | uuid (PK) | +| user_id | uuid (FK naar auth.users) | +| url | text | +| title | text | +| created_at | timestamptz | -``` -Als je wilt... Gebruik... -───────────────────────────────────────────────── -Brainstormen over een idee → ChatGPT -Een lange codebase analyseren → Claude -Snel een UI component maken → v0.dev -Code schrijven met project context → OpenCode -Een complex document begrijpen → Claude -Uitleg krijgen over een concept → ChatGPT -React component met styling → v0.dev -Feature implementeren in project → OpenCode -``` +**RLS:** Users kunnen alleen eigen bookmarks zien, toevoegen en verwijderen. ---- +#### Wat je bouwt -### Workflow Patterns - -**Pattern 1: Planning → Prototyping → Implementation** -``` -1. ChatGPT: Brainstorm features, maak planning -2. v0.dev: Genereer UI prototypes -3. OpenCode: Implementeer met project context -``` - -**Pattern 2: Research → Design → Build** -``` -1. ChatGPT/Claude: Research beste aanpak -2. v0.dev: Design components -3. OpenCode: Bouw en integreer -``` - -**Pattern 3: Quick Iteration** -``` -1. v0.dev: Snel component genereren -2. OpenCode: Aanpassen en integreren -3. Repeat -``` - ---- - -### Praktijk: Dezelfde Taak, Drie Tools - -**Opdracht:** Bouw een Contact Form component - -**Met ChatGPT:** -``` -Prompt: Ik wil een contact form maken met React en Tailwind. -Velden: naam, email, bericht. Validatie nodig. -Geef me de code en leg uit hoe het werkt. -``` -→ Krijg: Uitleg + code, maar zonder project context - -**Met v0.dev:** -``` -Prompt: Modern contact form with name, email, message fields. -Tailwind styling, validation, responsive design. -``` -→ Krijg: Visueel prototype, direct te gebruiken - -**Met OpenCode:** -``` -Prompt: Maak een ContactForm component in src/components/ -met naam, email en bericht velden. Gebruik onze bestaande -Input en Button components. Voeg Zod validatie toe. -``` -→ Krijg: Geïntegreerde code die past in je project - ---- - -### Wanneer Combineer Je Tools? - -**Scenario 1: Nieuwe feature bouwen** -1. ChatGPT: "Hoe zou je een dark mode toggle implementeren in React?" -2. v0.dev: "Dark mode toggle component with smooth transition" -3. OpenCode: "Integreer deze toggle in onze navbar, sla preference op in localStorage" - -**Scenario 2: Bug oplossen** -1. OpenCode: Vraag om bug te identificeren -2. Claude: Als de foutmelding complex is, vraag om uitleg -3. OpenCode: Implementeer de fix - -**Scenario 3: Nieuwe technologie leren** -1. ChatGPT: "Leg uit hoe React Server Components werken" -2. v0.dev: "Example of React Server Component with data fetching" -3. OpenCode: "Help me dit toe te passen in mijn Next.js project" - ---- - -### Anti-Patterns (Wat Niet Te Doen) - -**❌ Verkeerde tool voor de taak:** -- ChatGPT vragen om een hele app te bouwen → te weinig context -- v0.dev vragen om complexe backend logica → niet zijn sterke punt -- OpenCode vragen om design inspiratie → kan geen images maken - -**❌ Heen en weer kopiëren zonder begrip:** -- Kopieer niet blind code van ChatGPT naar je project -- Begrijp eerst WAT de code doet - -**❌ Dezelfde prompt in elke tool:** -- Pas je prompt aan per tool -- v0.dev wil visuele beschrijvingen -- OpenCode wil project-specifieke context +1. **Login pagina** - Supabase Auth +2. **Dashboard** - Lijst van bookmarks +3. **Add form** - URL + titel invoeren +4. **Delete** - Bookmark verwijderen --- ## Tools -- ChatGPT -- Claude -- v0.dev -- OpenCode/WebStorm +- VS Code +- Supabase Dashboard +- Browser DevTools --- -## Lesopdracht (2 uur) +## Lesopdracht (2.5 uur) -### Tool Comparison Challenge +### Bouw de Bookmark Manager -**Deel 1: Dezelfde Taak, Drie Tools (1 uur)** +**Checkpoints:** -Bouw een "Contact Form" component met alle drie de tools: +| Tijd | Wat klaar moet zijn | +|------|---------------------| +| 30 min | Project setup + database schema | +| 60 min | Auth werkt (login/logout) | +| 90 min | Bookmarks toevoegen en bekijken | +| 120 min | Delete werkt | +| 150 min | Styling en testen | -1. **ChatGPT (20 min)** - - Vraag om code + uitleg - - Noteer: hoe lang duurde het, kwaliteit output, wat miste? - -2. **v0.dev (20 min)** - - Genereer visueel prototype - - Noteer: hoe snel, hoe mooi, hoe aanpasbaar? - -3. **OpenCode (20 min)** - - Integreer in bestaand project - - Noteer: hoe goed past het, hoeveel aanpassing nodig? - -**Deel 2: Analyse (30 min)** - -Vul dit schema in: - -| Aspect | ChatGPT | v0.dev | OpenCode | -|--------|---------|--------|----------| -| Tijd tot werkend component | | | | -| Kwaliteit code | | | | -| Visueel design | | | | -| Past in project | | | | -| Hoeveel aanpassing nodig | | | | -| Totaalscore (1-10) | | | | - -**Deel 3: Workflow Documentatie (30 min)** - -- Maak `docs/WORKFLOW.md` in je project -- Documenteer je ideale workflow per taaktype -- Inclusief template prompts voor elke tool +**Minimale eisen:** +- [ ] Login/logout werkt +- [ ] Bookmarks toevoegen werkt +- [ ] Bookmarks worden getoond +- [ ] Delete werkt ### Deliverable -- Screenshot van alle 3 contact forms -- Ingevuld vergelijkingsschema -- `docs/WORKFLOW.md` bestand +- Werkende lokale applicatie +- Screenshot van je app met data --- -## Huiswerk (2 uur) +## Huiswerk (1 uur) -### Bouw Je Tool Selection Cheat Sheet +### Reflectie -**Deel 1: Cheat Sheet Maken (1 uur)** +Schrijf korte reflectie (200 woorden): +- Wat ging goed bij het integreren? +- Waar liep je vast? +- Wat zou je volgende keer anders doen? -Maak een persoonlijke "Tool Selection Cheat Sheet" (1 pagina): - -```markdown -# Mijn AI Tool Cheat Sheet - -## Wanneer gebruik ik wat? - -### ChatGPT -- ✅ Gebruik voor: [jouw ervaring] -- ❌ Niet voor: [jouw ervaring] -- 💡 Beste prompt tip: [jouw tip] - -### Claude -- ✅ Gebruik voor: [jouw ervaring] -- ❌ Niet voor: [jouw ervaring] -- 💡 Beste prompt tip: [jouw tip] - -### v0.dev -- ✅ Gebruik voor: [jouw ervaring] -- ❌ Niet voor: [jouw ervaring] -- 💡 Beste prompt tip: [jouw tip] - -### OpenCode -- ✅ Gebruik voor: [jouw ervaring] -- ❌ Niet voor: [jouw ervaring] -- 💡 Beste prompt tip: [jouw tip] -``` - -**Deel 2: Testen op Nieuwe Taken (45 min)** - -Test je cheat sheet op 2 nieuwe taken: -1. Bouw een "Testimonial Card" component -2. Voeg een "Dark Mode Toggle" toe - -Per taak: kies tools op basis van cheat sheet, voer uit, update cheat sheet. - -**Deel 3: Reflectie (15 min)** - -Schrijf korte reflectie (400 woorden): -- Welke tool is jouw favoriet en waarom? -- Wanneer combineer je tools? -- Wat ga je anders doen na deze les? +Maak een lijst van 3 verbeterpunten voor je code. ### Deliverable -- Tool Selection Cheat Sheet (1 pagina) -- 2 gebouwde components -- Reflectie (400 woorden) +- Reflectie (200 woorden) +- 3 verbeterpunten --- ## Leerdoelen Na deze les kan de student: -- De sterke en zwakke punten van elke AI tool benoemen -- De juiste tool kiezen voor een specifieke taak -- Meerdere tools combineren in een effectieve workflow -- Een persoonlijke workflow documenteren -- Template prompts schrijven per tool -- Kritisch evalueren welke tool wanneer het beste werkt +- Een complete full-stack applicatie bouwen met Next.js, TypeScript en Supabase +- CRUD operaties implementeren met React Query +- Authenticatie integreren in een applicatie +- Zelfstandig integratieproblemen oplossen diff --git a/readme.md b/readme.md index 87fc68a..2b0b094 100644 --- a/readme.md +++ b/readme.md @@ -19,7 +19,7 @@ Een 18-weekse cursus die studenten meeneemt van AI-beginner naar AI-powered deve | 07 | [Next.js Fundamentals 2: API Routes & Data Fetching](Samenvattingen/Les07-Samenvatting.md) | 2 | 📋 Samenvatting | | 08 | [Database Principles](Samenvattingen/Les08-Samenvatting.md) | 2 | 📋 Samenvatting | | 09 | [Supabase Basics](Samenvattingen/Les09-Samenvatting.md) | 2 | 📋 Samenvatting | -| 10 | [AI Tool Selection & Workflows](Samenvattingen/Les10-Samenvatting.md) | 3 | 📋 Samenvatting | +| 10 | [Full-Stack Mini Project](Samenvattingen/Les10-Samenvatting.md) | 3 | 📋 Samenvatting | | 11 | [Hands-on: Van Idee naar Prototype](Samenvattingen/Les11-Samenvatting.md) | 3 | 📋 Samenvatting | | 12 | [Introduction to Cursor](Samenvattingen/Les12-Samenvatting.md) | 3 | 📋 Samenvatting | | 13 | [Prompt Engineering & Custom GPTs](Samenvattingen/Les13-Samenvatting.md) | 4 | 📋 Samenvatting | @@ -37,7 +37,7 @@ Een 18-weekse cursus die studenten meeneemt van AI-beginner naar AI-powered deve |------|--------|-------|--------| | Deel 1: AI Foundations | 1-4 | ChatGPT, v0.dev, OpenCode, WebStorm | Gratis (WebStorm via school) | | Deel 2: Technical Foundations | 5-9 | TypeScript, Next.js, React Query, Supabase | Gratis | -| Deel 3: AI Tooling & Prototyping | 10-12 | ChatGPT, Claude, v0.dev, OpenCode, Cursor | Free tier beschikbaar | +| Deel 3: Integration & AI Tooling | 10-12 | Next.js, Supabase, Cursor | Free tier beschikbaar | | Deel 4: Advanced AI Features | 13-18 | Cursor, Custom GPTs, Claude Projects, Vercel AI SDK, Tool Calling, Agents | Free tier beschikbaar | **Eindopdracht:** Cursor (free tier voldoende) @@ -333,41 +333,32 @@ Stevige technische basis: TypeScript, Next.js, databases en Supabase. --- -# Deel 3: AI Tooling & Prototyping +# Deel 3: Integration & AI Tooling **3 lessen · 5 EC** -AI tools effectief inzetten voor professionele development. +Integratie van alle geleerde technieken en introductie van professionele AI tools. --- -### Les 10: AI Tool Selection & Workflows +### Les 10: Full-Stack Mini Project -**Tools:** ChatGPT, Claude, v0.dev, OpenCode +**Tools:** VS Code, Supabase, Browser DevTools **Docent vertelt:** -- Overzicht van alle AI tools die we kennen -- Sterke en zwakke punten per tool -- Wanneer gebruik je welke tool? -- Tool selection framework: taak → tool -- Workflow patterns voor AI-assisted development +- Je hebt nu alle bouwstenen: TypeScript, Next.js, Supabase +- Vandaag combineren we alles in een werkende mini-app +- Geen nieuwe concepten - alleen integratie en toepassing **Studenten doen:** -- Dezelfde taak uitvoeren in 3 verschillende tools -- Output vergelijken en analyseren -- Tool selection framework invullen -- Eigen workflow documenteren +- **Groepsdiscussie:** Bespreek Supabase ervaringen uit Les 9 - welke uitdagingen bij auth en RLS? +- Bookmark manager bouwen: login, bookmarks toevoegen/bekijken/verwijderen +- Alle geleerde technieken combineren +- Zelfstandig integratieproblemen oplossen -| Tool | Sterk in | Minder sterk in | -|------|----------|-----------------| -| ChatGPT | Brainstormen, uitleg, planning | Grote codebases | -| Claude | Lange context, nuance, analyse | Soms te voorzichtig | -| v0.dev | UI components, snel prototypen | Complexe logica | -| OpenCode | Code schrijven, project context | Geen web access | +**Lesopdracht:** Bouw een Personal Bookmarks app met login, CRUD operaties, en RLS. Checkpoints: 30 min setup, 60 min auth, 90 min CRUD, 120 min delete, 150 min polish. -**Lesopdracht:** Bouw een "Contact Form" component met 3 tools (ChatGPT planning → v0.dev UI → OpenCode logica). Documenteer per tool: wat werkte, wat niet, hoe lang duurde het. - -**Huiswerk:** Maak je eigen "Tool Selection Cheat Sheet", test het op 2 nieuwe taken, reflecteer op je workflow (400 woorden). +**Huiswerk:** Reflectie schrijven (200 woorden): wat ging goed, waar liep je vast. Maak lijst van 3 verbeterpunten voor je code. [→ Ga naar Les 10](Samenvattingen/Les10-Samenvatting.md)