From 1bb2c6851fbc3b99fb0fbda7d24f95e4abf589cd Mon Sep 17 00:00:00 2001 From: Tim Rijkse Date: Tue, 3 Feb 2026 12:10:07 +0100 Subject: [PATCH] fix: notes --- .../Les01-Docenttekst-Notes.md | 462 ++++++++++++++++++ 1 file changed, 462 insertions(+) create mode 100644 Les01-Introductie-AI/Les01-Docenttekst-Notes.md diff --git a/Les01-Introductie-AI/Les01-Docenttekst-Notes.md b/Les01-Introductie-AI/Les01-Docenttekst-Notes.md new file mode 100644 index 0000000..490bfce --- /dev/null +++ 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!"**