# 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: Build vs Plan Mode

| Mode | Icoon | Wat het doet |
|------|-------|--------------|
| **Plan** | 📋 | Analyseert, verandert NIETS |
| **Build** | 🔨 | Schrijft code, maakt bestanden |

**Wisselen:** `Tab`

**Workflow:** Plan → begrijpen → Build → bouwen

---

### Slide 7: Keyboard Shortcuts

| Shortcut | Actie |
|----------|-------|
| `Ctrl+K` | Command menu |
| `Tab` | Wissel Build/Plan |
| `@` | Zoek bestanden |
| `Ctrl+O` | Model selectie |

---

### 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"
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
npm i -g opencode-ai@latest
opencode
```

**Laat zien:**
- TUI (Terminal User Interface)
- Shortcuts: `Ctrl+K`, `Tab`, `@`, `Ctrl+O`
- Plan vs Build mode

→ 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!

**Opdracht:** Maak een nieuwe pagina in je v0 project

**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!

**Doel:** Minimaal 2 keer deployen naar Vercel

**Tijd:** 85 minuten (09:50-10:15 + 10:30-11:30)

☕ **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
5. 300 woorden reflectie

**Stappen voor Vercel: zie slide 16!**

---

### Slide 22: Volgende les

**Les 3:** OpenCode IDE Integratie

- VSCode plugin
- Inline code generatie
- Advanced prompting

Tot volgende week!