From d323cb004c7c97b4c7bed6e3d3e02f2e408e6c4b Mon Sep 17 00:00:00 2001 From: Tim Rijkse Date: Sat, 7 Feb 2026 11:03:42 +0100 Subject: [PATCH] fix: update les --- Les02-OpenCode/Les02-Docenttekst-Notes.md | 51 +++++++---- Les02-OpenCode/Les02-Docenttekst.md | 34 ++++---- Les02-OpenCode/Les02-Lesplan.md | 8 +- Les02-OpenCode/Les02-Slide-Overzicht.md | 102 ++++++++++++---------- 4 files changed, 115 insertions(+), 80 deletions(-) diff --git a/Les02-OpenCode/Les02-Docenttekst-Notes.md b/Les02-OpenCode/Les02-Docenttekst-Notes.md index d04c14a..305c46b 100644 --- a/Les02-OpenCode/Les02-Docenttekst-Notes.md +++ b/Les02-OpenCode/Les02-Docenttekst-Notes.md @@ -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 - **Build (πŸ”¨):** schrijft code, maakt bestanden - Wisselen: `Tab` @@ -60,21 +68,14 @@ --- -### Slide 7: Shortcuts +### Slide 8: Shortcuts - `Ctrl+K` = command menu - `Tab` = wissel mode -- `@` = zoek bestanden +- `@` = zoek bestanden (context!) - `Ctrl+O` = model kiezen --- -### Slide 8: @ Mention -- Typ `@` + filename -- AI krijgt exacte context -- Voorbeeld: @Hero.tsx voeg gradient toe - ---- - ### Slide 9: Deployment Workflow - Wijzig code β†’ git add β†’ commit β†’ push - Vercel pakt automatisch op @@ -159,13 +160,29 @@ git push --- ### Slide 18: Opdracht (09:50-09:55) -- **Maak nieuwe pagina in je v0 project:** - 1. Clone/pull repo - 2. npm install + npm run dev - 3. Maak nieuwe pagina (/about, /services, /contact) - 4. Voeg link op homepage + push β†’ live op Vercel -- **Doel:** minimaal 2x deployen -- "Kwart over 10 pauze!" + +**Blijft op scherm tijdens hands-on!** + +``` +STAP 1: PROJECT KLAARZETTEN + git clone β†’ cd β†’ npm install β†’ npm run dev + 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 --- diff --git a/Les02-OpenCode/Les02-Docenttekst.md b/Les02-OpenCode/Les02-Docenttekst.md index f26b3a8..6d527ab 100644 --- a/Les02-OpenCode/Les02-Docenttekst.md +++ b/Les02-OpenCode/Les02-Docenttekst.md @@ -49,7 +49,7 @@ _[Wijs naar de problemen]_ ### 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." @@ -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." @@ -69,7 +81,7 @@ _[Wijs naar de problemen]_ "**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!]_ @@ -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:" -"Ctrl+K voor het command menu. Tab om te wisselen tussen modes. @ om bestanden te zoeken. 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." +"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." --- diff --git a/Les02-OpenCode/Les02-Lesplan.md b/Les02-OpenCode/Les02-Lesplan.md index 21df307..f8df50e 100644 --- a/Les02-OpenCode/Les02-Lesplan.md +++ b/Les02-OpenCode/Les02-Lesplan.md @@ -33,6 +33,7 @@ Na deze les kan de student: ### Technische setup - [ ] 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 - [ ] Git geconfigureerd @@ -61,9 +62,10 @@ Na deze les kan de student: | Tijd | Activiteit | Slides | |------|------------|--------| -| 09:10-09:13 | Wat is OpenCode? + OpenCode Zen | 5 | -| 09:13-09:15 | Build vs Plan mode | 6 | -| 09:15-09:18 | Shortcuts + @ mentions | 7-8 | +| 09:10-09:12 | Wat is OpenCode? | 5 | +| 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 | **Belangrijk:** OpenCode Zen is gratis - geen API key nodig! diff --git a/Les02-OpenCode/Les02-Slide-Overzicht.md b/Les02-OpenCode/Les02-Slide-Overzicht.md index 08774d4..2058588 100644 --- a/Les02-OpenCode/Les02-Slide-Overzicht.md +++ b/Les02-OpenCode/Les02-Slide-Overzicht.md @@ -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 | |------|-------|--------------| @@ -87,15 +103,13 @@ **Wisselen:** `Tab` -**Workflow:** Plan β†’ begrijpen β†’ Build β†’ bouwen - **πŸ’‘ Tip: EΓ©n prompt per taak!** - ❌ "Maak een complete website met header, hero en footer" - βœ… "Maak een Header component" β†’ "Voeg hero toe" β†’ "Maak footer" --- -### Slide 7: Keyboard Shortcuts +### Slide 8: Keyboard Shortcuts | 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 ``` 1. Wijzig code met OpenCode 2. git add . -3. git commit -m "Add testimonials" +3. git commit -m "Add about page" 4. git push 5. ✨ Vercel deployt automatisch! ``` @@ -139,14 +140,14 @@ Jullie Vercel project is al gekoppeld aan GitHub. **Live demo:** ```bash -npm i -g opencode-ai@latest opencode ``` -**Laat zien:** -- TUI (Terminal User Interface) -- Shortcuts: `Ctrl+K`, `Tab`, `@`, `Ctrl+O` -- Plan vs Build mode +**Laat zien in actie:** +- Plan mode: "Analyseer dit project" +- Build mode: `Tab` β†’ "Voeg een component toe" +- @ mention: `@src/components/` +- Shortcuts: `Ctrl+K`, `Ctrl+O` β†’ Krachtig! Maar we gaan iets gebruiksvriendelijkers gebruiken... @@ -238,30 +239,41 @@ Of gebruik GitHub Desktop! ## 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:** -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 +**Doel:** Minimaal 2x deployen | β˜• **Pauze:** 10:15-10:30 ---