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 3. Selecteer je v0 project
### Selecteer gratis AI model ### Selecteer gratis AI model
1. Druk `Ctrl+O` 1. Druk `Ctrl+X M` (eerst Ctrl+X, dan M)
2. Kies "OpenCode Zen" 2. Kies "OpenCode Zen"
3. Selecteer "Kimi K2.5 Free" 3. Selecteer "Kimi K2.5 Free"

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

@@ -52,7 +52,7 @@
### Slide 6: Installatie ### Slide 6: Installatie
- **Terminal:** `npm i -g opencode-ai@latest` - **Terminal:** `npm i -g opencode-ai@latest`
- **Desktop App:** opencode.ai/download - **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" - "Wij gebruiken vandaag de Desktop App"
--- ---
@@ -62,30 +62,35 @@
- **Build (🔨):** schrijft code, maakt bestanden - **Build (🔨):** schrijft code, maakt bestanden
- Wisselen: `Tab` - Wisselen: `Tab`
- **💡 Eén prompt per taak!** - **💡 Eén prompt per taak!**
- ❌ "Maak complete website"
- ✅ "Maak header" → "Voeg hero toe" → etc.
--- ---
### Slide 8: Shortcuts ### Slide 8: Shortcuts
- `Ctrl+K` = command menu - `Ctrl+P` = command menu
- `Tab` = wissel mode - `Tab` = wissel mode
- `@` = zoek bestanden (context!) - `@` = 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 - Wijzig code → git add → commit → push
- Vercel pakt automatisch op - Vercel pakt automatisch op
- Jullie repos zijn al gekoppeld! - 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 - **Wil je GPT-4?** platform.openai.com → API Keys
- Kopieer key (`sk-...`) - In OpenCode: `Ctrl+X M` → OpenAI → Plak key
- In OpenCode: `Ctrl+O` → OpenAI → Plak key
- **Let op:** betaald (~$0.01/prompt) - **Let op:** betaald (~$0.01/prompt)
- **Tip:** Start met Kimi K2.5 Free! - **Tip:** Start met Kimi K2.5 Free!
@@ -95,41 +100,25 @@
--- ---
### Slide 11: Demo - Terminal Versie ### Slide 12: Live Demo Overzicht (blijft op scherm)
- **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..."
--- **DEMO 1: Terminal (5 min)**
- `opencode` → toon Ctrl+P, Tab, @, Ctrl+X M
- "Krachtig, maar Desktop App is vriendelijker..."
### Slide 12: Desktop App **DEMO 2: Desktop App Setup (5 min)**
- opencode.ai/download - Open App → Open Folder → v0 project
- Zelfde features, vriendelijker - Ctrl+X M → OpenCode Zen → Kimi K2.5 Free
- **Ingebouwde terminal!** - Terminal: `npm install && npm run dev`
- Studenten downloaden
--- **DEMO 3: Plan Mode (5 min)**
- 📋 "Analyseer dit project. Hoe werkt de routing?"
### 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?"
- AI leest alleen, verandert niets - AI leest alleen, verandert niets
--- **DEMO 4: Build Mode (5 min)**
### Slide 15: Demo - Build Mode
- Tab → 🔨 - Tab → 🔨
- **DEMO:** "Maak nieuwe pagina /about met hero en link op homepage" - "Maak nieuwe pagina /about met hero"
- Toon resultaat in browser - Review → Accept → Refresh browser
--- ---
@@ -137,7 +126,7 @@
--- ---
### Slide 16: Demo - Git Push ### Slide 13: Demo - Git Push
- **DEMO:** - **DEMO:**
```bash ```bash
git add . git add .
@@ -148,17 +137,16 @@ git push
--- ---
### Slide 17: Demo - Vercel Auto-Deploy ### Slide 14: Demo - Vercel Auto-Deploy
- **DEMO:**
- Open Vercel dashboard - Open Vercel dashboard
- Toon "Building..." status - Toon "Building..." status
- Na ~1 min: live! - Na ~1 min: live!
--- ---
### Slide 18: Nieuw project naar Vercel ### Slide 15: Nieuw project naar Vercel
- **Voor huiswerk!** v0 was automatisch gekoppeld - **Voor huiswerk!** v0 was automatisch gekoppeld
- **DEMO:** Vercel → Add New Project → Import Git Repository - Vercel → Add New Project → Import Git Repository
- Selecteer repo → Deploy - Selecteer repo → Deploy
--- ---
@@ -167,17 +155,14 @@ git push
--- ---
### Slide 19: Opdracht (09:50-09:55) ### Slide 16: Opdracht (blijft op scherm)
**Blijft op scherm tijdens hands-on!**
``` ```
STAP 1: PROJECT KLAARZETTEN STAP 1: PROJECT KLAARZETTEN
git clone → cd → npm install → npm run dev git clone → cd → npm install → npm run dev
Open http://localhost:3000
STAP 2: OPENCODE DESKTOP APP 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 STAP 3: BOUW MET OPENCODE
□ Nieuwe pagina (/about, /services, /contact) □ Nieuwe pagina (/about, /services, /contact)
@@ -187,7 +172,6 @@ STAP 3: BOUW MET OPENCODE
STAP 4: DEPLOY STAP 4: DEPLOY
git add . → git commit → git push git add . → git commit → git push
Check Vercel dashboard
``` ```
**Doel:** minimaal 2x deployen | ☕ Pauze: 10:15-10:30 **Doel:** minimaal 2x deployen | ☕ Pauze: 10:15-10:30
@@ -195,10 +179,7 @@ STAP 4: DEPLOY
--- ---
### Hands-on deel 1 (09:55-10:15) ### Hands-on deel 1 (09:55-10:15)
- Help bij opstartproblemen
**20 minuten werken** (25 min incl. uitleg)
Help bij opstartproblemen:
- Draait npm run dev? - Draait npm run dev?
- Kimi K2.5 Free geselecteerd? - Kimi K2.5 Free geselecteerd?
@@ -206,14 +187,9 @@ Help bij opstartproblemen:
### ☕ PAUZE (10:15-10:30) ### ☕ PAUZE (10:15-10:30)
"Om half 11 gaan we verder"
--- ---
### Hands-on deel 2 (10:30-11:30) ### Hands-on deel 2 (10:30-11:30)
**60 minuten werken**
**Checks:** **Checks:**
- 10:45 - "Wie draait lokaal?" - 10:45 - "Wie draait lokaal?"
- 11:15 - "Wie heeft 2x gepusht?" - 11:15 - "Wie heeft 2x gepusht?"
@@ -224,33 +200,33 @@ Help bij opstartproblemen:
--- ---
### Slide 20: Resultaten ### Slide 17: Resultaten
- 2-3 studenten tonen werk - 2-3 studenten tonen werk
- "Wat toegevoegd? Hoeveel keer gepusht?" - "Wat toegevoegd? Hoeveel keer gepusht?"
--- ---
### Slide 21: Samenvatting ### Slide 18: Samenvatting
- ✅ OpenCode Terminal + Desktop App - ✅ OpenCode Terminal + Desktop App
- ✅ Gratis: Kimi K2.5 Free - ✅ Gratis: Kimi K2.5 Free
- ✅ Optioneel: OpenAI met API key - ✅ Optioneel: OpenAI met API key
- ✅ Plan vs Build mode - ✅ Plan vs Build mode
- ✅ @ file mentions - ✅ @explore voor codebase verkennen
- ✅ Git push → auto deploy - ✅ Git push → auto deploy
--- ---
### Slide 22: Huiswerk ### Slide 19: Huiswerk
- **Nieuw project vanaf scratch** - **Nieuw project vanaf scratch**
- create-next-app → 3 componenten - create-next-app → 3 componenten
- Push naar GitHub - Push naar GitHub
- **Vercel: Import Project** (zie slide 18!) - **Vercel: Import Project** (zie slide 15!)
- **Inleveren:** Vercel + GitHub link in Teams - **Inleveren:** Vercel + GitHub link in Teams
- **Les 3:** Iedereen langs, prompts bespreken - **Les 3:** Iedereen langs, prompts bespreken
--- ---
### Slide 23: Volgende les ### Slide 20: Volgende les
- OpenCode IDE Integratie - OpenCode IDE Integratie
- VSCode plugin - VSCode plugin
- "Tot dan!" - "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." "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 ### Slide 7: Build vs Plan Mode
**[09:14 - 09:16]** **[09:14 - 09:15]**
"Belangrijk concept: twee modes." "Belangrijk concept: twee modes."
@@ -91,17 +91,29 @@ _[Belangrijk punt - benadrukken!]_
### Slide 8: Shortcuts ### Slide 8: Shortcuts
**[09:16 - 09:18]** **[09:15 - 09:16]**
"Vier shortcuts om te onthouden:" "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:" "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." "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!" "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) ## 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]_ _[Open terminal - LIVE DEMO]_
@@ -135,18 +153,16 @@ _[Start opencode in terminal]_
"Dit is de TUI - Terminal User Interface. Kijk naar de shortcuts:" "Dit is de TUI - Terminal User Interface. Kijk naar de shortcuts:"
- "Ctrl+K voor het command menu" - "Ctrl+P voor het command menu"
- "Tab om te wisselen tussen Plan en Build mode - zie hier het klembord en de hamer" - "Tab om te wisselen tussen Plan en Build mode"
- "@ om bestanden te zoeken - super handig voor context" - "@ om bestanden te zoeken"
- "Ctrl+O om je AI model te kiezen" - "Ctrl+X M om je AI model te kiezen"
"Krachtig! Maar het kan overweldigend zijn voor beginners. Daarom..." "Krachtig! Maar het kan overweldigend zijn voor beginners. Daarom..."
--- ---
### Slide 12: Desktop App #### DEMO 2: Desktop App Setup (5 min)
**[09:25 - 09:28]**
"...is er ook de Desktop App!" "...is er ook de Desktop App!"
@@ -156,19 +172,11 @@ _[Open Desktop App]_
_[Laat studenten Desktop App downloaden van opencode.ai/download]_ _[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." "Ik open de Desktop App en selecteer mijn projectfolder - dat is mijn v0 repo."
_[Open project folder]_ _[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]_ _[Laat studenten ook configureren - help waar nodig]_
@@ -178,9 +186,7 @@ _[Toon localhost:3000 in browser]_
--- ---
### Slide 14: Demo - Plan Mode #### DEMO 3: Plan Mode (5 min)
**[09:32 - 09:36]**
_[LIVE DEMO in Desktop App]_ _[LIVE DEMO in Desktop App]_
@@ -194,9 +200,7 @@ _[Wacht op response]_
--- ---
### Slide 15: Demo - Build Mode #### DEMO 4: Build Mode (5 min)
**[09:36 - 09:40]**
_[LIVE DEMO in Desktop App]_ _[LIVE DEMO in Desktop App]_
@@ -212,7 +216,7 @@ _[Wacht op generatie]_
## BLOK 4: GIT & VERCEL WORKFLOW (10 minuten) ## BLOK 4: GIT & VERCEL WORKFLOW (10 minuten)
### Slide 16: Demo - Git Push ### Slide 13: Demo - Git Push
**[09:40 - 09:43]** **[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]** **[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]** **[09:47 - 09:50]**
@@ -264,7 +268,7 @@ _[Toon Vercel dashboard]_
## BLOK 5: HANDS-ON OPDRACHT (85 minuten + 15 min pauze) ## 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)_ **[09:50 - 09:55]** _(5 minuten uitleg)_
@@ -320,7 +324,7 @@ _[Loop actief rond]_
## BLOK 6: AFSLUITING (30 minuten) ## BLOK 6: AFSLUITING (30 minuten)
### Slide 20: Resultaten delen ### Slide 17: Resultaten delen
**[11:30 - 11:40]** **[11:30 - 11:40]**
@@ -332,7 +336,7 @@ _[2-3 studenten tonen hun werk]_
--- ---
### Slide 21: Samenvatting ### Slide 18: Samenvatting
**[11:40 - 11:50]** **[11:40 - 11:50]**
@@ -342,14 +346,14 @@ _[2-3 studenten tonen hun werk]_
- Gratis model: Kimi K2.5 Free - Gratis model: Kimi K2.5 Free
- Optioneel: OpenAI met API key - Optioneel: OpenAI met API key
- Plan vs Build mode - Plan vs Build mode
- @ file mentions voor context - @explore voor codebase verkennen
- De volledige workflow: lokaal ontwikkelen, pushen, automatisch live - De volledige workflow: lokaal ontwikkelen, pushen, automatisch live
_[Ruimte voor vragen]_ _[Ruimte voor vragen]_
--- ---
### Slide 22: Huiswerk ### Slide 19: Huiswerk
**[11:50 - 11:55]** **[11:50 - 11:55]**
@@ -361,7 +365,7 @@ _[Ruimte voor vragen]_
--- ---
### Slide 23: Afsluiting ### Slide 20: Afsluiting
**[11:55 - 12:00]** **[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 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) 2. De OpenCode Desktop App installeren en configureren met een gratis model (Kimi K2.5 Free)
3. Werken met Plan mode en Build mode 3. Werken met Plan mode en Build mode
4. Een bestaand GitHub project openen en lokaal draaien (in de ingebouwde terminal) 4. @explore gebruiken om een codebase te verkennen (read-only)
5. Wijzigingen maken met OpenCode en deployen via git push 5. Een bestaand GitHub project openen en lokaal draaien (in de ingebouwde terminal)
6. De @ file mention gebruiken voor context 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:10-09:12 | Wat is OpenCode? | 5 |
| 09:12-09:14 | Installatie (Terminal + Desktop App) | 6 | | 09:12-09:14 | Installatie (Terminal + Desktop App) | 6 |
| 09:14-09:16 | Build vs Plan mode | 7 | | 09:14-09:15 | Build vs Plan mode | 7 |
| 09:16-09:18 | Shortcuts + @ mentions | 8 | | 09:15-09:17 | Shortcuts + @explore | 8-9 |
| 09:18-09:19 | Vercel deployment workflow | 9 | | 09:17-09:19 | Vercel deployment workflow | 10 |
| 09:19-09:20 | Optioneel: OpenAI API key | 10 | | 09:19-09:20 | Optioneel: OpenAI API key | 11 |
**Belangrijk:** We gebruiken Kimi K2.5 Free - gratis, geen API key nodig! **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 | | Tijd | Activiteit | Slides |
|------|------------|--------| |------|------------|--------|
| 09:20-09:25 | **DEMO:** Terminal versie (shortcuts, modes) | 11 | | 09:20-09:40 | **DEMO's:** Terminal, Desktop App, Plan mode, Build mode | 12 |
| 09:25-09:28 | Introductie Desktop App | 12 |
| 09:28-09:32 | **DEMO:** Desktop App setup + project laden | 13 | **Slide 12 blijft op scherm tijdens alle demo's:**
| 09:32-09:36 | **DEMO:** Plan mode - project analyseren | 14 | - DEMO 1: Terminal versie (5 min) - shortcuts tonen
| 09:36-09:40 | **DEMO:** Build mode - nieuwe pagina maken | 15 | - 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 | | Tijd | Activiteit | Slides |
|------|------------|--------| |------|------------|--------|
| 09:40-09:43 | **DEMO:** Git add, commit, push | 16 | | 09:40-09:43 | **DEMO:** Git add, commit, push | 13 |
| 09:43-09:47 | **DEMO:** Vercel auto-deploy tonen | 17 | | 09:43-09:47 | **DEMO:** Vercel auto-deploy tonen | 14 |
| 09:47-09:50 | Nieuw project naar Vercel (voor huiswerk) | 18 | | 09:47-09:50 | Nieuw project naar Vercel (voor huiswerk) | 15 |
**Kernboodschap:** "Push naar GitHub = automatisch live op Vercel" **Kernboodschap:** "Push naar GitHub = automatisch live op Vercel"
@@ -101,7 +104,7 @@ Na deze les kan de student:
| Tijd | Activiteit | Slides | | 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) | - | | 09:55-10:15 | Studenten werken (20 min) | - |
| 10:15-10:30 | ☕ **PAUZE** | - | | 10:15-10:30 | ☕ **PAUZE** | - |
| 10:30-11:30 | Studenten werken (60 min) | - | | 10:30-11:30 | Studenten werken (60 min) | - |
@@ -136,10 +139,10 @@ Na deze les kan de student:
| Tijd | Activiteit | Slides | | Tijd | Activiteit | Slides |
|------|------------|--------| |------|------------|--------|
| 11:30-11:40 | Resultaten delen (2-3 studenten) | 20 | | 11:30-11:40 | Resultaten delen (2-3 studenten) | 17 |
| 11:40-11:50 | Samenvatting + Q&A | 21 | | 11:40-11:50 | Samenvatting + Q&A | 18 |
| 11:50-11:55 | Huiswerk uitleggen | 22 | | 11:50-11:55 | Huiswerk uitleggen | 19 |
| 11:55-12:00 | Afsluiting | 23 | | 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 # Les 2: OpenCode - AI Code Assistants
> **Deel 1: AI Foundations** (Les 1-4) > **Deel 1: AI Foundations** (Les 1-4)
> **Totale slides:** 23 > **Totale slides:** 20
> **Lesduur:** 3 uur (180 minuten) > **Lesduur:** 3 uur (180 minuten)
> **Spreektijd:** ~50 min | **Hands-on:** ~85 min | **Pauze:** 15 min > **Spreektijd:** ~50 min | **Hands-on:** ~85 min | **Pauze:** 15 min
@@ -12,12 +12,12 @@
| Blok | Onderwerp | Slides | Tijd | | Blok | Onderwerp | Slides | Tijd |
|------|-----------|--------|------| |------|-----------|--------|------|
| 1 | Welkom & Terugblik | 1-4 | 10 min | | 1 | Welkom & Terugblik | 1-4 | 10 min |
| 2 | Introductie OpenCode | 5-10 | 10 min | | 2 | Introductie OpenCode | 5-11 | 10 min |
| 3 | Setup & Demo | 11-15 | 20 min | | 3 | Setup & Demo | 12 | 20 min |
| 4 | Git & Vercel Workflow | 16-18 | 10 min | | 4 | Git & Vercel Workflow | 13-15 | 10 min |
| 5 | Hands-on Opdracht | 19 | 85 min | | 5 | Hands-on Opdracht | 16 | 85 min |
| - | **☕ PAUZE** | - | 15 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) - Installeer voor jouw OS (Mac/Windows)
**Gratis AI Model:** **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 | | Shortcut | Actie |
|----------|-------| |----------|-------|
| `Ctrl+K` | Command menu | | `Ctrl+P` | Command menu |
| `Tab` | Wissel Build/Plan | | `Tab` | Wissel Build/Plan |
| `@` | Zoek bestanden | | `@` | 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 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?** **Wil je GPT-4 gebruiken?**
@@ -142,7 +163,7 @@ Jullie Vercel project is al gekoppeld aan GitHub.
2. Maak account aan (of log in) 2. Maak account aan (of log in)
3. API Keys → Create new secret key 3. API Keys → Create new secret key
4. Kopieer de key (begint met `sk-...`) 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) **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) ## 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:** │ DEMO 1: TERMINAL VERSIE (5 min) │
- Plan mode: "Analyseer dit project" │ ───────────────────────────────────────────────── │
- Build mode: `Tab` → "Voeg een component toe" │ npm i -g opencode-ai@latest && opencode │
- @ mention: `@src/components/` │ → Toon: Ctrl+P, Tab, @, Ctrl+X M │
- Shortcuts: `Ctrl+K`, `Ctrl+O` │ → "Krachtig, maar we gebruiken Desktop App..." │
├─────────────────────────────────────────────────────┤
→ Krachtig! Maar we gaan iets gebruiksvriendelijkers gebruiken... │ DEMO 2: DESKTOP APP SETUP (5 min) │
│ ───────────────────────────────────────────────── │
--- │ 1. Open Desktop App │
│ 2. File → Open Folder → v0 project │
### Slide 12: Desktop App │ 3. Ctrl+X M → OpenCode Zen → Kimi K2.5 Free │
│ 4. Terminal: npm install && npm run dev │
**Download:** opencode.ai/download ├─────────────────────────────────────────────────────┤
│ DEMO 3: PLAN MODE (5 min) │
**Voordelen:** │ ───────────────────────────────────────────────── │
- Zelfde features als terminal │ 📋 "Analyseer dit project. Hoe werkt de routing?" │
- Vriendelijkere interface │ → AI leest alleen, verandert niets │
- **Ingebouwde terminal!** ├─────────────────────────────────────────────────────┤
│ DEMO 4: BUILD MODE (5 min) │
**Dit gaan we vandaag gebruiken.** │ ───────────────────────────────────────────────── │
│ Tab → 🔨 │
--- │ "Maak nieuwe pagina /about met hero" │
│ → Review code → Accept → Refresh browser │
### 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!
--- ---
## BLOK 4: GIT & VERCEL WORKFLOW (10 minuten) ## BLOK 4: GIT & VERCEL WORKFLOW (10 minuten)
### Slide 16: Demo - Git Push ### Slide 13: Demo - Git Push
**Live demo (in Desktop App terminal):** **Live demo (in Desktop App terminal):**
```bash ```bash
@@ -228,7 +220,7 @@ Of gebruik GitHub Desktop!
--- ---
### Slide 17: Demo - Vercel Auto-Deploy ### Slide 14: Demo - Vercel Auto-Deploy
**Live demo:** **Live demo:**
1. Open Vercel dashboard 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:** **Stappen voor een nieuw project:**
@@ -255,7 +247,7 @@ Of gebruik GitHub Desktop!
## BLOK 5: HANDS-ON OPDRACHT (85 minuten) ## 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 │ │ 1. Open Desktop App │
│ 2. File → Open Folder → je project │ │ 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 │ │ STAP 3: BOUW MET OPENCODE │
│ ───────────────────────────────────────────────── │ │ ───────────────────────────────────────────────── │
@@ -295,7 +287,7 @@ Of gebruik GitHub Desktop!
## BLOK 6: AFSLUITING (30 minuten) ## BLOK 6: AFSLUITING (30 minuten)
### Slide 20: Resultaten delen ### Slide 17: Resultaten delen
- Wie wil laten zien? - Wie wil laten zien?
- Wat heb je toegevoegd? - Wat heb je toegevoegd?
@@ -303,18 +295,18 @@ Of gebruik GitHub Desktop!
--- ---
### Slide 21: Samenvatting ### Slide 18: Samenvatting
- ✅ OpenCode: open-source AI assistant - ✅ OpenCode: open-source AI assistant
- ✅ Gratis model: Kimi K2.5 Free - ✅ Gratis model: Kimi K2.5 Free
- ✅ Optioneel: OpenAI met API key - ✅ Optioneel: OpenAI met API key
- ✅ Plan vs Build mode - ✅ Plan vs Build mode
- ✅ @ file mentions voor context - ✅ @explore voor codebase verkennen
- ✅ Git push → Vercel auto-deploy - ✅ Git push → Vercel auto-deploy
--- ---
### Slide 22: Huiswerk ### Slide 19: Huiswerk
**Opdracht: Nieuw project vanaf scratch** **Opdracht: Nieuw project vanaf scratch**
@@ -329,11 +321,11 @@ Of gebruik GitHub Desktop!
**In Les 3:** We gaan iedereen langs en bespreken je prompts! **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 **Les 3:** OpenCode IDE Integratie