diff --git a/Les01-Introductie-AI/Les01-Slide-Overzicht.md b/Les01-Introductie-AI/Les01-Slide-Overzicht.md index ebe6818..4d013a1 100644 --- a/Les01-Introductie-AI/Les01-Slide-Overzicht.md +++ b/Les01-Introductie-AI/Les01-Slide-Overzicht.md @@ -2,181 +2,198 @@ ## Slide Overzicht (3 uur les) +**Spreektijd docent:** ~55 minuten +**Demo v0.dev:** ~25 minuten +**Hands-on opdracht:** ~50 minuten +**Afsluiting + buffer:** ~30 minuten + --- -## DEEL 1: WELKOM & INTRODUCTIE (13 minuten) +## BLOK 1: WELKOM & INTRODUCTIE (13 minuten) ### Slide 1: Titelslide +*(30 seconden)* -**Titel:** Introductie tot AI en Large Language Models -**Subtitel:** AI Development - Les 1 -**Docent:** Tim Rijkse -**Datum:** 4 februari 2026 +**Titel:** Introductie tot AI en Large Language Models +**Subtitel:** AI Development - Les 1 +**Docent:** Tim Rijkse +**Datum:** [Datum invullen] --- ### Slide 2: Planning - -**Titel:** Planning - -**Inhoud:** -**14:00 - 14:50** -→ Welkom & kennismaking -→ Theorie: Wat is AI en LLMs -→ AI Landscape: de grote spelers - -**14:50 - 15:15** -→ _Praktijk:_ ChatGPT leren gebruiken - -**15:15 - 15:30** -→ Prompt Engineering basics - -**15:30 - 16:00** -→ _Demo:_ Van schets naar website met v0.dev - -**16:00 - 16:50** -→ _Lesopdracht:_ Jouw tekening wordt een website - -**16:50 - 17:00** -→ Afsluiting & Huiswerk - ---- - -### Slide 3: Lesoverzicht +*(1,5 minuut)* **Titel:** Wat gaan we vandaag doen? **Inhoud:** -- Kennismaking met elkaar en de leerlijn -- Wat is AI en hoe werken LLMs? -- Het AI-landschap: ChatGPT, Claude, Gemini -- **Hands-on: ChatGPT leren gebruiken** -- Prompt engineering: de juiste vraag stellen -- Live demo: van schets naar werkende website -- Zelf aan de slag: **jouw tekening wordt een website!** +| Tijd | Onderwerp | +|------|-----------| +| 14:00 - 14:40 | Welkom, theorie AI & LLMs | +| 14:40 - 15:00 | ChatGPT in de praktijk | +| 15:00 - 15:12 | Prompt Engineering | +| 15:12 - 15:37 | Demo: Schets naar website | +| 15:37 - 16:30 | Hands-on opdracht | +| 16:30 - 17:00 | Afsluiting & huiswerk | -**Leerdoel:** Na deze les kun je een schets omzetten naar een gedeployde website met AI. +**Einddoel:** Van een tekening op papier naar een live website! + +--- + +### Slide 3: Voorstellen docent +*(1,5 minuut)* + +**Titel:** Even voorstellen + +**Inhoud:** +- Naam: Tim Rijkse +- Developer + AI docent bij NOVI +- Dagelijks bezig met AI-assisted development +- Bereikbaar via Teams --- ### Slide 4: Kennismaking +*(5 minuten - studenten aan het woord)* **Titel:** Wie zijn jullie? **Inhoud:** - - Naam - Achtergrond (werk/studie) -- Ervaring met AI tools (ChatGPT, Claude, etc.) -- Wat hoop je te leren in deze leerlijn? +- Heb je al eens ChatGPT of andere AI-tools gebruikt? +- Zo ja, waarvoor? --- ### Slide 5: De Leerlijn AI Developer +*(2 minuten)* -**Titel:** Wat gaan we 18 weken lang doen? +**Titel:** 18 weken, 3 delen **Inhoud:** -- **Hoofdstuk 1 (Les 1-3):** AI Fundamentals - basis begrip en ethiek -- **Hoofdstuk 2 (Les 4-9):** AI Driven Development - tools en workflows -- **Hoofdstuk 3 (Les 10-18):** Full-Stack met AI - productie-klare apps bouwen +| Deel | Lessen | Focus | +|------|--------|-------| +| 1: Fundamentals | 1-3 | AI basics, tools leren kennen | +| 2: Intermediate | 4-9 | Workflows, Supabase, MCP | +| 3: Advanced | 10-18 | Testing, deployment, eindproject | -**Eindresultaat:** Je bouwt een complete full-stack applicatie met AI assistance +**Eindresultaat:** Complete full-stack applicatie met AI --- -## DEEL 2: WAT IS AI? (20 minuten) +### Slide 6: Accounts Check +*(2,5 minuten)* -### Slide 6: Wat is Artificial Intelligence? +**Titel:** Heb je deze accounts? + +**Inhoud:** +- ✅ ChatGPT account (chat.openai.com) - gratis +- ✅ GitHub account (github.com) - gratis + +**Actie:** Maak nu aan als je ze nog niet hebt! + +--- + +## BLOK 2: WAT IS AI? (15 minuten) + +### Slide 7: Wat is Artificial Intelligence? +*(3 minuten)* **Titel:** AI - Meer dan een buzzword **Inhoud:** -- **Definitie:** Computersystemen die taken uitvoeren die normaal menselijke intelligentie vereisen -- **Typen AI:** - - Narrow AI (wat we nu hebben): specifieke taken - - General AI (toekomst): breed menselijk denken -- **Voorbeelden:** - - Aanbevelingen (Netflix, Spotify) - - Spraakassistenten (Siri, Alexa) - - Code generatie (ChatGPT, Copilot) +**Definitie:** Computersystemen die taken uitvoeren die normaal menselijke intelligentie vereisen + +**Typen AI:** +- **Narrow AI** (wat we nu hebben): specifieke taken +- **General AI** (toekomst): breed menselijk denken + +**Voorbeelden:** +- Aanbevelingen (Netflix, Spotify) +- Spraakassistenten (Siri, Alexa) +- Code generatie (ChatGPT, Copilot) --- -### Slide 7: Hoe werken Large Language Models? +### Slide 8: Hoe werken Large Language Models? +*(4 minuten)* -**Titel:** De magie achter ChatGPT en Claude +**Titel:** De magie achter ChatGPT **Inhoud:** -1. **Training:** Model leest miljarden teksten (boeken, websites, code) -2. **Patroonherkenning:** Leert statistische verbanden tussen woorden -3. **Voorspelling:** Voorspelt steeds het volgende woord dat "logisch" volgt +1. **Training:** Model leest miljarden teksten +2. **Patroonherkenning:** Leert statistische verbanden +3. **Voorspelling:** Voorspelt het volgende woord 4. **Output:** Genereert tekst token voor token -**Belangrijk:** - +**Belangrijk inzicht:** - LLMs "begrijpen" niet echt - ze voorspellen -- Ze kunnen overtuigend klinken maar fout zijn ("hallucinaties") -- Altijd output checken! +- Geen bewustzijn, geen intentie +- Geavanceerde patroonherkenning op enorme schaal --- -### Slide 8: Next-Token Prediction +### Slide 9: Next-Token Prediction +*(3 minuten)* **Titel:** Hoe "denkt" een LLM? **Inhoud:** -**Voorbeeld:** "De kat zat op de \_\_\_" + +**Voorbeeld:** "De kat zat op de ___" Het model berekent kansen: - - "mat" → 65% - "stoel" → 15% - "bank" → 10% -- "auto" → 2% → Kiest waarschijnlijk "mat" (maar niet altijd!) **Dit verklaart:** - - Waarom het soms briljant is - Waarom het soms onzin produceert - Waarom dezelfde vraag verschillende antwoorden geeft --- -### Slide 9: Hallucinaties +### Slide 10: Hallucinaties +*(5 minuten)* **Titel:** Waarom AI soms "liegt" **Inhoud:** -**Wat zijn hallucinaties?** +**Wat zijn hallucinaties?** - AI verzint informatie die niet bestaat - Klinkt heel overtuigend -- Bronnen, namen, feiten kunnen compleet verzonnen zijn +- Grammaticaal perfect, maar feitelijk onjuist **Voorbeelden:** - - Fake wetenschappelijke papers met echte-klinkende titels -- Niet-bestaande wetten of regels -- Verzonnen statistieken +- Niet-bestaande npm packages met installatie-instructies +- Verzonnen restaurants met adressen -**Regel:** Verifieer altijd belangrijke informatie! +**Waarom gebeurt dit?** +Het model voorspelt wat LIJKT op correcte output, niet wat WAAR is. + +**Regel:** Verifieer altijd! Vertrouw, maar check. --- -## DEEL 3: HET AI-LANDSCHAP (15 minuten) +## BLOK 3: HET AI-LANDSCHAP (10 minuten) -### Slide 10: De Grote Spelers +### Slide 11: De Grote Spelers +*(3 minuten)* **Titel:** Welke AI tools zijn er? **Inhoud:** + | Tool | Bedrijf | Sterk in | |------|---------|----------| | **ChatGPT** | OpenAI | Algemeen, code, creatief | @@ -184,56 +201,58 @@ Het model berekent kansen: | **Gemini** | Google | Google integratie | | **Grok** | xAI | Actueel nieuws (X/Twitter) | -**Vandaag focussen we op ChatGPT** - de meest gebruikte tool. +**Vandaag:** Focus op ChatGPT - meest toegankelijk. --- -### Slide 11: Gratis vs Betaald +### Slide 12: Gratis vs Betaald +*(3 minuten)* **Titel:** Heb je de betaalde versie nodig? **Inhoud:** + | | Gratis | Betaald ($20/maand) | |---|--------|---------------------| -| **Model** | GPT-4o (goed!) | GPT-4 (beste) | -| **Snelheid** | Langzamer bij drukte | Prioriteit | -| **Limieten** | ~10-15 berichten/3u | 40+ berichten/3u | -| **Features** | Basis | DALL-E, Canvas, meer | +| Model | GPT-4o (goed!) | GPT-4 (beste) | +| Snelheid | Langzamer bij drukte | Prioriteit | +| Limieten | ~10-15 berichten/3u | 40+ berichten/3u | **Voor deze cursus:** Gratis is voldoende! --- -### Slide 12: Welke tool voor welke taak? +### Slide 13: Welke tool voor welke taak? +*(4 minuten)* **Titel:** Snelle vergelijking **Inhoud:** + | Taak | Beste keuze | |------|-------------| | Snelle code snippets | ChatGPT of Claude | -| Lange documenten analyseren | Claude (200K context) | -| Actueel nieuws | Grok | -| Google Docs integratie | Gemini | -| UI componenten genereren | v0.dev (straks!) | +| Lange documenten | Claude (200K context) | +| Actueel nieuws | Grok of Perplexity | +| UI componenten | v0.dev (straks!) | **Tip:** Professionele developers gebruiken meerdere tools! --- -## DEEL 4: CHATGPT IN DE PRAKTIJK (25 minuten) +## BLOK 4: CHATGPT IN DE PRAKTIJK (22 minuten) -### Slide 13: ChatGPT Interface +### Slide 14: ChatGPT Interface +*(3 minuten)* **Titel:** Laten we ChatGPT openen **Inhoud:** -_[Live demonstratie - open chat.openai.com]_ + +*[Live demonstratie - open chat.openai.com]* **Wat je ziet:** - - Chatvenster (midden) -- Nieuwe chat starten (linksboven) - Chat geschiedenis (links) - Model kiezen (bovenaan) - Instellingen (rechtsonder) @@ -242,188 +261,169 @@ _[Live demonstratie - open chat.openai.com]_ --- -### Slide 14: Model Kiezen +### Slide 15: Model Kiezen +*(2 minuten)* **Titel:** Welk model gebruik je? **Inhoud:** -**In ChatGPT kun je kiezen:** +**In ChatGPT kun je kiezen:** - **GPT-4o** - Standaard, snel, gratis - **GPT-4o with canvas** - Voor documenten bewerken - **GPT-4** - Meest krachtig (betaald) **Tip:** GPT-4o is voor de meeste taken prima! -_[Demonstreer model selector]_ - --- -### Slide 15: Tijdelijke Chat +### Slide 16: Tijdelijke Chat +*(2 minuten)* **Titel:** Privacy: Tijdelijke Chat **Inhoud:** -**Wat is tijdelijke chat?** -- Chat wordt NIET opgeslagen in je geschiedenis +**Wat is tijdelijke chat?** +- Chat wordt NIET opgeslagen - Wordt NIET gebruikt om model te trainen -- Verdwijnt na sluiten **Wanneer gebruiken?** - - Gevoelige informatie - Werk-gerelateerde data -- Als je niet wilt dat het wordt onthouden - -_[Demonstreer: klik op naam → Temporary Chat]_ +- Client gegevens --- -### Slide 16: Afbeeldingen Analyseren +### Slide 17: Afbeeldingen Analyseren +*(5 minuten)* -**Titel:** Image-to-Text in ChatGPT +**Titel:** Image-to-Text - Cruciaal voor onze workflow! **Inhoud:** -**Wat kun je doen?** +**Wat kun je doen?** - Foto uploaden en vragen stellen - Screenshot laten analyseren - **Schets laten interpreteren** ← Dit gebruiken we straks! -- Tekst uit afbeelding halen (OCR) -**Voorbeeld use cases:** +**Hoe werkt het?** +- Klik op 📎 (paperclip) +- Upload afbeelding +- Stel je vraag -- "Beschrijf deze wireframe in detail" -- "Maak van deze schets een gedetailleerde prompt" -- "Zet deze tekening om naar specificaties" - -_[Demonstreer met een schets/foto]_ +*[Live demonstratie met een schets]* --- -### Slide 17: Bestanden Uploaden +### Slide 18: Bestanden Uploaden +*(2 minuten)* -**Titel:** PDF's en documenten lezen +**Titel:** PDF's en documenten **Inhoud:** -**ChatGPT kan:** +**ChatGPT kan:** - PDF's lezen en samenvatten - Word documenten analyseren - Code bestanden reviewen - Spreadsheets interpreteren -**Hoe?** - -- Klik op 📎 (paperclip) icoon -- Sleep bestand in het chatvenster -- Of copy-paste tekst - -_[Demonstreer met een kort PDF]_ +**Limiet:** ~50 pagina's per document --- -### Slide 18: Custom Instructions +### Slide 19: Custom Instructions +*(3 minuten)* **Titel:** ChatGPT Personaliseren **Inhoud:** -**Wat zijn Custom Instructions?** +**Wat zijn Custom Instructions?** - Permanente instructies die ChatGPT onthoudt -- Hoef je niet elke chat te herhalen - Zit in Instellingen → Personalisatie **Handige voorbeelden:** - - "Ik ben een frontend developer, gebruik React en Tailwind" - "Antwoord in het Nederlands tenzij ik Engels vraag" - "Geef code voorbeelden met TypeScript" -_[Demonstreer waar dit staat]_ - --- -### Slide 19: Het Geheugen van ChatGPT +### Slide 20: Het Geheugen +*(1 minuut)* **Titel:** Wat onthoudt ChatGPT? **Inhoud:** -**ChatGPT onthoudt:** +**Onthoudt wel:** - Eerdere chats (tenzij tijdelijk) - Custom instructions -- Dingen die je expliciet vraagt te onthouden -**ChatGPT onthoudt NIET:** - -- Automatisch alles uit vorige chats -- Context na lange tijd +**Onthoudt NIET:** +- Automatisch context uit andere chats - Wat je in andere sessies zei **Tip:** Start nieuwe chat voor nieuw onderwerp! --- -### Slide 20: Praktijk Oefening +### Slide 21: Praktijk Oefening +*(4 minuten - studenten werken)* -**Titel:** Probeer het zelf! (5 minuten) +**Titel:** Probeer het zelf! **Inhoud:** -**Opdracht:** -1. Open ChatGPT (chat.openai.com) -2. Start een nieuwe chat -3. Stel een vraag over een programmeerconcept -4. Upload een afbeelding en vraag wat erop staat - -**Bonus:** Bekijk je Custom Instructions - -_[Geef 5 minuten om te experimenteren]_ +**Opdracht (4 minuten):** +1. Start een nieuwe chat +2. Stel een vraag +3. Upload een afbeelding (foto van iets op je bureau) +4. Bekijk waar Custom Instructions staan --- -## DEEL 5: PROMPT ENGINEERING (15 minuten) +## BLOK 5: PROMPT ENGINEERING (12 minuten) -### Slide 21: Wat is Prompt Engineering? +### Slide 22: Wat is Prompt Engineering? +*(2 minuten)* **Titel:** De kunst van het vragen stellen **Inhoud:** + **Een prompt is:** De instructie die je aan AI geeft **Waarom belangrijk?** - -- Zelfde vraag, andere formulering = totaal andere output - Goede prompt = bruikbaar resultaat - Slechte prompt = frustratie -**Prompt engineering = leren hoe je effectief vraagt** +**Garbage in = garbage out!** --- -### Slide 22: Slechte vs Goede Prompt +### Slide 23: Slechte vs Goede Prompt +*(3 minuten)* **Titel:** Het verschil zien **Slechte prompt:** - > "Maak een button" **Goede prompt:** - -> "Maak een React button component met Tailwind CSS. De button moet primary styling hebben (blauw), een hover state, en een loading state met een spinner. TypeScript graag." +> "Maak een React button component met Tailwind CSS. Primary styling met blauwe achtergrond (#2563EB). Include hover state en loading state met spinner." **Waarom beter?** - - Specificeert technologie -- Beschrijft gewenste features -- Geeft context +- Beschrijft features +- Geeft visuele details --- -### Slide 23: Prompt Framework +### Slide 24: Prompt Framework +*(2 minuten)* **Titel:** 4 elementen van een goede prompt @@ -432,364 +432,323 @@ _[Geef 5 minuten om te experimenteren]_ 1. **Rol:** "Je bent een senior frontend developer..." 2. **Context:** "...die werkt aan een SaaS landingspagina..." 3. **Taak:** "...maak een hero section met..." -4. **Format:** "...gebruik React en Tailwind, voeg comments toe" - -**Voorbeeld gecombineerd:** - -> "Je bent een senior frontend developer. Maak een hero section voor een SaaS website. Gebruik React met Tailwind CSS. Voeg comments toe die uitleggen wat de code doet." +4. **Format:** "...gebruik React en Tailwind" --- -### Slide 24: Tech Stack Specificeren +### Slide 25: Tech Stack Specificeren +*(2 minuten)* -**Titel:** Vertel de AI welke technologie je wilt +**Titel:** Vertel de AI welke technologie **Inhoud:** -**Wat is een tech stack?** -De technologieën waarmee je bouwt. - -**Voor deze cursus gebruiken we:** +**Voor deze cursus:** - **React** - JavaScript framework voor UI -- **Tailwind CSS** - Utility-first CSS framework -- **TypeScript** (optioneel) - Getypeerd JavaScript +- **Tailwind CSS** - Utility-first CSS +- **Next.js** - React framework **In je prompt:** - -> "Gebruik React met Tailwind CSS voor styling. Maak het responsive met mobile-first design." +> "Gebruik React met Tailwind CSS" **Tip:** v0.dev genereert automatisch React + Tailwind! --- -### Slide 25: Kleuren en Look & Feel +### Slide 26: Kleuren en Look & Feel +*(2 minuten)* -**Titel:** Visuele specificaties in je prompt +**Titel:** Visuele specificaties **Inhoud:** -**Wat kun je specificeren?** -- **Kleuren:** "#2563EB voor primary, #1E40AF voor secondary" -- **Stijl:** "Modern, minimalistisch, professioneel" -- **Sfeer:** "Vriendelijk en toegankelijk" of "Corporate en serieus" +**Wat specificeren?** +- **Kleuren:** "#2563EB" of "blauw thema" +- **Stijl:** "Modern, minimalistisch" - **Referenties:** "In de stijl van Stripe.com" **Voorbeeld:** - -> "Gebruik een blauw kleurenschema met primary #2563EB. De stijl moet modern en minimalistisch zijn, geschikt voor een B2B SaaS startup." +> "Blauw kleurenschema met primary #2563EB. Modern en minimalistisch. B2B SaaS stijl." --- -### Slide 26: Prompting Tips +### Slide 27: Prompting Tips +*(1 minuut)* -**Titel:** Praktische tips +**Titel:** Samenvatting **Inhoud:** -1. **Geef een rol:** "Je bent een expert in..." -2. **Wees specifiek:** Niet "maak iets moois" maar "maak een hero met gradient" -3. **Specificeer tech stack:** "React, Tailwind, TypeScript" -4. **Beschrijf look & feel:** Kleuren, stijl, sfeer -5. **Geef voorbeelden:** "Zoals de website van Stripe" -6. **Itereer:** Eerste poging is zelden perfect - -**Onthoud:** Garbage in = garbage out! +1. Geef een rol +2. Wees specifiek +3. Specificeer tech stack +4. Beschrijf look & feel +5. Itereer - eerste poging is zelden perfect --- -## DEEL 6: LIVE DEMO V0.DEV (27 minuten) +## BLOK 6: LIVE DEMO V0.DEV (25 minuten) -### Slide 27: Introductie v0.dev +### Slide 28: Introductie v0.dev +*(3 minuten)* -**Titel:** Van schets naar werkende website +**Titel:** Van schets naar website **Inhoud:** + **v0.dev door Vercel:** - - AI-powered UI generator - Begrijpt tekst EN afbeeldingen - Genereert React + Tailwind code -- Direct deploybaar naar internet +- Direct deploybaar -**Vandaag leer je de workflow:** -Tekening op papier → Foto → ChatGPT → Prompt → v0.dev → Website! +**De workflow:** +Tekening → Foto → ChatGPT → Prompt → v0.dev → Website! --- -### Slide 28: De Slimme Workflow +### Slide 29: De Slimme Workflow +*(3 minuten)* -**Titel:** Van schets naar site in 5 stappen +**Titel:** 5 stappen **Inhoud:** ``` 1. TEKEN je idee op papier ↓ -2. Maak een FOTO van je tekening +2. Maak een FOTO ↓ -3. Upload naar CHATGPT + beschrijf je wensen - (kleuren, stijl, tech stack) +3. Upload naar CHATGPT + beschrijf wensen + (tech stack, kleuren, stijl) ↓ -4. ChatGPT maakt een gedetailleerde PROMPT +4. ChatGPT maakt gedetailleerde PROMPT ↓ -5. Plak die prompt in V0.DEV → Website! +5. Plak in V0.DEV → Website! ``` -**Waarom eerst ChatGPT?** - -- v0 heeft beperkte gratis credits (~7/dag) -- ChatGPT is "gratis" voor prompt optimalisatie -- Je tekening + beschrijving = perfecte prompt! +**Waarom ChatGPT eerst?** +- v0 heeft beperkte credits (~7/dag) +- ChatGPT optimaliseert je prompt --- -### Slide 29: Live Demo - Schets Maken +### Slide 30: Live Demo - Schets Maken +*(3 minuten)* **Titel:** Stap 1: Tekenen **Inhoud:** -_[Docent tekent live op papier]_ + +*[Docent tekent live op papier]* **Ik teken een hero section:** - - Links: titel + tekst + button -- Rechts: placeholder voor afbeelding -- Simpele lijnen, geen kunstwerk nodig! +- Rechts: afbeelding placeholder -**Belangrijke elementen:** - -- Layout (waar staat wat?) -- Tekst indicaties -- Knoppen -- Afbeelding placeholders +**Het hoeft niet mooi te zijn!** +Blokken en lijnen zijn genoeg. --- -### Slide 30: Live Demo - Foto naar ChatGPT +### Slide 31: Live Demo - ChatGPT +*(7 minuten)* **Titel:** Stap 2 & 3: Foto + Beschrijving **Inhoud:** -_[Docent maakt foto en upload naar ChatGPT]_ -**Mijn prompt aan ChatGPT:** +*[Docent maakt foto en upload naar ChatGPT]* -> "Dit is een schets voor een hero section van mijn website. +**Prompt:** +> "Dit is een schets voor een hero section. > -> Beschrijf deze schets als een gedetailleerde prompt voor v0.dev. +> Beschrijf dit als een prompt voor v0.dev. > > Tech stack: React met Tailwind CSS -> Kleuren: Blauw thema met primary #2563EB -> Stijl: Modern, minimalistisch, professioneel -> Doel: SaaS landingspagina voor projectmanagement tool" - -_[Toon ChatGPT response]_ +> Kleuren: Blauw thema, primary #2563EB +> Stijl: Modern, minimalistisch +> Doel: SaaS landingspagina voor TaskFlow" --- -### Slide 31: Live Demo - Prompt naar v0 +### Slide 32: Live Demo - v0.dev +*(5 minuten)* -**Titel:** Stap 4 & 5: v0.dev +**Titel:** Stap 4 & 5: Genereren **Inhoud:** -_[Docent kopieert prompt naar v0.dev]_ + +*[Docent kopieert prompt naar v0.dev]* **Let op:** - - Generatie duurt ~30 seconden -- Je krijgt direct een preview +- Direct een preview - Code is React + Tailwind -- Precies wat je tekende! - -_[Toon resultaat]_ --- -### Slide 32: Live Demo - Itereren +### Slide 33: Live Demo - Itereren +*(2 minuten)* -**Titel:** Verfijnen in v0 +**Titel:** Verfijnen **Inhoud:** -_[Docent itereert op het resultaat]_ **Follow-up prompts:** - -- "Make the button larger with a hover animation" -- "Add a floating image placeholder on the right" -- "Change the gradient to be more subtle" +- "Make the button larger with hover animation" +- "Add gradient to the background" **Dit is de kracht:** In gesprek gaan met de AI! --- -### Slide 33: Live Demo - Deployen +### Slide 34: Live Demo - Deployen +*(2 minuten)* **Titel:** Live zetten **Inhoud:** -**Deployment in 4 stappen:** -1. Klik "Add Integration" (linkerzijbalk) -2. Koppel je GitHub account -3. v0 maakt automatisch een repository +1. Klik "Add Integration" +2. Koppel GitHub account +3. v0 maakt automatisch repository 4. Klik "Deploy" → Live op Vercel! -**Resultaat:** - -- URL: `jouw-project.vercel.app` -- Code staat in GitHub -- Elke update → automatisch opnieuw gedeployd +**Resultaat:** `jouw-project.vercel.app` --- -## DEEL 7: HANDS-ON OPDRACHT (55 minuten) +## BLOK 7: HANDS-ON OPDRACHT (50 minuten) -### Slide 34: Lesopdracht +### Slide 35: Lesopdracht +*(5 minuten uitleg)* **Titel:** Nu zijn jullie aan de beurt! **Inhoud:** + **Opdracht:** Jouw tekening wordt een website! **Stappen:** - 1. **TEKEN** een hero section op papier -2. **FOTO** maken van je tekening -3. **CHATGPT:** Upload foto + beschrijf je wensen -4. **PROMPT:** Kopieer de gegenereerde prompt -5. **V0.DEV:** Plak prompt en genereer -6. **DEPLOY:** Publiceer naar Vercel +2. **FOTO** maken +3. **CHATGPT:** Upload + beschrijf (tech stack, kleuren, stijl!) +4. **PROMPT** kopiëren +5. **V0.DEV:** Genereren +6. **DEPLOY:** Naar Vercel -**Tijd:** ~55 minuten -**Benodigdheden:** Papier, pen, ChatGPT account, GitHub account +**Tijd:** ~45 minuten +**Benodigdheden:** Papier, pen, ChatGPT, GitHub --- -### Slide 35: Opdracht Details +### Slide 36: Aan de slag! +*(45 minuten - studenten werken)* -**Titel:** Wat moet je specificeren? - -**Inhoud:** -**In je ChatGPT prompt, beschrijf:** - -1. **Je schets:** "Dit is een hero section met..." -2. **Tech stack:** "Gebruik React met Tailwind CSS" -3. **Kleuren:** "Primary kleur #2563EB" of "Blauw thema" -4. **Stijl:** "Modern, minimalistisch" of "Speels en kleurrijk" -5. **Doel:** "Voor een SaaS/portfolio/webshop" - -**Vraag ChatGPT:** - -> "Maak van deze schets en beschrijving een gedetailleerde prompt voor v0.dev" - ---- - -### Slide 36: Tips voor de Opdracht - -**Titel:** Succesvol aan de slag +**Titel:** Succes! **Inhoud:** -- **Teken simpel:** Blokken en lijnen zijn genoeg -- **Wees specifiek in ChatGPT:** Hoe meer detail, hoe beter de prompt -- **v0 credits:** ~7 per dag, dus optimaliseer prompt eerst! -- **GitHub vereist:** Maak account aan als je die niet hebt +**Vergeet niet te specificeren:** +- Tech stack: React + Tailwind +- Kleuren: hex codes of beschrijving +- Stijl: modern, minimalistisch, etc. +- Doel: waarvoor is de website? -**Deployment in 3 klikken:** - -1. "Add Integration" → koppel GitHub -2. v0 maakt automatisch repo aan -3. "Deploy" → live! +**Hulp nodig?** Steek je hand op! --- -### Slide 37: Hulpmiddelen +## BLOK 8: AFSLUITING (30 minuten) -**Titel:** Links en resources +### Slide 37: Resultaten Delen +*(8 minuten)* + +**Titel:** Wie wil laten zien? **Inhoud:** -- **ChatGPT:** chat.openai.com -- **v0.dev:** v0.dev -- **GitHub:** github.com - -**Hulp nodig?** - -- Vraag je buurman/buurvrouw -- Steek je hand op -- AI mag ook helpen! +- Laat je schets zien +- Toon het v0 resultaat +- Wat ging goed? Wat was lastig? --- -## DEEL 8: AFSLUITING (10 minuten) - ### Slide 38: Samenvatting +*(4 minuten)* **Titel:** Wat hebben we geleerd? -**Inhoud:** -✅ Hoe LLMs werken (next-token prediction) -✅ AI-landschap: ChatGPT, Claude, Gemini, Grok -✅ ChatGPT praktisch gebruiken -✅ Prompt engineering: rol, context, tech stack, kleuren +**Inhoud:** + +✅ Hoe LLMs werken (next-token prediction) +✅ AI-landschap: ChatGPT, Claude, Gemini +✅ ChatGPT praktisch gebruiken +✅ Prompt engineering: tech stack, kleuren, stijl ✅ **De workflow: Schets → ChatGPT → v0.dev → Website!** --- ### Slide 39: Huiswerk +*(5 minuten)* **Titel:** Voor volgende week **Inhoud:** -**Opdracht (2 uur):** -1. Schrijf reflectie (500 woorden) over je eerste AI-ervaring -2. Bedenk 5 concrete use cases voor AI in jouw werk -3. **Maak een tweede schets** voor een andere pagina/component -4. Doorloop de workflow opnieuw (schets → ChatGPT → v0 → deploy) -5. Documenteer resultaten met screenshots +1. **Reflectie** (500 woorden) over je AI-ervaring +2. **5 use cases** bedenken voor AI in development +3. **Tweede component** bouwen via de workflow + - Kies iets anders: pricing, features, footer + - Specificeer weer: tech stack, kleuren, stijl -**Inleveren:** Via Teams chat +**Inleveren:** Via Teams, voor volgende les --- ### Slide 40: Volgende Les +*(1 minuut)* -**Titel:** Les 2: Prompt Engineering Verdieping +**Titel:** Les 2: AI Code Assistants **Inhoud:** -**Wat komt:** -- Geavanceerde prompt technieken -- Chain of thought prompting -- Few-shot learning -- Custom GPTs verkennen +- OpenCode Desktop App +- AI-geïntegreerde development +- Van chat naar echte IDE -**Voorbereiding:** - -- Huiswerk af -- ChatGPT account werkt +**Voorbereiding:** Huiswerk af! --- -### Slide 41: Bedankt! +### Slide 41: Vragen & Afsluiting +*(12 minuten buffer)* **Titel:** Tot volgende week! **Inhoud:** -🚀 Succes met het huiswerk! -_"The best way to predict the future is to create it."_ -— Alan Kay +Vragen? + +🚀 Succes met het huiswerk! --- -## Totaal: 41 slides +## Timing Samenvatting -## Geschatte tijd presentatie: ~70 minuten +| Blok | Onderwerp | Duur | +|------|-----------|------| +| 1 | Welkom & Introductie | 13 min | +| 2 | Wat is AI? | 15 min | +| 3 | AI Landscape | 10 min | +| 4 | ChatGPT Praktijk | 22 min | +| 5 | Prompt Engineering | 12 min | +| 6 | Demo v0.dev | 25 min | +| 7 | Hands-on Opdracht | 50 min | +| 8 | Afsluiting | 30 min | -## ChatGPT praktijk: ~25 minuten - -## Demo v0.dev: ~27 minuten - -## Hands-on tijd: ~55 minuten +**Spreektijd (Blok 1-5):** ~55 minuten +**Demo (Blok 6):** ~25 minuten +**Hands-on + Afsluiting:** ~80 minuten +**Totaal:** 180 minuten (3 uur)