# Docenttekst Les 2: OpenCode - AI Code Assistants

> **Totale lesduur:** 3 uur (180 minuten)
> **Spreektijd docent:** ~50 minuten
> **Hands-on:** ~85 minuten
> **Pauze:** 15 minuten (10:15-10:30)

---

## BLOK 1: WELKOM & TERUGBLIK (10 minuten)

### Slide 1: Welkomstslide

**[09:00 - 09:05]**

"Welkom terug bij les 2! Vorige week hebben jullie allemaal een website gebouwd en online gezet. Vandaag gaan we een stap verder."

---

### Slide 2: Planning

**[bij slide 1]**

"De planning: tot 10 voor 10 doe ik uitleg en demo's. Dan gaan jullie aan de slag met jullie eigen projecten. Kwart over 10 hebben we een korte pauze, daarna werken jullie door tot half 12."

---

### Slide 3: Terugblik Les 1

**[09:05 - 09:08]**

"Jullie hebben nu: een werkende website op Vercel, code in GitHub, en ervaring met v0.dev."

_[Wijs naar de problemen]_

"Maar... veel copy/paste. Geen lokale development. Beperkte controle over je code. Vandaag gaan we dat oplossen."

---

### Slide 4: Vandaag - De volgende stap

**[09:08 - 09:10]**

"Vandaag werken we met jullie bestaande repos. We gaan ze lokaal draaien, uitbreiden met AI, en weer deployen naar Vercel. De volledige development workflow."

---

## BLOK 2: INTRODUCTIE OPENCODE (10 minuten)

### Slide 5: Wat is OpenCode?

**[09:10 - 09:13]**

"OpenCode - open source met meer dan 60.000 GitHub stars. Het is een AI coding assistant die direct in je project werkt."

"Het mooie: je kiest je eigen AI. Vandaag gebruiken we OpenCode Zen - dat is gratis en je hebt geen API key nodig."

---

### Slide 6: Build vs Plan Mode

**[09:13 - 09:15]**

"Belangrijk concept: twee modes."

"**Plan mode** - het klembord icoon. AI kan alleen lezen en analyseren. Perfect om je project te begrijpen."

"**Build mode** - de hamer. AI kan code schrijven en bestanden aanmaken."

"Wisselen doe je met Tab. Workflow: eerst Plan om te begrijpen, dan Build om te bouwen."

---

### Slide 7: Shortcuts

**[09:15 - 09:17]**

"Vier shortcuts om te onthouden:"

"Ctrl+K voor het command menu. Tab om te wisselen tussen modes. @ om bestanden te zoeken. Ctrl+O om je AI model te kiezen."

---

### Slide 8: De @ mention

**[09:17 - 09:18]**

"Die @ is krachtig. Je typt @, begint een bestandsnaam te typen, en het zoekt door je project. Bijvoorbeeld: @Hero.tsx - voeg een gradient toe. De AI krijgt dan exacte context."

---

### Slide 9: De Deployment Workflow

**[09:18 - 09:20]**

"Dit is de workflow die jullie vandaag gaan gebruiken:"

"Wijzig code met OpenCode. Git add, commit, push. En dan... Vercel pakt het automatisch op. Jullie project is al gekoppeld aan GitHub, dus elke push wordt automatisch live."

---

## BLOK 3: SETUP & DEMO (20 minuten)

### Slide 10: Installatie

**[09:20 - 09:25]**

_[Open terminal]_

"Installatie: npm i -g opencode-ai@latest. Dan opencode om te starten."

_[Demonstreer installatie]_

"Voor het AI model: Ctrl+O, kies OpenCode Zen, dan GLM 4.7. Gratis, geen key nodig."

_[Laat studenten ook installeren - help waar nodig]_

---

### Slide 11: Demo - Project Lokaal Draaien

**[09:25 - 09:30]**

_[LIVE DEMO]_

"Ik ga nu een v0 project clonen en lokaal draaien."

```bash
git clone [demo-repo-url]
cd project-naam
npm install
npm run dev
```

"Open localhost:3000 - daar is de website, lokaal op mijn machine."

_[Toon de website in browser]_

---

### Slide 12: Demo - Plan Mode

**[09:30 - 09:35]**

_[LIVE DEMO]_

"Nu start ik OpenCode in dit project. Ik zit in Plan mode - zie het klembord."

"Ik vraag: 'Analyseer dit project. Welke componenten zijn er en waar zou ik een testimonials sectie kunnen toevoegen?'"

_[Wacht op response]_

"Kijk - het leest alles, geeft een analyse, maar verandert niets. Perfect om eerst te begrijpen."

---

### Slide 13: Demo - Build Mode

**[09:35 - 09:40]**

_[LIVE DEMO]_

"Tab om naar Build mode te gaan. Nu vraag ik:"

"@src/components/ Maak een Testimonials component met 3 cards, responsive, en voeg toe aan de homepage."

_[Wacht op generatie]_

"Het maakt bestanden aan, past imports aan. Kijk in de browser - refresh - daar is de nieuwe sectie!"

---

## BLOK 4: GIT & VERCEL WORKFLOW (10 minuten)

### Slide 14: Demo - Git Push

**[09:40 - 09:45]**

_[LIVE DEMO]_

"Nu de belangrijke stap: deployen. Ik gebruik gewoon git."

```bash
git add .
git commit -m "Add testimonials section"
git push
```

"Of als je GitHub Desktop prefereert: changed files links, commit message, commit, push."

---

### Slide 15: Demo - Vercel Auto-Deploy

**[09:44 - 09:48]**

_[LIVE DEMO]_

"Open Vercel dashboard..."

_[Toon building status]_

"Zie je? Building. Vercel heeft de push opgepikt. Na ongeveer een minuut..."

_[Wacht/toon resultaat]_

"Live! De wijzigingen staan online. Dit is de workflow: code lokaal, push, automatisch live."

---

### Slide 16: Nieuw project naar Vercel

**[09:48 - 09:50]**

"Dit werkt omdat jullie v0 project al aan Vercel gekoppeld is. Maar voor het huiswerk maken jullie een **nieuw** project. Dan moet je Vercel handmatig koppelen."

_[Toon Vercel dashboard]_

"Stappen: Add New Project, Import Git Repository, selecteer je repo, Deploy. Dat is het."

"Dit hebben jullie nodig voor het huiswerk - een nieuw project vanaf scratch deployen."

---

## BLOK 5: HANDS-ON OPDRACHT (85 minuten + 15 min pauze)

### Slide 17: Aan de slag!

**[09:50 - 09:55]** _(5 minuten uitleg)_

"Jullie gaan nu jullie eigen v0 website uitbreiden."

"Stap 1: Clone je repo of pull latest. Stap 2: npm install, npm run dev. Stap 3: Voeg nieuwe secties toe met OpenCode. Stap 4: Push naar GitHub, bekijk live op Vercel."

"Doel: minimaal 2 keer deployen. Je mag kiezen wat je toevoegt - testimonials, pricing, FAQ, of verbeteringen aan bestaande componenten."

"Kwart over 10 hebben we een korte pauze van 15 minuten. Begin!"

---

### Hands-on Deel 1

**[09:55 - 10:15]** _(20 minuten werken)_

_[Loop actief rond, help bij opstartproblemen]_

**Let op:**
- Draait npm run dev?
- Lukt git clone/pull?
- OpenCode Zen geselecteerd?

---

### ☕ PAUZE

**[10:15 - 10:30]** _(15 minuten)_

"Oké, pauze! Om half 11 gaan we verder."

---

### Hands-on Deel 2

**[10:30 - 11:30]** _(60 minuten werken)_

_[Loop actief rond]_

**Let op:**
- Zit student in juiste mode?
- Gebruikt @ mentions?
- Lukt git push?

**Check [10:45]:**
"Wie heeft de website lokaal draaien? Wie heeft al gepusht naar Vercel?"

**Check [11:15]:**
"Hoeveel mensen hebben al 2x gepusht? Wie zit vast?"

---

## BLOK 6: AFSLUITING (30 minuten)

### Slide 18: Resultaten delen

**[11:30 - 11:40]**

"Stop met coderen. Wie wil laten zien wat ze hebben gebouwd?"

_[2-3 studenten tonen hun werk]_

"Wat heb je toegevoegd? Hoeveel keer gepusht? Wat ging goed, wat was lastig?"

---

### Slide 19: Samenvatting

**[11:40 - 11:50]**

"Wat hebben we gedaan vandaag?"

- OpenCode: open-source AI assistant
- OpenCode Zen: gratis AI modellen
- Plan vs Build mode
- @ file mentions voor context
- De volledige workflow: lokaal ontwikkelen, pushen, automatisch live

"Van v0 copy/paste naar echte lokale development."

_[Ruimte voor vragen]_

---

### Slide 20: Huiswerk

**[11:50 - 11:55]**

"Thuis: een nieuw project vanaf scratch. Niet je v0 project uitbreiden, maar helemaal nieuw beginnen."

"Stappen: create-next-app, bouw 3 componenten, push naar GitHub, en dan - belangrijk - Vercel Import Project. Zoals ik eerder liet zien."

"In de huiswerkopdracht staan alle stappen uitgeschreven. Plus 300 woorden reflectie."

---

### Slide 21: Afsluiting

**[11:55 - 12:00]**

"Volgende week: OpenCode in je IDE. Dan gaan we de VSCode plugin gebruiken voor nog sneller werken."

"Vragen? Anders tot volgende week!"

---

## Timing Overzicht

| Blok | Tijd | Duur |
|------|------|------|
| 1. Welkom & Terugblik | 09:00-09:10 | 10 min |
| 2. Intro OpenCode | 09:10-09:20 | 10 min |
| 3. Setup & Demo | 09:20-09:40 | 20 min |
| 4. Git & Vercel | 09:40-09:50 | 10 min |
| 5. Hands-on (deel 1) | 09:50-10:15 | 25 min |
| ☕ PAUZE | 10:15-10:30 | 15 min |
| 5. Hands-on (deel 2) | 10:30-11:30 | 60 min |
| 6. Afsluiting | 11:30-12:00 | 30 min |

**Spreektijd:** ~50 min | **Hands-on:** ~85 min | **Pauze:** 15 min