171 lines
4.7 KiB
Markdown
171 lines
4.7 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 waarom het efficiënter is dan de v0/ChatGPT workflow
|
|
2. OpenCode installeren en configureren met OpenCode Zen (gratis)
|
|
3. Werken met Plan mode en Build mode
|
|
4. Een bestaand GitHub project clonen en lokaal draaien
|
|
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`)
|
|
- [ ] 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 (8 minuten)
|
|
|
|
| Tijd | Activiteit | Slides |
|
|
|------|------------|--------|
|
|
| 09:00-09:02 | Welkom, planning | 1-2 |
|
|
| 09:02-09:06 | Terugblik Les 1: v0 workflow + problemen | 3 |
|
|
| 09:06-09:08 | 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 (12 minuten)
|
|
|
|
| Tijd | Activiteit | Slides |
|
|
|------|------------|--------|
|
|
| 09:08-09:11 | Wat is OpenCode? + OpenCode Zen | 5 |
|
|
| 09:11-09:14 | Build vs Plan mode | 6 |
|
|
| 09:14-09:17 | Shortcuts + @ mentions | 7-8 |
|
|
| 09:17-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 (12 minuten)
|
|
|
|
| Tijd | Activiteit | Slides |
|
|
|------|------------|--------|
|
|
| 09:40-09:44 | **DEMO:** Git add, commit, push | 14 |
|
|
| 09:44-09:48 | **DEMO:** Vercel auto-deploy tonen | 15 |
|
|
| 09:48-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:** Breid je v0 website uit met OpenCode
|
|
|
|
1. Clone je v0 repo (of gebruik GitHub Desktop)
|
|
2. Run lokaal met `npm install` + `npm run dev`
|
|
3. Voeg toe met OpenCode:
|
|
- Nieuwe sectie (Testimonials, Pricing, FAQ)
|
|
- Verbeteringen aan bestaande componenten
|
|
- Mobile responsiveness fixes
|
|
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 al gepusht naar Vercel?"
|
|
|
|
**Check (11:15):**
|
|
- "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.
|