449 lines
17 KiB
Markdown
449 lines
17 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 Made Easy met Supabase + AI](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 | [Supabase Automation - Cron Jobs & Webhooks](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 | [Supabase Advanced - Realtime & Edge Functions](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, backend development met Supabase, 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 Backend & Database
|
|
|
|
### 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 Made Easy met Supabase + AI + Skills
|
|
|
|
**Tools:** OpenCode/WebStorm, Supabase, supabase-postgres-best-practices skill, Next.js
|
|
|
|
**Theorie/Uitleg:**
|
|
- Supabase overview: Postgres, Auth, Storage, Realtime, Edge Functions
|
|
- Waarom Supabase + AI perfect combo
|
|
- Database design met AI + Skills
|
|
- Row Level Security (RLS) policies
|
|
- TypeScript types auto-genereren
|
|
- Supabase client setup en CRUD operaties
|
|
|
|
**Lesopdracht:** Bouw Todo App backend: database schema met AI, RLS policies, Next.js integratie met CRUD.
|
|
|
|
**Huiswerk:** Extend Todo app met categories, user profile (avatar upload), stats dashboard. 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: Supabase Automation - Cron Jobs, Webhooks & AI Workflows
|
|
|
|
**Tools:** Supabase (Edge Functions, pg_cron), Claude/OpenAI API, Resend/SendGrid
|
|
|
|
**Theorie/Uitleg:**
|
|
- Types van automation: scheduled tasks, event-driven, AI-powered
|
|
- Supabase Edge Functions (Deno, TypeScript, serverless)
|
|
- Scheduled Edge Functions (cron jobs)
|
|
- Webhook Edge Functions
|
|
- AI integratie in Edge Functions
|
|
- AI Automation workflow patterns
|
|
|
|
**Lesopdracht:** Bouw 2 automations: Daily Summary Email (cron → AI samenvatting → email), AI Content Moderation (webhook bij nieuwe todo → AI check → enrich/flag).
|
|
|
|
**Huiswerk:** Bouw intelligente notificaties (gepersonaliseerd AI bericht), AI Task Breakdown Agent (complex todo → auto subtaken). 4 werkende automations + reflectie.
|
|
|
|
[→ 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 Testing & Advanced Supabase
|
|
|
|
### Les 14: Supabase Advanced - Realtime, Storage & Edge Functions
|
|
|
|
**Tools:** Supabase (Realtime, Storage, Edge Functions), Cursor, OpenAI/Anthropic API
|
|
|
|
**Theorie/Uitleg:**
|
|
- Realtime Subscriptions: table changes, channels, presence
|
|
- Supabase Storage: uploads, buckets, transformations, signed URLs
|
|
- Edge Functions Deep Dive: Deno runtime, AI integratie
|
|
- Advanced Authentication: social logins, magic links
|
|
- Error handling & debugging
|
|
|
|
**Lesopdracht:** Level up Todo app met 3 features: Realtime Collaboration, File Attachments met Storage, AI-Powered Task Suggestions via Edge Function.
|
|
|
|
**Huiswerk:** Bouw Production-Ready Supabase Starter Template met complete auth, database examples, realtime demo, storage demo, Edge Function, documentatie.
|
|
|
|
[→ 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: Building AI-Powered Features & Workflow Automation
|
|
|
|
**Tools:** Supabase Edge Functions, OpenAI/Anthropic API, n8n/Pipedream, Cursor
|
|
|
|
**Theorie/Uitleg:**
|
|
- AI APIs overzicht: OpenAI, Anthropic, pricing, rate limits
|
|
- Veel voorkomende AI features: tekst generatie, samenvatting, chatbots
|
|
- API integratie patterns: streaming, error handling, caching
|
|
- API keys verbergen via Edge Functions
|
|
- Streaming UI implementeren
|
|
- Workflow automation met n8n/Pipedream
|
|
|
|
**Lesopdracht:** Bouw 1 AI-powered feature (Blog Generator/Summarizer/Writing Assistant) + 1 workflow automation (Smart Form Processor/Daily AI Summary).
|
|
|
|
**Huiswerk:** Polish AI feature (streaming, history, rate limiting), bouw 2 automations voor eindopdracht, documentatie.
|
|
|
|
[→ 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, Auth, Storage, Realtime, Edge Functions)
|
|
- **AI Tools:** ChatGPT, Claude, v0.dev, OpenCode, Cursor, Claude Code
|
|
- **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)
|