# Les 1 - Keynote Notes --- ## BLOK 1: WELKOM & INTRODUCTIE (15 min) --- ### Slide 1: Welkom - Wacht tot iedereen zit - "Welkom bij de eerste les van AI Fundamentals" - "Neem even de tijd om je laptop klaar te leggen" --- ### Slide 2: Planning - Loop door de tijdsblokken op de slide - "We beginnen met theorie over AI en hoe het werkt" - "Daarna praktisch aan de slag met ChatGPT" - "Dan prompt engineering: hoe stel je de juiste vraag?" - **Met nadruk:** "En dan de grote finale: van een tekening op papier naar een werkende website" - "Jullie gaan vandaag letterlijk een website bouwen die begint als schets" --- ### Slide 3: Voorstellen - Naam, developer, gebruik dagelijks AI-tools - "Dit vak verandert zo snel - wat vandaag cutting edge is, kan over 3 maanden achterhaald zijn" - "2x per week les, bereikbaar via Teams" --- ### Slide 4: Kennismaking (5 min studenten) - "Vertel kort je naam" - "Heb je al eens ChatGPT of andere AI-tool gebruikt? Waarvoor?" - Laat iedereen kort reageren - "Mooi, de meesten hebben al met AI gewerkt - goed startpunt" --- ### Slide 5: Leerlijn overzicht - "18 weken, 4 delen" - **Deel 1 (les 1-4):** AI Foundations - basis, ChatGPT, OpenCode - **Deel 2 (les 5-9):** Technical Foundations - TypeScript, Next.js, Supabase - **Deel 3 (les 10-12):** AI Tooling - welke tool wanneer, prototypen, Cursor - **Deel 4 (les 13-18):** Advanced - AI agents, Vercel AI SDK, eindproject - "Maar dat is ver weg - vandaag: de basis en de workflow" --- ### Slide 6: Accounts check - "Drie accounts nodig vandaag" - **ChatGPT:** "Wie heeft dit? Wie niet? → chat.openai.com, gratis" - **GitHub:** "Waar developers code opslaan - nodig voor deployen" - **Vercel:** "Hier komt je website live te staan - vercel.com, koppel met GitHub" - Geef 2 minuten om aan te maken - "Iedereen zover? Alle drie? Mooi, dan gaan we de diepte in" --- ## BLOK 2: WAT IS AI? (25 min) --- ### Slide 7: Wat is AI? - "Wat ís eigenlijk AI?" - **🎤 INTERACTIE:** "Noem eens voorbeelden van AI die je vandaag al hebt gebruikt?" (verwacht: Spotify, Google Maps, autocorrect, gezichtsherkenning) - AI = computersystemen die taken uitvoeren waarvoor normaal menselijke intelligentie nodig is - Patronen herkennen, beslissingen nemen, taal begrijpen en genereren - **Narrow AI (Weak AI):** goed in één specifieke taak - ChatGPT is hier een voorbeeld - **General AI (Strong AI):** alles kunnen wat mens kan - bestaat nog niet - "Wat we vandaag gebruiken is Narrow AI - heel krachtig, maar beperkt tot specifieke taken" --- ### Slide 8: Hoe werken LLMs? - "Hoe werkt ChatGPT eigenlijk?" - **🎤 INTERACTIE:** "Wat denken jullie dat er gebeurt als je iets typt? Heeft iemand een idee?" (laat 2-3 studenten raden) - LLM = Large Language Model - Getraind op miljarden pagina's tekst - boeken, websites, Wikipedia, code - **Kernvraag die het geleerd heeft:** "Als ik deze woorden zie, wat is het meest waarschijnlijke volgende woord?" - ChatGPT, Claude, Gemini = voorspelmachines - Token voor token voorspellen wat er daarna komt - "Het lijkt alsof ze begrijpen wat je zegt, maar er zit geen bewustzijn in" - "Geavanceerde statistische patroonherkenning op ongekende schaal" --- ### Slide 9: Tokens uitleg - Tekst wordt omgezet naar nummers = tokens - "Ik drink koffie" wordt [1847, 5621, 8934] - Woorden met vergelijkbare betekenis liggen dicht bij elkaar - "koffie" en "thee" = dichtbij / "koffie" en "fiets" = ver uit elkaar - **Voorbeeld:** "Ik drink koffie met..." → wat komt er? → "melk" of "suiker" - Model berekent kans per woord, kiest (meestal) meest waarschijnlijke - "Dit verklaart waarom je soms briljante antwoorden krijgt en soms onzin" --- ### Slide 10: Hallucinaties ⚠️ - **Belangrijk begrip!** - AI kan dingen verzinnen - compleet uit de lucht gegrepen - Klinkt heel overtuigend, grammaticaal perfect - **Voorbeelden:** - Wetenschappelijk paper dat niet bestaat (titel, auteurs, jaar, samenvatting) - npm package dat nooit heeft bestaan - Restaurants met verzonnen namen en adressen - **Waarom?** Model voorspelt wat WAARSCHIJNLIJK is, controleert niet of het WAAR is - **Praktisch:** Verifieer altijd! Kopieer nooit blindelings code. Check of libraries bestaan. Test je code. - "AI is een tool, geen orakel. Behandel het als een enthousiaste junior die soms dingen verzint" - **Regel: Vertrouw, maar verifieer!** - **🎤 INTERACTIE:** "Wie heeft dit zelf meegemaakt? Dat ChatGPT iets verzon?" (laat 2-3 studenten ervaring delen) --- ### Slide 11: De Grote Spelers - **ChatGPT (OpenAI):** bekendste, maakte AI mainstream - **Claude (Anthropic):** minder bekend, technisch heel sterk, goed voor lange documenten - **Gemini (Google):** geïntegreerd in Google ecosysteem - **Grok (xAI/Elon Musk):** in X, real-time informatie - "Vandaag focus op ChatGPT - meest toegankelijk, beste gratis tier" - "Concepten zijn toepasbaar op allemaal" --- ### Slide 12: Gratis AI Opties - "Moet je betalen voor AI? Nee!" - **ChatGPT Free:** GPT-5, afbeeldingen uploaden, documenten, code - **Claude Free:** Sonnet 3.5, uitstekend voor lange teksten - **Gemini Free:** handig als je in Google ecosysteem zit - **Groq:** gratis API met Llama 3.3, ongelooflijk snel - **Ollama:** draait lokaal op je laptop, data verlaat je computer nooit → privacy! - "Voor later: als je met klantdata werkt, is Ollama je vriend" - **Conclusie: gratis is voldoende voor deze cursus!** --- ### Slide 13: Betaald & Premium - **~$20/maand (ChatGPT Plus / Claude Pro):** - Meer berichten, sneller, premium features - Voldoende voor professioneel gebruik - **Premium tier - Claude Opus:** - Beste model voor complexe redenering - ~$75/maand via API bij intensief gebruik - Voor als je echt vastloopt - **Advies:** Start gratis → upgrade naar Plus/Pro als je limieten raakt → Opus voor moeilijke problemen --- ### Slide 14: Welke tool voor welke taak? - "Welke is het beste? Hangt af van wat je wilt" - **🎤 INTERACTIE:** "Stel: je moet een PDF van 50 pagina's samenvatten. Welke tool?" (handopsteken, bespreek kort) - **Snelle code snippets:** ChatGPT of Claude, beide goed - **Lange documenten:** Claude (grotere context window) - **UI componenten:** v0.dev (straks!) - **Privacy-gevoelig:** Ollama (lokaal) - **Supersnel prototypen:** Groq - **Tip:** Experimenteer met meerdere tools - elke heeft sterke/zwakke punten --- ## BLOK 3: CHATGPT PRAKTIJK (20 min) --- ### Slide 15: Interface rondleiding - "Open allemaal ChatGPT - chat.openai.com" - Wacht tot iedereen erin zit - **Midden:** chatvenster - vragen en antwoorden - **Links:** chat geschiedenis - **Boven:** model kiezen - **Rechtonder (profielfoto):** instellingen - "Interface is bewust simpel - kracht zit in wat je typt" --- ### Slide 16: Model kiezen - Kijk bovenaan je scherm - **GPT-5:** standaard, snel, voor meeste taken genoeg - **GPT-5 with canvas:** voor documenten bewerken, opent editor naast chat - **GPT-5.2:** nieuwste en krachtigste (alleen Plus) - "Voor vandaag is GPT-5 perfect" --- ### Slide 17: Tijdelijke Chat - **Privacy feature!** - "Temporary Chat" bij nieuwe chat - Gesprek wordt niet opgeslagen, niet gebruikt voor training - **Wanneer gebruiken?** Gevoelige info, client data, bedrijfscode, persoonlijke gegevens - "Voor deze cursus maakt niet uit, maar onthoud voor professioneel werk" --- ### Slide 18: Afbeeldingen analyseren - **Cruciaal voor onze workflow!** - Klik paperclip → upload afbeelding - Demo: upload een schets, vraag "Wat zie je? Beschrijf de layout" - ChatGPT beschrijft precies wat hij ziet - Dit heet image-to-text of vision - **Dit is de sleutel:** jullie tekenen schets → foto → upload naar ChatGPT → ChatGPT vertaalt naar beschrijving voor code - "Je hoeft geen designer te zijn - ChatGPT begrijpt ook ruwe schetsen" --- ### Slide 19: Bestanden uploaden - PDF, Word, Excel, code bestanden - Handig voor: documentatie analyseren, code reviewen, data uit spreadsheets - Limiet: ~50 pagina's per document - Meerdere bestanden tegelijk mogelijk --- ### Slide 20: Custom Instructions - Ga naar Settings → Personalisatie - Permanent instellen wie je bent en hoe ChatGPT moet antwoorden - Wordt meegenomen in élke chat - **Voorbeeld:** "Ik ben frontend developer. React en Tailwind CSS. Junior niveau. Geef praktische code voorbeelden." - "Stel dit in vóór je begint met werken - scheelt herhaling" --- ### Slide 21: ChatGPT Projects - **Nieuwe feature!** - Klik "New Project" in zijbalk - Slimme werkruimtes: chats, bestanden, specifieke instructies bij elkaar - Handig voor: school, werk, hobby projecten apart houden - Geef naam + instructies die alleen voor dit project gelden - **Projects hebben eigen geheugen** - anders dan normale chats - Gratis tier: 5 bestanden per project --- ### Slide 22: Praktijk Oefening (5 min studenten) - **Twee dingen:** - **1. Custom Instructions instellen:** - Settings → Personalisatie - "Ik ben frontend developer. React en Tailwind CSS." - **2. Project aanmaken:** - "New Project" in zijbalk - Naam: "Les 1 - v0.dev Prompt Engineer" - Instructie: "Help me gedetailleerde prompts schrijven voor v0.dev. Focus op React + Tailwind CSS." - Loop rond en help - "Dit project gebruiken we straks!" - Check: "Heeft iedereen een project aangemaakt?" --- ## BLOK 4: PROMPT ENGINEERING (15 min) --- ### Slide 23: Wat is Prompt Engineering? - Prompt = de instructie die je aan AI geeft - **Cruciaal inzicht:** kwaliteit antwoord hangt af van kwaliteit vraag - **Garbage in = garbage out** - Vage vraag → vaag antwoord - Specifiek → specifieke, bruikbare output - "Dit is een vaardigheid - en je kunt het leren" --- ### Slide 24: Slecht vs Goed - **🎤 INTERACTIE:** "Hier staat: 'Maak een button'. Wat is hier mis mee? Wat ontbreekt?" (laat studenten analyseren) - **Slecht:** "Maak een button" (3 woorden - welke taal? stijl? kleur? AI moet alles gokken) - **Goed:** "Maak een React button component met Tailwind CSS. Primary styling met blauwe achtergrond (#2563EB). Include hover state en loading state met spinner." - Je specificeert: technologie, styling, features - Resultaat: bruikbare code die je direct kunt gebruiken --- ### Slide 25: Prompt Framework - **4 elementen:** - **1. Rol:** "Je bent een senior frontend developer met 10 jaar ervaring" - **2. Context:** "Je werkt aan een SaaS landingspagina voor projectmanagement tool" - **3. Taak:** "Maak een hero section met headline, subtitel, call-to-action button" - **4. Format:** "Gebruik React en Tailwind CSS. Geef alleen code, geen uitleg." - Niet altijd alle vier nodig, maar meer context = beter resultaat --- ### Slide 26: Tech Stack specificeren - Tech stack = de technologieën waarmee je bouwt - **Deze cursus:** React + Next.js + Tailwind CSS - Zonder specificatie weet AI niet: HTML? React? Vue? Angular? - Door expliciet te zeggen "React met Tailwind CSS" → direct bruikbare code - **v0.dev genereert automatisch React + Tailwind** - **In ChatGPT moet je het wel specificeren!** --- ### Slide 27: Kleuren en Stijl - **Kleuren:** - Exact: "#2563EB voor primary blue" - Beschrijvend: "warm oranje thema met aarde-tinten" - **Stijl:** modern, minimalistisch, speels, corporate, brutalist, retro... - **Referenties:** "In de stijl van Stripe.com" of "vergelijkbaar met Apple website" - **Complete specificatie:** "Blauw kleurenschema #2563EB. Modern en minimalistisch. Clean met veel whitespace. B2B SaaS startup." --- ### Slide 28: Tips samenvatting - Geef een rol - Wees specifiek - Specificeer tech stack - Beschrijf look & feel - Geef voorbeelden als je kunt - Itereer - eerste prompt is zelden perfect - **Onthoud: garbage in = garbage out** --- ## BLOK 5: LIVE DEMO V0.DEV (20 min) --- ### Slide 29: Intro v0.dev - Tool van Vercel (bedrijf achter Next.js) - **Gamechanger voor UI development** - Beschrijf wat je wilt in tekst OF upload afbeelding - v0 genereert werkende React + Tailwind code - Direct preview zien - Direct deployen naar internet - "De slimme workflow combineert ChatGPT en v0 - daar zit de magie" --- ### Slide 30: De Workflow - **5 stappen:** - 1. **TEKEN** je idee op papier - 2. **FOTO** maken met telefoon - 3. **CHATGPT** - upload foto + beschrijf wensen (tech, kleuren, stijl) - 4. ChatGPT maakt gedetailleerde **PROMPT** - 5. Plak in **V0.DEV** → werkende website! - **Waarom zo?** - v0 heeft beperkte credits (~7/dag), ChatGPT is onbeperkt - ChatGPT is beter in vertalen ruwe idee → gestructureerde prompt - v0 is beter in code genereren - "Gebruik elk tool waar het goed in is" --- ### Slide 31: LIVE DEMO (15 min) **Stap 1: Tekenen** - Pak pen en papier - Teken simpele hero section - Links: tekstvak headline, daaronder button - Rechts: vierkant met X = placeholder afbeelding - "Het hoeft niet mooi te zijn - blokken en lijnen zijn genoeg" **Stap 2: Foto naar ChatGPT** - Foto maken - Upload naar ChatGPT Project "Les 1 - v0.dev Prompt Engineer" - Beschrijving: "Dit is schets voor hero section. Beschrijf als v0.dev prompt. Tech: React + Tailwind. Kleuren: blauw #2563EB. Stijl: modern, minimalistisch." - Wacht op response - "Kijk - ChatGPT maakt gedetailleerde Engelse prompt" **Stap 3: v0.dev** - Prompt kopiëren - Plakken in v0.dev - Genereren (~30 sec wachten) - "En daar is het! Hero section met de kleuren en stijl die ik specificeerde" **Stap 4: Itereren** - Follow-up: "Make the button larger with hover animation" - Wacht op generatie - "Kijk - aangepast. Dát is de kracht: in gesprek gaan met de AI" **⚠️ DEPLOYMENT NIET VOORDOEN!** - "Dit gaan jullie straks zelf uitzoeken" --- ### Slide 32: Deploy uitleg - "Hoe krijg je dit online? Ik leg uit, maar doe niet voor" - In v0: "Add Integration" → koppel GitHub → v0 maakt repository → Vercel deployt - Binnen minuut: live URL - **"Dit ga ik niet live doen - jullie zoeken dit straks zelf uit"** - "Het is niet moeilijk, je leert meer door het zelf te doen" - "Van tekening op papier naar live website - dat is de kracht van deze workflow" --- ## BLOK 6: HANDS-ON OPDRACHT (55 min) --- ### Slide 33: Aan de slag! (5 min uitleg + 45 min werken) **Opdracht uitleggen:** - "Jullie gaan een complete landingspagina bouwen - groter dan mijn demo" - **Vereisten:** - Minimaal **3 secties** (hero, features, pricing, testimonials, footer...) - Minimaal **1 carousel** (image/testimonial slider) - Minimaal **1 accordion** (FAQ of uitklapbare content) - Je bent vrij in wat je tekent - bedenk fictief product - **Deployment: zelf uitzoeken!** **Stappen:** - Teken → Foto → ChatGPT Project → v0.dev → Deploy naar Vercel **Check:** "Heeft iedereen papier en pen?" "Je hebt 45 minuten. Begin met tekenen! Succes!" --- **Tijdens het werken - rondlopen, let op:** - Tekenstap overslaan? → Terug naar papier - Te weinig secties? → Herinner aan 3+ vereiste - Carousel/accordion vergeten? → Check hun schets - Tech stack/kleuren/stijl vergeten in ChatGPT? → Herinner ze - v0 rate limit? → Wachten of delen met klasgenoot - Deployment problemen? → Eerst zelf Googlen, dan pas helpen --- **Tussentijdse check (halverwege ~25 min):** - "Snelle check: wie heeft 3+ secties getekend?" - "Wie heeft carousel en accordion in de schets?" - "Nog 25 minuten - begin met deployen als je v0 resultaat hebt!" - "Vraag klasgenoot om hulp als je vastloopt" --- ## BLOK 7: AFSLUITING (20 min) --- ### Slide 34: Resultaten delen (8 min) - "Wie wil zijn resultaat laten zien?" - Laat 2-3 studenten scherm delen - "Wat was je oorspronkelijke idee? Laat je schets zien. Wat heeft v0 ervan gemaakt?" - Geef korte positieve feedback per student --- ### Slide 35: Samenvatting - "Wat hebben jullie vandaag geleerd?" - Theorie: hoe LLMs werken, next-token prediction, hallucinaties - ChatGPT praktisch: interface, afbeeldingen uploaden, Custom Instructions, Projects - Prompt engineering: specificiteit, tech stack, kleuren, stijl - **"En het belangrijkste: de workflow toegepast"** - **Schets → ChatGPT → v0.dev → live website** - "Jullie zijn developers die AI tools kunnen gebruiken" --- ### Slide 36: Huiswerk - "Twee opdrachten, inleveren via Teams voor volgende les" **1. Reflectie (500 woorden)** - Drie deelvragen als leidraad: - Wat vond je verrassend aan werken met AI? - Wat ging goed? Wat vond je lastig? - Hoe zie je AI jouw werk als developer veranderen? - "Dit hoeft geen essay te zijn - gewoon eerlijk nadenken over je ervaring" **2. Breid je v0 website uit** - Voeg minimaal 1 nieuwe sectie toe (pricing, features, contact, footer...) - Gebruik zelfde workflow: teken → ChatGPT → v0 - Lever in: screenshots + Vercel URL "Vragen? Nee? Dan bedankt voor jullie inzet!" **"Jullie hebben een website gebouwd die begon als een tekening. Tot volgende week!"**