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

fix: update description

Browse Source
This commit is contained in:
Tim Rijkse
2026-02-07 09:35:10 +01:00
parent 56a0f63ccb
commit 4ad5aee139
2 changed files with 166 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

297
Samenvattingen/Les02-Samenvatting.md
View File

@@ -6,236 +6,203 @@
**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.
Introductie tot OpenCode: een open-source AI coding assistant met 60.000+ GitHub stars. Focus op de terminal versie met OpenCode Zen (gratis, geen API key nodig). Studenten werken met hun bestaande v0 project en leren de volledige development workflow: lokaal draaien, uitbreiden met AI, en deployen via git push.
---
## Tijdsindeling
| Blok | Tijd | Duur |
|------|------|------|
| 1. Welkom & Terugblik | 09:00-09:08 | 8 min |
| 2. Intro OpenCode | 09:08-09:20 | 12 min |
| 3. Setup & Demo | 09:20-09:40 | 20 min |
| 4. Git & Vercel | 09:40-09:50 | 10 min |
| 5. Hands-on (deel 1) | 09:50-10:15 | 25 min |
| ☕ PAUZE | 10:15-10:30 | 15 min |
| 5. Hands-on (deel 2) | 10:30-11:30 | 60 min |
| 6. Afsluiting | 11:30-12:00 | 30 min |
**Spreektijd:** ~50 min | **Hands-on:** ~85 min | **Pauze:** 15 min
---
## 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
- Open-source AI coding assistant (60.000+ GitHub stars)
- **OpenCode Zen:** gratis AI modellen, geen API key nodig
- Terminal-based interface (TUI)
- Kies je eigen AI model: GLM 4.7 (aanbevolen)
---
### 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:
### Keyboard Shortcuts
| Shortcut | Actie |
|----------|-------|
| `Ctrl+K` | Command dialog (belangrijkste!) |
| `Ctrl+N` | Nieuwe sessie |
| `Ctrl+A` | Wissel tussen sessies |
| `Ctrl+O` | Model selectie |
| `Ctrl+K` | Command menu |
| `Tab` | Wissel Build/Plan mode |
| `@` | File fuzzy search |
| `Ctrl+S` | Stuur bericht |
| `Esc` | Terug/annuleer |
| `Ctrl+O` | Model selectie |
**Tip:** `@` is super handig - typ `@` en begin te typen om bestanden te zoeken.
**Tip:** `@` is super handig - typ `@` en begin te typen om bestanden te zoeken en context te geven aan de AI.
---
### Build vs Plan Mode (10 min)
### Build vs Plan Mode
OpenCode heeft twee "agents" - wissel met `Tab`:
OpenCode heeft twee modes - 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 |
| **Plan** | 📋 | Read-only - leest, analyseert, verandert NIETS |
| **Build** | 🔨 | Volledige toegang - schrijft code, maakt bestanden |
**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"
**Workflow:**
1. Start in **Plan mode**: "Analyseer dit project. Waar kan ik testimonials toevoegen?"
2. Wissel naar **Build mode**: "Maak nu de Testimonials component"
---
### AI Modellen Instellen (10 min)
### De Deployment Workflow
#### 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
De volledige workflow die jullie vandaag leren:
**Voordeel:** Snel, gratis, geen lokale setup
**Nadeel:** Code gaat naar cloud
1. **Wijzig code** met OpenCode
2. **Test lokaal** op localhost:3000
3. **Git add, commit, push**
4. **Vercel pakt automatisch op** → Live!
#### 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
Jullie v0 project is al gekoppeld aan GitHub/Vercel, dus elke push wordt automatisch live.
---
### Wanneer AI Wel/Niet Vertrouwen (5 min)
### Nieuw Project naar Vercel (voor huiswerk)
**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!
Voor nieuwe projecten (niet gekoppeld via v0):
1. Vercel Dashboard → Add New Project
2. Import Git Repository
3. Selecteer repo → Deploy
---
## Tools
- OpenCode Desktop App
- Groq API (gratis)
- Ollama (optioneel, lokaal)
- OpenCode Terminal (`npm i -g opencode-ai@latest`)
- OpenCode Zen (gratis AI, GLM 4.7)
- Git
- Vercel
---
## Lesopdracht (2 uur)
## Lesopdracht (85 min hands-on)
### Deel 1: Setup (30 min)
### Doel
Breid je v0 website uit met OpenCode. Leer de volledige workflow: lokaal draaien, uitbreiden met AI, deployen via git push.
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
### Stap 1: Project Lokaal Draaien (15 min)
### 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.
```bash
git clone https://github.com/jouw-username/jouw-project.git
cd jouw-project
npm install
npm run dev
```
**Stap 2 - Build mode:**
```
Bouw nu de navbar component zoals we besproken hebben.
Open http://localhost:3000 - je ziet je website!
### Stap 2: OpenCode Configureren (10 min)
```bash
opencode
```
**Vereisten:**
- Logo placeholder links
- 4 navigatie links
- CTA button rechts
- Mobile hamburger menu (werkend)
- Tailwind CSS styling
Selecteer gratis AI model:
1. Druk `Ctrl+O`
2. Kies "OpenCode Zen"
3. Selecteer "GLM 4.7"
### Documentatie
### Stap 3: Uitbreiden met OpenCode (45 min)
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?
**Fase 1 - Plan mode (📋):**
```
Analyseer dit project. Welke componenten zijn er?
Waar zou ik een testimonials sectie kunnen toevoegen?
```
**Fase 2 - Build mode (🔨):**
Kies minimaal 2 van deze opdrachten:
- **Testimonials sectie** - 3 cards, responsive
- **Pricing sectie** - 3 tiers, highlight middelste
- **FAQ sectie** - accordion style, animaties
- **Verbeter bestaande componenten** - hover effecten, scroll animaties
### Stap 4: Deploy naar Vercel (10 min)
```bash
git add .
git commit -m "Add testimonials section"
git push
```
Open Vercel dashboard, zie "Building...", na ~1 min: live!
### Stap 5: Herhaal!
Doe minimaal nog één wijziging en push opnieuw. **Doel: minimaal 2x deployen.**
---
## Huiswerk (2 uur)
## Huiswerk
### React Opfrissen (optioneel, 30 min)
### Nieuw Project Vanaf Scratch
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!
Maak een **nieuw** project (niet je v0 project uitbreiden):
### Component Library Bouwen (1.5 uur)
**Stap 1: Project aanmaken**
```bash
npx create-next-app@latest mijn-project
cd mijn-project
```
Kies: TypeScript, Tailwind CSS, App Router
Bouw een landing page component library met OpenCode:
**Stap 2: 3 Componenten bouwen met OpenCode**
1. **Navbar** - logo, links, responsive hamburger menu
2. **Hero** - headline, subtitle, CTA button
3. **Keuze:** Features, Footer, of ander component
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
**Stap 3: Push naar GitHub**
```bash
git add .
git commit -m "Initial components"
git push
```
**Vereisten:**
- Gebruik Plan mode voor elk component eerst
- Alles responsive met Tailwind CSS
- Test op mobile en desktop
**Stap 4: Koppel aan Vercel**
1. Ga naar vercel.com/new
2. Import Git Repository
3. Selecteer je nieuwe repo
4. Deploy
### Blog Post (300 woorden)
### Reflectie (300 woorden)
Schrijf over je OpenCode ervaring:
- Hoe voelde de terminal vs desktop app?
Schrijf over je ervaring:
- Hoe voelde werken met OpenCode?
- 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).
- Wat ging goed bij het deployen?
- Wat was de moeilijkste stap?
- Vergelijk met de v0 workflow uit Les 1
---
## 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
1. Uitleggen wat OpenCode is en waarom het efficiënter is dan de v0/ChatGPT workflow
2. OpenCode installeren en configureren met OpenCode Zen (gratis)
3. Werken met Plan mode en Build mode
4. Een bestaand GitHub project clonen en lokaal draaien
5. Wijzigingen maken met OpenCode en deployen via git push
6. De @ file mention gebruiken voor context

54
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 |
|-----|-----------|------|--------|
| 01 | [Introductie tot AI en Large Language Models](Samenvattingen/Les01-Samenvatting.md) | 1 | ✅ Uitgewerkt |
| 02 | [AI Code Assistants en OpenCode](Samenvattingen/Les02-Samenvatting.md) | 1 | 📋 Samenvatting |
| 02 | [AI Code Assistants en OpenCode](Samenvattingen/Les02-Samenvatting.md) | 1 | ✅ Uitgewerkt |
| 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 |
@@ -75,40 +75,54 @@ Kennismaking met AI, LLMs en de basis van AI-assisted development.
**Huiswerk:** Reflectie schrijven (500 woorden), 5 AI use cases bedenken voor eigen projecten, tweede component bouwen via de workflow.
[→ Ga naar Les 1](Samenvattingen/Les01-Samenvatting.md)
**Lesmateriaal:**
- [Slide-Overzicht](Les01-Introductie-AI/Les01-Slide-Overzicht.md)
- [Lesplan](Les01-Introductie-AI/Les01-Lesplan.md)
- [Docenttekst](Les01-Introductie-AI/Les01-Docenttekst.md)
- [Keynote Notes](Les01-Introductie-AI/Les01-Docenttekst-Notes.md)
- [Lesopdracht](Les01-Introductie-AI/Les01-Bijlage-A-Lesopdracht.md)
- [Huiswerkopdracht](Les01-Introductie-AI/Les01-Bijlage-B-Huiswerkopdracht.md)
[→ Ga naar Les 1 Samenvatting](Samenvattingen/Les01-Samenvatting.md)
---
### Les 2: AI Code Assistants en OpenCode
**Tools:** OpenCode (Terminal UI + Desktop App), Groq API, Ollama
**Tools:** OpenCode Terminal, OpenCode Zen (gratis AI), Git, Vercel
**Docent vertelt:**
- 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
- Wat is OpenCode? Open-source AI coding assistant met 60.000+ GitHub stars
- OpenCode Zen: gratis AI modellen, geen API key nodig
- 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
- De deployment workflow: git push → Vercel auto-deploy
- Nieuw project naar Vercel koppelen (voor huiswerk)
**Studenten doen:**
- **Groepsdiscussie:** Bespreek klassikaal de reflecties uit Les 1 - wat zijn de voor- en nadelen van AI?
- 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
- Korte terugblik op Les 1 (v0 workflow)
- OpenCode installeren en OpenCode Zen configureren
- Bestaand v0 project clonen en lokaal draaien
- Met OpenCode nieuwe secties toevoegen
- Deployen via git push → Vercel
**Lesopdracht:** Installeer OpenCode, configureer Groq, oefen keyboard shortcuts, bouw responsive navbar met Plan mode (analyse) → Build mode (implementatie).
**Lesopdracht:** Breid je v0 website uit met OpenCode. Clone je repo, draai lokaal, voeg nieuwe secties toe (testimonials, pricing, FAQ), deploy minimaal 2x naar Vercel.
**Huiswerk:**
- Bouw landing page component library (hero, features, testimonial, CTA, footer)
- 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.
- Maak nieuw project vanaf scratch met `create-next-app`
- Bouw 3 componenten met OpenCode (navbar, hero, + keuze)
- Push naar GitHub, koppel aan Vercel
- Schrijf reflectie (300 woorden)
[→ Ga naar Les 2](Samenvattingen/Les02-Samenvatting.md)
**Lesmateriaal:**
- [Slide-Overzicht](Les02-OpenCode/Les02-Slide-Overzicht.md)
- [Lesplan](Les02-OpenCode/Les02-Lesplan.md)
- [Docenttekst](Les02-OpenCode/Les02-Docenttekst.md)
- [Keynote Notes](Les02-OpenCode/Les02-Docenttekst-Notes.md)
- [Lesopdracht](Les02-OpenCode/Les02-Bijlage-A-Lesopdracht.md)
- [Huiswerkopdracht](Les02-OpenCode/Les02-Bijlage-B-Huiswerkopdracht.md)
[→ Ga naar Les 2 Samenvatting](Samenvattingen/Les02-Samenvatting.md)
---