fix: better order
This commit is contained in:
Tim Rijkse
413
Eindopdracht-AI-Developer.md
Normal file
413
Eindopdracht-AI-Developer.md
Normal file
@@ -0,0 +1,413 @@
|
|||||||
|
# Eindopdracht
|
||||||
|
|
||||||
|
## Leerlijn AI-Driven Development (30 EC)
|
||||||
|
|
||||||
|
**Versie 1.0**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Inhoudsopgave
|
||||||
|
|
||||||
|
1. [Eindopdracht AI-Driven Development](#eindopdracht-ai-driven-development)
|
||||||
|
2. [Deelopdrachten](#deelopdrachten)
|
||||||
|
3. [Quickscan](#quickscan)
|
||||||
|
4. [Structuur](#structuur)
|
||||||
|
5. [Beoordelingscriteria](#beoordelingscriteria)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Eindopdracht AI-Driven Development
|
||||||
|
|
||||||
|
## Integrale eindopdracht
|
||||||
|
|
||||||
|
De leerlijn AI-Driven Development leert je om als developer effectief samen te werken met AI tools. Je leert niet alleen apps bouwen MET AI, maar ook AI features bouwen IN je apps.
|
||||||
|
|
||||||
|
Om deze leerlijn af te ronden dien je de volgende leeruitkomsten aan te tonen:
|
||||||
|
|
||||||
|
1. **Fundamentals of AI-Driven Development**
|
||||||
|
Je kunt AI tools (ChatGPT, Claude, OpenCode) effectief inzetten voor code generatie en begrijpt de basisprincipes van Large Language Models.
|
||||||
|
|
||||||
|
2. **Prompt Engineering & Iteratief Werken**
|
||||||
|
Je kunt effectieve prompts schrijven, iteratief werken met AI, en Skills gebruiken voor consistente output.
|
||||||
|
|
||||||
|
3. **Backend Development met Supabase**
|
||||||
|
Je kunt een database opzetten, CRUD operaties uitvoeren, en authenticatie implementeren met Supabase.
|
||||||
|
|
||||||
|
4. **AI-Assisted Development met Cursor**
|
||||||
|
Je kunt Cursor effectief gebruiken voor code generatie, inclusief .cursorrules, context management, en Composer mode.
|
||||||
|
|
||||||
|
5. **AI Features Bouwen met Vercel AI SDK**
|
||||||
|
Je kunt AI-powered features implementeren in je applicatie met de Vercel AI SDK (chat interfaces, streaming responses).
|
||||||
|
|
||||||
|
6. **Testing, Debugging & Deployment**
|
||||||
|
Je kunt code debuggen met AI hulp, tests schrijven, en een applicatie deployen naar productie.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 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.
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
**Wat je gaat doen:**
|
||||||
|
|
||||||
|
- Een professionele repository opzetten met juiste structuur en documentatie
|
||||||
|
- .cursorrules files schrijven die Cursor instrueren voor jouw project
|
||||||
|
- Een Next.js applicatie bouwen met Tailwind CSS
|
||||||
|
- Data opslaan en ophalen via Supabase (database + authenticatie)
|
||||||
|
- Een AI-powered feature implementeren met de Vercel AI SDK
|
||||||
|
- Je applicatie deployen naar Vercel
|
||||||
|
- Je proces documenteren in PROMPT-LOG.md en AI-DECISIONS.md
|
||||||
|
|
||||||
|
**Voorbeeldprojecten:**
|
||||||
|
|
||||||
|
| Project | Beschrijving | AI Feature |
|
||||||
|
|---------|--------------|------------|
|
||||||
|
| **AI Recipe Generator** | App waar je ingrediënten invoert en recepten krijgt | Chat: "Wat kan ik maken met kip, rijst en paprika?" |
|
||||||
|
| **Smart Budget Buddy** | Persoonlijke finance tracker met inzichten | Chat: "Analyseer mijn uitgaven en geef tips" |
|
||||||
|
| **Travel Planner AI** | Reis planning app met AI assistent | Chat: "Plan een weekend Barcelona voor 2 personen" |
|
||||||
|
|
||||||
|
Je mag ook een eigen projectidee bedenken, mits het voldoet aan alle technische eisen.
|
||||||
|
|
||||||
|
Door deze opdracht uit te voeren toon je aan dat je zelfstandig een moderne webapplicatie kunt bouwen met AI-assisted development, en dat je AI-features kunt integreren die echte waarde toevoegen voor gebruikers.
|
||||||
|
|
||||||
|
Om de leerlijn AI-Driven Development met succes af te ronden is een voldoende nodig voor de integrale eindopdracht; met de deelopdrachten kunnen geen losse cursussen worden afgerond.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Op te leveren producten
|
||||||
|
|
||||||
|
- **GitHub Repository** met volledige broncode en documentatie
|
||||||
|
- **Deployed applicatie** op Vercel (werkende URL)
|
||||||
|
- **Technisch verantwoordingsdocument** (PDF, 1500-2000 woorden)
|
||||||
|
- **Slide deck** voor presentatie (10-15 slides)
|
||||||
|
- **Demo** van de werkende applicatie (live of video, max 5 minuten)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Deelopdrachten
|
||||||
|
|
||||||
|
## 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.
|
||||||
|
|
||||||
|
**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 maakt documentatie files aan die je gedurende het project gaat vullen.
|
||||||
|
|
||||||
|
**Vereisten:**
|
||||||
|
|
||||||
|
- GitHub repository met duidelijke naam en beschrijving
|
||||||
|
- Next.js project met TypeScript en Tailwind CSS
|
||||||
|
- Folder structuur volgens best practices:
|
||||||
|
```
|
||||||
|
project/
|
||||||
|
├── .cursor/rules/
|
||||||
|
│ ├── general.mdc
|
||||||
|
│ └── [andere rules files]
|
||||||
|
├── docs/
|
||||||
|
│ ├── PROJECT-BRIEF.md
|
||||||
|
│ ├── PROMPT-LOG.md
|
||||||
|
│ └── AI-DECISIONS.md
|
||||||
|
├── src/
|
||||||
|
│ ├── app/
|
||||||
|
│ ├── components/
|
||||||
|
│ └── lib/
|
||||||
|
├── .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
|
||||||
|
- Complete README.md met installatie-instructies
|
||||||
|
- .env.example met alle benodigde environment variables
|
||||||
|
|
||||||
|
**Op te leveren:**
|
||||||
|
- GitHub repository URL
|
||||||
|
- Screenshot van folder structuur
|
||||||
|
- Inhoud van je belangrijkste .cursorrules file
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 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.
|
||||||
|
|
||||||
|
**Wat je doet:**
|
||||||
|
|
||||||
|
Je maakt een Supabase project aan en ontwerpt je database schema via de Table Editor (geen SQL kennis nodig). Je implementeert CRUD operaties in je Next.js app en voegt authenticatie toe zodat gebruikers kunnen inloggen.
|
||||||
|
|
||||||
|
**Vereisten:**
|
||||||
|
|
||||||
|
- Supabase project aangemaakt en gekoppeld
|
||||||
|
- Minimaal 2 tabellen die relevant zijn voor je applicatie
|
||||||
|
- Werkende CRUD operaties (Create, Read, Update, Delete)
|
||||||
|
- Authenticatie geïmplementeerd:
|
||||||
|
- Login/registratie pagina
|
||||||
|
- Protected routes (alleen voor ingelogde gebruikers)
|
||||||
|
- User-specifieke data (elke user ziet alleen eigen data)
|
||||||
|
- Environment variables correct geconfigureerd
|
||||||
|
- Foutafhandeling bij database operaties
|
||||||
|
|
||||||
|
**Op te leveren:**
|
||||||
|
- Screenshot van je Supabase tabellen
|
||||||
|
- Beschrijving van je database schema in AI-DECISIONS.md
|
||||||
|
- Werkende login flow (gedemonstreerd in eindpresentatie)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Deelopdracht 3: AI Feature met Vercel AI SDK
|
||||||
|
|
||||||
|
Het onderscheidende element van jouw applicatie is de AI-integratie. Je gaat een chat-interface of AI-powered feature bouwen die echte waarde toevoegt voor de gebruiker.
|
||||||
|
|
||||||
|
**Wat je doet:**
|
||||||
|
|
||||||
|
Je installeert de Vercel AI SDK en bouwt een feature waarbij gebruikers kunnen communiceren met AI. Dit kan een chatbot zijn, een content generator, of een andere AI-powered functionaliteit die past bij jouw applicatie.
|
||||||
|
|
||||||
|
**Vereisten:**
|
||||||
|
|
||||||
|
- Vercel AI SDK (`ai` package) geïnstalleerd en geconfigureerd
|
||||||
|
- API route voor AI communicatie (`/api/chat` of vergelijkbaar)
|
||||||
|
- Frontend met `useChat` of `useCompletion` hook
|
||||||
|
- Streaming responses (tekst verschijnt woord voor woord)
|
||||||
|
- Relevante system prompt die past bij jouw applicatie
|
||||||
|
- Context uit je Supabase database meegeven aan AI (bijv. user preferences, historische data)
|
||||||
|
- Goede UX:
|
||||||
|
- Loading indicator tijdens AI response
|
||||||
|
- Error handling bij API fouten
|
||||||
|
- Mogelijkheid om conversation te clearen
|
||||||
|
- Conversation history opslaan in Supabase (optioneel maar aangeraden)
|
||||||
|
|
||||||
|
**Op te leveren:**
|
||||||
|
- Beschrijving van je AI feature in AI-DECISIONS.md
|
||||||
|
- System prompt die je gebruikt (met uitleg waarom)
|
||||||
|
- Minimaal 5 prompts in PROMPT-LOG.md die leidden tot je AI implementatie
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 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.
|
||||||
|
|
||||||
|
**Wat je doet:**
|
||||||
|
|
||||||
|
Je test je applicatie grondig (handmatig en/of geautomatiseerd), deployt naar Vercel, en maakt een presentatie waarin je je werk demonstreert en reflecteert op het ontwikkelproces.
|
||||||
|
|
||||||
|
**Vereisten:**
|
||||||
|
|
||||||
|
**Testing & Quality:**
|
||||||
|
- Applicatie handmatig getest op belangrijkste flows
|
||||||
|
- Minimaal 1 bug gevonden en opgelost met AI hulp (gedocumenteerd in PROMPT-LOG.md)
|
||||||
|
- Code review uitgevoerd met AI (gedocumenteerd in AI-DECISIONS.md)
|
||||||
|
- Geen console errors in productie
|
||||||
|
|
||||||
|
**Deployment:**
|
||||||
|
- Applicatie gedeployed op Vercel
|
||||||
|
- Environment variables correct geconfigureerd in Vercel
|
||||||
|
- Applicatie werkt volledig op productie URL
|
||||||
|
- Custom domain (optioneel)
|
||||||
|
|
||||||
|
**Documentatie:**
|
||||||
|
- PROMPT-LOG.md bevat minimaal 10 significante prompts
|
||||||
|
- AI-DECISIONS.md bevat minimaal 5 gedocumenteerde beslissingen
|
||||||
|
- README.md is up-to-date en compleet
|
||||||
|
|
||||||
|
**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
|
||||||
|
- Technische keuzes: waarom deze aanpak?
|
||||||
|
- Reflectie: wat ging goed, wat was lastig, wat heb je geleerd?
|
||||||
|
- Conclusie: wat zou je anders doen?
|
||||||
|
|
||||||
|
**Op te leveren:**
|
||||||
|
- Productie URL (Vercel)
|
||||||
|
- Technisch verantwoordingsdocument (PDF)
|
||||||
|
- Slide deck (PDF of PPTX)
|
||||||
|
- Demo (live tijdens presentatie of video)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Quickscan
|
||||||
|
|
||||||
|
Hieronder vind je de randvoorwaarden waaraan de eindopdracht moet voldoen. De beoordelaar kan op basis van deze eisen de eindopdracht teruggeven en zal deze niet verder nakijken tot aan de eisen is voldaan.
|
||||||
|
|
||||||
|
## Algemene eisen
|
||||||
|
|
||||||
|
- [ ] Naam van de student, inleverdatum en leerlijntitel zijn opgenomen op de titelpagina van het verantwoordingsdocument
|
||||||
|
- [ ] Het technisch verantwoordingsdocument is digitaal ingeleverd als PDF
|
||||||
|
- [ ] De slide deck is digitaal ingeleverd als PDF of PPTX
|
||||||
|
- [ ] De GitHub repository URL is bijgevoegd
|
||||||
|
- [ ] De Vercel productie URL is bijgevoegd en werkt
|
||||||
|
- [ ] Alle deelopdrachten zijn uitgewerkt en de gevraagde deelproducten zijn aanwezig
|
||||||
|
- [ ] Het verantwoordingsdocument is goed leesbaar zonder storende grammatica- en spellingsfouten
|
||||||
|
- [ ] De omvang van het verantwoordingsdocument beslaat 1500-2000 woorden (exclusief inhoudsopgave en bijlagen)
|
||||||
|
- [ ] De presentatie duurt maximaal 15 minuten (inclusief demo)
|
||||||
|
- [ ] Pagina's in het verantwoordingsdocument zijn genummerd
|
||||||
|
|
||||||
|
## Inhoudelijke eisen
|
||||||
|
|
||||||
|
- [ ] De GitHub repository bevat een complete folder structuur zoals beschreven
|
||||||
|
- [ ] Er zijn minimaal 2 .cursorrules files aanwezig met zinvolle instructies
|
||||||
|
- [ ] docs/PROJECT-BRIEF.md is volledig ingevuld
|
||||||
|
- [ ] docs/PROMPT-LOG.md bevat minimaal 10 gedocumenteerde prompts
|
||||||
|
- [ ] docs/AI-DECISIONS.md bevat minimaal 5 gedocumenteerde beslissingen
|
||||||
|
- [ ] README.md bevat installatie-instructies die werken
|
||||||
|
- [ ] De applicatie gebruikt Next.js met TypeScript en Tailwind CSS
|
||||||
|
- [ ] De applicatie is gekoppeld aan Supabase met minimaal 2 tabellen
|
||||||
|
- [ ] CRUD operaties zijn geïmplementeerd en werken
|
||||||
|
- [ ] Authenticatie is geïmplementeerd (login/registratie)
|
||||||
|
- [ ] De Vercel AI SDK is geïmplementeerd met werkende AI feature
|
||||||
|
- [ ] Streaming responses zijn geïmplementeerd
|
||||||
|
- [ ] De applicatie is gedeployed op Vercel en werkt volledig
|
||||||
|
|
||||||
|
## AI-gebruik
|
||||||
|
|
||||||
|
- [ ] Het gebruik van AI is toegestaan en verwacht bij deze eindopdracht
|
||||||
|
- [ ] Alle significante AI prompts zijn gedocumenteerd in PROMPT-LOG.md
|
||||||
|
- [ ] Architectuurbeslissingen gemaakt met AI hulp zijn gedocumenteerd in AI-DECISIONS.md
|
||||||
|
- [ ] Je bent te allen tijde verantwoordelijk voor de kwaliteit van de opgeleverde code
|
||||||
|
- [ ] Je kunt tijdens de presentatie uitleggen hoe je code werkt
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Structuur
|
||||||
|
|
||||||
|
## Technisch Verantwoordingsdocument
|
||||||
|
|
||||||
|
Voor het technisch verantwoordingsdocument wordt de volgende structuur aanbevolen:
|
||||||
|
|
||||||
|
### Titelpagina
|
||||||
|
- Naam student
|
||||||
|
- Inleverdatum
|
||||||
|
- Projectnaam
|
||||||
|
- GitHub URL
|
||||||
|
- Vercel URL
|
||||||
|
|
||||||
|
### Samenvatting
|
||||||
|
Een korte samenvatting (max 150 woorden) van wat je hebt gebouwd en de belangrijkste resultaten.
|
||||||
|
|
||||||
|
### Inhoudsopgave
|
||||||
|
Overzichtelijke inhoudsopgave met paginanummers.
|
||||||
|
|
||||||
|
### 1. Introductie
|
||||||
|
- Wat is het probleem dat je oplost?
|
||||||
|
- Wie is je doelgroep?
|
||||||
|
- Wat zijn de belangrijkste features?
|
||||||
|
|
||||||
|
### 2. Technische Implementatie
|
||||||
|
- Gekozen tech stack en waarom
|
||||||
|
- Database design (met diagram of beschrijving)
|
||||||
|
- AI feature: hoe werkt het, welke system prompt, waarom deze aanpak
|
||||||
|
- Belangrijkste technische uitdagingen en oplossingen
|
||||||
|
|
||||||
|
### 3. AI-Assisted Development Proces
|
||||||
|
- Hoe heb je AI tools ingezet tijdens development?
|
||||||
|
- Welke tools werkten goed, welke minder?
|
||||||
|
- Voorbeelden van effectieve prompts (verwijs naar PROMPT-LOG.md)
|
||||||
|
- Belangrijkste beslissingen gemaakt met AI hulp (verwijs naar AI-DECISIONS.md)
|
||||||
|
|
||||||
|
### 4. Reflectie
|
||||||
|
- Wat ging goed?
|
||||||
|
- Wat was uitdagend?
|
||||||
|
- Wat heb je geleerd over AI-assisted development?
|
||||||
|
- Wat zou je anders doen bij een volgend project?
|
||||||
|
|
||||||
|
### 5. Conclusie
|
||||||
|
Korte conclusie met de belangrijkste takeaways.
|
||||||
|
|
||||||
|
### Bijlagen
|
||||||
|
- Link naar GitHub repository
|
||||||
|
- Link naar Vercel deployment
|
||||||
|
- Eventuele screenshots of diagrammen
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 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)
|
||||||
|
├── docs/
|
||||||
|
│ ├── PROJECT-BRIEF.md # Project beschrijving
|
||||||
|
│ ├── PROMPT-LOG.md # Gedocumenteerde prompts
|
||||||
|
│ └── AI-DECISIONS.md # Architectuur beslissingen
|
||||||
|
├── src/
|
||||||
|
│ ├── app/ # Next.js App Router
|
||||||
|
│ │ ├── api/
|
||||||
|
│ │ │ └── chat/
|
||||||
|
│ │ │ └── route.ts # AI API route
|
||||||
|
│ │ ├── login/
|
||||||
|
│ │ │ └── page.tsx
|
||||||
|
│ │ ├── layout.tsx
|
||||||
|
│ │ └── page.tsx
|
||||||
|
│ ├── components/
|
||||||
|
│ │ ├── ui/ # Basis UI components
|
||||||
|
│ │ └── features/ # Feature-specifieke components
|
||||||
|
│ ├── lib/
|
||||||
|
│ │ ├── supabase.ts # Supabase client
|
||||||
|
│ │ └── utils.ts
|
||||||
|
│ └── 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.js
|
||||||
|
└── tsconfig.json
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Beoordelingscriteria
|
||||||
|
|
||||||
|
De eindopdracht wordt beoordeeld op basis van de volgende criteria. Per criterium kent de beoordelaar een cijfer van 1-10 toe.
|
||||||
|
|
||||||
|
| Deelopdracht | Criterium | Weging |
|
||||||
|
|--------------|-----------|--------|
|
||||||
|
| **1. Project Setup** | *Leeruitkomst: Repository inrichting & AI configuratie* | **15%** |
|
||||||
|
| 1.1 | Repository structuur is professioneel en compleet | 5% |
|
||||||
|
| 1.2 | .cursorrules files zijn zinvol en project-specifiek | 5% |
|
||||||
|
| 1.3 | Documentatie (README, PROJECT-BRIEF) is compleet | 5% |
|
||||||
|
| **2. Database & Auth** | *Leeruitkomst: Backend development met Supabase* | **25%** |
|
||||||
|
| 2.1 | Database schema is logisch en past bij de applicatie | 10% |
|
||||||
|
| 2.2 | CRUD operaties werken correct | 10% |
|
||||||
|
| 2.3 | Authenticatie is correct geïmplementeerd | 5% |
|
||||||
|
| **3. AI Feature** | *Leeruitkomst: AI features bouwen met Vercel AI SDK* | **30%** |
|
||||||
|
| 3.1 | AI feature voegt waarde toe voor de gebruiker | 10% |
|
||||||
|
| 3.2 | Technische implementatie is correct (streaming, error handling) | 10% |
|
||||||
|
| 3.3 | System prompt en context zijn doordacht | 10% |
|
||||||
|
| **4. Testing & Deployment** | *Leeruitkomst: Testing, debugging & deployment* | **15%** |
|
||||||
|
| 4.1 | Applicatie werkt volledig in productie | 10% |
|
||||||
|
| 4.2 | Code kwaliteit en foutafhandeling | 5% |
|
||||||
|
| **5. Proces & Documentatie** | *Leeruitkomst: AI-assisted development proces* | **15%** |
|
||||||
|
| 5.1 | PROMPT-LOG.md toont effectief prompt gebruik | 5% |
|
||||||
|
| 5.2 | AI-DECISIONS.md toont doordachte keuzes | 5% |
|
||||||
|
| 5.3 | Presentatie en verantwoordingsdocument | 5% |
|
||||||
|
| **Totaal** | | **100%** |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Cijferbepaling
|
||||||
|
|
||||||
|
| Cijfer | Betekenis |
|
||||||
|
|--------|-----------|
|
||||||
|
| 9-10 | Uitstekend: overtreft alle verwachtingen, creatief en professioneel |
|
||||||
|
| 7-8 | Goed: voldoet ruim aan alle eisen, weinig verbeterpunten |
|
||||||
|
| 6 | Voldoende: voldoet aan de basiseisen |
|
||||||
|
| 5 | Onvoldoende: voldoet niet aan alle basiseisen, maar dichtbij |
|
||||||
|
| 1-4 | Onvoldoende: significante onderdelen ontbreken of werken niet |
|
||||||
|
|
||||||
|
Een voldoende (≥5.5) is vereist om de leerlijn af te ronden.
|
||||||
@@ -1,12 +1,4 @@
|
|||||||
# Les 5: AI voor Content en Asset Generation
|
# Les 5: AI Tool Selection & Workflows
|
||||||
|
|
||||||
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
|
||||||
>
|
|
||||||
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
|
|
||||||
> - Les05-Slide-Overzicht.md
|
|
||||||
> - Les05-Lesplan.md
|
|
||||||
> - Les05-Bijlage-A-Lesopdracht.md
|
|
||||||
> - Les05-Bijlage-B-Huiswerkopdracht.md
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -14,112 +6,302 @@
|
|||||||
**Hoofdstuk 2: Intermediate** (Les 4-9)
|
**Hoofdstuk 2: Intermediate** (Les 4-9)
|
||||||
|
|
||||||
## Beschrijving
|
## Beschrijving
|
||||||
AI-gegenereerde visuals en assets voor professionele webprojecten.
|
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.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Te Behandelen
|
## Te Behandelen
|
||||||
|
|
||||||
### Image Generation Tools Vergelijking
|
### Waarom Tool Selection Belangrijk Is
|
||||||
- DALL-E 3 (via ChatGPT Plus)
|
|
||||||
- Leonardo.ai
|
|
||||||
- Ideogram
|
|
||||||
- Midjourney alternatives
|
|
||||||
|
|
||||||
### Prompt Engineering voor Images
|
Je kent nu meerdere AI tools:
|
||||||
- Style descriptors
|
- ChatGPT (brainstormen, planning, uitleg)
|
||||||
- Mood en colors
|
- Claude (lange context, nuance, analyse)
|
||||||
- Composition
|
- v0.dev (UI prototyping)
|
||||||
- Aspect ratios
|
- OpenCode (code schrijven met project context)
|
||||||
- Negative prompts
|
|
||||||
|
|
||||||
### Asset Generation Workflow voor Web
|
**Het probleem:** Elke tool heeft sterke en zwakke punten. De juiste tool kiezen bespaart tijd en levert betere resultaten.
|
||||||
- Hero images
|
|
||||||
- Icons
|
|
||||||
- Illustrations
|
|
||||||
- Backgrounds
|
|
||||||
|
|
||||||
### Image Optimization voor Web
|
---
|
||||||
- Compression
|
|
||||||
- Formats (WebP, AVIF, etc.)
|
|
||||||
- Responsive images
|
|
||||||
|
|
||||||
### Copyright & Licenties
|
### Tool Vergelijking
|
||||||
- Copyright overwegingen bij AI-generated content
|
|
||||||
- Wat mag wel/niet
|
|
||||||
|
|
||||||
### Integratie in Next.js
|
| Tool | Sterk in | Minder sterk in | Kosten |
|
||||||
- Next.js Image component optimalisatie
|
|------|----------|-----------------|--------|
|
||||||
- Best practices
|
| **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 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Tool Selection Framework
|
||||||
|
|
||||||
|
**Stap 1: Identificeer de taak**
|
||||||
|
- Wat wil je bereiken?
|
||||||
|
- Hoe complex is het?
|
||||||
|
- Hoeveel context is nodig?
|
||||||
|
|
||||||
|
**Stap 2: Kies de juiste tool**
|
||||||
|
|
||||||
|
```
|
||||||
|
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
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 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
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Je Eigen Workflow Documenteren
|
||||||
|
|
||||||
|
Maak een `docs/WORKFLOW.md` in je project:
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
# Mijn AI Workflow
|
||||||
|
|
||||||
|
## Planning Fase
|
||||||
|
- Tool: ChatGPT
|
||||||
|
- Wat: Feature breakdown, technische beslissingen
|
||||||
|
- Template prompt: "Ik wil [feature]. Wat zijn de stappen?"
|
||||||
|
|
||||||
|
## UI Design Fase
|
||||||
|
- Tool: v0.dev
|
||||||
|
- Wat: Component prototypes
|
||||||
|
- Template prompt: "Modern [component] with [requirements]"
|
||||||
|
|
||||||
|
## Implementation Fase
|
||||||
|
- Tool: OpenCode
|
||||||
|
- Wat: Code schrijven en integreren
|
||||||
|
- Template prompt: "Maak [component] in [locatie] met [requirements]"
|
||||||
|
|
||||||
|
## Debugging
|
||||||
|
- Tool: OpenCode (eerst), Claude (als het complex is)
|
||||||
|
- Wat: Errors oplossen
|
||||||
|
- Template prompt: "Ik krijg deze error: [error]. Dit is mijn code: [code]"
|
||||||
|
```
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Tools
|
## Tools
|
||||||
- DALL-E 3 (ChatGPT Plus)
|
- ChatGPT
|
||||||
- Leonardo.ai
|
- Claude
|
||||||
- Ideogram
|
- v0.dev
|
||||||
- Next.js Image component
|
- OpenCode/WebStorm
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Lesopdracht (2 uur)
|
## Lesopdracht (2 uur)
|
||||||
|
|
||||||
### Complete Visual Identity Challenge
|
### Tool Comparison Challenge
|
||||||
|
|
||||||
**Kies thema voor fictieve SaaS landing page:**
|
**Deel 1: Dezelfde Taak, Drie Tools (1 uur)**
|
||||||
- Project management
|
|
||||||
- Fitness app
|
|
||||||
- Educational platform
|
|
||||||
- Of eigen keuze
|
|
||||||
|
|
||||||
**Genereer complete asset set:**
|
Bouw een "Contact Form" component met alle drie de tools:
|
||||||
|
|
||||||
| Asset | Specificaties |
|
1. **ChatGPT (20 min)**
|
||||||
|-------|---------------|
|
- Vraag om code + uitleg
|
||||||
| Hero image | 16:9 landscape |
|
- Noteer: hoe lang duurde het, kwaliteit output, wat miste?
|
||||||
| Feature icons | 6 stuks, consistent style, SVG-ready |
|
|
||||||
| Custom illustraties | 2 stuks voor sections |
|
|
||||||
| Background pattern | Seamless texture |
|
|
||||||
| Favicon | Multiple sizes |
|
|
||||||
|
|
||||||
**Vereisten:**
|
2. **v0.dev (20 min)**
|
||||||
- Alle assets visueel consistent (coherent color palette, matching style, professional look)
|
- Genereer visueel prototype
|
||||||
- Geoptimaliseerd voor web (<200KB per image, correct formats)
|
- Noteer: hoe snel, hoe mooi, hoe aanpasbaar?
|
||||||
- Geïntegreerd in Next.js landing page met Tailwind CSS
|
|
||||||
- Proper Image component usage
|
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
|
||||||
|
|
||||||
|
### Deliverable
|
||||||
|
- Screenshot van alle 3 contact forms
|
||||||
|
- Ingevuld vergelijkingsschema
|
||||||
|
- `docs/WORKFLOW.md` bestand
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Huiswerk (2 uur)
|
## Huiswerk (2 uur)
|
||||||
|
|
||||||
### Portfolio Project Visual Refresh
|
### Bouw Je Tool Selection Cheat Sheet
|
||||||
|
|
||||||
**Opdracht:**
|
**Deel 1: Cheat Sheet Maken (1 uur)**
|
||||||
- Kies een bestaand project uit eerdere lessen (of bouw nieuw landing page project)
|
|
||||||
- Vervang ALLE placeholder images met professioneel AI-gegenereerde assets
|
|
||||||
- Doel: cohesieve visual identity die eruitziet als professional design work
|
|
||||||
|
|
||||||
**Case Study Blog Post (400 woorden):**
|
Maak een persoonlijke "Tool Selection Cheat Sheet" (1 pagina):
|
||||||
|
|
||||||
Schrijf over:
|
```markdown
|
||||||
- Prompts die werkten
|
# Mijn AI Tool Cheat Sheet
|
||||||
- Iteratie proces
|
|
||||||
- Challenges encountered
|
|
||||||
- AI vs stock photos/Unsplash comparison
|
|
||||||
- Time saved estimate
|
|
||||||
- Quality assessment
|
|
||||||
- Zou je dit in productie gebruiken?
|
|
||||||
- Tips voor anderen
|
|
||||||
|
|
||||||
**Include:** Before/after screenshots
|
## 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]
|
||||||
|
|
||||||
|
## Mijn Favoriete Combinaties
|
||||||
|
1. [Workflow 1]
|
||||||
|
2. [Workflow 2]
|
||||||
|
```
|
||||||
|
|
||||||
|
**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 je cheat sheet
|
||||||
|
- Voer uit en noteer resultaat
|
||||||
|
- Update cheat sheet indien nodig
|
||||||
|
|
||||||
|
**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?
|
||||||
|
|
||||||
|
### Deliverable
|
||||||
|
- Tool Selection Cheat Sheet (1 pagina)
|
||||||
|
- 2 gebouwde components (Testimonial Card, Dark Mode Toggle)
|
||||||
|
- Reflectie (400 woorden)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Leerdoelen
|
## Leerdoelen
|
||||||
Na deze les kan de student:
|
Na deze les kan de student:
|
||||||
- Verschillende image generation tools vergelijken
|
- De sterke en zwakke punten van elke AI tool benoemen
|
||||||
- Effectieve prompts schrijven voor image generatie
|
- De juiste tool kiezen voor een specifieke taak
|
||||||
- Consistente visual assets genereren voor webprojecten
|
- Meerdere tools combineren in een effectieve workflow
|
||||||
- Images optimaliseren voor web performance
|
- Een persoonlijke workflow documenteren
|
||||||
- Copyright overwegingen bij AI-generated content begrijpen
|
- Template prompts schrijven per tool
|
||||||
- Assets integreren in Next.js met proper optimization
|
- Kritisch evalueren welke tool wanneer het beste werkt
|
||||||
|
|||||||
@@ -1,12 +1,4 @@
|
|||||||
# Les 6: MCP (Model Context Protocol) & Component Libraries
|
# Les 6: Hands-on: Van Idee naar Prototype
|
||||||
|
|
||||||
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
|
||||||
>
|
|
||||||
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
|
|
||||||
> - Les06-Slide-Overzicht.md
|
|
||||||
> - Les06-Lesplan.md
|
|
||||||
> - Les06-Bijlage-A-Lesopdracht.md
|
|
||||||
> - Les06-Bijlage-B-Huiswerkopdracht.md
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -14,130 +6,283 @@
|
|||||||
**Hoofdstuk 2: Intermediate** (Les 4-9)
|
**Hoofdstuk 2: Intermediate** (Les 4-9)
|
||||||
|
|
||||||
## Beschrijving
|
## Beschrijving
|
||||||
Revolutionaire manier om AI te verbinden met data sources via MCP, gecombineerd met systematisch component library bouwen.
|
Pas alles wat je hebt geleerd toe in een hands-on sessie. Ga van een vaag idee naar een werkend prototype met behulp van je AI workflow.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Te Behandelen
|
## Te Behandelen
|
||||||
|
|
||||||
### MCP (Model Context Protocol)
|
### Van Idee naar Feature Breakdown
|
||||||
|
|
||||||
**Wat is MCP?**
|
**Het probleem:** Je hebt een idee, maar waar begin je?
|
||||||
- Anthropic's protocol om LLMs veilig te verbinden met externe tools en data
|
|
||||||
|
|
||||||
**Waarom MCP belangrijk is:**
|
**Stap 1: Beschrijf je idee in 1-2 zinnen**
|
||||||
- Gestructureerde data access
|
```
|
||||||
- Security
|
"Ik wil een app waar je kunt bijhouden welke planten water nodig hebben."
|
||||||
- Reusability
|
```
|
||||||
|
|
||||||
**MCP Servers:**
|
**Stap 2: Vraag AI om feature breakdown**
|
||||||
- Filesystem
|
```
|
||||||
- Databases (Supabase/PostgreSQL)
|
Prompt: Ik wil een plant watering tracker app bouwen.
|
||||||
- APIs (GitHub, Slack, Google Drive)
|
Wat zijn de minimale features voor een werkend prototype?
|
||||||
- Web search
|
Denk aan: wat moet een gebruiker kunnen doen?
|
||||||
|
```
|
||||||
|
|
||||||
**MCP Installatie en Configuratie:**
|
**Stap 3: Prioriteer (MVP denken)**
|
||||||
- Claude Desktop configuratie
|
- Wat is essentieel? → In prototype
|
||||||
|
- Wat is nice-to-have? → Later
|
||||||
|
|
||||||
### Component Libraries & Design Systems
|
---
|
||||||
|
|
||||||
**Shadcn/ui:**
|
### Component Thinking
|
||||||
- Systematisch bouwen met Shadcn/ui
|
|
||||||
- Design tokens en consistency
|
|
||||||
|
|
||||||
**Component Patterns:**
|
**Vraag jezelf af:**
|
||||||
- Component composition patterns
|
- Welke "blokken" zie ik op het scherm?
|
||||||
- Building data-driven components die MCP data consumeren
|
- Welke blokken worden herhaald?
|
||||||
- Accessibility in component libraries
|
- Welke blokken komen op meerdere pagina's?
|
||||||
- Documentation patterns
|
|
||||||
|
**Voorbeeld: Plant Tracker**
|
||||||
|
```
|
||||||
|
Herhaalde componenten:
|
||||||
|
- PlantCard (naam, foto, laatste water datum)
|
||||||
|
- WaterButton (markeer als water gegeven)
|
||||||
|
|
||||||
|
Pagina componenten:
|
||||||
|
- PlantList (toont alle PlantCards)
|
||||||
|
- AddPlantForm (nieuw plant toevoegen)
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### MVP (Minimum Viable Product) Denken
|
||||||
|
|
||||||
|
**Wat is MVP?**
|
||||||
|
De simpelste versie van je app die nog steeds waarde levert.
|
||||||
|
|
||||||
|
**❌ Niet MVP:**
|
||||||
|
- Alle features tegelijk
|
||||||
|
- Perfect design
|
||||||
|
- Edge cases afhandelen
|
||||||
|
- Login systeem
|
||||||
|
|
||||||
|
**✅ Wel MVP:**
|
||||||
|
- Core functionaliteit werkt
|
||||||
|
- Basis styling
|
||||||
|
- Happy path werkt
|
||||||
|
- Hardcoded data is oké
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### De Prototype Workflow
|
||||||
|
|
||||||
|
```
|
||||||
|
1. IDEE (1-2 zinnen)
|
||||||
|
↓
|
||||||
|
2. FEATURES (AI breakdown)
|
||||||
|
↓
|
||||||
|
3. PRIORITEER (wat is MVP?)
|
||||||
|
↓
|
||||||
|
4. COMPONENTS (welke blokken?)
|
||||||
|
↓
|
||||||
|
5. BOUWEN (tool per stap)
|
||||||
|
↓
|
||||||
|
6. ITEREREN (feedback → aanpassen)
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Voorbeeld: Weer Widget Prototype
|
||||||
|
|
||||||
|
**Stap 1: Idee**
|
||||||
|
"Simpele weer widget met 3-daagse forecast"
|
||||||
|
|
||||||
|
**Stap 2: AI Feature Breakdown**
|
||||||
|
```
|
||||||
|
Vraag aan ChatGPT:
|
||||||
|
"Wat zijn de minimale features voor een weer widget met 3-daagse forecast?"
|
||||||
|
|
||||||
|
Antwoord:
|
||||||
|
- Huidige temperatuur tonen
|
||||||
|
- Weer icoon (zon, regen, etc.)
|
||||||
|
- 3-daagse forecast (dag + temp + icoon)
|
||||||
|
- Locatie tonen
|
||||||
|
```
|
||||||
|
|
||||||
|
**Stap 3: MVP Selectie**
|
||||||
|
- ✅ Huidige temperatuur
|
||||||
|
- ✅ Weer icoon
|
||||||
|
- ✅ 3 dagen forecast
|
||||||
|
- ❌ Locatie selectie (later)
|
||||||
|
- ❌ Animated icons (later)
|
||||||
|
|
||||||
|
**Stap 4: Components**
|
||||||
|
```
|
||||||
|
WeatherWidget/
|
||||||
|
├── CurrentWeather (temp + icoon)
|
||||||
|
├── ForecastDay (dag + temp + icoon)
|
||||||
|
└── ForecastList (3x ForecastDay)
|
||||||
|
```
|
||||||
|
|
||||||
|
**Stap 5: Bouwen**
|
||||||
|
1. v0.dev: "Weather widget with current temp and 3 day forecast, minimal design"
|
||||||
|
2. OpenCode: "Integreer dit in mijn project, maak components in src/components/weather/"
|
||||||
|
|
||||||
|
**Stap 6: Itereren**
|
||||||
|
- Wat werkt niet?
|
||||||
|
- Wat kan beter?
|
||||||
|
- Vraag AI om verbeteringen
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Mini-Project Ideeën
|
||||||
|
|
||||||
|
Kies een van deze voor je lesopdracht:
|
||||||
|
|
||||||
|
| Project | Core Feature | Complexiteit |
|
||||||
|
|---------|-------------|--------------|
|
||||||
|
| **Weer Widget** | 3-daagse forecast | ⭐ |
|
||||||
|
| **Quiz App** | 3 vragen + score | ⭐ |
|
||||||
|
| **Recipe Card** | Ingrediënten toggle | ⭐ |
|
||||||
|
| **Pomodoro Timer** | Start/stop + countdown | ⭐⭐ |
|
||||||
|
| **Expense Tracker** | Lijst + totaal | ⭐⭐ |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Documenteer Je Proces
|
||||||
|
|
||||||
|
Maak aantekeningen tijdens het bouwen:
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
# Mijn Prototype: [naam]
|
||||||
|
|
||||||
|
## Idee
|
||||||
|
[1-2 zinnen]
|
||||||
|
|
||||||
|
## Feature Breakdown
|
||||||
|
1. [feature 1]
|
||||||
|
2. [feature 2]
|
||||||
|
3. [feature 3]
|
||||||
|
|
||||||
|
## MVP Selectie
|
||||||
|
- ✅ [wat wel]
|
||||||
|
- ❌ [wat niet (nog)]
|
||||||
|
|
||||||
|
## Components
|
||||||
|
- [Component 1]
|
||||||
|
- [Component 2]
|
||||||
|
|
||||||
|
## Prompts die Werkten
|
||||||
|
```
|
||||||
|
[prompt]
|
||||||
|
```
|
||||||
|
→ [wat leverde het op]
|
||||||
|
|
||||||
|
## Wat Ging Fout
|
||||||
|
- [probleem 1] → [hoe opgelost]
|
||||||
|
|
||||||
|
## Lessons Learned
|
||||||
|
- [les 1]
|
||||||
|
- [les 2]
|
||||||
|
```
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Tools
|
## Tools
|
||||||
- Claude Desktop
|
- ChatGPT (voor planning)
|
||||||
- MCP servers
|
- v0.dev (voor prototypes)
|
||||||
- Shadcn/ui
|
- OpenCode/WebStorm (voor implementation)
|
||||||
- OpenCode/WebStorm
|
|
||||||
- Supabase
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Lesopdracht (2 uur)
|
## Lesopdracht (2 uur)
|
||||||
|
|
||||||
### Deel 1: MCP Setup (45 min)
|
### Bouw Je Mini-Prototype
|
||||||
|
|
||||||
**Installatie:**
|
**Deel 1: Planning (30 min)**
|
||||||
- Installeer Claude Desktop app
|
|
||||||
- Configureer MCP servers:
|
|
||||||
- Filesystem server (access local files)
|
|
||||||
- Supabase MCP server (connect to database)
|
|
||||||
|
|
||||||
**Test MCP:**
|
1. Kies een project uit de lijst (of bedenk eigen simpel idee)
|
||||||
- Vraag Claude om data uit je Supabase database te tonen
|
2. Schrijf je idee in 1-2 zinnen
|
||||||
- Of files uit je project te analyseren
|
3. Vraag ChatGPT om feature breakdown
|
||||||
- Zie hoe Claude real-time data kan ophalen en gebruiken
|
4. Selecteer MVP features (max 3)
|
||||||
|
5. Schets de components op papier
|
||||||
|
|
||||||
### Deel 2: Component Library met MCP Data (1u 15min)
|
**Deel 2: Bouwen (1 uur)**
|
||||||
|
|
||||||
**Bouw Shadcn-based component library met AI in OpenCode/WebStorm:**
|
1. Genereer UI in v0.dev
|
||||||
|
2. Open project in OpenCode
|
||||||
|
3. Integreer en pas aan
|
||||||
|
4. Zorg dat het werkt (happy path)
|
||||||
|
|
||||||
| Component | Features |
|
**Focus op WORKFLOW, niet perfectie!**
|
||||||
|-----------|----------|
|
|
||||||
| DataTable | Sortable, filterable, pagination |
|
|
||||||
| Card | Variant system |
|
|
||||||
| Form components | Input, Select, Textarea met validation states |
|
|
||||||
| Button | Size variants, loading states, icon support |
|
|
||||||
|
|
||||||
**MCP Integration:**
|
**Deel 3: Documentatie (30 min)**
|
||||||
- Bouw Dashboard component die via MCP data uit Supabase haalt
|
|
||||||
- Toon data in je components
|
Maak `docs/PROTOTYPE-LOG.md`:
|
||||||
- Test: wijzig data in database, zie updates via MCP
|
- Je idee
|
||||||
|
- Feature breakdown
|
||||||
|
- MVP keuzes
|
||||||
|
- Prompts die werkten
|
||||||
|
- Wat ging fout en hoe opgelost
|
||||||
|
- Lessons learned
|
||||||
|
|
||||||
|
### Deliverable
|
||||||
|
- Werkend prototype (kan simpel zijn)
|
||||||
|
- `docs/PROTOTYPE-LOG.md` met je proces
|
||||||
|
- Screenshot van werkend prototype
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Huiswerk (2 uur)
|
## Huiswerk (2 uur)
|
||||||
|
|
||||||
### Deel 1: Extend Component Library (1 uur)
|
### Verbeter en Reflecteer
|
||||||
|
|
||||||
**Voeg 5 extra components toe:**
|
**Deel 1: Prototype Verbeteren (1 uur)**
|
||||||
1. Modal/Dialog
|
|
||||||
2. Toast notifications
|
|
||||||
3. Dropdown Menu
|
|
||||||
4. Tabs
|
|
||||||
5. Accordion
|
|
||||||
|
|
||||||
**Alle components moeten hebben:**
|
1. Fix eventuele bugs
|
||||||
- TypeScript
|
2. Voeg 1 extra feature toe
|
||||||
- Accessibility (ARIA)
|
3. Verbeter styling
|
||||||
- Dark mode support
|
4. Handle 1 edge case
|
||||||
- Responsive
|
|
||||||
|
|
||||||
**Gebruik AI + Skills voor consistent design**
|
**Deel 2: Peer Review (30 min)**
|
||||||
|
|
||||||
### Deel 2: MCP Deep Dive (1 uur)
|
- Deel je prototype met een klasgenoot
|
||||||
|
- Krijg feedback
|
||||||
|
- Geef feedback op hun prototype
|
||||||
|
|
||||||
**Experimenteer met extra MCP servers:**
|
**Deel 3: Reflectie (30 min)**
|
||||||
- Install GitHub MCP server (access repos/issues)
|
|
||||||
- Of Google Drive MCP server
|
|
||||||
- Of custom MCP server voor een API
|
|
||||||
|
|
||||||
**Bouw feature die MCP data combineert:**
|
Schrijf "Lessons Learned" document (300 woorden):
|
||||||
- Bijv. dashboard dat GitHub issues + Supabase data toont
|
- Wat ging goed in je workflow?
|
||||||
|
- Waar liep je vast?
|
||||||
|
- Welke tool was het meest nuttig?
|
||||||
|
- Wat doe je volgende keer anders?
|
||||||
|
- Hoe voelde het om met AI te bouwen vs alleen?
|
||||||
|
|
||||||
**Documenteer:**
|
### Deliverable
|
||||||
- Wat kun je allemaal met MCP?
|
- Verbeterd prototype
|
||||||
- Wat zijn limitations?
|
- Peer review feedback (gegeven en ontvangen)
|
||||||
- Hoe verschilt dit van normale API calls?
|
- Lessons Learned document (300 woorden)
|
||||||
|
|
||||||
**Deel als GitHub repo met MCP setup instructions**
|
---
|
||||||
|
|
||||||
|
## Voorbereiding Les 7
|
||||||
|
|
||||||
|
In Les 7 gaan we echt bouwen met Next.js. Zorg dat je klaar bent:
|
||||||
|
- Node.js geïnstalleerd (versie 18+)
|
||||||
|
- Git geconfigureerd
|
||||||
|
- GitHub account aangemaakt
|
||||||
|
- OpenCode/WebStorm werkt
|
||||||
|
|
||||||
|
Test: run `node --version` in je terminal. Je zou v18 of hoger moeten zien.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Leerdoelen
|
## Leerdoelen
|
||||||
Na deze les kan de student:
|
Na deze les kan de student:
|
||||||
- MCP begrijpen en configureren in Claude Desktop
|
- Van een vaag idee naar concrete features gaan
|
||||||
- MCP servers koppelen (filesystem, Supabase, APIs)
|
- AI gebruiken voor feature breakdown
|
||||||
- Een systematische component library bouwen met Shadcn/ui
|
- MVP denken toepassen (essentieel vs nice-to-have)
|
||||||
- Data-driven components bouwen die MCP data consumeren
|
- Een app opdelen in components
|
||||||
- Accessibility implementeren in component libraries
|
- De complete workflow doorlopen (idee → prototype)
|
||||||
- Het verschil tussen MCP en normale API calls uitleggen
|
- Het bouwproces documenteren
|
||||||
|
- Reflecteren op wat werkt en wat niet
|
||||||
|
|||||||
@@ -14,100 +14,255 @@
|
|||||||
**Hoofdstuk 2: Intermediate** (Les 4-9)
|
**Hoofdstuk 2: Intermediate** (Les 4-9)
|
||||||
|
|
||||||
## Beschrijving
|
## Beschrijving
|
||||||
Leer de basics van Supabase: een database opzetten, data opslaan/ophalen, en simpele authenticatie. AI helpt je met de complexiteit.
|
Zet je eerste "echte" Next.js project op en koppel het aan Supabase voor database en authenticatie. Je leert de complete flow van lokaal ontwikkelen tot productie deployment.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Te Behandelen
|
## Te Behandelen
|
||||||
|
|
||||||
### Wat is Supabase?
|
### Stap 1: Next.js Project Aanmaken
|
||||||
- Open-source Firebase alternative
|
|
||||||
- Hosted Postgres database
|
|
||||||
- Gratis tier voor development
|
|
||||||
- Mooie UI om tabellen te beheren
|
|
||||||
|
|
||||||
### Supabase UI Tour
|
Dit is de eerste keer dat je een volledig Next.js project opzet.
|
||||||
- Dashboard overview
|
|
||||||
- Table Editor: tabellen maken zonder SQL
|
|
||||||
- Kolommen toevoegen (text, number, boolean, timestamp)
|
|
||||||
- Data handmatig invoeren en bekijken
|
|
||||||
|
|
||||||
### Database Basics (zonder SQL kennis)
|
```bash
|
||||||
- Tabellen = spreadsheets met regels
|
# Maak nieuw project
|
||||||
- Kolommen = velden (naam, email, etc.)
|
npx create-next-app@latest todo-app
|
||||||
- Rijen = individuele records
|
|
||||||
- Primary key: unieke identifier per rij
|
|
||||||
|
|
||||||
### Supabase Client in Next.js
|
# Beantwoord de vragen:
|
||||||
|
# ✔ Would you like to use TypeScript? → Yes
|
||||||
|
# ✔ Would you like to use ESLint? → Yes
|
||||||
|
# ✔ Would you like to use Tailwind CSS? → Yes
|
||||||
|
# ✔ Would you like to use `src/` directory? → Yes
|
||||||
|
# ✔ Would you like to use App Router? → Yes
|
||||||
|
# ✔ Would you like to customize the default import alias? → No
|
||||||
|
|
||||||
|
# Ga naar project folder
|
||||||
|
cd todo-app
|
||||||
|
|
||||||
|
# Open in je editor
|
||||||
|
code . # of: cursor .
|
||||||
|
```
|
||||||
|
|
||||||
|
### Stap 2: Project Structuur Begrijpen
|
||||||
|
|
||||||
|
```
|
||||||
|
todo-app/
|
||||||
|
├── src/
|
||||||
|
│ └── app/
|
||||||
|
│ ├── layout.tsx # Root layout (header, footer)
|
||||||
|
│ ├── page.tsx # Homepage (/)
|
||||||
|
│ └── globals.css # Global styles + Tailwind
|
||||||
|
├── public/ # Static files (images, etc.)
|
||||||
|
├── .env.local # Environment variables (maak zelf aan)
|
||||||
|
├── next.config.js # Next.js configuratie
|
||||||
|
├── tailwind.config.ts # Tailwind configuratie
|
||||||
|
├── package.json # Dependencies
|
||||||
|
└── tsconfig.json # TypeScript configuratie
|
||||||
|
```
|
||||||
|
|
||||||
|
### Stap 3: Lokaal Draaien
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Start development server
|
||||||
|
npm run dev
|
||||||
|
|
||||||
|
# Open browser: http://localhost:3000
|
||||||
|
```
|
||||||
|
|
||||||
|
### Stap 4: Supabase Project Aanmaken
|
||||||
|
|
||||||
|
**Op supabase.com:**
|
||||||
|
|
||||||
|
1. Ga naar [supabase.com](https://supabase.com) en maak account (gratis)
|
||||||
|
2. Klik "New Project"
|
||||||
|
3. Kies een naam (bijv. `todo-app`)
|
||||||
|
4. Kies een database wachtwoord (bewaar deze!)
|
||||||
|
5. Kies region: `West EU (Frankfurt)` (dichtst bij NL)
|
||||||
|
6. Wacht ~2 minuten tot project klaar is
|
||||||
|
|
||||||
|
**Credentials ophalen:**
|
||||||
|
|
||||||
|
1. Ga naar Settings → API
|
||||||
|
2. Kopieer:
|
||||||
|
- `Project URL` → dit wordt `NEXT_PUBLIC_SUPABASE_URL`
|
||||||
|
- `anon public` key → dit wordt `NEXT_PUBLIC_SUPABASE_ANON_KEY`
|
||||||
|
|
||||||
|
### Stap 5: Environment Variables (Lokaal)
|
||||||
|
|
||||||
|
Maak `.env.local` in je project root:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# .env.local (NOOIT committen naar Git!)
|
||||||
|
NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
|
||||||
|
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.xxxxx
|
||||||
|
```
|
||||||
|
|
||||||
|
Maak ook `.env.example` (deze WEL committen):
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# .env.example (template voor anderen)
|
||||||
|
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
|
||||||
|
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
|
||||||
|
```
|
||||||
|
|
||||||
|
**Check .gitignore:**
|
||||||
|
```
|
||||||
|
# .gitignore moet bevatten:
|
||||||
|
.env*.local
|
||||||
|
```
|
||||||
|
|
||||||
|
### Stap 6: Supabase SDK Installeren
|
||||||
|
|
||||||
**Installatie:**
|
|
||||||
```bash
|
```bash
|
||||||
npm install @supabase/supabase-js
|
npm install @supabase/supabase-js
|
||||||
```
|
```
|
||||||
|
|
||||||
**Setup:**
|
### Stap 7: Supabase Client Maken
|
||||||
```ts
|
|
||||||
|
Maak `src/lib/supabase.ts`:
|
||||||
|
|
||||||
|
```typescript
|
||||||
import { createClient } from '@supabase/supabase-js'
|
import { createClient } from '@supabase/supabase-js'
|
||||||
|
|
||||||
const supabase = createClient(
|
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
|
||||||
process.env.NEXT_PUBLIC_SUPABASE_URL!,
|
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
|
||||||
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
|
|
||||||
)
|
export const supabase = createClient(supabaseUrl, supabaseAnonKey)
|
||||||
```
|
```
|
||||||
|
|
||||||
### CRUD Operaties (met AI hulp)
|
### Stap 8: Database Tabel Maken (via UI)
|
||||||
|
|
||||||
**Create:**
|
**In Supabase Dashboard:**
|
||||||
```ts
|
|
||||||
|
1. Ga naar Table Editor
|
||||||
|
2. Klik "New Table"
|
||||||
|
3. Naam: `todos`
|
||||||
|
4. Kolommen:
|
||||||
|
| Name | Type | Default | Primary |
|
||||||
|
|------|------|---------|---------|
|
||||||
|
| id | int8 | - | ✓ (auto) |
|
||||||
|
| title | text | - | |
|
||||||
|
| completed | bool | false | |
|
||||||
|
| created_at | timestamptz | now() | |
|
||||||
|
| user_id | uuid | auth.uid() | |
|
||||||
|
|
||||||
|
5. Klik "Save"
|
||||||
|
|
||||||
|
### Stap 9: CRUD Operaties
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// CREATE - nieuwe todo toevoegen
|
||||||
const { data, error } = await supabase
|
const { data, error } = await supabase
|
||||||
.from('todos')
|
.from('todos')
|
||||||
.insert({ title: 'Nieuwe taak', completed: false })
|
.insert({ title: 'Nieuwe taak' })
|
||||||
```
|
|
||||||
|
|
||||||
**Read:**
|
// READ - todos ophalen
|
||||||
```ts
|
|
||||||
const { data, error } = await supabase
|
const { data, error } = await supabase
|
||||||
.from('todos')
|
.from('todos')
|
||||||
.select('*')
|
.select('*')
|
||||||
```
|
.order('created_at', { ascending: false })
|
||||||
|
|
||||||
**Update:**
|
// UPDATE - todo afvinken
|
||||||
```ts
|
|
||||||
const { data, error } = await supabase
|
const { data, error } = await supabase
|
||||||
.from('todos')
|
.from('todos')
|
||||||
.update({ completed: true })
|
.update({ completed: true })
|
||||||
.eq('id', 1)
|
.eq('id', todoId)
|
||||||
```
|
|
||||||
|
|
||||||
**Delete:**
|
// DELETE - todo verwijderen
|
||||||
```ts
|
|
||||||
const { error } = await supabase
|
const { error } = await supabase
|
||||||
.from('todos')
|
.from('todos')
|
||||||
.delete()
|
.delete()
|
||||||
.eq('id', 1)
|
.eq('id', todoId)
|
||||||
```
|
```
|
||||||
|
|
||||||
### Simpele Authentication
|
### Stap 10: Authenticatie Setup
|
||||||
- Supabase Auth UI component (plug & play)
|
|
||||||
- Magic Link login (geen wachtwoord nodig)
|
|
||||||
- Session checken met `supabase.auth.getUser()`
|
|
||||||
|
|
||||||
### Environment Variables
|
```bash
|
||||||
- `.env.local` voor secrets
|
npm install @supabase/auth-ui-react @supabase/auth-ui-shared
|
||||||
- `NEXT_PUBLIC_` prefix voor client-side
|
```
|
||||||
- Nooit API keys committen naar Git
|
|
||||||
|
|
||||||
### AI Helpt Met
|
**Login component:**
|
||||||
- Database schema suggesties
|
```tsx
|
||||||
- Query schrijven als je vastloopt
|
import { Auth } from '@supabase/auth-ui-react'
|
||||||
- Error messages begrijpen
|
import { ThemeSupa } from '@supabase/auth-ui-shared'
|
||||||
- Code voorbeelden genereren
|
import { supabase } from '@/lib/supabase'
|
||||||
|
|
||||||
|
export function LoginForm() {
|
||||||
|
return (
|
||||||
|
<Auth
|
||||||
|
supabaseClient={supabase}
|
||||||
|
appearance={{ theme: ThemeSupa }}
|
||||||
|
providers={[]}
|
||||||
|
magicLink={true}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Session checken:**
|
||||||
|
```typescript
|
||||||
|
const { data: { user } } = await supabase.auth.getUser()
|
||||||
|
|
||||||
|
if (user) {
|
||||||
|
// User is ingelogd
|
||||||
|
} else {
|
||||||
|
// Redirect naar login
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Deployment naar Vercel (Productie)
|
||||||
|
|
||||||
|
### Stap 1: GitHub Repository
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# In je project folder
|
||||||
|
git init
|
||||||
|
git add .
|
||||||
|
git commit -m "Initial commit"
|
||||||
|
|
||||||
|
# Maak repo op GitHub, dan:
|
||||||
|
git remote add origin https://github.com/jouw-username/todo-app.git
|
||||||
|
git push -u origin main
|
||||||
|
```
|
||||||
|
|
||||||
|
### Stap 2: Vercel Deployment
|
||||||
|
|
||||||
|
1. Ga naar [vercel.com](https://vercel.com)
|
||||||
|
2. "Add New Project"
|
||||||
|
3. Import je GitHub repository
|
||||||
|
4. **BELANGRIJK:** Voeg Environment Variables toe:
|
||||||
|
- `NEXT_PUBLIC_SUPABASE_URL` → je Supabase URL
|
||||||
|
- `NEXT_PUBLIC_SUPABASE_ANON_KEY` → je anon key
|
||||||
|
5. Klik "Deploy"
|
||||||
|
|
||||||
|
### Stap 3: Supabase URL Toestaan
|
||||||
|
|
||||||
|
In Supabase Dashboard:
|
||||||
|
1. Ga naar Authentication → URL Configuration
|
||||||
|
2. Voeg je Vercel URL toe aan "Redirect URLs":
|
||||||
|
- `https://jouw-app.vercel.app/**`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Overzicht: Lokaal vs Productie
|
||||||
|
|
||||||
|
| Aspect | Lokaal | Productie |
|
||||||
|
|--------|--------|-----------|
|
||||||
|
| URL | `localhost:3000` | `jouw-app.vercel.app` |
|
||||||
|
| Env vars | `.env.local` | Vercel Dashboard |
|
||||||
|
| Database | Supabase (zelfde) | Supabase (zelfde) |
|
||||||
|
| Command | `npm run dev` | Automatisch via Vercel |
|
||||||
|
|
||||||
|
**Let op:** Je gebruikt dezelfde Supabase database voor lokaal en productie. Voor een echt project zou je aparte databases hebben, maar voor deze cursus is dat niet nodig.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Tools
|
## Tools
|
||||||
- Supabase (gratis tier)
|
|
||||||
- Next.js
|
- Next.js
|
||||||
|
- Supabase (gratis tier)
|
||||||
|
- Vercel (gratis tier)
|
||||||
- Cursor/OpenCode
|
- Cursor/OpenCode
|
||||||
|
|
||||||
---
|
---
|
||||||
@@ -116,72 +271,79 @@ const { error } = await supabase
|
|||||||
|
|
||||||
### Bouw een Todo App met Supabase
|
### Bouw een Todo App met Supabase
|
||||||
|
|
||||||
**Deel 1: Supabase Setup (20 min)**
|
**Deel 1: Project Setup (30 min)**
|
||||||
- Maak gratis Supabase account
|
- Run `npx create-next-app@latest todo-app` met juiste opties
|
||||||
- Maak nieuw project
|
- Maak Supabase account en project aan
|
||||||
- Kopieer URL en anon key naar `.env.local`
|
- Configureer `.env.local` met credentials
|
||||||
|
|
||||||
**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
|
|
||||||
|
|
||||||
**Deel 3: Next.js Integratie (1 uur)**
|
|
||||||
- Installeer `@supabase/supabase-js`
|
- Installeer `@supabase/supabase-js`
|
||||||
- Maak Supabase client
|
- Maak `src/lib/supabase.ts`
|
||||||
- Bouw simpele UI:
|
- Test: `npm run dev` werkt zonder errors
|
||||||
- Lijst van todos ophalen en tonen
|
|
||||||
- Form om nieuwe todo toe te voegen
|
|
||||||
- Checkbox om todo af te vinken
|
|
||||||
- Delete button
|
|
||||||
|
|
||||||
**Deel 4: Auth toevoegen (20 min)**
|
**Deel 2: Database (20 min)**
|
||||||
- Installeer `@supabase/auth-ui-react`
|
- Maak `todos` tabel via Supabase Table Editor
|
||||||
- Voeg login pagina toe met Auth UI component
|
- Voeg 3 test todos toe via de UI
|
||||||
- Check of user ingelogd is
|
- Test: data is zichtbaar in Table Editor
|
||||||
|
|
||||||
|
**Deel 3: CRUD Interface (50 min)**
|
||||||
|
- Bouw UI om todos te tonen (lijst)
|
||||||
|
- Voeg form toe om nieuwe todo te maken
|
||||||
|
- Voeg checkbox toe om todo af te vinken
|
||||||
|
- Voeg delete button toe
|
||||||
|
- Test: alle CRUD operaties werken
|
||||||
|
|
||||||
|
**Deel 4: Authenticatie (20 min)**
|
||||||
|
- Installeer auth packages
|
||||||
|
- Maak login pagina met Auth UI
|
||||||
|
- Toon alleen todos voor ingelogde user
|
||||||
|
- Test: login met magic link werkt
|
||||||
|
|
||||||
### Deliverable
|
### Deliverable
|
||||||
- Werkende Todo app met Supabase backend
|
- Werkende Todo app lokaal
|
||||||
- Login functionaliteit
|
- GitHub repository met code
|
||||||
- CRUD operaties werken
|
- Screenshot van werkende app
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Huiswerk (2 uur)
|
## Huiswerk (2 uur)
|
||||||
|
|
||||||
### Extend de Todo App
|
### Deploy naar Productie + Uitbreiden
|
||||||
|
|
||||||
**Feature 1: Filtering (30 min)**
|
**Deel 1: Deployment (30 min)**
|
||||||
- Filter op: Alle / Actief / Voltooid
|
- Push code naar GitHub
|
||||||
- Sorteer op datum
|
|
||||||
|
|
||||||
**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
|
|
||||||
|
|
||||||
**Feature 3: Polish (30 min)**
|
|
||||||
- Loading states
|
|
||||||
- Error handling met toast messages
|
|
||||||
- Empty state ("Geen todos gevonden")
|
|
||||||
|
|
||||||
**Deploy (30 min)**
|
|
||||||
- Deploy naar Vercel
|
- Deploy naar Vercel
|
||||||
- Voeg environment variables toe in Vercel dashboard
|
- Configureer environment variables in Vercel
|
||||||
- Test of alles werkt in productie
|
- Voeg Vercel URL toe aan Supabase Redirect URLs
|
||||||
|
- Test: app werkt op productie URL
|
||||||
|
|
||||||
|
**Deel 2: Features Uitbreiden (1 uur)**
|
||||||
|
- Filter buttons: Alle / Actief / Voltooid
|
||||||
|
- Sorteer op datum (nieuwste eerst)
|
||||||
|
- Toon alleen todos van ingelogde user (filter op `user_id`)
|
||||||
|
- Loading state tijdens data ophalen
|
||||||
|
- Error state bij problemen
|
||||||
|
- Empty state: "Geen todos gevonden"
|
||||||
|
|
||||||
|
**Deel 3: Polish (30 min)**
|
||||||
|
- Styling verbeteren met Tailwind
|
||||||
|
- Responsive design (mobile friendly)
|
||||||
|
- Kleine animaties (fade in/out)
|
||||||
|
|
||||||
### Deliverable
|
### Deliverable
|
||||||
- Deployed Todo app op Vercel
|
- Deployed app op Vercel (werkende URL)
|
||||||
- Screenshot van werkende app
|
- Alle features werken in productie
|
||||||
- Link naar live versie
|
- Screenshot van productie app
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Leerdoelen
|
## Leerdoelen
|
||||||
Na deze les kan de student:
|
Na deze les kan de student:
|
||||||
- Een Supabase project opzetten
|
- Een Next.js project opzetten met `npx create-next-app`
|
||||||
- Tabellen maken via de Supabase UI (zonder SQL)
|
- De project structuur begrijpen en navigeren
|
||||||
|
- Een Supabase project aanmaken en configureren
|
||||||
|
- Environment variables correct beheren (lokaal en productie)
|
||||||
- De Supabase client installeren en configureren
|
- De Supabase client installeren en configureren
|
||||||
- Basis CRUD operaties uitvoeren (create, read, update, delete)
|
- Tabellen maken via de Supabase UI
|
||||||
- Simpele authenticatie implementeren met Auth UI
|
- CRUD operaties uitvoeren met de Supabase SDK
|
||||||
- Environment variables correct gebruiken
|
- Authenticatie implementeren met Auth UI
|
||||||
|
- Deployen naar Vercel met environment variables
|
||||||
|
- Het verschil tussen lokale en productie omgeving begrijpen
|
||||||
|
|||||||
@@ -1,155 +1,320 @@
|
|||||||
# Les 8: Claude Code - Agentic Coding Mode
|
# Les 8: Supabase Basics
|
||||||
|
|
||||||
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
|
||||||
>
|
|
||||||
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
|
|
||||||
> - Les08-Slide-Overzicht.md
|
|
||||||
> - Les08-Lesplan.md
|
|
||||||
> - Les08-Bijlage-A-Lesopdracht.md
|
|
||||||
> - Les08-Bijlage-B-Huiswerkopdracht.md
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Hoofdstuk
|
## Hoofdstuk
|
||||||
**Hoofdstuk 3: Advanced** (Les 8-18)
|
**Hoofdstuk 2: Intermediate** (Les 4-9)
|
||||||
|
|
||||||
## Beschrijving
|
## Beschrijving
|
||||||
Kennismaking met Claude Code - autonome AI coding agent die zelfstandig multi-file changes kan plannen en uitvoeren.
|
Leer werken met Supabase: een complete backend-as-a-service met database en authenticatie. Je bouwt je eerste full-stack app met data die persistent is.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Te Behandelen
|
## Te Behandelen
|
||||||
|
|
||||||
### Wat is Claude Code?
|
### Wat is Supabase?
|
||||||
- Agentic coding mode
|
|
||||||
- AI neemt initiatief
|
|
||||||
- Plant multi-step changes
|
|
||||||
- Bewerkt multiple files autonoom
|
|
||||||
|
|
||||||
### Verschil met Chat-Based Coding
|
**Supabase = Database + Auth in één**
|
||||||
- Jij beschrijft WAT
|
- PostgreSQL database (gratis tier: 500MB)
|
||||||
- Claude Code figured out HOE en doet het
|
- Ingebouwde authenticatie
|
||||||
|
- Real-time subscriptions
|
||||||
|
- File storage
|
||||||
|
- Auto-generated API
|
||||||
|
|
||||||
### Claude Desktop Modes
|
**Waarom Supabase voor beginners:**
|
||||||
- Chat
|
- Geen eigen server nodig
|
||||||
- Projects
|
- Visuele Table Editor (geen SQL kennis nodig)
|
||||||
- Cowork
|
- Simpele JavaScript SDK
|
||||||
- Code
|
- Gratis tier is ruim voldoende
|
||||||
|
|
||||||
### Wanneer Claude Code Gebruiken
|
---
|
||||||
- Nieuwe features
|
|
||||||
- Grote refactoring
|
|
||||||
- Complexe bugs
|
|
||||||
- Test generation
|
|
||||||
|
|
||||||
### Hoe Claude Code Werkt
|
### Supabase Project Aanmaken
|
||||||
1. High-level instructie
|
|
||||||
2. Claude analyseert
|
|
||||||
3. Maakt plan
|
|
||||||
4. Bewerkt files
|
|
||||||
5. Runt tests
|
|
||||||
6. Itereert
|
|
||||||
|
|
||||||
### Skills in Claude Code
|
**Stap 1:** Ga naar [supabase.com](https://supabase.com) en maak account
|
||||||
- Automatisch toegepast
|
|
||||||
|
|
||||||
### Best Practices
|
**Stap 2:** Klik "New Project"
|
||||||
- Geef duidelijke high-level doelen
|
- Naam: `todo-app`
|
||||||
- Laat autonoom werken
|
- Database Password: (bewaar deze!)
|
||||||
- Review changes zorgvuldig
|
- Region: `West EU (Frankfurt)` (dichtst bij NL)
|
||||||
|
|
||||||
### Vergelijking
|
**Stap 3:** Wacht ~2 minuten tot project klaar is
|
||||||
| Tool | Aanpak |
|
|
||||||
|------|--------|
|
**Stap 4:** Ga naar Settings → API en kopieer:
|
||||||
| OpenCode/WebStorm | Step-by-step guidance |
|
- `Project URL`
|
||||||
| Claude Code | Autonome agent |
|
- `anon public` key
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Tabel Maken via Table Editor
|
||||||
|
|
||||||
|
**In Supabase Dashboard:**
|
||||||
|
|
||||||
|
1. Ga naar "Table Editor"
|
||||||
|
2. Klik "New Table"
|
||||||
|
3. Naam: `todos`
|
||||||
|
4. Kolommen:
|
||||||
|
|
||||||
|
| Name | Type | Default | Primary |
|
||||||
|
|------|------|---------|---------|
|
||||||
|
| id | int8 | - | ✓ (auto) |
|
||||||
|
| title | text | - | |
|
||||||
|
| completed | bool | false | |
|
||||||
|
| created_at | timestamptz | now() | |
|
||||||
|
|
||||||
|
5. Klik "Save"
|
||||||
|
|
||||||
|
**Test:** Voeg een paar rijen toe via de UI om te zien dat het werkt.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Environment Variables
|
||||||
|
|
||||||
|
**Wat zijn environment variables?**
|
||||||
|
- Configuratie die NIET in je code hoort
|
||||||
|
- API keys, database URLs, secrets
|
||||||
|
- Verschillend per omgeving (lokaal vs productie)
|
||||||
|
|
||||||
|
**Maak `.env.local` in je project root:**
|
||||||
|
```bash
|
||||||
|
# .env.local - NOOIT committen naar Git!
|
||||||
|
NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
|
||||||
|
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.xxxxx
|
||||||
|
```
|
||||||
|
|
||||||
|
**Maak ook `.env.example` (WEL committen):**
|
||||||
|
```bash
|
||||||
|
# .env.example - template voor anderen
|
||||||
|
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
|
||||||
|
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
|
||||||
|
```
|
||||||
|
|
||||||
|
**Check `.gitignore` bevat:**
|
||||||
|
```
|
||||||
|
.env*.local
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Supabase SDK Installeren
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install @supabase/supabase-js
|
||||||
|
```
|
||||||
|
|
||||||
|
**Maak `src/lib/supabase.ts`:**
|
||||||
|
```typescript
|
||||||
|
import { createClient } from '@supabase/supabase-js'
|
||||||
|
|
||||||
|
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
|
||||||
|
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
|
||||||
|
|
||||||
|
export const supabase = createClient(supabaseUrl, supabaseAnonKey)
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### CRUD Operaties
|
||||||
|
|
||||||
|
**C - Create (toevoegen):**
|
||||||
|
```typescript
|
||||||
|
const { data, error } = await supabase
|
||||||
|
.from('todos')
|
||||||
|
.insert({ title: 'Nieuwe taak' })
|
||||||
|
```
|
||||||
|
|
||||||
|
**R - Read (ophalen):**
|
||||||
|
```typescript
|
||||||
|
const { data, error } = await supabase
|
||||||
|
.from('todos')
|
||||||
|
.select('*')
|
||||||
|
.order('created_at', { ascending: false })
|
||||||
|
```
|
||||||
|
|
||||||
|
**U - Update (wijzigen):**
|
||||||
|
```typescript
|
||||||
|
const { data, error } = await supabase
|
||||||
|
.from('todos')
|
||||||
|
.update({ completed: true })
|
||||||
|
.eq('id', todoId)
|
||||||
|
```
|
||||||
|
|
||||||
|
**D - Delete (verwijderen):**
|
||||||
|
```typescript
|
||||||
|
const { error } = await supabase
|
||||||
|
.from('todos')
|
||||||
|
.delete()
|
||||||
|
.eq('id', todoId)
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Authenticatie met Auth UI
|
||||||
|
|
||||||
|
**Installeer auth packages:**
|
||||||
|
```bash
|
||||||
|
npm install @supabase/auth-ui-react @supabase/auth-ui-shared
|
||||||
|
```
|
||||||
|
|
||||||
|
**Login component:**
|
||||||
|
```tsx
|
||||||
|
import { Auth } from '@supabase/auth-ui-react'
|
||||||
|
import { ThemeSupa } from '@supabase/auth-ui-shared'
|
||||||
|
import { supabase } from '@/lib/supabase'
|
||||||
|
|
||||||
|
export function LoginForm() {
|
||||||
|
return (
|
||||||
|
<Auth
|
||||||
|
supabaseClient={supabase}
|
||||||
|
appearance={{ theme: ThemeSupa }}
|
||||||
|
providers={[]}
|
||||||
|
magicLink={true}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Huidige user checken:**
|
||||||
|
```typescript
|
||||||
|
const { data: { user } } = await supabase.auth.getUser()
|
||||||
|
|
||||||
|
if (user) {
|
||||||
|
// User is ingelogd
|
||||||
|
console.log('Logged in as:', user.email)
|
||||||
|
} else {
|
||||||
|
// Redirect naar login
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Deployment naar Vercel
|
||||||
|
|
||||||
|
**Stap 1: Push naar GitHub**
|
||||||
|
```bash
|
||||||
|
git add .
|
||||||
|
git commit -m "Add Supabase integration"
|
||||||
|
git push
|
||||||
|
```
|
||||||
|
|
||||||
|
**Stap 2: Deploy op Vercel**
|
||||||
|
1. Ga naar [vercel.com](https://vercel.com)
|
||||||
|
2. "Add New Project"
|
||||||
|
3. Import je GitHub repo
|
||||||
|
4. **BELANGRIJK:** Voeg Environment Variables toe!
|
||||||
|
- `NEXT_PUBLIC_SUPABASE_URL`
|
||||||
|
- `NEXT_PUBLIC_SUPABASE_ANON_KEY`
|
||||||
|
5. Klik "Deploy"
|
||||||
|
|
||||||
|
**Stap 3: Supabase Redirect URLs**
|
||||||
|
1. Ga naar Supabase → Authentication → URL Configuration
|
||||||
|
2. Voeg toe bij "Redirect URLs":
|
||||||
|
- `https://jouw-app.vercel.app/**`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Lokaal vs Productie
|
||||||
|
|
||||||
|
| Aspect | Lokaal | Productie |
|
||||||
|
|--------|--------|-----------|
|
||||||
|
| URL | `localhost:3000` | `jouw-app.vercel.app` |
|
||||||
|
| Env vars | `.env.local` | Vercel Dashboard |
|
||||||
|
| Database | Supabase (zelfde) | Supabase (zelfde) |
|
||||||
|
| Command | `npm run dev` | Automatisch via Vercel |
|
||||||
|
|
||||||
|
**Let op:** Je gebruikt dezelfde Supabase database voor lokaal en productie. Voor echte projecten zou je aparte databases hebben.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Tools
|
## Tools
|
||||||
- Claude Desktop (Code mode)
|
|
||||||
- Skills.sh
|
|
||||||
- Supabase
|
- Supabase
|
||||||
- Next.js
|
- Next.js
|
||||||
|
- OpenCode/WebStorm
|
||||||
|
- Vercel
|
||||||
|
- Git
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Lesopdracht (2 uur)
|
## Lesopdracht (2 uur)
|
||||||
|
|
||||||
### Deel 1: Claude Code Verkenning (30 min)
|
### Bouw een Todo App met Supabase
|
||||||
|
|
||||||
**Setup:**
|
**Deel 1: Supabase Setup (30 min)**
|
||||||
- Open Claude Desktop
|
|
||||||
- Navigeer naar Code mode
|
|
||||||
- Installeer relevante Skills eerst
|
|
||||||
|
|
||||||
**Complexe Taak:**
|
1. Maak Supabase account en project
|
||||||
> "Bouw multi-step form wizard: 3 stappen (personal info, company details, preferences), progress indicator, validatie per step, data in useState, animations tussen steps, TypeScript, Shadcn components."
|
2. Maak `todos` tabel via Table Editor
|
||||||
|
3. Kopieer credentials
|
||||||
|
4. Installeer `@supabase/supabase-js`
|
||||||
|
5. Maak `src/lib/supabase.ts`
|
||||||
|
6. Configureer `.env.local`
|
||||||
|
|
||||||
- Laat Claude Code autonoom werken
|
Test: `npm run dev` werkt zonder errors
|
||||||
- Kijk hoe het plant en uitvoert
|
|
||||||
- Vergelijk: hoe anders is dit dan manual prompting in OpenCode?
|
|
||||||
|
|
||||||
### Deel 2: Autonome Feature Development (1u 30min)
|
**Deel 2: CRUD Interface (1 uur)**
|
||||||
|
|
||||||
**Bouw User Dashboard met Stats:**
|
Bouw UI voor todos:
|
||||||
|
1. Lijst van todos tonen
|
||||||
|
2. Form om nieuwe todo toe te voegen
|
||||||
|
3. Checkbox om todo af te vinken
|
||||||
|
4. Delete button per todo
|
||||||
|
|
||||||
Requirements:
|
Gebruik AI hulp voor de components!
|
||||||
- Haal user data uit Supabase
|
|
||||||
- Toon profile info
|
|
||||||
- 4 stat cards
|
|
||||||
- Activity feed
|
|
||||||
- Charts met recharts
|
|
||||||
- Alles responsive
|
|
||||||
- Loading states
|
|
||||||
- Error handling
|
|
||||||
|
|
||||||
**Process:**
|
**Deel 3: Authenticatie (30 min)**
|
||||||
- Geef high-level beschrijving
|
|
||||||
- Relevante context files (@mentions)
|
|
||||||
- Laat autonoom werken
|
|
||||||
|
|
||||||
**Track:**
|
1. Installeer auth packages
|
||||||
- Hoeveel iteraties?
|
2. Maak login pagina met Auth UI
|
||||||
- Manual fixes nodig?
|
3. Toon alleen app voor ingelogde users
|
||||||
- Vergelijk tijd vs handmatig bouwen
|
4. Test: login met magic link
|
||||||
|
|
||||||
|
### Deliverable
|
||||||
|
- Werkende Todo app lokaal
|
||||||
|
- GitHub repository met code
|
||||||
|
- Screenshot van werkende app
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Huiswerk (2 uur)
|
## Huiswerk (2 uur)
|
||||||
|
|
||||||
### Deel 1: Complexe Refactoring (1 uur)
|
### Deploy naar Productie + Uitbreiden
|
||||||
|
|
||||||
**Neem Todo app uit Les 7, gebruik Claude Code voor grote refactoring:**
|
**Deel 1: Deployment (30 min)**
|
||||||
|
|
||||||
> "Extract alle Supabase queries naar aparte queries.ts file met proper error handling en TypeScript types. Update alle components om nieuwe query functions te gebruiken."
|
1. Push naar GitHub
|
||||||
|
2. Deploy naar Vercel
|
||||||
|
3. Configureer env vars in Vercel
|
||||||
|
4. Voeg Vercel URL toe aan Supabase Redirect URLs
|
||||||
|
5. Test: app werkt op productie URL!
|
||||||
|
|
||||||
- Laat autonoom handlen
|
**Deel 2: Features Uitbreiden (1 uur)**
|
||||||
- Verifieer dat alles werkt
|
|
||||||
- Documenteer: hoe goed handelde Claude Code het?
|
|
||||||
|
|
||||||
### Deel 2: Comparison Essay (1 uur)
|
Voeg toe:
|
||||||
|
1. Filter buttons: Alle / Actief / Voltooid
|
||||||
|
2. Sorteer op datum (nieuwste eerst)
|
||||||
|
3. Loading state tijdens data ophalen
|
||||||
|
4. Error state bij problemen
|
||||||
|
5. Empty state: "Geen todos gevonden"
|
||||||
|
|
||||||
**Schrijf vergelijkings essay (500 woorden):**
|
**Deel 3: Polish (30 min)**
|
||||||
|
|
||||||
OpenCode/WebStorm (step-by-step) vs Claude Code (autonome agent)
|
1. Styling verbeteren met Tailwind
|
||||||
|
2. Responsive design (mobile friendly)
|
||||||
|
3. Kleine animaties (fade in/out)
|
||||||
|
|
||||||
**Vergelijk op:**
|
### Deliverable
|
||||||
- Autonomie niveau
|
- Deployed app op Vercel (werkende URL!)
|
||||||
- Snelheid
|
- Alle features werken in productie
|
||||||
- Accuratesse
|
- Screenshot van productie app
|
||||||
- Wanneer welke gebruiken
|
|
||||||
|
|
||||||
**Include:** Concrete voorbeelden
|
|
||||||
|
|
||||||
**Final verdict:** Tool voorkeur going forward?
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Leerdoelen
|
## Leerdoelen
|
||||||
Na deze les kan de student:
|
Na deze les kan de student:
|
||||||
- Claude Code (agentic mode) activeren en gebruiken
|
- Een Supabase project aanmaken en configureren
|
||||||
- Het verschil uitleggen tussen chat-based en agentic coding
|
- Tabellen maken via de Table Editor (zonder SQL)
|
||||||
- High-level instructies geven voor autonome development
|
- Environment variables correct beheren
|
||||||
- Multi-file changes laten plannen en uitvoeren door Claude Code
|
- De Supabase client installeren en configureren
|
||||||
- De juiste tool kiezen (OpenCode vs Claude Code) per situatie
|
- CRUD operaties uitvoeren met de Supabase SDK
|
||||||
|
- Authenticatie implementeren met Auth UI
|
||||||
|
- Deployen naar Vercel met environment variables
|
||||||
|
- Het verschil tussen lokale en productie omgeving begrijpen
|
||||||
|
|||||||
@@ -1,139 +1,294 @@
|
|||||||
# Les 9: AI Agents - Custom GPTs & Claude Projects
|
# Les 9: AI Agents - Custom GPTs & Claude Projects
|
||||||
|
|
||||||
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
|
||||||
>
|
|
||||||
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
|
|
||||||
> - Les09-Slide-Overzicht.md
|
|
||||||
> - Les09-Lesplan.md
|
|
||||||
> - Les09-Bijlage-A-Lesopdracht.md
|
|
||||||
> - Les09-Bijlage-B-Huiswerkopdracht.md
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Hoofdstuk
|
## Hoofdstuk
|
||||||
**Hoofdstuk 3: Advanced** (Les 8-18)
|
**Hoofdstuk 2: Intermediate** (Les 4-9)
|
||||||
|
|
||||||
## Beschrijving
|
## Beschrijving
|
||||||
Deep dive in AI agents - autonome systemen die kunnen plannen, tools gebruiken, en taken uitvoeren.
|
Leer werken met AI Agents: gepersonaliseerde AI assistenten die je kunt trainen op jouw specifieke taken en werkwijze.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Te Behandelen
|
## Te Behandelen
|
||||||
|
|
||||||
### Wat zijn AI Agents?
|
### Wat zijn AI Agents?
|
||||||
- Verschil tussen chatbot vs agent
|
|
||||||
|
|
||||||
### Agent Capabilities
|
**Chatbot vs Agent:**
|
||||||
- Tool use
|
|
||||||
- Memory
|
|
||||||
- Planning
|
|
||||||
- Learning
|
|
||||||
- Proactief gedrag
|
|
||||||
|
|
||||||
### Agent Frameworks Landschap
|
| Chatbot | Agent |
|
||||||
- Custom GPTs
|
|---------|-------|
|
||||||
- Claude Projects
|
| Reageert op vragen | Neemt initiatief |
|
||||||
- LangChain
|
| Geen geheugen | Onthoudt context |
|
||||||
- AutoGPT
|
| Algemene kennis | Specifieke expertise |
|
||||||
- CrewAI
|
| Eenmalige interactie | Langere samenwerkingen |
|
||||||
|
|
||||||
### Custom GPTs Deep Dive
|
**Agent = AI met:**
|
||||||
- Instructions
|
- Custom instructies (hoe moet hij zich gedragen)
|
||||||
- Conversation starters
|
- Eigen kennis (documenten, voorbeelden)
|
||||||
- Knowledge base upload
|
- Specifieke taken (waar is hij goed in)
|
||||||
- Capabilities
|
|
||||||
|
|
||||||
### Use Cases voor Developers
|
---
|
||||||
- Code review agent
|
|
||||||
- Testing agent
|
|
||||||
- Documentation generator
|
|
||||||
|
|
||||||
### Claude Projects Deep Dive
|
### Custom GPTs (ChatGPT)
|
||||||
- Custom instructions
|
|
||||||
- Project knowledge
|
|
||||||
- Example conversations
|
|
||||||
- Advanced features (artifacts, long context, tool use)
|
|
||||||
|
|
||||||
### Projects Combineren met MCP
|
**Wat is een Custom GPT?**
|
||||||
- Access tot externe data
|
Een gepersonaliseerde versie van ChatGPT voor specifieke taken.
|
||||||
|
|
||||||
### Real-World Developer Agents Bouwen
|
**Onderdelen:**
|
||||||
|
1. **Instructions:** Hoe moet de GPT zich gedragen?
|
||||||
|
2. **Conversation starters:** Voorbeeld prompts
|
||||||
|
3. **Knowledge:** Upload documenten als context
|
||||||
|
4. **Capabilities:** Web browsing, code interpreter, DALL-E
|
||||||
|
|
||||||
|
**Voorbeeld: Code Reviewer GPT**
|
||||||
|
|
||||||
|
*Instructions:*
|
||||||
|
```
|
||||||
|
Je bent een strenge code reviewer voor React/TypeScript projecten.
|
||||||
|
|
||||||
|
Bij elke code review check je:
|
||||||
|
1. TypeScript types correct?
|
||||||
|
2. React best practices gevolgd?
|
||||||
|
3. Geen hardcoded values?
|
||||||
|
4. Error handling aanwezig?
|
||||||
|
5. Accessibility (ARIA labels)?
|
||||||
|
|
||||||
|
Geef feedback in dit format:
|
||||||
|
- ✅ Goed: [wat is goed]
|
||||||
|
- ⚠️ Verbeter: [wat kan beter]
|
||||||
|
- ❌ Fix: [wat moet gefixed worden]
|
||||||
|
|
||||||
|
Wees streng maar constructief.
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Claude Projects
|
||||||
|
|
||||||
|
**Wat is een Claude Project?**
|
||||||
|
Een Claude-omgeving met custom context voor een specifiek project.
|
||||||
|
|
||||||
|
**Onderdelen:**
|
||||||
|
1. **Project Knowledge:** Upload relevante documenten
|
||||||
|
2. **Custom Instructions:** Hoe moet Claude zich gedragen
|
||||||
|
3. **Conversation History:** Context blijft bewaard
|
||||||
|
|
||||||
|
**Voordelen:**
|
||||||
|
- Langere context dan ChatGPT
|
||||||
|
- Betere nuance in antwoorden
|
||||||
|
- Artifacts voor code en documenten
|
||||||
|
|
||||||
|
**Voorbeeld: Project voor je Todo App**
|
||||||
|
|
||||||
|
*Custom Instructions:*
|
||||||
|
```
|
||||||
|
Dit is mijn Todo app project.
|
||||||
|
|
||||||
|
Tech stack:
|
||||||
|
- Next.js 14 met App Router
|
||||||
|
- TypeScript
|
||||||
|
- Tailwind CSS
|
||||||
|
- Supabase voor database en auth
|
||||||
|
|
||||||
|
Code conventies:
|
||||||
|
- Functional components
|
||||||
|
- Named exports
|
||||||
|
- Async/await (geen .then)
|
||||||
|
|
||||||
|
Als je code schrijft, volg altijd deze conventies.
|
||||||
|
```
|
||||||
|
|
||||||
|
*Project Knowledge:*
|
||||||
|
- Upload je belangrijkste component files
|
||||||
|
- Upload je Supabase schema
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Wanneer Welke Gebruiken?
|
||||||
|
|
||||||
|
| Situatie | Tool |
|
||||||
|
|----------|------|
|
||||||
|
| Snelle code review | Custom GPT |
|
||||||
|
| Werken aan specifiek project | Claude Project |
|
||||||
|
| Documentatie genereren | Custom GPT |
|
||||||
|
| Lange context nodig | Claude Project |
|
||||||
|
| Wil delen met anderen | Custom GPT |
|
||||||
|
| Privé project context | Claude Project |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Custom GPT Maken
|
||||||
|
|
||||||
|
**Stap 1:** Ga naar chat.openai.com → "Explore GPTs" → "Create"
|
||||||
|
|
||||||
|
**Stap 2:** Vul in:
|
||||||
|
- Naam: "React Code Reviewer"
|
||||||
|
- Beschrijving: "Reviews React/TypeScript code"
|
||||||
|
- Instructions: (zie voorbeeld hierboven)
|
||||||
|
|
||||||
|
**Stap 3:** Test met echte code
|
||||||
|
|
||||||
|
**Stap 4:** Itereer op instructions
|
||||||
|
- Wat mist hij?
|
||||||
|
- Wat doet hij verkeerd?
|
||||||
|
- Pas aan en test opnieuw
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Claude Project Maken
|
||||||
|
|
||||||
|
**Stap 1:** Ga naar claude.ai → "Projects" → "Create project"
|
||||||
|
|
||||||
|
**Stap 2:** Geef project een naam
|
||||||
|
|
||||||
|
**Stap 3:** Upload Project Knowledge
|
||||||
|
- Drag & drop je belangrijkste files
|
||||||
|
- Of kopieer/plak code snippets
|
||||||
|
|
||||||
|
**Stap 4:** Schrijf Custom Instructions
|
||||||
|
- Beschrijf je tech stack
|
||||||
|
- Beschrijf je conventies
|
||||||
|
- Beschrijf wat je wilt dat Claude doet
|
||||||
|
|
||||||
|
**Stap 5:** Start chatten binnen het project
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Agent Instructions Schrijven
|
||||||
|
|
||||||
|
**Goede instructions bevatten:**
|
||||||
|
|
||||||
|
1. **Rol:** Wie is de agent?
|
||||||
|
```
|
||||||
|
Je bent een senior React developer die code reviewt.
|
||||||
|
```
|
||||||
|
|
||||||
|
2. **Context:** Wat is de situatie?
|
||||||
|
```
|
||||||
|
Je reviewt code voor een startup met strakke deadlines.
|
||||||
|
Focus op kritieke issues, niet op style preferences.
|
||||||
|
```
|
||||||
|
|
||||||
|
3. **Gedrag:** Hoe moet hij reageren?
|
||||||
|
```
|
||||||
|
Wees direct maar vriendelijk.
|
||||||
|
Geef altijd een voorbeeld van de betere oplossing.
|
||||||
|
```
|
||||||
|
|
||||||
|
4. **Format:** Hoe moet output eruitzien?
|
||||||
|
```
|
||||||
|
Gebruik markdown formatting.
|
||||||
|
Groepeer feedback per categorie.
|
||||||
|
```
|
||||||
|
|
||||||
|
5. **Beperkingen:** Wat moet hij NIET doen?
|
||||||
|
```
|
||||||
|
Herschrijf niet de hele codebase.
|
||||||
|
Focus op de gevraagde code, niet op andere files.
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Praktische Agent Ideeën
|
||||||
|
|
||||||
|
| Agent | Doel |
|
||||||
|
|-------|------|
|
||||||
|
| **Code Reviewer** | Check code op bugs en best practices |
|
||||||
|
| **Doc Generator** | Genereer documentatie voor components |
|
||||||
|
| **Bug Debugger** | Help bij error messages uitleggen |
|
||||||
|
| **Refactor Helper** | Suggesties voor code verbetering |
|
||||||
|
| **Test Writer** | Genereer unit tests |
|
||||||
|
| **Rubber Duck** | Denk hardop mee over problemen |
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Tools
|
## Tools
|
||||||
- Custom GPTs (OpenAI)
|
- ChatGPT (Custom GPTs)
|
||||||
- Claude Projects (Anthropic)
|
- Claude Desktop (Projects)
|
||||||
- MCP
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Lesopdracht (2 uur)
|
## Lesopdracht (2 uur)
|
||||||
|
|
||||||
### Deel 1: Build Code Review Agent (1 uur)
|
### Bouw Je Eerste AI Agents
|
||||||
|
|
||||||
**Groepswerk (20 min):**
|
**Deel 1: Custom GPT - Code Reviewer (45 min)**
|
||||||
In groepjes van 2-3:
|
|
||||||
- Definieer comprehensive code review checklist:
|
1. Ga naar ChatGPT → Create GPT
|
||||||
- TypeScript
|
2. Maak "Code Reviewer" met deze checklist:
|
||||||
- React patterns
|
- TypeScript types
|
||||||
|
- React best practices
|
||||||
|
- Error handling
|
||||||
- Accessibility
|
- Accessibility
|
||||||
- Security
|
|
||||||
- Performance
|
- Performance
|
||||||
- Code organization
|
3. Upload sample "goede" code als knowledge
|
||||||
|
4. Test met code uit je Todo app
|
||||||
|
5. Itereer op de instructions
|
||||||
|
|
||||||
**Maak Agent (30 min):**
|
**Deel 2: Claude Project - Todo App Context (45 min)**
|
||||||
- Maak Custom GPT OF Claude Project met checklist als instructions
|
|
||||||
- Upload sample "goede" code als knowledge base (10 min)
|
|
||||||
|
|
||||||
### Deel 2: Build Documentation Agent (1 uur)
|
1. Maak nieuw Claude Project
|
||||||
|
2. Upload je Todo app files als knowledge
|
||||||
|
3. Schrijf custom instructions met je tech stack
|
||||||
|
4. Test: vraag Claude om een nieuwe feature te bouwen
|
||||||
|
5. Vergelijk: kent hij je project context?
|
||||||
|
|
||||||
**Individueel:**
|
**Deel 3: Vergelijking (30 min)**
|
||||||
|
|
||||||
Maak agent die comprehensive documentatie genereert.
|
Test dezelfde vraag in beide:
|
||||||
|
```
|
||||||
|
Review deze code en geef verbeter suggesties:
|
||||||
|
[plak je TodoList component]
|
||||||
|
```
|
||||||
|
|
||||||
**Instructions:**
|
Documenteer:
|
||||||
> "Je bent documentatie expert. Gegeven component code, genereer:
|
- Welke geeft betere feedback?
|
||||||
> 1. Component overview
|
- Welke voelt meer "op maat"?
|
||||||
> 2. Props documentatie
|
- Wanneer zou je welke gebruiken?
|
||||||
> 3. Usage voorbeelden
|
|
||||||
> 4. Accessibility notes
|
|
||||||
> 5. Veel voorkomende valkuilen"
|
|
||||||
|
|
||||||
- Upload component library uit Les 6 als knowledge base
|
### Deliverable
|
||||||
- Test agent met component
|
- Werkende Custom GPT (link delen)
|
||||||
|
- Claude Project met project context
|
||||||
|
- Vergelijkings notities
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Huiswerk (2 uur)
|
## Huiswerk (2 uur)
|
||||||
|
|
||||||
### Deel 1: Test Agents in Workflow (1 uur)
|
### Personal Dev Assistant
|
||||||
|
|
||||||
**Bouw nieuwe Todo app feature:**
|
**Deel 1: Bouw Je Personal Assistant (1 uur)**
|
||||||
- Bijv. "Collaboration - invite users om todos te delen"
|
|
||||||
|
|
||||||
**Gebruik beide agents:**
|
Maak een Custom GPT of Claude Project die:
|
||||||
- Code Review agent om code te reviewen
|
- Jouw coding standards kent
|
||||||
- Documentation agent om te documenteren
|
- Jouw tech stack begrijpt
|
||||||
|
- Jouw workflow ondersteunt
|
||||||
|
|
||||||
**Track:**
|
**Include in instructions:**
|
||||||
- Hoe helpful?
|
- Jouw voorkeuren (tabs vs spaces, etc.)
|
||||||
- Vingen ze echte issues?
|
- Jouw tech stack details
|
||||||
- Zou je dagelijks gebruiken?
|
- Typische taken die je doet
|
||||||
|
- Hoe je feedback wilt krijgen
|
||||||
|
|
||||||
### Deel 2: Personal Dev Assistant (1 uur)
|
**Deel 2: Test in Echt Werk (45 min)**
|
||||||
|
|
||||||
**Maak comprehensive "Personal Dev Assistant" agent afgestemd op JOUW workflow.**
|
Gebruik je assistant voor echte taken:
|
||||||
|
1. Code review van een component
|
||||||
|
2. Help bij een bug
|
||||||
|
3. Genereer documentatie
|
||||||
|
|
||||||
**Include:**
|
**Deel 3: Reflectie (15 min)**
|
||||||
- Jouw coding standards
|
|
||||||
- Preferred patterns
|
|
||||||
- Tech stack specifics
|
|
||||||
- Veel voorkomende taken
|
|
||||||
- Troubleshooting kennis
|
|
||||||
|
|
||||||
- Test extensively
|
Schrijf korte reflectie (300 woorden):
|
||||||
- Deel agent config als gist
|
- Hoe helpful was je agent?
|
||||||
|
- Wat zou je verbeteren?
|
||||||
|
- Ga je dit blijven gebruiken?
|
||||||
|
|
||||||
|
### Deliverable
|
||||||
|
- Personal Dev Assistant (GPT link of Claude Project screenshot)
|
||||||
|
- 3 voorbeelden van gebruik
|
||||||
|
- Reflectie (300 woorden)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -141,7 +296,7 @@ Maak agent die comprehensive documentatie genereert.
|
|||||||
Na deze les kan de student:
|
Na deze les kan de student:
|
||||||
- Het verschil uitleggen tussen chatbots en AI agents
|
- Het verschil uitleggen tussen chatbots en AI agents
|
||||||
- Custom GPTs bouwen met instructions en knowledge base
|
- Custom GPTs bouwen met instructions en knowledge base
|
||||||
- Claude Projects opzetten met custom instructions
|
- Claude Projects opzetten met custom instructions en context
|
||||||
- Specialized developer agents bouwen (code review, documentation)
|
- Effectieve agent instructions schrijven
|
||||||
- Agents combineren met MCP voor externe data access
|
- De juiste tool kiezen (Custom GPT vs Claude Project)
|
||||||
- Een personal dev assistant agent maken
|
- Een personal dev assistant maken voor eigen workflow
|
||||||
|
|||||||
@@ -1,12 +1,4 @@
|
|||||||
# Les 10: Project Setup & Repository Structure
|
# Les 10: Introduction to Cursor
|
||||||
|
|
||||||
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
|
||||||
>
|
|
||||||
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
|
|
||||||
> - Les10-Slide-Overzicht.md
|
|
||||||
> - Les10-Lesplan.md
|
|
||||||
> - Les10-Bijlage-A-Lesopdracht.md
|
|
||||||
> - Les10-Bijlage-B-Huiswerkopdracht.md
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -14,205 +6,273 @@
|
|||||||
**Hoofdstuk 3: Advanced** (Les 10-18)
|
**Hoofdstuk 3: Advanced** (Les 10-18)
|
||||||
|
|
||||||
## Beschrijving
|
## Beschrijving
|
||||||
Leer hoe je een professioneel project opzet met goede folder structuur, documentatie, en AI-configuratie files. Dit vormt de basis voor je eindopdracht.
|
Kennismaking met Cursor - de professionele AI code editor. Leer de core features en ontdek waarom dit de tool is voor serieuze AI-assisted development.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Te Behandelen
|
## Te Behandelen
|
||||||
|
|
||||||
### Waarom Project Structure Belangrijk Is
|
### Waarom Cursor?
|
||||||
- AI tools werken beter met duidelijke structuur
|
|
||||||
- Makkelijker samenwerken
|
|
||||||
- Sneller nieuwe features toevoegen
|
|
||||||
- Professionele uitstraling
|
|
||||||
|
|
||||||
### Ideale Folder Structuur
|
**Tot nu toe gebruikten we:**
|
||||||
|
- OpenCode (gratis, goed voor leren)
|
||||||
|
- Claude Desktop (voor agents en projects)
|
||||||
|
|
||||||
```
|
**Cursor is de volgende stap:**
|
||||||
project/
|
- Purpose-built voor AI-assisted coding
|
||||||
├── .cursor/
|
- Professionele editor (gebaseerd op VS Code)
|
||||||
│ └── rules/ # Cursor instructies
|
- Superieure AI integratie
|
||||||
│ ├── general.mdc # Algemene project regels
|
- Free tier beschikbaar (voldoende voor de cursus)
|
||||||
│ └── components.mdc # Component-specifieke regels
|
|
||||||
├── docs/
|
---
|
||||||
│ ├── PROMPT-LOG.md # Belangrijke AI prompts
|
|
||||||
│ ├── AI-DECISIONS.md # Architectuur beslissingen
|
### Free vs Pro
|
||||||
│ └── PROJECT-BRIEF.md # Project beschrijving
|
|
||||||
├── src/
|
| Aspect | Free Tier | Pro ($20/maand) |
|
||||||
│ ├── app/ # Next.js App Router
|
|--------|-----------|-----------------|
|
||||||
│ ├── components/
|
| Tab completion | ✅ | ✅ |
|
||||||
│ │ ├── ui/ # Basis UI components
|
| CMD+K edits | Beperkt | Onbeperkt |
|
||||||
│ │ └── features/ # Feature-specifieke components
|
| Chat | Beperkt | Onbeperkt |
|
||||||
│ ├── lib/ # Utilities en helpers
|
| Composer | Beperkt | Onbeperkt |
|
||||||
│ └── types/ # TypeScript types
|
| Models | GPT-4, Claude | Alle modellen |
|
||||||
├── .env.local # Environment variables
|
|
||||||
├── .env.example # Template voor env vars
|
**Voor deze cursus:** Free tier is voldoende!
|
||||||
├── .gitignore
|
|
||||||
└── README.md
|
---
|
||||||
|
|
||||||
|
### Installatie
|
||||||
|
|
||||||
|
1. Ga naar [cursor.sh](https://cursor.sh)
|
||||||
|
2. Download voor jouw OS
|
||||||
|
3. Installeer
|
||||||
|
4. Open Cursor
|
||||||
|
5. Sign in met GitHub
|
||||||
|
|
||||||
|
**Eerste keer:**
|
||||||
|
- Cursor vraagt om settings te importeren van VS Code (optioneel)
|
||||||
|
- Accept default keybindings
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Core Features
|
||||||
|
|
||||||
|
#### 1. Tab Completion
|
||||||
|
AI-powered autocomplete die hele blokken code voorspelt.
|
||||||
|
|
||||||
|
**Hoe het werkt:**
|
||||||
|
- Begin met typen
|
||||||
|
- Cursor suggereert code in grijs
|
||||||
|
- Druk Tab om te accepteren
|
||||||
|
- Druk Escape om te negeren
|
||||||
|
|
||||||
|
**Tip:** Schrijf een comment over wat je wilt, en Tab completion vult de code in.
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// Function that calculates the total price with tax
|
||||||
|
// [Tab completion vult de functie in]
|
||||||
```
|
```
|
||||||
|
|
||||||
### .cursorrules Files
|
#### 2. CMD+K (Inline Editing)
|
||||||
|
Selecteer code en vraag AI om het aan te passen.
|
||||||
|
|
||||||
**Wat zijn .cursorrules?**
|
**Hoe het werkt:**
|
||||||
- Markdown files met instructies voor Cursor
|
1. Selecteer code (of zet cursor op een regel)
|
||||||
- Project-specifieke regels en conventies
|
2. Druk CMD+K (Mac) of Ctrl+K (Windows)
|
||||||
- Worden automatisch meegenomen in context
|
3. Typ je instructie
|
||||||
|
4. Enter om te genereren
|
||||||
|
5. Accept of Reject de wijziging
|
||||||
|
|
||||||
**Voorbeeld `general.mdc`:**
|
**Voorbeelden:**
|
||||||
```markdown
|
- "Add error handling"
|
||||||
# Project Rules
|
- "Convert to TypeScript"
|
||||||
|
- "Make this responsive"
|
||||||
|
- "Add loading state"
|
||||||
|
|
||||||
## Tech Stack
|
#### 3. Chat (Sidebar)
|
||||||
- Next.js 14 met App Router
|
Converseer met AI over je code.
|
||||||
- TypeScript (strict mode)
|
|
||||||
- Tailwind CSS voor styling
|
|
||||||
- Supabase voor backend
|
|
||||||
|
|
||||||
## Code Conventies
|
**Hoe het werkt:**
|
||||||
- Gebruik functionele components
|
1. CMD+Shift+L opent Chat
|
||||||
- Prefer named exports
|
2. Stel je vraag
|
||||||
- Destructure props
|
3. AI heeft context van je open file
|
||||||
- Gebruik async/await (geen .then())
|
|
||||||
|
|
||||||
## Styling
|
**Voorbeelden:**
|
||||||
- Tailwind classes, geen inline styles
|
- "Explain what this function does"
|
||||||
- Mobile-first approach
|
- "How can I optimize this?"
|
||||||
- Gebruik design tokens waar mogelijk
|
- "What's wrong with this code?"
|
||||||
|
|
||||||
|
#### 4. @ Mentions
|
||||||
|
Refereer naar files, folders, of documentatie.
|
||||||
|
|
||||||
|
**Syntax:**
|
||||||
|
- `@filename.tsx` - specifieke file
|
||||||
|
- `@folder/` - hele folder
|
||||||
|
- `@Docs` - officiële docs zoeken
|
||||||
|
- `@Web` - web zoeken
|
||||||
|
|
||||||
|
**Voorbeeld:**
|
||||||
|
```
|
||||||
|
@components/Button.tsx - How can I add a loading prop to this?
|
||||||
```
|
```
|
||||||
|
|
||||||
### docs/ Folder
|
#### 5. Composer Mode
|
||||||
|
Multi-file generatie in één keer.
|
||||||
|
|
||||||
**PROMPT-LOG.md**
|
**Hoe het werkt:**
|
||||||
- Log van belangrijke prompts die tot goede code leidden
|
1. CMD+I opent Composer
|
||||||
- Minimaal 10 prompts documenteren
|
2. Beschrijf wat je wilt bouwen
|
||||||
- Format: doel → prompt → resultaat
|
3. AI genereert meerdere files tegelijk
|
||||||
|
4. Review en accept changes
|
||||||
|
|
||||||
**AI-DECISIONS.md**
|
**Wanneer gebruiken:**
|
||||||
- Architectuur beslissingen gemaakt met AI hulp
|
- Nieuwe features met meerdere components
|
||||||
- Waarom bepaalde keuzes gemaakt
|
- Refactoring over meerdere files
|
||||||
- Trade-offs en alternatieven
|
- Boilerplate code genereren
|
||||||
|
|
||||||
**PROJECT-BRIEF.md**
|
---
|
||||||
- Wat doet het project?
|
|
||||||
- Wie is de doelgroep?
|
|
||||||
- Welke features zijn er?
|
|
||||||
|
|
||||||
### Environment Variables
|
### Workflow Vergelijking
|
||||||
|
|
||||||
**.env.example** (commit naar Git):
|
| Taak | OpenCode | Cursor |
|
||||||
```
|
|------|----------|--------|
|
||||||
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
|
| Snelle fix | Chat | CMD+K |
|
||||||
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
|
| Nieuwe component | Chat | Tab completion + CMD+K |
|
||||||
OPENAI_API_KEY=your-openai-key
|
| Multi-file feature | Meerdere chats | Composer |
|
||||||
```
|
| Code uitleg | Chat | Chat + @ mentions |
|
||||||
|
| Refactoring | Chat | CMD+K of Composer |
|
||||||
|
|
||||||
**.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
|
### Tips voor Beginners
|
||||||
- Project titel en korte beschrijving
|
|
||||||
- Screenshots of demo GIF
|
|
||||||
- Installatie instructies
|
|
||||||
- Environment variables uitleg
|
|
||||||
- Beschikbare scripts (`npm run dev`, etc.)
|
|
||||||
|
|
||||||
### Git Best Practices
|
1. **Start met Tab completion**
|
||||||
- Kleine, focused commits
|
- Gewoon typen en kijken wat er gebeurt
|
||||||
- Duidelijke commit messages
|
- Comments zijn je vriend
|
||||||
- Feature branches
|
|
||||||
- `.gitignore` correct ingesteld
|
2. **CMD+K voor snelle edits**
|
||||||
|
- Selecteer precies wat je wilt aanpassen
|
||||||
|
- Wees specifiek in je instructie
|
||||||
|
|
||||||
|
3. **Chat voor vragen**
|
||||||
|
- Als je iets niet begrijpt
|
||||||
|
- Als je opties wilt vergelijken
|
||||||
|
|
||||||
|
4. **@ mentions voor context**
|
||||||
|
- AI weet niet automatisch over andere files
|
||||||
|
- Voeg relevante files toe met @
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Keyboard Shortcuts Cheat Sheet
|
||||||
|
|
||||||
|
| Actie | Mac | Windows |
|
||||||
|
|-------|-----|---------|
|
||||||
|
| Tab completion accept | Tab | Tab |
|
||||||
|
| Inline edit | CMD+K | Ctrl+K |
|
||||||
|
| Open Chat | CMD+Shift+L | Ctrl+Shift+L |
|
||||||
|
| Open Composer | CMD+I | Ctrl+I |
|
||||||
|
| Accept suggestion | CMD+Y | Ctrl+Y |
|
||||||
|
| Reject suggestion | CMD+N | Ctrl+N |
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Tools
|
## Tools
|
||||||
- Cursor
|
- Cursor
|
||||||
- Git & GitHub
|
- GitHub
|
||||||
- Next.js
|
|
||||||
- VS Code / WebStorm
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Lesopdracht (2 uur)
|
## Lesopdracht (2 uur)
|
||||||
|
|
||||||
### Richt je Eindproject Repository In
|
### Cursor Verkennen
|
||||||
|
|
||||||
**Deel 1: Repository Setup (30 min)**
|
**Deel 1: Setup (20 min)**
|
||||||
- Maak nieuwe GitHub repository
|
|
||||||
- Clone lokaal
|
|
||||||
- Run `npx create-next-app@latest` met TypeScript + Tailwind
|
|
||||||
- Push initial commit
|
|
||||||
|
|
||||||
**Deel 2: Folder Structuur (30 min)**
|
1. Download en installeer Cursor
|
||||||
- Maak `docs/` folder met:
|
2. Sign in met GitHub
|
||||||
- `PROJECT-BRIEF.md` (beschrijf je eindproject idee)
|
3. Open je Todo app project
|
||||||
- `PROMPT-LOG.md` (lege template)
|
4. Verken de interface
|
||||||
- `AI-DECISIONS.md` (lege template)
|
|
||||||
- Maak `.cursor/rules/` folder met:
|
|
||||||
- `general.mdc` (project regels)
|
|
||||||
- Reorganiseer `src/` folder
|
|
||||||
|
|
||||||
**Deel 3: Environment Setup (20 min)**
|
**Deel 2: Tab Completion (30 min)**
|
||||||
- Maak `.env.example` met alle benodigde variabelen
|
|
||||||
- Maak `.env.local` met echte waarden
|
|
||||||
- Controleer `.gitignore` (env files moeten erin staan!)
|
|
||||||
|
|
||||||
**Deel 4: README & Git (40 min)**
|
Maak nieuwe file `src/components/LoadingSpinner.tsx`:
|
||||||
- Schrijf complete README.md
|
1. Typ comment: `// Loading spinner component with size prop`
|
||||||
- Maak eerste feature branch
|
2. Laat Tab completion de rest doen
|
||||||
- Commit alle changes met goede messages
|
3. Itereer met meer comments
|
||||||
- Push en maak PR (voor jezelf)
|
4. Noteer: hoe goed is de completion?
|
||||||
|
|
||||||
|
**Deel 3: CMD+K Oefenen (30 min)**
|
||||||
|
|
||||||
|
Open je TodoList component:
|
||||||
|
1. Selecteer de list rendering code
|
||||||
|
2. CMD+K → "Add loading state with skeleton"
|
||||||
|
3. Selecteer een button
|
||||||
|
4. CMD+K → "Add disabled state while loading"
|
||||||
|
5. Selecteer een function
|
||||||
|
6. CMD+K → "Add try-catch with error toast"
|
||||||
|
|
||||||
|
Noteer wat werkt en wat niet.
|
||||||
|
|
||||||
|
**Deel 4: Chat + @ Mentions (20 min)**
|
||||||
|
|
||||||
|
1. Open Chat (CMD+Shift+L)
|
||||||
|
2. Vraag: "@TodoList.tsx What could I improve in this component?"
|
||||||
|
3. Vraag: "@lib/supabase.ts How do I add real-time subscriptions?"
|
||||||
|
4. Probeer @Docs voor Next.js documentatie
|
||||||
|
|
||||||
|
**Deel 5: Composer Proberen (20 min)**
|
||||||
|
|
||||||
|
1. Open Composer (CMD+I)
|
||||||
|
2. Vraag: "Create a Settings page with dark mode toggle and notification preferences. Use our existing component style."
|
||||||
|
3. Review de gegenereerde files
|
||||||
|
4. Accept of reject
|
||||||
|
|
||||||
### Deliverable
|
### Deliverable
|
||||||
- GitHub repository met complete structuur
|
- Screenshot van werkende Tab completion
|
||||||
- Alle docs files aanwezig
|
- 3 voorbeelden van CMD+K edits
|
||||||
- .cursorrules file geschreven
|
- Notities: wat werkt wel/niet goed
|
||||||
- README compleet
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Huiswerk (2 uur)
|
## Huiswerk (2 uur)
|
||||||
|
|
||||||
### Verfijn je Project Setup
|
### Bouw Feature met Cursor
|
||||||
|
|
||||||
**Deel 1: .cursorrules Uitbreiden (45 min)**
|
**Deel 1: Feature Bouwen (1.5 uur)**
|
||||||
- Voeg `components.mdc` toe met component conventies
|
|
||||||
- Voeg `api.mdc` toe met API/Supabase regels
|
|
||||||
- Test of Cursor de regels oppikt
|
|
||||||
|
|
||||||
**Deel 2: Documentatie (45 min)**
|
Voeg "Due Dates" toe aan je Todo app:
|
||||||
- Vul `PROJECT-BRIEF.md` volledig in:
|
1. Elk todo kan een due date hebben
|
||||||
- Projectnaam en tagline
|
2. Toon due date in de lijst
|
||||||
- Probleem dat je oplost
|
3. Sorteer op due date
|
||||||
- Target audience
|
4. Markeer overdue items in rood
|
||||||
- Core features (3-5)
|
|
||||||
- Nice-to-have features
|
|
||||||
- Tech stack keuzes
|
|
||||||
- Start `AI-DECISIONS.md` met eerste beslissing
|
|
||||||
|
|
||||||
**Deel 3: Basis Components (30 min)**
|
**Gebruik ALLE Cursor features:**
|
||||||
- Maak `src/components/ui/` met basic components:
|
- Tab completion voor nieuwe code
|
||||||
- Button.tsx
|
- CMD+K voor aanpassingen
|
||||||
- Card.tsx
|
- Chat voor vragen
|
||||||
- Input.tsx
|
- Composer voor multi-file changes
|
||||||
- Gebruik Cursor met je nieuwe .cursorrules
|
|
||||||
|
**Deel 2: Reflectie (30 min)**
|
||||||
|
|
||||||
|
Schrijf vergelijking (400 woorden):
|
||||||
|
- Cursor vs OpenCode: wat is beter?
|
||||||
|
- Welke feature gebruik je het meest?
|
||||||
|
- Is free tier voldoende?
|
||||||
|
- Ga je overstappen?
|
||||||
|
|
||||||
### Deliverable
|
### Deliverable
|
||||||
- Uitgebreide .cursorrules (minimaal 2 files)
|
- Werkende Due Dates feature
|
||||||
- Volledig ingevulde PROJECT-BRIEF.md
|
- GitHub commit met de changes
|
||||||
- Basis UI components gemaakt met Cursor
|
- Reflectie (400 woorden)
|
||||||
- Screenshot van Cursor die je rules gebruikt
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Leerdoelen
|
## Leerdoelen
|
||||||
Na deze les kan de student:
|
Na deze les kan de student:
|
||||||
- Een professionele project structuur opzetten
|
- Cursor installeren en configureren
|
||||||
- .cursorrules files schrijven voor project-specifieke AI instructies
|
- Tab completion effectief gebruiken
|
||||||
- Documentatie files maken (PROMPT-LOG, AI-DECISIONS, PROJECT-BRIEF)
|
- CMD+K gebruiken voor inline edits
|
||||||
- Environment variables correct beheren
|
- Chat gebruiken met @ mentions voor context
|
||||||
- Git best practices toepassen
|
- Composer mode gebruiken voor multi-file generatie
|
||||||
- Een README schrijven die anderen kunnen volgen
|
- Het verschil beoordelen tussen Cursor en OpenCode
|
||||||
|
- De juiste Cursor feature kiezen per taak
|
||||||
|
|||||||
@@ -1,173 +1,448 @@
|
|||||||
# Les 11: Introduction to Cursor - De Professionele AI Editor
|
# Les 11: Project Setup & Repository Structure
|
||||||
|
|
||||||
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
|
||||||
>
|
|
||||||
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
|
|
||||||
> - Les11-Slide-Overzicht.md
|
|
||||||
> - Les11-Lesplan.md
|
|
||||||
> - Les11-Bijlage-A-Lesopdracht.md
|
|
||||||
> - Les11-Bijlage-B-Huiswerkopdracht.md
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Hoofdstuk
|
## Hoofdstuk
|
||||||
**Hoofdstuk 3: Advanced** (Les 8-18)
|
**Hoofdstuk 3: Advanced** (Les 10-18)
|
||||||
|
|
||||||
## Beschrijving
|
## Beschrijving
|
||||||
Kennismaking met Cursor als premium AI code editor - best of both worlds tussen IDE en AI power.
|
Zet je eindproject professioneel op met de juiste structuur, documentatie, en AI-configuratie. Je past alles toe wat je hebt geleerd en maakt je project klaar voor Cursor.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Te Behandelen
|
## Te Behandelen
|
||||||
|
|
||||||
### Waarom Cursor na OpenCode/WebStorm + Claude Code?
|
### Waarom Goede Structuur Belangrijk Is
|
||||||
- Purpose-built for AI
|
|
||||||
- Bliksem snel
|
|
||||||
- Superieure tab completion
|
|
||||||
- CMD+K inline editing
|
|
||||||
- Composer mode
|
|
||||||
- @ mentions systeem
|
|
||||||
|
|
||||||
### Skills Compatibiliteit
|
**Voor AI:**
|
||||||
- Al je Skills werken ook in Cursor
|
- AI begrijpt beter wat je project doet
|
||||||
|
- Betere code suggestions
|
||||||
|
- Minder hallucinaties
|
||||||
|
|
||||||
### Installatie
|
**Voor jezelf:**
|
||||||
- Download
|
- Makkelijker navigeren
|
||||||
- GitHub integration
|
- Sneller features bouwen
|
||||||
- 2-week Pro trial
|
- Betere samenwerking
|
||||||
|
|
||||||
### Core Features
|
---
|
||||||
|
|
||||||
| Feature | Beschrijving |
|
### Eindproject Aanmaken
|
||||||
|---------|-------------|
|
|
||||||
| Tab completion | AI-powered autocomplete |
|
|
||||||
| CMD+K | Inline editing |
|
|
||||||
| Chat | Conversatie met context |
|
|
||||||
| @ mentions | Reference files, folders, docs |
|
|
||||||
| Composer mode | Multi-file generation |
|
|
||||||
|
|
||||||
### Skills Migratie
|
```bash
|
||||||
- Skills van OpenCode werken meteen in Cursor
|
# Kies een goede naam voor je project
|
||||||
|
npx create-next-app@latest ai-recipe-generator
|
||||||
|
# of: smart-budget-buddy
|
||||||
|
# of: travel-planner-ai
|
||||||
|
# of: jouw-eigen-idee
|
||||||
|
|
||||||
### Cost Discussie
|
# Beantwoord de vragen:
|
||||||
- Free tier vs Pro ($20/maand)
|
# ✔ Would you like to use TypeScript? → Yes
|
||||||
|
# ✔ Would you like to use ESLint? → Yes
|
||||||
|
# ✔ Would you like to use Tailwind CSS? → Yes
|
||||||
|
# ✔ Would you like to use `src/` directory? → Yes
|
||||||
|
# ✔ Would you like to use App Router? → Yes
|
||||||
|
# ✔ Would you like to customize the default import alias? → No
|
||||||
|
|
||||||
### Wanneer Wat Gebruiken?
|
cd ai-recipe-generator
|
||||||
|
```
|
||||||
|
|
||||||
| Tool | Gebruik voor |
|
---
|
||||||
|------|--------------|
|
|
||||||
| OpenCode/WebStorm | Leren |
|
### De Ideale Folder Structuur
|
||||||
| Claude Code | Grote autonome taken |
|
|
||||||
| Cursor | Dagelijkse development |
|
```
|
||||||
|
ai-recipe-generator/
|
||||||
|
├── .cursor/
|
||||||
|
│ └── rules/
|
||||||
|
│ └── general.mdc # Cursor instructies
|
||||||
|
├── docs/
|
||||||
|
│ ├── PROJECT-BRIEF.md # Project beschrijving
|
||||||
|
│ ├── PROMPT-LOG.md # AI prompts logboek
|
||||||
|
│ └── AI-DECISIONS.md # Architectuur beslissingen
|
||||||
|
├── src/
|
||||||
|
│ ├── app/
|
||||||
|
│ │ ├── api/ # API routes (voor AI)
|
||||||
|
│ │ ├── layout.tsx
|
||||||
|
│ │ └── page.tsx
|
||||||
|
│ ├── components/
|
||||||
|
│ │ ├── ui/ # Herbruikbare UI components
|
||||||
|
│ │ └── features/ # Feature-specifieke components
|
||||||
|
│ ├── lib/
|
||||||
|
│ │ └── supabase.ts # Supabase client
|
||||||
|
│ └── types/
|
||||||
|
│ └── index.ts # TypeScript types
|
||||||
|
├── .env.example # Template voor env vars
|
||||||
|
├── .env.local # Echte env vars (niet committen!)
|
||||||
|
├── .gitignore
|
||||||
|
└── README.md
|
||||||
|
```
|
||||||
|
|
||||||
|
**Maak de folders aan:**
|
||||||
|
```bash
|
||||||
|
mkdir -p .cursor/rules
|
||||||
|
mkdir -p docs
|
||||||
|
mkdir -p src/components/ui
|
||||||
|
mkdir -p src/components/features
|
||||||
|
mkdir -p src/lib
|
||||||
|
mkdir -p src/types
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### .cursorrules Files
|
||||||
|
|
||||||
|
**.cursor/rules/general.mdc:**
|
||||||
|
```markdown
|
||||||
|
# Project: AI Recipe Generator
|
||||||
|
|
||||||
|
## Tech Stack
|
||||||
|
- Next.js 14 met App Router
|
||||||
|
- TypeScript (strict mode)
|
||||||
|
- Tailwind CSS voor styling
|
||||||
|
- Supabase voor database en auth
|
||||||
|
- Vercel AI SDK voor chat features
|
||||||
|
|
||||||
|
## Code Conventies
|
||||||
|
- Gebruik functionele React components
|
||||||
|
- Gebruik named exports (geen default exports)
|
||||||
|
- Destructure props in function signature
|
||||||
|
- Gebruik async/await (geen .then() chains)
|
||||||
|
- Schrijf TypeScript types voor alle props en data
|
||||||
|
|
||||||
|
## File Naming
|
||||||
|
- Components: PascalCase (Button.tsx, RecipeCard.tsx)
|
||||||
|
- Utilities: camelCase (formatDate.ts, fetchRecipes.ts)
|
||||||
|
- Types: PascalCase met 'Type' suffix (RecipeType.ts)
|
||||||
|
|
||||||
|
## Styling
|
||||||
|
- Alleen Tailwind classes, geen inline styles
|
||||||
|
- Mobile-first approach
|
||||||
|
- Gebruik consistent spacing (4, 8, 16, 24, 32)
|
||||||
|
|
||||||
|
## Supabase
|
||||||
|
- Client in src/lib/supabase.ts
|
||||||
|
- Gebruik typed queries waar mogelijk
|
||||||
|
- Handle errors expliciet
|
||||||
|
|
||||||
|
## AI Features
|
||||||
|
- API routes in src/app/api/
|
||||||
|
- Gebruik Vercel AI SDK useChat hook
|
||||||
|
- Stream responses voor betere UX
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### docs/ Folder
|
||||||
|
|
||||||
|
#### docs/PROJECT-BRIEF.md
|
||||||
|
```markdown
|
||||||
|
# Project Brief: AI Recipe Generator
|
||||||
|
|
||||||
|
## Projectnaam
|
||||||
|
AI Recipe Generator
|
||||||
|
|
||||||
|
## Tagline
|
||||||
|
"Ontdek recepten op basis van wat je in huis hebt"
|
||||||
|
|
||||||
|
## Probleem
|
||||||
|
Mensen hebben vaak ingrediënten in huis maar weten niet wat ze
|
||||||
|
ermee kunnen maken. Ze verspillen voedsel of bestellen onnodig.
|
||||||
|
|
||||||
|
## Oplossing
|
||||||
|
Een app waar je ingrediënten invoert en AI receptsuggesties genereert.
|
||||||
|
Je kunt chatten met de AI voor variaties en tips.
|
||||||
|
|
||||||
|
## Doelgroep
|
||||||
|
- Studenten met beperkt budget
|
||||||
|
- Thuiskoks die inspiratie zoeken
|
||||||
|
- Mensen die voedselverspilling willen verminderen
|
||||||
|
|
||||||
|
## Core Features
|
||||||
|
1. Ingrediënten invoeren
|
||||||
|
2. AI genereert recepten op basis van ingrediënten
|
||||||
|
3. Chat interface voor follow-up vragen
|
||||||
|
4. Recepten opslaan als favoriet
|
||||||
|
5. Login om favorieten te bewaren
|
||||||
|
|
||||||
|
## Nice-to-have Features
|
||||||
|
- Dieetwensen (vegetarisch, glutenvrij, etc.)
|
||||||
|
- Boodschappenlijst genereren
|
||||||
|
- Recept delen
|
||||||
|
|
||||||
|
## Tech Stack
|
||||||
|
- Frontend: Next.js, TypeScript, Tailwind CSS
|
||||||
|
- Backend: Supabase (database, auth)
|
||||||
|
- AI: Vercel AI SDK met OpenAI
|
||||||
|
- Deployment: Vercel
|
||||||
|
```
|
||||||
|
|
||||||
|
#### docs/PROMPT-LOG.md
|
||||||
|
```markdown
|
||||||
|
# Prompt Log
|
||||||
|
|
||||||
|
Dit document bevat de belangrijkste prompts die ik heb gebruikt.
|
||||||
|
|
||||||
|
## Template per prompt:
|
||||||
|
|
||||||
|
### [Datum] - [Onderwerp]
|
||||||
|
**Doel:** Wat wilde ik bereiken?
|
||||||
|
**Prompt:**
|
||||||
|
\`\`\`
|
||||||
|
De exacte prompt die ik gebruikte
|
||||||
|
\`\`\`
|
||||||
|
**Resultaat:** Wat was het resultaat? Werkte het?
|
||||||
|
**Geleerd:** Wat heb ik hiervan geleerd?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Prompts
|
||||||
|
|
||||||
|
### [Datum] - Project Setup
|
||||||
|
**Doel:** Basis project structuur opzetten
|
||||||
|
**Prompt:**
|
||||||
|
\`\`\`
|
||||||
|
[Nog in te vullen tijdens development]
|
||||||
|
\`\`\`
|
||||||
|
**Resultaat:**
|
||||||
|
**Geleerd:**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
(Voeg minimaal 10 prompts toe tijdens je project)
|
||||||
|
```
|
||||||
|
|
||||||
|
#### docs/AI-DECISIONS.md
|
||||||
|
```markdown
|
||||||
|
# AI Decisions Log
|
||||||
|
|
||||||
|
Dit document bevat architectuur- en designbeslissingen gemaakt met AI hulp.
|
||||||
|
|
||||||
|
## Template per beslissing:
|
||||||
|
|
||||||
|
### [Datum] - [Beslissing titel]
|
||||||
|
**Context:** Wat was de situatie?
|
||||||
|
**Vraag aan AI:** Wat heb ik gevraagd?
|
||||||
|
**Opties:** Welke opties werden voorgesteld?
|
||||||
|
**Keuze:** Wat heb ik gekozen en waarom?
|
||||||
|
**Trade-offs:** Wat zijn de voor- en nadelen?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Beslissingen
|
||||||
|
|
||||||
|
### [Datum] - Database Schema
|
||||||
|
**Context:** Ik moet bepalen hoe ik recepten opsla.
|
||||||
|
**Vraag aan AI:** "Wat is een goede database structuur voor een recept app?"
|
||||||
|
**Opties:**
|
||||||
|
1. Één tabel met JSON voor ingrediënten
|
||||||
|
2. Genormaliseerde tabellen (recipes, ingredients, recipe_ingredients)
|
||||||
|
**Keuze:** Optie 1 - één tabel met JSON
|
||||||
|
**Trade-offs:**
|
||||||
|
- Pro: Simpeler, sneller te implementeren
|
||||||
|
- Con: Minder flexibel voor complexe queries
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
(Voeg minimaal 5 beslissingen toe tijdens je project)
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Environment Variables
|
||||||
|
|
||||||
|
**.env.example (WEL committen):**
|
||||||
|
```bash
|
||||||
|
# Supabase
|
||||||
|
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
|
||||||
|
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
|
||||||
|
|
||||||
|
# OpenAI (voor Vercel AI SDK)
|
||||||
|
OPENAI_API_KEY=your-openai-key
|
||||||
|
```
|
||||||
|
|
||||||
|
**.env.local (NIET committen):**
|
||||||
|
```bash
|
||||||
|
# Supabase
|
||||||
|
NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
|
||||||
|
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.xxxxx
|
||||||
|
|
||||||
|
# OpenAI
|
||||||
|
OPENAI_API_KEY=sk-xxxxx
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### README.md Best Practices
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
# AI Recipe Generator
|
||||||
|
|
||||||
|
Ontdek recepten op basis van wat je in huis hebt.
|
||||||
|
|
||||||
|
## Features
|
||||||
|
- Voer ingrediënten in die je hebt
|
||||||
|
- AI genereert receptsuggesties
|
||||||
|
- Chat voor follow-up vragen
|
||||||
|
- Sla favoriete recepten op
|
||||||
|
|
||||||
|
## Tech Stack
|
||||||
|
- Next.js 14 (App Router)
|
||||||
|
- TypeScript
|
||||||
|
- Tailwind CSS
|
||||||
|
- Supabase
|
||||||
|
- Vercel AI SDK
|
||||||
|
|
||||||
|
## Getting Started
|
||||||
|
|
||||||
|
### Prerequisites
|
||||||
|
- Node.js 18+
|
||||||
|
- npm of yarn
|
||||||
|
- Supabase account
|
||||||
|
- OpenAI API key
|
||||||
|
|
||||||
|
### Installation
|
||||||
|
|
||||||
|
1. Clone de repository:
|
||||||
|
\`\`\`bash
|
||||||
|
git clone https://github.com/jouw-username/ai-recipe-generator.git
|
||||||
|
cd ai-recipe-generator
|
||||||
|
\`\`\`
|
||||||
|
|
||||||
|
2. Installeer dependencies:
|
||||||
|
\`\`\`bash
|
||||||
|
npm install
|
||||||
|
\`\`\`
|
||||||
|
|
||||||
|
3. Kopieer environment variables:
|
||||||
|
\`\`\`bash
|
||||||
|
cp .env.example .env.local
|
||||||
|
\`\`\`
|
||||||
|
|
||||||
|
4. Vul je credentials in `.env.local`
|
||||||
|
|
||||||
|
5. Start development server:
|
||||||
|
\`\`\`bash
|
||||||
|
npm run dev
|
||||||
|
\`\`\`
|
||||||
|
|
||||||
|
6. Open [http://localhost:3000](http://localhost:3000)
|
||||||
|
|
||||||
|
## Scripts
|
||||||
|
- `npm run dev` - Start development server
|
||||||
|
- `npm run build` - Build voor productie
|
||||||
|
- `npm run lint` - Run ESLint
|
||||||
|
|
||||||
|
## Deployment
|
||||||
|
Deze app is gedeployed op Vercel: [link naar productie]
|
||||||
|
|
||||||
|
## Author
|
||||||
|
[Jouw naam]
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### GitHub Repository Aanmaken
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Initialiseer Git (als dat nog niet is gebeurd)
|
||||||
|
git init
|
||||||
|
|
||||||
|
# Maak eerste commit
|
||||||
|
git add .
|
||||||
|
git commit -m "Initial Next.js setup with project structure"
|
||||||
|
|
||||||
|
# Maak repository op GitHub.com, dan:
|
||||||
|
git remote add origin https://github.com/jouw-username/ai-recipe-generator.git
|
||||||
|
git branch -M main
|
||||||
|
git push -u origin main
|
||||||
|
```
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Tools
|
## Tools
|
||||||
|
- Next.js
|
||||||
- Cursor
|
- Cursor
|
||||||
- GitHub
|
- Git & GitHub
|
||||||
- Skills.sh
|
|
||||||
- Supabase
|
- Supabase
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Lesopdracht (2 uur)
|
## Lesopdracht (2 uur)
|
||||||
|
|
||||||
### Deel 1: Setup & Skills Migration (30 min)
|
### Richt je Eindproject Repository In
|
||||||
|
|
||||||
**Installatie:**
|
**Deel 1: Project Aanmaken (20 min)**
|
||||||
- Install Cursor
|
- Kies je eindproject (Recipe Generator / Budget Buddy / Travel Planner / eigen idee)
|
||||||
- Connect GitHub
|
- Run `npx create-next-app@latest [project-naam]`
|
||||||
- Activate Pro trial
|
- Open in Cursor
|
||||||
|
|
||||||
**Verificatie:**
|
**Deel 2: Folder Structuur (20 min)**
|
||||||
- Verifieer Skills werken (`npx skills list`)
|
- Maak alle folders aan volgens de structuur
|
||||||
- Test prompt met skill
|
- Maak alle bestanden aan
|
||||||
|
- Test: folder structuur is compleet
|
||||||
|
|
||||||
**Eerste Indrukken:**
|
**Deel 3: .cursorrules (30 min)**
|
||||||
- Bouw component
|
- Schrijf `general.mdc` met jouw project details
|
||||||
- Test tab completion
|
- Pas de tech stack, conventies, en styling regels aan
|
||||||
- Test CMD+K
|
- Test: open een file en vraag Cursor iets - volgt hij je regels?
|
||||||
- Test Chat met @ mentions
|
|
||||||
- Documenteer verschillen vs OpenCode
|
|
||||||
|
|
||||||
### Deel 2: Feature Comparison (45 min)
|
**Deel 4: Documentatie (30 min)**
|
||||||
|
- Vul PROJECT-BRIEF.md volledig in
|
||||||
|
- Maak templates klaar in PROMPT-LOG.md en AI-DECISIONS.md
|
||||||
|
- Schrijf complete README.md
|
||||||
|
|
||||||
**Rebuild filtering system uit Les 4 in Cursor:**
|
**Deel 5: Git (20 min)**
|
||||||
- Time het
|
- Initialiseer Git
|
||||||
|
- Maak GitHub repository
|
||||||
|
- Push alles
|
||||||
|
|
||||||
**Gebruik alle features:**
|
### Deliverable
|
||||||
- Extensive tab completion
|
- GitHub repository URL
|
||||||
- CMD+K
|
- Volledig ingevulde PROJECT-BRIEF.md
|
||||||
- Chat
|
- Werkende .cursorrules file
|
||||||
- @ mentions
|
- Screenshot van Cursor die je regels volgt
|
||||||
- Try Composer
|
|
||||||
|
|
||||||
**Vergelijk:**
|
|
||||||
- Tijd
|
|
||||||
- Code quality
|
|
||||||
- Experience
|
|
||||||
|
|
||||||
### Deel 3: Composer Mode (45 min)
|
|
||||||
|
|
||||||
**Test Composer mode - Bouw analytics dashboard:**
|
|
||||||
- Sidebar nav
|
|
||||||
- Top navbar
|
|
||||||
- 4 stat cards
|
|
||||||
- Line chart
|
|
||||||
- Activity feed
|
|
||||||
|
|
||||||
**Process:**
|
|
||||||
- Geef high-level beschrijving
|
|
||||||
- Laat autonoom werken
|
|
||||||
- Feedback in Composer chat
|
|
||||||
|
|
||||||
**Vergelijk:** Cursor Composer vs Claude Code
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Huiswerk (2 uur)
|
## Huiswerk (2 uur)
|
||||||
|
|
||||||
### Bouw Complete Mini-App met Cursor
|
### Verfijn Setup & Start Bouwen
|
||||||
|
|
||||||
**Kies 1 van 4:**
|
**Deel 1: Extra .cursorrules (30 min)**
|
||||||
1. Weather App
|
- Maak `components.mdc` met component conventies
|
||||||
2. Expense Tracker
|
- Maak `api.mdc` met API route conventies
|
||||||
3. Recipe Finder
|
- Test beide in Cursor
|
||||||
4. Habit Tracker
|
|
||||||
|
|
||||||
**Requirements:**
|
**Deel 2: Basis Components (1 uur)**
|
||||||
- Full CRUD met Supabase
|
Maak 3-5 basis UI components in `src/components/ui/`:
|
||||||
- Responsive
|
- Button.tsx
|
||||||
- TypeScript strict
|
- Card.tsx
|
||||||
- Shadcn
|
- Input.tsx
|
||||||
- Deployed naar Vercel
|
- (optioneel: Modal.tsx, Toast.tsx)
|
||||||
|
|
||||||
**Challenge:** Maximaliseer Cursor + Skills
|
Gebruik Cursor met je .cursorrules!
|
||||||
|
Log effectieve prompts in PROMPT-LOG.md
|
||||||
|
|
||||||
### Track Metrics
|
**Deel 3: Supabase Setup (30 min)**
|
||||||
- Tab completion usage
|
- Maak nieuw Supabase project voor eindopdracht
|
||||||
- CMD+K count
|
- Configureer `.env.local` en `.env.example`
|
||||||
- Composer usage
|
- Bespreek met AI welke tabellen je nodig hebt
|
||||||
- Skills active
|
- Maak eerste tabel aan
|
||||||
- AI vs manual ratio
|
- Documenteer in AI-DECISIONS.md
|
||||||
|
|
||||||
### Deliverables
|
### Deliverable
|
||||||
- Deployed app
|
- Minimaal 2 .cursorrules files
|
||||||
- GitHub repo
|
- Minimaal 3 UI components
|
||||||
- Comprehensive reflectie (600 woorden):
|
- Supabase project gekoppeld
|
||||||
- Is Cursor worth switching?
|
- Eerste entries in PROMPT-LOG.md en AI-DECISIONS.md
|
||||||
- Cursor vs Claude Code?
|
|
||||||
- Free vs Pro?
|
|
||||||
- Skills performance?
|
|
||||||
- Final verdict?
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Leerdoelen
|
## Leerdoelen
|
||||||
Na deze les kan de student:
|
Na deze les kan de student:
|
||||||
- Cursor installeren en configureren
|
- Een professionele project structuur opzetten
|
||||||
- Skills migreren naar Cursor
|
- .cursorrules files schrijven die Cursor instrueren
|
||||||
- Core features gebruiken (Tab, CMD+K, Chat, @ mentions, Composer)
|
- Documentatie files aanmaken (PROJECT-BRIEF, PROMPT-LOG, AI-DECISIONS)
|
||||||
- Het verschil beoordelen tussen Cursor en andere AI tools
|
- Environment variables correct beheren
|
||||||
- Composer mode gebruiken voor multi-file generatie
|
- Een GitHub repository aanmaken en pushen
|
||||||
- Een weloverwogen keuze maken over welke tool wanneer te gebruiken
|
- De basis leggen voor AI-assisted development met goede context
|
||||||
|
|||||||
@@ -1,153 +1,363 @@
|
|||||||
# Les 12: Advanced Context Management & AI-Vriendelijke Code
|
# Les 12: MCP & Context Management
|
||||||
|
|
||||||
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
|
||||||
>
|
|
||||||
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
|
|
||||||
> - Les12-Slide-Overzicht.md
|
|
||||||
> - Les12-Lesplan.md
|
|
||||||
> - Les12-Bijlage-A-Lesopdracht.md
|
|
||||||
> - Les12-Bijlage-B-Huiswerkopdracht.md
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Hoofdstuk
|
## Hoofdstuk
|
||||||
**Hoofdstuk 3: Advanced** (Les 8-18)
|
**Hoofdstuk 3: Advanced** (Les 10-18)
|
||||||
|
|
||||||
## Beschrijving
|
## Beschrijving
|
||||||
Masterclass in context management voor maximale AI effectiveness.
|
Leer over MCP (Model Context Protocol) en hoe je context effectief beheert voor betere AI-assisted development.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Te Behandelen
|
## Te Behandelen
|
||||||
|
|
||||||
### Context Windows Begrijpen
|
### Wat is MCP?
|
||||||
- Tokens (~4 chars = 1 token)
|
|
||||||
- Context sizes:
|
|
||||||
- GPT-4: 128K tokens
|
|
||||||
- Claude: 200K tokens
|
|
||||||
|
|
||||||
### Waarom Context Belangrijk
|
**MCP = Model Context Protocol**
|
||||||
- Meer context = beter begrip
|
|
||||||
- Maar ook: langzamer + duurder
|
Een protocol van Anthropic waarmee AI tools veilig kunnen verbinden met externe data bronnen.
|
||||||
|
|
||||||
|
**Zonder MCP:**
|
||||||
|
- Je kopieert handmatig data naar Claude
|
||||||
|
- Context gaat verloren tussen sessies
|
||||||
|
- Geen toegang tot live data
|
||||||
|
|
||||||
|
**Met MCP:**
|
||||||
|
- Claude kan direct je files lezen
|
||||||
|
- Toegang tot databases, APIs, GitHub
|
||||||
|
- Real-time data in je conversations
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### MCP Servers
|
||||||
|
|
||||||
|
MCP werkt met "servers" - kleine programma's die specifieke data bronnen ontsluiten.
|
||||||
|
|
||||||
|
**Populaire MCP Servers:**
|
||||||
|
|
||||||
|
| Server | Wat het doet |
|
||||||
|
|--------|--------------|
|
||||||
|
| **filesystem** | Lees/schrijf lokale files |
|
||||||
|
| **github** | Toegang tot repos, issues, PRs |
|
||||||
|
| **postgres** | Direct database queries |
|
||||||
|
| **slack** | Berichten en channels |
|
||||||
|
| **brave-search** | Web zoeken |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Claude Desktop + MCP Configureren
|
||||||
|
|
||||||
|
**Stap 1:** Open Claude Desktop settings
|
||||||
|
|
||||||
|
**Stap 2:** Ga naar "Developer" → "Edit Config"
|
||||||
|
|
||||||
|
**Stap 3:** Voeg MCP servers toe in `claude_desktop_config.json`:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"mcpServers": {
|
||||||
|
"filesystem": {
|
||||||
|
"command": "npx",
|
||||||
|
"args": [
|
||||||
|
"-y",
|
||||||
|
"@modelcontextprotocol/server-filesystem",
|
||||||
|
"/Users/jouw-username/projects/ai-recipe-generator"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Stap 4:** Herstart Claude Desktop
|
||||||
|
|
||||||
|
**Stap 5:** Je ziet nu een 🔧 icoon in Claude - dit toont actieve MCP servers
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Filesystem MCP Testen
|
||||||
|
|
||||||
|
Met filesystem MCP kan Claude:
|
||||||
|
- Je project files lezen
|
||||||
|
- File structuur bekijken
|
||||||
|
- Code analyseren
|
||||||
|
|
||||||
|
**Test prompt:**
|
||||||
|
```
|
||||||
|
Analyseer mijn project structuur en geef me een overzicht
|
||||||
|
van de belangrijkste files en hun functies.
|
||||||
|
```
|
||||||
|
|
||||||
|
Claude kan nu direct je files lezen zonder dat je ze kopieert!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### GitHub MCP
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"mcpServers": {
|
||||||
|
"github": {
|
||||||
|
"command": "npx",
|
||||||
|
"args": ["-y", "@modelcontextprotocol/server-github"],
|
||||||
|
"env": {
|
||||||
|
"GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_xxxxx"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Wat kun je doen:**
|
||||||
|
- "Toon mijn open issues"
|
||||||
|
- "Maak een nieuwe branch"
|
||||||
|
- "Wat zijn de recente commits?"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Context Management
|
||||||
|
|
||||||
|
### Wat is Context?
|
||||||
|
|
||||||
|
**Context = alle informatie die AI heeft tijdens een conversatie**
|
||||||
|
|
||||||
|
- Je vraag
|
||||||
|
- Eerdere berichten
|
||||||
|
- Geüploade files
|
||||||
|
- MCP data
|
||||||
|
|
||||||
|
**Beperking:** AI heeft een "context window" - maximale hoeveelheid tokens.
|
||||||
|
|
||||||
|
| Model | Context Window |
|
||||||
|
|-------|----------------|
|
||||||
|
| GPT-4 | ~128K tokens |
|
||||||
|
| Claude 3.5 | ~200K tokens |
|
||||||
|
| Claude 3 Opus | ~200K tokens |
|
||||||
|
|
||||||
|
**1 token ≈ 4 karakters** (of ~¾ woord)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Waarom Context Belangrijk Is
|
||||||
|
|
||||||
|
**Meer context = beter begrip**
|
||||||
|
|
||||||
|
Met context over je project kan AI:
|
||||||
|
- Consistente code genereren
|
||||||
|
- Bestaande patterns volgen
|
||||||
|
- Juiste imports gebruiken
|
||||||
|
|
||||||
|
**Te veel context = problemen**
|
||||||
|
- Langzamere responses
|
||||||
|
- Hogere kosten
|
||||||
|
- AI raakt "afgeleid"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
### Context Strategieën
|
### Context Strategieën
|
||||||
- Alleen relevante files
|
|
||||||
- Start breed → narrow down
|
|
||||||
- Sequential context
|
|
||||||
- Prunen
|
|
||||||
|
|
||||||
### Project Documentatie voor AI
|
**1. Start Breed, Narrow Down**
|
||||||
|
```
|
||||||
|
Begin: "Bekijk mijn hele project structuur"
|
||||||
|
Dan: "Focus op de components folder"
|
||||||
|
Dan: "Specifiek TodoList.tsx"
|
||||||
|
```
|
||||||
|
|
||||||
| Document | Doel |
|
**2. Alleen Relevante Files**
|
||||||
|----------|------|
|
- Niet je hele codebase delen
|
||||||
| README | Project overview |
|
- Focus op files die relevant zijn voor de taak
|
||||||
| ARCHITECTURE | System design |
|
|
||||||
| COMPONENTS | Component library docs |
|
|
||||||
|
|
||||||
### Hoe AI Docs Leest
|
**3. @ Mentions in Cursor**
|
||||||
- Structuur matters
|
```
|
||||||
- Voorbeelden helpen
|
@components/Button.tsx @lib/utils.ts
|
||||||
|
Hoe kan ik een loading state toevoegen aan de Button?
|
||||||
|
```
|
||||||
|
|
||||||
### AI-Vriendelijke Code Organisatie
|
**4. Fresh Start bij Nieuwe Taken**
|
||||||
- Semantische naming
|
- Nieuwe chat voor nieuwe onderwerpen
|
||||||
- Kleine focused files
|
- Voorkomt context pollution
|
||||||
- Proper separation
|
|
||||||
- Comprehensive comments (WHY niet WHAT)
|
|
||||||
|
|
||||||
### Context Pruning
|
---
|
||||||
- Wanneer fresh chat
|
|
||||||
- .cursorignore
|
|
||||||
- Vorige context samenvatten
|
|
||||||
|
|
||||||
### Knowledge Persistence
|
### .cursorignore
|
||||||
- Claude Projects voor long-term memory
|
|
||||||
|
|
||||||
### Tool Vergelijking
|
Net als .gitignore, maar voor Cursor's AI indexing.
|
||||||
Context handling in:
|
|
||||||
- Cursor
|
**Maak `.cursorignore` in je project root:**
|
||||||
- OpenCode
|
```
|
||||||
- Claude Code
|
# Dependencies
|
||||||
|
node_modules/
|
||||||
|
|
||||||
|
# Build outputs
|
||||||
|
.next/
|
||||||
|
dist/
|
||||||
|
build/
|
||||||
|
|
||||||
|
# Large files
|
||||||
|
*.log
|
||||||
|
*.lock
|
||||||
|
|
||||||
|
# Sensitive
|
||||||
|
.env.local
|
||||||
|
```
|
||||||
|
|
||||||
|
**Waarom:**
|
||||||
|
- Snellere indexing
|
||||||
|
- Geen irrelevante suggestions
|
||||||
|
- Betere focus op je code
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Context Optimalisatie Checklist
|
||||||
|
|
||||||
|
✅ **Goede project documentatie**
|
||||||
|
- README met overview
|
||||||
|
- Duidelijke folder structuur
|
||||||
|
- Comments in complexe code
|
||||||
|
|
||||||
|
✅ **Semantische naming**
|
||||||
|
- `fetchUserData()` niet `getData()`
|
||||||
|
- `UserProfileCard.tsx` niet `Card1.tsx`
|
||||||
|
|
||||||
|
✅ **Kleine, focused files**
|
||||||
|
- Max ~300 regels per file
|
||||||
|
- Eén verantwoordelijkheid per file
|
||||||
|
|
||||||
|
✅ **Proper imports**
|
||||||
|
- Absolute imports (`@/components/...`)
|
||||||
|
- Georganiseerde imports
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Context in Cursor vs Claude Desktop
|
||||||
|
|
||||||
|
| Aspect | Cursor | Claude Desktop + MCP |
|
||||||
|
|--------|--------|---------------------|
|
||||||
|
| Automatische context | Open files | MCP servers |
|
||||||
|
| File access | @ mentions | Filesystem MCP |
|
||||||
|
| Project begrip | .cursorrules | Project Knowledge |
|
||||||
|
| Beste voor | Coding | Research, planning |
|
||||||
|
|
||||||
|
**Combineer ze:**
|
||||||
|
- Claude Desktop + MCP voor planning en grote analyses
|
||||||
|
- Cursor voor daadwerkelijk coderen
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Tools
|
## Tools
|
||||||
- Cursor
|
|
||||||
- Claude Desktop
|
- Claude Desktop
|
||||||
|
- MCP servers
|
||||||
|
- Cursor
|
||||||
- .cursorignore
|
- .cursorignore
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Lesopdracht (2 uur)
|
## Lesopdracht (2 uur)
|
||||||
|
|
||||||
### Context Optimization Challenge
|
### MCP Setup & Context Optimalisatie
|
||||||
|
|
||||||
**Setup:** Docent biedt messy codebase (10-15 files, onduidelijk, missing docs)
|
**Deel 1: Claude Desktop MCP Setup (45 min)**
|
||||||
|
|
||||||
### Phase 1: Assessment (30 min)
|
1. Open Claude Desktop settings
|
||||||
- Test Cursor begrip met 4 vragen
|
2. Configureer filesystem MCP voor je eindproject folder
|
||||||
- Score X/10
|
3. Herstart Claude Desktop
|
||||||
|
4. Verifieer: vraag Claude om je project te analyseren
|
||||||
|
|
||||||
### Phase 2: Documentation (45 min)
|
Test prompts:
|
||||||
Maak comprehensive docs met AI:
|
- "Wat is de structuur van mijn project?"
|
||||||
- README
|
- "Welke dependencies gebruik ik?"
|
||||||
- ARCHITECTURE.md
|
- "Analyseer mijn TodoList component"
|
||||||
- COMPONENTS.md
|
|
||||||
|
|
||||||
### Phase 3: Organization (45 min)
|
**Deel 2: GitHub MCP (optioneel) (30 min)**
|
||||||
Refactor voor clarity:
|
|
||||||
- Rename files/functions
|
|
||||||
- Split files <300 lines
|
|
||||||
- Add comments
|
|
||||||
- Organize folders
|
|
||||||
- Improve imports
|
|
||||||
|
|
||||||
### Phase 4: Re-test (30 min)
|
1. Maak GitHub Personal Access Token
|
||||||
- Zelfde 4 vragen
|
2. Configureer GitHub MCP
|
||||||
- Score verbetering
|
3. Test met je eindproject repo
|
||||||
- Analyseer wat hielp
|
|
||||||
|
Test prompts:
|
||||||
|
- "Toon mijn recente commits"
|
||||||
|
- "Wat zijn mijn open issues?"
|
||||||
|
|
||||||
|
**Deel 3: Context Optimalisatie (45 min)**
|
||||||
|
|
||||||
|
1. Maak `.cursorignore` voor je project
|
||||||
|
2. Voeg node_modules, .next, etc. toe
|
||||||
|
3. Herindexeer project in Cursor
|
||||||
|
|
||||||
|
4. Test context kwaliteit:
|
||||||
|
- Vraag Cursor iets over je project
|
||||||
|
- Zijn de antwoorden accuraat?
|
||||||
|
- Gebruikt hij de juiste patterns?
|
||||||
|
|
||||||
|
5. Verbeter indien nodig:
|
||||||
|
- Voeg comments toe aan complexe code
|
||||||
|
- Verbeter naming
|
||||||
|
- Split grote files
|
||||||
|
|
||||||
|
### Deliverable
|
||||||
|
- Werkende MCP configuratie (screenshot)
|
||||||
|
- .cursorignore file
|
||||||
|
- Notities over context kwaliteit
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Huiswerk (2 uur)
|
## Huiswerk (2 uur)
|
||||||
|
|
||||||
### Maak Context Management Playbook
|
### Context Deep Dive
|
||||||
|
|
||||||
### Deel 1: Playbook (1 uur)
|
**Deel 1: MCP Experimenteren (1 uur)**
|
||||||
|
|
||||||
Schrijf gids over:
|
Kies en configureer nog een MCP server:
|
||||||
- Pre-project checklist
|
- brave-search (voor web zoeken)
|
||||||
- Folder structure templates
|
- sqlite (voor lokale databases)
|
||||||
- File naming conventions
|
- Of een andere uit de [MCP registry](https://github.com/modelcontextprotocol/servers)
|
||||||
- Prompting templates
|
|
||||||
- Wanneer welke tool
|
|
||||||
- Context management tijdens development
|
|
||||||
- AI begrip meten
|
|
||||||
- Red flags
|
|
||||||
- Pro tips
|
|
||||||
- Troubleshooting
|
|
||||||
|
|
||||||
### Deel 2: Templates (30 min)
|
Test uitgebreid:
|
||||||
|
- Wat kun je ermee?
|
||||||
|
- Wanneer is het nuttig?
|
||||||
|
- Wat zijn beperkingen?
|
||||||
|
|
||||||
Maak 3 templates:
|
**Deel 2: Context Playbook (1 uur)**
|
||||||
1. README.md
|
|
||||||
2. ARCHITECTURE.md
|
|
||||||
3. COMPONENT_TEMPLATE.md
|
|
||||||
|
|
||||||
### Deel 3: Test (30 min)
|
Schrijf een persoonlijk "Context Management Playbook" (1 pagina):
|
||||||
- Start vers Next.js project
|
|
||||||
- Pas playbook toe
|
|
||||||
- Test of Cursor meteen begrijpt
|
|
||||||
- Itereer
|
|
||||||
|
|
||||||
**Deel als GitHub repo**
|
```markdown
|
||||||
|
# Mijn Context Management Playbook
|
||||||
|
|
||||||
|
## Wanneer gebruik ik wat?
|
||||||
|
|
||||||
|
### Claude Desktop + MCP
|
||||||
|
- [situaties]
|
||||||
|
|
||||||
|
### Cursor met @ mentions
|
||||||
|
- [situaties]
|
||||||
|
|
||||||
|
## Mijn .cursorignore template
|
||||||
|
- [wat ignore ik altijd]
|
||||||
|
|
||||||
|
## Context strategieën
|
||||||
|
- [wat werkt voor mij]
|
||||||
|
|
||||||
|
## Red flags
|
||||||
|
- [wanneer is context slecht]
|
||||||
|
|
||||||
|
## Optimalisatie tips
|
||||||
|
- [mijn beste tips]
|
||||||
|
```
|
||||||
|
|
||||||
|
### Deliverable
|
||||||
|
- Extra MCP server geconfigureerd
|
||||||
|
- Context Management Playbook (1 pagina)
|
||||||
|
- Documentatie in AI-DECISIONS.md over je context keuzes
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Leerdoelen
|
## Leerdoelen
|
||||||
Na deze les kan de student:
|
Na deze les kan de student:
|
||||||
|
- MCP begrijpen en uitleggen
|
||||||
|
- MCP servers configureren in Claude Desktop
|
||||||
|
- Filesystem en GitHub MCP gebruiken
|
||||||
- Context windows en token limits begrijpen
|
- Context windows en token limits begrijpen
|
||||||
- Effectieve context strategieën toepassen
|
- .cursorignore effectief gebruiken
|
||||||
- Project documentatie schrijven die AI helpt
|
- Context strategieën toepassen
|
||||||
- AI-vriendelijke code structuur implementeren
|
- De juiste tool kiezen voor context management
|
||||||
- Context pruning toepassen (.cursorignore, fresh chats)
|
|
||||||
- Code organisatie verbeteren voor betere AI interactie
|
|
||||||
|
|||||||
@@ -1,174 +1,284 @@
|
|||||||
# Les 13: Mastering Cursor met Claude Opus & Advanced Skills
|
# Les 13: Mastering Cursor
|
||||||
|
|
||||||
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
|
||||||
>
|
|
||||||
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
|
|
||||||
> - Les13-Slide-Overzicht.md
|
|
||||||
> - Les13-Lesplan.md
|
|
||||||
> - Les13-Bijlage-A-Lesopdracht.md
|
|
||||||
> - Les13-Bijlage-B-Huiswerkopdracht.md
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Hoofdstuk
|
## Hoofdstuk
|
||||||
**Hoofdstuk 3: Advanced** (Les 8-18)
|
**Hoofdstuk 3: Advanced** (Les 10-18)
|
||||||
|
|
||||||
## Beschrijving
|
## Beschrijving
|
||||||
Geavanceerde technieken met Cursor en high-end models.
|
Verdieping in Cursor's geavanceerde features. Leer model keuze, Composer Mode, @ mentions, en .cursorrules optimaal gebruiken.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Te Behandelen
|
## Te Behandelen
|
||||||
|
|
||||||
### Model Deep Dive
|
### Model Keuze
|
||||||
|
|
||||||
**Waarom Claude Opus voor Complex:**
|
**Wanneer welk model?**
|
||||||
- Superieure reasoning
|
|
||||||
- 200K context
|
|
||||||
- Beste multi-file orchestration
|
|
||||||
|
|
||||||
**Wanneer Welk Model? (Complexity Matrix)**
|
| Model | Gebruik voor | Kosten |
|
||||||
|
|-------|-------------|--------|
|
||||||
|
| **Haiku** | Simpele taken, autocomplete | Goedkoop |
|
||||||
|
| **Sonnet** | Dagelijks werk, de meeste taken | Medium |
|
||||||
|
| **Opus** | Complexe architectuur, multi-file | Duur |
|
||||||
|
|
||||||
| Complexiteit | Model |
|
**Vuistregels:**
|
||||||
|--------------|-------|
|
- Tab completion: Haiku (automatisch)
|
||||||
| Simpel | Haiku |
|
- CMD+K: Sonnet (default)
|
||||||
| Gemiddeld | Sonnet |
|
- Composer: Sonnet of Opus
|
||||||
| Complex | Opus |
|
- Complexe debugging: Opus
|
||||||
|
|
||||||
### Composer Mode Mastery
|
---
|
||||||
- Multi-file generatie
|
|
||||||
- Agent-like planning
|
|
||||||
- Autonome iteratie
|
|
||||||
|
|
||||||
### Wanneer Composer vs Chat
|
### Composer Mode Diepgaand
|
||||||
- Composer: nieuwe features
|
|
||||||
- Chat: begrip/vragen
|
|
||||||
|
|
||||||
### @ Mentions Deep Dive
|
**Wat is Composer?**
|
||||||
|
Multi-file generatie in één keer. Cursor plant en voert wijzigingen uit over meerdere bestanden.
|
||||||
|
|
||||||
**Alle Types:**
|
**Wanneer Composer gebruiken:**
|
||||||
- @Files
|
- Nieuwe feature met meerdere components
|
||||||
- @Folders
|
- Refactoring over meerdere files
|
||||||
- @Code
|
- Boilerplate generatie
|
||||||
- @Docs
|
- Complexe wijzigingen
|
||||||
- @Web
|
|
||||||
|
|
||||||
**Advanced patterns**
|
**Composer Workflow:**
|
||||||
|
1. CMD+I opent Composer
|
||||||
|
2. Beschrijf je doel duidelijk
|
||||||
|
3. Voeg context toe met @ mentions
|
||||||
|
4. Laat Cursor plannen
|
||||||
|
5. Review het plan
|
||||||
|
6. Accept of reject per file
|
||||||
|
7. Itereer met feedback
|
||||||
|
|
||||||
|
**Voorbeeld prompt:**
|
||||||
|
```
|
||||||
|
Create a user profile page with:
|
||||||
|
- @components/ui/ style components
|
||||||
|
- Profile header with avatar
|
||||||
|
- Edit form with validation
|
||||||
|
- Save to @lib/supabase.ts
|
||||||
|
- Loading and error states
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### @ Mentions Systeem
|
||||||
|
|
||||||
|
**Alle types:**
|
||||||
|
|
||||||
|
| Mention | Wat het doet | Voorbeeld |
|
||||||
|
|---------|--------------|-----------|
|
||||||
|
| `@file.tsx` | Specifieke file | `@Button.tsx` |
|
||||||
|
| `@folder/` | Hele folder | `@components/` |
|
||||||
|
| `@codebase` | Zoek in codebase | `@codebase auth logic` |
|
||||||
|
| `@Docs` | Officiële docs | `@Docs Next.js routing` |
|
||||||
|
| `@Web` | Web zoeken | `@Web Supabase auth setup` |
|
||||||
|
|
||||||
|
**Best practices:**
|
||||||
|
- Wees specifiek met file mentions
|
||||||
|
- Gebruik folder mentions voor context
|
||||||
|
- @Docs voor up-to-date informatie
|
||||||
|
- Combineer mentions voor betere context
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### .cursorrules Advanced
|
||||||
|
|
||||||
|
**Meerdere rules files:**
|
||||||
|
|
||||||
|
```
|
||||||
|
.cursor/
|
||||||
|
└── rules/
|
||||||
|
├── general.mdc # Project-brede regels
|
||||||
|
├── components.mdc # Component conventies
|
||||||
|
├── api.mdc # API route regels
|
||||||
|
└── testing.mdc # Test conventies
|
||||||
|
```
|
||||||
|
|
||||||
|
**Effectieve rules schrijven:**
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
# Component Rules
|
||||||
|
|
||||||
|
## Structure
|
||||||
|
Alle components moeten volgen:
|
||||||
|
1. Props interface bovenaan
|
||||||
|
2. Component function
|
||||||
|
3. Named export onderaan
|
||||||
|
|
||||||
|
## Example
|
||||||
|
\`\`\`tsx
|
||||||
|
interface ButtonProps {
|
||||||
|
label: string
|
||||||
|
onClick: () => void
|
||||||
|
variant?: 'primary' | 'secondary'
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Button({ label, onClick, variant = 'primary' }: ButtonProps) {
|
||||||
|
return (
|
||||||
|
<button onClick={onClick} className={...}>
|
||||||
|
{label}
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
\`\`\`
|
||||||
|
|
||||||
|
## DON'Ts
|
||||||
|
- Geen default exports
|
||||||
|
- Geen inline styles
|
||||||
|
- Geen any types
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
### Codebase Indexing
|
### Codebase Indexing
|
||||||
- Hoe Cursor indexeert
|
|
||||||
- Optimaliseren
|
|
||||||
|
|
||||||
### .cursorrules Files
|
**Hoe Cursor indexeert:**
|
||||||
- Project-specifieke instructies die persistent zijn
|
- Scant alle files in je project
|
||||||
- Powerful patterns
|
- Bouwt semantic understanding
|
||||||
- Hoe effectieve rules schrijven
|
- Gebruikt voor autocomplete en context
|
||||||
|
|
||||||
### Skills + Composer
|
**Optimaliseren:**
|
||||||
- Hoe Skills Composer krachtiger maken
|
1. Goede `.cursorignore` (node_modules, .next, etc.)
|
||||||
|
2. Semantische naming
|
||||||
|
3. Duidelijke file structuur
|
||||||
|
4. Comments waar nodig
|
||||||
|
|
||||||
|
**Re-indexeren:**
|
||||||
|
CMD+Shift+P → "Reindex"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
### Cost Management
|
### Cost Management
|
||||||
- Token usage monitoren
|
|
||||||
- Free tier strategies
|
**Token gebruik monitoren:**
|
||||||
- Wanneer Pro worth it
|
- Cursor toont token count in chat
|
||||||
|
- Check monthly usage in settings
|
||||||
|
|
||||||
|
**Bespaartips:**
|
||||||
|
1. Gebruik Haiku voor simpele taken
|
||||||
|
2. Beperk context (niet hele codebase)
|
||||||
|
3. Wees specifiek in prompts
|
||||||
|
4. Fresh chat voor nieuwe onderwerpen
|
||||||
|
|
||||||
|
**Free tier strategie:**
|
||||||
|
- Focus op Tab completion (onbeperkt)
|
||||||
|
- Gebruik CMD+K spaarzaam
|
||||||
|
- Composer alleen voor grote taken
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Tools
|
## Tools
|
||||||
- Cursor
|
- Cursor
|
||||||
- Claude Opus/Sonnet/Haiku
|
- Claude models (Haiku/Sonnet/Opus)
|
||||||
- Skills.sh
|
|
||||||
- .cursorrules
|
- .cursorrules
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Lesopdracht (2 uur)
|
## Lesopdracht (2 uur)
|
||||||
|
|
||||||
### Complexe Feature met Cursor Composer + Claude + Skills
|
### Multi-Step Form Wizard
|
||||||
|
|
||||||
**Bouw Multi-Step Form Wizard:**
|
**Bouw met Composer:**
|
||||||
|
|
||||||
| Stap | Features |
|
| Stap | Features |
|
||||||
|------|----------|
|
|------|----------|
|
||||||
| 1 | Personal info met avatar |
|
| 1 | Personal info (naam, email) |
|
||||||
| 2 | Company info met autocomplete |
|
| 2 | Preferences (theme, notifications) |
|
||||||
| 3 | Preferences (dynamic based on previous) |
|
| 3 | Review & confirm |
|
||||||
| 4 | Review & confirm met edit |
|
| 4 | Success animation |
|
||||||
|
|
||||||
**Extra Requirements:**
|
**Requirements:**
|
||||||
- Progress indicator met validation visualization
|
- Progress indicator
|
||||||
- Per-step validation
|
- Per-stap validatie
|
||||||
- localStorage persistence
|
- localStorage persistence
|
||||||
- Success animation met confetti
|
|
||||||
- Error handling throughout
|
|
||||||
- TypeScript strict
|
- TypeScript strict
|
||||||
- Shadcn components
|
- Tailwind styling
|
||||||
- Mobile responsive
|
- Mobile responsive
|
||||||
|
|
||||||
### Process
|
**Process:**
|
||||||
1. Install/verify Skills
|
|
||||||
2. Use Composer met Opus/Sonnet - comprehensive prompt
|
|
||||||
3. Let orchestrate
|
|
||||||
4. CMD+K voor refinements
|
|
||||||
5. Chat met @ mentions voor vragen
|
|
||||||
|
|
||||||
### Track
|
**Deel 1: Composer Setup (30 min)**
|
||||||
- Welk model wanneer
|
1. Open Composer (CMD+I)
|
||||||
- Composer iterations
|
2. Schrijf comprehensive prompt
|
||||||
- Skills impact
|
3. Include @ mentions naar relevante files
|
||||||
- @ mentions patterns
|
4. Kies Sonnet of Opus
|
||||||
- Cost estimate
|
|
||||||
|
**Deel 2: Generatie & Review (45 min)**
|
||||||
|
1. Laat Composer genereren
|
||||||
|
2. Review elke file
|
||||||
|
3. Accept wat goed is
|
||||||
|
4. Reject wat niet past
|
||||||
|
|
||||||
|
**Deel 3: Refinement (45 min)**
|
||||||
|
1. Gebruik CMD+K voor kleine fixes
|
||||||
|
2. Chat voor vragen
|
||||||
|
3. Itereer tot het werkt
|
||||||
|
|
||||||
### Deliverable
|
### Deliverable
|
||||||
- Working wizard
|
- Werkende form wizard
|
||||||
- Analyse document
|
- Notities: welk model wanneer, hoeveel iteraties
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Huiswerk (2 uur)
|
## Huiswerk (2 uur)
|
||||||
|
|
||||||
### Maak Perfect .cursorrules File
|
### Perfecte .cursorrules
|
||||||
|
|
||||||
### Deel 1: Research (30 min)
|
**Deel 1: Research (30 min)**
|
||||||
- Bestudeer 3-5 .cursorrules voorbeelden online
|
- Zoek 3-5 .cursorrules voorbeelden online
|
||||||
- Analyseer wat effectief maakt
|
- Analyseer wat ze effectief maakt
|
||||||
|
|
||||||
### Deel 2: Write Comprehensive (1 uur)
|
**Deel 2: Write Comprehensive Rules (1 uur)**
|
||||||
|
|
||||||
Maak definitieve .cursorrules voor JOUW stack.
|
Maak complete .cursorrules voor je eindproject:
|
||||||
|
|
||||||
**Include:**
|
```markdown
|
||||||
- Project context
|
# [Project Naam]
|
||||||
- Code style
|
|
||||||
- TypeScript conventions
|
|
||||||
- React/Next.js patterns
|
|
||||||
- Styling guidelines
|
|
||||||
- Error handling
|
|
||||||
- Accessibility
|
|
||||||
- Testing
|
|
||||||
- Security
|
|
||||||
- Common pitfalls
|
|
||||||
- Skills reference
|
|
||||||
|
|
||||||
### Deel 3: Test & Iterate (30 min)
|
## Tech Stack
|
||||||
- Nieuw project met .cursorrules
|
[Jouw stack]
|
||||||
- Use Composer
|
|
||||||
- Verifieer Cursor volgt rules
|
## Code Conventions
|
||||||
- Itereer
|
[Jouw conventies]
|
||||||
|
|
||||||
|
## File Naming
|
||||||
|
[Jouw regels]
|
||||||
|
|
||||||
|
## Component Structure
|
||||||
|
[Jouw patterns]
|
||||||
|
|
||||||
|
## Styling
|
||||||
|
[Tailwind regels]
|
||||||
|
|
||||||
|
## API Routes
|
||||||
|
[Route conventies]
|
||||||
|
|
||||||
|
## Error Handling
|
||||||
|
[Error patterns]
|
||||||
|
|
||||||
|
## DON'Ts
|
||||||
|
[Wat te vermijden]
|
||||||
|
```
|
||||||
|
|
||||||
|
**Deel 3: Test (30 min)**
|
||||||
|
1. Start nieuw component
|
||||||
|
2. Vraag Cursor om het te bouwen
|
||||||
|
3. Check: volgt Cursor je regels?
|
||||||
|
4. Itereer indien nodig
|
||||||
|
|
||||||
### Deliverable
|
### Deliverable
|
||||||
- .cursorrules file
|
- Complete .cursorrules file
|
||||||
- Uitleg document
|
- Screenshot van Cursor die regels volgt
|
||||||
- Test results
|
- Korte analyse: wat werkt goed, wat niet
|
||||||
- Deel als gist
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Leerdoelen
|
## Leerdoelen
|
||||||
Na deze les kan de student:
|
Na deze les kan de student:
|
||||||
- Het juiste Claude model kiezen per complexiteit
|
- Het juiste Claude model kiezen per taak
|
||||||
- Composer mode effectief gebruiken voor complexe features
|
- Composer Mode effectief gebruiken voor multi-file features
|
||||||
- @ mentions strategisch inzetten
|
- @ mentions strategisch inzetten voor context
|
||||||
- .cursorrules files schrijven voor consistent gedrag
|
- Geavanceerde .cursorrules files schrijven
|
||||||
- Skills combineren met Composer voor betere output
|
- Codebase indexing optimaliseren
|
||||||
- Token usage monitoren en kosten beheren
|
- Token gebruik monitoren en kosten beheren
|
||||||
|
|||||||
@@ -1,158 +1,329 @@
|
|||||||
# Les 15: AI-Driven Testing & Quality Assurance
|
# Les 15: Vercel AI SDK - AI Features in je App
|
||||||
|
|
||||||
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
|
||||||
>
|
|
||||||
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
|
|
||||||
> - Les15-Slide-Overzicht.md
|
|
||||||
> - Les15-Lesplan.md
|
|
||||||
> - Les15-Bijlage-A-Lesopdracht.md
|
|
||||||
> - Les15-Bijlage-B-Huiswerkopdracht.md
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Hoofdstuk
|
## Hoofdstuk
|
||||||
**Hoofdstuk 3: Advanced** (Les 8-18)
|
**Hoofdstuk 3: Advanced** (Les 10-18)
|
||||||
|
|
||||||
## Beschrijving
|
## Beschrijving
|
||||||
AI voor testen en code kwaliteit.
|
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
|
## Te Behandelen
|
||||||
|
|
||||||
### Waarom Testen Belangrijk
|
### Waarom Vercel AI SDK?
|
||||||
- Vang bugs vroeg
|
|
||||||
- Vertrouwen in refactoring
|
|
||||||
- Documentatie van gedrag
|
|
||||||
|
|
||||||
### Types van Tests
|
**Het probleem:** Direct API calls naar OpenAI/Anthropic zijn complex:
|
||||||
|
- Streaming handmatig implementeren
|
||||||
|
- Error handling
|
||||||
|
- State management
|
||||||
|
|
||||||
| Type | Scope |
|
**De oplossing:** Vercel AI SDK
|
||||||
|------|-------|
|
- Simpele React hooks
|
||||||
| Unit | Individuele functies |
|
- Built-in streaming
|
||||||
| Component | React components |
|
- Provider-agnostic (OpenAI, Anthropic, etc.)
|
||||||
| Integration | Meerdere units samen |
|
- Edge-ready
|
||||||
| E2E | Volledige user flows |
|
|
||||||
|
|
||||||
### AI voor Test Generation
|
---
|
||||||
- Beschrijf wat te testen
|
|
||||||
- AI schrijft comprehensive suites
|
|
||||||
- Dekt edge cases
|
|
||||||
|
|
||||||
### Testing Tools
|
### Installatie & Setup
|
||||||
|
|
||||||
| Tool | Gebruik |
|
```bash
|
||||||
|------|---------|
|
npm install ai @ai-sdk/openai
|
||||||
| Vitest | Snelle moderne test runner |
|
# of voor Anthropic:
|
||||||
| React Testing Library | User perspectief |
|
npm install ai @ai-sdk/anthropic
|
||||||
| MSW | API mocking |
|
```
|
||||||
| Playwright | E2E testing |
|
|
||||||
|
|
||||||
### Testing Supabase
|
**Environment variable:**
|
||||||
- Mocken database calls
|
```bash
|
||||||
- RLS testen
|
# .env.local
|
||||||
- Edge Functions testen
|
OPENAI_API_KEY=sk-xxxxx
|
||||||
|
```
|
||||||
|
|
||||||
### Code Review met AI
|
---
|
||||||
- Geautomatiseerde reviews
|
|
||||||
- Issues vinden (security, performance, accessibility)
|
|
||||||
- Fixes suggereren
|
|
||||||
|
|
||||||
### Debugging met AI
|
### Core Hooks
|
||||||
- Plak error
|
|
||||||
- AI legt uit en suggereert fix
|
|
||||||
|
|
||||||
### Code Kwaliteit Metrics
|
#### useChat - Voor Conversaties
|
||||||
- Coverage >70%
|
|
||||||
- Mutation testing
|
|
||||||
- Complexity analyse
|
|
||||||
|
|
||||||
### Cursor's AI voor Automated Test Generation
|
```tsx
|
||||||
|
'use client'
|
||||||
|
import { useChat } from 'ai/react'
|
||||||
|
|
||||||
### Integration met Workflow
|
export function ChatComponent() {
|
||||||
- Tests on git push
|
const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat()
|
||||||
- CI/CD
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col h-screen">
|
||||||
|
<div className="flex-1 overflow-y-auto p-4">
|
||||||
|
{messages.map(m => (
|
||||||
|
<div key={m.id} className={m.role === 'user' ? 'text-right' : 'text-left'}>
|
||||||
|
<span className="inline-block p-2 rounded-lg bg-gray-100">
|
||||||
|
{m.content}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit} className="p-4 border-t">
|
||||||
|
<input
|
||||||
|
value={input}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
placeholder="Type a message..."
|
||||||
|
className="w-full p-2 border rounded"
|
||||||
|
/>
|
||||||
|
<button type="submit" disabled={isLoading}>
|
||||||
|
{isLoading ? 'Sending...' : 'Send'}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### useCompletion - Voor Single Completions
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import { useCompletion } from 'ai/react'
|
||||||
|
|
||||||
|
export function SummaryComponent() {
|
||||||
|
const { completion, input, handleInputChange, handleSubmit, isLoading } = useCompletion()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<form onSubmit={handleSubmit}>
|
||||||
|
<textarea
|
||||||
|
value={input}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
placeholder="Paste text to summarize..."
|
||||||
|
/>
|
||||||
|
<button type="submit">Summarize</button>
|
||||||
|
</form>
|
||||||
|
{completion && <p>{completion}</p>}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### API Routes
|
||||||
|
|
||||||
|
**app/api/chat/route.ts:**
|
||||||
|
```typescript
|
||||||
|
import { openai } from '@ai-sdk/openai'
|
||||||
|
import { streamText } from 'ai'
|
||||||
|
|
||||||
|
export async function POST(req: Request) {
|
||||||
|
const { messages } = await req.json()
|
||||||
|
|
||||||
|
const result = streamText({
|
||||||
|
model: openai('gpt-4o-mini'),
|
||||||
|
system: 'You are a helpful cooking assistant. Suggest recipes based on ingredients.',
|
||||||
|
messages,
|
||||||
|
})
|
||||||
|
|
||||||
|
return result.toDataStreamResponse()
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Met custom system prompt:**
|
||||||
|
```typescript
|
||||||
|
const result = streamText({
|
||||||
|
model: openai('gpt-4o-mini'),
|
||||||
|
system: `You are a recipe assistant for the AI Recipe Generator app.
|
||||||
|
|
||||||
|
When the user provides ingredients:
|
||||||
|
1. Suggest 2-3 recipes they could make
|
||||||
|
2. List required additional ingredients (if any)
|
||||||
|
3. Provide brief cooking instructions
|
||||||
|
|
||||||
|
Be concise and practical.`,
|
||||||
|
messages,
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Streaming Responses
|
||||||
|
|
||||||
|
**Waarom streaming?**
|
||||||
|
- Betere UX (user ziet direct resultaat)
|
||||||
|
- Snellere perceived performance
|
||||||
|
- Geen wachten op complete response
|
||||||
|
|
||||||
|
**Hoe het werkt:**
|
||||||
|
1. Server stuurt tokens één voor één
|
||||||
|
2. Client rendert elke token direct
|
||||||
|
3. User ziet "typing" effect
|
||||||
|
|
||||||
|
**Loading indicator:**
|
||||||
|
```tsx
|
||||||
|
{isLoading && (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="animate-pulse">●</div>
|
||||||
|
<span>AI is thinking...</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Integratie met Supabase
|
||||||
|
|
||||||
|
**Conversations opslaan:**
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// Maak tabel in Supabase:
|
||||||
|
// conversations: id, user_id, created_at
|
||||||
|
// messages: id, conversation_id, role, content, created_at
|
||||||
|
|
||||||
|
// Na elke message:
|
||||||
|
async function saveMessage(conversationId: string, role: string, content: string) {
|
||||||
|
await supabase.from('messages').insert({
|
||||||
|
conversation_id: conversationId,
|
||||||
|
role,
|
||||||
|
content
|
||||||
|
})
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**In je component:**
|
||||||
|
```tsx
|
||||||
|
const { messages, input, handleSubmit } = useChat({
|
||||||
|
onFinish: async (message) => {
|
||||||
|
await saveMessage(conversationId, message.role, message.content)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Error Handling
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
const { messages, error, reload } = useChat()
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="p-4 bg-red-100 text-red-700 rounded">
|
||||||
|
<p>Something went wrong. Please try again.</p>
|
||||||
|
<button onClick={reload}>Retry</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Cost Management
|
||||||
|
|
||||||
|
**Model keuze:**
|
||||||
|
| Model | Kosten | Gebruik voor |
|
||||||
|
|-------|--------|--------------|
|
||||||
|
| gpt-4o-mini | Goedkoop | Meeste taken |
|
||||||
|
| gpt-4o | Duur | Complexe reasoning |
|
||||||
|
| claude-3-haiku | Goedkoop | Simpele taken |
|
||||||
|
| claude-3-sonnet | Medium | Balans |
|
||||||
|
|
||||||
|
**Bespaartips:**
|
||||||
|
1. Gebruik gpt-4o-mini als default
|
||||||
|
2. Korte system prompts
|
||||||
|
3. Beperk conversation history
|
||||||
|
4. Caching waar mogelijk
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Tools
|
## Tools
|
||||||
|
- Vercel AI SDK (`ai` package)
|
||||||
|
- Next.js API Routes
|
||||||
|
- OpenAI API / Anthropic API
|
||||||
- Cursor
|
- Cursor
|
||||||
- Vitest
|
- Supabase
|
||||||
- React Testing Library
|
|
||||||
- MSW
|
|
||||||
- Playwright
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Lesopdracht (2 uur)
|
## Lesopdracht (2 uur)
|
||||||
|
|
||||||
### Voeg Comprehensive Tests Toe met Cursor + AI
|
### Bouw een AI Chat Component
|
||||||
|
|
||||||
### Setup (30 min)
|
**Deel 1: Setup (20 min)**
|
||||||
- Install dependencies (Vitest, RTL)
|
1. `npm install ai @ai-sdk/openai`
|
||||||
- Configureer Vitest
|
2. Voeg `OPENAI_API_KEY` toe aan `.env.local`
|
||||||
- Maak test utils
|
3. Maak `app/api/chat/route.ts`
|
||||||
- Verifieer met smoke test
|
|
||||||
|
|
||||||
### Schrijf Tests met Cursor (1 uur)
|
**Deel 2: Basic Chat (40 min)**
|
||||||
|
1. Maak `components/Chat.tsx`
|
||||||
|
2. Implementeer `useChat` hook
|
||||||
|
3. Bouw chat UI met Tailwind
|
||||||
|
4. Test streaming werkt
|
||||||
|
|
||||||
| Type | Aantal | Tijd |
|
**Deel 3: System Prompt (30 min)**
|
||||||
|------|--------|------|
|
1. Schrijf system prompt voor je eindproject:
|
||||||
| Unit Tests | 3-4 utility functies | 20 min |
|
- Recipe Generator: cooking assistant
|
||||||
| Component Tests | 3-4 components | 30 min |
|
- Budget Buddy: financial advisor
|
||||||
| Integration Tests | 1-2 flows | 10 min |
|
- Travel Planner: travel expert
|
||||||
|
2. Test met relevante vragen
|
||||||
|
|
||||||
### Run & Fix (30 min)
|
**Deel 4: Supabase Integratie (30 min)**
|
||||||
- Run `npm test`
|
1. Maak `messages` tabel
|
||||||
- AI helpt failures fixen
|
2. Sla berichten op met `onFinish`
|
||||||
- Bereik >70% coverage
|
3. Laad history bij page load
|
||||||
|
|
||||||
### Track
|
### Deliverable
|
||||||
- Test schrijf snelheid met AI?
|
- Werkende AI chat met streaming
|
||||||
|
- Custom system prompt
|
||||||
|
- Messages opgeslagen in Supabase
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Huiswerk (2 uur)
|
## Huiswerk (2 uur)
|
||||||
|
|
||||||
### Implementeer AI Code Review Workflow
|
### Bouw AI Feature voor Eindproject
|
||||||
|
|
||||||
### Deel 1: Maak Agent (1 uur)
|
**Deel 1: Core AI Feature (1 uur)**
|
||||||
|
|
||||||
Custom GPT/Claude Project voor code review.
|
Implementeer de AI chat die past bij je eindproject:
|
||||||
|
|
||||||
**Instructions moeten checken op:**
|
| Project | AI Feature |
|
||||||
- TypeScript safety
|
|---------|-----------|
|
||||||
|
| Recipe Generator | "Wat kan ik maken met kip en rijst?" |
|
||||||
|
| Budget Buddy | "Analyseer mijn uitgaven deze maand" |
|
||||||
|
| Travel Planner | "Plan een weekend Barcelona" |
|
||||||
|
|
||||||
|
- Custom system prompt
|
||||||
|
- Context uit je database meegeven
|
||||||
|
|
||||||
|
**Deel 2: UX Polish (30 min)**
|
||||||
|
|
||||||
|
Voeg toe:
|
||||||
|
- Streaming indicator
|
||||||
|
- Suggested prompts / quick actions
|
||||||
|
- Copy response button
|
||||||
|
- Clear chat button
|
||||||
- Error handling
|
- Error handling
|
||||||
- Accessibility
|
|
||||||
- Performance
|
|
||||||
- Security
|
|
||||||
- Best practices
|
|
||||||
|
|
||||||
**Upload "goede" code als knowledge base**
|
**Deel 3: Documentatie (30 min)**
|
||||||
|
|
||||||
### Deel 2: Review 3 Components (1 uur)
|
Maak `docs/AI-FEATURE.md`:
|
||||||
- Review 3 components
|
- Welke AI feature heb je gebouwd?
|
||||||
- Documenteer ALLE issues
|
- Wat doet de system prompt?
|
||||||
- Categoriseer severity
|
- Hoe integreert het met Supabase?
|
||||||
- Fix in Cursor
|
- Welke model keuzes heb je gemaakt?
|
||||||
- Re-review
|
|
||||||
|
|
||||||
### Deel 3: Enhance Template
|
|
||||||
- Add testing setup aan Starter Template
|
|
||||||
- Add Code Review agent
|
|
||||||
|
|
||||||
### Deliverable
|
### Deliverable
|
||||||
- Agent (link)
|
- AI feature in eindproject
|
||||||
- Review rapport (issues/fixes/before-after)
|
- Deployed preview
|
||||||
- Reflectie over AI-assisted QA
|
- AI-FEATURE.md documentatie
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Leerdoelen
|
## Leerdoelen
|
||||||
Na deze les kan de student:
|
Na deze les kan de student:
|
||||||
- Verschillende test types begrijpen en implementeren
|
- Vercel AI SDK installeren en configureren
|
||||||
- AI gebruiken om tests te genereren
|
- `useChat` en `useCompletion` hooks gebruiken
|
||||||
- Testing tools configureren (Vitest, RTL, MSW, Playwright)
|
- Streaming responses implementeren
|
||||||
- Code review agents bouwen
|
- API routes opzetten voor AI providers
|
||||||
- AI gebruiken voor debugging
|
- Custom system prompts schrijven
|
||||||
- Code kwaliteit meten met coverage en metrics
|
- Chat history opslaan in Supabase
|
||||||
|
- Error handling en loading states implementeren
|
||||||
|
- Kostenbewust omgaan met AI APIs
|
||||||
|
|||||||
@@ -1,12 +1,4 @@
|
|||||||
# Les 16: Vercel AI SDK - AI Features in je App
|
# Les 16: Deployment & Production
|
||||||
|
|
||||||
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
|
||||||
>
|
|
||||||
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
|
|
||||||
> - Les16-Slide-Overzicht.md
|
|
||||||
> - Les16-Lesplan.md
|
|
||||||
> - Les16-Bijlage-A-Lesopdracht.md
|
|
||||||
> - Les16-Bijlage-B-Huiswerkopdracht.md
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -14,180 +6,222 @@
|
|||||||
**Hoofdstuk 3: Advanced** (Les 10-18)
|
**Hoofdstuk 3: Advanced** (Les 10-18)
|
||||||
|
|
||||||
## Beschrijving
|
## Beschrijving
|
||||||
Bouw AI-powered features in je apps met de Vercel AI SDK. Leer hoe je chat interfaces, streaming responses en AI-gegenereerde content implementeert.
|
Deploy je eindproject naar productie. Leer environment variables, Vercel deployment, en basis performance optimalisatie.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Te Behandelen
|
## Te Behandelen
|
||||||
|
|
||||||
### Waarom Vercel AI SDK?
|
### Vercel Deployment Flow
|
||||||
- Abstractie over raw API calls
|
|
||||||
- Built-in streaming support
|
|
||||||
- React hooks voor eenvoudige integratie
|
|
||||||
- Provider-agnostic (OpenAI, Anthropic, etc.)
|
|
||||||
- Edge-ready
|
|
||||||
|
|
||||||
### Installatie & Setup
|
**Hoe Vercel werkt:**
|
||||||
```bash
|
1. Connect GitHub repository
|
||||||
npm install ai openai
|
2. Push naar main → automatische deploy
|
||||||
# of voor Anthropic:
|
3. Push naar andere branch → preview URL
|
||||||
npm install ai @anthropic-ai/sdk
|
4. Alles automatisch (build, SSL, CDN)
|
||||||
```
|
|
||||||
|
|
||||||
### Core Hooks
|
**Waarom Vercel voor Next.js:**
|
||||||
|
- Gemaakt door dezelfde makers
|
||||||
|
- Zero-config deployment
|
||||||
|
- Gratis tier ruim voldoende
|
||||||
|
- Automatische HTTPS
|
||||||
|
- Global CDN
|
||||||
|
|
||||||
#### `useChat` - Voor Conversaties
|
---
|
||||||
```tsx
|
|
||||||
import { useChat } from 'ai/react';
|
|
||||||
|
|
||||||
export function ChatComponent() {
|
### Environment Variables in Vercel
|
||||||
const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat();
|
|
||||||
|
|
||||||
return (
|
**Lokaal (.env.local) vs Productie (Vercel Dashboard):**
|
||||||
<div>
|
|
||||||
{messages.map(m => (
|
|
||||||
<div key={m.id}>{m.role}: {m.content}</div>
|
|
||||||
))}
|
|
||||||
<form onSubmit={handleSubmit}>
|
|
||||||
<input value={input} onChange={handleInputChange} />
|
|
||||||
<button type="submit" disabled={isLoading}>Send</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
#### `useCompletion` - Voor Single Completions
|
| Waar | Bestand/Locatie | Voorbeeld |
|
||||||
- Tekst generatie
|
|------|-----------------|-----------|
|
||||||
- Samenvattingen
|
| Lokaal | `.env.local` | Development |
|
||||||
- One-shot responses
|
| Vercel | Dashboard → Settings → Env Vars | Production |
|
||||||
|
|
||||||
### API Routes Setup
|
**Stap voor stap:**
|
||||||
|
1. Ga naar je Vercel project
|
||||||
|
2. Settings → Environment Variables
|
||||||
|
3. Voeg toe:
|
||||||
|
- `NEXT_PUBLIC_SUPABASE_URL`
|
||||||
|
- `NEXT_PUBLIC_SUPABASE_ANON_KEY`
|
||||||
|
- `OPENAI_API_KEY`
|
||||||
|
4. Selecteer environment (Production, Preview, Development)
|
||||||
|
5. Save & Redeploy
|
||||||
|
|
||||||
```ts
|
**Let op:**
|
||||||
// app/api/chat/route.ts
|
- `NEXT_PUBLIC_` prefix = zichtbaar in browser
|
||||||
import { openai } from '@ai-sdk/openai';
|
- Zonder prefix = alleen server-side (API routes)
|
||||||
import { streamText } from 'ai';
|
|
||||||
|
|
||||||
export async function POST(req: Request) {
|
---
|
||||||
const { messages } = await req.json();
|
|
||||||
|
|
||||||
const result = streamText({
|
### Supabase Productie Setup
|
||||||
model: openai('gpt-4o'),
|
|
||||||
messages,
|
|
||||||
});
|
|
||||||
|
|
||||||
return result.toDataStreamResponse();
|
**Redirect URLs configureren:**
|
||||||
}
|
1. Ga naar Supabase → Authentication → URL Configuration
|
||||||
```
|
2. Voeg toe bij "Redirect URLs":
|
||||||
|
- `https://jouw-app.vercel.app/**`
|
||||||
|
- `https://jouw-app.vercel.app`
|
||||||
|
|
||||||
### Streaming Responses
|
**Waarom:**
|
||||||
- Waarom streaming: betere UX, snellere perceived performance
|
- Auth redirects werken alleen naar toegestane URLs
|
||||||
- Hoe het werkt: Server-Sent Events (SSE)
|
- Wildcards (`**`) voor sub-routes
|
||||||
- Token-by-token rendering
|
|
||||||
- Loading states tijdens streaming
|
|
||||||
|
|
||||||
### Integratie met Supabase
|
---
|
||||||
- Chat history opslaan in database
|
|
||||||
- User-specific conversations
|
|
||||||
- Message threading
|
|
||||||
|
|
||||||
### Error Handling
|
### Deployment Checklist
|
||||||
- Network errors
|
|
||||||
- Rate limiting
|
|
||||||
- Token limits
|
|
||||||
- Graceful degradation
|
|
||||||
|
|
||||||
### Cost Management
|
**Voor deployment:**
|
||||||
- Token counting
|
- [ ] `npm run build` werkt lokaal
|
||||||
- Model selection (gpt-4o-mini vs gpt-4o)
|
- [ ] Geen TypeScript errors
|
||||||
- Caching strategies
|
- [ ] Environment variables gedocumenteerd in `.env.example`
|
||||||
- Usage monitoring
|
- [ ] `.gitignore` bevat `.env*.local`
|
||||||
|
- [ ] README up-to-date
|
||||||
|
|
||||||
|
**Na deployment:**
|
||||||
|
- [ ] App laadt correct
|
||||||
|
- [ ] Auth werkt (login/logout)
|
||||||
|
- [ ] Data wordt opgehaald uit Supabase
|
||||||
|
- [ ] AI features werken (indien van toepassing)
|
||||||
|
- [ ] Geen console errors
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Performance Basics
|
||||||
|
|
||||||
|
**Lighthouse Audit:**
|
||||||
|
1. Open Chrome DevTools
|
||||||
|
2. Tab "Lighthouse"
|
||||||
|
3. Klik "Analyze page load"
|
||||||
|
4. Aim for score >80 in elke categorie
|
||||||
|
|
||||||
|
**Quick wins:**
|
||||||
|
- Gebruik Next.js `Image` component (niet `<img>`)
|
||||||
|
- Lazy load components die niet direct nodig zijn
|
||||||
|
- Verwijder ongebruikte dependencies
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Security Checklist
|
||||||
|
|
||||||
|
**Belangrijk voor productie:**
|
||||||
|
- [ ] API keys nooit in client-side code
|
||||||
|
- [ ] Supabase RLS enabled (Row Level Security)
|
||||||
|
- [ ] Error messages geven geen gevoelige info
|
||||||
|
- [ ] HTTPS (automatisch via Vercel)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Monitoring Basics
|
||||||
|
|
||||||
|
**Vercel Dashboard toont:**
|
||||||
|
- Deployments history
|
||||||
|
- Function logs
|
||||||
|
- Analytics (optioneel)
|
||||||
|
|
||||||
|
**Supabase Dashboard toont:**
|
||||||
|
- Database usage
|
||||||
|
- Auth logs
|
||||||
|
- API requests
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Tools
|
## Tools
|
||||||
- Vercel AI SDK (`ai` package)
|
- Vercel
|
||||||
- Next.js API Routes
|
- GitHub
|
||||||
- OpenAI API / Anthropic API
|
- Supabase
|
||||||
- Cursor
|
- Chrome DevTools (Lighthouse)
|
||||||
- Supabase (voor chat history)
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Lesopdracht (2 uur)
|
## Lesopdracht (2 uur)
|
||||||
|
|
||||||
### Bouw een AI Chat Component
|
### Deploy Je Eindproject
|
||||||
|
|
||||||
**Stap 1: Setup (20 min)**
|
**Deel 1: Pre-Deployment Check (30 min)**
|
||||||
- Installeer `ai` en `openai` packages
|
|
||||||
- Configureer environment variables
|
|
||||||
- Maak API route `/api/chat`
|
|
||||||
|
|
||||||
**Stap 2: Basic Chat (40 min)**
|
Run door de checklist:
|
||||||
- Implementeer `useChat` hook
|
1. `npm run build` - fix eventuele errors
|
||||||
- Bouw chat UI met Tailwind
|
2. Check TypeScript errors
|
||||||
- Test streaming responses
|
3. Maak/update `.env.example`
|
||||||
|
4. Update README met project info
|
||||||
|
|
||||||
**Stap 3: Supabase Integratie (40 min)**
|
**Deel 2: Vercel Deployment (30 min)**
|
||||||
- Maak `conversations` en `messages` tabellen
|
|
||||||
- Sla berichten op na elke response
|
|
||||||
- Laad conversation history bij page load
|
|
||||||
|
|
||||||
**Stap 4: Polish (20 min)**
|
1. Ga naar [vercel.com](https://vercel.com)
|
||||||
- Loading indicators
|
2. "Add New Project"
|
||||||
- Error states
|
3. Import je GitHub repository
|
||||||
- Scroll to bottom
|
4. Voeg environment variables toe
|
||||||
- Clear conversation button
|
5. Deploy!
|
||||||
|
|
||||||
|
**Deel 3: Supabase Config (20 min)**
|
||||||
|
|
||||||
|
1. Voeg Vercel URL toe aan Supabase redirect URLs
|
||||||
|
2. Test auth in productie
|
||||||
|
3. Verifieer data access
|
||||||
|
|
||||||
|
**Deel 4: Testing & Lighthouse (40 min)**
|
||||||
|
|
||||||
|
1. Test alle features in productie:
|
||||||
|
- Login/logout
|
||||||
|
- CRUD operaties
|
||||||
|
- AI chat (indien aanwezig)
|
||||||
|
2. Run Lighthouse audit
|
||||||
|
3. Fix issues tot score >80
|
||||||
|
4. Screenshot resultaat
|
||||||
|
|
||||||
### Deliverable
|
### Deliverable
|
||||||
- Werkende AI chat met streaming
|
- Werkende productie URL
|
||||||
- Conversation history in Supabase
|
- Lighthouse screenshot (score >80)
|
||||||
- Clean UI met goede UX
|
- Test rapport: wat werkt, wat niet
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Huiswerk (2 uur)
|
## Huiswerk (2 uur)
|
||||||
|
|
||||||
### Bouw AI Feature voor Eindproject
|
### Polish & Documentatie
|
||||||
|
|
||||||
Kies 1 passend bij je eindproject:
|
**Deel 1: Bug Fixes (1 uur)**
|
||||||
|
|
||||||
| Eindproject | AI Feature |
|
1. Test je app grondig in productie
|
||||||
|-------------|------------|
|
2. Fix gevonden bugs
|
||||||
| AI Recipe Generator | Chat: "Wat kan ik maken met kip en rijst?" |
|
3. Test edge cases:
|
||||||
| Smart Budget Buddy | Chat: "Analyseer mijn uitgaven deze maand" |
|
- Lege states
|
||||||
| Travel Planner AI | Chat: "Plan een weekend Barcelona" |
|
- Error states
|
||||||
|
- Loading states
|
||||||
|
4. Redeploy
|
||||||
|
|
||||||
### Deel 1: Implementatie (1 uur)
|
**Deel 2: Performance Optimization (30 min)**
|
||||||
- Pas `useChat` aan voor jouw use case
|
|
||||||
- Custom system prompt voor context
|
|
||||||
- Relevante data uit Supabase meegeven als context
|
|
||||||
|
|
||||||
### Deel 2: UX Polish (30 min)
|
1. Run Lighthouse opnieuw
|
||||||
- Streaming met typing indicator
|
2. Fix top 3 performance issues
|
||||||
- Suggested prompts / quick actions
|
3. Document wat je hebt verbeterd
|
||||||
- Copy response button
|
|
||||||
- Regenerate button
|
|
||||||
|
|
||||||
### Deel 3: Documentatie (30 min)
|
**Deel 3: Documentatie Afronden (30 min)**
|
||||||
- Documenteer je AI feature in `docs/AI-FEATURE.md`
|
|
||||||
- Beschrijf system prompt keuzes
|
Update je `README.md`:
|
||||||
- Leg integratie met Supabase uit
|
- Werkende productie URL
|
||||||
|
- Features lijst
|
||||||
|
- Tech stack
|
||||||
|
- Setup instructies
|
||||||
|
- Screenshots
|
||||||
|
|
||||||
|
Update `docs/`:
|
||||||
|
- PROMPT-LOG.md (minimaal 10 entries)
|
||||||
|
- AI-DECISIONS.md (minimaal 5 entries)
|
||||||
|
|
||||||
### Deliverable
|
### Deliverable
|
||||||
- AI feature geïntegreerd in eindproject
|
- Geoptimaliseerde productie app
|
||||||
- Documentatie
|
- Complete documentatie
|
||||||
- Deployed preview
|
- Lighthouse score >85
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Leerdoelen
|
## Leerdoelen
|
||||||
Na deze les kan de student:
|
Na deze les kan de student:
|
||||||
- Vercel AI SDK installeren en configureren
|
- Een Next.js app deployen naar Vercel
|
||||||
- `useChat` en `useCompletion` hooks gebruiken
|
- Environment variables configureren in Vercel
|
||||||
- Streaming responses implementeren
|
- Supabase redirect URLs instellen voor productie
|
||||||
- API routes opzetten voor AI providers
|
- Een deployment checklist doorlopen
|
||||||
- Chat history opslaan in Supabase
|
- Lighthouse gebruiken voor performance audit
|
||||||
- Error handling en loading states implementeren
|
- Basis security checks uitvoeren
|
||||||
- Kosten bewust omgaan met AI APIs
|
- Productie monitoring begrijpen
|
||||||
|
|||||||
@@ -1,198 +1,187 @@
|
|||||||
# Les 17: Advanced Deployment & Production (Vercel)
|
# Les 17: Eindopdracht Kickoff
|
||||||
|
|
||||||
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
|
||||||
>
|
|
||||||
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
|
|
||||||
> - Les17-Slide-Overzicht.md
|
|
||||||
> - Les17-Lesplan.md
|
|
||||||
> - Les17-Bijlage-A-Lesopdracht.md
|
|
||||||
> - Les17-Bijlage-B-Huiswerkopdracht.md
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Hoofdstuk
|
## Hoofdstuk
|
||||||
**Hoofdstuk 3: Advanced** (Les 8-18)
|
**Hoofdstuk 3: Advanced** (Les 10-18)
|
||||||
|
|
||||||
## Beschrijving
|
## Beschrijving
|
||||||
Production-ready deployment.
|
Bespreking van de eindopdracht requirements, planning maken, en laatste vragen beantwoorden voordat studenten zelfstandig verder werken.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Te Behandelen
|
## Te Behandelen
|
||||||
|
|
||||||
### Vercel Deployment Deep Dive
|
### Eindopdracht Overview
|
||||||
|
|
||||||
**Hoe werkt Vercel:**
|
**Wat is de eindopdracht?**
|
||||||
- Edge network
|
- Bouw een AI-powered web applicatie
|
||||||
- Serverless
|
- Gebruik alle tools die je hebt geleerd
|
||||||
- Automatic builds
|
- Vrije keuze in implementatie
|
||||||
|
|
||||||
**Git Integratie:**
|
**Drie voorbeeldprojecten:**
|
||||||
- Push main → deploy
|
1. **AI Recipe Generator** - Recepten op basis van ingrediënten
|
||||||
- Branches → preview URLs
|
2. **Smart Budget Buddy** - Financieel overzicht met AI insights
|
||||||
- Preview deployments
|
3. **Travel Planner AI** - Reisplanning met AI suggesties
|
||||||
- Instant rollbacks
|
|
||||||
- Environments
|
|
||||||
|
|
||||||
### Environment Variables
|
**Of:** Eigen idee (met goedkeuring docent)
|
||||||
- Verschillende vars per environment
|
|
||||||
- Secrets handlen
|
|
||||||
- Accessing (process.env, NEXT_PUBLIC_)
|
|
||||||
- Best practices
|
|
||||||
|
|
||||||
### Custom Domains
|
---
|
||||||
- Domein toevoegen
|
|
||||||
- DNS config
|
|
||||||
- HTTPS automatic
|
|
||||||
- Multiple domains
|
|
||||||
|
|
||||||
### Performance Optimization
|
### Requirements Doorlopen
|
||||||
|
|
||||||
| Categorie | Technieken |
|
**Technische vereisten:**
|
||||||
|-----------|------------|
|
- Next.js 14 met App Router
|
||||||
| Images | Next.js Image, lazy loading, responsive, WebP/AVIF |
|
- TypeScript
|
||||||
| Fonts | next/font, font-display, reducing files |
|
- Tailwind CSS
|
||||||
| Code | Dynamic imports, lazy loading, route-based splitting |
|
- Supabase (database + auth)
|
||||||
| General | Bundle analyse, caching strategies, connection pooling |
|
- Vercel AI SDK (chat of completion feature)
|
||||||
|
- Deployed op Vercel
|
||||||
|
|
||||||
### Vercel Analytics
|
**Documentatie vereisten:**
|
||||||
|
- `docs/PROJECT-BRIEF.md` - Project beschrijving
|
||||||
|
- `docs/PROMPT-LOG.md` - Minimaal 10 prompts
|
||||||
|
- `docs/AI-DECISIONS.md` - Minimaal 5 beslissingen
|
||||||
|
- Complete README met setup instructies
|
||||||
|
|
||||||
**Web Vitals:**
|
---
|
||||||
- CLS (Cumulative Layout Shift)
|
|
||||||
- FID (First Input Delay)
|
|
||||||
- LCP (Largest Contentful Paint)
|
|
||||||
- FCP (First Contentful Paint)
|
|
||||||
- TTFB (Time to First Byte)
|
|
||||||
|
|
||||||
**Features:**
|
### Beoordelingscriteria
|
||||||
- Real user monitoring
|
|
||||||
- Speed insights
|
|
||||||
- Audience insights
|
|
||||||
|
|
||||||
### Error Tracking
|
| Criterium | Weging |
|
||||||
- Edge Function logs
|
|-----------|--------|
|
||||||
- Error boundaries
|
| Technische uitvoering | 40% |
|
||||||
- Logging services (Sentry, LogRocket)
|
| AI integratie | 25% |
|
||||||
|
| Documentatie (PROMPT-LOG, AI-DECISIONS) | 20% |
|
||||||
|
| Code kwaliteit & organisatie | 15% |
|
||||||
|
|
||||||
### CI/CD
|
**Minimale vereisten:**
|
||||||
- GitHub Actions
|
- App werkt in productie
|
||||||
- Automated testing
|
- Auth + CRUD werkt
|
||||||
- Type checking
|
- AI feature werkt
|
||||||
- Linting
|
- Documentatie compleet
|
||||||
- E2E on previews
|
|
||||||
|
|
||||||
### Supabase Production
|
---
|
||||||
- Connection pooling
|
|
||||||
- Backups
|
|
||||||
- Monitoring
|
|
||||||
- Rate limiting
|
|
||||||
|
|
||||||
### Security Checklist
|
### Timeline
|
||||||
- Env vars secure
|
|
||||||
- No secrets exposed
|
**Nu tot deadline:**
|
||||||
- HTTPS
|
- Les 17: Kickoff, planning maken
|
||||||
- CSP headers
|
- Les 18: Werksessie met docent support
|
||||||
- Rate limiting
|
- Daarna: Zelfstandig afronden
|
||||||
- Validation
|
|
||||||
- Dependency updates
|
**Tips:**
|
||||||
|
- Focus eerst op werkende MVP
|
||||||
|
- Dan pas polish
|
||||||
|
- Documenteer TIJDENS het bouwen
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Veel Voorkomende Vragen
|
||||||
|
|
||||||
|
**Q: Mag ik een ander project doen dan de voorbeelden?**
|
||||||
|
A: Ja, met goedkeuring. Bespreek je idee met de docent.
|
||||||
|
|
||||||
|
**Q: Moet ik alle AI tools gebruiken?**
|
||||||
|
A: Je moet minimaal Cursor en Vercel AI SDK gebruiken. De rest is optioneel.
|
||||||
|
|
||||||
|
**Q: Wat als ik vastloop?**
|
||||||
|
A: Documenteer het probleem in PROMPT-LOG, vraag hulp in Les 18.
|
||||||
|
|
||||||
|
**Q: Hoeveel prompts moet ik loggen?**
|
||||||
|
A: Minimaal 10, maar meer is beter. Focus op prompts waarvan je iets leerde.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Planning Maken
|
||||||
|
|
||||||
|
**Wat moet je nog doen?**
|
||||||
|
|
||||||
|
Maak checklist:
|
||||||
|
- [ ] Core features compleet
|
||||||
|
- [ ] AI feature werkt
|
||||||
|
- [ ] Auth werkt
|
||||||
|
- [ ] Design afgewerkt
|
||||||
|
- [ ] Edge cases gehandled
|
||||||
|
- [ ] Documentatie compleet
|
||||||
|
- [ ] Deployed en getest
|
||||||
|
|
||||||
|
**Prioriteer:**
|
||||||
|
1. Wat werkt nog niet?
|
||||||
|
2. Wat is kritiek vs nice-to-have?
|
||||||
|
3. Hoeveel tijd heb je?
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Tools
|
## Tools
|
||||||
- Vercel
|
|
||||||
- GitHub Actions
|
|
||||||
- Sentry/LogRocket
|
|
||||||
- Lighthouse
|
|
||||||
- Cursor
|
- Cursor
|
||||||
|
- Alle geleerde tools
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Lesopdracht (2 uur)
|
## Lesopdracht (2 uur)
|
||||||
|
|
||||||
### Production-Ready Deployment van Beste Project
|
### Plan Je Afronding
|
||||||
|
|
||||||
**(Todo app aanbevolen)**
|
**Deel 1: Status Check (30 min)**
|
||||||
|
|
||||||
### Phase 1: Pre-Deployment Checklist (30 min)
|
Beantwoord voor jezelf:
|
||||||
|
1. Welke features werken al?
|
||||||
|
2. Welke features missen nog?
|
||||||
|
3. Wat is je grootste blocker?
|
||||||
|
4. Hoe staat je documentatie ervoor?
|
||||||
|
|
||||||
Verify:
|
Maak een eerlijke inschatting.
|
||||||
- Env vars
|
|
||||||
- Error boundaries
|
|
||||||
- Loading states
|
|
||||||
- 404 page
|
|
||||||
- SEO basics
|
|
||||||
- Favicon
|
|
||||||
- TypeScript errors
|
|
||||||
|
|
||||||
### Phase 2: Performance Optimization (45 min)
|
**Deel 2: Planning Maken (30 min)**
|
||||||
|
|
||||||
- Run Lighthouse (aim 90+)
|
Maak gedetailleerde planning:
|
||||||
- Fix met Cursor:
|
- Wat doe je vandaag?
|
||||||
- Optimize images
|
- Wat doe je in Les 18?
|
||||||
- Reduce bundle
|
- Wat doe je thuis?
|
||||||
- Optimize fonts
|
- Wanneer ben je klaar?
|
||||||
- Improve Core Web Vitals
|
|
||||||
- Re-run
|
|
||||||
- Document
|
|
||||||
|
|
||||||
### Phase 3: Deploy & Monitor (45 min)
|
**Deel 3: Begin Met Hoogste Prioriteit (1 uur)**
|
||||||
|
|
||||||
- Deploy naar Vercel
|
Start met de belangrijkste ontbrekende onderdelen:
|
||||||
- Custom domain (optional)
|
- Werkt je AI feature? → Prioriteit 1
|
||||||
- Enable Analytics
|
- Werkt auth? → Prioriteit 2
|
||||||
- Setup error monitoring
|
- Is het deployed? → Prioriteit 3
|
||||||
- Maak monitoring dashboard
|
|
||||||
- Test grondig
|
Vraag hulp als je vastloopt!
|
||||||
|
|
||||||
### Deliverable
|
### Deliverable
|
||||||
- Production URL
|
- Statusoverzicht: wat werkt, wat niet
|
||||||
- Lighthouse screenshot
|
- Planning voor afronden
|
||||||
- Dashboard access
|
- Voortgang op hoogste prioriteit
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Huiswerk (2 uur)
|
## Huiswerk
|
||||||
|
|
||||||
### Maak Production Deployment Playbook
|
### Werk aan je Eindopdracht
|
||||||
|
|
||||||
### Deel 1: Comprehensive Checklist (1 uur)
|
**Dit is geen nieuw huiswerk - gebruik deze tijd om je eindopdracht af te ronden.**
|
||||||
|
|
||||||
Schrijf checklists voor:
|
Focus op:
|
||||||
- Pre-Deployment
|
1. Features compleet maken
|
||||||
- Environment Setup
|
2. Bugs fixen
|
||||||
- Performance Requirements
|
3. Documentatie bijwerken
|
||||||
- Monitoring Setup
|
4. Testen in productie
|
||||||
- Post-Deployment
|
|
||||||
- Rollback Plan
|
|
||||||
|
|
||||||
### Deel 2: GitHub Actions (optional, 30 min)
|
**Bereid vragen voor:**
|
||||||
- Setup automated checks op PRs
|
Schrijf op waar je hulp bij nodig hebt voor Les 18 (werksessie).
|
||||||
|
|
||||||
### Deel 3: Monitoring Dashboard (30 min)
|
|
||||||
|
|
||||||
Bouw admin dashboard met:
|
|
||||||
- Deployment status
|
|
||||||
- Errors
|
|
||||||
- Performance metrics
|
|
||||||
- Database usage
|
|
||||||
- API usage
|
|
||||||
- Custom metrics
|
|
||||||
- Auto-refresh 5min
|
|
||||||
|
|
||||||
### Deliverable
|
### Deliverable
|
||||||
- Playbook
|
- Voortgang op eindopdracht
|
||||||
- GitHub Actions
|
- Lijst met vragen voor Les 18
|
||||||
- Dashboard
|
|
||||||
- Reflectie (200 woorden)
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Leerdoelen
|
## Leerdoelen
|
||||||
Na deze les kan de student:
|
Na deze les kan de student:
|
||||||
- Vercel deployment configureren met Git integration
|
- De eindopdracht requirements begrijpen
|
||||||
- Environment variables veilig beheren
|
- Een realistische planning maken
|
||||||
- Custom domains configureren
|
- Prioriteiten stellen voor afronden
|
||||||
- Performance optimaliseren voor Web Vitals
|
- Eigen voortgang eerlijk inschatten
|
||||||
- Analytics en monitoring opzetten
|
- Hulp vragen waar nodig
|
||||||
- CI/CD implementeren met GitHub Actions
|
|
||||||
- Security best practices toepassen voor productie
|
|
||||||
|
|||||||
@@ -1,205 +1,178 @@
|
|||||||
# Les 18: Eindopdracht Intro, Planning & Advanced Topics
|
# Les 18: Eindproject Werksessie
|
||||||
|
|
||||||
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
|
||||||
>
|
|
||||||
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
|
|
||||||
> - Les18-Slide-Overzicht.md
|
|
||||||
> - Les18-Lesplan.md
|
|
||||||
> - Les18-Bijlage-A-Lesopdracht.md
|
|
||||||
> - Les18-Bijlage-B-Huiswerkopdracht.md
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Hoofdstuk
|
## Hoofdstuk
|
||||||
**Hoofdstuk 3: Advanced** (Les 8-18)
|
**Hoofdstuk 3: Advanced** (Les 10-18)
|
||||||
|
|
||||||
## Beschrijving
|
## Beschrijving
|
||||||
Voorbereiden op eindproject - culminatie van alles geleerd.
|
Werksessie voor het afronden van je eindproject. Geen nieuwe theorie - focus op bouwen, vragen stellen, en hulp krijgen.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Te Behandelen
|
## Opzet van de Les
|
||||||
|
|
||||||
### Eindopdracht Walkthrough
|
### Korte Standup (15 min)
|
||||||
- 10 project opties
|
|
||||||
- Complexiteit niveaus
|
|
||||||
- Vereiste features
|
|
||||||
|
|
||||||
### Requirements Deep Dive
|
**Elke student deelt (max 1 minuut):**
|
||||||
- Verplichte onderdelen
|
1. Waar sta ik?
|
||||||
- Bonus punten
|
2. Wat is mijn grootste blocker?
|
||||||
- Grading rubric
|
3. Wat wil ik vandaag afronden?
|
||||||
|
|
||||||
### Timeline & Realistic Planning
|
### Werktijd (1u 45min)
|
||||||
- 2 weken
|
|
||||||
- Dagelijkse milestones
|
|
||||||
|
|
||||||
### Hoe Juiste Project Kiezen
|
**Studenten werken zelfstandig:**
|
||||||
|
- Docent loopt rond
|
||||||
|
- Vraag hulp wanneer nodig
|
||||||
|
- Peer support aangemoedigd
|
||||||
|
|
||||||
Overweeg:
|
**Focus gebieden:**
|
||||||
- Interesse
|
- Features afronden
|
||||||
- Skills
|
- Bugs fixen
|
||||||
- Ambitie
|
|
||||||
- Uniciteit
|
|
||||||
|
|
||||||
### Project Planning met Cursor
|
|
||||||
AI als planning partner:
|
|
||||||
- Break down user stories
|
|
||||||
- Schat complexiteit
|
|
||||||
- Prioriteer MVP
|
|
||||||
- Maak timeline
|
|
||||||
- Identificeer risico's
|
|
||||||
|
|
||||||
### Database Schema Design Workshop
|
|
||||||
|
|
||||||
**Interactieve sessie:**
|
|
||||||
- Studenten stellen voor
|
|
||||||
- Klas bekritiseert
|
|
||||||
- AI suggereert
|
|
||||||
- Leer van elkaar
|
|
||||||
|
|
||||||
**Veel Voorkomende Patterns:**
|
|
||||||
- User management
|
|
||||||
- Content ownership
|
|
||||||
- Many-to-many
|
|
||||||
- Soft deletes
|
|
||||||
- Timestamps
|
|
||||||
|
|
||||||
**Gebruik Supabase skill voor schema generatie**
|
|
||||||
|
|
||||||
**RLS Policy Patterns**
|
|
||||||
|
|
||||||
### Geavanceerde Architecture Patterns
|
|
||||||
- Feature-based folders
|
|
||||||
- API route organisatie
|
|
||||||
- State management strategieën
|
|
||||||
- Component patterns
|
|
||||||
|
|
||||||
### Code Organisatie
|
|
||||||
- Project structuur die schaalt
|
|
||||||
- Documentatie die belangrijk is
|
|
||||||
- Git workflow
|
|
||||||
|
|
||||||
### Accessibility Deep Dive
|
|
||||||
|
|
||||||
**WCAG Compliance:**
|
|
||||||
- A (minimum)
|
|
||||||
- AA (doel) ✓
|
|
||||||
- AAA (excellent)
|
|
||||||
|
|
||||||
**Focus areas:**
|
|
||||||
- Keyboard navigatie
|
|
||||||
- Screen readers
|
|
||||||
- Color contrast
|
|
||||||
- Forms accessibility
|
|
||||||
|
|
||||||
### Final Polish Workshop
|
|
||||||
- Code quality review met Cursor
|
|
||||||
- Bug hunting
|
|
||||||
- UI/UX polish
|
|
||||||
- Performance check
|
|
||||||
- Documentatie completeren
|
- Documentatie completeren
|
||||||
- Presentatie skills
|
- Deployment issues oplossen
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Veelvoorkomende Problemen
|
||||||
|
|
||||||
|
### AI Chat Werkt Niet
|
||||||
|
|
||||||
|
**Check:**
|
||||||
|
1. API key correct in `.env.local`?
|
||||||
|
2. API key ook in Vercel env vars?
|
||||||
|
3. Correct model gekozen?
|
||||||
|
4. API route syntax correct?
|
||||||
|
|
||||||
|
### Auth Werkt Niet in Productie
|
||||||
|
|
||||||
|
**Check:**
|
||||||
|
1. Redirect URLs in Supabase toegevoegd?
|
||||||
|
2. Beide URLs: met en zonder trailing slash?
|
||||||
|
3. Wildcard (`**`) voor sub-routes?
|
||||||
|
|
||||||
|
### Deployment Faalt
|
||||||
|
|
||||||
|
**Check:**
|
||||||
|
1. `npm run build` lokaal succesvol?
|
||||||
|
2. Alle TypeScript errors gefixed?
|
||||||
|
3. Alle env vars in Vercel?
|
||||||
|
|
||||||
|
### Supabase Data Toont Niet
|
||||||
|
|
||||||
|
**Check:**
|
||||||
|
1. RLS policies correct?
|
||||||
|
2. Correct env vars?
|
||||||
|
3. Supabase client correct geïnitialiseerd?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Documentatie Checklist
|
||||||
|
|
||||||
|
**PROMPT-LOG.md (minimaal 10 entries):**
|
||||||
|
- [ ] Prompts die goed werkten
|
||||||
|
- [ ] Prompts die NIET werkten (en wat je leerde)
|
||||||
|
- [ ] Verschillende tools gebruikt
|
||||||
|
|
||||||
|
**AI-DECISIONS.md (minimaal 5 entries):**
|
||||||
|
- [ ] Database schema beslissing
|
||||||
|
- [ ] UI/UX keuzes
|
||||||
|
- [ ] Technische trade-offs
|
||||||
|
- [ ] Problemen en oplossingen
|
||||||
|
|
||||||
|
**README.md:**
|
||||||
|
- [ ] Project beschrijving
|
||||||
|
- [ ] Features lijst
|
||||||
|
- [ ] Tech stack
|
||||||
|
- [ ] Setup instructies
|
||||||
|
- [ ] Productie URL
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Peer Review (optioneel)
|
||||||
|
|
||||||
|
**Als je klaar bent, help een klasgenoot:**
|
||||||
|
1. Test hun app
|
||||||
|
2. Geef feedback
|
||||||
|
3. Help met bugs
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Afsluiting (laatste 10 min)
|
||||||
|
|
||||||
|
**Check-out:**
|
||||||
|
- Wie is klaar?
|
||||||
|
- Wie heeft nog vragen?
|
||||||
|
- Deadline reminder
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Tools
|
## Tools
|
||||||
- Cursor
|
- Cursor
|
||||||
- Supabase
|
- Alle geleerde tools
|
||||||
- Skills.sh
|
- Elkaar!
|
||||||
- Planning tools
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Lesopdracht (2 uur)
|
## Lesopdracht (2 uur)
|
||||||
|
|
||||||
### Plan Je Eindopdracht
|
### Werk aan je Eindproject
|
||||||
|
|
||||||
### Phase 1: Project Selectie (30 min)
|
**Dit is WERKTIJD.**
|
||||||
- Review alle 10 opties
|
|
||||||
- Kies ÉÉN
|
|
||||||
- Documenteer redenering
|
|
||||||
|
|
||||||
### Phase 2: Gedetailleerde Planning met AI (1 uur)
|
Er is geen specifieke opdracht behalve: werk aan je eindproject.
|
||||||
|
|
||||||
**Gebruik Cursor + Claude Projects/Custom GPT**
|
**Prioriteiten:**
|
||||||
|
1. ❌ Wat werkt nog niet? → Fix het
|
||||||
|
2. ✅ Wat werkt al? → Maak het af
|
||||||
|
3. 📝 Documentatie → Vul aan
|
||||||
|
|
||||||
| Stap | Output |
|
**Vraag hulp:**
|
||||||
|------|--------|
|
- Als je langer dan 15 minuten vastloopt
|
||||||
| Feature Breakdown | User stories lijst |
|
- Als je niet weet waar te beginnen
|
||||||
| Database Schema Design | Schema met AI + Supabase skill |
|
- Als je feedback wilt op je aanpak
|
||||||
| Architecture Planning | Folder structuur, patterns |
|
|
||||||
| Timeline | Dagelijkse milestones |
|
|
||||||
|
|
||||||
### Phase 3: Project Setup (30 min)
|
**Aan het eind van de les:**
|
||||||
|
- App werkt in productie
|
||||||
- GitHub repo aanmaken
|
- Of: je weet precies wat nog moet gebeuren
|
||||||
- Initialiseer Next.js
|
|
||||||
- Install dependencies
|
|
||||||
- Setup .cursorrules
|
|
||||||
- README met plan
|
|
||||||
- Supabase project (tables + RLS)
|
|
||||||
- Install Skills
|
|
||||||
- Deploy initiële versie
|
|
||||||
- Commit
|
|
||||||
|
|
||||||
### Deliverable
|
### Deliverable
|
||||||
- Project Proposal Document
|
- Voortgang op eindproject
|
||||||
- Initiële repo setup compleet
|
- Duidelijk beeld van wat nog moet
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Huiswerk (2 uur)
|
## Huiswerk
|
||||||
|
|
||||||
### Start Bouwen Core Features
|
### Rond Je Eindproject Af
|
||||||
|
|
||||||
### Week 1 Doelen
|
**Dit is de laatste les. Alles wat nog moet, doe je zelfstandig.**
|
||||||
- Auth compleet
|
|
||||||
- Database schema
|
|
||||||
- Core feature #1
|
|
||||||
- Basis layout + navigatie
|
|
||||||
|
|
||||||
### Deze Week's Taken
|
**Checklist voor inleveren:**
|
||||||
1. Supabase Auth setup
|
- [ ] App werkt op productie URL
|
||||||
2. Database implementatie
|
- [ ] Login/logout werkt
|
||||||
3. Basis layout
|
- [ ] CRUD operaties werken
|
||||||
4. Eerste core feature
|
- [ ] AI feature werkt
|
||||||
|
- [ ] PROMPT-LOG.md heeft 10+ entries
|
||||||
|
- [ ] AI-DECISIONS.md heeft 5+ entries
|
||||||
|
- [ ] README is compleet
|
||||||
|
- [ ] Code is opgeruimd
|
||||||
|
|
||||||
### Requirements
|
**Tips:**
|
||||||
- Gebruik Cursor + Composer + Skills extensief
|
- Test alles als "nieuwe gebruiker"
|
||||||
- Commit frequent
|
- Vraag iemand anders om te testen
|
||||||
- Test elke feature
|
- Check of alles in productie werkt (niet alleen lokaal)
|
||||||
- Documenteer blockers
|
|
||||||
|
|
||||||
### Deliverable
|
### Deliverable
|
||||||
- Progress update (250 woorden)
|
- Complete eindopdracht
|
||||||
- GitHub repo
|
- Ingeleverd voor deadline
|
||||||
- Deployed preview URL
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 10 Eindopdracht Opties (Referentie)
|
|
||||||
|
|
||||||
1. Task Management App
|
|
||||||
2. Personal Finance Tracker
|
|
||||||
3. Recipe Collection App
|
|
||||||
4. Fitness Tracker
|
|
||||||
5. Event Planning Platform
|
|
||||||
6. Learning Management System
|
|
||||||
7. Portfolio Builder
|
|
||||||
8. Job Application Tracker
|
|
||||||
9. Travel Planner
|
|
||||||
10. Habit Tracker
|
|
||||||
|
|
||||||
*(Details per optie in aparte eindopdracht document)*
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Leerdoelen
|
## Leerdoelen
|
||||||
Na deze les kan de student:
|
Na deze les kan de student:
|
||||||
- Een geschikt eindproject kiezen
|
- Zelfstandig problemen oplossen
|
||||||
- Gedetailleerd plannen met AI assistance
|
- Hulp vragen wanneer nodig
|
||||||
- Database schema's ontwerpen met best practices
|
- Een project afronden en inleveren
|
||||||
- Geavanceerde architecture patterns toepassen
|
- Documentatie completeren
|
||||||
- Accessibility requirements implementeren (WCAG AA)
|
- Peer feedback geven en ontvangen
|
||||||
- Een project opzetten met alle geleerde tools en technieken
|
|
||||||
|
|||||||
596
readme.md
596
readme.md
@@ -14,20 +14,32 @@ Een 18-weekse cursus die studenten meeneemt van AI-beginner naar AI-powered deve
|
|||||||
| 02 | [AI Code Assistants en OpenCode Desktop App](Samenvattingen/Les02-Samenvatting.md) | 1 | 📋 Samenvatting |
|
| 02 | [AI Code Assistants en OpenCode Desktop App](Samenvattingen/Les02-Samenvatting.md) | 1 | 📋 Samenvatting |
|
||||||
| 03 | [AI Ethics, Privacy & Security + WebStorm](Samenvattingen/Les03-Samenvatting.md) | 1 | 📋 Samenvatting |
|
| 03 | [AI Ethics, Privacy & Security + WebStorm](Samenvattingen/Les03-Samenvatting.md) | 1 | 📋 Samenvatting |
|
||||||
| 04 | [Effectief Prompting, Iteratief Werken & Skills](Samenvattingen/Les04-Samenvatting.md) | 2 | 📋 Samenvatting |
|
| 04 | [Effectief Prompting, Iteratief Werken & Skills](Samenvattingen/Les04-Samenvatting.md) | 2 | 📋 Samenvatting |
|
||||||
| 05 | [AI voor Content en Asset Generation](Samenvattingen/Les05-Samenvatting.md) | 2 | 📋 Samenvatting |
|
| 05 | [AI Tool Selection & Workflows](Samenvattingen/Les05-Samenvatting.md) | 2 | 📋 Samenvatting |
|
||||||
| 06 | [MCP & Component Libraries](Samenvattingen/Les06-Samenvatting.md) | 2 | 📋 Samenvatting |
|
| 06 | [Hands-on: Van Idee naar Prototype](Samenvattingen/Les06-Samenvatting.md) | 2 | 📋 Samenvatting |
|
||||||
| 07 | [Backend Basics met Supabase](Samenvattingen/Les07-Samenvatting.md) | 2 | 📋 Samenvatting |
|
| 07 | [Next.js Project Setup](Samenvattingen/Les07-Samenvatting.md) | 2 | 📋 Samenvatting |
|
||||||
| 08 | [Claude Code - Agentic Coding Mode](Samenvattingen/Les08-Samenvatting.md) | 2 | 📋 Samenvatting |
|
| 08 | [Supabase Basics](Samenvattingen/Les08-Samenvatting.md) | 2 | 📋 Samenvatting |
|
||||||
| 09 | [AI Agents - Custom GPTs & Claude Projects](Samenvattingen/Les09-Samenvatting.md) | 2 | 📋 Samenvatting |
|
| 09 | [AI Agents - Custom GPTs & Claude Projects](Samenvattingen/Les09-Samenvatting.md) | 2 | 📋 Samenvatting |
|
||||||
| 10 | [Project Setup & Repository Structure](Samenvattingen/Les10-Samenvatting.md) | 3 | 📋 Samenvatting |
|
| 10 | [Introduction to Cursor](Samenvattingen/Les10-Samenvatting.md) | 3 | 📋 Samenvatting |
|
||||||
| 11 | [Introduction to Cursor](Samenvattingen/Les11-Samenvatting.md) | 3 | 📋 Samenvatting |
|
| 11 | [Project Setup & Repository Structure](Samenvattingen/Les11-Samenvatting.md) | 3 | 📋 Samenvatting |
|
||||||
| 12 | [Advanced Context Management](Samenvattingen/Les12-Samenvatting.md) | 3 | 📋 Samenvatting |
|
| 12 | [MCP & Context Management](Samenvattingen/Les12-Samenvatting.md) | 3 | 📋 Samenvatting |
|
||||||
| 13 | [Mastering Cursor met Claude Opus](Samenvattingen/Les13-Samenvatting.md) | 3 | 📋 Samenvatting |
|
| 13 | [Mastering Cursor](Samenvattingen/Les13-Samenvatting.md) | 3 | 📋 Samenvatting |
|
||||||
| 14 | [Debugging & Code Review met AI](Samenvattingen/Les14-Samenvatting.md) | 3 | 📋 Samenvatting |
|
| 14 | [Debugging & Code Review met AI](Samenvattingen/Les14-Samenvatting.md) | 3 | 📋 Samenvatting |
|
||||||
| 15 | [AI-Driven Testing & Quality Assurance](Samenvattingen/Les15-Samenvatting.md) | 3 | 📋 Samenvatting |
|
| 15 | [Vercel AI SDK - AI Features in je App](Samenvattingen/Les15-Samenvatting.md) | 3 | 📋 Samenvatting |
|
||||||
| 16 | [Building AI-Powered Features](Samenvattingen/Les16-Samenvatting.md) | 3 | 📋 Samenvatting |
|
| 16 | [Deployment & Production](Samenvattingen/Les16-Samenvatting.md) | 3 | 📋 Samenvatting |
|
||||||
| 17 | [Advanced Deployment & Production](Samenvattingen/Les17-Samenvatting.md) | 3 | 📋 Samenvatting |
|
| 17 | [Eindopdracht Kickoff](Samenvattingen/Les17-Samenvatting.md) | 3 | 📋 Samenvatting |
|
||||||
| 18 | [Eindopdracht Intro, Planning & Advanced Topics](Samenvattingen/Les18-Samenvatting.md) | 3 | 📋 Samenvatting |
|
| 18 | [Eindproject Werksessie](Samenvattingen/Les18-Samenvatting.md) | 3 | 📋 Samenvatting |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tool Progressie
|
||||||
|
|
||||||
|
| Deel | Tools | Kosten |
|
||||||
|
|------|-------|--------|
|
||||||
|
| Deel 1 | ChatGPT, v0.dev, OpenCode, WebStorm | Gratis (WebStorm via school) |
|
||||||
|
| Deel 2 | OpenCode, Claude Desktop, Skills.sh | Gratis |
|
||||||
|
| Deel 3 | Cursor | Free tier beschikbaar |
|
||||||
|
|
||||||
|
**Eindopdracht:** Cursor (free tier voldoende)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -43,17 +55,21 @@ Kennismaking met AI, LLMs en de basis van AI-assisted development.
|
|||||||
|
|
||||||
**Tools:** ChatGPT, v0.dev, Vercel, GitHub
|
**Tools:** ChatGPT, v0.dev, Vercel, GitHub
|
||||||
|
|
||||||
**Theorie/Uitleg:**
|
**Docent vertelt:**
|
||||||
- Het AI-landschap (ChatGPT, Claude, Grok, Gemini)
|
- Het AI-landschap anno nu (ChatGPT, Claude, Grok, Gemini)
|
||||||
- Large Language Models en next-token prediction
|
- Wat zijn Large Language Models? Next-token prediction uitgelegd
|
||||||
- ChatGPT interface, model kiezen, afbeeldingen analyseren
|
- Hallucinaties: waarom AI soms dingen verzint
|
||||||
- Prompt engineering basics (rol, context, taak, format)
|
- Prompt engineering basics: rol, context, taak, format
|
||||||
- Tech stack en kleuren specificeren in prompts
|
- De schets-naar-website workflow
|
||||||
- De schets-naar-website workflow met v0.dev
|
|
||||||
|
|
||||||
**Lesopdracht:** Doorloop de complete workflow: teken een hero section op papier, maak foto, upload naar ChatGPT met tech stack/kleuren/stijl, genereer prompt, plak in v0.dev, deploy naar Vercel.
|
**Studenten doen:**
|
||||||
|
- ChatGPT account aanmaken en verkennen
|
||||||
|
- Eerste prompts schrijven en itereren
|
||||||
|
- Complete workflow: schets op papier → foto → ChatGPT prompt → v0.dev → deploy naar Vercel
|
||||||
|
|
||||||
**Huiswerk:** Reflectie schrijven (500 woorden), 5 AI use cases bedenken, tweede component bouwen via de workflow.
|
**Lesopdracht:** Doorloop de complete workflow: teken een hero section op papier, maak foto, genereer prompt met ChatGPT, bouw in v0.dev, deploy naar Vercel.
|
||||||
|
|
||||||
|
**Huiswerk:** Reflectie schrijven (500 woorden), 5 AI use cases bedenken voor eigen projecten, tweede component bouwen via de workflow.
|
||||||
|
|
||||||
[→ Ga naar Les 1](Samenvattingen/Les01-Samenvatting.md)
|
[→ Ga naar Les 1](Samenvattingen/Les01-Samenvatting.md)
|
||||||
|
|
||||||
@@ -61,18 +77,24 @@ Kennismaking met AI, LLMs en de basis van AI-assisted development.
|
|||||||
|
|
||||||
### Les 2: AI Code Assistants en OpenCode Desktop App
|
### Les 2: AI Code Assistants en OpenCode Desktop App
|
||||||
|
|
||||||
**Tools:** OpenCode Desktop App, Ollama/Groq API, Vercel
|
**Tools:** OpenCode Desktop App, Ollama/Groq API
|
||||||
|
|
||||||
**Theorie/Uitleg:**
|
**Docent vertelt:**
|
||||||
- Verschil chat-interfaces vs geïntegreerde development tools
|
- Verschil chat-interfaces vs geïntegreerde development tools
|
||||||
- OpenCode als standalone desktop applicatie
|
- OpenCode als standalone desktop applicatie (gratis!)
|
||||||
- Installatie en configuratie met gratis modellen
|
- Hoe AI code assistants werken
|
||||||
- Interface verkenning: code editor, chat, terminal, file browser
|
|
||||||
- Best practices voor code generation prompts
|
- Best practices voor code generation prompts
|
||||||
|
- Wanneer AI wel/niet te vertrouwen
|
||||||
|
|
||||||
**Lesopdracht:** Installeer OpenCode, koppel gratis model (Ollama/Groq), bouw responsive navbar component met AI assistance.
|
**Studenten doen:**
|
||||||
|
- OpenCode installeren en configureren
|
||||||
|
- Gratis model koppelen (Ollama lokaal of Groq API)
|
||||||
|
- Interface verkennen: code editor, chat, terminal
|
||||||
|
- Eerste component bouwen met AI hulp
|
||||||
|
|
||||||
**Huiswerk:** Bouw landing page component library (hero, features, testimonial, CTA, footer), schrijf blog post over ervaring (300 woorden).
|
**Lesopdracht:** Installeer OpenCode, koppel gratis model, bouw responsive navbar component met AI assistance, experimenteer met verschillende prompts.
|
||||||
|
|
||||||
|
**Huiswerk:** Bouw landing page component library (hero, features, testimonial, CTA, footer), schrijf blog post over ervaring met OpenCode (300 woorden).
|
||||||
|
|
||||||
[→ Ga naar Les 2](Samenvattingen/Les02-Samenvatting.md)
|
[→ Ga naar Les 2](Samenvattingen/Les02-Samenvatting.md)
|
||||||
|
|
||||||
@@ -82,17 +104,22 @@ Kennismaking met AI, LLMs en de basis van AI-assisted development.
|
|||||||
|
|
||||||
**Tools:** WebStorm (school licentie), OpenCode plugin, Git
|
**Tools:** WebStorm (school licentie), OpenCode plugin, Git
|
||||||
|
|
||||||
**Theorie/Uitleg:**
|
**Docent vertelt:**
|
||||||
- Privacy risico's: wat NOOIT te delen (API keys, credentials, client data)
|
- Privacy risico's: wat NOOIT te delen met AI (API keys, credentials, client data)
|
||||||
- Data ownership bij AI services
|
- Data ownership bij AI services - waar gaat je code naartoe?
|
||||||
- Security vulnerabilities (SQL injection, XSS, prompt injection)
|
- Security vulnerabilities in AI-generated code (SQL injection, XSS)
|
||||||
- GDPR/AVG compliance basics
|
- GDPR/AVG compliance basics
|
||||||
- WebStorm installatie en OpenCode plugin configuratie
|
- WebStorm als professionele IDE
|
||||||
- Voordelen IDE vs standalone (project context, Git, debugging)
|
|
||||||
|
|
||||||
**Lesopdracht:** Security workshop: identificeer problemen in AI-generated code, maak persoonlijke "AI Safety Checklist". Setup WebStorm met OpenCode plugin.
|
**Studenten doen:**
|
||||||
|
- Security workshop: identificeer problemen in AI-generated code
|
||||||
|
- Maak persoonlijke "AI Safety Checklist"
|
||||||
|
- WebStorm installeren met school licentie
|
||||||
|
- OpenCode plugin configureren in WebStorm
|
||||||
|
|
||||||
**Huiswerk:** Bouw secure feature (contact form of auth flow), review met Safety Checklist, schrijf uitgebreide README met gevonden issues en fixes.
|
**Lesopdracht:** Security audit van AI-generated code (vind 5 problemen), setup WebStorm met OpenCode plugin, maak je eerste project in WebStorm.
|
||||||
|
|
||||||
|
**Huiswerk:** Bouw secure feature (contact form of auth flow), review met je Safety Checklist, schrijf uitgebreide README met gevonden issues en fixes.
|
||||||
|
|
||||||
[→ Ga naar Les 3](Samenvattingen/Les03-Samenvatting.md)
|
[→ Ga naar Les 3](Samenvattingen/Les03-Samenvatting.md)
|
||||||
|
|
||||||
@@ -102,132 +129,194 @@ Kennismaking met AI, LLMs en de basis van AI-assisted development.
|
|||||||
|
|
||||||
**6 lessen · 10 EC**
|
**6 lessen · 10 EC**
|
||||||
|
|
||||||
Verdieping in prompt engineering, Supabase basics, en introductie tot AI agents en MCP.
|
Verdieping in prompt engineering, hands-on bouwen, en introductie tot Supabase en AI agents.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 2.1 Prompt Engineering & Skills
|
## 2.1 Prompt Engineering & Consolidatie
|
||||||
|
|
||||||
### Les 4: Effectief Prompting, Iteratief Werken & Skills
|
### Les 4: Effectief Prompting, Iteratief Werken & Skills
|
||||||
|
|
||||||
**Tools:** OpenCode/WebStorm, Skills.sh
|
**Tools:** OpenCode/WebStorm, Skills.sh
|
||||||
|
|
||||||
**Theorie/Uitleg:**
|
**Docent vertelt:**
|
||||||
- Zero-shot vs few-shot prompting
|
- Zero-shot vs few-shot prompting (met voorbeelden)
|
||||||
- Chain-of-thought reasoning
|
- Chain-of-thought reasoning: laat AI stap voor stap denken
|
||||||
- Role prompting en constraint-based prompting
|
- Role prompting en constraint-based prompting
|
||||||
- Skills.sh introductie: herbruikbare best-practices packages
|
- Skills.sh: wat het is en waarom het werkt
|
||||||
- Skills installeren via CLI (`npx skills add <skill-name>`)
|
|
||||||
- Iteratief werken: start simpel → voeg complexiteit toe
|
- Iteratief werken: start simpel → voeg complexiteit toe
|
||||||
|
|
||||||
**Lesopdracht:** Installeer Skills, vergelijk output met/zonder skill, bouw data filtering systeem in 4 iteraties.
|
**Studenten doen:**
|
||||||
|
- Verschillende prompt technieken uitproberen
|
||||||
|
- Skills.sh installeren en eerste skill toevoegen
|
||||||
|
- Vergelijk output met/zonder skill
|
||||||
|
- Bouw feature in 4 iteraties (simpel → complex)
|
||||||
|
|
||||||
**Huiswerk:** Maak persoonlijke prompt library met 8 templates, installeer en test 3 Skills, documenteer concrete verschillen.
|
**Lesopdracht:** Installeer Skills.sh, vergelijk output met/zonder skill, bouw data filtering systeem in 4 iteraties (basis filter → multi-filter → sort → search).
|
||||||
|
|
||||||
|
**Huiswerk:** Maak persoonlijke prompt library met 8 templates voor verschillende taken, installeer en test 3 Skills, documenteer concrete verschillen.
|
||||||
|
|
||||||
[→ Ga naar Les 4](Samenvattingen/Les04-Samenvatting.md)
|
[→ Ga naar Les 4](Samenvattingen/Les04-Samenvatting.md)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Les 5: AI voor Content en Asset Generation
|
### Les 5: AI Tool Selection & Workflows
|
||||||
|
|
||||||
**Tools:** DALL-E 3, Leonardo.ai, Ideogram, Next.js Image
|
**Tools:** ChatGPT, Claude, v0.dev, OpenCode
|
||||||
|
|
||||||
**Theorie/Uitleg:**
|
**Docent vertelt:**
|
||||||
- Image generation tools vergelijking
|
- Overzicht van alle AI tools die we kennen
|
||||||
- Prompt engineering voor images (style, mood, composition)
|
- Sterke en zwakke punten per tool
|
||||||
- Asset generation workflow voor web
|
- Wanneer gebruik je welke tool?
|
||||||
- Image optimization (compression, WebP/AVIF, responsive)
|
- Tool selection framework: taak → tool
|
||||||
- Copyright en licenties bij AI-generated content
|
- Workflow patterns voor AI-assisted development
|
||||||
- Next.js Image component optimalisatie
|
|
||||||
|
|
||||||
**Lesopdracht:** Genereer complete visual identity voor fictieve SaaS: hero image, 6 feature icons, 2 illustraties, background pattern, favicon. Integreer in Next.js landing page.
|
**Studenten doen:**
|
||||||
|
- Dezelfde taak uitvoeren in 3 verschillende tools
|
||||||
|
- Output vergelijken en analyseren
|
||||||
|
- Tool selection framework invullen
|
||||||
|
- Eigen workflow documenteren
|
||||||
|
|
||||||
**Huiswerk:** Vervang alle placeholder images in bestaand project met AI-gegenereerde assets, schrijf case study (400 woorden) met before/after screenshots.
|
| 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 "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).
|
||||||
|
|
||||||
[→ Ga naar Les 5](Samenvattingen/Les05-Samenvatting.md)
|
[→ Ga naar Les 5](Samenvattingen/Les05-Samenvatting.md)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 2.2 MCP & Supabase
|
### Les 6: Hands-on: Van Idee naar Prototype
|
||||||
|
|
||||||
### Les 6: MCP & Component Libraries
|
**Tools:** OpenCode/WebStorm, ChatGPT (voor planning)
|
||||||
|
|
||||||
**Tools:** Claude Desktop, MCP servers, Shadcn/ui, Supabase
|
**Docent vertelt:**
|
||||||
|
- Hoe ga je van vaag idee naar concrete features?
|
||||||
|
- Feature breakdown methode
|
||||||
|
- Component thinking: UI opdelen in herbruikbare stukken
|
||||||
|
- Minimum Viable Product (MVP) denken
|
||||||
|
- Korte demo van het proces
|
||||||
|
|
||||||
**Theorie/Uitleg:**
|
**Studenten doen:**
|
||||||
- MCP (Model Context Protocol): AI verbinden met externe data
|
- Kiezen van een simpel project idee
|
||||||
- MCP servers: filesystem, databases, APIs
|
- Met AI features breakdown maken
|
||||||
- Claude Desktop configuratie voor MCP
|
- Component structuur bedenken
|
||||||
- Shadcn/ui systematisch bouwen
|
- Prototype bouwen met alles wat ze hebben geleerd
|
||||||
- Component composition patterns
|
- Focus op WORKFLOW, niet perfectie
|
||||||
- Data-driven components die MCP data consumeren
|
|
||||||
|
|
||||||
**Lesopdracht:** Configureer MCP servers (filesystem, Supabase), bouw Shadcn component library (DataTable, Card, Form, Button), integreer MCP data in dashboard.
|
**Voorbeeld projecten:**
|
||||||
|
- Weer widget met 3-daagse forecast
|
||||||
|
- Simpele quiz app (3 vragen)
|
||||||
|
- Recipe card met ingrediënten toggle
|
||||||
|
|
||||||
**Huiswerk:** Voeg 5 extra components toe (Modal, Toast, Dropdown, Tabs, Accordion), experimenteer met extra MCP servers (GitHub, Google Drive).
|
**Lesopdracht:** Kies een mini-project, maak feature breakdown met AI, bouw werkend prototype. Documenteer je proces: welke prompts werkten, waar liep je vast, hoe loste je het op.
|
||||||
|
|
||||||
|
**Huiswerk:** Verbeter je prototype (styling, edge cases), schrijf "Lessons Learned" document (300 woorden), bereid je voor op Les 7 (Next.js).
|
||||||
|
|
||||||
[→ Ga naar Les 6](Samenvattingen/Les06-Samenvatting.md)
|
[→ Ga naar Les 6](Samenvattingen/Les06-Samenvatting.md)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Les 7: Backend Basics met Supabase
|
## 2.2 Next.js & Supabase
|
||||||
|
|
||||||
**Tools:** Supabase, Next.js, Cursor/OpenCode
|
### Les 7: Next.js Project Setup
|
||||||
|
|
||||||
**Theorie/Uitleg:**
|
**Tools:** Next.js, OpenCode/WebStorm, Git, Vercel
|
||||||
- Wat is Supabase: open-source Firebase alternative
|
|
||||||
- Supabase UI Tour: Table Editor, tabellen maken zonder SQL
|
|
||||||
- Database basics: tabellen, kolommen, rijen (geen SQL kennis nodig)
|
|
||||||
- Supabase client setup in Next.js
|
|
||||||
- CRUD operaties: create, read, update, delete
|
|
||||||
- Simpele authenticatie met Auth UI component
|
|
||||||
- Environment variables correct gebruiken
|
|
||||||
|
|
||||||
**Lesopdracht:** Bouw Todo App met Supabase: maak tabel via UI, setup client, bouw CRUD interface, voeg login toe met Auth UI.
|
**Docent vertelt:**
|
||||||
|
- Wat is Next.js en waarom gebruiken we het?
|
||||||
|
- `npx create-next-app` stap voor stap
|
||||||
|
- Project structuur uitgelegd (app/, components/, lib/)
|
||||||
|
- TypeScript basics voor React
|
||||||
|
- Tailwind CSS in Next.js
|
||||||
|
- Git basics: commits, push, .gitignore
|
||||||
|
|
||||||
**Huiswerk:** Extend Todo app met filtering, user-specifieke todos, loading/error states. Deploy naar Vercel.
|
**Studenten doen:**
|
||||||
|
- Eerste Next.js project aanmaken
|
||||||
|
- Project structuur verkennen
|
||||||
|
- Simpele pagina's maken
|
||||||
|
- Components maken en importeren
|
||||||
|
- Deployen naar Vercel
|
||||||
|
|
||||||
|
**Lesopdracht:**
|
||||||
|
1. Run `npx create-next-app@latest` met TypeScript + Tailwind
|
||||||
|
2. Maak 3 pagina's (home, about, contact)
|
||||||
|
3. Maak 2 herbruikbare components (Header, Footer)
|
||||||
|
4. Style met Tailwind
|
||||||
|
5. Deploy naar Vercel
|
||||||
|
|
||||||
|
**Huiswerk:** Voeg 2 extra pagina's toe, maak 3 extra components, experimenteer met Tailwind, push alles naar GitHub.
|
||||||
|
|
||||||
[→ Ga naar Les 7](Samenvattingen/Les07-Samenvatting.md)
|
[→ Ga naar Les 7](Samenvattingen/Les07-Samenvatting.md)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 2.3 AI Integration
|
### Les 8: Supabase Basics
|
||||||
|
|
||||||
### Les 8: Claude Code - Agentic Coding Mode
|
**Tools:** Supabase, Next.js, OpenCode
|
||||||
|
|
||||||
**Tools:** Claude Desktop (Code mode), Skills.sh, Supabase, Next.js
|
**Docent vertelt:**
|
||||||
|
- Wat is Supabase? (database + auth in één)
|
||||||
|
- Supabase project aanmaken (live demo)
|
||||||
|
- Table Editor: tabellen maken zonder SQL
|
||||||
|
- Environment variables: wat, waarom, hoe
|
||||||
|
- Supabase client setup
|
||||||
|
- CRUD operaties uitgelegd
|
||||||
|
- Auth UI component (plug & play login)
|
||||||
|
|
||||||
**Theorie/Uitleg:**
|
**Studenten doen:**
|
||||||
- Wat is Claude Code: agentic coding mode
|
- Supabase account en project aanmaken
|
||||||
- Verschil met chat-based coding
|
- Eerste tabel maken via UI
|
||||||
- Claude Desktop modes: Chat, Projects, Cowork, Code
|
- `.env.local` configureren
|
||||||
- Wanneer Claude Code gebruiken
|
- Supabase client maken
|
||||||
- Hoe Claude Code werkt: high-level instructie → analyse → plan → uitvoering
|
- Data ophalen en tonen
|
||||||
- Best practices voor autonome development
|
- Auth toevoegen
|
||||||
|
|
||||||
**Lesopdracht:** Bouw multi-step form wizard met Claude Code (autonoom), bouw User Dashboard met stats die data uit Supabase haalt.
|
**Lesopdracht:**
|
||||||
|
1. Maak Supabase project
|
||||||
|
2. Maak `todos` tabel via Table Editor
|
||||||
|
3. Configureer `.env.local`
|
||||||
|
4. Bouw Todo app: lijst tonen, toevoegen, afvinken, verwijderen
|
||||||
|
5. Voeg login toe met Auth UI
|
||||||
|
|
||||||
**Huiswerk:** Gebruik Claude Code voor grote refactoring (extract queries), schrijf vergelijkings essay OpenCode vs Claude Code (500 woorden).
|
**Huiswerk:** Extend Todo app (filtering, user-specifieke todos), deploy naar Vercel met env vars, test in productie.
|
||||||
|
|
||||||
[→ Ga naar Les 8](Samenvattingen/Les08-Samenvatting.md)
|
[→ Ga naar Les 8](Samenvattingen/Les08-Samenvatting.md)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## 2.3 AI Agents
|
||||||
|
|
||||||
### Les 9: AI Agents - Custom GPTs & Claude Projects
|
### Les 9: AI Agents - Custom GPTs & Claude Projects
|
||||||
|
|
||||||
**Tools:** Custom GPTs (OpenAI), Claude Projects (Anthropic), MCP
|
**Tools:** ChatGPT (Custom GPTs), Claude Desktop (Projects)
|
||||||
|
|
||||||
**Theorie/Uitleg:**
|
**Docent vertelt:**
|
||||||
- Wat zijn AI Agents: verschil chatbot vs agent
|
- Wat zijn AI Agents? Verschil chatbot vs agent
|
||||||
- Agent capabilities: tool use, memory, planning
|
- Custom GPTs: hoe maak je ze, wat kun je ermee
|
||||||
- Custom GPTs: instructions, knowledge base, capabilities
|
- Claude Projects: custom instructions + project knowledge
|
||||||
- Claude Projects: custom instructions, project knowledge
|
- Wanneer een agent vs gewoon chatten
|
||||||
- Projects combineren met MCP
|
- Best practices voor agent instructions
|
||||||
- Real-world developer agents bouwen
|
|
||||||
|
|
||||||
**Lesopdracht:** Bouw Code Review Agent (met checklist als instructions), bouw Documentation Agent voor component library.
|
**Studenten doen:**
|
||||||
|
- Custom GPT maken voor code review
|
||||||
|
- Claude Project opzetten voor eigen project
|
||||||
|
- Agents testen en vergelijken
|
||||||
|
- Instructions itereren en verbeteren
|
||||||
|
|
||||||
**Huiswerk:** Test agents in workflow, maak Personal Dev Assistant agent afgestemd op jouw workflow, deel config als gist.
|
**Lesopdracht:**
|
||||||
|
1. Maak Custom GPT "Code Reviewer" met specifieke checklist
|
||||||
|
2. Maak Claude Project voor je Todo app met project context
|
||||||
|
3. Test beide met dezelfde code
|
||||||
|
4. Documenteer: welke geeft betere feedback?
|
||||||
|
|
||||||
|
**Huiswerk:** Maak "Personal Dev Assistant" agent afgestemd op jouw workflow, test in echt werk, deel je beste agent config met de klas.
|
||||||
|
|
||||||
[→ Ga naar Les 9](Samenvattingen/Les09-Samenvatting.md)
|
[→ Ga naar Les 9](Samenvattingen/Les09-Samenvatting.md)
|
||||||
|
|
||||||
@@ -237,200 +326,280 @@ Verdieping in prompt engineering, Supabase basics, en introductie tot AI agents
|
|||||||
|
|
||||||
**9 lessen · 15 EC**
|
**9 lessen · 15 EC**
|
||||||
|
|
||||||
Geavanceerde AI tools, testing, deployment en het eindproject.
|
Cursor als professionele tool, MCP, debugging, AI features bouwen, en het eindproject.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 3.1 Advanced AI Tools
|
## 3.1 Cursor & Professional Workflow
|
||||||
|
|
||||||
### Les 10: Project Setup & Repository Structure
|
### Les 10: Introduction to Cursor
|
||||||
|
|
||||||
**Tools:** Cursor, Git & GitHub, Next.js
|
**Tools:** Cursor
|
||||||
|
|
||||||
**Theorie/Uitleg:**
|
**Docent vertelt:**
|
||||||
- Waarom goede project structuur belangrijk is voor AI tools
|
- Waarom Cursor? De professionele AI editor
|
||||||
- Ideale folder structuur voor Next.js projecten
|
- Free tier vs Pro: wat krijg je?
|
||||||
- .cursorrules files: project-specifieke instructies voor Cursor
|
- Core features: Tab completion, CMD+K, Chat, Composer
|
||||||
- docs/ folder: PROMPT-LOG.md, AI-DECISIONS.md, PROJECT-BRIEF.md
|
- Cursor vs OpenCode: wanneer welke?
|
||||||
- Environment variables beheren (.env.local vs .env.example)
|
- Live demo van Cursor workflow
|
||||||
- README.md best practices
|
|
||||||
- Git best practices: commits, branches, .gitignore
|
|
||||||
|
|
||||||
**Lesopdracht:** Richt je eindproject repository in: GitHub repo, folder structuur, .cursorrules, docs/ files, environment setup, complete README.
|
**Studenten doen:**
|
||||||
|
- Cursor installeren
|
||||||
|
- Bestaand project openen in Cursor
|
||||||
|
- Tab completion ervaren
|
||||||
|
- CMD+K voor inline edits
|
||||||
|
- Chat voor vragen over code
|
||||||
|
- Composer voor multi-file changes
|
||||||
|
|
||||||
**Huiswerk:** Verfijn setup: uitgebreide .cursorrules (meerdere files), volledig ingevulde PROJECT-BRIEF.md, basis UI components bouwen met Cursor.
|
**Lesopdracht:**
|
||||||
|
1. Installeer Cursor (free tier)
|
||||||
|
2. Open je Todo app in Cursor
|
||||||
|
3. Voeg nieuwe feature toe met alleen Cursor (bijv. due dates)
|
||||||
|
4. Gebruik elke feature minstens 3x: Tab, CMD+K, Chat, Composer
|
||||||
|
5. Noteer: wat werkt goed, wat is wennen?
|
||||||
|
|
||||||
|
**Huiswerk:** Bouw complete mini-feature met Cursor, vergelijk ervaring met OpenCode, schrijf reflectie (400 woorden).
|
||||||
|
|
||||||
[→ Ga naar Les 10](Samenvattingen/Les10-Samenvatting.md)
|
[→ Ga naar Les 10](Samenvattingen/Les10-Samenvatting.md)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Les 11: Introduction to Cursor - De Professionele AI Editor
|
### Les 11: Project Setup & Repository Structure
|
||||||
|
|
||||||
**Tools:** Cursor, GitHub, Skills.sh, Supabase
|
**Tools:** Cursor, Git, GitHub
|
||||||
|
|
||||||
**Theorie/Uitleg:**
|
**Docent vertelt:**
|
||||||
- Waarom Cursor: purpose-built for AI, snelle tab completion
|
- Waarom goede project structuur cruciaal is voor AI
|
||||||
- Core features: Tab completion, CMD+K, Chat, @ mentions, Composer
|
- De ideale folder structuur voor Next.js + Cursor
|
||||||
- Skills compatibiliteit (werken meteen in Cursor)
|
- .cursorrules files: wat zijn ze, hoe schrijf je ze
|
||||||
- Cost discussie: Free vs Pro
|
- docs/ folder: PROMPT-LOG, AI-DECISIONS, PROJECT-BRIEF
|
||||||
- Wanneer welke tool (OpenCode/Claude Code/Cursor)
|
- Environment variables: lokaal vs productie
|
||||||
|
- README best practices
|
||||||
|
|
||||||
**Lesopdracht:** Setup Cursor + Skills migration, feature comparison (rebuild filtering system), test Composer mode met analytics dashboard.
|
**Studenten doen:**
|
||||||
|
- Eindproject repository aanmaken
|
||||||
|
- Folder structuur opzetten
|
||||||
|
- .cursorrules files schrijven
|
||||||
|
- docs/ templates invullen
|
||||||
|
- Eerste commit en push
|
||||||
|
|
||||||
**Huiswerk:** Bouw complete mini-app met Cursor (Weather/Expense/Recipe/Habit), track metrics (tab completion, CMD+K, Composer usage), reflectie (600 woorden).
|
**Lesopdracht:**
|
||||||
|
1. `npx create-next-app` voor je eindproject
|
||||||
|
2. Maak folder structuur aan (zie template)
|
||||||
|
3. Schrijf `general.mdc` met jouw project regels
|
||||||
|
4. Vul PROJECT-BRIEF.md volledig in
|
||||||
|
5. Push naar GitHub
|
||||||
|
|
||||||
|
**Huiswerk:** Voeg extra .cursorrules files toe, start PROMPT-LOG.md, maak eerste components met Cursor.
|
||||||
|
|
||||||
[→ Ga naar Les 11](Samenvattingen/Les11-Samenvatting.md)
|
[→ Ga naar Les 11](Samenvattingen/Les11-Samenvatting.md)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Les 12: Advanced Context Management & AI-Vriendelijke Code
|
### Les 12: MCP & Context Management
|
||||||
|
|
||||||
**Tools:** Cursor, Claude Desktop, .cursorignore
|
**Tools:** Cursor, Claude Desktop, MCP servers
|
||||||
|
|
||||||
**Theorie/Uitleg:**
|
**Docent vertelt:**
|
||||||
- Context windows begrijpen (tokens, sizes)
|
- Wat is MCP (Model Context Protocol)?
|
||||||
- Context strategieën: relevant files, narrow down, pruning
|
- MCP servers: filesystem, GitHub, databases
|
||||||
- Project documentatie voor AI (README, ARCHITECTURE, COMPONENTS)
|
- Claude Desktop + MCP configureren
|
||||||
- AI-vriendelijke code organisatie
|
- Context windows: wat zijn tokens, waarom limiet?
|
||||||
- Context pruning: fresh chat, .cursorignore
|
- Context strategieën: relevante files, pruning
|
||||||
- Knowledge persistence met Claude Projects
|
- .cursorignore voor grote projecten
|
||||||
|
|
||||||
**Lesopdracht:** Context Optimization Challenge: assessment van messy codebase, documentation maken, organization refactor, re-test met verbeterde scores.
|
**Studenten doen:**
|
||||||
|
- MCP servers configureren in Claude Desktop
|
||||||
|
- Filesystem MCP testen
|
||||||
|
- GitHub MCP verkennen
|
||||||
|
- Context optimalisatie oefenen
|
||||||
|
- .cursorignore opzetten
|
||||||
|
|
||||||
**Huiswerk:** Maak Context Management Playbook met pre-project checklist, folder templates, prompting templates. Maak 3 document templates. Test op nieuw project.
|
**Lesopdracht:**
|
||||||
|
1. Configureer Claude Desktop met filesystem MCP
|
||||||
|
2. Test: laat Claude je project analyseren
|
||||||
|
3. Configureer GitHub MCP
|
||||||
|
4. Maak .cursorignore voor je project
|
||||||
|
5. Experimenteer: wat gebeurt er met grote vs kleine context?
|
||||||
|
|
||||||
|
**Huiswerk:** Voeg extra MCP server toe (naar keuze), optimaliseer je project voor AI context, documenteer in AI-DECISIONS.md.
|
||||||
|
|
||||||
[→ Ga naar Les 12](Samenvattingen/Les12-Samenvatting.md)
|
[→ Ga naar Les 12](Samenvattingen/Les12-Samenvatting.md)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Les 13: Mastering Cursor met Claude Opus & Advanced Skills
|
### Les 13: Mastering Cursor
|
||||||
|
|
||||||
**Tools:** Cursor, Claude Opus/Sonnet/Haiku, Skills.sh, .cursorrules
|
**Tools:** Cursor, Claude models
|
||||||
|
|
||||||
**Theorie/Uitleg:**
|
**Docent vertelt:**
|
||||||
- Model Deep Dive: wanneer Haiku/Sonnet/Opus
|
- Model keuze: wanneer Haiku vs Sonnet vs Opus?
|
||||||
- Composer Mode Mastery: multi-file generatie
|
- Composer Mode diepgaand: multi-file generatie
|
||||||
- @ Mentions Deep Dive: @Files, @Folders, @Code, @Docs, @Web
|
- @ mentions: @Files, @Folders, @Code, @Docs, @Web
|
||||||
- Codebase Indexing optimaliseren
|
- Codebase indexing optimaliseren
|
||||||
- .cursorrules files: project-specifieke instructies
|
- .cursorrules advanced: meerdere files, condities
|
||||||
- Cost Management: token usage monitoren
|
- Cost management: tokens monitoren
|
||||||
|
|
||||||
**Lesopdracht:** Bouw complexe Multi-Step Form Wizard met Cursor Composer + Claude + Skills (4 stappen, progress indicator, validation, localStorage, animations).
|
**Studenten doen:**
|
||||||
|
- Verschillende models testen op zelfde taak
|
||||||
|
- Complexe feature bouwen met Composer
|
||||||
|
- @ mentions effectief gebruiken
|
||||||
|
- .cursorrules uitbreiden en testen
|
||||||
|
|
||||||
**Huiswerk:** Research .cursorrules voorbeelden, schrijf comprehensive .cursorrules voor jouw stack, test en itereer.
|
**Lesopdracht:** Bouw complexe Multi-Step Form Wizard met Cursor Composer (4 stappen, progress indicator, validation, localStorage persistence).
|
||||||
|
|
||||||
|
**Huiswerk:** Research .cursorrules voorbeelden online, schrijf uitgebreide .cursorrules voor jouw eindproject, test en itereer.
|
||||||
|
|
||||||
[→ Ga naar Les 13](Samenvattingen/Les13-Samenvatting.md)
|
[→ Ga naar Les 13](Samenvattingen/Les13-Samenvatting.md)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 3.2 Debugging & Testing
|
## 3.2 Quality & AI Features
|
||||||
|
|
||||||
### Les 14: Debugging & Code Review met AI
|
### Les 14: Debugging & Code Review met AI
|
||||||
|
|
||||||
**Tools:** Cursor, Browser DevTools, React DevTools
|
**Tools:** Cursor, Browser DevTools, React DevTools
|
||||||
|
|
||||||
**Theorie/Uitleg:**
|
**Docent vertelt:**
|
||||||
- Waarom AI effectief is voor debugging
|
- Waarom AI goed is in debugging
|
||||||
- Error messages begrijpen (TypeError, ReferenceError, Hydration errors)
|
- Error messages lezen en begrijpen
|
||||||
- Debugging workflow met AI: isoleer → verzamel context → vraag AI → begrijp
|
- Debugging workflow: isoleer → context → vraag AI → begrijp
|
||||||
- Console.log debugging strategieën
|
|
||||||
- Browser DevTools basics (Console, Network, Elements)
|
- Browser DevTools basics (Console, Network, Elements)
|
||||||
- Code review met AI: kwaliteit, bugs, performance, security
|
- Code review met AI: wat kun je vragen?
|
||||||
- Refactoring met AI hulp
|
- Wanneer AI NIET te vertrouwen
|
||||||
- Wanneer AI niet te vertrouwen
|
|
||||||
|
|
||||||
**Lesopdracht:** Debugging Challenge: los 6 opzettelijke bugs op in een project met AI hulp, documenteer wat je leert in PROMPT-LOG.md.
|
**Studenten doen:**
|
||||||
|
- Debugging challenge: 6 bugs fixen met AI hulp
|
||||||
|
- Browser DevTools gebruiken
|
||||||
|
- Code review van eigen code met AI
|
||||||
|
- Refactoring met AI suggesties
|
||||||
|
|
||||||
**Huiswerk:** Code review je eigen eindproject met AI (3 files), refactor 1 complex component, maak persoonlijke debugging checklist.
|
**Lesopdracht:** Los 6 opzettelijke bugs op in gegeven project, documenteer per bug: error message, prompt aan AI, oplossing, wat je leerde.
|
||||||
|
|
||||||
|
**Huiswerk:** Code review 3 files uit je eindproject met AI, fix gevonden issues, maak persoonlijke debugging checklist.
|
||||||
|
|
||||||
[→ Ga naar Les 14](Samenvattingen/Les14-Samenvatting.md)
|
[→ Ga naar Les 14](Samenvattingen/Les14-Samenvatting.md)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Les 15: AI-Driven Testing & Quality Assurance
|
### Les 15: Vercel AI SDK - AI Features in je App
|
||||||
|
|
||||||
**Tools:** Cursor, Vitest, React Testing Library, MSW, Playwright
|
**Tools:** Vercel AI SDK, Cursor, OpenAI/Anthropic API
|
||||||
|
|
||||||
**Theorie/Uitleg:**
|
**Docent vertelt:**
|
||||||
- Types van tests: unit, component, integration, E2E
|
- Waarom Vercel AI SDK? (vs raw API calls)
|
||||||
- AI voor test generation
|
- Installatie en setup
|
||||||
- Testing tools: Vitest, React Testing Library, MSW, Playwright
|
- useChat hook: chat interfaces bouwen
|
||||||
- Testing Supabase: mocking, RLS testen
|
- useCompletion hook: single completions
|
||||||
- Code review met AI
|
- Streaming responses: hoe en waarom
|
||||||
- Code kwaliteit metrics: coverage >70%
|
- API routes voor AI
|
||||||
|
- System prompts schrijven
|
||||||
|
- Kosten en rate limiting
|
||||||
|
|
||||||
**Lesopdracht:** Setup Vitest + RTL, schrijf tests met Cursor (unit, component, integration), bereik >70% coverage.
|
**Studenten doen:**
|
||||||
|
- AI SDK installeren
|
||||||
|
- API route maken
|
||||||
|
- Chat component bouwen met useChat
|
||||||
|
- Streaming implementeren
|
||||||
|
- Custom system prompt schrijven
|
||||||
|
|
||||||
**Huiswerk:** Implementeer AI Code Review workflow: maak review agent, review 3 components, fix issues, add testing setup aan Starter Template.
|
**Lesopdracht:**
|
||||||
|
1. `npm install ai @ai-sdk/openai`
|
||||||
|
2. Maak `/api/chat` route
|
||||||
|
3. Bouw chat component met useChat
|
||||||
|
4. Implementeer streaming
|
||||||
|
5. Pas system prompt aan voor jouw app
|
||||||
|
|
||||||
|
**Huiswerk:** Integreer AI feature in je eindproject (Recipe chat / Budget advisor / Travel planner), sla conversations op in Supabase.
|
||||||
|
|
||||||
[→ Ga naar Les 15](Samenvattingen/Les15-Samenvatting.md)
|
[→ Ga naar Les 15](Samenvattingen/Les15-Samenvatting.md)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 3.3 AI Features & Deployment
|
## 3.3 Deployment & Eindproject
|
||||||
|
|
||||||
### Les 16: Vercel AI SDK - AI Features in je App
|
### Les 16: Deployment & Production
|
||||||
|
|
||||||
**Tools:** Vercel AI SDK, Next.js API Routes, OpenAI/Anthropic API, Cursor
|
**Tools:** Vercel, GitHub, Supabase
|
||||||
|
|
||||||
**Theorie/Uitleg:**
|
**Docent vertelt:**
|
||||||
- Vercel AI SDK introductie: waarom een SDK vs raw API calls
|
- Vercel deployment flow
|
||||||
- Installatie en configuratie (`ai` package)
|
- Environment variables in Vercel
|
||||||
- Core hooks: `useChat` voor conversaties, `useCompletion` voor single completions
|
- Supabase productie setup
|
||||||
- Streaming responses: hoe het werkt, waarom het UX verbetert
|
- Custom domains
|
||||||
- API Routes opzetten voor AI (OpenAI/Anthropic providers)
|
- Performance basics (Lighthouse)
|
||||||
- Chat UI bouwen met `useChat` hook (messages, input, handleSubmit)
|
- Monitoring en error tracking
|
||||||
- Conversation history opslaan in Supabase
|
- Security checklist voor productie
|
||||||
- Error handling en loading states
|
|
||||||
- Rate limiting en cost management
|
|
||||||
|
|
||||||
**Lesopdracht:** Bouw een AI Chat component met Vercel AI SDK: setup API route, implementeer `useChat` hook, style met Tailwind, sla chat history op in Supabase.
|
**Studenten doen:**
|
||||||
|
- Eindproject deployen naar Vercel
|
||||||
|
- Env vars configureren
|
||||||
|
- Supabase redirect URLs instellen
|
||||||
|
- Lighthouse audit runnen
|
||||||
|
- Security checklist doorlopen
|
||||||
|
|
||||||
**Huiswerk:** Extend naar volledige AI feature voor je eindproject (Recipe Generator / Budget Advisor / Travel Planner), voeg streaming UI toe, implementeer conversation history, documenteer je implementatie.
|
**Lesopdracht:**
|
||||||
|
1. Deploy eindproject naar Vercel
|
||||||
|
2. Configureer alle env vars
|
||||||
|
3. Test volledige app in productie
|
||||||
|
4. Run Lighthouse, fix issues tot score >80
|
||||||
|
5. Doorloop security checklist
|
||||||
|
|
||||||
|
**Huiswerk:** Custom domain toevoegen (optioneel), performance optimaliseren, documentatie updaten met productie URL.
|
||||||
|
|
||||||
[→ Ga naar Les 16](Samenvattingen/Les16-Samenvatting.md)
|
[→ Ga naar Les 16](Samenvattingen/Les16-Samenvatting.md)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Les 17: Advanced Deployment & Production (Vercel)
|
### Les 17: Eindopdracht Kickoff
|
||||||
|
|
||||||
**Tools:** Vercel, GitHub Actions, Sentry/LogRocket, Lighthouse, Cursor
|
**Tools:** Cursor, alle geleerde tools
|
||||||
|
|
||||||
**Theorie/Uitleg:**
|
**Docent vertelt:**
|
||||||
- Vercel deployment: edge network, serverless, Git integration
|
- Eindopdracht requirements doorlopen
|
||||||
- Environment variables en secrets
|
- Beoordelingscriteria uitleggen
|
||||||
- Custom domains en DNS
|
- Timeline en deadlines
|
||||||
- Performance optimization: images, fonts, code splitting
|
- Tips voor succesvol afronden
|
||||||
- Vercel Analytics en Web Vitals
|
- Q&A over onduidelijkheden
|
||||||
- CI/CD met GitHub Actions
|
|
||||||
- Security checklist voor productie
|
|
||||||
|
|
||||||
**Lesopdracht:** Production-ready deployment: pre-deployment checklist, performance optimization (Lighthouse 90+), deploy + monitoring setup.
|
**Studenten doen:**
|
||||||
|
- Eindopdracht document lezen
|
||||||
|
- Vragen stellen
|
||||||
|
- Planning maken voor komende weken
|
||||||
|
- Beginnen aan ontbrekende features
|
||||||
|
- Peer review setup
|
||||||
|
|
||||||
**Huiswerk:** Maak Production Deployment Playbook met checklists, setup GitHub Actions, bouw monitoring dashboard.
|
**Lesopdracht:** Maak gedetailleerde planning voor afronden eindproject, identificeer wat nog moet gebeuren, begin met hoogste prioriteit items.
|
||||||
|
|
||||||
|
**Huiswerk:** Werk aan eindproject volgens planning, documenteer voortgang, bereid vragen voor voor werksessie.
|
||||||
|
|
||||||
[→ Ga naar Les 17](Samenvattingen/Les17-Samenvatting.md)
|
[→ Ga naar Les 17](Samenvattingen/Les17-Samenvatting.md)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 3.4 Eindproject
|
### Les 18: Eindproject Werksessie
|
||||||
|
|
||||||
### Les 18: Eindopdracht Intro, Planning & Advanced Topics
|
**Tools:** Cursor, alle geleerde tools
|
||||||
|
|
||||||
**Tools:** Cursor, Supabase, Skills.sh, Planning tools
|
**Docent vertelt:**
|
||||||
|
- Korte standup: waar staat iedereen?
|
||||||
|
- Beschikbaar voor vragen en hulp
|
||||||
|
- Geen nieuwe theorie
|
||||||
|
|
||||||
**Theorie/Uitleg:**
|
**Studenten doen:**
|
||||||
- Eindopdracht walkthrough: 10 project opties
|
- Werken aan eindproject
|
||||||
- Requirements en grading rubric
|
- Hulp vragen waar nodig
|
||||||
- Timeline planning (2 weken)
|
- Peer feedback geven
|
||||||
- Project planning met Cursor als AI partner
|
- Laatste features afronden
|
||||||
- Database Schema Design workshop
|
- Documentatie completeren
|
||||||
- Geavanceerde architecture patterns
|
- PROMPT-LOG en AI-DECISIONS afronden
|
||||||
- Accessibility Deep Dive (WCAG AA)
|
|
||||||
|
|
||||||
**Lesopdracht:** Kies eindproject, maak gedetailleerde planning met AI (features, schema, architecture, timeline), setup GitHub repo + Next.js + Supabase + Skills.
|
**Focus:** Dit is werktijd. De docent loopt rond, beantwoordt vragen, helpt bij problemen. Studenten werken zelfstandig aan hun eindproject.
|
||||||
|
|
||||||
**Huiswerk:** Start bouwen core features: Auth, database, basis layout, eerste core feature. Commit frequent, test elke feature, lever progress update + deployed preview URL.
|
**Deliverable eind van de les:**
|
||||||
|
- Werkende app deployed
|
||||||
|
- Documentatie compleet
|
||||||
|
- Klaar voor inleveren (of bijna)
|
||||||
|
|
||||||
[→ Ga naar Les 18](Samenvattingen/Les18-Samenvatting.md)
|
[→ Ga naar Les 18](Samenvattingen/Les18-Samenvatting.md)
|
||||||
|
|
||||||
@@ -440,10 +609,9 @@ Geavanceerde AI tools, testing, deployment en het eindproject.
|
|||||||
|
|
||||||
- **Frontend:** React, Next.js, Tailwind CSS
|
- **Frontend:** React, Next.js, Tailwind CSS
|
||||||
- **Backend:** Supabase (Postgres database, Auth)
|
- **Backend:** Supabase (Postgres database, Auth)
|
||||||
- **AI Tools:** ChatGPT, Claude, v0.dev, OpenCode, Cursor, Claude Code
|
- **AI Tools:** ChatGPT, Claude Desktop, v0.dev, OpenCode, Cursor
|
||||||
- **AI SDK:** Vercel AI SDK (`ai` package) voor AI features in apps
|
- **AI SDK:** Vercel AI SDK voor AI features in apps
|
||||||
- **Testing:** Vitest, React Testing Library, Playwright
|
- **Deployment:** Vercel, GitHub
|
||||||
- **Deployment:** Vercel, GitHub Actions
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user