fix: les 2

This commit is contained in:
Tim Rijkse
2026-02-07 10:31:25 +01:00
parent 3584a9ae75
commit 970efbc8bc
7 changed files with 193 additions and 151 deletions

View File

@@ -53,6 +53,8 @@ _[Wijs naar de problemen]_
"OpenCode - open source met meer dan 60.000 GitHub stars. Het is een AI coding assistant die direct in je project werkt."
"Er is een terminal versie én een Desktop App. Die Desktop App is super handig - vriendelijke interface en een ingebouwde terminal. Die gaan we vandaag gebruiken."
"Het mooie: je kiest je eigen AI. Vandaag gebruiken we OpenCode Zen - dat is gratis en je hebt geen API key nodig."
---
@@ -101,50 +103,68 @@ _[Wijs naar de problemen]_
## BLOK 3: SETUP & DEMO (20 minuten)
### Slide 10: Installatie
### Slide 10: Demo - Terminal Versie
**[09:20 - 09:25]**
_[Open terminal]_
_[Open terminal - LIVE DEMO]_
"Installatie: npm i -g opencode-ai@latest. Dan opencode om te starten."
"Laat me eerst de terminal versie laten zien. Installatie: npm i -g opencode-ai@latest, dan opencode."
_[Demonstreer installatie]_
_[Start opencode in terminal]_
"Voor het AI model: Ctrl+O, kies OpenCode Zen, dan GLM 4.7. Gratis, geen key nodig."
"Dit is de TUI - Terminal User Interface. Kijk naar de shortcuts:"
_[Laat studenten ook installeren - help waar nodig]_
- "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"
"Krachtig! Maar het kan overweldigend zijn voor beginners. Daarom..."
---
### Slide 11: Demo - Project Lokaal Draaien
### Slide 11: Desktop App
**[09:25 - 09:30]**
**[09:25 - 09:28]**
_[LIVE DEMO]_
"...is er ook de Desktop App!"
"Ik ga nu een v0 project clonen en lokaal draaien."
_[Open Desktop App]_
```bash
git clone [demo-repo-url]
cd project-naam
npm install
npm run dev
```
"Zelfde features, maar veel vriendelijker. En kijk - een ingebouwde terminal! Dit gaan we vandaag gebruiken."
"Open localhost:3000 - daar is de website, lokaal op mijn machine."
_[Toon de website in browser]_
_[Laat studenten Desktop App downloaden van opencode.ai/download]_
---
### Slide 12: Demo - Plan Mode
### Slide 12: Demo - Desktop App Setup
**[09:30 - 09:35]**
**[09:28 - 09:32]**
_[LIVE DEMO]_
_[LIVE DEMO in Desktop App]_
"Nu start ik OpenCode in dit project. Ik zit in Plan mode - zie het klembord."
"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 GLM 4.7. Gratis, geen key nodig."
_[Laat studenten ook configureren - help waar nodig]_
"In de ingebouwde terminal run ik npm install en npm run dev."
_[Toon localhost:3000 in browser]_
---
### Slide 13: Demo - Plan Mode
**[09:32 - 09:36]**
_[LIVE DEMO in Desktop App]_
"Ik zit in Plan mode - zie het klembord icoon."
"Ik vraag: 'Analyseer dit project. Hoe werkt de routing? Hoe maak ik een nieuwe pagina?'"
@@ -154,11 +174,11 @@ _[Wacht op response]_
---
### Slide 13: Demo - Build Mode
### Slide 14: Demo - Build Mode
**[09:35 - 09:40]**
**[09:36 - 09:40]**
_[LIVE DEMO]_
_[LIVE DEMO in Desktop App]_
"Tab om naar Build mode te gaan. Nu vraag ik:"
@@ -172,17 +192,17 @@ _[Wacht op generatie]_
## BLOK 4: GIT & VERCEL WORKFLOW (10 minuten)
### Slide 14: Demo - Git Push
### Slide 15: Demo - Git Push
**[09:40 - 09:45]**
**[09:40 - 09:43]**
_[LIVE DEMO]_
_[LIVE DEMO in Desktop App terminal]_
"Nu de belangrijke stap: deployen. Ik gebruik gewoon git."
```bash
git add .
git commit -m "Add testimonials section"
git commit -m "Add about page"
git push
```
@@ -190,9 +210,9 @@ git push
---
### Slide 15: Demo - Vercel Auto-Deploy
### Slide 16: Demo - Vercel Auto-Deploy
**[09:44 - 09:48]**
**[09:43 - 09:47]**
_[LIVE DEMO]_
@@ -208,9 +228,9 @@ _[Wacht/toon resultaat]_
---
### Slide 16: Nieuw project naar Vercel
### Slide 17: Nieuw project naar Vercel
**[09:48 - 09:50]**
**[09:47 - 09:50]**
"Dit werkt omdat jullie v0 project al aan Vercel gekoppeld is. Maar voor het huiswerk maken jullie een **nieuw** project. Dan moet je Vercel handmatig koppelen."
@@ -224,7 +244,7 @@ _[Toon Vercel dashboard]_
## BLOK 5: HANDS-ON OPDRACHT (85 minuten + 15 min pauze)
### Slide 17: Aan de slag!
### Slide 18: Aan de slag!
**[09:50 - 09:55]** _(5 minuten uitleg)_
@@ -280,7 +300,7 @@ _[Loop actief rond]_
## BLOK 6: AFSLUITING (30 minuten)
### Slide 18: Resultaten delen
### Slide 19: Resultaten delen
**[11:30 - 11:40]**
@@ -292,13 +312,13 @@ _[2-3 studenten tonen hun werk]_
---
### Slide 19: Samenvatting
### Slide 20: Samenvatting
**[11:40 - 11:50]**
"Wat hebben we gedaan vandaag?"
- OpenCode: open-source AI assistant
- OpenCode: terminal versie én Desktop App
- OpenCode Zen: gratis AI modellen
- Plan vs Build mode
- @ file mentions voor context
@@ -310,7 +330,7 @@ _[Ruimte voor vragen]_
---
### Slide 20: Huiswerk
### Slide 21: Huiswerk
**[11:50 - 11:55]**
@@ -322,7 +342,7 @@ _[Ruimte voor vragen]_
---
### Slide 21: Afsluiting
### Slide 22: Afsluiting
**[11:55 - 12:00]**