rubberducky/novi-lessons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: better slides

Browse Source
This commit is contained in:
Tim Rijkse
2026-02-10 18:01:49 +01:00
parent d6d279adac
commit 43c6a9a5b6
5 changed files with 181 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Les02-OpenCode/Les02-Bijlage-A-Lesopdracht.md
View File

@@ -58,7 +58,7 @@ Open http://localhost:3000 - je ziet je website!
3. Selecteer je v0 project
### Selecteer gratis AI model
1. Druk `Ctrl+O`
1. Druk `Ctrl+X M` (eerst Ctrl+X, dan M)
2. Kies "OpenCode Zen"
3. Selecteer "Kimi K2.5 Free"

104
Les02-OpenCode/Les02-Docenttekst-Notes.md
View File

@@ -52,7 +52,7 @@
### Slide 6: Installatie
- **Terminal:** `npm i -g opencode-ai@latest`
- **Desktop App:** opencode.ai/download
- **Gratis AI Model:** `Ctrl+O` → OpenCode Zen → **Kimi K2.5 Free**
- **Gratis AI Model:** `Ctrl+X M` → OpenCode Zen → **Kimi K2.5 Free**
- "Wij gebruiken vandaag de Desktop App"
---
@@ -62,30 +62,35 @@
- **Build (🔨):** schrijft code, maakt bestanden
- Wisselen: `Tab`
- **💡 Eén prompt per taak!**
- ❌ "Maak complete website"
- ✅ "Maak header" → "Voeg hero toe" → etc.
---
### Slide 8: Shortcuts
- `Ctrl+K` = command menu
- `Ctrl+P` = command menu
- `Tab` = wissel mode
- `@` = zoek bestanden (context!)
- `Ctrl+O` = model kiezen
- `@explore` = codebase verkennen (read-only)
---
### Slide 9: Deployment Workflow
### 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 10: Optioneel - OpenAI API Key
### Slide 11: Optioneel - OpenAI API Key
- **Wil je GPT-4?** platform.openai.com → API Keys
- Kopieer key (`sk-...`)
- In OpenCode: `Ctrl+O` → OpenAI → Plak key
- In OpenCode: `Ctrl+X M` → OpenAI → Plak key
- **Let op:** betaald (~$0.01/prompt)
- **Tip:** Start met Kimi K2.5 Free!
@@ -95,41 +100,25 @@
---
### 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
- "Krachtig! Maar we gaan iets gebruiksvriendelijkers gebruiken..."
### 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..."
### Slide 12: Desktop App
- opencode.ai/download
- Zelfde features, vriendelijker
- **Ingebouwde terminal!**
- Studenten downloaden
**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`
---
### Slide 13: Demo - Desktop App Setup
- **DEMO in Desktop App:**
- Open project folder (v0 repo)
- `Ctrl+O` → OpenCode Zen → **Kimi K2.5 Free**
- In terminal: `npm install` + `npm run dev`
---
### Slide 14: Demo - Plan Mode
- **DEMO in Desktop App:**
- "Analyseer dit project. Hoe werkt de routing?"
**DEMO 3: Plan Mode (5 min)**
- 📋 "Analyseer dit project. Hoe werkt de routing?"
- AI leest alleen, verandert niets
---
### Slide 15: Demo - Build Mode
**DEMO 4: Build Mode (5 min)**
- Tab → 🔨
- **DEMO:** "Maak nieuwe pagina /about met hero en link op homepage"
- Toon resultaat in browser
- "Maak nieuwe pagina /about met hero"
- Review → Accept → Refresh browser
---
@@ -137,7 +126,7 @@
---
### Slide 16: Demo - Git Push
### Slide 13: Demo - Git Push
- **DEMO:**
```bash
git add .
@@ -148,17 +137,16 @@ git push
---
### Slide 17: Demo - Vercel Auto-Deploy
- **DEMO:**
### Slide 14: Demo - Vercel Auto-Deploy
- Open Vercel dashboard
- Toon "Building..." status
- Na ~1 min: live!
---
### Slide 18: Nieuw project naar Vercel
### Slide 15: Nieuw project naar Vercel
- **Voor huiswerk!** v0 was automatisch gekoppeld
- **DEMO:** Vercel → Add New Project → Import Git Repository
- Vercel → Add New Project → Import Git Repository
- Selecteer repo → Deploy
---
@@ -167,17 +155,14 @@ git push
---
### Slide 19: Opdracht (09:50-09:55)
**Blijft op scherm tijdens hands-on!**
### Slide 16: Opdracht (blijft op scherm)
```
STAP 1: PROJECT KLAARZETTEN
git clone → cd → npm install → npm run dev
Open http://localhost:3000
STAP 2: OPENCODE DESKTOP APP
Open App → Open Folder → Ctrl+O → Zen → Kimi K2.5 Free
Open App → Open Folder → Ctrl+X M → Zen → Kimi K2.5 Free
STAP 3: BOUW MET OPENCODE
□ Nieuwe pagina (/about, /services, /contact)
@@ -187,7 +172,6 @@ STAP 3: BOUW MET OPENCODE
STAP 4: DEPLOY
git add . → git commit → git push
Check Vercel dashboard
```
**Doel:** minimaal 2x deployen | ☕ Pauze: 10:15-10:30
@@ -195,10 +179,7 @@ STAP 4: DEPLOY
---
### Hands-on deel 1 (09:55-10:15)
**20 minuten werken** (25 min incl. uitleg)
Help bij opstartproblemen:
- Help bij opstartproblemen
- Draait npm run dev?
- Kimi K2.5 Free geselecteerd?
@@ -206,14 +187,9 @@ Help bij opstartproblemen:
### ☕ 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?"
@@ -224,33 +200,33 @@ Help bij opstartproblemen:
---
### Slide 20: Resultaten
### Slide 17: Resultaten
- 2-3 studenten tonen werk
- "Wat toegevoegd? Hoeveel keer gepusht?"
---
### Slide 21: Samenvatting
### Slide 18: Samenvatting
- ✅ OpenCode Terminal + Desktop App
- ✅ Gratis: Kimi K2.5 Free
- ✅ Optioneel: OpenAI met API key
- ✅ Plan vs Build mode
- ✅ @ file mentions
- ✅ @explore voor codebase verkennen
- ✅ Git push → auto deploy
---
### Slide 22: Huiswerk
### Slide 19: Huiswerk
- **Nieuw project vanaf scratch**
- create-next-app → 3 componenten
- Push naar GitHub
- **Vercel: Import Project** (zie slide 18!)
- **Vercel: Import Project** (zie slide 15!)
- **Inleveren:** Vercel + GitHub link in Teams
- **Les 3:** Iedereen langs, prompts bespreken
---
### Slide 23: Volgende les
### Slide 20: Volgende les
- OpenCode IDE Integratie
- VSCode plugin
- "Tot dan!"

88
Les02-OpenCode/Les02-Docenttekst.md
View File

@@ -67,13 +67,13 @@ _[Wijs naar de problemen]_
"Maar wij gebruiken de Desktop App. Download van opencode.ai/download. Installeer het, en je bent klaar."
"Het AI model stel je in met Ctrl+O. Kies OpenCode Zen, dan Kimi K2.5 Free. Gratis!"
"Het AI model stel je in met Ctrl+X M. Kies OpenCode Zen, dan Kimi K2.5 Free. Gratis!"
---
### Slide 7: Build vs Plan Mode
**[09:14 - 09:16]**
**[09:14 - 09:15]**
"Belangrijk concept: twee modes."
@@ -91,17 +91,29 @@ _[Belangrijk punt - benadrukken!]_
### Slide 8: Shortcuts
**[09:16 - 09:18]**
**[09:15 - 09:16]**
"Vier shortcuts om te onthouden:"
"Ctrl+K voor het command menu. Tab om te wisselen tussen modes. @ om bestanden te zoeken - super handig voor context. Ctrl+O om je AI model te kiezen."
"Ctrl+P voor het command menu. Tab om te wisselen tussen modes. @ om bestanden te zoeken - super handig voor context. @explore om je codebase te verkennen zonder wijzigingen."
---
### Slide 9: De Deployment Workflow
### Slide 9: @explore - Codebase Verkennen
**[09:18 - 09:19]**
**[09:16 - 09:17]**
"@explore is een speciale feature. Het is een read-only subagent - hij leest alleen, verandert niets."
"Super handig voor nieuwe codebases. Typ @explore en dan je vraag. Bijvoorbeeld: '@explore waar is de authentication code?' of '@explore hoe werkt de routing?'"
"Het verschil met Plan mode: @explore zoekt actief door je hele project. Plan mode analyseert alleen wat je hem geeft."
---
### Slide 10: De Deployment Workflow
**[09:17 - 09:18]**
"Dit is de workflow die jullie vandaag gaan gebruiken:"
@@ -109,13 +121,13 @@ _[Belangrijk punt - benadrukken!]_
---
### Slide 10: Optioneel - OpenAI API Key
### Slide 11: Optioneel - OpenAI API Key
**[09:19 - 09:20]**
**[09:18 - 09:20]**
"Even dit: als je GPT-4 wil gebruiken in plaats van de gratis modellen, kan dat ook."
"Je maakt een account op platform.openai.com, gaat naar API Keys, maakt een key aan, en plakt die in OpenCode via Ctrl+O."
"Je maakt een account op platform.openai.com, gaat naar API Keys, maakt een key aan, en plakt die in OpenCode via Ctrl+X M."
"Let op: OpenAI is betaald, ongeveer een cent per prompt. Voor nu beginnen we met Kimi K2.5 Free - dat is gratis en werkt prima!"
@@ -123,9 +135,15 @@ _[Belangrijk punt - benadrukken!]_
## BLOK 3: SETUP & DEMO (20 minuten)
### Slide 11: Demo - Terminal Versie
### Slide 12: Live Demo Overzicht
**[09:20 - 09:25]**
**[09:20 - 09:40]**
_[Deze slide blijft op het scherm terwijl je alle demo's geeft]_
---
#### DEMO 1: Terminal Versie (5 min)
_[Open terminal - LIVE DEMO]_
@@ -135,18 +153,16 @@ _[Start opencode in terminal]_
"Dit is de TUI - Terminal User Interface. Kijk naar de shortcuts:"
- "Ctrl+K voor het command menu"
- "Tab om te wisselen tussen Plan en Build mode - zie hier het klembord en de hamer"
- "@ om bestanden te zoeken - super handig voor context"
- "Ctrl+O om je AI model te kiezen"
- "Ctrl+P voor het command menu"
- "Tab om te wisselen tussen Plan en Build mode"
- "@ om bestanden te zoeken"
- "Ctrl+X M om je AI model te kiezen"
"Krachtig! Maar het kan overweldigend zijn voor beginners. Daarom..."
---
### Slide 12: Desktop App
**[09:25 - 09:28]**
#### DEMO 2: Desktop App Setup (5 min)
"...is er ook de Desktop App!"
@@ -156,19 +172,11 @@ _[Open Desktop App]_
_[Laat studenten Desktop App downloaden van opencode.ai/download]_
---
### Slide 13: Demo - Desktop App Setup
**[09:28 - 09:32]**
_[LIVE DEMO in Desktop App]_
"Ik open de Desktop App en selecteer mijn projectfolder - dat is mijn v0 repo."
_[Open project folder]_
"Nu het AI model: Ctrl+O, kies OpenCode Zen, dan Kimi K2.5 Free."
"Nu het AI model: Ctrl+X M, kies OpenCode Zen, dan Kimi K2.5 Free."
_[Laat studenten ook configureren - help waar nodig]_
@@ -178,9 +186,7 @@ _[Toon localhost:3000 in browser]_
---
### Slide 14: Demo - Plan Mode
**[09:32 - 09:36]**
#### DEMO 3: Plan Mode (5 min)
_[LIVE DEMO in Desktop App]_
@@ -194,9 +200,7 @@ _[Wacht op response]_
---
### Slide 15: Demo - Build Mode
**[09:36 - 09:40]**
#### DEMO 4: Build Mode (5 min)
_[LIVE DEMO in Desktop App]_
@@ -212,7 +216,7 @@ _[Wacht op generatie]_
## BLOK 4: GIT & VERCEL WORKFLOW (10 minuten)
### Slide 16: Demo - Git Push
### Slide 13: Demo - Git Push
**[09:40 - 09:43]**
@@ -230,7 +234,7 @@ git push
---
### Slide 17: Demo - Vercel Auto-Deploy
### Slide 14: Demo - Vercel Auto-Deploy
**[09:43 - 09:47]**
@@ -248,7 +252,7 @@ _[Wacht/toon resultaat]_
---
### Slide 18: Nieuw project naar Vercel
### Slide 15: Nieuw project naar Vercel
**[09:47 - 09:50]**
@@ -264,7 +268,7 @@ _[Toon Vercel dashboard]_
## BLOK 5: HANDS-ON OPDRACHT (85 minuten + 15 min pauze)
### Slide 19: Aan de slag!
### Slide 16: Aan de slag!
**[09:50 - 09:55]** _(5 minuten uitleg)_
@@ -320,7 +324,7 @@ _[Loop actief rond]_
## BLOK 6: AFSLUITING (30 minuten)
### Slide 20: Resultaten delen
### Slide 17: Resultaten delen
**[11:30 - 11:40]**
@@ -332,7 +336,7 @@ _[2-3 studenten tonen hun werk]_
---
### Slide 21: Samenvatting
### Slide 18: Samenvatting
**[11:40 - 11:50]**
@@ -342,14 +346,14 @@ _[2-3 studenten tonen hun werk]_
- Gratis model: Kimi K2.5 Free
- Optioneel: OpenAI met API key
- Plan vs Build mode
- @ file mentions voor context
- @explore voor codebase verkennen
- De volledige workflow: lokaal ontwikkelen, pushen, automatisch live
_[Ruimte voor vragen]_
---
### Slide 22: Huiswerk
### Slide 19: Huiswerk
**[11:50 - 11:55]**
@@ -361,7 +365,7 @@ _[Ruimte voor vragen]_
---
### Slide 23: Afsluiting
### Slide 20: Afsluiting
**[11:55 - 12:00]**

43
Les02-OpenCode/Les02-Lesplan.md
View File

@@ -23,9 +23,10 @@ Na deze les kan de student:
1. Uitleggen wat OpenCode is en het verschil tussen Terminal en Desktop App
2. De OpenCode Desktop App installeren en configureren met een gratis model (Kimi K2.5 Free)
3. Werken met Plan mode en Build mode
4. Een bestaand GitHub project openen en lokaal draaien (in de ingebouwde terminal)
5. Wijzigingen maken met OpenCode en deployen via git push
6. De @ file mention gebruiken voor context
4. @explore gebruiken om een codebase te verkennen (read-only)
5. Een bestaand GitHub project openen en lokaal draaien (in de ingebouwde terminal)
6. Wijzigingen maken met OpenCode en deployen via git push
7. De @ file mention gebruiken voor context
---
@@ -64,10 +65,10 @@ Na deze les kan de student:
|------|------------|--------|
| 09:10-09:12 | Wat is OpenCode? | 5 |
| 09:12-09:14 | Installatie (Terminal + Desktop App) | 6 |
| 09:14-09:16 | Build vs Plan mode | 7 |
| 09:16-09:18 | Shortcuts + @ mentions | 8 |
| 09:18-09:19 | Vercel deployment workflow | 9 |
| 09:19-09:20 | Optioneel: OpenAI API key | 10 |
| 09:14-09:15 | Build vs Plan mode | 7 |
| 09:15-09:17 | Shortcuts + @explore | 8-9 |
| 09:17-09:19 | Vercel deployment workflow | 10 |
| 09:19-09:20 | Optioneel: OpenAI API key | 11 |
**Belangrijk:** We gebruiken Kimi K2.5 Free - gratis, geen API key nodig!
@@ -77,11 +78,13 @@ Na deze les kan de student:
| Tijd | Activiteit | Slides |
|------|------------|--------|
| 09:20-09:25 | **DEMO:** Terminal versie (shortcuts, modes) | 11 |
| 09:25-09:28 | Introductie Desktop App | 12 |
| 09:28-09:32 | **DEMO:** Desktop App setup + project laden | 13 |
| 09:32-09:36 | **DEMO:** Plan mode - project analyseren | 14 |
| 09:36-09:40 | **DEMO:** Build mode - nieuwe pagina maken | 15 |
| 09:20-09:40 | **DEMO's:** Terminal, Desktop App, Plan mode, Build mode | 12 |
**Slide 12 blijft op scherm tijdens alle demo's:**
- DEMO 1: Terminal versie (5 min) - shortcuts tonen
- DEMO 2: Desktop App setup (5 min) - project laden + Kimi K2.5 Free
- DEMO 3: Plan mode (5 min) - project analyseren
- DEMO 4: Build mode (5 min) - nieuwe pagina maken
---
@@ -89,9 +92,9 @@ Na deze les kan de student:
| Tijd | Activiteit | Slides |
|------|------------|--------|
| 09:40-09:43 | **DEMO:** Git add, commit, push | 16 |
| 09:43-09:47 | **DEMO:** Vercel auto-deploy tonen | 17 |
| 09:47-09:50 | Nieuw project naar Vercel (voor huiswerk) | 18 |
| 09:40-09:43 | **DEMO:** Git add, commit, push | 13 |
| 09:43-09:47 | **DEMO:** Vercel auto-deploy tonen | 14 |
| 09:47-09:50 | Nieuw project naar Vercel (voor huiswerk) | 15 |
**Kernboodschap:** "Push naar GitHub = automatisch live op Vercel"
@@ -101,7 +104,7 @@ Na deze les kan de student:
| Tijd | Activiteit | Slides |
|------|------------|--------|
| 09:50-09:55 | Opdracht uitleggen | 19 |
| 09:50-09:55 | Opdracht uitleggen | 16 |
| 09:55-10:15 | Studenten werken (20 min) | - |
| 10:15-10:30 | ☕ **PAUZE** | - |
| 10:30-11:30 | Studenten werken (60 min) | - |
@@ -136,10 +139,10 @@ Na deze les kan de student:
| Tijd | Activiteit | Slides |
|------|------------|--------|
| 11:30-11:40 | Resultaten delen (2-3 studenten) | 20 |
| 11:40-11:50 | Samenvatting + Q&A | 21 |
| 11:50-11:55 | Huiswerk uitleggen | 22 |
| 11:55-12:00 | Afsluiting | 23 |
| 11:30-11:40 | Resultaten delen (2-3 studenten) | 17 |
| 11:40-11:50 | Samenvatting + Q&A | 18 |
| 11:50-11:55 | Huiswerk uitleggen | 19 |
| 11:55-12:00 | Afsluiting | 20 |
---

150
Les02-OpenCode/Les02-Slide-Overzicht.md
View File

@@ -1,7 +1,7 @@
# Les 2: OpenCode - AI Code Assistants
> **Deel 1: AI Foundations** (Les 1-4)
> **Totale slides:** 23
> **Totale slides:** 20
> **Lesduur:** 3 uur (180 minuten)
> **Spreektijd:** ~50 min | **Hands-on:** ~85 min | **Pauze:** 15 min
@@ -12,12 +12,12 @@
| Blok | Onderwerp | Slides | Tijd |
|------|-----------|--------|------|
| 1 | Welkom & Terugblik | 1-4 | 10 min |
| 2 | Introductie OpenCode | 5-10 | 10 min |
| 3 | Setup & Demo | 11-15 | 20 min |
| 4 | Git & Vercel Workflow | 16-18 | 10 min |
| 5 | Hands-on Opdracht | 19 | 85 min |
| 2 | Introductie OpenCode | 5-11 | 10 min |
| 3 | Setup & Demo | 12 | 20 min |
| 4 | Git & Vercel Workflow | 13-15 | 10 min |
| 5 | Hands-on Opdracht | 16 | 85 min |
| - | **☕ PAUZE** | - | 15 min |
| 6 | Afsluiting | 20-23 | 30 min |
| 6 | Afsluiting | 17-20 | 30 min |
---
@@ -90,7 +90,7 @@ npm i -g opencode-ai@latest
- Installeer voor jouw OS (Mac/Windows)
**Gratis AI Model:**
- `Ctrl+O` → OpenCode Zen → **Kimi K2.5 Free**
- `Ctrl+X M` → OpenCode Zen → **Kimi K2.5 Free**
---
@@ -113,14 +113,35 @@ npm i -g opencode-ai@latest
| Shortcut | Actie |
|----------|-------|
| `Ctrl+K` | Command menu |
| `Ctrl+P` | Command menu |
| `Tab` | Wissel Build/Plan |
| `@` | Zoek bestanden |
| `Ctrl+O` | Model selectie |
| `@explore` | Codebase verkennen (read-only) |
---
### Slide 9: De Deployment Workflow
### Slide 9: @explore - Codebase Verkennen
**Wat is @explore?**
- Een **read-only** subagent voor het verkennen van je codebase
- Zoekt bestanden, vindt keywords, analyseert structuur
- Maakt **geen wijzigingen** aan je code
**Gebruik:**
```
@explore find all authentication code
@explore how does the routing work?
@explore where are the API endpoints?
```
**Wanneer gebruiken?**
- Nieuwe codebase leren kennen
- Code zoeken voordat je wijzigt
- Project structuur begrijpen
---
### Slide 10: De Deployment Workflow
```
1. Wijzig code met OpenCode
@@ -134,7 +155,7 @@ Jullie Vercel project is al gekoppeld aan GitHub.
---
### Slide 10: Optioneel - OpenAI API Key
### Slide 11: Optioneel - OpenAI API Key
**Wil je GPT-4 gebruiken?**
@@ -142,7 +163,7 @@ Jullie Vercel project is al gekoppeld aan GitHub.
2. Maak account aan (of log in)
3. API Keys → Create new secret key
4. Kopieer de key (begint met `sk-...`)
5. In OpenCode: `Ctrl+O` → OpenAI → Plak key
5. In OpenCode: `Ctrl+X M` → OpenAI → Plak key
**Let op:** OpenAI is betaald (~$0.01 per prompt)
@@ -152,70 +173,41 @@ Jullie Vercel project is al gekoppeld aan GitHub.
## BLOK 3: SETUP & DEMO (20 minuten)
### Slide 11: Demo - Terminal Versie
### Slide 12: Live Demo Overzicht (blijft op scherm)
**Live demo:**
```bash
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 12: Desktop App
**Download:** opencode.ai/download
**Voordelen:**
- Zelfde features als terminal
- Vriendelijkere interface
- **Ingebouwde terminal!**
**Dit gaan we vandaag gebruiken.**
---
### Slide 13: Demo - Desktop App Setup
**Live demo:**
1. Open Desktop App
2. Open project folder (je v0 repo)
3. `Ctrl+O` → OpenCode Zen → **Kimi K2.5 Free**
4. In terminal: `npm install` + `npm run dev`
---
### Slide 14: 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 15: 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!
┌─────────────────────────────────────────────────────┐
│ DEMO 1: TERMINAL VERSIE (5 min) │
│ ───────────────────────────────────────────────── │
│ npm i -g opencode-ai@latest && opencode │
│ → Toon: Ctrl+P, Tab, @, Ctrl+X M │
│ → "Krachtig, maar we gebruiken Desktop App..." │
├─────────────────────────────────────────────────────┤
│ DEMO 2: DESKTOP APP SETUP (5 min) │
│ ───────────────────────────────────────────────── │
│ 1. Open Desktop App │
│ 2. File → Open Folder → v0 project │
│ 3. Ctrl+X M → OpenCode Zen → Kimi K2.5 Free │
│ 4. 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 code → Accept → Refresh browser │
└─────────────────────────────────────────────────────┘
```
---
## BLOK 4: GIT & VERCEL WORKFLOW (10 minuten)
### Slide 16: Demo - Git Push
### Slide 13: Demo - Git Push
**Live demo (in Desktop App terminal):**
```bash
@@ -228,7 +220,7 @@ Of gebruik GitHub Desktop!
---
### Slide 17: Demo - Vercel Auto-Deploy
### Slide 14: Demo - Vercel Auto-Deploy
**Live demo:**
1. Open Vercel dashboard
@@ -239,7 +231,7 @@ Of gebruik GitHub Desktop!
---
### Slide 18: Nieuw project naar Vercel (voor huiswerk)
### Slide 15: Nieuw project naar Vercel (voor huiswerk)
**Stappen voor een nieuw project:**
@@ -255,7 +247,7 @@ Of gebruik GitHub Desktop!
## BLOK 5: HANDS-ON OPDRACHT (85 minuten)
### Slide 19: Aan de slag! (blijft op scherm)
### Slide 16: Aan de slag! (blijft op scherm)
```
┌─────────────────────────────────────────────────────┐
@@ -271,7 +263,7 @@ Of gebruik GitHub Desktop!
│ ───────────────────────────────────────────────── │
│ 1. Open Desktop App │
│ 2. File → Open Folder → je project │
│ 3. Ctrl+O → OpenCode Zen → Kimi K2.5 Free │
│ 3. Ctrl+X M → OpenCode Zen → Kimi K2.5 Free │
├─────────────────────────────────────────────────────┤
│ STAP 3: BOUW MET OPENCODE │
│ ───────────────────────────────────────────────── │
@@ -295,7 +287,7 @@ Of gebruik GitHub Desktop!
## BLOK 6: AFSLUITING (30 minuten)
### Slide 20: Resultaten delen
### Slide 17: Resultaten delen
- Wie wil laten zien?
- Wat heb je toegevoegd?
@@ -303,18 +295,18 @@ Of gebruik GitHub Desktop!
---
### Slide 21: Samenvatting
### Slide 18: Samenvatting
- ✅ OpenCode: open-source AI assistant
- ✅ Gratis model: Kimi K2.5 Free
- ✅ Optioneel: OpenAI met API key
- ✅ Plan vs Build mode
- ✅ @ file mentions voor context
- ✅ @explore voor codebase verkennen
- ✅ Git push → Vercel auto-deploy
---
### Slide 22: Huiswerk
### Slide 19: Huiswerk
**Opdracht: Nieuw project vanaf scratch**
@@ -329,11 +321,11 @@ Of gebruik GitHub Desktop!
**In Les 3:** We gaan iedereen langs en bespreken je prompts!
**Stappen voor Vercel: zie slide 18!**
**Stappen voor Vercel: zie slide 15!**
---
### Slide 23: Volgende les
### Slide 20: Volgende les
**Les 3:** OpenCode IDE Integratie