21 KiB
Docenttekst Les 1: Introductie AI & Large Language Models
Totale lesduur: 3 uur (180 minuten) Spreektijd docent: ~70 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]
[Wacht tot iedereen zit, maak oogcontact]
"Goedemiddag 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 - 1:30]
"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
[1:30 - 3:00]
"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:00 - 8:00]
"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 - ~5 minuten]
"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:00 - 10:00]
"Even een vooruitblik op wat we de komende 18 weken gaan doen."
[Wijs naar de drie hoofdstukken]
"We werken in drie fases. De eerste drie lessen gaan over AI Fundamentals. Daarna, les 4 tot 9, gaan we naar AI Driven Development - echte tools en workflows. En het laatste deel bouwen we richting full-stack applicaties."
"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:00 - 13:00]
[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."
"Je hebt ook een GitHub account nodig voor later vandaag. Als je die niet hebt, maak die ook even aan op github.com."
[Geef 2-3 minuten]
"Is iedereen zover? Mooi, dan gaan we de diepte in."
BLOK 2: WAT IS AI? (20 minuten)
Slide 7: Wat is Artificial Intelligence?
[13:00 - 16:00]
"Oké, eerste grote vraag: wat ís eigenlijk AI?"
"AI, of Artificial Intelligence, is een verzamelnaam. Het zijn computersystemen die taken kunnen uitvoeren waarvoor normaal menselijke intelligentie nodig is."
[Laat dit even bezinken]
"Denk aan: patronen herkennen, beslissingen nemen, taal begrijpen. Dingen die wij mensen doen met ons brein."
"Nu is er een belangrijk onderscheid. Er is Narrow AI - AI die heel goed is in één specifieke taak. ChatGPT is daar een voorbeeld van. En dan heb je General AI - dat zou AI zijn die alles kan wat een mens kan. Dat bestaat nog niet."
Slide 8: Hoe werken Large Language Models?
[16:00 - 20:00]
"Nu de vraag die iedereen heeft: hoe werkt ChatGPT eigenlijk?"
"Een Large Language Model - een LLM - is getraind op gigantische hoeveelheden tekst. En met gigantisch bedoel ik: een groot deel van het internet."
"Het doel? Eigenlijk heel simpel: het volgende woord voorspellen."
[Laat dit even landen]
"Ja, echt. ChatGPT, Claude, al die tools - in de kern zijn het voorspelmachines. Ze krijgen tekst en voorspellen wat er logischerwijs daarna komt."
"En ze doen dat zo goed, dat het lijkt alsof ze 'begrijpen' wat je zegt. Maar er zit geen bewustzijn in. Het is geavanceerde patroonherkenning."
Slide 9: Next-Token Prediction
[20:00 - 23:00]
"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 heel vaak voorkomt."
"Dit verklaart ook waarom je soms hele goede antwoorden krijgt en soms onzin. Er zit randomheid in."
Slide 10: Hallucinaties
[23:00 - 28:00]
"En dit brengt me bij een belangrijk punt: hallucinaties."
[Iets serieuzere toon]
"AI kan dingen verzinnen. Compleet uit de lucht gegrepen informatie, maar het klinkt heel overtuigend."
"Vraag ChatGPT naar een wetenschappelijk paper, en hij kan je een titel, auteurs en samenvatting geven van iets dat niet bestaat."
"Dit is waarom je AI-output altijd moet checken. Vooral bij feiten, cijfers, namen, referenties."
"Vragen tot zover?"
[Beantwoord eventuele vragen - 2-3 minuten]
BLOK 3: HET AI-LANDSCHAP (12 minuten)
Slide 11: De Grote Spelers
[33:00 - 36:00]
"Oké, nu je begrijpt hoe LLMs werken, laten we kijken welke er zijn."
[Wijs naar de tabel]
"Dit zijn de grote namen. ChatGPT van OpenAI - dat kennen de meesten. Claude van Anthropic. Gemini van Google. En Grok van xAI."
"Ze hebben allemaal hun sterke punten. Vandaag focussen we vooral op ChatGPT."
Slide 12: Gratis vs Betaald
[36:00 - 40:00]
"Even een belangrijk punt: heb je de betaalde versie nodig?"
"Het korte antwoord: nee, niet voor deze cursus. De gratis versie van ChatGPT draait op GPT-4o, en dat is al behoorlijk krachtig."
"Mijn advies: begin gratis. Als je later merkt dat je tegen limieten aanloopt, kun je altijd upgraden."
Slide 13: Welke tool voor welke taak?
[40:00 - 45:00]
"Welke tool is het beste? Dat hangt af van wat je wilt doen."
[Loop door de tabel]
"Voor snelle code snippets zijn ChatGPT en Claude beide prima. Voor lange documenten is Claude beter. En voor UI componenten - wat we straks gaan doen - gebruiken we v0.dev."
BLOK 4: CHATGPT IN DE PRAKTIJK (25 minuten)
Slide 14: ChatGPT Interface
[45:00 - 48:00]
[Energieke toon]
"Oké, 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 even rondleiden door de interface."
[Open ChatGPT op het projectiescherm]
"In het midden heb je het chatvenster. Links zie je je chat geschiedenis. Bovenaan kun je het model kiezen. En rechtsonder vind je instellingen."
Slide 15: Model Kiezen
[48:00 - 51:00]
"Kijk even bovenaan je scherm. Daar staat welk model je gebruikt."
"Je hebt een paar opties. GPT-4o is de standaard - snel en voor de meeste taken prima. GPT-4o with canvas is speciaal voor documenten. En GPT-4 is het krachtigste model als je Plus hebt."
"Voor vandaag is GPT-4o perfect."
Slide 16: Tijdelijke Chat
[51:00 - 54:00]
"Nu iets belangrijks: tijdelijke chat."
[Demonstreer waar dit staat]
"Als je dit aanzet, wordt je gesprek niet opgeslagen en niet gebruikt om het model te trainen. Wanneer gebruik je dit? Als je met gevoelige of werk-gerelateerde informatie werkt."
Slide 17: Afbeeldingen Analyseren
[54:00 - 58:00]
[Dit is een belangrijke slide voor de workflow]
"Nu een feature die cruciaal is voor wat we straks gaan doen: ChatGPT kan afbeeldingen lezen."
[Demonstreer live]
"Ik upload hier een schets..."
[Upload een simpele tekening]
"En ik vraag: 'Wat zie je op deze afbeelding?'"
[Wacht op response]
"Kijk, hij beschrijft precies wat hij ziet. Dit heet image-to-text, of vision."
[Met nadruk]
"Dit gaan we straks gebruiken om jullie schetsen om te zetten naar gedetailleerde prompts. ChatGPT wordt onze 'vertaler' van tekening naar technische specificaties."
Slide 18: Bestanden Uploaden
[58:00 - 61:00]
"Hetzelfde geldt voor documenten. Je kunt een PDF uploaden, een Word document, een code bestand."
[Demonstreer kort]
"Dit is handig voor documentatie of lange bestanden."
Slide 19: Custom Instructions
[61:00 - 64:00]
"Dan nog iets nuttigs: Custom Instructions."
[Ga naar instellingen → Personalisatie]
"Hier kun je permanent aangeven wie je bent en hoe ChatGPT moet antwoorden. Bijvoorbeeld: 'Ik ben een frontend developer. Ik werk met React en Tailwind.'"
"Dit scheelt tijd als je steeds dezelfde context moet geven."
Slide 20: Het Geheugen
[64:00 - 66:00]
"Kort over geheugen. ChatGPT onthoudt je eerdere chats, maar gebruikt die informatie niet automatisch in nieuwe chats."
"Tip: start een nieuwe chat voor een nieuw onderwerp."
Slide 21: Praktijk Oefening
[66:00 - 70:00]
"Oké, nu jullie. Vijf minuten om te experimenteren."
"Drie dingen: start een chat, upload een afbeelding - maak een foto van iets -, en kijk waar de Custom Instructions staan."
[Geef 5 minuten - loop rond]
"Oké, tijd. Wie heeft iets interessants ontdekt?"
[Laat 1-2 studenten kort delen]
BLOK 5: PROMPT ENGINEERING (15 minuten)
Slide 22: Wat is Prompt Engineering?
[70:00 - 73:00]
"Nu komen we bij een cruciaal onderdeel: prompt engineering."
"Een prompt is simpelweg de instructie die je aan AI geeft. En hier is het belangrijke inzicht: de kwaliteit van je antwoord hangt direct af van de kwaliteit van je vraag."
"Als je een vage vraag stelt, krijg je een vaag antwoord. Als je specifiek bent, krijg je specifieke output."
Slide 23: Slechte vs Goede Prompt
[73:00 - 76:00]
"Laat me het verschil laten zien."
[Wijs naar de slechte prompt]
"Dit is wat de meeste mensen doen: 'Maak een button'. Drie woorden. Welke taal? Welke stijl? De AI moet alles gokken."
[Wijs naar de goede prompt]
"En dit is beter: 'Maak een React button component met Tailwind CSS. Primary styling, blauw, met hover en loading state.'"
"Zie je het verschil? Je specificeert de technologie, de features, de stijl."
Slide 24: Prompt Framework
[76:00 - 78:00]
"Er is een framework dat helpt. Vier elementen."
"Eén: Rol. 'Je bent een senior frontend developer'. Twee: Context. 'Je werkt aan een SaaS landingspagina'. Drie: Taak. 'Maak een hero section'. Vier: Format. 'Gebruik React en Tailwind.'"
Slide 25: Tech Stack Specificeren
[78:00 - 81:00]
[Dit is een belangrijke nieuwe slide]
"Nu iets dat jullie moeten begrijpen: tech stack."
"Wat is een tech stack? De technologieën waarmee je bouwt. Voor deze cursus gebruiken we vooral React en Tailwind CSS."
[Leg kort uit]
"React is een JavaScript framework voor user interfaces. Tailwind CSS is een utility-first CSS framework - je bouwt styling met classes."
"Waarom is dit belangrijk? Als je tegen AI zegt 'maak een button', weet hij niet of je HTML, React, Vue, of iets anders wilt. Door je tech stack te specificeren, krijg je bruikbare code."
[Met nadruk]
"En goed nieuws: v0.dev genereert automatisch React met Tailwind. Maar je moet het wel meegeven in je prompts!"
Slide 26: Kleuren en Look & Feel
[81:00 - 84:00]
"Het volgende dat je moet specificeren: kleuren en stijl."
[Loop door de opties]
"Kleuren kun je meegeven als hex codes - bijvoorbeeld #2563EB voor blauw - of beschrijvend, zoals 'warm oranje thema'."
"Stijl beschrijf je met woorden: modern, minimalistisch, speels, corporate, retro..."
"En je kunt referenties gebruiken: 'In de stijl van Stripe.com' vertelt de AI heel veel."
[Voorbeeld]
"Een complete specificatie zou zijn: 'Blauw kleurenschema met primary #2563EB. Stijl: modern en minimalistisch. Geschikt voor een B2B SaaS startup.'"
Slide 27: Prompting Tips
[84:00 - 85:00]
"Nog even de tips op een rij: geef een rol, wees specifiek, specificeer je tech stack, beschrijf de look & feel, geef voorbeelden als je kunt, en itereer."
"Onthoud: garbage in, garbage out."
BLOK 6: LIVE DEMO V0.DEV (27 minuten)
Slide 28: Introductie v0.dev
[85:00 - 88:00]
[Energieke toon]
"Nu wordt het echt leuk. We gaan kijken naar v0.dev."
"Dit is een tool van Vercel - het bedrijf achter Next.js. En het is een gamechanger."
[Open v0.dev op je scherm]
"Wat doet v0? Je beschrijft wat je wilt, of je uploadt een schets, en v0 genereert werkende React code met Tailwind CSS. Direct een preview. Direct deploybaar."
"Maar vandaag leren jullie de slimme workflow."
Slide 29: De Slimme Workflow
[88:00 - 90:00]
[Wijs naar het diagram]
"Dit is de workflow die jullie vandaag gaan leren. Vijf stappen."
"Stap één: je TEKENT je idee op papier. Gewoon pen en papier."
"Stap twee: je maakt een FOTO van je tekening."
"Stap drie: je upload die foto naar CHATGPT en beschrijft je wensen - tech stack, kleuren, stijl."
"Stap vier: ChatGPT maakt een gedetailleerde PROMPT voor je."
"Stap vijf: je plakt die prompt in V0.DEV en je hebt een website!"
[Leg uit waarom]
"Waarom doen we het zo? Omdat v0 beperkte gratis credits heeft - ongeveer zeven generaties per dag. ChatGPT is 'gratis'. Door eerst in ChatGPT je prompt te optimaliseren, verspil je geen v0 credits aan slechte prompts."
Slide 30: Live Demo - Schets Maken
[90:00 - 93:00]
[Pak pen en papier - dit is live!]
"Oké, ik ga dit nu live doen. Kijk mee."
[Teken terwijl je praat - 2 minuten]
"Ik teken een hero section. Links een groot tekstvak - hier komt de headline. Daaronder een kleiner vak voor de ondertitel. En daaronder een rechthoek - dat wordt de button."
"Rechts teken ik een groot vierkant met een X erdoor - dat is een placeholder voor een afbeelding."
[Toon je tekening]
"Kijk, het is niet mooi. Het hoeft ook niet mooi te zijn. Het gaat erom dat je de layout communiceert. Waar staat wat?"
Slide 31: Live Demo - Foto naar ChatGPT
[93:00 - 100:00]
[Maak foto en upload naar ChatGPT]
"Ik maak een foto met mijn telefoon... even uploaden naar ChatGPT..."
[Typ je prompt]
"Nu typ ik mijn beschrijving. Let op wat ik allemaal meegeef:"
[Typ hardop]
"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 Stijl: Modern, minimalistisch, professioneel Doel: SaaS landingspagina voor een projectmanagement tool genaamd TaskFlow"
[Druk op enter en wacht]
"Kijk, ChatGPT analyseert mijn schets en maakt er een gedetailleerde Engelse prompt van. Met alle specificaties die ik meegaf."
[Lees een stuk voor]
"Hij beschrijft de layout, de kleuren, de stijl... precies wat we nodig hebben voor v0."
Slide 32: Live Demo - Prompt naar v0
[100:00 - 106:00]
[Kopieer en ga naar v0.dev]
"Ik kopieer deze prompt... ga naar v0.dev... en plak hem hier."
[Druk op enter]
"Het duurt even... dertig seconden ongeveer..."
[Resultaat verschijnt]
"En kijk! We hebben een hero section. Links de tekst met headline en button, rechts een afbeelding placeholder. Precies wat ik tekende!"
[Klik op Code tab]
"En hier is de code. Clean React, Tailwind classes. Dit kun je direct in je project gebruiken."
Slide 33: Live Demo - Itereren
[106:00 - 109:00]
"Maar we zijn niet klaar. De kracht is dat je kunt itereren."
[Typ een follow-up]
"Ik typ: 'Make the button larger and add a subtle hover animation.'"
[Wacht op generatie]
"Kijk - de button is groter. Dit is hoe je met AI werkt. Je gaat in gesprek. Je verfijnt."
Slide 34: Live Demo - Deployen
[109:00 - 112:00]
"Laatste stap: hoe krijg je dit online?"
[Wijs naar de zijbalk]
"Hier zie je 'Add Integration'. Daar klik je op. V0 vraagt je om je GitHub account te koppelen. Als je dat doet, maakt v0 automatisch een repository aan."
"Dan klik je op 'Deploy'... en v0 pusht je code naar GitHub én deployt naar Vercel."
[Wacht op deployment]
"En kijk - we hebben een live URL. Dit is nu een echte website die iedereen kan bezoeken."
[Met nadruk]
"Van een tekening op papier naar een live website. In minder dan tien minuten."
BLOK 7: HANDS-ON OPDRACHT (53 minuten)
Slide 35: Opdracht Introductie
[112:00 - 117:00]
"De opdracht die jullie gaan doen is precies wat ik net deed."
[Pak papier en pennen - deel uit als nodig]
"Jullie gaan een hero section bouwen. Maar let op: jullie beginnen met TEKENEN."
[Loop door de stappen]
"Stap één: teken je hero section op papier. Stap twee: maak een foto. Stap drie: upload naar ChatGPT en beschrijf je wensen - en vergeet niet: tech stack, kleuren, stijl! Stap vier: kopieer de prompt. Stap vijf: plak in v0.dev. Stap zes: deploy naar Vercel."
[Benodigdheden check]
"Heeft iedereen papier en een pen? Nee? Hier, pak even..."
[Praktische info]
"Je hebt 50 minuten. Werk individueel. Documenteer je stappen met screenshots. Als je vastloopt, vraag hulp."
Slide 36: Aan de slag
[117:00 - 165:00]
"Succes!"
[Studenten werken - loop rond en help waar nodig]
Hulp bieden - let op deze punten:
- Tekenen ze daadwerkelijk? Of slaan ze die stap over?
- Geven ze tech stack, kleuren en stijl mee in ChatGPT?
- Problemen met v0.dev account of deployment?
Tussentijdse check [135: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 30 minuten. Focus op in ieder geval je schets, ChatGPT prompt, en v0 generatie. De deployment is bonus als je tijd hebt."
[Studenten werken door]
BLOK 8: AFSLUITING (15 minuten)
Slide 37: Samenvatting
[165:00 - 168:00]
"Oké, tijd om af te ronden. Sluit je werk af waar je bent."
[Wacht tot iedereen aandacht geeft]
"Laten we even terugkijken. Wat hebben we vandaag gedaan?"
"We hebben geleerd hoe LLMs werken. We hebben ChatGPT praktisch gebruikt. We hebben prompt engineering gehad - specifiek: hoe je tech stack, kleuren en stijl specificeert."
[Met nadruk]
"En het belangrijkste: jullie hebben de workflow geleerd. Schets op papier, foto naar ChatGPT, prompt naar v0, en live op het internet."
Slide 38: Huiswerk
[168:00 - 172:00]
"Voor volgende week heb je huiswerk."
[Wijs naar de slide]
"Je schrijft een reflectie van 500 woorden over je eerste ervaring met AI tools. Je bedenkt vijf concrete use cases voor AI in jouw werk."
[Met nadruk]
"En je doorloopt de workflow nog een keer met een ANDERE component. Maak een tweede schets - dit keer voor een pricing table, of een features section, of iets anders. Doorloop alle stappen opnieuw."
"Documenteer met screenshots. Lever in via Teams chat."
Slide 39: Volgende Les
[172:00 - 175:00]
"Volgende week gaan we dieper in op prompt engineering. Geavanceerde technieken. Chain of thought. Few-shot learning."
"Zorg dat je huiswerk af is en dat je ChatGPT account werkt."
Slide 40: Afsluiting
[175:00 - 180:00]
"Zijn er nog vragen?"
[Beantwoord eventuele vragen - 3 minuten max]
"Geen vragen? Dan wil ik jullie bedanken voor jullie aandacht. Het was een goede eerste les."
"En vergeet niet: jullie hebben vandaag een website gebouwd die begon als een tekening. Dat is best bijzonder."
"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:33 | 20 min |
| 3 | AI Landscape | 0:33 | 0:45 | 12 min |
| 4 | ChatGPT in de Praktijk | 0:45 | 1:10 | 25 min |
| 5 | Prompt Engineering | 1:10 | 1:25 | 15 min |
| 6 | Live Demo v0.dev | 1:25 | 1:52 | 27 min |
| 7 | Hands-on Opdracht | 1:52 | 2:45 | 53 min |
| 8 | Afsluiting | 2:45 | 3:00 | 15 min |
Totaal: 180 minuten (3 uur)
Tips voor de docent
-
Papier en pennen - CRUCIAAL. Zorg dat iedereen kan tekenen. Heb extra papier en pennen klaar.
-
Benadruk dat tekenen NIET mooi hoeft - Studenten kunnen onzeker zijn. Maak duidelijk dat simpele blokken genoeg zijn.
-
De ChatGPT prompt is de sleutel - Loop rond en check of studenten volledige specificaties meegeven (tech stack, kleuren, stijl).
-
Heb backup klaar - Screenshots van je eigen demo-resultaten voor als v0 traag is of rate limit heeft.
-
GitHub accounts - Check vroeg in de les of iedereen dit heeft.
-
Wandel rond tijdens opdracht - Actief helpen voorkomt frustratie.
-
De workflow herinneren - Schets → Foto → ChatGPT (met specs) → Prompt → v0 → Deploy
Checklist voor studenten
Zorg dat ze in hun ChatGPT prompt specificeren:
| Element | Voorbeeld |
|---|---|
| Tech stack | "React met Tailwind CSS" |
| Kleuren | "#2563EB" of "warm oranje" |
| Stijl | "Modern, minimalistisch" |
| Responsive | "Mobile-first design" |
| Doel | "SaaS landingspagina" |