rubberducky/novi-lessons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: les 2

Browse Source
This commit is contained in:
Tim Rijkse
2026-02-02 10:46:17 +01:00
parent d00df83065
commit 11ad141eec
2 changed files with 211 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

258
Samenvattingen/Les02-Samenvatting.md
View File

@@ -1,20 +1,12 @@
# Les 2: AI Code Assistants en OpenCode Desktop App # Les 2: AI Code Assistants en OpenCode
> 📋 **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
--- ---
## Hoofdstuk ## Hoofdstuk
**Hoofdstuk 1: Fundamentals** (Les 1-3) **Deel 1: AI Foundations** (Les 1-4)
## Beschrijving ## 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) ### 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? 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 ### Wat is OpenCode?
- OpenCode installeren en configureren
- Gratis modellen testen (Ollama lokaal OF Groq API) - Open-source AI coding assistant (26.000+ GitHub stars)
- Interface verkennen - Werkt met meerdere AI providers: Groq (gratis), Ollama (lokaal), OpenAI, Anthropic
- Component bouwen met AI assistance - 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 ## Tools
- OpenCode (standalone) - OpenCode Desktop App
- Ollama/Groq API - Groq API (gratis)
- Vercel - Ollama (optioneel, lokaal)
--- ---
## Lesopdracht (2 uur) ## Lesopdracht (2 uur)
**Deel 1: Setup (45 min)** ### Deel 1: Setup (30 min)
- Installeer OpenCode desktop app
- Koppel een gratis model: Ollama lokaal OF Groq API
- Test beide opties en kies wat voor jou werkt
**Deel 2: Interface Verkenning** 1. Download en installeer OpenCode Desktop App
- Probeer code completion 2. Maak Groq account aan en genereer API key
- Test chat functionaliteit 3. Configureer Groq in OpenCode (`Ctrl+O`)
- Terminal commands 4. **Optioneel:** Installeer Ollama en test lokaal model
- File operations
**Deel 3: Component Bouwen (1u 15min)** ### Deel 2: Interface Verkennen (30 min)
- Bouw een complete responsive navbar component
- Mobile hamburger menu
- Alleen met AI assistance via OpenCode
**Documentatie:** 1. Open een bestaand project (of maak nieuwe folder)
- Aantal prompts gebruikt 2. Oefen keyboard shortcuts:
- Iteraties nodig - `Ctrl+K` → bekijk beschikbare commands
- Wat werkte goed/niet - `@` → zoek een bestand
- Hoeveel tijd bespaard vs handmatig coderen - `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) ## Huiswerk (2 uur)
### React Opfrissen (30 min) ### React Opfrissen (optioneel, 30 min)
**BELANGRIJK:** Voordat je verder gaat, fris je React kennis op via EdHub.
- Bekijk de React basics modules Als je merkt dat je React kennis is weggezakt:
- Bekijk React Fundamentals op EdHub
- Focus op: components, props, state, hooks - Focus op: components, props, state, hooks
- Dit is essentieel voor de rest van de cursus! - Dit is essentieel voor de rest van de cursus!
### Component Library Bouwen (1.5 uur) ### Component Library Bouwen (1.5 uur)
Bouw een volledige landing page component library met OpenCode:
- Hero section Bouw een landing page component library met OpenCode:
- Features section (3 cards met icons)
- Testimonial card 1. **Hero section** - grote headline, subtitle, CTA button, afbeelding
- CTA section met button 2. **Features section** - 3 cards met icons en beschrijving
- Footer 3. **Testimonial card** - quote, naam, foto, bedrijf
4. **CTA section** - headline, beschrijving, button
5. **Footer** - links, social icons, copyright
**Vereisten:** **Vereisten:**
- Gebruik Plan mode voor elk component eerst
- Alles responsive met Tailwind CSS - Alles responsive met Tailwind CSS
- Test op mobile en desktop - Test op mobile en desktop
**Blog Post (300 woorden):** ### Blog Post (300 woorden)
Schrijf over je ervaring:
- Wat ging goed/fout Schrijf over je OpenCode ervaring:
- Limitations van gratis modellen vs betaalde - Hoe voelde de terminal vs desktop app?
- Hoe voelt AI-assisted coding met OpenCode standalone app - Build vs Plan mode - wanneer gebruik je welke?
- Zou je dit blijven gebruiken? - 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 ## Leerdoelen
Na deze les kan de student: Na deze les kan de student:
- OpenCode installeren en configureren - OpenCode installeren en configureren (desktop en terminal)
- Gratis AI modellen gebruiken (Ollama/Groq) - Groq en/of Ollama als AI provider instellen
- De OpenCode interface effectief gebruiken - 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 - Components bouwen met AI assistance
- Het verschil begrijpen tussen chat-interfaces en geïntegreerde tools - Kritisch beoordelen wanneer AI output te vertrouwen is

30
readme.md
View File

@@ -11,7 +11,7 @@ Een 18-weekse cursus die studenten meeneemt van AI-beginner naar AI-powered deve
| Les | Onderwerp | Deel | Status | | Les | Onderwerp | Deel | Status |
|-----|-----------|------|--------| |-----|-----------|------|--------|
| 01 | [Introductie tot AI en Large Language Models](Samenvattingen/Les01-Samenvatting.md) | 1 | ✅ Uitgewerkt | | 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 | | 03 | [AI Ethics, Privacy & Security + WebStorm](Samenvattingen/Les03-Samenvatting.md) | 1 | 📋 Samenvatting |
| 04 | [Effectief Prompting, Iteratief Werken & Skills](Samenvattingen/Les04-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 | | 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:** **Docent vertelt:**
- Verschil chat-interfaces vs geïntegreerde development tools - Wat is OpenCode? Open-source AI coding assistant met 26.000+ GitHub stars
- OpenCode als standalone desktop applicatie (gratis!) - **Demo Terminal UI:** Laat zien hoe krachtig maar overweldigend de terminal versie is
- Hoe AI code assistants werken - **Demo Desktop App:** "Gelukkig is er ook dit!" - zelfde features, vriendelijkere interface
- Best practices voor code generation prompts - 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 - Wanneer AI wel/niet te vertrouwen
**Studenten doen:** **Studenten doen:**
- **Groepsdiscussie:** Bespreek klassikaal de reflecties uit Les 1 - wat zijn de voor- en nadelen van AI? - **Groepsdiscussie:** Bespreek klassikaal de reflecties uit Les 1 - wat zijn de voor- en nadelen van AI?
- OpenCode installeren en configureren - OpenCode Desktop App installeren
- Gratis model koppelen (Ollama lokaal of Groq API) - Groq API configureren (gratis)
- Interface verkennen: code editor, chat, terminal - **Optioneel:** Ollama installeren voor lokaal model
- Eerste component bouwen met AI hulp - 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:** **Huiswerk:**
- Bouw landing page component library (hero, features, testimonial, CTA, footer) - 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. - **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) [→ Ga naar Les 2](Samenvattingen/Les02-Samenvatting.md)