From d00df83065a77138b222e645f0c62c67fd190337 Mon Sep 17 00:00:00 2001 From: Tim Rijkse Date: Mon, 2 Feb 2026 10:16:06 +0100 Subject: [PATCH] fix: update --- Eindopdracht-AI-Developer.md | 261 +++++---------------------- Samenvattingen/Les14-Samenvatting.md | 6 + Samenvattingen/Les16-Samenvatting.md | 6 + Samenvattingen/Les17-Samenvatting.md | 6 + readme.md | 6 + 5 files changed, 70 insertions(+), 215 deletions(-) diff --git a/Eindopdracht-AI-Developer.md b/Eindopdracht-AI-Developer.md index 3838f39..907c685 100644 --- a/Eindopdracht-AI-Developer.md +++ b/Eindopdracht-AI-Developer.md @@ -48,36 +48,15 @@ Om deze leerlijn af te ronden dien je de volgende leeruitkomsten aan te tonen: ## Algemene opdrachtbeschrijving -In het bedrijfsleven worden steeds vaker AI-tools ingezet om sneller en efficiënter software te ontwikkelen. Als moderne developer wordt van je verwacht dat je deze tools beheerst en weet hoe je AI-features integreert in applicaties. +Je hebt 18 weken lang geleerd hoe je als moderne developer met AI werkt. Nu is het tijd om te laten zien wat je kunt. Voor deze eindopdracht bouw je een **volledige webapplicatie met AI-integratie**. Je bent vrij in de keuze van het type applicatie, zolang je maar aantoont dat je de geleerde tools en technieken beheerst. -**Verplichte technologieën (geleerd in de lessen):** - -| Technologie | Les | Toepassing | -|-------------|-----|------------| -| TypeScript | Les 5 | Typed code, interfaces, strict mode | -| Next.js 14 | Les 6-7 | App Router, SSR, API routes, React Query | -| Supabase | Les 8-9 | Database design, CRUD, authenticatie | -| Cursor | Les 12, 16 | .cursorrules, @ mentions, Composer | -| Skills.sh | Les 4 | Minimaal 2 skills actief tijdens development | -| Vercel AI SDK | Les 17 | Tool Calling, Agents met `maxSteps` | -| Externe API | Les 17 | Minimaal 1 gratis externe API (TheCocktailDB, TheMealDB, etc.) | -| Vercel | Les 18 | Deployment naar productie | - **Wat je gaat doen:** -- Een professionele repository opzetten met juiste structuur en documentatie -- .cursorrules files schrijven die Cursor instrueren voor jouw project -- Skills.sh installeren en minimaal 2 relevante skills gebruiken -- Een Next.js applicatie bouwen met TypeScript en Tailwind CSS -- Data opslaan en ophalen via Supabase (database + authenticatie) -- Een **AI Agent** bouwen met de Vercel AI SDK: - - Minimaal 3 tools die externe API data ophalen - - `maxSteps` voor autonome multi-step taken - - De AI interpreteert en combineert data voor de gebruiker -- Je applicatie deployen naar Vercel -- Je proces documenteren in PROMPT-LOG.md en AI-DECISIONS.md +Je zet een professionele repository op met logische structuur. Je bouwt een webapplicatie waarin je data opslaat en ophaalt via een database. Je integreert een AI feature die externe data combineert met intelligente interpretatie. Je documenteert je proces en deployt naar productie. + +Hierbij pas je alle technieken toe die je in de lessen hebt geleerd: TypeScript, Next.js, Supabase, Cursor, Skills.sh, de Vercel AI SDK, en deployment naar Vercel. --- @@ -151,200 +130,102 @@ Een adaptieve quiz app met een AI die moeilijkheid aanpast en uitlegt. ## Deelopdracht 1: Project Setup & Repository Inrichting -Een goed gestructureerd project is essentieel voor effectief werken met AI tools. In deze deelopdracht richt je je repository professioneel in, zodat Cursor en andere AI tools optimaal kunnen functioneren. +Richt je repository professioneel in zodat je effectief kunt werken met AI tools. **Wat je doet:** -Je maakt een nieuwe GitHub repository aan en zet een Next.js project op met de juiste folder structuur. Je schrijft .cursorrules files die Cursor instrueren over jouw tech stack en conventies. Je installeert Skills.sh en activeert relevante skills. Je maakt documentatie files aan die je gedurende het project gaat vullen. +Je maakt een GitHub repository aan met een Next.js project. Je configureert Cursor met .cursorrules en installeert Skills.sh. Je maakt de documentatie files aan die je gedurende het project gaat vullen. **Vereisten:** -- GitHub repository met duidelijke naam en beschrijving -- Next.js 14 project met TypeScript, Tailwind CSS, en App Router -- Skills.sh geïnstalleerd met minimaal 2 actieve skills: - - `vercel-react-best-practices` (verplicht) - - Minimaal 1 andere relevante skill (bijv. `supabase-postgres-best-practices`) -- Folder structuur volgens best practices: - ``` - project/ - ├── .cursor/rules/ - │ ├── general.mdc - │ └── [andere rules files] - ├── .skills/ # Skills.sh configuratie - ├── docs/ - │ ├── PROJECT-BRIEF.md - │ ├── PROMPT-LOG.md - │ └── AI-DECISIONS.md - ├── src/ - │ ├── app/ - │ ├── components/ - │ ├── lib/ - │ ├── hooks/ - │ └── types/ - ├── .env.example - └── README.md - ``` -- Minimaal 2 .cursorrules files met project-specifieke instructies -- Volledig ingevulde PROJECT-BRIEF.md met: - - Projectnaam en beschrijving - - Doelgroep - - Core features (3-5) - - Tech stack keuzes met onderbouwing -- Complete README.md met installatie-instructies -- .env.example met alle benodigde environment variables +- GitHub repository met Next.js 14, TypeScript, en Tailwind CSS +- Folder structuur zoals behandeld in Les 14 +- Skills.sh met minimaal 2 actieve skills +- Minimaal 2 .cursorrules files +- docs/ folder met PROJECT-BRIEF.md, PROMPT-LOG.md, en AI-DECISIONS.md +- README.md met installatie-instructies **Op te leveren:** - GitHub repository URL -- Screenshot van folder structuur -- Lijst van geïnstalleerde Skills -- Inhoud van je belangrijkste .cursorrules file +- PROJECT-BRIEF.md met projectbeschrijving en features --- ## Deelopdracht 2: Database & Authenticatie met Supabase -Elke serieuze applicatie heeft data opslag en gebruikersbeheer nodig. Je gaat Supabase gebruiken om dit te realiseren, met hulp van AI voor de implementatie. +Ontwerp en implementeer de data-laag van je applicatie. **Wat je doet:** -Je ontwerpt eerst je database schema op papier of in een diagram tool (zoals geleerd in Les 8). Daarna maak je een Supabase project aan en implementeert je tabellen via de Table Editor. Je implementeert CRUD operaties met React Query (zoals geleerd in Les 7) en voegt authenticatie toe. +Je ontwerpt een database schema (zoals geleerd in Les 8), implementeert dit in Supabase, en bouwt CRUD operaties met React Query. Je voegt authenticatie toe zodat gebruikers hun eigen data kunnen beheren. **Vereisten:** -- Database schema ontworpen met: - - Correcte primary keys (UUID) - - Foreign keys voor relaties - - Minimaal één one-to-many relatie - - Gedocumenteerd in AI-DECISIONS.md -- Supabase project aangemaakt en gekoppeld -- Minimaal 2 tabellen die relevant zijn voor je applicatie -- Werkende CRUD operaties met React Query: - - useQuery voor data ophalen - - useMutation voor create/update/delete - - Optimistic updates (optioneel maar aangeraden) -- Authenticatie geïmplementeerd: - - Login/registratie pagina met Supabase Auth UI - - Protected routes (alleen voor ingelogde gebruikers) - - User-specifieke data (RLS policies) -- TypeScript types voor je database schema -- Environment variables correct geconfigureerd -- Foutafhandeling bij database operaties +- Database schema met correcte relaties (minimaal 2 tabellen) +- Werkende CRUD operaties met React Query +- Authenticatie met login/registratie +- User-specifieke data met RLS policies +- Schema gedocumenteerd in AI-DECISIONS.md **Op te leveren:** -- Database schema diagram of beschrijving -- Screenshot van je Supabase tabellen -- Beschrijving van je relaties in AI-DECISIONS.md +- Database schema beschrijving - Werkende login flow (gedemonstreerd in eindpresentatie) --- ## Deelopdracht 3: AI Agent met Externe API -Het onderscheidende element van jouw applicatie is de AI Agent die externe data combineert met intelligente interpretatie. Je gaat een agent bouwen die autonoom meerdere stappen kan uitvoeren om complexe taken te volbrengen. +Bouw een AI Agent die externe data combineert met intelligente interpretatie. **Wat je doet:** -Je bouwt een AI Agent met de Vercel AI SDK die: -1. Tools gebruikt om data op te halen van een externe API -2. Meerdere stappen autonoom kan uitvoeren (`maxSteps`) -3. De data interpreteert en combineert tot nuttig advies +Je bouwt een AI Agent met de Vercel AI SDK (zoals geleerd in Les 17) die tools gebruikt om data op te halen van een externe API, en deze data interpreteert en combineert tot nuttig advies voor de gebruiker. **Vereisten:** -- Vercel AI SDK (`ai` package) + Zod geïnstalleerd -- **Externe API integratie:** - - Minimaal 1 gratis externe API (TheCocktailDB, TheMealDB, Open Trivia DB, of andere) - - API data wordt opgehaald via tools, niet hardcoded -- **Tool Calling:** - - Minimaal 3 tools gedefinieerd met Zod parameters - - Duidelijke `description` per tool - - Error handling in elke tool -- **Agent functionaliteit:** - - `maxSteps` van minimaal 3 (AI kan meerdere tools aanroepen) - - System prompt die agent gedrag beschrijft - - AI combineert/interpreteert data (niet alleen doorsturen) -- **Frontend:** - - Chat interface met `useChat` hook - - Streaming responses - - Loading indicator - - Error handling -- **Integratie met Supabase:** - - User preferences meegeven als context - - Conversation history opslaan (optioneel maar aangeraden) +- Minimaal 1 externe API geïntegreerd via Tool Calling +- Minimaal 3 tools gedefinieerd +- Agent kan meerdere stappen autonoom uitvoeren (`maxSteps`) +- AI interpreteert en combineert data (niet alleen doorsturen) +- Chat interface met streaming responses -**Voorbeeld van wat NIET voldoet:** -``` -User: "Zoek cocktails met rum" -AI: "Hier zijn cocktails met rum: Mojito, Daiquiri, Piña Colada" -``` -Dit is alleen data doorsturen, geen interpretatie. - -**Voorbeeld van wat WEL voldoet:** -``` -User: "Ik geef een feest voor 10 mensen, sommigen drinken geen alcohol" -AI: [roept searchByIngredient aan] - [roept searchNonAlcoholic aan] - [roept getCocktailDetails aan voor 3 cocktails] - "Voor je feest raad ik aan: Mojito (fris, makkelijk te maken in grote - hoeveelheden), Margarita (populair, past bij Mexicaans eten), en voor - niet-drinkers: Virgin Piña Colada. Je hebt nodig: 2 flessen rum, - 1 fles tequila, limoenen, munt..." -``` -Dit is een agent die data combineert en persoonlijk advies geeft. +**Belangrijk:** De AI moet waarde toevoegen. "Hier zijn cocktails met rum" is alleen data doorsturen. "Voor jouw feest raad ik X aan omdat..." is interpretatie en advies. **Op te leveren:** -- Agent design in AI-DECISIONS.md (welke tools, waarom, typische flow) -- System prompt met uitleg -- Minimaal 5 prompts in PROMPT-LOG.md over agent development +- Agent design in AI-DECISIONS.md +- Werkende AI feature (gedemonstreerd in eindpresentatie) --- ## Deelopdracht 4: Testing, Deployment & Presentatie -Een applicatie is pas af als hij getest, gedeployed, en gedocumenteerd is. Je rondt je project af en bereidt een presentatie voor. +Rond je project af met testing, deployment en documentatie. **Wat je doet:** -Je test je applicatie grondig, deployt naar Vercel, en maakt een presentatie waarin je je werk demonstreert en reflecteert op het ontwikkelproces met AI tools. +Je test je applicatie, deployt naar Vercel, en bereidt een presentatie voor waarin je je werk demonstreert. **Vereisten:** -**Testing & Quality:** -- Applicatie handmatig getest op belangrijkste flows -- Minimaal 1 bug gevonden en opgelost met Cursor hulp (gedocumenteerd in PROMPT-LOG.md) -- Code review uitgevoerd met AI (gedocumenteerd in AI-DECISIONS.md) -- TypeScript strict mode zonder errors -- Geen console errors in productie -- Lighthouse score >80 op Performance - -**Deployment:** -- Applicatie gedeployed op Vercel -- Environment variables correct geconfigureerd in Vercel -- Supabase redirect URLs geconfigureerd voor productie -- Applicatie werkt volledig op productie URL +**Testing & Deployment:** +- Applicatie getest op belangrijkste flows +- TypeScript zonder errors +- Applicatie gedeployed op Vercel en werkt volledig **Documentatie:** -- PROMPT-LOG.md bevat minimaal 10 significante prompts met: - - De prompt zelf - - Welke tool (Cursor/ChatGPT/Claude) - - Wat werkte wel/niet - - Wat je leerde -- AI-DECISIONS.md bevat minimaal 5 gedocumenteerde beslissingen -- README.md is up-to-date en compleet +- PROMPT-LOG.md: minimaal 10 prompts met beschrijving, gebruikte tool, en wat je leerde +- AI-DECISIONS.md: minimaal 5 gedocumenteerde beslissingen +- README.md: up-to-date met installatie-instructies -**Presentatie (slide deck + demo):** -- Introductie: wat doet je app, voor wie? -- Demo: live walkthrough van belangrijkste features -- AI integratie: toon je AI feature in actie -- Development proces: hoe heb je Cursor en Skills.sh ingezet? -- Reflectie: wat ging goed, wat was lastig, wat heb je geleerd? -- Conclusie: wat zou je anders doen? +**Presentatie:** +- Wat doet je app en voor wie? +- Demo van belangrijkste features en AI integratie +- Reflectie op je development proces **Op te leveren:** - Productie URL (Vercel) -- Technisch verantwoordingsdocument (PDF) -- Slide deck (PDF of PPTX) -- Demo (live tijdens presentatie of video) +- Technisch verantwoordingsdocument (PDF, 1500-2000 woorden) +- Slide deck en demo --- @@ -453,56 +334,6 @@ Korte conclusie met de belangrijkste takeaways. --- -## Repository Structuur - -Je repository moet de volgende structuur hebben: - -``` -project-naam/ -├── .cursor/ -│ └── rules/ -│ ├── general.mdc # Algemene project regels -│ ├── components.mdc # Component conventies (optioneel) -│ └── api.mdc # API/Supabase regels (optioneel) -├── .skills/ # Skills.sh configuratie -├── docs/ -│ ├── PROJECT-BRIEF.md # Project beschrijving -│ ├── PROMPT-LOG.md # Gedocumenteerde prompts -│ └── AI-DECISIONS.md # Architectuur beslissingen -├── src/ -│ ├── app/ # Next.js App Router -│ │ ├── api/ -│ │ │ └── agent/ -│ │ │ └── route.ts # AI Agent API route (met tools) -│ │ ├── (auth)/ # Auth route group -│ │ │ ├── login/ -│ │ │ └── register/ -│ │ ├── layout.tsx -│ │ └── page.tsx -│ ├── components/ -│ │ ├── ui/ # Basis UI components -│ │ ├── layout/ # Layout components -│ │ └── features/ # Feature-specifieke components -│ ├── hooks/ -│ │ ├── useAuth.ts -│ │ └── [custom hooks] -│ ├── lib/ -│ │ ├── supabase.ts # Supabase client -│ │ ├── utils.ts -│ │ └── queryClient.ts # React Query client -│ └── types/ -│ ├── database.ts # Supabase types -│ └── index.ts -├── .env.example # Template voor env vars -├── .env.local # Lokale env vars (NIET committen) -├── .gitignore -├── next.config.js -├── package.json -├── README.md -├── tailwind.config.ts -└── tsconfig.json -``` - --- # Beoordelingscriteria diff --git a/Samenvattingen/Les14-Samenvatting.md b/Samenvattingen/Les14-Samenvatting.md index 4324a77..cbd8a9f 100644 --- a/Samenvattingen/Les14-Samenvatting.md +++ b/Samenvattingen/Les14-Samenvatting.md @@ -427,6 +427,12 @@ Commit en push! --- +## 💡 Eindopdracht + +Dit is een goed moment om te starten met **deelopdracht 1** van je eindopdracht. De setup die je vandaag maakt kun je direct gebruiken voor je eindproject. Bespreek je projectidee met de docent als je feedback wilt. + +--- + ## Leerdoelen Na deze les kan de student: - Een professionele project structuur opzetten diff --git a/Samenvattingen/Les16-Samenvatting.md b/Samenvattingen/Les16-Samenvatting.md index a076cdb..622eb2e 100644 --- a/Samenvattingen/Les16-Samenvatting.md +++ b/Samenvattingen/Les16-Samenvatting.md @@ -328,6 +328,12 @@ Maak complete .cursorrules voor je eindproject: --- +## 💡 Eindopdracht Check-in + +Hoe gaat je eindproject? Loop je ergens tegenaan? Dit is een goed moment om vragen te stellen en feedback te krijgen van de docent en klasgenoten. + +--- + ## Leerdoelen Na deze les kan de student: - Het juiste Claude model kiezen per taak diff --git a/Samenvattingen/Les17-Samenvatting.md b/Samenvattingen/Les17-Samenvatting.md index c8beb03..957d096 100644 --- a/Samenvattingen/Les17-Samenvatting.md +++ b/Samenvattingen/Les17-Samenvatting.md @@ -466,6 +466,12 @@ Combineer met Supabase: --- +## 💡 Eindopdracht + +Heb je al nagedacht over je AI feature? Dit is het moment om je idee te bespreken met de docent en klasgenoten. Welke externe API ga je gebruiken? Welke tools heeft je agent nodig? + +--- + ## Leerdoelen Na deze les kan de student: - Vercel AI SDK installeren en configureren diff --git a/readme.md b/readme.md index 2b0b094..a2b2c62 100644 --- a/readme.md +++ b/readme.md @@ -494,6 +494,8 @@ Professionele workflows, advanced Cursor, AI features bouwen en deployment. **Huiswerk:** Voeg extra .cursorrules files toe, start PROMPT-LOG.md, maak eerste components met Cursor. +> 💡 **Eindopdracht:** Dit is een goed moment om te starten met deelopdracht 1. Je kunt de setup die je vandaag maakt direct gebruiken voor je eindproject. + [→ Ga naar Les 14](Samenvattingen/Les14-Samenvatting.md) --- @@ -552,6 +554,8 @@ Professionele workflows, advanced Cursor, AI features bouwen en deployment. **Huiswerk:** Research .cursorrules voorbeelden online, schrijf uitgebreide .cursorrules voor jouw eindproject, test en itereer. +> 💡 **Eindopdracht check-in:** Hoe gaat je eindproject? Loop je ergens tegenaan? Dit is een goed moment om vragen te stellen en feedback te krijgen. + [→ Ga naar Les 16](Samenvattingen/Les16-Samenvatting.md) --- @@ -582,6 +586,8 @@ Professionele workflows, advanced Cursor, AI features bouwen en deployment. **Huiswerk:** Bouw agent voor eindproject met externe API, minimaal 3 tools, documenteer design in AI-DECISIONS.md. +> 💡 **Eindopdracht:** Heb je al nagedacht over je AI feature? Bespreek je idee met de docent en klasgenoten. + [→ Ga naar Les 17](Samenvattingen/Les17-Samenvatting.md) ---