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-07 10:31:25 +01:00
parent 3584a9ae75
commit 970efbc8bc
7 changed files with 193 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,9 +4,9 @@
## Doel ## Doel
Breid je v0 website uit met OpenCode. Je leert: Maak een nieuwe pagina in je v0 project met de OpenCode Desktop App. Je leert:
- Project lokaal draaien - Werken met de OpenCode Desktop App
- Werken met Plan en Build mode - Plan mode en Build mode gebruiken
- Wijzigingen deployen via git push - Wijzigingen deployen via git push
--- ---
@@ -50,19 +50,25 @@ Open http://localhost:3000 - je ziet je website!
--- ---
## Stap 2: OpenCode Configureren (10 min) ## Stap 2: OpenCode Desktop App (10 min)
### Start OpenCode ### Open de Desktop App
```bash 1. Start OpenCode Desktop App
opencode 2. Open je projectfolder (File → Open Folder)
``` 3. Selecteer je v0 project
### Selecteer gratis AI model ### Selecteer gratis AI model
1. Druk `Ctrl+O` 1. Druk `Ctrl+O`
2. Kies "OpenCode Zen" 2. Kies "OpenCode Zen"
3. Selecteer "GLM 4.7" 3. Selecteer "GLM 4.7"
**Checkpoint:** ✅ OpenCode draait met Zen model ### Start je project (in de ingebouwde terminal)
```bash
npm install
npm run dev
```
**Checkpoint:** ✅ Desktop App draait + localhost:3000 werkt
--- ---

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

@@ -44,6 +44,7 @@
### Slide 5: Wat is OpenCode? ### Slide 5: Wat is OpenCode?
- Open source, 60.000+ stars - Open source, 60.000+ stars
- Terminal én **Desktop App** (met ingebouwde terminal!)
- Kies je AI: **OpenCode Zen** (gratis!) - Kies je AI: **OpenCode Zen** (gratis!)
- Geen API key nodig - Geen API key nodig
@@ -82,35 +83,38 @@
--- ---
### Slide 10: Installatie ### Slide 10: Demo - Terminal Versie
- **DEMO + studenten doen mee:** - **LIVE DEMO:** `npm i -g opencode-ai@latest` + `opencode`
```bash - Toon shortcuts: `Ctrl+K`, `Tab`, `@`, `Ctrl+O`
npm i -g opencode-ai@latest - Toon Plan/Build mode
opencode - "Krachtig! Maar we gaan iets gebruiksvriendelijkers gebruiken..."
```
---
### Slide 11: Desktop App
- opencode.ai/download
- Zelfde features, vriendelijker
- **Ingebouwde terminal!**
- Studenten downloaden
---
### Slide 12: Demo - Desktop App Setup
- **DEMO in Desktop App:**
- Open project folder (v0 repo)
- `Ctrl+O` → OpenCode Zen → GLM 4.7 - `Ctrl+O` → OpenCode Zen → GLM 4.7
- In terminal: `npm install` + `npm run dev`
--- ---
### Slide 11: Demo - Lokaal draaien ### Slide 13: Demo - Plan Mode
- **DEMO:** - **DEMO in Desktop App:**
```bash
git clone [url]
npm install
npm run dev
```
- Open localhost:3000
---
### Slide 12: Demo - Plan Mode
- **DEMO:**
- "Analyseer dit project. Hoe werkt de routing?" - "Analyseer dit project. Hoe werkt de routing?"
- AI leest alleen, verandert niets - AI leest alleen, verandert niets
--- ---
### Slide 13: Demo - Build Mode ### Slide 14: Demo - Build Mode
- Tab → 🔨 - Tab → 🔨
- **DEMO:** "Maak nieuwe pagina /about met hero en link op homepage" - **DEMO:** "Maak nieuwe pagina /about met hero en link op homepage"
- Toon resultaat in browser - Toon resultaat in browser
@@ -121,7 +125,7 @@ npm run dev
--- ---
### Slide 14: Demo - Git Push ### Slide 15: Demo - Git Push
- **DEMO:** - **DEMO:**
```bash ```bash
git add . git add .
@@ -132,7 +136,7 @@ git push
--- ---
### Slide 15: Demo - Vercel Auto-Deploy ### Slide 16: Demo - Vercel Auto-Deploy
- **DEMO:** - **DEMO:**
- Open Vercel dashboard - Open Vercel dashboard
- Toon "Building..." status - Toon "Building..." status
@@ -140,7 +144,7 @@ git push
--- ---
### Slide 16: Nieuw project naar Vercel ### Slide 17: Nieuw project naar Vercel
- **Voor huiswerk!** v0 was automatisch gekoppeld - **Voor huiswerk!** v0 was automatisch gekoppeld
- **DEMO:** Vercel → Add New Project → Import Git Repository - **DEMO:** Vercel → Add New Project → Import Git Repository
- Selecteer repo → Deploy - Selecteer repo → Deploy
@@ -151,7 +155,7 @@ git push
--- ---
### Slide 17: Opdracht (09:50-09:55) ### Slide 18: Opdracht (09:50-09:55)
- **Maak nieuwe pagina in je v0 project:** - **Maak nieuwe pagina in je v0 project:**
1. Clone/pull repo 1. Clone/pull repo
2. npm install + npm run dev 2. npm install + npm run dev
@@ -192,31 +196,31 @@ Help bij opstartproblemen:
--- ---
### Slide 18: Resultaten ### Slide 19: Resultaten
- 2-3 studenten tonen werk - 2-3 studenten tonen werk
- "Wat toegevoegd? Hoeveel keer gepusht?" - "Wat toegevoegd? Hoeveel keer gepusht?"
--- ---
### Slide 19: Samenvatting ### Slide 20: Samenvatting
- ✅ OpenCode + Zen (gratis) - ✅ OpenCode Terminal + Desktop App
- ✅ OpenCode Zen (gratis)
- ✅ Plan vs Build mode - ✅ Plan vs Build mode
- ✅ @ file mentions - ✅ @ file mentions
- ✅ Git push → auto deploy - ✅ Git push → auto deploy
- ✅ Van copy/paste → lokale dev
--- ---
### Slide 20: Huiswerk ### Slide 21: 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 16!) - **Vercel: Import Project** (zie slide 17!)
- 300 woorden reflectie - 300 woorden reflectie
--- ---
### Slide 21: Volgende les ### Slide 22: Volgende les
- OpenCode IDE Integratie - OpenCode IDE Integratie
- VSCode plugin - VSCode plugin
- "Tot dan!" - "Tot dan!"

100
Les02-OpenCode/Les02-Docenttekst.md
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." "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." "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) ## BLOK 3: SETUP & DEMO (20 minuten)
### Slide 10: Installatie ### Slide 10: Demo - Terminal Versie
**[09:20 - 09:25]** **[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 "Zelfde features, maar veel vriendelijker. En kijk - een ingebouwde terminal! Dit gaan we vandaag gebruiken."
git clone [demo-repo-url]
cd project-naam
npm install
npm run dev
```
"Open localhost:3000 - daar is de website, lokaal op mijn machine." _[Laat studenten Desktop App downloaden van opencode.ai/download]_
_[Toon de website in browser]_
--- ---
### 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?'" "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:" "Tab om naar Build mode te gaan. Nu vraag ik:"
@@ -172,17 +192,17 @@ _[Wacht op generatie]_
## BLOK 4: GIT & VERCEL WORKFLOW (10 minuten) ## 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." "Nu de belangrijke stap: deployen. Ik gebruik gewoon git."
```bash ```bash
git add . git add .
git commit -m "Add testimonials section" git commit -m "Add about page"
git push 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]_ _[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." "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) ## 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)_ **[09:50 - 09:55]** _(5 minuten uitleg)_
@@ -280,7 +300,7 @@ _[Loop actief rond]_
## BLOK 6: AFSLUITING (30 minuten) ## BLOK 6: AFSLUITING (30 minuten)
### Slide 18: Resultaten delen ### Slide 19: Resultaten delen
**[11:30 - 11:40]** **[11:30 - 11:40]**
@@ -292,13 +312,13 @@ _[2-3 studenten tonen hun werk]_
--- ---
### Slide 19: Samenvatting ### Slide 20: Samenvatting
**[11:40 - 11:50]** **[11:40 - 11:50]**
"Wat hebben we gedaan vandaag?" "Wat hebben we gedaan vandaag?"
- OpenCode: open-source AI assistant - OpenCode: terminal versie én Desktop App
- OpenCode Zen: gratis AI modellen - OpenCode Zen: gratis AI modellen
- Plan vs Build mode - Plan vs Build mode
- @ file mentions voor context - @ file mentions voor context
@@ -310,7 +330,7 @@ _[Ruimte voor vragen]_
--- ---
### Slide 20: Huiswerk ### Slide 21: Huiswerk
**[11:50 - 11:55]** **[11:50 - 11:55]**
@@ -322,7 +342,7 @@ _[Ruimte voor vragen]_
--- ---
### Slide 21: Afsluiting ### Slide 22: Afsluiting
**[11:55 - 12:00]** **[11:55 - 12:00]**

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

@@ -20,10 +20,10 @@
Na deze les kan de student: Na deze les kan de student:
1. Uitleggen wat OpenCode is en waarom het efficiënter is dan de v0/ChatGPT workflow 1. Uitleggen wat OpenCode is en het verschil tussen Terminal en Desktop App
2. OpenCode installeren en configureren met OpenCode Zen (gratis) 2. De OpenCode Desktop App installeren en configureren met OpenCode Zen (gratis)
3. Werken met Plan mode en Build mode 3. Werken met Plan mode en Build mode
4. Een bestaand GitHub project clonen en lokaal draaien 4. Een bestaand GitHub project openen en lokaal draaien (in de ingebouwde terminal)
5. Wijzigingen maken met OpenCode en deployen via git push 5. Wijzigingen maken met OpenCode en deployen via git push
6. De @ file mention gebruiken voor context 6. De @ file mention gebruiken voor context
@@ -74,10 +74,11 @@ Na deze les kan de student:
| Tijd | Activiteit | Slides | | Tijd | Activiteit | Slides |
|------|------------|--------| |------|------------|--------|
| 09:20-09:25 | OpenCode installatie + Zen configureren | 10 | | 09:20-09:25 | **DEMO:** Terminal versie (shortcuts, modes) | 10 |
| 09:25-09:30 | **DEMO:** Repo clonen, `npm install`, `npm run dev` | 11 | | 09:25-09:28 | Introductie Desktop App | 11 |
| 09:30-09:35 | **DEMO:** Plan mode - project analyseren | 12 | | 09:28-09:32 | **DEMO:** Desktop App setup + project laden | 12 |
| 09:35-09:40 | **DEMO:** Build mode - component toevoegen | 13 | | 09:32-09:36 | **DEMO:** Plan mode - project analyseren | 13 |
| 09:36-09:40 | **DEMO:** Build mode - nieuwe pagina maken | 14 |
--- ---
@@ -85,9 +86,9 @@ Na deze les kan de student:
| Tijd | Activiteit | Slides | | Tijd | Activiteit | Slides |
|------|------------|--------| |------|------------|--------|
| 09:40-09:43 | **DEMO:** Git add, commit, push | 14 | | 09:40-09:43 | **DEMO:** Git add, commit, push | 15 |
| 09:43-09:47 | **DEMO:** Vercel auto-deploy tonen | 15 | | 09:43-09:47 | **DEMO:** Vercel auto-deploy tonen | 16 |
| 09:47-09:50 | Nieuw project naar Vercel (voor huiswerk) | 16 | | 09:47-09:50 | Nieuw project naar Vercel (voor huiswerk) | 17 |
**Kernboodschap:** "Push naar GitHub = automatisch live op Vercel" **Kernboodschap:** "Push naar GitHub = automatisch live op Vercel"
@@ -97,7 +98,7 @@ Na deze les kan de student:
| Tijd | Activiteit | Slides | | Tijd | Activiteit | Slides |
|------|------------|--------| |------|------------|--------|
| 09:50-09:55 | Opdracht uitleggen | 17 | | 09:50-09:55 | Opdracht uitleggen | 18 |
| 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) | - |
@@ -132,10 +133,10 @@ Na deze les kan de student:
| Tijd | Activiteit | Slides | | Tijd | Activiteit | Slides |
|------|------------|--------| |------|------------|--------|
| 11:30-11:40 | Resultaten delen (2-3 studenten) | 18 | | 11:30-11:40 | Resultaten delen (2-3 studenten) | 19 |
| 11:40-11:50 | Samenvatting + Q&A | 19 | | 11:40-11:50 | Samenvatting + Q&A | 20 |
| 11:50-11:55 | Huiswerk uitleggen | 20 | | 11:50-11:55 | Huiswerk uitleggen | 21 |
| 11:55-12:00 | Afsluiting | 21 | | 11:55-12:00 | Afsluiting | 22 |
--- ---

87
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:** 21 > **Totale slides:** 22
> **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
@@ -13,11 +13,11 @@
|------|-----------|--------|------| |------|-----------|--------|------|
| 1 | Welkom & Terugblik | 1-4 | 10 min | | 1 | Welkom & Terugblik | 1-4 | 10 min |
| 2 | Introductie OpenCode | 5-9 | 10 min | | 2 | Introductie OpenCode | 5-9 | 10 min |
| 3 | Setup & Demo | 10-13 | 20 min | | 3 | Setup & Demo | 10-14 | 20 min |
| 4 | Git & Vercel Workflow | 14-16 | 10 min | | 4 | Git & Vercel Workflow | 15-17 | 10 min |
| 5 | Hands-on Opdracht | 17 | 85 min | | 5 | Hands-on Opdracht | 18 | 85 min |
| - | **☕ PAUZE** | - | 15 min | | - | **☕ PAUZE** | - | 15 min |
| 6 | Afsluiting | 18-21 | 30 min | | 6 | Afsluiting | 19-22 | 30 min |
--- ---
@@ -71,10 +71,10 @@
- 🌟 Open source (60.000+ GitHub stars) - 🌟 Open source (60.000+ GitHub stars)
- 🔌 Kies je AI: **OpenCode Zen** (gratis!), Groq, Ollama - 🔌 Kies je AI: **OpenCode Zen** (gratis!), Groq, Ollama
- 🖥️ Terminal of Desktop App - 🖥️ Terminal én **Desktop App** (met ingebouwde terminal!)
- 🔒 Privacy-first - 🔒 Privacy-first
**Vandaag:** OpenCode Zen met GLM 4.7 (gratis, geen key nodig) **Vandaag:** Desktop App + OpenCode Zen (gratis, geen key nodig)
--- ---
@@ -131,60 +131,75 @@ Jullie Vercel project is al gekoppeld aan GitHub.
## BLOK 3: SETUP & DEMO (20 minuten) ## BLOK 3: SETUP & DEMO (20 minuten)
### Slide 10: Installatie ### Slide 10: Demo - Terminal Versie
**Terminal:** **Live demo:**
```bash ```bash
npm i -g opencode-ai@latest npm i -g opencode-ai@latest
opencode opencode
``` ```
**AI Model:** **Laat zien:**
- `Ctrl+O` → OpenCode Zen → GLM 4.7 - TUI (Terminal User Interface)
- Gratis, geen key nodig! - Shortcuts: `Ctrl+K`, `Tab`, `@`, `Ctrl+O`
- Plan vs Build mode
→ Krachtig! Maar we gaan iets gebruiksvriendelijkers gebruiken...
--- ---
### Slide 11: Demo - Project Lokaal Draaien ### Slide 11: Desktop App
**Live demo:** **Download:** opencode.ai/download
1. Clone repo: `git clone <github-url>`
2. Open folder: `cd project-naam` **Voordelen:**
3. Install: `npm install` - Zelfde features als terminal
4. Start: `npm run dev` - Vriendelijkere interface
5. Open http://localhost:3000 - **Ingebouwde terminal!**
**Dit gaan we vandaag gebruiken.**
--- ---
### Slide 12: Demo - Plan Mode ### Slide 12: Demo - Desktop App Setup
**Live demo:** **Live demo:**
1. `opencode` in projectmap 1. Open Desktop App
2. Check: 📋 = Plan mode 2. Open project folder (je v0 repo)
3. Vraag: "Analyseer dit project en beschrijf de structuur" 3. `Ctrl+O` → OpenCode Zen → GLM 4.7
4. In terminal: `npm install` + `npm run dev`
---
### Slide 13: 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)_ _(AI leest alleen, verandert niets)_
--- ---
### Slide 13: Demo - Build Mode ### Slide 14: Demo - Build Mode
**Live demo:** **Live demo in Desktop App:**
1. `Tab` → wissel naar 🔨 1. `Tab` → wissel naar 🔨
2. Vraag: "Voeg een Testimonials sectie toe onder de hero" 2. Vraag: "Maak een nieuwe pagina /about met hero en link op homepage"
3. Review de code 3. Review de code
4. Accept 4. Accept
5. Refresh browser → zie resultaat!
--- ---
## BLOK 4: GIT & VERCEL WORKFLOW (10 minuten) ## BLOK 4: GIT & VERCEL WORKFLOW (10 minuten)
### Slide 14: Demo - Git Push ### Slide 15: Demo - Git Push
**Live demo:** **Live demo (in Desktop App terminal):**
```bash ```bash
git add . git add .
git commit -m "Add testimonials section" git commit -m "Add about page"
git push git push
``` ```
@@ -192,7 +207,7 @@ Of gebruik GitHub Desktop!
--- ---
### Slide 15: Demo - Vercel Auto-Deploy ### Slide 16: Demo - Vercel Auto-Deploy
**Live demo:** **Live demo:**
1. Open Vercel dashboard 1. Open Vercel dashboard
@@ -203,7 +218,7 @@ Of gebruik GitHub Desktop!
--- ---
### Slide 16: Nieuw project naar Vercel (voor huiswerk) ### Slide 17: Nieuw project naar Vercel (voor huiswerk)
**Stappen voor een nieuw project:** **Stappen voor een nieuw project:**
@@ -219,7 +234,7 @@ Of gebruik GitHub Desktop!
## BLOK 5: HANDS-ON OPDRACHT (85 minuten) ## BLOK 5: HANDS-ON OPDRACHT (85 minuten)
### Slide 17: Aan de slag! ### Slide 18: Aan de slag!
**Opdracht:** Maak een nieuwe pagina in je v0 project **Opdracht:** Maak een nieuwe pagina in je v0 project
@@ -242,7 +257,7 @@ Of gebruik GitHub Desktop!
## BLOK 6: AFSLUITING (30 minuten) ## BLOK 6: AFSLUITING (30 minuten)
### Slide 18: Resultaten delen ### Slide 19: Resultaten delen
- Wie wil laten zien? - Wie wil laten zien?
- Wat heb je toegevoegd? - Wat heb je toegevoegd?
@@ -250,7 +265,7 @@ Of gebruik GitHub Desktop!
--- ---
### Slide 19: Samenvatting ### Slide 20: Samenvatting
- ✅ OpenCode: open-source AI assistant - ✅ OpenCode: open-source AI assistant
- ✅ OpenCode Zen: gratis AI modellen - ✅ OpenCode Zen: gratis AI modellen
@@ -261,7 +276,7 @@ Of gebruik GitHub Desktop!
--- ---
### Slide 20: Huiswerk ### Slide 21: Huiswerk
**Opdracht: Nieuw project vanaf scratch** **Opdracht: Nieuw project vanaf scratch**
@@ -275,7 +290,7 @@ Of gebruik GitHub Desktop!
--- ---
### Slide 21: Volgende les ### Slide 22: Volgende les
**Les 3:** OpenCode IDE Integratie **Les 3:** OpenCode IDE Integratie

26
Samenvattingen/Les02-Samenvatting.md
View File

@@ -6,7 +6,7 @@
**Deel 1: AI Foundations** (Les 1-4) **Deel 1: AI Foundations** (Les 1-4)
## Beschrijving ## Beschrijving
Introductie tot OpenCode: een open-source AI coding assistant met 60.000+ GitHub stars. Focus op de terminal versie met OpenCode Zen (gratis, geen API key nodig). Studenten werken met hun bestaande v0 project en leren de volledige development workflow: lokaal draaien, uitbreiden met AI, en deployen via git push. Introductie tot OpenCode: een open-source AI coding assistant met 60.000+ GitHub stars. Na een korte demo van de terminal versie werken studenten met de **Desktop App** (met ingebouwde terminal). Met OpenCode Zen (gratis, geen API key nodig) leren ze de volledige development workflow: lokaal draaien, uitbreiden met AI, en deployen via git push.
--- ---
@@ -32,8 +32,8 @@ Introductie tot OpenCode: een open-source AI coding assistant met 60.000+ GitHub
### Wat is OpenCode? ### Wat is OpenCode?
- Open-source AI coding assistant (60.000+ GitHub stars) - Open-source AI coding assistant (60.000+ GitHub stars)
- **Terminal versie** (krachtig) én **Desktop App** (gebruiksvriendelijk + ingebouwde terminal)
- **OpenCode Zen:** gratis AI modellen, geen API key nodig - **OpenCode Zen:** gratis AI modellen, geen API key nodig
- Terminal-based interface (TUI)
- Kies je eigen AI model: GLM 4.7 (aanbevolen) - Kies je eigen AI model: GLM 4.7 (aanbevolen)
--- ---
@@ -89,7 +89,7 @@ Voor nieuwe projecten (niet gekoppeld via v0):
--- ---
## Tools ## Tools
- OpenCode Terminal (`npm i -g opencode-ai@latest`) - OpenCode Desktop App (opencode.ai/download)
- OpenCode Zen (gratis AI, GLM 4.7) - OpenCode Zen (gratis AI, GLM 4.7)
- Git - Git
- Vercel - Vercel
@@ -112,16 +112,12 @@ npm run dev
Open http://localhost:3000 - je ziet je website! Open http://localhost:3000 - je ziet je website!
### Stap 2: OpenCode Configureren (10 min) ### Stap 2: OpenCode Desktop App (10 min)
```bash 1. Open Desktop App
opencode 2. Open je projectfolder
``` 3. `Ctrl+O` → OpenCode Zen → GLM 4.7
4. In ingebouwde terminal: `npm install` + `npm run dev`
Selecteer gratis AI model:
1. Druk `Ctrl+O`
2. Kies "OpenCode Zen"
3. Selecteer "GLM 4.7"
### Stap 3: Nieuwe Pagina Maken (45 min) ### Stap 3: Nieuwe Pagina Maken (45 min)
@@ -199,9 +195,9 @@ Schrijf over je ervaring:
## Leerdoelen ## Leerdoelen
Na deze les kan de student: Na deze les kan de student:
1. Uitleggen wat OpenCode is en waarom het efficiënter is dan de v0/ChatGPT workflow 1. Uitleggen wat OpenCode is en het verschil tussen Terminal en Desktop App
2. OpenCode installeren en configureren met OpenCode Zen (gratis) 2. De OpenCode Desktop App installeren en configureren met OpenCode Zen (gratis)
3. Werken met Plan mode en Build mode 3. Werken met Plan mode en Build mode
4. Een bestaand GitHub project clonen en lokaal draaien 4. Een bestaand GitHub project openen en lokaal draaien (in de ingebouwde terminal)
5. Wijzigingen maken met OpenCode en deployen via git push 5. Wijzigingen maken met OpenCode en deployen via git push
6. De @ file mention gebruiken voor context 6. De @ file mention gebruiken voor context

10
readme.md
View File

@@ -35,7 +35,7 @@ Een 18-weekse cursus die studenten meeneemt van AI-beginner naar AI-powered deve
| Deel | Lessen | Tools | Kosten | | Deel | Lessen | Tools | Kosten |
|------|--------|-------|--------| |------|--------|-------|--------|
| Deel 1: AI Foundations | 1-4 | ChatGPT, v0.dev, OpenCode, WebStorm | Gratis (WebStorm via school) | | Deel 1: AI Foundations | 1-4 | ChatGPT, v0.dev, OpenCode Desktop App, WebStorm | Gratis (WebStorm via school) |
| Deel 2: Technical Foundations | 5-9 | TypeScript, Next.js, React Query, Supabase | Gratis | | Deel 2: Technical Foundations | 5-9 | TypeScript, Next.js, React Query, Supabase | Gratis |
| Deel 3: Integration & AI Tooling | 10-12 | Next.js, Supabase, Cursor | Free tier beschikbaar | | Deel 3: Integration & AI Tooling | 10-12 | Next.js, Supabase, Cursor | Free tier beschikbaar |
| Deel 4: Advanced AI Features | 13-18 | Cursor, Custom GPTs, Claude Projects, Vercel AI SDK, Tool Calling, Agents | Free tier beschikbaar | | Deel 4: Advanced AI Features | 13-18 | Cursor, Custom GPTs, Claude Projects, Vercel AI SDK, Tool Calling, Agents | Free tier beschikbaar |
@@ -89,20 +89,20 @@ Kennismaking met AI, LLMs en de basis van AI-assisted development.
### Les 2: AI Code Assistants en OpenCode ### Les 2: AI Code Assistants en OpenCode
**Tools:** OpenCode Terminal, OpenCode Zen (gratis AI), Git, Vercel **Tools:** OpenCode Desktop App, OpenCode Zen (gratis AI), Git, Vercel
**Docent vertelt:** **Docent vertelt:**
- Wat is OpenCode? Open-source AI coding assistant met 60.000+ GitHub stars - Wat is OpenCode? Open-source AI coding assistant met 60.000+ GitHub stars
- Terminal versie (korte demo) vs Desktop App (wat we gebruiken)
- OpenCode Zen: gratis AI modellen, geen API key nodig - OpenCode Zen: gratis AI modellen, geen API key nodig
- Keyboard shortcuts: `Ctrl+K` (commands), `@` (file search), `Tab` (Build/Plan mode) - Keyboard shortcuts: `Ctrl+K` (commands), `@` (file search), `Tab` (Build/Plan mode)
- Build vs Plan mode: wanneer welke gebruiken - Build vs Plan mode: wanneer welke gebruiken
- De deployment workflow: git push → Vercel auto-deploy - De deployment workflow: git push → Vercel auto-deploy
- Nieuw project naar Vercel koppelen (voor huiswerk)
**Studenten doen:** **Studenten doen:**
- Korte terugblik op Les 1 (v0 workflow) - Korte terugblik op Les 1 (v0 workflow)
- OpenCode installeren en OpenCode Zen configureren - OpenCode Desktop App installeren en OpenCode Zen configureren
- Bestaand v0 project clonen en lokaal draaien - Bestaand v0 project openen en lokaal draaien (in ingebouwde terminal)
- Met OpenCode een nieuwe pagina maken + link op homepage - Met OpenCode een nieuwe pagina maken + link op homepage
- Deployen via git push → Vercel - Deployen via git push → Vercel