fix: les 2

2026-02-02 10:46:17 +01:00
parent d00df83065
commit 11ad141eec
2 changed files with 211 additions and 77 deletions
--- a/Samenvattingen/Les02-Samenvatting.md
+++ b/Samenvattingen/Les02-Samenvatting.md
@@ -1,20 +1,12 @@
-# Les 2: AI Code Assistants en OpenCode Desktop App
-
-> 📋 **Lesmateriaal nog niet uitgewerkt**
->
-> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
-> - Les02-Slide-Overzicht.md
-> - Les02-Lesplan.md
-> - Les02-Bijlage-A-Lesopdracht.md
-> - Les02-Bijlage-B-Huiswerkopdracht.md
+# Les 2: AI Code Assistants en OpenCode

 ---

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

 ## Beschrijving
-Introductie tot standalone AI coding tools. OpenCode als eerste hands-on ervaring met AI-geïntegreerde development.
+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.

 ---

@@ -23,89 +15,227 @@ Introductie tot standalone AI coding tools. OpenCode als eerste hands-on ervarin
 ### 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?

-### Theorie
- Verschil tussen chat-interfaces en geïntegreerde development tools
- OpenCode als standalone desktop applicatie (geen IDE nodig)
- Installatie en configuratie met gratis modellen (Ollama lokaal of Groq API)
- Interface verkenning: code editor, chat sidebar, terminal, file browser
- Best practices voor code generation prompts
- Iteratief werken met AI
- Wanneer welk model gebruiken (snelheid vs kwaliteit)
+---

-### Praktijk
- OpenCode installeren en configureren
- Gratis modellen testen (Ollama lokaal OF Groq API)
- Interface verkennen
- Component bouwen met AI assistance
+### 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 (standalone)
- Ollama/Groq API
- Vercel
+- OpenCode Desktop App
+- Groq API (gratis)
+- Ollama (optioneel, lokaal)

 ---

 ## Lesopdracht (2 uur)

-**Deel 1: Setup (45 min)**
- Installeer OpenCode desktop app
- Koppel een gratis model: Ollama lokaal OF Groq API
- Test beide opties en kies wat voor jou werkt
+### Deel 1: Setup (30 min)

-**Deel 2: Interface Verkenning**
- Probeer code completion
- Test chat functionaliteit
- Terminal commands
- File operations
+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 3: Component Bouwen (1u 15min)**
- Bouw een complete responsive navbar component
- Mobile hamburger menu
- Alleen met AI assistance via OpenCode
+### Deel 2: Interface Verkennen (30 min)

-**Documentatie:**
- Aantal prompts gebruikt
- Iteraties nodig
- Wat werkte goed/niet
- Hoeveel tijd bespaard vs handmatig coderen
+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 (30 min)
-**BELANGRIJK:** Voordat je verder gaat, fris je React kennis op via EdHub.
- Bekijk de React basics modules
+### 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 volledige landing page component library met OpenCode:
- Hero section
- Features section (3 cards met icons)
- Testimonial card
- CTA section met button
- Footer
+
+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 ervaring:
- Wat ging goed/fout
- Limitations van gratis modellen vs betaalde
- Hoe voelt AI-assisted coding met OpenCode standalone app
- Zou je dit blijven gebruiken?
+### 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
- Gratis AI modellen gebruiken (Ollama/Groq)
- De OpenCode interface effectief gebruiken
+- 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
- Het verschil begrijpen tussen chat-interfaces en geïntegreerde tools
+- Kritisch beoordelen wanneer AI output te vertrouwen is
--- a/readme.md
+++ b/readme.md
@@ -11,7 +11,7 @@ Een 18-weekse cursus die studenten meeneemt van AI-beginner naar AI-powered deve
 | Les | Onderwerp | Deel | Status |
 |-----|-----------|------|--------|
 | 01 | [Introductie tot AI en Large Language Models](Samenvattingen/Les01-Samenvatting.md) | 1 | ✅ Uitgewerkt |
-| 02 | [AI Code Assistants en OpenCode Desktop App](Samenvattingen/Les02-Samenvatting.md) | 1 | 📋 Samenvatting |
+| 02 | [AI Code Assistants en OpenCode](Samenvattingen/Les02-Samenvatting.md) | 1 | 📋 Samenvatting |
 | 03 | [AI Ethics, Privacy & Security + WebStorm](Samenvattingen/Les03-Samenvatting.md) | 1 | 📋 Samenvatting |
 | 04 | [Effectief Prompting, Iteratief Werken & Skills](Samenvattingen/Les04-Samenvatting.md) | 1 | 📋 Samenvatting |
 | 05 | [TypeScript Basics](Samenvattingen/Les05-Samenvatting.md) | 2 | 📋 Samenvatting |
@@ -76,29 +76,33 @@ Kennismaking met AI, LLMs en de basis van AI-assisted development.

 ---

-### Les 2: AI Code Assistants en OpenCode Desktop App
+### Les 2: AI Code Assistants en OpenCode

-**Tools:** OpenCode Desktop App, Ollama/Groq API
+**Tools:** OpenCode (Terminal UI + Desktop App), Groq API, Ollama

 **Docent vertelt:**
- Verschil chat-interfaces vs geïntegreerde development tools
- OpenCode als standalone desktop applicatie (gratis!)
- Hoe AI code assistants werken
- Best practices voor code generation prompts
+- Wat is OpenCode? Open-source AI coding assistant met 26.000+ GitHub stars
+- **Demo Terminal UI:** Laat zien hoe krachtig maar overweldigend de terminal versie is
+- **Demo Desktop App:** "Gelukkig is er ook dit!" - zelfde features, vriendelijkere interface
+- Keyboard shortcuts: `Ctrl+K` (commands), `@` (file search), `Tab` (Build/Plan mode)
+- Build vs Plan mode: wanneer welke gebruiken
+- AI model providers: Groq (gratis cloud) vs Ollama (lokaal, privacy)
 - Wanneer AI wel/niet te vertrouwen

 **Studenten doen:**
 - **Groepsdiscussie:** Bespreek klassikaal de reflecties uit Les 1 - wat zijn de voor- en nadelen van AI?
- OpenCode installeren en configureren
- Gratis model koppelen (Ollama lokaal of Groq API)
- Interface verkennen: code editor, chat, terminal
- Eerste component bouwen met AI hulp
+- OpenCode Desktop App installeren
+- Groq API configureren (gratis)
+- **Optioneel:** Ollama installeren voor lokaal model
+- Keyboard shortcuts oefenen
+- Plan mode gebruiken voor analyse, Build mode voor code schrijven
+- Responsive navbar bouwen met AI assistance

-**Lesopdracht:** Installeer OpenCode, koppel gratis model, bouw responsive navbar component met AI assistance, experimenteer met verschillende prompts.
+**Lesopdracht:** Installeer OpenCode, configureer Groq, oefen keyboard shortcuts, bouw responsive navbar met Plan mode (analyse) → Build mode (implementatie).

 **Huiswerk:**
 - Bouw landing page component library (hero, features, testimonial, CTA, footer)
- Schrijf blog post over ervaring met OpenCode (300 woorden)
+- Schrijf blog post over OpenCode ervaring (300 woorden): Terminal vs Desktop, Build vs Plan mode, Groq vs Ollama
 - **Optioneel:** Heb je het gevoel dat je React-kennis wat is weggezakt? Gebruik de eerste twee weken ook om React Fundamentals op EdHub te herhalen.

 [→ Ga naar Les 2](Samenvattingen/Les02-Samenvatting.md)