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) **Deel 1: AI Foundations** (Les 1-4)
## Beschrijving ## 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 ## 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? ### Wat is OpenCode?
- Open-source AI coding assistant (26.000+ GitHub stars) - Open-source AI coding assistant (60.000+ GitHub stars)
- Werkt met meerdere AI providers: Groq (gratis), Ollama (lokaal), OpenAI, Anthropic - **OpenCode Zen:** gratis AI modellen, geen API key nodig
- Twee versies: **Terminal UI** en **Desktop App** - Terminal-based interface (TUI)
- Privacy-first: je code blijft lokaal tenzij je kiest voor cloud - Kies je eigen AI model: GLM 4.7 (aanbevolen)
--- ---
### Demo: Terminal UI (10 min) ### Keyboard Shortcuts
**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 | | Shortcut | Actie |
|----------|-------| |----------|-------|
| `Ctrl+K` | Command dialog (belangrijkste!) | | `Ctrl+K` | Command menu |
| `Ctrl+N` | Nieuwe sessie |
| `Ctrl+A` | Wissel tussen sessies |
| `Ctrl+O` | Model selectie |
| `Tab` | Wissel Build/Plan mode | | `Tab` | Wissel Build/Plan mode |
| `@` | File fuzzy search | | `@` | File fuzzy search |
| `Ctrl+S` | Stuur bericht | | `Ctrl+O` | Model selectie |
| `Esc` | Terug/annuleer |
**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 | | Mode | Icoon | Wat het doet |
|------|-------|--------------| |------|-------|--------------|
| **Build** | 🔨 | Volledige toegang - kan code schrijven, bestanden aanpassen, commands uitvoeren | | **Plan** | 📋 | Read-only - leest, analyseert, verandert NIETS |
| **Plan** | 📋 | Read-only - analyseert code, maakt plannen, maar verandert niets | | **Build** | 🔨 | Volledige toegang - schrijft code, maakt bestanden |
**Workflow tip:** **Workflow:**
1. Start in **Plan mode**: "Analyseer dit project en leg uit wat het doet" 1. Start in **Plan mode**: "Analyseer dit project. Waar kan ik testimonials toevoegen?"
2. Wissel naar **Build mode**: "Voeg nu een navbar toe" 2. Wissel naar **Build mode**: "Maak nu de Testimonials component"
--- ---
### AI Modellen Instellen (10 min) ### De Deployment Workflow
#### Optie 1: Groq (gratis cloud) De volledige workflow die jullie vandaag leren:
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 1. **Wijzig code** met OpenCode
**Nadeel:** Code gaat naar cloud 2. **Test lokaal** op localhost:3000
3. **Git add, commit, push**
4. **Vercel pakt automatisch op** → Live!
#### Optie 2: Ollama (lokaal) Jullie v0 project is al gekoppeld aan GitHub/Vercel, dus elke push wordt automatisch live.
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) ### Nieuw Project naar Vercel (voor huiswerk)
**Wel vertrouwen:** Voor nieuwe projecten (niet gekoppeld via v0):
- Boilerplate code 1. Vercel Dashboard → Add New Project
- Bekende patterns (React components, API routes) 2. Import Git Repository
- Syntax die je vergeten bent 3. Selecteer repo → Deploy
**Niet blind vertrouwen:**
- Security-gevoelige code
- Business logic
- Complexe algoritmes
**Altijd:** Lees en begrijp de code voordat je het accepteert!
--- ---
## Tools ## Tools
- OpenCode Desktop App - OpenCode Terminal (`npm i -g opencode-ai@latest`)
- Groq API (gratis) - OpenCode Zen (gratis AI, GLM 4.7)
- Ollama (optioneel, lokaal) - 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 ### Stap 1: Project Lokaal Draaien (15 min)
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) ```bash
git clone https://github.com/jouw-username/jouw-project.git
1. Open een bestaand project (of maak nieuwe folder) cd jouw-project
2. Oefen keyboard shortcuts: npm install
- `Ctrl+K` → bekijk beschikbare commands npm run dev
- `@` → 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:** Open http://localhost:3000 - je ziet je website!
```
Bouw nu de navbar component zoals we besproken hebben. ### Stap 2: OpenCode Configureren (10 min)
```bash
opencode
``` ```
**Vereisten:** Selecteer gratis AI model:
- Logo placeholder links 1. Druk `Ctrl+O`
- 4 navigatie links 2. Kies "OpenCode Zen"
- CTA button rechts 3. Selecteer "GLM 4.7"
- Mobile hamburger menu (werkend)
- Tailwind CSS styling
### Documentatie ### Stap 3: Uitbreiden met OpenCode (45 min)
Noteer tijdens het bouwen: **Fase 1 - Plan mode (📋):**
- Hoeveel prompts heb je gebruikt? ```
- Welke iteraties waren nodig? Analyseer dit project. Welke componenten zijn er?
- Wat werkte goed/niet? Waar zou ik een testimonials sectie kunnen toevoegen?
- Build vs Plan mode - wanneer gebruikte je welke? ```
**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: Maak een **nieuw** project (niet je v0 project uitbreiden):
- 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) **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 **Stap 3: Push naar GitHub**
2. **Features section** - 3 cards met icons en beschrijving ```bash
3. **Testimonial card** - quote, naam, foto, bedrijf git add .
4. **CTA section** - headline, beschrijving, button git commit -m "Initial components"
5. **Footer** - links, social icons, copyright git push
```
**Vereisten:** **Stap 4: Koppel aan Vercel**
- Gebruik Plan mode voor elk component eerst 1. Ga naar vercel.com/new
- Alles responsive met Tailwind CSS 2. Import Git Repository
- Test op mobile en desktop 3. Selecteer je nieuwe repo
4. Deploy
### Blog Post (300 woorden) ### Reflectie (300 woorden)
Schrijf over je OpenCode ervaring: Schrijf over je ervaring:
- Hoe voelde de terminal vs desktop app? - Hoe voelde werken met OpenCode?
- Build vs Plan mode - wanneer gebruik je welke? - Build vs Plan mode - wanneer gebruik je welke?
- Groq vs Ollama - welke koos je en waarom? - Wat ging goed bij het deployen?
- Keyboard shortcuts - welke zijn het handigst? - Wat was de moeilijkste stap?
- Zou je OpenCode blijven gebruiken? - Vergelijk met de v0 workflow uit Les 1
### 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 (desktop en terminal) 1. Uitleggen wat OpenCode is en waarom het efficiënter is dan de v0/ChatGPT workflow
- Groq en/of Ollama als AI provider instellen 2. OpenCode installeren en configureren met OpenCode Zen (gratis)
- Keyboard shortcuts gebruiken voor efficiënt werken 3. Werken met Plan mode en Build mode
- Build vs Plan mode inzetten voor verschillende taken 4. Een bestaand GitHub project clonen en lokaal draaien
- De `@` file search gebruiken om context te geven 5. Wijzigingen maken met OpenCode en deployen via git push
- Components bouwen met AI assistance 6. De @ file mention gebruiken voor context
- Kritisch beoordelen wanneer AI output te vertrouwen is

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 | | 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](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 | | 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 |
@@ -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. **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 ### 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:** **Docent vertelt:**
- Wat is OpenCode? Open-source AI coding assistant met 26.000+ GitHub stars - Wat is OpenCode? Open-source AI coding assistant met 60.000+ GitHub stars
- **Demo Terminal UI:** Laat zien hoe krachtig maar overweldigend de terminal versie is - OpenCode Zen: gratis AI modellen, geen API key nodig
- **Demo Desktop App:** "Gelukkig is er ook dit!" - zelfde features, vriendelijkere interface
- Keyboard shortcuts: `Ctrl+K` (commands), `@` (file search), `Tab` (Build/Plan mode) - Keyboard shortcuts: `Ctrl+K` (commands), `@` (file search), `Tab` (Build/Plan mode)
- Build vs Plan mode: wanneer welke gebruiken - Build vs Plan mode: wanneer welke gebruiken
- AI model providers: Groq (gratis cloud) vs Ollama (lokaal, privacy) - De deployment workflow: git push → Vercel auto-deploy
- Wanneer AI wel/niet te vertrouwen - Nieuw project naar Vercel koppelen (voor huiswerk)
**Studenten doen:** **Studenten doen:**
- **Groepsdiscussie:** Bespreek klassikaal de reflecties uit Les 1 - wat zijn de voor- en nadelen van AI? - Korte terugblik op Les 1 (v0 workflow)
- OpenCode Desktop App installeren - OpenCode installeren en OpenCode Zen configureren
- Groq API configureren (gratis) - Bestaand v0 project clonen en lokaal draaien
- **Optioneel:** Ollama installeren voor lokaal model - Met OpenCode nieuwe secties toevoegen
- Keyboard shortcuts oefenen - Deployen via git push → Vercel
- Plan mode gebruiken voor analyse, Build mode voor code schrijven
- Responsive navbar bouwen met AI assistance
**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:** **Huiswerk:**
- Bouw landing page component library (hero, features, testimonial, CTA, footer) - Maak nieuw project vanaf scratch met `create-next-app`
- Schrijf blog post over OpenCode ervaring (300 woorden): Terminal vs Desktop, Build vs Plan mode, Groq vs Ollama - Bouw 3 componenten met OpenCode (navbar, hero, + keuze)
- **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. - 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)
--- ---