fix: les 2 v2
This commit is contained in:
235
Les02-OpenCode-v2/Les02-Docenttekst-Notes.md
Normal file
235
Les02-OpenCode-v2/Les02-Docenttekst-Notes.md
Normal file
@@ -0,0 +1,235 @@
|
||||
# Les 2 - Keynote Notes
|
||||
|
||||
**Spreektijd:** ~50 min | **Hands-on:** ~85 min | **Pauze:** 15 min (10:15-10:30)
|
||||
|
||||
---
|
||||
|
||||
## BLOK 1: WELKOM & TERUGBLIK (10 min)
|
||||
|
||||
---
|
||||
|
||||
### Slide 1: Welkom
|
||||
- "Welkom terug bij les 2!"
|
||||
- "Vandaag: jullie projecten uitbreiden"
|
||||
|
||||
---
|
||||
|
||||
### Slide 2: Planning
|
||||
- 09:00-09:20: 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
|
||||
- **Jullie hebben:** website op Vercel, code in GitHub
|
||||
- **Maar:** veel copy/paste, geen lokale dev
|
||||
- "Vandaag gaan we dat oplossen"
|
||||
|
||||
---
|
||||
|
||||
### Slide 4: Vandaag
|
||||
- Bestaande repos lokaal draaien
|
||||
- Uitbreiden met AI
|
||||
- Deployen via git push
|
||||
|
||||
---
|
||||
|
||||
## BLOK 2: INTRO OPENCODE (10 min)
|
||||
|
||||
---
|
||||
|
||||
### Slide 5: Wat is OpenCode?
|
||||
- Open source, 60.000+ stars
|
||||
- Terminal én **Desktop App** (met ingebouwde terminal!)
|
||||
- Kies je AI: OpenCode Zen, Groq, Ollama, **OpenAI**
|
||||
|
||||
---
|
||||
|
||||
### Slide 6: Installatie
|
||||
- **Terminal:** `npm i -g opencode-ai@latest`
|
||||
- **Desktop App:** opencode.ai/download
|
||||
- **Gratis AI Model:** `Ctrl+X M` → OpenCode Zen → **Kimi K2.5 Free**
|
||||
- "Wij gebruiken vandaag de Desktop App"
|
||||
|
||||
---
|
||||
|
||||
### Slide 7: Build vs Plan Mode
|
||||
- **Plan (📋):** leest, analyseert, verandert NIETS
|
||||
- **Build (🔨):** schrijft code, maakt bestanden
|
||||
- Wisselen: `Tab`
|
||||
- **💡 Eén prompt per taak!**
|
||||
|
||||
---
|
||||
|
||||
### Slide 8: Shortcuts
|
||||
- `Ctrl+P` = command menu
|
||||
- `Tab` = wissel mode
|
||||
- `@` = zoek bestanden (context!)
|
||||
- `@explore` = codebase verkennen (read-only)
|
||||
|
||||
---
|
||||
|
||||
### Slide 9: @explore - Codebase Verkennen
|
||||
- **Read-only** subagent
|
||||
- Zoekt bestanden, vindt keywords
|
||||
- Maakt **geen wijzigingen**
|
||||
- Voorbeeld: `@explore how does routing work?`
|
||||
|
||||
---
|
||||
|
||||
### Slide 10: Deployment Workflow
|
||||
- Wijzig code → git add → commit → push
|
||||
- Vercel pakt automatisch op
|
||||
- Jullie repos zijn al gekoppeld!
|
||||
|
||||
---
|
||||
|
||||
### Slide 11: Optioneel - OpenAI API Key
|
||||
- **Wil je GPT-4?** platform.openai.com → API Keys
|
||||
- In OpenCode: `Ctrl+X M` → OpenAI → Plak key
|
||||
- **Let op:** betaald (~$0.01/prompt)
|
||||
- **Tip:** Start met Kimi K2.5 Free!
|
||||
|
||||
---
|
||||
|
||||
## BLOK 3: SETUP & DEMO (20 min)
|
||||
|
||||
---
|
||||
|
||||
### Slide 12: Live Demo Overzicht (blijft op scherm)
|
||||
|
||||
**DEMO 1: Terminal (5 min)**
|
||||
- `opencode` → toon Ctrl+P, Tab, @, Ctrl+X M
|
||||
- "Krachtig, maar Desktop App is vriendelijker..."
|
||||
|
||||
**DEMO 2: Desktop App Setup (5 min)**
|
||||
- Open App → Open Folder → v0 project
|
||||
- Ctrl+X M → OpenCode Zen → Kimi K2.5 Free
|
||||
- Terminal: `npm install && npm run dev`
|
||||
|
||||
**DEMO 3: Plan Mode (5 min)**
|
||||
- 📋 "Analyseer dit project. Hoe werkt de routing?"
|
||||
- AI leest alleen, verandert niets
|
||||
|
||||
**DEMO 4: Build Mode (5 min)**
|
||||
- Tab → 🔨
|
||||
- "Maak nieuwe pagina /about met hero"
|
||||
- Review → Accept → Refresh browser
|
||||
|
||||
---
|
||||
|
||||
## BLOK 4: GIT & VERCEL (10 min)
|
||||
|
||||
---
|
||||
|
||||
### Slide 13: Demo - Git Push & Vercel
|
||||
- **DEMO:**
|
||||
```bash
|
||||
git add .
|
||||
git commit -m "Add about page"
|
||||
git push
|
||||
```
|
||||
- Of: GitHub Desktop
|
||||
- → Open Vercel dashboard → "Building..." → Live!
|
||||
|
||||
---
|
||||
|
||||
### Slide 14: Preview Deployments
|
||||
- **Elke branch = eigen preview URL**
|
||||
- main → productie | feature/x → preview URL
|
||||
- Test zonder productie te breken
|
||||
- Deel preview link met team/klant
|
||||
- **DEMO:** nieuwe branch pushen → toon preview in Vercel
|
||||
|
||||
---
|
||||
|
||||
### Slide 15: Nieuw project naar Vercel
|
||||
- **Voor huiswerk!** v0 was automatisch gekoppeld
|
||||
- Vercel → Add New Project → Import Git Repository
|
||||
- Selecteer repo → Deploy
|
||||
|
||||
---
|
||||
|
||||
## BLOK 5: HANDS-ON (85 min + 15 min pauze)
|
||||
|
||||
---
|
||||
|
||||
### Slide 16: Opdracht (blijft op scherm)
|
||||
|
||||
```
|
||||
STAP 1: PROJECT KLAARZETTEN
|
||||
git clone → cd → npm install → npm run dev
|
||||
|
||||
STAP 2: OPENCODE DESKTOP APP
|
||||
Open App → Open Folder → Ctrl+X M → Zen → Kimi K2.5 Free
|
||||
|
||||
STAP 3: BOUW MET OPENCODE
|
||||
□ Nieuwe pagina (/about, /services, /contact)
|
||||
□ Voeg 2 componenten toe
|
||||
□ Voeg link op homepage
|
||||
💡 Eén prompt per taak!
|
||||
|
||||
STAP 4: DEPLOY
|
||||
git add . → git commit → git push
|
||||
```
|
||||
|
||||
**Doel:** minimaal 2x deployen | ☕ Pauze: 10:15-10:30
|
||||
|
||||
---
|
||||
|
||||
### Hands-on deel 1 (09:55-10:15)
|
||||
- Help bij opstartproblemen
|
||||
- Draait npm run dev?
|
||||
- Kimi K2.5 Free geselecteerd?
|
||||
|
||||
---
|
||||
|
||||
### ☕ PAUZE (10:15-10:30)
|
||||
|
||||
---
|
||||
|
||||
### Hands-on deel 2 (10:30-11:30)
|
||||
**Checks:**
|
||||
- 10:45 - "Wie draait lokaal?"
|
||||
- 11:15 - "Wie heeft 2x gepusht?"
|
||||
|
||||
---
|
||||
|
||||
## BLOK 6: AFSLUITING (30 min)
|
||||
|
||||
---
|
||||
|
||||
### Slide 17: Resultaten
|
||||
- 2-3 studenten tonen werk
|
||||
- "Wat toegevoegd? Hoeveel keer gepusht?"
|
||||
|
||||
---
|
||||
|
||||
### Slide 18: Samenvatting
|
||||
- ✅ OpenCode Terminal + Desktop App
|
||||
- ✅ Gratis: Kimi K2.5 Free
|
||||
- ✅ Optioneel: OpenAI met API key
|
||||
- ✅ Plan vs Build mode
|
||||
- ✅ @explore voor codebase verkennen
|
||||
- ✅ Git push → auto deploy
|
||||
|
||||
---
|
||||
|
||||
### Slide 19: Huiswerk
|
||||
- **Nieuw project vanaf scratch**
|
||||
- create-next-app → 3 componenten
|
||||
- Push naar GitHub
|
||||
- **Vercel: Import Project** (zie slide 15!)
|
||||
- **Inleveren:** Vercel + GitHub link in Teams
|
||||
- **Les 3:** Iedereen langs, prompts bespreken
|
||||
|
||||
---
|
||||
|
||||
### Slide 20: Volgende les
|
||||
- OpenCode IDE Integratie
|
||||
- VSCode plugin
|
||||
- "Tot dan!"
|
||||
519
Les02-OpenCode-v2/Les02-Docenttekst.md
Normal file
519
Les02-OpenCode-v2/Les02-Docenttekst.md
Normal file
@@ -0,0 +1,519 @@
|
||||
# Les 2 — Docenttekst (Autocue)
|
||||
|
||||
**Online les — letterlijk voorleesbaar. Slide-nummers tussen `[SLIDE N]` matchen exact met de PPTX (19 slides).**
|
||||
|
||||
> **Twee-scherm-setup:**
|
||||
> - Scherm 1 (gedeeld met studenten): presentatie + OpenCode Desktop App + browser
|
||||
> - Scherm 2 (alleen jij): deze docenttekst voor autocue
|
||||
>
|
||||
> **Voor de les klaarzetten:**
|
||||
> - OpenCode Desktop App geïnstalleerd
|
||||
> - `opencode-ui-starter.zip` uitgepakt op je bureaublad
|
||||
> - Browser tabs: opencode.ai, github.com, vercel.com, localhost:3000
|
||||
> - Terminal in de starter-map klaar
|
||||
> - Kimi K2.5 Free al geactiveerd (`Ctrl+X M`)
|
||||
> - GitHub + Vercel ingelogd (géén repo of project alvast aanmaken — dat doe je live)
|
||||
> - Webcam + scherm delen op scherm 1
|
||||
> - Presentatie-modus zodat alleen scherm 1 zichtbaar is
|
||||
|
||||
---
|
||||
|
||||
`[SLIDE 1]` — Welkomstslide
|
||||
|
||||
Welkom bij Les 2. Vandaag zetten we de eerste echte stap richting professioneel AI-development. We bouwen LIVE een mooie scroll-storytelling landing page met smooth scrolling, parallax-effecten en animaties. En aan het einde staat alles online via je eigen GitHub-repo en eigen Vercel-project.
|
||||
|
||||
---
|
||||
|
||||
`[SLIDE 2]` — Een nieuwe manier van werken
|
||||
|
||||
Veel van jullie kennen browser-gebaseerde AI-tools. v0.dev bijvoorbeeld — je chat een UI in elkaar en plakt de code in je editor. Of een chatbot waar je vraagt om een snippet. Dat werkt prima voor snelle experimenten.
|
||||
|
||||
Maar er zit een paar ongemak in deze manier van werken. Veel copy/paste tussen browser en editor. Geen lokale development terwijl je chat. Beperkte controle: je vraagt iets, je krijgt iets terug, maar je kunt niet stap voor stap meekijken. En je zit vast aan één tool, één model.
|
||||
|
||||
Vandaag stappen we over op een andere manier. Lokaal werken in een echt project. AI direct in je editor. Een lokale dev-server die wijzigingen meteen toont. Volledige controle: Plan-mode om te kijken wat de AI van plan is, dan Build, dan per file accepteren.
|
||||
|
||||
Browser-tools zoals v0 blijven nuttig voor snelle UI-experimenten. Maar voor echt bouwen: lokaal met een AI-pair. Dat is wat we vandaag gaan leren.
|
||||
|
||||
---
|
||||
|
||||
`[SLIDE 3]` — Planning
|
||||
|
||||
Dit is de planning voor vandaag. We beginnen met een korte introductie. Daarna kijken we naar het AI-CLI landschap: Claude Code, Codex en OpenCode. Wat zijn de verschillen.
|
||||
|
||||
Daarna een korte introductie van OpenCode zelf. Dan de live demo — het centrale deel — waarin we vanuit een starter-zip een complete scroll-storytelling landing page bouwen.
|
||||
|
||||
Vervolgens zetten we alles online. Git init, GitHub-repo, Vercel-project. Daarna een pauze. Daarna ruimte voor jullie eigen werk. En aan het einde delen we resultaten en sluiten we af.
|
||||
|
||||
---
|
||||
|
||||
`[SLIDE 4]` — Vandaag, drie dingen
|
||||
|
||||
Drie dingen vandaag.
|
||||
|
||||
Eén: we kijken naar het AI-coding-CLI landschap. Drie tools die op dit moment serieus genomen worden — Claude Code, Codex, en OpenCode.
|
||||
|
||||
Twee: we bouwen live een scroll-storytelling landing page vanuit een starter-zip. Met Lenis voor smooth scrolling en GSAP voor animaties.
|
||||
|
||||
Drie: we zetten alles online — compleet vanaf nul. Git init, nieuwe GitHub-repo, nieuw Vercel-project. Aan het einde heb je je eigen live URL.
|
||||
|
||||
---
|
||||
|
||||
`[SLIDE 5]` — Drie spelers op de markt
|
||||
|
||||
Drie spelers op de markt halverwege 2026.
|
||||
|
||||
**Claude Code** van Anthropic. Opinionated, safety-first, beste raw capability voor zwaar engineering-werk. Vraagt altijd toestemming voor risicovolle acties. Werkt alleen met Claude-modellen.
|
||||
|
||||
**Codex** van OpenAI. Autonoom, token-efficiënt, minder safety-checks. Werkt alleen met OpenAI-modellen.
|
||||
|
||||
**OpenCode** is anders. Een open-source community-tool. Zestigduizend GitHub-stars. Werkt met élke AI-provider, ook lokale modellen via Ollama. Mooiste TUI van de drie.
|
||||
|
||||
Wat ze gemeen hebben: het zijn allemaal terminal-based agents. Geen aparte IDE nodig.
|
||||
|
||||
Wat ze onderscheidt: filosofie, prijsmodel, model-keuze, autonomie. Dit komt uit een goede vergelijking van NeuralNine — aanrader om thuis te kijken.
|
||||
|
||||
---
|
||||
|
||||
`[SLIDE 6]` — Vergelijking op 7 assen
|
||||
|
||||
Hier de vergelijking op zeven assen. Lees met me mee.
|
||||
|
||||
Safety. Claude Code wint — vraagt altijd toestemming. Codex is autonomer. OpenCode zit ertussenin, configureerbaar.
|
||||
|
||||
TUI en aesthetics. Claude Code en Codex zijn functioneel. OpenCode is gewoon mooier — telt mee als je veel uren in een tool zit.
|
||||
|
||||
Model-flexibiliteit. OpenCode duidelijke winnaar. Claude Code vast aan Anthropic, Codex vast aan OpenAI, OpenCode werkt met élke provider én lokale modellen via Ollama.
|
||||
|
||||
Undo en rewind. Claude Code heeft alles. Codex heeft géén undo. OpenCode heeft rewind.
|
||||
|
||||
Token-efficiency. Codex zuinigst. Claude Code verbruikt veel maar laat het transparant zien.
|
||||
|
||||
Open-source. Alleen OpenCode is open-source, MIT-licensed.
|
||||
|
||||
Praktijk-noot. NeuralNine bouwt in de video een Sudoku-game als benchmark. Met betaalde modellen zijn alle drie vergelijkbaar. OpenCode op gratis modellen zoals Kimi K2.5 is duidelijk minder maar wél echt gratis.
|
||||
|
||||
---
|
||||
|
||||
`[SLIDE 7]` — Waarom OpenCode in deze cursus?
|
||||
|
||||
Waarom kies ik OpenCode voor deze cursus? Vier redenen.
|
||||
|
||||
Eén: gratis te beginnen. Kimi K2.5 Free of een lokaal Ollama-model. Geen creditcard.
|
||||
|
||||
Twee: open-source. Je kunt zien hoe deze tools werken.
|
||||
|
||||
Drie: bring your own model. Later switchen naar Claude of GPT = dertig seconden.
|
||||
|
||||
Vier: de beste TUI.
|
||||
|
||||
De eindconclusie van NeuralNine is mooi. Hij zegt: "OpenCode is filosofisch mijn favoriet. Voor zwaar engineering-werk pak ik Claude Code met Opus."
|
||||
|
||||
Wat dat betekent voor jullie: start vandaag met OpenCode plus Kimi. Leer de skill. Als je later betaald engineering-werk doet en je werkgever betaalt het abonnement, stap je makkelijk over naar Claude Code.
|
||||
|
||||
---
|
||||
|
||||
`[SLIDE 8]` — Wat is OpenCode?
|
||||
|
||||
Wat is OpenCode precies.
|
||||
|
||||
Open-source AI coding agent. Werkt met élke AI-provider: OpenCode Zen — de eigen gratis variant — plus Groq, Ollama voor lokaal, OpenAI, Anthropic. Privacy-first: jouw code blijft op jouw machine.
|
||||
|
||||
Twee versies. Terminal-versie voor power-users. Desktop App met ingebouwde terminal. Vandaag gebruiken we de Desktop App met Kimi K2.5 Free.
|
||||
|
||||
Belangrijke functies om te kennen. Plan mode — AI leest je code en geeft een plan, verandert niks. Build mode — AI schrijft code, jij accepteert per file. Wissel met Tab. En `@explore` als read-only subagent om je codebase te doorzoeken.
|
||||
|
||||
---
|
||||
|
||||
`[SLIDE 9]` — OpenCode vs Cursor vs Claude Code
|
||||
|
||||
Een korte praktische vergelijking voor jullie keuze later.
|
||||
|
||||
OpenCode is CLI-based, open-source, gratis te beginnen. Cursor zien we volgende les — dat is een complete IDE met AI overal verweven. Claude Code is ook CLI, maar alleen voor Claude-modellen en met een Anthropic-abonnement.
|
||||
|
||||
Vandaag OpenCode. Volgende les Cursor. Beide doen vergelijkbare dingen, maar verschillende werkstijlen.
|
||||
|
||||
---
|
||||
|
||||
`[SLIDE 10]` — Setup: installeren + eerste keer opstarten
|
||||
|
||||
Setup is simpel.
|
||||
|
||||
Voor terminal: `npm install -g opencode-ai`, daarna `opencode` in je project-map.
|
||||
|
||||
Voor de Desktop App: ga naar opencode.ai/download. Pak de Mac of Windows variant.
|
||||
|
||||
In OpenCode druk je `Ctrl+X M` om van model te wisselen. Kies OpenCode Zen, dan Kimi K2.5 Free.
|
||||
|
||||
Klaar.
|
||||
|
||||
---
|
||||
|
||||
`[SLIDE 11]` — LIVE DEMO: Scroll-storytelling landing page
|
||||
|
||||
Tijd voor de live demo. Vandaag bouwen we samen een scroll-storytelling landing page voor een fictieve AI-startup genaamd Polderwave.
|
||||
|
||||
We gaan een hero bouwen met smooth scrolling via Lenis. Een features sectie die staggered fade-in heeft. Een sticky horizontal scroll-sectie met vier panels. Parallax achtergrond-blobs. En micro-interacties op de CTA.
|
||||
|
||||
Vijf prompts. Vijf momenten waarop je in de browser ziet dat het mooier wordt.
|
||||
|
||||
---
|
||||
|
||||
`[SLIDE 12]` — LIVE DEMO Flow (blijft op scherm tijdens demo)
|
||||
|
||||
Dit is de flow. Slide blijft op het scherm.
|
||||
|
||||
**Stap één — starter uitpakken.** Ik open mijn terminal. Ik heb `opencode-ui-starter.zip` op mijn bureaublad. Dat unzip ik. Stap erin, `npm install`, `npm run dev`. Browser opent op localhost:3000. Lege Next.js pagina.
|
||||
|
||||
```bash
|
||||
cd ~/Desktop/opencode-ui-starter
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
**Stap twee — OpenCode Desktop App.** File → Open Folder → kies de starter-map. `Ctrl+X M` → OpenCode Zen → Kimi K2.5 Free.
|
||||
|
||||
**Stap drie tot zeven** — de vijf prompts. Komen op de volgende slide. Tussen elke prompt: browser refresh, en commit in de terminal.
|
||||
|
||||
**Stap acht** — online zetten. Doen we na de demo.
|
||||
|
||||
---
|
||||
|
||||
`[SLIDE 13]` — De 5 prompts (blijft op scherm tijdens demo)
|
||||
|
||||
Hier zijn de vijf prompts. Ik ga ze één voor één plakken in OpenCode. Slide blijft op het scherm. Lees met me mee — ik ga ze ook hardop voorlezen.
|
||||
|
||||
---
|
||||
|
||||
**PROMPT 1 — Smooth scroll + Hero.**
|
||||
|
||||
Eerst in Plan mode kort kijken wat er komen gaat. Tab om naar Build te schakelen. Dan plak ik:
|
||||
|
||||
```
|
||||
Installeer de packages lenis en gsap. Maak in app/page.tsx een hero-sectie:
|
||||
- Titel "POLDERWAVE" in een extreem groot serif font (text-[12rem] of meer)
|
||||
- Ondertitel "AI infrastructure for builders" eronder
|
||||
- Donkere achtergrond (#0a0a0a), cream tekst (#f0e0cc)
|
||||
- Hele pagina min-h-screen, gecentreerd
|
||||
- Maak ook een client component LenisProvider die Lenis initialiseert
|
||||
voor smooth scrolling over de hele pagina, en wrap die om de children
|
||||
in app/layout.tsx
|
||||
```
|
||||
|
||||
OpenCode maakt diffs. Lees met me mee. Accepteer per bestand. Browser refresh — POLDERWAVE staat in het groot. Scroll: smooth. Eén feature down, vier te gaan.
|
||||
|
||||
---
|
||||
|
||||
**PROMPT 2 — Features sectie + staggered reveals.**
|
||||
|
||||
```
|
||||
Voeg onder de hero een features-sectie toe in app/page.tsx:
|
||||
- Section met titel "Why builders pick us"
|
||||
- Grid van 4 cards (md:grid-cols-2, lg:grid-cols-4):
|
||||
1. "AI-powered" — "Models that adapt to your stack"
|
||||
2. "Privacy-first" — "Your code stays on your machine"
|
||||
3. "Open-source" — "MIT licensed, fork-friendly"
|
||||
4. "Built for speed" — "Cold-start under 100ms"
|
||||
- Padding ruim, mooi typografisch ritme
|
||||
- Op scroll: stagger fade-in van onder via GSAP ScrollTrigger
|
||||
(delay 0.1s per card, duration 0.8s, y-translate van 60 naar 0)
|
||||
- Maak hiervoor een client component "FeaturesGrid"
|
||||
```
|
||||
|
||||
Tab als nog niet in Build. Plak. Diffs. Accept. Refresh browser. Scroll naar features — kaarten komen één voor één omhoog.
|
||||
|
||||
---
|
||||
|
||||
**PROMPT 3 — Sticky horizontal storytelling.**
|
||||
|
||||
```
|
||||
Voeg onder de features een sticky horizontal-scroll sectie toe:
|
||||
- 4 panels die op scroll van rechts naar links bewegen
|
||||
- Pin de sectie tijdens scroll met GSAP ScrollTrigger
|
||||
- Elk panel toont een grote nummer (1, 2, 3, 4) en een korte tekst:
|
||||
Panel 1: "Idea — bring your prompt"
|
||||
Panel 2: "Prompt — describe your goal"
|
||||
Panel 3: "Build — let AI write the code"
|
||||
Panel 4: "Ship — push to Vercel"
|
||||
- Verschillende achtergrondkleuren per panel (subtle gradients)
|
||||
- Grote serif nummers (text-[20rem])
|
||||
- Maak hiervoor een client component "HorizontalScrollStory"
|
||||
```
|
||||
|
||||
Plak. Diffs. Accept. Refresh. Scroll naar deze sectie — pagina blijft staan en de panels schuiven horizontaal voorbij. Heel modern.
|
||||
|
||||
---
|
||||
|
||||
**PROMPT 4 — Parallax-blobs.**
|
||||
|
||||
```
|
||||
Voeg drie parallax-blobs toe als kleurrijke achtergrond-decoratie:
|
||||
- Een blob blue (#4361ee), een pink (#ef476f), een yellow (#ffc107)
|
||||
- Absolute positioned, verschillende posities (top-left, mid-right, bottom-center)
|
||||
- Width/height rond 400-600px
|
||||
- Border-radius 50% en blur-3xl voor zachte gloed
|
||||
- Op scroll: y-translate met verschillende snelheden
|
||||
(blob 1: 0.5x scroll, blob 2: 0.8x, blob 3: 0.3x)
|
||||
- Mix-blend-mode: screen of soft-light voor mooie kleurmenging
|
||||
- Maak hiervoor een client component "ParallaxBlobs", absolute fixed
|
||||
z-index 0 zodat content erbovenop ligt
|
||||
```
|
||||
|
||||
Plak. Accept. Refresh. Scroll van boven naar beneden — zachte gekleurde wolken bewegen mee, in eigen tempo.
|
||||
|
||||
---
|
||||
|
||||
**PROMPT 5 — Micro-interactions.**
|
||||
|
||||
```
|
||||
Voeg de volgende micro-interacties toe:
|
||||
1. Sticky CTA-button onderaan rechts ("Get early access"):
|
||||
- Position fixed bottom-8 right-8
|
||||
- Padding ruim, rounded-full
|
||||
- Bij rust: bg-pink, tekst cream
|
||||
- Hover: scale naar 1.05, kleur transitioneert naar yellow
|
||||
(smooth 0.3s ease)
|
||||
2. Hover-effect op features-cards: scale 1.03, kleine box-shadow
|
||||
3. Hero-titel: heel subtiel parallax effect zodat hij langzamer
|
||||
scrollt dan de rest (0.7x scroll speed)
|
||||
```
|
||||
|
||||
Plak. Diffs. Accept. Refresh. Hover over de cards: ze pop op. Hover op de CTA: hij groeit en wisselt van kleur. Hero-titel blijft een tikje achter bij scroll.
|
||||
|
||||
Vijf prompts. Vijf upgrades. Geen handmatige code geschreven.
|
||||
|
||||
---
|
||||
|
||||
`[SLIDE 14]` — Tijdens de demo, wat te benoemen
|
||||
|
||||
Een paar dingen die je goed kunt benadrukken tijdens deze demo voor de studenten.
|
||||
|
||||
Eén: ik begin elke prompt in Plan mode om te zien wat OpenCode van plan is. Tab om over te gaan naar Build, dan accepteer ik. Veilige flow.
|
||||
|
||||
Twee: na elke prompt refresh ik in de browser. Studenten zien letterlijk de pagina groeien. Dit is het magische moment.
|
||||
|
||||
Drie: na elke prompt commit ik. Eén feature = één commit. Niet alles tegelijk.
|
||||
|
||||
Vier: als iets misgaat — Hydration error, TypeScript error — plak ik de error letterlijk terug in OpenCode en vraag om een fix. Vrijwel altijd binnen één extra prompt opgelost.
|
||||
|
||||
Vijf: als een animatie schokkerig is, vraag ik: "maak deze animatie smoother met ease-out en duration 1.2s". Tweaken kan met natuurlijke taal.
|
||||
|
||||
---
|
||||
|
||||
`[SLIDE 15]` — Online zetten — from scratch
|
||||
|
||||
Tijd om dit live te zetten. We doen dit compleet vanaf nul.
|
||||
|
||||
**Stap 1: lokaal git init + commit.**
|
||||
|
||||
In de ingebouwde terminal van de Desktop App:
|
||||
|
||||
```bash
|
||||
git init
|
||||
git add .
|
||||
git commit -m "Initial Polderwave"
|
||||
git branch -M main
|
||||
```
|
||||
|
||||
**Stap 2: nieuwe GitHub repository.**
|
||||
|
||||
Open github.com. Klik rechtsboven op het plusje, kies "New repository". Naam: `polderwave`. Public. Vink **niets** aan bij "Initialize this repository". Klik Create.
|
||||
|
||||
GitHub toont de URL. Kopieer.
|
||||
|
||||
**Stap 3: remote toevoegen + push.**
|
||||
|
||||
```bash
|
||||
git remote add origin https://github.com/JOUWNAAM/polderwave.git
|
||||
git push -u origin main
|
||||
```
|
||||
|
||||
Refresh github.com. Code staat erop.
|
||||
|
||||
**Stap 4: nieuw Vercel project.**
|
||||
|
||||
Open vercel.com. Add New → Project. Selecteer `polderwave`. Import. Vercel detecteert Next.js automatisch. Klik Deploy.
|
||||
|
||||
Wacht. Live URL verschijnt. Klik. Daar staat Polderwave op het internet.
|
||||
|
||||
---
|
||||
|
||||
`[SLIDE 16]` — Vercel preview deployments per branch
|
||||
|
||||
Vanaf nu krijgt elke branch die je pusht automatisch een eigen URL. Main → productie. Een branch met de naam `feature/extra-blob` gaat naar `polderwave-git-feature-extra-blob.vercel.app`.
|
||||
|
||||
Demo. Ik maak een nieuwe branch:
|
||||
|
||||
```bash
|
||||
git checkout -b feature/extra-blob
|
||||
```
|
||||
|
||||
En ik vraag OpenCode iets kleins:
|
||||
|
||||
> Voeg een vierde parallax-blob toe in groen (#16a34a), bewegend met 0.6x scroll snelheid.
|
||||
|
||||
Accept. Commit en push:
|
||||
|
||||
```bash
|
||||
git add . && git commit -m "Extra parallax blob"
|
||||
git push -u origin feature/extra-blob
|
||||
```
|
||||
|
||||
Check Vercel. Nieuwe deployment voor die branch. Klik. Eigen URL. Test live in de browser. Als goed: PR openen, mergen, productie krijgt het ook.
|
||||
|
||||
---
|
||||
|
||||
`[SLIDE 17]` — HANDS-ON
|
||||
|
||||
Jullie beurt. Slide blijft op het scherm.
|
||||
|
||||
**Stap één:** unzip `opencode-ui-starter.zip` uit de lesbestanden naar je bureaublad. Terminal in die map: `npm install`, `npm run dev`.
|
||||
|
||||
**Stap twee:** OpenCode Desktop App openen. File → Open Folder → je starter-map. Ctrl+X M → Kimi K2.5 Free.
|
||||
|
||||
**Stap drie:** bouw minimaal drie van de vijf demo-prompts na. Of een eigen variant. Onthoud: één prompt per taak. Refresh browser tussen elke prompt.
|
||||
|
||||
**Stap vier:** online zetten via dezelfde from-scratch flow. Git init + commit, nieuwe GitHub repo, remote add + push, nieuw Vercel project + import + deploy.
|
||||
|
||||
Doel: minimaal twee keer deployen. Een pauze halverwege — type "pauze" in de chat. Vragen tijdens werken: ook in de chat.
|
||||
|
||||
---
|
||||
|
||||
`[SLIDE 18]` — Samenvatting + Huiswerk
|
||||
|
||||
Resultaten delen. Wie wil zijn URL in de chat plakken en kort vertellen wat hij gebouwd heeft?
|
||||
|
||||
**Vandaag gezien:**
|
||||
|
||||
- Het CLI-landschap: Claude Code, Codex, OpenCode
|
||||
- Plan mode voor verkennen, Build mode voor schrijven
|
||||
- Live demo: scroll-storytelling met Lenis + GSAP (5 prompts)
|
||||
- Online zetten from scratch: git init → GitHub → Vercel
|
||||
- Preview deployments per branch
|
||||
|
||||
**Huiswerk:**
|
||||
|
||||
Bouw je eigen scroll-landing page. Eigen merknaam, eigen kleurpalet. Minimaal drie van de vijf demo-features. Bonus: voeg één eigen animatie toe — dark mode toggle, cursor-trail, custom mouse-cursor, eigen keuze.
|
||||
|
||||
Inleveren via Teams: link naar Vercel, link naar GitHub, een korte beschrijving.
|
||||
|
||||
---
|
||||
|
||||
`[SLIDE 19]` — Volgende les
|
||||
|
||||
Volgende les is Les 3: Cursor Setup en Basics. Een professionelere IDE met AI ingebouwd. Tab autocomplete, Composer voor multi-file edits, Chat voor vragen, en live debug-challenges.
|
||||
|
||||
OpenCode is laagdrempelig en open. Cursor is professioneler en heeft meer agentic features. Beide zijn waardevol op verschillende momenten.
|
||||
|
||||
Bedankt voor jullie aandacht vandaag. Vragen?
|
||||
|
||||
---
|
||||
|
||||
## DE 5 PROMPTS — copy-paste-vriendelijk
|
||||
|
||||
Voor jezelf, snel plakken tijdens de demo. Open dit document op je tweede scherm.
|
||||
|
||||
**PROMPT 1 — Smooth scroll + Hero**
|
||||
```
|
||||
Installeer de packages lenis en gsap. Maak in app/page.tsx een hero-sectie:
|
||||
- Titel "POLDERWAVE" in een extreem groot serif font (text-[12rem] of meer)
|
||||
- Ondertitel "AI infrastructure for builders" eronder
|
||||
- Donkere achtergrond (#0a0a0a), cream tekst (#f0e0cc)
|
||||
- Hele pagina min-h-screen, gecentreerd
|
||||
- Maak ook een client component LenisProvider die Lenis initialiseert
|
||||
voor smooth scrolling over de hele pagina, en wrap die om de children
|
||||
in app/layout.tsx
|
||||
```
|
||||
|
||||
**PROMPT 2 — Features sectie**
|
||||
```
|
||||
Voeg onder de hero een features-sectie toe in app/page.tsx:
|
||||
- Section met titel "Why builders pick us"
|
||||
- Grid van 4 cards (md:grid-cols-2, lg:grid-cols-4):
|
||||
1. "AI-powered" — "Models that adapt to your stack"
|
||||
2. "Privacy-first" — "Your code stays on your machine"
|
||||
3. "Open-source" — "MIT licensed, fork-friendly"
|
||||
4. "Built for speed" — "Cold-start under 100ms"
|
||||
- Padding ruim, mooi typografisch ritme
|
||||
- Op scroll: stagger fade-in van onder via GSAP ScrollTrigger
|
||||
(delay 0.1s per card, duration 0.8s, y-translate van 60 naar 0)
|
||||
- Maak hiervoor een client component "FeaturesGrid"
|
||||
```
|
||||
|
||||
**PROMPT 3 — Sticky horizontal storytelling**
|
||||
```
|
||||
Voeg onder de features een sticky horizontal-scroll sectie toe:
|
||||
- 4 panels die op scroll van rechts naar links bewegen
|
||||
- Pin de sectie tijdens scroll met GSAP ScrollTrigger
|
||||
- Elk panel toont een grote nummer (1, 2, 3, 4) en een korte tekst:
|
||||
Panel 1: "Idea — bring your prompt"
|
||||
Panel 2: "Prompt — describe your goal"
|
||||
Panel 3: "Build — let AI write the code"
|
||||
Panel 4: "Ship — push to Vercel"
|
||||
- Verschillende achtergrondkleuren per panel (subtle gradients)
|
||||
- Grote serif nummers (text-[20rem])
|
||||
- Maak hiervoor een client component "HorizontalScrollStory"
|
||||
```
|
||||
|
||||
**PROMPT 4 — Parallax-blobs**
|
||||
```
|
||||
Voeg drie parallax-blobs toe als kleurrijke achtergrond-decoratie:
|
||||
- Een blob blue (#4361ee), een pink (#ef476f), een yellow (#ffc107)
|
||||
- Absolute positioned, verschillende posities (top-left, mid-right, bottom-center)
|
||||
- Width/height rond 400-600px
|
||||
- Border-radius 50% en blur-3xl voor zachte gloed
|
||||
- Op scroll: y-translate met verschillende snelheden
|
||||
(blob 1: 0.5x scroll, blob 2: 0.8x, blob 3: 0.3x)
|
||||
- Mix-blend-mode: screen of soft-light voor mooie kleurmenging
|
||||
- Maak hiervoor een client component "ParallaxBlobs", absolute fixed
|
||||
z-index 0 zodat content erbovenop ligt
|
||||
```
|
||||
|
||||
**PROMPT 5 — Micro-interactions**
|
||||
```
|
||||
Voeg de volgende micro-interacties toe:
|
||||
1. Sticky CTA-button onderaan rechts ("Get early access"):
|
||||
- Position fixed bottom-8 right-8
|
||||
- Padding ruim, rounded-full
|
||||
- Bij rust: bg-pink, tekst cream
|
||||
- Hover: scale naar 1.05, kleur transitioneert naar yellow
|
||||
(smooth 0.3s ease)
|
||||
2. Hover-effect op features-cards: scale 1.03, kleine box-shadow
|
||||
3. Hero-titel: heel subtiel parallax effect zodat hij langzamer
|
||||
scrollt dan de rest (0.7x scroll speed)
|
||||
```
|
||||
|
||||
**PROMPT BONUS — Extra blob voor preview-deploy demo**
|
||||
```
|
||||
Voeg een vierde parallax-blob toe in groen (#16a34a), bewegend met 0.6x scroll snelheid, ergens links onderaan.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## VEELVOORKOMENDE FOUTEN — voor mezelf
|
||||
|
||||
| Probleem | Oplossing |
|
||||
|----------|-----------|
|
||||
| OpenCode-installatie hangt | Update Node naar 20+ |
|
||||
| Kimi K2.5 Free niet beschikbaar | Switch naar OpenCode Zen GPT-OSS |
|
||||
| OpenCode kan repo niet vinden | File → Open Folder opnieuw |
|
||||
| Build mode wijzigt niets | Je staat nog in Plan mode — Tab |
|
||||
| Hydration error op Lenis/GSAP | Vraag OpenCode: "Wrap dit in een client component met use client" |
|
||||
| ScrollTrigger werkt niet | `gsap.registerPlugin(ScrollTrigger)` in een client component |
|
||||
| Animatie schokkerig | "Maak smoother met ease-out 1.2s" |
|
||||
| Vercel deploy faalt | Check of `npm run build` lokaal werkt |
|
||||
| Preview URL toont oude versie | Hard refresh |
|
||||
| `git push` mislukt | Eerst `git branch -M main` doen voor de eerste push |
|
||||
|
||||
---
|
||||
|
||||
## MENTAAL MODEL TIJDENS DE LIVE DEMO
|
||||
|
||||
Drie regels voor jezelf:
|
||||
|
||||
1. **Lees letterlijk voor.** Tekst op scherm 2. Niet improviseren — dat houdt het tempo strak.
|
||||
2. **Refresh na elke prompt.** Het magische moment is wanneer studenten de pagina zien groeien.
|
||||
3. **Commit per prompt.** Eén feature = één commit.
|
||||
|
||||
Als iets stuk gaat: blijf rustig. Plak de error in OpenCode, vraag om een fix. Dat is óók een waardevolle demo.
|
||||
|
||||
Veel succes.
|
||||
163
Les02-OpenCode-v2/Les02-Huiswerk.md
Normal file
163
Les02-OpenCode-v2/Les02-Huiswerk.md
Normal file
@@ -0,0 +1,163 @@
|
||||
# Les 2 - Huiswerkopdracht
|
||||
|
||||
**Deadline:** Voor les 3
|
||||
|
||||
---
|
||||
|
||||
## Opdracht 1: Nieuw Project vanaf Scratch (2 uur)
|
||||
|
||||
In de les heb je een bestaand project uitgebreid. Nu ga je een **nieuw project** maken met OpenCode.
|
||||
|
||||
### Stap 1: Maak een nieuw React project
|
||||
|
||||
```bash
|
||||
npx create-next-app@latest mijn-nieuwe-project
|
||||
cd mijn-nieuwe-project
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Kies bij de prompts:
|
||||
- TypeScript: Yes
|
||||
- Tailwind CSS: Yes
|
||||
- App Router: Yes
|
||||
|
||||
### Stap 2: Configureer OpenCode Desktop App
|
||||
|
||||
1. Open de Desktop App
|
||||
2. Open je projectfolder
|
||||
3. Selecteer OpenCode Zen → Kimi K2.5 Free (gratis)
|
||||
|
||||
### Stap 3: Bouw minimaal 3 componenten
|
||||
|
||||
Gebruik Plan mode om te ontwerpen, Build mode om te bouwen.
|
||||
|
||||
**⚠️ BELANGRIJK: Eén prompt per taak!**
|
||||
|
||||
Maak niet één grote prompt voor alles. Verdeel je werk:
|
||||
- Prompt 1: "Maak een Header component met logo en navigatie"
|
||||
- Prompt 2: "Voeg een mobile hamburger menu toe aan de Header"
|
||||
- Prompt 3: "Maak een Hero section met headline en buttons"
|
||||
- etc.
|
||||
|
||||
**Houd je prompts bij!** Je moet ze inleveren (zie Opdracht 2).
|
||||
|
||||
**Verplichte componenten:**
|
||||
|
||||
#### 1. Header/Navbar
|
||||
- Logo
|
||||
- Navigatie links
|
||||
- CTA button
|
||||
- Mobile hamburger menu (werkend!)
|
||||
|
||||
#### 2. Hero Section
|
||||
- Headline
|
||||
- Subtitle
|
||||
- 1-2 buttons
|
||||
- Achtergrond (gradient of afbeelding)
|
||||
|
||||
#### 3. Kies één:
|
||||
|
||||
**Optie A: Feature Cards**
|
||||
- Minimaal 3 cards
|
||||
- Icon, titel, beschrijving per card
|
||||
- Responsive grid
|
||||
|
||||
**Optie B: Testimonials**
|
||||
- Minimaal 2 testimonials
|
||||
- Quote, naam, foto placeholder
|
||||
- Mooie styling
|
||||
|
||||
**Optie C: Pricing Table**
|
||||
- 3 pricing tiers
|
||||
- Features per tier
|
||||
- Highlight recommended
|
||||
|
||||
### Stap 4: Push naar GitHub
|
||||
|
||||
**Anders dan bij v0!** Bij v0 was Vercel automatisch gekoppeld. Nu moet je dit handmatig doen.
|
||||
|
||||
#### 4a. Maak GitHub repository
|
||||
|
||||
1. Ga naar github.com
|
||||
2. Klik "+" → "New repository"
|
||||
3. Naam: bijvoorbeeld `mijn-nieuwe-project`
|
||||
4. **Public** aanvinken
|
||||
5. Klik "Create repository"
|
||||
|
||||
#### 4b. Push je code
|
||||
|
||||
GitHub toont instructies. Voer uit in je projectmap:
|
||||
|
||||
```bash
|
||||
git remote add origin https://github.com/JOUW-USERNAME/mijn-nieuwe-project.git
|
||||
git branch -M main
|
||||
git push -u origin main
|
||||
```
|
||||
|
||||
**Of met GitHub Desktop:**
|
||||
1. File → Add Local Repository
|
||||
2. Selecteer je projectmap
|
||||
3. Publish repository
|
||||
|
||||
---
|
||||
|
||||
### Stap 5: Koppel aan Vercel
|
||||
|
||||
1. Ga naar vercel.com (log in met GitHub)
|
||||
2. Klik "Add New..." → "Project"
|
||||
3. "Import Git Repository"
|
||||
4. Selecteer je nieuwe repo
|
||||
5. Framework: Next.js (automatisch gedetecteerd)
|
||||
6. Klik "Deploy"
|
||||
|
||||
**Na ~1 minuut:** Je website is live!
|
||||
|
||||
**Tip:** Elke volgende `git push` wordt automatisch gedeployed.
|
||||
|
||||
---
|
||||
|
||||
## Opdracht 2: Houd je Prompts Bij!
|
||||
|
||||
**Belangrijk:** Houd tijdens het bouwen een lijst bij van alle prompts die je gebruikt.
|
||||
|
||||
**Voorbeeld format:**
|
||||
```
|
||||
1. [Plan] "Analyseer dit project en beschrijf de folder structuur"
|
||||
2. [Build] "Maak een Header component met logo links en navigatie rechts"
|
||||
3. [Build] "Voeg een hamburger menu toe voor mobile"
|
||||
4. [Build] "Maak een Hero section met grote headline en gradient achtergrond"
|
||||
5. [Build] "Voeg twee buttons toe aan de Hero: primair en secundair"
|
||||
6. [Build] "Maak een Features sectie met 3 cards in een grid"
|
||||
...
|
||||
```
|
||||
|
||||
**Waarom?**
|
||||
- In Les 3 gaan we iedereen langs
|
||||
- We bespreken hoeveel prompts je hebt gebruikt
|
||||
- En of je het werk goed hebt opgesplitst (één prompt per taak)
|
||||
|
||||
**Dit hoef je niet in te leveren**, maar zorg dat je het kunt laten zien in de les!
|
||||
|
||||
---
|
||||
|
||||
## Inleveren via Teams (voor Les 3)
|
||||
|
||||
Post in Teams:
|
||||
1. **Link naar Vercel** (je live website)
|
||||
2. **Link naar GitHub** (je repository)
|
||||
|
||||
Dat is alles! In Les 3 gaan we kort iedereen langs:
|
||||
- Bekijken wat je hebt gemaakt
|
||||
- Bespreken hoeveel prompts je hebt gebruikt
|
||||
- Delen wat goed werkte en wat niet
|
||||
|
||||
**💡 Tip:** Houd je prompt geschiedenis bij (zie Deel A hierboven) - we bespreken dit in de les!
|
||||
|
||||
---
|
||||
|
||||
## Hulp nodig?
|
||||
|
||||
- Check de OpenCode documentatie: opencode.ai/docs
|
||||
- Bekijk de les slides nogmaals
|
||||
- Stel vragen in Teams
|
||||
- Stel vragen in Teams
|
||||
149
Les02-OpenCode-v2/Les02-Huiswerk.pdf
Normal file
149
Les02-OpenCode-v2/Les02-Huiswerk.pdf
Normal file
@@ -0,0 +1,149 @@
|
||||
%PDF-1.4
|
||||
%<25><><EFBFBD><EFBFBD> ReportLab Generated PDF document (opensource)
|
||||
1 0 obj
|
||||
<<
|
||||
/F1 2 0 R /F2 3 0 R /F3 4 0 R /F4 5 0 R /F5 6 0 R
|
||||
>>
|
||||
endobj
|
||||
2 0 obj
|
||||
<<
|
||||
/BaseFont /Helvetica /Encoding /WinAnsiEncoding /Name /F1 /Subtype /Type1 /Type /Font
|
||||
>>
|
||||
endobj
|
||||
3 0 obj
|
||||
<<
|
||||
/BaseFont /Helvetica-Bold /Encoding /WinAnsiEncoding /Name /F2 /Subtype /Type1 /Type /Font
|
||||
>>
|
||||
endobj
|
||||
4 0 obj
|
||||
<<
|
||||
/BaseFont /Courier /Encoding /WinAnsiEncoding /Name /F3 /Subtype /Type1 /Type /Font
|
||||
>>
|
||||
endobj
|
||||
5 0 obj
|
||||
<<
|
||||
/BaseFont /Symbol /Name /F4 /Subtype /Type1 /Type /Font
|
||||
>>
|
||||
endobj
|
||||
6 0 obj
|
||||
<<
|
||||
/BaseFont /ZapfDingbats /Name /F5 /Subtype /Type1 /Type /Font
|
||||
>>
|
||||
endobj
|
||||
7 0 obj
|
||||
<<
|
||||
/Contents 14 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 13 0 R /Resources <<
|
||||
/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ]
|
||||
>> /Rotate 0 /Trans <<
|
||||
|
||||
>>
|
||||
/Type /Page
|
||||
>>
|
||||
endobj
|
||||
8 0 obj
|
||||
<<
|
||||
/Contents 15 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 13 0 R /Resources <<
|
||||
/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ]
|
||||
>> /Rotate 0 /Trans <<
|
||||
|
||||
>>
|
||||
/Type /Page
|
||||
>>
|
||||
endobj
|
||||
9 0 obj
|
||||
<<
|
||||
/Contents 16 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 13 0 R /Resources <<
|
||||
/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ]
|
||||
>> /Rotate 0 /Trans <<
|
||||
|
||||
>>
|
||||
/Type /Page
|
||||
>>
|
||||
endobj
|
||||
10 0 obj
|
||||
<<
|
||||
/Contents 17 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 13 0 R /Resources <<
|
||||
/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ]
|
||||
>> /Rotate 0 /Trans <<
|
||||
|
||||
>>
|
||||
/Type /Page
|
||||
>>
|
||||
endobj
|
||||
11 0 obj
|
||||
<<
|
||||
/PageMode /UseNone /Pages 13 0 R /Type /Catalog
|
||||
>>
|
||||
endobj
|
||||
12 0 obj
|
||||
<<
|
||||
/Author (NOVI Hogeschool Utrecht) /CreationDate (D:20260607080655+00'00') /Creator (\(unspecified\)) /Keywords () /ModDate (D:20260607080655+00'00') /Producer (ReportLab PDF Library - \(opensource\))
|
||||
/Subject (\(unspecified\)) /Title (Huiswerk) /Trapped /False
|
||||
>>
|
||||
endobj
|
||||
13 0 obj
|
||||
<<
|
||||
/Count 4 /Kids [ 7 0 R 8 0 R 9 0 R 10 0 R ] /Type /Pages
|
||||
>>
|
||||
endobj
|
||||
14 0 obj
|
||||
<<
|
||||
/Filter [ /ASCII85Decode /FlateDecode ] /Length 1891
|
||||
>>
|
||||
stream
|
||||
Gb!;d>>s9G'RnZ;36`-$Pg*M[m>@eG&e[f/#e8*c_olLB7Tbrj=b?;'pT3es@:Nt`MENk\G0bWpflQu?$n/hlq)OrH*"Lo_0a#F(E!sl9/e#J0a+<j<+l)8/omd<:7DOHW_YuhZG%0rgiWhSRTVs,.]&5&-PR8+DS0oVHO;YS,fjR.A:Si)_.-C?J?^`X(cT*WF'$p<)`VDATA`3g2YL+N;lA`f&"KP,%<eX0po:uVD.I<UR]fL_jak4glG=`F`+*hIQG<&oL0&ca8HnZ'X8lCkdKu#n\I^TXVN4M1t^8,f+kiX.[4dp1b=ZP*o0\4$c(;?IM)\YE=EVY1u)0c3gs.k,b+6Q?==*g-1.7ACm&5IZNUuuQ$$/Stb0Qc"V`WW!,a6_ULSkk#M!OUDp$`[(k@dT_[dsE&poj[;/g0(3,@RGnpN!MZ6nb&6^M]q9=3Ol,C.E)I2k85)2N"Ld#GWkJ"TLg;,T0&Bm.dF!n3tLURm:,H'bItT&\[QcrB8q(m]pQDhjq3Y/`B%H\i>r@\24BK0Y:B&!*TJ'Pbmb(4?7/5rFto\Y'O6/VLm6&TN86.!#.t;u-B.+T^T7^BX9dfWZN1@lZN/A;Q,uKBK;luOCMMk(A7RTq!ud?2H=/f+#IJdCq6V13h4`rjL,m,D,t-UUXCaX"TrKPt^3\*A$4J/;ft+@F;V&Op.m5n["5QH^@+8;agY-92[^"7#(\($l9q:N_[WWMs!P/s>UEZ0BZd&9S28>*"<M`q%^RO8IBPc[jJ]MZF?mc"6lpVZ_el>9GLO'^GQZqHD_Qn$kH6.5WKt4f,YMB1[ZicUUho-tUq,h7>JgiUDTLs/S0Q=SB+I7Z"i:ds3.r(V:HS0l_%n;VS0K,1`4+HV5<J'Q^l]8HfmN=2Y,W;d4Ug<5o".k_dF7B,d%a*YRX$-<JN\YI@1HU,nckMO[SgF,CR)=Q:odsDY1S#'Fi-LGO;.S9s2rf*F[g-ib$e[!GT#=G/-/=n-\2Reh$o_daCE8HYXg&UL4uP?f#tG-D$5i)@AF9/(GP:$Z;E\l2=/L:qF8?')CdF-.H(S*n?Mn-%Kl3;%Wq?:%Y#FZ^hmK&?pa`un7O-#=l6d/M/DlWd,pL2S[Ot7-p:H3>ZI-9iCU<tG0!m^p\uD7Qh<LFlTe;W/4/s1I;ZRq_FiGiuWrPp-b4,u\j'GOmC([gscr>3$3N1bul92#81"ra@7=aY_cjjhS^LPak>AJlehN%QBg`/r9EY!%kYJAF93*0Z%Nmf((b`'ilIVaJoq`7H$NUU\K__f#epWNLlqo`3S_D"K8=XdYq*fch1TJ$f7F:)/ZPNcM>-kJ_QiUcCSIi;drhLtV]CD#Vac(AYsXj#]?$JgkLb7)pb!o"I'e]mQO8\#T^$G/n@mO1.$J#<LOAsh]cn>BDB4&eulr;1#Je0"i67ZS]nhP89;NHG.e2S09q1kgj`aA'+3b$#\";24]ujQ.\[+2C_dhhL/81FV4OmXoh(2T_-s&F&=&@`mR[M-TQh42oeF8se*6pMQg?D3X\uD!;FVoR%*/Hj`"5"a'0,e'N#sB_6tPa!16rI)HeJG,'+m,%NDE[srPKb?`2%meI7%X*t,JiA?3d:-:MU/3nnL7]@9N<_1HBM9.mQ\qqjGi%RG#2@\\cWc_iXKM=%TnI0-kbu0M6UmHNs8R$i]30,nr;X;qF$9<RTq4l'Yf>#+0&OrPpZPu;Ji[n[kj7F51k(DpSYr@_#NYd@lZ_rR#^Uuf.FE-m+klH1E(*8BL<<.9""VgKjT=08Bq<h!/V)53L*:352KQ3==NBDasHPFp@*\dqb5G=Ic-E$f>Add]u$^^&U5k7/'Nou[Sn20^54cXp0""iqFRf_\S.8%SdfX$Ha#fi=;k09?J"m6uP$mr.~>endstream
|
||||
endobj
|
||||
15 0 obj
|
||||
<<
|
||||
/Filter [ /ASCII85Decode /FlateDecode ] /Length 1477
|
||||
>>
|
||||
stream
|
||||
Gb!Sm>?BfT&:X@TeG,iG)Uk8&"lIg8#C"2B%dOc]9i?_cONr#1G\2F'FqP@>!J03S:6aKnL/`SDq<HB>Yg%f"n)4i9]E9OJ":0_,,7nHAk^8#t3d^no=k'31F2;kugM'Nh>#+ku.c*h7odm:8>6G#^[fW0&$]#N#XT5<1chE8,$K:OH*WaIYCd2<8"iU'8DrH/cngHAqRH8a$C]=;f^7^/2ZFhnQ"1*Fp@HJM>Ct+ABLKQNTI2=q334QMI\:V/J0b=.Z-Le3>)"oh/.J;Zd$N@sU-8Ir2#b;!<5*lUgKJJTjSo=M0KshAO5GNP)V;1TCU`ATWKR;ar"^GBWZNA`j`qAK"?!XU-W.JDY6(fkSR+rd6'@aLm#g*Qd)d!F;jH<8K<ae/T'&S0BE>G?;/=2HKbijZT\O8E&/c8Ac@A\UI_Z#2+(_BU_b+;-8qL$pG</_0=Qkl>@!p;"##]8W7Wr8ce9Kq.uBDGNY2O6GEnnZOC.a-SF,ifeW+cRF;6f2"7L_R[1lkN^I1gatj4'K=_dATEJ62(8I%Za?th[a<3Io1SFFDAT"(rJ466ngmI.R3+C'8')Gl7&Y6p_ur9)*e-h&8>T%Xc0$e#<rC/D&+R,17iY"(GRRPp$<QtDn0H)jU\;q6l9J@Tg:2-9Jr]FCM7j&4_0[9cL[\"+Ij5ZA-N1A`l'pKiM.Gq9=;MK-J.2.W\D!?q^(N,f1)2)9u_2Wdi)%d9b^%?[7Oq.6([XZ=3HNIfsh#?\bob5ZEnZab*`7YkYq4prSm#rHY:j+<o&)9f<+4Qjti'H=Q[*54h',2s'G?)d)daf)F/Xi9IFmWPBhXY[WWB9R7;quZ/Um"*?O8dnAcSZ&rAI%K_p_UST3Pli2aX5\rKG+f/dCHUMTg9k;Fi;db-'S,1hNOfIj[kQA9[qSp;E%%D!=S(il48(kjKRd0S<0Kebdm;gpD\JmPuR.kqm/*!`f'<sCRNbl;'g-M1Q%&7Qq$9j,VBLBYH9Re'JA@'7IFVLg12OG:41O&$Z$H6&n?Jii^\e9D*FkJJNhPZgD>n.>IPM/`8_ec=E/95,"uf0@Jq'sCCOlI4W:c,D-e.1qm=Vo*j37\V>IaHkk'"'FSK2KjiFNG:FW`ZmlX23u[^-8VGLidP?C)AIpHBQh9!2eXiin?s/@Ve34A8l0F:RV0DEDi227efk9)KPhU>[mrgVC.d7MbjN\WXE',A=ru;3aBh!640SVocTHsf<$<U($S@-=$SuB[N))4PbWp$]9i3#"%1j_Wc-DkLjgS]T,c5>sk`rn7ltXOPgk+gQ\+ZPQD^KP!V>B_*/IJK^m^+mT7EjFR_NX)a@eTSpNN&e7o)/s";_&Wp?h>n5nuLET'5QeMf$Nfcq3m*ef`,G'`[T*n$3t^e\RZagJc-O8Sk4c=#Q-Z'K!U1FS@A8dI`:1`1UWa=e/_,[Wl9/@%;/#cTbsTGWPIL2O#&'e)!WCn%efl,^:$d^~>endstream
|
||||
endobj
|
||||
16 0 obj
|
||||
<<
|
||||
/Filter [ /ASCII85Decode /FlateDecode ] /Length 2024
|
||||
>>
|
||||
stream
|
||||
Gb!#\>?BQ=&:Vs/R,s1u*/#WqA7"to/M+S4g8=LNf`rl?NY:+;au4'Cp:'M3:2D9YP-D`)&dXVr\^*2jU0ur<epk^h_!qsG:FT*E_eYnTEFAPR:54D9#)%9GG?c7K\*SVG$#K283Z_hiHGg1n5_3-'iP#C(VhFYl"2f2o:OURkY$V\f&DsgAmJu4qoshJShBj:RaP%f?k67pLkONU;?9l06F=:bm7Uil[cBW.Dg((BdlaniE@K68sjZ>G#YpdU*V%WQ0C,)<EE5e1TDr/<7E?c*]$iLEe;]*5,%!k;^NtTdJr+2U8Pq6g,Si'J"_H:CnfKBRKd"H1Tq:$VD[2_"d5.9asN=*',XP*u^Fi!'">1IMN4Q)Hqa;-a)aMUrbTNSmLh]YVop-j))\T/'Qlf8s.*Ds]9D]Qap75[]u\0g+4Z4CB2h8jCZZ?mI1GS8Q^/Q?L'[;t.rR4_G;ON8=+rME"c$4P'^'s^g8kM@,l0.VE52YXf'H-bf02L;KSY"E35HIBM87g(HE@KKI/@hjiI[I1R%rKu>:q;5b/<fNbO.P!es7B*>-.7HP\;@*et1oj*3>cXh@QYDg/D'>(]Li6)l73^6UJVPr,IQ$UQ0JPgt+j@pu!7HGYq[LKNCWXBNQ9!SL[5d4ZbH_!E$=E-;&)&nm79H9"X%=no33a>"^k0'8bVupBZn"\IqiV@9Wl9=GXcAe!nJYp"o1fOkPBD>ge#*"d4I?Ol4>j;GB%R[Ec9`&f6)3VlJ-:fd%r@a12IjD>XVa3u7B/&-_^GS_,pF.!atbW1%M/*oU`,B#8e9g/rr1s9qmVcmkANPT*2[bF*Fr&I\)Lf`C4_rD7a)$GL'BMChD-/:0H3gGi"Mo[bT8s\pfs?6:!at]$].pjg_j]VGM4b**;M+8o(a2%;8PErhMPcCWX!"FKm8qe4f1;+]^mC.8@QB#kA`b3.MDi(KQi_(>qsr8_>a6DG_8le;2rHr^:)\i5V[MP6H=6tF?<[bRn,7."bPVEl90?>Z_+A6eWh(p9Af30HRkR!Y^V=D=kPhFSQZN[(q'ioE0&q0b&`]4c2fPO*fFQMcInf`\=B>FM^;YieSZ*]KIdNhgsibdcjX"QM2G$`m/ZG:eH5in?S&,MIqc.r;OiYL6HJ$O0XGuNUuH])f%IldYtXd2B8=0EBs)RFdiM[VUsd^+NG[g07i%(1\83(>)JPeV"Dfk*4L,*[l7`s^9$`MO?N2Y"[(qn7X&>d&.<3F^=@Am"e;bTobU:ffHfi`=XiM0`bIh=H]EcJ=%[,uur'MWm=]L_WC\-V6!OlNkGp,EgON8C2bN<f^[]RTn1R.^H(amF!^l:rqO[X+_A1nuWg=<T@(c,"qX-$km/#)p3f]b\AC>cO9oXJrEj/h(@I8kK/<7SH/Cu53SOUfVn#s3_p<CJ6a&S';&/DsW*[kKo8XI_71Rf->6@2<W=SZQ,2(8mDG87VltYQg+%_Fb"6IhOgoE'[7X"ri@P8a7Y)Q9(2G-kVB"Y2l\>_ViX@[c^Bf`2-@X,X`9][F4:-/`pN4GDI4-s1qs!h$S.<S+c#SC:V9(YRW4?;p0);[1]hsAhIu9Zu^6!@WfVjNn4Zb`Mf-j,3+!fU]g\,^l\F,qiE@&IMSek74+.d^&g!s7cjme6h2-Ll*")"iKiUqUoJMY+7EV""iPC?B/MK"b`43A7*+ao(s_Ef4VOM4L^d[n16IiEGDD0L_O/V\Kb5F8De+gJ@7hrFB!HoblP$`cXPmmfG[;j3f/tEh3i[:\Cf?Hr:b%*4$GWPP%XT/946SubDlshF]/A"D$8e>R9s5INF71eK78Y@>1l?F3Bo0tNW"Bq,AC1Ui9@k'LW`J5`&2:-,;B[q8IEW[^mP;'fTeg6u8o6P_>ZDQuQOW;I/ht#Ne3"IS=_U_iWestYXLFm`$Ibf/>"uP!Xo<_R[_SC#2Q4T!W7VuVIc*JbdU+pD<kQ6nHh[F&VeBnLW:/UoUJ6S<.An2eSQ_M,)14i=fasVQ_5:1@-.[2B_7ES#e*Om.?i?A@Jc~>endstream
|
||||
endobj
|
||||
17 0 obj
|
||||
<<
|
||||
/Filter [ /ASCII85Decode /FlateDecode ] /Length 1152
|
||||
>>
|
||||
stream
|
||||
Gb!krgMYb*&:O:Sbe?*V/gEt&7HJ+.1eeu5kQS$S^A(.*)4?U\WY4]nrVDO,[cKLB>%nRbYeJ25.*e>=B.g"<i1&<LklTcuK(Eabe:m)r-mK.p>Bh(r^'oh@h15;d4Q1OY$RGAE(DOtVK?ji7h2m5-![7[M9Mcp$.)<fM5sPN#,i$'O:`od_!l9Bml>sf9p3VJ)0"PZ5k<+.%^VqQMGTl#t3eZ16cknr4>>cE@*[;0f"!=6@%,ZR0HikUWaDs=#-A0'M+fBAhA(M1JoaP0JQ-;oSM_g1W+aR-KkSRm$&fs$KY0kWpQ!\*b2HE#]M:+,_NeL7G_ED-)7TfEq_pIGL;_L'DC(Zt>"Eu*,H9XmLBsnunV$#BO<e3BJG1SWf=bgK*"?R1,+?`>E8d4VWK'%-i38HIkO+`?@o0T<P_q\WrAHmEg(:c$U?G]rB/0o76/6-EqU-Pa)aRi%lheFih%3l7'%O=Nh)La$R1s7[d9?aTuf^ihMeSQ9+P727IVrP*HE1\2%jDLGC4QN''fuM^;g.%aQ#)64%<a+!l[6hMuK9_Ol3ec'@Lb6C#n$%W.!koW/3fEBoA%L/*ZIknSh\BJE`iQICrcU!6>P*LZO)_p$s7c[iC`YQAFhU_dmL4!.b`-Ls_+MZXa`p[W$7fTn\<S@bO+_p'O3;b:oLb+(VQ<-i]=p8gCsroBiHCaakm-(KW"M]46=`jGm+.bS-JklQ.Hi7N50ICbZ\PN7\mT\mC*g-<-De$=Lc>Hb$!m9.\j+C3S[,$PjDhV^bRH<b`OA&(mrS3pKY5/O<[G[e<NU58RlZ'FN]"fs;H)MbS70ZMd:BLW:<Haq5:pY6nU/#ul`4+&/nM'NWsSKBh>cc>KmiLdd/*4WkKEnEE5%K<.pbB'X7;/?Y.[h0^s`[PM=+p>f+H<3rEW[o=o0<U&?5S:Y?Qt0E`T0fSf6mXCK72L96m9"Z('Yk`cEYFp_n+JR$a/gj"pJ*.dHCMCo2$P@EekG#j*0Lf$"L\&,bdu*\F]<[$doSc[TjnT&4\GUZM:Kq(d-ZX&mHXREK;JM=_sXqMi<U1G`;hUpdO.ncI.%;GZg@M:FVhPfLf)951VI:-tAJ)?+<5@#*!e;0r<ap+M=-\LQU73@!.2^mEhL:ZBj1:Dj!0aZdNa~>endstream
|
||||
endobj
|
||||
xref
|
||||
0 18
|
||||
0000000000 65535 f
|
||||
0000000061 00000 n
|
||||
0000000132 00000 n
|
||||
0000000239 00000 n
|
||||
0000000351 00000 n
|
||||
0000000456 00000 n
|
||||
0000000533 00000 n
|
||||
0000000616 00000 n
|
||||
0000000821 00000 n
|
||||
0000001026 00000 n
|
||||
0000001231 00000 n
|
||||
0000001437 00000 n
|
||||
0000001507 00000 n
|
||||
0000001793 00000 n
|
||||
0000001872 00000 n
|
||||
0000003855 00000 n
|
||||
0000005424 00000 n
|
||||
0000007540 00000 n
|
||||
trailer
|
||||
<<
|
||||
/ID
|
||||
[<6c12062d6887b7f1fec7c33b3fc62987><6c12062d6887b7f1fec7c33b3fc62987>]
|
||||
% ReportLab generated PDF document -- digest (opensource)
|
||||
|
||||
/Info 12 0 R
|
||||
/Root 11 0 R
|
||||
/Size 18
|
||||
>>
|
||||
startxref
|
||||
8784
|
||||
%%EOF
|
||||
213
Les02-OpenCode-v2/Les02-Lesopdracht.md
Normal file
213
Les02-OpenCode-v2/Les02-Lesopdracht.md
Normal file
@@ -0,0 +1,213 @@
|
||||
# Les 2 - Lesopdracht: Website uitbreiden met OpenCode
|
||||
|
||||
---
|
||||
|
||||
## Doel
|
||||
|
||||
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
|
||||
|
||||
---
|
||||
|
||||
## Tijd
|
||||
|
||||
**85 minuten** (09:50-10:15 + 10:30-11:30)
|
||||
|
||||
☕ Pauze: 10:15-10:30
|
||||
|
||||
---
|
||||
|
||||
## Stap 1: Project Lokaal Draaien (15 min)
|
||||
|
||||
### Clone je repository
|
||||
|
||||
**Optie A - Terminal:**
|
||||
```bash
|
||||
git clone https://github.com/jouw-username/jouw-project.git
|
||||
cd jouw-project
|
||||
```
|
||||
|
||||
**Optie B - GitHub Desktop:**
|
||||
1. File → Clone Repository
|
||||
2. Selecteer je v0 project
|
||||
3. Clone
|
||||
|
||||
### Installeer dependencies
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
### Start development server
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Open http://localhost:3000 - je ziet je website!
|
||||
|
||||
**Checkpoint:** ✅ Website draait lokaal
|
||||
|
||||
---
|
||||
|
||||
## Stap 2: OpenCode Desktop App (10 min)
|
||||
|
||||
### 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+X M` (eerst Ctrl+X, dan M)
|
||||
2. Kies "OpenCode Zen"
|
||||
3. Selecteer "Kimi K2.5 Free"
|
||||
|
||||
### Start je project (in de ingebouwde terminal)
|
||||
```bash
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
**Checkpoint:** ✅ Desktop App draait + localhost:3000 werkt
|
||||
|
||||
---
|
||||
|
||||
## Stap 3: Uitbreiden met OpenCode (45 min)
|
||||
|
||||
### Fase 1: Analyseer (Plan Mode)
|
||||
|
||||
Check dat je in Plan mode zit (📋 icoon).
|
||||
|
||||
```
|
||||
Analyseer dit project. Hoe werkt de routing?
|
||||
Hoe maak ik een nieuwe pagina in Next.js?
|
||||
```
|
||||
|
||||
### Fase 2: Maak een nieuwe pagina (Build Mode)
|
||||
|
||||
Druk `Tab` om naar Build mode (🔨) te gaan.
|
||||
|
||||
**💡 BELANGRIJK: Eén prompt per taak!**
|
||||
|
||||
Splits je werk op in kleine stappen. Niet alles in één prompt!
|
||||
|
||||
**Opdracht: Maak een nieuwe pagina met componenten**
|
||||
|
||||
#### Stap 1: Kies je pagina
|
||||
Kies één van deze opties:
|
||||
- **About** - Over ons pagina
|
||||
- **Services** - Diensten pagina
|
||||
- **Contact** - Contact pagina
|
||||
|
||||
#### Stap 2: Maak de pagina structuur
|
||||
**Prompt 1:**
|
||||
```
|
||||
Maak een nieuwe pagina /about (of /services of /contact) met een basis layout.
|
||||
```
|
||||
|
||||
#### Stap 3: Voeg componenten toe
|
||||
**Prompt 2:**
|
||||
```
|
||||
Voeg een hero sectie toe aan de /about pagina met titel en beschrijving.
|
||||
Gebruik Tailwind CSS voor styling.
|
||||
```
|
||||
|
||||
**Prompt 3:**
|
||||
```
|
||||
Voeg een content sectie toe onder de hero (bijv. team cards, diensten lijst, of contact info).
|
||||
```
|
||||
|
||||
#### Stap 4: Voeg navigatie toe
|
||||
**Prompt 4:**
|
||||
```
|
||||
@app/page.tsx
|
||||
Voeg een link toe naar de /about pagina.
|
||||
De link moet zichtbaar zijn in de hero of header.
|
||||
Gebruik Next.js Link component.
|
||||
```
|
||||
|
||||
**Checkpoint:** ✅ Nieuwe pagina gemaakt + link op homepage
|
||||
|
||||
---
|
||||
|
||||
## Stap 4: Deploy naar Vercel (10 min)
|
||||
|
||||
### Commit je wijzigingen
|
||||
|
||||
**Terminal:**
|
||||
```bash
|
||||
git add .
|
||||
git commit -m "Add testimonials section"
|
||||
git push
|
||||
```
|
||||
|
||||
**Of GitHub Desktop:**
|
||||
1. Zie changed files links
|
||||
2. Schrijf commit message
|
||||
3. Commit to main
|
||||
4. Push origin
|
||||
|
||||
### Check Vercel
|
||||
1. Open je Vercel dashboard
|
||||
2. Zie "Building..." status
|
||||
3. Na ~1 min: bekijk je live site!
|
||||
|
||||
**Checkpoint:** ✅ Wijzigingen live op Vercel
|
||||
|
||||
---
|
||||
|
||||
## Stap 5: Herhaal! (10 min)
|
||||
|
||||
Doe minimaal nog één wijziging en push opnieuw.
|
||||
|
||||
Het doel is dat je de volledige workflow meerdere keren doorloopt:
|
||||
1. Wijzig met OpenCode
|
||||
2. Test lokaal
|
||||
3. Commit & push
|
||||
4. Bekijk live
|
||||
|
||||
---
|
||||
|
||||
## Tips
|
||||
|
||||
### @ Mentions gebruiken
|
||||
```
|
||||
@src/components/Hero.tsx
|
||||
Maak de heading groter en gebruik een gradient
|
||||
```
|
||||
|
||||
### Plan mode voor vragen
|
||||
```
|
||||
📋 Hoe kan ik animaties toevoegen aan mijn cards?
|
||||
```
|
||||
|
||||
### Build mode voor actie
|
||||
```
|
||||
🔨 Voeg fade-in animatie toe aan de feature cards
|
||||
```
|
||||
|
||||
### Stuck?
|
||||
1. Wees specifieker in je prompt
|
||||
2. Verwijs naar het exacte bestand met @
|
||||
3. Bekijk de error in terminal
|
||||
4. Vraag een klasgenoot of de docent
|
||||
|
||||
---
|
||||
|
||||
## Inleveren
|
||||
|
||||
Aan het einde van de les:
|
||||
- [ ] Website draait lokaal
|
||||
- [ ] Nieuwe pagina aangemaakt (bijv. /about)
|
||||
- [ ] Link op homepage naar nieuwe pagina
|
||||
- [ ] Minimaal 2x gepusht naar Vercel
|
||||
- [ ] Wijzigingen zijn live
|
||||
|
||||
---
|
||||
|
||||
## Bonus (als je klaar bent)
|
||||
|
||||
- [ ] Voeg een tweede pagina toe
|
||||
- [ ] Maak een navbar component met links naar alle pagina's
|
||||
- [ ] Voeg dark mode toggle toe
|
||||
- [ ] Implementeer smooth scroll animaties
|
||||
168
Les02-OpenCode-v2/Les02-Lesopdracht.pdf
Normal file
168
Les02-OpenCode-v2/Les02-Lesopdracht.pdf
Normal file
@@ -0,0 +1,168 @@
|
||||
%PDF-1.4
|
||||
%<25><><EFBFBD><EFBFBD> ReportLab Generated PDF document (opensource)
|
||||
1 0 obj
|
||||
<<
|
||||
/F1 2 0 R /F2 3 0 R /F3 4 0 R /F4 5 0 R /F5 6 0 R
|
||||
>>
|
||||
endobj
|
||||
2 0 obj
|
||||
<<
|
||||
/BaseFont /Helvetica /Encoding /WinAnsiEncoding /Name /F1 /Subtype /Type1 /Type /Font
|
||||
>>
|
||||
endobj
|
||||
3 0 obj
|
||||
<<
|
||||
/BaseFont /Helvetica-Bold /Encoding /WinAnsiEncoding /Name /F2 /Subtype /Type1 /Type /Font
|
||||
>>
|
||||
endobj
|
||||
4 0 obj
|
||||
<<
|
||||
/BaseFont /ZapfDingbats /Name /F3 /Subtype /Type1 /Type /Font
|
||||
>>
|
||||
endobj
|
||||
5 0 obj
|
||||
<<
|
||||
/BaseFont /Courier /Encoding /WinAnsiEncoding /Name /F4 /Subtype /Type1 /Type /Font
|
||||
>>
|
||||
endobj
|
||||
6 0 obj
|
||||
<<
|
||||
/BaseFont /Symbol /Name /F5 /Subtype /Type1 /Type /Font
|
||||
>>
|
||||
endobj
|
||||
7 0 obj
|
||||
<<
|
||||
/Contents 15 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 14 0 R /Resources <<
|
||||
/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ]
|
||||
>> /Rotate 0 /Trans <<
|
||||
|
||||
>>
|
||||
/Type /Page
|
||||
>>
|
||||
endobj
|
||||
8 0 obj
|
||||
<<
|
||||
/Contents 16 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 14 0 R /Resources <<
|
||||
/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ]
|
||||
>> /Rotate 0 /Trans <<
|
||||
|
||||
>>
|
||||
/Type /Page
|
||||
>>
|
||||
endobj
|
||||
9 0 obj
|
||||
<<
|
||||
/Contents 17 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 14 0 R /Resources <<
|
||||
/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ]
|
||||
>> /Rotate 0 /Trans <<
|
||||
|
||||
>>
|
||||
/Type /Page
|
||||
>>
|
||||
endobj
|
||||
10 0 obj
|
||||
<<
|
||||
/Contents 18 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 14 0 R /Resources <<
|
||||
/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ]
|
||||
>> /Rotate 0 /Trans <<
|
||||
|
||||
>>
|
||||
/Type /Page
|
||||
>>
|
||||
endobj
|
||||
11 0 obj
|
||||
<<
|
||||
/Contents 19 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 14 0 R /Resources <<
|
||||
/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ]
|
||||
>> /Rotate 0 /Trans <<
|
||||
|
||||
>>
|
||||
/Type /Page
|
||||
>>
|
||||
endobj
|
||||
12 0 obj
|
||||
<<
|
||||
/PageMode /UseNone /Pages 14 0 R /Type /Catalog
|
||||
>>
|
||||
endobj
|
||||
13 0 obj
|
||||
<<
|
||||
/Author (NOVI Hogeschool Utrecht) /CreationDate (D:20260607080655+00'00') /Creator (\(unspecified\)) /Keywords () /ModDate (D:20260607080655+00'00') /Producer (ReportLab PDF Library - \(opensource\))
|
||||
/Subject (\(unspecified\)) /Title (Lesopdracht) /Trapped /False
|
||||
>>
|
||||
endobj
|
||||
14 0 obj
|
||||
<<
|
||||
/Count 5 /Kids [ 7 0 R 8 0 R 9 0 R 10 0 R 11 0 R ] /Type /Pages
|
||||
>>
|
||||
endobj
|
||||
15 0 obj
|
||||
<<
|
||||
/Filter [ /ASCII85Decode /FlateDecode ] /Length 1699
|
||||
>>
|
||||
stream
|
||||
GauHL>Beg[%"?g3^gl)h0YE2Xq5n@s[QE;ko=C:$W",<<Q6fV!p9_S`THmIA>pYAt/^CUqM?H+n^dl0K.)&gT^/tK-cf+5R!TPm6$nNYIb[89VoAE8,\DfQ65_PgTi]n^Hrh-b-16@BlLdqj^e\pY_6GnU6OTCL>Zt:3`$_O$q%#@q`Rh1Ba;AjV]?P(1:WXakb.b`e;iA1sM6r\pO@CH1a$s0[Y-neSRKJKMQbh$h)f:.i)i+7@IbJe=iVsnn1fYq\2=.F&Np'NG==.A=k><IK4'';u\Jq;9F;BeQ.GD3c>A\P]-@P?q^I$8(qY^qm[kf'Y<`B.a*0VTd@d//$u3)I,'*J@V)I\i.c+<m=*pLN3#AH_JB$5S170I@'jP.A:)S0C;+#eW"6U3;f'k%>IGi,KZWb5;\8V9rW&,+o2d`V47upYf^=l@Raj&!enZ\3Se/#)?m/`1T%1cZUp;UsN^e44f-(.SXhCO1J=tR@eK-qgl64cd5u:m?RXUm7s#oOtjk#_a;3dM_I6$8`a8qm%7RX%cu+@",hC!0aM.1Br2%MTFiBE3nf<An2>4jOh@.`%54r?(W;l-,8,"Y0VDgtVs!l`KkFtbPZ=5R,pXAd`28>l<O,lcRia%Z4%@'a(bY<g/J[pd^'(fg]QFC0U((MuBl(DRJhZR-[&*`Y,nGqbB7]Ye-`#_<PE56K[KCi3.`*l[VGEK%G%IGX0'hjb?JDQ=drJCs`WSF3r:@KJlgfN&;oKj<ru$/)J3V?LH$WsV%%YmCZ/@#4>TS\Z&"K]k!m]g]=WF$O]03Pc?DYRZb@!*o`G<42'RmmWD>=)6:4@!,hS:$r't"p?Mut.k"QDkGnHp/a(e2Lu\FUd!EKKaHcs4#lFjNQpdo##s)R\;Hpn0G<1QGOED$F-PlYjiYm7iJFZ*a"c,'2g<];T+S.n:k'2E#>!k/*Fb.c8%Jc%a"U/kg(YN<b=gOH9q-1RUMP+N^O,o]KY2`O$ZiM&bAMs,i!*O"FDraZE`bWnIkPi4lbi8A]YA`b:o!$*?=nPOuF,h:PLlSY54kRJ/pLGMM.'b9%&15-c6$hBpL^j-Qr@$o^`]S%?8'c:T7T=BnBSaq6sqI_i4.`&q1/hp2nO&Z+*(k`44#]u(*#K+fJ<SRcln*H:JY'=^)sd7hte7V>E3D`Brp3+DZ3oje+TZ0R4$SClMkfKI'!FPSc3#PAThK*L=L")n;qNfAX+KZ9%6)sJ1:l4JKDiXN+0]^<6&FhWan'J>8&:+usW:0;Q;;]NrV*l;A<N;_)mC^V3&RC7K7o?=d]TWjou9WGc#4op2d!V!=fj3=GnY^2"%R+hZoNmmM;`G<DV-Wmi9=\fmR8f]R2s4Nu6e(98$-1BP,]iX%%:5-9=rD_\/&/nG0S2&bUK;JlhNG-)c$PgK19tPSC'<\r94bE(F_El[X#"G7?K?(>87XJFDk:sXZ[)]c6n#bihG-0,/.hb8!S-:5$Yi"*A)425[rC50+)ibgQ9pFF6eY\k-S`.e0rJ<)rp";+(^R`rP/MaE3gJM$G&7"o"G(6Q(f[MIT@CZ-I(5=9s_r8Z:4N@GLO]4"":YWL.6=GMC0WNq5rW<Ls:cubJaN,dJOENjZoU6hC1L;E-KoTC!hM'1M)I_Hf4l5'l*U^t"a7')$huS:s#<pcS,7c<[h4jZSP9.[e0u9UE$u-8bUnE:s?Y"Y@W;~>endstream
|
||||
endobj
|
||||
16 0 obj
|
||||
<<
|
||||
/Filter [ /ASCII85Decode /FlateDecode ] /Length 1486
|
||||
>>
|
||||
stream
|
||||
Gb"/'D,]1Y&H8h>Z/q15[)]lE,l()fP'Y!,f;[5B3rU>i!t3;8.g]ndlaqA(:,9gsJgX8S_&ajBGIu2h55QN@;#E$EHb'@TE=@UI#)pIp*1.ua`c'e5Z1j#D\Di)3JV]DFL]`Keq17PBbJ71I76G#jdX["%";rs-L/A3rcNO=WT[7ZWgg`SN7>"D<$(7t`[;fLa`Asra`)eG"ID3N6)L)ik%6B/FIo.'N@#\#YWfVlh5O`*oKYb:p^RW+*r'Hb!H(Lr'W@IO^?GV<d!00h4Q+kg`^='tV(gk/T\P^]e.Xap:+bOp2DfhDNAju%hI>BP>/-arEne&Rf8l<6P('mZ%T1\aiEAFScHMb9k(BnN;*fc2OCnO,TLquY`<cORC?,0.;F>hV$1stD'KKDJ-*/G\j('J'171/)9Y'%BOS3.32iBFD7Yk2H;e1l,^W@(&J%X(L*#`;GMKDnKqm[8B=9lMVYI6oXs\_'Lh$Ck#,a)gC+HAhu8BU>YZ6]J1H7lrRW4ua8$OUc#J48%a-V5j@@Sj+2dLodL'#oh=c!YUWO1ToN`0Hs^Q+fPS7&-nFA3qkk("$]k,;.95OLR1'&T[^sR)O\'sJ8ld/o"U;p^Eb511)#_(8Dm"d\_g@jW4uQ2Ni6VsU2AE;A%':fW`I$T__e"*kr^W"TqIXe%reN,mmL7>HDAg/Use-`bQ^:.4ZJoBC;lKf(.\ri%$'Ls\le&c<Xl1.%dsCd"gMr1G&(Hk%):AD!D@3u<067#3)4Z_Y65.X\*3;;^]V()hVP\Q\T0-3)\A?Qb,p1)_$&^VT5!X7jeBn!E3rfbA:Ok9PAKgV@FR&iqOjEZ#:q+NZ"sU%qP4h"#CtMm\(l1iiGKoScXR09a#UHCglF?<>9QVm1ttdSUCs@TMg%U'X%Jmfp0nco_(,G0<nSU*>-Eh];GX@b4IopLT+"1\WnTr5f8iV8YI<M\Pr>p'mU7VHfR8!5m,4/T%(/jX(M3q>cWnrM3?.6IDG<L`mk"u10Gd/_-)DJ5QcQu0267a#7J'qY`pN/Eh:3QQ'j$<ZT!E2Aa&S89p^Q(t1lTNVh,dWRDtkAcE<^@M-0SF&\#23N_h"jX^[(7Es,_.(Vo^]F;bh]W'j>P0Zo-qJA,AnZ>O&i#L]g=d.nm5VI?n6ri,,:um)a7Y93:7>^644X_,r5lM5]mLrbsD'@8$jK9uf#&2K];Z'f.;N#<+<J("rthSZXV.4EImQ]^XhM$FRX2RgZujm(YO>p8>lAb^BN$LA2]n/2fTBVEnH0,oPGup9HAk)tl&\MBR@>Wj>#>1E7I%\i4+n"t4f<ad;g#+4l_IIh\4ffFX&s^],dk*JcnTVJ.0QS\U%=0TW8hQ5A2KC^%\e@l9a9O7-JR'KqHqaY_>kJ_OtL"!%_8\PW3.RJPoSW[$4+6elc(!j?ZNkH3u37=J6Fs*;/%*Aba&EP-g4!?-#09D$aD2RWD]MTDlCqTk%(Q7pk"!T$&V/D1g~>endstream
|
||||
endobj
|
||||
17 0 obj
|
||||
<<
|
||||
/Filter [ /ASCII85Decode /FlateDecode ] /Length 1760
|
||||
>>
|
||||
stream
|
||||
Gb!SlbBDVu&DcY&VE6(u@/pErd&SL5S>L:rUfOhML8GN=&g&Sp.>bgR"$Ri"Q7?(_EI)BaQm)g[>R^%*%`!VSLK4Al"Q76)c7Ttg%\q@c";*?!Jle_`?N\.kpOipm;:P+r&Do3lOA?*1\<9CTq[=23M"1ZS`J@F+!fl;'O*Qh&q##6LJ9[6'8cV`4PtKmPmh!T$\e`5Ldbc)&i)9iO:Lo(f@FedBL-8Wp.;RHGKJM/#@?eRsqYd<Nn67g$76&Jr)#c(-*R77oF7-m92fPJB3mO$PIfcB*N1Lpm*M^KJ`-$aBD=gF:flE5\f$K1[)PmHo*?uX\MQIW8)ebh\M/oT2kaN^$3iK[Bm<MP?`p)0QM,UfYaol0u)&+"a3P5`O"_aGn)X5cg%Ef[5Gkb__`=mK_:%\5&(9mba=;T\>s/[D772K]8&Dhg+.1@m#eH.3BB:#@W0H:8*9iF,c#[%4C&EHYt9+W$DD0e3:YM.GZh&5!)O.S\:@2]7t3BenVMf-0dO:MN)j67\Zm;>:9n`oE8p$4j!r;QC0?B#tlV6J1MA6Au^$;+QpT6_XQj9(M3`8kMJ7qD^B%:=4kJ8>Nh$B&"VWJ7,UQ:mb]\;kY;5of4-4>f+1=Sk@*e]GWI^2NT(+C>dM(F#"neS2#3*cN*E67t86*U<n@K*:N\hF>'`@u[Gm#54.?m&XCPCpOW;+GGZde$scO4ukjkh$T]'Bu`<;*nRPV^:;_cG.[lH[=AdfI#fQo1XA,gdUC(*9JPl!YbLW8MXp['>F"sDitlsT`gk3"in+n&]8/Z-,[4UdSE,[Tf28K)4nH=BFBW&noU+ed:@k8a^<G"\#koo_oAn7<59<EYf2:Eap"S*^`6(qSk,Y^kXn(Kri,X.T/q0bV'^TeM><`0r&[&;e5D2nr9<>>`[9duS?Oa4^,M^7]+-M3E]Xg#-D=Kk>C'JREC]Pmi("DQXW4#J]Y\alRN3meBL7uo"<ZMLt.K7>,jq81AnW^&BW#\6bXUqm5D:$Z>MIsp6kN6D:Qjp&.dsP?L'Aurs`<BsdYHn?qnN#XX?;2_ii+7!G)#;"r,l8!_7?aQUDShjJ=G<+YQ5Ore'N"mNn-qmL@g/NEKjDUb_Hc7D5%T&oI<@lEkoOY]A/E?ZXQ;TIMfM4=T`1!bX`0(l?'f]E.jSOsHH_ORGYP(FK!rW0g"oglgD7@T7Q8%&RG/_EA[YDM\LV,+MU$=86(pZI.h"E\W(N&8jdcISN(P+C+gouVjjAGrV,O[LCU>ac?L-?n'eNf-7.HTlS\WF<)d$`UNdCORhQaJ\0)2KDbGhjjqToj*2l?QVXSi*3WMQ*385u<9j0EcYFW5A(U>gEBMprr\OUDd-K7$QZK1T;:`6l4GT,FnNZkg,$a&p6-frjI];,u#BC)X1KC!]Q532sEc3\X=gY3<]-k2QeilMc&!8rn3j\tVi+BfP'OVa@e2O#<IZ!o%2ZCi:l*D%#/:UDmR$9QB#(l$05&poh2o5"!$5Ub'7ZZRe-InJoj)G&!ZS/ujT':-j%\pk[@9M>N"0N?oJ-p0E>UlW[li/t/\MJ)@+AVU8'BR!^9[ppL*)P'I(0`fD]*N_28dd*hOERt[7?(X"@%bO^'"L'O7_RIcG675ra'Q?jkT>XpAM_CS?e=iqf]ekj[dBR^8Bfadt)@aaO,Fhl,.p#eXpj6U!pP>=4Mn\%%+iXD#!m;nf<W7-ImY>-!CAk<W#eaZNo^Pae;dln!nb%VO_"?@Id*+p2.]5e10^B*m!2.Z~>endstream
|
||||
endobj
|
||||
18 0 obj
|
||||
<<
|
||||
/Filter [ /ASCII85Decode /FlateDecode ] /Length 1590
|
||||
>>
|
||||
stream
|
||||
Gb!Sl>>s<8'Roe[38pPu1/f@<nr8t_,c,#u$"UVAB0*[BYOIFW/_;o-ksKrIO4Lc+"W#mIP-fSBXjst3kNGGF.)+C"2ou(1B!?L#J8psI!u")<li[/FF+/<=pN[lD+Dsa+L]`K=o7AH7$LiH&7m(5ldX["%!"gt!L/A3rl%4Eh:e<WrjY.g.:P2ID$(9t3r[iG_pme*m5s4%cDUNb*Kgrb3pmlT,B)=l+3.l?C=g"nMP^.fbZQ+-Q*Ii>F7lloXZHtXb?^aS6MZup:&)b]ZGUK\*VFt(*K\6OQ?5WbgVS]+HF%*=YoRj5f3Nlo8kTio'&VCoTq2AYH\bNg9%:)4#j09kR#brsAd7*c_]%X[86(\eXiHPL9,D)S2Y8te+&Q1tU%+uKmKF/WV8&B^Min-!3_iQRp=028'OALrjka?cp2p#fB8!)9jO?!`o$:fTpJJfJ=,n:r[amd.3g<gG^%(D)"E)p'rml'6RLB=1bAgn$J</cDEObbg]KBn]9jZHee/6*.to/VoE"5VFFoS(,SV+Gd#j5p.XG2=?e,O7h\\kmBI6S4Kkl!ih)QMn5S=C0R:#D(li(+:LKU&D&;St_^9l/!Rq&8b@u3+M^X*.Cf1dH)7?]3[D,gg:^R(2/oO$cPXZ?2`S@S+Z-YXUdQX_ThIjgfQ9XW6E=P'a<t[Dif(U2qU1Whire)&JqF:_n!p#%@J]3ogX4__C%'p:G>@VB@>,JU/Dfj4Z7@af5W;/Z%tW$7IC;:pi[FdD(THYjKU3&Z/eIb&JGT+cAiR^D:"P?mkEbm%8f%:4jP2t4)7R$H/3;*==FfiNa0Y9$"%5.aR%le(D5IUl^oLmVI]Xk.<8\9!\S$H$(/d+i_7DCr*N6_.;?P.P*ekMF)\+a\LLKDa:?]ogg&];b+:3R\$P9s%"C"Q<O!'IEiC[W-=iOUP#/2K^6kKY,2a[ghj3'?)_;rmg#Yo,<RJ/]je1`gF9CsBhSkJ"h(\c,0)d]<T-F&2B'AfZ>T?H,.H-ud)&)G0^kJ=54f#e$l)Ka*h$VTK-$]<+,ca?RB.r1b(G3HgSA(Md.HP?&r1f@ge'c<73JrMWVf:pIb^9f.m_&kh^2d4Fb<j=olco423k:s:?Df%$^g(B;:c2:2`di"\iC[aNS?#W+[B>hYRD-\+<`X9uS!,/t'M,""9^B!PcsXDKNYMCU2-;Hod5MN%Wr#iCmqYA+q;uFH*Bn"[M>7"G3i^FnNSRaeg5bI1gY7_f<'tfT/dnPD:1"J"97e;?>Y7"o8c&gT/Yt7'DI.l!M*)VJHrQ1$)Eu<\CclK(j]Q`*Q?%&iCc,ULZoW%!l:2B%,n]f42ElEu5%2YGQp#a,5rWN)TH>mY&,*g\4kL?-0Va9%B0LWD4%=I#=32NOeOj+Th!.%-F>[dt5GfMAI#R*^=csOU2SC3.Q#:,DQH9U:+O,=gs.Y1%%MtL?4VAeD`KMi*+P3[E;HIg;iBD>b(*emM!N"c,#G\nS!p1[G`eFRLf,sL;pBGnfZ'`FUC2'X*ouo*/@Dqf:CD=3K]tnD!Nj&[k@b_MQZ"_,p-#;:^b:>/=iu4DKWf$okgb72BX@3em^B$0Vk`l~>endstream
|
||||
endobj
|
||||
19 0 obj
|
||||
<<
|
||||
/Filter [ /ASCII85Decode /FlateDecode ] /Length 1324
|
||||
>>
|
||||
stream
|
||||
Gb!;c;/b2I&:W67\@9!P`fLm';L@(8Cr$1Kh26LB_m0MN523@hd?EXekc`l8Z=UYISN%&[,W6j9(@U\'n+b^1!2l/ss!KhBq%1h(":,=O#meKa%'STu@IRX>Um=J=^d?5^=9=Dujq#UK:dChENb'cWEl4tUTWDPP`YKie1I`30&LMDu!R,4pX9*!&UohA?5@dqiEiiH>Fo:q3FaUV(04oMN*JN1[aV`hWet@>iTjh7p-A#Y9K+EH:?c)8\MH)G'5(gW9&sHH-2c:Q=G6u%D/S9HgjVo&^@JI9NY[^X$S40,,qaRcno#l%;H:*1nBj*KPG)UgE/8hP&\IQl;P1bXAb'oObd3\JOlTQp2Wc<?.dH%8Qau5(nS?L@W%(RH)gj3=Z9Bm5c!r-@5_ubj+gP3KH(U5<QqJ4,p_brb,1)\Jc%!eM)knrj?Z9VRLCtpZ9AY9oBh!D2rbrnYFYD'8>ZM?t%"BFI$C8dhM8tTg)F3+L"N4&$cn+Z=k<YFo(RuG)R;676Cj4o)WJm$G9C@g`]IWhD-DY))??'j=V*ANJKOLi38e:d]\#"?_Q4\Gmep,Ib_)rlun!Nnt78#/H<&Y(A%W19N]=&f-T/'$1-jeO-UF8<N2oN/^u(-`nBTDiq$7dg'4mE_9?;%e.i;YEG_fhY$KY/<@Q/I0/ZCpr=[&F<e\MQ`*)ee</o"/a&Oktd*M<(fp58W!m,JLHs3/5)Tgl[rNCY+>faHiu.r1gnp;hPKfN$Kk$K@1E""_uaA#<UC.A&6eql#XJ2:!5h;,PYVC+Nf/"nBT<UhV/M3kZ-5e&ZQl]G"dOB:W[G)Q3]@5\!Z%3)VHA(MK:atKa$.?!IS"uNV"p.MmM-C)MW<GM8DE%kpl+E#,Ai4%?/1c87Qn/tio+2XEP:Q/V#7kM_/,#i/XdI-a_-@Y:Ch6.&ou%]#o[F*F4AEn0]lc)TjWuo<p]TB.4tS8^[MP"<D!Ld7MM3?OSOSlH4hG#Ej3!d:58Eb`RPt8E]7f3_jk3(gk'.B_'kl31,s>"^T)5/*'<fdje-L>SIG0@/Jd920_7:;?L5&2fM0.9_<*BUEpN%%ORLY1!-/sucS3?"WhOLE`CULh_.*X!?P),D:LQ<aOqL\=h=)_](QbK&pBU>CU93Y<.#PQ!.,(@Qr=.X7g?61P<HO7+<])ZDFW@,a6qugb@HurRg>,"hOOI:*471DO1ue?AESLp5:$o,kB\nr'[b(q24!Mr`)KpNp`4&ZR7P_?B)dSbHOT/.jIdLi0*P6@>4[I\K3mI-p8md;;>is3<F!;1[$)YjZBUhARPWm:ekKWnrFWpt)s1Rq3lM~>endstream
|
||||
endobj
|
||||
xref
|
||||
0 20
|
||||
0000000000 65535 f
|
||||
0000000061 00000 n
|
||||
0000000132 00000 n
|
||||
0000000239 00000 n
|
||||
0000000351 00000 n
|
||||
0000000434 00000 n
|
||||
0000000539 00000 n
|
||||
0000000616 00000 n
|
||||
0000000821 00000 n
|
||||
0000001026 00000 n
|
||||
0000001231 00000 n
|
||||
0000001437 00000 n
|
||||
0000001643 00000 n
|
||||
0000001713 00000 n
|
||||
0000002002 00000 n
|
||||
0000002088 00000 n
|
||||
0000003879 00000 n
|
||||
0000005457 00000 n
|
||||
0000007309 00000 n
|
||||
0000008991 00000 n
|
||||
trailer
|
||||
<<
|
||||
/ID
|
||||
[<ee21ac0bb53ebd0c0824ba6f4e8a65c8><ee21ac0bb53ebd0c0824ba6f4e8a65c8>]
|
||||
% ReportLab generated PDF document -- digest (opensource)
|
||||
|
||||
/Info 13 0 R
|
||||
/Root 12 0 R
|
||||
/Size 20
|
||||
>>
|
||||
startxref
|
||||
10407
|
||||
%%EOF
|
||||
179
Les02-OpenCode-v2/Les02-Lesplan.md
Normal file
179
Les02-OpenCode-v2/Les02-Lesplan.md
Normal file
@@ -0,0 +1,179 @@
|
||||
# Lesplan Les 2: OpenCode - AI Code Assistants
|
||||
|
||||
---
|
||||
|
||||
## Lesgegevens
|
||||
|
||||
| Item | Details |
|
||||
|------|---------|
|
||||
| **Les** | 2 van 18 |
|
||||
| **Onderwerp** | OpenCode - AI Code Assistants |
|
||||
| **Deel** | 1: AI Foundations (Les 1-4) |
|
||||
| **Duur** | 3 uur (180 minuten) |
|
||||
| **Spreektijd** | ~50 minuten |
|
||||
| **Hands-on** | ~85 minuten |
|
||||
| **Pauze** | 15 minuten (10:15-10:30) |
|
||||
|
||||
---
|
||||
|
||||
## Leerdoelen
|
||||
|
||||
Na deze les kan de student:
|
||||
|
||||
1. Uitleggen wat OpenCode is en het verschil tussen Terminal en Desktop App
|
||||
2. De OpenCode Desktop App installeren en configureren met een gratis model (Kimi K2.5 Free)
|
||||
3. Werken met Plan mode en Build mode
|
||||
4. @explore gebruiken om een codebase te verkennen (read-only)
|
||||
5. Een bestaand GitHub project openen en lokaal draaien (in de ingebouwde terminal)
|
||||
6. Wijzigingen maken met OpenCode en deployen via git push
|
||||
7. De @ file mention gebruiken voor context
|
||||
|
||||
---
|
||||
|
||||
## Voorbereiding docent
|
||||
|
||||
### Technische setup
|
||||
- [ ] OpenCode Terminal geïnstalleerd (`npm i -g opencode-ai@latest`)
|
||||
- [ ] OpenCode Desktop App geïnstalleerd (opencode.ai/download)
|
||||
- [ ] Demo project: een v0 repo gekloond en werkend
|
||||
- [ ] Git geconfigureerd
|
||||
|
||||
### Student voorkennis (uit Les 1)
|
||||
- Hebben een werkende v0 website op Vercel
|
||||
- Hebben de code in een GitHub repository
|
||||
- Weten hoe GitHub Desktop werkt
|
||||
|
||||
---
|
||||
|
||||
## Lesverloop
|
||||
|
||||
### Blok 1: Welkom & Terugblik (10 minuten)
|
||||
|
||||
| Tijd | Activiteit | Slides |
|
||||
|------|------------|--------|
|
||||
| 09:00-09:05 | Welkom, planning | 1-2 |
|
||||
| 09:05-09:08 | Terugblik Les 1: v0 workflow + problemen | 3 |
|
||||
| 09:08-09:10 | Vandaag: OpenCode + verder bouwen | 4 |
|
||||
|
||||
**Kernboodschap:** "Jullie hebben werkende websites. Vandaag gaan we die uitbreiden met AI direct in je editor."
|
||||
|
||||
---
|
||||
|
||||
### Blok 2: Introductie OpenCode (10 minuten)
|
||||
|
||||
| Tijd | Activiteit | Slides |
|
||||
|------|------------|--------|
|
||||
| 09:10-09:12 | Wat is OpenCode? | 5 |
|
||||
| 09:12-09:14 | Installatie (Terminal + Desktop App) | 6 |
|
||||
| 09:14-09:15 | Build vs Plan mode | 7 |
|
||||
| 09:15-09:17 | Shortcuts + @explore | 8-9 |
|
||||
| 09:17-09:19 | Vercel deployment workflow | 10 |
|
||||
| 09:19-09:20 | Optioneel: OpenAI API key | 11 |
|
||||
|
||||
**Belangrijk:** We gebruiken Kimi K2.5 Free - gratis, geen API key nodig!
|
||||
|
||||
---
|
||||
|
||||
### Blok 3: Setup & Demo (20 minuten)
|
||||
|
||||
| Tijd | Activiteit | Slides |
|
||||
|------|------------|--------|
|
||||
| 09:20-09:40 | **DEMO's:** Terminal, Desktop App, Plan mode, Build mode | 12 |
|
||||
|
||||
**Slide 12 blijft op scherm tijdens alle demo's:**
|
||||
- DEMO 1: Terminal versie (5 min) - shortcuts tonen
|
||||
- DEMO 2: Desktop App setup (5 min) - project laden + Kimi K2.5 Free
|
||||
- DEMO 3: Plan mode (5 min) - project analyseren
|
||||
- DEMO 4: Build mode (5 min) - nieuwe pagina maken
|
||||
|
||||
---
|
||||
|
||||
### Blok 4: Git & Vercel Workflow (10 minuten)
|
||||
|
||||
| Tijd | Activiteit | Slides |
|
||||
|------|------------|--------|
|
||||
| 09:40-09:45 | **DEMO:** Git push + Vercel auto-deploy | 13 |
|
||||
| 09:45-09:47 | **DEMO:** Preview Deployments (branches) | 14 |
|
||||
| 09:47-09:50 | Nieuw project naar Vercel (voor huiswerk) | 15 |
|
||||
|
||||
**Kernboodschap:** "Push naar GitHub = automatisch live op Vercel. Branches krijgen preview URLs!"
|
||||
|
||||
---
|
||||
|
||||
### Blok 5: Hands-on Opdracht (85 minuten + 15 min pauze)
|
||||
|
||||
| Tijd | Activiteit | Slides |
|
||||
|------|------------|--------|
|
||||
| 09:50-09:55 | Opdracht uitleggen | 16 |
|
||||
| 09:55-10:15 | Studenten werken (20 min) | - |
|
||||
| 10:15-10:30 | ☕ **PAUZE** | - |
|
||||
| 10:30-11:30 | Studenten werken (60 min) | - |
|
||||
|
||||
**Opdracht:** Maak een nieuwe pagina in je v0 project
|
||||
|
||||
1. Clone je v0 repo (of gebruik GitHub Desktop)
|
||||
2. Run lokaal met `npm install` + `npm run dev`
|
||||
3. Met OpenCode:
|
||||
- Maak nieuwe pagina (/about, /services, of /contact)
|
||||
- Voeg minimaal 2 componenten toe aan de pagina
|
||||
- Voeg link op homepage toe naar de nieuwe pagina
|
||||
4. Push naar GitHub → bekijk live op Vercel
|
||||
|
||||
**Tijdens het werken:**
|
||||
- Loop actief rond
|
||||
- Help bij git/npm problemen
|
||||
- Check: werkt lokale server?
|
||||
- Aanmoedigen: meerdere keren pushen en deployen
|
||||
|
||||
**Tussentijdse check (10:45):**
|
||||
- "Wie heeft lokaal draaien?"
|
||||
- "Wie heeft een nieuwe pagina aangemaakt?"
|
||||
|
||||
**Check (11:15):**
|
||||
- "Wie heeft de link op de homepage?"
|
||||
- "Wie heeft 2x gepusht?"
|
||||
|
||||
---
|
||||
|
||||
### Blok 6: Afsluiting (30 minuten)
|
||||
|
||||
| Tijd | Activiteit | Slides |
|
||||
|------|------------|--------|
|
||||
| 11:30-11:40 | Resultaten delen (2-3 studenten) | 17 |
|
||||
| 11:40-11:50 | Samenvatting + Q&A | 18 |
|
||||
| 11:50-11:55 | Huiswerk uitleggen | 19 |
|
||||
| 11:55-12:00 | Afsluiting | 20 |
|
||||
|
||||
---
|
||||
|
||||
## Materialen
|
||||
|
||||
- **Slide-Overzicht:** Les02-Slide-Overzicht.md
|
||||
- **Lesopdracht:** Les02-Bijlage-A-Lesopdracht.md
|
||||
- **Huiswerkopdracht:** Les02-Bijlage-B-Huiswerkopdracht.md
|
||||
|
||||
---
|
||||
|
||||
## Veelvoorkomende problemen
|
||||
|
||||
| Probleem | Oplossing |
|
||||
|----------|-----------|
|
||||
| OpenCode installeert niet | Check Node.js ≥18 |
|
||||
| `npm install` faalt | Delete `node_modules`, probeer opnieuw |
|
||||
| `npm run dev` werkt niet | Check of je in de juiste map staat |
|
||||
| Git push rejected | `git pull` eerst, dan push |
|
||||
| Vercel deployt niet | Check GitHub repo permissions |
|
||||
| Kimi K2.5 traag | Normaal, gratis model is iets langzamer |
|
||||
|
||||
---
|
||||
|
||||
## Alternatieve AI providers
|
||||
|
||||
| Provider | Kosten | Setup |
|
||||
|----------|--------|-------|
|
||||
| **Kimi K2.5 Free** | Gratis | Geen key nodig (via OpenCode Zen) |
|
||||
| **OpenAI (GPT-4)** | Betaald (~$0.01/prompt) | API key via platform.openai.com |
|
||||
| **Groq** | Gratis tier | API key via console.groq.com |
|
||||
| **Ollama** | Gratis (lokaal) | Installatie + model download |
|
||||
|
||||
**Aanbeveling:** Start met Kimi K2.5 Free. OpenAI voor wie extra kwaliteit wil (kost geld).
|
||||
332
Les02-OpenCode-v2/Les02-Lesstof.md
Normal file
332
Les02-OpenCode-v2/Les02-Lesstof.md
Normal file
@@ -0,0 +1,332 @@
|
||||
# Les 2 — Lesstof
|
||||
## OpenCode — AI Code Assistants in de terminal
|
||||
|
||||
**Vak:** AI Fundamentals
|
||||
**Opleiding:** NOVI Hogeschool Utrecht
|
||||
**Vorige les:** Les 1 — Introductie AI + LLMs
|
||||
**Volgende les:** Les 3 — Cursor Basics
|
||||
|
||||
---
|
||||
|
||||
## Inhoud
|
||||
|
||||
1. [Het idee — AI als pair-programmer](#1-het-idee--ai-als-pair-programmer)
|
||||
2. [Wat is OpenCode](#2-wat-is-opencode)
|
||||
3. [OpenCode vs Cursor vs Claude Code](#3-opencode-vs-cursor-vs-claude-code)
|
||||
4. [Installatie + setup](#4-installatie--setup)
|
||||
5. [Basis-workflow in OpenCode](#5-basis-workflow-in-opencode)
|
||||
6. [AGENTS.md — context geven](#6-agentsmd--context-geven)
|
||||
7. [Plan mode vs Act mode](#7-plan-mode-vs-act-mode)
|
||||
8. [Slim werken — context-management](#8-slim-werken--context-management)
|
||||
9. [Limitaties + valkuilen](#9-limitaties--valkuilen)
|
||||
10. [Productie-workflow tips](#10-productie-workflow-tips)
|
||||
|
||||
---
|
||||
|
||||
## 1. Het idee — AI als pair-programmer
|
||||
|
||||
In Les 1 zag je hoe AI je kan helpen prototypes maken (v0.dev → website in 10 minuten). Vandaag een ander gebruik van AI: **in je terminal, naast je code, als pair-programmer**.
|
||||
|
||||
Dit type AI-tool noemt men een **coding agent**. Verschil met chat-AI:
|
||||
|
||||
- Chat-AI (ChatGPT): typ prompt → antwoord in browser. Jij implementeert handmatig.
|
||||
- Coding agent: typ prompt → AI **bewerkt direct je files**, runt commando's, ziet errors, fixt zelf.
|
||||
|
||||
OpenCode is zo'n coding agent — open-source, in je terminal, werkt met elk model (OpenAI, Anthropic, Gemini, lokale modellen).
|
||||
|
||||
---
|
||||
|
||||
## 2. Wat is OpenCode
|
||||
|
||||
**OpenCode** is een open-source CLI coding agent. Geïnstalleerd via npm, je runt 'm in je project-folder en chat met AI die direct in je codebase werkt.
|
||||
|
||||
### Kernfeatures
|
||||
|
||||
- **Multi-model** — kies OpenAI, Anthropic, Google, OpenRouter, Ollama (local)
|
||||
- **Tool calling** — AI kan files lezen/schrijven, terminal commands runnen, tests draaien
|
||||
- **AGENTS.md** — een markdown-file in je repo die AI als project-context gebruikt
|
||||
- **Plan mode** — AI maakt eerst een plan voor je akkoord geeft (veiliger)
|
||||
- **Open-source** — gratis, audit-baar, geen vendor lock-in
|
||||
|
||||
### Wat krijg je niet (vs. paid tools)
|
||||
|
||||
- Geen visuele editor zoals Cursor
|
||||
- Geen IDE-integratie (werkt in terminal)
|
||||
- Geen background agents zoals Cursor's cloud agents
|
||||
|
||||
Voor: developers die in terminal werken, willen experimenteren met models, of geen subscription willen.
|
||||
|
||||
---
|
||||
|
||||
## 3. OpenCode vs Cursor vs Claude Code
|
||||
|
||||
Drie populaire coding-agents in 2025. Allemaal anders.
|
||||
|
||||
| | OpenCode | Cursor | Claude Code |
|
||||
|---|----------|--------|-------------|
|
||||
| **Type** | CLI (terminal) | Full IDE (VS Code fork) | CLI (terminal) |
|
||||
| **Cost** | Gratis (API-cost zelf) | $20/mnd Pro | $20/mnd Pro |
|
||||
| **Model** | Elk (provider keuze) | Cursor's models + own keys | Alleen Claude |
|
||||
| **Best voor** | Backend, scripts, experimenteren | Frontend, IDE-flow, leerlingen | Diepere code-tasks, agents |
|
||||
| **Curve** | Steiler — terminal | Vlakker — IDE | Steiler — terminal |
|
||||
|
||||
**In deze leerlijn:**
|
||||
- Les 2: OpenCode (begrijpen wat een coding agent doet, terminal-flow)
|
||||
- Les 3: Cursor (full IDE-ervaring)
|
||||
- Later: combineer beide naar smaak
|
||||
|
||||
Veel pro-devs gebruiken **beide** — Cursor voor IDE-werk, OpenCode/Claude Code voor swift terminal-tasks.
|
||||
|
||||
---
|
||||
|
||||
## 4. Installatie + setup
|
||||
|
||||
### Installeren
|
||||
|
||||
Eén command:
|
||||
|
||||
```bash
|
||||
npm install -g opencode-ai
|
||||
```
|
||||
|
||||
Of via brew:
|
||||
```bash
|
||||
brew install opencode-ai/tap/opencode
|
||||
```
|
||||
|
||||
### API key
|
||||
|
||||
OpenCode heeft een model nodig. Twee opties:
|
||||
|
||||
**Optie A — OpenRouter** (aanbevolen voor leerlingen)
|
||||
- Account op openrouter.ai
|
||||
- $5 credit toevoegen — werkt met alle modellen, prepaid
|
||||
- Eén key voor OpenAI, Anthropic, Google, etc.
|
||||
|
||||
**Optie B — Direct provider**
|
||||
- OpenAI key, Anthropic key, etc. — directe billing
|
||||
|
||||
### Configureren
|
||||
|
||||
```bash
|
||||
opencode auth login
|
||||
# kies provider, plak key
|
||||
```
|
||||
|
||||
Of via env:
|
||||
```bash
|
||||
export OPENROUTER_API_KEY=sk-or-v1-...
|
||||
```
|
||||
|
||||
### Starten
|
||||
|
||||
In je project-folder:
|
||||
|
||||
```bash
|
||||
cd ~/projects/mijn-app
|
||||
opencode
|
||||
```
|
||||
|
||||
Terminal opent een chat-interface. Type je vraag.
|
||||
|
||||
---
|
||||
|
||||
## 5. Basis-workflow in OpenCode
|
||||
|
||||
### Workflow 1 — Quick file edit
|
||||
|
||||
```
|
||||
[opencode] > Voeg een README.md toe met basic install instructions
|
||||
|
||||
AI: [maakt README.md aan]
|
||||
Je accepteert.
|
||||
```
|
||||
|
||||
### Workflow 2 — Multi-file feature
|
||||
|
||||
```
|
||||
[opencode] > Voeg een /about pagina toe in Next.js. Match de styling
|
||||
van de homepage.
|
||||
|
||||
AI: [leest app/page.tsx voor stijl, maakt app/about/page.tsx]
|
||||
Diff getoond. Je accepteert per file.
|
||||
```
|
||||
|
||||
### Workflow 3 — Bug fix
|
||||
|
||||
```
|
||||
[opencode] > De Send button werkt niet. Console toont een TypeError.
|
||||
|
||||
AI: [leest console output, vindt de bug, fixt 'm]
|
||||
```
|
||||
|
||||
### Slash commands
|
||||
|
||||
- `/init` — genereer AGENTS.md voor dit project
|
||||
- `/clear` — clear conversation history
|
||||
- `/model` — switch tussen models
|
||||
- `/plan` — toggle plan mode
|
||||
|
||||
### Approval-flow
|
||||
|
||||
OpenCode vraagt approval voor:
|
||||
- File-edits (per file, diff zichtbaar)
|
||||
- Terminal commands (per command)
|
||||
|
||||
Goeie gewoonte: lees diff voordat je accepteert.
|
||||
|
||||
---
|
||||
|
||||
## 6. AGENTS.md — context geven
|
||||
|
||||
**AGENTS.md** = een markdown file in je project-root die AI gebruikt als "project context". Vergelijkbaar met `.cursorrules` (Cursor) of `CLAUDE.md` (Claude Code).
|
||||
|
||||
### Wat zet je erin?
|
||||
|
||||
```markdown
|
||||
# AGENTS.md
|
||||
|
||||
## Project
|
||||
- Naam: QuickPoll
|
||||
- Stack: Next.js 16, TypeScript, Tailwind, Supabase
|
||||
- Hosting: Vercel
|
||||
|
||||
## Conventies
|
||||
- Use Tailwind classes, geen CSS-files
|
||||
- Server Components by default, "use client" alleen waar nodig
|
||||
- Maak geen comments tenzij gevraagd
|
||||
- Run `pnpm lint` na elke file-edit
|
||||
|
||||
## Belangrijke files
|
||||
- `app/` — Next.js App Router pages
|
||||
- `lib/supabase.ts` — DB client
|
||||
- `types/database.ts` — generated DB types
|
||||
```
|
||||
|
||||
### Effect
|
||||
|
||||
AI gebruikt deze context bij elke prompt. Geen "ik gebruik Next.js met App Router" herhalen — AI weet het al.
|
||||
|
||||
### Best practice
|
||||
|
||||
Genereer eerst met `/init`, edit daarna handmatig. Hou 'm tussen 50-200 regels.
|
||||
|
||||
---
|
||||
|
||||
## 7. Plan mode vs Act mode
|
||||
|
||||
OpenCode heeft twee werkmodes.
|
||||
|
||||
### Act mode (default)
|
||||
|
||||
AI doet direct wat je vraagt. Snelle iteratie. Voor: kleine taken, je weet wat je wilt.
|
||||
|
||||
### Plan mode
|
||||
|
||||
AI maakt eerst een **plan** in tekst — welke files, welke wijzigingen, welke risk. Jij keurt af/goed. Pas daarna doet AI de wijzigingen.
|
||||
|
||||
```
|
||||
[opencode] > /plan
|
||||
[plan-mode] > Refactor /lib/auth.ts naar gebruik van Supabase auth
|
||||
|
||||
AI Plan:
|
||||
1. Lees lib/auth.ts huidige logic (~80 regels)
|
||||
2. Vervang door @supabase/ssr client
|
||||
3. Update import in 3 files: app/login, app/api, middleware
|
||||
4. Genereer types via supabase gen types
|
||||
|
||||
Akkoord? (y/n)
|
||||
```
|
||||
|
||||
Voor: complexe refactors, onbekend gebied, code je niet wilt breken.
|
||||
|
||||
**Vuistregel:** plan mode bij twijfel. Kost je 30 seconden extra, voorkomt uren herstelwerk.
|
||||
|
||||
---
|
||||
|
||||
## 8. Slim werken — context-management
|
||||
|
||||
AI heeft een **context window** — wat het tegelijk kan onthouden. Bij OpenCode meestal 128k-200k tokens. Voelt veel, maar in een groot project ben je er snel doorheen.
|
||||
|
||||
### Tips
|
||||
|
||||
**Start nieuwe sessie per feature** — `/clear` na elke voltooide feature voorkomt context-pollution.
|
||||
|
||||
**Geef expliciet de juiste files** — AI hoeft niet je hele repo te lezen. "Werk in app/auth/login.tsx" is beter dan "fix de login".
|
||||
|
||||
**Houd AGENTS.md compact** — meer is niet beter. AI leest dit bij elke prompt.
|
||||
|
||||
**Skip large generated files** — node_modules, .next/, dist/. OpenCode doet dit by default maar check.
|
||||
|
||||
### Wanneer crasht context
|
||||
|
||||
- Mega-files (>5000 regels)
|
||||
- Veel back-and-forth in één sessie (>50 berichten)
|
||||
- Veel terminal-output (test-failures, log-dumps)
|
||||
|
||||
Symptoom: AI vergeet eerdere instructies, hallucineert files die niet bestaan. → `/clear`, herstart, kleinere scope.
|
||||
|
||||
---
|
||||
|
||||
## 9. Limitaties + valkuilen
|
||||
|
||||
### AI maakt fouten
|
||||
|
||||
- Verzint imports die niet bestaan
|
||||
- Gebruikt verouderde APIs (Next.js 14 syntax in een Next.js 16 project)
|
||||
- Hallucineert function-signatures
|
||||
|
||||
**Maatregel:** lint na elke change, draai tests, lees diff.
|
||||
|
||||
### AI is overtuigd van fout
|
||||
|
||||
Een fout antwoord klinkt soms net zo overtuigend als een goed. AI presenteert beide met evenveel zelfvertrouwen.
|
||||
|
||||
**Maatregel:** vraag "weet je dit zeker?", "geef bronnen", "test dit met de runtime".
|
||||
|
||||
### Over-engineering
|
||||
|
||||
AI maakt soms te veel — wrapper-classes, abstracties, type-gymnastics. Voor productie OK, voor leren niet.
|
||||
|
||||
**Maatregel:** "houd het simpel, kortste werkende versie".
|
||||
|
||||
### Onveilige commands
|
||||
|
||||
AI kan `rm -rf` voorstellen, of `git push --force`. Standaard moet je goedkeuren — maar dat is jouw veiligheidsmechanisme.
|
||||
|
||||
**Maatregel:** lees commands voor accepteren. Bij twijfel: weiger.
|
||||
|
||||
---
|
||||
|
||||
## 10. Productie-workflow tips
|
||||
|
||||
### Tip 1 — Klein per commit
|
||||
|
||||
AI kan een uur aan code in 10 minuten schrijven. Verleidelijk om alles tegelijk te doen. **Commit per logische eenheid** — kleinere PRs, makkelijker review, makkelijker rollback.
|
||||
|
||||
### Tip 2 — Test direct
|
||||
|
||||
"AI heeft het gemaakt, maar werkt het?" — runnen. Lint, build, unit tests. AI ziet eigen fouten via test-output en kan ze fixen — als je 'm de output geeft.
|
||||
|
||||
### Tip 3 — Lees diffs
|
||||
|
||||
Sla geen diffs over door snelheid. Aandachtig lezen voorkomt dat verkeerde wijzigingen in main belanden.
|
||||
|
||||
### Tip 4 — AGENTS.md als living doc
|
||||
|
||||
Update AGENTS.md als project evolueert. Nieuwe afspraken, nieuwe libraries, nieuwe gotchas → erin. AI-output verbetert.
|
||||
|
||||
### Tip 5 — Combineer met handmatig denken
|
||||
|
||||
AI is sneller, maar jij snapt de business. Architectuurkeuzes, productdecisies, security-tradeoffs — daar ben jij verantwoordelijk. AI is een hulp, geen vervanger.
|
||||
|
||||
---
|
||||
|
||||
## Bronnen
|
||||
|
||||
- **OpenCode docs:** https://opencode.ai/docs
|
||||
- **OpenCode GitHub:** https://github.com/sst/opencode
|
||||
- **OpenRouter:** https://openrouter.ai
|
||||
- **AGENTS.md spec:** https://github.com/openai/agents.md
|
||||
- **Cursor rules vs AGENTS.md:** https://docs.cursor.com/context/rules
|
||||
- **Anthropic — Building effective agents:** https://www.anthropic.com/research/building-effective-agents
|
||||
200
Les02-OpenCode-v2/Les02-Lesstof.pdf
Normal file
200
Les02-OpenCode-v2/Les02-Lesstof.pdf
Normal file
@@ -0,0 +1,200 @@
|
||||
%PDF-1.4
|
||||
%<25><><EFBFBD><EFBFBD> ReportLab Generated PDF document (opensource)
|
||||
1 0 obj
|
||||
<<
|
||||
/F1 2 0 R /F2 3 0 R /F3 4 0 R /F4 7 0 R
|
||||
>>
|
||||
endobj
|
||||
2 0 obj
|
||||
<<
|
||||
/BaseFont /Helvetica /Encoding /WinAnsiEncoding /Name /F1 /Subtype /Type1 /Type /Font
|
||||
>>
|
||||
endobj
|
||||
3 0 obj
|
||||
<<
|
||||
/BaseFont /Helvetica-Bold /Encoding /WinAnsiEncoding /Name /F2 /Subtype /Type1 /Type /Font
|
||||
>>
|
||||
endobj
|
||||
4 0 obj
|
||||
<<
|
||||
/BaseFont /Symbol /Name /F3 /Subtype /Type1 /Type /Font
|
||||
>>
|
||||
endobj
|
||||
5 0 obj
|
||||
<<
|
||||
/Contents 16 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 15 0 R /Resources <<
|
||||
/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ]
|
||||
>> /Rotate 0 /Trans <<
|
||||
|
||||
>>
|
||||
/Type /Page
|
||||
>>
|
||||
endobj
|
||||
6 0 obj
|
||||
<<
|
||||
/Contents 17 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 15 0 R /Resources <<
|
||||
/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ]
|
||||
>> /Rotate 0 /Trans <<
|
||||
|
||||
>>
|
||||
/Type /Page
|
||||
>>
|
||||
endobj
|
||||
7 0 obj
|
||||
<<
|
||||
/BaseFont /Courier /Encoding /WinAnsiEncoding /Name /F4 /Subtype /Type1 /Type /Font
|
||||
>>
|
||||
endobj
|
||||
8 0 obj
|
||||
<<
|
||||
/Contents 18 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 15 0 R /Resources <<
|
||||
/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ]
|
||||
>> /Rotate 0 /Trans <<
|
||||
|
||||
>>
|
||||
/Type /Page
|
||||
>>
|
||||
endobj
|
||||
9 0 obj
|
||||
<<
|
||||
/Contents 19 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 15 0 R /Resources <<
|
||||
/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ]
|
||||
>> /Rotate 0 /Trans <<
|
||||
|
||||
>>
|
||||
/Type /Page
|
||||
>>
|
||||
endobj
|
||||
10 0 obj
|
||||
<<
|
||||
/Contents 20 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 15 0 R /Resources <<
|
||||
/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ]
|
||||
>> /Rotate 0 /Trans <<
|
||||
|
||||
>>
|
||||
/Type /Page
|
||||
>>
|
||||
endobj
|
||||
11 0 obj
|
||||
<<
|
||||
/Contents 21 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 15 0 R /Resources <<
|
||||
/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ]
|
||||
>> /Rotate 0 /Trans <<
|
||||
|
||||
>>
|
||||
/Type /Page
|
||||
>>
|
||||
endobj
|
||||
12 0 obj
|
||||
<<
|
||||
/Contents 22 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 15 0 R /Resources <<
|
||||
/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ]
|
||||
>> /Rotate 0 /Trans <<
|
||||
|
||||
>>
|
||||
/Type /Page
|
||||
>>
|
||||
endobj
|
||||
13 0 obj
|
||||
<<
|
||||
/PageMode /UseNone /Pages 15 0 R /Type /Catalog
|
||||
>>
|
||||
endobj
|
||||
14 0 obj
|
||||
<<
|
||||
/Author (NOVI Hogeschool Utrecht) /CreationDate (D:20260607080655+00'00') /Creator (\(unspecified\)) /Keywords () /ModDate (D:20260607080655+00'00') /Producer (ReportLab PDF Library - \(opensource\))
|
||||
/Subject (\(unspecified\)) /Title (Lesstof) /Trapped /False
|
||||
>>
|
||||
endobj
|
||||
15 0 obj
|
||||
<<
|
||||
/Count 7 /Kids [ 5 0 R 6 0 R 8 0 R 9 0 R 10 0 R 11 0 R 12 0 R ] /Type /Pages
|
||||
>>
|
||||
endobj
|
||||
16 0 obj
|
||||
<<
|
||||
/Filter [ /ASCII85Decode /FlateDecode ] /Length 2096
|
||||
>>
|
||||
stream
|
||||
GauHL>BcPr&:XAWQuhtpBcBnp5X=5ToThYn?FJ_W_e'tr<c#`[>TkK,q=QfN%+l%"EI>4:8O48Sk54eq8:lGQ5IC>-VZ?2*nE(r!b$]T+e?rNuT>QHSki^#rSGB;mQ4qnGaM8-'o+0>mP_$k,*jUko@/F!_]ANnC$A'r3L?!ZRqOdsr^D]tRHuAh4$W]MU*q6<%Nl;mRWEm^-4PUo``tt-46AsIC@@5Ru3^X9YK5/%[Y%:PXpL'N.d?h$QBCIpRMB\YRGliJ/-/t>I9?)?=3J7(c<[@K-W0]3PJak6H6-#tJ",+JgFf4Ds.!0oD3VaFbAJP=63;ALBXupZ(LW(9Kq4Zsoo/l1WE?(=*>i2SA[3<AQcseml4WU\Ni3;pG6Tf*i.!7)qo;EP][W0L\BaB\W9#JfORB1+Z8"K'Y<);)PfW@*ESLbi8(e0+,C]!rmdu'#%bso4A((C?-+EiLVE(YriaN!2C1C%2HIaH'ZI*3"905.VsYdS9nCK_/?k,#oN[+MK>]:J<AfSq]5ngFr\$d?#G7mkLZ<C3+G9)!6fiZ-aL"q$:=\^?NljtlZNk(&L9g9r*+U^O7:DQVo@iKs4fQM&&Hkr#h77a:kpo]nhSVti_;=]N2+'SS)[Pj&6[#2#T&8hj>/7l(;rnP*<*9^*HP)=DLV1&*c7bO-)o(nt;jc^J=O)K16A<'q4"ot+Ns:gjQh@CC>W<lCbkB`<0,k\a?C$H`o7e2L\-NGO#JAs4VXR?!H)G8aG9]iX^$93!O$a5\9,IQROaC?S^fq[oGJ;j!bq&hsO*?3!Yg30eLn<Om^*;'FueQ2&'JD511Y_gO&N[,0/FCZ%75_=jJqq^63m.gnTB.;h.SQ2=[1i(&hq8fNOMf0Rj#TWGB*I!.L6aLUEl#W?c1[DBudk'/*26tXp8Tm_:SVMg@;a_>B>]0=FgctX<@19L,h1=f?jW*[C;q/=MmXL[("a/6a?bIU-F)rdHM4*C"4](iWffQgG">8Z3F]KFNE8pt@*/72.uK5+""oA%W]K1d9Rk^i?43$6F6CA#U1g@`jl1Y%[En?:/)K:Ia@s"FLZ6rK/$b,6^];ka3)4SjbpRF&lS&e[cf<b0,5nmua,8-M3`'l4-jHqu6kN0&nu<]d<Ic,a1DW!e2'2N+h[2b<Zc+IsYuh*"%^kCqZ"Q(6tcM3cf&K'bC>a_a?'d]@gGc,ep5Y_*MG%O$Gk8]4bd#G`W%9W<@JL!\"sJaO0(Fq@Q[n&B)a"KOHaX1]l];go*pQ`Kq)P2DZP@9;M2\Q\;h#);C@0]e9)5e_/Z48JO-bP6jX:9*k#kF!+cBUIeY.5T=2M/XQc762TfmNcB,:>CW(Ac;\bqj+O+8X)MEVtiocb@^q0-O]8bBq<sTXNTdtE">mtJcTib/S[K_RDPLkF-3RV1eFGN(YG7Y%/>>eBLjVjG/7CXSMV=`VM,+cfXIZIb>`4T[gK3M[o"nfb,!I28<Tj2OJZe@hSYjhliDA*(&@-ng/^*`(I`UQZ-C*qUR.A)#9`bI/ssg6k'Oc81s-Bdb2Bh.;/3q/Ze4;NB^34#TQXR:kX-/NZ`LkOgdb;Q&MVDORfGXsZ)#T3Jf=f"3',[k0$l;3b+q,1[B5:q?/7T4oqf61*oFIRe302,=,#/@lq,ilb&"&:/hOShn4&'c#a)5C+(:@0=M:of;U/.u)2@j.l`PlCDV?`ba,i_eThUa(d#NHEmG)+G2;>G'nNN8p7nJ._2&Q0DI%nln/^$S?72hR^\6FJ;DS5m5\Q*L#$5Z%fj\I3_>XLWko.#popoVP`6u2ldiE"EVXE[KK\>6jr)l,jeO)]Mq(ce^#5ZsPR:Z'0Y0Ad\bNH!@#I_&.H9]+sBRM_H!WVin1b(=!^%EK7Pk%<oj6>;g\5Z95>ds_<$mAH-IJ\JhIH.nD8o4Z#ff[TJW0\`dcM,YZOZgo#YU1.'Pa.S_9auN7;GFmkKMIX/_W,JA/Y41OVi\Bk-,hLdEpQkEDXG^E[Lnq$p\HSk@38kVB5(A\\2_1qdD%=gdaHnBr1:(,;.bH(<75?OB@gVGLGWe&KL6G<W<5+IaEDu3f#okCT+j&nE,,u7:T"PFJ7fNMJQ8-D~>endstream
|
||||
endobj
|
||||
17 0 obj
|
||||
<<
|
||||
/Filter [ /ASCII85Decode /FlateDecode ] /Length 2092
|
||||
>>
|
||||
stream
|
||||
Gb!Sl=a/Rh'Roe[\.:_M,R%<hm='-9V6j"W`704oAO$?`OYh/:_MNbjmu/"bB!^7PVDZAD\T=,+mULg)%nlpCVZ?/jE-u)F7:7eMb:stR>f$6okg(K+Gf4f20^QT^6NT_jWuho%UC:DRn3Rak&=C0Dp^T97AHY:9!5W`jDttLm9\pdm@/->X#7_T%ja)LPjLf>SKV3#!E'5jZ5@<Xk..opEX0b5Ob?ne7'NSdE_pro=drKjQ"t=XXID5*d07:q5nK$d!r%8-lhanXtikoIPcId^pI*TZ7(u3$eSJ':Yl?E>ui;'EIY?7Ah4t2n)dqP=L+>!e)&Aaff7k1ooLD[J[\VU/!!n1ojG']gXT*_+;kkG3Fe1_L%_[\EZ%k8aJiU`RN+*b_)eCuD/o?EU!'d8HYMJc>)[4G7u1._'gVU/J.USCH1FHd8oAUkV1]pomJbi$B=+3$F#ZRO6MbG50*ChUG0Q:mYlN/7fU0njG8G2]$D-o)*I;M[.%BeK0D)p@)k-P7$-ZJ)V0p^U"nR8eWp@YR\N[B,C^4>rooK*N`8dPq5eQG:ce<XJg&laf0J`Z:(7W^+2V2^Yg:UTtF^h^Z/C@+T)tJuQL;jXbCO3EtT[I6PFXHX?%iPq@9IYqrb7J#ea@A[n$@=H0D[%!RHJa!-Xc01BM!:Ei6*dk#*Bd%9sCE14m1_<:?u$^[AZ'@t]@IH?/n!oG@39dpK4#p7W,pi`^h!J:2pd+#@m$-b`c-aY,7]\&/P`q>:&0SpI]-t//f43"QQiqio&\q#m<=G`+E:K*]N\OrBnr$Iaj7"Wj3R4]FDZ@ga2WL!3NOA7IT57MLh1tmnMW\c.>Z\UhV4bZh"rIW;)XpG@W:%G0;N-Qc'2[ND@&k+pH42<$%l[`!XH6tW'#t@FrW<h,7P>XH*Lm#iU`bMYO/3"FQ,W_FR]*Q5\'C:gO"cJRhb/DTD,-QgFMa7*NCcn1qR0kG(]F2*&@bD\tMNqbQ^qm+0&/d#OZX3PdDn^&R*3L%SA">u0nJPs6<&l@bRJ'9k^mrCV8?<[(%du4p`GpNsFd.BN,.,"lOh%mBr)1-Vc3oB[cHq:/Z:D'\r'MWJ/q1$hIYi4GZZ?O?a`O=6MuZ#YW7"_ur#[IY?Xi)PNb;;,M_$?5_L0=\DfQ[B]VrS,4;f0[>a_UaV:[BN_\7jk*?j#dU]n@O-<5hLLiI=WJ:0eb3(4:E:n7m@<KB1C?#X)r73sTVq,kRV)=spjG/,fs&DXW4Z@.#&6`VC*]?>hD1g:&5C'WsH$._Weh[`m<CbK&@kZP]n#m>S"k=%^WLp*+u?54:?!+HSmJ5\iH4'D\Fm@\[3j4G&464SYt;s0\%C>2*plE+)MC)Y=^%5^PQem0j#CTl9fd+car-SOED"FKs-h)=M`5h9.+b@;Um=)W^eQXu)"L>sN)MP@FcpM>s*>]W6P#oiF_ot!S.HbSH@^:bfK(lR^^/_jch=YB;un+/+<0(#W/e_W@RCok/dmAc1P'M5$631dgsd2KoUMqPQ192hH/ecW"gR[iP]O$ONBV4N'rpZZfB7q%no+'CAPCKGZT-Xn-p=KSb1hdaa$#<ZsR:&2'I&%C:iOe*pV1]Z_77BEWoAup5fHS)2A2Q`f,ddT'Ng41`gkBdW;cE$eo-+s`+D'i[S;7,e3#Len1*j]U%m"RKKG+i^ffK`Jab8pa9/f-kA2i<S5+XRMFk^pBQ;(Lce*fZ9sO0b4Ii:6rG-YYbCU[i^E?ElJk_-QD#XHN-DihD"<e'iO^k'ILf:YmG.Zd^AM`'"kV-;Lt.?h&E&UO*O`)uBa-"39!%R/qI>pj.3r\F@j%J94ple].f1[a-2:ndO$%D!g:a(c2BmqrZUsf$A;=H"<2(n$A5V/^_E9BdrNN[2WAU*6?6BRMg9<3(1g]p_b,d\H95n+sGr>/oOX0`p=bKJ,BaB@:5_W;r"T5WObrfM$4W-qL<j9\>&2h'6WIqMDL3;(boh0OPq)g\[q2gHr[DpG382%!4OlB1YaaOW-b?^Xp]N'TnMr9>rpJsFL6LdD^+I<>M[=J&#nrjgI1LMCZHpYnqVJ<[/+B".#[]u91A%_SpFJ(+uoE,Y[ff'~>endstream
|
||||
endobj
|
||||
18 0 obj
|
||||
<<
|
||||
/Filter [ /ASCII85Decode /FlateDecode ] /Length 1500
|
||||
>>
|
||||
stream
|
||||
Gb"/'hf%7-&:W5<EPV:0Ftl]h'M/bdK@;0:Z(h%KGJJ_/Kd,!S&m=j;`E?RA\*k_JZ>:nJh#qGs/N,/<(@SuLn)NpT"r(FGr/@NR7g%tH0OPk),@H*/(qbL]JbQ'4\E$6b5^Z<)O95f;pBUNHb92m7L-0">W?PLP&=O356Ob$u.E*"^#"GdZ#"2%_ZiHh'+LU!nmh<f'\eZQQ1>JD7`2=WgON8_/KNZ"9(d>d%5rD\k5q!+?!.u^?]KcA.&&6c%RE#tV;ts2M-Ctojagm"0+5WH?8aXa_Y@);YK@eC7bG^L@6]c'=kW:Sm(Nraq3K(mK(4k?uE/kg;/P*U/V77d3TE6qLq#n1^;io:5pB5P:Aq?9_*=)`FCgKMD)AS*[+(/uDgY!KsHSNT<[kY,0kN6n#K4lrp;CK,pYQS?SPO7:1XZ=CGbP)+1:m/2KAEi@RdLTFaZ(4XbD#!$#hN4i^e>5+@-jq=NZ+3mAG=qL(\qC;J*l?D?8l[?Y`_oTGl6`Zg)Q?@r"]aq%>sB!Lc'ZgM,P<(G@CY$+X1j8,.=T<_mZMmT.':Z9g<?89<p\5!RhTcZ'[%pUS?&iu2t>&0k[%9/]-dZs1;f@?jg&V5&X&53/t8ojHo@H\;Gdpp1#S5:@QQE;.!\M]P0&H<]t$?J_'4`o.Q;Q5&0E;qHm+.BM17_K?0WBk>I8U4B\'<S+4EK*'tu$WWJ.6oeqY49Ba6Nb25bd.%jQFROhnu';$"[I0ZDc\1-81L"9s(i?okOic?BjIPq=E=mOP2HW$R68=9le[q-LJb3*[9n[TMs"/)1AKGn<EtQ!)`R_(Mh6+Z1TBPAG'@b?#4+Cc5$3F:0?GJ$*A3A;<*,69QF`WqY8t<kPjsI`[h#&>[WC^mJ^c?[L2RMdq+'(!'LViOmAWfdL1iCJf*JE`&rdm1n1GaAm,48HFN6h@1*'WT;@c2[)lL!H*guP`)P$KNW2);)8&SfIn*7;q_7'!L:a^MWj^DTpHLXgs2)X&:V'2S=2f!781-tS3OAOKhqHA(OWPq\4(^CV>kCa?"SZ0[Yn\+elt>Fo]R)D]l0LEMB0`<MkTFeYuBb"=Q[fB<Kaq6[6%q:m^):2Deq=(`jbb]*NdXJFqioemkf\n65g!.h/<Qj(mBh7%>Rd'LK4]G&_DCe2ba\.N6mhE](5O2r<UHRgrZd:8EucKU>',YWQ!oLrJ.lZ\s`$F#']EGAR[r!URSB/i]b)UW;6G@-Iu^c*EiUf+C8E'I:<)$>$1CJbiT)!SfPS\3;kNj^A*LIjMtVgs7g;We$412_)d72`tZ=o&h]#dC8q$2M"5#A.YHu$q:nbgr=#ig;u/B&f$;@6W:q>)a+Agi'n-6tW;g+6MhgeGG=gH"4&)la:,JI-?JK]eNA4ct'^mWSJ]Xf](0,"`l<k<%U8!i^fMR^(f\kHHe''f=/b1;.D`;(YG^)K`$DbR\mfPUm^B`_=r9l0ZE"pQ\H0<K82l"m6__'B9]a_($r<$4BYWi~>endstream
|
||||
endobj
|
||||
19 0 obj
|
||||
<<
|
||||
/Filter [ /ASCII85Decode /FlateDecode ] /Length 1785
|
||||
>>
|
||||
stream
|
||||
Gb!#\gN)%,&:N/3m,Y!`a+aWaSsd%Ipl`4P9@G<R6_"CMJgf=eTn8ArjQjDX.?KE5.o&u$PXZA'`U6mqT#Hj$."7Q^c"6rO7W<UlJ8lE#JGI-=d5*a&%K74V*qIA_J9WgA&e62WbQ018<"O^.9R+DsV@eY0+8hLg3)3r@3%p.k"A6Jjk5bYtKf"[8+>F8@34q-+,9c5`g*]0'-D/V&n\k]=6GaKY_JHrb$mf$APgepnKX)^-?o3MpMjJA.iHL]J3h&`E_AfUF2Uuc_Gm$Y#E$CUBP]NPl?uuRIT8eDn;Ep,fKeQ\3qFoDHQBOe[T4qV2.JQ%0YAaYH)FE;tMEFYnJGQeHAq=*kTV%k.IA5X=K84)ONGO\cZO"I`V7N7_nchN6L0'9W]7rmS$4u5aY<ghI-4D:lN$SZ:@?`&]`lajAR%%1e0Xuc@31dp%i($WXB/`j$r0Wq0h2k9aOAMQ=rK2=NP79RPLdWd&I&h!>QB6bi2R+1^&Sm(?!]P_2\r1TZs5LP4Rs)qfB.FqJ%SV]q%Vn/@o;;DS%Aj5seE55ul0uoP`5VtIZVAbPpl&e(6gt0jH;SL"k8bmRQ-$:U&&5tc.<5uoK"k'A:7e)@fbh(10G>?We%3VnW+qlhV*1kJV@-PWRko1ubOZ!O)Rm_p96"3N6T#89kkm0JS#,AWmbp^clM]P)<bJ2e%fpC1M7FBgBsNX(aEa,#hi.uUTu-CiWJ^jOKo&@n6AaN7#^AZaNICjc7#<@K2!D9^S3;o<NX`8F$986,`3@'`3&\8Yg*refXTrH*&<Xd&4E^rM%b"(]cnKB1X._pY_$fd!PH1.fo2K@$(^m;8a0MZ7]@4,_53O$1Zna\>E[K.n+TDnQ8g.pYl$RqnNTg3@/>Z;O]soQdTjaM&D*<&/pRpA70pt9Z[$9+.^`!dcpGKQ5lssWlR:F$VA#.^1o#W(G&0H)Ed.\q[I/aGE@1Zha_C4m%0Sg%sGW6TG8Lrj5\.M(qGN!6!7VJ]YG.&HZLAd';Vr<J_f:j2$j[*`c_2V9YUK&HoJRdJb,aMJpD;%m1oPlKYQ',keJbmmkZGc2$-YpsN7HOuk&'L[cCW##P7D<]'9>aQ3pUcUDVqgCc[jLq:19II1CGnhdEP46=];Chi4knKC?A/bS8$-OoqX;s^9U`2>]=fHH!k6QkHhu\)Mk[<r4[oLm@chL_<nO?*RFS5^]`"iML5/4Jp7.[,_hS'!W.`#c"@l6`?]8<\`kn$+Cf4]EjH[fp2leZXn\b1:Z?9O3ZVmT6Zh*mVak`diF_Z4]QkoJTTK_5k1T(cHo?,X4I@al@-o_$.h\9[Der.,Zia;r!ZNImh5\IjWf6NcbRpFQ"c`nf7!UJr$#d:[RF?BlE>9Q%r,EJ.)H!n)9h0U]6ekC:jDR@C6(]#Fq'$'2b/6//$[VrFZ/Z0]Z/qVjd^TIkA+/HF0g72T@F^Q9)CUb4aqQ>5tFP*.4.^H%f9N-)=pHrrZSh?%VRUJEe\o"YD[(Y8Qgi`n+q!6DuW>('%Xl[PZ+lY5D*hc_MPDA0t_q"J$dEQWD8:7%53#`$'7%M,[LF@6fZELKW"$\'Eh6>Q\N$$]ijC0R<h.W5>pV<k5A9#AYnP'bCftLJ:I^'@</61;3GuHT(POQ*j(UMqt&!W=2G2_F&SKlc[[4'8J93K0-<at15,6De;b!fH<?(8bkY;B:?Fd7,@ZA#<T;N"H&[u9VBf\X<o"$(r+[[VU@m-)^9kpA?.?C<FM8srS"Z1eF\B>*eao@"5Ih^;i2:oL,bm5+&^p_Okmoka~>endstream
|
||||
endobj
|
||||
20 0 obj
|
||||
<<
|
||||
/Filter [ /ASCII85Decode /FlateDecode ] /Length 1931
|
||||
>>
|
||||
stream
|
||||
Gb!#[968iG&AII3lo9bM)&iWB&gVm=lb(\<*@Fm.8NL@KKIBrMQ%\KNL]7!"pla\tVV5WC[3SCs(;#KC?QU+]I'Da_PQ<n<_sBAc`aQR]jq8KmYMn/^o)")Z_0so;iWRa;3KVUmIo%GT*'?MTa?p.4oh")Ri!,,C5o9UBID4$TW"^d(9c+FK:d8oM"O%O1phIQ2"QsIP-(Y\,mJWT*JTWUkU@SlNCnIX7-!5Ai6*'#YaunR6Gm;aH2]lABb9Bf+Zn.(KhO@,+9*:eGpYk0J4B9u_/P9#+K_ZA,+'A\M8mN%e&VRp"oX1]7;_2)uB/7lF"E-rL>=>^I+F*(8a!kGUE^Y@C(hKC+G_Yr.AdcofnKco-oanEclh`9@_cf*@")9c4Q3R6jTe?#I=+Xa*RV\_:3H9\%2l_Ti(]=bZ/6h5+McON\?s#]pRkO#Z&O-Q0I\n&qFCQhid#Bh1IMmP#p2<^4q%uhlP9u@WUCHta\I2i0YET/q7Vi5Z,U$f*!2l'k'O@s5H2o<GSt40Q8J^2(k'e*S!odW6m&k]2HpPD!k]B%>Z`:N5OVq"Jga3W%9h0.PATeK#f/d*+'ko_7fAh[Lmrj'(NJpoYE2rmkjJk\oLG8a5Wq31;V8:JUV`-Yt&)hnAb"Gm<&a_1p)6hu(QUPb5SfGWQ<CLZH1EMY)([_Q:bU:o<@1V"S,/70hdAe88:-HIIf:VqgXbO_ZPfgR<ocYSQjm_@/r+MeQ0nl<RRFOe;JQ11-WmI<</95j2L<ImSX+afVLuZ;im7""o*tCQ5WO6dlAHd>klf<L^=B:IF@`*!kr@6p/FYkSRXKc;8r^C2QicQPY16RtJ,]6OLXh&`B*%oCHbTPHH\H$G1.U?K+6j/NLX@H19o83."h&eK*,Jru'5%]jU.eBIa=.PloU`G6c%d-.@nV&O;fgXXLqn,'@96aO>%7["Tad>DTNQM`d?=BieB6BQu`71@GViSHGNT<D"hWZdt4nU@lk*EGDjf4J5`E$n%1tLaDO:P&,V^Q>Yk3_p!_*t'>a4YMq#b0,joX3qi`F?<W]`!RZ0A*^i_n(-M2St's$FWjdc?j?gLgjq9+4\SR@#>%@;4#g:Y70!u(JOiQ2]+0W`)LSOXK8X.%"T3QR1JqiQQMrj.C0cB"'DR<.8prK-gls\M5;+#7N9N+-$u03U#-=8a/V%B)AsD5WBEq]D:;kXDpd@5]+kO;^9DmY0[K9C<\6_!76A[rn``a1?.j+;9FnrT1W7pfYf)k`O#(Kl6Eit`iJ.ic)I"?T.=-[-%QRI^dWuE@S^8a9$HJb"D?7QXJU=rc%Lus`\KPe%6"K6o35a#B=V30o`i>(no6Cj*ST)W-Dre<Q='ADWPU_/l9eM]7(bh>"R!I6)RbeDs[KF@\9""Z>n7gScQVS.44i#Z65<dY$>[X#>)X4E@Z";i#iO>QdMt]>836jc.gYK4\n=_81@p#R"k6d/QWVk,c2l56q^!Wh4"#hj&mtTSY2g^qRgUV>phn-?]&ZlHh[-?l)[^N=QH!cFTqJs2160C5I=*8_V\/Am4ZBFq)NP>7`nTp:!5hi,-f.-p;?p@qrF_*fjAkA\*X:eZ[Q/3U,g4[h-E_"S";=K]^;qM$kgbfoa0lo^eIFhjZZ6MYfiNC"%V\L+4(fp!/A,%h7222jW;+<LQro:W1%__gsQcVA,V#:aOK\;GFqf1DP<rON5G/(q,&XfAFR3aq8D3d^eOR++omAKA0<_1R-_+O(?J+k4lR!uIRO8fDMAHZ<i<Pu8sbI'gfX<9)-*FU2j1[#(p:+mSqX&Dd[[009r@"1OSIdSZCXKJV;W8BM8FU5W5OnN36`#A[l,8RZ8<q%hG`bN3+b-`=&W=L0$ELa$J=cH[cG1a!6fht<?)A3A.>!h\f-(/+[b7X`c+0dt3XUq6%-Udk'/AF&_@.G+S:0dr~>endstream
|
||||
endobj
|
||||
21 0 obj
|
||||
<<
|
||||
/Filter [ /ASCII85Decode /FlateDecode ] /Length 2034
|
||||
>>
|
||||
stream
|
||||
Gb!SlgN)%,&:O:Sm-%#4-(9$TH"\R>dj1-8PHjDcGbtS*.gdU0YTRW4rq\6<h/#Y@*N,;s'.92=+E2MMfs;&I@+0%lq)^2/?;9AQ:BqjU-8TUgbD41EGWe(`kK%[2GN9!:H'.KR?*M>?q#r62&eK^s3-N=P7/"]Z7R$U0@n"d)!gfJtNLUS/K\>rA#HUd9O!5[Ia9f^3gj.b_6J&'/I4GT@n_NApp`]fYCkYN("LJ'#c"Mg;$u3JVk?GA.Muo@\d/S3.p(#s%'WZI2AIa3(L%/Ec\a,:6jZE5>0/8e>Wb4#rJB;kR^t,B3(f:Rtkk:kqYc>(#[@;PU.2NE0XUW!@#$3m>mLn*l$`th]IEHr$?tb%-#@W7':2!b7>?4GIrA,nQ$]&@kk'2TESf*Ho<7LuEQstdoJJ>"%P6!7-&2"Ls7h#itCR?TX_R]ni5=?mQK")2h"`sU>]*,SX"@9,77EJ7YJ'jdnM4kGkc3+gcfT]`n?LWjjjqbUrPr;H%)_-fC85K:mBuL9q8HEJ0cql7hE/psHQnM9I?,Eg5bO`WeKX#_e33q-Dma_09'SJ%o'RV,r[q-nli&'U#(i4l4OT^B4.?7iQ"A?!bTcXIZP/9,EDB3Q=gEb\0Q[D^%*-%hV$,\Os/!g$)3$\]jaMeWL%HI]A["AR"#ild>AAf<J2jZD,@_jSSmA*/?]-4FEX>J,B3216Qg30n3YHK5uTsETM+pm]N0crZsQi\lYBW7.m6`K,M`["7SK]ko0Q,"@Pigcb,U==.?@Ud\u)8#e7J_G.6>gAeN&q^j(<Y(f>7,];<*j1K$c'1+$=YGl4?<%tr49oK>1^SOo--K*_eYgH-N_JiA-1AZ46`QMY9?E$^jfY'k>3W;VH!Y8=]4<l,3pL^'^i)c&<6Adt@q.mGOc2F72P+Ed5@1*nBf+U)([5Ch\Zr_DOt%Wq)l(=-=/n'O-<?GQXOd"'>a#+j]"7/-Y=MQ;j5p5m7,4:%.g)GIfBX'[pB7AN;SBlh2m5G?:9>^S*1NIEJ&##Qb$],HD1Gh;$+[#f8@WQ]ZJh)VVC6R'm,[*^Y0r8qO>E.G2%tOuBh[q>9TU(g9s.gOM?-h2,^)9mi0?L72J/(B>Xid/1sB&r`m@gS4NFsiSblpo]@HaZ-A9KeXB7>e(WJ`Ll^>Wa[P?FZfBnE!XkI'A:TNY'n=mr\R18NMp4)Lh7L)5*NYONKjD:C[W7g/TVJOo3%-RRr"5B^"9GaYQT,g%X7QpXh"h$GWEC1DI+.0>n)`!NaB2\!)EK5)nE6KE/EoJE\.R:se1.6,3fKV(TD\&;<UnFD<+3IcR2,1]29qF,10qM<RTOK3'*%#f*mc4)cTgJCk#L0*_LiRf9(+*V__Kai^P09L9=&ae$Wjn_TZ&U\#i9$!P<6S(1lILI+5B(1t1jLci"A;DYmUXlX_E2A;r2*sc*ON."[Hdj(3>.-ZHT(8eMWq"b_6LX$YThsf4FhbWGeN%7"6eBh&%phhRH21;E67[PVPK%Y3*g/9`flpX80q?`LbR944bp3meIAtus*n2:)6+W.2"74bf@cGXcg@cOE2mZERJC0WlN*8)]_q]Q[#\#49s'>rXK8RYAll%LJ,MgGRf7eSRsfY,UM:C1Z$KOB<&CrUmY0YnX1H$S<<nR)ffh07kg#_<!Nn$[nXPFMBfK%MEA5YQ1]_E_FZ/PnBs&+s:TL.f=-@lOc-q=c9/NgA0FB2=AQX^9CV.t(B<SR'#FNjG\f2sVn6D'8.p:45:??aGf<EIL'p_qgX]8iYN92E@9=O_OoI9@n.SNS'&r!m]Y5?-Hjtj=Q<QCi_Fk-m!)\$$bh'qt3fNtN#'RkZPWo&+)kb[F%2H>ne@U]8>=4`J,]s4P?BO5)5/!K"A5BWJmk(Y;4VRF!*4.L1Q72>..eYn"9RYJuH9+aV%9L9EUXK'KT_PT/eYiV7HY=fk4f7dUtk&L"@6Rq,68MeH'antch(=ei,1rR,m"!(8X[>Jq<[j6:^NDB)FVkWTihTo`078_k-)m$t'5g`]H_`Jk:$Z04.Rf~>endstream
|
||||
endobj
|
||||
22 0 obj
|
||||
<<
|
||||
/Filter [ /ASCII85Decode /FlateDecode ] /Length 1789
|
||||
>>
|
||||
stream
|
||||
GauHKgN)%,&:O:Sm,Y!X`hI]*Q'Y7:ju.@'<Uu@jLg3Q68:h"1.J;;:!K+0.>E30>CjRE<$1-cDZ\sMB0)^+i1TLL.-89c5J`jqH!&&F\Qs@M/ak=FANZ\-i(kE?rDD:e#)$f:/jQrt&.!FUT5P?4B'.6L@#ZK&@dr>^Ym7S'F!JsW85P)Z^@Q-kGE)J?He+gr^^kmK3>_c&ga5b)9S+okphUmZDd8?:e*uUgghBo5(eKAs=01mFU<%rRsiS-G=.qY`c\I^'7eIo4!L@;jK^n:)R03hp7)O/"SA-%nW`kd\_0MX'N38$6:M+VJZF@JI")6Xo'3sIk\K"Zljhh76t^6;$(8B;a#]aiE,n,8b]#`ZaLCP.`q.5`4V51D+D-(c>kU8h=dX$,p\qN&\]NrM6i`bK'J>]t^<NA&?0r5ffb#c]2O_7CMt%Q@#bZ@\c$2Ga40"'>jQQ,^,JqA]d>_eh34TkW$sL;Q@!$kEe,n3p8VN6*%hJJo:01P,?7>D[KXHUVirB,\:3KkT($!eUuO3V$ET`&4SUI6/eVPe+m8$?u%1Do:`[`^j5g/7704UI8'cSh)_6Z4%\3P`#V[Hi\Q<(Bs2[2%lnZP[I(M5o<*=f\74(h"h1uf(34BnQ'P9k^8lj^iLOk-q3!)RcA?=jK^2Q)DlA-d@D6E#4`nm:O#6F/cC0caD7Hc[Ersmo0B%gh$N/6"b7l5[Nu.Bs%MJZ'EkP@Ghm+\79rCR`QI]H%4-^qA'#N[&/?n!"pN^o`&uEQ\M3>-HKeEeG\PWXSX))\`Jg!l1u=4pDb/(rZ8@B!VVpKIF\_&'>ZspVOMhmSot`F]Q;a)$:XE8ZqN&dlho.ZCV'5$OO&$qF:&!_]A`blpYG(2/*BYS?k(n_g:CT+UhQbSn>mjf1>h\@j4R;!iD-\)i/pU0,VCaImF(f@K6rV%H0uq9K-Te2+CFFjII`:!+0=,OeO.2FNeQ+V1FJ/.GIICXA1+hn&$:mIPKejD"$#G9oql"<6>tC<Z9BEf7:+5?\G#'8+]TnC.,r<*_SMLg-&n>gJU8kITl6_$Un#'*Qc_u+q)0"j=;H2BDHeP\lP_:$!bpuPeYG$O4Y[[5Z`KGBXIj_$(4Kbj)buF5qebdH)VogU9-!sN"P[X:WJ:d;Y7/jS;FR[(o,K56A$udN8Q;H$?]][qM&Qk_Fad2(BY.H&-T1UFjWpQ"<cuaf<^./A(%_qm<I*da/DZD)uAq52??Oas0'X\8-">l:^'meBW6iD."I?IQ2;%;!!OB9XSNAO"1S.J^45Cb$E*Ajr:WL#"l*G@_PJ>ubI9fJHJMP=%Hc,a_H23CDl%1PL&L6nc!KlbJJZ:$.c>06Ge6S2H$_GlcEd`bHjr23L9`X/?bC;$KRlAd1Fas\6.NUsSpcF^rhALgfR2MVEai2!&rHk,\qA@pcnF3'%LVDTHTC3p,W8U\XYCL;9<FpRWI\".tt9!@5]$hRV?H^3P9ajDL=c\Xb;orakaiiMsL_>:!r4fG?YS+GcIlUJQ)NTaDARh<VJHt68!%4HoeICcM,?h[:k%G,OQl1).FDD?(-%S_X%\ts7@\0LmhICecl?h_Y@ZPbU\h0_l-L)@ZMh8k)WFF.B0R-sVbVAdZRin@p=6>&+_d#;#eG5r2-:Bs.(^['t(<[o#EA8CTA.s69=+326_\<GTo(6D5>)Lpt5[;cEih@k(FgXNHWpUXW?[@U%=n>n_+0$Hk(L+4_]3Ze*SL)EY]+ZT2blg\,]f+.*U=bJ%MA9>nQVAk0*XheFYn4#m>ln=n-%uVIUHi~>endstream
|
||||
endobj
|
||||
xref
|
||||
0 23
|
||||
0000000000 65535 f
|
||||
0000000061 00000 n
|
||||
0000000122 00000 n
|
||||
0000000229 00000 n
|
||||
0000000341 00000 n
|
||||
0000000418 00000 n
|
||||
0000000623 00000 n
|
||||
0000000828 00000 n
|
||||
0000000933 00000 n
|
||||
0000001138 00000 n
|
||||
0000001343 00000 n
|
||||
0000001549 00000 n
|
||||
0000001755 00000 n
|
||||
0000001961 00000 n
|
||||
0000002031 00000 n
|
||||
0000002316 00000 n
|
||||
0000002415 00000 n
|
||||
0000004603 00000 n
|
||||
0000006787 00000 n
|
||||
0000008379 00000 n
|
||||
0000010256 00000 n
|
||||
0000012279 00000 n
|
||||
0000014405 00000 n
|
||||
trailer
|
||||
<<
|
||||
/ID
|
||||
[<073ba7643d43bab714be89d42b8b18e5><073ba7643d43bab714be89d42b8b18e5>]
|
||||
% ReportLab generated PDF document -- digest (opensource)
|
||||
|
||||
/Info 14 0 R
|
||||
/Root 13 0 R
|
||||
/Size 23
|
||||
>>
|
||||
startxref
|
||||
16286
|
||||
%%EOF
|
||||
430
Les02-OpenCode-v2/Les02-Slide-Overzicht.md
Normal file
430
Les02-OpenCode-v2/Les02-Slide-Overzicht.md
Normal file
@@ -0,0 +1,430 @@
|
||||
# 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!
|
||||
BIN
Les02-OpenCode-v2/Les02-Slides.pdf
Normal file
BIN
Les02-OpenCode-v2/Les02-Slides.pdf
Normal file
Binary file not shown.
BIN
Les02-OpenCode-v2/Les02-Slides.pptx
Normal file
BIN
Les02-OpenCode-v2/Les02-Slides.pptx
Normal file
Binary file not shown.
BIN
Les02-OpenCode-v2/lesbestanden/opencode-ui-finished.zip
Normal file
BIN
Les02-OpenCode-v2/lesbestanden/opencode-ui-finished.zip
Normal file
Binary file not shown.
BIN
Les02-OpenCode-v2/lesbestanden/opencode-ui-starter.zip
Normal file
BIN
Les02-OpenCode-v2/lesbestanden/opencode-ui-starter.zip
Normal file
Binary file not shown.
Reference in New Issue
Block a user