# 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
- Kies je AI: **OpenCode Zen** (gratis!)
- Geen API key nodig

---

### Slide 6: Build vs Plan Mode
- **Plan (📋):** leest, analyseert, verandert NIETS
- **Build (🔨):** schrijft code, maakt bestanden
- Wisselen: `Tab`

---

### Slide 7: Shortcuts
- `Ctrl+K` = command menu
- `Tab` = wissel mode
- `@` = zoek bestanden
- `Ctrl+O` = model kiezen

---

### Slide 8: @ Mention
- Typ `@` + filename
- AI krijgt exacte context
- Voorbeeld: @Hero.tsx voeg gradient toe

---

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

---

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

---

### Slide 10: Installatie
- **DEMO + studenten doen mee:**
```bash
npm i -g opencode-ai@latest
opencode
```
- `Ctrl+O` → OpenCode Zen → GLM 4.7

---

### Slide 11: Demo - Lokaal draaien
- **DEMO:**
```bash
git clone [url]
npm install
npm run dev
```
- Open localhost:3000

---

### Slide 12: Demo - Plan Mode
- **DEMO:**
- "Analyseer dit project. Hoe werkt de routing?"
- AI leest alleen, verandert niets

---

### Slide 13: Demo - Build Mode
- Tab → 🔨
- **DEMO:** "Maak nieuwe pagina /about met hero en link op homepage"
- Toon resultaat in browser

---

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

---

### Slide 14: Demo - Git Push
- **DEMO:**
```bash
git add .
git commit -m "Add about page"
git push
```
- Of: GitHub Desktop

---

### Slide 15: Demo - Vercel Auto-Deploy
- **DEMO:**
- Open Vercel dashboard
- Toon "Building..." status
- Na ~1 min: live!

---

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

---

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

---

### Slide 17: Opdracht (09:50-09:55)
- **Maak nieuwe pagina in je v0 project:**
  1. Clone/pull repo
  2. npm install + npm run dev
  3. Maak nieuwe pagina (/about, /services, /contact)
  4. Voeg link op homepage + push → live op Vercel
- **Doel:** minimaal 2x deployen
- "Kwart over 10 pauze!"

---

### Hands-on deel 1 (09:55-10:15)

**20 minuten werken** (25 min incl. uitleg)

Help bij opstartproblemen:
- Draait npm run dev?
- OpenCode Zen geselecteerd?

---

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

"Om half 11 gaan we verder"

---

### Hands-on deel 2 (10:30-11:30)

**60 minuten werken**

**Checks:**
- 10:45 - "Wie draait lokaal?"
- 11:15 - "Wie heeft 2x gepusht?"

---

## BLOK 6: AFSLUITING (30 min)

---

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

---

### Slide 19: Samenvatting
- ✅ OpenCode + Zen (gratis)
- ✅ Plan vs Build mode
- ✅ @ file mentions
- ✅ Git push → auto deploy
- ✅ Van copy/paste → lokale dev

---

### Slide 20: Huiswerk
- **Nieuw project vanaf scratch**
- create-next-app → 3 componenten
- Push naar GitHub
- **Vercel: Import Project** (zie slide 16!)
- 300 woorden reflectie

---

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