diff --git a/Samenvattingen/Les02-Samenvatting.md b/Samenvattingen/Les02-Samenvatting.md index 55aa4c1..12c9519 100644 --- a/Samenvattingen/Les02-Samenvatting.md +++ b/Samenvattingen/Les02-Samenvatting.md @@ -6,236 +6,203 @@ **Deel 1: AI Foundations** (Les 1-4) ## Beschrijving -Introductie tot OpenCode: een open-source AI coding assistant. Eerst de terminal versie (overweldigend maar krachtig), daarna de desktop app (gebruiksvriendelijker). Focus op keyboard shortcuts en Build vs Plan mode. +Introductie tot OpenCode: een open-source AI coding assistant met 60.000+ GitHub stars. Focus op de terminal versie met OpenCode Zen (gratis, geen API key nodig). Studenten werken met hun bestaande v0 project en leren de volledige development workflow: lokaal draaien, uitbreiden met AI, en deployen via git push. + +--- + +## Tijdsindeling + +| Blok | Tijd | Duur | +|------|------|------| +| 1. Welkom & Terugblik | 09:00-09:08 | 8 min | +| 2. Intro OpenCode | 09:08-09:20 | 12 min | +| 3. Setup & Demo | 09:20-09:40 | 20 min | +| 4. Git & Vercel | 09:40-09:50 | 10 min | +| 5. Hands-on (deel 1) | 09:50-10:15 | 25 min | +| β˜• PAUZE | 10:15-10:30 | 15 min | +| 5. Hands-on (deel 2) | 10:30-11:30 | 60 min | +| 6. Afsluiting | 11:30-12:00 | 30 min | + +**Spreektijd:** ~50 min | **Hands-on:** ~85 min | **Pauze:** 15 min --- ## Te Behandelen -### Groepsdiscussie (15 min) -Bespreek klassikaal de reflecties uit Les 1 - wat zijn de voor- en nadelen van AI die jullie zien? Hoe voelde de schets-naar-website workflow? - ---- - ### Wat is OpenCode? -- Open-source AI coding assistant (26.000+ GitHub stars) -- Werkt met meerdere AI providers: Groq (gratis), Ollama (lokaal), OpenAI, Anthropic -- Twee versies: **Terminal UI** en **Desktop App** -- Privacy-first: je code blijft lokaal tenzij je kiest voor cloud +- Open-source AI coding assistant (60.000+ GitHub stars) +- **OpenCode Zen:** gratis AI modellen, geen API key nodig +- Terminal-based interface (TUI) +- Kies je eigen AI model: GLM 4.7 (aanbevolen) --- -### Demo: Terminal UI (10 min) - -**Doel:** Laat zien hoe krachtig maar overweldigend de terminal versie is. - -```bash -# Installatie -curl -fsSL https://opencode.ai/install | bash - -# Of via npm -npm i -g opencode-ai@latest - -# Start -opencode -``` - -**Laat zien:** -- TUI (Terminal User Interface) opent -- Veel keyboard shortcuts -- Krachtig maar... "dit ziet er complex uit, toch?" - ---- - -### Demo: Desktop App (5 min) - -**Doel:** Opluchting - "gelukkig is er ook dit!" - -- Download van opencode.ai/download -- Zelfde features, vriendelijkere interface -- Keyboard shortcuts werken ook hier -- **Dit gaan we gebruiken in de les** - ---- - -### Keyboard Shortcuts (10 min) - -Deze werken in BEIDE versies: +### Keyboard Shortcuts | Shortcut | Actie | |----------|-------| -| `Ctrl+K` | Command dialog (belangrijkste!) | -| `Ctrl+N` | Nieuwe sessie | -| `Ctrl+A` | Wissel tussen sessies | -| `Ctrl+O` | Model selectie | +| `Ctrl+K` | Command menu | | `Tab` | Wissel Build/Plan mode | | `@` | File fuzzy search | -| `Ctrl+S` | Stuur bericht | -| `Esc` | Terug/annuleer | +| `Ctrl+O` | Model selectie | -**Tip:** `@` is super handig - typ `@` en begin te typen om bestanden te zoeken. +**Tip:** `@` is super handig - typ `@` en begin te typen om bestanden te zoeken en context te geven aan de AI. --- -### Build vs Plan Mode (10 min) +### Build vs Plan Mode -OpenCode heeft twee "agents" - wissel met `Tab`: +OpenCode heeft twee modes - wissel met `Tab`: | Mode | Icoon | Wat het doet | |------|-------|--------------| -| **Build** | πŸ”¨ | Volledige toegang - kan code schrijven, bestanden aanpassen, commands uitvoeren | -| **Plan** | πŸ“‹ | Read-only - analyseert code, maakt plannen, maar verandert niets | +| **Plan** | πŸ“‹ | Read-only - leest, analyseert, verandert NIETS | +| **Build** | πŸ”¨ | Volledige toegang - schrijft code, maakt bestanden | -**Workflow tip:** -1. Start in **Plan mode**: "Analyseer dit project en leg uit wat het doet" -2. Wissel naar **Build mode**: "Voeg nu een navbar toe" +**Workflow:** +1. Start in **Plan mode**: "Analyseer dit project. Waar kan ik testimonials toevoegen?" +2. Wissel naar **Build mode**: "Maak nu de Testimonials component" --- -### AI Modellen Instellen (10 min) +### De Deployment Workflow -#### Optie 1: Groq (gratis cloud) -1. Ga naar console.groq.com -2. Maak account aan -3. Genereer API key -4. In OpenCode: `Ctrl+O` β†’ Groq β†’ Plak key +De volledige workflow die jullie vandaag leren: -**Voordeel:** Snel, gratis, geen lokale setup -**Nadeel:** Code gaat naar cloud +1. **Wijzig code** met OpenCode +2. **Test lokaal** op localhost:3000 +3. **Git add, commit, push** +4. **Vercel pakt automatisch op** β†’ Live! -#### Optie 2: Ollama (lokaal) -1. Download ollama.ai -2. `ollama pull llama3.2` (of ander model) -3. In OpenCode: `Ctrl+O` β†’ Ollama - -**Voordeel:** Privacy, geen internet nodig -**Nadeel:** Langzamer, gebruikt je hardware +Jullie v0 project is al gekoppeld aan GitHub/Vercel, dus elke push wordt automatisch live. --- -### Wanneer AI Wel/Niet Vertrouwen (5 min) +### Nieuw Project naar Vercel (voor huiswerk) -**Wel vertrouwen:** -- Boilerplate code -- Bekende patterns (React components, API routes) -- Syntax die je vergeten bent - -**Niet blind vertrouwen:** -- Security-gevoelige code -- Business logic -- Complexe algoritmes - -**Altijd:** Lees en begrijp de code voordat je het accepteert! +Voor nieuwe projecten (niet gekoppeld via v0): +1. Vercel Dashboard β†’ Add New Project +2. Import Git Repository +3. Selecteer repo β†’ Deploy --- ## Tools -- OpenCode Desktop App -- Groq API (gratis) -- Ollama (optioneel, lokaal) +- OpenCode Terminal (`npm i -g opencode-ai@latest`) +- OpenCode Zen (gratis AI, GLM 4.7) +- Git +- Vercel --- -## Lesopdracht (2 uur) +## Lesopdracht (85 min hands-on) -### Deel 1: Setup (30 min) +### Doel +Breid je v0 website uit met OpenCode. Leer de volledige workflow: lokaal draaien, uitbreiden met AI, deployen via git push. -1. Download en installeer OpenCode Desktop App -2. Maak Groq account aan en genereer API key -3. Configureer Groq in OpenCode (`Ctrl+O`) -4. **Optioneel:** Installeer Ollama en test lokaal model +### Stap 1: Project Lokaal Draaien (15 min) -### Deel 2: Interface Verkennen (30 min) - -1. Open een bestaand project (of maak nieuwe folder) -2. Oefen keyboard shortcuts: - - `Ctrl+K` β†’ bekijk beschikbare commands - - `@` β†’ zoek een bestand - - `Ctrl+N` β†’ nieuwe sessie - - `Tab` β†’ wissel Build/Plan mode -3. Test Plan mode: "Analyseer dit project en beschrijf de structuur" - -### Deel 3: Component Bouwen (60 min) - -Bouw een responsive navbar met OpenCode: - -**Stap 1 - Plan mode:** -``` -Ik wil een responsive navbar bouwen met React en Tailwind. -Desktop: logo links, links midden, button rechts. -Mobile: hamburger menu. -Analyseer wat ik nodig heb. +```bash +git clone https://github.com/jouw-username/jouw-project.git +cd jouw-project +npm install +npm run dev ``` -**Stap 2 - Build mode:** -``` -Bouw nu de navbar component zoals we besproken hebben. +Open http://localhost:3000 - je ziet je website! + +### Stap 2: OpenCode Configureren (10 min) + +```bash +opencode ``` -**Vereisten:** -- Logo placeholder links -- 4 navigatie links -- CTA button rechts -- Mobile hamburger menu (werkend) -- Tailwind CSS styling +Selecteer gratis AI model: +1. Druk `Ctrl+O` +2. Kies "OpenCode Zen" +3. Selecteer "GLM 4.7" -### Documentatie +### Stap 3: Uitbreiden met OpenCode (45 min) -Noteer tijdens het bouwen: -- Hoeveel prompts heb je gebruikt? -- Welke iteraties waren nodig? -- Wat werkte goed/niet? -- Build vs Plan mode - wanneer gebruikte je welke? +**Fase 1 - Plan mode (πŸ“‹):** +``` +Analyseer dit project. Welke componenten zijn er? +Waar zou ik een testimonials sectie kunnen toevoegen? +``` + +**Fase 2 - Build mode (πŸ”¨):** + +Kies minimaal 2 van deze opdrachten: +- **Testimonials sectie** - 3 cards, responsive +- **Pricing sectie** - 3 tiers, highlight middelste +- **FAQ sectie** - accordion style, animaties +- **Verbeter bestaande componenten** - hover effecten, scroll animaties + +### Stap 4: Deploy naar Vercel (10 min) + +```bash +git add . +git commit -m "Add testimonials section" +git push +``` + +Open Vercel dashboard, zie "Building...", na ~1 min: live! + +### Stap 5: Herhaal! + +Doe minimaal nog één wijziging en push opnieuw. **Doel: minimaal 2x deployen.** --- -## Huiswerk (2 uur) +## Huiswerk -### React Opfrissen (optioneel, 30 min) +### Nieuw Project Vanaf Scratch -Als je merkt dat je React kennis is weggezakt: -- Bekijk React Fundamentals op EdHub -- Focus op: components, props, state, hooks -- Dit is essentieel voor de rest van de cursus! +Maak een **nieuw** project (niet je v0 project uitbreiden): -### Component Library Bouwen (1.5 uur) +**Stap 1: Project aanmaken** +```bash +npx create-next-app@latest mijn-project +cd mijn-project +``` +Kies: TypeScript, Tailwind CSS, App Router -Bouw een landing page component library met OpenCode: +**Stap 2: 3 Componenten bouwen met OpenCode** +1. **Navbar** - logo, links, responsive hamburger menu +2. **Hero** - headline, subtitle, CTA button +3. **Keuze:** Features, Footer, of ander component -1. **Hero section** - grote headline, subtitle, CTA button, afbeelding -2. **Features section** - 3 cards met icons en beschrijving -3. **Testimonial card** - quote, naam, foto, bedrijf -4. **CTA section** - headline, beschrijving, button -5. **Footer** - links, social icons, copyright +**Stap 3: Push naar GitHub** +```bash +git add . +git commit -m "Initial components" +git push +``` -**Vereisten:** -- Gebruik Plan mode voor elk component eerst -- Alles responsive met Tailwind CSS -- Test op mobile en desktop +**Stap 4: Koppel aan Vercel** +1. Ga naar vercel.com/new +2. Import Git Repository +3. Selecteer je nieuwe repo +4. Deploy -### Blog Post (300 woorden) +### Reflectie (300 woorden) -Schrijf over je OpenCode ervaring: -- Hoe voelde de terminal vs desktop app? +Schrijf over je ervaring: +- Hoe voelde werken met OpenCode? - Build vs Plan mode - wanneer gebruik je welke? -- Groq vs Ollama - welke koos je en waarom? -- Keyboard shortcuts - welke zijn het handigst? -- Zou je OpenCode blijven gebruiken? - -### Bonus - -Probeer de terminal versie als je alleen desktop hebt gebruikt (of andersom). +- Wat ging goed bij het deployen? +- Wat was de moeilijkste stap? +- Vergelijk met de v0 workflow uit Les 1 --- ## Leerdoelen Na deze les kan de student: -- OpenCode installeren en configureren (desktop en terminal) -- Groq en/of Ollama als AI provider instellen -- Keyboard shortcuts gebruiken voor efficiΓ«nt werken -- Build vs Plan mode inzetten voor verschillende taken -- De `@` file search gebruiken om context te geven -- Components bouwen met AI assistance -- Kritisch beoordelen wanneer AI output te vertrouwen is +1. Uitleggen wat OpenCode is en waarom het efficiΓ«nter is dan de v0/ChatGPT workflow +2. OpenCode installeren en configureren met OpenCode Zen (gratis) +3. Werken met Plan mode en Build mode +4. Een bestaand GitHub project clonen en lokaal draaien +5. Wijzigingen maken met OpenCode en deployen via git push +6. De @ file mention gebruiken voor context diff --git a/readme.md b/readme.md index 9cd49cc..64dc20e 100644 --- a/readme.md +++ b/readme.md @@ -11,7 +11,7 @@ Een 18-weekse cursus die studenten meeneemt van AI-beginner naar AI-powered deve | Les | Onderwerp | Deel | Status | |-----|-----------|------|--------| | 01 | [Introductie tot AI en Large Language Models](Samenvattingen/Les01-Samenvatting.md) | 1 | βœ… Uitgewerkt | -| 02 | [AI Code Assistants en OpenCode](Samenvattingen/Les02-Samenvatting.md) | 1 | πŸ“‹ Samenvatting | +| 02 | [AI Code Assistants en OpenCode](Samenvattingen/Les02-Samenvatting.md) | 1 | βœ… Uitgewerkt | | 03 | [AI Ethics, Privacy & Security + WebStorm](Samenvattingen/Les03-Samenvatting.md) | 1 | πŸ“‹ Samenvatting | | 04 | [Effectief Prompting, Iteratief Werken & Skills](Samenvattingen/Les04-Samenvatting.md) | 1 | πŸ“‹ Samenvatting | | 05 | [TypeScript Basics](Samenvattingen/Les05-Samenvatting.md) | 2 | πŸ“‹ Samenvatting | @@ -75,40 +75,54 @@ Kennismaking met AI, LLMs en de basis van AI-assisted development. **Huiswerk:** Reflectie schrijven (500 woorden), 5 AI use cases bedenken voor eigen projecten, tweede component bouwen via de workflow. -[β†’ Ga naar Les 1](Samenvattingen/Les01-Samenvatting.md) +**Lesmateriaal:** +- [Slide-Overzicht](Les01-Introductie-AI/Les01-Slide-Overzicht.md) +- [Lesplan](Les01-Introductie-AI/Les01-Lesplan.md) +- [Docenttekst](Les01-Introductie-AI/Les01-Docenttekst.md) +- [Keynote Notes](Les01-Introductie-AI/Les01-Docenttekst-Notes.md) +- [Lesopdracht](Les01-Introductie-AI/Les01-Bijlage-A-Lesopdracht.md) +- [Huiswerkopdracht](Les01-Introductie-AI/Les01-Bijlage-B-Huiswerkopdracht.md) + +[β†’ Ga naar Les 1 Samenvatting](Samenvattingen/Les01-Samenvatting.md) --- ### Les 2: AI Code Assistants en OpenCode -**Tools:** OpenCode (Terminal UI + Desktop App), Groq API, Ollama +**Tools:** OpenCode Terminal, OpenCode Zen (gratis AI), Git, Vercel **Docent vertelt:** -- Wat is OpenCode? Open-source AI coding assistant met 26.000+ GitHub stars -- **Demo Terminal UI:** Laat zien hoe krachtig maar overweldigend de terminal versie is -- **Demo Desktop App:** "Gelukkig is er ook dit!" - zelfde features, vriendelijkere interface +- Wat is OpenCode? Open-source AI coding assistant met 60.000+ GitHub stars +- OpenCode Zen: gratis AI modellen, geen API key nodig - Keyboard shortcuts: `Ctrl+K` (commands), `@` (file search), `Tab` (Build/Plan mode) - Build vs Plan mode: wanneer welke gebruiken -- AI model providers: Groq (gratis cloud) vs Ollama (lokaal, privacy) -- Wanneer AI wel/niet te vertrouwen +- De deployment workflow: git push β†’ Vercel auto-deploy +- Nieuw project naar Vercel koppelen (voor huiswerk) **Studenten doen:** -- **Groepsdiscussie:** Bespreek klassikaal de reflecties uit Les 1 - wat zijn de voor- en nadelen van AI? -- OpenCode Desktop App installeren -- Groq API configureren (gratis) -- **Optioneel:** Ollama installeren voor lokaal model -- Keyboard shortcuts oefenen -- Plan mode gebruiken voor analyse, Build mode voor code schrijven -- Responsive navbar bouwen met AI assistance +- Korte terugblik op Les 1 (v0 workflow) +- OpenCode installeren en OpenCode Zen configureren +- Bestaand v0 project clonen en lokaal draaien +- Met OpenCode nieuwe secties toevoegen +- Deployen via git push β†’ Vercel -**Lesopdracht:** Installeer OpenCode, configureer Groq, oefen keyboard shortcuts, bouw responsive navbar met Plan mode (analyse) β†’ Build mode (implementatie). +**Lesopdracht:** Breid je v0 website uit met OpenCode. Clone je repo, draai lokaal, voeg nieuwe secties toe (testimonials, pricing, FAQ), deploy minimaal 2x naar Vercel. **Huiswerk:** -- Bouw landing page component library (hero, features, testimonial, CTA, footer) -- Schrijf blog post over OpenCode ervaring (300 woorden): Terminal vs Desktop, Build vs Plan mode, Groq vs Ollama -- **Optioneel:** Heb je het gevoel dat je React-kennis wat is weggezakt? Gebruik de eerste twee weken ook om React Fundamentals op EdHub te herhalen. +- Maak nieuw project vanaf scratch met `create-next-app` +- Bouw 3 componenten met OpenCode (navbar, hero, + keuze) +- Push naar GitHub, koppel aan Vercel +- Schrijf reflectie (300 woorden) -[β†’ Ga naar Les 2](Samenvattingen/Les02-Samenvatting.md) +**Lesmateriaal:** +- [Slide-Overzicht](Les02-OpenCode/Les02-Slide-Overzicht.md) +- [Lesplan](Les02-OpenCode/Les02-Lesplan.md) +- [Docenttekst](Les02-OpenCode/Les02-Docenttekst.md) +- [Keynote Notes](Les02-OpenCode/Les02-Docenttekst-Notes.md) +- [Lesopdracht](Les02-OpenCode/Les02-Bijlage-A-Lesopdracht.md) +- [Huiswerkopdracht](Les02-OpenCode/Les02-Bijlage-B-Huiswerkopdracht.md) + +[β†’ Ga naar Les 2 Samenvatting](Samenvattingen/Les02-Samenvatting.md) ---