16 KiB
16 KiB
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, 30 EC, 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?"
- 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? Als je dit snapt, snap je ook waarom AI soms briljant is en soms onzin produceert"
- 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!
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"
- 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
- 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:
-
- TEKEN je idee op papier
-
- FOTO maken met telefoon
-
- CHATGPT - upload foto + beschrijf wensen (tech, kleuren, stijl)
-
- ChatGPT maakt gedetailleerde PROMPT
-
- 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!"