fix: add lesson 2
This commit is contained in:
Tim Rijkse
170
Les02-OpenCode/Les02-Lesplan.md
Normal file
170
Les02-OpenCode/Les02-Lesplan.md
Normal file
@@ -0,0 +1,170 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user