fix: better slides
This commit is contained in:
Tim Rijkse
@@ -1,7 +1,7 @@
|
||||
# Les 2: OpenCode - AI Code Assistants
|
||||
|
||||
> **Deel 1: AI Foundations** (Les 1-4)
|
||||
> **Totale slides:** 23
|
||||
> **Totale slides:** 20
|
||||
> **Lesduur:** 3 uur (180 minuten)
|
||||
> **Spreektijd:** ~50 min | **Hands-on:** ~85 min | **Pauze:** 15 min
|
||||
|
||||
@@ -12,12 +12,12 @@
|
||||
| Blok | Onderwerp | Slides | Tijd |
|
||||
|------|-----------|--------|------|
|
||||
| 1 | Welkom & Terugblik | 1-4 | 10 min |
|
||||
| 2 | Introductie OpenCode | 5-10 | 10 min |
|
||||
| 3 | Setup & Demo | 11-15 | 20 min |
|
||||
| 4 | Git & Vercel Workflow | 16-18 | 10 min |
|
||||
| 5 | Hands-on Opdracht | 19 | 85 min |
|
||||
| 2 | Introductie OpenCode | 5-11 | 10 min |
|
||||
| 3 | Setup & Demo | 12 | 20 min |
|
||||
| 4 | Git & Vercel Workflow | 13-15 | 10 min |
|
||||
| 5 | Hands-on Opdracht | 16 | 85 min |
|
||||
| - | **☕ PAUZE** | - | 15 min |
|
||||
| 6 | Afsluiting | 20-23 | 30 min |
|
||||
| 6 | Afsluiting | 17-20 | 30 min |
|
||||
|
||||
---
|
||||
|
||||
@@ -90,7 +90,7 @@ npm i -g opencode-ai@latest
|
||||
- Installeer voor jouw OS (Mac/Windows)
|
||||
|
||||
**Gratis AI Model:**
|
||||
- `Ctrl+O` → OpenCode Zen → **Kimi K2.5 Free**
|
||||
- `Ctrl+X M` → OpenCode Zen → **Kimi K2.5 Free**
|
||||
|
||||
---
|
||||
|
||||
@@ -113,14 +113,35 @@ npm i -g opencode-ai@latest
|
||||
|
||||
| Shortcut | Actie |
|
||||
|----------|-------|
|
||||
| `Ctrl+K` | Command menu |
|
||||
| `Ctrl+P` | Command menu |
|
||||
| `Tab` | Wissel Build/Plan |
|
||||
| `@` | Zoek bestanden |
|
||||
| `Ctrl+O` | Model selectie |
|
||||
| `@explore` | Codebase verkennen (read-only) |
|
||||
|
||||
---
|
||||
|
||||
### Slide 9: De Deployment Workflow
|
||||
### 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
|
||||
@@ -134,7 +155,7 @@ Jullie Vercel project is al gekoppeld aan GitHub.
|
||||
|
||||
---
|
||||
|
||||
### Slide 10: Optioneel - OpenAI API Key
|
||||
### Slide 11: Optioneel - OpenAI API Key
|
||||
|
||||
**Wil je GPT-4 gebruiken?**
|
||||
|
||||
@@ -142,7 +163,7 @@ Jullie Vercel project is al gekoppeld aan GitHub.
|
||||
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+O` → OpenAI → Plak key
|
||||
5. In OpenCode: `Ctrl+X M` → OpenAI → Plak key
|
||||
|
||||
**Let op:** OpenAI is betaald (~$0.01 per prompt)
|
||||
|
||||
@@ -152,70 +173,41 @@ Jullie Vercel project is al gekoppeld aan GitHub.
|
||||
|
||||
## BLOK 3: SETUP & DEMO (20 minuten)
|
||||
|
||||
### Slide 11: Demo - Terminal Versie
|
||||
### Slide 12: Live Demo Overzicht (blijft op scherm)
|
||||
|
||||
**Live demo:**
|
||||
```bash
|
||||
opencode
|
||||
```
|
||||
|
||||
**Laat zien in actie:**
|
||||
- Plan mode: "Analyseer dit project"
|
||||
- Build mode: `Tab` → "Voeg een component toe"
|
||||
- @ mention: `@src/components/`
|
||||
- Shortcuts: `Ctrl+K`, `Ctrl+O`
|
||||
|
||||
→ Krachtig! Maar we gaan iets gebruiksvriendelijkers gebruiken...
|
||||
|
||||
---
|
||||
|
||||
### Slide 12: Desktop App
|
||||
|
||||
**Download:** opencode.ai/download
|
||||
|
||||
**Voordelen:**
|
||||
- Zelfde features als terminal
|
||||
- Vriendelijkere interface
|
||||
- **Ingebouwde terminal!**
|
||||
|
||||
**Dit gaan we vandaag gebruiken.**
|
||||
|
||||
---
|
||||
|
||||
### Slide 13: Demo - Desktop App Setup
|
||||
|
||||
**Live demo:**
|
||||
1. Open Desktop App
|
||||
2. Open project folder (je v0 repo)
|
||||
3. `Ctrl+O` → OpenCode Zen → **Kimi K2.5 Free**
|
||||
4. In terminal: `npm install` + `npm run dev`
|
||||
|
||||
---
|
||||
|
||||
### Slide 14: Demo - Plan Mode
|
||||
|
||||
**Live demo in Desktop App:**
|
||||
1. Check: 📋 = Plan mode
|
||||
2. Vraag: "Analyseer dit project. Hoe werkt de routing?"
|
||||
|
||||
_(AI leest alleen, verandert niets)_
|
||||
|
||||
---
|
||||
|
||||
### Slide 15: Demo - Build Mode
|
||||
|
||||
**Live demo in Desktop App:**
|
||||
1. `Tab` → wissel naar 🔨
|
||||
2. Vraag: "Maak een nieuwe pagina /about met hero en link op homepage"
|
||||
3. Review de code
|
||||
4. Accept
|
||||
5. Refresh browser → zie resultaat!
|
||||
┌─────────────────────────────────────────────────────┐
|
||||
│ 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 16: Demo - Git Push
|
||||
### Slide 13: Demo - Git Push
|
||||
|
||||
**Live demo (in Desktop App terminal):**
|
||||
```bash
|
||||
@@ -228,7 +220,7 @@ Of gebruik GitHub Desktop!
|
||||
|
||||
---
|
||||
|
||||
### Slide 17: Demo - Vercel Auto-Deploy
|
||||
### Slide 14: Demo - Vercel Auto-Deploy
|
||||
|
||||
**Live demo:**
|
||||
1. Open Vercel dashboard
|
||||
@@ -239,7 +231,7 @@ Of gebruik GitHub Desktop!
|
||||
|
||||
---
|
||||
|
||||
### Slide 18: Nieuw project naar Vercel (voor huiswerk)
|
||||
### Slide 15: Nieuw project naar Vercel (voor huiswerk)
|
||||
|
||||
**Stappen voor een nieuw project:**
|
||||
|
||||
@@ -255,7 +247,7 @@ Of gebruik GitHub Desktop!
|
||||
|
||||
## BLOK 5: HANDS-ON OPDRACHT (85 minuten)
|
||||
|
||||
### Slide 19: Aan de slag! (blijft op scherm)
|
||||
### Slide 16: Aan de slag! (blijft op scherm)
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────┐
|
||||
@@ -271,7 +263,7 @@ Of gebruik GitHub Desktop!
|
||||
│ ───────────────────────────────────────────────── │
|
||||
│ 1. Open Desktop App │
|
||||
│ 2. File → Open Folder → je project │
|
||||
│ 3. Ctrl+O → OpenCode Zen → Kimi K2.5 Free │
|
||||
│ 3. Ctrl+X M → OpenCode Zen → Kimi K2.5 Free │
|
||||
├─────────────────────────────────────────────────────┤
|
||||
│ STAP 3: BOUW MET OPENCODE │
|
||||
│ ───────────────────────────────────────────────── │
|
||||
@@ -295,7 +287,7 @@ Of gebruik GitHub Desktop!
|
||||
|
||||
## BLOK 6: AFSLUITING (30 minuten)
|
||||
|
||||
### Slide 20: Resultaten delen
|
||||
### Slide 17: Resultaten delen
|
||||
|
||||
- Wie wil laten zien?
|
||||
- Wat heb je toegevoegd?
|
||||
@@ -303,18 +295,18 @@ Of gebruik GitHub Desktop!
|
||||
|
||||
---
|
||||
|
||||
### Slide 21: Samenvatting
|
||||
### Slide 18: Samenvatting
|
||||
|
||||
- ✅ OpenCode: open-source AI assistant
|
||||
- ✅ Gratis model: Kimi K2.5 Free
|
||||
- ✅ Optioneel: OpenAI met API key
|
||||
- ✅ Plan vs Build mode
|
||||
- ✅ @ file mentions voor context
|
||||
- ✅ @explore voor codebase verkennen
|
||||
- ✅ Git push → Vercel auto-deploy
|
||||
|
||||
---
|
||||
|
||||
### Slide 22: Huiswerk
|
||||
### Slide 19: Huiswerk
|
||||
|
||||
**Opdracht: Nieuw project vanaf scratch**
|
||||
|
||||
@@ -329,11 +321,11 @@ Of gebruik GitHub Desktop!
|
||||
|
||||
**In Les 3:** We gaan iedereen langs en bespreken je prompts!
|
||||
|
||||
**Stappen voor Vercel: zie slide 18!**
|
||||
**Stappen voor Vercel: zie slide 15!**
|
||||
|
||||
---
|
||||
|
||||
### Slide 23: Volgende les
|
||||
### Slide 20: Volgende les
|
||||
|
||||
**Les 3:** OpenCode IDE Integratie
|
||||
|
||||
|
||||
Reference in New Issue
Block a user