# 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. Na een korte demo van de terminal versie werken studenten met de **Desktop App** (met ingebouwde terminal). Met OpenCode Zen (gratis, geen API key nodig) leren ze 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)
- **Terminal versie** (krachtig) én **Desktop App** (gebruiksvriendelijk + ingebouwde terminal)
- **OpenCode Zen:** gratis AI modellen, geen API key nodig
- 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 Desktop App (opencode.ai/download)
- 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 Desktop App (10 min)

1. Open Desktop App
2. Open je projectfolder
3. `Ctrl+O` → OpenCode Zen → GLM 4.7
4. In ingebouwde terminal: `npm install` + `npm run dev`

### 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 het verschil tussen Terminal en Desktop App
2. De OpenCode Desktop App installeren en configureren met OpenCode Zen (gratis)
3. Werken met Plan mode en Build mode
4. Een bestaand GitHub project openen en lokaal draaien (in de ingebouwde terminal)
5. Wijzigingen maken met OpenCode en deployen via git push
6. De @ file mention gebruiken voor context
