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

fix: les 2

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -60,7 +60,7 @@ Open http://localhost:3000 - je ziet je website!
### Selecteer gratis AI model
1. Druk `Ctrl+O`
2. Kies "OpenCode Zen"
3. Selecteer "GLM 4.7"
3. Selecteer "Kimi K2.5 Free"
### Start je project (in de ingebouwde terminal)
```bash

2
Les02-OpenCode/Les02-Bijlage-B-Huiswerkopdracht.md
View File

@@ -25,7 +25,7 @@ Kies bij de prompts:
1. Open de Desktop App
2. Open je projectfolder
3. Selecteer OpenCode Zen → GLM 4.7 (gratis)
3. Selecteer OpenCode Zen → Kimi K2.5 Free (gratis)
### Stap 3: Bouw minimaal 3 componenten

51
Les02-OpenCode/Les02-Docenttekst-Notes.md
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!"

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

@@ -55,7 +55,7 @@ _[Wijs naar de problemen]_
"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."
"Het mooie: je kiest je eigen AI. Er zijn gratis modellen beschikbaar, dus je hebt geen API key nodig."
---
@@ -67,7 +67,7 @@ _[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 GLM 4.7. Gratis, geen key nodig."
"Het AI model stel je in met Ctrl+O. Kies OpenCode Zen, dan Kimi K2.5 Free. Gratis!"
---
@@ -101,7 +101,7 @@ _[Belangrijk punt - benadrukken!]_
### Slide 9: De Deployment Workflow
**[09:18 - 09:20]**
**[09:18 - 09:19]**
"Dit is de workflow die jullie vandaag gaan gebruiken:"
@@ -109,9 +109,21 @@ _[Belangrijk punt - benadrukken!]_
---
### Slide 10: Optioneel - OpenAI API Key
**[09:19 - 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."
"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!"
---
## BLOK 3: SETUP & DEMO (20 minuten)
### Slide 10: Demo - Terminal Versie
### Slide 11: Demo - Terminal Versie
**[09:20 - 09:25]**
@@ -132,7 +144,7 @@ _[Start opencode in terminal]_
---
### Slide 11: Desktop App
### Slide 12: Desktop App
**[09:25 - 09:28]**
@@ -146,7 +158,7 @@ _[Laat studenten Desktop App downloaden van opencode.ai/download]_
---
### Slide 12: Demo - Desktop App Setup
### Slide 13: Demo - Desktop App Setup
**[09:28 - 09:32]**
@@ -156,7 +168,7 @@ _[LIVE DEMO in Desktop App]_
_[Open project folder]_
"Nu het AI model: Ctrl+O, kies OpenCode Zen, dan GLM 4.7. Gratis, geen key nodig."
"Nu het AI model: Ctrl+O, kies OpenCode Zen, dan Kimi K2.5 Free."
_[Laat studenten ook configureren - help waar nodig]_
@@ -166,7 +178,7 @@ _[Toon localhost:3000 in browser]_
---
### Slide 13: Demo - Plan Mode
### Slide 14: Demo - Plan Mode
**[09:32 - 09:36]**
@@ -182,7 +194,7 @@ _[Wacht op response]_
---
### Slide 14: Demo - Build Mode
### Slide 15: Demo - Build Mode
**[09:36 - 09:40]**
@@ -200,7 +212,7 @@ _[Wacht op generatie]_
## BLOK 4: GIT & VERCEL WORKFLOW (10 minuten)
### Slide 15: Demo - Git Push
### Slide 16: Demo - Git Push
**[09:40 - 09:43]**
@@ -218,7 +230,7 @@ git push
---
### Slide 16: Demo - Vercel Auto-Deploy
### Slide 17: Demo - Vercel Auto-Deploy
**[09:43 - 09:47]**
@@ -236,7 +248,7 @@ _[Wacht/toon resultaat]_
---
### Slide 17: Nieuw project naar Vercel
### Slide 18: Nieuw project naar Vercel
**[09:47 - 09:50]**
@@ -252,7 +264,7 @@ _[Toon Vercel dashboard]_
## BLOK 5: HANDS-ON OPDRACHT (85 minuten + 15 min pauze)
### Slide 18: Aan de slag!
### Slide 19: Aan de slag!
**[09:50 - 09:55]** _(5 minuten uitleg)_
@@ -275,7 +287,7 @@ _[Loop actief rond, help bij opstartproblemen]_
**Let op:**
- Draait npm run dev?
- Lukt git clone/pull?
- OpenCode Zen geselecteerd?
- Kimi K2.5 Free geselecteerd?
---
@@ -308,7 +320,7 @@ _[Loop actief rond]_
## BLOK 6: AFSLUITING (30 minuten)
### Slide 19: Resultaten delen
### Slide 20: Resultaten delen
**[11:30 - 11:40]**
@@ -320,25 +332,24 @@ _[2-3 studenten tonen hun werk]_
---
### Slide 20: Samenvatting
### Slide 21: Samenvatting
**[11:40 - 11:50]**
"Wat hebben we gedaan vandaag?"
- OpenCode: terminal versie én Desktop App
- OpenCode Zen: gratis AI modellen
- Gratis model: Kimi K2.5 Free
- Optioneel: OpenAI met API key
- Plan vs Build mode
- @ file mentions voor context
- De volledige workflow: lokaal ontwikkelen, pushen, automatisch live
"Van v0 copy/paste naar echte lokale development."
_[Ruimte voor vragen]_
---
### Slide 21: Huiswerk
### Slide 22: Huiswerk
**[11:50 - 11:55]**
@@ -350,7 +361,7 @@ _[Ruimte voor vragen]_
---
### Slide 22: Afsluiting
### Slide 23: Afsluiting
**[11:55 - 12:00]**

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

@@ -21,7 +21,7 @@
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 OpenCode Zen (gratis)
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
@@ -66,9 +66,10 @@ Na deze les kan de student:
| 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:20 | Vercel deployment workflow | 9 |
| 09:18-09:19 | Vercel deployment workflow | 9 |
| 09:19-09:20 | Optioneel: OpenAI API key | 10 |
**Belangrijk:** OpenCode Zen is gratis - geen API key nodig!
**Belangrijk:** We gebruiken Kimi K2.5 Free - gratis, geen API key nodig!
---
@@ -76,11 +77,11 @@ Na deze les kan de student:
| Tijd | Activiteit | Slides |
|------|------------|--------|
| 09:20-09:25 | **DEMO:** Terminal versie (shortcuts, modes) | 10 |
| 09:25-09:28 | Introductie Desktop App | 11 |
| 09:28-09:32 | **DEMO:** Desktop App setup + project laden | 12 |
| 09:32-09:36 | **DEMO:** Plan mode - project analyseren | 13 |
| 09:36-09:40 | **DEMO:** Build mode - nieuwe pagina maken | 14 |
| 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 |
---
@@ -88,9 +89,9 @@ Na deze les kan de student:
| Tijd | Activiteit | Slides |
|------|------------|--------|
| 09:40-09:43 | **DEMO:** Git add, commit, push | 15 |
| 09:43-09:47 | **DEMO:** Vercel auto-deploy tonen | 16 |
| 09:47-09:50 | Nieuw project naar Vercel (voor huiswerk) | 17 |
| 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 |
**Kernboodschap:** "Push naar GitHub = automatisch live op Vercel"
@@ -100,7 +101,7 @@ Na deze les kan de student:
| Tijd | Activiteit | Slides |
|------|------------|--------|
| 09:50-09:55 | Opdracht uitleggen | 18 |
| 09:50-09:55 | Opdracht uitleggen | 19 |
| 09:55-10:15 | Studenten werken (20 min) | - |
| 10:15-10:30 | ☕ **PAUZE** | - |
| 10:30-11:30 | Studenten werken (60 min) | - |
@@ -135,10 +136,10 @@ Na deze les kan de student:
| Tijd | Activiteit | Slides |
|------|------------|--------|
| 11:30-11:40 | Resultaten delen (2-3 studenten) | 19 |
| 11:40-11:50 | Samenvatting + Q&A | 20 |
| 11:50-11:55 | Huiswerk uitleggen | 21 |
| 11:55-12:00 | Afsluiting | 22 |
| 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 |
---
@@ -159,7 +160,7 @@ Na deze les kan de student:
| `npm run dev` werkt niet | Check of je in de juiste map staat |
| Git push rejected | `git pull` eerst, dan push |
| Vercel deployt niet | Check GitHub repo permissions |
| OpenCode Zen traag | Normaal, gratis model is iets langzamer |
| Kimi K2.5 traag | Normaal, gratis model is iets langzamer |
---
@@ -167,8 +168,9 @@ Na deze les kan de student:
| Provider | Kosten | Setup |
|----------|--------|-------|
| **OpenCode Zen (GLM 4.7)** | Gratis | Geen key nodig |
| **Kimi K2.5 Free** | Gratis | Geen key nodig (via OpenCode Zen) |
| **OpenAI (GPT-4)** | Betaald (~$0.01/prompt) | API key via platform.openai.com |
| **Groq** | Gratis tier | API key via console.groq.com |
| **Ollama** | Gratis (lokaal) | Installatie + model download |
**Aanbeveling:** Start met Zen. Ollama als thuiswerk voor wie privacy wil.
**Aanbeveling:** Start met Kimi K2.5 Free. OpenAI voor wie extra kwaliteit wil (kost geld).

72
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:** 22
> **Totale slides:** 23
> **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-9 | 10 min |
| 3 | Setup & Demo | 10-14 | 20 min |
| 4 | Git & Vercel Workflow | 15-17 | 10 min |
| 5 | Hands-on Opdracht | 18 | 85 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 |
| - | **☕ PAUZE** | - | 15 min |
| 6 | Afsluiting | 19-22 | 30 min |
| 6 | Afsluiting | 20-23 | 30 min |
---
@@ -70,11 +70,11 @@
### Slide 5: Wat is OpenCode?
- 🌟 Open source (60.000+ GitHub stars)
- 🔌 Kies je AI: **OpenCode Zen** (gratis!), Groq, Ollama
- 🔌 Kies je AI: OpenCode Zen, Groq, Ollama, **OpenAI**
- 🖥️ Terminal én **Desktop App** (met ingebouwde terminal!)
- 🔒 Privacy-first
**Vandaag:** Desktop App + OpenCode Zen (gratis, geen key nodig)
**Vandaag:** Desktop App + gratis model (Kimi K2.5 Free)
---
@@ -89,8 +89,8 @@ npm i -g opencode-ai@latest
- Download: **opencode.ai/download**
- Installeer voor jouw OS (Mac/Windows)
**AI Model (gratis):**
- `Ctrl+O` → OpenCode Zen → GLM 4.7
**Gratis AI Model:**
- `Ctrl+O` → OpenCode Zen → **Kimi K2.5 Free**
---
@@ -134,9 +134,25 @@ Jullie Vercel project is al gekoppeld aan GitHub.
---
### Slide 10: Optioneel - OpenAI API Key
**Wil je GPT-4 gebruiken?**
1. Ga naar **platform.openai.com**
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
**Let op:** OpenAI is betaald (~$0.01 per prompt)
**Tip:** Start met Kimi K2.5 Free, upgrade later als je wilt!
---
## BLOK 3: SETUP & DEMO (20 minuten)
### Slide 10: Demo - Terminal Versie
### Slide 11: Demo - Terminal Versie
**Live demo:**
```bash
@@ -153,7 +169,7 @@ opencode
---
### Slide 11: Desktop App
### Slide 12: Desktop App
**Download:** opencode.ai/download
@@ -166,17 +182,17 @@ opencode
---
### Slide 12: Demo - Desktop App Setup
### Slide 13: Demo - Desktop App Setup
**Live demo:**
1. Open Desktop App
2. Open project folder (je v0 repo)
3. `Ctrl+O` → OpenCode Zen → GLM 4.7
3. `Ctrl+O` → OpenCode Zen → **Kimi K2.5 Free**
4. In terminal: `npm install` + `npm run dev`
---
### Slide 13: Demo - Plan Mode
### Slide 14: Demo - Plan Mode
**Live demo in Desktop App:**
1. Check: 📋 = Plan mode
@@ -186,7 +202,7 @@ _(AI leest alleen, verandert niets)_
---
### Slide 14: Demo - Build Mode
### Slide 15: Demo - Build Mode
**Live demo in Desktop App:**
1. `Tab` → wissel naar 🔨
@@ -199,7 +215,7 @@ _(AI leest alleen, verandert niets)_
## BLOK 4: GIT & VERCEL WORKFLOW (10 minuten)
### Slide 15: Demo - Git Push
### Slide 16: Demo - Git Push
**Live demo (in Desktop App terminal):**
```bash
@@ -212,7 +228,7 @@ Of gebruik GitHub Desktop!
---
### Slide 16: Demo - Vercel Auto-Deploy
### Slide 17: Demo - Vercel Auto-Deploy
**Live demo:**
1. Open Vercel dashboard
@@ -223,7 +239,7 @@ Of gebruik GitHub Desktop!
---
### Slide 17: Nieuw project naar Vercel (voor huiswerk)
### Slide 18: Nieuw project naar Vercel (voor huiswerk)
**Stappen voor een nieuw project:**
@@ -239,7 +255,7 @@ Of gebruik GitHub Desktop!
## BLOK 5: HANDS-ON OPDRACHT (85 minuten)
### Slide 18: Aan de slag! (blijft op scherm)
### Slide 19: Aan de slag! (blijft op scherm)
```
┌─────────────────────────────────────────────────────┐
@@ -255,7 +271,7 @@ Of gebruik GitHub Desktop!
│ ───────────────────────────────────────────────── │
│ 1. Open Desktop App │
│ 2. File → Open Folder → je project │
│ 3. Ctrl+O → OpenCode Zen → GLM 4.7 │
│ 3. Ctrl+O → OpenCode Zen → Kimi K2.5 Free │
├─────────────────────────────────────────────────────┤
│ STAP 3: BOUW MET OPENCODE │
│ ───────────────────────────────────────────────── │
@@ -279,7 +295,7 @@ Of gebruik GitHub Desktop!
## BLOK 6: AFSLUITING (30 minuten)
### Slide 19: Resultaten delen
### Slide 20: Resultaten delen
- Wie wil laten zien?
- Wat heb je toegevoegd?
@@ -287,18 +303,18 @@ Of gebruik GitHub Desktop!
---
### Slide 20: Samenvatting
### Slide 21: Samenvatting
- ✅ OpenCode: open-source AI assistant
- ✅ OpenCode Zen: gratis AI modellen
- ✅ Gratis model: Kimi K2.5 Free
- ✅ Optioneel: OpenAI met API key
- ✅ Plan vs Build mode
- ✅ @ file mentions voor context
- ✅ Git push → Vercel auto-deploy
- ✅ Van v0 copy/paste → lokale development
---
### Slide 21: Huiswerk
### Slide 22: Huiswerk
**Opdracht: Nieuw project vanaf scratch**
@@ -313,11 +329,11 @@ Of gebruik GitHub Desktop!
**In Les 3:** We gaan iedereen langs en bespreken je prompts!
**Stappen voor Vercel: zie slide 17!**
**Stappen voor Vercel: zie slide 18!**
---
### Slide 22: Volgende les
### Slide 23: Volgende les
**Les 3:** OpenCode IDE Integratie