From 11ad141eec610ff43950111f016bedb15a349fa6 Mon Sep 17 00:00:00 2001 From: Tim Rijkse Date: Mon, 2 Feb 2026 10:46:17 +0100 Subject: [PATCH] fix: les 2 --- Samenvattingen/Les02-Samenvatting.md | 258 ++++++++++++++++++++------- readme.md | 30 ++-- 2 files changed, 211 insertions(+), 77 deletions(-) diff --git a/Samenvattingen/Les02-Samenvatting.md b/Samenvattingen/Les02-Samenvatting.md index 348be64..55aa4c1 100644 --- 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 diff --git a/readme.md b/readme.md index a2b2c62..adf355b 100644 --- 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)