fix: add lesson files
This commit is contained in:
Tim Rijkse
248
Les01-Introductie-AI/Les01-Bijlage-A-Lesopdracht.md
Normal file
248
Les01-Introductie-AI/Les01-Bijlage-A-Lesopdracht.md
Normal file
@@ -0,0 +1,248 @@
|
|||||||
|
# Bijlage A: Lesopdracht Les 1
|
||||||
|
|
||||||
|
## Van Schets naar Website met AI
|
||||||
|
|
||||||
|
**Cursus:** AI Fundamentals
|
||||||
|
**Les:** 1 - Introductie AI & Large Language Models
|
||||||
|
**Duur:** ~55 minuten
|
||||||
|
**Werkvorm:** Individueel
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Leerdoelen
|
||||||
|
|
||||||
|
Na deze opdracht kun je:
|
||||||
|
- Een idee visualiseren door te tekenen
|
||||||
|
- ChatGPT gebruiken om een schets om te zetten naar een gedetailleerde prompt
|
||||||
|
- Tech stack, kleuren en stijl specificeren in je prompt
|
||||||
|
- v0.dev gebruiken om UI-componenten te genereren
|
||||||
|
- Een project deployen naar Vercel
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Wat ga je maken?
|
||||||
|
|
||||||
|
Je gaat een **hero section** bouwen voor een fictieve website. Het bijzondere? **Je begint met een tekening op papier!**
|
||||||
|
|
||||||
|
Je tekening wordt, via ChatGPT en v0.dev, een echte, werkende website die online staat.
|
||||||
|
|
||||||
|
**Vereiste elementen in je hero section:**
|
||||||
|
- Headline (kop)
|
||||||
|
- Subtext (ondertitel/beschrijving)
|
||||||
|
- Call-to-action button
|
||||||
|
- Visueel element (afbeelding placeholder of illustratie)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## De Workflow
|
||||||
|
|
||||||
|
```
|
||||||
|
1. TEKEN je idee op papier
|
||||||
|
↓
|
||||||
|
2. Maak een FOTO van je tekening
|
||||||
|
↓
|
||||||
|
3. Upload naar CHATGPT + beschrijf je wensen
|
||||||
|
↓
|
||||||
|
4. ChatGPT maakt een gedetailleerde PROMPT
|
||||||
|
↓
|
||||||
|
5. Plak die prompt in V0.DEV → Website!
|
||||||
|
↓
|
||||||
|
6. DEPLOY naar Vercel
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Stappenplan
|
||||||
|
|
||||||
|
### Stap 1: Tekenen (10 min)
|
||||||
|
|
||||||
|
Pak pen en papier en teken je hero section. Je hoeft geen kunstenaar te zijn!
|
||||||
|
|
||||||
|
**Teken:**
|
||||||
|
- De layout (waar staat wat?)
|
||||||
|
- Tekst indicaties (schrijf "HEADLINE" of de echte tekst)
|
||||||
|
- Buttons
|
||||||
|
- Afbeelding placeholders (vierkant met X erdoor)
|
||||||
|
|
||||||
|
**Tips:**
|
||||||
|
- Simpele blokken en lijnen zijn genoeg
|
||||||
|
- Geef aan wat links en rechts staat
|
||||||
|
- Schrijf bij elementen wat ze zijn
|
||||||
|
|
||||||
|
### Stap 2: Foto maken (2 min)
|
||||||
|
|
||||||
|
Maak een duidelijke foto van je tekening met je telefoon.
|
||||||
|
- Zorg voor goede belichting
|
||||||
|
- Houd de camera recht boven de tekening
|
||||||
|
- Check of alles leesbaar is
|
||||||
|
|
||||||
|
### Stap 3: ChatGPT - Schets + Beschrijving (15 min)
|
||||||
|
|
||||||
|
Open ChatGPT en upload je foto. Voeg een gedetailleerde beschrijving toe.
|
||||||
|
|
||||||
|
**Gebruik dit template:**
|
||||||
|
|
||||||
|
```
|
||||||
|
Dit is een schets voor een hero section van mijn website.
|
||||||
|
|
||||||
|
Beschrijf deze schets als een gedetailleerde prompt voor v0.dev.
|
||||||
|
|
||||||
|
**Context:**
|
||||||
|
- Type website: [SaaS / Portfolio / Webshop / Blog / etc.]
|
||||||
|
- Naam/bedrijf: [Verzin een naam, bijv. "TaskFlow"]
|
||||||
|
- Doelgroep: [Bijv. startups, developers, consumenten]
|
||||||
|
|
||||||
|
**Tech stack:**
|
||||||
|
- Gebruik React met Tailwind CSS
|
||||||
|
- Maak het responsive (mobile-first)
|
||||||
|
|
||||||
|
**Kleuren:**
|
||||||
|
- Primary: [bijv. #2563EB (blauw) of beschrijf: "warm oranje"]
|
||||||
|
- Secondary: [optioneel]
|
||||||
|
- Of: [beschrijf het thema: "donker met neon accenten"]
|
||||||
|
|
||||||
|
**Stijl/Look & Feel:**
|
||||||
|
- [Kies: Modern / Minimalistisch / Speels / Corporate / Retro / etc.]
|
||||||
|
- [Extra: "Met subtiele animaties" of "Clean en zakelijk"]
|
||||||
|
|
||||||
|
Genereer een gedetailleerde Engelse prompt die ik direct kan gebruiken in v0.dev.
|
||||||
|
```
|
||||||
|
|
||||||
|
**Voorbeeld ingevuld:**
|
||||||
|
|
||||||
|
```
|
||||||
|
Dit is een schets voor een hero section van mijn website.
|
||||||
|
|
||||||
|
Beschrijf deze schets als een gedetailleerde prompt voor v0.dev.
|
||||||
|
|
||||||
|
**Context:**
|
||||||
|
- Type website: SaaS landingspagina
|
||||||
|
- Naam/bedrijf: TaskFlow
|
||||||
|
- Doelgroep: Startups en kleine bedrijven
|
||||||
|
|
||||||
|
**Tech stack:**
|
||||||
|
- Gebruik React met Tailwind CSS
|
||||||
|
- Maak het responsive (mobile-first)
|
||||||
|
|
||||||
|
**Kleuren:**
|
||||||
|
- Primary: #2563EB (blauw)
|
||||||
|
- Secondary: #1E40AF (donkerder blauw)
|
||||||
|
|
||||||
|
**Stijl/Look & Feel:**
|
||||||
|
- Modern en minimalistisch
|
||||||
|
- Professioneel maar toegankelijk
|
||||||
|
- Subtiele hover animaties op buttons
|
||||||
|
|
||||||
|
Genereer een gedetailleerde Engelse prompt die ik direct kan gebruiken in v0.dev.
|
||||||
|
```
|
||||||
|
|
||||||
|
### Stap 4: Prompt kopiëren (1 min)
|
||||||
|
|
||||||
|
ChatGPT genereert een gedetailleerde prompt. Kopieer deze volledig.
|
||||||
|
|
||||||
|
**Let op:** De prompt is in het Engels - v0.dev werkt het beste met Engelse prompts.
|
||||||
|
|
||||||
|
### Stap 5: v0.dev - Genereren (15 min)
|
||||||
|
|
||||||
|
1. Ga naar [v0.dev](https://v0.dev)
|
||||||
|
2. Log in met je Vercel/GitHub account
|
||||||
|
3. Plak de prompt van ChatGPT
|
||||||
|
4. Klik op genereren
|
||||||
|
5. Bekijk het resultaat
|
||||||
|
|
||||||
|
**Itereren:**
|
||||||
|
Als het resultaat niet perfect is, kun je verfijnen:
|
||||||
|
- "Make the button larger"
|
||||||
|
- "Add more padding"
|
||||||
|
- "Change the headline font to be bolder"
|
||||||
|
- "Add a subtle gradient background"
|
||||||
|
|
||||||
|
**Let op:** Je hebt ~7 gratis generaties per dag. Gebruik ze slim!
|
||||||
|
|
||||||
|
### Stap 6: Deploy naar Vercel (10 min)
|
||||||
|
|
||||||
|
**Vereist:** GitHub account (maak gratis aan op github.com als je die nog niet hebt)
|
||||||
|
|
||||||
|
**Deployment in 4 stappen:**
|
||||||
|
1. Klik op "Add Integration" in de linkerzijbalk van v0.dev
|
||||||
|
2. Koppel je GitHub account (eenmalig)
|
||||||
|
3. v0 maakt automatisch een repository aan in je GitHub
|
||||||
|
4. Klik op "Deploy" of "Publish"
|
||||||
|
|
||||||
|
**Resultaat:**
|
||||||
|
- Je krijgt een live URL: `jouw-project.vercel.app`
|
||||||
|
- Je code staat nu ook in GitHub
|
||||||
|
- Elke update in v0 → automatisch opnieuw gedeployd
|
||||||
|
|
||||||
|
**Problemen?**
|
||||||
|
- Geen GitHub account? Maak er nu een aan op github.com
|
||||||
|
- v0 vraagt niet om GitHub? Check of je bent ingelogd in v0.dev
|
||||||
|
- Deployment mislukt? Vraag de docent om hulp
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Op te leveren
|
||||||
|
|
||||||
|
Aan het einde van de les heb je:
|
||||||
|
|
||||||
|
1. **Je originele tekening:**
|
||||||
|
- Foto van je papieren schets
|
||||||
|
|
||||||
|
2. **ChatGPT conversatie:**
|
||||||
|
- Screenshot van je prompt + de gegenereerde output
|
||||||
|
- Noteer welke specificaties je meegaf (tech stack, kleuren, stijl)
|
||||||
|
|
||||||
|
3. **v0.dev project:**
|
||||||
|
- Screenshot van je gegenereerde hero section
|
||||||
|
- Eventuele iteratie-prompts die je gebruikte
|
||||||
|
|
||||||
|
4. **Live deployment:**
|
||||||
|
- Vercel URL van je gedeployde hero section
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Specificaties Checklist
|
||||||
|
|
||||||
|
Zorg dat je in je ChatGPT prompt het volgende hebt gespecificeerd:
|
||||||
|
|
||||||
|
| Element | Voorbeeld |
|
||||||
|
|---------|-----------|
|
||||||
|
| ✅ Tech stack | "React met Tailwind CSS" |
|
||||||
|
| ✅ Kleuren | "#2563EB" of "warm oranje thema" |
|
||||||
|
| ✅ Stijl | "Modern, minimalistisch" |
|
||||||
|
| ✅ Type website | "SaaS landingspagina" |
|
||||||
|
| ✅ Responsive | "Mobile-first design" |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Beoordeling
|
||||||
|
|
||||||
|
Deze opdracht wordt niet formeel beoordeeld, maar is essentiële oefening voor de rest van de cursus.
|
||||||
|
|
||||||
|
**Waar let de docent op:**
|
||||||
|
- Heb je alle stappen doorlopen?
|
||||||
|
- Heb je je specificaties duidelijk gecommuniceerd?
|
||||||
|
- Lijkt het eindresultaat op je originele schets?
|
||||||
|
- Kun je uitleggen hoe de workflow werkt?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Hulp nodig?
|
||||||
|
|
||||||
|
- Vraag je buurman/buurvrouw
|
||||||
|
- Steek je hand op voor de docent
|
||||||
|
- Check de officiële documentatie: [v0.dev/docs](https://v0.dev/docs)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Bonus: Extra uitdaging
|
||||||
|
|
||||||
|
Klaar en tijd over? Probeer:
|
||||||
|
|
||||||
|
1. **Tweede component:** Maak een pricing table of features section
|
||||||
|
2. **Andere stijl:** Genereer dezelfde schets met een compleet andere look & feel
|
||||||
|
3. **Iteratie experiment:** Kijk hoeveel je kunt veranderen met follow-up prompts in v0
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*Succes en veel plezier met je eerste AI-gegenereerde website!*
|
||||||
193
Les01-Introductie-AI/Les01-Bijlage-B-Huiswerkopdracht.md
Normal file
193
Les01-Introductie-AI/Les01-Bijlage-B-Huiswerkopdracht.md
Normal file
@@ -0,0 +1,193 @@
|
|||||||
|
# Bijlage B: Huiswerkopdracht Les 1
|
||||||
|
|
||||||
|
## Reflectie, Use Cases en Tweede Schets
|
||||||
|
|
||||||
|
**Cursus:** AI Fundamentals
|
||||||
|
**Les:** 1 - Introductie AI & Large Language Models
|
||||||
|
**Geschatte tijd:** ~2-3 uur
|
||||||
|
**Deadline:** Voor aanvang les 2
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Inleiding
|
||||||
|
|
||||||
|
In de les heb je kennisgemaakt met AI en Large Language Models. Je hebt de workflow geleerd: van een tekening op papier, via ChatGPT, naar een werkende website in v0.dev. Met deze huiswerkopdracht ga je dieper nadenken over wat je hebt geleerd en pas je de workflow nog een keer toe.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Deel 1: Reflectie (500 woorden)
|
||||||
|
|
||||||
|
Schrijf een reflectie over je eerste ervaringen met AI-tools voor development.
|
||||||
|
|
||||||
|
**Structuur:**
|
||||||
|
|
||||||
|
### Wat heb ik geleerd?
|
||||||
|
Beschrijf de belangrijkste inzichten uit de les. Denk aan:
|
||||||
|
- Wat wist je al over AI voordat je begon?
|
||||||
|
- Wat was nieuw of verrassend?
|
||||||
|
- Hoe kijk je nu anders naar AI dan voor de les?
|
||||||
|
|
||||||
|
### Mijn ervaring met de workflow
|
||||||
|
Reflecteer op de schets-naar-website workflow:
|
||||||
|
- Hoe voelde het om te beginnen met tekenen?
|
||||||
|
- Werkte ChatGPT goed als "vertaler" van je schets naar prompt?
|
||||||
|
- Hoe was het resultaat in v0.dev vergeleken met je verwachting?
|
||||||
|
- Wat zou je volgende keer anders doen?
|
||||||
|
|
||||||
|
### Kritische kanttekeningen
|
||||||
|
Wees kritisch:
|
||||||
|
- Wat zijn mogelijke risico's of beperkingen die je ziet?
|
||||||
|
- Wanneer zou je AI NIET gebruiken?
|
||||||
|
- Welke ethische overwegingen komen bij je op?
|
||||||
|
|
||||||
|
### Vooruitblik
|
||||||
|
Kijk vooruit:
|
||||||
|
- Hoe denk je AI in te gaan zetten in je werk/studie?
|
||||||
|
- Welke vaardigheden wil je nog ontwikkelen?
|
||||||
|
|
||||||
|
**Eisen:**
|
||||||
|
- Minimaal 500 woorden
|
||||||
|
- Persoonlijk en reflectief (niet alleen opsommen)
|
||||||
|
- In je eigen woorden (niet door AI laten schrijven!)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Deel 2: AI Use Cases (5 stuks)
|
||||||
|
|
||||||
|
Bedenk **vijf concrete use cases** waarin AI jou kan helpen in je werk als (frontend) developer.
|
||||||
|
|
||||||
|
**Per use case beschrijf je:**
|
||||||
|
|
||||||
|
1. **De situatie:** Welk probleem of welke taak?
|
||||||
|
2. **De AI-toepassing:** Welke tool zou je gebruiken en hoe?
|
||||||
|
3. **Het verwachte resultaat:** Wat levert het op?
|
||||||
|
4. **Mogelijke valkuilen:** Waar moet je op letten?
|
||||||
|
|
||||||
|
**Voorbeeld:**
|
||||||
|
|
||||||
|
| **Use Case** | Responsive navigation menu maken |
|
||||||
|
|---|---|
|
||||||
|
| **Situatie** | Ik moet een hamburger menu bouwen dat werkt op alle schermformaten |
|
||||||
|
| **AI-toepassing** | Schets tekenen → ChatGPT voor prompt → v0.dev voor generatie |
|
||||||
|
| **Verwacht resultaat** | Werkende code die ik kan aanpassen aan mijn design |
|
||||||
|
| **Valkuilen** | ARIA-labels checken, testen of het echt responsive is |
|
||||||
|
|
||||||
|
**Denk aan use cases zoals:**
|
||||||
|
- Code schrijven of debuggen
|
||||||
|
- Documentatie genereren
|
||||||
|
- Designs omzetten naar code
|
||||||
|
- Tests schrijven
|
||||||
|
- Code reviews
|
||||||
|
- Learning nieuwe technologieën
|
||||||
|
- Refactoring
|
||||||
|
- Performance optimalisatie
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Deel 3: Tweede Schets → Website
|
||||||
|
|
||||||
|
Doorloop de workflow van de les **nog een keer**, maar nu voor een ander component.
|
||||||
|
|
||||||
|
### Stap 1: Kies een component
|
||||||
|
Kies een van deze opties (of verzin zelf iets):
|
||||||
|
- Features section (3-4 features met iconen)
|
||||||
|
- Pricing table (3 prijsplannen)
|
||||||
|
- Testimonials sectie
|
||||||
|
- Contact formulier
|
||||||
|
- Footer met links
|
||||||
|
- About section met team foto's
|
||||||
|
|
||||||
|
### Stap 2: Teken op papier
|
||||||
|
Maak een schets van je gekozen component. Denk aan:
|
||||||
|
- Layout (waar staat wat?)
|
||||||
|
- Tekst indicaties
|
||||||
|
- Buttons en links
|
||||||
|
- Afbeelding placeholders
|
||||||
|
|
||||||
|
### Stap 3: ChatGPT prompt
|
||||||
|
Upload je schets naar ChatGPT en beschrijf:
|
||||||
|
- **Tech stack:** React met Tailwind CSS
|
||||||
|
- **Kleuren:** Kies een kleurenschema (mag anders zijn dan de les)
|
||||||
|
- **Stijl:** Beschrijf de look & feel
|
||||||
|
- **Doel:** Voor welk type website is dit?
|
||||||
|
|
||||||
|
### Stap 4: v0.dev genereren
|
||||||
|
Gebruik de gegenereerde prompt in v0.dev.
|
||||||
|
|
||||||
|
### Stap 5: Deploy (optioneel)
|
||||||
|
Als je tijd hebt, deploy naar Vercel.
|
||||||
|
|
||||||
|
### Documentatie
|
||||||
|
Lever de volgende screenshots/foto's aan:
|
||||||
|
1. Foto van je papieren schets
|
||||||
|
2. Screenshot van je ChatGPT prompt
|
||||||
|
3. Screenshot van de gegenereerde ChatGPT output
|
||||||
|
4. Screenshot van het v0.dev resultaat
|
||||||
|
5. (Optioneel) Vercel URL
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Inleveren
|
||||||
|
|
||||||
|
Lever de volgende onderdelen in via Teams chat:
|
||||||
|
|
||||||
|
1. **Reflectie** (Word/PDF/Markdown)
|
||||||
|
- Minimaal 500 woorden
|
||||||
|
- Duidelijke structuur met kopjes
|
||||||
|
|
||||||
|
2. **Use Cases document** (Word/PDF/Markdown)
|
||||||
|
- 5 use cases in tabel of lijst formaat
|
||||||
|
|
||||||
|
3. **Tweede Schets documentatie**
|
||||||
|
- Foto van je schets
|
||||||
|
- Screenshots van ChatGPT conversatie
|
||||||
|
- Screenshot van v0.dev resultaat
|
||||||
|
- (Optioneel) Vercel URL
|
||||||
|
|
||||||
|
**Bestandsnaam:** `[Achternaam]_Les1_Huiswerk.pdf` of stuur los via Teams
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Beoordelingscriteria
|
||||||
|
|
||||||
|
| **Onderdeel** | **Punten** | **Criteria** |
|
||||||
|
|---|---|---|
|
||||||
|
| Reflectie | 35% | Diepgang, persoonlijke inzichten, kritische houding |
|
||||||
|
| Use Cases (5x) | 25% | Relevantie, creativiteit, volledigheid |
|
||||||
|
| Tweede Schets | 40% | Kwaliteit schets, specificaties in prompt, eindresultaat |
|
||||||
|
|
||||||
|
**Let op:** Deze opdracht wordt beoordeeld op **eigen inbreng**. Reflecties die duidelijk door AI zijn geschreven worden niet geaccepteerd.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tips
|
||||||
|
|
||||||
|
- **Start vroeg** - Gun jezelf tijd om na te denken
|
||||||
|
- **Wees eerlijk** - Er zijn geen foute reflecties, het gaat om jouw ervaring
|
||||||
|
- **Experimenteer** - Probeer verschillende specificaties in je prompt
|
||||||
|
- **Wees specifiek** - Geef duidelijke kleuren, stijl en tech stack mee
|
||||||
|
- **Documenteer goed** - Screenshots maken terwijl je bezig bent is makkelijker dan achteraf
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Checklist Tweede Schets
|
||||||
|
|
||||||
|
Zorg dat je bij je tweede schets het volgende hebt gespecificeerd:
|
||||||
|
|
||||||
|
| Element | Check |
|
||||||
|
|---------|-------|
|
||||||
|
| Tech stack (React + Tailwind) | ☐ |
|
||||||
|
| Kleuren (hex codes of beschrijving) | ☐ |
|
||||||
|
| Stijl/Look & Feel | ☐ |
|
||||||
|
| Type website/doelgroep | ☐ |
|
||||||
|
| Responsive design | ☐ |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Vragen?
|
||||||
|
|
||||||
|
Heb je vragen over de opdracht? Stuur een bericht via Teams.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*Succes!*
|
||||||
719
Les01-Introductie-AI/Les01-Docenttekst.md
Normal file
719
Les01-Introductie-AI/Les01-Docenttekst.md
Normal file
@@ -0,0 +1,719 @@
|
|||||||
|
# Docenttekst Les 1: Introductie AI & Large Language Models
|
||||||
|
|
||||||
|
> **Totale lesduur:** 3 uur (180 minuten)
|
||||||
|
> **Spreektijd docent:** ~70 minuten
|
||||||
|
> **Format:** Volledig uitgeschreven script per slide
|
||||||
|
> **Kernworkflow:** Schets op papier → ChatGPT → v0.dev → Website
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 1: WELKOM & INTRODUCTIE (13 minuten)
|
||||||
|
|
||||||
|
### Slide 1: Welkomstslide
|
||||||
|
**[0:00 - 0:30]**
|
||||||
|
|
||||||
|
*[Wacht tot iedereen zit, maak oogcontact]*
|
||||||
|
|
||||||
|
"Goedemiddag allemaal, welkom bij de eerste les van AI Fundamentals. Fijn dat jullie er zijn. Neem even de tijd om je laptop open te klappen en je spullen klaar te leggen."
|
||||||
|
|
||||||
|
*[Korte pauze van 20-30 seconden]*
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 2: Planning
|
||||||
|
**[0:30 - 1:30]**
|
||||||
|
|
||||||
|
"Voordat we beginnen, laat ik jullie even zien wat we vandaag gaan doen. Zo weten jullie waar je aan toe bent."
|
||||||
|
|
||||||
|
*[Wijs naar de tijdsblokken op de slide]*
|
||||||
|
|
||||||
|
"We beginnen met theorie over wat AI is en hoe het werkt. Daarna gaan we praktisch aan de slag met ChatGPT - ik laat zien hoe je die tool effectief gebruikt."
|
||||||
|
|
||||||
|
"Dan komt het spannende deel: prompt engineering. Hoe stel je de juiste vraag? Hoe geef je aan welke technologie, kleuren en stijl je wilt?"
|
||||||
|
|
||||||
|
*[Met nadruk]*
|
||||||
|
|
||||||
|
"En dan de grote finale: ik ga live demonstreren hoe je van een **tekening op papier** naar een **werkende website** gaat. En daarna gaan jullie dat zelf doen."
|
||||||
|
|
||||||
|
"Jullie gaan vandaag letterlijk een website bouwen die begint als een schets op papier. Dat is het doel."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 3: Voorstellen docent
|
||||||
|
**[1:30 - 3:00]**
|
||||||
|
|
||||||
|
"Laat ik mezelf even voorstellen. Mijn naam is [NAAM] en ik ben jullie docent voor deze leerlijn. Ik werk zelf als developer en gebruik dagelijks AI-tools in mijn werk."
|
||||||
|
|
||||||
|
"Wat ik heel gaaf vind aan dit vak is dat het zo snel verandert - wat vandaag cutting edge is, kan over drie maanden alweer achterhaald zijn. Dat maakt het ook uitdagend om les te geven, maar vooral heel leuk."
|
||||||
|
|
||||||
|
"Ik geef hier twee keer per week les en daarnaast werk ik aan mijn eigen projecten. Als je vragen hebt buiten de les om, kun je me altijd bereiken via Teams."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 4: Kennismaking
|
||||||
|
**[3:00 - 8:00]**
|
||||||
|
|
||||||
|
"Maar genoeg over mij - ik ben veel nieuwsgieriger naar jullie. Laten we een snelle ronde doen. Vertel kort je naam en geef antwoord op deze vraag..."
|
||||||
|
|
||||||
|
*[Wijs naar de slide]*
|
||||||
|
|
||||||
|
"...heb je al eens ChatGPT of een andere AI-tool gebruikt? En zo ja, waarvoor?"
|
||||||
|
|
||||||
|
*[Laat iedereen kort reageren - ~5 minuten]*
|
||||||
|
|
||||||
|
"Mooi, ik zie dat de meesten van jullie al wel eens met AI hebben gewerkt. Dat is een goed startpunt."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 5: De Leerlijn AI Developer
|
||||||
|
**[8:00 - 10:00]**
|
||||||
|
|
||||||
|
"Even een vooruitblik op wat we de komende 18 weken gaan doen."
|
||||||
|
|
||||||
|
*[Wijs naar de drie hoofdstukken]*
|
||||||
|
|
||||||
|
"We werken in drie fases. De eerste drie lessen gaan over AI Fundamentals. Daarna, les 4 tot 9, gaan we naar AI Driven Development - echte tools en workflows. En het laatste deel bouwen we richting full-stack applicaties."
|
||||||
|
|
||||||
|
"Maar dat is ver weg. Vandaag focussen we op de basis - en vooral op de workflow van schets naar website."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 6: Accounts check
|
||||||
|
**[10:00 - 13:00]**
|
||||||
|
|
||||||
|
*[Iets serieuzer toon]*
|
||||||
|
|
||||||
|
"Oké, even een praktisch punt. Hebben jullie allemaal een account aangemaakt bij ChatGPT?"
|
||||||
|
|
||||||
|
*[Scan de groep, vraag om handopsteken]*
|
||||||
|
|
||||||
|
"Wie heeft nog geen account? Oké, maak die dan nu even aan op chat.openai.com. Het is gratis."
|
||||||
|
|
||||||
|
"Je hebt ook een GitHub account nodig voor later vandaag. Als je die niet hebt, maak die ook even aan op github.com."
|
||||||
|
|
||||||
|
*[Geef 2-3 minuten]*
|
||||||
|
|
||||||
|
"Is iedereen zover? Mooi, dan gaan we de diepte in."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 2: WAT IS AI? (20 minuten)
|
||||||
|
|
||||||
|
### Slide 7: Wat is Artificial Intelligence?
|
||||||
|
**[13:00 - 16:00]**
|
||||||
|
|
||||||
|
"Oké, eerste grote vraag: wat ís eigenlijk AI?"
|
||||||
|
|
||||||
|
"AI, of Artificial Intelligence, is een verzamelnaam. Het zijn computersystemen die taken kunnen uitvoeren waarvoor normaal menselijke intelligentie nodig is."
|
||||||
|
|
||||||
|
*[Laat dit even bezinken]*
|
||||||
|
|
||||||
|
"Denk aan: patronen herkennen, beslissingen nemen, taal begrijpen. Dingen die wij mensen doen met ons brein."
|
||||||
|
|
||||||
|
"Nu is er een belangrijk onderscheid. Er is Narrow AI - AI die heel goed is in één specifieke taak. ChatGPT is daar een voorbeeld van. En dan heb je General AI - dat zou AI zijn die alles kan wat een mens kan. Dat bestaat nog niet."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 8: Hoe werken Large Language Models?
|
||||||
|
**[16:00 - 20:00]**
|
||||||
|
|
||||||
|
"Nu de vraag die iedereen heeft: hoe werkt ChatGPT eigenlijk?"
|
||||||
|
|
||||||
|
"Een Large Language Model - een LLM - is getraind op gigantische hoeveelheden tekst. En met gigantisch bedoel ik: een groot deel van het internet."
|
||||||
|
|
||||||
|
"Het doel? Eigenlijk heel simpel: het volgende woord voorspellen."
|
||||||
|
|
||||||
|
*[Laat dit even landen]*
|
||||||
|
|
||||||
|
"Ja, echt. ChatGPT, Claude, al die tools - in de kern zijn het voorspelmachines. Ze krijgen tekst en voorspellen wat er logischerwijs daarna komt."
|
||||||
|
|
||||||
|
"En ze doen dat zo goed, dat het lijkt alsof ze 'begrijpen' wat je zegt. Maar er zit geen bewustzijn in. Het is geavanceerde patroonherkenning."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 9: Next-Token Prediction
|
||||||
|
**[20:00 - 23:00]**
|
||||||
|
|
||||||
|
"Laat me dit concreet maken met een voorbeeld."
|
||||||
|
|
||||||
|
*[Wijs naar de slide]*
|
||||||
|
|
||||||
|
"Als ik aan ChatGPT vraag: 'De kat zat op de...' - wat denk je dat hij zegt?"
|
||||||
|
|
||||||
|
*[Wacht op antwoorden]*
|
||||||
|
|
||||||
|
"Precies, grote kans 'mat'. Waarom? Omdat in alle tekst waarop hij getraind is, die combinatie heel vaak voorkomt."
|
||||||
|
|
||||||
|
"Dit verklaart ook waarom je soms hele goede antwoorden krijgt en soms onzin. Er zit randomheid in."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 10: Hallucinaties
|
||||||
|
**[23:00 - 28:00]**
|
||||||
|
|
||||||
|
"En dit brengt me bij een belangrijk punt: hallucinaties."
|
||||||
|
|
||||||
|
*[Iets serieuzere toon]*
|
||||||
|
|
||||||
|
"AI kan dingen verzinnen. Compleet uit de lucht gegrepen informatie, maar het klinkt heel overtuigend."
|
||||||
|
|
||||||
|
"Vraag ChatGPT naar een wetenschappelijk paper, en hij kan je een titel, auteurs en samenvatting geven van iets dat niet bestaat."
|
||||||
|
|
||||||
|
"Dit is waarom je AI-output altijd moet checken. Vooral bij feiten, cijfers, namen, referenties."
|
||||||
|
|
||||||
|
"Vragen tot zover?"
|
||||||
|
|
||||||
|
*[Beantwoord eventuele vragen - 2-3 minuten]*
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 3: HET AI-LANDSCHAP (12 minuten)
|
||||||
|
|
||||||
|
### Slide 11: De Grote Spelers
|
||||||
|
**[33:00 - 36:00]**
|
||||||
|
|
||||||
|
"Oké, nu je begrijpt hoe LLMs werken, laten we kijken welke er zijn."
|
||||||
|
|
||||||
|
*[Wijs naar de tabel]*
|
||||||
|
|
||||||
|
"Dit zijn de grote namen. ChatGPT van OpenAI - dat kennen de meesten. Claude van Anthropic. Gemini van Google. En Grok van xAI."
|
||||||
|
|
||||||
|
"Ze hebben allemaal hun sterke punten. Vandaag focussen we vooral op ChatGPT."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 12: Gratis vs Betaald
|
||||||
|
**[36:00 - 40:00]**
|
||||||
|
|
||||||
|
"Even een belangrijk punt: heb je de betaalde versie nodig?"
|
||||||
|
|
||||||
|
"Het korte antwoord: nee, niet voor deze cursus. De gratis versie van ChatGPT draait op GPT-4o, en dat is al behoorlijk krachtig."
|
||||||
|
|
||||||
|
"Mijn advies: begin gratis. Als je later merkt dat je tegen limieten aanloopt, kun je altijd upgraden."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 13: Welke tool voor welke taak?
|
||||||
|
**[40:00 - 45:00]**
|
||||||
|
|
||||||
|
"Welke tool is het beste? Dat hangt af van wat je wilt doen."
|
||||||
|
|
||||||
|
*[Loop door de tabel]*
|
||||||
|
|
||||||
|
"Voor snelle code snippets zijn ChatGPT en Claude beide prima. Voor lange documenten is Claude beter. En voor UI componenten - wat we straks gaan doen - gebruiken we v0.dev."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 4: CHATGPT IN DE PRAKTIJK (25 minuten)
|
||||||
|
|
||||||
|
### Slide 14: ChatGPT Interface
|
||||||
|
**[45:00 - 48:00]**
|
||||||
|
|
||||||
|
*[Energieke toon]*
|
||||||
|
|
||||||
|
"Oké, open allemaal ChatGPT op je laptop. Ga naar chat.openai.com en log in."
|
||||||
|
|
||||||
|
*[Wacht tot iedereen de pagina open heeft - 1 minuut]*
|
||||||
|
|
||||||
|
"Iedereen erin? Mooi. Laat me jullie even rondleiden door de interface."
|
||||||
|
|
||||||
|
*[Open ChatGPT op het projectiescherm]*
|
||||||
|
|
||||||
|
"In het midden heb je het chatvenster. Links zie je je chat geschiedenis. Bovenaan kun je het model kiezen. En rechtsonder vind je instellingen."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 15: Model Kiezen
|
||||||
|
**[48:00 - 51:00]**
|
||||||
|
|
||||||
|
"Kijk even bovenaan je scherm. Daar staat welk model je gebruikt."
|
||||||
|
|
||||||
|
"Je hebt een paar opties. GPT-4o is de standaard - snel en voor de meeste taken prima. GPT-4o with canvas is speciaal voor documenten. En GPT-4 is het krachtigste model als je Plus hebt."
|
||||||
|
|
||||||
|
"Voor vandaag is GPT-4o perfect."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 16: Tijdelijke Chat
|
||||||
|
**[51:00 - 54:00]**
|
||||||
|
|
||||||
|
"Nu iets belangrijks: tijdelijke chat."
|
||||||
|
|
||||||
|
*[Demonstreer waar dit staat]*
|
||||||
|
|
||||||
|
"Als je dit aanzet, wordt je gesprek niet opgeslagen en niet gebruikt om het model te trainen. Wanneer gebruik je dit? Als je met gevoelige of werk-gerelateerde informatie werkt."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 17: Afbeeldingen Analyseren
|
||||||
|
**[54:00 - 58:00]**
|
||||||
|
|
||||||
|
*[Dit is een belangrijke slide voor de workflow]*
|
||||||
|
|
||||||
|
"Nu een feature die cruciaal is voor wat we straks gaan doen: ChatGPT kan afbeeldingen lezen."
|
||||||
|
|
||||||
|
*[Demonstreer live]*
|
||||||
|
|
||||||
|
"Ik upload hier een schets..."
|
||||||
|
|
||||||
|
*[Upload een simpele tekening]*
|
||||||
|
|
||||||
|
"En ik vraag: 'Wat zie je op deze afbeelding?'"
|
||||||
|
|
||||||
|
*[Wacht op response]*
|
||||||
|
|
||||||
|
"Kijk, hij beschrijft precies wat hij ziet. Dit heet image-to-text, of vision."
|
||||||
|
|
||||||
|
*[Met nadruk]*
|
||||||
|
|
||||||
|
"Dit gaan we straks gebruiken om jullie schetsen om te zetten naar gedetailleerde prompts. ChatGPT wordt onze 'vertaler' van tekening naar technische specificaties."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 18: Bestanden Uploaden
|
||||||
|
**[58:00 - 61:00]**
|
||||||
|
|
||||||
|
"Hetzelfde geldt voor documenten. Je kunt een PDF uploaden, een Word document, een code bestand."
|
||||||
|
|
||||||
|
*[Demonstreer kort]*
|
||||||
|
|
||||||
|
"Dit is handig voor documentatie of lange bestanden."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 19: Custom Instructions
|
||||||
|
**[61:00 - 64:00]**
|
||||||
|
|
||||||
|
"Dan nog iets nuttigs: Custom Instructions."
|
||||||
|
|
||||||
|
*[Ga naar instellingen → Personalisatie]*
|
||||||
|
|
||||||
|
"Hier kun je permanent aangeven wie je bent en hoe ChatGPT moet antwoorden. Bijvoorbeeld: 'Ik ben een frontend developer. Ik werk met React en Tailwind.'"
|
||||||
|
|
||||||
|
"Dit scheelt tijd als je steeds dezelfde context moet geven."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 20: Het Geheugen
|
||||||
|
**[64:00 - 66:00]**
|
||||||
|
|
||||||
|
"Kort over geheugen. ChatGPT onthoudt je eerdere chats, maar gebruikt die informatie niet automatisch in nieuwe chats."
|
||||||
|
|
||||||
|
"Tip: start een nieuwe chat voor een nieuw onderwerp."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 21: Praktijk Oefening
|
||||||
|
**[66:00 - 70:00]**
|
||||||
|
|
||||||
|
"Oké, nu jullie. Vijf minuten om te experimenteren."
|
||||||
|
|
||||||
|
"Drie dingen: start een chat, upload een afbeelding - maak een foto van iets -, en kijk waar de Custom Instructions staan."
|
||||||
|
|
||||||
|
*[Geef 5 minuten - loop rond]*
|
||||||
|
|
||||||
|
"Oké, tijd. Wie heeft iets interessants ontdekt?"
|
||||||
|
|
||||||
|
*[Laat 1-2 studenten kort delen]*
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 5: PROMPT ENGINEERING (15 minuten)
|
||||||
|
|
||||||
|
### Slide 22: Wat is Prompt Engineering?
|
||||||
|
**[70:00 - 73:00]**
|
||||||
|
|
||||||
|
"Nu komen we bij een cruciaal onderdeel: prompt engineering."
|
||||||
|
|
||||||
|
"Een prompt is simpelweg de instructie die je aan AI geeft. En hier is het belangrijke inzicht: de kwaliteit van je antwoord hangt direct af van de kwaliteit van je vraag."
|
||||||
|
|
||||||
|
"Als je een vage vraag stelt, krijg je een vaag antwoord. Als je specifiek bent, krijg je specifieke output."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 23: Slechte vs Goede Prompt
|
||||||
|
**[73:00 - 76:00]**
|
||||||
|
|
||||||
|
"Laat me het verschil laten zien."
|
||||||
|
|
||||||
|
*[Wijs naar de slechte prompt]*
|
||||||
|
|
||||||
|
"Dit is wat de meeste mensen doen: 'Maak een button'. Drie woorden. Welke taal? Welke stijl? De AI moet alles gokken."
|
||||||
|
|
||||||
|
*[Wijs naar de goede prompt]*
|
||||||
|
|
||||||
|
"En dit is beter: 'Maak een React button component met Tailwind CSS. Primary styling, blauw, met hover en loading state.'"
|
||||||
|
|
||||||
|
"Zie je het verschil? Je specificeert de technologie, de features, de stijl."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 24: Prompt Framework
|
||||||
|
**[76:00 - 78:00]**
|
||||||
|
|
||||||
|
"Er is een framework dat helpt. Vier elementen."
|
||||||
|
|
||||||
|
"Eén: Rol. 'Je bent een senior frontend developer'. Twee: Context. 'Je werkt aan een SaaS landingspagina'. Drie: Taak. 'Maak een hero section'. Vier: Format. 'Gebruik React en Tailwind.'"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 25: Tech Stack Specificeren
|
||||||
|
**[78:00 - 81:00]**
|
||||||
|
|
||||||
|
*[Dit is een belangrijke nieuwe slide]*
|
||||||
|
|
||||||
|
"Nu iets dat jullie moeten begrijpen: tech stack."
|
||||||
|
|
||||||
|
"Wat is een tech stack? De technologieën waarmee je bouwt. Voor deze cursus gebruiken we vooral React en Tailwind CSS."
|
||||||
|
|
||||||
|
*[Leg kort uit]*
|
||||||
|
|
||||||
|
"React is een JavaScript framework voor user interfaces. Tailwind CSS is een utility-first CSS framework - je bouwt styling met classes."
|
||||||
|
|
||||||
|
"Waarom is dit belangrijk? Als je tegen AI zegt 'maak een button', weet hij niet of je HTML, React, Vue, of iets anders wilt. Door je tech stack te specificeren, krijg je bruikbare code."
|
||||||
|
|
||||||
|
*[Met nadruk]*
|
||||||
|
|
||||||
|
"En goed nieuws: v0.dev genereert automatisch React met Tailwind. Maar je moet het wel meegeven in je prompts!"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 26: Kleuren en Look & Feel
|
||||||
|
**[81:00 - 84:00]**
|
||||||
|
|
||||||
|
"Het volgende dat je moet specificeren: kleuren en stijl."
|
||||||
|
|
||||||
|
*[Loop door de opties]*
|
||||||
|
|
||||||
|
"Kleuren kun je meegeven als hex codes - bijvoorbeeld #2563EB voor blauw - of beschrijvend, zoals 'warm oranje thema'."
|
||||||
|
|
||||||
|
"Stijl beschrijf je met woorden: modern, minimalistisch, speels, corporate, retro..."
|
||||||
|
|
||||||
|
"En je kunt referenties gebruiken: 'In de stijl van Stripe.com' vertelt de AI heel veel."
|
||||||
|
|
||||||
|
*[Voorbeeld]*
|
||||||
|
|
||||||
|
"Een complete specificatie zou zijn: 'Blauw kleurenschema met primary #2563EB. Stijl: modern en minimalistisch. Geschikt voor een B2B SaaS startup.'"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 27: Prompting Tips
|
||||||
|
**[84:00 - 85:00]**
|
||||||
|
|
||||||
|
"Nog even de tips op een rij: geef een rol, wees specifiek, specificeer je tech stack, beschrijf de look & feel, geef voorbeelden als je kunt, en itereer."
|
||||||
|
|
||||||
|
"Onthoud: garbage in, garbage out."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 6: LIVE DEMO V0.DEV (27 minuten)
|
||||||
|
|
||||||
|
### Slide 28: Introductie v0.dev
|
||||||
|
**[85:00 - 88:00]**
|
||||||
|
|
||||||
|
*[Energieke toon]*
|
||||||
|
|
||||||
|
"Nu wordt het echt leuk. We gaan kijken naar v0.dev."
|
||||||
|
|
||||||
|
"Dit is een tool van Vercel - het bedrijf achter Next.js. En het is een gamechanger."
|
||||||
|
|
||||||
|
*[Open v0.dev op je scherm]*
|
||||||
|
|
||||||
|
"Wat doet v0? Je beschrijft wat je wilt, of je uploadt een schets, en v0 genereert werkende React code met Tailwind CSS. Direct een preview. Direct deploybaar."
|
||||||
|
|
||||||
|
"Maar vandaag leren jullie de slimme workflow."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 29: De Slimme Workflow
|
||||||
|
**[88:00 - 90:00]**
|
||||||
|
|
||||||
|
*[Wijs naar het diagram]*
|
||||||
|
|
||||||
|
"Dit is de workflow die jullie vandaag gaan leren. Vijf stappen."
|
||||||
|
|
||||||
|
"Stap één: je TEKENT je idee op papier. Gewoon pen en papier."
|
||||||
|
|
||||||
|
"Stap twee: je maakt een FOTO van je tekening."
|
||||||
|
|
||||||
|
"Stap drie: je upload die foto naar CHATGPT en beschrijft je wensen - tech stack, kleuren, stijl."
|
||||||
|
|
||||||
|
"Stap vier: ChatGPT maakt een gedetailleerde PROMPT voor je."
|
||||||
|
|
||||||
|
"Stap vijf: je plakt die prompt in V0.DEV en je hebt een website!"
|
||||||
|
|
||||||
|
*[Leg uit waarom]*
|
||||||
|
|
||||||
|
"Waarom doen we het zo? Omdat v0 beperkte gratis credits heeft - ongeveer zeven generaties per dag. ChatGPT is 'gratis'. Door eerst in ChatGPT je prompt te optimaliseren, verspil je geen v0 credits aan slechte prompts."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 30: Live Demo - Schets Maken
|
||||||
|
**[90:00 - 93:00]**
|
||||||
|
|
||||||
|
*[Pak pen en papier - dit is live!]*
|
||||||
|
|
||||||
|
"Oké, ik ga dit nu live doen. Kijk mee."
|
||||||
|
|
||||||
|
*[Teken terwijl je praat - 2 minuten]*
|
||||||
|
|
||||||
|
"Ik teken een hero section. Links een groot tekstvak - hier komt de headline. Daaronder een kleiner vak voor de ondertitel. En daaronder een rechthoek - dat wordt de button."
|
||||||
|
|
||||||
|
"Rechts teken ik een groot vierkant met een X erdoor - dat is een placeholder voor een afbeelding."
|
||||||
|
|
||||||
|
*[Toon je tekening]*
|
||||||
|
|
||||||
|
"Kijk, het is niet mooi. Het hoeft ook niet mooi te zijn. Het gaat erom dat je de layout communiceert. Waar staat wat?"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 31: Live Demo - Foto naar ChatGPT
|
||||||
|
**[93:00 - 100:00]**
|
||||||
|
|
||||||
|
*[Maak foto en upload naar ChatGPT]*
|
||||||
|
|
||||||
|
"Ik maak een foto met mijn telefoon... even uploaden naar ChatGPT..."
|
||||||
|
|
||||||
|
*[Typ je prompt]*
|
||||||
|
|
||||||
|
"Nu typ ik mijn beschrijving. Let op wat ik allemaal meegeef:"
|
||||||
|
|
||||||
|
*[Typ hardop]*
|
||||||
|
|
||||||
|
"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 een projectmanagement tool genaamd TaskFlow"
|
||||||
|
|
||||||
|
*[Druk op enter en wacht]*
|
||||||
|
|
||||||
|
"Kijk, ChatGPT analyseert mijn schets en maakt er een gedetailleerde Engelse prompt van. Met alle specificaties die ik meegaf."
|
||||||
|
|
||||||
|
*[Lees een stuk voor]*
|
||||||
|
|
||||||
|
"Hij beschrijft de layout, de kleuren, de stijl... precies wat we nodig hebben voor v0."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 32: Live Demo - Prompt naar v0
|
||||||
|
**[100:00 - 106:00]**
|
||||||
|
|
||||||
|
*[Kopieer en ga naar v0.dev]*
|
||||||
|
|
||||||
|
"Ik kopieer deze prompt... ga naar v0.dev... en plak hem hier."
|
||||||
|
|
||||||
|
*[Druk op enter]*
|
||||||
|
|
||||||
|
"Het duurt even... dertig seconden ongeveer..."
|
||||||
|
|
||||||
|
*[Resultaat verschijnt]*
|
||||||
|
|
||||||
|
"En kijk! We hebben een hero section. Links de tekst met headline en button, rechts een afbeelding placeholder. Precies wat ik tekende!"
|
||||||
|
|
||||||
|
*[Klik op Code tab]*
|
||||||
|
|
||||||
|
"En hier is de code. Clean React, Tailwind classes. Dit kun je direct in je project gebruiken."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 33: Live Demo - Itereren
|
||||||
|
**[106:00 - 109:00]**
|
||||||
|
|
||||||
|
"Maar we zijn niet klaar. De kracht is dat je kunt itereren."
|
||||||
|
|
||||||
|
*[Typ een follow-up]*
|
||||||
|
|
||||||
|
"Ik typ: 'Make the button larger and add a subtle hover animation.'"
|
||||||
|
|
||||||
|
*[Wacht op generatie]*
|
||||||
|
|
||||||
|
"Kijk - de button is groter. Dit is hoe je met AI werkt. Je gaat in gesprek. Je verfijnt."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 34: Live Demo - Deployen
|
||||||
|
**[109:00 - 112:00]**
|
||||||
|
|
||||||
|
"Laatste stap: hoe krijg je dit online?"
|
||||||
|
|
||||||
|
*[Wijs naar de zijbalk]*
|
||||||
|
|
||||||
|
"Hier zie je 'Add Integration'. Daar klik je op. V0 vraagt je om je GitHub account te koppelen. Als je dat doet, maakt v0 automatisch een repository aan."
|
||||||
|
|
||||||
|
"Dan klik je op 'Deploy'... en v0 pusht je code naar GitHub én deployt naar Vercel."
|
||||||
|
|
||||||
|
*[Wacht op deployment]*
|
||||||
|
|
||||||
|
"En kijk - we hebben een live URL. Dit is nu een echte website die iedereen kan bezoeken."
|
||||||
|
|
||||||
|
*[Met nadruk]*
|
||||||
|
|
||||||
|
"Van een tekening op papier naar een live website. In minder dan tien minuten."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 7: HANDS-ON OPDRACHT (53 minuten)
|
||||||
|
|
||||||
|
### Slide 35: Opdracht Introductie
|
||||||
|
**[112:00 - 117:00]**
|
||||||
|
|
||||||
|
"De opdracht die jullie gaan doen is precies wat ik net deed."
|
||||||
|
|
||||||
|
*[Pak papier en pennen - deel uit als nodig]*
|
||||||
|
|
||||||
|
"Jullie gaan een hero section bouwen. Maar let op: jullie beginnen met TEKENEN."
|
||||||
|
|
||||||
|
*[Loop door de stappen]*
|
||||||
|
|
||||||
|
"Stap één: teken je hero section op papier. Stap twee: maak een foto. Stap drie: upload naar ChatGPT en beschrijf je wensen - en vergeet niet: tech stack, kleuren, stijl! Stap vier: kopieer de prompt. Stap vijf: plak in v0.dev. Stap zes: deploy naar Vercel."
|
||||||
|
|
||||||
|
*[Benodigdheden check]*
|
||||||
|
|
||||||
|
"Heeft iedereen papier en een pen? Nee? Hier, pak even..."
|
||||||
|
|
||||||
|
*[Praktische info]*
|
||||||
|
|
||||||
|
"Je hebt 50 minuten. Werk individueel. Documenteer je stappen met screenshots. Als je vastloopt, vraag hulp."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 36: Aan de slag
|
||||||
|
**[117:00 - 165:00]**
|
||||||
|
|
||||||
|
"Succes!"
|
||||||
|
|
||||||
|
*[Studenten werken - loop rond en help waar nodig]*
|
||||||
|
|
||||||
|
**Hulp bieden - let op deze punten:**
|
||||||
|
- Tekenen ze daadwerkelijk? Of slaan ze die stap over?
|
||||||
|
- Geven ze tech stack, kleuren en stijl mee in ChatGPT?
|
||||||
|
- Problemen met v0.dev account of deployment?
|
||||||
|
|
||||||
|
**Tussentijdse check [135:00]:**
|
||||||
|
|
||||||
|
"Even een snelle check. Steek je hand op als je al een prompt uit ChatGPT hebt."
|
||||||
|
|
||||||
|
*[Tel handen]*
|
||||||
|
|
||||||
|
"Mooi. Wie is al in v0.dev aan het genereren?"
|
||||||
|
|
||||||
|
*[Help kort indien nodig]*
|
||||||
|
|
||||||
|
"Nog 30 minuten. Focus op in ieder geval je schets, ChatGPT prompt, en v0 generatie. De deployment is bonus als je tijd hebt."
|
||||||
|
|
||||||
|
*[Studenten werken door]*
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 8: AFSLUITING (15 minuten)
|
||||||
|
|
||||||
|
### Slide 37: Samenvatting
|
||||||
|
**[165:00 - 168:00]**
|
||||||
|
|
||||||
|
"Oké, tijd om af te ronden. Sluit je werk af waar je bent."
|
||||||
|
|
||||||
|
*[Wacht tot iedereen aandacht geeft]*
|
||||||
|
|
||||||
|
"Laten we even terugkijken. Wat hebben we vandaag gedaan?"
|
||||||
|
|
||||||
|
"We hebben geleerd hoe LLMs werken. We hebben ChatGPT praktisch gebruikt. We hebben prompt engineering gehad - specifiek: hoe je tech stack, kleuren en stijl specificeert."
|
||||||
|
|
||||||
|
*[Met nadruk]*
|
||||||
|
|
||||||
|
"En het belangrijkste: jullie hebben de workflow geleerd. Schets op papier, foto naar ChatGPT, prompt naar v0, en live op het internet."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 38: Huiswerk
|
||||||
|
**[168:00 - 172:00]**
|
||||||
|
|
||||||
|
"Voor volgende week heb je huiswerk."
|
||||||
|
|
||||||
|
*[Wijs naar de slide]*
|
||||||
|
|
||||||
|
"Je schrijft een reflectie van 500 woorden over je eerste ervaring met AI tools. Je bedenkt vijf concrete use cases voor AI in jouw werk."
|
||||||
|
|
||||||
|
*[Met nadruk]*
|
||||||
|
|
||||||
|
"En je doorloopt de workflow nog een keer met een ANDERE component. Maak een tweede schets - dit keer voor een pricing table, of een features section, of iets anders. Doorloop alle stappen opnieuw."
|
||||||
|
|
||||||
|
"Documenteer met screenshots. Lever in via Teams chat."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 39: Volgende Les
|
||||||
|
**[172:00 - 175:00]**
|
||||||
|
|
||||||
|
"Volgende week gaan we dieper in op prompt engineering. Geavanceerde technieken. Chain of thought. Few-shot learning."
|
||||||
|
|
||||||
|
"Zorg dat je huiswerk af is en dat je ChatGPT account werkt."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 40: Afsluiting
|
||||||
|
**[175:00 - 180:00]**
|
||||||
|
|
||||||
|
"Zijn er nog vragen?"
|
||||||
|
|
||||||
|
*[Beantwoord eventuele vragen - 3 minuten max]*
|
||||||
|
|
||||||
|
"Geen vragen? Dan wil ik jullie bedanken voor jullie aandacht. Het was een goede eerste les."
|
||||||
|
|
||||||
|
"En vergeet niet: jullie hebben vandaag een website gebouwd die begon als een tekening. Dat is best bijzonder."
|
||||||
|
|
||||||
|
"Tot volgende week!"
|
||||||
|
|
||||||
|
*[Einde les]*
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## APPENDIX: 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)**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tips voor de docent
|
||||||
|
|
||||||
|
1. **Papier en pennen** - CRUCIAAL. Zorg dat iedereen kan tekenen. Heb extra papier en pennen klaar.
|
||||||
|
|
||||||
|
2. **Benadruk dat tekenen NIET mooi hoeft** - Studenten kunnen onzeker zijn. Maak duidelijk dat simpele blokken genoeg zijn.
|
||||||
|
|
||||||
|
3. **De ChatGPT prompt is de sleutel** - Loop rond en check of studenten volledige specificaties meegeven (tech stack, kleuren, stijl).
|
||||||
|
|
||||||
|
4. **Heb backup klaar** - Screenshots van je eigen demo-resultaten voor als v0 traag is of rate limit heeft.
|
||||||
|
|
||||||
|
5. **GitHub accounts** - Check vroeg in de les of iedereen dit heeft.
|
||||||
|
|
||||||
|
6. **Wandel rond tijdens opdracht** - Actief helpen voorkomt frustratie.
|
||||||
|
|
||||||
|
7. **De workflow herinneren** - Schets → Foto → ChatGPT (met specs) → Prompt → v0 → Deploy
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Checklist voor studenten
|
||||||
|
|
||||||
|
Zorg dat ze in hun ChatGPT prompt specificeren:
|
||||||
|
|
||||||
|
| Element | Voorbeeld |
|
||||||
|
|---------|-----------|
|
||||||
|
| Tech stack | "React met Tailwind CSS" |
|
||||||
|
| Kleuren | "#2563EB" of "warm oranje" |
|
||||||
|
| Stijl | "Modern, minimalistisch" |
|
||||||
|
| Responsive | "Mobile-first design" |
|
||||||
|
| Doel | "SaaS landingspagina" |
|
||||||
286
Les01-Introductie-AI/Les01-Lesplan.md
Normal file
286
Les01-Introductie-AI/Les01-Lesplan.md
Normal file
@@ -0,0 +1,286 @@
|
|||||||
|
# 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)** | |
|
||||||
|
|---|---|
|
||||||
|
| **Voorbereiding** | Studenten hebben zich ingeschreven voor een gratis account bij ChatGPT (chat.openai.com) en Claude (claude.ai). Optioneel: GitHub account aangemaakt. |
|
||||||
|
| **EdHub** | Hfst 1: Introductie AI (indien beschikbaar) |
|
||||||
|
| **Benodigdheden** | Laptop met internetverbinding, projectiescherm, **papier en pen voor elke student**, toegang tot v0.dev, GitHub 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 en GitHub account heeft. Laat studenten die dit nog moeten doen dit nu aanmaken. |
|
||||||
|
| | | |
|
||||||
|
| **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-4o, GPT-4o with canvas, GPT-4. |
|
||||||
|
| | | |
|
||||||
|
| | | **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. |
|
||||||
|
| | | |
|
||||||
|
| | | **Mini-oefening (3 min)** |
|
||||||
|
| | | Laat studenten experimenteren: start een chat, upload een afbeelding. |
|
||||||
|
| | | |
|
||||||
|
| | | **Clue: ChatGPT kan afbeeldingen "lezen" - dit gebruiken we straks om schetsen om te zetten naar prompts.** |
|
||||||
|
| | | |
|
||||||
|
| **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?
|
||||||
|
1. **Tech stack:** React met Tailwind CSS (v0 default)
|
||||||
|
2. **Kleuren:** Hex codes of beschrijving
|
||||||
|
3. **Stijl:** Modern/minimalistisch/speels/corporate etc.
|
||||||
|
4. **Responsive:** Mobile-first design
|
||||||
|
5. **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
|
||||||
|
1. Bijlage A: Lesopdracht - Van Schets naar Website met AI
|
||||||
|
2. Bijlage B: Huiswerkopdracht - Reflectie, Use Cases en Tweede Schets
|
||||||
696
Les01-Introductie-AI/Les01-Slide-Overzicht.md
Normal file
696
Les01-Introductie-AI/Les01-Slide-Overzicht.md
Normal file
@@ -0,0 +1,696 @@
|
|||||||
|
# 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:** [Naam]
|
||||||
|
**Datum:** [Datum]
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 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
|
||||||
177
Samenvattingen/Les01-Samenvatting.md
Normal file
177
Samenvattingen/Les01-Samenvatting.md
Normal file
@@ -0,0 +1,177 @@
|
|||||||
|
# Les 1: Introductie tot AI en Large Language Models
|
||||||
|
|
||||||
|
## 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
|
||||||
|
- Gratis vs betaalde modellen (features, context windows, rate limits)
|
||||||
|
- Wanneer welk model gebruiken
|
||||||
|
- Large Language Models (LLMs) en next-token prediction
|
||||||
|
- Hallucinaties en verificatie
|
||||||
|
|
||||||
|
### 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
|
||||||
|
1. **TEKEN** je idee op papier
|
||||||
|
2. Maak een **FOTO** van je tekening
|
||||||
|
3. Upload naar **CHATGPT** + beschrijf je wensen (tech stack, kleuren, stijl)
|
||||||
|
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)
|
||||||
|
|
||||||
|
### 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
|
||||||
|
- 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
|
||||||
92
Samenvattingen/Les02-Samenvatting.md
Normal file
92
Samenvattingen/Les02-Samenvatting.md
Normal file
@@ -0,0 +1,92 @@
|
|||||||
|
# Les 2: AI Code Assistants en OpenCode Desktop App
|
||||||
|
|
||||||
|
## Hoofdstuk
|
||||||
|
**Hoofdstuk 1: Fundamentals** (Les 1-3)
|
||||||
|
|
||||||
|
## Beschrijving
|
||||||
|
Introductie tot standalone AI coding tools. OpenCode als eerste hands-on ervaring met AI-geïntegreerde development.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Te Behandelen
|
||||||
|
|
||||||
|
### Theorie
|
||||||
|
- Verschil tussen chat-interfaces en geïntegreerde development tools
|
||||||
|
- OpenCode als standalone desktop applicatie (geen IDE nodig)
|
||||||
|
- Installatie en configuratie met gratis modellen (Ollama lokaal of Groq API)
|
||||||
|
- Interface verkenning: code editor, chat sidebar, terminal, file browser
|
||||||
|
- Best practices voor code generation prompts
|
||||||
|
- Iteratief werken met AI
|
||||||
|
- Wanneer welk model gebruiken (snelheid vs kwaliteit)
|
||||||
|
|
||||||
|
### Praktijk
|
||||||
|
- OpenCode installeren en configureren
|
||||||
|
- Gratis modellen testen (Ollama lokaal OF Groq API)
|
||||||
|
- Interface verkennen
|
||||||
|
- Component bouwen met AI assistance
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tools
|
||||||
|
- OpenCode (standalone)
|
||||||
|
- Ollama/Groq API
|
||||||
|
- Vercel
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Lesopdracht (2 uur)
|
||||||
|
|
||||||
|
**Deel 1: Setup (45 min)**
|
||||||
|
- Installeer OpenCode desktop app
|
||||||
|
- Koppel een gratis model: Ollama lokaal OF Groq API
|
||||||
|
- Test beide opties en kies wat voor jou werkt
|
||||||
|
|
||||||
|
**Deel 2: Interface Verkenning**
|
||||||
|
- Probeer code completion
|
||||||
|
- Test chat functionaliteit
|
||||||
|
- Terminal commands
|
||||||
|
- File operations
|
||||||
|
|
||||||
|
**Deel 3: Component Bouwen (1u 15min)**
|
||||||
|
- Bouw een complete responsive navbar component
|
||||||
|
- Mobile hamburger menu
|
||||||
|
- Alleen met AI assistance via OpenCode
|
||||||
|
|
||||||
|
**Documentatie:**
|
||||||
|
- Aantal prompts gebruikt
|
||||||
|
- Iteraties nodig
|
||||||
|
- Wat werkte goed/niet
|
||||||
|
- Hoeveel tijd bespaard vs handmatig coderen
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Huiswerk (2 uur)
|
||||||
|
|
||||||
|
**Component Library Bouwen:**
|
||||||
|
Bouw een volledige landing page component library met OpenCode:
|
||||||
|
- Hero section
|
||||||
|
- Features section (3 cards met icons)
|
||||||
|
- Testimonial card
|
||||||
|
- CTA section met button
|
||||||
|
- Footer
|
||||||
|
|
||||||
|
**Vereisten:**
|
||||||
|
- Alles responsive met Tailwind CSS
|
||||||
|
- Test op mobile en desktop
|
||||||
|
|
||||||
|
**Blog Post (300 woorden):**
|
||||||
|
Schrijf over je ervaring:
|
||||||
|
- Wat ging goed/fout
|
||||||
|
- Limitations van gratis modellen vs betaalde
|
||||||
|
- Hoe voelt AI-assisted coding met OpenCode standalone app
|
||||||
|
- Zou je dit blijven gebruiken?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Leerdoelen
|
||||||
|
Na deze les kan de student:
|
||||||
|
- OpenCode installeren en configureren
|
||||||
|
- Gratis AI modellen gebruiken (Ollama/Groq)
|
||||||
|
- De OpenCode interface effectief gebruiken
|
||||||
|
- Components bouwen met AI assistance
|
||||||
|
- Het verschil begrijpen tussen chat-interfaces en geïntegreerde tools
|
||||||
112
Samenvattingen/Les03-Samenvatting.md
Normal file
112
Samenvattingen/Les03-Samenvatting.md
Normal file
@@ -0,0 +1,112 @@
|
|||||||
|
# Les 3: AI Ethics, Privacy & Security + WebStorm Integration
|
||||||
|
|
||||||
|
## Hoofdstuk
|
||||||
|
**Hoofdstuk 1: Fundamentals** (Les 1-3)
|
||||||
|
|
||||||
|
## Beschrijving
|
||||||
|
Cruciale kennis over veilig en ethisch werken met AI, gecombineerd met professionele IDE workflow.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Te Behandelen
|
||||||
|
|
||||||
|
### Deel 1: Ethics, Privacy & Security (1 uur)
|
||||||
|
|
||||||
|
**Privacy Risico's - Wat NOOIT te delen:**
|
||||||
|
- API keys
|
||||||
|
- Client data
|
||||||
|
- Credentials
|
||||||
|
- Persoonlijke informatie
|
||||||
|
|
||||||
|
**Overige Onderwerpen:**
|
||||||
|
- Data ownership bij AI services
|
||||||
|
- Bias in AI models
|
||||||
|
- Security vulnerabilities (SQL injection, XSS, prompt injection)
|
||||||
|
- GDPR/AVG compliance basics
|
||||||
|
- Professional responsibility als developer
|
||||||
|
- Wanneer gebruik je AI wel/niet?
|
||||||
|
|
||||||
|
### Deel 2: WebStorm Integration (1 uur)
|
||||||
|
|
||||||
|
**WebStorm Setup:**
|
||||||
|
- WebStorm installatie (gratis via school licentie)
|
||||||
|
- OpenCode plugin voor WebStorm installeren en configureren
|
||||||
|
|
||||||
|
**Voordelen IDE vs Standalone:**
|
||||||
|
- Project context
|
||||||
|
- Git integration
|
||||||
|
- Debugging
|
||||||
|
- Refactoring tools
|
||||||
|
|
||||||
|
**Live Demo:**
|
||||||
|
- Zelfde taak in OpenCode standalone vs WebStorm
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tools
|
||||||
|
- WebStorm (school licentie)
|
||||||
|
- OpenCode plugin
|
||||||
|
- Git
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Lesopdracht (2 uur)
|
||||||
|
|
||||||
|
### Deel 1: Security Workshop (1 uur)
|
||||||
|
|
||||||
|
**Groepswerk (30 min):**
|
||||||
|
- Docent toont 3 AI-generated code snippets met security/privacy issues
|
||||||
|
- Studenten identificeren problemen in groepjes
|
||||||
|
|
||||||
|
**Individueel (30 min):**
|
||||||
|
- Laat AI code genereren voor een login form
|
||||||
|
- Review op security
|
||||||
|
- Fix problemen
|
||||||
|
- Maak persoonlijke "AI Safety Checklist" voor toekomstig gebruik
|
||||||
|
|
||||||
|
### Deel 2: WebStorm Setup (1 uur)
|
||||||
|
|
||||||
|
**Setup:**
|
||||||
|
- Installeer WebStorm met school licentie
|
||||||
|
- Installeer OpenCode plugin
|
||||||
|
- Configureer met je model
|
||||||
|
|
||||||
|
**Vergelijking:**
|
||||||
|
- Rebuild een component uit Les 2 in WebStorm
|
||||||
|
- Ervaar het verschil
|
||||||
|
|
||||||
|
**Documentatie:**
|
||||||
|
- Voordelen van IDE vs standalone
|
||||||
|
- Welke workflow prefereer je?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Huiswerk (2 uur)
|
||||||
|
|
||||||
|
**Bouw Secure Feature:**
|
||||||
|
Kies één van:
|
||||||
|
- Contact form met server-side validatie
|
||||||
|
- User authentication flow met JWT
|
||||||
|
|
||||||
|
**Process:**
|
||||||
|
1. Laat AI initial code genereren
|
||||||
|
2. Review met je Safety Checklist
|
||||||
|
3. Identificeer en fix alle security/privacy issues
|
||||||
|
|
||||||
|
**Uitgebreide README:**
|
||||||
|
- Wat AI genereerde
|
||||||
|
- Welke issues je vond (security, privacy, GDPR)
|
||||||
|
- Hoe je ze fixt
|
||||||
|
- Lessons learned
|
||||||
|
- Waarom WebStorm workflow beter/slechter is dan standalone OpenCode
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Leerdoelen
|
||||||
|
Na deze les kan de student:
|
||||||
|
- Privacy risico's bij AI-gebruik identificeren
|
||||||
|
- Security vulnerabilities in AI-gegenereerde code herkennen
|
||||||
|
- GDPR/AVG compliance basics begrijpen
|
||||||
|
- WebStorm met OpenCode plugin configureren
|
||||||
|
- Het verschil tussen standalone en IDE-geïntegreerde workflow beoordelen
|
||||||
|
- Een persoonlijke AI Safety Checklist toepassen
|
||||||
118
Samenvattingen/Les04-Samenvatting.md
Normal file
118
Samenvattingen/Les04-Samenvatting.md
Normal file
@@ -0,0 +1,118 @@
|
|||||||
|
# Les 4: Effectief Prompting, Iteratief Werken & Skills
|
||||||
|
|
||||||
|
## Hoofdstuk
|
||||||
|
**Hoofdstuk 2: Intermediate** (Les 4-9)
|
||||||
|
|
||||||
|
## Beschrijving
|
||||||
|
Geavanceerde prompt engineering technieken en introductie tot Skills.sh voor herbruikbare AI best practices.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Te Behandelen
|
||||||
|
|
||||||
|
### Geavanceerde Prompt Engineering
|
||||||
|
- Zero-shot vs few-shot prompting
|
||||||
|
- Chain-of-thought reasoning
|
||||||
|
- Role prompting
|
||||||
|
- Constraint-based prompting
|
||||||
|
|
||||||
|
### Skills.sh Introductie
|
||||||
|
- Wat zijn Skills (herbruikbare best-practices packages)
|
||||||
|
- Hoe Skills werken (procedurele kennis voor AI agents)
|
||||||
|
- Skills installeren via CLI (`npx skills add <skill-name>`)
|
||||||
|
- Skills gebruiken in OpenCode/WebStorm
|
||||||
|
- Hoe Skills de kwaliteit verhogen zonder extra prompting
|
||||||
|
|
||||||
|
### Iteratief Werken
|
||||||
|
- Start simpel → voeg complexiteit toe
|
||||||
|
- Context effectief gebruiken
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tools
|
||||||
|
- OpenCode/WebStorm
|
||||||
|
- Skills.sh
|
||||||
|
- vercel-react-best-practices skill
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Lesopdracht (2 uur)
|
||||||
|
|
||||||
|
### Deel 1: Skills Setup (30 min)
|
||||||
|
|
||||||
|
**Installatie:**
|
||||||
|
- Installeer Skills CLI
|
||||||
|
- Add "vercel-react-best-practices" skill
|
||||||
|
|
||||||
|
**Vergelijking:**
|
||||||
|
- Bouw component ZONDER skill active
|
||||||
|
- Bouw zelfde component WITH skill active
|
||||||
|
- Zie het verschil in code quality
|
||||||
|
|
||||||
|
**Documenteer concrete verschillen:**
|
||||||
|
- Types
|
||||||
|
- Error handling
|
||||||
|
- Accessibility
|
||||||
|
- Performance patterns
|
||||||
|
|
||||||
|
### Deel 2: Iterative Build Challenge met Skills (1u 30min)
|
||||||
|
|
||||||
|
**Bouw data filtering systeem voor productlijst in 4 iteraties (~25 min elk):**
|
||||||
|
|
||||||
|
| Iteratie | Focus |
|
||||||
|
|----------|-------|
|
||||||
|
| 1 | Basis filter dropdown (category) |
|
||||||
|
| 2 | Meer filters (price range slider, brand checkboxes, rating stars) met Skills guidance |
|
||||||
|
| 3 | UX polish (clear all filters button, active filter chips, mobile responsive, loading states) |
|
||||||
|
| 4 | URL state management & advanced features (sorting, search) |
|
||||||
|
|
||||||
|
**Documenteer per iteratie:**
|
||||||
|
- Hoe hielpen Skills?
|
||||||
|
- Welke best practices werden automatisch toegepast?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Huiswerk (2 uur)
|
||||||
|
|
||||||
|
### Deel 1: Prompt Library (1 uur)
|
||||||
|
|
||||||
|
Maak persoonlijke "prompt library" met 8 herbruikbare, geoptimaliseerde prompts voor:
|
||||||
|
1. Component creation
|
||||||
|
2. Bug fixing
|
||||||
|
3. Refactoring
|
||||||
|
4. Testing
|
||||||
|
5. API integration
|
||||||
|
6. Form validation
|
||||||
|
7. Responsive layout
|
||||||
|
8. Performance optimization
|
||||||
|
|
||||||
|
**Vereisten:**
|
||||||
|
- Test elk met ChatGPT EN Claude
|
||||||
|
- Verfijn tot consistent goede output
|
||||||
|
- Format: Markdown document met prompt templates
|
||||||
|
|
||||||
|
### Deel 2: Skills Exploration (1 uur)
|
||||||
|
|
||||||
|
**Installeer 3 relevante Skills:**
|
||||||
|
1. "web-design-guidelines"
|
||||||
|
2. "frontend-design"
|
||||||
|
3. "supabase-postgres-best-practices" OF andere relevante skill
|
||||||
|
|
||||||
|
**Per skill:**
|
||||||
|
- Bouw klein component/feature met de skill active
|
||||||
|
- Documenteer wat de skill doet
|
||||||
|
- Concrete voorbeelden van hoe ze AI output beïnvloeden
|
||||||
|
|
||||||
|
**Bonus:** Bekijk "skill-creator" skill
|
||||||
|
|
||||||
|
**Delen:** Als GitHub gist
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Leerdoelen
|
||||||
|
Na deze les kan de student:
|
||||||
|
- Geavanceerde prompt technieken toepassen (zero-shot, few-shot, chain-of-thought)
|
||||||
|
- Skills installeren en gebruiken
|
||||||
|
- Het verschil zien tussen output met en zonder Skills
|
||||||
|
- Iteratief werken (simpel → complex)
|
||||||
|
- Een persoonlijke prompt library opbouwen
|
||||||
115
Samenvattingen/Les05-Samenvatting.md
Normal file
115
Samenvattingen/Les05-Samenvatting.md
Normal file
@@ -0,0 +1,115 @@
|
|||||||
|
# Les 5: AI voor Content en Asset Generation
|
||||||
|
|
||||||
|
## Hoofdstuk
|
||||||
|
**Hoofdstuk 2: Intermediate** (Les 4-9)
|
||||||
|
|
||||||
|
## Beschrijving
|
||||||
|
AI-gegenereerde visuals en assets voor professionele webprojecten.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Te Behandelen
|
||||||
|
|
||||||
|
### Image Generation Tools Vergelijking
|
||||||
|
- DALL-E 3 (via ChatGPT Plus)
|
||||||
|
- Leonardo.ai
|
||||||
|
- Ideogram
|
||||||
|
- Midjourney alternatives
|
||||||
|
|
||||||
|
### Prompt Engineering voor Images
|
||||||
|
- Style descriptors
|
||||||
|
- Mood en colors
|
||||||
|
- Composition
|
||||||
|
- Aspect ratios
|
||||||
|
- Negative prompts
|
||||||
|
|
||||||
|
### Asset Generation Workflow voor Web
|
||||||
|
- Hero images
|
||||||
|
- Icons
|
||||||
|
- Illustrations
|
||||||
|
- Backgrounds
|
||||||
|
|
||||||
|
### Image Optimization voor Web
|
||||||
|
- Compression
|
||||||
|
- Formats (WebP, AVIF, etc.)
|
||||||
|
- Responsive images
|
||||||
|
|
||||||
|
### Copyright & Licenties
|
||||||
|
- Copyright overwegingen bij AI-generated content
|
||||||
|
- Wat mag wel/niet
|
||||||
|
|
||||||
|
### Integratie in Next.js
|
||||||
|
- Next.js Image component optimalisatie
|
||||||
|
- Best practices
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tools
|
||||||
|
- DALL-E 3 (ChatGPT Plus)
|
||||||
|
- Leonardo.ai
|
||||||
|
- Ideogram
|
||||||
|
- Next.js Image component
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Lesopdracht (2 uur)
|
||||||
|
|
||||||
|
### Complete Visual Identity Challenge
|
||||||
|
|
||||||
|
**Kies thema voor fictieve SaaS landing page:**
|
||||||
|
- Project management
|
||||||
|
- Fitness app
|
||||||
|
- Educational platform
|
||||||
|
- Of eigen keuze
|
||||||
|
|
||||||
|
**Genereer complete asset set:**
|
||||||
|
|
||||||
|
| Asset | Specificaties |
|
||||||
|
|-------|---------------|
|
||||||
|
| Hero image | 16:9 landscape |
|
||||||
|
| Feature icons | 6 stuks, consistent style, SVG-ready |
|
||||||
|
| Custom illustraties | 2 stuks voor sections |
|
||||||
|
| Background pattern | Seamless texture |
|
||||||
|
| Favicon | Multiple sizes |
|
||||||
|
|
||||||
|
**Vereisten:**
|
||||||
|
- Alle assets visueel consistent (coherent color palette, matching style, professional look)
|
||||||
|
- Geoptimaliseerd voor web (<200KB per image, correct formats)
|
||||||
|
- Geïntegreerd in Next.js landing page met Tailwind CSS
|
||||||
|
- Proper Image component usage
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Huiswerk (2 uur)
|
||||||
|
|
||||||
|
### Portfolio Project Visual Refresh
|
||||||
|
|
||||||
|
**Opdracht:**
|
||||||
|
- Kies een bestaand project uit eerdere lessen (of bouw nieuw landing page project)
|
||||||
|
- Vervang ALLE placeholder images met professioneel AI-gegenereerde assets
|
||||||
|
- Doel: cohesieve visual identity die eruitziet als professional design work
|
||||||
|
|
||||||
|
**Case Study Blog Post (400 woorden):**
|
||||||
|
|
||||||
|
Schrijf over:
|
||||||
|
- Prompts die werkten
|
||||||
|
- Iteratie proces
|
||||||
|
- Challenges encountered
|
||||||
|
- AI vs stock photos/Unsplash comparison
|
||||||
|
- Time saved estimate
|
||||||
|
- Quality assessment
|
||||||
|
- Zou je dit in productie gebruiken?
|
||||||
|
- Tips voor anderen
|
||||||
|
|
||||||
|
**Include:** Before/after screenshots
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Leerdoelen
|
||||||
|
Na deze les kan de student:
|
||||||
|
- Verschillende image generation tools vergelijken
|
||||||
|
- Effectieve prompts schrijven voor image generatie
|
||||||
|
- Consistente visual assets genereren voor webprojecten
|
||||||
|
- Images optimaliseren voor web performance
|
||||||
|
- Copyright overwegingen bij AI-generated content begrijpen
|
||||||
|
- Assets integreren in Next.js met proper optimization
|
||||||
133
Samenvattingen/Les06-Samenvatting.md
Normal file
133
Samenvattingen/Les06-Samenvatting.md
Normal file
@@ -0,0 +1,133 @@
|
|||||||
|
# Les 6: MCP (Model Context Protocol) & Component Libraries
|
||||||
|
|
||||||
|
## Hoofdstuk
|
||||||
|
**Hoofdstuk 2: Intermediate** (Les 4-9)
|
||||||
|
|
||||||
|
## Beschrijving
|
||||||
|
Revolutionaire manier om AI te verbinden met data sources via MCP, gecombineerd met systematisch component library bouwen.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Te Behandelen
|
||||||
|
|
||||||
|
### MCP (Model Context Protocol)
|
||||||
|
|
||||||
|
**Wat is MCP?**
|
||||||
|
- Anthropic's protocol om LLMs veilig te verbinden met externe tools en data
|
||||||
|
|
||||||
|
**Waarom MCP belangrijk is:**
|
||||||
|
- Gestructureerde data access
|
||||||
|
- Security
|
||||||
|
- Reusability
|
||||||
|
|
||||||
|
**MCP Servers:**
|
||||||
|
- Filesystem
|
||||||
|
- Databases (Supabase/PostgreSQL)
|
||||||
|
- APIs (GitHub, Slack, Google Drive)
|
||||||
|
- Web search
|
||||||
|
|
||||||
|
**MCP Installatie en Configuratie:**
|
||||||
|
- Claude Desktop configuratie
|
||||||
|
|
||||||
|
### Component Libraries & Design Systems
|
||||||
|
|
||||||
|
**Shadcn/ui:**
|
||||||
|
- Systematisch bouwen met Shadcn/ui
|
||||||
|
- Design tokens en consistency
|
||||||
|
|
||||||
|
**Component Patterns:**
|
||||||
|
- Component composition patterns
|
||||||
|
- Building data-driven components die MCP data consumeren
|
||||||
|
- Accessibility in component libraries
|
||||||
|
- Documentation patterns
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tools
|
||||||
|
- Claude Desktop
|
||||||
|
- MCP servers
|
||||||
|
- Shadcn/ui
|
||||||
|
- OpenCode/WebStorm
|
||||||
|
- Supabase
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Lesopdracht (2 uur)
|
||||||
|
|
||||||
|
### Deel 1: MCP Setup (45 min)
|
||||||
|
|
||||||
|
**Installatie:**
|
||||||
|
- Installeer Claude Desktop app
|
||||||
|
- Configureer MCP servers:
|
||||||
|
- Filesystem server (access local files)
|
||||||
|
- Supabase MCP server (connect to database)
|
||||||
|
|
||||||
|
**Test MCP:**
|
||||||
|
- Vraag Claude om data uit je Supabase database te tonen
|
||||||
|
- Of files uit je project te analyseren
|
||||||
|
- Zie hoe Claude real-time data kan ophalen en gebruiken
|
||||||
|
|
||||||
|
### Deel 2: Component Library met MCP Data (1u 15min)
|
||||||
|
|
||||||
|
**Bouw Shadcn-based component library met AI in OpenCode/WebStorm:**
|
||||||
|
|
||||||
|
| Component | Features |
|
||||||
|
|-----------|----------|
|
||||||
|
| DataTable | Sortable, filterable, pagination |
|
||||||
|
| Card | Variant system |
|
||||||
|
| Form components | Input, Select, Textarea met validation states |
|
||||||
|
| Button | Size variants, loading states, icon support |
|
||||||
|
|
||||||
|
**MCP Integration:**
|
||||||
|
- Bouw Dashboard component die via MCP data uit Supabase haalt
|
||||||
|
- Toon data in je components
|
||||||
|
- Test: wijzig data in database, zie updates via MCP
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Huiswerk (2 uur)
|
||||||
|
|
||||||
|
### Deel 1: Extend Component Library (1 uur)
|
||||||
|
|
||||||
|
**Voeg 5 extra components toe:**
|
||||||
|
1. Modal/Dialog
|
||||||
|
2. Toast notifications
|
||||||
|
3. Dropdown Menu
|
||||||
|
4. Tabs
|
||||||
|
5. Accordion
|
||||||
|
|
||||||
|
**Alle components moeten hebben:**
|
||||||
|
- TypeScript
|
||||||
|
- Accessibility (ARIA)
|
||||||
|
- Dark mode support
|
||||||
|
- Responsive
|
||||||
|
|
||||||
|
**Gebruik AI + Skills voor consistent design**
|
||||||
|
|
||||||
|
### Deel 2: MCP Deep Dive (1 uur)
|
||||||
|
|
||||||
|
**Experimenteer met extra MCP servers:**
|
||||||
|
- Install GitHub MCP server (access repos/issues)
|
||||||
|
- Of Google Drive MCP server
|
||||||
|
- Of custom MCP server voor een API
|
||||||
|
|
||||||
|
**Bouw feature die MCP data combineert:**
|
||||||
|
- Bijv. dashboard dat GitHub issues + Supabase data toont
|
||||||
|
|
||||||
|
**Documenteer:**
|
||||||
|
- Wat kun je allemaal met MCP?
|
||||||
|
- Wat zijn limitations?
|
||||||
|
- Hoe verschilt dit van normale API calls?
|
||||||
|
|
||||||
|
**Deel als GitHub repo met MCP setup instructions**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Leerdoelen
|
||||||
|
Na deze les kan de student:
|
||||||
|
- MCP begrijpen en configureren in Claude Desktop
|
||||||
|
- MCP servers koppelen (filesystem, Supabase, APIs)
|
||||||
|
- Een systematische component library bouwen met Shadcn/ui
|
||||||
|
- Data-driven components bouwen die MCP data consumeren
|
||||||
|
- Accessibility implementeren in component libraries
|
||||||
|
- Het verschil tussen MCP en normale API calls uitleggen
|
||||||
115
Samenvattingen/Les07-Samenvatting.md
Normal file
115
Samenvattingen/Les07-Samenvatting.md
Normal file
@@ -0,0 +1,115 @@
|
|||||||
|
# Les 7: Backend Made Easy met Supabase + AI + Skills
|
||||||
|
|
||||||
|
## Hoofdstuk
|
||||||
|
**Hoofdstuk 2: Intermediate** (Les 4-9)
|
||||||
|
|
||||||
|
## Beschrijving
|
||||||
|
Gebruik AI om backend te bouwen zonder backend expert te zijn. Focus op Supabase + AI + Skills combinatie.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Te Behandelen
|
||||||
|
|
||||||
|
### Supabase Overview
|
||||||
|
- Open-source Firebase alternative
|
||||||
|
|
||||||
|
**Core Features:**
|
||||||
|
- Postgres database
|
||||||
|
- Authentication
|
||||||
|
- Storage
|
||||||
|
- Realtime
|
||||||
|
- Edge Functions
|
||||||
|
- Vector database
|
||||||
|
|
||||||
|
### Waarom Supabase + AI Perfect Combo
|
||||||
|
- AI helpt met complexe database dingen
|
||||||
|
|
||||||
|
### Skills voor Supabase
|
||||||
|
- "supabase-postgres-best-practices" skill
|
||||||
|
|
||||||
|
### Database Design met AI + Skills
|
||||||
|
- Natuurlijke taal → genormaliseerd schema
|
||||||
|
|
||||||
|
### Row Level Security (RLS)
|
||||||
|
- RLS policies met AI + Skills
|
||||||
|
- Waarom RLS belangrijk is
|
||||||
|
|
||||||
|
### TypeScript Types
|
||||||
|
- Supabase CLI auto-genereert types van database
|
||||||
|
|
||||||
|
### Supabase Client
|
||||||
|
- Setup
|
||||||
|
- Basis CRUD operaties
|
||||||
|
- Realtime subscriptions intro
|
||||||
|
- Supabase Storage intro
|
||||||
|
|
||||||
|
### Focus
|
||||||
|
AI + Skills doen zwaar werk, jij leert concepten
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tools
|
||||||
|
- OpenCode/WebStorm
|
||||||
|
- Supabase
|
||||||
|
- supabase-postgres-best-practices skill
|
||||||
|
- Next.js
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Lesopdracht (2 uur)
|
||||||
|
|
||||||
|
### Deel 1: Supabase Skills Setup (10 min)
|
||||||
|
- Installeer "supabase-postgres-best-practices" skill in OpenCode/WebStorm
|
||||||
|
- Maak gratis Supabase project
|
||||||
|
- Bewaar credentials
|
||||||
|
|
||||||
|
### Deel 2: Bouw Todo App Backend (1u 50min)
|
||||||
|
|
||||||
|
**Database Schema met AI + Skill (30 min):**
|
||||||
|
- Prompt: "Ontwerp database schema voor todo app met users, todos (title, description, due_date, priority, completed), categories, proper relationships."
|
||||||
|
|
||||||
|
**RLS Policies met AI + Skill (30 min):**
|
||||||
|
- Prompt: "Maak RLS policies: users kunnen alleen hun eigen todos zien/bewerken."
|
||||||
|
|
||||||
|
**Next.js Integratie (50 min):**
|
||||||
|
- Setup Supabase client
|
||||||
|
- Bouw UI:
|
||||||
|
- Create todo
|
||||||
|
- List todos
|
||||||
|
- Complete/delete
|
||||||
|
- Filter by category
|
||||||
|
- Implementeer CRUD met error handling
|
||||||
|
- Test of RLS werkt
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Huiswerk (2 uur)
|
||||||
|
|
||||||
|
### Extend Todo App
|
||||||
|
|
||||||
|
**Nieuwe Features:**
|
||||||
|
1. **Categories systeem** - create/assign/filter, colors
|
||||||
|
2. **User profile pagina** - avatar upload naar Storage, display name
|
||||||
|
3. **Stats dashboard** - completed vs incomplete charts, trends
|
||||||
|
|
||||||
|
**Deployment:**
|
||||||
|
- Deploy naar Vercel met proper env vars
|
||||||
|
|
||||||
|
### Reflectie (400 woorden)
|
||||||
|
|
||||||
|
Schrijf over:
|
||||||
|
- Verschil in security/quality met vs zonder Supabase skill?
|
||||||
|
- Nieuwe patterns geleerd?
|
||||||
|
- Queries die je fout zou schrijven zonder AI?
|
||||||
|
- Zou je backend bouwen zonder AI hulp?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Leerdoelen
|
||||||
|
Na deze les kan de student:
|
||||||
|
- Supabase project opzetten en configureren
|
||||||
|
- Database schema's ontwerpen met AI + Skills
|
||||||
|
- Row Level Security (RLS) policies implementeren
|
||||||
|
- TypeScript types genereren van database
|
||||||
|
- CRUD operaties implementeren met Supabase client
|
||||||
|
- De supabase-postgres-best-practices skill effectief gebruiken
|
||||||
145
Samenvattingen/Les08-Samenvatting.md
Normal file
145
Samenvattingen/Les08-Samenvatting.md
Normal file
@@ -0,0 +1,145 @@
|
|||||||
|
# Les 8: Claude Code - Agentic Coding Mode
|
||||||
|
|
||||||
|
## Hoofdstuk
|
||||||
|
**Hoofdstuk 3: Advanced** (Les 8-18)
|
||||||
|
|
||||||
|
## Beschrijving
|
||||||
|
Kennismaking met Claude Code - autonome AI coding agent die zelfstandig multi-file changes kan plannen en uitvoeren.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Te Behandelen
|
||||||
|
|
||||||
|
### Wat is Claude Code?
|
||||||
|
- Agentic coding mode
|
||||||
|
- AI neemt initiatief
|
||||||
|
- Plant multi-step changes
|
||||||
|
- Bewerkt multiple files autonoom
|
||||||
|
|
||||||
|
### Verschil met Chat-Based Coding
|
||||||
|
- Jij beschrijft WAT
|
||||||
|
- Claude Code figured out HOE en doet het
|
||||||
|
|
||||||
|
### Claude Desktop Modes
|
||||||
|
- Chat
|
||||||
|
- Projects
|
||||||
|
- Cowork
|
||||||
|
- Code
|
||||||
|
|
||||||
|
### Wanneer Claude Code Gebruiken
|
||||||
|
- Nieuwe features
|
||||||
|
- Grote refactoring
|
||||||
|
- Complexe bugs
|
||||||
|
- Test generation
|
||||||
|
|
||||||
|
### Hoe Claude Code Werkt
|
||||||
|
1. High-level instructie
|
||||||
|
2. Claude analyseert
|
||||||
|
3. Maakt plan
|
||||||
|
4. Bewerkt files
|
||||||
|
5. Runt tests
|
||||||
|
6. Itereert
|
||||||
|
|
||||||
|
### Skills in Claude Code
|
||||||
|
- Automatisch toegepast
|
||||||
|
|
||||||
|
### Best Practices
|
||||||
|
- Geef duidelijke high-level doelen
|
||||||
|
- Laat autonoom werken
|
||||||
|
- Review changes zorgvuldig
|
||||||
|
|
||||||
|
### Vergelijking
|
||||||
|
| Tool | Aanpak |
|
||||||
|
|------|--------|
|
||||||
|
| OpenCode/WebStorm | Step-by-step guidance |
|
||||||
|
| Claude Code | Autonome agent |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tools
|
||||||
|
- Claude Desktop (Code mode)
|
||||||
|
- Skills.sh
|
||||||
|
- Supabase
|
||||||
|
- Next.js
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Lesopdracht (2 uur)
|
||||||
|
|
||||||
|
### Deel 1: Claude Code Verkenning (30 min)
|
||||||
|
|
||||||
|
**Setup:**
|
||||||
|
- Open Claude Desktop
|
||||||
|
- Navigeer naar Code mode
|
||||||
|
- Installeer relevante Skills eerst
|
||||||
|
|
||||||
|
**Complexe Taak:**
|
||||||
|
> "Bouw multi-step form wizard: 3 stappen (personal info, company details, preferences), progress indicator, validatie per step, data in useState, animations tussen steps, TypeScript, Shadcn components."
|
||||||
|
|
||||||
|
- Laat Claude Code autonoom werken
|
||||||
|
- Kijk hoe het plant en uitvoert
|
||||||
|
- Vergelijk: hoe anders is dit dan manual prompting in OpenCode?
|
||||||
|
|
||||||
|
### Deel 2: Autonome Feature Development (1u 30min)
|
||||||
|
|
||||||
|
**Bouw User Dashboard met Stats:**
|
||||||
|
|
||||||
|
Requirements:
|
||||||
|
- Haal user data uit Supabase
|
||||||
|
- Toon profile info
|
||||||
|
- 4 stat cards
|
||||||
|
- Activity feed
|
||||||
|
- Charts met recharts
|
||||||
|
- Alles responsive
|
||||||
|
- Loading states
|
||||||
|
- Error handling
|
||||||
|
|
||||||
|
**Process:**
|
||||||
|
- Geef high-level beschrijving
|
||||||
|
- Relevante context files (@mentions)
|
||||||
|
- Laat autonoom werken
|
||||||
|
|
||||||
|
**Track:**
|
||||||
|
- Hoeveel iteraties?
|
||||||
|
- Manual fixes nodig?
|
||||||
|
- Vergelijk tijd vs handmatig bouwen
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Huiswerk (2 uur)
|
||||||
|
|
||||||
|
### Deel 1: Complexe Refactoring (1 uur)
|
||||||
|
|
||||||
|
**Neem Todo app uit Les 7, gebruik Claude Code voor grote refactoring:**
|
||||||
|
|
||||||
|
> "Extract alle Supabase queries naar aparte queries.ts file met proper error handling en TypeScript types. Update alle components om nieuwe query functions te gebruiken."
|
||||||
|
|
||||||
|
- Laat autonoom handlen
|
||||||
|
- Verifieer dat alles werkt
|
||||||
|
- Documenteer: hoe goed handelde Claude Code het?
|
||||||
|
|
||||||
|
### Deel 2: Comparison Essay (1 uur)
|
||||||
|
|
||||||
|
**Schrijf vergelijkings essay (500 woorden):**
|
||||||
|
|
||||||
|
OpenCode/WebStorm (step-by-step) vs Claude Code (autonome agent)
|
||||||
|
|
||||||
|
**Vergelijk op:**
|
||||||
|
- Autonomie niveau
|
||||||
|
- Snelheid
|
||||||
|
- Accuratesse
|
||||||
|
- Wanneer welke gebruiken
|
||||||
|
|
||||||
|
**Include:** Concrete voorbeelden
|
||||||
|
|
||||||
|
**Final verdict:** Tool voorkeur going forward?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Leerdoelen
|
||||||
|
Na deze les kan de student:
|
||||||
|
- Claude Code (agentic mode) activeren en gebruiken
|
||||||
|
- Het verschil uitleggen tussen chat-based en agentic coding
|
||||||
|
- High-level instructies geven voor autonome development
|
||||||
|
- Multi-file changes laten plannen en uitvoeren door Claude Code
|
||||||
|
- De juiste tool kiezen (OpenCode vs Claude Code) per situatie
|
||||||
137
Samenvattingen/Les09-Samenvatting.md
Normal file
137
Samenvattingen/Les09-Samenvatting.md
Normal file
@@ -0,0 +1,137 @@
|
|||||||
|
# Les 9: AI Agents - Custom GPTs & Claude Projects
|
||||||
|
|
||||||
|
## Hoofdstuk
|
||||||
|
**Hoofdstuk 3: Advanced** (Les 8-18)
|
||||||
|
|
||||||
|
## Beschrijving
|
||||||
|
Deep dive in AI agents - autonome systemen die kunnen plannen, tools gebruiken, en taken uitvoeren.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Te Behandelen
|
||||||
|
|
||||||
|
### Wat zijn AI Agents?
|
||||||
|
- Verschil tussen chatbot vs agent
|
||||||
|
|
||||||
|
### Agent Capabilities
|
||||||
|
- Tool use
|
||||||
|
- Memory
|
||||||
|
- Planning
|
||||||
|
- Learning
|
||||||
|
- Proactief gedrag
|
||||||
|
|
||||||
|
### Agent Frameworks Landschap
|
||||||
|
- Custom GPTs
|
||||||
|
- Claude Projects
|
||||||
|
- LangChain
|
||||||
|
- AutoGPT
|
||||||
|
- CrewAI
|
||||||
|
|
||||||
|
### Custom GPTs Deep Dive
|
||||||
|
- Instructions
|
||||||
|
- Conversation starters
|
||||||
|
- Knowledge base upload
|
||||||
|
- Capabilities
|
||||||
|
|
||||||
|
### Use Cases voor Developers
|
||||||
|
- Code review agent
|
||||||
|
- Testing agent
|
||||||
|
- Documentation generator
|
||||||
|
|
||||||
|
### Claude Projects Deep Dive
|
||||||
|
- Custom instructions
|
||||||
|
- Project knowledge
|
||||||
|
- Example conversations
|
||||||
|
- Advanced features (artifacts, long context, tool use)
|
||||||
|
|
||||||
|
### Projects Combineren met MCP
|
||||||
|
- Access tot externe data
|
||||||
|
|
||||||
|
### Real-World Developer Agents Bouwen
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tools
|
||||||
|
- Custom GPTs (OpenAI)
|
||||||
|
- Claude Projects (Anthropic)
|
||||||
|
- MCP
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Lesopdracht (2 uur)
|
||||||
|
|
||||||
|
### Deel 1: Build Code Review Agent (1 uur)
|
||||||
|
|
||||||
|
**Groepswerk (20 min):**
|
||||||
|
In groepjes van 2-3:
|
||||||
|
- Definieer comprehensive code review checklist:
|
||||||
|
- TypeScript
|
||||||
|
- React patterns
|
||||||
|
- Accessibility
|
||||||
|
- Security
|
||||||
|
- Performance
|
||||||
|
- Code organization
|
||||||
|
|
||||||
|
**Maak Agent (30 min):**
|
||||||
|
- Maak Custom GPT OF Claude Project met checklist als instructions
|
||||||
|
- Upload sample "goede" code als knowledge base (10 min)
|
||||||
|
|
||||||
|
### Deel 2: Build Documentation Agent (1 uur)
|
||||||
|
|
||||||
|
**Individueel:**
|
||||||
|
|
||||||
|
Maak agent die comprehensive documentatie genereert.
|
||||||
|
|
||||||
|
**Instructions:**
|
||||||
|
> "Je bent documentatie expert. Gegeven component code, genereer:
|
||||||
|
> 1. Component overview
|
||||||
|
> 2. Props documentatie
|
||||||
|
> 3. Usage voorbeelden
|
||||||
|
> 4. Accessibility notes
|
||||||
|
> 5. Veel voorkomende valkuilen"
|
||||||
|
|
||||||
|
- Upload component library uit Les 6 als knowledge base
|
||||||
|
- Test agent met component
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Huiswerk (2 uur)
|
||||||
|
|
||||||
|
### Deel 1: Test Agents in Workflow (1 uur)
|
||||||
|
|
||||||
|
**Bouw nieuwe Todo app feature:**
|
||||||
|
- Bijv. "Collaboration - invite users om todos te delen"
|
||||||
|
|
||||||
|
**Gebruik beide agents:**
|
||||||
|
- Code Review agent om code te reviewen
|
||||||
|
- Documentation agent om te documenteren
|
||||||
|
|
||||||
|
**Track:**
|
||||||
|
- Hoe helpful?
|
||||||
|
- Vingen ze echte issues?
|
||||||
|
- Zou je dagelijks gebruiken?
|
||||||
|
|
||||||
|
### Deel 2: Personal Dev Assistant (1 uur)
|
||||||
|
|
||||||
|
**Maak comprehensive "Personal Dev Assistant" agent afgestemd op JOUW workflow.**
|
||||||
|
|
||||||
|
**Include:**
|
||||||
|
- Jouw coding standards
|
||||||
|
- Preferred patterns
|
||||||
|
- Tech stack specifics
|
||||||
|
- Veel voorkomende taken
|
||||||
|
- Troubleshooting kennis
|
||||||
|
|
||||||
|
- Test extensively
|
||||||
|
- Deel agent config als gist
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Leerdoelen
|
||||||
|
Na deze les kan de student:
|
||||||
|
- Het verschil uitleggen tussen chatbots en AI agents
|
||||||
|
- Custom GPTs bouwen met instructions en knowledge base
|
||||||
|
- Claude Projects opzetten met custom instructions
|
||||||
|
- Specialized developer agents bouwen (code review, documentation)
|
||||||
|
- Agents combineren met MCP voor externe data access
|
||||||
|
- Een personal dev assistant agent maken
|
||||||
144
Samenvattingen/Les10-Samenvatting.md
Normal file
144
Samenvattingen/Les10-Samenvatting.md
Normal file
@@ -0,0 +1,144 @@
|
|||||||
|
# Les 10: Supabase Automation - Cron Jobs, Webhooks & AI Workflows
|
||||||
|
|
||||||
|
## Hoofdstuk
|
||||||
|
**Hoofdstuk 3: Advanced** (Les 8-18)
|
||||||
|
|
||||||
|
## Beschrijving
|
||||||
|
Leer dingen automatiseren met Supabase cron jobs die AI agents triggeren voor intelligente workflows.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Te Behandelen
|
||||||
|
|
||||||
|
### Waarom Automatiseren?
|
||||||
|
- Verminder manual werk
|
||||||
|
- Consistente executie
|
||||||
|
- Scale zonder effort
|
||||||
|
- 24/7 beschikbaarheid
|
||||||
|
|
||||||
|
### Types van Automation
|
||||||
|
- Scheduled tasks (cron jobs)
|
||||||
|
- Event-driven (webhooks)
|
||||||
|
- AI-powered workflows
|
||||||
|
|
||||||
|
### Supabase Edge Functions voor Automation
|
||||||
|
- Deno runtime
|
||||||
|
- TypeScript
|
||||||
|
- Serverless at edge
|
||||||
|
|
||||||
|
### Scheduled Edge Functions (Cron Jobs)
|
||||||
|
- Timing configuratie
|
||||||
|
- Use cases
|
||||||
|
|
||||||
|
### Webhook Edge Functions
|
||||||
|
- Getriggerd door database changes
|
||||||
|
|
||||||
|
### AI Integratie in Edge Functions
|
||||||
|
- Call OpenAI/Anthropic APIs
|
||||||
|
- Process data met AI
|
||||||
|
|
||||||
|
### Supabase Cron Jobs
|
||||||
|
- pg_cron extension
|
||||||
|
- Schedule taken in Postgres
|
||||||
|
|
||||||
|
### Database Webhooks
|
||||||
|
- Supabase Realtime broadcasts
|
||||||
|
- INSERT/UPDATE/DELETE triggers
|
||||||
|
|
||||||
|
### Edge Functions Chainen
|
||||||
|
webhook → Edge Function → AI → actie
|
||||||
|
|
||||||
|
### AI Automation Workflow Patterns
|
||||||
|
- Nieuwe user → AI onboarding email
|
||||||
|
- Content → AI moderatie → approve/reject
|
||||||
|
- Dagelijks → data → AI summary → email
|
||||||
|
|
||||||
|
### AI Agents in Automation
|
||||||
|
- Monitoring agents
|
||||||
|
- Data verrijking agents
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tools
|
||||||
|
- Supabase (Edge Functions, pg_cron)
|
||||||
|
- Claude API / OpenAI API
|
||||||
|
- Resend / SendGrid (email)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Lesopdracht (2 uur)
|
||||||
|
|
||||||
|
Bouw 2 automation workflows: 1 scheduled + 1 event-driven met AI.
|
||||||
|
|
||||||
|
### Deel 1: Scheduled - Daily Summary Email (1 uur)
|
||||||
|
|
||||||
|
**Flow:**
|
||||||
|
```
|
||||||
|
Supabase cron (dagelijks 9:00)
|
||||||
|
→ Edge Function
|
||||||
|
→ Haal gisteren's data op
|
||||||
|
→ Claude API voor intelligente samenvatting
|
||||||
|
→ Email via Resend/SendGrid
|
||||||
|
```
|
||||||
|
|
||||||
|
- Implementatie
|
||||||
|
- Test
|
||||||
|
- Documentatie
|
||||||
|
|
||||||
|
### Deel 2: Event-Driven - AI Content Moderation (1 uur)
|
||||||
|
|
||||||
|
**Trigger:** Webhook bij nieuwe todo
|
||||||
|
|
||||||
|
**Flow:**
|
||||||
|
```
|
||||||
|
INSERT
|
||||||
|
→ Webhook
|
||||||
|
→ Edge Function
|
||||||
|
→ Claude API moderatie check
|
||||||
|
→ Flag if problematisch
|
||||||
|
→ Enrich if clean (tags, effort estimate, subtask suggestions)
|
||||||
|
→ Save to database
|
||||||
|
```
|
||||||
|
|
||||||
|
- Implementatie
|
||||||
|
- Test
|
||||||
|
- Documentatie
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Huiswerk (2 uur)
|
||||||
|
|
||||||
|
### Deel 1: Intelligente Notificaties (1 uur)
|
||||||
|
|
||||||
|
**Cron 8:00:**
|
||||||
|
- Haal due todos op
|
||||||
|
- Per user: Claude genereert gepersonaliseerd motiverend bericht
|
||||||
|
- Email met AI message + todo lijst
|
||||||
|
|
||||||
|
### Deel 2: AI Task Breakdown Agent (1 uur)
|
||||||
|
|
||||||
|
**Webhook op INSERT:**
|
||||||
|
- Als todo lang/complex → automatisch Claude aanroepen
|
||||||
|
- Suggestie 3-5 subtaken
|
||||||
|
- Auto-create in database
|
||||||
|
|
||||||
|
**Test met complex todo**
|
||||||
|
|
||||||
|
### Deliverables
|
||||||
|
- 4 werkende automations
|
||||||
|
- Documentatie
|
||||||
|
- Reflectie (300 woorden):
|
||||||
|
- Kracht van automation?
|
||||||
|
- Wat nog meer automatiseren?
|
||||||
|
- Gebruik in echte projecten?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Leerdoelen
|
||||||
|
Na deze les kan de student:
|
||||||
|
- Supabase Edge Functions schrijven en deployen
|
||||||
|
- Cron jobs configureren met pg_cron
|
||||||
|
- Webhooks triggeren op database changes
|
||||||
|
- AI APIs integreren in Edge Functions
|
||||||
|
- Scheduled en event-driven workflows bouwen
|
||||||
|
- Praktische AI automation patterns implementeren
|
||||||
163
Samenvattingen/Les11-Samenvatting.md
Normal file
163
Samenvattingen/Les11-Samenvatting.md
Normal file
@@ -0,0 +1,163 @@
|
|||||||
|
# Les 11: Introduction to Cursor - De Professionele AI Editor
|
||||||
|
|
||||||
|
## Hoofdstuk
|
||||||
|
**Hoofdstuk 3: Advanced** (Les 8-18)
|
||||||
|
|
||||||
|
## Beschrijving
|
||||||
|
Kennismaking met Cursor als premium AI code editor - best of both worlds tussen IDE en AI power.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Te Behandelen
|
||||||
|
|
||||||
|
### Waarom Cursor na OpenCode/WebStorm + Claude Code?
|
||||||
|
- Purpose-built for AI
|
||||||
|
- Bliksem snel
|
||||||
|
- Superieure tab completion
|
||||||
|
- CMD+K inline editing
|
||||||
|
- Composer mode
|
||||||
|
- @ mentions systeem
|
||||||
|
|
||||||
|
### Skills Compatibiliteit
|
||||||
|
- Al je Skills werken ook in Cursor
|
||||||
|
|
||||||
|
### Installatie
|
||||||
|
- Download
|
||||||
|
- GitHub integration
|
||||||
|
- 2-week Pro trial
|
||||||
|
|
||||||
|
### Core Features
|
||||||
|
|
||||||
|
| Feature | Beschrijving |
|
||||||
|
|---------|-------------|
|
||||||
|
| Tab completion | AI-powered autocomplete |
|
||||||
|
| CMD+K | Inline editing |
|
||||||
|
| Chat | Conversatie met context |
|
||||||
|
| @ mentions | Reference files, folders, docs |
|
||||||
|
| Composer mode | Multi-file generation |
|
||||||
|
|
||||||
|
### Skills Migratie
|
||||||
|
- Skills van OpenCode werken meteen in Cursor
|
||||||
|
|
||||||
|
### Cost Discussie
|
||||||
|
- Free tier vs Pro ($20/maand)
|
||||||
|
|
||||||
|
### Wanneer Wat Gebruiken?
|
||||||
|
|
||||||
|
| Tool | Gebruik voor |
|
||||||
|
|------|--------------|
|
||||||
|
| OpenCode/WebStorm | Leren |
|
||||||
|
| Claude Code | Grote autonome taken |
|
||||||
|
| Cursor | Dagelijkse development |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tools
|
||||||
|
- Cursor
|
||||||
|
- GitHub
|
||||||
|
- Skills.sh
|
||||||
|
- Supabase
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Lesopdracht (2 uur)
|
||||||
|
|
||||||
|
### Deel 1: Setup & Skills Migration (30 min)
|
||||||
|
|
||||||
|
**Installatie:**
|
||||||
|
- Install Cursor
|
||||||
|
- Connect GitHub
|
||||||
|
- Activate Pro trial
|
||||||
|
|
||||||
|
**Verificatie:**
|
||||||
|
- Verifieer Skills werken (`npx skills list`)
|
||||||
|
- Test prompt met skill
|
||||||
|
|
||||||
|
**Eerste Indrukken:**
|
||||||
|
- Bouw component
|
||||||
|
- Test tab completion
|
||||||
|
- Test CMD+K
|
||||||
|
- Test Chat met @ mentions
|
||||||
|
- Documenteer verschillen vs OpenCode
|
||||||
|
|
||||||
|
### Deel 2: Feature Comparison (45 min)
|
||||||
|
|
||||||
|
**Rebuild filtering system uit Les 4 in Cursor:**
|
||||||
|
- Time het
|
||||||
|
|
||||||
|
**Gebruik alle features:**
|
||||||
|
- Extensive tab completion
|
||||||
|
- CMD+K
|
||||||
|
- Chat
|
||||||
|
- @ mentions
|
||||||
|
- Try Composer
|
||||||
|
|
||||||
|
**Vergelijk:**
|
||||||
|
- Tijd
|
||||||
|
- Code quality
|
||||||
|
- Experience
|
||||||
|
|
||||||
|
### Deel 3: Composer Mode (45 min)
|
||||||
|
|
||||||
|
**Test Composer mode - Bouw analytics dashboard:**
|
||||||
|
- Sidebar nav
|
||||||
|
- Top navbar
|
||||||
|
- 4 stat cards
|
||||||
|
- Line chart
|
||||||
|
- Activity feed
|
||||||
|
|
||||||
|
**Process:**
|
||||||
|
- Geef high-level beschrijving
|
||||||
|
- Laat autonoom werken
|
||||||
|
- Feedback in Composer chat
|
||||||
|
|
||||||
|
**Vergelijk:** Cursor Composer vs Claude Code
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Huiswerk (2 uur)
|
||||||
|
|
||||||
|
### Bouw Complete Mini-App met Cursor
|
||||||
|
|
||||||
|
**Kies 1 van 4:**
|
||||||
|
1. Weather App
|
||||||
|
2. Expense Tracker
|
||||||
|
3. Recipe Finder
|
||||||
|
4. Habit Tracker
|
||||||
|
|
||||||
|
**Requirements:**
|
||||||
|
- Full CRUD met Supabase
|
||||||
|
- Responsive
|
||||||
|
- TypeScript strict
|
||||||
|
- Shadcn
|
||||||
|
- Deployed naar Vercel
|
||||||
|
|
||||||
|
**Challenge:** Maximaliseer Cursor + Skills
|
||||||
|
|
||||||
|
### Track Metrics
|
||||||
|
- Tab completion usage
|
||||||
|
- CMD+K count
|
||||||
|
- Composer usage
|
||||||
|
- Skills active
|
||||||
|
- AI vs manual ratio
|
||||||
|
|
||||||
|
### Deliverables
|
||||||
|
- Deployed app
|
||||||
|
- GitHub repo
|
||||||
|
- Comprehensive reflectie (600 woorden):
|
||||||
|
- Is Cursor worth switching?
|
||||||
|
- Cursor vs Claude Code?
|
||||||
|
- Free vs Pro?
|
||||||
|
- Skills performance?
|
||||||
|
- Final verdict?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Leerdoelen
|
||||||
|
Na deze les kan de student:
|
||||||
|
- Cursor installeren en configureren
|
||||||
|
- Skills migreren naar Cursor
|
||||||
|
- Core features gebruiken (Tab, CMD+K, Chat, @ mentions, Composer)
|
||||||
|
- Het verschil beoordelen tussen Cursor en andere AI tools
|
||||||
|
- Composer mode gebruiken voor multi-file generatie
|
||||||
|
- Een weloverwogen keuze maken over welke tool wanneer te gebruiken
|
||||||
143
Samenvattingen/Les12-Samenvatting.md
Normal file
143
Samenvattingen/Les12-Samenvatting.md
Normal file
@@ -0,0 +1,143 @@
|
|||||||
|
# Les 12: Advanced Context Management & AI-Vriendelijke Code
|
||||||
|
|
||||||
|
## Hoofdstuk
|
||||||
|
**Hoofdstuk 3: Advanced** (Les 8-18)
|
||||||
|
|
||||||
|
## Beschrijving
|
||||||
|
Masterclass in context management voor maximale AI effectiveness.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Te Behandelen
|
||||||
|
|
||||||
|
### Context Windows Begrijpen
|
||||||
|
- Tokens (~4 chars = 1 token)
|
||||||
|
- Context sizes:
|
||||||
|
- GPT-4: 128K tokens
|
||||||
|
- Claude: 200K tokens
|
||||||
|
|
||||||
|
### Waarom Context Belangrijk
|
||||||
|
- Meer context = beter begrip
|
||||||
|
- Maar ook: langzamer + duurder
|
||||||
|
|
||||||
|
### Context Strategieën
|
||||||
|
- Alleen relevante files
|
||||||
|
- Start breed → narrow down
|
||||||
|
- Sequential context
|
||||||
|
- Prunen
|
||||||
|
|
||||||
|
### Project Documentatie voor AI
|
||||||
|
|
||||||
|
| Document | Doel |
|
||||||
|
|----------|------|
|
||||||
|
| README | Project overview |
|
||||||
|
| ARCHITECTURE | System design |
|
||||||
|
| COMPONENTS | Component library docs |
|
||||||
|
|
||||||
|
### Hoe AI Docs Leest
|
||||||
|
- Structuur matters
|
||||||
|
- Voorbeelden helpen
|
||||||
|
|
||||||
|
### AI-Vriendelijke Code Organisatie
|
||||||
|
- Semantische naming
|
||||||
|
- Kleine focused files
|
||||||
|
- Proper separation
|
||||||
|
- Comprehensive comments (WHY niet WHAT)
|
||||||
|
|
||||||
|
### Context Pruning
|
||||||
|
- Wanneer fresh chat
|
||||||
|
- .cursorignore
|
||||||
|
- Vorige context samenvatten
|
||||||
|
|
||||||
|
### Knowledge Persistence
|
||||||
|
- Claude Projects voor long-term memory
|
||||||
|
|
||||||
|
### Tool Vergelijking
|
||||||
|
Context handling in:
|
||||||
|
- Cursor
|
||||||
|
- OpenCode
|
||||||
|
- Claude Code
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tools
|
||||||
|
- Cursor
|
||||||
|
- Claude Desktop
|
||||||
|
- .cursorignore
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Lesopdracht (2 uur)
|
||||||
|
|
||||||
|
### Context Optimization Challenge
|
||||||
|
|
||||||
|
**Setup:** Docent biedt messy codebase (10-15 files, onduidelijk, missing docs)
|
||||||
|
|
||||||
|
### Phase 1: Assessment (30 min)
|
||||||
|
- Test Cursor begrip met 4 vragen
|
||||||
|
- Score X/10
|
||||||
|
|
||||||
|
### Phase 2: Documentation (45 min)
|
||||||
|
Maak comprehensive docs met AI:
|
||||||
|
- README
|
||||||
|
- ARCHITECTURE.md
|
||||||
|
- COMPONENTS.md
|
||||||
|
|
||||||
|
### Phase 3: Organization (45 min)
|
||||||
|
Refactor voor clarity:
|
||||||
|
- Rename files/functions
|
||||||
|
- Split files <300 lines
|
||||||
|
- Add comments
|
||||||
|
- Organize folders
|
||||||
|
- Improve imports
|
||||||
|
|
||||||
|
### Phase 4: Re-test (30 min)
|
||||||
|
- Zelfde 4 vragen
|
||||||
|
- Score verbetering
|
||||||
|
- Analyseer wat hielp
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Huiswerk (2 uur)
|
||||||
|
|
||||||
|
### Maak Context Management Playbook
|
||||||
|
|
||||||
|
### Deel 1: Playbook (1 uur)
|
||||||
|
|
||||||
|
Schrijf gids over:
|
||||||
|
- Pre-project checklist
|
||||||
|
- Folder structure templates
|
||||||
|
- File naming conventions
|
||||||
|
- Prompting templates
|
||||||
|
- Wanneer welke tool
|
||||||
|
- Context management tijdens development
|
||||||
|
- AI begrip meten
|
||||||
|
- Red flags
|
||||||
|
- Pro tips
|
||||||
|
- Troubleshooting
|
||||||
|
|
||||||
|
### Deel 2: Templates (30 min)
|
||||||
|
|
||||||
|
Maak 3 templates:
|
||||||
|
1. README.md
|
||||||
|
2. ARCHITECTURE.md
|
||||||
|
3. COMPONENT_TEMPLATE.md
|
||||||
|
|
||||||
|
### Deel 3: Test (30 min)
|
||||||
|
- Start vers Next.js project
|
||||||
|
- Pas playbook toe
|
||||||
|
- Test of Cursor meteen begrijpt
|
||||||
|
- Itereer
|
||||||
|
|
||||||
|
**Deel als GitHub repo**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Leerdoelen
|
||||||
|
Na deze les kan de student:
|
||||||
|
- Context windows en token limits begrijpen
|
||||||
|
- Effectieve context strategieën toepassen
|
||||||
|
- Project documentatie schrijven die AI helpt
|
||||||
|
- AI-vriendelijke code structuur implementeren
|
||||||
|
- Context pruning toepassen (.cursorignore, fresh chats)
|
||||||
|
- Code organisatie verbeteren voor betere AI interactie
|
||||||
164
Samenvattingen/Les13-Samenvatting.md
Normal file
164
Samenvattingen/Les13-Samenvatting.md
Normal file
@@ -0,0 +1,164 @@
|
|||||||
|
# Les 13: Mastering Cursor met Claude Opus & Advanced Skills
|
||||||
|
|
||||||
|
## Hoofdstuk
|
||||||
|
**Hoofdstuk 3: Advanced** (Les 8-18)
|
||||||
|
|
||||||
|
## Beschrijving
|
||||||
|
Geavanceerde technieken met Cursor en high-end models.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Te Behandelen
|
||||||
|
|
||||||
|
### Model Deep Dive
|
||||||
|
|
||||||
|
**Waarom Claude Opus voor Complex:**
|
||||||
|
- Superieure reasoning
|
||||||
|
- 200K context
|
||||||
|
- Beste multi-file orchestration
|
||||||
|
|
||||||
|
**Wanneer Welk Model? (Complexity Matrix)**
|
||||||
|
|
||||||
|
| Complexiteit | Model |
|
||||||
|
|--------------|-------|
|
||||||
|
| Simpel | Haiku |
|
||||||
|
| Gemiddeld | Sonnet |
|
||||||
|
| Complex | Opus |
|
||||||
|
|
||||||
|
### Composer Mode Mastery
|
||||||
|
- Multi-file generatie
|
||||||
|
- Agent-like planning
|
||||||
|
- Autonome iteratie
|
||||||
|
|
||||||
|
### Wanneer Composer vs Chat
|
||||||
|
- Composer: nieuwe features
|
||||||
|
- Chat: begrip/vragen
|
||||||
|
|
||||||
|
### @ Mentions Deep Dive
|
||||||
|
|
||||||
|
**Alle Types:**
|
||||||
|
- @Files
|
||||||
|
- @Folders
|
||||||
|
- @Code
|
||||||
|
- @Docs
|
||||||
|
- @Web
|
||||||
|
|
||||||
|
**Advanced patterns**
|
||||||
|
|
||||||
|
### Codebase Indexing
|
||||||
|
- Hoe Cursor indexeert
|
||||||
|
- Optimaliseren
|
||||||
|
|
||||||
|
### .cursorrules Files
|
||||||
|
- Project-specifieke instructies die persistent zijn
|
||||||
|
- Powerful patterns
|
||||||
|
- Hoe effectieve rules schrijven
|
||||||
|
|
||||||
|
### Skills + Composer
|
||||||
|
- Hoe Skills Composer krachtiger maken
|
||||||
|
|
||||||
|
### Cost Management
|
||||||
|
- Token usage monitoren
|
||||||
|
- Free tier strategies
|
||||||
|
- Wanneer Pro worth it
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tools
|
||||||
|
- Cursor
|
||||||
|
- Claude Opus/Sonnet/Haiku
|
||||||
|
- Skills.sh
|
||||||
|
- .cursorrules
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Lesopdracht (2 uur)
|
||||||
|
|
||||||
|
### Complexe Feature met Cursor Composer + Claude + Skills
|
||||||
|
|
||||||
|
**Bouw Multi-Step Form Wizard:**
|
||||||
|
|
||||||
|
| Stap | Features |
|
||||||
|
|------|----------|
|
||||||
|
| 1 | Personal info met avatar |
|
||||||
|
| 2 | Company info met autocomplete |
|
||||||
|
| 3 | Preferences (dynamic based on previous) |
|
||||||
|
| 4 | Review & confirm met edit |
|
||||||
|
|
||||||
|
**Extra Requirements:**
|
||||||
|
- Progress indicator met validation visualization
|
||||||
|
- Per-step validation
|
||||||
|
- localStorage persistence
|
||||||
|
- Success animation met confetti
|
||||||
|
- Error handling throughout
|
||||||
|
- TypeScript strict
|
||||||
|
- Shadcn components
|
||||||
|
- Mobile responsive
|
||||||
|
|
||||||
|
### Process
|
||||||
|
1. Install/verify Skills
|
||||||
|
2. Use Composer met Opus/Sonnet - comprehensive prompt
|
||||||
|
3. Let orchestrate
|
||||||
|
4. CMD+K voor refinements
|
||||||
|
5. Chat met @ mentions voor vragen
|
||||||
|
|
||||||
|
### Track
|
||||||
|
- Welk model wanneer
|
||||||
|
- Composer iterations
|
||||||
|
- Skills impact
|
||||||
|
- @ mentions patterns
|
||||||
|
- Cost estimate
|
||||||
|
|
||||||
|
### Deliverable
|
||||||
|
- Working wizard
|
||||||
|
- Analyse document
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Huiswerk (2 uur)
|
||||||
|
|
||||||
|
### Maak Perfect .cursorrules File
|
||||||
|
|
||||||
|
### Deel 1: Research (30 min)
|
||||||
|
- Bestudeer 3-5 .cursorrules voorbeelden online
|
||||||
|
- Analyseer wat effectief maakt
|
||||||
|
|
||||||
|
### Deel 2: Write Comprehensive (1 uur)
|
||||||
|
|
||||||
|
Maak definitieve .cursorrules voor JOUW stack.
|
||||||
|
|
||||||
|
**Include:**
|
||||||
|
- Project context
|
||||||
|
- Code style
|
||||||
|
- TypeScript conventions
|
||||||
|
- React/Next.js patterns
|
||||||
|
- Styling guidelines
|
||||||
|
- Error handling
|
||||||
|
- Accessibility
|
||||||
|
- Testing
|
||||||
|
- Security
|
||||||
|
- Common pitfalls
|
||||||
|
- Skills reference
|
||||||
|
|
||||||
|
### Deel 3: Test & Iterate (30 min)
|
||||||
|
- Nieuw project met .cursorrules
|
||||||
|
- Use Composer
|
||||||
|
- Verifieer Cursor volgt rules
|
||||||
|
- Itereer
|
||||||
|
|
||||||
|
### Deliverable
|
||||||
|
- .cursorrules file
|
||||||
|
- Uitleg document
|
||||||
|
- Test results
|
||||||
|
- Deel als gist
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Leerdoelen
|
||||||
|
Na deze les kan de student:
|
||||||
|
- Het juiste Claude model kiezen per complexiteit
|
||||||
|
- Composer mode effectief gebruiken voor complexe features
|
||||||
|
- @ mentions strategisch inzetten
|
||||||
|
- .cursorrules files schrijven voor consistent gedrag
|
||||||
|
- Skills combineren met Composer voor betere output
|
||||||
|
- Token usage monitoren en kosten beheren
|
||||||
145
Samenvattingen/Les14-Samenvatting.md
Normal file
145
Samenvattingen/Les14-Samenvatting.md
Normal file
@@ -0,0 +1,145 @@
|
|||||||
|
# Les 14: Supabase Advanced - Realtime, Storage & Edge Functions
|
||||||
|
|
||||||
|
## Hoofdstuk
|
||||||
|
**Hoofdstuk 3: Advanced** (Les 8-18)
|
||||||
|
|
||||||
|
## Beschrijving
|
||||||
|
Geavanceerde Supabase features voor productie apps.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Te Behandelen
|
||||||
|
|
||||||
|
### Realtime Subscriptions
|
||||||
|
- Hoe Postgres broadcasts
|
||||||
|
- Subscriben op table changes
|
||||||
|
- Channel-based real-time (presence, broadcast)
|
||||||
|
- Collaborative features
|
||||||
|
- Reconnections handlen
|
||||||
|
|
||||||
|
### Supabase Storage
|
||||||
|
- File uploads (images, PDFs)
|
||||||
|
- Buckets organiseren
|
||||||
|
- Image transformations (resize, format, quality)
|
||||||
|
- Signed URLs
|
||||||
|
- Storage RLS policies
|
||||||
|
|
||||||
|
### Edge Functions Deep Dive
|
||||||
|
- Deno runtime
|
||||||
|
- TypeScript
|
||||||
|
- At edge
|
||||||
|
- Waarom gebruiken:
|
||||||
|
- Hide API keys
|
||||||
|
- Server-side logic
|
||||||
|
- Scheduled tasks
|
||||||
|
- Webhooks
|
||||||
|
|
||||||
|
### AI Integratie Patterns
|
||||||
|
- Call OpenAI/Anthropic veilig
|
||||||
|
- Streaming responses
|
||||||
|
|
||||||
|
### Praktische Patterns
|
||||||
|
- Form processing
|
||||||
|
- Emails
|
||||||
|
- Data verrijking
|
||||||
|
|
||||||
|
### Authentication Advanced
|
||||||
|
- Social logins (Google, GitHub, Discord)
|
||||||
|
- Magic links
|
||||||
|
- Email confirmatie
|
||||||
|
- Password reset
|
||||||
|
- Session management
|
||||||
|
|
||||||
|
### Error Handling & Debugging
|
||||||
|
- Supabase error messages
|
||||||
|
- RLS debuggen
|
||||||
|
- Logging
|
||||||
|
|
||||||
|
### Cursor Composer
|
||||||
|
- Voor complexe multi-feature development
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tools
|
||||||
|
- Supabase (Realtime, Storage, Edge Functions)
|
||||||
|
- Cursor
|
||||||
|
- OpenAI/Anthropic API
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Lesopdracht (2 uur)
|
||||||
|
|
||||||
|
### Level Up Todo App met 3 Advanced Features (met Cursor)
|
||||||
|
|
||||||
|
### Feature 1: Realtime Collaboration (40 min)
|
||||||
|
|
||||||
|
Real-time updates wanneer user A/B changes:
|
||||||
|
- Subscribe
|
||||||
|
- Update UI
|
||||||
|
- Show "live" indicator
|
||||||
|
- Handle reconnection
|
||||||
|
|
||||||
|
**Test met multiple windows**
|
||||||
|
|
||||||
|
### Feature 2: File Attachments met Storage (40 min)
|
||||||
|
|
||||||
|
Attach files (images/PDFs):
|
||||||
|
- Upload button
|
||||||
|
- Thumbnail voor images (transformations)
|
||||||
|
- Download voor PDFs
|
||||||
|
- Delete optie
|
||||||
|
- Proper RLS
|
||||||
|
|
||||||
|
### Feature 3: AI-Powered Task Suggestions met Edge Function (40 min)
|
||||||
|
|
||||||
|
"Suggest Subtasks" button:
|
||||||
|
- Edge Function
|
||||||
|
- OpenAI/Anthropic API (hide key)
|
||||||
|
- AI returns 3-5 subtasks
|
||||||
|
- Auto-create in database
|
||||||
|
- Stream results
|
||||||
|
|
||||||
|
**Use Cursor Composer voor alle 3 features orchestreren**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Huiswerk (2 uur)
|
||||||
|
|
||||||
|
### Bouw Production-Ready Supabase Starter Template
|
||||||
|
|
||||||
|
**Use Cursor Composer + Skills**
|
||||||
|
|
||||||
|
### Include:
|
||||||
|
|
||||||
|
| Feature | Details |
|
||||||
|
|---------|---------|
|
||||||
|
| Complete Auth | Email + Google, protected routes HOC, profile met avatar |
|
||||||
|
| Database Examples | Schema met relationships, RLS gedocumenteerd, types auto-generated |
|
||||||
|
| Realtime Demo | Chat of live updates |
|
||||||
|
| Storage Demo | Upload met preview, optimization |
|
||||||
|
| Edge Function | Met AI, error handling, rate limiting |
|
||||||
|
| Documentation | Setup, env vars, extend, patterns, troubleshooting |
|
||||||
|
|
||||||
|
### Structureer als GitHub Template
|
||||||
|
|
||||||
|
**Test:**
|
||||||
|
- Clone
|
||||||
|
- Rename
|
||||||
|
- Deploy naar Vercel
|
||||||
|
- Aim: <10 min
|
||||||
|
|
||||||
|
### Deliverable
|
||||||
|
- Template repo
|
||||||
|
- Setup video
|
||||||
|
- Reflectie
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Leerdoelen
|
||||||
|
Na deze les kan de student:
|
||||||
|
- Realtime subscriptions implementeren voor collaborative features
|
||||||
|
- Supabase Storage gebruiken met transformations en RLS
|
||||||
|
- Edge Functions schrijven met AI integratie
|
||||||
|
- Advanced authentication implementeren (social, magic links)
|
||||||
|
- Errors debuggen in Supabase (RLS, queries)
|
||||||
|
- Een production-ready Supabase starter template bouwen
|
||||||
148
Samenvattingen/Les15-Samenvatting.md
Normal file
148
Samenvattingen/Les15-Samenvatting.md
Normal file
@@ -0,0 +1,148 @@
|
|||||||
|
# Les 15: AI-Driven Testing & Quality Assurance
|
||||||
|
|
||||||
|
## Hoofdstuk
|
||||||
|
**Hoofdstuk 3: Advanced** (Les 8-18)
|
||||||
|
|
||||||
|
## Beschrijving
|
||||||
|
AI voor testen en code kwaliteit.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Te Behandelen
|
||||||
|
|
||||||
|
### Waarom Testen Belangrijk
|
||||||
|
- Vang bugs vroeg
|
||||||
|
- Vertrouwen in refactoring
|
||||||
|
- Documentatie van gedrag
|
||||||
|
|
||||||
|
### Types van Tests
|
||||||
|
|
||||||
|
| Type | Scope |
|
||||||
|
|------|-------|
|
||||||
|
| Unit | Individuele functies |
|
||||||
|
| Component | React components |
|
||||||
|
| Integration | Meerdere units samen |
|
||||||
|
| E2E | Volledige user flows |
|
||||||
|
|
||||||
|
### AI voor Test Generation
|
||||||
|
- Beschrijf wat te testen
|
||||||
|
- AI schrijft comprehensive suites
|
||||||
|
- Dekt edge cases
|
||||||
|
|
||||||
|
### Testing Tools
|
||||||
|
|
||||||
|
| Tool | Gebruik |
|
||||||
|
|------|---------|
|
||||||
|
| Vitest | Snelle moderne test runner |
|
||||||
|
| React Testing Library | User perspectief |
|
||||||
|
| MSW | API mocking |
|
||||||
|
| Playwright | E2E testing |
|
||||||
|
|
||||||
|
### Testing Supabase
|
||||||
|
- Mocken database calls
|
||||||
|
- RLS testen
|
||||||
|
- Edge Functions testen
|
||||||
|
|
||||||
|
### Code Review met AI
|
||||||
|
- Geautomatiseerde reviews
|
||||||
|
- Issues vinden (security, performance, accessibility)
|
||||||
|
- Fixes suggereren
|
||||||
|
|
||||||
|
### Debugging met AI
|
||||||
|
- Plak error
|
||||||
|
- AI legt uit en suggereert fix
|
||||||
|
|
||||||
|
### Code Kwaliteit Metrics
|
||||||
|
- Coverage >70%
|
||||||
|
- Mutation testing
|
||||||
|
- Complexity analyse
|
||||||
|
|
||||||
|
### Cursor's AI voor Automated Test Generation
|
||||||
|
|
||||||
|
### Integration met Workflow
|
||||||
|
- Tests on git push
|
||||||
|
- CI/CD
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tools
|
||||||
|
- Cursor
|
||||||
|
- Vitest
|
||||||
|
- React Testing Library
|
||||||
|
- MSW
|
||||||
|
- Playwright
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Lesopdracht (2 uur)
|
||||||
|
|
||||||
|
### Voeg Comprehensive Tests Toe met Cursor + AI
|
||||||
|
|
||||||
|
### Setup (30 min)
|
||||||
|
- Install dependencies (Vitest, RTL)
|
||||||
|
- Configureer Vitest
|
||||||
|
- Maak test utils
|
||||||
|
- Verifieer met smoke test
|
||||||
|
|
||||||
|
### Schrijf Tests met Cursor (1 uur)
|
||||||
|
|
||||||
|
| Type | Aantal | Tijd |
|
||||||
|
|------|--------|------|
|
||||||
|
| Unit Tests | 3-4 utility functies | 20 min |
|
||||||
|
| Component Tests | 3-4 components | 30 min |
|
||||||
|
| Integration Tests | 1-2 flows | 10 min |
|
||||||
|
|
||||||
|
### Run & Fix (30 min)
|
||||||
|
- Run `npm test`
|
||||||
|
- AI helpt failures fixen
|
||||||
|
- Bereik >70% coverage
|
||||||
|
|
||||||
|
### Track
|
||||||
|
- Test schrijf snelheid met AI?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Huiswerk (2 uur)
|
||||||
|
|
||||||
|
### Implementeer AI Code Review Workflow
|
||||||
|
|
||||||
|
### Deel 1: Maak Agent (1 uur)
|
||||||
|
|
||||||
|
Custom GPT/Claude Project voor code review.
|
||||||
|
|
||||||
|
**Instructions moeten checken op:**
|
||||||
|
- TypeScript safety
|
||||||
|
- Error handling
|
||||||
|
- Accessibility
|
||||||
|
- Performance
|
||||||
|
- Security
|
||||||
|
- Best practices
|
||||||
|
|
||||||
|
**Upload "goede" code als knowledge base**
|
||||||
|
|
||||||
|
### Deel 2: Review 3 Components (1 uur)
|
||||||
|
- Review 3 components
|
||||||
|
- Documenteer ALLE issues
|
||||||
|
- Categoriseer severity
|
||||||
|
- Fix in Cursor
|
||||||
|
- Re-review
|
||||||
|
|
||||||
|
### Deel 3: Enhance Template
|
||||||
|
- Add testing setup aan Starter Template
|
||||||
|
- Add Code Review agent
|
||||||
|
|
||||||
|
### Deliverable
|
||||||
|
- Agent (link)
|
||||||
|
- Review rapport (issues/fixes/before-after)
|
||||||
|
- Reflectie over AI-assisted QA
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Leerdoelen
|
||||||
|
Na deze les kan de student:
|
||||||
|
- Verschillende test types begrijpen en implementeren
|
||||||
|
- AI gebruiken om tests te genereren
|
||||||
|
- Testing tools configureren (Vitest, RTL, MSW, Playwright)
|
||||||
|
- Code review agents bouwen
|
||||||
|
- AI gebruiken voor debugging
|
||||||
|
- Code kwaliteit meten met coverage en metrics
|
||||||
153
Samenvattingen/Les16-Samenvatting.md
Normal file
153
Samenvattingen/Les16-Samenvatting.md
Normal file
@@ -0,0 +1,153 @@
|
|||||||
|
# Les 16: Building AI-Powered Features & Workflow Automation
|
||||||
|
|
||||||
|
## Hoofdstuk
|
||||||
|
**Hoofdstuk 3: Advanced** (Les 8-18)
|
||||||
|
|
||||||
|
## Beschrijving
|
||||||
|
Integreer AI mogelijkheden in apps.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Te Behandelen
|
||||||
|
|
||||||
|
### AI APIs Overzicht
|
||||||
|
- OpenAI API
|
||||||
|
- Anthropic API
|
||||||
|
- Pricing
|
||||||
|
- Rate limits
|
||||||
|
|
||||||
|
### Veel Voorkomende AI Features
|
||||||
|
- Tekst generatie
|
||||||
|
- Samenvatting
|
||||||
|
- Chatbots
|
||||||
|
- Semantische zoeken
|
||||||
|
- Aanbevelingen
|
||||||
|
- Sentiment analyse
|
||||||
|
- Vertaling
|
||||||
|
|
||||||
|
### API Integratie Patterns
|
||||||
|
- Streaming responses
|
||||||
|
- Error handling
|
||||||
|
- Caching
|
||||||
|
- Prompt optimalisatie
|
||||||
|
|
||||||
|
### API Keys Verbergen
|
||||||
|
|
||||||
|
⚠️ **NOOIT in frontend!**
|
||||||
|
|
||||||
|
**Gebruik Supabase Edge Functions:**
|
||||||
|
- Server-side
|
||||||
|
- Keys in env vars
|
||||||
|
- Verify requests (auth)
|
||||||
|
- Rate limiting
|
||||||
|
|
||||||
|
### Streaming UI
|
||||||
|
- Toon AI responses real-time
|
||||||
|
- Vercel AI SDK of manual
|
||||||
|
|
||||||
|
### Cost Management
|
||||||
|
- Tokens tellen
|
||||||
|
- Cache queries
|
||||||
|
- Goedkopere modellen
|
||||||
|
- Monitor spend
|
||||||
|
|
||||||
|
### Workflow Automation
|
||||||
|
- n8n/Pipedream intro
|
||||||
|
|
||||||
|
### Praktische Automations
|
||||||
|
- Form → AI → Supabase
|
||||||
|
- Cron → data → AI → email
|
||||||
|
- GitHub webhook → AI → Slack
|
||||||
|
|
||||||
|
### Integration Patterns met Supabase
|
||||||
|
|
||||||
|
### Cursor voor Snelle API Integratie
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tools
|
||||||
|
- Supabase Edge Functions
|
||||||
|
- OpenAI/Anthropic API
|
||||||
|
- n8n/Pipedream
|
||||||
|
- Cursor
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Lesopdracht (2 uur)
|
||||||
|
|
||||||
|
Bouw 2 features: 1 AI-powered app feature + 1 workflow automation
|
||||||
|
|
||||||
|
### Deel 1: AI Feature (1 uur)
|
||||||
|
|
||||||
|
**Kies 1 met Cursor:**
|
||||||
|
|
||||||
|
| Optie | Beschrijving |
|
||||||
|
|-------|-------------|
|
||||||
|
| A | AI Blog Post Generator |
|
||||||
|
| B | Smart Summarizer |
|
||||||
|
| C | AI Writing Assistant |
|
||||||
|
| D | Intelligent Search |
|
||||||
|
|
||||||
|
**Implementeer via Supabase Edge Function**
|
||||||
|
|
||||||
|
### Deel 2: Workflow Automation (1 uur)
|
||||||
|
|
||||||
|
**Kies n8n OF Pipedream**
|
||||||
|
|
||||||
|
**Bouw 1:**
|
||||||
|
|
||||||
|
| Optie | Flow |
|
||||||
|
|-------|------|
|
||||||
|
| A | Smart Form Processor |
|
||||||
|
| B | Daily AI Summary |
|
||||||
|
|
||||||
|
**Test end-to-end**
|
||||||
|
|
||||||
|
### Deliverable
|
||||||
|
- Beide features deployed + working + gedocumenteerd
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Huiswerk (2 uur)
|
||||||
|
|
||||||
|
### Polish & Extend AI Feature
|
||||||
|
|
||||||
|
### Deel 1: UX (30 min)
|
||||||
|
- Streaming
|
||||||
|
- Copy button met toast
|
||||||
|
- History (Supabase)
|
||||||
|
- Loading skeletons
|
||||||
|
- Empty states
|
||||||
|
- Keyboard shortcuts
|
||||||
|
|
||||||
|
### Deel 2: Monitoring & Safety (30 min)
|
||||||
|
- Request logging
|
||||||
|
- Usage dashboard
|
||||||
|
- Rate limiting
|
||||||
|
- Content filtering
|
||||||
|
- Timeout handling
|
||||||
|
|
||||||
|
### Deel 3: Documentation (30 min)
|
||||||
|
- API docs
|
||||||
|
- User guide
|
||||||
|
- Add to Starter Template
|
||||||
|
|
||||||
|
### Deel 4: Build 2 Automations voor Eindopdracht (30 min)
|
||||||
|
- 2 n8n/Pipedream automations die echt helpen
|
||||||
|
|
||||||
|
### Deliverable
|
||||||
|
- Production AI feature
|
||||||
|
- Automations
|
||||||
|
- Docs
|
||||||
|
- Reflectie (300 woorden)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Leerdoelen
|
||||||
|
Na deze les kan de student:
|
||||||
|
- AI APIs integreren (OpenAI, Anthropic)
|
||||||
|
- API keys veilig verbergen via Edge Functions
|
||||||
|
- Streaming UI implementeren
|
||||||
|
- Kosten beheren en monitoren
|
||||||
|
- Workflow automation tools gebruiken (n8n/Pipedream)
|
||||||
|
- Praktische AI-powered features bouwen
|
||||||
188
Samenvattingen/Les17-Samenvatting.md
Normal file
188
Samenvattingen/Les17-Samenvatting.md
Normal file
@@ -0,0 +1,188 @@
|
|||||||
|
# Les 17: Advanced Deployment & Production (Vercel)
|
||||||
|
|
||||||
|
## Hoofdstuk
|
||||||
|
**Hoofdstuk 3: Advanced** (Les 8-18)
|
||||||
|
|
||||||
|
## Beschrijving
|
||||||
|
Production-ready deployment.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Te Behandelen
|
||||||
|
|
||||||
|
### Vercel Deployment Deep Dive
|
||||||
|
|
||||||
|
**Hoe werkt Vercel:**
|
||||||
|
- Edge network
|
||||||
|
- Serverless
|
||||||
|
- Automatic builds
|
||||||
|
|
||||||
|
**Git Integratie:**
|
||||||
|
- Push main → deploy
|
||||||
|
- Branches → preview URLs
|
||||||
|
- Preview deployments
|
||||||
|
- Instant rollbacks
|
||||||
|
- Environments
|
||||||
|
|
||||||
|
### Environment Variables
|
||||||
|
- Verschillende vars per environment
|
||||||
|
- Secrets handlen
|
||||||
|
- Accessing (process.env, NEXT_PUBLIC_)
|
||||||
|
- Best practices
|
||||||
|
|
||||||
|
### Custom Domains
|
||||||
|
- Domein toevoegen
|
||||||
|
- DNS config
|
||||||
|
- HTTPS automatic
|
||||||
|
- Multiple domains
|
||||||
|
|
||||||
|
### Performance Optimization
|
||||||
|
|
||||||
|
| Categorie | Technieken |
|
||||||
|
|-----------|------------|
|
||||||
|
| Images | Next.js Image, lazy loading, responsive, WebP/AVIF |
|
||||||
|
| Fonts | next/font, font-display, reducing files |
|
||||||
|
| Code | Dynamic imports, lazy loading, route-based splitting |
|
||||||
|
| General | Bundle analyse, caching strategies, connection pooling |
|
||||||
|
|
||||||
|
### Vercel Analytics
|
||||||
|
|
||||||
|
**Web Vitals:**
|
||||||
|
- CLS (Cumulative Layout Shift)
|
||||||
|
- FID (First Input Delay)
|
||||||
|
- LCP (Largest Contentful Paint)
|
||||||
|
- FCP (First Contentful Paint)
|
||||||
|
- TTFB (Time to First Byte)
|
||||||
|
|
||||||
|
**Features:**
|
||||||
|
- Real user monitoring
|
||||||
|
- Speed insights
|
||||||
|
- Audience insights
|
||||||
|
|
||||||
|
### Error Tracking
|
||||||
|
- Edge Function logs
|
||||||
|
- Error boundaries
|
||||||
|
- Logging services (Sentry, LogRocket)
|
||||||
|
|
||||||
|
### CI/CD
|
||||||
|
- GitHub Actions
|
||||||
|
- Automated testing
|
||||||
|
- Type checking
|
||||||
|
- Linting
|
||||||
|
- E2E on previews
|
||||||
|
|
||||||
|
### Supabase Production
|
||||||
|
- Connection pooling
|
||||||
|
- Backups
|
||||||
|
- Monitoring
|
||||||
|
- Rate limiting
|
||||||
|
|
||||||
|
### Security Checklist
|
||||||
|
- Env vars secure
|
||||||
|
- No secrets exposed
|
||||||
|
- HTTPS
|
||||||
|
- CSP headers
|
||||||
|
- Rate limiting
|
||||||
|
- Validation
|
||||||
|
- Dependency updates
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tools
|
||||||
|
- Vercel
|
||||||
|
- GitHub Actions
|
||||||
|
- Sentry/LogRocket
|
||||||
|
- Lighthouse
|
||||||
|
- Cursor
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Lesopdracht (2 uur)
|
||||||
|
|
||||||
|
### Production-Ready Deployment van Beste Project
|
||||||
|
|
||||||
|
**(Todo app aanbevolen)**
|
||||||
|
|
||||||
|
### Phase 1: Pre-Deployment Checklist (30 min)
|
||||||
|
|
||||||
|
Verify:
|
||||||
|
- Env vars
|
||||||
|
- Error boundaries
|
||||||
|
- Loading states
|
||||||
|
- 404 page
|
||||||
|
- SEO basics
|
||||||
|
- Favicon
|
||||||
|
- TypeScript errors
|
||||||
|
|
||||||
|
### Phase 2: Performance Optimization (45 min)
|
||||||
|
|
||||||
|
- Run Lighthouse (aim 90+)
|
||||||
|
- Fix met Cursor:
|
||||||
|
- Optimize images
|
||||||
|
- Reduce bundle
|
||||||
|
- Optimize fonts
|
||||||
|
- Improve Core Web Vitals
|
||||||
|
- Re-run
|
||||||
|
- Document
|
||||||
|
|
||||||
|
### Phase 3: Deploy & Monitor (45 min)
|
||||||
|
|
||||||
|
- Deploy naar Vercel
|
||||||
|
- Custom domain (optional)
|
||||||
|
- Enable Analytics
|
||||||
|
- Setup error monitoring
|
||||||
|
- Maak monitoring dashboard
|
||||||
|
- Test grondig
|
||||||
|
|
||||||
|
### Deliverable
|
||||||
|
- Production URL
|
||||||
|
- Lighthouse screenshot
|
||||||
|
- Dashboard access
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Huiswerk (2 uur)
|
||||||
|
|
||||||
|
### Maak Production Deployment Playbook
|
||||||
|
|
||||||
|
### Deel 1: Comprehensive Checklist (1 uur)
|
||||||
|
|
||||||
|
Schrijf checklists voor:
|
||||||
|
- Pre-Deployment
|
||||||
|
- Environment Setup
|
||||||
|
- Performance Requirements
|
||||||
|
- Monitoring Setup
|
||||||
|
- Post-Deployment
|
||||||
|
- Rollback Plan
|
||||||
|
|
||||||
|
### Deel 2: GitHub Actions (optional, 30 min)
|
||||||
|
- Setup automated checks op PRs
|
||||||
|
|
||||||
|
### Deel 3: Monitoring Dashboard (30 min)
|
||||||
|
|
||||||
|
Bouw admin dashboard met:
|
||||||
|
- Deployment status
|
||||||
|
- Errors
|
||||||
|
- Performance metrics
|
||||||
|
- Database usage
|
||||||
|
- API usage
|
||||||
|
- Custom metrics
|
||||||
|
- Auto-refresh 5min
|
||||||
|
|
||||||
|
### Deliverable
|
||||||
|
- Playbook
|
||||||
|
- GitHub Actions
|
||||||
|
- Dashboard
|
||||||
|
- Reflectie (200 woorden)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Leerdoelen
|
||||||
|
Na deze les kan de student:
|
||||||
|
- Vercel deployment configureren met Git integration
|
||||||
|
- Environment variables veilig beheren
|
||||||
|
- Custom domains configureren
|
||||||
|
- Performance optimaliseren voor Web Vitals
|
||||||
|
- Analytics en monitoring opzetten
|
||||||
|
- CI/CD implementeren met GitHub Actions
|
||||||
|
- Security best practices toepassen voor productie
|
||||||
195
Samenvattingen/Les18-Samenvatting.md
Normal file
195
Samenvattingen/Les18-Samenvatting.md
Normal file
@@ -0,0 +1,195 @@
|
|||||||
|
# Les 18: Eindopdracht Intro, Planning & Advanced Topics
|
||||||
|
|
||||||
|
## Hoofdstuk
|
||||||
|
**Hoofdstuk 3: Advanced** (Les 8-18)
|
||||||
|
|
||||||
|
## Beschrijving
|
||||||
|
Voorbereiden op eindproject - culminatie van alles geleerd.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Te Behandelen
|
||||||
|
|
||||||
|
### Eindopdracht Walkthrough
|
||||||
|
- 10 project opties
|
||||||
|
- Complexiteit niveaus
|
||||||
|
- Vereiste features
|
||||||
|
|
||||||
|
### Requirements Deep Dive
|
||||||
|
- Verplichte onderdelen
|
||||||
|
- Bonus punten
|
||||||
|
- Grading rubric
|
||||||
|
|
||||||
|
### Timeline & Realistic Planning
|
||||||
|
- 2 weken
|
||||||
|
- Dagelijkse milestones
|
||||||
|
|
||||||
|
### Hoe Juiste Project Kiezen
|
||||||
|
|
||||||
|
Overweeg:
|
||||||
|
- Interesse
|
||||||
|
- Skills
|
||||||
|
- Ambitie
|
||||||
|
- Uniciteit
|
||||||
|
|
||||||
|
### Project Planning met Cursor
|
||||||
|
AI als planning partner:
|
||||||
|
- Break down user stories
|
||||||
|
- Schat complexiteit
|
||||||
|
- Prioriteer MVP
|
||||||
|
- Maak timeline
|
||||||
|
- Identificeer risico's
|
||||||
|
|
||||||
|
### Database Schema Design Workshop
|
||||||
|
|
||||||
|
**Interactieve sessie:**
|
||||||
|
- Studenten stellen voor
|
||||||
|
- Klas bekritiseert
|
||||||
|
- AI suggereert
|
||||||
|
- Leer van elkaar
|
||||||
|
|
||||||
|
**Veel Voorkomende Patterns:**
|
||||||
|
- User management
|
||||||
|
- Content ownership
|
||||||
|
- Many-to-many
|
||||||
|
- Soft deletes
|
||||||
|
- Timestamps
|
||||||
|
|
||||||
|
**Gebruik Supabase skill voor schema generatie**
|
||||||
|
|
||||||
|
**RLS Policy Patterns**
|
||||||
|
|
||||||
|
### Geavanceerde Architecture Patterns
|
||||||
|
- Feature-based folders
|
||||||
|
- API route organisatie
|
||||||
|
- State management strategieën
|
||||||
|
- Component patterns
|
||||||
|
|
||||||
|
### Code Organisatie
|
||||||
|
- Project structuur die schaalt
|
||||||
|
- Documentatie die belangrijk is
|
||||||
|
- Git workflow
|
||||||
|
|
||||||
|
### Accessibility Deep Dive
|
||||||
|
|
||||||
|
**WCAG Compliance:**
|
||||||
|
- A (minimum)
|
||||||
|
- AA (doel) ✓
|
||||||
|
- AAA (excellent)
|
||||||
|
|
||||||
|
**Focus areas:**
|
||||||
|
- Keyboard navigatie
|
||||||
|
- Screen readers
|
||||||
|
- Color contrast
|
||||||
|
- Forms accessibility
|
||||||
|
|
||||||
|
### Final Polish Workshop
|
||||||
|
- Code quality review met Cursor
|
||||||
|
- Bug hunting
|
||||||
|
- UI/UX polish
|
||||||
|
- Performance check
|
||||||
|
- Documentatie completeren
|
||||||
|
- Presentatie skills
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tools
|
||||||
|
- Cursor
|
||||||
|
- Supabase
|
||||||
|
- Skills.sh
|
||||||
|
- Planning tools
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Lesopdracht (2 uur)
|
||||||
|
|
||||||
|
### Plan Je Eindopdracht
|
||||||
|
|
||||||
|
### Phase 1: Project Selectie (30 min)
|
||||||
|
- Review alle 10 opties
|
||||||
|
- Kies ÉÉN
|
||||||
|
- Documenteer redenering
|
||||||
|
|
||||||
|
### Phase 2: Gedetailleerde Planning met AI (1 uur)
|
||||||
|
|
||||||
|
**Gebruik Cursor + Claude Projects/Custom GPT**
|
||||||
|
|
||||||
|
| Stap | Output |
|
||||||
|
|------|--------|
|
||||||
|
| Feature Breakdown | User stories lijst |
|
||||||
|
| Database Schema Design | Schema met AI + Supabase skill |
|
||||||
|
| Architecture Planning | Folder structuur, patterns |
|
||||||
|
| Timeline | Dagelijkse milestones |
|
||||||
|
|
||||||
|
### Phase 3: Project Setup (30 min)
|
||||||
|
|
||||||
|
- GitHub repo aanmaken
|
||||||
|
- Initialiseer Next.js
|
||||||
|
- Install dependencies
|
||||||
|
- Setup .cursorrules
|
||||||
|
- README met plan
|
||||||
|
- Supabase project (tables + RLS)
|
||||||
|
- Install Skills
|
||||||
|
- Deploy initiële versie
|
||||||
|
- Commit
|
||||||
|
|
||||||
|
### Deliverable
|
||||||
|
- Project Proposal Document
|
||||||
|
- Initiële repo setup compleet
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Huiswerk (2 uur)
|
||||||
|
|
||||||
|
### Start Bouwen Core Features
|
||||||
|
|
||||||
|
### Week 1 Doelen
|
||||||
|
- Auth compleet
|
||||||
|
- Database schema
|
||||||
|
- Core feature #1
|
||||||
|
- Basis layout + navigatie
|
||||||
|
|
||||||
|
### Deze Week's Taken
|
||||||
|
1. Supabase Auth setup
|
||||||
|
2. Database implementatie
|
||||||
|
3. Basis layout
|
||||||
|
4. Eerste core feature
|
||||||
|
|
||||||
|
### Requirements
|
||||||
|
- Gebruik Cursor + Composer + Skills extensief
|
||||||
|
- Commit frequent
|
||||||
|
- Test elke feature
|
||||||
|
- Documenteer blockers
|
||||||
|
|
||||||
|
### Deliverable
|
||||||
|
- Progress update (250 woorden)
|
||||||
|
- GitHub repo
|
||||||
|
- Deployed preview URL
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 10 Eindopdracht Opties (Referentie)
|
||||||
|
|
||||||
|
1. Task Management App
|
||||||
|
2. Personal Finance Tracker
|
||||||
|
3. Recipe Collection App
|
||||||
|
4. Fitness Tracker
|
||||||
|
5. Event Planning Platform
|
||||||
|
6. Learning Management System
|
||||||
|
7. Portfolio Builder
|
||||||
|
8. Job Application Tracker
|
||||||
|
9. Travel Planner
|
||||||
|
10. Habit Tracker
|
||||||
|
|
||||||
|
*(Details per optie in aparte eindopdracht document)*
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Leerdoelen
|
||||||
|
Na deze les kan de student:
|
||||||
|
- Een geschikt eindproject kiezen
|
||||||
|
- Gedetailleerd plannen met AI assistance
|
||||||
|
- Database schema's ontwerpen met best practices
|
||||||
|
- Geavanceerde architecture patterns toepassen
|
||||||
|
- Accessibility requirements implementeren (WCAG AA)
|
||||||
|
- Een project opzetten met alle geleerde tools en technieken
|
||||||
Reference in New Issue
Block a user