# Les 2 - Keynote Notes

**Spreektijd:** ~50 min | **Hands-on:** ~85 min | **Pauze:** 15 min (10:15-10:30)

---

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

---

### Slide 1: Welkom
- "Welkom terug bij les 2!"
- "Vandaag: jullie projecten uitbreiden"

---

### Slide 2: Planning
- 09:00-09:20: Intro OpenCode
- 09:20-09:50: Setup + Demo's
- 09:50-10:15: Hands-on start
- 10:15-10:30: PAUZE
- 10:30-11:30: Hands-on vervolg
- 11:30-12:00: Resultaten + Afsluiting

---

### Slide 3: Terugblik Les 1
- **Jullie hebben:** website op Vercel, code in GitHub
- **Maar:** veel copy/paste, geen lokale dev
- "Vandaag gaan we dat oplossen"

---

### Slide 4: Vandaag
- Bestaande repos lokaal draaien
- Uitbreiden met AI
- Deployen via git push

---

## BLOK 2: INTRO OPENCODE (10 min)

---

### Slide 5: Wat is OpenCode?
- Open source, 60.000+ stars
- Terminal én **Desktop App** (met ingebouwde terminal!)
- Kies je AI: OpenCode Zen, Groq, Ollama, **OpenAI**

---

### Slide 6: Installatie
- **Terminal:** `npm i -g opencode-ai@latest`
- **Desktop App:** opencode.ai/download
- **Gratis AI Model:** `Ctrl+X M` → OpenCode Zen → **Kimi K2.5 Free**
- "Wij gebruiken vandaag de Desktop App"

---

### Slide 7: Build vs Plan Mode
- **Plan (📋):** leest, analyseert, verandert NIETS
- **Build (🔨):** schrijft code, maakt bestanden
- Wisselen: `Tab`
- **💡 Eén prompt per taak!**

---

### Slide 8: Shortcuts
- `Ctrl+P` = command menu
- `Tab` = wissel mode
- `@` = zoek bestanden (context!)
- `@explore` = codebase verkennen (read-only)

---

### Slide 9: @explore - Codebase Verkennen
- **Read-only** subagent
- Zoekt bestanden, vindt keywords
- Maakt **geen wijzigingen**
- Voorbeeld: `@explore how does routing work?`

---

### Slide 10: Deployment Workflow
- Wijzig code → git add → commit → push
- Vercel pakt automatisch op
- Jullie repos zijn al gekoppeld!

---

### Slide 11: Optioneel - OpenAI API Key
- **Wil je GPT-4?** platform.openai.com → API Keys
- In OpenCode: `Ctrl+X M` → OpenAI → Plak key
- **Let op:** betaald (~$0.01/prompt)
- **Tip:** Start met Kimi K2.5 Free!

---

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

---

### Slide 12: Live Demo Overzicht (blijft op scherm)

**DEMO 1: Terminal (5 min)**
- `opencode` → toon Ctrl+P, Tab, @, Ctrl+X M
- "Krachtig, maar Desktop App is vriendelijker..."

**DEMO 2: Desktop App Setup (5 min)**
- Open App → Open Folder → v0 project
- Ctrl+X M → OpenCode Zen → Kimi K2.5 Free
- Terminal: `npm install && npm run dev`

**DEMO 3: Plan Mode (5 min)**
- 📋 "Analyseer dit project. Hoe werkt de routing?"
- AI leest alleen, verandert niets

**DEMO 4: Build Mode (5 min)**
- Tab → 🔨
- "Maak nieuwe pagina /about met hero"
- Review → Accept → Refresh browser

---

## BLOK 4: GIT & VERCEL (10 min)

---

### Slide 13: Demo - Git Push & Vercel
- **DEMO:**
```bash
git add .
git commit -m "Add about page"
git push
```
- Of: GitHub Desktop
- → Open Vercel dashboard → "Building..." → Live!

---

### Slide 14: Preview Deployments
- **Elke branch = eigen preview URL**
- main → productie | feature/x → preview URL
- Test zonder productie te breken
- Deel preview link met team/klant
- **DEMO:** nieuwe branch pushen → toon preview in Vercel

---

### Slide 15: Nieuw project naar Vercel
- **Voor huiswerk!** v0 was automatisch gekoppeld
- Vercel → Add New Project → Import Git Repository
- Selecteer repo → Deploy

---

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

---

### Slide 16: Opdracht (blijft op scherm)

```
STAP 1: PROJECT KLAARZETTEN
  git clone → cd → npm install → npm run dev

STAP 2: OPENCODE DESKTOP APP
  Open App → Open Folder → Ctrl+X M → Zen → Kimi K2.5 Free

STAP 3: BOUW MET OPENCODE
  □ Nieuwe pagina (/about, /services, /contact)
  □ Voeg 2 componenten toe
  □ Voeg link op homepage
  💡 Eén prompt per taak!

STAP 4: DEPLOY
  git add . → git commit → git push
```

**Doel:** minimaal 2x deployen | ☕ Pauze: 10:15-10:30

---

### Hands-on deel 1 (09:55-10:15)
- Help bij opstartproblemen
- Draait npm run dev?
- Kimi K2.5 Free geselecteerd?

---

### ☕ PAUZE (10:15-10:30)

---

### Hands-on deel 2 (10:30-11:30)
**Checks:**
- 10:45 - "Wie draait lokaal?"
- 11:15 - "Wie heeft 2x gepusht?"

---

## BLOK 6: AFSLUITING (30 min)

---

### Slide 17: Resultaten
- 2-3 studenten tonen werk
- "Wat toegevoegd? Hoeveel keer gepusht?"

---

### Slide 18: Samenvatting
- ✅ OpenCode Terminal + Desktop App
- ✅ Gratis: Kimi K2.5 Free
- ✅ Optioneel: OpenAI met API key
- ✅ Plan vs Build mode
- ✅ @explore voor codebase verkennen
- ✅ Git push → auto deploy

---

### Slide 19: Huiswerk
- **Nieuw project vanaf scratch**
- create-next-app → 3 componenten
- Push naar GitHub
- **Vercel: Import Project** (zie slide 15!)
- **Inleveren:** Vercel + GitHub link in Teams
- **Les 3:** Iedereen langs, prompts bespreken

---

### Slide 20: Volgende les
- OpenCode IDE Integratie
- VSCode plugin
- "Tot dan!"