# 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 het verschil tussen Terminal en Desktop App
2. De OpenCode Desktop App installeren en configureren met een gratis model (Kimi K2.5 Free)
3. Werken met Plan mode en Build mode
4. @explore gebruiken om een codebase te verkennen (read-only)
5. Een bestaand GitHub project openen en lokaal draaien (in de ingebouwde terminal)
6. Wijzigingen maken met OpenCode en deployen via git push
7. De @ file mention gebruiken voor context

---

## Voorbereiding docent

### Technische setup
- [ ] OpenCode Terminal geïnstalleerd (`npm i -g opencode-ai@latest`)
- [ ] OpenCode Desktop App geïnstalleerd (opencode.ai/download)
- [ ] 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:12 | Wat is OpenCode? | 5 |
| 09:12-09:14 | Installatie (Terminal + Desktop App) | 6 |
| 09:14-09:15 | Build vs Plan mode | 7 |
| 09:15-09:17 | Shortcuts + @explore | 8-9 |
| 09:17-09:19 | Vercel deployment workflow | 10 |
| 09:19-09:20 | Optioneel: OpenAI API key | 11 |

**Belangrijk:** We gebruiken Kimi K2.5 Free - gratis, geen API key nodig!

---

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

| Tijd | Activiteit | Slides |
|------|------------|--------|
| 09:20-09:40 | **DEMO's:** Terminal, Desktop App, Plan mode, Build mode | 12 |

**Slide 12 blijft op scherm tijdens alle demo's:**
- DEMO 1: Terminal versie (5 min) - shortcuts tonen
- DEMO 2: Desktop App setup (5 min) - project laden + Kimi K2.5 Free
- DEMO 3: Plan mode (5 min) - project analyseren
- DEMO 4: Build mode (5 min) - nieuwe pagina maken

---

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

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

**Kernboodschap:** "Push naar GitHub = automatisch live op Vercel. Branches krijgen preview URLs!"

---

### 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 |
| Kimi K2.5 traag | Normaal, gratis model is iets langzamer |

---

## Alternatieve AI providers

| Provider | Kosten | Setup |
|----------|--------|-------|
| **Kimi K2.5 Free** | Gratis | Geen key nodig (via OpenCode Zen) |
| **OpenAI (GPT-4)** | Betaald (~$0.01/prompt) | API key via platform.openai.com |
| **Groq** | Gratis tier | API key via console.groq.com |
| **Ollama** | Gratis (lokaal) | Installatie + model download |

**Aanbeveling:** Start met Kimi K2.5 Free. OpenAI voor wie extra kwaliteit wil (kost geld).