388 lines
9.6 KiB
Markdown
388 lines
9.6 KiB
Markdown
# Docenttekst Les 2: OpenCode - AI Code Assistants
|
|
|
|
> **Totale lesduur:** 3 uur (180 minuten)
|
|
> **Spreektijd docent:** ~50 minuten
|
|
> **Hands-on:** ~85 minuten
|
|
> **Pauze:** 15 minuten (10:15-10:30)
|
|
|
|
---
|
|
|
|
## BLOK 1: WELKOM & TERUGBLIK (10 minuten)
|
|
|
|
### Slide 1: Welkomstslide
|
|
|
|
**[09:00 - 09:05]**
|
|
|
|
"Welkom terug bij les 2! Vorige week hebben jullie allemaal een website gebouwd en online gezet. Vandaag gaan we een stap verder."
|
|
|
|
---
|
|
|
|
### Slide 2: Planning
|
|
|
|
**[bij slide 1]**
|
|
|
|
"De planning: tot 10 voor 10 doe ik uitleg en demo's. Dan gaan jullie aan de slag met jullie eigen projecten. Kwart over 10 hebben we een korte pauze, daarna werken jullie door tot half 12."
|
|
|
|
---
|
|
|
|
### Slide 3: Terugblik Les 1
|
|
|
|
**[09:05 - 09:08]**
|
|
|
|
"Jullie hebben nu: een werkende website op Vercel, code in GitHub, en ervaring met v0.dev."
|
|
|
|
_[Wijs naar de problemen]_
|
|
|
|
"Maar... veel copy/paste. Geen lokale development. Beperkte controle over je code. Vandaag gaan we dat oplossen."
|
|
|
|
---
|
|
|
|
### Slide 4: Vandaag - De volgende stap
|
|
|
|
**[09:08 - 09:10]**
|
|
|
|
"Vandaag werken we met jullie bestaande repos. We gaan ze lokaal draaien, uitbreiden met AI, en weer deployen naar Vercel. De volledige development workflow."
|
|
|
|
---
|
|
|
|
## BLOK 2: INTRODUCTIE OPENCODE (10 minuten)
|
|
|
|
### Slide 5: Wat is OpenCode?
|
|
|
|
**[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."
|
|
|
|
"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. Er zijn gratis modellen beschikbaar, dus je hebt geen API key nodig."
|
|
|
|
---
|
|
|
|
### Slide 6: Installatie
|
|
|
|
**[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 Kimi K2.5 Free. Gratis!"
|
|
|
|
---
|
|
|
|
### Slide 7: Build vs Plan Mode
|
|
|
|
**[09:14 - 09:16]**
|
|
|
|
"Belangrijk concept: twee modes."
|
|
|
|
"**Plan mode** - het klembord icoon. AI kan alleen lezen en analyseren. Perfect om je project te begrijpen."
|
|
|
|
"**Build mode** - de hamer. AI kan code schrijven en bestanden aanmaken."
|
|
|
|
"Wisselen doe je met Tab."
|
|
|
|
_[Belangrijk punt - benadrukken!]_
|
|
|
|
"En dit is cruciaal: **één prompt per taak**. Vraag niet 'maak een complete website met alles erop en eraan'. Splits het op: eerst de header, dan de hero, dan de volgende sectie. Zo houd je controle en kun je elk onderdeel goed reviewen."
|
|
|
|
---
|
|
|
|
### Slide 8: Shortcuts
|
|
|
|
**[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 - super handig voor context. Ctrl+O om je AI model te kiezen."
|
|
|
|
---
|
|
|
|
### Slide 9: De Deployment Workflow
|
|
|
|
**[09:18 - 09:19]**
|
|
|
|
"Dit is de workflow die jullie vandaag gaan gebruiken:"
|
|
|
|
"Wijzig code met OpenCode. Git add, commit, push. En dan... Vercel pakt het automatisch op. Jullie project is al gekoppeld aan GitHub, dus elke push wordt automatisch live."
|
|
|
|
---
|
|
|
|
### 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 11: Demo - Terminal Versie
|
|
|
|
**[09:20 - 09:25]**
|
|
|
|
_[Open terminal - LIVE DEMO]_
|
|
|
|
"Laat me eerst de terminal versie laten zien. Installatie: npm i -g opencode-ai@latest, dan opencode."
|
|
|
|
_[Start opencode in terminal]_
|
|
|
|
"Dit is de TUI - Terminal User Interface. Kijk naar de shortcuts:"
|
|
|
|
- "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 12: Desktop App
|
|
|
|
**[09:25 - 09:28]**
|
|
|
|
"...is er ook de Desktop App!"
|
|
|
|
_[Open Desktop App]_
|
|
|
|
"Zelfde features, maar veel vriendelijker. En kijk - een ingebouwde terminal! Dit gaan we vandaag gebruiken."
|
|
|
|
_[Laat studenten Desktop App downloaden van opencode.ai/download]_
|
|
|
|
---
|
|
|
|
### Slide 13: Demo - Desktop App Setup
|
|
|
|
**[09:28 - 09:32]**
|
|
|
|
_[LIVE DEMO in Desktop App]_
|
|
|
|
"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 Kimi K2.5 Free."
|
|
|
|
_[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 14: 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?'"
|
|
|
|
_[Wacht op response]_
|
|
|
|
"Kijk - het leest alles, geeft een analyse, maar verandert niets. Perfect om eerst te begrijpen."
|
|
|
|
---
|
|
|
|
### Slide 15: Demo - Build Mode
|
|
|
|
**[09:36 - 09:40]**
|
|
|
|
_[LIVE DEMO in Desktop App]_
|
|
|
|
"Tab om naar Build mode te gaan. Nu vraag ik:"
|
|
|
|
"Maak een nieuwe pagina /about met een hero sectie en een team sectie. Voeg ook een link toe op de homepage naar /about."
|
|
|
|
_[Wacht op generatie]_
|
|
|
|
"Het maakt de pagina aan, de componenten, past de homepage aan. Kijk in de browser - refresh - daar is de link! En als ik klik... de nieuwe pagina!"
|
|
|
|
---
|
|
|
|
## BLOK 4: GIT & VERCEL WORKFLOW (10 minuten)
|
|
|
|
### Slide 16: Demo - Git Push
|
|
|
|
**[09:40 - 09:43]**
|
|
|
|
_[LIVE DEMO in Desktop App terminal]_
|
|
|
|
"Nu de belangrijke stap: deployen. Ik gebruik gewoon git."
|
|
|
|
```bash
|
|
git add .
|
|
git commit -m "Add about page"
|
|
git push
|
|
```
|
|
|
|
"Of als je GitHub Desktop prefereert: changed files links, commit message, commit, push."
|
|
|
|
---
|
|
|
|
### Slide 17: Demo - Vercel Auto-Deploy
|
|
|
|
**[09:43 - 09:47]**
|
|
|
|
_[LIVE DEMO]_
|
|
|
|
"Open Vercel dashboard..."
|
|
|
|
_[Toon building status]_
|
|
|
|
"Zie je? Building. Vercel heeft de push opgepikt. Na ongeveer een minuut..."
|
|
|
|
_[Wacht/toon resultaat]_
|
|
|
|
"Live! De wijzigingen staan online. Dit is de workflow: code lokaal, push, automatisch live."
|
|
|
|
---
|
|
|
|
### Slide 18: Nieuw project naar Vercel
|
|
|
|
**[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."
|
|
|
|
_[Toon Vercel dashboard]_
|
|
|
|
"Stappen: Add New Project, Import Git Repository, selecteer je repo, Deploy. Dat is het."
|
|
|
|
"Dit hebben jullie nodig voor het huiswerk - een nieuw project vanaf scratch deployen."
|
|
|
|
---
|
|
|
|
## BLOK 5: HANDS-ON OPDRACHT (85 minuten + 15 min pauze)
|
|
|
|
### Slide 19: Aan de slag!
|
|
|
|
**[09:50 - 09:55]** _(5 minuten uitleg)_
|
|
|
|
"Jullie gaan nu een nieuwe pagina toevoegen aan jullie v0 website."
|
|
|
|
"Stap 1: Clone je repo of pull latest. Stap 2: npm install, npm run dev. Stap 3: Maak een nieuwe pagina met OpenCode - about, services, of contact. Voeg componenten toe en een link op de homepage. Stap 4: Push naar GitHub, bekijk live op Vercel."
|
|
|
|
"Doel: minimaal 2 keer deployen. Je leert hoe routing werkt in Next.js én hoe je navigatie toevoegt."
|
|
|
|
"Kwart over 10 hebben we een korte pauze van 15 minuten. Begin!"
|
|
|
|
---
|
|
|
|
### Hands-on Deel 1
|
|
|
|
**[09:55 - 10:15]** _(20 minuten werken)_
|
|
|
|
_[Loop actief rond, help bij opstartproblemen]_
|
|
|
|
**Let op:**
|
|
- Draait npm run dev?
|
|
- Lukt git clone/pull?
|
|
- Kimi K2.5 Free geselecteerd?
|
|
|
|
---
|
|
|
|
### ☕ PAUZE
|
|
|
|
**[10:15 - 10:30]** _(15 minuten)_
|
|
|
|
"Oké, pauze! Om half 11 gaan we verder."
|
|
|
|
---
|
|
|
|
### Hands-on Deel 2
|
|
|
|
**[10:30 - 11:30]** _(60 minuten werken)_
|
|
|
|
_[Loop actief rond]_
|
|
|
|
**Let op:**
|
|
- Zit student in juiste mode?
|
|
- Gebruikt @ mentions?
|
|
- Lukt git push?
|
|
|
|
**Check [10:45]:**
|
|
"Wie heeft de website lokaal draaien? Wie heeft al gepusht naar Vercel?"
|
|
|
|
**Check [11:15]:**
|
|
"Hoeveel mensen hebben al 2x gepusht? Wie zit vast?"
|
|
|
|
---
|
|
|
|
## BLOK 6: AFSLUITING (30 minuten)
|
|
|
|
### Slide 20: Resultaten delen
|
|
|
|
**[11:30 - 11:40]**
|
|
|
|
"Stop met coderen. Wie wil laten zien wat ze hebben gebouwd?"
|
|
|
|
_[2-3 studenten tonen hun werk]_
|
|
|
|
"Wat heb je toegevoegd? Hoeveel keer gepusht? Wat ging goed, wat was lastig?"
|
|
|
|
---
|
|
|
|
### Slide 21: Samenvatting
|
|
|
|
**[11:40 - 11:50]**
|
|
|
|
"Wat hebben we gedaan vandaag?"
|
|
|
|
- OpenCode: terminal versie én Desktop App
|
|
- 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
|
|
|
|
_[Ruimte voor vragen]_
|
|
|
|
---
|
|
|
|
### Slide 22: Huiswerk
|
|
|
|
**[11:50 - 11:55]**
|
|
|
|
"Thuis: een nieuw project vanaf scratch. Niet je v0 project uitbreiden, maar helemaal nieuw beginnen."
|
|
|
|
"Stappen: create-next-app, bouw 3 componenten, push naar GitHub, en dan - belangrijk - Vercel Import Project. Zoals ik eerder liet zien."
|
|
|
|
"Inleveren via Teams: gewoon je Vercel link en GitHub link. Volgende les gaan we iedereen even langs en bespreken we je prompts. Hoeveel prompts heb je gebruikt? Hoe heb je je werk opgesplitst? Dus houd je prompts bij!"
|
|
|
|
---
|
|
|
|
### Slide 23: Afsluiting
|
|
|
|
**[11:55 - 12:00]**
|
|
|
|
"Volgende week: OpenCode in je IDE. Dan gaan we de VSCode plugin gebruiken voor nog sneller werken."
|
|
|
|
"Vragen? Anders tot volgende week!"
|
|
|
|
---
|
|
|
|
## Timing Overzicht
|
|
|
|
| Blok | Tijd | Duur |
|
|
|------|------|------|
|
|
| 1. Welkom & Terugblik | 09:00-09:10 | 10 min |
|
|
| 2. Intro OpenCode | 09:10-09:20 | 10 min |
|
|
| 3. Setup & Demo | 09:20-09:40 | 20 min |
|
|
| 4. Git & Vercel | 09:40-09:50 | 10 min |
|
|
| 5. Hands-on (deel 1) | 09:50-10:15 | 25 min |
|
|
| ☕ PAUZE | 10:15-10:30 | 15 min |
|
|
| 5. Hands-on (deel 2) | 10:30-11:30 | 60 min |
|
|
| 6. Afsluiting | 11:30-12:00 | 30 min |
|
|
|
|
**Spreektijd:** ~50 min | **Hands-on:** ~85 min | **Pauze:** 15 min
|