rubberducky/novi-lessons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add v2 lessons for next class

Browse Source
This commit is contained in:
Tim Rijkse
2026-02-11 13:58:41 +01:00
parent 984f2256dc
commit 35bbc50c06
16 changed files with 5013 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

831
v2/Les01-Introductie-AI/Les01-Slide-Overzicht.md Normal file
View File

@@ -0,0 +1,831 @@
# Les 1: Introductie tot AI en Large Language Models
## Slide Overzicht (3 uur les) - V2
**V2 Verbeteringen:**
- Account setup met checkpoints (slides 6-8)
- Deployment demo samen met class (slide 34)
- Troubleshooting notities toegevoegd
**Spreektijd docent:** ~55 minuten
**Account setup (samen):** ~10 minuten
**Demo v0.dev + deployment:** ~20 minuten
**Hands-on opdracht:** ~50 minuten
**Afsluiting + buffer:** ~25 minuten
---
## BLOK 1: WELKOM & INTRODUCTIE (13 minuten)
### Slide 1: Titelslide
*(30 seconden)*
**Titel:** Introductie tot AI en Large Language Models
**Subtitel:** AI Development - Les 1
**Docent:** Tim Rijkse
**Datum:** [Datum invullen]
---
### Slide 2: Planning
*(1,5 minuut)*
**Titel:** Wat gaan we vandaag doen?
**Inhoud:**
| Tijd | Onderwerp |
|------|-----------|
| 09:00 - 09:15 | Welkom & voorstelrondje |
| 09:15 - 09:40 | Wat is AI? LLMs, hallucinaties, tools |
| 09:40 - 10:00 | ChatGPT in de praktijk |
| 10:00 - 10:15 | Prompt Engineering |
| 10:15 - 10:35 | Live demo: Van schets naar website |
| 10:35 - 11:30 | Jullie aan de slag! |
| 11:30 - 12:00 | Resultaten delen & huiswerk |
**Einddoel:** Van een tekening op papier naar een live website!
---
### Slide 3: Voorstellen docent
*(1,5 minuut)*
**Titel:** Even voorstellen
**Inhoud:**
- Naam: Tim Rijkse
- Developer + AI docent bij NOVI
- Dagelijks bezig met AI-assisted development
- Bereikbaar via Teams
---
### Slide 4: Kennismaking
*(5 minuten - studenten aan het woord)*
**Titel:** Wie zijn jullie?
**Inhoud:**
- Naam
- Achtergrond (werk/studie)
- Heb je al eens ChatGPT of andere AI-tools gebruikt?
- Zo ja, waarvoor?
---
### Slide 5: De Leerlijn AI Developer
*(2 minuten)*
**Titel:** 18 weken, 4 delen
**Inhoud:**
| Deel | Lessen | Focus |
|------|--------|-------|
| 1: AI Foundations | 1-4 | AI basics, tools, ethics, prompting |
| 2: Technical Foundations | 5-9 | TypeScript, Next.js, databases, Supabase |
| 3: AI Tooling & Prototyping | 10-12 | Tool selectie, prototyping, Cursor |
| 4: Advanced AI Features | 13-18 | Agents, MCP, AI SDK, deployment |
**Eindresultaat:** Complete full-stack applicatie met AI
---
### Slide 6: Accounts Check - ChatGPT
*(3 minuten)*
**Titel:** Stap 1: ChatGPT Account
**Inhoud:**
```
┌─────────────────────────────────────────────────────┐
│ STAP 1: CHATGPT ACCOUNT │
│ ───────────────────────────────────────────────── │
│ 1. Ga naar chat.openai.com │
│ 2. Klik "Sign up" │
│ 3. Kies: Email of Google/Apple login │
│ 4. Bevestig je email │
│ ───────────────────────────────────────────────── │
│ ✅ CHECKPOINT: Je ziet het ChatGPT chatvenster │
│ Steek je hand op als je dit hebt! │
└─────────────────────────────────────────────────────┘
```
**⚠️ WACHT** - We gaan pas door als iedereen klaar is!
---
### Slide 7: Accounts Check - GitHub
*(3 minuten)*
**Titel:** Stap 2: GitHub Account
**Inhoud:**
```
┌─────────────────────────────────────────────────────┐
│ STAP 2: GITHUB ACCOUNT │
│ ───────────────────────────────────────────────── │
│ 1. Ga naar github.com │
│ 2. Klik "Sign up" │
│ 3. Kies username (dit wordt je URL!) │
│ 4. Bevestig je email │
│ ───────────────────────────────────────────────── │
│ ✅ CHECKPOINT: Je ziet je GitHub dashboard │
│ Steek je hand op als je dit hebt! │
└─────────────────────────────────────────────────────┘
```
**⚠️ WACHT** - We gaan pas door als iedereen klaar is!
---
### Slide 8: Accounts Check - Vercel
*(4 minuten)*
**Titel:** Stap 3: Vercel Account (koppel met GitHub!)
**Inhoud:**
```
┌─────────────────────────────────────────────────────┐
│ STAP 3: VERCEL ACCOUNT │
│ ───────────────────────────────────────────────── │
│ 1. Ga naar vercel.com │
│ 2. Klik "Sign Up" │
│ 3. BELANGRIJK: Kies "Continue with GitHub" │
│ (niet email!) │
│ 4. Geef Vercel toegang tot je GitHub │
│ ───────────────────────────────────────────────── │
│ ✅ CHECKPOINT: Je ziet Vercel dashboard │
│ EN je GitHub username staat rechtsboven │
│ Steek je hand op als je dit hebt! │
└─────────────────────────────────────────────────────┘
```
**⚠️ Veel voorkomende fout:** Eerst deployen, dan pas GitHub koppelen. Doe het NU!
---
## BLOK 2: WAT IS AI? (15 minuten)
### Slide 9: Wat is Artificial Intelligence?
*(3 minuten)*
**Titel:** AI - Meer dan een buzzword
**Inhoud:**
**Definitie:** Computersystemen die taken uitvoeren die normaal menselijke intelligentie vereisen
**Typen AI:**
- **Narrow AI** (wat we nu hebben): specifieke taken
- **General AI** (toekomst): breed menselijk denken
**Voorbeelden:**
- Aanbevelingen (Netflix, Spotify)
- Spraakassistenten (Siri, Alexa)
- Code generatie (ChatGPT, Copilot)
---
### Slide 10: Hoe werken Large Language Models?
*(4 minuten)*
**Titel:** De magie achter ChatGPT
**Inhoud:**
1. **Training:** Model leest miljarden teksten
2. **Patroonherkenning:** Leert statistische verbanden
3. **Voorspelling:** Voorspelt het volgende woord
4. **Output:** Genereert tekst token voor token
**Belangrijk inzicht:**
- LLMs "begrijpen" niet echt - ze voorspellen
- Geen bewustzijn, geen intentie
- Geavanceerde patroonherkenning op enorme schaal
---
### Slide 11: Tokens & Next-Token Prediction
*(4 minuten)*
**Titel:** Hoe "denkt" een LLM?
**Inhoud:**
**Stap 1: Tekst → Tokens (nummers)**
```
"Ik drink koffie" → [1847, 5621, 8934]
```
Elk woord (of woorddeel) krijgt een nummer.
**Stap 2: Betekenis in getallen**
Woorden met vergelijkbare betekenis liggen dicht bij elkaar:
- "koffie" en "thee" → dichtbij
- "staal" en "metaal" → dichtbij
- "koffie" en "fiets" → ver uit elkaar
**Stap 3: Voorspel het volgende token**
```
"Ik drink koffie met ___"
```
Het model berekent kansen:
- "melk" → 45%
- "suiker" → 30%
- "een" → 15%
→ Kiest waarschijnlijk "melk" (maar niet altijd!)
**Dit verklaart:**
- Waarom het soms briljant is (patronen herkend)
- Waarom het soms onzin produceert (verkeerde voorspelling)
- Waarom dezelfde vraag verschillende antwoorden geeft (kans, niet zekerheid)
---
### Slide 12: Hallucinaties
*(5 minuten)*
**Titel:** Waarom AI soms "liegt"
**Inhoud:**
**Wat zijn hallucinaties?**
- AI verzint informatie die niet bestaat
- Klinkt heel overtuigend
- Grammaticaal perfect, maar feitelijk onjuist
**Voorbeelden:**
- Fake wetenschappelijke papers met echte-klinkende titels
- Niet-bestaande npm packages met installatie-instructies
- Verzonnen restaurants met adressen
**Waarom gebeurt dit?**
Het model voorspelt wat LIJKT op correcte output, niet wat WAAR is.
**Regel:** Verifieer altijd! Vertrouw, maar check.
---
## BLOK 3: HET AI-LANDSCHAP (10 minuten)
### Slide 13: De Grote Spelers
*(3 minuten)*
**Titel:** Welke AI tools zijn er?
**Inhoud:**
| Tool | Bedrijf | Sterk in |
|------|---------|----------|
| **ChatGPT** | OpenAI | Algemeen, code, creatief |
| **Claude** | Anthropic | Lange teksten, nuance |
| **Gemini** | Google | Google integratie |
| **Grok** | xAI | Actueel nieuws (X/Twitter) |
**Vandaag:** Focus op ChatGPT - meest toegankelijk.
---
### Slide 14: Gratis AI Opties
*(4 minuten)*
**Titel:** Gratis modellen - meer dan genoeg!
**Inhoud:**
| Provider | Model | Sterk in | Privacy |
|----------|-------|----------|---------|
| **ChatGPT Free** | GPT-5 | Algemeen, code, images | Cloud |
| **Claude Free** | Sonnet 3.5 | Lange teksten, nuance | Cloud |
| **Gemini Free** | Gemini Pro | Google integratie | Cloud |
| **Groq** | Llama 3.3 | Supersnel, gratis API | Cloud |
| **Ollama** | Diverse (lokaal) | Privacy, offline | **Lokaal** |
**Conclusie:** Voor deze cursus is gratis ruim voldoende!
**Privacy tip:** Ollama draait lokaal → data verlaat je computer niet.
---
### Slide 15: Betaalde & Premium Modellen
*(3 minuten)*
**Titel:** Wanneer upgraden?
**Inhoud:**
**Betaald (~$20/maand):**
| Provider | Voordelen |
|----------|-----------|
| ChatGPT Plus | Meer berichten, sneller, GPT-5.2, DALL-E |
| Claude Pro | Meer berichten, prioriteit, langere context |
**Premium Tier:**
| Model | Kosten | Wanneer? |
|-------|--------|----------|
| **Claude Opus** | ~$75/maand API | Beste redenering, complexe taken |
| GPT-5.2 Turbo | Via Plus | Lange context, nieuwste features |
**Advies:** Start gratis. Upgrade alleen als je tegen limieten aanloopt.
---
### Slide 16: Welke tool voor welke taak?
*(4 minuten)*
**Titel:** Snelle vergelijking
**Inhoud:**
| Taak | Beste keuze |
|------|-------------|
| Snelle code snippets | ChatGPT of Claude |
| Lange documenten | Claude (200K context) |
| Actueel nieuws | Grok of Perplexity |
| UI componenten | v0.dev (straks!) |
| Privacy-gevoelig | Ollama (lokaal) |
| Supersnel prototypen | Groq API |
**Tip:** Professionele developers gebruiken meerdere tools!
---
## BLOK 4: CHATGPT IN DE PRAKTIJK (22 minuten)
### Slide 17: ChatGPT Interface
*(3 minuten)*
**Titel:** Laten we ChatGPT openen
**Inhoud:**
*[Live demonstratie - open chat.openai.com]*
**Wat je ziet:**
- Chatvenster (midden)
- Chat geschiedenis (links)
- Model kiezen (bovenaan)
- Instellingen (rechtsonder)
**Actie:** Open nu ChatGPT op je laptop!
---
### Slide 18: Model Kiezen
*(2 minuten)*
**Titel:** Welk model gebruik je?
**Inhoud:**
**In ChatGPT kun je kiezen:**
- **GPT-5** - Standaard, snel, gratis
- **GPT-5 with canvas** - Voor documenten bewerken
- **GPT-5.2** - Nieuwste en krachtigste (betaald)
**Tip:** GPT-5 is voor de meeste taken prima!
---
### Slide 19: Tijdelijke Chat
*(2 minuten)*
**Titel:** Privacy: Tijdelijke Chat
**Inhoud:**
**Wat is tijdelijke chat?**
- Chat wordt NIET opgeslagen
- Wordt NIET gebruikt om model te trainen
**Wanneer gebruiken?**
- Gevoelige informatie
- Werk-gerelateerde data
- Client gegevens
---
### Slide 20: Afbeeldingen Analyseren
*(5 minuten)*
**Titel:** Image-to-Text - Cruciaal voor onze workflow!
**Inhoud:**
**Wat kun je doen?**
- Foto uploaden en vragen stellen
- Screenshot laten analyseren
- **Schets laten interpreteren** ← Dit gebruiken we straks!
**Hoe werkt het?**
- Klik op 📎 (paperclip)
- Upload afbeelding
- Stel je vraag
*[Live demonstratie met een schets]*
---
### Slide 21: Bestanden Uploaden
*(2 minuten)*
**Titel:** PDF's en documenten
**Inhoud:**
**ChatGPT kan:**
- PDF's lezen en samenvatten
- Word documenten analyseren
- Code bestanden reviewen
- Spreadsheets interpreteren
**Limiet:** ~50 pagina's per document
---
### Slide 22: Custom Instructions
*(3 minuten)*
**Titel:** ChatGPT Personaliseren
**Inhoud:**
**Wat zijn Custom Instructions?**
- Permanente instructies die ChatGPT onthoudt
- Zit in Instellingen → Personalisatie
**Handige voorbeelden:**
- "Ik ben een frontend developer, gebruik React en Tailwind"
- "Antwoord in het Nederlands tenzij ik Engels vraag"
- "Geef code voorbeelden met TypeScript"
---
### Slide 23: ChatGPT Projects
*(3 minuten)*
**Titel:** Alles op één plek: Projects
**Inhoud:**
**Wat zijn Projects?**
- Slimme werkruimtes voor langlopende taken
- Eigen instructies per project
- Bestanden uploaden (PDF, Word, afbeeldingen)
- Project-specifiek geheugen
**Waarom handig?**
- Context blijft behouden tussen chats
- Geen herhaling van instructies nodig
- Perfect voor: cursussen, klanten, projecten
**Gratis tier:** 5 bestanden per project
**Betaald:** 25-40 bestanden per project
---
### Slide 24: Praktijk Oefening
*(5 minuten - studenten werken)*
**Titel:** Stel je ChatGPT in!
**Inhoud:**
**Opdracht (5 minuten):**
1. **Custom Instructions instellen:**
- Ga naar Instellingen → Personalisatie
- Vul in: "Ik ben een frontend developer. Ik werk met React en Tailwind CSS."
2. **Maak je eerste Project:**
- Klik op "New Project" (linkerzijbalk)
- Naam: "Les 1 - v0.dev Prompt Engineer"
- Instructie: "Help me gedetailleerde prompts schrijven voor v0.dev. Focus op React + Tailwind CSS componenten."
**Dit project gebruiken we straks voor de v0.dev demo!**
---
## BLOK 5: PROMPT ENGINEERING (12 minuten)
### Slide 25: Wat is Prompt Engineering?
*(2 minuten)*
**Titel:** De kunst van het vragen stellen
**Inhoud:**
**Een prompt is:** De instructie die je aan AI geeft
**Waarom belangrijk?**
- Goede prompt = bruikbaar resultaat
- Slechte prompt = frustratie
**Garbage in = garbage out!**
---
### Slide 26: Slechte vs Goede Prompt
*(3 minuten)*
**Titel:** Het verschil zien
**Slechte prompt:**
> "Maak een button"
**Goede prompt:**
> "Maak een React button component met Tailwind CSS. Primary styling met blauwe achtergrond (#2563EB). Include hover state en loading state met spinner."
**Waarom beter?**
- Specificeert technologie
- Beschrijft features
- Geeft visuele details
---
### Slide 27: Prompt Framework
*(2 minuten)*
**Titel:** 4 elementen van een goede prompt
**Inhoud:**
1. **Rol:** "Je bent een senior frontend developer..."
2. **Context:** "...die werkt aan een SaaS landingspagina..."
3. **Taak:** "...maak een hero section met..."
4. **Format:** "...gebruik React en Tailwind"
---
### Slide 28: Tech Stack Specificeren
*(2 minuten)*
**Titel:** Vertel de AI welke technologie
**Inhoud:**
**Voor deze cursus:**
- **React** - JavaScript framework voor UI
- **Tailwind CSS** - Utility-first CSS
- **Next.js** - React framework
**In je prompt:**
> "Gebruik React met Tailwind CSS"
**Tip:** v0.dev genereert automatisch React + Tailwind!
---
### Slide 29: Kleuren en Look & Feel
*(2 minuten)*
**Titel:** Visuele specificaties
**Inhoud:**
**Wat specificeren?**
- **Kleuren:** "#2563EB" of "blauw thema"
- **Stijl:** "Modern, minimalistisch"
- **Referenties:** "In de stijl van Stripe.com"
**Voorbeeld:**
> "Blauw kleurenschema met primary #2563EB. Modern en minimalistisch. B2B SaaS stijl."
---
### Slide 30: Prompting Tips
*(1 minuut)*
**Titel:** Samenvatting
**Inhoud:**
1. Geef een rol
2. Wees specifiek
3. Specificeer tech stack
4. Beschrijf look & feel
5. Itereer - eerste poging is zelden perfect
---
## BLOK 6: LIVE DEMO V0.DEV (25 minuten)
### Slide 31: Introductie v0.dev
*(3 minuten)*
**Titel:** Van schets naar website
**Inhoud:**
**v0.dev door Vercel:**
- AI-powered UI generator
- Begrijpt tekst EN afbeeldingen
- Genereert React + Tailwind code
- Direct deploybaar
**De workflow:**
Tekening → Foto → ChatGPT → Prompt → v0.dev → Website!
---
### Slide 32: De Slimme Workflow
*(3 minuten)*
**Titel:** 5 stappen
**Inhoud:**
```
1. TEKEN je idee op papier
↓
2. Maak een FOTO
↓
3. Upload naar CHATGPT + beschrijf wensen
(tech stack, kleuren, stijl)
↓
4. ChatGPT maakt gedetailleerde PROMPT
↓
5. Plak in V0.DEV → Website!
```
**Waarom ChatGPT eerst?**
- v0 heeft beperkte credits (~7/dag)
- ChatGPT optimaliseert je prompt
---
### Slide 33: Live Demo - v0.dev
*(10 minuten)*
**Titel:** Van schets naar website - live!
**Inhoud:**
*[Docent demonstreert de workflow live]*
**De stappen:**
- ✏️ **Tekenen:** Simpele hero section op papier (blokken en lijnen)
- 📸 **Foto:** Upload naar ChatGPT Project
- 💬 **Prompt:** "Beschrijf als v0.dev prompt, React + Tailwind, blauw thema"
- ⚡ **v0.dev:** Prompt plakken → genereren (~30 sec)
- 🔄 **Itereren:** "Make button larger", "Add gradient"
---
### Slide 34: Live Demo - Deployment (SAMEN!)
*(8 minuten)*
**Titel:** Samen deployen naar Vercel
**Inhoud:**
```
┌─────────────────────────────────────────────────────┐
│ STAP 1: GITHUB KOPPELEN IN V0 │
│ ───────────────────────────────────────────────── │
│ 1. Klik rechtsboven op "..." menu │
│ 2. Klik "Add to codebase" │
│ 3. Kies "Connect to GitHub" │
│ 4. Autoriseer v0 voor je GitHub │
│ ───────────────────────────────────────────────── │
│ ✅ CHECKPOINT: Je ziet "Create repository" knop │
└─────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────┐
│ STAP 2: REPOSITORY AANMAKEN │
│ ───────────────────────────────────────────────── │
│ 1. Kies een naam (bijv. "mijn-landingspagina") │
│ 2. Klik "Create repository" │
│ 3. Wacht tot code gepusht is (~10 sec) │
│ ───────────────────────────────────────────────── │
│ ✅ CHECKPOINT: Je ziet "Deploy" knop │
└─────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────┐
│ STAP 3: DEPLOYEN NAAR VERCEL │
│ ───────────────────────────────────────────────── │
│ 1. Klik "Deploy" │
│ 2. Vercel opent → Klik "Import" │
│ 3. Wacht op build (~1 minuut) │
│ 4. Kopieer je URL: jouw-project.vercel.app │
│ ───────────────────────────────────────────────── │
│ ✅ CHECKPOINT: Je website is live! │
│ Open de URL in een nieuw tabblad │
└─────────────────────────────────────────────────────┘
```
**⚠️ TROUBLESHOOTING:**
- "GitHub niet gekoppeld" → Ga naar Vercel settings, koppel GitHub
- "Repository exists" → Kies andere naam
- "Build failed" → Vraag docent om hulp
---
## BLOK 7: HANDS-ON OPDRACHT (50 minuten)
### Slide 35: Aan de slag!
*(50 minuten - 5 min uitleg + 45 min werken)*
**Titel:** Bouw een complete landingspagina!
**Inhoud:**
**Vereisten:**
- Minimaal **3 secties** (hero, features, pricing, testimonials, footer...)
- Minimaal **1 carousel** + **1 accordion**
- Vrije keuze in onderwerp/product
**Stappen:** Teken → Foto → ChatGPT Project → v0.dev → Deploy (zelf!)
**Checklist:**
- [ ] 3+ secties getekend
- [ ] Carousel & accordion gepland
- [ ] Tech stack + kleuren gespecificeerd
- [ ] Gedeployed naar Vercel
**Tip:** Begin simpel, itereer! **Hulp nodig?** Steek je hand op!
---
## BLOK 8: AFSLUITING (30 minuten)
### Slide 36: Resultaten Delen
*(8 minuten)*
**Titel:** Wie wil laten zien?
**Inhoud:**
- Laat je schets zien
- Toon het v0 resultaat
- Wat ging goed? Wat was lastig?
---
### Slide 37: Samenvatting
*(4 minuten)*
**Titel:** Wat hebben we geleerd?
**Inhoud:**
✅ Hoe LLMs werken (next-token prediction)
✅ AI-landschap: ChatGPT, Claude, Gemini
✅ ChatGPT praktisch gebruiken
✅ Prompt engineering: tech stack, kleuren, stijl
✅ **De workflow: Schets → ChatGPT → v0.dev → Website!**
---
### Slide 38: Huiswerk
*(5 minuten)*
**Titel:** Voor volgende week
**Inhoud:**
**1. Reflectie (500 woorden)**
- Wat vond je verrassend aan werken met AI?
- Wat ging goed? Wat vond je lastig?
- Hoe zie je AI jouw werk als developer veranderen?
**2. Breid je v0 website uit**
- Voeg minimaal 1 nieuwe sectie toe (pricing, features, contact, footer...)
- Gebruik weer de workflow: teken → ChatGPT → v0
- Lever screenshots + Vercel URL in
**Inleveren:** Via Teams, voor volgende les
**Vragen?** Tot volgende week! 🚀
---
## Timing Samenvatting (V2)
| Blok | Onderwerp | Duur | Slides |
|------|-----------|------|--------|
| 1 | Welkom & Introductie + **Account Setup** | 18 min | 1-8 |
| 2 | Wat is AI? | 15 min | 9-12 |
| 3 | AI Landscape | 10 min | 13-16 |
| 4 | ChatGPT Praktijk | 22 min | 17-24 |
| 5 | Prompt Engineering | 12 min | 25-30 |
| 6 | Demo v0.dev + **Deployment (samen!)** | 20 min | 31-34 |
| 7 | Hands-on Opdracht | 50 min | 35 |
| 8 | Afsluiting | 30 min | 36-38 |
**V2 Veranderingen:**
- Account setup met checkpoints (+5 min in Blok 1)
- Deployment demo samen met class (niet "zelf uitzoeken")
**Spreektijd (Blok 1-5):** ~60 minuten
**Demo (Blok 6):** ~20 minuten
**Hands-on + Afsluiting:** ~80 minuten
**Totaal:** 180 minuten (3 uur)
**Totaal slides:** 38