500 lines
20 KiB
Markdown
500 lines
20 KiB
Markdown
# 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?"
|
|
- **Spotify/Netflix:** "Analyseert je gedrag, voorspelt wat je leuk vindt"
|
|
- **Google Maps:** "Voorspelt verkeer, berekent snelste route"
|
|
- **Autocorrect:** "Letterlijk next-word prediction, zoals ChatGPT"
|
|
- **Gezichtsherkenning:** "Patroonherkenning in pixels"
|
|
- **Als niemand antwoordt:** "Je telefoon vanochtend - getypt? Autocorrect. Route? Google Maps. Muziek? Spotify kiest voor je. Allemaal 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?"
|
|
- **🎤 INTERACTIE:** "Wat denken jullie dat er gebeurt als je iets typt?"
|
|
- **Kort antwoord:** "Het voorspelt steeds het volgende woord. Meer niet. Maar het doet dat zó goed dat het lijkt alsof het 'denkt'."
|
|
- 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"
|
|
- **🎤 INTERACTIE:** "Als LLMs alleen maar voorspellen, hoe kunnen ze dan creatieve ideeën genereren?"
|
|
- **HOW:** Model heeft miljarden teksten gelezen met concepten naast elkaar. 'Koffie' bij 'ochtend', 'strand' bij 'zon'. Vraag je 'café op Mars' → combineert patronen van beide.
|
|
- **WHY voelt het creatief?** Combinatie is nieuw voor jou, ook al zijn losse onderdelen dat niet. Geen echte intentie/inspiratie, maar mixt kennis op nieuwe manieren.
|
|
|
|
---
|
|
|
|
### 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
|
|
- **🎤 INTERACTIE:** "Als je ChatGPT 10x dezelfde vraag stelt, krijg je dan 10x hetzelfde antwoord?" (handopsteken ja/nee)
|
|
- **Antwoord: Nee!** Er zit bewust randomness in = temperatuur parameter
|
|
- **Wat is temperatuur?** Model berekent: 'melk' 60%, 'suiker' 35%, 'room' 5%. Lage temp → kiest altijd 'melk'. Hoge temp → gooit dobbelsteen, kiest soms 'suiker'
|
|
- **Waarom?** Anders steeds exact hetzelfde = robotachtig. Variatie maakt het menselijker/creatiever
|
|
- "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.
|
|
- **🎤 INTERACTIE:** "Hoe herken je een hallucinatie? Wat zijn rode vlaggen?"
|
|
- **Té specifieke details** (cijfers, datums, namen) → WHY: vult gaten met wat 'waarschijnlijk' klinkt
|
|
- **Bronnen die niet te vinden zijn** → WHY: genereert tekst die LIJKT op bronvermelding
|
|
- **Onbekende npm packages** → "Ik heb zelf meegemaakt dat ChatGPT bleef volhouden dat een package bestond, zelfs 'documentatie' genereerde, terwijl code steeds errors gaf!"
|
|
- **Verdacht zelfverzekerd over obscure onderwerpen** → WHY: weet niet wat het niet weet
|
|
- "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?"
|
|
- **🎤 INTERACTIE:** "Wie betaalt er al voor een AI tool? ChatGPT Plus, Claude Pro?" (tel handen, vraag 1-2 waarom) - "En de rest - waarom niet?" (verwacht: gratis werkt prima, te duur, weet niet wat je extra krijgt)
|
|
- "Voor deze cursus hoef je niks te betalen!"
|
|
- **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
|
|
- **🎤 INTERACTIE:** "In welke situaties zou je tijdelijke chat willen gebruiken?"
|
|
- **Klantgegevens/bedrijfsdata** → WHY: Kan gebruikt worden voor training. Jouw data in iemand anders' antwoord = datalek
|
|
- **Medische/persoonlijke info** → WHY: AVG/GDPR - mag niet delen met derden (OpenAI = derde partij)
|
|
- **Interne bedrijfscode** → WHY: Intellectueel eigendom - geheime algoritme in trainingsdata
|
|
- "Tijdelijke chat voorkomt dit - niet opgeslagen, niet voor training"
|
|
- "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?"
|
|
- **Slecht:** "Maak een button" - **WHY is dit slecht?**
|
|
- Welke taal? HTML, React, Vue, Angular - allemaal anders
|
|
- Welke stijl? Rond, vierkant, schaduw?
|
|
- Welke kleur? Blauw, rood, gradient?
|
|
- Hoe groot? Mobiel vs desktop?
|
|
- → AI moet gokken → generieke output → jij moet aanpassen → tijdverlies
|
|
- **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."
|
|
- **🎤 INTERACTIE:** "Welk element vinden jullie het belangrijkst? Rol, context, taak, of format?" (handopsteken)
|
|
- **Taak:** Enige verplichte element - zonder weet AI niet wat te doen. Maar alleen taak = generieke output
|
|
- **Context:** Maakt vaak grootste verschil. 'Maak button' vs 'Button voor medische app, oudere gebruikers' = heel andere output
|
|
- **Rol:** Helpt AI juiste 'stem' vinden. Senior developer ≠ beginner. Copywriter ≠ technisch schrijver
|
|
- **Format:** Voorkomt herschrijven. 'Geef alleen code' scheelt tijd
|
|
- Combinatie is krachtig. 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!"**
|