5.1 KiB
5.1 KiB
Lesplan Les 2: OpenCode - AI Code Assistants
Lesgegevens
| Item | Details |
|---|---|
| Les | 2 van 18 |
| Onderwerp | OpenCode - AI Code Assistants |
| Deel | 1: AI Foundations (Les 1-4) |
| Duur | 3 uur (180 minuten) |
| Spreektijd | ~50 minuten |
| Hands-on | ~85 minuten |
| Pauze | 15 minuten (10:15-10:30) |
Leerdoelen
Na deze les kan de student:
- Uitleggen wat OpenCode is en het verschil tussen Terminal en Desktop App
- De OpenCode Desktop App installeren en configureren met een gratis model (Kimi K2.5 Free)
- Werken met Plan mode en Build mode
- Een bestaand GitHub project openen en lokaal draaien (in de ingebouwde terminal)
- Wijzigingen maken met OpenCode en deployen via git push
- De @ file mention gebruiken voor context
Voorbereiding docent
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
Student voorkennis (uit Les 1)
- Hebben een werkende v0 website op Vercel
- Hebben de code in een GitHub repository
- Weten hoe GitHub Desktop werkt
Lesverloop
Blok 1: Welkom & Terugblik (10 minuten)
| Tijd | Activiteit | Slides |
|---|---|---|
| 09:00-09:05 | Welkom, planning | 1-2 |
| 09:05-09:08 | Terugblik Les 1: v0 workflow + problemen | 3 |
| 09:08-09:10 | Vandaag: OpenCode + verder bouwen | 4 |
Kernboodschap: "Jullie hebben werkende websites. Vandaag gaan we die uitbreiden met AI direct in je editor."
Blok 2: Introductie OpenCode (10 minuten)
| Tijd | Activiteit | Slides |
|---|---|---|
| 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:19 | Vercel deployment workflow | 9 |
| 09:19-09:20 | Optioneel: OpenAI API key | 10 |
Belangrijk: We gebruiken Kimi K2.5 Free - gratis, geen API key nodig!
Blok 3: Setup & Demo (20 minuten)
| Tijd | Activiteit | Slides |
|---|---|---|
| 09:20-09:25 | DEMO: Terminal versie (shortcuts, modes) | 11 |
| 09:25-09:28 | Introductie Desktop App | 12 |
| 09:28-09:32 | DEMO: Desktop App setup + project laden | 13 |
| 09:32-09:36 | DEMO: Plan mode - project analyseren | 14 |
| 09:36-09:40 | DEMO: Build mode - nieuwe pagina maken | 15 |
Blok 4: Git & Vercel Workflow (10 minuten)
| Tijd | Activiteit | Slides |
|---|---|---|
| 09:40-09:43 | DEMO: Git add, commit, push | 16 |
| 09:43-09:47 | DEMO: Vercel auto-deploy tonen | 17 |
| 09:47-09:50 | Nieuw project naar Vercel (voor huiswerk) | 18 |
Kernboodschap: "Push naar GitHub = automatisch live op Vercel"
Blok 5: Hands-on Opdracht (85 minuten + 15 min pauze)
| Tijd | Activiteit | Slides |
|---|---|---|
| 09:50-09:55 | Opdracht uitleggen | 19 |
| 09:55-10:15 | Studenten werken (20 min) | - |
| 10:15-10:30 | ☕ PAUZE | - |
| 10:30-11:30 | Studenten werken (60 min) | - |
Opdracht: Maak een nieuwe pagina in je v0 project
- Clone je v0 repo (of gebruik GitHub Desktop)
- Run lokaal met
npm install+npm run dev - 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
- Push naar GitHub → bekijk live op Vercel
Tijdens het werken:
- Loop actief rond
- Help bij git/npm problemen
- Check: werkt lokale server?
- Aanmoedigen: meerdere keren pushen en deployen
Tussentijdse check (10:45):
- "Wie heeft lokaal draaien?"
- "Wie heeft een nieuwe pagina aangemaakt?"
Check (11:15):
- "Wie heeft de link op de homepage?"
- "Wie heeft 2x gepusht?"
Blok 6: Afsluiting (30 minuten)
| Tijd | Activiteit | Slides |
|---|---|---|
| 11:30-11:40 | Resultaten delen (2-3 studenten) | 20 |
| 11:40-11:50 | Samenvatting + Q&A | 21 |
| 11:50-11:55 | Huiswerk uitleggen | 22 |
| 11:55-12:00 | Afsluiting | 23 |
Materialen
- Slide-Overzicht: Les02-Slide-Overzicht.md
- Lesopdracht: Les02-Bijlage-A-Lesopdracht.md
- Huiswerkopdracht: Les02-Bijlage-B-Huiswerkopdracht.md
Veelvoorkomende problemen
| Probleem | Oplossing |
|---|---|
| OpenCode installeert niet | Check Node.js ≥18 |
npm install faalt |
Delete node_modules, probeer opnieuw |
npm run dev werkt niet |
Check of je in de juiste map staat |
| Git push rejected | git pull eerst, dan push |
| Vercel deployt niet | Check GitHub repo permissions |
| Kimi K2.5 traag | Normaal, gratis model is iets langzamer |
Alternatieve AI providers
| Provider | Kosten | Setup |
|---|---|---|
| Kimi K2.5 Free | Gratis | Geen key nodig (via OpenCode Zen) |
| OpenAI (GPT-4) | Betaald (~$0.01/prompt) | API key via platform.openai.com |
| Groq | Gratis tier | API key via console.groq.com |
| Ollama | Gratis (lokaal) | Installatie + model download |
Aanbeveling: Start met Kimi K2.5 Free. OpenAI voor wie extra kwaliteit wil (kost geld).