novi-lessons/Les02-OpenCode/Les02-Slide-Overzicht.md

Les 2: OpenCode - AI Code Assistants

Deel 1: AI Foundations (Les 1-4) Totale slides: 22 Lesduur: 3 uur (180 minuten) Spreektijd: ~50 min | Hands-on: ~85 min | Pauze: 15 min

---

Slide-structuur per blok

Blok	Onderwerp	Slides	Tijd
1	Welkom & Terugblik	1-4	10 min
2	Introductie OpenCode	5-9	10 min
3	Setup & Demo	10-14	20 min
4	Git & Vercel Workflow	15-17	10 min
5	Hands-on Opdracht	18	85 min
-	☕ PAUZE	-	15 min
6	Afsluiting	19-22	30 min

---

BLOK 1: WELKOM & TERUGBLIK (10 minuten)

Slide 1: Welkomstslide

Titel: Les 2: OpenCode - AI Code Assistants

---

Slide 2: Planning vandaag

Tijd	Onderwerp
09:00-09:20	Terugblik + 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 - Wat hebben we?

Jullie hebben:

• ✅ Een werkende website op Vercel
• ✅ Code in een GitHub repository
• ✅ Ervaring met v0.dev

Maar:

• Veel copy/paste naar v0
• Geen lokale development
• Beperkte controle

---

Slide 4: Vandaag - De volgende stap

OpenCode: AI direct in je development workflow

• ✅ Werk met je bestaande repository
• ✅ Draai lokaal, zie wijzigingen direct
• ✅ Push naar GitHub → automatisch live op Vercel

---

BLOK 2: INTRODUCTIE OPENCODE (10 minuten)

Slide 5: Wat is OpenCode?

• 🌟 Open source (60.000+ GitHub stars)
• 🔌 Kies je AI: OpenCode Zen (gratis!), Groq, Ollama
• 🖥️ Terminal én Desktop App (met ingebouwde terminal!)
• 🔒 Privacy-first

Vandaag: Desktop App + OpenCode Zen (gratis, geen key nodig)

---

Slide 6: Installatie

Terminal versie:

npm i -g opencode-ai@latest

Desktop App:

• Download: opencode.ai/download
• Installeer voor jouw OS (Mac/Windows)

AI Model (gratis):

• Ctrl+O → OpenCode Zen → GLM 4.7

---

Slide 7: Build vs Plan Mode

Mode	Icoon	Wat het doet
Plan	📋	Analyseert, verandert NIETS
Build	🔨	Schrijft code, maakt bestanden

Wisselen: Tab

💡 Tip: Eén prompt per taak!

• ❌ "Maak een complete website met header, hero en footer"
• ✅ "Maak een Header component" → "Voeg hero toe" → "Maak footer"

---

Slide 8: Keyboard Shortcuts

Shortcut	Actie
Ctrl+K	Command menu
Tab	Wissel Build/Plan
@	Zoek bestanden
Ctrl+O	Model selectie

---

Slide 9: De Deployment Workflow

1. Wijzig code met OpenCode
2. git add .
3. git commit -m "Add about page"
4. git push
5. ✨ Vercel deployt automatisch!

Jullie Vercel project is al gekoppeld aan GitHub.

---

BLOK 3: SETUP & DEMO (20 minuten)

Slide 10: Demo - Terminal Versie

Live demo:

opencode

Laat zien in actie:

• Plan mode: "Analyseer dit project"
• Build mode: Tab → "Voeg een component toe"
• @ mention: @src/components/
• Shortcuts: Ctrl+K, Ctrl+O

→ Krachtig! Maar we gaan iets gebruiksvriendelijkers gebruiken...

---

Slide 11: Desktop App

Download: opencode.ai/download

Voordelen:

• Zelfde features als terminal
• Vriendelijkere interface
• Ingebouwde terminal!

Dit gaan we vandaag gebruiken.

---

Slide 12: Demo - Desktop App Setup

Live demo:

1. Open Desktop App
2. Open project folder (je v0 repo)
3. Ctrl+O → OpenCode Zen → GLM 4.7
4. In terminal: npm install + npm run dev

---

Slide 13: Demo - Plan Mode

Live demo in Desktop App:

1. Check: 📋 = Plan mode
2. Vraag: "Analyseer dit project. Hoe werkt de routing?"

(AI leest alleen, verandert niets)

---

Slide 14: Demo - Build Mode

Live demo in Desktop App:

1. Tab → wissel naar 🔨
2. Vraag: "Maak een nieuwe pagina /about met hero en link op homepage"
3. Review de code
4. Accept
5. Refresh browser → zie resultaat!

---

BLOK 4: GIT & VERCEL WORKFLOW (10 minuten)

Slide 15: Demo - Git Push

Live demo (in Desktop App terminal):

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

Of gebruik GitHub Desktop!

---

Slide 16: Demo - Vercel Auto-Deploy

Live demo:

1. Open Vercel dashboard
2. Zie: "Building..."
3. Na ~1 minuut: live op je URL!

Tip: Vercel toont ook preview voor branches

---

Slide 17: Nieuw project naar Vercel (voor huiswerk)

Stappen voor een nieuw project:

1. Maak GitHub repository (github.com → New)
2. Push je code naar GitHub
3. Vercel: "Add New Project"
4. "Import Git Repository"
5. Selecteer je repo → Deploy

Dit heb je nodig voor het huiswerk!

---

BLOK 5: HANDS-ON OPDRACHT (85 minuten)

Slide 18: Aan de slag! (blijft op scherm)

┌─────────────────────────────────────────────────────┐
│  STAP 1: PROJECT KLAARZETTEN                        │
│  ─────────────────────────────────────────────────  │
│  git clone https://github.com/[user]/[repo].git     │
│  cd [repo]                                          │
│  npm install                                        │
│  npm run dev                                        │
│  → Open http://localhost:3000                       │
├─────────────────────────────────────────────────────┤
│  STAP 2: OPENCODE DESKTOP APP                       │
│  ─────────────────────────────────────────────────  │
│  1. Open Desktop App                                │
│  2. File → Open Folder → je project                 │
│  3. Ctrl+O → OpenCode Zen → GLM 4.7                 │
├─────────────────────────────────────────────────────┤
│  STAP 3: BOUW MET OPENCODE                          │
│  ─────────────────────────────────────────────────  │
│  □ Maak 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 -m "Add about page"                     │
│  git push                                           │
│  → Check Vercel dashboard                           │
└─────────────────────────────────────────────────────┘

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

---

BLOK 6: AFSLUITING (30 minuten)

Slide 19: Resultaten delen

• Wie wil laten zien?
• Wat heb je toegevoegd?
• Hoeveel keer gepusht?

---

Slide 20: Samenvatting

• ✅ OpenCode: open-source AI assistant
• ✅ OpenCode Zen: gratis AI modellen
• ✅ Plan vs Build mode
• ✅ @ file mentions voor context
• ✅ Git push → Vercel auto-deploy
• ✅ Van v0 copy/paste → lokale development

---

Slide 21: Huiswerk

Opdracht: Nieuw project vanaf scratch

1. npx create-next-app@latest
2. Bouw 3 componenten met OpenCode
3. Push naar GitHub
4. Vercel: Import Project → Deploy

Inleveren via Teams:

• Link naar Vercel
• Link naar GitHub

In Les 3: We gaan iedereen langs en bespreken je prompts!

Stappen voor Vercel: zie slide 17!

---

Slide 22: Volgende les

Les 3: OpenCode IDE Integratie

• VSCode plugin
• Inline code generatie
• Advanced prompting

Tot volgende week!