431 lines
17 KiB
Markdown
431 lines
17 KiB
Markdown
# Les 2: OpenCode — AI Code Assistants (Klas B)
|
||
|
||
> **Deel 1: AI Foundations** (Les 1–4)
|
||
> **Totale slides:** 23
|
||
> **Lesvorm:** online — Tim deelt scherm met slides + code, leest letterlijk voor uit docenttekst
|
||
|
||
---
|
||
|
||
## Blok-structuur
|
||
|
||
| Blok | Onderwerp | Slides |
|
||
|------|-----------|--------|
|
||
| 1 | Welkom & Terugblik | 1–4 |
|
||
| 2 | AI-CLI landschap (NIEUW) | 5–7 |
|
||
| 3 | Introductie OpenCode | 8–14 |
|
||
| 4 | LIVE DEMO — scroll-landingpage | 15–18 |
|
||
| 5 | Git & Vercel Workflow | 19–20 |
|
||
| 6 | Hands-on Opdracht | 21 |
|
||
| – | ☕ PAUZE | – |
|
||
| 7 | Afsluiting | 22–23 |
|
||
|
||
---
|
||
|
||
## BLOK 1: WELKOM & TERUGBLIK
|
||
|
||
### Slide 1: Welkomstslide
|
||
**Titel:** Les 2 — OpenCode: AI Code Assistants
|
||
**Subtitle:** Lokaal werken met een AI-pair
|
||
|
||
---
|
||
|
||
### Slide 2: Planning vandaag
|
||
|
||
| Blok | Onderwerp |
|
||
|------|-----------|
|
||
| 1 | Welkom + Nieuwe manier van werken |
|
||
| 2 | AI-CLI landschap: Claude Code, Codex, OpenCode |
|
||
| 3 | Introductie OpenCode |
|
||
| 4 | **LIVE DEMO** — scroll-storytelling landing page |
|
||
| 5 | Git push → Vercel auto-deploy |
|
||
| – | Pauze ☕ |
|
||
| 6 | Hands-on |
|
||
| 7 | Resultaten + afsluiting |
|
||
|
||
---
|
||
|
||
### Slide 3: Een nieuwe manier van werken
|
||
|
||
**Wat we niet meer doen:**
|
||
- Browser-gebaseerde tools zoals v0.dev (waar je copy/paste tussen browser en editor)
|
||
- Eén AI-chat-venster zonder zicht op je echte project
|
||
|
||
**Wat we vandaag doen:**
|
||
- Lokaal werken in een echt project
|
||
- AI direct in je editor — geen copy/paste
|
||
- Lokale dev-server zien wijzigingen meteen
|
||
- Volledige controle over wat de AI doet (Plan → Build → Accept per file)
|
||
|
||
**Browser AI tools** zoals v0.dev blijven nuttig voor snelle UI-experimenten. Maar voor echt bouwen: lokaal + AI-pair.
|
||
|
||
---
|
||
|
||
### Slide 4: Vandaag — De volgende stap
|
||
|
||
**Drie dingen vandaag:**
|
||
|
||
1. We kijken naar het **AI-coding-CLI landschap**: Claude Code, Codex, OpenCode
|
||
2. We bouwen LIVE een **scroll-storytelling landing page** vanuit een starter-zip — met Lenis + GSAP en vol micro-animaties
|
||
3. We zetten alles online: git init → nieuwe GitHub repo → nieuw Vercel project → live op het internet
|
||
|
||
Aan het einde heb je iets dat er écht uitziet, gepubliceerd via je eigen repo en eigen Vercel project. En je weet welke AI-coding tools er zijn en wanneer je welke kiest.
|
||
|
||
---
|
||
|
||
## BLOK 2: AI-CLI LANDSCHAP (NIEUW)
|
||
|
||
### Slide 5: Drie spelers op de markt
|
||
|
||
**Het AI-coding-CLI landschap medio 2026:**
|
||
|
||
| Tool | Maker | Karakter |
|
||
|------|-------|----------|
|
||
| **Claude Code** | Anthropic | Opinionated, safety-first, beste raw capability |
|
||
| **Codex** | OpenAI | Autonoom, token-efficiënt, minder safety-rails |
|
||
| **OpenCode** | Open-source community | Open, BYO-model, mooiste TUI, prachtige DX |
|
||
|
||
**Wat ze gemeen hebben:** allemaal terminal-based agents die in je repo werken — geen IDE nodig.
|
||
|
||
**Wat ze onderscheidt:** filosofie, prijsmodel, model-keuze, autonomie.
|
||
|
||
> Bron: NeuralNine, "Claude Code VS Codex VS OpenCode" (2026)
|
||
|
||
---
|
||
|
||
### Slide 6: Vergelijking op 7 assen
|
||
|
||
| As | Claude Code | Codex | OpenCode |
|
||
|----|-------------|-------|----------|
|
||
| Safety / approval flow | ⭐ vraagt altijd toestemming | autonoom, weinig checks | configureerbaar |
|
||
| TUI / aesthetics | functioneel | functioneel | ⭐ mooiste |
|
||
| Model-flexibiliteit | alleen Anthropic | alleen OpenAI | ⭐ elke provider + lokaal |
|
||
| Undo / rewind / voice | ⭐ alle drie aanwezig | geen undo | rewind aanwezig |
|
||
| Token-efficiency | hoog verbruik | ⭐ zuinigste | hangt af van model |
|
||
| Usage-transparantie | ⭐ zichtbaar per call | minder transparant | hangt af van model |
|
||
| Open-source | nee | nee | ⭐ ja, MIT |
|
||
|
||
**Praktijk-benchmark uit de video:** alle drie bouwen een werkende Sudoku-game. Claude Code en Codex en OpenCode-met-GPT zijn vergelijkbaar. OpenCode op gratis open-source modellen (Kimi K2.5, DeepSeek) is duidelijk minder, maar wél gratis.
|
||
|
||
---
|
||
|
||
### Slide 7: Waarom OpenCode in deze cursus?
|
||
|
||
**Vier redenen:**
|
||
|
||
1. **Gratis te beginnen** — Kimi K2.5 Free of lokale modellen. Geen creditcard.
|
||
2. **Open-source** — je leert hoe deze tools van binnen werken.
|
||
3. **BYO-model** — later switchen naar Claude of GPT = 30 seconden werk.
|
||
4. **Beste TUI** — een interface die niet in de weg zit.
|
||
|
||
**Eindconclusie uit de video:** *"OpenCode is filosofisch mijn favoriet. Voor zwaar engineering-werk pak ik Claude Code met Opus."*
|
||
|
||
**Vertaling:** start vandaag met OpenCode + Kimi. Schakel later naar Claude Code als jullie werkgever betaalt.
|
||
|
||
---
|
||
|
||
## BLOK 3: INTRODUCTIE OPENCODE
|
||
|
||
### Slide 8: Wat is OpenCode?
|
||
|
||
- Open-source AI coding agent (60.000+ GitHub stars)
|
||
- Werkt met **elke** AI: OpenCode Zen, Groq, Ollama, OpenAI, Anthropic
|
||
- Terminal-versie én Desktop App met ingebouwde terminal
|
||
- Privacy-first: jouw code blijft op jouw machine
|
||
|
||
**Vandaag gebruiken we:** Desktop App + Kimi K2.5 Free (zero cost).
|
||
|
||
---
|
||
|
||
### Slide 9: Installatie
|
||
|
||
**Terminal-versie:**
|
||
```bash
|
||
npm i -g opencode-ai@latest
|
||
```
|
||
|
||
**Desktop App (aanbevolen vandaag):**
|
||
- Download: **opencode.ai/download**
|
||
- Installeer voor Mac of Windows
|
||
|
||
**Gratis AI model instellen:**
|
||
- `Ctrl+X M` → OpenCode Zen → **Kimi K2.5 Free**
|
||
|
||
---
|
||
|
||
### Slide 10: Plan vs Build mode
|
||
|
||
| Mode | Icoon | Wat het doet |
|
||
|------|-------|--------------|
|
||
| **Plan** | 📋 | Analyseert je codebase, verandert **niets** |
|
||
| **Build** | 🔨 | Schrijft code, maakt bestanden aan |
|
||
|
||
**Wisselen:** `Tab`
|
||
|
||
**Tip:** Eén prompt = één taak.
|
||
- ❌ "Maak een complete website met header, hero en footer"
|
||
- ✅ "Maak een Header component" → "Voeg hero toe" → "Maak footer"
|
||
|
||
Kleinere prompts = betere output + makkelijker reviewen.
|
||
|
||
---
|
||
|
||
### Slide 11: Keyboard shortcuts
|
||
|
||
| Shortcut | Actie |
|
||
|----------|-------|
|
||
| `Ctrl+P` | Command menu |
|
||
| `Tab` | Wissel Build/Plan |
|
||
| `@` | Zoek bestanden in je repo |
|
||
| `@explore` | Codebase verkennen (read-only subagent) |
|
||
| `Ctrl+X M` | Switch model |
|
||
|
||
---
|
||
|
||
### Slide 12: `@explore` — codebase verkennen
|
||
|
||
**Wat:** read-only subagent die door je code leest zonder iets te wijzigen.
|
||
|
||
**Voorbeelden:**
|
||
```
|
||
@explore find all authentication code
|
||
@explore how does the routing work?
|
||
@explore where are the API endpoints?
|
||
```
|
||
|
||
**Wanneer:** nieuwe codebase leren kennen, vóór een refactor, code zoeken zonder grep.
|
||
|
||
---
|
||
|
||
### Slide 13: De deployment-workflow (from scratch)
|
||
|
||
```
|
||
1. Wijzig code met OpenCode
|
||
2. git init + commit lokaal
|
||
3. GitHub: nieuwe lege repo aanmaken
|
||
4. git remote add + git push
|
||
5. Vercel: nieuw project → Import repo → Deploy
|
||
6. Volgende keren: git push → Vercel auto-deploys
|
||
```
|
||
|
||
We doen vandaag de **complete setup**: van lege starter naar live URL. Geen bestaand project nodig.
|
||
|
||
---
|
||
|
||
### Slide 14: Optioneel — andere modellen
|
||
|
||
**Wil je later wisselen?**
|
||
|
||
- **OpenAI (GPT-4):** platform.openai.com → API Keys → kopieer key → `Ctrl+X M` → OpenAI → plak
|
||
- **Anthropic (Claude):** console.anthropic.com → idem
|
||
- **Lokaal (Ollama):** `ollama pull llama4` → `Ctrl+X M` → Ollama
|
||
|
||
**Let op:** OpenAI en Claude zijn betaald. Kimi K2.5 Free is gratis maar minder krachtig.
|
||
|
||
---
|
||
|
||
## BLOK 4: LIVE DEMO — scroll-storytelling landing page
|
||
|
||
### Slide 15: Wat we live bouwen
|
||
|
||
**Project:** een AI-startup landing page van een fictieve naam — bijv. *"Polderwave"*.
|
||
|
||
**Eindresultaat krijgt:**
|
||
- Smooth scroll over de hele pagina (Lenis)
|
||
- Hero met grote naam die op scroll schaalt
|
||
- Features sectie met staggered fade-in (GSAP ScrollTrigger)
|
||
- Sticky horizontal scroll-sectie met 4 "panels" (storytelling)
|
||
- Parallax-blobs op de achtergrond
|
||
- Micro-interacties: hover-scale, color transitions
|
||
|
||
**Werkwijze:** vijf prompts → 5 fade-ins → één klikbare productie-deploy.
|
||
|
||
---
|
||
|
||
### Slide 16: Demo Overzicht (blijft op scherm)
|
||
|
||
```
|
||
┌──────────────────────────────────────────────────────────────┐
|
||
│ STAP 1: STARTER UITPAKKEN │
|
||
│ ────────────────────────────────────────────────────────── │
|
||
│ Unzip opencode-ui-starter.zip │
|
||
│ cd opencode-ui-starter │
|
||
│ npm install │
|
||
│ npm run dev │
|
||
│ → localhost:3000 │
|
||
├──────────────────────────────────────────────────────────────┤
|
||
│ STAP 2: OPENCODE DESKTOP APP OPENEN │
|
||
│ ────────────────────────────────────────────────────────── │
|
||
│ File → Open Folder → opencode-ui-starter │
|
||
│ Ctrl+X M → OpenCode Zen → Kimi K2.5 Free │
|
||
├──────────────────────────────────────────────────────────────┤
|
||
│ STAP 3: PROMPT 1 — Smooth scroll + Hero │
|
||
│ STAP 4: PROMPT 2 — Features sectie + staggered reveals │
|
||
│ STAP 5: PROMPT 3 — Sticky horizontal storytelling │
|
||
│ STAP 6: PROMPT 4 — Parallax-blobs │
|
||
│ STAP 7: PROMPT 5 — Micro-interactions (hover, CTA) │
|
||
├──────────────────────────────────────────────────────────────┤
|
||
│ STAP 8: GIT PUSH → VERCEL AUTO-DEPLOY │
|
||
└──────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
### Slide 17: De 5 prompts (blijft op scherm tijdens demo)
|
||
|
||
> **Prompt 1 — Smooth scroll + Hero**
|
||
> Installeer `lenis` en `gsap`. Maak in `app/page.tsx` een hero-sectie met als titel "POLDERWAVE" in extreem groot serif font. Centreer alles, donkere achtergrond, cream tekst. Initialiseer Lenis voor smooth scroll over de hele pagina via een client component wrapper.
|
||
|
||
> **Prompt 2 — Features sectie**
|
||
> Voeg onder de hero een features sectie toe met 4 cards: "AI-powered", "Privacy-first", "Open-source", "Built for speed". Elk met een korte beschrijving. Op scroll: stagger fade-in van onder via GSAP ScrollTrigger. Tailwind grid 2 kolommen, op mobile 1.
|
||
|
||
> **Prompt 3 — Sticky horizontal storytelling**
|
||
> Voeg een sticky sectie toe met 4 horizontale panels die op scroll van rechts naar links bewegen. Gebruik GSAP ScrollTrigger pin + horizontal translate. Elk panel toont een stap: "1. Idea", "2. Prompt", "3. Build", "4. Ship". Grote nummers, korte tekst.
|
||
|
||
> **Prompt 4 — Parallax-blobs**
|
||
> Voeg drie kleurrijke blob-cirkels toe als parallax-achtergrond — een blauwe, een roze, een gele. Ze bewegen met verschillende snelheden mee op scroll (y-translate per scroll-progress). Blur-filter erop voor zachte gloed.
|
||
|
||
> **Prompt 5 — Micro-interactions**
|
||
> Voeg onderaan een sticky CTA-knop toe met tekst "Get early access". Op hover: schaal naar 1.05, kleur-transition van pink naar yellow. Voeg ook hover-scale toe op de features-cards.
|
||
|
||
---
|
||
|
||
### Slide 18: Tijdens de demo — wat te uitleggen
|
||
|
||
**Sleutelmomenten om hardop te benoemen:**
|
||
|
||
- Plan-mode eerst (📋) — laat OpenCode een plan terugschrijven voor we Build doen
|
||
- Tab → Build (🔨) — bevestig de diff per file, kijk wat de AI doet
|
||
- Refresh browser tussen prompts — zie de progressie
|
||
- Eén prompt = één commit = één deploy moment
|
||
|
||
**Als iets misgaat:**
|
||
- Build-error? Plak de error in OpenCode, vraag om fix
|
||
- Animatie schokkerig? Vraag: "maak deze animatie smoother met ease-out"
|
||
- Layout breekt op mobile? Vraag: "fix de mobile layout voor de features sectie"
|
||
|
||
---
|
||
|
||
## BLOK 5: GIT & VERCEL WORKFLOW
|
||
|
||
### Slide 19: Live online zetten — van lokale repo naar Vercel
|
||
|
||
**Stap 1: lokaal init + commit (in Desktop App terminal):**
|
||
```bash
|
||
git init
|
||
git add .
|
||
git commit -m "Initial Polderwave"
|
||
git branch -M main
|
||
```
|
||
|
||
**Stap 2: nieuwe GitHub repo aanmaken** (github.com → New → `polderwave` → Public → Create).
|
||
|
||
**Stap 3: remote toevoegen + push:**
|
||
```bash
|
||
git remote add origin https://github.com/JOUWNAAM/polderwave.git
|
||
git push -u origin main
|
||
```
|
||
|
||
**Stap 4: Vercel nieuw leeg project** (vercel.com → Add New → Project → Import GitHub repo `polderwave` → Deploy).
|
||
|
||
Wacht ongeveer een minuut → live URL.
|
||
|
||
**Vanaf dat moment:** `git push` = automatische re-deploy.
|
||
|
||
---
|
||
|
||
### Slide 20: Preview deployments
|
||
|
||
**Branches = preview URLs**
|
||
|
||
```
|
||
main branch → polderwave.vercel.app
|
||
feature/parallax → polderwave-git-feature-parallax.vercel.app
|
||
```
|
||
|
||
**Waarom handig:**
|
||
- Test wijzigingen zonder productie te breken
|
||
- Deel preview link met team of klant
|
||
- Automatisch bij elke branch-push
|
||
|
||
**Demo:**
|
||
```bash
|
||
git checkout -b feature/extra-blob
|
||
# wijziging maken via OpenCode
|
||
git add . && git commit -m "Extra parallax blob"
|
||
git push -u origin feature/extra-blob
|
||
```
|
||
→ Check Vercel: nieuwe preview deployment verschijnt.
|
||
|
||
---
|
||
|
||
## BLOK 6: HANDS-ON OPDRACHT
|
||
|
||
### Slide 21: Aan de slag! (blijft op scherm)
|
||
|
||
```
|
||
┌──────────────────────────────────────────────────────────────┐
|
||
│ STAP 1: STARTER UITPAKKEN │
|
||
│ ────────────────────────────────────────────────────────── │
|
||
│ Unzip opencode-ui-starter.zip uit lesbestanden │
|
||
│ npm install + npm run dev │
|
||
├──────────────────────────────────────────────────────────────┤
|
||
│ STAP 2: OPENCODE OPENEN │
|
||
│ ────────────────────────────────────────────────────────── │
|
||
│ Desktop App → Open Folder → je project │
|
||
│ Ctrl+X M → OpenCode Zen → Kimi K2.5 Free │
|
||
├──────────────────────────────────────────────────────────────┤
|
||
│ STAP 3: BOUW MINSTENS 3 VAN DE 5 DEMO-PROMPTS NA │
|
||
│ ────────────────────────────────────────────────────────── │
|
||
│ □ Smooth scroll + Hero │
|
||
│ □ Features sectie │
|
||
│ □ Sticky horizontal panels │
|
||
│ □ Parallax-blobs │
|
||
│ □ Micro-interactions │
|
||
│ 💡 Of bedenk eigen variant — zelfde stack (Lenis + GSAP) │
|
||
├──────────────────────────────────────────────────────────────┤
|
||
│ STAP 4: ONLINE ZETTEN (FROM SCRATCH) │
|
||
│ ────────────────────────────────────────────────────────── │
|
||
│ git init && git add . && git commit -m "Initial" │
|
||
│ github.com → New repo (leeg) │
|
||
│ git remote add origin <repo-url> && git push -u origin main │
|
||
│ vercel.com → Add New → Import repo → Deploy │
|
||
│ │
|
||
│ Daarna: git push = automatische re-deploy │
|
||
└──────────────────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**Doel:** minimaal 2x deployen | ☕ **Pauze:** halverwege
|
||
|
||
---
|
||
|
||
## BLOK 7: AFSLUITING
|
||
|
||
### Slide 22: Samenvatting + Huiswerk
|
||
|
||
**Vandaag gezien:**
|
||
- Het CLI-landschap: Claude Code, Codex, OpenCode
|
||
- Plan vs Build mode + `@explore`
|
||
- Live demo: scroll-storytelling landing page met Lenis + GSAP
|
||
- Git push → Vercel auto-deploy + preview per branch
|
||
|
||
**Huiswerk:**
|
||
1. Bouw je eigen scroll-landing page (eigen merknaam, eigen kleurpalet)
|
||
2. Minimaal 3 van de 5 demo-features
|
||
3. Bonus: voeg één eigen animatie toe (dark mode, cursor-trail, etc.)
|
||
4. Inleveren: link naar Vercel + link naar GitHub in Teams
|
||
|
||
---
|
||
|
||
### Slide 23: Volgende les
|
||
|
||
**Les 3 — Cursor Setup & Basics**
|
||
|
||
- VSCode-achtige IDE met AI ingebouwd
|
||
- Tab autocomplete, Composer, Chat
|
||
- Debug-challenges live oplossen
|
||
- Cursor rules
|
||
|
||
OpenCode is laagdrempelig en open. Cursor is professioneler en heeft meer agentic features. Beide zijn waardevol op verschillende momenten.
|
||
|
||
Tot volgende week!
|