# 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