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-07 10:31:25 +01:00
parent 3584a9ae75
commit 970efbc8bc
7 changed files with 193 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
Les02-OpenCode/Les02-Bijlage-A-Lesopdracht.md
View File

@@ -4,9 +4,9 @@
## Doel
Breid je v0 website uit met OpenCode. Je leert:
- Project lokaal draaien
- Werken met Plan en Build mode
Maak een nieuwe pagina in je v0 project met de OpenCode Desktop App. Je leert:
- Werken met de OpenCode Desktop App
- Plan mode en Build mode gebruiken
- Wijzigingen deployen via git push
---
@@ -50,19 +50,25 @@ Open http://localhost:3000 - je ziet je website!
---
## Stap 2: OpenCode Configureren (10 min)
## Stap 2: OpenCode Desktop App (10 min)
### Start OpenCode
```bash
opencode
```
### Open de Desktop App
1. Start OpenCode Desktop App
2. Open je projectfolder (File → Open Folder)
3. Selecteer je v0 project
### Selecteer gratis AI model
1. Druk `Ctrl+O`
2. Kies "OpenCode Zen"
3. Selecteer "GLM 4.7"
**Checkpoint:** ✅ OpenCode draait met Zen model
### Start je project (in de ingebouwde terminal)
```bash
npm install
npm run dev
```
**Checkpoint:** ✅ Desktop App draait + localhost:3000 werkt
---

66
Les02-OpenCode/Les02-Docenttekst-Notes.md
View File

@@ -44,6 +44,7 @@
### Slide 5: Wat is OpenCode?
- Open source, 60.000+ stars
- Terminal én **Desktop App** (met ingebouwde terminal!)
- Kies je AI: **OpenCode Zen** (gratis!)
- Geen API key nodig
@@ -82,35 +83,38 @@
---
### Slide 10: Installatie
- **DEMO + studenten doen mee:**
```bash
npm i -g opencode-ai@latest
opencode
```
### Slide 10: Demo - Terminal Versie
- **LIVE DEMO:** `npm i -g opencode-ai@latest` + `opencode`
- Toon shortcuts: `Ctrl+K`, `Tab`, `@`, `Ctrl+O`
- Toon Plan/Build mode
- "Krachtig! Maar we gaan iets gebruiksvriendelijkers gebruiken..."
---
### Slide 11: Desktop App
- opencode.ai/download
- Zelfde features, vriendelijker
- **Ingebouwde terminal!**
- Studenten downloaden
---
### Slide 12: Demo - Desktop App Setup
- **DEMO in Desktop App:**
- Open project folder (v0 repo)
- `Ctrl+O` → OpenCode Zen → GLM 4.7
- In terminal: `npm install` + `npm run dev`
---
### Slide 11: Demo - Lokaal draaien
- **DEMO:**
```bash
git clone [url]
npm install
npm run dev
```
- Open localhost:3000
---
### Slide 12: Demo - Plan Mode
- **DEMO:**
### Slide 13: Demo - Plan Mode
- **DEMO in Desktop App:**
- "Analyseer dit project. Hoe werkt de routing?"
- AI leest alleen, verandert niets
---
### Slide 13: Demo - Build Mode
### Slide 14: Demo - Build Mode
- Tab → 🔨
- **DEMO:** "Maak nieuwe pagina /about met hero en link op homepage"
- Toon resultaat in browser
@@ -121,7 +125,7 @@ npm run dev
---
### Slide 14: Demo - Git Push
### Slide 15: Demo - Git Push
- **DEMO:**
```bash
git add .
@@ -132,7 +136,7 @@ git push
---
### Slide 15: Demo - Vercel Auto-Deploy
### Slide 16: Demo - Vercel Auto-Deploy
- **DEMO:**
- Open Vercel dashboard
- Toon "Building..." status
@@ -140,7 +144,7 @@ git push
---
### Slide 16: Nieuw project naar Vercel
### Slide 17: Nieuw project naar Vercel
- **Voor huiswerk!** v0 was automatisch gekoppeld
- **DEMO:** Vercel → Add New Project → Import Git Repository
- Selecteer repo → Deploy
@@ -151,7 +155,7 @@ git push
---
### Slide 17: Opdracht (09:50-09:55)
### Slide 18: Opdracht (09:50-09:55)
- **Maak nieuwe pagina in je v0 project:**
1. Clone/pull repo
2. npm install + npm run dev
@@ -192,31 +196,31 @@ Help bij opstartproblemen:
---
### Slide 18: Resultaten
### Slide 19: Resultaten
- 2-3 studenten tonen werk
- "Wat toegevoegd? Hoeveel keer gepusht?"
---
### Slide 19: Samenvatting
- ✅ OpenCode + Zen (gratis)
### Slide 20: Samenvatting
- ✅ OpenCode Terminal + Desktop App
- ✅ OpenCode Zen (gratis)
- ✅ Plan vs Build mode
- ✅ @ file mentions
- ✅ Git push → auto deploy
- ✅ Van copy/paste → lokale dev
---
### Slide 20: Huiswerk
### Slide 21: Huiswerk
- **Nieuw project vanaf scratch**
- create-next-app → 3 componenten
- Push naar GitHub
- **Vercel: Import Project** (zie slide 16!)
- **Vercel: Import Project** (zie slide 17!)
- 300 woorden reflectie
---
### Slide 21: Volgende les
### Slide 22: Volgende les
- OpenCode IDE Integratie
- VSCode plugin
- "Tot dan!"

100
Les02-OpenCode/Les02-Docenttekst.md
View File

@@ -53,6 +53,8 @@ _[Wijs naar de problemen]_
"OpenCode - open source met meer dan 60.000 GitHub stars. Het is een AI coding assistant die direct in je project werkt."
"Er is een terminal versie én een Desktop App. Die Desktop App is super handig - vriendelijke interface en een ingebouwde terminal. Die gaan we vandaag gebruiken."
"Het mooie: je kiest je eigen AI. Vandaag gebruiken we OpenCode Zen - dat is gratis en je hebt geen API key nodig."
---
@@ -101,50 +103,68 @@ _[Wijs naar de problemen]_
## BLOK 3: SETUP & DEMO (20 minuten)
### Slide 10: Installatie
### Slide 10: Demo - Terminal Versie
**[09:20 - 09:25]**
_[Open terminal]_
_[Open terminal - LIVE DEMO]_
"Installatie: npm i -g opencode-ai@latest. Dan opencode om te starten."
"Laat me eerst de terminal versie laten zien. Installatie: npm i -g opencode-ai@latest, dan opencode."
_[Demonstreer installatie]_
_[Start opencode in terminal]_
"Voor het AI model: Ctrl+O, kies OpenCode Zen, dan GLM 4.7. Gratis, geen key nodig."
"Dit is de TUI - Terminal User Interface. Kijk naar de shortcuts:"
_[Laat studenten ook installeren - help waar nodig]_
- "Ctrl+K voor het command menu"
- "Tab om te wisselen tussen Plan en Build mode - zie hier het klembord en de hamer"
- "@ om bestanden te zoeken - super handig voor context"
- "Ctrl+O om je AI model te kiezen"
"Krachtig! Maar het kan overweldigend zijn voor beginners. Daarom..."
---
### Slide 11: Demo - Project Lokaal Draaien
### Slide 11: Desktop App
**[09:25 - 09:30]**
**[09:25 - 09:28]**
_[LIVE DEMO]_
"...is er ook de Desktop App!"
"Ik ga nu een v0 project clonen en lokaal draaien."
_[Open Desktop App]_
```bash
git clone [demo-repo-url]
cd project-naam
npm install
npm run dev
```
"Zelfde features, maar veel vriendelijker. En kijk - een ingebouwde terminal! Dit gaan we vandaag gebruiken."
"Open localhost:3000 - daar is de website, lokaal op mijn machine."
_[Toon de website in browser]_
_[Laat studenten Desktop App downloaden van opencode.ai/download]_
---
### Slide 12: Demo - Plan Mode
### Slide 12: Demo - Desktop App Setup
**[09:30 - 09:35]**
**[09:28 - 09:32]**
_[LIVE DEMO]_
_[LIVE DEMO in Desktop App]_
"Nu start ik OpenCode in dit project. Ik zit in Plan mode - zie het klembord."
"Ik open de Desktop App en selecteer mijn projectfolder - dat is mijn v0 repo."
_[Open project folder]_
"Nu het AI model: Ctrl+O, kies OpenCode Zen, dan GLM 4.7. Gratis, geen key nodig."
_[Laat studenten ook configureren - help waar nodig]_
"In de ingebouwde terminal run ik npm install en npm run dev."
_[Toon localhost:3000 in browser]_
---
### Slide 13: Demo - Plan Mode
**[09:32 - 09:36]**
_[LIVE DEMO in Desktop App]_
"Ik zit in Plan mode - zie het klembord icoon."
"Ik vraag: 'Analyseer dit project. Hoe werkt de routing? Hoe maak ik een nieuwe pagina?'"
@@ -154,11 +174,11 @@ _[Wacht op response]_
---
### Slide 13: Demo - Build Mode
### Slide 14: Demo - Build Mode
**[09:35 - 09:40]**
**[09:36 - 09:40]**
_[LIVE DEMO]_
_[LIVE DEMO in Desktop App]_
"Tab om naar Build mode te gaan. Nu vraag ik:"
@@ -172,17 +192,17 @@ _[Wacht op generatie]_
## BLOK 4: GIT & VERCEL WORKFLOW (10 minuten)
### Slide 14: Demo - Git Push
### Slide 15: Demo - Git Push
**[09:40 - 09:45]**
**[09:40 - 09:43]**
_[LIVE DEMO]_
_[LIVE DEMO in Desktop App terminal]_
"Nu de belangrijke stap: deployen. Ik gebruik gewoon git."
```bash
git add .
git commit -m "Add testimonials section"
git commit -m "Add about page"
git push
```
@@ -190,9 +210,9 @@ git push
---
### Slide 15: Demo - Vercel Auto-Deploy
### Slide 16: Demo - Vercel Auto-Deploy
**[09:44 - 09:48]**
**[09:43 - 09:47]**
_[LIVE DEMO]_
@@ -208,9 +228,9 @@ _[Wacht/toon resultaat]_
---
### Slide 16: Nieuw project naar Vercel
### Slide 17: Nieuw project naar Vercel
**[09:48 - 09:50]**
**[09:47 - 09:50]**
"Dit werkt omdat jullie v0 project al aan Vercel gekoppeld is. Maar voor het huiswerk maken jullie een **nieuw** project. Dan moet je Vercel handmatig koppelen."
@@ -224,7 +244,7 @@ _[Toon Vercel dashboard]_
## BLOK 5: HANDS-ON OPDRACHT (85 minuten + 15 min pauze)
### Slide 17: Aan de slag!
### Slide 18: Aan de slag!
**[09:50 - 09:55]** _(5 minuten uitleg)_
@@ -280,7 +300,7 @@ _[Loop actief rond]_
## BLOK 6: AFSLUITING (30 minuten)
### Slide 18: Resultaten delen
### Slide 19: Resultaten delen
**[11:30 - 11:40]**
@@ -292,13 +312,13 @@ _[2-3 studenten tonen hun werk]_
---
### Slide 19: Samenvatting
### Slide 20: Samenvatting
**[11:40 - 11:50]**
"Wat hebben we gedaan vandaag?"
- OpenCode: open-source AI assistant
- OpenCode: terminal versie én Desktop App
- OpenCode Zen: gratis AI modellen
- Plan vs Build mode
- @ file mentions voor context
@@ -310,7 +330,7 @@ _[Ruimte voor vragen]_
---
### Slide 20: Huiswerk
### Slide 21: Huiswerk
**[11:50 - 11:55]**
@@ -322,7 +342,7 @@ _[Ruimte voor vragen]_
---
### Slide 21: Afsluiting
### Slide 22: Afsluiting
**[11:55 - 12:00]**

31
Les02-OpenCode/Les02-Lesplan.md
View File

@@ -20,10 +20,10 @@
Na deze les kan de student:
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)
1. Uitleggen wat OpenCode is en het verschil tussen Terminal en Desktop App
2. De OpenCode Desktop App installeren en configureren met OpenCode Zen (gratis)
3. Werken met Plan mode en Build mode
4. Een bestaand GitHub project clonen en lokaal draaien
4. Een bestaand GitHub project openen en lokaal draaien (in de ingebouwde terminal)
5. Wijzigingen maken met OpenCode en deployen via git push
6. De @ file mention gebruiken voor context
@@ -74,10 +74,11 @@ Na deze les kan de student:
| Tijd | Activiteit | Slides |
|------|------------|--------|
| 09:20-09:25 | OpenCode installatie + Zen configureren | 10 |
| 09:25-09:30 | **DEMO:** Repo clonen, `npm install`, `npm run dev` | 11 |
| 09:30-09:35 | **DEMO:** Plan mode - project analyseren | 12 |
| 09:35-09:40 | **DEMO:** Build mode - component toevoegen | 13 |
| 09:20-09:25 | **DEMO:** Terminal versie (shortcuts, modes) | 10 |
| 09:25-09:28 | Introductie Desktop App | 11 |
| 09:28-09:32 | **DEMO:** Desktop App setup + project laden | 12 |
| 09:32-09:36 | **DEMO:** Plan mode - project analyseren | 13 |
| 09:36-09:40 | **DEMO:** Build mode - nieuwe pagina maken | 14 |
---
@@ -85,9 +86,9 @@ Na deze les kan de student:
| Tijd | Activiteit | Slides |
|------|------------|--------|
| 09:40-09:43 | **DEMO:** Git add, commit, push | 14 |
| 09:43-09:47 | **DEMO:** Vercel auto-deploy tonen | 15 |
| 09:47-09:50 | Nieuw project naar Vercel (voor huiswerk) | 16 |
| 09:40-09:43 | **DEMO:** Git add, commit, push | 15 |
| 09:43-09:47 | **DEMO:** Vercel auto-deploy tonen | 16 |
| 09:47-09:50 | Nieuw project naar Vercel (voor huiswerk) | 17 |
**Kernboodschap:** "Push naar GitHub = automatisch live op Vercel"
@@ -97,7 +98,7 @@ Na deze les kan de student:
| Tijd | Activiteit | Slides |
|------|------------|--------|
| 09:50-09:55 | Opdracht uitleggen | 17 |
| 09:50-09:55 | Opdracht uitleggen | 18 |
| 09:55-10:15 | Studenten werken (20 min) | - |
| 10:15-10:30 | ☕ **PAUZE** | - |
| 10:30-11:30 | Studenten werken (60 min) | - |
@@ -132,10 +133,10 @@ Na deze les kan de student:
| Tijd | Activiteit | Slides |
|------|------------|--------|
| 11:30-11:40 | Resultaten delen (2-3 studenten) | 18 |
| 11:40-11:50 | Samenvatting + Q&A | 19 |
| 11:50-11:55 | Huiswerk uitleggen | 20 |
| 11:55-12:00 | Afsluiting | 21 |
| 11:30-11:40 | Resultaten delen (2-3 studenten) | 19 |
| 11:40-11:50 | Samenvatting + Q&A | 20 |
| 11:50-11:55 | Huiswerk uitleggen | 21 |
| 11:55-12:00 | Afsluiting | 22 |
---

87
Les02-OpenCode/Les02-Slide-Overzicht.md
View File

@@ -1,7 +1,7 @@
# Les 2: OpenCode - AI Code Assistants
> **Deel 1: AI Foundations** (Les 1-4)
> **Totale slides:** 21
> **Totale slides:** 22
> **Lesduur:** 3 uur (180 minuten)
> **Spreektijd:** ~50 min | **Hands-on:** ~85 min | **Pauze:** 15 min
@@ -13,11 +13,11 @@
|------|-----------|--------|------|
| 1 | Welkom & Terugblik | 1-4 | 10 min |
| 2 | Introductie OpenCode | 5-9 | 10 min |
| 3 | Setup & Demo | 10-13 | 20 min |
| 4 | Git & Vercel Workflow | 14-16 | 10 min |
| 5 | Hands-on Opdracht | 17 | 85 min |
| 3 | Setup & Demo | 10-14 | 20 min |
| 4 | Git & Vercel Workflow | 15-17 | 10 min |
| 5 | Hands-on Opdracht | 18 | 85 min |
| - | **☕ PAUZE** | - | 15 min |
| 6 | Afsluiting | 18-21 | 30 min |
| 6 | Afsluiting | 19-22 | 30 min |
---
@@ -71,10 +71,10 @@
- 🌟 Open source (60.000+ GitHub stars)
- 🔌 Kies je AI: **OpenCode Zen** (gratis!), Groq, Ollama
- 🖥️ Terminal of Desktop App
- 🖥️ Terminal én **Desktop App** (met ingebouwde terminal!)
- 🔒 Privacy-first
**Vandaag:** OpenCode Zen met GLM 4.7 (gratis, geen key nodig)
**Vandaag:** Desktop App + OpenCode Zen (gratis, geen key nodig)
---
@@ -131,60 +131,75 @@ Jullie Vercel project is al gekoppeld aan GitHub.
## BLOK 3: SETUP & DEMO (20 minuten)
### Slide 10: Installatie
### Slide 10: Demo - Terminal Versie
**Terminal:**
**Live demo:**
```bash
npm i -g opencode-ai@latest
opencode
```
**AI Model:**
- `Ctrl+O` → OpenCode Zen → GLM 4.7
- Gratis, geen key nodig!
**Laat zien:**
- TUI (Terminal User Interface)
- Shortcuts: `Ctrl+K`, `Tab`, `@`, `Ctrl+O`
- Plan vs Build mode
→ Krachtig! Maar we gaan iets gebruiksvriendelijkers gebruiken...
---
### Slide 11: Demo - Project Lokaal Draaien
### Slide 11: Desktop App
**Live demo:**
1. Clone repo: `git clone <github-url>`
2. Open folder: `cd project-naam`
3. Install: `npm install`
4. Start: `npm run dev`
5. Open http://localhost:3000
**Download:** opencode.ai/download
**Voordelen:**
- Zelfde features als terminal
- Vriendelijkere interface
- **Ingebouwde terminal!**
**Dit gaan we vandaag gebruiken.**
---
### Slide 12: Demo - Plan Mode
### Slide 12: Demo - Desktop App Setup
**Live demo:**
1. `opencode` in projectmap
2. Check: 📋 = Plan mode
3. Vraag: "Analyseer dit project en beschrijf de structuur"
1. Open Desktop App
2. Open project folder (je v0 repo)
3. `Ctrl+O` → OpenCode Zen → GLM 4.7
4. In terminal: `npm install` + `npm run dev`
---
### Slide 13: Demo - Plan Mode
**Live demo in Desktop App:**
1. Check: 📋 = Plan mode
2. Vraag: "Analyseer dit project. Hoe werkt de routing?"
_(AI leest alleen, verandert niets)_
---
### Slide 13: Demo - Build Mode
### Slide 14: Demo - Build Mode
**Live demo:**
**Live demo in Desktop App:**
1. `Tab` → wissel naar 🔨
2. Vraag: "Voeg een Testimonials sectie toe onder de hero"
2. Vraag: "Maak een nieuwe pagina /about met hero en link op homepage"
3. Review de code
4. Accept
5. Refresh browser → zie resultaat!
---
## BLOK 4: GIT & VERCEL WORKFLOW (10 minuten)
### Slide 14: Demo - Git Push
### Slide 15: Demo - Git Push
**Live demo:**
**Live demo (in Desktop App terminal):**
```bash
git add .
git commit -m "Add testimonials section"
git commit -m "Add about page"
git push
```
@@ -192,7 +207,7 @@ Of gebruik GitHub Desktop!
---
### Slide 15: Demo - Vercel Auto-Deploy
### Slide 16: Demo - Vercel Auto-Deploy
**Live demo:**
1. Open Vercel dashboard
@@ -203,7 +218,7 @@ Of gebruik GitHub Desktop!
---
### Slide 16: Nieuw project naar Vercel (voor huiswerk)
### Slide 17: Nieuw project naar Vercel (voor huiswerk)
**Stappen voor een nieuw project:**
@@ -219,7 +234,7 @@ Of gebruik GitHub Desktop!
## BLOK 5: HANDS-ON OPDRACHT (85 minuten)
### Slide 17: Aan de slag!
### Slide 18: Aan de slag!
**Opdracht:** Maak een nieuwe pagina in je v0 project
@@ -242,7 +257,7 @@ Of gebruik GitHub Desktop!
## BLOK 6: AFSLUITING (30 minuten)
### Slide 18: Resultaten delen
### Slide 19: Resultaten delen
- Wie wil laten zien?
- Wat heb je toegevoegd?
@@ -250,7 +265,7 @@ Of gebruik GitHub Desktop!
---
### Slide 19: Samenvatting
### Slide 20: Samenvatting
- ✅ OpenCode: open-source AI assistant
- ✅ OpenCode Zen: gratis AI modellen
@@ -261,7 +276,7 @@ Of gebruik GitHub Desktop!
---
### Slide 20: Huiswerk
### Slide 21: Huiswerk
**Opdracht: Nieuw project vanaf scratch**
@@ -275,7 +290,7 @@ Of gebruik GitHub Desktop!
---
### Slide 21: Volgende les
### Slide 22: Volgende les
**Les 3:** OpenCode IDE Integratie

26
Samenvattingen/Les02-Samenvatting.md
View File

@@ -6,7 +6,7 @@
**Deel 1: AI Foundations** (Les 1-4)
## Beschrijving
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.
Introductie tot OpenCode: een open-source AI coding assistant met 60.000+ GitHub stars. Na een korte demo van de terminal versie werken studenten met de **Desktop App** (met ingebouwde terminal). Met OpenCode Zen (gratis, geen API key nodig) leren ze de volledige development workflow: lokaal draaien, uitbreiden met AI, en deployen via git push.
---
@@ -32,8 +32,8 @@ Introductie tot OpenCode: een open-source AI coding assistant met 60.000+ GitHub
### Wat is OpenCode?
- Open-source AI coding assistant (60.000+ GitHub stars)
- **Terminal versie** (krachtig) én **Desktop App** (gebruiksvriendelijk + ingebouwde terminal)
- **OpenCode Zen:** gratis AI modellen, geen API key nodig
- Terminal-based interface (TUI)
- Kies je eigen AI model: GLM 4.7 (aanbevolen)
---
@@ -89,7 +89,7 @@ Voor nieuwe projecten (niet gekoppeld via v0):
---
## Tools
- OpenCode Terminal (`npm i -g opencode-ai@latest`)
- OpenCode Desktop App (opencode.ai/download)
- OpenCode Zen (gratis AI, GLM 4.7)
- Git
- Vercel
@@ -112,16 +112,12 @@ npm run dev
Open http://localhost:3000 - je ziet je website!
### Stap 2: OpenCode Configureren (10 min)
### Stap 2: OpenCode Desktop App (10 min)
```bash
opencode
```
Selecteer gratis AI model:
1. Druk `Ctrl+O`
2. Kies "OpenCode Zen"
3. Selecteer "GLM 4.7"
1. Open Desktop App
2. Open je projectfolder
3. `Ctrl+O` → OpenCode Zen → GLM 4.7
4. In ingebouwde terminal: `npm install` + `npm run dev`
### Stap 3: Nieuwe Pagina Maken (45 min)
@@ -199,9 +195,9 @@ Schrijf over je ervaring:
## Leerdoelen
Na deze les kan de student:
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)
1. Uitleggen wat OpenCode is en het verschil tussen Terminal en Desktop App
2. De OpenCode Desktop App installeren en configureren met OpenCode Zen (gratis)
3. Werken met Plan mode en Build mode
4. Een bestaand GitHub project clonen en lokaal draaien
4. Een bestaand GitHub project openen en lokaal draaien (in de ingebouwde terminal)
5. Wijzigingen maken met OpenCode en deployen via git push
6. De @ file mention gebruiken voor context

10
readme.md
View File

@@ -35,7 +35,7 @@ Een 18-weekse cursus die studenten meeneemt van AI-beginner naar AI-powered deve
| Deel | Lessen | Tools | Kosten |
|------|--------|-------|--------|
| Deel 1: AI Foundations | 1-4 | ChatGPT, v0.dev, OpenCode, WebStorm | Gratis (WebStorm via school) |
| Deel 1: AI Foundations | 1-4 | ChatGPT, v0.dev, OpenCode Desktop App, WebStorm | Gratis (WebStorm via school) |
| Deel 2: Technical Foundations | 5-9 | TypeScript, Next.js, React Query, Supabase | Gratis |
| Deel 3: Integration & AI Tooling | 10-12 | Next.js, Supabase, Cursor | Free tier beschikbaar |
| Deel 4: Advanced AI Features | 13-18 | Cursor, Custom GPTs, Claude Projects, Vercel AI SDK, Tool Calling, Agents | Free tier beschikbaar |
@@ -89,20 +89,20 @@ Kennismaking met AI, LLMs en de basis van AI-assisted development.
### Les 2: AI Code Assistants en OpenCode
**Tools:** OpenCode Terminal, OpenCode Zen (gratis AI), Git, Vercel
**Tools:** OpenCode Desktop App, OpenCode Zen (gratis AI), Git, Vercel
**Docent vertelt:**
- Wat is OpenCode? Open-source AI coding assistant met 60.000+ GitHub stars
- Terminal versie (korte demo) vs Desktop App (wat we gebruiken)
- 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
- De deployment workflow: git push → Vercel auto-deploy
- Nieuw project naar Vercel koppelen (voor huiswerk)
**Studenten doen:**
- Korte terugblik op Les 1 (v0 workflow)
- OpenCode installeren en OpenCode Zen configureren
- Bestaand v0 project clonen en lokaal draaien
- OpenCode Desktop App installeren en OpenCode Zen configureren
- Bestaand v0 project openen en lokaal draaien (in ingebouwde terminal)
- Met OpenCode een nieuwe pagina maken + link op homepage
- Deployen via git push → Vercel