4.8 KiB
4.8 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 waarom het efficiënter is dan de v0/ChatGPT workflow
- OpenCode installeren en configureren met OpenCode Zen (gratis)
- Werken met Plan mode en Build mode
- Een bestaand GitHub project clonen en lokaal draaien
- 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) - 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: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:18-09:20 | Vercel deployment workflow | 9 |
Belangrijk: OpenCode Zen is gratis - geen API key nodig!
Blok 3: Setup & Demo (20 minuten)
| 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 |
Blok 4: Git & Vercel Workflow (10 minuten)
| 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 |
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 | 17 |
| 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) | 18 |
| 11:40-11:50 | Samenvatting + Q&A | 19 |
| 11:50-11:55 | Huiswerk uitleggen | 20 |
| 11:55-12:00 | Afsluiting | 21 |
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 |
| OpenCode Zen traag | Normaal, gratis model is iets langzamer |
Alternatieve AI providers
| Provider | Kosten | Setup |
|---|---|---|
| OpenCode Zen (GLM 4.7) | Gratis | Geen key nodig |
| Groq | Gratis tier | API key via console.groq.com |
| Ollama | Gratis (lokaal) | Installatie + model download |
Aanbeveling: Start met Zen. Ollama als thuiswerk voor wie privacy wil.