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

fix: update les

Browse Source
This commit is contained in:
Tim Rijkse
2026-02-07 11:03:42 +01:00
parent fdce1ea0e4
commit d323cb004c
4 changed files with 115 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -50,7 +50,15 @@
--- ---
### Slide 6: Build vs Plan Mode ### Slide 6: Installatie
- **Terminal:** `npm i -g opencode-ai@latest`
- **Desktop App:** opencode.ai/download
- **AI Model:** `Ctrl+O` → OpenCode Zen → GLM 4.7
- "Wij gebruiken vandaag de Desktop App"
---
### Slide 7: Build vs Plan Mode
- **Plan (📋):** leest, analyseert, verandert NIETS - **Plan (📋):** leest, analyseert, verandert NIETS
- **Build (🔨):** schrijft code, maakt bestanden - **Build (🔨):** schrijft code, maakt bestanden
- Wisselen: `Tab` - Wisselen: `Tab`
@@ -60,21 +68,14 @@
--- ---
### Slide 7: Shortcuts ### Slide 8: Shortcuts
- `Ctrl+K` = command menu - `Ctrl+K` = command menu
- `Tab` = wissel mode - `Tab` = wissel mode
- `@` = zoek bestanden - `@` = zoek bestanden (context!)
- `Ctrl+O` = model kiezen - `Ctrl+O` = model kiezen
--- ---
### Slide 8: @ Mention
- Typ `@` + filename
- AI krijgt exacte context
- Voorbeeld: @Hero.tsx voeg gradient toe
---
### Slide 9: Deployment Workflow ### Slide 9: Deployment Workflow
- Wijzig code → git add → commit → push - Wijzig code → git add → commit → push
- Vercel pakt automatisch op - Vercel pakt automatisch op
@@ -159,13 +160,29 @@ git push
--- ---
### Slide 18: Opdracht (09:50-09:55) ### Slide 18: Opdracht (09:50-09:55)
- **Maak nieuwe pagina in je v0 project:**
1. Clone/pull repo **Blijft op scherm tijdens hands-on!**
2. npm install + npm run dev
3. Maak nieuwe pagina (/about, /services, /contact) ```
4. Voeg link op homepage + push → live op Vercel STAP 1: PROJECT KLAARZETTEN
- **Doel:** minimaal 2x deployen git clone → cd → npm install → npm run dev
- "Kwart over 10 pauze!" Open http://localhost:3000
STAP 2: OPENCODE DESKTOP APP
Open App → Open Folder → Ctrl+O → Zen → GLM 4.7
STAP 3: BOUW MET OPENCODE
□ Nieuwe pagina (/about, /services, /contact)
□ Voeg 2 componenten toe
□ Voeg link op homepage
💡 Eén prompt per taak!
STAP 4: DEPLOY
git add . → git commit → git push
Check Vercel dashboard
```
**Doel:** minimaal 2x deployen | ☕ Pauze: 10:15-10:30
--- ---

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

@@ -49,7 +49,7 @@ _[Wijs naar de problemen]_
### Slide 5: Wat is OpenCode? ### Slide 5: Wat is OpenCode?
**[09:10 - 09:13]** **[09:10 - 09:12]**
"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."
@@ -59,9 +59,21 @@ _[Wijs naar de problemen]_
--- ---
### Slide 6: Build vs Plan Mode ### Slide 6: Installatie
**[09:13 - 09:15]** **[09:12 - 09:14]**
"Hoe installeer je het? Voor terminal: npm i -g opencode-ai@latest."
"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."
---
### Slide 7: Build vs Plan Mode
**[09:14 - 09:16]**
"Belangrijk concept: twee modes." "Belangrijk concept: twee modes."
@@ -69,7 +81,7 @@ _[Wijs naar de problemen]_
"**Build mode** - de hamer. AI kan code schrijven en bestanden aanmaken." "**Build mode** - de hamer. AI kan code schrijven en bestanden aanmaken."
"Wisselen doe je met Tab. Workflow: eerst Plan om te begrijpen, dan Build om te bouwen." "Wisselen doe je met Tab."
_[Belangrijk punt - benadrukken!]_ _[Belangrijk punt - benadrukken!]_
@@ -77,21 +89,13 @@ _[Belangrijk punt - benadrukken!]_
--- ---
### Slide 7: Shortcuts ### Slide 8: Shortcuts
**[09:15 - 09:17]** **[09:16 - 09:18]**
"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. Ctrl+O om je AI model te kiezen." "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."
---
### Slide 8: De @ mention
**[09:17 - 09:18]**
"Die @ is krachtig. Je typt @, begint een bestandsnaam te typen, en het zoekt door je project. Bijvoorbeeld: @Hero.tsx - voeg een gradient toe. De AI krijgt dan exacte context."
--- ---

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

@@ -33,6 +33,7 @@ Na deze les kan de student:
### Technische setup ### Technische setup
- [ ] OpenCode Terminal geïnstalleerd (`npm i -g opencode-ai@latest`) - [ ] OpenCode Terminal geïnstalleerd (`npm i -g opencode-ai@latest`)
- [ ] OpenCode Desktop App geïnstalleerd (opencode.ai/download)
- [ ] Demo project: een v0 repo gekloond en werkend - [ ] Demo project: een v0 repo gekloond en werkend
- [ ] Git geconfigureerd - [ ] Git geconfigureerd
@@ -61,9 +62,10 @@ Na deze les kan de student:
| Tijd | Activiteit | Slides | | Tijd | Activiteit | Slides |
|------|------------|--------| |------|------------|--------|
| 09:10-09:13 | Wat is OpenCode? + OpenCode Zen | 5 | | 09:10-09:12 | Wat is OpenCode? | 5 |
| 09:13-09:15 | Build vs Plan mode | 6 | | 09:12-09:14 | Installatie (Terminal + Desktop App) | 6 |
| 09:15-09:18 | Shortcuts + @ mentions | 7-8 | | 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:20 | Vercel deployment workflow | 9 |
**Belangrijk:** OpenCode Zen is gratis - geen API key nodig! **Belangrijk:** OpenCode Zen is gratis - geen API key nodig!

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

@@ -78,7 +78,23 @@
--- ---
### Slide 6: Build vs Plan Mode ### Slide 6: Installatie
**Terminal versie:**
```bash
npm i -g opencode-ai@latest
```
**Desktop App:**
- Download: **opencode.ai/download**
- Installeer voor jouw OS (Mac/Windows)
**AI Model (gratis):**
- `Ctrl+O` → OpenCode Zen → GLM 4.7
---
### Slide 7: Build vs Plan Mode
| Mode | Icoon | Wat het doet | | Mode | Icoon | Wat het doet |
|------|-------|--------------| |------|-------|--------------|
@@ -87,15 +103,13 @@
**Wisselen:** `Tab` **Wisselen:** `Tab`
**Workflow:** Plan → begrijpen → Build → bouwen
**💡 Tip: Eén prompt per taak!** **💡 Tip: Eén prompt per taak!**
- ❌ "Maak een complete website met header, hero en footer" - ❌ "Maak een complete website met header, hero en footer"
- ✅ "Maak een Header component" → "Voeg hero toe" → "Maak footer" - ✅ "Maak een Header component" → "Voeg hero toe" → "Maak footer"
--- ---
### Slide 7: Keyboard Shortcuts ### Slide 8: Keyboard Shortcuts
| Shortcut | Actie | | Shortcut | Actie |
|----------|-------| |----------|-------|
@@ -106,25 +120,12 @@
--- ---
### Slide 8: De @ file mention
```
@src/components/Hero.tsx
Maak de heading groter en voeg een gradient toe
```
- Typ `@` + begin filename
- Fuzzy search door project
- AI krijgt exacte context
---
### Slide 9: De Deployment Workflow ### Slide 9: De Deployment Workflow
``` ```
1. Wijzig code met OpenCode 1. Wijzig code met OpenCode
2. git add . 2. git add .
3. git commit -m "Add testimonials" 3. git commit -m "Add about page"
4. git push 4. git push
5. ✨ Vercel deployt automatisch! 5. ✨ Vercel deployt automatisch!
``` ```
@@ -139,14 +140,14 @@ Jullie Vercel project is al gekoppeld aan GitHub.
**Live demo:** **Live demo:**
```bash ```bash
npm i -g opencode-ai@latest
opencode opencode
``` ```
**Laat zien:** **Laat zien in actie:**
- TUI (Terminal User Interface) - Plan mode: "Analyseer dit project"
- Shortcuts: `Ctrl+K`, `Tab`, `@`, `Ctrl+O` - Build mode: `Tab` → "Voeg een component toe"
- Plan vs Build mode - @ mention: `@src/components/`
- Shortcuts: `Ctrl+K`, `Ctrl+O`
→ Krachtig! Maar we gaan iets gebruiksvriendelijkers gebruiken... → Krachtig! Maar we gaan iets gebruiksvriendelijkers gebruiken...
@@ -238,30 +239,41 @@ Of gebruik GitHub Desktop!
## BLOK 5: HANDS-ON OPDRACHT (85 minuten) ## BLOK 5: HANDS-ON OPDRACHT (85 minuten)
### Slide 18: Aan de slag! ### Slide 18: Aan de slag! (blijft op scherm)
**Opdracht:** Maak een nieuwe pagina in je v0 project ```
┌─────────────────────────────────────────────────────┐
│ STAP 1: PROJECT KLAARZETTEN │
│ ───────────────────────────────────────────────── │
│ git clone https://github.com/[user]/[repo].git │
│ cd [repo] │
│ npm install │
│ npm run dev │
│ → Open http://localhost:3000 │
├─────────────────────────────────────────────────────┤
│ STAP 2: OPENCODE DESKTOP APP │
│ ───────────────────────────────────────────────── │
│ 1. Open Desktop App │
│ 2. File → Open Folder → je project │
│ 3. Ctrl+O → OpenCode Zen → GLM 4.7 │
├─────────────────────────────────────────────────────┤
│ STAP 3: BOUW MET OPENCODE │
│ ───────────────────────────────────────────────── │
│ □ Maak nieuwe pagina (/about, /services, /contact) │
│ □ Voeg 2 componenten toe │
│ □ Voeg link op homepage │
│ 💡 Eén prompt per taak! │
├─────────────────────────────────────────────────────┤
│ STAP 4: DEPLOY │
│ ───────────────────────────────────────────────── │
│ git add . │
│ git commit -m "Add about page" │
│ git push │
│ → Check Vercel dashboard │
└─────────────────────────────────────────────────────┘
```
**Stappen:** **Doel:** Minimaal 2x deployen | ☕ **Pauze:** 10:15-10:30
1. Clone je repo (of pull latest)
2. `npm install` + `npm run dev`
3. Met OpenCode:
- Maak nieuwe pagina (/about, /services, of /contact)
- Voeg minimaal 2 componenten toe aan de pagina
- Voeg link op homepage toe naar de nieuwe pagina
4. Push naar GitHub → bekijk live!
**💡 Onthoud: Eén prompt per taak!**
- Eerst de pagina structuur
- Dan component 1
- Dan component 2
- Dan de link op homepage
**Doel:** Minimaal 2 keer deployen naar Vercel
**Tijd:** 85 minuten (09:50-10:15 + 10:30-11:30)
☕ **Pauze:** 10:15-10:30
--- ---