fix: les 2
This commit is contained in:
Tim Rijkse
@@ -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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user