fix: les 2

This commit is contained in:
Tim Rijkse
2026-02-10 15:13:47 +01:00
parent d323cb004c
commit d6d279adac
6 changed files with 129 additions and 91 deletions

View File

@@ -45,15 +45,14 @@
### 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
- Kies je AI: OpenCode Zen, Groq, Ollama, **OpenAI**
---
### Slide 6: Installatie
- **Terminal:** `npm i -g opencode-ai@latest`
- **Desktop App:** opencode.ai/download
- **AI Model:** `Ctrl+O` → OpenCode Zen → GLM 4.7
- **Gratis AI Model:** `Ctrl+O` → OpenCode Zen → **Kimi K2.5 Free**
- "Wij gebruiken vandaag de Desktop App"
---
@@ -83,11 +82,20 @@
---
### Slide 10: Optioneel - OpenAI API Key
- **Wil je GPT-4?** platform.openai.com → API Keys
- Kopieer key (`sk-...`)
- In OpenCode: `Ctrl+O` → OpenAI → Plak key
- **Let op:** betaald (~$0.01/prompt)
- **Tip:** Start met Kimi K2.5 Free!
---
## BLOK 3: SETUP & DEMO (20 min)
---
### Slide 10: Demo - Terminal Versie
### Slide 11: Demo - Terminal Versie
- **LIVE DEMO:** `npm i -g opencode-ai@latest` + `opencode`
- Toon shortcuts: `Ctrl+K`, `Tab`, `@`, `Ctrl+O`
- Toon Plan/Build mode
@@ -95,7 +103,7 @@
---
### Slide 11: Desktop App
### Slide 12: Desktop App
- opencode.ai/download
- Zelfde features, vriendelijker
- **Ingebouwde terminal!**
@@ -103,22 +111,22 @@
---
### Slide 12: Demo - Desktop App Setup
### Slide 13: Demo - Desktop App Setup
- **DEMO in Desktop App:**
- Open project folder (v0 repo)
- `Ctrl+O` → OpenCode Zen → GLM 4.7
- `Ctrl+O` → OpenCode Zen → **Kimi K2.5 Free**
- In terminal: `npm install` + `npm run dev`
---
### Slide 13: Demo - Plan Mode
### Slide 14: Demo - Plan Mode
- **DEMO in Desktop App:**
- "Analyseer dit project. Hoe werkt de routing?"
- AI leest alleen, verandert niets
---
### Slide 14: Demo - Build Mode
### Slide 15: Demo - Build Mode
- Tab → 🔨
- **DEMO:** "Maak nieuwe pagina /about met hero en link op homepage"
- Toon resultaat in browser
@@ -129,7 +137,7 @@
---
### Slide 15: Demo - Git Push
### Slide 16: Demo - Git Push
- **DEMO:**
```bash
git add .
@@ -140,7 +148,7 @@ git push
---
### Slide 16: Demo - Vercel Auto-Deploy
### Slide 17: Demo - Vercel Auto-Deploy
- **DEMO:**
- Open Vercel dashboard
- Toon "Building..." status
@@ -148,7 +156,7 @@ git push
---
### Slide 17: Nieuw project naar Vercel
### Slide 18: Nieuw project naar Vercel
- **Voor huiswerk!** v0 was automatisch gekoppeld
- **DEMO:** Vercel → Add New Project → Import Git Repository
- Selecteer repo → Deploy
@@ -159,7 +167,7 @@ git push
---
### Slide 18: Opdracht (09:50-09:55)
### Slide 19: Opdracht (09:50-09:55)
**Blijft op scherm tijdens hands-on!**
@@ -169,7 +177,7 @@ STAP 1: PROJECT KLAARZETTEN
Open http://localhost:3000
STAP 2: OPENCODE DESKTOP APP
Open App → Open Folder → Ctrl+O → Zen → GLM 4.7
Open App → Open Folder → Ctrl+O → Zen → Kimi K2.5 Free
STAP 3: BOUW MET OPENCODE
□ Nieuwe pagina (/about, /services, /contact)
@@ -192,7 +200,7 @@ STAP 4: DEPLOY
Help bij opstartproblemen:
- Draait npm run dev?
- OpenCode Zen geselecteerd?
- Kimi K2.5 Free geselecteerd?
---
@@ -216,32 +224,33 @@ Help bij opstartproblemen:
---
### Slide 19: Resultaten
### Slide 20: Resultaten
- 2-3 studenten tonen werk
- "Wat toegevoegd? Hoeveel keer gepusht?"
---
### Slide 20: Samenvatting
### Slide 21: Samenvatting
- ✅ OpenCode Terminal + Desktop App
-OpenCode Zen (gratis)
-Gratis: Kimi K2.5 Free
- ✅ Optioneel: OpenAI met API key
- ✅ Plan vs Build mode
- ✅ @ file mentions
- ✅ Git push → auto deploy
---
### Slide 21: Huiswerk
### Slide 22: Huiswerk
- **Nieuw project vanaf scratch**
- create-next-app → 3 componenten
- Push naar GitHub
- **Vercel: Import Project** (zie slide 17!)
- **Vercel: Import Project** (zie slide 18!)
- **Inleveren:** Vercel + GitHub link in Teams
- **Les 3:** Iedereen langs, prompts bespreken
---
### Slide 22: Volgende les
### Slide 23: Volgende les
- OpenCode IDE Integratie
- VSCode plugin
- "Tot dan!"