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, 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:

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!"