novi-lessons/Les02-OpenCode/Les02-Docenttekst-Notes.md

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 (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: Demo - Terminal Versie

• LIVE DEMO: npm i -g opencode-ai@latest + opencode
• Toon shortcuts: Ctrl+K, Tab, @, Ctrl+O
• Toon Plan/Build mode
• "Krachtig! Maar we gaan iets gebruiksvriendelijkers gebruiken..."

---

Slide 11: Desktop App

• opencode.ai/download
• Zelfde features, vriendelijker
• Ingebouwde terminal!
• Studenten downloaden

---

Slide 12: Demo - Desktop App Setup

• DEMO in Desktop App:
• Open project folder (v0 repo)
• Ctrl+O → OpenCode Zen → GLM 4.7
• In terminal: npm install + npm run dev

---

Slide 13: Demo - Plan Mode

• DEMO in Desktop App:
• "Analyseer dit project. Hoe werkt de routing?"
• AI leest alleen, verandert niets

---

Slide 14: 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 15: Demo - Git Push

• DEMO:

git add .
git commit -m "Add about page"
git push

• Of: GitHub Desktop

---

Slide 16: Demo - Vercel Auto-Deploy

• DEMO:
• Open Vercel dashboard
• Toon "Building..." status
• Na ~1 min: live!

---

Slide 17: 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 18: 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 19: Resultaten

• 2-3 studenten tonen werk
• "Wat toegevoegd? Hoeveel keer gepusht?"

---

Slide 20: Samenvatting

• ✅ OpenCode Terminal + Desktop App
• ✅ OpenCode Zen (gratis)
• ✅ Plan vs Build mode
• ✅ @ file mentions
• ✅ Git push → auto deploy

---

Slide 21: Huiswerk

• Nieuw project vanaf scratch
• create-next-app → 3 componenten
• Push naar GitHub
• Vercel: Import Project (zie slide 17!)
• 300 woorden reflectie

---

Slide 22: Volgende les

• OpenCode IDE Integratie
• VSCode plugin
• "Tot dan!"