rubberducky/novi-lessons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add v2 lessons for next class

Browse Source
This commit is contained in:
Tim Rijkse
2026-02-11 13:58:41 +01:00
parent 984f2256dc
commit 35bbc50c06
16 changed files with 5013 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

418
v2/Les02-OpenCode/Les02-Slide-Overzicht.md Normal file
View File

@@ -0,0 +1,418 @@
# Les 2: OpenCode - AI Code Assistants (V2)
> **Deel 1: AI Foundations** (Les 1-4)
> **Totale slides:** 21
> **Lesduur:** 3 uur (180 minuten)
> **Spreektijd:** ~50 min | **Hands-on:** ~85 min | **Pauze:** 15 min
**V2 Verbeteringen:**
- Voorbereiding check toegevoegd (slide 3)
- "WACHT - nog niet installeren" waarschuwingen
- Duidelijk onderscheid System Terminal vs OpenCode Terminal
- Gratis model backup opties toegevoegd
- Platform-specifieke instructies (Mac/Windows)
**⚠️ VEREIST:** Studenten moeten [Les02-Voorbereiding.md](Les02-Voorbereiding.md) doorlopen VOOR deze les!
---
## Slide-structuur per blok
| Blok | Onderwerp | Slides | Tijd |
|------|-----------|--------|------|
| 1 | Welkom & Terugblik + **Voorbereiding Check** | 1-5 | 12 min |
| 2 | Introductie OpenCode | 6-12 | 10 min |
| 3 | Setup & Demo | 13 | 20 min |
| 4 | Git & Vercel Workflow | 14-16 | 10 min |
| 5 | Hands-on Opdracht | 17 | 85 min |
| - | **☕ PAUZE** | - | 15 min |
| 6 | Afsluiting | 18-21 | 28 min |
---
## BLOK 1: WELKOM & TERUGBLIK (10 minuten)
### Slide 1: Welkomstslide
**Titel:** Les 2: OpenCode - AI Code Assistants
---
### Slide 2: Planning vandaag
| Tijd | Onderwerp |
|------|-----------|
| 09:00-09:12 | Terugblik + **Voorbereiding Check** |
| 09:12-09:22 | Intro OpenCode (KIJK ALLEEN, nog niet installeren!) |
| 09:22-09:42 | Setup + Demo's (NU installeren) |
| 09:42-09:52 | Git & Vercel Workflow |
| 09:52-10:15 | Hands-on: Start |
| 10:15-10:30 | ☕ **PAUZE** |
| 10:30-11:30 | Hands-on: Vervolg |
| 11:30-12:00 | Resultaten + Afsluiting |
---
### Slide 3: Voorbereiding Check ⚠️
**Titel:** Heb je de voorbereiding gedaan?
```
┌─────────────────────────────────────────────────────┐
│ CHECK JE SETUP - Voer uit in je EIGEN terminal: │
│ ───────────────────────────────────────────────── │
│ node -v → Moet v20.x.x tonen │
│ git --version → Moet 2.x.x tonen │
│ ssh -T git@github.com → "Hi [username]!" │
│ ───────────────────────────────────────────────── │
│ ✅ Alles werkt? Top! │
│ ❌ Iets mist? Vraag de docent NU om hulp │
└─────────────────────────────────────────────────────┘
```
**⚠️ Niet voorbereid?** Dan kun je helaas niet volledig meedoen.
---
### Slide 4: Terugblik Les 1 - Wat hebben we?
**Jullie hebben:**
- ✅ Een werkende website op Vercel
- ✅ Code in een GitHub repository
- ✅ Ervaring met v0.dev
**Maar:**
- Veel copy/paste naar v0
- Geen lokale development
- Beperkte controle
---
### Slide 5: Vandaag - De volgende stap
**OpenCode:** AI direct in je development workflow
- ✅ Werk met je bestaande repository
- ✅ Draai lokaal, zie wijzigingen direct
- ✅ Push naar GitHub → automatisch live op Vercel
---
## BLOK 2: INTRODUCTIE OPENCODE (10 minuten)
### Slide 6: Wat is OpenCode?
**⚠️ KIJK ALLEEN - NOG NIET INSTALLEREN!**
- 🌟 Open source (60.000+ GitHub stars)
- 🔌 Kies je AI: OpenCode Zen, Groq, Ollama, **OpenAI**
- 🖥️ Terminal én **Desktop App** (met ingebouwde terminal!)
- 🔒 Privacy-first
**Vandaag:** Desktop App + gratis model (Kimi K2.5 Free)
---
### Slide 7: Installatie (WACHT - straks samen!)
**⚠️ NOG NIET INSTALLEREN - Dit doen we straks SAMEN in de demo!**
**Terminal versie:**
```bash
npm i -g opencode-ai@latest
```
**Desktop App:**
- Download: **opencode.ai/download**
- Installeer voor jouw OS (Mac/Windows)
**Gratis AI Model:**
- `Ctrl+X M` → OpenCode Zen → **Kimi K2.5 Free**
---
### Slide 8: Build vs Plan Mode
| Mode | Icoon | Wat het doet |
|------|-------|--------------|
| **Plan** | 📋 | Analyseert, verandert NIETS |
| **Build** | 🔨 | Schrijft code, maakt bestanden |
**Wisselen:** `Tab`
**💡 Tip: Eén prompt per taak!**
- ❌ "Maak een complete website met header, hero en footer"
- ✅ "Maak een Header component" → "Voeg hero toe" → "Maak footer"
---
### Slide 9: Keyboard Shortcuts
| Shortcut | Actie |
|----------|-------|
| `Ctrl+P` | Command menu |
| `Tab` | Wissel Build/Plan |
| `@` | Zoek bestanden |
| `@explore` | Codebase verkennen (read-only) |
---
### Slide 10: @explore - Codebase Verkennen
**Wat is @explore?**
- Een **read-only** subagent voor het verkennen van je codebase
- Zoekt bestanden, vindt keywords, analyseert structuur
- Maakt **geen wijzigingen** aan je code
**Gebruik:**
```
@explore find all authentication code
@explore how does the routing work?
@explore where are the API endpoints?
```
**Wanneer gebruiken?**
- Nieuwe codebase leren kennen
- Code zoeken voordat je wijzigt
- Project structuur begrijpen
---
### Slide 11: De Deployment Workflow
```
1. Wijzig code met OpenCode
2. git add .
3. git commit -m "Add about page"
4. git push
5. ✨ Vercel deployt automatisch!
```
Jullie Vercel project is al gekoppeld aan GitHub.
---
### Slide 12: Optioneel - OpenAI API Key
**Wil je GPT-4 gebruiken?**
1. Ga naar **platform.openai.com**
2. Maak account aan (of log in)
3. API Keys → Create new secret key
4. Kopieer de key (begint met `sk-...`)
5. In OpenCode: `Ctrl+X M` → OpenAI → Plak key
**Let op:** OpenAI is betaald (~$0.01 per prompt)
**Tip:** Start met Kimi K2.5 Free, upgrade later als je wilt!
---
## BLOK 3: SETUP & DEMO (20 minuten)
### Slide 13: Live Demo Overzicht (blijft op scherm)
**⚠️ BELANGRIJK: Twee soorten terminals!**
```
┌─────────────────────────────────────────────────────┐
│ 🖥️ SYSTEM TERMINAL (je eigen terminal) │
│ ───────────────────────────────────────────────── │
│ → Mac: Terminal app │
│ → Windows: PowerShell / Git Bash │
│ → Voor: git clone, npm install, opencode starten │
├─────────────────────────────────────────────────────┤
│ 🤖 OPENCODE TERMINAL (binnen OpenCode) │
│ ───────────────────────────────────────────────── │
│ → Verschijnt als je 'opencode' runt │
│ → Heeft AI chat + ingebouwde terminal │
│ → Voor: AI prompts, code generatie │
│ → Type 'exit' om terug te gaan naar system terminal│
└─────────────────────────────────────────────────────┘
```
**DEMO STAPPEN:**
```
┌─────────────────────────────────────────────────────┐
│ DEMO 1: INSTALLATIE (5 min) - in SYSTEM terminal │
│ ───────────────────────────────────────────────── │
│ Mac: npm i -g opencode-ai@latest │
│ Windows: npm i -g opencode-ai@latest │
│ (EACCESS error? → sudo npm i -g opencode-ai@latest)│
├─────────────────────────────────────────────────────┤
│ DEMO 2: DESKTOP APP SETUP (5 min) │
│ ───────────────────────────────────────────────── │
│ 1. Open Desktop App │
│ 2. File → Open Folder → v0 project │
│ 3. Ctrl+X M → OpenCode Zen → Kimi K2.5 Free │
│ ───────────────────────────────────────────────── │
│ 💡 Tokens op? Probeer: MiniMax M2.1 Free │
│ of Big Pickle Free │
├─────────────────────────────────────────────────────┤
│ DEMO 3: PLAN MODE (5 min) │
│ ───────────────────────────────────────────────── │
│ 📋 "Analyseer dit project. Hoe werkt de routing?" │
│ → AI leest alleen, verandert niets │
├─────────────────────────────────────────────────────┤
│ DEMO 4: BUILD MODE (5 min) │
│ ───────────────────────────────────────────────── │
│ Tab → 🔨 │
│ "Maak nieuwe pagina /about met hero" │
│ → Review code → Accept → Refresh browser │
└─────────────────────────────────────────────────────┘
```
**Gratis Model Backup Opties:**
| Model | Snelheid | Tokens |
|-------|----------|--------|
| Kimi K2.5 Free | ⭐⭐⭐ | Beperkt |
| MiniMax M2.1 Free | ⭐⭐ | Beperkt |
| Big Pickle Free | ⭐⭐ | Beperkt |
---
## BLOK 4: GIT & VERCEL WORKFLOW (10 minuten)
### Slide 14: Demo - Git Push & Vercel
**Live demo (in Desktop App terminal):**
```bash
git add .
git commit -m "Add about page"
git push
```
**→ Open Vercel dashboard:**
1. Zie: "Building..."
2. Na ~1 minuut: live op je URL!
---
### Slide 15: Preview Deployments
**Branches = Preview URLs**
```
main branch → productie-site.vercel.app
feature/about → productie-site-git-feature-about.vercel.app
```
**Waarom handig?**
- ✅ Test wijzigingen zonder productie te breken
- ✅ Deel preview link met team/klant
- ✅ Automatisch bij elke branch push
**Demo:**
```bash
git checkout -b feature/test-page
# Maak wijziging...
git add . && git commit -m "Test preview"
git push -u origin feature/test-page
```
→ Check Vercel: nieuwe preview deployment!
---
### Slide 16: Nieuw project naar Vercel (voor huiswerk)
**Stappen voor een nieuw project:**
1. Maak GitHub repository (github.com → New)
2. Push je code naar GitHub
3. Vercel: "Add New Project"
4. "Import Git Repository"
5. Selecteer je repo → Deploy
**Dit heb je nodig voor het huiswerk!**
---
## BLOK 5: HANDS-ON OPDRACHT (85 minuten)
### Slide 17: Aan de slag! (blijft op scherm)
```
┌─────────────────────────────────────────────────────┐
│ STAP 1: PROJECT KLAARZETTEN │
│ ───────────────────────────────────────────────── │
│ git clone https://github.com/[user]/[repo].git │
│ cd [repo] │
│ npm install │
│ npm run dev │
│ → Open http://localhost:3000 │
├─────────────────────────────────────────────────────┤
│ STAP 2: OPENCODE DESKTOP APP │
│ ───────────────────────────────────────────────── │
│ 1. Open Desktop App │
│ 2. File → Open Folder → je project │
│ 3. Ctrl+X M → OpenCode Zen → Kimi K2.5 Free │
├─────────────────────────────────────────────────────┤
│ STAP 3: BOUW MET OPENCODE │
│ ───────────────────────────────────────────────── │
│ □ Maak nieuwe pagina (/about, /services, /contact) │
│ □ Voeg 2 componenten toe │
│ □ Voeg link op homepage │
│ 💡 Eén prompt per taak! │
├─────────────────────────────────────────────────────┤
│ STAP 4: DEPLOY │
│ ───────────────────────────────────────────────── │
│ git add . │
│ git commit -m "Add about page" │
│ git push │
│ → Check Vercel dashboard │
└─────────────────────────────────────────────────────┘
```
**Doel:** Minimaal 2x deployen | ☕ **Pauze:** 10:15-10:30
---
## BLOK 6: AFSLUITING (30 minuten)
### Slide 18: Resultaten delen
- Wie wil laten zien?
- Wat heb je toegevoegd?
- Hoeveel keer gepusht?
---
### Slide 19: Samenvatting
- ✅ OpenCode: open-source AI assistant
- ✅ Gratis model: Kimi K2.5 Free
- ✅ Optioneel: OpenAI met API key
- ✅ Plan vs Build mode
- ✅ @explore voor codebase verkennen
- ✅ Git push → Vercel auto-deploy
---
### Slide 20: Huiswerk
**Opdracht: Nieuw project vanaf scratch**
1. `npx create-next-app@latest`
2. Bouw 3 componenten met OpenCode
3. Push naar GitHub
4. Vercel: Import Project → Deploy
**Inleveren via Teams:**
- Link naar Vercel
- Link naar GitHub
**In Les 3:** We gaan iedereen langs en bespreken je prompts!
**Stappen voor Vercel: zie slide 16!**
---
### Slide 21: Volgende les
**Les 3:** OpenCode IDE Integratie
- VSCode plugin
- Inline code generatie
- Advanced prompting
Tot volgende week!