157 lines
3.4 KiB
Markdown
157 lines
3.4 KiB
Markdown
# Les 8: Claude Code - Agentic Coding Mode
|
|
|
|
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
|
>
|
|
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
|
|
> - Les08-Slide-Overzicht.md
|
|
> - Les08-Lesplan.md
|
|
> - Les08-Docenttekst.md
|
|
> - Les08-Bijlage-A-Lesopdracht.md
|
|
> - Les08-Bijlage-B-Huiswerkopdracht.md
|
|
|
|
---
|
|
|
|
## 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
|
|
1. High-level instructie
|
|
2. Claude analyseert
|
|
3. Maakt plan
|
|
4. Bewerkt files
|
|
5. Runt tests
|
|
6. 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
|