diff --git a/Samenvattingen/Les07-Samenvatting.md b/Samenvattingen/Les07-Samenvatting.md index 327dd71..1bdc06f 100644 --- a/Samenvattingen/Les07-Samenvatting.md +++ b/Samenvattingen/Les07-Samenvatting.md @@ -1,4 +1,4 @@ -# Les 7: Backend Made Easy met Supabase + AI + Skills +# Les 7: Backend Basics met Supabase > π **Lesmateriaal nog niet uitgewerkt** > @@ -14,112 +14,174 @@ **Hoofdstuk 2: Intermediate** (Les 4-9) ## Beschrijving -Gebruik AI om backend te bouwen zonder backend expert te zijn. Focus op Supabase + AI + Skills combinatie. +Leer de basics van Supabase: een database opzetten, data opslaan/ophalen, en simpele authenticatie. AI helpt je met de complexiteit. --- ## Te Behandelen -### Supabase Overview +### Wat is Supabase? - Open-source Firebase alternative +- Hosted Postgres database +- Gratis tier voor development +- Mooie UI om tabellen te beheren -**Core Features:** -- Postgres database -- Authentication -- Storage -- Realtime -- Edge Functions -- Vector database +### Supabase UI Tour +- Dashboard overview +- Table Editor: tabellen maken zonder SQL +- Kolommen toevoegen (text, number, boolean, timestamp) +- Data handmatig invoeren en bekijken -### Waarom Supabase + AI Perfect Combo -- AI helpt met complexe database dingen +### Database Basics (zonder SQL kennis) +- Tabellen = spreadsheets met regels +- Kolommen = velden (naam, email, etc.) +- Rijen = individuele records +- Primary key: unieke identifier per rij -### Skills voor Supabase -- "supabase-postgres-best-practices" skill +### Supabase Client in Next.js -### Database Design met AI + Skills -- Natuurlijke taal β genormaliseerd schema +**Installatie:** +```bash +npm install @supabase/supabase-js +``` -### Row Level Security (RLS) -- RLS policies met AI + Skills -- Waarom RLS belangrijk is +**Setup:** +```ts +import { createClient } from '@supabase/supabase-js' -### TypeScript Types -- Supabase CLI auto-genereert types van database +const supabase = createClient( + process.env.NEXT_PUBLIC_SUPABASE_URL!, + process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY! +) +``` -### Supabase Client -- Setup -- Basis CRUD operaties -- Realtime subscriptions intro -- Supabase Storage intro +### CRUD Operaties (met AI hulp) -### Focus -AI + Skills doen zwaar werk, jij leert concepten +**Create:** +```ts +const { data, error } = await supabase + .from('todos') + .insert({ title: 'Nieuwe taak', completed: false }) +``` + +**Read:** +```ts +const { data, error } = await supabase + .from('todos') + .select('*') +``` + +**Update:** +```ts +const { data, error } = await supabase + .from('todos') + .update({ completed: true }) + .eq('id', 1) +``` + +**Delete:** +```ts +const { error } = await supabase + .from('todos') + .delete() + .eq('id', 1) +``` + +### Simpele Authentication +- Supabase Auth UI component (plug & play) +- Magic Link login (geen wachtwoord nodig) +- Session checken met `supabase.auth.getUser()` + +### Environment Variables +- `.env.local` voor secrets +- `NEXT_PUBLIC_` prefix voor client-side +- Nooit API keys committen naar Git + +### AI Helpt Met +- Database schema suggesties +- Query schrijven als je vastloopt +- Error messages begrijpen +- Code voorbeelden genereren --- ## Tools -- OpenCode/WebStorm -- Supabase -- supabase-postgres-best-practices skill +- Supabase (gratis tier) - Next.js +- Cursor/OpenCode --- ## Lesopdracht (2 uur) -### Deel 1: Supabase Skills Setup (10 min) -- Installeer "supabase-postgres-best-practices" skill in OpenCode/WebStorm -- Maak gratis Supabase project -- Bewaar credentials +### Bouw een Todo App met Supabase -### Deel 2: Bouw Todo App Backend (1u 50min) +**Deel 1: Supabase Setup (20 min)** +- Maak gratis Supabase account +- Maak nieuw project +- Kopieer URL en anon key naar `.env.local` -**Database Schema met AI + Skill (30 min):** -- Prompt: "Ontwerp database schema voor todo app met users, todos (title, description, due_date, priority, completed), categories, proper relationships." +**Deel 2: Database via UI (20 min)** +- Maak `todos` tabel via Table Editor +- Kolommen: `id` (auto), `title` (text), `completed` (boolean), `created_at` (timestamp) +- Voeg 3 test todos toe via UI -**RLS Policies met AI + Skill (30 min):** -- Prompt: "Maak RLS policies: users kunnen alleen hun eigen todos zien/bewerken." +**Deel 3: Next.js Integratie (1 uur)** +- Installeer `@supabase/supabase-js` +- Maak Supabase client +- Bouw simpele UI: + - Lijst van todos ophalen en tonen + - Form om nieuwe todo toe te voegen + - Checkbox om todo af te vinken + - Delete button -**Next.js Integratie (50 min):** -- Setup Supabase client -- Bouw UI: - - Create todo - - List todos - - Complete/delete - - Filter by category -- Implementeer CRUD met error handling -- Test of RLS werkt +**Deel 4: Auth toevoegen (20 min)** +- Installeer `@supabase/auth-ui-react` +- Voeg login pagina toe met Auth UI component +- Check of user ingelogd is + +### Deliverable +- Werkende Todo app met Supabase backend +- Login functionaliteit +- CRUD operaties werken --- ## Huiswerk (2 uur) -### Extend Todo App +### Extend de Todo App -**Nieuwe Features:** -1. **Categories systeem** - create/assign/filter, colors -2. **User profile pagina** - avatar upload naar Storage, display name -3. **Stats dashboard** - completed vs incomplete charts, trends +**Feature 1: Filtering (30 min)** +- Filter op: Alle / Actief / Voltooid +- Sorteer op datum -**Deployment:** -- Deploy naar Vercel met proper env vars +**Feature 2: User-specifieke todos (30 min)** +- Voeg `user_id` kolom toe aan todos tabel +- Filter todos op ingelogde user +- Elke user ziet alleen eigen todos -### Reflectie (400 woorden) +**Feature 3: Polish (30 min)** +- Loading states +- Error handling met toast messages +- Empty state ("Geen todos gevonden") -Schrijf over: -- Verschil in security/quality met vs zonder Supabase skill? -- Nieuwe patterns geleerd? -- Queries die je fout zou schrijven zonder AI? -- Zou je backend bouwen zonder AI hulp? +**Deploy (30 min)** +- Deploy naar Vercel +- Voeg environment variables toe in Vercel dashboard +- Test of alles werkt in productie + +### Deliverable +- Deployed Todo app op Vercel +- Screenshot van werkende app +- Link naar live versie --- ## Leerdoelen Na deze les kan de student: -- Supabase project opzetten en configureren -- Database schema's ontwerpen met AI + Skills -- Row Level Security (RLS) policies implementeren -- TypeScript types genereren van database -- CRUD operaties implementeren met Supabase client -- De supabase-postgres-best-practices skill effectief gebruiken +- Een Supabase project opzetten +- Tabellen maken via de Supabase UI (zonder SQL) +- De Supabase client installeren en configureren +- Basis CRUD operaties uitvoeren (create, read, update, delete) +- Simpele authenticatie implementeren met Auth UI +- Environment variables correct gebruiken diff --git a/Samenvattingen/Les10-Samenvatting.md b/Samenvattingen/Les10-Samenvatting.md index 59266bb..7ae6d36 100644 --- a/Samenvattingen/Les10-Samenvatting.md +++ b/Samenvattingen/Les10-Samenvatting.md @@ -1,4 +1,4 @@ -# Les 10: Supabase Automation - Cron Jobs, Webhooks & AI Workflows +# Les 10: Project Setup & Repository Structure > π **Lesmateriaal nog niet uitgewerkt** > @@ -11,144 +11,208 @@ --- ## Hoofdstuk -**Hoofdstuk 3: Advanced** (Les 8-18) +**Hoofdstuk 3: Advanced** (Les 10-18) ## Beschrijving -Leer dingen automatiseren met Supabase cron jobs die AI agents triggeren voor intelligente workflows. +Leer hoe je een professioneel project opzet met goede folder structuur, documentatie, en AI-configuratie files. Dit vormt de basis voor je eindopdracht. --- ## Te Behandelen -### Waarom Automatiseren? -- Verminder manual werk -- Consistente executie -- Scale zonder effort -- 24/7 beschikbaarheid +### Waarom Project Structure Belangrijk Is +- AI tools werken beter met duidelijke structuur +- Makkelijker samenwerken +- Sneller nieuwe features toevoegen +- Professionele uitstraling -### Types van Automation -- Scheduled tasks (cron jobs) -- Event-driven (webhooks) -- AI-powered workflows +### Ideale Folder Structuur -### Supabase Edge Functions voor Automation -- Deno runtime -- TypeScript -- Serverless at edge +``` +project/ +βββ .cursor/ +β βββ rules/ # Cursor instructies +β βββ general.mdc # Algemene project regels +β βββ components.mdc # Component-specifieke regels +βββ docs/ +β βββ PROMPT-LOG.md # Belangrijke AI prompts +β βββ AI-DECISIONS.md # Architectuur beslissingen +β βββ PROJECT-BRIEF.md # Project beschrijving +βββ src/ +β βββ app/ # Next.js App Router +β βββ components/ +β β βββ ui/ # Basis UI components +β β βββ features/ # Feature-specifieke components +β βββ lib/ # Utilities en helpers +β βββ types/ # TypeScript types +βββ .env.local # Environment variables +βββ .env.example # Template voor env vars +βββ .gitignore +βββ README.md +``` -### Scheduled Edge Functions (Cron Jobs) -- Timing configuratie -- Use cases +### .cursorrules Files -### Webhook Edge Functions -- Getriggerd door database changes +**Wat zijn .cursorrules?** +- Markdown files met instructies voor Cursor +- Project-specifieke regels en conventies +- Worden automatisch meegenomen in context -### AI Integratie in Edge Functions -- Call OpenAI/Anthropic APIs -- Process data met AI +**Voorbeeld `general.mdc`:** +```markdown +# Project Rules -### Supabase Cron Jobs -- pg_cron extension -- Schedule taken in Postgres +## Tech Stack +- Next.js 14 met App Router +- TypeScript (strict mode) +- Tailwind CSS voor styling +- Supabase voor backend -### Database Webhooks -- Supabase Realtime broadcasts -- INSERT/UPDATE/DELETE triggers +## Code Conventies +- Gebruik functionele components +- Prefer named exports +- Destructure props +- Gebruik async/await (geen .then()) -### Edge Functions Chainen -webhook β Edge Function β AI β actie +## Styling +- Tailwind classes, geen inline styles +- Mobile-first approach +- Gebruik design tokens waar mogelijk +``` -### AI Automation Workflow Patterns -- Nieuwe user β AI onboarding email -- Content β AI moderatie β approve/reject -- Dagelijks β data β AI summary β email +### docs/ Folder -### AI Agents in Automation -- Monitoring agents -- Data verrijking agents +**PROMPT-LOG.md** +- Log van belangrijke prompts die tot goede code leidden +- Minimaal 10 prompts documenteren +- Format: doel β prompt β resultaat + +**AI-DECISIONS.md** +- Architectuur beslissingen gemaakt met AI hulp +- Waarom bepaalde keuzes gemaakt +- Trade-offs en alternatieven + +**PROJECT-BRIEF.md** +- Wat doet het project? +- Wie is de doelgroep? +- Welke features zijn er? + +### Environment Variables + +**.env.example** (commit naar Git): +``` +NEXT_PUBLIC_SUPABASE_URL=your-supabase-url +NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key +OPENAI_API_KEY=your-openai-key +``` + +**.env.local** (NOOIT committen): +``` +NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co +NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ... +OPENAI_API_KEY=sk-... +``` + +### README.md Best Practices +- Project titel en korte beschrijving +- Screenshots of demo GIF +- Installatie instructies +- Environment variables uitleg +- Beschikbare scripts (`npm run dev`, etc.) + +### Git Best Practices +- Kleine, focused commits +- Duidelijke commit messages +- Feature branches +- `.gitignore` correct ingesteld --- ## Tools -- Supabase (Edge Functions, pg_cron) -- Claude API / OpenAI API -- Resend / SendGrid (email) +- Cursor +- Git & GitHub +- Next.js +- VS Code / WebStorm --- ## Lesopdracht (2 uur) -Bouw 2 automation workflows: 1 scheduled + 1 event-driven met AI. +### Richt je Eindproject Repository In -### Deel 1: Scheduled - Daily Summary Email (1 uur) +**Deel 1: Repository Setup (30 min)** +- Maak nieuwe GitHub repository +- Clone lokaal +- Run `npx create-next-app@latest` met TypeScript + Tailwind +- Push initial commit -**Flow:** -``` -Supabase cron (dagelijks 9:00) - β Edge Function - β Haal gisteren's data op - β Claude API voor intelligente samenvatting - β Email via Resend/SendGrid -``` +**Deel 2: Folder Structuur (30 min)** +- Maak `docs/` folder met: + - `PROJECT-BRIEF.md` (beschrijf je eindproject idee) + - `PROMPT-LOG.md` (lege template) + - `AI-DECISIONS.md` (lege template) +- Maak `.cursor/rules/` folder met: + - `general.mdc` (project regels) +- Reorganiseer `src/` folder -- Implementatie -- Test -- Documentatie +**Deel 3: Environment Setup (20 min)** +- Maak `.env.example` met alle benodigde variabelen +- Maak `.env.local` met echte waarden +- Controleer `.gitignore` (env files moeten erin staan!) -### Deel 2: Event-Driven - AI Content Moderation (1 uur) +**Deel 4: README & Git (40 min)** +- Schrijf complete README.md +- Maak eerste feature branch +- Commit alle changes met goede messages +- Push en maak PR (voor jezelf) -**Trigger:** Webhook bij nieuwe todo - -**Flow:** -``` -INSERT - β Webhook - β Edge Function - β Claude API moderatie check - β Flag if problematisch - β Enrich if clean (tags, effort estimate, subtask suggestions) - β Save to database -``` - -- Implementatie -- Test -- Documentatie +### Deliverable +- GitHub repository met complete structuur +- Alle docs files aanwezig +- .cursorrules file geschreven +- README compleet --- ## Huiswerk (2 uur) -### Deel 1: Intelligente Notificaties (1 uur) +### Verfijn je Project Setup -**Cron 8:00:** -- Haal due todos op -- Per user: Claude genereert gepersonaliseerd motiverend bericht -- Email met AI message + todo lijst +**Deel 1: .cursorrules Uitbreiden (45 min)** +- Voeg `components.mdc` toe met component conventies +- Voeg `api.mdc` toe met API/Supabase regels +- Test of Cursor de regels oppikt -### Deel 2: AI Task Breakdown Agent (1 uur) +**Deel 2: Documentatie (45 min)** +- Vul `PROJECT-BRIEF.md` volledig in: + - Projectnaam en tagline + - Probleem dat je oplost + - Target audience + - Core features (3-5) + - Nice-to-have features + - Tech stack keuzes +- Start `AI-DECISIONS.md` met eerste beslissing -**Webhook op INSERT:** -- Als todo lang/complex β automatisch Claude aanroepen -- Suggestie 3-5 subtaken -- Auto-create in database +**Deel 3: Basis Components (30 min)** +- Maak `src/components/ui/` met basic components: + - Button.tsx + - Card.tsx + - Input.tsx +- Gebruik Cursor met je nieuwe .cursorrules -**Test met complex todo** - -### Deliverables -- 4 werkende automations -- Documentatie -- Reflectie (300 woorden): - - Kracht van automation? - - Wat nog meer automatiseren? - - Gebruik in echte projecten? +### Deliverable +- Uitgebreide .cursorrules (minimaal 2 files) +- Volledig ingevulde PROJECT-BRIEF.md +- Basis UI components gemaakt met Cursor +- Screenshot van Cursor die je rules gebruikt --- ## Leerdoelen Na deze les kan de student: -- Supabase Edge Functions schrijven en deployen -- Cron jobs configureren met pg_cron -- Webhooks triggeren op database changes -- AI APIs integreren in Edge Functions -- Scheduled en event-driven workflows bouwen -- Praktische AI automation patterns implementeren +- Een professionele project structuur opzetten +- .cursorrules files schrijven voor project-specifieke AI instructies +- Documentatie files maken (PROMPT-LOG, AI-DECISIONS, PROJECT-BRIEF) +- Environment variables correct beheren +- Git best practices toepassen +- Een README schrijven die anderen kunnen volgen diff --git a/Samenvattingen/Les14-Samenvatting.md b/Samenvattingen/Les14-Samenvatting.md index e42ee84..6833589 100644 --- a/Samenvattingen/Les14-Samenvatting.md +++ b/Samenvattingen/Les14-Samenvatting.md @@ -1,4 +1,4 @@ -# Les 14: Supabase Advanced - Realtime, Storage & Edge Functions +# Les 14: Debugging & Code Review met AI > π **Lesmateriaal nog niet uitgewerkt** > @@ -11,145 +11,201 @@ --- ## Hoofdstuk -**Hoofdstuk 3: Advanced** (Les 8-18) +**Hoofdstuk 3: Advanced** (Les 10-18) ## Beschrijving -Geavanceerde Supabase features voor productie apps. +Leer hoe je AI effectief inzet voor debugging en code review. Begrijp foutmeldingen, los problemen op, en verbeter je code kwaliteit. --- ## Te Behandelen -### Realtime Subscriptions -- Hoe Postgres broadcasts -- Subscriben op table changes -- Channel-based real-time (presence, broadcast) -- Collaborative features -- Reconnections handlen +### Waarom AI voor Debugging? +- AI begrijpt error messages vaak beter dan Google +- Kan context van jouw code meenemen +- Suggereert oplossingen specifiek voor jouw situatie +- Leert je patterns herkennen -### Supabase Storage -- File uploads (images, PDFs) -- Buckets organiseren -- Image transformations (resize, format, quality) -- Signed URLs -- Storage RLS policies +### Error Messages Begrijpen -### Edge Functions Deep Dive -- Deno runtime -- TypeScript -- At edge -- Waarom gebruiken: - - Hide API keys - - Server-side logic - - Scheduled tasks - - Webhooks +**Typische JavaScript/React errors:** +- `TypeError: Cannot read properties of undefined` +- `ReferenceError: x is not defined` +- `SyntaxError: Unexpected token` +- `Hydration error` (Next.js specifiek) -### AI Integratie Patterns -- Call OpenAI/Anthropic veilig -- Streaming responses +**Hoe AI vragen:** +``` +Ik krijg deze error: +[plak error message] -### Praktische Patterns -- Form processing -- Emails -- Data verrijking +In deze code: +[plak relevante code] -### Authentication Advanced -- Social logins (Google, GitHub, Discord) -- Magic links -- Email confirmatie -- Password reset -- Session management +Wat gaat er mis en hoe los ik het op? +``` -### Error Handling & Debugging -- Supabase error messages -- RLS debuggen -- Logging +### Debugging Workflow met AI -### Cursor Composer -- Voor complexe multi-feature development +**Stap 1: Isoleer het probleem** +- Waar treedt de error op? +- Wat was de laatste wijziging? +- Kan je het reproduceren? + +**Stap 2: Verzamel context** +- Error message (volledig!) +- Relevante code +- Wat je verwacht vs wat er gebeurt + +**Stap 3: Vraag AI** +- Wees specifiek +- Geef context +- Vraag om uitleg, niet alleen fix + +**Stap 4: Begrijp de oplossing** +- Vraag door als je het niet snapt +- Leer het pattern voor volgende keer + +### Console.log Debugging +- Strategisch plaatsen +- Variabele waarden checken +- Flow van code volgen +- AI kan helpen met waar te loggen + +### Browser DevTools Basics +- Console tab: errors en logs +- Network tab: API calls checken +- Elements tab: HTML/CSS inspecteren +- React DevTools: component state bekijken + +### Code Review met AI + +**Wat kan AI reviewen:** +- Code kwaliteit en leesbaarheid +- PotentiΓ«le bugs +- Performance issues +- Security problemen +- Best practices + +**Goede review prompt:** +``` +Review deze code op: +1. Bugs of edge cases die ik mis +2. Performance verbeteringen +3. Leesbaarheid +4. Best practices voor React/Next.js + +[plak code] +``` + +### Veelvoorkomende Issues die AI Vindt +- Missing error handling +- Memory leaks (useEffect cleanup) +- Onnodig re-renders +- Hardcoded values +- Missing loading/error states +- Accessibility issues + +### Refactoring met AI +- "Hoe kan ik deze code simplificeren?" +- "Extract dit naar een custom hook" +- "Maak dit component meer herbruikbaar" + +### Wanneer NIET AI Vertrouwen +- Als je de oplossing niet begrijpt +- Bij security-gerelateerde code (dubbel check!) +- Bij verouderde info (check versie docs) --- ## Tools -- Supabase (Realtime, Storage, Edge Functions) - Cursor -- OpenAI/Anthropic API +- Browser DevTools +- React DevTools +- Console/Terminal --- ## Lesopdracht (2 uur) -### Level Up Todo App met 3 Advanced Features (met Cursor) +### Debugging Challenge -### Feature 1: Realtime Collaboration (40 min) +Je krijgt een project met opzettelijke bugs. Los ze op met AI hulp. -Real-time updates wanneer user A/B changes: -- Subscribe -- Update UI -- Show "live" indicator -- Handle reconnection +**Deel 1: Setup (10 min)** +- Clone het buggy project (wordt gedeeld) +- Run `npm install` en `npm run dev` +- Zie alle errors! -**Test met multiple windows** +**Deel 2: Bug Hunting (1 uur 20 min)** -### Feature 2: File Attachments met Storage (40 min) +Los de volgende bugs op (met AI hulp): -Attach files (images/PDFs): -- Upload button -- Thumbnail voor images (transformations) -- Download voor PDFs -- Delete optie -- Proper RLS +| Bug | Symptoom | +|-----|----------| +| 1 | App crashed bij opstarten | +| 2 | Data wordt niet geladen | +| 3 | Form submit werkt niet | +| 4 | Styling is broken op mobile | +| 5 | Infinite loop bij useEffect | +| 6 | Button click doet niets | -### Feature 3: AI-Powered Task Suggestions met Edge Function (40 min) +**Per bug:** +- Identificeer de error message +- Vraag AI om hulp met context +- Implementeer de fix +- Documenteer wat je geleerd hebt -"Suggest Subtasks" button: -- Edge Function -- OpenAI/Anthropic API (hide key) -- AI returns 3-5 subtasks -- Auto-create in database -- Stream results +**Deel 3: Documentatie (30 min)** +- Voeg toe aan je `PROMPT-LOG.md`: + - De prompts die je gebruikte + - Wat werkte wel/niet -**Use Cursor Composer voor alle 3 features orchestreren** +### Deliverable +- Alle 6 bugs gefixed +- PROMPT-LOG.md bijgewerkt +- Korte notities per bug: wat was het probleem, hoe opgelost --- ## Huiswerk (2 uur) -### Bouw Production-Ready Supabase Starter Template +### Code Review Je Eigen Project -**Use Cursor Composer + Skills** +**Deel 1: Self-Review met AI (1 uur)** +- Kies 3 belangrijke files uit je eindproject +- Laat AI ze reviewen met een goede prompt +- Documenteer bevindingen in `AI-DECISIONS.md` -### Include: +**Per file noteer:** +- Welke issues AI vond +- Welke je hebt gefixed +- Welke je bewust negeert (en waarom) -| Feature | Details | -|---------|---------| -| Complete Auth | Email + Google, protected routes HOC, profile met avatar | -| Database Examples | Schema met relationships, RLS gedocumenteerd, types auto-generated | -| Realtime Demo | Chat of live updates | -| Storage Demo | Upload met preview, optimization | -| Edge Function | Met AI, error handling, rate limiting | -| Documentation | Setup, env vars, extend, patterns, troubleshooting | +**Deel 2: Refactoring (45 min)** +- Kies 1 component dat te complex is +- Vraag AI om refactoring suggesties +- Implementeer de verbeteringen +- Vergelijk before/after -### Structureer als GitHub Template - -**Test:** -- Clone -- Rename -- Deploy naar Vercel -- Aim: <10 min +**Deel 3: Debugging Checklist (15 min)** +- Maak persoonlijke debugging checklist +- Wat check je eerst bij errors? +- Welke prompts werken goed voor jou? ### Deliverable -- Template repo -- Setup video -- Reflectie +- AI-DECISIONS.md met review bevindingen +- 1 gerefactored component +- Persoonlijke debugging checklist --- ## Leerdoelen Na deze les kan de student: -- Realtime subscriptions implementeren voor collaborative features -- Supabase Storage gebruiken met transformations en RLS -- Edge Functions schrijven met AI integratie -- Advanced authentication implementeren (social, magic links) -- Errors debuggen in Supabase (RLS, queries) -- Een production-ready Supabase starter template bouwen +- Error messages lezen en begrijpen +- Effectieve debugging prompts schrijven voor AI +- Browser DevTools gebruiken voor debugging +- Code laten reviewen door AI +- Feedback van AI kritisch evalueren +- Refactoring uitvoeren met AI suggesties +- Documenteren wat geleerd is van debugging sessies diff --git a/Samenvattingen/Les16-Samenvatting.md b/Samenvattingen/Les16-Samenvatting.md index d4ec1a0..6cb55ec 100644 --- a/Samenvattingen/Les16-Samenvatting.md +++ b/Samenvattingen/Les16-Samenvatting.md @@ -1,4 +1,4 @@ -# Les 16: Building AI-Powered Features & Workflow Automation +# Les 16: Vercel AI SDK - AI Features in je App > π **Lesmateriaal nog niet uitgewerkt** > @@ -11,153 +11,183 @@ --- ## Hoofdstuk -**Hoofdstuk 3: Advanced** (Les 8-18) +**Hoofdstuk 3: Advanced** (Les 10-18) ## Beschrijving -Integreer AI mogelijkheden in apps. +Bouw AI-powered features in je apps met de Vercel AI SDK. Leer hoe je chat interfaces, streaming responses en AI-gegenereerde content implementeert. --- ## Te Behandelen -### AI APIs Overzicht -- OpenAI API -- Anthropic API -- Pricing -- Rate limits +### Waarom Vercel AI SDK? +- Abstractie over raw API calls +- Built-in streaming support +- React hooks voor eenvoudige integratie +- Provider-agnostic (OpenAI, Anthropic, etc.) +- Edge-ready -### Veel Voorkomende AI Features +### Installatie & Setup +```bash +npm install ai openai +# of voor Anthropic: +npm install ai @anthropic-ai/sdk +``` + +### Core Hooks + +#### `useChat` - Voor Conversaties +```tsx +import { useChat } from 'ai/react'; + +export function ChatComponent() { + const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat(); + + return ( +