fix: notes

2026-02-03 12:10:07 +01:00
parent 3b97792d86
commit 1bb2c6851f
1 changed files with 462 additions and 0 deletions
--- a/Les01-Introductie-AI/Les01-Docenttekst-Notes.md
+++ b/Les01-Introductie-AI/Les01-Docenttekst-Notes.md
@@ -0,0 +1,462 @@
 # 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:**
 - 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!"**