novi-lessons/Samenvattingen/Les02-Samenvatting.md

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.

# 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