# Lesplan Les 2: OpenCode - AI Code Assistants

---

## Lesgegevens

| Item | Details |
|------|---------|
| **Les** | 2 van 18 |
| **Onderwerp** | OpenCode - AI Code Assistants |
| **Deel** | 1: AI Foundations (Les 1-4) |
| **Duur** | 3 uur (180 minuten) |
| **Spreektijd** | ~50 minuten |
| **Hands-on** | ~85 minuten |
| **Pauze** | 15 minuten (10:15-10:30) |

---

## Leerdoelen

Na deze les kan de student:

1. Uitleggen wat OpenCode is en waarom het efficiënter is dan de v0/ChatGPT workflow
2. OpenCode installeren en configureren met OpenCode Zen (gratis)
3. Werken met Plan mode en Build mode
4. Een bestaand GitHub project clonen en lokaal draaien
5. Wijzigingen maken met OpenCode en deployen via git push
6. De @ file mention gebruiken voor context

---

## Voorbereiding docent

### Technische setup
- [ ] OpenCode Terminal geïnstalleerd (`npm i -g opencode-ai@latest`)
- [ ] Demo project: een v0 repo gekloond en werkend
- [ ] Git geconfigureerd

### Student voorkennis (uit Les 1)
- Hebben een werkende v0 website op Vercel
- Hebben de code in een GitHub repository
- Weten hoe GitHub Desktop werkt

---

## Lesverloop

### Blok 1: Welkom & Terugblik (10 minuten)

| Tijd | Activiteit | Slides |
|------|------------|--------|
| 09:00-09:05 | Welkom, planning | 1-2 |
| 09:05-09:08 | Terugblik Les 1: v0 workflow + problemen | 3 |
| 09:08-09:10 | Vandaag: OpenCode + verder bouwen | 4 |

**Kernboodschap:** "Jullie hebben werkende websites. Vandaag gaan we die uitbreiden met AI direct in je editor."

---

### Blok 2: Introductie OpenCode (10 minuten)

| Tijd | Activiteit | Slides |
|------|------------|--------|
| 09:10-09:13 | Wat is OpenCode? + OpenCode Zen | 5 |
| 09:13-09:15 | Build vs Plan mode | 6 |
| 09:15-09:18 | Shortcuts + @ mentions | 7-8 |
| 09:18-09:20 | Vercel deployment workflow | 9 |

**Belangrijk:** OpenCode Zen is gratis - geen API key nodig!

---

### Blok 3: Setup & Demo (20 minuten)

| Tijd | Activiteit | Slides |
|------|------------|--------|
| 09:20-09:25 | OpenCode installatie + Zen configureren | 10 |
| 09:25-09:30 | **DEMO:** Repo clonen, `npm install`, `npm run dev` | 11 |
| 09:30-09:35 | **DEMO:** Plan mode - project analyseren | 12 |
| 09:35-09:40 | **DEMO:** Build mode - component toevoegen | 13 |

---

### Blok 4: Git & Vercel Workflow (10 minuten)

| Tijd | Activiteit | Slides |
|------|------------|--------|
| 09:40-09:43 | **DEMO:** Git add, commit, push | 14 |
| 09:43-09:47 | **DEMO:** Vercel auto-deploy tonen | 15 |
| 09:47-09:50 | Nieuw project naar Vercel (voor huiswerk) | 16 |

**Kernboodschap:** "Push naar GitHub = automatisch live op Vercel"

---

### Blok 5: Hands-on Opdracht (85 minuten + 15 min pauze)

| Tijd | Activiteit | Slides |
|------|------------|--------|
| 09:50-09:55 | Opdracht uitleggen | 17 |
| 09:55-10:15 | Studenten werken (20 min) | - |
| 10:15-10:30 | ☕ **PAUZE** | - |
| 10:30-11:30 | Studenten werken (60 min) | - |

**Opdracht:** Maak een nieuwe pagina in je v0 project

1. Clone je v0 repo (of gebruik GitHub Desktop)
2. Run lokaal met `npm install` + `npm run dev`
3. Met OpenCode:
   - Maak nieuwe pagina (/about, /services, of /contact)
   - Voeg minimaal 2 componenten toe aan de pagina
   - Voeg link op homepage toe naar de nieuwe pagina
4. Push naar GitHub → bekijk live op Vercel

**Tijdens het werken:**
- Loop actief rond
- Help bij git/npm problemen
- Check: werkt lokale server?
- Aanmoedigen: meerdere keren pushen en deployen

**Tussentijdse check (10:45):**
- "Wie heeft lokaal draaien?"
- "Wie heeft een nieuwe pagina aangemaakt?"

**Check (11:15):**
- "Wie heeft de link op de homepage?"
- "Wie heeft 2x gepusht?"

---

### Blok 6: Afsluiting (30 minuten)

| Tijd | Activiteit | Slides |
|------|------------|--------|
| 11:30-11:40 | Resultaten delen (2-3 studenten) | 18 |
| 11:40-11:50 | Samenvatting + Q&A | 19 |
| 11:50-11:55 | Huiswerk uitleggen | 20 |
| 11:55-12:00 | Afsluiting | 21 |

---

## Materialen

- **Slide-Overzicht:** Les02-Slide-Overzicht.md
- **Lesopdracht:** Les02-Bijlage-A-Lesopdracht.md
- **Huiswerkopdracht:** Les02-Bijlage-B-Huiswerkopdracht.md

---

## Veelvoorkomende problemen

| Probleem | Oplossing |
|----------|-----------|
| OpenCode installeert niet | Check Node.js ≥18 |
| `npm install` faalt | Delete `node_modules`, probeer opnieuw |
| `npm run dev` werkt niet | Check of je in de juiste map staat |
| Git push rejected | `git pull` eerst, dan push |
| Vercel deployt niet | Check GitHub repo permissions |
| OpenCode Zen traag | Normaal, gratis model is iets langzamer |

---

## Alternatieve AI providers

| Provider | Kosten | Setup |
|----------|--------|-------|
| **OpenCode Zen (GLM 4.7)** | Gratis | Geen key nodig |
| **Groq** | Gratis tier | API key via console.groq.com |
| **Ollama** | Gratis (lokaal) | Installatie + model download |

**Aanbeveling:** Start met Zen. Ollama als thuiswerk voor wie privacy wil.