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

Les 2: OpenCode - AI Code Assistants

Deel 1: AI Foundations (Les 1-4) Totale slides: 21 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-13	20 min
4	Git & Vercel Workflow	14-16	10 min
5	Hands-on Opdracht	17	85 min
-	☕ PAUZE	-	15 min
6	Afsluiting	18-21	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 of Desktop App
• 🔒 Privacy-first

Vandaag: OpenCode Zen met GLM 4.7 (gratis, geen key nodig)

---

Slide 6: Build vs Plan Mode

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

Wisselen: Tab

Workflow: Plan → begrijpen → Build → bouwen

---

Slide 7: Keyboard Shortcuts

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

---

Slide 8: De @ file mention

@src/components/Hero.tsx
Maak de heading groter en voeg een gradient toe

• Typ @ + begin filename
• Fuzzy search door project
• AI krijgt exacte context

---

Slide 9: De Deployment Workflow

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

Jullie Vercel project is al gekoppeld aan GitHub.

---

BLOK 3: SETUP & DEMO (20 minuten)

Slide 10: Installatie

Terminal:

npm i -g opencode-ai@latest
opencode

AI Model:

• Ctrl+O → OpenCode Zen → GLM 4.7
• Gratis, geen key nodig!

---

Slide 11: Demo - Project Lokaal Draaien

Live demo:

1. Clone repo: git clone <github-url>
2. Open folder: cd project-naam
3. Install: npm install
4. Start: npm run dev
5. Open http://localhost:3000

---

Slide 12: Demo - Plan Mode

Live demo:

1. opencode in projectmap
2. Check: 📋 = Plan mode
3. Vraag: "Analyseer dit project en beschrijf de structuur"

(AI leest alleen, verandert niets)

---

Slide 13: Demo - Build Mode

Live demo:

1. Tab → wissel naar 🔨
2. Vraag: "Voeg een Testimonials sectie toe onder de hero"
3. Review de code
4. Accept

---

BLOK 4: GIT & VERCEL WORKFLOW (10 minuten)

Slide 14: Demo - Git Push

Live demo:

git add .
git commit -m "Add testimonials section"
git push

Of gebruik GitHub Desktop!

---

Slide 15: 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 16: 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 17: Aan de slag!

Opdracht: Breid je v0 website uit met OpenCode

Stappen:

1. Clone je repo (of pull latest)
2. npm install + npm run dev
3. Voeg toe met OpenCode:
   • Nieuwe sectie (Testimonials, Pricing, of FAQ)
   • Verbeteringen aan bestaande componenten
4. Push naar GitHub → bekijk live!

Doel: Minimaal 2 keer deployen naar Vercel

Tijd: 85 minuten (09:50-10:15 + 10:30-11:30)

☕ Pauze: 10:15-10:30

---

BLOK 6: AFSLUITING (30 minuten)

Slide 18: Resultaten delen

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

---

Slide 19: 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 20: 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
5. 300 woorden reflectie

Stappen voor Vercel: zie slide 16!

---

Slide 21: Volgende les

Les 3: OpenCode IDE Integratie

• VSCode plugin
• Inline code generatie
• Advanced prompting

Tot volgende week!