diff --git a/Les02-OpenCode-v2/Les02-Docenttekst-Notes.md b/Les02-OpenCode-v2/Les02-Docenttekst-Notes.md new file mode 100644 index 0000000..0245af6 --- /dev/null +++ b/Les02-OpenCode-v2/Les02-Docenttekst-Notes.md @@ -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!" diff --git a/Les02-OpenCode-v2/Les02-Docenttekst.md b/Les02-OpenCode-v2/Les02-Docenttekst.md new file mode 100644 index 0000000..180ed9b --- /dev/null +++ b/Les02-OpenCode-v2/Les02-Docenttekst.md @@ -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. diff --git a/Les02-OpenCode-v2/Les02-Huiswerk.md b/Les02-OpenCode-v2/Les02-Huiswerk.md new file mode 100644 index 0000000..99e9c9a --- /dev/null +++ b/Les02-OpenCode-v2/Les02-Huiswerk.md @@ -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 diff --git a/Les02-OpenCode-v2/Les02-Huiswerk.pdf b/Les02-OpenCode-v2/Les02-Huiswerk.pdf new file mode 100644 index 0000000..33554ae --- /dev/null +++ b/Les02-OpenCode-v2/Les02-Huiswerk.pdf @@ -0,0 +1,149 @@ +%PDF-1.4 +%“Œ‹ž 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+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>*"9GLO'^GQZqHD_Qn$kH6.5WKt4f,YMB1[ZicUUho-tUq,h7>JgiUDTLs/S0Q=SB+I7Z"i:ds3.r(V:HS0l_%n;VS0K,1`4+HV5ZI-9iCU3$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#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#+0&OrPpZPu;Ji[n[kj7F51k(DpSYr@_#NYd@lZ_rR#^Uuf.FE-m+klH1E(*8BL<<.9""VgKjT=08BqAdd]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/`SDqYg%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<8KG?;/=2HKbijZT\O8E&/c8Ac@A\UI_Z#2+(_BU_b+;-8qL$pG@!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#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<$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\^*2jU0urG#YpdU*V%WQ0C,)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/-.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,EgON8C2bNcO9oXJrEj/h(@I8kK/<7SH/Cu53SOUfVn#s3_p6@2_ViX@[c^Bf`2-@X,X`9][F4:-/`pN4GDI4-s1qs!h$S.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+pDendstream +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"Bh(r^'oh@h15;d4Q1OY$RGAE(DOtVK?ji7h2m5-![7[M9Mcp$.)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$#BOE8d4VWK'%-i38HIkO+`?@o0TP*LZO)_p$s7c[iC`YQAFhU_dmL4!.b`-Ls_+MZXa`p[W$7fTn\Hb$!m9.\j+C3S[,$PjDhV^bRHcc>KmiLdd/*4WkKEnEE5%K<.pbB'X7;/?Y.[h0^s`[PM=+p>f+H<3rEW[o=o0endstream +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 diff --git a/Les02-OpenCode-v2/Les02-Lesopdracht.md b/Les02-OpenCode-v2/Les02-Lesopdracht.md new file mode 100644 index 0000000..c233e43 --- /dev/null +++ b/Les02-OpenCode-v2/Les02-Lesopdracht.md @@ -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 diff --git a/Les02-OpenCode-v2/Les02-Lesopdracht.pdf b/Les02-OpenCode-v2/Les02-Lesopdracht.pdf new file mode 100644 index 0000000..7e1199b --- /dev/null +++ b/Les02-OpenCode-v2/Les02-Lesopdracht.pdf @@ -0,0 +1,168 @@ +%PDF-1.4 +%“Œ‹ž 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",<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>A\P]-@P?q^I$8(qY^qm[kf'Y<`B.a*0VTd@d//$u3)I,'*J@V)I\i.c+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%MTFiBE3nf4jOh@.`%54r?(W;l-,8,"Y0VDgtVs!l`KkFtbPZ=5R,pXAd`28>lTS\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(YNE3D`Brp3+DZ3oje+TZ0R4$SClMkfKI'!FPSc3#PAThK*L=L")n;qNfAX+KZ9%6)sJ1:l4JKDiXN+0]^<6&FhWan'J>8&:+usW:0;Q;;]NrV*l;A87XJFDk: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=GMC0WNq5rWendstream +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^?GVBP>/-arEne&Rf8l<6P('mZ%T1\aiEAFScHMb9k(BnN;*fc2OCnO,TLquY`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&c9QVm1ttdSUCs@TMg%U'X%Jmfp0nco_(,G0-Eh];GX@b4IopLT+"1\WnTr5f8iV8YIp'mU7VHfR8!5m,4/T%(/jX(M3q>cWnrM3?.6IDGP0Zo-qJA,AnZ>O&i#L]g=d.nm5VI?n6ri,,:um)a7Y93:7>^644X_,r5lM5]mLrbsD'@8$jK9uf#&2K];Z'f.;N#<+p8>lAb^BN$LA2]n/2fTBVEnH0,oPGup9HAk)tl&\MBR@>Wj>#>1E7I%\i4+n"t4fkJ_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/#@?eRsqYds/[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'`@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^<`0r&[&;e5D2nr9<>>`[9duS?Oa4^,M^7]+-M3E]Xg#-D=Kk>C'JREC]Pmi("DQXW4#J]Y\alRN3meBL7uo",jq81AnW^&BW#\6bXUqm5D:$Z>MIsp6kN6D:Qjp&.dsP?L'Aurs`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#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-!CAkendstream +endobj +18 0 obj +<< +/Filter [ /ASCII85Decode /FlateDecode ] /Length 1590 +>> +stream +Gb!Sl>>s<8'Roe[38pPu1/f@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@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"QT?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^2d4FbhYRD-\+<`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\JOlTQp2WcZM?t%"BFI$C8dhM8tTg)F3+L"N4&$cn+Z=kfaHiu.r1gnp;hPKfN$Kk$K@1E""_uaA#"^T)5/*'SIG0@/Jd920_7:;?L5&2fM0.9_<*BUEpN%%ORLY1!-/sucS3?"WhOLE`CULh_.*X!?P),D:LQCU93Y<.#PQ!.,(@Qr=.X7g?61P,"hOOI:*471DO1ue?AESLp5:$o,kB\nr'[b(q24!Mr`)KpNp`4&ZR7P_?B)dSbHOT/.jIdLi0*P6@>4[I\K3mI-p8md;;>is3endstream +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 +[] +% ReportLab generated PDF document -- digest (opensource) + +/Info 13 0 R +/Root 12 0 R +/Size 20 +>> +startxref +10407 +%%EOF diff --git a/Les02-OpenCode-v2/Les02-Lesplan.md b/Les02-OpenCode-v2/Les02-Lesplan.md new file mode 100644 index 0000000..e34f581 --- /dev/null +++ b/Les02-OpenCode-v2/Les02-Lesplan.md @@ -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). diff --git a/Les02-OpenCode-v2/Les02-Lesstof.md b/Les02-OpenCode-v2/Les02-Lesstof.md new file mode 100644 index 0000000..985542f --- /dev/null +++ b/Les02-OpenCode-v2/Les02-Lesstof.md @@ -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 diff --git a/Les02-OpenCode-v2/Les02-Lesstof.pdf b/Les02-OpenCode-v2/Les02-Lesstof.pdf new file mode 100644 index 0000000..9ed7c9e --- /dev/null +++ b/Les02-OpenCode-v2/Les02-Lesstof.pdf @@ -0,0 +1,200 @@ +%PDF-1.4 +%“Œ‹ž 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'trTkK,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]:J/7l(;rnP*<*9^*HP)=DLV1&*c7bO-)o(nt;jc^J=O)K16A<'q4"ot+Ns:gjQh@CC>WB>]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[cfa_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]8bBqmtJcTib/S[K_RDPLkF-3RV1eFGN(YG7Y%/>>eBLjVjG/7CXSMV=`VM,+cfXIZIb>`4T[gK3M[o"nfb,!I28G'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%;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&KL6Gendstream +endobj +17 0 obj +<< +/Filter [ /ASCII85Decode /FlateDecode ] /Length 2092 +>> +stream +Gb!Sl=a/Rh'Roe[\.:_M,R%f$6okg(K+Gf4f20^QT^6NT_jWuho%UC:DRn3Rak&=C0Dp^T97AHY:9!5W`jDttLm9\pdm@/->X#7_T%ja)LPjLf>SKV3#!E'5jZ5@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:&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@FrWXH*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@hD1g:&5C'WsH$._Weh[`mS"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$#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&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: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!nmhJD7`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&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\'[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`Rd'LK4]G&_DCe2ba\.N6mhE](5O2r',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,"`lendstream +endobj +19 0 obj +<< +/Filter [ /ASCII85Decode /FlateDecode ] /Length 1785 +>> +stream +Gb!#\gN)%,&:N/3m,Y!`a+aWaSsd%Ipl`4P9@GF8@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$4u5aYQB6bi2R+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)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';VraQ3pUcUDVqgCc[jLq:19II1CGnhdEP46=];Chi4knKC?A/bS8$-OoqX;s^9U`2>]=fHH!k6QkHhu\)Mk[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$$]ijC0RpV*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=>^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@s5H2oZ`:N5OVq"Jga3W%9h0.PATeK#f/d*+'ko_7fAh[Lmrj'(NJpoYE2rmkjJk\oLG8a5Wq31;V8:JUV`-Yt&)hnAb"Gm<&a_1p)6hu(QUPb5SfGWQklf%7["Tad>DTNQM`d?=BieB6BQu`71@GViSHGNTYk3_p!_*t'>a4YMq#b0,joX3qi`F?%@;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"R!I6)RbeDs[KF@\9""Z>n7gScQVS.44i#Z65[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;+!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?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>AAfJ,B3216Qg30n3YHK5uTsETM+pm]N0crZsQi\lYBW7.m6`K,M`["7SK]ko0Q,"@Pigcb,U==.?@Ud\u)8#e7J_G.6>gAeN&q^j(7,];<*j1K$c'1+$=YGl4?<%tr49oK>1^SOo--K*_eYgH-N_JiA-1AZ46`QMY9?E$^jfY'k>3W;VH!Y8=]4a#+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\&;.-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<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.@'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^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>tCgJU8kITl6_$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"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:!r4fG?YS+GcIlUJQ)NTaDARh&+_d#;#eG5r2-:Bs.(^['t(<[o#EA8CTA.s69=+326_\)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 diff --git a/Les02-OpenCode-v2/Les02-Slide-Overzicht.md b/Les02-OpenCode-v2/Les02-Slide-Overzicht.md new file mode 100644 index 0000000..3710153 --- /dev/null +++ b/Les02-OpenCode-v2/Les02-Slide-Overzicht.md @@ -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 && 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! diff --git a/Les02-OpenCode-v2/Les02-Slides.pdf b/Les02-OpenCode-v2/Les02-Slides.pdf new file mode 100644 index 0000000..610caf0 Binary files /dev/null and b/Les02-OpenCode-v2/Les02-Slides.pdf differ diff --git a/Les02-OpenCode-v2/Les02-Slides.pptx b/Les02-OpenCode-v2/Les02-Slides.pptx new file mode 100644 index 0000000..9cf17de Binary files /dev/null and b/Les02-OpenCode-v2/Les02-Slides.pptx differ diff --git a/Les02-OpenCode-v2/lesbestanden/opencode-ui-finished.zip b/Les02-OpenCode-v2/lesbestanden/opencode-ui-finished.zip new file mode 100644 index 0000000..c002a20 Binary files /dev/null and b/Les02-OpenCode-v2/lesbestanden/opencode-ui-finished.zip differ diff --git a/Les02-OpenCode-v2/lesbestanden/opencode-ui-starter.zip b/Les02-OpenCode-v2/lesbestanden/opencode-ui-starter.zip new file mode 100644 index 0000000..9d18e12 Binary files /dev/null and b/Les02-OpenCode-v2/lesbestanden/opencode-ui-starter.zip differ