fix: add lesson 2
This commit is contained in:
Tim Rijkse
285
Les02-OpenCode/Les02-Slide-Overzicht.md
Normal file
285
Les02-OpenCode/Les02-Slide-Overzicht.md
Normal file
@@ -0,0 +1,285 @@
|
||||
# Les 2: OpenCode - AI Code Assistants
|
||||
|
||||
> **Deel 1: AI Foundations** (Les 1-4)
|
||||
> **Totale slides:** 21
|
||||
> **Lesduur:** 3 uur (180 minuten)
|
||||
> **Spreektijd:** ~50 min | **Hands-on:** ~85 min | **Pauze:** 15 min
|
||||
|
||||
---
|
||||
|
||||
## Slide-structuur per blok
|
||||
|
||||
| Blok | Onderwerp | Slides | Tijd |
|
||||
|------|-----------|--------|------|
|
||||
| 1 | Welkom & Terugblik | 1-4 | 8 min |
|
||||
| 2 | Introductie OpenCode | 5-9 | 12 min |
|
||||
| 3 | Setup & Demo | 10-13 | 20 min |
|
||||
| 4 | Git & Vercel Workflow | 14-16 | 12 min |
|
||||
| 5 | Hands-on Opdracht | 17 | 85 min |
|
||||
| - | **☕ PAUZE** | - | 15 min |
|
||||
| 6 | Afsluiting | 18-21 | 30 min |
|
||||
|
||||
---
|
||||
|
||||
## BLOK 1: WELKOM & TERUGBLIK (8 minuten)
|
||||
|
||||
### Slide 1: Welkomstslide
|
||||
**Titel:** Les 2: OpenCode - AI Code Assistants
|
||||
|
||||
---
|
||||
|
||||
### Slide 2: Planning vandaag
|
||||
|
||||
| Tijd | Onderwerp |
|
||||
|------|-----------|
|
||||
| 09:00-09:20 | Terugblik + Intro OpenCode |
|
||||
| 09:20-09:50 | Setup + Demo's |
|
||||
| 09:50-10:15 | Hands-on: Start |
|
||||
| 10:15-10:30 | ☕ **PAUZE** |
|
||||
| 10:30-11:30 | Hands-on: Vervolg |
|
||||
| 11:30-12:00 | Resultaten + Afsluiting |
|
||||
|
||||
---
|
||||
|
||||
### Slide 3: Terugblik Les 1 - Wat hebben we?
|
||||
|
||||
**Jullie hebben:**
|
||||
- ✅ Een werkende website op Vercel
|
||||
- ✅ Code in een GitHub repository
|
||||
- ✅ Ervaring met v0.dev
|
||||
|
||||
**Maar:**
|
||||
- Veel copy/paste naar v0
|
||||
- Geen lokale development
|
||||
- Beperkte controle
|
||||
|
||||
---
|
||||
|
||||
### Slide 4: Vandaag - De volgende stap
|
||||
|
||||
**OpenCode:** AI direct in je development workflow
|
||||
|
||||
- ✅ Werk met je bestaande repository
|
||||
- ✅ Draai lokaal, zie wijzigingen direct
|
||||
- ✅ Push naar GitHub → automatisch live op Vercel
|
||||
|
||||
---
|
||||
|
||||
## BLOK 2: INTRODUCTIE OPENCODE (12 minuten)
|
||||
|
||||
### Slide 5: Wat is OpenCode?
|
||||
|
||||
- 🌟 Open source (60.000+ GitHub stars)
|
||||
- 🔌 Kies je AI: **OpenCode Zen** (gratis!), Groq, Ollama
|
||||
- 🖥️ Terminal of Desktop App
|
||||
- 🔒 Privacy-first
|
||||
|
||||
**Vandaag:** OpenCode Zen met GLM 4.7 (gratis, geen key nodig)
|
||||
|
||||
---
|
||||
|
||||
### Slide 6: Build vs Plan Mode
|
||||
|
||||
| Mode | Icoon | Wat het doet |
|
||||
|------|-------|--------------|
|
||||
| **Plan** | 📋 | Analyseert, verandert NIETS |
|
||||
| **Build** | 🔨 | Schrijft code, maakt bestanden |
|
||||
|
||||
**Wisselen:** `Tab`
|
||||
|
||||
**Workflow:** Plan → begrijpen → Build → bouwen
|
||||
|
||||
---
|
||||
|
||||
### Slide 7: Keyboard Shortcuts
|
||||
|
||||
| Shortcut | Actie |
|
||||
|----------|-------|
|
||||
| `Ctrl+K` | Command menu |
|
||||
| `Tab` | Wissel Build/Plan |
|
||||
| `@` | Zoek bestanden |
|
||||
| `Ctrl+O` | Model selectie |
|
||||
|
||||
---
|
||||
|
||||
### Slide 8: De @ file mention
|
||||
|
||||
```
|
||||
@src/components/Hero.tsx
|
||||
Maak de heading groter en voeg een gradient toe
|
||||
```
|
||||
|
||||
- Typ `@` + begin filename
|
||||
- Fuzzy search door project
|
||||
- AI krijgt exacte context
|
||||
|
||||
---
|
||||
|
||||
### Slide 9: De Deployment Workflow
|
||||
|
||||
```
|
||||
1. Wijzig code met OpenCode
|
||||
2. git add .
|
||||
3. git commit -m "Add testimonials"
|
||||
4. git push
|
||||
5. ✨ Vercel deployt automatisch!
|
||||
```
|
||||
|
||||
Jullie Vercel project is al gekoppeld aan GitHub.
|
||||
|
||||
---
|
||||
|
||||
## BLOK 3: SETUP & DEMO (20 minuten)
|
||||
|
||||
### Slide 10: Installatie
|
||||
|
||||
**Terminal:**
|
||||
```bash
|
||||
npm i -g opencode-ai@latest
|
||||
opencode
|
||||
```
|
||||
|
||||
**AI Model:**
|
||||
- `Ctrl+O` → OpenCode Zen → GLM 4.7
|
||||
- Gratis, geen key nodig!
|
||||
|
||||
---
|
||||
|
||||
### Slide 11: Demo - Project Lokaal Draaien
|
||||
|
||||
**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
|
||||
|
||||
---
|
||||
|
||||
### Slide 12: Demo - Plan Mode
|
||||
|
||||
**Live demo:**
|
||||
1. `opencode` in projectmap
|
||||
2. Check: 📋 = Plan mode
|
||||
3. Vraag: "Analyseer dit project en beschrijf de structuur"
|
||||
|
||||
_(AI leest alleen, verandert niets)_
|
||||
|
||||
---
|
||||
|
||||
### Slide 13: Demo - Build Mode
|
||||
|
||||
**Live demo:**
|
||||
1. `Tab` → wissel naar 🔨
|
||||
2. Vraag: "Voeg een Testimonials sectie toe onder de hero"
|
||||
3. Review de code
|
||||
4. Accept
|
||||
|
||||
---
|
||||
|
||||
## BLOK 4: GIT & VERCEL WORKFLOW (12 minuten)
|
||||
|
||||
### Slide 14: Demo - Git Push
|
||||
|
||||
**Live demo:**
|
||||
```bash
|
||||
git add .
|
||||
git commit -m "Add testimonials section"
|
||||
git push
|
||||
```
|
||||
|
||||
Of gebruik GitHub Desktop!
|
||||
|
||||
---
|
||||
|
||||
### Slide 15: Demo - Vercel Auto-Deploy
|
||||
|
||||
**Live demo:**
|
||||
1. Open Vercel dashboard
|
||||
2. Zie: "Building..."
|
||||
3. Na ~1 minuut: live op je URL!
|
||||
|
||||
**Tip:** Vercel toont ook preview voor branches
|
||||
|
||||
---
|
||||
|
||||
### Slide 16: Nieuw project naar Vercel (voor huiswerk)
|
||||
|
||||
**Stappen voor een nieuw project:**
|
||||
|
||||
1. Maak GitHub repository (github.com → New)
|
||||
2. Push je code naar GitHub
|
||||
3. Vercel: "Add New Project"
|
||||
4. "Import Git Repository"
|
||||
5. Selecteer je repo → Deploy
|
||||
|
||||
**Dit heb je nodig voor het huiswerk!**
|
||||
|
||||
---
|
||||
|
||||
## BLOK 5: HANDS-ON OPDRACHT (83 minuten)
|
||||
|
||||
### Slide 17: Aan de slag!
|
||||
|
||||
**Opdracht:** Breid je v0 website uit met OpenCode
|
||||
|
||||
**Stappen:**
|
||||
1. Clone je repo (of pull latest)
|
||||
2. `npm install` + `npm run dev`
|
||||
3. Voeg toe met OpenCode:
|
||||
- Nieuwe sectie (Testimonials, Pricing, of FAQ)
|
||||
- Verbeteringen aan bestaande componenten
|
||||
4. Push naar GitHub → bekijk live!
|
||||
|
||||
**Doel:** Minimaal 2 keer deployen naar Vercel
|
||||
|
||||
**Tijd:** 85 minuten (09:50-10:15 + 10:30-11:30)
|
||||
|
||||
☕ **Pauze:** 10:15-10:30
|
||||
|
||||
---
|
||||
|
||||
## BLOK 6: AFSLUITING (30 minuten)
|
||||
|
||||
### Slide 18: Resultaten delen
|
||||
|
||||
- Wie wil laten zien?
|
||||
- Wat heb je toegevoegd?
|
||||
- Hoeveel keer gepusht?
|
||||
|
||||
---
|
||||
|
||||
### Slide 19: Samenvatting
|
||||
|
||||
- ✅ OpenCode: open-source AI assistant
|
||||
- ✅ OpenCode Zen: gratis AI modellen
|
||||
- ✅ Plan vs Build mode
|
||||
- ✅ @ file mentions voor context
|
||||
- ✅ Git push → Vercel auto-deploy
|
||||
- ✅ Van v0 copy/paste → lokale development
|
||||
|
||||
---
|
||||
|
||||
### Slide 20: Huiswerk
|
||||
|
||||
**Opdracht: Nieuw project vanaf scratch**
|
||||
|
||||
1. `npx create-next-app@latest`
|
||||
2. Bouw 3 componenten met OpenCode
|
||||
3. Push naar GitHub
|
||||
4. Vercel: Import Project → Deploy
|
||||
5. 300 woorden reflectie
|
||||
|
||||
**Stappen voor Vercel: zie slide 16!**
|
||||
|
||||
---
|
||||
|
||||
### Slide 21: Volgende les
|
||||
|
||||
**Les 3:** OpenCode IDE Integratie
|
||||
|
||||
- VSCode plugin
|
||||
- Inline code generatie
|
||||
- Advanced prompting
|
||||
|
||||
Tot volgende week!
|
||||
Reference in New Issue
Block a user