11 KiB
11 KiB
Les 2: OpenCode - AI Code Assistants
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
Slide-structuur per blok
| Blok | Onderwerp | Slides | Tijd |
|---|---|---|---|
| 1 | Welkom & Terugblik | 1-4 | 10 min |
| 2 | Introductie OpenCode | 5-11 | 10 min |
| 3 | Setup & Demo | 12 | 20 min |
| 4 | Git & Vercel Workflow | 13-16 | 10 min |
| 5 | Hands-on Opdracht | 17 | 85 min |
| - | ☕ PAUZE | - | 15 min |
| 6 | Afsluiting | 18-21 | 30 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:20 | Terugblik + Intro OpenCode |
| 09:20-09:50 | Setup + Demo's |
| 09:50-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: 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 4: 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 5: Wat is OpenCode?
- 🌟 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 6: Installatie
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 7: 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 8: Keyboard Shortcuts
| Shortcut | Actie |
|---|---|
Ctrl+P |
Command menu |
Tab |
Wissel Build/Plan |
@ |
Zoek bestanden |
@explore |
Codebase verkennen (read-only) |
Slide 9: @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 10: 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 11: 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 12: Live Demo Overzicht (blijft op scherm)
┌─────────────────────────────────────────────────────┐
│ DEMO 1: TERMINAL VERSIE (5 min) │
│ ───────────────────────────────────────────────── │
│ npm i -g opencode-ai@latest && opencode │
│ → Toon: Ctrl+P, Tab, @, Ctrl+X M │
│ → "Krachtig, maar we gebruiken Desktop App..." │
├─────────────────────────────────────────────────────┤
│ 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 │
│ 4. Terminal: npm install && npm run dev │
├─────────────────────────────────────────────────────┤
│ 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 │
└─────────────────────────────────────────────────────┘
BLOK 4: GIT & VERCEL WORKFLOW (10 minuten)
Slide 13: Demo - Git Push
Live demo (in Desktop App terminal):
git add .
git commit -m "Add about page"
git push
Of gebruik GitHub Desktop!
Slide 14: Demo - Vercel Auto-Deploy
Live demo:
- 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!