458 lines
18 KiB
Markdown
458 lines
18 KiB
Markdown
# AI Development Curriculum - NOVI Hogeschool
|
|
|
|
Een 18-weekse cursus die studenten meeneemt van AI-beginner naar AI-powered developer.
|
|
|
|
**Totaal: 30 EC** verdeeld over 3 delen.
|
|
|
|
---
|
|
|
|
## Overzicht
|
|
|
|
| Les | Onderwerp | Deel | Status |
|
|
|-----|-----------|------|--------|
|
|
| 01 | [Introductie tot AI en Large Language Models](Samenvattingen/Les01-Samenvatting.md) | 1 | ✅ Uitgewerkt |
|
|
| 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 |
|
|
| 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 |
|
|
| 06 | [MCP & Component Libraries](Samenvattingen/Les06-Samenvatting.md) | 2 | 📋 Samenvatting |
|
|
| 07 | [Backend Basics met Supabase](Samenvattingen/Les07-Samenvatting.md) | 2 | 📋 Samenvatting |
|
|
| 08 | [Claude Code - Agentic Coding Mode](Samenvattingen/Les08-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 |
|
|
| 11 | [Introduction to Cursor](Samenvattingen/Les11-Samenvatting.md) | 3 | 📋 Samenvatting |
|
|
| 12 | [Advanced Context Management](Samenvattingen/Les12-Samenvatting.md) | 3 | 📋 Samenvatting |
|
|
| 13 | [Mastering Cursor met Claude Opus](Samenvattingen/Les13-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 |
|
|
| 16 | [Building AI-Powered Features](Samenvattingen/Les16-Samenvatting.md) | 3 | 📋 Samenvatting |
|
|
| 17 | [Advanced Deployment & Production](Samenvattingen/Les17-Samenvatting.md) | 3 | 📋 Samenvatting |
|
|
| 18 | [Eindopdracht Intro, Planning & Advanced Topics](Samenvattingen/Les18-Samenvatting.md) | 3 | 📋 Samenvatting |
|
|
|
|
---
|
|
|
|
# Deel 1: Fundamentals of AI-Driven Development
|
|
|
|
**3 lessen · 5 EC**
|
|
|
|
Kennismaking met AI, LLMs en de basis van AI-assisted development.
|
|
|
|
---
|
|
|
|
### Les 1: Introductie tot AI en Large Language Models
|
|
|
|
**Tools:** ChatGPT, v0.dev, Vercel, GitHub
|
|
|
|
**Theorie/Uitleg:**
|
|
- Het AI-landschap (ChatGPT, Claude, Grok, Gemini)
|
|
- Large Language Models en next-token prediction
|
|
- ChatGPT interface, model kiezen, afbeeldingen analyseren
|
|
- Prompt engineering basics (rol, context, taak, format)
|
|
- Tech stack en kleuren specificeren in prompts
|
|
- 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.
|
|
|
|
**Huiswerk:** Reflectie schrijven (500 woorden), 5 AI use cases bedenken, tweede component bouwen via de workflow.
|
|
|
|
[→ Ga naar Les 1](Samenvattingen/Les01-Samenvatting.md)
|
|
|
|
---
|
|
|
|
### Les 2: AI Code Assistants en OpenCode Desktop App
|
|
|
|
**Tools:** OpenCode Desktop App, Ollama/Groq API, Vercel
|
|
|
|
**Theorie/Uitleg:**
|
|
- Verschil chat-interfaces vs geïntegreerde development tools
|
|
- OpenCode als standalone desktop applicatie
|
|
- Installatie en configuratie met gratis modellen
|
|
- Interface verkenning: code editor, chat, terminal, file browser
|
|
- Best practices voor code generation prompts
|
|
|
|
**Lesopdracht:** Installeer OpenCode, koppel gratis model (Ollama/Groq), bouw responsive navbar component met AI assistance.
|
|
|
|
**Huiswerk:** Bouw landing page component library (hero, features, testimonial, CTA, footer), schrijf blog post over ervaring (300 woorden).
|
|
|
|
[→ Ga naar Les 2](Samenvattingen/Les02-Samenvatting.md)
|
|
|
|
---
|
|
|
|
### Les 3: AI Ethics, Privacy & Security + WebStorm Integration
|
|
|
|
**Tools:** WebStorm (school licentie), OpenCode plugin, Git
|
|
|
|
**Theorie/Uitleg:**
|
|
- Privacy risico's: wat NOOIT te delen (API keys, credentials, client data)
|
|
- Data ownership bij AI services
|
|
- Security vulnerabilities (SQL injection, XSS, prompt injection)
|
|
- GDPR/AVG compliance basics
|
|
- WebStorm installatie en OpenCode plugin configuratie
|
|
- 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.
|
|
|
|
**Huiswerk:** Bouw secure feature (contact form of auth flow), review met Safety Checklist, schrijf uitgebreide README met gevonden issues en fixes.
|
|
|
|
[→ Ga naar Les 3](Samenvattingen/Les03-Samenvatting.md)
|
|
|
|
---
|
|
|
|
# Deel 2: Intermediate AI-Driven Development
|
|
|
|
**6 lessen · 10 EC**
|
|
|
|
Verdieping in prompt engineering, Supabase basics, en introductie tot AI agents en MCP.
|
|
|
|
---
|
|
|
|
## 2.1 Prompt Engineering & Skills
|
|
|
|
### Les 4: Effectief Prompting, Iteratief Werken & Skills
|
|
|
|
**Tools:** OpenCode/WebStorm, Skills.sh
|
|
|
|
**Theorie/Uitleg:**
|
|
- Zero-shot vs few-shot prompting
|
|
- Chain-of-thought reasoning
|
|
- Role prompting en constraint-based prompting
|
|
- Skills.sh introductie: herbruikbare best-practices packages
|
|
- Skills installeren via CLI (`npx skills add <skill-name>`)
|
|
- Iteratief werken: start simpel → voeg complexiteit toe
|
|
|
|
**Lesopdracht:** Installeer Skills, vergelijk output met/zonder skill, bouw data filtering systeem in 4 iteraties.
|
|
|
|
**Huiswerk:** Maak persoonlijke prompt library met 8 templates, installeer en test 3 Skills, documenteer concrete verschillen.
|
|
|
|
[→ Ga naar Les 4](Samenvattingen/Les04-Samenvatting.md)
|
|
|
|
---
|
|
|
|
### Les 5: AI voor Content en Asset Generation
|
|
|
|
**Tools:** DALL-E 3, Leonardo.ai, Ideogram, Next.js Image
|
|
|
|
**Theorie/Uitleg:**
|
|
- Image generation tools vergelijking
|
|
- Prompt engineering voor images (style, mood, composition)
|
|
- Asset generation workflow voor web
|
|
- Image optimization (compression, WebP/AVIF, responsive)
|
|
- Copyright en licenties bij AI-generated content
|
|
- 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.
|
|
|
|
**Huiswerk:** Vervang alle placeholder images in bestaand project met AI-gegenereerde assets, schrijf case study (400 woorden) met before/after screenshots.
|
|
|
|
[→ Ga naar Les 5](Samenvattingen/Les05-Samenvatting.md)
|
|
|
|
---
|
|
|
|
## 2.2 MCP & Supabase
|
|
|
|
### Les 6: MCP & Component Libraries
|
|
|
|
**Tools:** Claude Desktop, MCP servers, Shadcn/ui, Supabase
|
|
|
|
**Theorie/Uitleg:**
|
|
- MCP (Model Context Protocol): AI verbinden met externe data
|
|
- MCP servers: filesystem, databases, APIs
|
|
- Claude Desktop configuratie voor MCP
|
|
- Shadcn/ui systematisch bouwen
|
|
- Component composition patterns
|
|
- 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.
|
|
|
|
**Huiswerk:** Voeg 5 extra components toe (Modal, Toast, Dropdown, Tabs, Accordion), experimenteer met extra MCP servers (GitHub, Google Drive).
|
|
|
|
[→ Ga naar Les 6](Samenvattingen/Les06-Samenvatting.md)
|
|
|
|
---
|
|
|
|
### Les 7: Backend Basics met Supabase
|
|
|
|
**Tools:** Supabase, Next.js, Cursor/OpenCode
|
|
|
|
**Theorie/Uitleg:**
|
|
- 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.
|
|
|
|
**Huiswerk:** Extend Todo app met filtering, user-specifieke todos, loading/error states. Deploy naar Vercel.
|
|
|
|
[→ Ga naar Les 7](Samenvattingen/Les07-Samenvatting.md)
|
|
|
|
---
|
|
|
|
## 2.3 AI Integration
|
|
|
|
### Les 8: Claude Code - Agentic Coding Mode
|
|
|
|
**Tools:** Claude Desktop (Code mode), Skills.sh, Supabase, Next.js
|
|
|
|
**Theorie/Uitleg:**
|
|
- Wat is Claude Code: agentic coding mode
|
|
- Verschil met chat-based coding
|
|
- Claude Desktop modes: Chat, Projects, Cowork, Code
|
|
- Wanneer Claude Code gebruiken
|
|
- Hoe Claude Code werkt: high-level instructie → analyse → plan → uitvoering
|
|
- Best practices voor autonome development
|
|
|
|
**Lesopdracht:** Bouw multi-step form wizard met Claude Code (autonoom), bouw User Dashboard met stats die data uit Supabase haalt.
|
|
|
|
**Huiswerk:** Gebruik Claude Code voor grote refactoring (extract queries), schrijf vergelijkings essay OpenCode vs Claude Code (500 woorden).
|
|
|
|
[→ Ga naar Les 8](Samenvattingen/Les08-Samenvatting.md)
|
|
|
|
---
|
|
|
|
### Les 9: AI Agents - Custom GPTs & Claude Projects
|
|
|
|
**Tools:** Custom GPTs (OpenAI), Claude Projects (Anthropic), MCP
|
|
|
|
**Theorie/Uitleg:**
|
|
- Wat zijn AI Agents: verschil chatbot vs agent
|
|
- Agent capabilities: tool use, memory, planning
|
|
- Custom GPTs: instructions, knowledge base, capabilities
|
|
- Claude Projects: custom instructions, project knowledge
|
|
- Projects combineren met MCP
|
|
- Real-world developer agents bouwen
|
|
|
|
**Lesopdracht:** Bouw Code Review Agent (met checklist als instructions), bouw Documentation Agent voor component library.
|
|
|
|
**Huiswerk:** Test agents in workflow, maak Personal Dev Assistant agent afgestemd op jouw workflow, deel config als gist.
|
|
|
|
[→ Ga naar Les 9](Samenvattingen/Les09-Samenvatting.md)
|
|
|
|
---
|
|
|
|
# Deel 3: Advanced AI-Driven Development
|
|
|
|
**9 lessen · 15 EC**
|
|
|
|
Geavanceerde AI tools, testing, deployment en het eindproject.
|
|
|
|
---
|
|
|
|
## 3.1 Advanced AI Tools
|
|
|
|
### Les 10: Project Setup & Repository Structure
|
|
|
|
**Tools:** Cursor, Git & GitHub, Next.js
|
|
|
|
**Theorie/Uitleg:**
|
|
- Waarom goede project structuur belangrijk is voor AI tools
|
|
- Ideale folder structuur voor Next.js projecten
|
|
- .cursorrules files: project-specifieke instructies voor Cursor
|
|
- docs/ folder: PROMPT-LOG.md, AI-DECISIONS.md, PROJECT-BRIEF.md
|
|
- Environment variables beheren (.env.local vs .env.example)
|
|
- 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.
|
|
|
|
**Huiswerk:** Verfijn setup: uitgebreide .cursorrules (meerdere files), volledig ingevulde PROJECT-BRIEF.md, basis UI components bouwen met Cursor.
|
|
|
|
[→ Ga naar Les 10](Samenvattingen/Les10-Samenvatting.md)
|
|
|
|
---
|
|
|
|
### Les 11: Introduction to Cursor - De Professionele AI Editor
|
|
|
|
**Tools:** Cursor, GitHub, Skills.sh, Supabase
|
|
|
|
**Theorie/Uitleg:**
|
|
- Waarom Cursor: purpose-built for AI, snelle tab completion
|
|
- Core features: Tab completion, CMD+K, Chat, @ mentions, Composer
|
|
- Skills compatibiliteit (werken meteen in Cursor)
|
|
- Cost discussie: Free vs Pro
|
|
- Wanneer welke tool (OpenCode/Claude Code/Cursor)
|
|
|
|
**Lesopdracht:** Setup Cursor + Skills migration, feature comparison (rebuild filtering system), test Composer mode met analytics dashboard.
|
|
|
|
**Huiswerk:** Bouw complete mini-app met Cursor (Weather/Expense/Recipe/Habit), track metrics (tab completion, CMD+K, Composer usage), reflectie (600 woorden).
|
|
|
|
[→ Ga naar Les 11](Samenvattingen/Les11-Samenvatting.md)
|
|
|
|
---
|
|
|
|
### Les 12: Advanced Context Management & AI-Vriendelijke Code
|
|
|
|
**Tools:** Cursor, Claude Desktop, .cursorignore
|
|
|
|
**Theorie/Uitleg:**
|
|
- Context windows begrijpen (tokens, sizes)
|
|
- Context strategieën: relevant files, narrow down, pruning
|
|
- Project documentatie voor AI (README, ARCHITECTURE, COMPONENTS)
|
|
- AI-vriendelijke code organisatie
|
|
- Context pruning: fresh chat, .cursorignore
|
|
- Knowledge persistence met Claude Projects
|
|
|
|
**Lesopdracht:** Context Optimization Challenge: assessment van messy codebase, documentation maken, organization refactor, re-test met verbeterde scores.
|
|
|
|
**Huiswerk:** Maak Context Management Playbook met pre-project checklist, folder templates, prompting templates. Maak 3 document templates. Test op nieuw project.
|
|
|
|
[→ Ga naar Les 12](Samenvattingen/Les12-Samenvatting.md)
|
|
|
|
---
|
|
|
|
### Les 13: Mastering Cursor met Claude Opus & Advanced Skills
|
|
|
|
**Tools:** Cursor, Claude Opus/Sonnet/Haiku, Skills.sh, .cursorrules
|
|
|
|
**Theorie/Uitleg:**
|
|
- Model Deep Dive: wanneer Haiku/Sonnet/Opus
|
|
- Composer Mode Mastery: multi-file generatie
|
|
- @ Mentions Deep Dive: @Files, @Folders, @Code, @Docs, @Web
|
|
- Codebase Indexing optimaliseren
|
|
- .cursorrules files: project-specifieke instructies
|
|
- Cost Management: token usage monitoren
|
|
|
|
**Lesopdracht:** Bouw complexe Multi-Step Form Wizard met Cursor Composer + Claude + Skills (4 stappen, progress indicator, validation, localStorage, animations).
|
|
|
|
**Huiswerk:** Research .cursorrules voorbeelden, schrijf comprehensive .cursorrules voor jouw stack, test en itereer.
|
|
|
|
[→ Ga naar Les 13](Samenvattingen/Les13-Samenvatting.md)
|
|
|
|
---
|
|
|
|
## 3.2 Debugging & Testing
|
|
|
|
### Les 14: Debugging & Code Review met AI
|
|
|
|
**Tools:** Cursor, Browser DevTools, React DevTools
|
|
|
|
**Theorie/Uitleg:**
|
|
- Waarom AI effectief is voor debugging
|
|
- Error messages begrijpen (TypeError, ReferenceError, Hydration errors)
|
|
- Debugging workflow met AI: isoleer → verzamel context → vraag AI → begrijp
|
|
- Console.log debugging strategieën
|
|
- Browser DevTools basics (Console, Network, Elements)
|
|
- Code review met AI: kwaliteit, bugs, performance, security
|
|
- Refactoring met AI hulp
|
|
- 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.
|
|
|
|
**Huiswerk:** Code review je eigen eindproject met AI (3 files), refactor 1 complex component, maak persoonlijke debugging checklist.
|
|
|
|
[→ Ga naar Les 14](Samenvattingen/Les14-Samenvatting.md)
|
|
|
|
---
|
|
|
|
### Les 15: AI-Driven Testing & Quality Assurance
|
|
|
|
**Tools:** Cursor, Vitest, React Testing Library, MSW, Playwright
|
|
|
|
**Theorie/Uitleg:**
|
|
- Types van tests: unit, component, integration, E2E
|
|
- AI voor test generation
|
|
- Testing tools: Vitest, React Testing Library, MSW, Playwright
|
|
- Testing Supabase: mocking, RLS testen
|
|
- Code review met AI
|
|
- Code kwaliteit metrics: coverage >70%
|
|
|
|
**Lesopdracht:** Setup Vitest + RTL, schrijf tests met Cursor (unit, component, integration), bereik >70% coverage.
|
|
|
|
**Huiswerk:** Implementeer AI Code Review workflow: maak review agent, review 3 components, fix issues, add testing setup aan Starter Template.
|
|
|
|
[→ Ga naar Les 15](Samenvattingen/Les15-Samenvatting.md)
|
|
|
|
---
|
|
|
|
## 3.3 AI Features & Deployment
|
|
|
|
### Les 16: Vercel AI SDK - AI Features in je App
|
|
|
|
**Tools:** Vercel AI SDK, Next.js API Routes, OpenAI/Anthropic API, Cursor
|
|
|
|
**Theorie/Uitleg:**
|
|
- Vercel AI SDK introductie: waarom een SDK vs raw API calls
|
|
- Installatie en configuratie (`ai` package)
|
|
- Core hooks: `useChat` voor conversaties, `useCompletion` voor single completions
|
|
- Streaming responses: hoe het werkt, waarom het UX verbetert
|
|
- API Routes opzetten voor AI (OpenAI/Anthropic providers)
|
|
- Chat UI bouwen met `useChat` hook (messages, input, handleSubmit)
|
|
- Conversation history opslaan in Supabase
|
|
- 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.
|
|
|
|
**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.
|
|
|
|
[→ Ga naar Les 16](Samenvattingen/Les16-Samenvatting.md)
|
|
|
|
---
|
|
|
|
### Les 17: Advanced Deployment & Production (Vercel)
|
|
|
|
**Tools:** Vercel, GitHub Actions, Sentry/LogRocket, Lighthouse, Cursor
|
|
|
|
**Theorie/Uitleg:**
|
|
- Vercel deployment: edge network, serverless, Git integration
|
|
- Environment variables en secrets
|
|
- Custom domains en DNS
|
|
- Performance optimization: images, fonts, code splitting
|
|
- Vercel Analytics en Web Vitals
|
|
- CI/CD met GitHub Actions
|
|
- Security checklist voor productie
|
|
|
|
**Lesopdracht:** Production-ready deployment: pre-deployment checklist, performance optimization (Lighthouse 90+), deploy + monitoring setup.
|
|
|
|
**Huiswerk:** Maak Production Deployment Playbook met checklists, setup GitHub Actions, bouw monitoring dashboard.
|
|
|
|
[→ Ga naar Les 17](Samenvattingen/Les17-Samenvatting.md)
|
|
|
|
---
|
|
|
|
## 3.4 Eindproject
|
|
|
|
### Les 18: Eindopdracht Intro, Planning & Advanced Topics
|
|
|
|
**Tools:** Cursor, Supabase, Skills.sh, Planning tools
|
|
|
|
**Theorie/Uitleg:**
|
|
- Eindopdracht walkthrough: 10 project opties
|
|
- Requirements en grading rubric
|
|
- Timeline planning (2 weken)
|
|
- Project planning met Cursor als AI partner
|
|
- Database Schema Design workshop
|
|
- Geavanceerde architecture patterns
|
|
- Accessibility Deep Dive (WCAG AA)
|
|
|
|
**Lesopdracht:** Kies eindproject, maak gedetailleerde planning met AI (features, schema, architecture, timeline), setup GitHub repo + Next.js + Supabase + Skills.
|
|
|
|
**Huiswerk:** Start bouwen core features: Auth, database, basis layout, eerste core feature. Commit frequent, test elke feature, lever progress update + deployed preview URL.
|
|
|
|
[→ Ga naar Les 18](Samenvattingen/Les18-Samenvatting.md)
|
|
|
|
---
|
|
|
|
## Tech Stack
|
|
|
|
- **Frontend:** React, Next.js, Tailwind CSS
|
|
- **Backend:** Supabase (Postgres database, Auth)
|
|
- **AI Tools:** ChatGPT, Claude, v0.dev, OpenCode, Cursor, Claude Code
|
|
- **AI SDK:** Vercel AI SDK (`ai` package) voor AI features in apps
|
|
- **Testing:** Vitest, React Testing Library, Playwright
|
|
- **Deployment:** Vercel, GitHub Actions
|
|
|
|
---
|
|
|
|
## Structuur per Les
|
|
|
|
Elke uitgewerkte les bevat:
|
|
- `Les[xx]-Slide-Overzicht.md` - Slide deck structuur
|
|
- `Les[xx]-Lesplan.md` - Tijdsindeling en activiteiten
|
|
- `Les[xx]-Docenttekst.md` - Uitgebreide docenthandleiding
|
|
- `Les[xx]-Bijlage-A-Lesopdracht.md` - Lesopdracht (2 uur)
|
|
- `Les[xx]-Bijlage-B-Huiswerkopdracht.md` - Huiswerkopdracht (2 uur)
|