fix: update les
This commit is contained in:
@@ -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
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user