15 KiB
15 KiB
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 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:
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?
- Ga naar platform.openai.com
- Maak account aan (of log in)
- API Keys → Create new secret key
- Kopieer de key (begint met
sk-...) - 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):
git add .
git commit -m "Add about page"
git push
→ Open Vercel dashboard:
- Zie: "Building..."
- 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:
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:
- Maak GitHub repository (github.com → New)
- Push je code naar GitHub
- Vercel: "Add New Project"
- "Import Git Repository"
- 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
npx create-next-app@latest- Bouw 3 componenten met OpenCode
- Push naar GitHub
- 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!