5.4 KiB
Les 1: Introductie tot AI en Large Language Models
✅ Deze les is volledig uitgewerkt
Lesmateriaal
Hoofdstuk
Hoofdstuk 1: Fundamentals (Les 1-3)
Beschrijving
Kennismaking met AI, LLMs, ChatGPT en de basis van prompt engineering. Praktische workflow van schets op papier naar werkende website met v0.dev.
Te Behandelen
Wat is AI?
- Het AI-landschap: ChatGPT, Claude, Grok, Gemini
- Large Language Models (LLMs) en next-token prediction
- Hallucinaties en verificatie
AI Modellen & Kosten
Gratis opties (voldoende voor deze cursus!):
| Provider | Model | Sterk in |
|---|---|---|
| ChatGPT Free | GPT-4o | Algemeen, code, images |
| Claude Free | Sonnet 3.5 | Lange teksten, nuance |
| Gemini Free | Gemini Pro | Google integratie |
| Groq | Llama 3.3 | Supersnel, gratis API |
| Ollama | Diverse (lokaal) | Privacy, offline |
Betaald (~$20/maand): ChatGPT Plus, Claude Pro - meer berichten, sneller
Premium: Claude Opus (~$75/maand API) - beste redenering, complexe taken
Privacy tip: Ollama draait lokaal → data verlaat je computer niet
Wanneer welk model?
- Snelle code snippets → ChatGPT of Claude
- Lange documenten → Claude (grote context window)
- Privacy-gevoelig → Ollama (lokaal)
- Supersnel prototypen → Groq API
- UI componenten → v0.dev
ChatGPT in de Praktijk
- Interface rondleiding
- Model kiezen (GPT-4o, GPT-4o with canvas, GPT-4)
- Tijdelijke chat (privacy)
- Afbeeldingen analyseren (image-to-text) ← Cruciaal voor workflow!
- Bestanden uploaden (PDF, documenten)
- Custom Instructions
- Het geheugen van ChatGPT
Prompt Engineering Basics
- Wat is een prompt?
- Slechte vs goede prompts
- Prompt framework: Rol, Context, Taak, Format
- Tech stack specificeren (React, Tailwind CSS)
- Kleuren en look & feel (hex codes, stijl beschrijvingen)
- Praktische tips
De Slimme Workflow: Schets → Website
- TEKEN je idee op papier
- Maak een FOTO van je tekening
- Upload naar CHATGPT + beschrijf je wensen (tech stack, kleuren, stijl)
- ChatGPT maakt een gedetailleerde PROMPT
- Plak die prompt in V0.DEV → Website!
- DEPLOY naar Vercel
v0.dev Demo
- Wat is v0.dev (Vercel's AI UI generator)
- Van schets naar code
- Itereren met follow-up prompts
- Deployment naar Vercel via GitHub
Tools
- ChatGPT (chat.openai.com)
- Claude (claude.ai) - optioneel
- v0.dev
- Vercel
- GitHub
Lesopdracht (2 uur)
De Workflow Doorlopen
Stap 1: Tekenen (10 min)
- Teken een hero section op papier
- Simpele blokken en lijnen zijn genoeg
- Geef layout aan: headline, tekst, button, afbeelding placeholder
Stap 2: Foto maken (2 min)
- Maak duidelijke foto met telefoon
Stap 3: ChatGPT - Schets + Beschrijving (15 min)
Upload foto en beschrijf:
Dit is een schets voor een hero section van mijn website.
Beschrijf deze schets als een gedetailleerde prompt voor v0.dev.
Tech stack: React met Tailwind CSS
Kleuren: [bijv. Primary #2563EB]
Stijl: [bijv. Modern, minimalistisch]
Doel: [bijv. SaaS landingspagina]
Stap 4: Prompt kopiëren (1 min)
- Kopieer de gegenereerde Engelse prompt
Stap 5: v0.dev genereren (15 min)
- Plak prompt in v0.dev
- Itereer indien nodig
- Let op: ~7 gratis generaties per dag
Stap 6: Deploy naar Vercel (10 min)
- Add Integration → GitHub koppelen
- v0 maakt automatisch repository
- Deploy → Live URL!
Op te Leveren
- Foto van papieren schets
- Screenshot ChatGPT conversatie
- Screenshot v0.dev resultaat
- Vercel URL
Huiswerk (2 uur)
Deel 1: Reflectie (500 woorden)
Schrijf over je eerste ervaring met AI tools:
- Wat heb ik geleerd?
- Mijn ervaring met de workflow
- Kritische kanttekeningen
- Vooruitblik
Deel 2: AI Use Cases (5 stuks)
Bedenk 5 concrete use cases voor AI in development:
- De situatie
- De AI-toepassing
- Het verwachte resultaat
- Mogelijke valkuilen
Deel 3: Tweede Schets → Website
Doorloop de workflow opnieuw met een ANDER component:
- Features section
- Pricing table
- Testimonials sectie
- Contact formulier
- Footer
- Of eigen keuze
Specificeer weer:
- Tech stack (React + Tailwind)
- Kleuren
- Stijl/Look & Feel
- Doel
Inleveren: Via Teams chat
Timing Overzicht
| Blok | Onderwerp | Duur |
|---|---|---|
| 1 | Welkom & Introductie | 13 min |
| 2 | Wat is AI? | 20 min |
| 3 | AI Landscape | 12 min |
| 4 | ChatGPT in de Praktijk | 25 min |
| 5 | Prompt Engineering | 15 min |
| 6 | Live Demo v0.dev | 27 min |
| 7 | Hands-on Opdracht | 53 min |
| 8 | Afsluiting | 15 min |
Totaal: 180 minuten (3 uur)
Benodigdheden
- Laptop met internetverbinding
- Papier en pen ← Belangrijk!
- ChatGPT account (gratis)
- GitHub account (gratis)
- Vercel account (gratis, koppel met GitHub)
- Projectiescherm (docent)
Leerdoelen
Na deze les kan de student:
- Uitleggen hoe LLMs werken (next-token prediction)
- Het AI-landschap beschrijven (ChatGPT, Claude, Gemini, Grok)
- ChatGPT praktisch gebruiken (interface, afbeeldingen, documenten)
- Effectieve prompts schrijven met tech stack, kleuren en stijl
- De schets-naar-website workflow toepassen
- Een component genereren in v0.dev en deployen naar Vercel