12 KiB
12 KiB
Lesplan Les 1: Introductie AI & Large Language Models
Titel cursus: AI Fundamentals Leeruitkomst/prestatie-indicatoren waaraan gewerkt wordt:
- De student schrijft effectieve prompts voor tekst-, beeld- en codegeneratie met tools zoals ChatGPT, DALL-E en Midjourney.
- De student past AI op ethische wijze toe en houdt rekening met de valkuilen, waaronder auteursrecht, bias en transparantie.
- De student reflecteert kritisch op het gebruik van AI binnen het creatieve of ontwikkelproces.
| Les 1: Introductie AI & Large Language Models (3 uur) | |
|---|---|
| Benodigdheden | Laptop met internetverbinding, projectiescherm, papier en pen voor elke student, toegang tot v0.dev, ChatGPT account, GitHub account, Vercel account |
| Bijzonderheden | Dit lesplan is voor een fysieke les. Focus op "wow-factor" en enthousiasmeren. Kernworkflow: schets op papier → ChatGPT → v0.dev → website. |
Lesverloop
| Tijd (minuten) | Onderdeel | Werkvorm + toelichting + clue |
|---|---|---|
| 0-13 | Welkom & Introductie | Welkom en kennismaking |
| Werkvorm: klassikaal gesprek (5 min) | ||
| Stel jezelf voor als docent. Vraag kort wie de studenten zijn en wat hun achtergrond is met AI. Peiling: "Wie heeft ChatGPT al eens gebruikt?" | ||
| Lesindeling en planning | ||
| Communiceer duidelijk de structuur van de les: | ||
| - Theorie over AI en LLMs (~45 min) | ||
| - Praktijk: ChatGPT leren gebruiken (~25 min) | ||
| - Prompt Engineering basics (~15 min) | ||
| - Live demo: van schets naar website (~27 min) | ||
| - Hands-on opdracht: jouw tekening wordt een website (~55 min) | ||
| Leerdoelen van vandaag | ||
| 1. Begrijpen wat AI en LLMs zijn | ||
| 2. ChatGPT praktisch leren gebruiken | ||
| 3. Prompt engineering: tech stack, kleuren, stijl specificeren | ||
| 4. Van schets op papier naar werkende website | ||
| Accounts check | ||
| Check of iedereen een ChatGPT, GitHub en Vercel account heeft. Laat studenten die dit nog moeten doen dit nu aanmaken. Tip: Vercel koppelen met GitHub is het makkelijkst. | ||
| 13-33 | Wat is AI? | Inventariseren voorkennis (5 min) |
| Werkvorm: brainstorm | ||
| Stel de vraag: "Wat is AI volgens jullie?" Laat studenten vrijuit antwoorden. Noteer kernwoorden op het bord/scherm. | ||
| Instructievorm: interactief doceren (15 min) | ||
| Definitie AI | ||
| Leg uit dat AI een verzamelnaam is voor systemen die taken uitvoeren waarvoor normaal menselijke intelligentie nodig is. Maak onderscheid tussen: | ||
| - Narrow AI (specifieke taken) | ||
| - General AI (theoretisch, nog niet bereikt) | ||
| Large Language Models (LLMs) | ||
| Kernuitleg: | ||
| - Getraind op enorme hoeveelheden tekst | ||
| - Voorspellen het volgende woord (next-token prediction) | ||
| - Geen echte "kennis" of "begrip", wel patroonherkenning | ||
| Demonstratie: Next-token prediction (5 min) | ||
| Open ChatGPT en typ langzaam een zin. Bijvoorbeeld: "De kat zat op de..." | ||
| Hallucinaties | ||
| Leg uit wat hallucinaties zijn en waarom ze voorkomen. Benadruk het belang van verificatie. | ||
| Clue: LLMs zijn geen databases met feiten, maar statistische modellen die patronen herkennen. | ||
| 33-45 | AI Landscape | Instructievorm: vergelijkende demonstratie (12 min) |
| De grote spelers | ||
| Loop door de belangrijkste AI-tools: ChatGPT, Claude, Gemini, Grok. | ||
| Gratis vs Betaald | ||
| Bespreek kort de verschillen. Conclusie: gratis is voldoende voor deze cursus. | ||
| Welke tool voor welke taak? | ||
| Korte klassikale discussie. | ||
| Clue: Er is geen "beste" AI-tool - de juiste keuze hangt af van je specifieke use case. | ||
| 45-70 | ChatGPT in de Praktijk | Werkvorm: interactieve demonstratie met meekijken (25 min) |
| Doel: Studenten leren ChatGPT effectief gebruiken | ||
| Interface rondleiding (5 min) | ||
| Open ChatGPT op het projectiescherm. Laat studenten meekijken en hun eigen ChatGPT openen. | ||
| Model kiezen (3 min) | ||
| Demonstreer de model selector: GPT-5, GPT-5 with canvas, GPT-5.2. | ||
| Tijdelijke Chat (3 min) | ||
| Demonstreer waar dit staat en wanneer je het gebruikt. | ||
| Afbeeldingen analyseren (5 min) | ||
| Live demonstratie: upload een schets en laat ChatGPT beschrijven wat hij ziet. Dit is de basis voor de workflow straks! | ||
| Bestanden uploaden (3 min) | ||
| Demonstreer het uploaden van een PDF of document. | ||
| Custom Instructions (3 min) | ||
| Laat zien waar dit staat en geef voorbeelden. | ||
| ChatGPT Projects (3 min) | ||
| Demonstreer Projects: werkruimtes met eigen instructies, bestanden en geheugen. | ||
| Praktijk: Instellen ChatGPT (5 min) | ||
| Studenten stellen Custom Instructions in + maken Project "Les 1 - v0.dev Prompt Engineer". | ||
| Dit project gebruiken we straks voor de v0.dev demo! | ||
| 70-85 | Prompt Engineering Basics | Instructievorm: demonstratie met oefening (15 min) |
| Wat is een prompt? | ||
| Een prompt is de instructie die je aan een AI geeft. | ||
| Slechte vs Goede Prompt | ||
| Toon het verschil tussen vage en specifieke prompts. | ||
| Prompt Framework | ||
| Introduceer: Rol, Context, Taak, Format. | ||
| Tech Stack Specificeren | ||
| Leg uit wat een tech stack is en waarom je dit moet meegeven: | ||
| - React - JavaScript framework voor UI | ||
| - Tailwind CSS - Utility-first CSS framework | ||
| - "v0.dev genereert automatisch React + Tailwind" | ||
| Kleuren en Look & Feel | ||
| Leg uit hoe je visuele specificaties meegeeft: | ||
| - Kleuren: hex codes (#2563EB) of beschrijvend ("warm oranje") | ||
| - Stijl: modern, minimalistisch, speels, corporate, etc. | ||
| - Sfeer en referenties: "In de stijl van Stripe.com" | ||
| Clue: Specificeer altijd je tech stack, kleuren en stijl voor consistente resultaten. | ||
| 85-112 | Live Demo: v0.dev | Instructievorm: live demonstratie (27 min) |
| Doel: "Wow-moment" creëren met de schets-naar-website workflow | ||
| Introductie v0.dev (3 min) | ||
| Leg uit wat v0.dev is: AI-powered UI generator van Vercel. | ||
| De Slimme Workflow (2 min) | ||
| Leg de 5-stappen workflow uit: | ||
| 1. TEKEN op papier | ||
| 2. FOTO maken | ||
| 3. Upload naar CHATGPT + beschrijf wensen (tech stack, kleuren, stijl) | ||
| 4. ChatGPT maakt PROMPT | ||
| 5. Plak in V0.DEV → Website! | ||
| Demo 1: Schets maken (3 min) | ||
| Teken live op papier een hero section: links tekst + button, rechts afbeelding placeholder. | ||
| Demo 2: Foto naar ChatGPT (8 min) | ||
| Upload foto en geef beschrijving mee: | ||
| - "Dit is een schets voor een hero section" | ||
| - Tech stack: React met Tailwind CSS | ||
| - Kleuren: Blauw thema met primary #2563EB | ||
| - Stijl: Modern, minimalistisch, professioneel | ||
| - "Maak hier een gedetailleerde prompt voor v0.dev van" | ||
| Demo 3: Prompt naar v0 (6 min) | ||
| Kopieer de gegenereerde prompt naar v0.dev. Toon het resultaat. | ||
| Demo 4: Itereren (3 min) | ||
| Verfijn met follow-up prompts. | ||
| Demo 5: Deployen (2 min) | ||
| Doorloop het deployment proces: Add Integration → GitHub → Deploy. | ||
| Clue: De schets is je startpunt, ChatGPT is je vertaler, v0.dev is je bouwer. | ||
| 112-165 | Hands-on Opdracht | Werkvorm: individueel werken (53 min) |
| Doel: Zelfstandig de workflow doorlopen | ||
| Opdracht introductie (5 min) | ||
| Deel de opdracht uit (zie Bijlage: Lesopdracht). Studenten gaan: | ||
| 1. TEKENEN op papier - hero section | ||
| 2. FOTO maken van schets | ||
| 3. CHATGPT - upload + beschrijf (tech stack, kleuren, stijl) | ||
| 4. PROMPT kopiëren | ||
| 5. V0.DEV - genereren | ||
| 6. DEPLOY naar Vercel | ||
| Benodigdheden check | ||
| Zorg dat iedereen papier en pen heeft! | ||
| Zelfstandig werken (40 min) | ||
| Loop rond en help studenten waar nodig. Let op: | ||
| - Kwaliteit van de schets (simpel is prima) | ||
| - Volledigheid van ChatGPT prompt (tech stack, kleuren, stijl) | ||
| - Problemen met v0.dev of deployment | ||
| Tussentijdse check (halverwege) | ||
| "Wie heeft al een prompt uit ChatGPT?" | ||
| "Wie is al in v0.dev bezig?" | ||
| Clue: Het doel is de workflow leren, niet perfectie! | ||
| 165-180 | Afsluiting | Werkvorm: klassikaal gesprek (15 min) |
| Korte terugblik (5 min) | ||
| Vraag 2-3 studenten om te delen: | ||
| - Hoe was de ervaring? | ||
| - Leek het resultaat op je schets? | ||
| Samenvatting (3 min) | ||
| - LLMs en next-token prediction | ||
| - Prompt engineering: tech stack, kleuren, stijl | ||
| - De workflow: Schets → ChatGPT → v0.dev → Website | ||
| Huiswerk (5 min) | ||
| Deel de huiswerkopdracht (zie Bijlage: Huiswerkopdracht): | ||
| - Reflectie schrijven (500 woorden) | ||
| - 5 AI use cases bedenken | ||
| - Tweede schets doorlopen met andere component | ||
| - Inleveren via Teams chat | ||
| Vooruitblik | ||
| Volgende les: Prompt Engineering verdieping. | ||
| Afsluiting | ||
| Bedank de studenten. Wijs op de beschikbaarheid voor vragen (Teams). |
Timing Overzicht
| Blok | Onderwerp | Start | Eind | Duur |
|---|---|---|---|---|
| 1 | Welkom & Introductie | 0:00 | 0:13 | 13 min |
| 2 | Wat is AI? | 0:13 | 0:33 | 20 min |
| 3 | AI Landscape | 0:33 | 0:45 | 12 min |
| 4 | ChatGPT in de Praktijk | 0:45 | 1:10 | 25 min |
| 5 | Prompt Engineering | 1:10 | 1:25 | 15 min |
| 6 | Live Demo v0.dev | 1:25 | 1:52 | 27 min |
| 7 | Hands-on Opdracht | 1:52 | 2:45 | 53 min |
| 8 | Afsluiting | 2:45 | 3:00 | 15 min |
Totaal: 180 minuten (3 uur)
Notities voor de docent
Voorbereiding
- BELANGRIJK: Zorg voor papier en pennen voor alle studenten
- Test v0.dev vooraf - soms zijn er rate limits
- Zorg voor backup-schermafbeeldingen mocht live demo falen
- Maak zelf een schets klaar voor de demo
- Zorg dat je eigen accounts werken (ChatGPT, Claude, v0.dev, GitHub)
De Schets-Workflow - Key Points
- Benadruk dat tekenen NIET mooi hoeft te zijn
- Simpele blokken en lijnen zijn voldoende
- Het gaat om communiceren van layout en structuur
- ChatGPT is de "vertaler" - die maakt de technische prompt
Prompt Specificaties - Wat moeten studenten meegeven?
- Tech stack: React met Tailwind CSS (v0 default)
- Kleuren: Hex codes of beschrijving
- Stijl: Modern/minimalistisch/speels/corporate etc.
- Responsive: Mobile-first design
- Doel: Type website (SaaS, portfolio, webshop)
Mogelijke vragen/discussiepunten
- "Kan ik ook mijn eigen schets direct uploaden naar v0?" → Ja, maar ChatGPT maakt de prompt gedetailleerder
- "Wat als mijn tekening lelijk is?" → Maakt niet uit, het gaat om de layout
- "Welke kleuren moet ik kiezen?" → Kies wat je wilt, of gebruik Tailwind default colors
Differentiatie
- Snelle studenten: Laat ze een tweede component maken of experimenteren met andere stijlen
- Studenten die moeite hebben: Help met de ChatGPT prompt, geef ze het template
Assessment indicatoren
Observeer tijdens de les:
- Maken studenten daadwerkelijk een schets?
- Geven ze volledige specificaties mee aan ChatGPT?
- Kunnen ze de workflow zelfstandig doorlopen?
- Begrijpen ze waarom je tech stack/kleuren/stijl specificeert?
Bijlagen
- Bijlage A: Lesopdracht - Van Schets naar Website met AI
- Bijlage B: Huiswerkopdracht - Reflectie, Use Cases en Tweede Schets