From 970efbc8bce2d7bb240ca342609f0551588f7abd Mon Sep 17 00:00:00 2001 From: Tim Rijkse Date: Sat, 7 Feb 2026 10:31:25 +0100 Subject: [PATCH] fix: les 2 --- Les02-OpenCode/Les02-Bijlage-A-Lesopdracht.md | 24 +++-- Les02-OpenCode/Les02-Docenttekst-Notes.md | 66 ++++++------ Les02-OpenCode/Les02-Docenttekst.md | 100 +++++++++++------- Les02-OpenCode/Les02-Lesplan.md | 31 +++--- Les02-OpenCode/Les02-Slide-Overzicht.md | 87 ++++++++------- Samenvattingen/Les02-Samenvatting.md | 26 ++--- readme.md | 10 +- 7 files changed, 193 insertions(+), 151 deletions(-) diff --git a/Les02-OpenCode/Les02-Bijlage-A-Lesopdracht.md b/Les02-OpenCode/Les02-Bijlage-A-Lesopdracht.md index 2f70102..2bae83f 100644 --- a/Les02-OpenCode/Les02-Bijlage-A-Lesopdracht.md +++ b/Les02-OpenCode/Les02-Bijlage-A-Lesopdracht.md @@ -4,9 +4,9 @@ ## Doel -Breid je v0 website uit met OpenCode. Je leert: -- Project lokaal draaien -- Werken met Plan en Build mode +Maak een nieuwe pagina in je v0 project met de OpenCode Desktop App. Je leert: +- Werken met de OpenCode Desktop App +- Plan mode en Build mode gebruiken - 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 -```bash -opencode -``` +### Open de Desktop App +1. Start OpenCode Desktop App +2. Open je projectfolder (File → Open Folder) +3. Selecteer je v0 project ### Selecteer gratis AI model 1. Druk `Ctrl+O` 2. Kies "OpenCode Zen" 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 --- diff --git a/Les02-OpenCode/Les02-Docenttekst-Notes.md b/Les02-OpenCode/Les02-Docenttekst-Notes.md index 8e8d3b6..f3206a1 100644 --- a/Les02-OpenCode/Les02-Docenttekst-Notes.md +++ b/Les02-OpenCode/Les02-Docenttekst-Notes.md @@ -44,6 +44,7 @@ ### 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 @@ -82,35 +83,38 @@ --- -### Slide 10: Installatie -- **DEMO + studenten doen mee:** -```bash -npm i -g opencode-ai@latest -opencode -``` +### Slide 10: Demo - Terminal Versie +- **LIVE DEMO:** `npm i -g opencode-ai@latest` + `opencode` +- Toon shortcuts: `Ctrl+K`, `Tab`, `@`, `Ctrl+O` +- Toon Plan/Build mode +- "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 +- In terminal: `npm install` + `npm run dev` --- -### Slide 11: Demo - Lokaal draaien -- **DEMO:** -```bash -git clone [url] -npm install -npm run dev -``` -- Open localhost:3000 - ---- - -### Slide 12: Demo - Plan Mode -- **DEMO:** +### Slide 13: Demo - Plan Mode +- **DEMO in Desktop App:** - "Analyseer dit project. Hoe werkt de routing?" - AI leest alleen, verandert niets --- -### Slide 13: Demo - Build Mode +### Slide 14: Demo - Build Mode - Tab → 🔨 - **DEMO:** "Maak nieuwe pagina /about met hero en link op homepage" - Toon resultaat in browser @@ -121,7 +125,7 @@ npm run dev --- -### Slide 14: Demo - Git Push +### Slide 15: Demo - Git Push - **DEMO:** ```bash git add . @@ -132,7 +136,7 @@ git push --- -### Slide 15: Demo - Vercel Auto-Deploy +### Slide 16: Demo - Vercel Auto-Deploy - **DEMO:** - Open Vercel dashboard - 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 - **DEMO:** Vercel → Add New Project → Import Git Repository - 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:** 1. Clone/pull repo 2. npm install + npm run dev @@ -192,31 +196,31 @@ Help bij opstartproblemen: --- -### Slide 18: Resultaten +### Slide 19: Resultaten - 2-3 studenten tonen werk - "Wat toegevoegd? Hoeveel keer gepusht?" --- -### Slide 19: Samenvatting -- ✅ OpenCode + Zen (gratis) +### Slide 20: Samenvatting +- ✅ OpenCode Terminal + Desktop App +- ✅ OpenCode Zen (gratis) - ✅ Plan vs Build mode - ✅ @ file mentions - ✅ Git push → auto deploy -- ✅ Van copy/paste → lokale dev --- -### Slide 20: Huiswerk +### Slide 21: Huiswerk - **Nieuw project vanaf scratch** - create-next-app → 3 componenten - Push naar GitHub -- **Vercel: Import Project** (zie slide 16!) +- **Vercel: Import Project** (zie slide 17!) - 300 woorden reflectie --- -### Slide 21: Volgende les +### Slide 22: Volgende les - OpenCode IDE Integratie - VSCode plugin - "Tot dan!" diff --git a/Les02-OpenCode/Les02-Docenttekst.md b/Les02-OpenCode/Les02-Docenttekst.md index 9e41b19..49b701e 100644 --- a/Les02-OpenCode/Les02-Docenttekst.md +++ b/Les02-OpenCode/Les02-Docenttekst.md @@ -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]** diff --git a/Les02-OpenCode/Les02-Lesplan.md b/Les02-OpenCode/Les02-Lesplan.md index d9c76e0..21df307 100644 --- a/Les02-OpenCode/Les02-Lesplan.md +++ b/Les02-OpenCode/Les02-Lesplan.md @@ -20,10 +20,10 @@ Na deze les kan de student: -1. Uitleggen wat OpenCode is en waarom het efficiënter is dan de v0/ChatGPT workflow -2. OpenCode installeren en configureren met OpenCode Zen (gratis) +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) 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 6. De @ file mention gebruiken voor context @@ -74,10 +74,11 @@ Na deze les kan de student: | Tijd | Activiteit | Slides | |------|------------|--------| -| 09:20-09:25 | OpenCode installatie + Zen configureren | 10 | -| 09:25-09:30 | **DEMO:** Repo clonen, `npm install`, `npm run dev` | 11 | -| 09:30-09:35 | **DEMO:** Plan mode - project analyseren | 12 | -| 09:35-09:40 | **DEMO:** Build mode - component toevoegen | 13 | +| 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 | --- @@ -85,9 +86,9 @@ Na deze les kan de student: | Tijd | Activiteit | Slides | |------|------------|--------| -| 09:40-09:43 | **DEMO:** Git add, commit, push | 14 | -| 09:43-09:47 | **DEMO:** Vercel auto-deploy tonen | 15 | -| 09:47-09:50 | Nieuw project naar Vercel (voor huiswerk) | 16 | +| 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 | **Kernboodschap:** "Push naar GitHub = automatisch live op Vercel" @@ -97,7 +98,7 @@ Na deze les kan de student: | 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) | - | | 10:15-10:30 | ☕ **PAUZE** | - | | 10:30-11:30 | Studenten werken (60 min) | - | @@ -132,10 +133,10 @@ Na deze les kan de student: | Tijd | Activiteit | Slides | |------|------------|--------| -| 11:30-11:40 | Resultaten delen (2-3 studenten) | 18 | -| 11:40-11:50 | Samenvatting + Q&A | 19 | -| 11:50-11:55 | Huiswerk uitleggen | 20 | -| 11:55-12:00 | Afsluiting | 21 | +| 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 | --- diff --git a/Les02-OpenCode/Les02-Slide-Overzicht.md b/Les02-OpenCode/Les02-Slide-Overzicht.md index d57b842..b088450 100644 --- a/Les02-OpenCode/Les02-Slide-Overzicht.md +++ b/Les02-OpenCode/Les02-Slide-Overzicht.md @@ -1,7 +1,7 @@ # Les 2: OpenCode - AI Code Assistants > **Deel 1: AI Foundations** (Les 1-4) -> **Totale slides:** 21 +> **Totale slides:** 22 > **Lesduur:** 3 uur (180 minuten) > **Spreektijd:** ~50 min | **Hands-on:** ~85 min | **Pauze:** 15 min @@ -13,11 +13,11 @@ |------|-----------|--------|------| | 1 | Welkom & Terugblik | 1-4 | 10 min | | 2 | Introductie OpenCode | 5-9 | 10 min | -| 3 | Setup & Demo | 10-13 | 20 min | -| 4 | Git & Vercel Workflow | 14-16 | 10 min | -| 5 | Hands-on Opdracht | 17 | 85 min | +| 3 | Setup & Demo | 10-14 | 20 min | +| 4 | Git & Vercel Workflow | 15-17 | 10 min | +| 5 | Hands-on Opdracht | 18 | 85 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) - 🔌 Kies je AI: **OpenCode Zen** (gratis!), Groq, Ollama -- 🖥️ Terminal of Desktop App +- 🖥️ Terminal én **Desktop App** (met ingebouwde terminal!) - 🔒 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) -### Slide 10: Installatie +### Slide 10: Demo - Terminal Versie -**Terminal:** +**Live demo:** ```bash npm i -g opencode-ai@latest opencode ``` -**AI Model:** -- `Ctrl+O` → OpenCode Zen → GLM 4.7 -- Gratis, geen key nodig! +**Laat zien:** +- TUI (Terminal User Interface) +- 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:** -1. Clone repo: `git clone ` -2. Open folder: `cd project-naam` -3. Install: `npm install` -4. Start: `npm run dev` -5. Open http://localhost:3000 +**Download:** opencode.ai/download + +**Voordelen:** +- Zelfde features als terminal +- Vriendelijkere interface +- **Ingebouwde terminal!** + +**Dit gaan we vandaag gebruiken.** --- -### Slide 12: Demo - Plan Mode +### Slide 12: Demo - Desktop App Setup **Live demo:** -1. `opencode` in projectmap -2. Check: 📋 = Plan mode -3. Vraag: "Analyseer dit project en beschrijf de structuur" +1. Open Desktop App +2. Open project folder (je v0 repo) +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)_ --- -### Slide 13: Demo - Build Mode +### Slide 14: Demo - Build Mode -**Live demo:** +**Live demo in Desktop App:** 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 4. Accept +5. Refresh browser → zie resultaat! --- ## 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 git add . -git commit -m "Add testimonials section" +git commit -m "Add about page" git push ``` @@ -192,7 +207,7 @@ Of gebruik GitHub Desktop! --- -### Slide 15: Demo - Vercel Auto-Deploy +### Slide 16: Demo - Vercel Auto-Deploy **Live demo:** 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:** @@ -219,7 +234,7 @@ Of gebruik GitHub Desktop! ## 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 @@ -242,7 +257,7 @@ Of gebruik GitHub Desktop! ## BLOK 6: AFSLUITING (30 minuten) -### Slide 18: Resultaten delen +### Slide 19: Resultaten delen - Wie wil laten zien? - Wat heb je toegevoegd? @@ -250,7 +265,7 @@ Of gebruik GitHub Desktop! --- -### Slide 19: Samenvatting +### Slide 20: Samenvatting - ✅ OpenCode: open-source AI assistant - ✅ OpenCode Zen: gratis AI modellen @@ -261,7 +276,7 @@ Of gebruik GitHub Desktop! --- -### Slide 20: Huiswerk +### Slide 21: Huiswerk **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 diff --git a/Samenvattingen/Les02-Samenvatting.md b/Samenvattingen/Les02-Samenvatting.md index dc239c4..d197d6a 100644 --- a/Samenvattingen/Les02-Samenvatting.md +++ b/Samenvattingen/Les02-Samenvatting.md @@ -6,7 +6,7 @@ **Deel 1: AI Foundations** (Les 1-4) ## 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? - 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 -- Terminal-based interface (TUI) - Kies je eigen AI model: GLM 4.7 (aanbevolen) --- @@ -89,7 +89,7 @@ Voor nieuwe projecten (niet gekoppeld via v0): --- ## Tools -- OpenCode Terminal (`npm i -g opencode-ai@latest`) +- OpenCode Desktop App (opencode.ai/download) - OpenCode Zen (gratis AI, GLM 4.7) - Git - Vercel @@ -112,16 +112,12 @@ npm run dev Open http://localhost:3000 - je ziet je website! -### Stap 2: OpenCode Configureren (10 min) +### Stap 2: OpenCode Desktop App (10 min) -```bash -opencode -``` - -Selecteer gratis AI model: -1. Druk `Ctrl+O` -2. Kies "OpenCode Zen" -3. Selecteer "GLM 4.7" +1. Open Desktop App +2. Open je projectfolder +3. `Ctrl+O` → OpenCode Zen → GLM 4.7 +4. In ingebouwde terminal: `npm install` + `npm run dev` ### Stap 3: Nieuwe Pagina Maken (45 min) @@ -199,9 +195,9 @@ Schrijf over je ervaring: ## Leerdoelen Na deze les kan de student: -1. Uitleggen wat OpenCode is en waarom het efficiënter is dan de v0/ChatGPT workflow -2. OpenCode installeren en configureren met OpenCode Zen (gratis) +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) 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 6. De @ file mention gebruiken voor context diff --git a/readme.md b/readme.md index baccf0d..ae97aa5 100644 --- a/readme.md +++ b/readme.md @@ -35,7 +35,7 @@ Een 18-weekse cursus die studenten meeneemt van AI-beginner naar AI-powered deve | 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 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 | @@ -89,20 +89,20 @@ Kennismaking met AI, LLMs en de basis van AI-assisted development. ### 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:** - 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 - Keyboard shortcuts: `Ctrl+K` (commands), `@` (file search), `Tab` (Build/Plan mode) - Build vs Plan mode: wanneer welke gebruiken - De deployment workflow: git push → Vercel auto-deploy -- Nieuw project naar Vercel koppelen (voor huiswerk) **Studenten doen:** - Korte terugblik op Les 1 (v0 workflow) -- OpenCode installeren en OpenCode Zen configureren -- Bestaand v0 project clonen en lokaal draaien +- OpenCode Desktop App installeren en OpenCode Zen configureren +- Bestaand v0 project openen en lokaal draaien (in ingebouwde terminal) - Met OpenCode een nieuwe pagina maken + link op homepage - Deployen via git push → Vercel