# Les 2: AI Code Assistants en OpenCode

---

## Hoofdstuk
**Deel 1: AI Foundations** (Les 1-4)

## Beschrijving
Introductie tot OpenCode: een open-source AI coding assistant met 60.000+ GitHub stars. Focus op de terminal versie met OpenCode Zen (gratis, geen API key nodig). Studenten werken met hun bestaande v0 project en leren de volledige development workflow: lokaal draaien, uitbreiden met AI, en deployen via git push.

---

## Tijdsindeling

| Blok | Tijd | Duur |
|------|------|------|
| 1. Welkom & Terugblik | 09:00-09:10 | 10 min |
| 2. Intro OpenCode | 09:10-09:20 | 10 min |
| 3. Setup & Demo | 09:20-09:40 | 20 min |
| 4. Git & Vercel | 09:40-09:50 | 10 min |
| 5. Hands-on (deel 1) | 09:50-10:15 | 25 min |
| ☕ PAUZE | 10:15-10:30 | 15 min |
| 5. Hands-on (deel 2) | 10:30-11:30 | 60 min |
| 6. Afsluiting | 11:30-12:00 | 30 min |

**Spreektijd:** ~50 min | **Hands-on:** ~85 min | **Pauze:** 15 min

---

## Te Behandelen

### Wat is OpenCode?

- Open-source AI coding assistant (60.000+ GitHub stars)
- **OpenCode Zen:** gratis AI modellen, geen API key nodig
- Terminal-based interface (TUI)
- Kies je eigen AI model: GLM 4.7 (aanbevolen)

---

### Keyboard Shortcuts

| Shortcut | Actie |
|----------|-------|
| `Ctrl+K` | Command menu |
| `Tab` | Wissel Build/Plan mode |
| `@` | File fuzzy search |
| `Ctrl+O` | Model selectie |

**Tip:** `@` is super handig - typ `@` en begin te typen om bestanden te zoeken en context te geven aan de AI.

---

### Build vs Plan Mode

OpenCode heeft twee modes - wissel met `Tab`:

| Mode | Icoon | Wat het doet |
|------|-------|--------------|
| **Plan** | 📋 | Read-only - leest, analyseert, verandert NIETS |
| **Build** | 🔨 | Volledige toegang - schrijft code, maakt bestanden |

**Workflow:**
1. Start in **Plan mode**: "Analyseer dit project. Waar kan ik testimonials toevoegen?"
2. Wissel naar **Build mode**: "Maak nu de Testimonials component"

---

### De Deployment Workflow

De volledige workflow die jullie vandaag leren:

1. **Wijzig code** met OpenCode
2. **Test lokaal** op localhost:3000
3. **Git add, commit, push**
4. **Vercel pakt automatisch op** → Live!

Jullie v0 project is al gekoppeld aan GitHub/Vercel, dus elke push wordt automatisch live.

---

### Nieuw Project naar Vercel (voor huiswerk)

Voor nieuwe projecten (niet gekoppeld via v0):
1. Vercel Dashboard → Add New Project
2. Import Git Repository
3. Selecteer repo → Deploy

---

## Tools
- OpenCode Terminal (`npm i -g opencode-ai@latest`)
- OpenCode Zen (gratis AI, GLM 4.7)
- Git
- Vercel

---

## Lesopdracht (85 min hands-on)

### Doel
Maak een nieuwe pagina in je v0 project. Leer de volledige workflow: lokaal draaien, pagina maken met AI, deployen via git push.

### Stap 1: Project Lokaal Draaien (15 min)

```bash
git clone https://github.com/jouw-username/jouw-project.git
cd jouw-project
npm install
npm run dev
```

Open http://localhost:3000 - je ziet je website!

### Stap 2: OpenCode Configureren (10 min)

```bash
opencode
```

Selecteer gratis AI model:
1. Druk `Ctrl+O`
2. Kies "OpenCode Zen"
3. Selecteer "GLM 4.7"

### Stap 3: Nieuwe Pagina Maken (45 min)

**Fase 1 - Plan mode (📋):**
```
Analyseer dit project. Hoe werkt de routing?
Hoe maak ik een nieuwe pagina in Next.js?
```

**Fase 2 - Build mode (🔨):**

Maak een nieuwe pagina:
- Kies: **/about**, **/services**, of **/contact**
- Voeg minimaal 2 componenten toe (hero + content)
- Voeg link op homepage toe naar de nieuwe pagina

### Stap 4: Deploy naar Vercel (10 min)

```bash
git add .
git commit -m "Add about page"
git push
```

Open Vercel dashboard, zie "Building...", na ~1 min: live!

### Stap 5: Herhaal!

Doe minimaal nog één wijziging en push opnieuw. **Doel: minimaal 2x deployen.**

---

## Huiswerk

### Nieuw Project Vanaf Scratch

Maak een **nieuw** project (niet je v0 project uitbreiden):

**Stap 1: Project aanmaken**
```bash
npx create-next-app@latest mijn-project
cd mijn-project
```
Kies: TypeScript, Tailwind CSS, App Router

**Stap 2: 3 Componenten bouwen met OpenCode**
1. **Navbar** - logo, links, responsive hamburger menu
2. **Hero** - headline, subtitle, CTA button
3. **Keuze:** Features, Footer, of ander component

**Stap 3: Push naar GitHub**
```bash
git add .
git commit -m "Initial components"
git push
```

**Stap 4: Koppel aan Vercel**
1. Ga naar vercel.com/new
2. Import Git Repository
3. Selecteer je nieuwe repo
4. Deploy

### Reflectie (300 woorden)

Schrijf over je ervaring:
- Hoe voelde werken met OpenCode?
- Build vs Plan mode - wanneer gebruik je welke?
- Wat ging goed bij het deployen?
- Wat was de moeilijkste stap?
- Vergelijk met de v0 workflow uit Les 1

---

## Leerdoelen

Na deze les kan de student:
1. Uitleggen wat OpenCode is en waarom het efficiënter is dan de v0/ChatGPT workflow
2. OpenCode installeren en configureren met OpenCode Zen (gratis)
3. Werken met Plan mode en Build mode
4. Een bestaand GitHub project clonen en lokaal draaien
5. Wijzigingen maken met OpenCode en deployen via git push
6. De @ file mention gebruiken voor context