11 KiB
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+X M. Kies OpenCode Zen, dan Kimi K2.5 Free. Gratis!"
Slide 7: Build vs Plan Mode
[09:14 - 09:15]
"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:15 - 09:16]
"Vier shortcuts om te onthouden:"
"Ctrl+P voor het command menu. Tab om te wisselen tussen modes. @ om bestanden te zoeken - super handig voor context. @explore om je codebase te verkennen zonder wijzigingen."
Slide 9: @explore - Codebase Verkennen
[09:16 - 09:17]
"@explore is een speciale feature. Het is een read-only subagent - hij leest alleen, verandert niets."
"Super handig voor nieuwe codebases. Typ @explore en dan je vraag. Bijvoorbeeld: '@explore waar is de authentication code?' of '@explore hoe werkt de routing?'"
"Het verschil met Plan mode: @explore zoekt actief door je hele project. Plan mode analyseert alleen wat je hem geeft."
Slide 10: De Deployment Workflow
[09:17 - 09:18]
"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 11: Optioneel - OpenAI API Key
[09:18 - 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+X M."
"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 12: Live Demo Overzicht
[09:20 - 09:40]
[Deze slide blijft op het scherm terwijl je alle demo's geeft]
DEMO 1: Terminal Versie (5 min)
[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+P voor het command menu"
- "Tab om te wisselen tussen Plan en Build mode"
- "@ om bestanden te zoeken"
- "Ctrl+X M om je AI model te kiezen"
"Krachtig! Maar het kan overweldigend zijn voor beginners. Daarom..."
DEMO 2: Desktop App Setup (5 min)
"...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]
"Ik open de Desktop App en selecteer mijn projectfolder - dat is mijn v0 repo."
[Open project folder]
"Nu het AI model: Ctrl+X M, 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]
DEMO 3: Plan Mode (5 min)
[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."
DEMO 4: Build Mode (5 min)
[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 13: Demo - Git Push & Vercel
[09:40 - 09:45]
[LIVE DEMO in Desktop App terminal]
"Nu de belangrijke stap: deployen. Ik gebruik gewoon git."
git add .
git commit -m "Add about page"
git push
"Of als je GitHub Desktop prefereert: changed files links, commit message, commit, push."
[Open Vercel dashboard]
"Zie je? Building. Vercel heeft de push opgepikt. Na ongeveer een minuut... Live! De wijzigingen staan online."
"Dit is de workflow: code lokaal, push, automatisch live."
Slide 14: Preview Deployments
[09:45 - 09:47]
"En nu iets super handig: Preview Deployments."
[Toon Vercel dashboard]
"Elke branch die je pusht krijgt automatisch z'n eigen preview URL. Kijk:"
"Je main branch gaat naar je productie URL. Maar als je een feature branch pusht - bijvoorbeeld feature/about - krijg je een aparte preview URL."
[LIVE DEMO - optioneel]
git checkout -b feature/test-page
# Maak kleine wijziging
git add . && git commit -m "Test preview"
git push -u origin feature/test-page
"En kijk in Vercel... daar is je preview deployment!"
"Waarom is dit handig? Je kunt wijzigingen testen zonder je productie site te breken. En je kunt de preview link delen met je team of klant voor feedback."
Slide 15: 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 16: 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 17: 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 18: 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
- @explore voor codebase verkennen
- De volledige workflow: lokaal ontwikkelen, pushen, automatisch live
[Ruimte voor vragen]
Slide 19: 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 20: 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