216 lines
5.9 KiB
Markdown
216 lines
5.9 KiB
Markdown
# Les 1: Introductie tot AI en Large Language Models
|
|
|
|
> ✅ **Deze les is volledig uitgewerkt**
|
|
|
|
## Lesmateriaal
|
|
|
|
- [Slide Overzicht](../Les01-Introductie-AI/Les01-Slide-Overzicht.md)
|
|
- [Lesplan](../Les01-Introductie-AI/Les01-Lesplan.md)
|
|
- [Bijlage A: Lesopdracht](../Les01-Introductie-AI/Les01-Bijlage-A-Lesopdracht.md)
|
|
- [Bijlage B: Huiswerkopdracht](../Les01-Introductie-AI/Les01-Bijlage-B-Huiswerkopdracht.md)
|
|
|
|
---
|
|
|
|
## 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-5 | 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-5, GPT-5 with canvas, GPT-5.2)
|
|
- Tijdelijke chat (privacy)
|
|
- Afbeeldingen analyseren (image-to-text) ← Cruciaal voor workflow!
|
|
- Bestanden uploaden (PDF, documenten)
|
|
- Custom Instructions (globale instructies)
|
|
- **ChatGPT Projects:** Werkruimtes met eigen instructies, bestanden en geheugen
|
|
|
|
### 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
|
|
1. **TEKEN** je idee op papier
|
|
2. Maak een **FOTO** van je tekening
|
|
3. Upload naar **CHATGPT PROJECT** "v0.dev Prompt Engineer" + beschrijf je wensen
|
|
4. ChatGPT maakt een gedetailleerde **PROMPT**
|
|
5. Plak die prompt in **V0.DEV** → Website!
|
|
6. **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)
|
|
|
|
### Bouw een Complete Landingspagina
|
|
|
|
**Vereisten:**
|
|
- Minimaal **3 secties** (bijv. hero, features, pricing, testimonials, footer)
|
|
- Minimaal **1 carousel** (image slider of testimonial slider)
|
|
- Minimaal **1 accordion** (FAQ of uitklapbare features)
|
|
- Vrije keuze in product/onderwerp
|
|
|
|
**Stap 1: Tekenen (15 min)**
|
|
- Teken je complete landingspagina op papier
|
|
- Meerdere secties! Niet alleen een hero
|
|
- Geef aan waar carousel en accordion komen
|
|
- Simpele blokken en lijnen zijn genoeg
|
|
|
|
**Stap 2: Foto maken (2 min)**
|
|
- Maak duidelijke foto met telefoon
|
|
|
|
**Stap 3: ChatGPT Project (15 min)**
|
|
|
|
Upload foto naar je "Les 1 - v0.dev Prompt Engineer" project:
|
|
```
|
|
Dit is een schets voor een complete landingspagina.
|
|
|
|
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 voor TaskFlow]
|
|
|
|
Let op: er moet een carousel in zitten en een accordion.
|
|
```
|
|
|
|
**Stap 4: v0.dev genereren (20 min)**
|
|
- Plak prompt in v0.dev
|
|
- Itereer voor carousel en accordion
|
|
- Let op: ~7 gratis generaties per dag
|
|
|
|
**Stap 5: Deploy naar Vercel (10 min)**
|
|
- Zelf uitzoeken! (Add Integration → GitHub → Deploy)
|
|
- Vraag klasgenoot om hulp indien nodig
|
|
|
|
### Op te Leveren
|
|
- Foto van papieren schets (met 3+ secties)
|
|
- Screenshot v0.dev resultaat met carousel
|
|
- Screenshot v0.dev resultaat met accordion
|
|
- Live 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
|