3.1 KiB
Les 8: Claude Code - Agentic Coding Mode
Hoofdstuk
Hoofdstuk 3: Advanced (Les 8-18)
Beschrijving
Kennismaking met Claude Code - autonome AI coding agent die zelfstandig multi-file changes kan plannen en uitvoeren.
Te Behandelen
Wat is Claude Code?
- Agentic coding mode
- AI neemt initiatief
- Plant multi-step changes
- Bewerkt multiple files autonoom
Verschil met Chat-Based Coding
- Jij beschrijft WAT
- Claude Code figured out HOE en doet het
Claude Desktop Modes
- Chat
- Projects
- Cowork
- Code
Wanneer Claude Code Gebruiken
- Nieuwe features
- Grote refactoring
- Complexe bugs
- Test generation
Hoe Claude Code Werkt
- High-level instructie
- Claude analyseert
- Maakt plan
- Bewerkt files
- Runt tests
- Itereert
Skills in Claude Code
- Automatisch toegepast
Best Practices
- Geef duidelijke high-level doelen
- Laat autonoom werken
- Review changes zorgvuldig
Vergelijking
| Tool | Aanpak |
|---|---|
| OpenCode/WebStorm | Step-by-step guidance |
| Claude Code | Autonome agent |
Tools
- Claude Desktop (Code mode)
- Skills.sh
- Supabase
- Next.js
Lesopdracht (2 uur)
Deel 1: Claude Code Verkenning (30 min)
Setup:
- Open Claude Desktop
- Navigeer naar Code mode
- Installeer relevante Skills eerst
Complexe Taak:
"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."
- Laat Claude Code autonoom werken
- Kijk hoe het plant en uitvoert
- Vergelijk: hoe anders is dit dan manual prompting in OpenCode?
Deel 2: Autonome Feature Development (1u 30min)
Bouw User Dashboard met Stats:
Requirements:
- Haal user data uit Supabase
- Toon profile info
- 4 stat cards
- Activity feed
- Charts met recharts
- Alles responsive
- Loading states
- Error handling
Process:
- Geef high-level beschrijving
- Relevante context files (@mentions)
- Laat autonoom werken
Track:
- Hoeveel iteraties?
- Manual fixes nodig?
- Vergelijk tijd vs handmatig bouwen
Huiswerk (2 uur)
Deel 1: Complexe Refactoring (1 uur)
Neem Todo app uit Les 7, gebruik Claude Code voor grote refactoring:
"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."
- Laat autonoom handlen
- Verifieer dat alles werkt
- Documenteer: hoe goed handelde Claude Code het?
Deel 2: Comparison Essay (1 uur)
Schrijf vergelijkings essay (500 woorden):
OpenCode/WebStorm (step-by-step) vs Claude Code (autonome agent)
Vergelijk op:
- Autonomie niveau
- Snelheid
- Accuratesse
- Wanneer welke gebruiken
Include: Concrete voorbeelden
Final verdict: Tool voorkeur going forward?
Leerdoelen
Na deze les kan de student:
- Claude Code (agentic mode) activeren en gebruiken
- Het verschil uitleggen tussen chat-based en agentic coding
- High-level instructies geven voor autonome development
- Multi-file changes laten plannen en uitvoeren door Claude Code
- De juiste tool kiezen (OpenCode vs Claude Code) per situatie