257 lines
5.0 KiB
Markdown
257 lines
5.0 KiB
Markdown
# Les 2 - Keynote Notes
|
|
|
|
**Spreektijd:** ~50 min | **Hands-on:** ~85 min | **Pauze:** 15 min (10:15-10:30)
|
|
|
|
---
|
|
|
|
## BLOK 1: WELKOM & TERUGBLIK (10 min)
|
|
|
|
---
|
|
|
|
### Slide 1: Welkom
|
|
- "Welkom terug bij les 2!"
|
|
- "Vandaag: jullie projecten uitbreiden"
|
|
|
|
---
|
|
|
|
### Slide 2: Planning
|
|
- 09:00-09:20: 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
|
|
- **Jullie hebben:** website op Vercel, code in GitHub
|
|
- **Maar:** veel copy/paste, geen lokale dev
|
|
- "Vandaag gaan we dat oplossen"
|
|
|
|
---
|
|
|
|
### Slide 4: Vandaag
|
|
- Bestaande repos lokaal draaien
|
|
- Uitbreiden met AI
|
|
- Deployen via git push
|
|
|
|
---
|
|
|
|
## BLOK 2: INTRO OPENCODE (10 min)
|
|
|
|
---
|
|
|
|
### Slide 5: Wat is OpenCode?
|
|
- Open source, 60.000+ stars
|
|
- Terminal én **Desktop App** (met ingebouwde terminal!)
|
|
- Kies je AI: OpenCode Zen, Groq, Ollama, **OpenAI**
|
|
|
|
---
|
|
|
|
### Slide 6: Installatie
|
|
- **Terminal:** `npm i -g opencode-ai@latest`
|
|
- **Desktop App:** opencode.ai/download
|
|
- **Gratis AI Model:** `Ctrl+O` → OpenCode Zen → **Kimi K2.5 Free**
|
|
- "Wij gebruiken vandaag de Desktop App"
|
|
|
|
---
|
|
|
|
### Slide 7: Build vs Plan Mode
|
|
- **Plan (📋):** leest, analyseert, verandert NIETS
|
|
- **Build (🔨):** schrijft code, maakt bestanden
|
|
- Wisselen: `Tab`
|
|
- **💡 Eén prompt per taak!**
|
|
- ❌ "Maak complete website"
|
|
- ✅ "Maak header" → "Voeg hero toe" → etc.
|
|
|
|
---
|
|
|
|
### Slide 8: Shortcuts
|
|
- `Ctrl+K` = command menu
|
|
- `Tab` = wissel mode
|
|
- `@` = zoek bestanden (context!)
|
|
- `Ctrl+O` = model kiezen
|
|
|
|
---
|
|
|
|
### Slide 9: Deployment Workflow
|
|
- Wijzig code → git add → commit → push
|
|
- Vercel pakt automatisch op
|
|
- Jullie repos zijn al gekoppeld!
|
|
|
|
---
|
|
|
|
### Slide 10: Optioneel - OpenAI API Key
|
|
- **Wil je GPT-4?** platform.openai.com → API Keys
|
|
- Kopieer key (`sk-...`)
|
|
- In OpenCode: `Ctrl+O` → OpenAI → Plak key
|
|
- **Let op:** betaald (~$0.01/prompt)
|
|
- **Tip:** Start met Kimi K2.5 Free!
|
|
|
|
---
|
|
|
|
## BLOK 3: SETUP & DEMO (20 min)
|
|
|
|
---
|
|
|
|
### Slide 11: Demo - Terminal Versie
|
|
- **LIVE DEMO:** `npm i -g opencode-ai@latest` + `opencode`
|
|
- Toon shortcuts: `Ctrl+K`, `Tab`, `@`, `Ctrl+O`
|
|
- Toon Plan/Build mode
|
|
- "Krachtig! Maar we gaan iets gebruiksvriendelijkers gebruiken..."
|
|
|
|
---
|
|
|
|
### Slide 12: Desktop App
|
|
- opencode.ai/download
|
|
- Zelfde features, vriendelijker
|
|
- **Ingebouwde terminal!**
|
|
- Studenten downloaden
|
|
|
|
---
|
|
|
|
### Slide 13: Demo - Desktop App Setup
|
|
- **DEMO in Desktop App:**
|
|
- Open project folder (v0 repo)
|
|
- `Ctrl+O` → OpenCode Zen → **Kimi K2.5 Free**
|
|
- In terminal: `npm install` + `npm run dev`
|
|
|
|
---
|
|
|
|
### Slide 14: Demo - Plan Mode
|
|
- **DEMO in Desktop App:**
|
|
- "Analyseer dit project. Hoe werkt de routing?"
|
|
- AI leest alleen, verandert niets
|
|
|
|
---
|
|
|
|
### Slide 15: Demo - Build Mode
|
|
- Tab → 🔨
|
|
- **DEMO:** "Maak nieuwe pagina /about met hero en link op homepage"
|
|
- Toon resultaat in browser
|
|
|
|
---
|
|
|
|
## BLOK 4: GIT & VERCEL (10 min)
|
|
|
|
---
|
|
|
|
### Slide 16: Demo - Git Push
|
|
- **DEMO:**
|
|
```bash
|
|
git add .
|
|
git commit -m "Add about page"
|
|
git push
|
|
```
|
|
- Of: GitHub Desktop
|
|
|
|
---
|
|
|
|
### Slide 17: Demo - Vercel Auto-Deploy
|
|
- **DEMO:**
|
|
- Open Vercel dashboard
|
|
- Toon "Building..." status
|
|
- Na ~1 min: live!
|
|
|
|
---
|
|
|
|
### Slide 18: Nieuw project naar Vercel
|
|
- **Voor huiswerk!** v0 was automatisch gekoppeld
|
|
- **DEMO:** Vercel → Add New Project → Import Git Repository
|
|
- Selecteer repo → Deploy
|
|
|
|
---
|
|
|
|
## BLOK 5: HANDS-ON (85 min + 15 min pauze)
|
|
|
|
---
|
|
|
|
### Slide 19: Opdracht (09:50-09:55)
|
|
|
|
**Blijft op scherm tijdens hands-on!**
|
|
|
|
```
|
|
STAP 1: PROJECT KLAARZETTEN
|
|
git clone → cd → npm install → npm run dev
|
|
Open http://localhost:3000
|
|
|
|
STAP 2: OPENCODE DESKTOP APP
|
|
Open App → Open Folder → Ctrl+O → Zen → Kimi K2.5 Free
|
|
|
|
STAP 3: BOUW MET OPENCODE
|
|
□ 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 → git push
|
|
Check Vercel dashboard
|
|
```
|
|
|
|
**Doel:** minimaal 2x deployen | ☕ Pauze: 10:15-10:30
|
|
|
|
---
|
|
|
|
### Hands-on deel 1 (09:55-10:15)
|
|
|
|
**20 minuten werken** (25 min incl. uitleg)
|
|
|
|
Help bij opstartproblemen:
|
|
- Draait npm run dev?
|
|
- Kimi K2.5 Free geselecteerd?
|
|
|
|
---
|
|
|
|
### ☕ PAUZE (10:15-10:30)
|
|
|
|
"Om half 11 gaan we verder"
|
|
|
|
---
|
|
|
|
### Hands-on deel 2 (10:30-11:30)
|
|
|
|
**60 minuten werken**
|
|
|
|
**Checks:**
|
|
- 10:45 - "Wie draait lokaal?"
|
|
- 11:15 - "Wie heeft 2x gepusht?"
|
|
|
|
---
|
|
|
|
## BLOK 6: AFSLUITING (30 min)
|
|
|
|
---
|
|
|
|
### Slide 20: Resultaten
|
|
- 2-3 studenten tonen werk
|
|
- "Wat toegevoegd? Hoeveel keer gepusht?"
|
|
|
|
---
|
|
|
|
### Slide 21: Samenvatting
|
|
- ✅ OpenCode Terminal + Desktop App
|
|
- ✅ Gratis: Kimi K2.5 Free
|
|
- ✅ Optioneel: OpenAI met API key
|
|
- ✅ Plan vs Build mode
|
|
- ✅ @ file mentions
|
|
- ✅ Git push → auto deploy
|
|
|
|
---
|
|
|
|
### Slide 22: Huiswerk
|
|
- **Nieuw project vanaf scratch**
|
|
- create-next-app → 3 componenten
|
|
- Push naar GitHub
|
|
- **Vercel: Import Project** (zie slide 18!)
|
|
- **Inleveren:** Vercel + GitHub link in Teams
|
|
- **Les 3:** Iedereen langs, prompts bespreken
|
|
|
|
---
|
|
|
|
### Slide 23: Volgende les
|
|
- OpenCode IDE Integratie
|
|
- VSCode plugin
|
|
- "Tot dan!"
|