242 lines
6.0 KiB
Markdown
242 lines
6.0 KiB
Markdown
# 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. Eerst de terminal versie (overweldigend maar krachtig), daarna de desktop app (gebruiksvriendelijker). Focus op keyboard shortcuts en Build vs Plan mode.
|
|
|
|
---
|
|
|
|
## Te Behandelen
|
|
|
|
### Groepsdiscussie (15 min)
|
|
Bespreek klassikaal de reflecties uit Les 1 - wat zijn de voor- en nadelen van AI die jullie zien? Hoe voelde de schets-naar-website workflow?
|
|
|
|
---
|
|
|
|
### Wat is OpenCode?
|
|
|
|
- Open-source AI coding assistant (26.000+ GitHub stars)
|
|
- Werkt met meerdere AI providers: Groq (gratis), Ollama (lokaal), OpenAI, Anthropic
|
|
- Twee versies: **Terminal UI** en **Desktop App**
|
|
- Privacy-first: je code blijft lokaal tenzij je kiest voor cloud
|
|
|
|
---
|
|
|
|
### Demo: Terminal UI (10 min)
|
|
|
|
**Doel:** Laat zien hoe krachtig maar overweldigend de terminal versie is.
|
|
|
|
```bash
|
|
# Installatie
|
|
curl -fsSL https://opencode.ai/install | bash
|
|
|
|
# Of via npm
|
|
npm i -g opencode-ai@latest
|
|
|
|
# Start
|
|
opencode
|
|
```
|
|
|
|
**Laat zien:**
|
|
- TUI (Terminal User Interface) opent
|
|
- Veel keyboard shortcuts
|
|
- Krachtig maar... "dit ziet er complex uit, toch?"
|
|
|
|
---
|
|
|
|
### Demo: Desktop App (5 min)
|
|
|
|
**Doel:** Opluchting - "gelukkig is er ook dit!"
|
|
|
|
- Download van opencode.ai/download
|
|
- Zelfde features, vriendelijkere interface
|
|
- Keyboard shortcuts werken ook hier
|
|
- **Dit gaan we gebruiken in de les**
|
|
|
|
---
|
|
|
|
### Keyboard Shortcuts (10 min)
|
|
|
|
Deze werken in BEIDE versies:
|
|
|
|
| Shortcut | Actie |
|
|
|----------|-------|
|
|
| `Ctrl+K` | Command dialog (belangrijkste!) |
|
|
| `Ctrl+N` | Nieuwe sessie |
|
|
| `Ctrl+A` | Wissel tussen sessies |
|
|
| `Ctrl+O` | Model selectie |
|
|
| `Tab` | Wissel Build/Plan mode |
|
|
| `@` | File fuzzy search |
|
|
| `Ctrl+S` | Stuur bericht |
|
|
| `Esc` | Terug/annuleer |
|
|
|
|
**Tip:** `@` is super handig - typ `@` en begin te typen om bestanden te zoeken.
|
|
|
|
---
|
|
|
|
### Build vs Plan Mode (10 min)
|
|
|
|
OpenCode heeft twee "agents" - wissel met `Tab`:
|
|
|
|
| Mode | Icoon | Wat het doet |
|
|
|------|-------|--------------|
|
|
| **Build** | 🔨 | Volledige toegang - kan code schrijven, bestanden aanpassen, commands uitvoeren |
|
|
| **Plan** | 📋 | Read-only - analyseert code, maakt plannen, maar verandert niets |
|
|
|
|
**Workflow tip:**
|
|
1. Start in **Plan mode**: "Analyseer dit project en leg uit wat het doet"
|
|
2. Wissel naar **Build mode**: "Voeg nu een navbar toe"
|
|
|
|
---
|
|
|
|
### AI Modellen Instellen (10 min)
|
|
|
|
#### Optie 1: Groq (gratis cloud)
|
|
1. Ga naar console.groq.com
|
|
2. Maak account aan
|
|
3. Genereer API key
|
|
4. In OpenCode: `Ctrl+O` → Groq → Plak key
|
|
|
|
**Voordeel:** Snel, gratis, geen lokale setup
|
|
**Nadeel:** Code gaat naar cloud
|
|
|
|
#### Optie 2: Ollama (lokaal)
|
|
1. Download ollama.ai
|
|
2. `ollama pull llama3.2` (of ander model)
|
|
3. In OpenCode: `Ctrl+O` → Ollama
|
|
|
|
**Voordeel:** Privacy, geen internet nodig
|
|
**Nadeel:** Langzamer, gebruikt je hardware
|
|
|
|
---
|
|
|
|
### Wanneer AI Wel/Niet Vertrouwen (5 min)
|
|
|
|
**Wel vertrouwen:**
|
|
- Boilerplate code
|
|
- Bekende patterns (React components, API routes)
|
|
- Syntax die je vergeten bent
|
|
|
|
**Niet blind vertrouwen:**
|
|
- Security-gevoelige code
|
|
- Business logic
|
|
- Complexe algoritmes
|
|
|
|
**Altijd:** Lees en begrijp de code voordat je het accepteert!
|
|
|
|
---
|
|
|
|
## Tools
|
|
- OpenCode Desktop App
|
|
- Groq API (gratis)
|
|
- Ollama (optioneel, lokaal)
|
|
|
|
---
|
|
|
|
## Lesopdracht (2 uur)
|
|
|
|
### Deel 1: Setup (30 min)
|
|
|
|
1. Download en installeer OpenCode Desktop App
|
|
2. Maak Groq account aan en genereer API key
|
|
3. Configureer Groq in OpenCode (`Ctrl+O`)
|
|
4. **Optioneel:** Installeer Ollama en test lokaal model
|
|
|
|
### Deel 2: Interface Verkennen (30 min)
|
|
|
|
1. Open een bestaand project (of maak nieuwe folder)
|
|
2. Oefen keyboard shortcuts:
|
|
- `Ctrl+K` → bekijk beschikbare commands
|
|
- `@` → zoek een bestand
|
|
- `Ctrl+N` → nieuwe sessie
|
|
- `Tab` → wissel Build/Plan mode
|
|
3. Test Plan mode: "Analyseer dit project en beschrijf de structuur"
|
|
|
|
### Deel 3: Component Bouwen (60 min)
|
|
|
|
Bouw een responsive navbar met OpenCode:
|
|
|
|
**Stap 1 - Plan mode:**
|
|
```
|
|
Ik wil een responsive navbar bouwen met React en Tailwind.
|
|
Desktop: logo links, links midden, button rechts.
|
|
Mobile: hamburger menu.
|
|
Analyseer wat ik nodig heb.
|
|
```
|
|
|
|
**Stap 2 - Build mode:**
|
|
```
|
|
Bouw nu de navbar component zoals we besproken hebben.
|
|
```
|
|
|
|
**Vereisten:**
|
|
- Logo placeholder links
|
|
- 4 navigatie links
|
|
- CTA button rechts
|
|
- Mobile hamburger menu (werkend)
|
|
- Tailwind CSS styling
|
|
|
|
### Documentatie
|
|
|
|
Noteer tijdens het bouwen:
|
|
- Hoeveel prompts heb je gebruikt?
|
|
- Welke iteraties waren nodig?
|
|
- Wat werkte goed/niet?
|
|
- Build vs Plan mode - wanneer gebruikte je welke?
|
|
|
|
---
|
|
|
|
## Huiswerk (2 uur)
|
|
|
|
### React Opfrissen (optioneel, 30 min)
|
|
|
|
Als je merkt dat je React kennis is weggezakt:
|
|
- Bekijk React Fundamentals op EdHub
|
|
- Focus op: components, props, state, hooks
|
|
- Dit is essentieel voor de rest van de cursus!
|
|
|
|
### Component Library Bouwen (1.5 uur)
|
|
|
|
Bouw een landing page component library met OpenCode:
|
|
|
|
1. **Hero section** - grote headline, subtitle, CTA button, afbeelding
|
|
2. **Features section** - 3 cards met icons en beschrijving
|
|
3. **Testimonial card** - quote, naam, foto, bedrijf
|
|
4. **CTA section** - headline, beschrijving, button
|
|
5. **Footer** - links, social icons, copyright
|
|
|
|
**Vereisten:**
|
|
- Gebruik Plan mode voor elk component eerst
|
|
- Alles responsive met Tailwind CSS
|
|
- Test op mobile en desktop
|
|
|
|
### Blog Post (300 woorden)
|
|
|
|
Schrijf over je OpenCode ervaring:
|
|
- Hoe voelde de terminal vs desktop app?
|
|
- Build vs Plan mode - wanneer gebruik je welke?
|
|
- Groq vs Ollama - welke koos je en waarom?
|
|
- Keyboard shortcuts - welke zijn het handigst?
|
|
- Zou je OpenCode blijven gebruiken?
|
|
|
|
### Bonus
|
|
|
|
Probeer de terminal versie als je alleen desktop hebt gebruikt (of andersom).
|
|
|
|
---
|
|
|
|
## Leerdoelen
|
|
|
|
Na deze les kan de student:
|
|
- OpenCode installeren en configureren (desktop en terminal)
|
|
- Groq en/of Ollama als AI provider instellen
|
|
- Keyboard shortcuts gebruiken voor efficiënt werken
|
|
- Build vs Plan mode inzetten voor verschillende taken
|
|
- De `@` file search gebruiken om context te geven
|
|
- Components bouwen met AI assistance
|
|
- Kritisch beoordelen wanneer AI output te vertrouwen is
|