796 lines
16 KiB
Markdown
796 lines
16 KiB
Markdown
# Les 1: Introductie tot AI en Large Language Models
|
|
|
|
## Slide Overzicht (3 uur les)
|
|
|
|
---
|
|
|
|
## DEEL 1: WELKOM & INTRODUCTIE (13 minuten)
|
|
|
|
### Slide 1: Titelslide
|
|
|
|
**Titel:** Introductie tot AI en Large Language Models
|
|
**Subtitel:** AI Development - Les 1
|
|
**Docent:** Tim Rijkse
|
|
**Datum:** 4 februari 2026
|
|
|
|
---
|
|
|
|
### Slide 2: Planning
|
|
|
|
**Titel:** Planning
|
|
|
|
**Inhoud:**
|
|
**14:00 - 14:50**
|
|
→ Welkom & kennismaking
|
|
→ Theorie: Wat is AI en LLMs
|
|
→ AI Landscape: de grote spelers
|
|
|
|
**14:50 - 15:15**
|
|
→ _Praktijk:_ ChatGPT leren gebruiken
|
|
|
|
**15:15 - 15:30**
|
|
→ Prompt Engineering basics
|
|
|
|
**15:30 - 16:00**
|
|
→ _Demo:_ Van schets naar website met v0.dev
|
|
|
|
**16:00 - 16:50**
|
|
→ _Lesopdracht:_ Jouw tekening wordt een website
|
|
|
|
**16:50 - 17:00**
|
|
→ Afsluiting & Huiswerk
|
|
|
|
---
|
|
|
|
### Slide 3: Lesoverzicht
|
|
|
|
**Titel:** Wat gaan we vandaag doen?
|
|
|
|
**Inhoud:**
|
|
|
|
- Kennismaking met elkaar en de leerlijn
|
|
- Wat is AI en hoe werken LLMs?
|
|
- Het AI-landschap: ChatGPT, Claude, Gemini
|
|
- **Hands-on: ChatGPT leren gebruiken**
|
|
- Prompt engineering: de juiste vraag stellen
|
|
- Live demo: van schets naar werkende website
|
|
- Zelf aan de slag: **jouw tekening wordt een website!**
|
|
|
|
**Leerdoel:** Na deze les kun je een schets omzetten naar een gedeployde website met AI.
|
|
|
|
---
|
|
|
|
### Slide 4: Kennismaking
|
|
|
|
**Titel:** Wie zijn jullie?
|
|
|
|
**Inhoud:**
|
|
|
|
- Naam
|
|
- Achtergrond (werk/studie)
|
|
- Ervaring met AI tools (ChatGPT, Claude, etc.)
|
|
- Wat hoop je te leren in deze leerlijn?
|
|
|
|
---
|
|
|
|
### Slide 5: De Leerlijn AI Developer
|
|
|
|
**Titel:** Wat gaan we 18 weken lang doen?
|
|
|
|
**Inhoud:**
|
|
|
|
- **Hoofdstuk 1 (Les 1-3):** AI Fundamentals - basis begrip en ethiek
|
|
- **Hoofdstuk 2 (Les 4-9):** AI Driven Development - tools en workflows
|
|
- **Hoofdstuk 3 (Les 10-18):** Full-Stack met AI - productie-klare apps bouwen
|
|
|
|
**Eindresultaat:** Je bouwt een complete full-stack applicatie met AI assistance
|
|
|
|
---
|
|
|
|
## DEEL 2: WAT IS AI? (20 minuten)
|
|
|
|
### Slide 6: Wat is Artificial Intelligence?
|
|
|
|
**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 7: Hoe werken Large Language Models?
|
|
|
|
**Titel:** De magie achter ChatGPT en Claude
|
|
|
|
**Inhoud:**
|
|
|
|
1. **Training:** Model leest miljarden teksten (boeken, websites, code)
|
|
2. **Patroonherkenning:** Leert statistische verbanden tussen woorden
|
|
3. **Voorspelling:** Voorspelt steeds het volgende woord dat "logisch" volgt
|
|
4. **Output:** Genereert tekst token voor token
|
|
|
|
**Belangrijk:**
|
|
|
|
- LLMs "begrijpen" niet echt - ze voorspellen
|
|
- Ze kunnen overtuigend klinken maar fout zijn ("hallucinaties")
|
|
- Altijd output checken!
|
|
|
|
---
|
|
|
|
### Slide 8: Next-Token Prediction
|
|
|
|
**Titel:** Hoe "denkt" een LLM?
|
|
|
|
**Inhoud:**
|
|
**Voorbeeld:** "De kat zat op de \_\_\_"
|
|
|
|
Het model berekent kansen:
|
|
|
|
- "mat" → 65%
|
|
- "stoel" → 15%
|
|
- "bank" → 10%
|
|
- "auto" → 2%
|
|
|
|
→ Kiest waarschijnlijk "mat" (maar niet altijd!)
|
|
|
|
**Dit verklaart:**
|
|
|
|
- Waarom het soms briljant is
|
|
- Waarom het soms onzin produceert
|
|
- Waarom dezelfde vraag verschillende antwoorden geeft
|
|
|
|
---
|
|
|
|
### Slide 9: Hallucinaties
|
|
|
|
**Titel:** Waarom AI soms "liegt"
|
|
|
|
**Inhoud:**
|
|
**Wat zijn hallucinaties?**
|
|
|
|
- AI verzint informatie die niet bestaat
|
|
- Klinkt heel overtuigend
|
|
- Bronnen, namen, feiten kunnen compleet verzonnen zijn
|
|
|
|
**Voorbeelden:**
|
|
|
|
- Fake wetenschappelijke papers met echte-klinkende titels
|
|
- Niet-bestaande wetten of regels
|
|
- Verzonnen statistieken
|
|
|
|
**Regel:** Verifieer altijd belangrijke informatie!
|
|
|
|
---
|
|
|
|
## DEEL 3: HET AI-LANDSCHAP (15 minuten)
|
|
|
|
### Slide 10: De Grote Spelers
|
|
|
|
**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 focussen we op ChatGPT** - de meest gebruikte tool.
|
|
|
|
---
|
|
|
|
### Slide 11: Gratis vs Betaald
|
|
|
|
**Titel:** Heb je de betaalde versie nodig?
|
|
|
|
**Inhoud:**
|
|
| | Gratis | Betaald ($20/maand) |
|
|
|---|--------|---------------------|
|
|
| **Model** | GPT-4o (goed!) | GPT-4 (beste) |
|
|
| **Snelheid** | Langzamer bij drukte | Prioriteit |
|
|
| **Limieten** | ~10-15 berichten/3u | 40+ berichten/3u |
|
|
| **Features** | Basis | DALL-E, Canvas, meer |
|
|
|
|
**Voor deze cursus:** Gratis is voldoende!
|
|
|
|
---
|
|
|
|
### Slide 12: Welke tool voor welke taak?
|
|
|
|
**Titel:** Snelle vergelijking
|
|
|
|
**Inhoud:**
|
|
| Taak | Beste keuze |
|
|
|------|-------------|
|
|
| Snelle code snippets | ChatGPT of Claude |
|
|
| Lange documenten analyseren | Claude (200K context) |
|
|
| Actueel nieuws | Grok |
|
|
| Google Docs integratie | Gemini |
|
|
| UI componenten genereren | v0.dev (straks!) |
|
|
|
|
**Tip:** Professionele developers gebruiken meerdere tools!
|
|
|
|
---
|
|
|
|
## DEEL 4: CHATGPT IN DE PRAKTIJK (25 minuten)
|
|
|
|
### Slide 13: ChatGPT Interface
|
|
|
|
**Titel:** Laten we ChatGPT openen
|
|
|
|
**Inhoud:**
|
|
_[Live demonstratie - open chat.openai.com]_
|
|
|
|
**Wat je ziet:**
|
|
|
|
- Chatvenster (midden)
|
|
- Nieuwe chat starten (linksboven)
|
|
- Chat geschiedenis (links)
|
|
- Model kiezen (bovenaan)
|
|
- Instellingen (rechtsonder)
|
|
|
|
**Actie:** Open nu ChatGPT op je laptop!
|
|
|
|
---
|
|
|
|
### Slide 14: Model Kiezen
|
|
|
|
**Titel:** Welk model gebruik je?
|
|
|
|
**Inhoud:**
|
|
**In ChatGPT kun je kiezen:**
|
|
|
|
- **GPT-4o** - Standaard, snel, gratis
|
|
- **GPT-4o with canvas** - Voor documenten bewerken
|
|
- **GPT-4** - Meest krachtig (betaald)
|
|
|
|
**Tip:** GPT-4o is voor de meeste taken prima!
|
|
|
|
_[Demonstreer model selector]_
|
|
|
|
---
|
|
|
|
### Slide 15: Tijdelijke Chat
|
|
|
|
**Titel:** Privacy: Tijdelijke Chat
|
|
|
|
**Inhoud:**
|
|
**Wat is tijdelijke chat?**
|
|
|
|
- Chat wordt NIET opgeslagen in je geschiedenis
|
|
- Wordt NIET gebruikt om model te trainen
|
|
- Verdwijnt na sluiten
|
|
|
|
**Wanneer gebruiken?**
|
|
|
|
- Gevoelige informatie
|
|
- Werk-gerelateerde data
|
|
- Als je niet wilt dat het wordt onthouden
|
|
|
|
_[Demonstreer: klik op naam → Temporary Chat]_
|
|
|
|
---
|
|
|
|
### Slide 16: Afbeeldingen Analyseren
|
|
|
|
**Titel:** Image-to-Text in ChatGPT
|
|
|
|
**Inhoud:**
|
|
**Wat kun je doen?**
|
|
|
|
- Foto uploaden en vragen stellen
|
|
- Screenshot laten analyseren
|
|
- **Schets laten interpreteren** ← Dit gebruiken we straks!
|
|
- Tekst uit afbeelding halen (OCR)
|
|
|
|
**Voorbeeld use cases:**
|
|
|
|
- "Beschrijf deze wireframe in detail"
|
|
- "Maak van deze schets een gedetailleerde prompt"
|
|
- "Zet deze tekening om naar specificaties"
|
|
|
|
_[Demonstreer met een schets/foto]_
|
|
|
|
---
|
|
|
|
### Slide 17: Bestanden Uploaden
|
|
|
|
**Titel:** PDF's en documenten lezen
|
|
|
|
**Inhoud:**
|
|
**ChatGPT kan:**
|
|
|
|
- PDF's lezen en samenvatten
|
|
- Word documenten analyseren
|
|
- Code bestanden reviewen
|
|
- Spreadsheets interpreteren
|
|
|
|
**Hoe?**
|
|
|
|
- Klik op 📎 (paperclip) icoon
|
|
- Sleep bestand in het chatvenster
|
|
- Of copy-paste tekst
|
|
|
|
_[Demonstreer met een kort PDF]_
|
|
|
|
---
|
|
|
|
### Slide 18: Custom Instructions
|
|
|
|
**Titel:** ChatGPT Personaliseren
|
|
|
|
**Inhoud:**
|
|
**Wat zijn Custom Instructions?**
|
|
|
|
- Permanente instructies die ChatGPT onthoudt
|
|
- Hoef je niet elke chat te herhalen
|
|
- 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"
|
|
|
|
_[Demonstreer waar dit staat]_
|
|
|
|
---
|
|
|
|
### Slide 19: Het Geheugen van ChatGPT
|
|
|
|
**Titel:** Wat onthoudt ChatGPT?
|
|
|
|
**Inhoud:**
|
|
**ChatGPT onthoudt:**
|
|
|
|
- Eerdere chats (tenzij tijdelijk)
|
|
- Custom instructions
|
|
- Dingen die je expliciet vraagt te onthouden
|
|
|
|
**ChatGPT onthoudt NIET:**
|
|
|
|
- Automatisch alles uit vorige chats
|
|
- Context na lange tijd
|
|
- Wat je in andere sessies zei
|
|
|
|
**Tip:** Start nieuwe chat voor nieuw onderwerp!
|
|
|
|
---
|
|
|
|
### Slide 20: Praktijk Oefening
|
|
|
|
**Titel:** Probeer het zelf! (5 minuten)
|
|
|
|
**Inhoud:**
|
|
**Opdracht:**
|
|
|
|
1. Open ChatGPT (chat.openai.com)
|
|
2. Start een nieuwe chat
|
|
3. Stel een vraag over een programmeerconcept
|
|
4. Upload een afbeelding en vraag wat erop staat
|
|
|
|
**Bonus:** Bekijk je Custom Instructions
|
|
|
|
_[Geef 5 minuten om te experimenteren]_
|
|
|
|
---
|
|
|
|
## DEEL 5: PROMPT ENGINEERING (15 minuten)
|
|
|
|
### Slide 21: Wat is Prompt Engineering?
|
|
|
|
**Titel:** De kunst van het vragen stellen
|
|
|
|
**Inhoud:**
|
|
**Een prompt is:** De instructie die je aan AI geeft
|
|
|
|
**Waarom belangrijk?**
|
|
|
|
- Zelfde vraag, andere formulering = totaal andere output
|
|
- Goede prompt = bruikbaar resultaat
|
|
- Slechte prompt = frustratie
|
|
|
|
**Prompt engineering = leren hoe je effectief vraagt**
|
|
|
|
---
|
|
|
|
### Slide 22: Slechte vs Goede Prompt
|
|
|
|
**Titel:** Het verschil zien
|
|
|
|
**Slechte prompt:**
|
|
|
|
> "Maak een button"
|
|
|
|
**Goede prompt:**
|
|
|
|
> "Maak een React button component met Tailwind CSS. De button moet primary styling hebben (blauw), een hover state, en een loading state met een spinner. TypeScript graag."
|
|
|
|
**Waarom beter?**
|
|
|
|
- Specificeert technologie
|
|
- Beschrijft gewenste features
|
|
- Geeft context
|
|
|
|
---
|
|
|
|
### Slide 23: Prompt Framework
|
|
|
|
**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, voeg comments toe"
|
|
|
|
**Voorbeeld gecombineerd:**
|
|
|
|
> "Je bent een senior frontend developer. Maak een hero section voor een SaaS website. Gebruik React met Tailwind CSS. Voeg comments toe die uitleggen wat de code doet."
|
|
|
|
---
|
|
|
|
### Slide 24: Tech Stack Specificeren
|
|
|
|
**Titel:** Vertel de AI welke technologie je wilt
|
|
|
|
**Inhoud:**
|
|
**Wat is een tech stack?**
|
|
De technologieën waarmee je bouwt.
|
|
|
|
**Voor deze cursus gebruiken we:**
|
|
|
|
- **React** - JavaScript framework voor UI
|
|
- **Tailwind CSS** - Utility-first CSS framework
|
|
- **TypeScript** (optioneel) - Getypeerd JavaScript
|
|
|
|
**In je prompt:**
|
|
|
|
> "Gebruik React met Tailwind CSS voor styling. Maak het responsive met mobile-first design."
|
|
|
|
**Tip:** v0.dev genereert automatisch React + Tailwind!
|
|
|
|
---
|
|
|
|
### Slide 25: Kleuren en Look & Feel
|
|
|
|
**Titel:** Visuele specificaties in je prompt
|
|
|
|
**Inhoud:**
|
|
**Wat kun je specificeren?**
|
|
|
|
- **Kleuren:** "#2563EB voor primary, #1E40AF voor secondary"
|
|
- **Stijl:** "Modern, minimalistisch, professioneel"
|
|
- **Sfeer:** "Vriendelijk en toegankelijk" of "Corporate en serieus"
|
|
- **Referenties:** "In de stijl van Stripe.com"
|
|
|
|
**Voorbeeld:**
|
|
|
|
> "Gebruik een blauw kleurenschema met primary #2563EB. De stijl moet modern en minimalistisch zijn, geschikt voor een B2B SaaS startup."
|
|
|
|
---
|
|
|
|
### Slide 26: Prompting Tips
|
|
|
|
**Titel:** Praktische tips
|
|
|
|
**Inhoud:**
|
|
|
|
1. **Geef een rol:** "Je bent een expert in..."
|
|
2. **Wees specifiek:** Niet "maak iets moois" maar "maak een hero met gradient"
|
|
3. **Specificeer tech stack:** "React, Tailwind, TypeScript"
|
|
4. **Beschrijf look & feel:** Kleuren, stijl, sfeer
|
|
5. **Geef voorbeelden:** "Zoals de website van Stripe"
|
|
6. **Itereer:** Eerste poging is zelden perfect
|
|
|
|
**Onthoud:** Garbage in = garbage out!
|
|
|
|
---
|
|
|
|
## DEEL 6: LIVE DEMO V0.DEV (27 minuten)
|
|
|
|
### Slide 27: Introductie v0.dev
|
|
|
|
**Titel:** Van schets naar werkende website
|
|
|
|
**Inhoud:**
|
|
**v0.dev door Vercel:**
|
|
|
|
- AI-powered UI generator
|
|
- Begrijpt tekst EN afbeeldingen
|
|
- Genereert React + Tailwind code
|
|
- Direct deploybaar naar internet
|
|
|
|
**Vandaag leer je de workflow:**
|
|
Tekening op papier → Foto → ChatGPT → Prompt → v0.dev → Website!
|
|
|
|
---
|
|
|
|
### Slide 28: De Slimme Workflow
|
|
|
|
**Titel:** Van schets naar site in 5 stappen
|
|
|
|
**Inhoud:**
|
|
|
|
```
|
|
1. TEKEN je idee op papier
|
|
↓
|
|
2. Maak een FOTO van je tekening
|
|
↓
|
|
3. Upload naar CHATGPT + beschrijf je wensen
|
|
(kleuren, stijl, tech stack)
|
|
↓
|
|
4. ChatGPT maakt een gedetailleerde PROMPT
|
|
↓
|
|
5. Plak die prompt in V0.DEV → Website!
|
|
```
|
|
|
|
**Waarom eerst ChatGPT?**
|
|
|
|
- v0 heeft beperkte gratis credits (~7/dag)
|
|
- ChatGPT is "gratis" voor prompt optimalisatie
|
|
- Je tekening + beschrijving = perfecte prompt!
|
|
|
|
---
|
|
|
|
### Slide 29: Live Demo - Schets Maken
|
|
|
|
**Titel:** Stap 1: Tekenen
|
|
|
|
**Inhoud:**
|
|
_[Docent tekent live op papier]_
|
|
|
|
**Ik teken een hero section:**
|
|
|
|
- Links: titel + tekst + button
|
|
- Rechts: placeholder voor afbeelding
|
|
- Simpele lijnen, geen kunstwerk nodig!
|
|
|
|
**Belangrijke elementen:**
|
|
|
|
- Layout (waar staat wat?)
|
|
- Tekst indicaties
|
|
- Knoppen
|
|
- Afbeelding placeholders
|
|
|
|
---
|
|
|
|
### Slide 30: Live Demo - Foto naar ChatGPT
|
|
|
|
**Titel:** Stap 2 & 3: Foto + Beschrijving
|
|
|
|
**Inhoud:**
|
|
_[Docent maakt foto en upload naar ChatGPT]_
|
|
|
|
**Mijn prompt aan ChatGPT:**
|
|
|
|
> "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: Blauw thema met primary #2563EB
|
|
> Stijl: Modern, minimalistisch, professioneel
|
|
> Doel: SaaS landingspagina voor projectmanagement tool"
|
|
|
|
_[Toon ChatGPT response]_
|
|
|
|
---
|
|
|
|
### Slide 31: Live Demo - Prompt naar v0
|
|
|
|
**Titel:** Stap 4 & 5: v0.dev
|
|
|
|
**Inhoud:**
|
|
_[Docent kopieert prompt naar v0.dev]_
|
|
|
|
**Let op:**
|
|
|
|
- Generatie duurt ~30 seconden
|
|
- Je krijgt direct een preview
|
|
- Code is React + Tailwind
|
|
- Precies wat je tekende!
|
|
|
|
_[Toon resultaat]_
|
|
|
|
---
|
|
|
|
### Slide 32: Live Demo - Itereren
|
|
|
|
**Titel:** Verfijnen in v0
|
|
|
|
**Inhoud:**
|
|
_[Docent itereert op het resultaat]_
|
|
|
|
**Follow-up prompts:**
|
|
|
|
- "Make the button larger with a hover animation"
|
|
- "Add a floating image placeholder on the right"
|
|
- "Change the gradient to be more subtle"
|
|
|
|
**Dit is de kracht:** In gesprek gaan met de AI!
|
|
|
|
---
|
|
|
|
### Slide 33: Live Demo - Deployen
|
|
|
|
**Titel:** Live zetten
|
|
|
|
**Inhoud:**
|
|
**Deployment in 4 stappen:**
|
|
|
|
1. Klik "Add Integration" (linkerzijbalk)
|
|
2. Koppel je GitHub account
|
|
3. v0 maakt automatisch een repository
|
|
4. Klik "Deploy" → Live op Vercel!
|
|
|
|
**Resultaat:**
|
|
|
|
- URL: `jouw-project.vercel.app`
|
|
- Code staat in GitHub
|
|
- Elke update → automatisch opnieuw gedeployd
|
|
|
|
---
|
|
|
|
## DEEL 7: HANDS-ON OPDRACHT (55 minuten)
|
|
|
|
### Slide 34: Lesopdracht
|
|
|
|
**Titel:** Nu zijn jullie aan de beurt!
|
|
|
|
**Inhoud:**
|
|
**Opdracht:** Jouw tekening wordt een website!
|
|
|
|
**Stappen:**
|
|
|
|
1. **TEKEN** een hero section op papier
|
|
2. **FOTO** maken van je tekening
|
|
3. **CHATGPT:** Upload foto + beschrijf je wensen
|
|
4. **PROMPT:** Kopieer de gegenereerde prompt
|
|
5. **V0.DEV:** Plak prompt en genereer
|
|
6. **DEPLOY:** Publiceer naar Vercel
|
|
|
|
**Tijd:** ~55 minuten
|
|
**Benodigdheden:** Papier, pen, ChatGPT account, GitHub account
|
|
|
|
---
|
|
|
|
### Slide 35: Opdracht Details
|
|
|
|
**Titel:** Wat moet je specificeren?
|
|
|
|
**Inhoud:**
|
|
**In je ChatGPT prompt, beschrijf:**
|
|
|
|
1. **Je schets:** "Dit is een hero section met..."
|
|
2. **Tech stack:** "Gebruik React met Tailwind CSS"
|
|
3. **Kleuren:** "Primary kleur #2563EB" of "Blauw thema"
|
|
4. **Stijl:** "Modern, minimalistisch" of "Speels en kleurrijk"
|
|
5. **Doel:** "Voor een SaaS/portfolio/webshop"
|
|
|
|
**Vraag ChatGPT:**
|
|
|
|
> "Maak van deze schets en beschrijving een gedetailleerde prompt voor v0.dev"
|
|
|
|
---
|
|
|
|
### Slide 36: Tips voor de Opdracht
|
|
|
|
**Titel:** Succesvol aan de slag
|
|
|
|
**Inhoud:**
|
|
|
|
- **Teken simpel:** Blokken en lijnen zijn genoeg
|
|
- **Wees specifiek in ChatGPT:** Hoe meer detail, hoe beter de prompt
|
|
- **v0 credits:** ~7 per dag, dus optimaliseer prompt eerst!
|
|
- **GitHub vereist:** Maak account aan als je die niet hebt
|
|
|
|
**Deployment in 3 klikken:**
|
|
|
|
1. "Add Integration" → koppel GitHub
|
|
2. v0 maakt automatisch repo aan
|
|
3. "Deploy" → live!
|
|
|
|
---
|
|
|
|
### Slide 37: Hulpmiddelen
|
|
|
|
**Titel:** Links en resources
|
|
|
|
**Inhoud:**
|
|
|
|
- **ChatGPT:** chat.openai.com
|
|
- **v0.dev:** v0.dev
|
|
- **GitHub:** github.com
|
|
|
|
**Hulp nodig?**
|
|
|
|
- Vraag je buurman/buurvrouw
|
|
- Steek je hand op
|
|
- AI mag ook helpen!
|
|
|
|
---
|
|
|
|
## DEEL 8: AFSLUITING (10 minuten)
|
|
|
|
### Slide 38: Samenvatting
|
|
|
|
**Titel:** Wat hebben we geleerd?
|
|
|
|
**Inhoud:**
|
|
✅ Hoe LLMs werken (next-token prediction)
|
|
✅ AI-landschap: ChatGPT, Claude, Gemini, Grok
|
|
✅ ChatGPT praktisch gebruiken
|
|
✅ Prompt engineering: rol, context, tech stack, kleuren
|
|
✅ **De workflow: Schets → ChatGPT → v0.dev → Website!**
|
|
|
|
---
|
|
|
|
### Slide 39: Huiswerk
|
|
|
|
**Titel:** Voor volgende week
|
|
|
|
**Inhoud:**
|
|
**Opdracht (2 uur):**
|
|
|
|
1. Schrijf reflectie (500 woorden) over je eerste AI-ervaring
|
|
2. Bedenk 5 concrete use cases voor AI in jouw werk
|
|
3. **Maak een tweede schets** voor een andere pagina/component
|
|
4. Doorloop de workflow opnieuw (schets → ChatGPT → v0 → deploy)
|
|
5. Documenteer resultaten met screenshots
|
|
|
|
**Inleveren:** Via Teams chat
|
|
|
|
---
|
|
|
|
### Slide 40: Volgende Les
|
|
|
|
**Titel:** Les 2: Prompt Engineering Verdieping
|
|
|
|
**Inhoud:**
|
|
**Wat komt:**
|
|
|
|
- Geavanceerde prompt technieken
|
|
- Chain of thought prompting
|
|
- Few-shot learning
|
|
- Custom GPTs verkennen
|
|
|
|
**Voorbereiding:**
|
|
|
|
- Huiswerk af
|
|
- ChatGPT account werkt
|
|
|
|
---
|
|
|
|
### Slide 41: Bedankt!
|
|
|
|
**Titel:** Tot volgende week!
|
|
|
|
**Inhoud:**
|
|
🚀 Succes met het huiswerk!
|
|
|
|
_"The best way to predict the future is to create it."_
|
|
— Alan Kay
|
|
|
|
---
|
|
|
|
## Totaal: 41 slides
|
|
|
|
## Geschatte tijd presentatie: ~70 minuten
|
|
|
|
## ChatGPT praktijk: ~25 minuten
|
|
|
|
## Demo v0.dev: ~27 minuten
|
|
|
|
## Hands-on tijd: ~55 minuten
|