360 lines
11 KiB
Markdown
360 lines
11 KiB
Markdown
# 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:**
|
|
```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 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?**
|
|
|
|
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 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):**
|
|
```bash
|
|
git add .
|
|
git commit -m "Add about page"
|
|
git push
|
|
```
|
|
|
|
Of gebruik GitHub Desktop!
|
|
|
|
---
|
|
|
|
### Slide 14: Demo - Vercel Auto-Deploy
|
|
|
|
**Live demo:**
|
|
1. Open Vercel dashboard
|
|
2. Zie: "Building..."
|
|
3. 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!
|