fix: update les

This commit is contained in:
Tim Rijkse
2026-02-07 11:03:42 +01:00
parent fdce1ea0e4
commit d323cb004c
4 changed files with 115 additions and 80 deletions

View File

@@ -78,7 +78,23 @@
---
### Slide 6: Build vs Plan Mode
### Slide 6: Installatie
**Terminal versie:**
```bash
npm i -g opencode-ai@latest
```
**Desktop App:**
- Download: **opencode.ai/download**
- Installeer voor jouw OS (Mac/Windows)
**AI Model (gratis):**
- `Ctrl+O` → OpenCode Zen → GLM 4.7
---
### Slide 7: Build vs Plan Mode
| Mode | Icoon | Wat het doet |
|------|-------|--------------|
@@ -87,15 +103,13 @@
**Wisselen:** `Tab`
**Workflow:** Plan → begrijpen → Build → bouwen
**💡 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 7: Keyboard Shortcuts
### Slide 8: Keyboard Shortcuts
| Shortcut | Actie |
|----------|-------|
@@ -106,25 +120,12 @@
---
### Slide 8: De @ file mention
```
@src/components/Hero.tsx
Maak de heading groter en voeg een gradient toe
```
- Typ `@` + begin filename
- Fuzzy search door project
- AI krijgt exacte context
---
### Slide 9: De Deployment Workflow
```
1. Wijzig code met OpenCode
2. git add .
3. git commit -m "Add testimonials"
3. git commit -m "Add about page"
4. git push
5. ✨ Vercel deployt automatisch!
```
@@ -139,14 +140,14 @@ Jullie Vercel project is al gekoppeld aan GitHub.
**Live demo:**
```bash
npm i -g opencode-ai@latest
opencode
```
**Laat zien:**
- TUI (Terminal User Interface)
- Shortcuts: `Ctrl+K`, `Tab`, `@`, `Ctrl+O`
- Plan vs Build mode
**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...
@@ -238,30 +239,41 @@ Of gebruik GitHub Desktop!
## BLOK 5: HANDS-ON OPDRACHT (85 minuten)
### Slide 18: Aan de slag!
### Slide 18: Aan de slag! (blijft op scherm)
**Opdracht:** Maak een nieuwe pagina in je v0 project
```
┌─────────────────────────────────────────────────────┐
│ 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+O → OpenCode Zen → GLM 4.7 │
├─────────────────────────────────────────────────────┤
│ 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 │
└─────────────────────────────────────────────────────┘
```
**Stappen:**
1. Clone je repo (of pull latest)
2. `npm install` + `npm run dev`
3. Met OpenCode:
- Maak nieuwe pagina (/about, /services, of /contact)
- Voeg minimaal 2 componenten toe aan de pagina
- Voeg link op homepage toe naar de nieuwe pagina
4. Push naar GitHub → bekijk live!
**💡 Onthoud: Eén prompt per taak!**
- Eerst de pagina structuur
- Dan component 1
- Dan component 2
- Dan de link op homepage
**Doel:** Minimaal 2 keer deployen naar Vercel
**Tijd:** 85 minuten (09:50-10:15 + 10:30-11:30)
**Pauze:** 10:15-10:30
**Doel:** Minimaal 2x deployen | ☕ **Pauze:** 10:15-10:30
---