177 lines
5.1 KiB
Markdown
177 lines
5.1 KiB
Markdown
# 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:
|
|
|
|
1. Uitleggen wat OpenCode is en het verschil tussen Terminal en Desktop App
|
|
2. De OpenCode Desktop App installeren en configureren met een gratis model (Kimi K2.5 Free)
|
|
3. Werken met Plan mode en Build mode
|
|
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
|
|
|
|
---
|
|
|
|
## 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
|
|
|
|
1. Clone je v0 repo (of gebruik GitHub Desktop)
|
|
2. Run lokaal met `npm install` + `npm run dev`
|
|
3. 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
|
|
4. 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).
|