# Les 2: OpenCode - AI Code Assistants

> **Deel 1: AI Foundations** (Les 1-4)
> **Totale slides:** 22
> **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-9 | 10 min |
| 3 | Setup & Demo | 10-14 | 20 min |
| 4 | Git & Vercel Workflow | 15-17 | 10 min |
| 5 | Hands-on Opdracht | 18 | 85 min |
| - | **☕ PAUZE** | - | 15 min |
| 6 | Afsluiting | 19-22 | 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** (gratis!), Groq, Ollama
- 🖥️ Terminal én **Desktop App** (met ingebouwde terminal!)
- 🔒 Privacy-first

**Vandaag:** Desktop App + OpenCode Zen (gratis, geen key nodig)

---

### 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 |
|------|-------|--------------|
| **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+K` | Command menu |
| `Tab` | Wissel Build/Plan |
| `@` | Zoek bestanden |
| `Ctrl+O` | Model selectie |

---

### Slide 9: 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.

---

## BLOK 3: SETUP & DEMO (20 minuten)

### Slide 10: Demo - Terminal Versie

**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 11: Desktop App

**Download:** opencode.ai/download

**Voordelen:**
- Zelfde features als terminal
- Vriendelijkere interface
- **Ingebouwde terminal!**

**Dit gaan we vandaag gebruiken.**

---

### Slide 12: Demo - Desktop App Setup

**Live demo:**
1. Open Desktop App
2. Open project folder (je v0 repo)
3. `Ctrl+O` → OpenCode Zen → GLM 4.7
4. In terminal: `npm install` + `npm run dev`

---

### Slide 13: 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 14: 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!

---

## BLOK 4: GIT & VERCEL WORKFLOW (10 minuten)

### Slide 15: 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 16: Demo - Vercel Auto-Deploy

**Live demo:**
1. Open Vercel dashboard
2. Zie: "Building..."
3. Na ~1 minuut: live op je URL!

**Tip:** Vercel toont ook preview voor branches

---

### Slide 17: 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 18: 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+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                           │
└─────────────────────────────────────────────────────┘
```

**Doel:** Minimaal 2x deployen | ☕ **Pauze:** 10:15-10:30

---

## BLOK 6: AFSLUITING (30 minuten)

### Slide 19: Resultaten delen

- Wie wil laten zien?
- Wat heb je toegevoegd?
- Hoeveel keer gepusht?

---

### Slide 20: Samenvatting

- ✅ OpenCode: open-source AI assistant
- ✅ OpenCode Zen: gratis AI modellen
- ✅ Plan vs Build mode
- ✅ @ file mentions voor context
- ✅ Git push → Vercel auto-deploy
- ✅ Van v0 copy/paste → lokale development

---

### Slide 21: 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 17!**

---

### Slide 22: Volgende les

**Les 3:** OpenCode IDE Integratie

- VSCode plugin
- Inline code generatie
- Advanced prompting

Tot volgende week!