# Docenttekst Les 1: Introductie AI & Large Language Models > **Totale lesduur:** 3 uur (180 minuten) > **Spreektijd docent:** ~55 minuten > **Format:** Volledig uitgeschreven script per slide > **Kernworkflow:** Schets op papier → ChatGPT → v0.dev → Website --- ## BLOK 1: WELKOM & INTRODUCTIE (13 minuten) ### Slide 1: Welkomstslide **[0:00 - 0:30]** _(30 seconden)_ _[Wacht tot iedereen zit, maak oogcontact]_ "Goedemorgen allemaal, welkom bij de eerste les van AI Fundamentals. Fijn dat jullie er zijn. Neem even de tijd om je laptop open te klappen en je spullen klaar te leggen." _[Korte pauze van 20-30 seconden]_ --- ### Slide 2: Planning **[0:30 - 2:00]** _(1,5 minuut)_ "Voordat we beginnen, laat ik jullie even zien wat we vandaag gaan doen. Zo weten jullie waar je aan toe bent." _[Wijs naar de tijdsblokken op de slide]_ "We beginnen met theorie over wat AI is en hoe het werkt. Daarna gaan we praktisch aan de slag met ChatGPT - ik laat zien hoe je die tool effectief gebruikt." "Dan komt het spannende deel: prompt engineering. Hoe stel je de juiste vraag? Hoe geef je aan welke technologie, kleuren en stijl je wilt?" _[Met nadruk]_ "En dan de grote finale: ik ga live demonstreren hoe je van een **tekening op papier** naar een **werkende website** gaat. En daarna gaan jullie dat zelf doen." "Jullie gaan vandaag letterlijk een website bouwen die begint als een schets op papier. Dat is het doel." --- ### Slide 3: Voorstellen docent **[2:00 - 3:30]** _(1,5 minuut)_ "Laat ik mezelf even voorstellen. Mijn naam is [NAAM] en ik ben jullie docent voor deze leerlijn. Ik werk zelf als developer en gebruik dagelijks AI-tools in mijn werk." "Wat ik heel gaaf vind aan dit vak is dat het zo snel verandert - wat vandaag cutting edge is, kan over drie maanden alweer achterhaald zijn. Dat maakt het ook uitdagend om les te geven, maar vooral heel leuk." "Ik geef hier twee keer per week les en daarnaast werk ik aan mijn eigen projecten. Als je vragen hebt buiten de les om, kun je me altijd bereiken via Teams." --- ### Slide 4: Kennismaking **[3:30 - 8:30]** _(5 minuten - studenten aan het woord)_ "Maar genoeg over mij - ik ben veel nieuwsgieriger naar jullie. Laten we een snelle ronde doen. Vertel kort je naam en geef antwoord op deze vraag..." _[Wijs naar de slide]_ "...heb je al eens ChatGPT of een andere AI-tool gebruikt? En zo ja, waarvoor?" _[Laat iedereen kort reageren]_ "Mooi, ik zie dat de meesten van jullie al wel eens met AI hebben gewerkt. Dat is een goed startpunt." --- ### Slide 5: De Leerlijn AI Developer **[8:30 - 10:30]** _(2 minuten)_ "Even een vooruitblik op wat we de komende 18 weken gaan doen. De cursus is 30 EC en verdeeld over vier delen." _[Wijs naar de vier delen op de slide]_ "Deel 1, les 1 tot 4, is waar we nu zitten: AI Foundations. Hier leer je de basis - wat is AI, hoe werkt het, prompt engineering, en tools als ChatGPT en OpenCode." "Deel 2, les 5 tot 9, gaat over Technical Foundations. Dan leer je TypeScript, Next.js, en databases met Supabase. Een stevige technische basis." "Deel 3, les 10 tot 12, focust op AI Tooling. Je leert welke tool je wanneer gebruikt, hoe je snel prototypes bouwt, en je maakt kennis met Cursor." "En deel 4, les 13 tot 18, is het eindspel: Advanced AI Features. AI agents, de Vercel AI SDK om AI in je eigen app te bouwen, en deployment. Je eindigt met een volledig werkend eindproject." "Maar dat is ver weg. Vandaag focussen we op de basis - en vooral op de workflow van schets naar website." --- ### Slide 6: Accounts check **[10:30 - 13:00]** _(2,5 minuten)_ _[Iets serieuzer toon]_ "Oké, even een praktisch punt. Hebben jullie allemaal een account aangemaakt bij ChatGPT?" _[Scan de groep, vraag om handopsteken]_ "Wie heeft nog geen account? Oké, maak die dan nu even aan op chat.openai.com. Het is gratis en je hebt alleen een e-mailadres nodig." "Je hebt ook een GitHub account nodig voor later vandaag. Als je die niet hebt, maak die ook even aan op github.com. GitHub is waar developers hun code opslaan en delen - we gebruiken het om onze website te deployen." _[Geef 2 minuten]_ "Is iedereen zover? Mooi, dan gaan we de diepte in." --- ## BLOK 2: WAT IS AI? (15 minuten) ### Slide 7: Wat is Artificial Intelligence? **[13:00 - 16:00]** _(3 minuten)_ "Oké, eerste grote vraag: wat ís eigenlijk AI?" _[Laat dit even hangen]_ "AI, of Artificial Intelligence, is een verzamelnaam. Het zijn computersystemen die taken kunnen uitvoeren waarvoor normaal menselijke intelligentie nodig is." "Denk aan: patronen herkennen in data, beslissingen nemen op basis van informatie, taal begrijpen en genereren. Dingen die wij mensen doen met ons brein, maar dan door een computer." _[Maak onderscheid]_ "Nu is er een belangrijk onderscheid dat je moet kennen. Er is Narrow AI - ook wel Weak AI genoemd - dat is AI die heel goed is in één specifieke taak. ChatGPT is daar een voorbeeld van. Het kan heel goed tekst genereren, maar het kan niet autorijden of schaken - tenzij je het specifiek daarop traint." "En dan heb je General AI - of Strong AI - dat zou AI zijn die alles kan wat een mens kan. Die kan leren, redeneren, problemen oplossen in elke context. Dat bestaat nog niet, en niemand weet of het ooit zal bestaan." "Wat we vandaag gebruiken is Narrow AI. Heel krachtig, maar beperkt tot specifieke taken." --- ### Slide 8: Hoe werken Large Language Models? **[16:00 - 20:00]** _(4 minuten)_ "Nu de vraag die iedereen heeft: hoe werkt ChatGPT eigenlijk? Dit is fascinerend, en als je dit snapt, snap je ook waarom AI soms briljant is en soms complete onzin produceert." "Een Large Language Model - een LLM - is getraind op gigantische hoeveelheden tekst. En met gigantisch bedoel ik: miljarden pagina's. Boeken, websites, Wikipedia, wetenschappelijke papers, code repositories. Een groot deel van wat ooit op het internet is gepubliceerd." "Het model heeft al deze tekst 'gelezen' en daarvan geleerd. Maar wat heeft het precies geleerd?" _[Laat dit even landen]_ "Het heeft geleerd: als ik deze woorden zie, wat is dan het meest waarschijnlijke volgende woord?" "Ja, echt. ChatGPT, Claude, Gemini - al die tools - in de kern zijn het voorspelmachines. Ze krijgen tekst als input en voorspellen token voor token wat er logischerwijs daarna komt." "En ze doen dat zo ongelooflijk goed, gebaseerd op al die miljarden teksten, dat het lijkt alsof ze 'begrijpen' wat je zegt. Maar er zit geen bewustzijn in, geen echte intentie. Het is geavanceerde statistische patroonherkenning op een schaal die we nog nooit eerder hebben gezien." --- ### Slide 9: Next-Token Prediction **[20:00 - 23:00]** _(3 minuten)_ "Laat me dit concreet maken met een voorbeeld." _[Wijs naar de slide]_ "Als ik aan ChatGPT vraag: 'De kat zat op de...' - wat denk je dat hij zegt?" _[Wacht op antwoorden]_ "Precies, grote kans 'mat'. Waarom? Omdat in alle tekst waarop hij getraind is, die combinatie 'de kat zat op de mat' ontelbare keren voorkomt. Statistisch gezien is 'mat' het meest waarschijnlijke volgende woord." "Maar hier wordt het interessant: het model kiest niet altijd het MEEST waarschijnlijke woord. Er zit een element van randomness in - wat we 'temperature' noemen. Anders zou je elke keer exact hetzelfde antwoord krijgen." "Dit verklaart ook waarom je soms hele goede antwoorden krijgt en soms onzin. Het model 'gokt' in zekere zin, gebaseerd op waarschijnlijkheden. Meestal gokt het goed. Soms niet." "En dit brengt me bij iets heel belangrijks..." --- ### Slide 10: Hallucinaties **[23:00 - 28:00]** _(5 minuten)_ _[Iets serieuzere toon]_ "Hallucinaties. Dit is een term die je moet kennen en onthouden." "Wat bedoelen we hiermee? AI kan dingen verzinnen. Compleet uit de lucht gegrepen informatie presenteren alsof het waar is. En het klinkt heel overtuigend, want het is grammaticaal perfect en logisch geformuleerd." _[Geef concrete voorbeelden]_ "Laat me een paar voorbeelden geven. Vraag ChatGPT naar een wetenschappelijk paper over een specifiek onderwerp. Hij kan je een titel geven, auteursnamen, een publicatiejaar, een samenvatting - van iets dat niet bestaat. Het klinkt volledig legitiem, maar als je het opzoekt: niets te vinden." "Of vraag hem naar een JavaScript library voor een specifiek probleem. Hij kan een npm package naam noemen, installatie-instructies geven, code voorbeelden - voor een package dat nooit heeft bestaan." "Ik heb ooit ChatGPT gevraagd naar restaurants in een stad waar ik naartoe ging. Drie van de vijf suggesties bestonden niet. Verzonnen namen, verzonnen adressen." _[Leg uit waarom dit gebeurt]_ "Waarom gebeurt dit? Onthoud: het model voorspelt wat het MEEST WAARSCHIJNLIJK volgende woord is. Het controleert niet of iets waar is. Het genereert tekst die LIJKT op tekst die het eerder heeft gezien. Als je vraagt naar een paper, genereert het tekst die eruitziet als een paper-referentie - maar dat betekent niet dat die referentie bestaat." _[Praktische implicaties]_ "Wat betekent dit voor jullie als developers? Heel simpel: verifieer altijd. Kopieer nooit blindelings code van ChatGPT zonder te begrijpen wat het doet. Check of libraries bestaan. Test je code. Valideer feiten." "AI is een tool, geen orakel. Het is ongelooflijk nuttig, maar je moet het behandelen als een junior collega die heel enthousiast is maar soms dingen verzint. Vertrouw, maar verifieer." --- ## BLOK 3: HET AI-LANDSCHAP (10 minuten) ### Slide 11: De Grote Spelers **[28:00 - 31:00]** _(3 minuten)_ "Oké, nu je begrijpt hoe LLMs werken, laten we kijken welke er zijn. Het landschap verandert snel, maar dit zijn de grote namen." _[Wijs naar de tabel]_ "ChatGPT van OpenAI - dat is de bekendste, de meesten van jullie hebben die al gebruikt. Het is de tool die AI mainstream maakte." "Claude van Anthropic - minder bekend, maar technisch heel sterk. Vooral goed in lange documenten en genuanceerde gesprekken. Persoonlijk gebruik ik Claude vaak voor complexere taken." "Gemini van Google - geïntegreerd in Google's ecosysteem. Handig als je al veel met Google Workspace werkt." "En Grok van xAI, het bedrijf van Elon Musk. Geïntegreerd in X, met toegang tot real-time informatie." "Vandaag focussen we op ChatGPT omdat die het meest toegankelijk is en de beste gratis tier heeft. Maar de concepten die je leert zijn toepasbaar op allemaal." --- ### Slide 12: Gratis vs Betaald **[31:00 - 34:00]** _(3 minuten)_ "Een vraag die altijd komt: heb je de betaalde versie nodig?" "Het korte antwoord voor deze cursus: nee. De gratis versie van ChatGPT draait op GPT-4o, en dat is al behoorlijk krachtig. Je kunt afbeeldingen uploaden, documenten analyseren, code genereren - alles wat we vandaag doen." _[Nuanceer]_ "Wat krijg je wel met de betaalde versie? Meer requests per uur - de gratis versie heeft limieten. Toegang tot de nieuwste modellen. En features als GPT-4 met canvas voor documenten bewerken." "Mijn advies: begin gratis. Gebruik het intensief. Als je merkt dat je constant tegen limieten aanloopt, kun je upgraden. Maar voor het leren van de concepten is gratis meer dan voldoende." "En eerlijk gezegd: voor de workflow die we vandaag leren - schets naar website - is de gratis versie perfect." --- ### Slide 13: Welke tool voor welke taak? **[34:00 - 38:00]** _(4 minuten)_ "Welke tool is het beste? Die vraag krijg ik vaak. En het eerlijke antwoord: het hangt af van wat je wilt doen." _[Loop door de tabel]_ "Voor snelle code snippets - een functie schrijven, een bug fixen - zijn ChatGPT en Claude beide uitstekend. Ik wissel zelf regelmatig." "Voor lange documenten analyseren of schrijven is Claude beter. Die heeft een groter 'geheugen' - technisch: een grotere context window. Je kunt een heel boek uploaden en vragen stellen." "Voor UI componenten - en dat is wat we straks gaan doen - gebruiken we v0.dev. Dat is een speciale tool van Vercel die geoptimaliseerd is voor het genereren van React componenten met Tailwind CSS." "En voor zoeken naar actuele informatie gebruik je beter Perplexity of Gemini - die hebben toegang tot het internet. ChatGPT's kennis heeft een cutoff datum." _[Praktische tip]_ "Mijn tip: experimenteer met meerdere tools. Elke tool heeft sterke en zwakke punten. De beste developers weten wanneer ze welke tool moeten gebruiken." --- ## BLOK 4: CHATGPT IN DE PRAKTIJK (22 minuten) ### Slide 14: ChatGPT Interface **[38:00 - 41:00]** _(3 minuten)_ _[Energieke toon]_ "Oké, genoeg theorie. Open allemaal ChatGPT op je laptop. Ga naar chat.openai.com en log in." _[Wacht tot iedereen de pagina open heeft - 1 minuut]_ "Iedereen erin? Mooi. Laat me jullie rondleiden door de interface." _[Open ChatGPT op het projectiescherm]_ "In het midden heb je het chatvenster - daar typ je je vragen en zie je de antwoorden. Links zie je je chat geschiedenis - handig om terug te gaan naar eerdere gesprekken. Bovenaan kun je het model kiezen - daar komen we zo op. En rechtsonder in je profielfoto vind je instellingen." "De interface is bewust simpel gehouden. De kracht zit in wat je typt, niet in complexe menu's." --- ### Slide 15: Model Kiezen **[41:00 - 43:00]** _(2 minuten)_ "Kijk even bovenaan je scherm. Daar staat welk model je gebruikt." _[Wijs op je eigen scherm]_ "Je hebt een paar opties. GPT-4o is de standaard - dat is snel en voor de meeste taken meer dan genoeg. Dit is wat je waarschijnlijk ziet." "GPT-4o with canvas is speciaal voor wanneer je documenten wilt bewerken - het opent een soort editor naast de chat." "En als je Plus hebt, zie je ook GPT-4 - het krachtigste model, maar langzamer." "Voor vandaag is GPT-4o perfect. Laat het daarop staan." --- ### Slide 16: Tijdelijke Chat **[43:00 - 45:00]** _(2 minuten)_ "Nu iets belangrijks over privacy: tijdelijke chat." _[Demonstreer waar dit staat]_ "Als je een nieuwe chat start, zie je een optie voor 'Temporary Chat'. Als je dit aanzet, wordt je gesprek niet opgeslagen in je geschiedenis en niet gebruikt om het model te trainen." "Wanneer gebruik je dit? Als je werkt met gevoelige informatie. Client data. Interne bedrijfscode. Persoonlijke gegevens. Dan wil je niet dat dat in OpenAI's systemen terecht komt." "Voor deze cursus maakt het niet uit, maar onthoud dit voor je professionele werk." --- ### Slide 17: Afbeeldingen Analyseren **[45:00 - 50:00]** _(5 minuten)_ _[Dit is een belangrijke slide voor de workflow]_ "Nu een feature die cruciaal is voor wat we straks gaan doen: ChatGPT kan afbeeldingen lezen en begrijpen." _[Demonstreer live]_ "Kijk, ik klik hier op het paperclip icoontje... en ik kan een afbeelding uploaden." _[Upload een simpele tekening of screenshot]_ "Ik upload hier een schets die ik eerder heb gemaakt... en ik vraag: 'Wat zie je op deze afbeelding? Beschrijf de layout.'" _[Wacht op response]_ "Kijk wat er gebeurt. ChatGPT beschrijft precies wat hij ziet. De positie van elementen, de structuur, zelfs details die ik misschien over het hoofd zou zien." "Dit heet image-to-text, of vision. Het model 'ziet' de afbeelding en kan erover praten." _[Met nadruk]_ "Dit is de sleutel tot onze workflow vandaag. Jullie gaan een schets tekenen op papier, een foto maken, en die uploaden naar ChatGPT. En ChatGPT gaat die schets 'vertalen' naar een gedetailleerde beschrijving die we kunnen gebruiken voor code generatie." "Het mooie is: je hoeft geen designer te zijn. Je hoeft geen perfecte tekening te maken. ChatGPT begrijpt ook ruwe schetsen." --- ### Slide 18: Bestanden Uploaden **[50:00 - 52:00]** _(2 minuten)_ "Hetzelfde geldt voor documenten. Je kunt een PDF uploaden, een Word document, een Excel bestand, een code bestand." _[Demonstreer kort met een document]_ "Dit is handig voor: documentatie analyseren, code reviewen, data uit spreadsheets halen." "De limiet is ongeveer 50 pagina's per document, en je kunt meerdere bestanden tegelijk uploaden." --- ### Slide 19: Custom Instructions **[52:00 - 55:00]** _(3 minuten)_ "Dan iets heel nuttigs dat weinig mensen kennen: Custom Instructions." _[Ga naar instellingen → Personalisatie]_ "Hier kun je permanent instellen wie je bent en hoe ChatGPT moet antwoorden. Dit wordt automatisch meegenomen in élke chat." "Bijvoorbeeld: 'Ik ben een frontend developer. Ik werk met React en Tailwind CSS. Ik heb een junior niveau. Geef praktische code voorbeelden.'" "Vanaf nu weet ChatGPT in elke nieuwe chat al deze context. Je hoeft niet elke keer opnieuw te vertellen welke technologie je gebruikt." _[Praktische tip]_ "Mijn tip: stel dit in vóór je begint met werken. Het scheelt enorm veel herhaling en je antwoorden worden relevanter." --- ### Slide 20: Het Geheugen **[55:00 - 56:00]** _(1 minuut)_ "Kort over geheugen. ChatGPT onthoudt je eerdere chats - je ziet ze in de zijbalk. Maar het gebruikt die informatie niet automatisch in nieuwe chats." "Elke nieuwe chat begint met een schone lei, behalve je Custom Instructions." "Tip: start een nieuwe chat voor een nieuw onderwerp. Lange chats kunnen verwarrend worden voor het model." --- ### Slide 21: Praktijk Oefening **[56:00 - 60:00]** _(4 minuten - studenten werken)_ "Oké, nu jullie. Vier minuten om te experimenteren." "Drie dingen wil ik dat je probeert:" "Een: start een nieuwe chat en stel een vraag." "Twee: upload een afbeelding - maak een foto van iets op je bureau - en vraag ChatGPT wat hij ziet." "Drie: ga naar Settings en bekijk waar de Custom Instructions staan." _[Geef 4 minuten - loop rond en help waar nodig]_ "Oké, tijd. Wie heeft iets interessants ontdekt?" _[Laat 1-2 studenten kort delen]_ --- ## BLOK 5: PROMPT ENGINEERING (12 minuten) ### Slide 22: Wat is Prompt Engineering? **[60:00 - 62:00]** _(2 minuten)_ "Nu komen we bij een cruciaal onderdeel: prompt engineering." "Een prompt is simpelweg de instructie die je aan AI geeft. De vraag die je stelt, de opdracht die je geeft." "En hier is het belangrijke inzicht dat alles verandert: de kwaliteit van je antwoord hangt direct af van de kwaliteit van je vraag." "Garbage in, garbage out. Als je een vage vraag stelt, krijg je een vaag antwoord. Als je specifiek bent, krijg je specifieke, bruikbare output." "Dit is een vaardigheid - en net als elke vaardigheid kun je het leren." --- ### Slide 23: Slechte vs Goede Prompt **[62:00 - 65:00]** _(3 minuten)_ "Laat me het verschil laten zien." _[Wijs naar de slechte prompt]_ "Dit is wat de meeste mensen doen: 'Maak een button'. Drie woorden. Welke programmeertaal? HTML? React? Vue? Welke stijl? Groot? Klein? Welke kleur? De AI moet alles gokken. En gokken leidt tot generieke output." _[Wijs naar de goede prompt]_ "En dit is beter: 'Maak een React button component met Tailwind CSS. Primary styling met een blauwe achtergrond (#2563EB). Include hover state en een loading state met een spinner.'" "Zie je het verschil? Je specificeert de technologie, de styling, de features. De AI weet precies wat je wilt." _[Demonstreer live als tijd het toelaat]_ "Het resultaat? Bruikbare code die je direct in je project kunt zetten." --- ### Slide 24: Prompt Framework **[65:00 - 67:00]** _(2 minuten)_ "Er is een framework dat helpt. Vier elementen die je kunt gebruiken." _[Wijs naar elk element]_ "Eén: Rol. Vertel de AI wie hij is. 'Je bent een senior frontend developer met 10 jaar ervaring.'" "Twee: Context. Geef achtergrondinformatie. 'Je werkt aan een SaaS landingspagina voor een projectmanagement tool.'" "Drie: Taak. Wat moet er gebeuren. 'Maak een hero section met een headline, subtitel, en call-to-action button.'" "Vier: Format. Hoe moet de output eruit zien. 'Gebruik React en Tailwind CSS. Geef alleen de code, geen uitleg.'" "Je hoeft niet altijd alle vier te gebruiken, maar hoe meer context, hoe beter het resultaat." --- ### Slide 25: Tech Stack Specificeren **[67:00 - 69:00]** _(2 minuten)_ "Nu iets dat jullie moeten begrijpen voor deze cursus: tech stack specificeren." "Wat is een tech stack? De technologieën waarmee je bouwt. Voor deze cursus gebruiken we React met Next.js en Tailwind CSS." "Waarom is dit belangrijk om te specificeren? Als je tegen AI zegt 'maak een button', weet hij niet of je HTML wilt, React, Vue, Angular, Svelte... Er zijn tientallen opties." "Door expliciet te zeggen 'React met Tailwind CSS' krijg je code die je direct kunt gebruiken." _[Met nadruk]_ "En goed nieuws: v0.dev, de tool die we straks gebruiken, genereert automatisch React met Tailwind. Maar in ChatGPT moet je het wel specificeren!" --- ### Slide 26: Kleuren en Look & Feel **[69:00 - 71:00]** _(2 minuten)_ "Het volgende dat je moet specificeren: kleuren en stijl." _[Loop door de opties]_ "Kleuren kun je meegeven op twee manieren. Exact met hex codes: '#2563EB voor primary blue'. Of beschrijvend: 'warm oranje thema met aarde-tinten'." "Stijl beschrijf je met woorden: modern, minimalistisch, speels, corporate, brutalist, retro..." "En je kunt referenties gebruiken. 'In de stijl van Stripe.com' of 'vergelijkbaar met de Apple website'. Dat vertelt de AI heel veel in weinig woorden." "Een complete specificatie: 'Blauw kleurenschema met primary #2563EB. Modern en minimalistisch. Clean met veel whitespace. Geschikt voor een B2B SaaS startup.'" --- ### Slide 27: Prompting Tips **[71:00 - 72:00]** _(1 minuut)_ "Even de tips op een rij voor we verder gaan:" "Geef een rol. Wees specifiek. Specificeer je tech stack. Beschrijf de look & feel. Geef voorbeelden als je kunt. En itereer - je eerste prompt is zelden perfect." "Onthoud: garbage in, garbage out. Investeer in je prompt." --- ## BLOK 6: LIVE DEMO V0.DEV (25 minuten) ### Slide 28: Introductie v0.dev **[72:00 - 75:00]** _(3 minuten)_ _[Energieke toon]_ "Nu wordt het echt leuk. We gaan kijken naar v0.dev." "Dit is een tool van Vercel - het bedrijf achter Next.js, een populair React framework. En het is een gamechanger voor UI development." _[Open v0.dev op je scherm]_ "Wat doet v0? Je beschrijft wat je wilt in tekst, of je uploadt een afbeelding, en v0 genereert werkende React code met Tailwind CSS. Je ziet direct een preview. En je kunt het direct deployen naar het internet." "Maar de slimme workflow die ik jullie vandaag leer combineert ChatGPT en v0. En daar zit de magie." --- ### Slide 29: De Slimme Workflow **[75:00 - 78:00]** _(3 minuten)_ _[Wijs naar het diagram]_ "Dit is de workflow. Vijf stappen. Simpel maar krachtig." "Stap één: je TEKENT je idee op papier. Gewoon pen en papier, zoals vroeger." "Stap twee: je maakt een FOTO van je tekening met je telefoon." "Stap drie: je uploadt die foto naar CHATGPT. En je beschrijft je wensen - welke technologie, welke kleuren, welke stijl." "Stap vier: ChatGPT maakt een gedetailleerde Engelse PROMPT voor je. Een perfecte beschrijving van wat je wilt." "Stap vijf: je plakt die prompt in V0.DEV en je krijgt een werkende website!" _[Leg uit waarom]_ "Waarom doen we het zo? Twee redenen. Eén: v0 heeft beperkte gratis credits - ongeveer zeven generaties per dag. ChatGPT is onbeperkt. Door eerst in ChatGPT je prompt te optimaliseren, verspil je geen v0 credits aan slechte prompts." "Twee: ChatGPT is beter in het 'vertalen' van je ruwe idee naar een gestructureerde prompt. V0 is beter in het genereren van code. Je gebruikt elk tool waar het goed in is." --- ### Slide 30: Live Demo - Schets Maken **[78:00 - 81:00]** _(3 minuten)_ _[Pak pen en papier - dit is live!]_ "Oké, ik ga dit nu live doen. Kijk mee." _[Teken terwijl je praat]_ "Ik teken een hero section voor een fictieve app. Links teken ik een groot tekstvak - hier komt de headline. Daaronder een kleiner vak voor de ondertitel. En daaronder een rechthoek - dat wordt de call-to-action button." "Rechts teken ik een groot vierkant met een X erdoor - dat is een placeholder voor een afbeelding of illustratie." _[Toon je tekening]_ "Kijk, het is niet mooi. Het hoeft ook niet mooi te zijn. Het zijn blokken en lijnen. Het gaat erom dat je de layout communiceert. Waar staat wat? Wat is groot, wat is klein? Dat is alles." --- ### Slide 31: Live Demo - Foto naar ChatGPT **[81:00 - 88:00]** _(7 minuten)_ _[Maak foto en upload naar ChatGPT]_ "Ik maak een foto met mijn telefoon... even uploaden naar ChatGPT..." _[Typ je prompt terwijl je hardop praat]_ "Nu typ ik mijn beschrijving. Let op wat ik allemaal meegeef:" "Dit is een schets voor een hero section van mijn website. Beschrijf deze schets als een gedetailleerde prompt voor v0.dev. Tech stack: React met Tailwind CSS Kleuren: Blauw thema met primary #2563EB en secondary #1E40AF Stijl: Modern, minimalistisch, professioneel met veel whitespace Doel: SaaS landingspagina voor een projectmanagement tool genaamd TaskFlow" _[Druk op enter en wacht]_ "Kijk wat ChatGPT doet. Hij analyseert mijn schets - hij ziet de layout, de positie van elementen. En hij combineert dat met mijn specificaties." _[Wacht op volledige response]_ "En kijk naar de output. Een gedetailleerde Engelse prompt. Hij beschrijft de layout, de kleuren, de styling, de functionaliteit... Dit is precies wat v0 nodig heeft." --- ### Slide 32: Live Demo - Prompt naar v0 **[88:00 - 93:00]** _(5 minuten)_ _[Kopieer en ga naar v0.dev]_ "Ik kopieer deze volledige prompt... ga naar v0.dev... en plak hem hier in het tekstveld." _[Druk op enter]_ "Het duurt even... dertig seconden tot een minuut..." _[Resultaat verschijnt]_ "En daar is het! We hebben een hero section. Kijk - links de tekst met headline en button, rechts een afbeelding. De kleuren die ik specificeerde. De stijl die ik beschreef." _[Klik op Code tab]_ "En hier is de code. Clean React components, Tailwind classes voor styling. Dit kun je kopiëren en direct in je project plakken. Het werkt." --- ### Slide 33: Live Demo - Itereren **[93:00 - 95:00]** _(2 minuten)_ "Maar we zijn niet klaar. De echte kracht is dat je kunt itereren." _[Typ een follow-up]_ "Stel ik wil de button groter. Ik typ: 'Make the button larger with more padding, and add a subtle hover animation that lifts it slightly.'" _[Wacht op generatie]_ "Kijk - de button is aangepast. Dit is hoe je met AI werkt. Je gaat in gesprek. Je verfijnt. Elke iteratie brengt je dichter bij wat je wilt." --- ### Slide 34: Live Demo - Deployen **[95:00 - 97:00]** _(2 minuten)_ "Laatste stap: hoe krijg je dit online?" _[Wijs naar de interface]_ "In v0 zie je een optie om te deployen. V0 vraagt je om je GitHub account te koppelen. Als je dat doet, maakt v0 automatisch een repository aan met je code." "Dan deployt Vercel - het bedrijf achter v0 - je code automatisch. Binnen een minuut heb je een live URL die iedereen kan bezoeken." _[Toon resultaat]_ "Van een tekening op papier naar een live website. In minder dan vijftien minuten. Dat is de kracht van deze workflow." --- ## BLOK 7: HANDS-ON OPDRACHT (53 minuten) ### Slide 35: Opdracht Introductie **[97:00 - 102:00]** _(5 minuten uitleg)_ "Nu zijn jullie aan de beurt. De opdracht is precies wat ik net deed." _[Pak papier en pennen - deel uit als nodig]_ "Jullie gaan een hero section bouwen voor een fictief product. Maar - en dit is belangrijk - jullie beginnen met TEKENEN." _[Loop door de stappen]_ "Stap één: pak papier en pen. Teken je hero section. Het hoeft niet mooi - blokken en lijnen zijn genoeg." "Stap twee: maak een foto met je telefoon." "Stap drie: upload naar ChatGPT. Beschrijf je wensen. En vergeet niet: tech stack, kleuren, stijl!" "Stap vier: kopieer de gegenereerde prompt." "Stap vijf: plak in v0.dev en genereer." "Stap zes: als je tijd hebt, deploy naar Vercel." _[Praktische info]_ "Je hebt 50 minuten. Werk individueel. Documenteer je stappen met screenshots - die heb je nodig voor je inlevering." "Heeft iedereen papier en een pen? Nee? Hier, pak even..." --- ### Slide 36: Aan de slag **[102:00 - 150:00]** _(48 minuten - studenten werken)_ "Succes! Ik loop rond voor vragen." _[Studenten werken - loop actief rond en help]_ **Let op deze veelvoorkomende problemen:** - Slaan ze de tekenstap over? Stuur ze terug naar papier. - Vergeten ze tech stack/kleuren/stijl in ChatGPT? Herinner ze. - v0.dev rate limit? Ze kunnen wachten of je backup screenshots tonen. - GitHub account problemen? Help met aanmaken. **Tussentijdse check [125:00]:** "Even een snelle check. Steek je hand op als je al een prompt uit ChatGPT hebt." _[Tel handen]_ "Mooi. Wie is al in v0.dev aan het genereren?" _[Help kort indien nodig]_ "Nog 25 minuten. Focus op je schets, ChatGPT prompt, en v0 generatie. De deployment is een bonus." _[Studenten werken door tot 150:00]_ --- ## BLOK 8: AFSLUITING (15 minuten) ### Slide 37: Resultaten Delen **[150:00 - 158:00]** _(8 minuten)_ "Oké, tijd om af te ronden. Wie wil zijn resultaat laten zien?" _[Laat 2-3 studenten hun scherm delen en kort presenteren]_ "Wat was je oorspronkelijke idee? Laat je schets zien. En wat heeft v0 ervan gemaakt?" _[Geef korte positieve feedback per student]_ --- ### Slide 38: Samenvatting **[158:00 - 162:00]** _(4 minuten)_ "Laten we even terugkijken naar wat jullie vandaag hebben geleerd." "We begonnen met de theorie: hoe LLMs werken, next-token prediction, en waarom hallucinaties bestaan." "We hebben ChatGPT praktisch verkend: de interface, afbeeldingen uploaden, Custom Instructions." "We hebben prompt engineering gehad: het belang van specificiteit, tech stack, kleuren en stijl meegeven." _[Met nadruk]_ "En het belangrijkste: jullie hebben de workflow geleerd en toegepast. Schets op papier, foto naar ChatGPT, prompt naar v0, en live op het internet." "Jullie zijn developers die AI tools kunnen gebruiken. Dat is wat deze eerste les jullie heeft gegeven." --- ### Slide 39: Huiswerk **[162:00 - 167:00]** _(5 minuten)_ "Voor volgende week heb je huiswerk. Dit lever je in via Teams." _[Wijs naar de slide]_ "Eén: schrijf een reflectie van 500 woorden over je eerste ervaring met AI tools. Wat heb je geleerd? Wat vond je lastig? Wat wil je meer leren?" "Twee: bedenk vijf concrete use cases voor AI in development. Niet vaag - specifiek. Welke taak, welke tool, welk verwacht resultaat." "Drie: doorloop de workflow nog een keer met een ANDER component. Niet weer een hero section. Kies iets anders: een pricing table, een features section, een contact formulier, een footer." _[Met nadruk]_ "En vergeet niet: specificeer weer je tech stack, kleuren en stijl. Documenteer alles met screenshots." "Deadline: voor de volgende les." --- ### Slide 40: Volgende Les **[167:00 - 168:00]** _(1 minuut)_ "Volgende week gaan we dieper in op AI code assistants. We introduceren OpenCode - een standalone tool voor AI-assisted development." "Zorg dat je huiswerk af is. Tot volgende week!" --- ### Slide 41: Vragen **[168:00 - 180:00]** _(12 minuten - buffer voor vragen en uitloop)_ "Zijn er nog vragen?" _[Beantwoord vragen]_ "Geen vragen meer? Dan wil ik jullie bedanken voor jullie aandacht en inzet vandaag." "Jullie hebben een website gebouwd die begon als een tekening op papier. Onthoud dat gevoel - dit is nog maar het begin." "Tot volgende week!" _[Einde les]_ --- ## APPENDIX: Timing Overzicht | Blok | Onderwerp | Start | Eind | Duur | | ---- | ---------------------- | ----- | ---- | ------ | | 1 | Welkom & Introductie | 0:00 | 0:13 | 13 min | | 2 | Wat is AI? | 0:13 | 0:28 | 15 min | | 3 | AI Landscape | 0:28 | 0:38 | 10 min | | 4 | ChatGPT in de Praktijk | 0:38 | 1:00 | 22 min | | 5 | Prompt Engineering | 1:00 | 1:12 | 12 min | | 6 | Live Demo v0.dev | 1:12 | 1:37 | 25 min | | 7 | Hands-on Opdracht | 1:37 | 2:30 | 53 min | | 8 | Afsluiting | 2:30 | 3:00 | 30 min | **Spreektijd docent (Blok 1-6):** ~55 minuten **Hands-on + Afsluiting:** ~83 minuten **Totaal:** 180 minuten (3 uur) --- ## Tips voor de docent 1. **Papier en pennen** - Neem extra mee. Dit is cruciaal voor de workflow. 2. **Benadruk dat tekenen NIET mooi hoeft** - Studenten zijn vaak onzeker. Blokken en lijnen zijn genoeg. 3. **De ChatGPT prompt is de sleutel** - Loop rond en check of studenten volledige specificaties meegeven. 4. **Heb backup klaar** - Screenshots van je demo voor als v0 traag is. 5. **Tempo aanpassen** - Als de groep snel is, kun je meer tijd voor hands-on geven. Als ze trager zijn, kort de demo in. 6. **Actief rondlopen** - Tijdens de opdracht, help proactief. --- ## Checklist voor prompts Laat studenten dit checken in hun ChatGPT prompt: | Element | Voorbeeld | | ---------- | -------------------------- | | Tech stack | "React met Tailwind CSS" | | Kleuren | "#2563EB" of "warm oranje" | | Stijl | "Modern, minimalistisch" | | Doel | "SaaS landingspagina" |