fix: add v2 lessons for next class
This commit is contained in:
Tim Rijkse
11
readme.md
11
readme.md
@@ -6,6 +6,17 @@ Een 18-weekse cursus die studenten meeneemt van AI-beginner naar AI-powered deve
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## Versies
|
||||||
|
|
||||||
|
| Versie | Status | Beschrijving |
|
||||||
|
|--------|--------|--------------|
|
||||||
|
| **v1** | Gegeven | Originele lessen (Les01, Les02 mappen) |
|
||||||
|
| **[v2](v2/)** | In ontwikkeling | Verbeterde lessen op basis van feedback |
|
||||||
|
|
||||||
|
**Feedback & Reflectie:** [v1-feedback.md](v1-feedback.md) - Bevindingen na het geven van les 1 en 2
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## Overzicht
|
## Overzicht
|
||||||
|
|
||||||
| Les | Onderwerp | Deel | Status |
|
| Les | Onderwerp | Deel | Status |
|
||||||
|
|||||||
146
v1-feedback.md
Normal file
146
v1-feedback.md
Normal file
@@ -0,0 +1,146 @@
|
|||||||
|
# V1 Feedback & Reflectie
|
||||||
|
|
||||||
|
Dit document bevat de reflectie op de eerste versie van het curriculum, gebaseerd op de ervaringen tijdens het geven van les 1 en les 2 aan de eerste groep studenten (februari 2026).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Les 1: Introductie tot AI en Large Language Models
|
||||||
|
|
||||||
|
### Wat ging goed
|
||||||
|
- ChatGPT gedeelte verliep soepel
|
||||||
|
- Iedereen kon meedoen en de uitleg volgen
|
||||||
|
- Studenten waren enthousiast over de workflow
|
||||||
|
|
||||||
|
### Wat ging minder
|
||||||
|
- Docent versprak zich regelmatig en ging "van de hak op de tak"
|
||||||
|
- Mogelijk oorzaken: verkeerde slide-volgorde of zenuwen/onwetendheid bij eerste les
|
||||||
|
|
||||||
|
### Probleempunt: Account setup chaos
|
||||||
|
Bij het aanmaken van v0.dev account, koppelen met GitHub, en deployen naar Vercel werd het rommelig:
|
||||||
|
- Studenten gingen door elkaar praten
|
||||||
|
- Veel verschillende issues tegelijkertijd:
|
||||||
|
- Sommigen konden GitHub niet koppelen
|
||||||
|
- Anderen hadden eerst gedeployed en daarna pas gekoppeld
|
||||||
|
- Ontelbare onduidelijkheden
|
||||||
|
|
||||||
|
### Aanbevolen verbeteringen v2
|
||||||
|
1. **Strakker stappenplan:** Iedereen doet elke stap samen, wachten tot iedereen klaar is
|
||||||
|
2. **Checkpoints toevoegen:** "Steek je hand op als je dit scherm ziet"
|
||||||
|
3. **Troubleshooting slide:** Meest voorkomende problemen + oplossingen
|
||||||
|
4. **Volgorde slides herzien:** Logischer opbouwen
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Les 2: AI Code Assistants en OpenCode
|
||||||
|
|
||||||
|
### Wat ging goed
|
||||||
|
- Zodra OpenCode draaide, konden studenten goed meekomen
|
||||||
|
- Lokaal draaien van website lukte uiteindelijk
|
||||||
|
- Studenten slaagden erin om `/init` te gebruiken en nieuwe pagina's te maken
|
||||||
|
- Wireframe → prompt → componenten werkte goed
|
||||||
|
|
||||||
|
### Probleem 1: Te vroeg installeren
|
||||||
|
Zodra studenten de install command en "Download Desktop App" zagen op de slides, begonnen ze direct te installeren. Dit werd chaotisch terwijl de docent nog aan het uitleggen was.
|
||||||
|
|
||||||
|
**Oplossing v2:**
|
||||||
|
- Installatie-instructies pas tonen NA de conceptuele uitleg
|
||||||
|
- Of expliciet vermelden: "WACHT - nog niet installeren, eerst kijken"
|
||||||
|
|
||||||
|
### Probleem 2: Terminal en permissies
|
||||||
|
Veel studenten hadden problemen met hun terminal:
|
||||||
|
- **Windows vs Mac:** Verschillende omgevingen, verschillende commands
|
||||||
|
- **EACCESS errors:** Geen rechten om globaal te installeren
|
||||||
|
- **Sudo vereist:** Sommigen moesten met sudo installeren
|
||||||
|
|
||||||
|
**Oplossing v2:**
|
||||||
|
- Voorbereiding document met terminal setup
|
||||||
|
- Aparte instructies voor Windows en Mac
|
||||||
|
- Uitleg over permissies en sudo
|
||||||
|
|
||||||
|
### Probleem 3: Git clone en SSH keys
|
||||||
|
Bij het clonen van hun GitHub repository:
|
||||||
|
- Veel studenten hadden geen SSH key geconfigureerd
|
||||||
|
- Sommigen konden wel met HTTPS clonen (maar dat is minder ideaal)
|
||||||
|
|
||||||
|
**Oplossing v2:**
|
||||||
|
- SSH key setup als voorbereiding VOOR de les
|
||||||
|
- Of HTTPS als fallback accepteren voor beginners
|
||||||
|
- Duidelijke instructies in voorbereidingsdocument
|
||||||
|
|
||||||
|
### Probleem 4: Node.js versie
|
||||||
|
Bij npm install:
|
||||||
|
- Sommige studenten hadden verkeerde Node versie
|
||||||
|
- Geen ervaring met versie management
|
||||||
|
|
||||||
|
**Oplossing v2:**
|
||||||
|
- NVM (Node Version Manager) introduceren
|
||||||
|
- Specifieke Node versie vereisen (bijv. Node 20 LTS)
|
||||||
|
- Check command in voorbereiding: `node -v`
|
||||||
|
|
||||||
|
### Probleem 5: OpenCode terminal vs System terminal
|
||||||
|
Studenten runden commands in de OpenCode terminal terwijl ze het in hun system terminal moesten doen:
|
||||||
|
- Begrepen niet dat ze eerst `exit` moesten doen bij OpenCode
|
||||||
|
- Verwarring over welke terminal voor wat
|
||||||
|
|
||||||
|
**Oplossing v2:**
|
||||||
|
- Duidelijker onderscheid maken tussen terminals
|
||||||
|
- Visueel verschil tonen (screenshots)
|
||||||
|
- Expliciete instructie: "Dit doe je in je EIGEN terminal, NIET in OpenCode"
|
||||||
|
|
||||||
|
### Probleem 6: Tokens op bij gratis modellen
|
||||||
|
De tokens van gratis modellen raakten vrij snel op:
|
||||||
|
- "Arme studenten" - alleen gratis modellen beschikbaar
|
||||||
|
- Beperkt aantal prompts mogelijk per les
|
||||||
|
|
||||||
|
**Oplossing v2:**
|
||||||
|
- Studenten aanmoedigen om prompts efficiënt te formuleren
|
||||||
|
- Meerdere gratis modellen tonen (backup opties)
|
||||||
|
- Eventueel: docent-account met meer tokens voor demo's
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Algemene verbeteringen voor v2
|
||||||
|
|
||||||
|
### 1. Voorbereidingsdocument toevoegen
|
||||||
|
Een "Les 0" of voorbereidingsdocument dat studenten VOOR de eerste les moeten doorlopen:
|
||||||
|
- [ ] Node.js installeren (via NVM)
|
||||||
|
- [ ] Git installeren
|
||||||
|
- [ ] SSH key genereren en toevoegen aan GitHub
|
||||||
|
- [ ] Terminal basics (cd, ls, pwd)
|
||||||
|
- [ ] GitHub account aanmaken
|
||||||
|
|
||||||
|
### 2. Platform-specifieke instructies
|
||||||
|
- Aparte secties voor Windows en Mac
|
||||||
|
- Screenshots van beide omgevingen
|
||||||
|
- Bekende issues per platform
|
||||||
|
|
||||||
|
### 3. "Volg mij" aanpak
|
||||||
|
- Kleinere stappen
|
||||||
|
- Wachten tot iedereen klaar is
|
||||||
|
- Checkpoints met handopsteking of poll
|
||||||
|
|
||||||
|
### 4. Troubleshooting secties
|
||||||
|
- Veelvoorkomende errors met oplossingen
|
||||||
|
- QR code naar online troubleshooting guide?
|
||||||
|
|
||||||
|
### 5. Slide volgorde herzien
|
||||||
|
- Conceptuele uitleg VOOR praktische stappen
|
||||||
|
- "Nog niet doen" waarschuwingen waar nodig
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Conclusie
|
||||||
|
|
||||||
|
De kern van de lessen (AI concepten, prompting, development workflow) werkt goed. De problemen zitten vooral in:
|
||||||
|
|
||||||
|
1. **Voorbereiding:** Studenten komen onvoorbereid qua development setup
|
||||||
|
2. **Tempo:** Te snel door setup-stappen heen
|
||||||
|
3. **Platform diversiteit:** Windows/Mac verschillen onderschat
|
||||||
|
4. **Terminal ervaring:** Veel studenten hebben weinig terminal ervaring
|
||||||
|
|
||||||
|
V2 moet focussen op betere voorbereiding en duidelijkere, stapsgewijze instructies met checkpoints.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*Laatste update: februari 2026*
|
||||||
|
*Gebaseerd op: Les 1 en Les 2 gegeven aan eerste groep*
|
||||||
257
v2/Les01-Introductie-AI/Les01-Bijlage-A-Lesopdracht.md
Normal file
257
v2/Les01-Introductie-AI/Les01-Bijlage-A-Lesopdracht.md
Normal file
@@ -0,0 +1,257 @@
|
|||||||
|
# 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
|
||||||
|
- Zelfstandig een project deployen naar Vercel
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Wat ga je maken?
|
||||||
|
|
||||||
|
Je gaat een **complete landingspagina** bouwen voor een fictief product of bedrijf. 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:**
|
||||||
|
- Minimaal **3 secties** (bijv. hero, features, pricing, testimonials, footer)
|
||||||
|
- Minimaal **1 carousel** (image slider of testimonial slider)
|
||||||
|
- Minimaal **1 accordion** (FAQ of uitklapbare features)
|
||||||
|
- Je bent vrij in wat je tekent en welk "product" je bedenkt!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 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 (15 min)
|
||||||
|
|
||||||
|
Pak pen en papier en teken je complete landingspagina. Je hoeft geen kunstenaar te zijn!
|
||||||
|
|
||||||
|
**Teken:**
|
||||||
|
- Meerdere secties onder elkaar (minimaal 3!)
|
||||||
|
- Geef aan waar je carousel komt
|
||||||
|
- Geef aan waar je accordion komt
|
||||||
|
- Tekst indicaties (schrijf "HEADLINE" of de echte tekst)
|
||||||
|
- Buttons en afbeelding placeholders
|
||||||
|
|
||||||
|
**Tips:**
|
||||||
|
- Simpele blokken en lijnen zijn genoeg
|
||||||
|
- Schrijf bij elementen wat ze zijn
|
||||||
|
- Denk na over de flow van je pagina
|
||||||
|
|
||||||
|
### 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 Project - Schets + Beschrijving (15 min)
|
||||||
|
|
||||||
|
Open je ChatGPT Project "Les 1 - v0.dev Prompt Engineer" en upload je foto. Voeg een gedetailleerde beschrijving toe.
|
||||||
|
|
||||||
|
**Gebruik dit template:**
|
||||||
|
|
||||||
|
```
|
||||||
|
Dit is een schets voor een complete landingspagina.
|
||||||
|
|
||||||
|
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"]
|
||||||
|
|
||||||
|
**Let op:** Er moet een carousel in zitten en een accordion.
|
||||||
|
|
||||||
|
Genereer een gedetailleerde Engelse prompt die ik direct kan gebruiken in v0.dev.
|
||||||
|
```
|
||||||
|
|
||||||
|
**Voorbeeld ingevuld:**
|
||||||
|
|
||||||
|
```
|
||||||
|
Dit is een schets voor een complete landingspagina.
|
||||||
|
|
||||||
|
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
|
||||||
|
|
||||||
|
**Let op:** Er moet een carousel in zitten en een accordion.
|
||||||
|
|
||||||
|
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 (20 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 voor carousel en accordion:**
|
||||||
|
Als de carousel of accordion er niet (goed) in zit, gebruik follow-up prompts:
|
||||||
|
- "Add a testimonial carousel with 3 slides"
|
||||||
|
- "Add an FAQ accordion section"
|
||||||
|
- "Make the carousel auto-scroll"
|
||||||
|
- "Style the accordion with smooth animations"
|
||||||
|
|
||||||
|
**Let op:** Je hebt ~7 gratis generaties per dag. Gebruik ze slim!
|
||||||
|
|
||||||
|
### Stap 6: Deploy naar Vercel (10 min)
|
||||||
|
|
||||||
|
**Dit ga je zelf uitzoeken!** Dit is een belangrijke skill als developer.
|
||||||
|
|
||||||
|
**Hints:**
|
||||||
|
- Je hebt een GitHub account nodig (maak gratis aan op github.com)
|
||||||
|
- Zoek naar "Add Integration" of "Deploy" in v0.dev
|
||||||
|
- v0 kan koppelen met GitHub → Vercel deployt automatisch
|
||||||
|
|
||||||
|
**Resultaat:**
|
||||||
|
- Je krijgt een live URL: `jouw-project.vercel.app`
|
||||||
|
- Je code staat nu ook in GitHub
|
||||||
|
|
||||||
|
**Vastgelopen?**
|
||||||
|
- Vraag eerst een klasgenoot om hulp
|
||||||
|
- Probeer het 5 minuten zelf voordat je de docent vraagt
|
||||||
|
- Google is je vriend: "v0.dev deploy to vercel"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Op te leveren
|
||||||
|
|
||||||
|
Aan het einde van de les heb je:
|
||||||
|
|
||||||
|
1. **Je originele tekening:**
|
||||||
|
- Foto van je papieren schets (met 3+ secties zichtbaar)
|
||||||
|
|
||||||
|
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 landingspagina met **carousel** zichtbaar
|
||||||
|
- Screenshot van je landingspagina met **accordion** zichtbaar
|
||||||
|
- Eventuele iteratie-prompts die je gebruikte
|
||||||
|
|
||||||
|
4. **Live deployment:**
|
||||||
|
- Vercel URL van je gedeployde landingspagina
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 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" |
|
||||||
|
| ✅ Carousel | "Testimonial slider" of "Image carousel" |
|
||||||
|
| ✅ Accordion | "FAQ sectie" of "Uitklapbare features" |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 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?
|
||||||
|
- Heeft je landingspagina minimaal 3 secties?
|
||||||
|
- Zit er een werkende carousel in?
|
||||||
|
- Zit er een werkende accordion in?
|
||||||
|
- Heb je de deployment zelf uitgezocht?
|
||||||
|
- 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. **Extra interactie:** Voeg een contact formulier of newsletter signup toe
|
||||||
|
2. **Andere stijl:** Genereer dezelfde schets met een compleet andere look & feel (dark mode?)
|
||||||
|
3. **Animaties:** Voeg scroll-animaties of hover-effecten toe via prompts
|
||||||
|
4. **Help een klasgenoot:** Uitleggen is de beste manier om te leren!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*Succes en veel plezier met je eerste AI-gegenereerde website!*
|
||||||
84
v2/Les01-Introductie-AI/Les01-Bijlage-B-Huiswerkopdracht.md
Normal file
84
v2/Les01-Introductie-AI/Les01-Bijlage-B-Huiswerkopdracht.md
Normal file
@@ -0,0 +1,84 @@
|
|||||||
|
# Bijlage B: Huiswerkopdracht Les 1
|
||||||
|
|
||||||
|
## Voor volgende week
|
||||||
|
|
||||||
|
**Cursus:** AI Fundamentals
|
||||||
|
**Les:** 1 - Introductie AI & Large Language Models
|
||||||
|
**Inleveren:** Via Teams, voor de volgende les
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Opdracht 1: Reflectie (500 woorden)
|
||||||
|
|
||||||
|
Schrijf een reflectie over je eerste ervaring met AI-tools.
|
||||||
|
|
||||||
|
### Deelvragen
|
||||||
|
|
||||||
|
Gebruik deze vragen als leidraad:
|
||||||
|
|
||||||
|
1. **Wat vond je verrassend aan werken met AI?**
|
||||||
|
- Was er iets dat je niet had verwacht?
|
||||||
|
- Wat viel je op aan de snelheid, kwaliteit of manier van werken?
|
||||||
|
|
||||||
|
2. **Wat ging goed? Wat vond je lastig?**
|
||||||
|
- Welke stappen in de workflow gingen soepel?
|
||||||
|
- Waar liep je tegenaan? Hoe heb je dat opgelost?
|
||||||
|
|
||||||
|
3. **Hoe zie je AI jouw werk als developer veranderen?**
|
||||||
|
- Wat betekent dit voor jouw toekomstige manier van werken?
|
||||||
|
- Welke taken zou je vaker met AI willen doen?
|
||||||
|
|
||||||
|
### Tips
|
||||||
|
|
||||||
|
- Wees eerlijk en persoonlijk
|
||||||
|
- Geef concrete voorbeelden uit de les
|
||||||
|
- Het gaat om jouw ervaring, er zijn geen foute antwoorden
|
||||||
|
- Schrijf in je eigen woorden (niet door AI laten schrijven!)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Opdracht 2: Breid je v0 website uit
|
||||||
|
|
||||||
|
Voeg minimaal **1 nieuwe sectie** toe aan je landingspagina van de les.
|
||||||
|
|
||||||
|
### Mogelijke secties
|
||||||
|
|
||||||
|
- Pricing table
|
||||||
|
- Features overzicht
|
||||||
|
- Contact formulier
|
||||||
|
- Footer met links
|
||||||
|
- Team sectie
|
||||||
|
- Extra testimonials
|
||||||
|
- Newsletter signup
|
||||||
|
|
||||||
|
### Werkwijze
|
||||||
|
|
||||||
|
Gebruik dezelfde workflow als in de les:
|
||||||
|
|
||||||
|
1. **Teken** de nieuwe sectie op papier
|
||||||
|
2. **Upload** naar je ChatGPT Project
|
||||||
|
3. **Genereer** in v0.dev (vergeet niet: tech stack, kleuren, stijl!)
|
||||||
|
4. **Deploy** de update naar Vercel
|
||||||
|
|
||||||
|
### Op te leveren
|
||||||
|
|
||||||
|
- Screenshot van je nieuwe schets
|
||||||
|
- Screenshot van het v0 resultaat
|
||||||
|
- Je updated Vercel URL
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Inleveren
|
||||||
|
|
||||||
|
| Wat | Format |
|
||||||
|
|-----|--------|
|
||||||
|
| Reflectie | Word, PDF of direct in Teams |
|
||||||
|
| Screenshots | Afbeeldingen |
|
||||||
|
| Vercel URL | Link |
|
||||||
|
|
||||||
|
**Waar:** Teams
|
||||||
|
**Deadline:** Voor de volgende les
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*Succes!*
|
||||||
499
v2/Les01-Introductie-AI/Les01-Docenttekst-Notes.md
Normal file
499
v2/Les01-Introductie-AI/Les01-Docenttekst-Notes.md
Normal file
@@ -0,0 +1,499 @@
|
|||||||
|
# Les 1 - Keynote Notes
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 1: WELKOM & INTRODUCTIE (15 min)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 1: Welkom
|
||||||
|
- Wacht tot iedereen zit
|
||||||
|
- "Welkom bij de eerste les van AI Fundamentals"
|
||||||
|
- "Neem even de tijd om je laptop klaar te leggen"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 2: Planning
|
||||||
|
- Loop door de tijdsblokken op de slide
|
||||||
|
- "We beginnen met theorie over AI en hoe het werkt"
|
||||||
|
- "Daarna praktisch aan de slag met ChatGPT"
|
||||||
|
- "Dan prompt engineering: hoe stel je de juiste vraag?"
|
||||||
|
- **Met nadruk:** "En dan de grote finale: van een tekening op papier naar een werkende website"
|
||||||
|
- "Jullie gaan vandaag letterlijk een website bouwen die begint als schets"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 3: Voorstellen
|
||||||
|
- Naam, developer, gebruik dagelijks AI-tools
|
||||||
|
- "Dit vak verandert zo snel - wat vandaag cutting edge is, kan over 3 maanden achterhaald zijn"
|
||||||
|
- "2x per week les, bereikbaar via Teams"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 4: Kennismaking (5 min studenten)
|
||||||
|
- "Vertel kort je naam"
|
||||||
|
- "Heb je al eens ChatGPT of andere AI-tool gebruikt? Waarvoor?"
|
||||||
|
- Laat iedereen kort reageren
|
||||||
|
- "Mooi, de meesten hebben al met AI gewerkt - goed startpunt"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 5: Leerlijn overzicht
|
||||||
|
- "18 weken, 4 delen"
|
||||||
|
- **Deel 1 (les 1-4):** AI Foundations - basis, ChatGPT, OpenCode
|
||||||
|
- **Deel 2 (les 5-9):** Technical Foundations - TypeScript, Next.js, Supabase
|
||||||
|
- **Deel 3 (les 10-12):** AI Tooling - welke tool wanneer, prototypen, Cursor
|
||||||
|
- **Deel 4 (les 13-18):** Advanced - AI agents, Vercel AI SDK, eindproject
|
||||||
|
- "Maar dat is ver weg - vandaag: de basis en de workflow"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 6: Accounts check
|
||||||
|
- "Drie accounts nodig vandaag"
|
||||||
|
- **ChatGPT:** "Wie heeft dit? Wie niet? → chat.openai.com, gratis"
|
||||||
|
- **GitHub:** "Waar developers code opslaan - nodig voor deployen"
|
||||||
|
- **Vercel:** "Hier komt je website live te staan - vercel.com, koppel met GitHub"
|
||||||
|
- Geef 2 minuten om aan te maken
|
||||||
|
- "Iedereen zover? Alle drie? Mooi, dan gaan we de diepte in"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 2: WAT IS AI? (25 min)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 7: Wat is AI?
|
||||||
|
- "Wat ís eigenlijk AI?"
|
||||||
|
- **🎤 INTERACTIE:** "Noem eens voorbeelden van AI die je vandaag al hebt gebruikt?"
|
||||||
|
- **Spotify/Netflix:** "Analyseert je gedrag, voorspelt wat je leuk vindt"
|
||||||
|
- **Google Maps:** "Voorspelt verkeer, berekent snelste route"
|
||||||
|
- **Autocorrect:** "Letterlijk next-word prediction, zoals ChatGPT"
|
||||||
|
- **Gezichtsherkenning:** "Patroonherkenning in pixels"
|
||||||
|
- **Als niemand antwoordt:** "Je telefoon vanochtend - getypt? Autocorrect. Route? Google Maps. Muziek? Spotify kiest voor je. Allemaal AI."
|
||||||
|
- AI = computersystemen die taken uitvoeren waarvoor normaal menselijke intelligentie nodig is
|
||||||
|
- Patronen herkennen, beslissingen nemen, taal begrijpen en genereren
|
||||||
|
- **Narrow AI (Weak AI):** goed in één specifieke taak - ChatGPT is hier een voorbeeld
|
||||||
|
- **General AI (Strong AI):** alles kunnen wat mens kan - bestaat nog niet
|
||||||
|
- "Wat we vandaag gebruiken is Narrow AI - heel krachtig, maar beperkt tot specifieke taken"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 8: Hoe werken LLMs?
|
||||||
|
- "Hoe werkt ChatGPT eigenlijk?"
|
||||||
|
- **🎤 INTERACTIE:** "Wat denken jullie dat er gebeurt als je iets typt?"
|
||||||
|
- **Kort antwoord:** "Het voorspelt steeds het volgende woord. Meer niet. Maar het doet dat zó goed dat het lijkt alsof het 'denkt'."
|
||||||
|
- LLM = Large Language Model
|
||||||
|
- Getraind op miljarden pagina's tekst - boeken, websites, Wikipedia, code
|
||||||
|
- **Kernvraag die het geleerd heeft:** "Als ik deze woorden zie, wat is het meest waarschijnlijke volgende woord?"
|
||||||
|
- ChatGPT, Claude, Gemini = voorspelmachines
|
||||||
|
- Token voor token voorspellen wat er daarna komt
|
||||||
|
- "Het lijkt alsof ze begrijpen wat je zegt, maar er zit geen bewustzijn in"
|
||||||
|
- "Geavanceerde statistische patroonherkenning op ongekende schaal"
|
||||||
|
- **🎤 INTERACTIE:** "Als LLMs alleen maar voorspellen, hoe kunnen ze dan creatieve ideeën genereren?"
|
||||||
|
- **HOW:** Model heeft miljarden teksten gelezen met concepten naast elkaar. 'Koffie' bij 'ochtend', 'strand' bij 'zon'. Vraag je 'café op Mars' → combineert patronen van beide.
|
||||||
|
- **WHY voelt het creatief?** Combinatie is nieuw voor jou, ook al zijn losse onderdelen dat niet. Geen echte intentie/inspiratie, maar mixt kennis op nieuwe manieren.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 9: Tokens uitleg
|
||||||
|
- Tekst wordt omgezet naar nummers = tokens
|
||||||
|
- "Ik drink koffie" wordt [1847, 5621, 8934]
|
||||||
|
- Woorden met vergelijkbare betekenis liggen dicht bij elkaar
|
||||||
|
- "koffie" en "thee" = dichtbij / "koffie" en "fiets" = ver uit elkaar
|
||||||
|
- **Voorbeeld:** "Ik drink koffie met..." → wat komt er? → "melk" of "suiker"
|
||||||
|
- Model berekent kans per woord, kiest (meestal) meest waarschijnlijke
|
||||||
|
- **🎤 INTERACTIE:** "Als je ChatGPT 10x dezelfde vraag stelt, krijg je dan 10x hetzelfde antwoord?" (handopsteken ja/nee)
|
||||||
|
- **Antwoord: Nee!** Er zit bewust randomness in = temperatuur parameter
|
||||||
|
- **Wat is temperatuur?** Model berekent: 'melk' 60%, 'suiker' 35%, 'room' 5%. Lage temp → kiest altijd 'melk'. Hoge temp → gooit dobbelsteen, kiest soms 'suiker'
|
||||||
|
- **Waarom?** Anders steeds exact hetzelfde = robotachtig. Variatie maakt het menselijker/creatiever
|
||||||
|
- "Dit verklaart waarom je soms briljante antwoorden krijgt en soms onzin"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 10: Hallucinaties ⚠️
|
||||||
|
- **Belangrijk begrip!**
|
||||||
|
- AI kan dingen verzinnen - compleet uit de lucht gegrepen
|
||||||
|
- Klinkt heel overtuigend, grammaticaal perfect
|
||||||
|
- **Voorbeelden:**
|
||||||
|
- Wetenschappelijk paper dat niet bestaat (titel, auteurs, jaar, samenvatting)
|
||||||
|
- npm package dat nooit heeft bestaan
|
||||||
|
- Restaurants met verzonnen namen en adressen
|
||||||
|
- **Waarom?** Model voorspelt wat WAARSCHIJNLIJK is, controleert niet of het WAAR is
|
||||||
|
- **Praktisch:** Verifieer altijd! Kopieer nooit blindelings code. Check of libraries bestaan. Test je code.
|
||||||
|
- **🎤 INTERACTIE:** "Hoe herken je een hallucinatie? Wat zijn rode vlaggen?"
|
||||||
|
- **Té specifieke details** (cijfers, datums, namen) → WHY: vult gaten met wat 'waarschijnlijk' klinkt
|
||||||
|
- **Bronnen die niet te vinden zijn** → WHY: genereert tekst die LIJKT op bronvermelding
|
||||||
|
- **Onbekende npm packages** → "Ik heb zelf meegemaakt dat ChatGPT bleef volhouden dat een package bestond, zelfs 'documentatie' genereerde, terwijl code steeds errors gaf!"
|
||||||
|
- **Verdacht zelfverzekerd over obscure onderwerpen** → WHY: weet niet wat het niet weet
|
||||||
|
- "AI is een tool, geen orakel. Behandel het als een enthousiaste junior die soms dingen verzint"
|
||||||
|
- **Regel: Vertrouw, maar verifieer!**
|
||||||
|
- **🎤 INTERACTIE:** "Wie heeft dit zelf meegemaakt? Dat ChatGPT iets verzon?" (laat 2-3 studenten ervaring delen)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 11: De Grote Spelers
|
||||||
|
- **ChatGPT (OpenAI):** bekendste, maakte AI mainstream
|
||||||
|
- **Claude (Anthropic):** minder bekend, technisch heel sterk, goed voor lange documenten
|
||||||
|
- **Gemini (Google):** geïntegreerd in Google ecosysteem
|
||||||
|
- **Grok (xAI/Elon Musk):** in X, real-time informatie
|
||||||
|
- "Vandaag focus op ChatGPT - meest toegankelijk, beste gratis tier"
|
||||||
|
- "Concepten zijn toepasbaar op allemaal"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 12: Gratis AI Opties
|
||||||
|
- "Moet je betalen voor AI?"
|
||||||
|
- **🎤 INTERACTIE:** "Wie betaalt er al voor een AI tool? ChatGPT Plus, Claude Pro?" (tel handen, vraag 1-2 waarom) - "En de rest - waarom niet?" (verwacht: gratis werkt prima, te duur, weet niet wat je extra krijgt)
|
||||||
|
- "Voor deze cursus hoef je niks te betalen!"
|
||||||
|
- **ChatGPT Free:** GPT-5, afbeeldingen uploaden, documenten, code
|
||||||
|
- **Claude Free:** Sonnet 3.5, uitstekend voor lange teksten
|
||||||
|
- **Gemini Free:** handig als je in Google ecosysteem zit
|
||||||
|
- **Groq:** gratis API met Llama 3.3, ongelooflijk snel
|
||||||
|
- **Ollama:** draait lokaal op je laptop, data verlaat je computer nooit → privacy!
|
||||||
|
- "Voor later: als je met klantdata werkt, is Ollama je vriend"
|
||||||
|
- **Conclusie: gratis is voldoende voor deze cursus!**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 13: Betaald & Premium
|
||||||
|
- **~$20/maand (ChatGPT Plus / Claude Pro):**
|
||||||
|
- Meer berichten, sneller, premium features
|
||||||
|
- Voldoende voor professioneel gebruik
|
||||||
|
- **Premium tier - Claude Opus:**
|
||||||
|
- Beste model voor complexe redenering
|
||||||
|
- ~$75/maand via API bij intensief gebruik
|
||||||
|
- Voor als je echt vastloopt
|
||||||
|
- **Advies:** Start gratis → upgrade naar Plus/Pro als je limieten raakt → Opus voor moeilijke problemen
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 14: Welke tool voor welke taak?
|
||||||
|
- "Welke is het beste? Hangt af van wat je wilt"
|
||||||
|
- **Snelle code snippets:** ChatGPT of Claude, beide goed
|
||||||
|
- **Lange documenten:** Claude (grotere context window)
|
||||||
|
- **UI componenten:** v0.dev (straks!)
|
||||||
|
- **Privacy-gevoelig:** Ollama (lokaal)
|
||||||
|
- **Supersnel prototypen:** Groq
|
||||||
|
- **Tip:** Experimenteer met meerdere tools - elke heeft sterke/zwakke punten
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 3: CHATGPT PRAKTIJK (20 min)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 15: Interface rondleiding
|
||||||
|
- "Open allemaal ChatGPT - chat.openai.com"
|
||||||
|
- Wacht tot iedereen erin zit
|
||||||
|
- **Midden:** chatvenster - vragen en antwoorden
|
||||||
|
- **Links:** chat geschiedenis
|
||||||
|
- **Boven:** model kiezen
|
||||||
|
- **Rechtonder (profielfoto):** instellingen
|
||||||
|
- "Interface is bewust simpel - kracht zit in wat je typt"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 16: Model kiezen
|
||||||
|
- Kijk bovenaan je scherm
|
||||||
|
- **GPT-5:** standaard, snel, voor meeste taken genoeg
|
||||||
|
- **GPT-5 with canvas:** voor documenten bewerken, opent editor naast chat
|
||||||
|
- **GPT-5.2:** nieuwste en krachtigste (alleen Plus)
|
||||||
|
- "Voor vandaag is GPT-5 perfect"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 17: Tijdelijke Chat
|
||||||
|
- **Privacy feature!**
|
||||||
|
- "Temporary Chat" bij nieuwe chat
|
||||||
|
- Gesprek wordt niet opgeslagen, niet gebruikt voor training
|
||||||
|
- **🎤 INTERACTIE:** "In welke situaties zou je tijdelijke chat willen gebruiken?"
|
||||||
|
- **Klantgegevens/bedrijfsdata** → WHY: Kan gebruikt worden voor training. Jouw data in iemand anders' antwoord = datalek
|
||||||
|
- **Medische/persoonlijke info** → WHY: AVG/GDPR - mag niet delen met derden (OpenAI = derde partij)
|
||||||
|
- **Interne bedrijfscode** → WHY: Intellectueel eigendom - geheime algoritme in trainingsdata
|
||||||
|
- "Tijdelijke chat voorkomt dit - niet opgeslagen, niet voor training"
|
||||||
|
- "Voor deze cursus maakt niet uit, maar onthoud voor professioneel werk"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 18: Afbeeldingen analyseren
|
||||||
|
- **Cruciaal voor onze workflow!**
|
||||||
|
- Klik paperclip → upload afbeelding
|
||||||
|
- Demo: upload een schets, vraag "Wat zie je? Beschrijf de layout"
|
||||||
|
- ChatGPT beschrijft precies wat hij ziet
|
||||||
|
- Dit heet image-to-text of vision
|
||||||
|
- **Dit is de sleutel:** jullie tekenen schets → foto → upload naar ChatGPT → ChatGPT vertaalt naar beschrijving voor code
|
||||||
|
- "Je hoeft geen designer te zijn - ChatGPT begrijpt ook ruwe schetsen"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 19: Bestanden uploaden
|
||||||
|
- PDF, Word, Excel, code bestanden
|
||||||
|
- Handig voor: documentatie analyseren, code reviewen, data uit spreadsheets
|
||||||
|
- Limiet: ~50 pagina's per document
|
||||||
|
- Meerdere bestanden tegelijk mogelijk
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 20: Custom Instructions
|
||||||
|
- Ga naar Settings → Personalisatie
|
||||||
|
- Permanent instellen wie je bent en hoe ChatGPT moet antwoorden
|
||||||
|
- Wordt meegenomen in élke chat
|
||||||
|
- **Voorbeeld:** "Ik ben frontend developer. React en Tailwind CSS. Junior niveau. Geef praktische code voorbeelden."
|
||||||
|
- "Stel dit in vóór je begint met werken - scheelt herhaling"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 21: ChatGPT Projects
|
||||||
|
- **Nieuwe feature!**
|
||||||
|
- Klik "New Project" in zijbalk
|
||||||
|
- Slimme werkruimtes: chats, bestanden, specifieke instructies bij elkaar
|
||||||
|
- Handig voor: school, werk, hobby projecten apart houden
|
||||||
|
- Geef naam + instructies die alleen voor dit project gelden
|
||||||
|
- **Projects hebben eigen geheugen** - anders dan normale chats
|
||||||
|
- Gratis tier: 5 bestanden per project
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 22: Praktijk Oefening (5 min studenten)
|
||||||
|
- **Twee dingen:**
|
||||||
|
- **1. Custom Instructions instellen:**
|
||||||
|
- Settings → Personalisatie
|
||||||
|
- "Ik ben frontend developer. React en Tailwind CSS."
|
||||||
|
- **2. Project aanmaken:**
|
||||||
|
- "New Project" in zijbalk
|
||||||
|
- Naam: "Les 1 - v0.dev Prompt Engineer"
|
||||||
|
- Instructie: "Help me gedetailleerde prompts schrijven voor v0.dev. Focus op React + Tailwind CSS."
|
||||||
|
- Loop rond en help
|
||||||
|
- "Dit project gebruiken we straks!"
|
||||||
|
- Check: "Heeft iedereen een project aangemaakt?"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 4: PROMPT ENGINEERING (15 min)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 23: Wat is Prompt Engineering?
|
||||||
|
- Prompt = de instructie die je aan AI geeft
|
||||||
|
- **Cruciaal inzicht:** kwaliteit antwoord hangt af van kwaliteit vraag
|
||||||
|
- **Garbage in = garbage out**
|
||||||
|
- Vage vraag → vaag antwoord / Specifiek → specifieke, bruikbare output
|
||||||
|
- "Dit is een vaardigheid - en je kunt het leren"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 24: Slecht vs Goed
|
||||||
|
- **🎤 INTERACTIE:** "Hier staat: 'Maak een button'. Wat is hier mis mee?"
|
||||||
|
- **Slecht:** "Maak een button" - **WHY is dit slecht?**
|
||||||
|
- Welke taal? HTML, React, Vue, Angular - allemaal anders
|
||||||
|
- Welke stijl? Rond, vierkant, schaduw?
|
||||||
|
- Welke kleur? Blauw, rood, gradient?
|
||||||
|
- Hoe groot? Mobiel vs desktop?
|
||||||
|
- → AI moet gokken → generieke output → jij moet aanpassen → tijdverlies
|
||||||
|
- **Goed:** "Maak een React button component met Tailwind CSS. Primary styling met blauwe achtergrond (#2563EB). Include hover state en loading state met spinner."
|
||||||
|
- Je specificeert: technologie, styling, features
|
||||||
|
- Resultaat: bruikbare code die je direct kunt gebruiken
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 25: Prompt Framework
|
||||||
|
- **4 elementen:**
|
||||||
|
- **1. Rol:** "Je bent een senior frontend developer met 10 jaar ervaring"
|
||||||
|
- **2. Context:** "Je werkt aan een SaaS landingspagina voor projectmanagement tool"
|
||||||
|
- **3. Taak:** "Maak een hero section met headline, subtitel, call-to-action button"
|
||||||
|
- **4. Format:** "Gebruik React en Tailwind CSS. Geef alleen code, geen uitleg."
|
||||||
|
- **🎤 INTERACTIE:** "Welk element vinden jullie het belangrijkst? Rol, context, taak, of format?" (handopsteken)
|
||||||
|
- **Taak:** Enige verplichte element - zonder weet AI niet wat te doen. Maar alleen taak = generieke output
|
||||||
|
- **Context:** Maakt vaak grootste verschil. 'Maak button' vs 'Button voor medische app, oudere gebruikers' = heel andere output
|
||||||
|
- **Rol:** Helpt AI juiste 'stem' vinden. Senior developer ≠ beginner. Copywriter ≠ technisch schrijver
|
||||||
|
- **Format:** Voorkomt herschrijven. 'Geef alleen code' scheelt tijd
|
||||||
|
- Combinatie is krachtig. Niet altijd alle vier nodig, maar meer context = beter resultaat
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 26: Tech Stack specificeren
|
||||||
|
- Tech stack = de technologieën waarmee je bouwt
|
||||||
|
- **Deze cursus:** React + Next.js + Tailwind CSS
|
||||||
|
- Zonder specificatie weet AI niet: HTML? React? Vue? Angular?
|
||||||
|
- Door expliciet te zeggen "React met Tailwind CSS" → direct bruikbare code
|
||||||
|
- **v0.dev genereert automatisch React + Tailwind**
|
||||||
|
- **In ChatGPT moet je het wel specificeren!**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 27: Kleuren en Stijl
|
||||||
|
- **Kleuren:**
|
||||||
|
- Exact: "#2563EB voor primary blue"
|
||||||
|
- Beschrijvend: "warm oranje thema met aarde-tinten"
|
||||||
|
- **Stijl:** modern, minimalistisch, speels, corporate, brutalist, retro...
|
||||||
|
- **Referenties:** "In de stijl van Stripe.com" of "vergelijkbaar met Apple website"
|
||||||
|
- **Complete specificatie:** "Blauw kleurenschema #2563EB. Modern en minimalistisch. Clean met veel whitespace. B2B SaaS startup."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 28: Tips samenvatting
|
||||||
|
- Geef een rol
|
||||||
|
- Wees specifiek
|
||||||
|
- Specificeer tech stack
|
||||||
|
- Beschrijf look & feel
|
||||||
|
- Geef voorbeelden als je kunt
|
||||||
|
- Itereer - eerste prompt is zelden perfect
|
||||||
|
- **Onthoud: garbage in = garbage out**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 5: LIVE DEMO V0.DEV (20 min)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 29: Intro v0.dev
|
||||||
|
- Tool van Vercel (bedrijf achter Next.js)
|
||||||
|
- **Gamechanger voor UI development**
|
||||||
|
- Beschrijf wat je wilt in tekst OF upload afbeelding
|
||||||
|
- v0 genereert werkende React + Tailwind code
|
||||||
|
- Direct preview zien
|
||||||
|
- Direct deployen naar internet
|
||||||
|
- "De slimme workflow combineert ChatGPT en v0 - daar zit de magie"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 30: De Workflow
|
||||||
|
- **5 stappen:**
|
||||||
|
- 1. **TEKEN** je idee op papier
|
||||||
|
- 2. **FOTO** maken met telefoon
|
||||||
|
- 3. **CHATGPT** - upload foto + beschrijf wensen (tech, kleuren, stijl)
|
||||||
|
- 4. ChatGPT maakt gedetailleerde **PROMPT**
|
||||||
|
- 5. Plak in **V0.DEV** → werkende website!
|
||||||
|
- **Waarom zo?**
|
||||||
|
- v0 heeft beperkte credits (~7/dag), ChatGPT is onbeperkt
|
||||||
|
- ChatGPT is beter in vertalen ruwe idee → gestructureerde prompt
|
||||||
|
- v0 is beter in code genereren
|
||||||
|
- "Gebruik elk tool waar het goed in is"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 31: LIVE DEMO (15 min)
|
||||||
|
|
||||||
|
**Stap 1: Tekenen**
|
||||||
|
- Pak pen en papier
|
||||||
|
- Teken simpele hero section
|
||||||
|
- Links: tekstvak headline, daaronder button
|
||||||
|
- Rechts: vierkant met X = placeholder afbeelding
|
||||||
|
- "Het hoeft niet mooi te zijn - blokken en lijnen zijn genoeg"
|
||||||
|
|
||||||
|
**Stap 2: Foto naar ChatGPT**
|
||||||
|
- Foto maken
|
||||||
|
- Upload naar ChatGPT Project "Les 1 - v0.dev Prompt Engineer"
|
||||||
|
- Beschrijving: "Dit is schets voor hero section. Beschrijf als v0.dev prompt. Tech: React + Tailwind. Kleuren: blauw #2563EB. Stijl: modern, minimalistisch."
|
||||||
|
- Wacht op response
|
||||||
|
- "Kijk - ChatGPT maakt gedetailleerde Engelse prompt"
|
||||||
|
|
||||||
|
**Stap 3: v0.dev**
|
||||||
|
- Prompt kopiëren
|
||||||
|
- Plakken in v0.dev
|
||||||
|
- Genereren (~30 sec wachten)
|
||||||
|
- "En daar is het! Hero section met de kleuren en stijl die ik specificeerde"
|
||||||
|
|
||||||
|
**Stap 4: Itereren**
|
||||||
|
- Follow-up: "Make the button larger with hover animation"
|
||||||
|
- Wacht op generatie
|
||||||
|
- "Kijk - aangepast. Dát is de kracht: in gesprek gaan met de AI"
|
||||||
|
|
||||||
|
**⚠️ DEPLOYMENT NIET VOORDOEN!**
|
||||||
|
- "Dit gaan jullie straks zelf uitzoeken"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 32: Deploy uitleg
|
||||||
|
- "Hoe krijg je dit online? Ik leg uit, maar doe niet voor"
|
||||||
|
- In v0: "Add Integration" → koppel GitHub → v0 maakt repository → Vercel deployt
|
||||||
|
- Binnen minuut: live URL
|
||||||
|
- **"Dit ga ik niet live doen - jullie zoeken dit straks zelf uit"**
|
||||||
|
- "Het is niet moeilijk, je leert meer door het zelf te doen"
|
||||||
|
- "Van tekening op papier naar live website - dat is de kracht van deze workflow"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 6: HANDS-ON OPDRACHT (55 min)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 33: Aan de slag! (5 min uitleg + 45 min werken)
|
||||||
|
|
||||||
|
**Opdracht uitleggen:**
|
||||||
|
- "Jullie gaan een complete landingspagina bouwen - groter dan mijn demo"
|
||||||
|
- **Vereisten:**
|
||||||
|
- Minimaal **3 secties** (hero, features, pricing, testimonials, footer...)
|
||||||
|
- Minimaal **1 carousel** (image/testimonial slider)
|
||||||
|
- Minimaal **1 accordion** (FAQ of uitklapbare content)
|
||||||
|
- Je bent vrij in wat je tekent - bedenk fictief product
|
||||||
|
- **Deployment: zelf uitzoeken!**
|
||||||
|
|
||||||
|
**Stappen:**
|
||||||
|
- Teken → Foto → ChatGPT Project → v0.dev → Deploy naar Vercel
|
||||||
|
|
||||||
|
**Check:** "Heeft iedereen papier en pen?"
|
||||||
|
|
||||||
|
"Je hebt 45 minuten. Begin met tekenen! Succes!"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Tijdens het werken - rondlopen, let op:**
|
||||||
|
- Tekenstap overslaan? → Terug naar papier
|
||||||
|
- Te weinig secties? → Herinner aan 3+ vereiste
|
||||||
|
- Carousel/accordion vergeten? → Check hun schets
|
||||||
|
- Tech stack/kleuren/stijl vergeten in ChatGPT? → Herinner ze
|
||||||
|
- v0 rate limit? → Wachten of delen met klasgenoot
|
||||||
|
- Deployment problemen? → Eerst zelf Googlen, dan pas helpen
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Tussentijdse check (halverwege ~25 min):**
|
||||||
|
- "Snelle check: wie heeft 3+ secties getekend?"
|
||||||
|
- "Wie heeft carousel en accordion in de schets?"
|
||||||
|
- "Nog 25 minuten - begin met deployen als je v0 resultaat hebt!"
|
||||||
|
- "Vraag klasgenoot om hulp als je vastloopt"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 7: AFSLUITING (20 min)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 34: Resultaten delen (8 min)
|
||||||
|
- "Wie wil zijn resultaat laten zien?"
|
||||||
|
- Laat 2-3 studenten scherm delen
|
||||||
|
- "Wat was je oorspronkelijke idee? Laat je schets zien. Wat heeft v0 ervan gemaakt?"
|
||||||
|
- Geef korte positieve feedback per student
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 35: Samenvatting
|
||||||
|
- "Wat hebben jullie vandaag geleerd?"
|
||||||
|
- Theorie: hoe LLMs werken, next-token prediction, hallucinaties
|
||||||
|
- ChatGPT praktisch: interface, afbeeldingen uploaden, Custom Instructions, Projects
|
||||||
|
- Prompt engineering: specificiteit, tech stack, kleuren, stijl
|
||||||
|
- **"En het belangrijkste: de workflow toegepast"**
|
||||||
|
- **Schets → ChatGPT → v0.dev → live website**
|
||||||
|
- "Jullie zijn developers die AI tools kunnen gebruiken"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 36: Huiswerk
|
||||||
|
- "Twee opdrachten, inleveren via Teams voor volgende les"
|
||||||
|
|
||||||
|
**1. Reflectie (500 woorden)**
|
||||||
|
- Drie deelvragen als leidraad:
|
||||||
|
- Wat vond je verrassend aan werken met AI?
|
||||||
|
- Wat ging goed? Wat vond je lastig?
|
||||||
|
- Hoe zie je AI jouw werk als developer veranderen?
|
||||||
|
- "Dit hoeft geen essay te zijn - gewoon eerlijk nadenken over je ervaring"
|
||||||
|
|
||||||
|
**2. Breid je v0 website uit**
|
||||||
|
- Voeg minimaal 1 nieuwe sectie toe (pricing, features, contact, footer...)
|
||||||
|
- Gebruik zelfde workflow: teken → ChatGPT → v0
|
||||||
|
- Lever in: screenshots + Vercel URL
|
||||||
|
|
||||||
|
"Vragen? Nee? Dan bedankt voor jullie inzet!"
|
||||||
|
|
||||||
|
**"Jullie hebben een website gebouwd die begon als een tekening. Tot volgende week!"**
|
||||||
990
v2/Les01-Introductie-AI/Les01-Docenttekst.md
Normal file
990
v2/Les01-Introductie-AI/Les01-Docenttekst.md
Normal file
@@ -0,0 +1,990 @@
|
|||||||
|
# Docenttekst Les 1: Introductie AI & Large Language Models
|
||||||
|
|
||||||
|
> **Totale lesduur:** 3 uur (180 minuten)
|
||||||
|
> **Spreektijd docent:** ~55 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]** _(30 seconden)_
|
||||||
|
|
||||||
|
_[Wacht tot iedereen zit, maak oogcontact]_
|
||||||
|
|
||||||
|
"Goedemorgen 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 - 2:00]** _(1,5 minuut)_
|
||||||
|
|
||||||
|
"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
|
||||||
|
|
||||||
|
**[2:00 - 3:30]** _(1,5 minuut)_
|
||||||
|
|
||||||
|
"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:30 - 8:30]** _(5 minuten - studenten aan het woord)_
|
||||||
|
|
||||||
|
"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]_
|
||||||
|
|
||||||
|
"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:30 - 10:30]** _(2 minuten)_
|
||||||
|
|
||||||
|
"Even een vooruitblik op wat we de komende 18 weken gaan doen. De cursus is verdeeld over vier delen."
|
||||||
|
|
||||||
|
_[Wijs naar de vier delen op de slide]_
|
||||||
|
|
||||||
|
"Deel 1, les 1 tot 4, is waar we nu zitten: AI Foundations. Hier leer je de basis - wat is AI, hoe werkt het, prompt engineering, en tools als ChatGPT en OpenCode."
|
||||||
|
|
||||||
|
"Deel 2, les 5 tot 9, gaat over Technical Foundations. Dan leer je TypeScript, Next.js, en databases met Supabase. Een stevige technische basis."
|
||||||
|
|
||||||
|
"Deel 3, les 10 tot 12, focust op AI Tooling. Je leert welke tool je wanneer gebruikt, hoe je snel prototypes bouwt, en je maakt kennis met Cursor."
|
||||||
|
|
||||||
|
"En deel 4, les 13 tot 18, is het eindspel: Advanced AI Features. AI agents, de Vercel AI SDK om AI in je eigen app te bouwen, en deployment. Je eindigt met een volledig werkend eindproject."
|
||||||
|
|
||||||
|
"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:30 - 13:00]** _(2,5 minuten)_
|
||||||
|
|
||||||
|
_[Iets serieuzer toon]_
|
||||||
|
|
||||||
|
"Oké, even een praktisch punt. Jullie hebben vandaag drie accounts nodig. Laten we even checken."
|
||||||
|
|
||||||
|
_[Scan de groep, vraag om handopsteken per account]_
|
||||||
|
|
||||||
|
"Allereerst: wie heeft een ChatGPT account? Wie nog niet? Maak die dan nu even aan op chat.openai.com - het is gratis."
|
||||||
|
|
||||||
|
"Ten tweede: GitHub. Wie heeft dat? GitHub is waar developers hun code opslaan - we hebben het straks nodig om te deployen."
|
||||||
|
|
||||||
|
"En tot slot: Vercel. Dit is het platform waar jullie website straks live komt te staan. Ga naar vercel.com en maak een account aan - het makkelijkst is om direct te koppelen met je GitHub account."
|
||||||
|
|
||||||
|
_[Geef 2 minuten]_
|
||||||
|
|
||||||
|
"Is iedereen zover? Alle drie de accounts? Mooi, dan gaan we de diepte in."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 2: WAT IS AI? (15 minuten)
|
||||||
|
|
||||||
|
### Slide 7: Wat is Artificial Intelligence?
|
||||||
|
|
||||||
|
**[13:00 - 16:00]** _(3 minuten)_
|
||||||
|
|
||||||
|
"Oké, eerste grote vraag: wat ís eigenlijk AI?"
|
||||||
|
|
||||||
|
_[Laat dit even hangen]_
|
||||||
|
|
||||||
|
_[INTERACTIE: Quick poll]_
|
||||||
|
|
||||||
|
"Maar eerst - noem eens voorbeelden van AI die je vandaag misschien al hebt gebruikt. Denk aan je telefoon, apps, websites..."
|
||||||
|
|
||||||
|
_[Laat 3-4 studenten antwoorden]_
|
||||||
|
|
||||||
|
_[Verwachte antwoorden en hoe je erop reageert:]_
|
||||||
|
- **Spotify/Netflix aanbevelingen:** "Ja! Die analyseert je luister/kijkgedrag en voorspelt wat je leuk vindt"
|
||||||
|
- **Google Maps routes:** "Precies - die voorspelt verkeer en berekent de snelste route"
|
||||||
|
- **Autocorrect/predictive text:** "Goed voorbeeld - dat is letterlijk next-word prediction, zoals ChatGPT"
|
||||||
|
- **Gezichtsherkenning (telefoon unlock):** "Ja, patroonherkenning in pixels"
|
||||||
|
- **Siri/Google Assistant:** "Taalverwerking - heel vergelijkbaar met ChatGPT"
|
||||||
|
|
||||||
|
_[Als niemand antwoordt:]_ "Denk aan je telefoon vanochtend. Heb je getypt? Autocorrect. Route gepland? Google Maps. Muziek geluisterd? Spotify kiest nummers voor je. Dat is allemaal AI."
|
||||||
|
|
||||||
|
"Al die voorbeelden zijn AI. Maar wat is het dan precies?"
|
||||||
|
|
||||||
|
"AI, of Artificial Intelligence, is een verzamelnaam. Het zijn computersystemen die taken kunnen uitvoeren waarvoor normaal menselijke intelligentie nodig is."
|
||||||
|
|
||||||
|
"Denk aan: patronen herkennen in data, beslissingen nemen op basis van informatie, taal begrijpen en genereren. Dingen die wij mensen doen met ons brein, maar dan door een computer."
|
||||||
|
|
||||||
|
_[Maak onderscheid]_
|
||||||
|
|
||||||
|
"Nu is er een belangrijk onderscheid dat je moet kennen. Er is Narrow AI - ook wel Weak AI genoemd - dat is AI die heel goed is in één specifieke taak. ChatGPT is daar een voorbeeld van. Het kan heel goed tekst genereren, maar het kan niet autorijden of schaken - tenzij je het specifiek daarop traint."
|
||||||
|
|
||||||
|
"En dan heb je General AI - of Strong AI - dat zou AI zijn die alles kan wat een mens kan. Die kan leren, redeneren, problemen oplossen in elke context. Dat bestaat nog niet, en niemand weet of het ooit zal bestaan."
|
||||||
|
|
||||||
|
"Wat we vandaag gebruiken is Narrow AI. Heel krachtig, maar beperkt tot specifieke taken."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 8: Hoe werken Large Language Models?
|
||||||
|
|
||||||
|
**[16:00 - 20:00]** _(4 minuten)_
|
||||||
|
|
||||||
|
"Nu de vraag die iedereen heeft: hoe werkt ChatGPT eigenlijk?"
|
||||||
|
|
||||||
|
_[INTERACTIE: Laat studenten raden]_
|
||||||
|
|
||||||
|
"Wat denken jullie? Als je een vraag typt in ChatGPT, wat gebeurt er dan 'under the hood'? Heeft iemand een idee?"
|
||||||
|
|
||||||
|
_[Laat 2-3 studenten antwoorden - noteer antwoorden kort, bouw spanning op]_
|
||||||
|
|
||||||
|
_[Korte samenvatting antwoord:]_ "Het korte antwoord: het voorspelt steeds het volgende woord. Meer niet. Maar het doet dat zó goed dat het lijkt alsof het 'denkt'."
|
||||||
|
|
||||||
|
"Interessante ideeën. De werkelijkheid is fascinerend, en als je dit snapt, snap je ook waarom AI soms briljant is en soms complete onzin produceert."
|
||||||
|
|
||||||
|
"Een Large Language Model - een LLM - is getraind op gigantische hoeveelheden tekst. En met gigantisch bedoel ik: miljarden pagina's. Boeken, websites, Wikipedia, wetenschappelijke papers, code repositories. Een groot deel van wat ooit op het internet is gepubliceerd."
|
||||||
|
|
||||||
|
"Het model heeft al deze tekst 'gelezen' en daarvan geleerd. Maar wat heeft het precies geleerd?"
|
||||||
|
|
||||||
|
_[Laat dit even landen]_
|
||||||
|
|
||||||
|
"Het heeft geleerd: als ik deze woorden zie, wat is dan het meest waarschijnlijke volgende woord?"
|
||||||
|
|
||||||
|
"Ja, echt. ChatGPT, Claude, Gemini - al die tools - in de kern zijn het voorspelmachines. Ze krijgen tekst als input en voorspellen token voor token wat er logischerwijs daarna komt."
|
||||||
|
|
||||||
|
"En ze doen dat zo ongelooflijk goed, gebaseerd op al die miljarden teksten, dat het lijkt alsof ze 'begrijpen' wat je zegt. Maar er zit geen bewustzijn in, geen echte intentie. Het is geavanceerde statistische patroonherkenning op een schaal die we nog nooit eerder hebben gezien."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 9: Tokens & Next-Token Prediction
|
||||||
|
|
||||||
|
**[20:00 - 24:00]** _(4 minuten)_
|
||||||
|
|
||||||
|
"Laat me precies uitleggen hoe dit werkt. Het begint met tokens."
|
||||||
|
|
||||||
|
_[Wijs naar de slide]_
|
||||||
|
|
||||||
|
"Stap 1: Als je tekst naar ChatGPT stuurt, wordt die tekst eerst omgezet naar nummers. Elk woord - of soms een deel van een woord - krijgt een nummer. Dit noemen we tokens."
|
||||||
|
|
||||||
|
"Dus 'Ik drink koffie' wordt zoiets als [1847, 5621, 8934]. Het model werkt puur met getallen, niet met tekst."
|
||||||
|
|
||||||
|
_[Korte pauze]_
|
||||||
|
|
||||||
|
"Stap 2: Nu komt het slimme. Woorden die qua betekenis op elkaar lijken, krijgen nummers die dicht bij elkaar liggen. Denk aan 'koffie' en 'thee' - die liggen dichtbij in deze 'getallenruimte'. Of 'staal' en 'metaal'. Maar 'koffie' en 'fiets' liggen ver uit elkaar."
|
||||||
|
|
||||||
|
"Dit betekent dat het model snapt dat bepaalde woorden bij elkaar horen, puur door naar patronen in miljoenen teksten te kijken."
|
||||||
|
|
||||||
|
_[Wijs naar het voorbeeld]_
|
||||||
|
|
||||||
|
"Stap 3: Nu de voorspelling. Als ik vraag: 'Ik drink koffie met...' - wat komt er waarschijnlijk?"
|
||||||
|
|
||||||
|
_[Wacht op antwoorden]_
|
||||||
|
|
||||||
|
"Precies! 'Melk' of 'suiker'. Het model berekent voor elk mogelijk woord de kans dat het volgt. En dan kiest het - meestal het meest waarschijnlijke, maar niet altijd."
|
||||||
|
|
||||||
|
_[INTERACTIE: Testen van begrip]_
|
||||||
|
|
||||||
|
"Vraag: als je ChatGPT 10 keer precies dezelfde vraag stelt, krijg je dan 10 keer hetzelfde antwoord?"
|
||||||
|
|
||||||
|
_[Laat handopsteken - wie denkt ja, wie denkt nee]_
|
||||||
|
|
||||||
|
"Het antwoord is: nee! Er zit bewust randomness in - dit heet de 'temperatuur' parameter."
|
||||||
|
|
||||||
|
"**Wat is temperatuur?** Stel, het model berekent: 'melk' heeft 60% kans, 'suiker' heeft 35% kans, 'room' heeft 5% kans. Bij lage temperatuur kiest het bijna altijd 'melk'. Bij hoge temperatuur gooit het vaker een dobbelsteen en kiest het soms 'suiker' of zelfs 'room'."
|
||||||
|
|
||||||
|
"**Waarom bestaat dit?** Anders kreeg je steeds exact hetzelfde antwoord - dat voelt robotachtig. Die variatie maakt het menselijker en creatiever. ChatGPT gebruikt standaard een gemiddelde temperatuur - genoeg variatie om interessant te zijn, maar niet zo hoog dat het onzin wordt."
|
||||||
|
|
||||||
|
"Dit verklaart waarom je soms briljante antwoorden krijgt en soms onzin. Het model gokt slim, maar het blijft gokken."
|
||||||
|
|
||||||
|
_[INTERACTIE: Doordenker]_
|
||||||
|
|
||||||
|
"Maar wacht even - als LLMs alleen maar voorspellen wat het volgende woord is, hoe kunnen ze dan creatieve ideeën genereren? Hoe kan het iets 'nieuws' maken?"
|
||||||
|
|
||||||
|
_[Laat 2-3 studenten antwoorden - verwacht: combinaties van bestaande kennis, patronen mixen, toeval/randomness]_
|
||||||
|
|
||||||
|
"Goede vraag en goed nagedacht! Het antwoord: het combineert patronen op nieuwe manieren."
|
||||||
|
|
||||||
|
"**Hoe werkt dat?** Het model heeft miljarden teksten gelezen waarin concepten naast elkaar voorkomen. 'Koffie' staat vaak bij 'ochtend' en 'energie'. 'Strand' bij 'zon' en 'vakantie'. Als jij vraagt om iets nieuws - bijvoorbeeld 'een café op Mars' - dan combineert het patronen van 'café' met patronen van 'Mars' en 'ruimte'. Dat levert iets op dat nieuw lijkt."
|
||||||
|
|
||||||
|
"**Waarom voelt het creatief?** Omdat de combinatie nieuw is voor jou, ook al zijn de losse onderdelen dat niet. Het is niet 'echt' creatief zoals een mens - het heeft geen intentie of inspiratie - maar het mixt bestaande kennis op manieren die wij als creatief ervaren."
|
||||||
|
|
||||||
|
"En dit brengt me bij iets heel belangrijks..."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 10: Hallucinaties
|
||||||
|
|
||||||
|
**[23:00 - 28:00]** _(5 minuten)_
|
||||||
|
|
||||||
|
_[Iets serieuzere toon]_
|
||||||
|
|
||||||
|
"Hallucinaties. Dit is een term die je moet kennen en onthouden."
|
||||||
|
|
||||||
|
"Wat bedoelen we hiermee? AI kan dingen verzinnen. Compleet uit de lucht gegrepen informatie presenteren alsof het waar is. En het klinkt heel overtuigend, want het is grammaticaal perfect en logisch geformuleerd."
|
||||||
|
|
||||||
|
_[Geef concrete voorbeelden]_
|
||||||
|
|
||||||
|
"Laat me een paar voorbeelden geven. Vraag ChatGPT naar een wetenschappelijk paper over een specifiek onderwerp. Hij kan je een titel geven, auteursnamen, een publicatiejaar, een samenvatting - van iets dat niet bestaat. Het klinkt volledig legitiem, maar als je het opzoekt: niets te vinden."
|
||||||
|
|
||||||
|
"Of vraag hem naar een JavaScript library voor een specifiek probleem. Hij kan een npm package naam noemen, installatie-instructies geven, code voorbeelden - voor een package dat nooit heeft bestaan."
|
||||||
|
|
||||||
|
"Ik heb ooit ChatGPT gevraagd naar restaurants in een stad waar ik naartoe ging. Drie van de vijf suggesties bestonden niet. Verzonnen namen, verzonnen adressen."
|
||||||
|
|
||||||
|
_[Leg uit waarom dit gebeurt]_
|
||||||
|
|
||||||
|
"Waarom gebeurt dit? Onthoud: het model voorspelt wat het MEEST WAARSCHIJNLIJK volgende woord is. Het controleert niet of iets waar is. Het genereert tekst die LIJKT op tekst die het eerder heeft gezien. Als je vraagt naar een paper, genereert het tekst die eruitziet als een paper-referentie - maar dat betekent niet dat die referentie bestaat."
|
||||||
|
|
||||||
|
_[Praktische implicaties]_
|
||||||
|
|
||||||
|
"Wat betekent dit voor jullie als developers? Heel simpel: verifieer altijd. Kopieer nooit blindelings code van ChatGPT zonder te begrijpen wat het doet. Check of libraries bestaan. Test je code. Valideer feiten."
|
||||||
|
|
||||||
|
_[INTERACTIE: Probleemoplossend denken]_
|
||||||
|
|
||||||
|
"Maar hoe herken je een hallucinatie? Wat zijn rode vlaggen?"
|
||||||
|
|
||||||
|
_[Laat studenten antwoorden]_
|
||||||
|
|
||||||
|
"Goede ideeën! Hier zijn de belangrijkste rode vlaggen én waarom:"
|
||||||
|
|
||||||
|
"**Té specifieke details** - exacte cijfers, datums, namen. Waarom? Het model vult gaten in met wat 'waarschijnlijk' klinkt. Een paper uit '2019 door Dr. Smith et al.' klinkt geloofwaardig, maar is vaak verzonnen."
|
||||||
|
|
||||||
|
"**Bronnen die je niet kunt vinden** - als je het Googelt en niets vindt, bestaat het waarschijnlijk niet. Het model genereert tekst die LIJKT op een bronvermelding."
|
||||||
|
|
||||||
|
"**Onbekende npm packages** - dit is een klassieker. Ik heb zelf meegemaakt dat ChatGPT zo overtuigd was van een package dat hij bleef volhouden dat het bestond, terwijl de code steeds errors gaf. Hij genereerde zelfs 'documentatie' voor een package dat nooit heeft bestaan!"
|
||||||
|
|
||||||
|
"**Verdacht zelfverzekerd over obscure onderwerpen** - het model weet niet wat het niet weet. Het klinkt even zelfverzekerd over iets dat het verzint als over iets dat waar is."
|
||||||
|
|
||||||
|
"AI is een tool, geen orakel. Het is ongelooflijk nuttig, maar je moet het behandelen als een junior collega die heel enthousiast is maar soms dingen verzint. Vertrouw, maar verifieer."
|
||||||
|
|
||||||
|
_[INTERACTIE: Ervaring delen]_
|
||||||
|
|
||||||
|
"Wie van jullie heeft dit zelf al eens meegemaakt? Dat ChatGPT iets verzon dat niet klopte?"
|
||||||
|
|
||||||
|
_[Laat 2-3 studenten hun ervaring delen - dit maakt het concreet en persoonlijk]_
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 3: HET AI-LANDSCHAP (10 minuten)
|
||||||
|
|
||||||
|
### Slide 11: De Grote Spelers
|
||||||
|
|
||||||
|
**[28:00 - 31:00]** _(3 minuten)_
|
||||||
|
|
||||||
|
"Oké, nu je begrijpt hoe LLMs werken, laten we kijken welke er zijn. Het landschap verandert snel, maar dit zijn de grote namen."
|
||||||
|
|
||||||
|
_[Wijs naar de tabel]_
|
||||||
|
|
||||||
|
"ChatGPT van OpenAI - dat is de bekendste, de meesten van jullie hebben die al gebruikt. Het is de tool die AI mainstream maakte."
|
||||||
|
|
||||||
|
"Claude van Anthropic - minder bekend, maar technisch heel sterk. Vooral goed in lange documenten en genuanceerde gesprekken. Persoonlijk gebruik ik Claude vaak voor complexere taken."
|
||||||
|
|
||||||
|
"Gemini van Google - geïntegreerd in Google's ecosysteem. Handig als je al veel met Google Workspace werkt."
|
||||||
|
|
||||||
|
"En Grok van xAI, het bedrijf van Elon Musk. Geïntegreerd in X, met toegang tot real-time informatie."
|
||||||
|
|
||||||
|
"Vandaag focussen we op ChatGPT omdat die het meest toegankelijk is en de beste gratis tier heeft. Maar de concepten die je leert zijn toepasbaar op allemaal."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 12: Gratis AI Opties
|
||||||
|
|
||||||
|
**[31:00 - 35:00]** _(4 minuten)_
|
||||||
|
|
||||||
|
"Laten we het hebben over kosten. Want dat is een belangrijke vraag: moet je betalen voor AI?"
|
||||||
|
|
||||||
|
_[INTERACTIE: Peiling]_
|
||||||
|
|
||||||
|
"Even peilen: wie betaalt er al voor een AI tool? ChatGPT Plus, Claude Pro, Copilot? Steek je hand op."
|
||||||
|
|
||||||
|
_[Tel handen, vraag 1-2 mensen waarom ze betalen]_
|
||||||
|
|
||||||
|
"Interessant! En de rest - waarom niet? Te duur? Gratis is goed genoeg?"
|
||||||
|
|
||||||
|
_[Korte reacties - verwacht: gratis werkt prima, te duur, weet niet wat je extra krijgt]_
|
||||||
|
|
||||||
|
_[Wijs naar de tabel]_
|
||||||
|
|
||||||
|
"Het korte antwoord: voor deze cursus hoef je niks te betalen! Er zijn zoveel gratis opties dat je voor deze hele cursus geen cent hoeft uit te geven."
|
||||||
|
|
||||||
|
"ChatGPT Free draait op GPT-5 - dat is al een heel krachtig model. Je kunt afbeeldingen uploaden, documenten analyseren, code genereren."
|
||||||
|
|
||||||
|
"Claude Free van Anthropic heeft Sonnet 3.5 - persoonlijk vind ik die uitstekend voor lange teksten en genuanceerde uitleg."
|
||||||
|
|
||||||
|
"Gemini van Google is handig als je al in het Google ecosysteem zit."
|
||||||
|
|
||||||
|
_[Nu met nadruk]_
|
||||||
|
|
||||||
|
"Maar er zijn ook twee opties die jullie misschien niet kennen. Groq - G-R-O-Q - biedt een gratis API met Llama 3.3, een open source model. Het is ongelooflijk snel - sneller dan alle anderen - en helemaal gratis."
|
||||||
|
|
||||||
|
"En dan Ollama. Dit is anders. Met Ollama draai je AI modellen lokaal op je eigen laptop. Dat betekent: je data verlaat je computer nooit. Perfect voor als je werkt met gevoelige informatie."
|
||||||
|
|
||||||
|
_[Privacy punt]_
|
||||||
|
|
||||||
|
"Dit is belangrijk voor later in de cursus: als je met klantdata werkt, of gevoelige bedrijfsinformatie, wil je misschien niet dat dat naar OpenAI of Anthropic gaat. Dan is Ollama je vriend."
|
||||||
|
|
||||||
|
"Voor nu: ChatGPT Free is perfect voor wat we gaan doen."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 13: Betaalde & Premium Modellen
|
||||||
|
|
||||||
|
**[35:00 - 38:00]** _(3 minuten)_
|
||||||
|
|
||||||
|
"Oké, maar wat als je tóch wilt upgraden? Wat krijg je dan?"
|
||||||
|
|
||||||
|
_[Wijs naar de betaalde sectie]_
|
||||||
|
|
||||||
|
"Voor ongeveer $20 per maand krijg je bij ChatGPT Plus of Claude Pro meer berichten, snellere response, en toegang tot premium features. Voor de meeste mensen is dit voldoende als ze professioneel met AI werken."
|
||||||
|
|
||||||
|
_[Nu over premium]_
|
||||||
|
|
||||||
|
"En dan is er de premium tier. Hier wil ik vooral Claude Opus noemen."
|
||||||
|
|
||||||
|
_[Met nadruk]_
|
||||||
|
|
||||||
|
"Opus is het beste model dat er is voor complexe redenering. Als je een echt moeilijk probleem hebt - iets waar je al drie uur op zit te staren - dan gooi je het naar Opus en krijg je vaak een doorbraak."
|
||||||
|
|
||||||
|
"Maar het is ook duur. Via de API kost het ongeveer $75 per maand als je het intensief gebruikt. Het is voor professionals die het echt nodig hebben."
|
||||||
|
|
||||||
|
_[Samenvatten]_
|
||||||
|
|
||||||
|
"Mijn advies: start gratis. Upgrade naar Plus of Pro als je tegen limieten aanloopt. En Opus? Dat bewaar je voor die momenten dat je echt vastloopt."
|
||||||
|
|
||||||
|
"Voor deze cursus: gratis is ruim voldoende."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 14: Welke tool voor welke taak?
|
||||||
|
|
||||||
|
**[38:00 - 42:00]** _(4 minuten)_
|
||||||
|
|
||||||
|
"Welke tool is het beste? Die vraag krijg ik vaak. En het eerlijke antwoord: het hangt af van wat je wilt doen."
|
||||||
|
|
||||||
|
_[Loop door de tabel]_
|
||||||
|
|
||||||
|
"Voor snelle code snippets - een functie schrijven, een bug fixen - zijn ChatGPT en Claude beide uitstekend. Ik wissel zelf regelmatig."
|
||||||
|
|
||||||
|
"Voor lange documenten analyseren of schrijven is Claude beter. Die heeft een groter 'geheugen' - technisch: een grotere context window. Je kunt een heel boek uploaden en vragen stellen."
|
||||||
|
|
||||||
|
"Voor UI componenten - en dat is wat we straks gaan doen - gebruiken we v0.dev. Dat is een speciale tool van Vercel die geoptimaliseerd is voor het genereren van React componenten met Tailwind CSS."
|
||||||
|
|
||||||
|
"Voor privacy-gevoelige zaken gebruik je Ollama - lokaal, geen data die je computer verlaat."
|
||||||
|
|
||||||
|
"En als je supersnel wilt prototypen, is Groq je vriend. Die API is zo snel dat het bijna instant voelt."
|
||||||
|
|
||||||
|
_[Praktische tip]_
|
||||||
|
|
||||||
|
"Mijn tip: experimenteer met meerdere tools. Elke tool heeft sterke en zwakke punten. De beste developers weten wanneer ze welke tool moeten gebruiken."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 4: CHATGPT IN DE PRAKTIJK (22 minuten)
|
||||||
|
|
||||||
|
### Slide 15: ChatGPT Interface
|
||||||
|
|
||||||
|
**[42:00 - 45:00]** _(3 minuten)_
|
||||||
|
|
||||||
|
_[Energieke toon]_
|
||||||
|
|
||||||
|
"Oké, genoeg theorie. 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 rondleiden door de interface."
|
||||||
|
|
||||||
|
_[Open ChatGPT op het projectiescherm]_
|
||||||
|
|
||||||
|
"In het midden heb je het chatvenster - daar typ je je vragen en zie je de antwoorden. Links zie je je chat geschiedenis - handig om terug te gaan naar eerdere gesprekken. Bovenaan kun je het model kiezen - daar komen we zo op. En rechtsonder in je profielfoto vind je instellingen."
|
||||||
|
|
||||||
|
"De interface is bewust simpel gehouden. De kracht zit in wat je typt, niet in complexe menu's."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 16: Model Kiezen
|
||||||
|
|
||||||
|
**[45:00 - 47:00]** _(2 minuten)_
|
||||||
|
|
||||||
|
"Kijk even bovenaan je scherm. Daar staat welk model je gebruikt."
|
||||||
|
|
||||||
|
_[Wijs op je eigen scherm]_
|
||||||
|
|
||||||
|
"Je hebt een paar opties. GPT-5 is de standaard - dat is snel en voor de meeste taken meer dan genoeg. Dit is wat je waarschijnlijk ziet."
|
||||||
|
|
||||||
|
"GPT-5 with canvas is speciaal voor wanneer je documenten wilt bewerken - het opent een soort editor naast de chat."
|
||||||
|
|
||||||
|
"En als je Plus hebt, zie je ook GPT-5.2 - het nieuwste en krachtigste model."
|
||||||
|
|
||||||
|
"Voor vandaag is GPT-5 perfect. Laat het daarop staan."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 17: Tijdelijke Chat
|
||||||
|
|
||||||
|
**[47:00 - 49:00]** _(2 minuten)_
|
||||||
|
|
||||||
|
"Nu iets belangrijks over privacy: tijdelijke chat."
|
||||||
|
|
||||||
|
_[Demonstreer waar dit staat]_
|
||||||
|
|
||||||
|
"Als je een nieuwe chat start, zie je een optie voor 'Temporary Chat'. Als je dit aanzet, wordt je gesprek niet opgeslagen in je geschiedenis en niet gebruikt om het model te trainen."
|
||||||
|
|
||||||
|
"Wanneer gebruik je dit?"
|
||||||
|
|
||||||
|
_[INTERACTIE: Toepassen]_
|
||||||
|
|
||||||
|
"In welke situaties zou je tijdelijke chat willen gebruiken? Noem eens voorbeelden."
|
||||||
|
|
||||||
|
_[Laat 2-3 studenten antwoorden]_
|
||||||
|
|
||||||
|
"Goede voorbeelden! Laat me uitleggen waarom dit belangrijk is:"
|
||||||
|
|
||||||
|
"**Klantgegevens/bedrijfsdata** - waarom? Alles wat je naar ChatGPT stuurt kan gebruikt worden om het model te trainen. Stel je voor dat jouw klantgegevens straks in iemand anders' antwoord opduiken. Dat is een datalek."
|
||||||
|
|
||||||
|
"**Medische/persoonlijke info** - waarom? Privacy-wetgeving zoals AVG/GDPR. Je mag dit niet zomaar delen met derden - en OpenAI is een derde partij."
|
||||||
|
|
||||||
|
"**Interne bedrijfscode** - waarom? Intellectueel eigendom. Je wilt niet dat je geheime algoritme in de trainingsdata van een AI-model belandt."
|
||||||
|
|
||||||
|
"Tijdelijke chat voorkomt dit allemaal - je gesprek wordt niet opgeslagen en niet gebruikt voor training."
|
||||||
|
|
||||||
|
"Voor deze cursus maakt het niet uit, maar onthoud dit voor je professionele werk."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 18: Afbeeldingen Analyseren
|
||||||
|
|
||||||
|
**[49:00 - 54:00]** _(5 minuten)_
|
||||||
|
|
||||||
|
_[Dit is een belangrijke slide voor de workflow]_
|
||||||
|
|
||||||
|
"Nu een feature die cruciaal is voor wat we straks gaan doen: ChatGPT kan afbeeldingen lezen en begrijpen."
|
||||||
|
|
||||||
|
_[Demonstreer live]_
|
||||||
|
|
||||||
|
"Kijk, ik klik hier op het paperclip icoontje... en ik kan een afbeelding uploaden."
|
||||||
|
|
||||||
|
_[Upload een simpele tekening of screenshot]_
|
||||||
|
|
||||||
|
"Ik upload hier een schets die ik eerder heb gemaakt... en ik vraag: 'Wat zie je op deze afbeelding? Beschrijf de layout.'"
|
||||||
|
|
||||||
|
_[Wacht op response]_
|
||||||
|
|
||||||
|
"Kijk wat er gebeurt. ChatGPT beschrijft precies wat hij ziet. De positie van elementen, de structuur, zelfs details die ik misschien over het hoofd zou zien."
|
||||||
|
|
||||||
|
"Dit heet image-to-text, of vision. Het model 'ziet' de afbeelding en kan erover praten."
|
||||||
|
|
||||||
|
_[Met nadruk]_
|
||||||
|
|
||||||
|
"Dit is de sleutel tot onze workflow vandaag. Jullie gaan een schets tekenen op papier, een foto maken, en die uploaden naar ChatGPT. En ChatGPT gaat die schets 'vertalen' naar een gedetailleerde beschrijving die we kunnen gebruiken voor code generatie."
|
||||||
|
|
||||||
|
"Het mooie is: je hoeft geen designer te zijn. Je hoeft geen perfecte tekening te maken. ChatGPT begrijpt ook ruwe schetsen."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 19: Bestanden Uploaden
|
||||||
|
|
||||||
|
**[54:00 - 56:00]** _(2 minuten)_
|
||||||
|
|
||||||
|
"Hetzelfde geldt voor documenten. Je kunt een PDF uploaden, een Word document, een Excel bestand, een code bestand."
|
||||||
|
|
||||||
|
_[Demonstreer kort met een document]_
|
||||||
|
|
||||||
|
"Dit is handig voor: documentatie analyseren, code reviewen, data uit spreadsheets halen."
|
||||||
|
|
||||||
|
"De limiet is ongeveer 50 pagina's per document, en je kunt meerdere bestanden tegelijk uploaden."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 20: Custom Instructions
|
||||||
|
|
||||||
|
**[56:00 - 59:00]** _(3 minuten)_
|
||||||
|
|
||||||
|
"Dan iets heel nuttigs dat weinig mensen kennen: Custom Instructions."
|
||||||
|
|
||||||
|
_[Ga naar instellingen → Personalisatie]_
|
||||||
|
|
||||||
|
"Hier kun je permanent instellen wie je bent en hoe ChatGPT moet antwoorden. Dit wordt automatisch meegenomen in élke chat."
|
||||||
|
|
||||||
|
"Bijvoorbeeld: 'Ik ben een frontend developer. Ik werk met React en Tailwind CSS. Ik heb een junior niveau. Geef praktische code voorbeelden.'"
|
||||||
|
|
||||||
|
"Vanaf nu weet ChatGPT in elke nieuwe chat al deze context. Je hoeft niet elke keer opnieuw te vertellen welke technologie je gebruikt."
|
||||||
|
|
||||||
|
_[Praktische tip]_
|
||||||
|
|
||||||
|
"Mijn tip: stel dit in vóór je begint met werken. Het scheelt enorm veel herhaling en je antwoorden worden relevanter."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 21: ChatGPT Projects
|
||||||
|
|
||||||
|
**[59:00 - 62:00]** _(3 minuten)_
|
||||||
|
|
||||||
|
"Nu iets heel handig: Projects. Dit is een relatief nieuwe feature die jullie werk veel makkelijker maakt."
|
||||||
|
|
||||||
|
_[Demonstreer Projects in de zijbalk]_
|
||||||
|
|
||||||
|
"Zie je hier links 'New Project'? Projects zijn slimme werkruimtes. Je kunt alles wat bij een taak hoort bij elkaar houden: chats, bestanden, en specifieke instructies."
|
||||||
|
|
||||||
|
"Waarom is dit handig? Stel je werkt aan meerdere projecten - een voor school, een voor werk, een voor een hobby. Met Projects hoef je niet steeds opnieuw uit te leggen waar je mee bezig bent."
|
||||||
|
|
||||||
|
_[Klik op New Project]_
|
||||||
|
|
||||||
|
"Je geeft het project een naam, en je kunt instructies toevoegen die alleen voor dit project gelden. Plus: je kunt bestanden uploaden die ChatGPT kan gebruiken als context."
|
||||||
|
|
||||||
|
"En hier is het mooie: Projects hebben hun eigen geheugen. Chats binnen een project onthouden wat je eerder hebt besproken. Dat is anders dan normale chats, die elke keer met een schone lei beginnen."
|
||||||
|
|
||||||
|
_[Met nadruk]_
|
||||||
|
|
||||||
|
"Op de gratis tier kun je 5 bestanden per project uploaden. Dat is ruim voldoende voor wat we vandaag doen."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 22: Praktijk Oefening
|
||||||
|
|
||||||
|
**[62:00 - 67:00]** _(5 minuten - studenten werken)_
|
||||||
|
|
||||||
|
"Oké, nu gaan jullie je ChatGPT instellen. Dit is belangrijk, want we gaan dit straks gebruiken voor de v0.dev demo."
|
||||||
|
|
||||||
|
_[Wijs naar de instructies op de slide]_
|
||||||
|
|
||||||
|
"Twee dingen wil ik dat je doet:"
|
||||||
|
|
||||||
|
"Een: ga naar Settings, dan Personalisatie, en vul je Custom Instructions in. Schrijf iets als: 'Ik ben een frontend developer. Ik werk met React en Tailwind CSS.' Dit zorgt dat ChatGPT altijd weet welke technologie je gebruikt."
|
||||||
|
|
||||||
|
"Twee: maak je eerste Project. Klik op 'New Project' in de zijbalk. Noem het 'Les 1 - v0.dev Prompt Engineer'. En voeg als instructie toe: 'Help me gedetailleerde prompts schrijven voor v0.dev. Focus op React en Tailwind CSS componenten.'"
|
||||||
|
|
||||||
|
_[Geef 5 minuten - loop rond en help waar nodig]_
|
||||||
|
|
||||||
|
"Dit project gaan we straks gebruiken! Als we schetsen uploaden, doet ChatGPT precies wat we nodig hebben voor v0.dev."
|
||||||
|
|
||||||
|
_[Check of iedereen klaar is]_
|
||||||
|
|
||||||
|
"Heeft iedereen een project aangemaakt? Mooi, dan gaan we verder met prompt engineering."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 5: PROMPT ENGINEERING (12 minuten)
|
||||||
|
|
||||||
|
### Slide 23: Wat is Prompt Engineering?
|
||||||
|
|
||||||
|
**[64:00 - 66:00]** _(2 minuten)_
|
||||||
|
|
||||||
|
"Nu komen we bij een cruciaal onderdeel: prompt engineering."
|
||||||
|
|
||||||
|
"Een prompt is simpelweg de instructie die je aan AI geeft. De vraag die je stelt, de opdracht die je geeft."
|
||||||
|
|
||||||
|
"En hier is het belangrijke inzicht dat alles verandert: de kwaliteit van je antwoord hangt direct af van de kwaliteit van je vraag."
|
||||||
|
|
||||||
|
"Garbage in, garbage out. Als je een vage vraag stelt, krijg je een vaag antwoord. Als je specifiek bent, krijg je specifieke, bruikbare output."
|
||||||
|
|
||||||
|
"Dit is een vaardigheid - en net als elke vaardigheid kun je het leren."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 24: Slechte vs Goede Prompt
|
||||||
|
|
||||||
|
**[66:00 - 69:00]** _(3 minuten)_
|
||||||
|
|
||||||
|
"Laat me het verschil laten zien."
|
||||||
|
|
||||||
|
_[Wijs naar de slechte prompt]_
|
||||||
|
|
||||||
|
_[INTERACTIE: Analyseren]_
|
||||||
|
|
||||||
|
"Hier staat een prompt: 'Maak een button'. Wat is hier mis mee? Wat ontbreekt er?"
|
||||||
|
|
||||||
|
_[Laat studenten antwoorden - verwacht: geen kleur, geen taal, geen stijl, geen grootte]_
|
||||||
|
|
||||||
|
"Precies! Dit is wat de meeste mensen doen. Drie woorden."
|
||||||
|
|
||||||
|
"**Waarom is dit slecht?** De AI weet niet:"
|
||||||
|
- "Welke programmeertaal? HTML, React, Vue, Angular - allemaal anders"
|
||||||
|
- "Welke stijl? Rond, vierkant, met schaduw?"
|
||||||
|
- "Welke kleur? Blauw, rood, gradient?"
|
||||||
|
- "Hoe groot? Klein voor mobiel, groot voor desktop?"
|
||||||
|
|
||||||
|
"De AI moet alles gokken. En gokken leidt tot generieke output die je toch moet aanpassen. Je verliest tijd."
|
||||||
|
|
||||||
|
_[Wijs naar de goede prompt]_
|
||||||
|
|
||||||
|
"En dit is beter: 'Maak een React button component met Tailwind CSS. Primary styling met een blauwe achtergrond (#2563EB). Include hover state en een loading state met een spinner.'"
|
||||||
|
|
||||||
|
"Zie je het verschil? Je specificeert de technologie, de styling, de features. De AI weet precies wat je wilt."
|
||||||
|
|
||||||
|
_[Demonstreer live als tijd het toelaat]_
|
||||||
|
|
||||||
|
"Het resultaat? Bruikbare code die je direct in je project kunt zetten."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 25: Prompt Framework
|
||||||
|
|
||||||
|
**[69:00 - 71:00]** _(2 minuten)_
|
||||||
|
|
||||||
|
"Er is een framework dat helpt. Vier elementen die je kunt gebruiken."
|
||||||
|
|
||||||
|
_[Wijs naar elk element]_
|
||||||
|
|
||||||
|
"Eén: Rol. Vertel de AI wie hij is. 'Je bent een senior frontend developer met 10 jaar ervaring.'"
|
||||||
|
|
||||||
|
"Twee: Context. Geef achtergrondinformatie. 'Je werkt aan een SaaS landingspagina voor een projectmanagement tool.'"
|
||||||
|
|
||||||
|
"Drie: Taak. Wat moet er gebeuren. 'Maak een hero section met een headline, subtitel, en call-to-action button.'"
|
||||||
|
|
||||||
|
"Vier: Format. Hoe moet de output eruit zien. 'Gebruik React en Tailwind CSS. Geef alleen de code, geen uitleg.'"
|
||||||
|
|
||||||
|
_[INTERACTIE: Discussie]_
|
||||||
|
|
||||||
|
"Welk van deze vier elementen vinden jullie het belangrijkst? Rol, context, taak, of format?"
|
||||||
|
|
||||||
|
_[Laat handopsteken per optie, vraag 1-2 mensen om hun keuze te verdedigen]_
|
||||||
|
|
||||||
|
"Interessante keuzes! Laat me uitleggen hoe elk element bijdraagt:"
|
||||||
|
|
||||||
|
"**Taak** is het enige verplichte element - zonder taak weet de AI niet wat hij moet doen. Maar alleen een taak geeft vaak generieke output."
|
||||||
|
|
||||||
|
"**Context** maakt vaak het grootste verschil. 'Maak een button' vs 'Maak een button voor een medische app waar oudere gebruikers op moeten klikken' - heel andere output."
|
||||||
|
|
||||||
|
"**Rol** helpt de AI de juiste 'stem' te vinden. Een senior developer geeft andere code dan een beginner. Een copywriter schrijft anders dan een technisch schrijver."
|
||||||
|
|
||||||
|
"**Format** voorkomt dat je output moet herschrijven. 'Geef alleen code' scheelt je tijd."
|
||||||
|
|
||||||
|
"De combinatie is krachtig. Je hoeft niet altijd alle vier te gebruiken, maar hoe meer context, hoe beter het resultaat."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 26: Tech Stack Specificeren
|
||||||
|
|
||||||
|
**[71:00 - 73:00]** _(2 minuten)_
|
||||||
|
|
||||||
|
"Nu iets dat jullie moeten begrijpen voor deze cursus: tech stack specificeren."
|
||||||
|
|
||||||
|
"Wat is een tech stack? De technologieën waarmee je bouwt. Voor deze cursus gebruiken we React met Next.js en Tailwind CSS."
|
||||||
|
|
||||||
|
"Waarom is dit belangrijk om te specificeren? Als je tegen AI zegt 'maak een button', weet hij niet of je HTML wilt, React, Vue, Angular, Svelte... Er zijn tientallen opties."
|
||||||
|
|
||||||
|
"Door expliciet te zeggen 'React met Tailwind CSS' krijg je code die je direct kunt gebruiken."
|
||||||
|
|
||||||
|
_[Met nadruk]_
|
||||||
|
|
||||||
|
"En goed nieuws: v0.dev, de tool die we straks gebruiken, genereert automatisch React met Tailwind. Maar in ChatGPT moet je het wel specificeren!"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 27: Kleuren en Look & Feel
|
||||||
|
|
||||||
|
**[73:00 - 75:00]** _(2 minuten)_
|
||||||
|
|
||||||
|
"Het volgende dat je moet specificeren: kleuren en stijl."
|
||||||
|
|
||||||
|
_[Loop door de opties]_
|
||||||
|
|
||||||
|
"Kleuren kun je meegeven op twee manieren. Exact met hex codes: '#2563EB voor primary blue'. Of beschrijvend: 'warm oranje thema met aarde-tinten'."
|
||||||
|
|
||||||
|
"Stijl beschrijf je met woorden: modern, minimalistisch, speels, corporate, brutalist, retro..."
|
||||||
|
|
||||||
|
"En je kunt referenties gebruiken. 'In de stijl van Stripe.com' of 'vergelijkbaar met de Apple website'. Dat vertelt de AI heel veel in weinig woorden."
|
||||||
|
|
||||||
|
"Een complete specificatie: 'Blauw kleurenschema met primary #2563EB. Modern en minimalistisch. Clean met veel whitespace. Geschikt voor een B2B SaaS startup.'"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 28: Prompting Tips
|
||||||
|
|
||||||
|
**[75:00 - 76:00]** _(1 minuut)_
|
||||||
|
|
||||||
|
"Even de tips op een rij voor we verder gaan:"
|
||||||
|
|
||||||
|
"Geef een rol. Wees specifiek. Specificeer je tech stack. Beschrijf de look & feel. Geef voorbeelden als je kunt. En itereer - je eerste prompt is zelden perfect."
|
||||||
|
|
||||||
|
"Onthoud: garbage in, garbage out. Investeer in je prompt."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 6: LIVE DEMO V0.DEV (25 minuten)
|
||||||
|
|
||||||
|
### Slide 29: Introductie v0.dev
|
||||||
|
|
||||||
|
**[76:00 - 79:00]** _(3 minuten)_
|
||||||
|
|
||||||
|
_[Energieke toon]_
|
||||||
|
|
||||||
|
"Nu wordt het echt leuk. We gaan kijken naar v0.dev."
|
||||||
|
|
||||||
|
"Dit is een tool van Vercel - het bedrijf achter Next.js, een populair React framework. En het is een gamechanger voor UI development."
|
||||||
|
|
||||||
|
_[Open v0.dev op je scherm]_
|
||||||
|
|
||||||
|
"Wat doet v0? Je beschrijft wat je wilt in tekst, of je uploadt een afbeelding, en v0 genereert werkende React code met Tailwind CSS. Je ziet direct een preview. En je kunt het direct deployen naar het internet."
|
||||||
|
|
||||||
|
"Maar de slimme workflow die ik jullie vandaag leer combineert ChatGPT en v0. En daar zit de magie."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 30: De Slimme Workflow
|
||||||
|
|
||||||
|
**[79:00 - 82:00]** _(3 minuten)_
|
||||||
|
|
||||||
|
_[Wijs naar het diagram]_
|
||||||
|
|
||||||
|
"Dit is de workflow. Vijf stappen. Simpel maar krachtig."
|
||||||
|
|
||||||
|
"Stap één: je TEKENT je idee op papier. Gewoon pen en papier, zoals vroeger."
|
||||||
|
|
||||||
|
"Stap twee: je maakt een FOTO van je tekening met je telefoon."
|
||||||
|
|
||||||
|
"Stap drie: je uploadt die foto naar CHATGPT. En je beschrijft je wensen - welke technologie, welke kleuren, welke stijl."
|
||||||
|
|
||||||
|
"Stap vier: ChatGPT maakt een gedetailleerde Engelse PROMPT voor je. Een perfecte beschrijving van wat je wilt."
|
||||||
|
|
||||||
|
"Stap vijf: je plakt die prompt in V0.DEV en je krijgt een werkende website!"
|
||||||
|
|
||||||
|
_[Leg uit waarom]_
|
||||||
|
|
||||||
|
"Waarom doen we het zo? Twee redenen. Eén: v0 heeft beperkte gratis credits - ongeveer zeven generaties per dag. ChatGPT is onbeperkt. Door eerst in ChatGPT je prompt te optimaliseren, verspil je geen v0 credits aan slechte prompts."
|
||||||
|
|
||||||
|
"Twee: ChatGPT is beter in het 'vertalen' van je ruwe idee naar een gestructureerde prompt. V0 is beter in het genereren van code. Je gebruikt elk tool waar het goed in is."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 31: Live Demo
|
||||||
|
|
||||||
|
**[82:00 - 97:00]** _(15 minuten)_
|
||||||
|
|
||||||
|
_[Pak pen en papier - dit is live!]_
|
||||||
|
|
||||||
|
"Oké, ik ga dit nu live doen. Kijk mee."
|
||||||
|
|
||||||
|
**Stap 1: Tekenen**
|
||||||
|
|
||||||
|
_[Teken terwijl je praat]_
|
||||||
|
|
||||||
|
"Ik teken een simpele hero section. Links tekstvak voor headline, daaronder button. Rechts een vierkant met X - placeholder voor afbeelding."
|
||||||
|
|
||||||
|
_[Toon je tekening]_
|
||||||
|
|
||||||
|
"Het hoeft niet mooi te zijn. Blokken en lijnen zijn genoeg. Het gaat om de layout."
|
||||||
|
|
||||||
|
**Stap 2: Foto naar ChatGPT**
|
||||||
|
|
||||||
|
_[Maak foto en upload naar ChatGPT Project]_
|
||||||
|
|
||||||
|
"Foto maken... uploaden naar mijn ChatGPT Project... en nu mijn beschrijving:"
|
||||||
|
|
||||||
|
"Dit is een schets voor een hero section. Beschrijf als v0.dev prompt. Tech stack: React + Tailwind. Kleuren: blauw thema #2563EB. Stijl: modern, minimalistisch."
|
||||||
|
|
||||||
|
_[Wacht op response]_
|
||||||
|
|
||||||
|
"Kijk - ChatGPT maakt een gedetailleerde Engelse prompt. Precies wat v0 nodig heeft."
|
||||||
|
|
||||||
|
**Stap 3: v0.dev**
|
||||||
|
|
||||||
|
_[Kopieer prompt naar v0.dev]_
|
||||||
|
|
||||||
|
"Prompt kopiëren... plakken in v0... genereren..."
|
||||||
|
|
||||||
|
_[Resultaat verschijnt]_
|
||||||
|
|
||||||
|
"En daar is het! Hero section met de kleuren en stijl die ik specificeerde. De code is clean React met Tailwind."
|
||||||
|
|
||||||
|
**Stap 4: Itereren**
|
||||||
|
|
||||||
|
_[Typ een follow-up]_
|
||||||
|
|
||||||
|
"Nu itereren: 'Make the button larger with hover animation.'"
|
||||||
|
|
||||||
|
_[Wacht op generatie]_
|
||||||
|
|
||||||
|
"Kijk - aangepast. Dát is de kracht: in gesprek gaan met de AI."
|
||||||
|
|
||||||
|
**Belangrijk:** Deployment laat ik NIET zien - dat gaan jullie straks zelf uitzoeken!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 32: Hoe deploy je naar Vercel?
|
||||||
|
|
||||||
|
**[97:00 - 99:00]** _(2 minuten)_
|
||||||
|
|
||||||
|
"Laatste vraag: hoe krijg je dit online? Dat ga ik jullie nu uitleggen, maar niet voordoen."
|
||||||
|
|
||||||
|
_[Wijs naar de interface]_
|
||||||
|
|
||||||
|
"In v0 zie je een optie om te deployen. Je klikt op 'Add Integration', koppelt je GitHub account, en v0 maakt automatisch een repository aan. Dan deployt Vercel je code - binnen een minuut heb je een live URL."
|
||||||
|
|
||||||
|
_[Met nadruk]_
|
||||||
|
|
||||||
|
"Maar dit ga ik niet live doen. Waarom niet? Omdat jullie dit straks zelf gaan uitzoeken. Dat is onderdeel van de opdracht. Het is niet moeilijk, en je leert meer door het zelf te doen."
|
||||||
|
|
||||||
|
"Van een tekening op papier naar een live website. Dat is de kracht van deze workflow. En straks gaan jullie dat bewijzen."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 7: HANDS-ON OPDRACHT (53 minuten)
|
||||||
|
|
||||||
|
### Slide 33: Aan de slag!
|
||||||
|
|
||||||
|
**[99:00 - 150:00]** _(51 minuten - 5 min uitleg + 46 min werken)_
|
||||||
|
|
||||||
|
_[Pak papier en pennen - deel uit als nodig]_
|
||||||
|
|
||||||
|
"Nu zijn jullie aan de beurt. Jullie gaan een complete landingspagina bouwen - groter dan mijn demo."
|
||||||
|
|
||||||
|
_[Wijs naar de vereisten]_
|
||||||
|
|
||||||
|
"Vereisten: minimaal drie secties, één carousel, één accordion. Je bent vrij in wat je tekent - bedenk een fictief product."
|
||||||
|
|
||||||
|
"Stappen: teken, foto, ChatGPT Project, v0.dev, deploy naar Vercel. Die laatste stap zoek je zelf uit."
|
||||||
|
|
||||||
|
"Je hebt 45 minuten. Begin met tekenen! Succes!"
|
||||||
|
|
||||||
|
_[Studenten werken - loop actief rond]_
|
||||||
|
|
||||||
|
**Let op deze problemen:**
|
||||||
|
- Tekenstap overslaan? → Terug naar papier
|
||||||
|
- Te weinig secties? → Herinner aan 3+ vereiste
|
||||||
|
- Carousel/accordion vergeten? → Check schets
|
||||||
|
- v0 rate limit? → Wachten of delen met klasgenoot
|
||||||
|
- Deployment? → Eerst Googlen, dan pas helpen
|
||||||
|
|
||||||
|
**Tussentijdse check [125:00]:**
|
||||||
|
|
||||||
|
"Snelle check: wie heeft 3+ secties? Carousel en accordion in de schets? Nog 25 minuten - begin met deployen als je v0 resultaat hebt."
|
||||||
|
|
||||||
|
_[Studenten werken door tot 150:00]_
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 8: AFSLUITING (15 minuten)
|
||||||
|
|
||||||
|
### Slide 34: Resultaten Delen
|
||||||
|
|
||||||
|
**[150:00 - 158:00]** _(8 minuten)_
|
||||||
|
|
||||||
|
"Oké, tijd om af te ronden. Wie wil zijn resultaat laten zien?"
|
||||||
|
|
||||||
|
_[Laat 2-3 studenten hun scherm delen en kort presenteren]_
|
||||||
|
|
||||||
|
"Wat was je oorspronkelijke idee? Laat je schets zien. En wat heeft v0 ervan gemaakt?"
|
||||||
|
|
||||||
|
_[Geef korte positieve feedback per student]_
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 35: Samenvatting
|
||||||
|
|
||||||
|
**[158:00 - 162:00]** _(4 minuten)_
|
||||||
|
|
||||||
|
"Laten we even terugkijken naar wat jullie vandaag hebben geleerd."
|
||||||
|
|
||||||
|
"We begonnen met de theorie: hoe LLMs werken, next-token prediction, en waarom hallucinaties bestaan."
|
||||||
|
|
||||||
|
"We hebben ChatGPT praktisch verkend: de interface, afbeeldingen uploaden, Custom Instructions."
|
||||||
|
|
||||||
|
"We hebben prompt engineering gehad: het belang van specificiteit, tech stack, kleuren en stijl meegeven."
|
||||||
|
|
||||||
|
_[Met nadruk]_
|
||||||
|
|
||||||
|
"En het belangrijkste: jullie hebben de workflow geleerd en toegepast. Schets op papier, foto naar ChatGPT, prompt naar v0, en live op het internet."
|
||||||
|
|
||||||
|
"Jullie zijn developers die AI tools kunnen gebruiken. Dat is wat deze eerste les jullie heeft gegeven."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 36: Huiswerk
|
||||||
|
|
||||||
|
**[162:00 - 167:00]** _(5 minuten)_
|
||||||
|
|
||||||
|
"Voor volgende week heb je twee opdrachten. Inleveren via Teams."
|
||||||
|
|
||||||
|
_[Wijs naar de slide]_
|
||||||
|
|
||||||
|
"Eén: een reflectie van 500 woorden. Ik geef je drie deelvragen om je op weg te helpen."
|
||||||
|
|
||||||
|
"Wat vond je verrassend aan werken met AI? Wat ging goed en wat vond je lastig? En hoe zie je AI jouw werk als developer veranderen?"
|
||||||
|
|
||||||
|
"Dit hoeft geen essay te zijn - gewoon eerlijk nadenken over je ervaring vandaag."
|
||||||
|
|
||||||
|
_[Wijs naar opdracht 2]_
|
||||||
|
|
||||||
|
"Twee: breid je v0 website uit. Voeg minimaal één nieuwe sectie toe. Dat kan pricing zijn, features, een contact formulier, een footer - kies zelf."
|
||||||
|
|
||||||
|
"Gebruik dezelfde workflow: teken eerst, dan ChatGPT, dan v0. Lever screenshots in én je Vercel URL."
|
||||||
|
|
||||||
|
"Deadline: voor de volgende les."
|
||||||
|
|
||||||
|
"Vragen? Nee? Dan bedankt voor jullie inzet. Jullie hebben een website gebouwd die begon als een tekening. 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:28 | 15 min |
|
||||||
|
| 3 | AI Landscape | 0:28 | 0:38 | 10 min |
|
||||||
|
| 4 | ChatGPT in de Praktijk | 0:38 | 1:00 | 22 min |
|
||||||
|
| 5 | Prompt Engineering | 1:00 | 1:12 | 12 min |
|
||||||
|
| 6 | Live Demo v0.dev | 1:12 | 1:37 | 25 min |
|
||||||
|
| 7 | Hands-on Opdracht | 1:37 | 2:30 | 53 min |
|
||||||
|
| 8 | Afsluiting | 2:30 | 3:00 | 30 min |
|
||||||
|
|
||||||
|
**Spreektijd docent (Blok 1-6):** ~55 minuten
|
||||||
|
**Hands-on + Afsluiting:** ~83 minuten
|
||||||
|
**Totaal:** 180 minuten (3 uur)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tips voor de docent
|
||||||
|
|
||||||
|
1. **Papier en pennen** - Neem extra mee. Dit is cruciaal voor de workflow.
|
||||||
|
|
||||||
|
2. **Benadruk dat tekenen NIET mooi hoeft** - Studenten zijn vaak onzeker. Blokken en lijnen zijn genoeg.
|
||||||
|
|
||||||
|
3. **De ChatGPT prompt is de sleutel** - Loop rond en check of studenten volledige specificaties meegeven.
|
||||||
|
|
||||||
|
4. **Heb backup klaar** - Screenshots van je demo voor als v0 traag is.
|
||||||
|
|
||||||
|
5. **Tempo aanpassen** - Als de groep snel is, kun je meer tijd voor hands-on geven. Als ze trager zijn, kort de demo in.
|
||||||
|
|
||||||
|
6. **Actief rondlopen** - Tijdens de opdracht, help proactief.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Checklist voor prompts
|
||||||
|
|
||||||
|
Laat studenten dit checken in hun ChatGPT prompt:
|
||||||
|
|
||||||
|
| Element | Voorbeeld |
|
||||||
|
| ---------- | -------------------------- |
|
||||||
|
| Tech stack | "React met Tailwind CSS" |
|
||||||
|
| Kleuren | "#2563EB" of "warm oranje" |
|
||||||
|
| Stijl | "Modern, minimalistisch" |
|
||||||
|
| Doel | "SaaS landingspagina" |
|
||||||
272
v2/Les01-Introductie-AI/Les01-Lesplan.md
Normal file
272
v2/Les01-Introductie-AI/Les01-Lesplan.md
Normal file
@@ -0,0 +1,272 @@
|
|||||||
|
# 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)** | |
|
||||||
|
|---|---|
|
||||||
|
| **Benodigdheden** | Laptop met internetverbinding, projectiescherm, **papier en pen voor elke student**, toegang tot v0.dev, ChatGPT account, GitHub account, Vercel 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 (~20 min) |
|
||||||
|
| | | - Hands-on opdracht: bouw een complete landingspagina (~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, GitHub en Vercel account heeft. Laat studenten die dit nog moeten doen dit nu aanmaken. Tip: Vercel koppelen met GitHub is het makkelijkst. |
|
||||||
|
| | | |
|
||||||
|
| **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-5, GPT-5 with canvas, GPT-5.2. |
|
||||||
|
| | | |
|
||||||
|
| | | **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. |
|
||||||
|
| | | |
|
||||||
|
| | | **ChatGPT Projects (3 min)** |
|
||||||
|
| | | Demonstreer Projects: werkruimtes met eigen instructies, bestanden en geheugen. |
|
||||||
|
| | | |
|
||||||
|
| | | **Praktijk: Instellen ChatGPT (5 min)** |
|
||||||
|
| | | Studenten stellen Custom Instructions in + maken Project "Les 1 - v0.dev Prompt Engineer". |
|
||||||
|
| | | |
|
||||||
|
| | | **Dit project gebruiken we straks voor de v0.dev demo!** |
|
||||||
|
| | | |
|
||||||
|
| **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-105** | **Live Demo: v0.dev** | *Instructievorm: live demonstratie (20 min)* |
|
||||||
|
| | | *Doel:* "Wow-moment" creëren met de schets-naar-website workflow |
|
||||||
|
| | | |
|
||||||
|
| | | **Introductie v0.dev + Workflow (5 min)** |
|
||||||
|
| | | Leg uit wat v0.dev is en de 5-stappen workflow: |
|
||||||
|
| | | 1. TEKEN op papier |
|
||||||
|
| | | 2. FOTO maken |
|
||||||
|
| | | 3. Upload naar CHATGPT + beschrijf wensen |
|
||||||
|
| | | 4. ChatGPT maakt PROMPT |
|
||||||
|
| | | 5. Plak in V0.DEV → Website! |
|
||||||
|
| | | |
|
||||||
|
| | | **Live Demo (15 min)** |
|
||||||
|
| | | Voer de hele workflow uit in één vloeiende demo: |
|
||||||
|
| | | - Teken simpele hero section op papier |
|
||||||
|
| | | - Foto maken en uploaden naar ChatGPT Project |
|
||||||
|
| | | - Prompt genereren met tech stack, kleuren, stijl |
|
||||||
|
| | | - Kopiëren naar v0.dev en genereren |
|
||||||
|
| | | - Itereren met follow-up prompts |
|
||||||
|
| | | |
|
||||||
|
| | | **BELANGRIJK: Deployment NIET live doen!** |
|
||||||
|
| | | Leg kort uit hoe het werkt (Add Integration → GitHub → Deploy), maar studenten zoeken dit straks zelf uit. |
|
||||||
|
| | | |
|
||||||
|
| | | **Clue: De schets is je startpunt, ChatGPT is je vertaler, v0.dev is je bouwer.** |
|
||||||
|
| | | |
|
||||||
|
| **105-160** | **Hands-on Opdracht** | *Werkvorm: individueel werken (55 min)* |
|
||||||
|
| | | *Doel:* Zelfstandig de workflow doorlopen |
|
||||||
|
| | | |
|
||||||
|
| | | **Opdracht introductie (5 min)** |
|
||||||
|
| | | Deel de opdracht uit (zie Bijlage: Lesopdracht). Studenten bouwen een **complete landingspagina**: |
|
||||||
|
| | | - Minimaal **3 secties** (hero, features, pricing, etc.) |
|
||||||
|
| | | - Minimaal **1 carousel** (image/testimonial slider) |
|
||||||
|
| | | - Minimaal **1 accordion** (FAQ of uitklapbare content) |
|
||||||
|
| | | - **Deployment:** Zelf uitzoeken! |
|
||||||
|
| | | |
|
||||||
|
| | | **Benodigdheden check** |
|
||||||
|
| | | Zorg dat iedereen papier en pen heeft! |
|
||||||
|
| | | |
|
||||||
|
| | | **Zelfstandig werken (45 min)** |
|
||||||
|
| | | Loop rond en help studenten waar nodig. Let op: |
|
||||||
|
| | | - Hebben ze 3+ secties getekend? |
|
||||||
|
| | | - Carousel en accordion in de schets? |
|
||||||
|
| | | - Volledigheid van ChatGPT prompt (tech stack, kleuren, stijl) |
|
||||||
|
| | | - Deployment: laat ze eerst zelf zoeken, help pas daarna |
|
||||||
|
| | | |
|
||||||
|
| | | **Tussentijdse check (halverwege)** |
|
||||||
|
| | | "Wie heeft 3+ secties? Carousel en accordion gepland?" |
|
||||||
|
| | | "Begin met deployen als je v0 resultaat hebt!" |
|
||||||
|
| | | |
|
||||||
|
| | | **Clue: Het doel is de workflow leren, niet perfectie!** |
|
||||||
|
| | | |
|
||||||
|
| **160-180** | **Afsluiting** | *Werkvorm: klassikaal gesprek (20 min)* |
|
||||||
|
| | | |
|
||||||
|
| | | **Resultaten delen (8 min)** |
|
||||||
|
| | | Vraag 2-3 studenten om te delen: |
|
||||||
|
| | | - Laat je schets en v0 resultaat zien |
|
||||||
|
| | | - Wat ging goed? Wat was lastig? |
|
||||||
|
| | | |
|
||||||
|
| | | **Samenvatting (4 min)** |
|
||||||
|
| | | - LLMs en next-token prediction |
|
||||||
|
| | | - Prompt engineering: tech stack, kleuren, stijl |
|
||||||
|
| | | - **De workflow: Schets → ChatGPT → v0.dev → Website** |
|
||||||
|
| | | |
|
||||||
|
| | | **Huiswerk (5 min)** |
|
||||||
|
| | | 1. **Reflectie (500 woorden)** met deelvragen: |
|
||||||
|
| | | - Wat vond je verrassend aan werken met AI? |
|
||||||
|
| | | - Wat ging goed? Wat vond je lastig? |
|
||||||
|
| | | - Hoe zie je AI jouw werk als developer veranderen? |
|
||||||
|
| | | 2. **Breid je v0 website uit** met minimaal 1 nieuwe sectie |
|
||||||
|
| | | - Inleveren via Teams, voor volgende les |
|
||||||
|
| | | |
|
||||||
|
| | | **Afsluiting** |
|
||||||
|
| | | Bedank de studenten. Tot volgende week! |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Timing Overzicht
|
||||||
|
|
||||||
|
| Blok | Onderwerp | Start | Eind | Duur |
|
||||||
|
|------|-----------|-------|------|------|
|
||||||
|
| 1 | Welkom & Introductie | 0:00 | 0:15 | 15 min |
|
||||||
|
| 2 | Wat is AI? | 0:15 | 0:40 | 25 min |
|
||||||
|
| 3 | AI Landscape | 0:40 | 0:50 | 10 min |
|
||||||
|
| 4 | ChatGPT in de Praktijk | 0:50 | 1:10 | 20 min |
|
||||||
|
| 5 | Prompt Engineering | 1:10 | 1:25 | 15 min |
|
||||||
|
| 6 | Live Demo v0.dev | 1:25 | 1:45 | 20 min |
|
||||||
|
| 7 | Hands-on Opdracht | 1:45 | 2:40 | 55 min |
|
||||||
|
| 8 | Afsluiting | 2:40 | 3:00 | 20 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 en Website Uitbreiding
|
||||||
831
v2/Les01-Introductie-AI/Les01-Slide-Overzicht.md
Normal file
831
v2/Les01-Introductie-AI/Les01-Slide-Overzicht.md
Normal file
@@ -0,0 +1,831 @@
|
|||||||
|
# Les 1: Introductie tot AI en Large Language Models
|
||||||
|
|
||||||
|
## Slide Overzicht (3 uur les) - V2
|
||||||
|
|
||||||
|
**V2 Verbeteringen:**
|
||||||
|
- Account setup met checkpoints (slides 6-8)
|
||||||
|
- Deployment demo samen met class (slide 34)
|
||||||
|
- Troubleshooting notities toegevoegd
|
||||||
|
|
||||||
|
**Spreektijd docent:** ~55 minuten
|
||||||
|
**Account setup (samen):** ~10 minuten
|
||||||
|
**Demo v0.dev + deployment:** ~20 minuten
|
||||||
|
**Hands-on opdracht:** ~50 minuten
|
||||||
|
**Afsluiting + buffer:** ~25 minuten
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 1: WELKOM & INTRODUCTIE (13 minuten)
|
||||||
|
|
||||||
|
### Slide 1: Titelslide
|
||||||
|
*(30 seconden)*
|
||||||
|
|
||||||
|
**Titel:** Introductie tot AI en Large Language Models
|
||||||
|
**Subtitel:** AI Development - Les 1
|
||||||
|
**Docent:** Tim Rijkse
|
||||||
|
**Datum:** [Datum invullen]
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 2: Planning
|
||||||
|
*(1,5 minuut)*
|
||||||
|
|
||||||
|
**Titel:** Wat gaan we vandaag doen?
|
||||||
|
|
||||||
|
**Inhoud:**
|
||||||
|
|
||||||
|
| Tijd | Onderwerp |
|
||||||
|
|------|-----------|
|
||||||
|
| 09:00 - 09:15 | Welkom & voorstelrondje |
|
||||||
|
| 09:15 - 09:40 | Wat is AI? LLMs, hallucinaties, tools |
|
||||||
|
| 09:40 - 10:00 | ChatGPT in de praktijk |
|
||||||
|
| 10:00 - 10:15 | Prompt Engineering |
|
||||||
|
| 10:15 - 10:35 | Live demo: Van schets naar website |
|
||||||
|
| 10:35 - 11:30 | Jullie aan de slag! |
|
||||||
|
| 11:30 - 12:00 | Resultaten delen & huiswerk |
|
||||||
|
|
||||||
|
**Einddoel:** Van een tekening op papier naar een live website!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 3: Voorstellen docent
|
||||||
|
*(1,5 minuut)*
|
||||||
|
|
||||||
|
**Titel:** Even voorstellen
|
||||||
|
|
||||||
|
**Inhoud:**
|
||||||
|
- Naam: Tim Rijkse
|
||||||
|
- Developer + AI docent bij NOVI
|
||||||
|
- Dagelijks bezig met AI-assisted development
|
||||||
|
- Bereikbaar via Teams
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 4: Kennismaking
|
||||||
|
*(5 minuten - studenten aan het woord)*
|
||||||
|
|
||||||
|
**Titel:** Wie zijn jullie?
|
||||||
|
|
||||||
|
**Inhoud:**
|
||||||
|
- Naam
|
||||||
|
- Achtergrond (werk/studie)
|
||||||
|
- Heb je al eens ChatGPT of andere AI-tools gebruikt?
|
||||||
|
- Zo ja, waarvoor?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 5: De Leerlijn AI Developer
|
||||||
|
*(2 minuten)*
|
||||||
|
|
||||||
|
**Titel:** 18 weken, 4 delen
|
||||||
|
|
||||||
|
**Inhoud:**
|
||||||
|
|
||||||
|
| Deel | Lessen | Focus |
|
||||||
|
|------|--------|-------|
|
||||||
|
| 1: AI Foundations | 1-4 | AI basics, tools, ethics, prompting |
|
||||||
|
| 2: Technical Foundations | 5-9 | TypeScript, Next.js, databases, Supabase |
|
||||||
|
| 3: AI Tooling & Prototyping | 10-12 | Tool selectie, prototyping, Cursor |
|
||||||
|
| 4: Advanced AI Features | 13-18 | Agents, MCP, AI SDK, deployment |
|
||||||
|
|
||||||
|
**Eindresultaat:** Complete full-stack applicatie met AI
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 6: Accounts Check - ChatGPT
|
||||||
|
*(3 minuten)*
|
||||||
|
|
||||||
|
**Titel:** Stap 1: ChatGPT Account
|
||||||
|
|
||||||
|
**Inhoud:**
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────────────────┐
|
||||||
|
│ STAP 1: CHATGPT ACCOUNT │
|
||||||
|
│ ───────────────────────────────────────────────── │
|
||||||
|
│ 1. Ga naar chat.openai.com │
|
||||||
|
│ 2. Klik "Sign up" │
|
||||||
|
│ 3. Kies: Email of Google/Apple login │
|
||||||
|
│ 4. Bevestig je email │
|
||||||
|
│ ───────────────────────────────────────────────── │
|
||||||
|
│ ✅ CHECKPOINT: Je ziet het ChatGPT chatvenster │
|
||||||
|
│ Steek je hand op als je dit hebt! │
|
||||||
|
└─────────────────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
**⚠️ WACHT** - We gaan pas door als iedereen klaar is!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 7: Accounts Check - GitHub
|
||||||
|
*(3 minuten)*
|
||||||
|
|
||||||
|
**Titel:** Stap 2: GitHub Account
|
||||||
|
|
||||||
|
**Inhoud:**
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────────────────┐
|
||||||
|
│ STAP 2: GITHUB ACCOUNT │
|
||||||
|
│ ───────────────────────────────────────────────── │
|
||||||
|
│ 1. Ga naar github.com │
|
||||||
|
│ 2. Klik "Sign up" │
|
||||||
|
│ 3. Kies username (dit wordt je URL!) │
|
||||||
|
│ 4. Bevestig je email │
|
||||||
|
│ ───────────────────────────────────────────────── │
|
||||||
|
│ ✅ CHECKPOINT: Je ziet je GitHub dashboard │
|
||||||
|
│ Steek je hand op als je dit hebt! │
|
||||||
|
└─────────────────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
**⚠️ WACHT** - We gaan pas door als iedereen klaar is!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 8: Accounts Check - Vercel
|
||||||
|
*(4 minuten)*
|
||||||
|
|
||||||
|
**Titel:** Stap 3: Vercel Account (koppel met GitHub!)
|
||||||
|
|
||||||
|
**Inhoud:**
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────────────────┐
|
||||||
|
│ STAP 3: VERCEL ACCOUNT │
|
||||||
|
│ ───────────────────────────────────────────────── │
|
||||||
|
│ 1. Ga naar vercel.com │
|
||||||
|
│ 2. Klik "Sign Up" │
|
||||||
|
│ 3. BELANGRIJK: Kies "Continue with GitHub" │
|
||||||
|
│ (niet email!) │
|
||||||
|
│ 4. Geef Vercel toegang tot je GitHub │
|
||||||
|
│ ───────────────────────────────────────────────── │
|
||||||
|
│ ✅ CHECKPOINT: Je ziet Vercel dashboard │
|
||||||
|
│ EN je GitHub username staat rechtsboven │
|
||||||
|
│ Steek je hand op als je dit hebt! │
|
||||||
|
└─────────────────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
**⚠️ Veel voorkomende fout:** Eerst deployen, dan pas GitHub koppelen. Doe het NU!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 2: WAT IS AI? (15 minuten)
|
||||||
|
|
||||||
|
### Slide 9: Wat is Artificial Intelligence?
|
||||||
|
*(3 minuten)*
|
||||||
|
|
||||||
|
**Titel:** AI - Meer dan een buzzword
|
||||||
|
|
||||||
|
**Inhoud:**
|
||||||
|
|
||||||
|
**Definitie:** Computersystemen die taken uitvoeren die normaal menselijke intelligentie vereisen
|
||||||
|
|
||||||
|
**Typen AI:**
|
||||||
|
- **Narrow AI** (wat we nu hebben): specifieke taken
|
||||||
|
- **General AI** (toekomst): breed menselijk denken
|
||||||
|
|
||||||
|
**Voorbeelden:**
|
||||||
|
- Aanbevelingen (Netflix, Spotify)
|
||||||
|
- Spraakassistenten (Siri, Alexa)
|
||||||
|
- Code generatie (ChatGPT, Copilot)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 10: Hoe werken Large Language Models?
|
||||||
|
*(4 minuten)*
|
||||||
|
|
||||||
|
**Titel:** De magie achter ChatGPT
|
||||||
|
|
||||||
|
**Inhoud:**
|
||||||
|
|
||||||
|
1. **Training:** Model leest miljarden teksten
|
||||||
|
2. **Patroonherkenning:** Leert statistische verbanden
|
||||||
|
3. **Voorspelling:** Voorspelt het volgende woord
|
||||||
|
4. **Output:** Genereert tekst token voor token
|
||||||
|
|
||||||
|
**Belangrijk inzicht:**
|
||||||
|
- LLMs "begrijpen" niet echt - ze voorspellen
|
||||||
|
- Geen bewustzijn, geen intentie
|
||||||
|
- Geavanceerde patroonherkenning op enorme schaal
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 11: Tokens & Next-Token Prediction
|
||||||
|
*(4 minuten)*
|
||||||
|
|
||||||
|
**Titel:** Hoe "denkt" een LLM?
|
||||||
|
|
||||||
|
**Inhoud:**
|
||||||
|
|
||||||
|
**Stap 1: Tekst → Tokens (nummers)**
|
||||||
|
```
|
||||||
|
"Ik drink koffie" → [1847, 5621, 8934]
|
||||||
|
```
|
||||||
|
Elk woord (of woorddeel) krijgt een nummer.
|
||||||
|
|
||||||
|
**Stap 2: Betekenis in getallen**
|
||||||
|
Woorden met vergelijkbare betekenis liggen dicht bij elkaar:
|
||||||
|
- "koffie" en "thee" → dichtbij
|
||||||
|
- "staal" en "metaal" → dichtbij
|
||||||
|
- "koffie" en "fiets" → ver uit elkaar
|
||||||
|
|
||||||
|
**Stap 3: Voorspel het volgende token**
|
||||||
|
```
|
||||||
|
"Ik drink koffie met ___"
|
||||||
|
```
|
||||||
|
Het model berekent kansen:
|
||||||
|
- "melk" → 45%
|
||||||
|
- "suiker" → 30%
|
||||||
|
- "een" → 15%
|
||||||
|
|
||||||
|
→ Kiest waarschijnlijk "melk" (maar niet altijd!)
|
||||||
|
|
||||||
|
**Dit verklaart:**
|
||||||
|
- Waarom het soms briljant is (patronen herkend)
|
||||||
|
- Waarom het soms onzin produceert (verkeerde voorspelling)
|
||||||
|
- Waarom dezelfde vraag verschillende antwoorden geeft (kans, niet zekerheid)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 12: Hallucinaties
|
||||||
|
*(5 minuten)*
|
||||||
|
|
||||||
|
**Titel:** Waarom AI soms "liegt"
|
||||||
|
|
||||||
|
**Inhoud:**
|
||||||
|
|
||||||
|
**Wat zijn hallucinaties?**
|
||||||
|
- AI verzint informatie die niet bestaat
|
||||||
|
- Klinkt heel overtuigend
|
||||||
|
- Grammaticaal perfect, maar feitelijk onjuist
|
||||||
|
|
||||||
|
**Voorbeelden:**
|
||||||
|
- Fake wetenschappelijke papers met echte-klinkende titels
|
||||||
|
- Niet-bestaande npm packages met installatie-instructies
|
||||||
|
- Verzonnen restaurants met adressen
|
||||||
|
|
||||||
|
**Waarom gebeurt dit?**
|
||||||
|
Het model voorspelt wat LIJKT op correcte output, niet wat WAAR is.
|
||||||
|
|
||||||
|
**Regel:** Verifieer altijd! Vertrouw, maar check.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 3: HET AI-LANDSCHAP (10 minuten)
|
||||||
|
|
||||||
|
### Slide 13: De Grote Spelers
|
||||||
|
*(3 minuten)*
|
||||||
|
|
||||||
|
**Titel:** Welke AI tools zijn er?
|
||||||
|
|
||||||
|
**Inhoud:**
|
||||||
|
|
||||||
|
| Tool | Bedrijf | Sterk in |
|
||||||
|
|------|---------|----------|
|
||||||
|
| **ChatGPT** | OpenAI | Algemeen, code, creatief |
|
||||||
|
| **Claude** | Anthropic | Lange teksten, nuance |
|
||||||
|
| **Gemini** | Google | Google integratie |
|
||||||
|
| **Grok** | xAI | Actueel nieuws (X/Twitter) |
|
||||||
|
|
||||||
|
**Vandaag:** Focus op ChatGPT - meest toegankelijk.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 14: Gratis AI Opties
|
||||||
|
*(4 minuten)*
|
||||||
|
|
||||||
|
**Titel:** Gratis modellen - meer dan genoeg!
|
||||||
|
|
||||||
|
**Inhoud:**
|
||||||
|
|
||||||
|
| Provider | Model | Sterk in | Privacy |
|
||||||
|
|----------|-------|----------|---------|
|
||||||
|
| **ChatGPT Free** | GPT-5 | Algemeen, code, images | Cloud |
|
||||||
|
| **Claude Free** | Sonnet 3.5 | Lange teksten, nuance | Cloud |
|
||||||
|
| **Gemini Free** | Gemini Pro | Google integratie | Cloud |
|
||||||
|
| **Groq** | Llama 3.3 | Supersnel, gratis API | Cloud |
|
||||||
|
| **Ollama** | Diverse (lokaal) | Privacy, offline | **Lokaal** |
|
||||||
|
|
||||||
|
**Conclusie:** Voor deze cursus is gratis ruim voldoende!
|
||||||
|
|
||||||
|
**Privacy tip:** Ollama draait lokaal → data verlaat je computer niet.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 15: Betaalde & Premium Modellen
|
||||||
|
*(3 minuten)*
|
||||||
|
|
||||||
|
**Titel:** Wanneer upgraden?
|
||||||
|
|
||||||
|
**Inhoud:**
|
||||||
|
|
||||||
|
**Betaald (~$20/maand):**
|
||||||
|
|
||||||
|
| Provider | Voordelen |
|
||||||
|
|----------|-----------|
|
||||||
|
| ChatGPT Plus | Meer berichten, sneller, GPT-5.2, DALL-E |
|
||||||
|
| Claude Pro | Meer berichten, prioriteit, langere context |
|
||||||
|
|
||||||
|
**Premium Tier:**
|
||||||
|
|
||||||
|
| Model | Kosten | Wanneer? |
|
||||||
|
|-------|--------|----------|
|
||||||
|
| **Claude Opus** | ~$75/maand API | Beste redenering, complexe taken |
|
||||||
|
| GPT-5.2 Turbo | Via Plus | Lange context, nieuwste features |
|
||||||
|
|
||||||
|
**Advies:** Start gratis. Upgrade alleen als je tegen limieten aanloopt.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 16: Welke tool voor welke taak?
|
||||||
|
*(4 minuten)*
|
||||||
|
|
||||||
|
**Titel:** Snelle vergelijking
|
||||||
|
|
||||||
|
**Inhoud:**
|
||||||
|
|
||||||
|
| Taak | Beste keuze |
|
||||||
|
|------|-------------|
|
||||||
|
| Snelle code snippets | ChatGPT of Claude |
|
||||||
|
| Lange documenten | Claude (200K context) |
|
||||||
|
| Actueel nieuws | Grok of Perplexity |
|
||||||
|
| UI componenten | v0.dev (straks!) |
|
||||||
|
| Privacy-gevoelig | Ollama (lokaal) |
|
||||||
|
| Supersnel prototypen | Groq API |
|
||||||
|
|
||||||
|
**Tip:** Professionele developers gebruiken meerdere tools!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 4: CHATGPT IN DE PRAKTIJK (22 minuten)
|
||||||
|
|
||||||
|
### Slide 17: ChatGPT Interface
|
||||||
|
*(3 minuten)*
|
||||||
|
|
||||||
|
**Titel:** Laten we ChatGPT openen
|
||||||
|
|
||||||
|
**Inhoud:**
|
||||||
|
|
||||||
|
*[Live demonstratie - open chat.openai.com]*
|
||||||
|
|
||||||
|
**Wat je ziet:**
|
||||||
|
- Chatvenster (midden)
|
||||||
|
- Chat geschiedenis (links)
|
||||||
|
- Model kiezen (bovenaan)
|
||||||
|
- Instellingen (rechtsonder)
|
||||||
|
|
||||||
|
**Actie:** Open nu ChatGPT op je laptop!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 18: Model Kiezen
|
||||||
|
*(2 minuten)*
|
||||||
|
|
||||||
|
**Titel:** Welk model gebruik je?
|
||||||
|
|
||||||
|
**Inhoud:**
|
||||||
|
|
||||||
|
**In ChatGPT kun je kiezen:**
|
||||||
|
- **GPT-5** - Standaard, snel, gratis
|
||||||
|
- **GPT-5 with canvas** - Voor documenten bewerken
|
||||||
|
- **GPT-5.2** - Nieuwste en krachtigste (betaald)
|
||||||
|
|
||||||
|
**Tip:** GPT-5 is voor de meeste taken prima!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 19: Tijdelijke Chat
|
||||||
|
*(2 minuten)*
|
||||||
|
|
||||||
|
**Titel:** Privacy: Tijdelijke Chat
|
||||||
|
|
||||||
|
**Inhoud:**
|
||||||
|
|
||||||
|
**Wat is tijdelijke chat?**
|
||||||
|
- Chat wordt NIET opgeslagen
|
||||||
|
- Wordt NIET gebruikt om model te trainen
|
||||||
|
|
||||||
|
**Wanneer gebruiken?**
|
||||||
|
- Gevoelige informatie
|
||||||
|
- Werk-gerelateerde data
|
||||||
|
- Client gegevens
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 20: Afbeeldingen Analyseren
|
||||||
|
*(5 minuten)*
|
||||||
|
|
||||||
|
**Titel:** Image-to-Text - Cruciaal voor onze workflow!
|
||||||
|
|
||||||
|
**Inhoud:**
|
||||||
|
|
||||||
|
**Wat kun je doen?**
|
||||||
|
- Foto uploaden en vragen stellen
|
||||||
|
- Screenshot laten analyseren
|
||||||
|
- **Schets laten interpreteren** ← Dit gebruiken we straks!
|
||||||
|
|
||||||
|
**Hoe werkt het?**
|
||||||
|
- Klik op 📎 (paperclip)
|
||||||
|
- Upload afbeelding
|
||||||
|
- Stel je vraag
|
||||||
|
|
||||||
|
*[Live demonstratie met een schets]*
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 21: Bestanden Uploaden
|
||||||
|
*(2 minuten)*
|
||||||
|
|
||||||
|
**Titel:** PDF's en documenten
|
||||||
|
|
||||||
|
**Inhoud:**
|
||||||
|
|
||||||
|
**ChatGPT kan:**
|
||||||
|
- PDF's lezen en samenvatten
|
||||||
|
- Word documenten analyseren
|
||||||
|
- Code bestanden reviewen
|
||||||
|
- Spreadsheets interpreteren
|
||||||
|
|
||||||
|
**Limiet:** ~50 pagina's per document
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 22: Custom Instructions
|
||||||
|
*(3 minuten)*
|
||||||
|
|
||||||
|
**Titel:** ChatGPT Personaliseren
|
||||||
|
|
||||||
|
**Inhoud:**
|
||||||
|
|
||||||
|
**Wat zijn Custom Instructions?**
|
||||||
|
- Permanente instructies die ChatGPT onthoudt
|
||||||
|
- Zit in Instellingen → Personalisatie
|
||||||
|
|
||||||
|
**Handige voorbeelden:**
|
||||||
|
- "Ik ben een frontend developer, gebruik React en Tailwind"
|
||||||
|
- "Antwoord in het Nederlands tenzij ik Engels vraag"
|
||||||
|
- "Geef code voorbeelden met TypeScript"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 23: ChatGPT Projects
|
||||||
|
*(3 minuten)*
|
||||||
|
|
||||||
|
**Titel:** Alles op één plek: Projects
|
||||||
|
|
||||||
|
**Inhoud:**
|
||||||
|
|
||||||
|
**Wat zijn Projects?**
|
||||||
|
- Slimme werkruimtes voor langlopende taken
|
||||||
|
- Eigen instructies per project
|
||||||
|
- Bestanden uploaden (PDF, Word, afbeeldingen)
|
||||||
|
- Project-specifiek geheugen
|
||||||
|
|
||||||
|
**Waarom handig?**
|
||||||
|
- Context blijft behouden tussen chats
|
||||||
|
- Geen herhaling van instructies nodig
|
||||||
|
- Perfect voor: cursussen, klanten, projecten
|
||||||
|
|
||||||
|
**Gratis tier:** 5 bestanden per project
|
||||||
|
**Betaald:** 25-40 bestanden per project
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 24: Praktijk Oefening
|
||||||
|
*(5 minuten - studenten werken)*
|
||||||
|
|
||||||
|
**Titel:** Stel je ChatGPT in!
|
||||||
|
|
||||||
|
**Inhoud:**
|
||||||
|
|
||||||
|
**Opdracht (5 minuten):**
|
||||||
|
|
||||||
|
1. **Custom Instructions instellen:**
|
||||||
|
- Ga naar Instellingen → Personalisatie
|
||||||
|
- Vul in: "Ik ben een frontend developer. Ik werk met React en Tailwind CSS."
|
||||||
|
|
||||||
|
2. **Maak je eerste Project:**
|
||||||
|
- Klik op "New Project" (linkerzijbalk)
|
||||||
|
- Naam: "Les 1 - v0.dev Prompt Engineer"
|
||||||
|
- Instructie: "Help me gedetailleerde prompts schrijven voor v0.dev. Focus op React + Tailwind CSS componenten."
|
||||||
|
|
||||||
|
**Dit project gebruiken we straks voor de v0.dev demo!**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 5: PROMPT ENGINEERING (12 minuten)
|
||||||
|
|
||||||
|
### Slide 25: Wat is Prompt Engineering?
|
||||||
|
*(2 minuten)*
|
||||||
|
|
||||||
|
**Titel:** De kunst van het vragen stellen
|
||||||
|
|
||||||
|
**Inhoud:**
|
||||||
|
|
||||||
|
**Een prompt is:** De instructie die je aan AI geeft
|
||||||
|
|
||||||
|
**Waarom belangrijk?**
|
||||||
|
- Goede prompt = bruikbaar resultaat
|
||||||
|
- Slechte prompt = frustratie
|
||||||
|
|
||||||
|
**Garbage in = garbage out!**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 26: Slechte vs Goede Prompt
|
||||||
|
*(3 minuten)*
|
||||||
|
|
||||||
|
**Titel:** Het verschil zien
|
||||||
|
|
||||||
|
**Slechte prompt:**
|
||||||
|
> "Maak een button"
|
||||||
|
|
||||||
|
**Goede prompt:**
|
||||||
|
> "Maak een React button component met Tailwind CSS. Primary styling met blauwe achtergrond (#2563EB). Include hover state en loading state met spinner."
|
||||||
|
|
||||||
|
**Waarom beter?**
|
||||||
|
- Specificeert technologie
|
||||||
|
- Beschrijft features
|
||||||
|
- Geeft visuele details
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 27: Prompt Framework
|
||||||
|
*(2 minuten)*
|
||||||
|
|
||||||
|
**Titel:** 4 elementen van een goede prompt
|
||||||
|
|
||||||
|
**Inhoud:**
|
||||||
|
|
||||||
|
1. **Rol:** "Je bent een senior frontend developer..."
|
||||||
|
2. **Context:** "...die werkt aan een SaaS landingspagina..."
|
||||||
|
3. **Taak:** "...maak een hero section met..."
|
||||||
|
4. **Format:** "...gebruik React en Tailwind"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 28: Tech Stack Specificeren
|
||||||
|
*(2 minuten)*
|
||||||
|
|
||||||
|
**Titel:** Vertel de AI welke technologie
|
||||||
|
|
||||||
|
**Inhoud:**
|
||||||
|
|
||||||
|
**Voor deze cursus:**
|
||||||
|
- **React** - JavaScript framework voor UI
|
||||||
|
- **Tailwind CSS** - Utility-first CSS
|
||||||
|
- **Next.js** - React framework
|
||||||
|
|
||||||
|
**In je prompt:**
|
||||||
|
> "Gebruik React met Tailwind CSS"
|
||||||
|
|
||||||
|
**Tip:** v0.dev genereert automatisch React + Tailwind!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 29: Kleuren en Look & Feel
|
||||||
|
*(2 minuten)*
|
||||||
|
|
||||||
|
**Titel:** Visuele specificaties
|
||||||
|
|
||||||
|
**Inhoud:**
|
||||||
|
|
||||||
|
**Wat specificeren?**
|
||||||
|
- **Kleuren:** "#2563EB" of "blauw thema"
|
||||||
|
- **Stijl:** "Modern, minimalistisch"
|
||||||
|
- **Referenties:** "In de stijl van Stripe.com"
|
||||||
|
|
||||||
|
**Voorbeeld:**
|
||||||
|
> "Blauw kleurenschema met primary #2563EB. Modern en minimalistisch. B2B SaaS stijl."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 30: Prompting Tips
|
||||||
|
*(1 minuut)*
|
||||||
|
|
||||||
|
**Titel:** Samenvatting
|
||||||
|
|
||||||
|
**Inhoud:**
|
||||||
|
|
||||||
|
1. Geef een rol
|
||||||
|
2. Wees specifiek
|
||||||
|
3. Specificeer tech stack
|
||||||
|
4. Beschrijf look & feel
|
||||||
|
5. Itereer - eerste poging is zelden perfect
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 6: LIVE DEMO V0.DEV (25 minuten)
|
||||||
|
|
||||||
|
### Slide 31: Introductie v0.dev
|
||||||
|
*(3 minuten)*
|
||||||
|
|
||||||
|
**Titel:** Van schets naar website
|
||||||
|
|
||||||
|
**Inhoud:**
|
||||||
|
|
||||||
|
**v0.dev door Vercel:**
|
||||||
|
- AI-powered UI generator
|
||||||
|
- Begrijpt tekst EN afbeeldingen
|
||||||
|
- Genereert React + Tailwind code
|
||||||
|
- Direct deploybaar
|
||||||
|
|
||||||
|
**De workflow:**
|
||||||
|
Tekening → Foto → ChatGPT → Prompt → v0.dev → Website!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 32: De Slimme Workflow
|
||||||
|
*(3 minuten)*
|
||||||
|
|
||||||
|
**Titel:** 5 stappen
|
||||||
|
|
||||||
|
**Inhoud:**
|
||||||
|
|
||||||
|
```
|
||||||
|
1. TEKEN je idee op papier
|
||||||
|
↓
|
||||||
|
2. Maak een FOTO
|
||||||
|
↓
|
||||||
|
3. Upload naar CHATGPT + beschrijf wensen
|
||||||
|
(tech stack, kleuren, stijl)
|
||||||
|
↓
|
||||||
|
4. ChatGPT maakt gedetailleerde PROMPT
|
||||||
|
↓
|
||||||
|
5. Plak in V0.DEV → Website!
|
||||||
|
```
|
||||||
|
|
||||||
|
**Waarom ChatGPT eerst?**
|
||||||
|
- v0 heeft beperkte credits (~7/dag)
|
||||||
|
- ChatGPT optimaliseert je prompt
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 33: Live Demo - v0.dev
|
||||||
|
*(10 minuten)*
|
||||||
|
|
||||||
|
**Titel:** Van schets naar website - live!
|
||||||
|
|
||||||
|
**Inhoud:**
|
||||||
|
|
||||||
|
*[Docent demonstreert de workflow live]*
|
||||||
|
|
||||||
|
**De stappen:**
|
||||||
|
- ✏️ **Tekenen:** Simpele hero section op papier (blokken en lijnen)
|
||||||
|
- 📸 **Foto:** Upload naar ChatGPT Project
|
||||||
|
- 💬 **Prompt:** "Beschrijf als v0.dev prompt, React + Tailwind, blauw thema"
|
||||||
|
- ⚡ **v0.dev:** Prompt plakken → genereren (~30 sec)
|
||||||
|
- 🔄 **Itereren:** "Make button larger", "Add gradient"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 34: Live Demo - Deployment (SAMEN!)
|
||||||
|
*(8 minuten)*
|
||||||
|
|
||||||
|
**Titel:** Samen deployen naar Vercel
|
||||||
|
|
||||||
|
**Inhoud:**
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────────────────┐
|
||||||
|
│ STAP 1: GITHUB KOPPELEN IN V0 │
|
||||||
|
│ ───────────────────────────────────────────────── │
|
||||||
|
│ 1. Klik rechtsboven op "..." menu │
|
||||||
|
│ 2. Klik "Add to codebase" │
|
||||||
|
│ 3. Kies "Connect to GitHub" │
|
||||||
|
│ 4. Autoriseer v0 voor je GitHub │
|
||||||
|
│ ───────────────────────────────────────────────── │
|
||||||
|
│ ✅ CHECKPOINT: Je ziet "Create repository" knop │
|
||||||
|
└─────────────────────────────────────────────────────┘
|
||||||
|
|
||||||
|
┌─────────────────────────────────────────────────────┐
|
||||||
|
│ STAP 2: REPOSITORY AANMAKEN │
|
||||||
|
│ ───────────────────────────────────────────────── │
|
||||||
|
│ 1. Kies een naam (bijv. "mijn-landingspagina") │
|
||||||
|
│ 2. Klik "Create repository" │
|
||||||
|
│ 3. Wacht tot code gepusht is (~10 sec) │
|
||||||
|
│ ───────────────────────────────────────────────── │
|
||||||
|
│ ✅ CHECKPOINT: Je ziet "Deploy" knop │
|
||||||
|
└─────────────────────────────────────────────────────┘
|
||||||
|
|
||||||
|
┌─────────────────────────────────────────────────────┐
|
||||||
|
│ STAP 3: DEPLOYEN NAAR VERCEL │
|
||||||
|
│ ───────────────────────────────────────────────── │
|
||||||
|
│ 1. Klik "Deploy" │
|
||||||
|
│ 2. Vercel opent → Klik "Import" │
|
||||||
|
│ 3. Wacht op build (~1 minuut) │
|
||||||
|
│ 4. Kopieer je URL: jouw-project.vercel.app │
|
||||||
|
│ ───────────────────────────────────────────────── │
|
||||||
|
│ ✅ CHECKPOINT: Je website is live! │
|
||||||
|
│ Open de URL in een nieuw tabblad │
|
||||||
|
└─────────────────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
**⚠️ TROUBLESHOOTING:**
|
||||||
|
- "GitHub niet gekoppeld" → Ga naar Vercel settings, koppel GitHub
|
||||||
|
- "Repository exists" → Kies andere naam
|
||||||
|
- "Build failed" → Vraag docent om hulp
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 7: HANDS-ON OPDRACHT (50 minuten)
|
||||||
|
|
||||||
|
### Slide 35: Aan de slag!
|
||||||
|
*(50 minuten - 5 min uitleg + 45 min werken)*
|
||||||
|
|
||||||
|
**Titel:** Bouw een complete landingspagina!
|
||||||
|
|
||||||
|
**Inhoud:**
|
||||||
|
|
||||||
|
**Vereisten:**
|
||||||
|
- Minimaal **3 secties** (hero, features, pricing, testimonials, footer...)
|
||||||
|
- Minimaal **1 carousel** + **1 accordion**
|
||||||
|
- Vrije keuze in onderwerp/product
|
||||||
|
|
||||||
|
**Stappen:** Teken → Foto → ChatGPT Project → v0.dev → Deploy (zelf!)
|
||||||
|
|
||||||
|
**Checklist:**
|
||||||
|
- [ ] 3+ secties getekend
|
||||||
|
- [ ] Carousel & accordion gepland
|
||||||
|
- [ ] Tech stack + kleuren gespecificeerd
|
||||||
|
- [ ] Gedeployed naar Vercel
|
||||||
|
|
||||||
|
**Tip:** Begin simpel, itereer! **Hulp nodig?** Steek je hand op!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 8: AFSLUITING (30 minuten)
|
||||||
|
|
||||||
|
### Slide 36: Resultaten Delen
|
||||||
|
*(8 minuten)*
|
||||||
|
|
||||||
|
**Titel:** Wie wil laten zien?
|
||||||
|
|
||||||
|
**Inhoud:**
|
||||||
|
|
||||||
|
- Laat je schets zien
|
||||||
|
- Toon het v0 resultaat
|
||||||
|
- Wat ging goed? Wat was lastig?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 37: Samenvatting
|
||||||
|
*(4 minuten)*
|
||||||
|
|
||||||
|
**Titel:** Wat hebben we geleerd?
|
||||||
|
|
||||||
|
**Inhoud:**
|
||||||
|
|
||||||
|
✅ Hoe LLMs werken (next-token prediction)
|
||||||
|
✅ AI-landschap: ChatGPT, Claude, Gemini
|
||||||
|
✅ ChatGPT praktisch gebruiken
|
||||||
|
✅ Prompt engineering: tech stack, kleuren, stijl
|
||||||
|
✅ **De workflow: Schets → ChatGPT → v0.dev → Website!**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 38: Huiswerk
|
||||||
|
*(5 minuten)*
|
||||||
|
|
||||||
|
**Titel:** Voor volgende week
|
||||||
|
|
||||||
|
**Inhoud:**
|
||||||
|
|
||||||
|
**1. Reflectie (500 woorden)**
|
||||||
|
- Wat vond je verrassend aan werken met AI?
|
||||||
|
- Wat ging goed? Wat vond je lastig?
|
||||||
|
- Hoe zie je AI jouw werk als developer veranderen?
|
||||||
|
|
||||||
|
**2. Breid je v0 website uit**
|
||||||
|
- Voeg minimaal 1 nieuwe sectie toe (pricing, features, contact, footer...)
|
||||||
|
- Gebruik weer de workflow: teken → ChatGPT → v0
|
||||||
|
- Lever screenshots + Vercel URL in
|
||||||
|
|
||||||
|
**Inleveren:** Via Teams, voor volgende les
|
||||||
|
|
||||||
|
**Vragen?** Tot volgende week! 🚀
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Timing Samenvatting (V2)
|
||||||
|
|
||||||
|
| Blok | Onderwerp | Duur | Slides |
|
||||||
|
|------|-----------|------|--------|
|
||||||
|
| 1 | Welkom & Introductie + **Account Setup** | 18 min | 1-8 |
|
||||||
|
| 2 | Wat is AI? | 15 min | 9-12 |
|
||||||
|
| 3 | AI Landscape | 10 min | 13-16 |
|
||||||
|
| 4 | ChatGPT Praktijk | 22 min | 17-24 |
|
||||||
|
| 5 | Prompt Engineering | 12 min | 25-30 |
|
||||||
|
| 6 | Demo v0.dev + **Deployment (samen!)** | 20 min | 31-34 |
|
||||||
|
| 7 | Hands-on Opdracht | 50 min | 35 |
|
||||||
|
| 8 | Afsluiting | 30 min | 36-38 |
|
||||||
|
|
||||||
|
**V2 Veranderingen:**
|
||||||
|
- Account setup met checkpoints (+5 min in Blok 1)
|
||||||
|
- Deployment demo samen met class (niet "zelf uitzoeken")
|
||||||
|
|
||||||
|
**Spreektijd (Blok 1-5):** ~60 minuten
|
||||||
|
**Demo (Blok 6):** ~20 minuten
|
||||||
|
**Hands-on + Afsluiting:** ~80 minuten
|
||||||
|
**Totaal:** 180 minuten (3 uur)
|
||||||
|
**Totaal slides:** 38
|
||||||
213
v2/Les02-OpenCode/Les02-Bijlage-A-Lesopdracht.md
Normal file
213
v2/Les02-OpenCode/Les02-Bijlage-A-Lesopdracht.md
Normal file
@@ -0,0 +1,213 @@
|
|||||||
|
# Les 2 - Lesopdracht: Website uitbreiden met OpenCode
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Doel
|
||||||
|
|
||||||
|
Maak een nieuwe pagina in je v0 project met de OpenCode Desktop App. Je leert:
|
||||||
|
- Werken met de OpenCode Desktop App
|
||||||
|
- Plan mode en Build mode gebruiken
|
||||||
|
- Wijzigingen deployen via git push
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tijd
|
||||||
|
|
||||||
|
**85 minuten** (09:50-10:15 + 10:30-11:30)
|
||||||
|
|
||||||
|
☕ Pauze: 10:15-10:30
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Stap 1: Project Lokaal Draaien (15 min)
|
||||||
|
|
||||||
|
### Clone je repository
|
||||||
|
|
||||||
|
**Optie A - Terminal:**
|
||||||
|
```bash
|
||||||
|
git clone https://github.com/jouw-username/jouw-project.git
|
||||||
|
cd jouw-project
|
||||||
|
```
|
||||||
|
|
||||||
|
**Optie B - GitHub Desktop:**
|
||||||
|
1. File → Clone Repository
|
||||||
|
2. Selecteer je v0 project
|
||||||
|
3. Clone
|
||||||
|
|
||||||
|
### Installeer dependencies
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Start development server
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Open http://localhost:3000 - je ziet je website!
|
||||||
|
|
||||||
|
**Checkpoint:** ✅ Website draait lokaal
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Stap 2: OpenCode Desktop App (10 min)
|
||||||
|
|
||||||
|
### Open de Desktop App
|
||||||
|
1. Start OpenCode Desktop App
|
||||||
|
2. Open je projectfolder (File → Open Folder)
|
||||||
|
3. Selecteer je v0 project
|
||||||
|
|
||||||
|
### Selecteer gratis AI model
|
||||||
|
1. Druk `Ctrl+X M` (eerst Ctrl+X, dan M)
|
||||||
|
2. Kies "OpenCode Zen"
|
||||||
|
3. Selecteer "Kimi K2.5 Free"
|
||||||
|
|
||||||
|
### Start je project (in de ingebouwde terminal)
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
**Checkpoint:** ✅ Desktop App draait + localhost:3000 werkt
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Stap 3: Uitbreiden met OpenCode (45 min)
|
||||||
|
|
||||||
|
### Fase 1: Analyseer (Plan Mode)
|
||||||
|
|
||||||
|
Check dat je in Plan mode zit (📋 icoon).
|
||||||
|
|
||||||
|
```
|
||||||
|
Analyseer dit project. Hoe werkt de routing?
|
||||||
|
Hoe maak ik een nieuwe pagina in Next.js?
|
||||||
|
```
|
||||||
|
|
||||||
|
### Fase 2: Maak een nieuwe pagina (Build Mode)
|
||||||
|
|
||||||
|
Druk `Tab` om naar Build mode (🔨) te gaan.
|
||||||
|
|
||||||
|
**💡 BELANGRIJK: Eén prompt per taak!**
|
||||||
|
|
||||||
|
Splits je werk op in kleine stappen. Niet alles in één prompt!
|
||||||
|
|
||||||
|
**Opdracht: Maak een nieuwe pagina met componenten**
|
||||||
|
|
||||||
|
#### Stap 1: Kies je pagina
|
||||||
|
Kies één van deze opties:
|
||||||
|
- **About** - Over ons pagina
|
||||||
|
- **Services** - Diensten pagina
|
||||||
|
- **Contact** - Contact pagina
|
||||||
|
|
||||||
|
#### Stap 2: Maak de pagina structuur
|
||||||
|
**Prompt 1:**
|
||||||
|
```
|
||||||
|
Maak een nieuwe pagina /about (of /services of /contact) met een basis layout.
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Stap 3: Voeg componenten toe
|
||||||
|
**Prompt 2:**
|
||||||
|
```
|
||||||
|
Voeg een hero sectie toe aan de /about pagina met titel en beschrijving.
|
||||||
|
Gebruik Tailwind CSS voor styling.
|
||||||
|
```
|
||||||
|
|
||||||
|
**Prompt 3:**
|
||||||
|
```
|
||||||
|
Voeg een content sectie toe onder de hero (bijv. team cards, diensten lijst, of contact info).
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Stap 4: Voeg navigatie toe
|
||||||
|
**Prompt 4:**
|
||||||
|
```
|
||||||
|
@app/page.tsx
|
||||||
|
Voeg een link toe naar de /about pagina.
|
||||||
|
De link moet zichtbaar zijn in de hero of header.
|
||||||
|
Gebruik Next.js Link component.
|
||||||
|
```
|
||||||
|
|
||||||
|
**Checkpoint:** ✅ Nieuwe pagina gemaakt + link op homepage
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Stap 4: Deploy naar Vercel (10 min)
|
||||||
|
|
||||||
|
### Commit je wijzigingen
|
||||||
|
|
||||||
|
**Terminal:**
|
||||||
|
```bash
|
||||||
|
git add .
|
||||||
|
git commit -m "Add testimonials section"
|
||||||
|
git push
|
||||||
|
```
|
||||||
|
|
||||||
|
**Of GitHub Desktop:**
|
||||||
|
1. Zie changed files links
|
||||||
|
2. Schrijf commit message
|
||||||
|
3. Commit to main
|
||||||
|
4. Push origin
|
||||||
|
|
||||||
|
### Check Vercel
|
||||||
|
1. Open je Vercel dashboard
|
||||||
|
2. Zie "Building..." status
|
||||||
|
3. Na ~1 min: bekijk je live site!
|
||||||
|
|
||||||
|
**Checkpoint:** ✅ Wijzigingen live op Vercel
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Stap 5: Herhaal! (10 min)
|
||||||
|
|
||||||
|
Doe minimaal nog één wijziging en push opnieuw.
|
||||||
|
|
||||||
|
Het doel is dat je de volledige workflow meerdere keren doorloopt:
|
||||||
|
1. Wijzig met OpenCode
|
||||||
|
2. Test lokaal
|
||||||
|
3. Commit & push
|
||||||
|
4. Bekijk live
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tips
|
||||||
|
|
||||||
|
### @ Mentions gebruiken
|
||||||
|
```
|
||||||
|
@src/components/Hero.tsx
|
||||||
|
Maak de heading groter en gebruik een gradient
|
||||||
|
```
|
||||||
|
|
||||||
|
### Plan mode voor vragen
|
||||||
|
```
|
||||||
|
📋 Hoe kan ik animaties toevoegen aan mijn cards?
|
||||||
|
```
|
||||||
|
|
||||||
|
### Build mode voor actie
|
||||||
|
```
|
||||||
|
🔨 Voeg fade-in animatie toe aan de feature cards
|
||||||
|
```
|
||||||
|
|
||||||
|
### Stuck?
|
||||||
|
1. Wees specifieker in je prompt
|
||||||
|
2. Verwijs naar het exacte bestand met @
|
||||||
|
3. Bekijk de error in terminal
|
||||||
|
4. Vraag een klasgenoot of de docent
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Inleveren
|
||||||
|
|
||||||
|
Aan het einde van de les:
|
||||||
|
- [ ] Website draait lokaal
|
||||||
|
- [ ] Nieuwe pagina aangemaakt (bijv. /about)
|
||||||
|
- [ ] Link op homepage naar nieuwe pagina
|
||||||
|
- [ ] Minimaal 2x gepusht naar Vercel
|
||||||
|
- [ ] Wijzigingen zijn live
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Bonus (als je klaar bent)
|
||||||
|
|
||||||
|
- [ ] Voeg een tweede pagina toe
|
||||||
|
- [ ] Maak een navbar component met links naar alle pagina's
|
||||||
|
- [ ] Voeg dark mode toggle toe
|
||||||
|
- [ ] Implementeer smooth scroll animaties
|
||||||
163
v2/Les02-OpenCode/Les02-Bijlage-B-Huiswerkopdracht.md
Normal file
163
v2/Les02-OpenCode/Les02-Bijlage-B-Huiswerkopdracht.md
Normal file
@@ -0,0 +1,163 @@
|
|||||||
|
# Les 2 - Huiswerkopdracht
|
||||||
|
|
||||||
|
**Deadline:** Voor les 3
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Opdracht 1: Nieuw Project vanaf Scratch (2 uur)
|
||||||
|
|
||||||
|
In de les heb je een bestaand project uitgebreid. Nu ga je een **nieuw project** maken met OpenCode.
|
||||||
|
|
||||||
|
### Stap 1: Maak een nieuw React project
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx create-next-app@latest mijn-nieuwe-project
|
||||||
|
cd mijn-nieuwe-project
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Kies bij de prompts:
|
||||||
|
- TypeScript: Yes
|
||||||
|
- Tailwind CSS: Yes
|
||||||
|
- App Router: Yes
|
||||||
|
|
||||||
|
### Stap 2: Configureer OpenCode Desktop App
|
||||||
|
|
||||||
|
1. Open de Desktop App
|
||||||
|
2. Open je projectfolder
|
||||||
|
3. Selecteer OpenCode Zen → Kimi K2.5 Free (gratis)
|
||||||
|
|
||||||
|
### Stap 3: Bouw minimaal 3 componenten
|
||||||
|
|
||||||
|
Gebruik Plan mode om te ontwerpen, Build mode om te bouwen.
|
||||||
|
|
||||||
|
**⚠️ BELANGRIJK: Eén prompt per taak!**
|
||||||
|
|
||||||
|
Maak niet één grote prompt voor alles. Verdeel je werk:
|
||||||
|
- Prompt 1: "Maak een Header component met logo en navigatie"
|
||||||
|
- Prompt 2: "Voeg een mobile hamburger menu toe aan de Header"
|
||||||
|
- Prompt 3: "Maak een Hero section met headline en buttons"
|
||||||
|
- etc.
|
||||||
|
|
||||||
|
**Houd je prompts bij!** Je moet ze inleveren (zie Opdracht 2).
|
||||||
|
|
||||||
|
**Verplichte componenten:**
|
||||||
|
|
||||||
|
#### 1. Header/Navbar
|
||||||
|
- Logo
|
||||||
|
- Navigatie links
|
||||||
|
- CTA button
|
||||||
|
- Mobile hamburger menu (werkend!)
|
||||||
|
|
||||||
|
#### 2. Hero Section
|
||||||
|
- Headline
|
||||||
|
- Subtitle
|
||||||
|
- 1-2 buttons
|
||||||
|
- Achtergrond (gradient of afbeelding)
|
||||||
|
|
||||||
|
#### 3. Kies één:
|
||||||
|
|
||||||
|
**Optie A: Feature Cards**
|
||||||
|
- Minimaal 3 cards
|
||||||
|
- Icon, titel, beschrijving per card
|
||||||
|
- Responsive grid
|
||||||
|
|
||||||
|
**Optie B: Testimonials**
|
||||||
|
- Minimaal 2 testimonials
|
||||||
|
- Quote, naam, foto placeholder
|
||||||
|
- Mooie styling
|
||||||
|
|
||||||
|
**Optie C: Pricing Table**
|
||||||
|
- 3 pricing tiers
|
||||||
|
- Features per tier
|
||||||
|
- Highlight recommended
|
||||||
|
|
||||||
|
### Stap 4: Push naar GitHub
|
||||||
|
|
||||||
|
**Anders dan bij v0!** Bij v0 was Vercel automatisch gekoppeld. Nu moet je dit handmatig doen.
|
||||||
|
|
||||||
|
#### 4a. Maak GitHub repository
|
||||||
|
|
||||||
|
1. Ga naar github.com
|
||||||
|
2. Klik "+" → "New repository"
|
||||||
|
3. Naam: bijvoorbeeld `mijn-nieuwe-project`
|
||||||
|
4. **Public** aanvinken
|
||||||
|
5. Klik "Create repository"
|
||||||
|
|
||||||
|
#### 4b. Push je code
|
||||||
|
|
||||||
|
GitHub toont instructies. Voer uit in je projectmap:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git remote add origin https://github.com/JOUW-USERNAME/mijn-nieuwe-project.git
|
||||||
|
git branch -M main
|
||||||
|
git push -u origin main
|
||||||
|
```
|
||||||
|
|
||||||
|
**Of met GitHub Desktop:**
|
||||||
|
1. File → Add Local Repository
|
||||||
|
2. Selecteer je projectmap
|
||||||
|
3. Publish repository
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Stap 5: Koppel aan Vercel
|
||||||
|
|
||||||
|
1. Ga naar vercel.com (log in met GitHub)
|
||||||
|
2. Klik "Add New..." → "Project"
|
||||||
|
3. "Import Git Repository"
|
||||||
|
4. Selecteer je nieuwe repo
|
||||||
|
5. Framework: Next.js (automatisch gedetecteerd)
|
||||||
|
6. Klik "Deploy"
|
||||||
|
|
||||||
|
**Na ~1 minuut:** Je website is live!
|
||||||
|
|
||||||
|
**Tip:** Elke volgende `git push` wordt automatisch gedeployed.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Opdracht 2: Houd je Prompts Bij!
|
||||||
|
|
||||||
|
**Belangrijk:** Houd tijdens het bouwen een lijst bij van alle prompts die je gebruikt.
|
||||||
|
|
||||||
|
**Voorbeeld format:**
|
||||||
|
```
|
||||||
|
1. [Plan] "Analyseer dit project en beschrijf de folder structuur"
|
||||||
|
2. [Build] "Maak een Header component met logo links en navigatie rechts"
|
||||||
|
3. [Build] "Voeg een hamburger menu toe voor mobile"
|
||||||
|
4. [Build] "Maak een Hero section met grote headline en gradient achtergrond"
|
||||||
|
5. [Build] "Voeg twee buttons toe aan de Hero: primair en secundair"
|
||||||
|
6. [Build] "Maak een Features sectie met 3 cards in een grid"
|
||||||
|
...
|
||||||
|
```
|
||||||
|
|
||||||
|
**Waarom?**
|
||||||
|
- In Les 3 gaan we iedereen langs
|
||||||
|
- We bespreken hoeveel prompts je hebt gebruikt
|
||||||
|
- En of je het werk goed hebt opgesplitst (één prompt per taak)
|
||||||
|
|
||||||
|
**Dit hoef je niet in te leveren**, maar zorg dat je het kunt laten zien in de les!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Inleveren via Teams (voor Les 3)
|
||||||
|
|
||||||
|
Post in Teams:
|
||||||
|
1. **Link naar Vercel** (je live website)
|
||||||
|
2. **Link naar GitHub** (je repository)
|
||||||
|
|
||||||
|
Dat is alles! In Les 3 gaan we kort iedereen langs:
|
||||||
|
- Bekijken wat je hebt gemaakt
|
||||||
|
- Bespreken hoeveel prompts je hebt gebruikt
|
||||||
|
- Delen wat goed werkte en wat niet
|
||||||
|
|
||||||
|
**💡 Tip:** Houd je prompt geschiedenis bij (zie Deel A hierboven) - we bespreken dit in de les!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Hulp nodig?
|
||||||
|
|
||||||
|
- Check de OpenCode documentatie: opencode.ai/docs
|
||||||
|
- Bekijk de les slides nogmaals
|
||||||
|
- Stel vragen in Teams
|
||||||
|
- Stel vragen in Teams
|
||||||
235
v2/Les02-OpenCode/Les02-Docenttekst-Notes.md
Normal file
235
v2/Les02-OpenCode/Les02-Docenttekst-Notes.md
Normal file
@@ -0,0 +1,235 @@
|
|||||||
|
# Les 2 - Keynote Notes
|
||||||
|
|
||||||
|
**Spreektijd:** ~50 min | **Hands-on:** ~85 min | **Pauze:** 15 min (10:15-10:30)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 1: WELKOM & TERUGBLIK (10 min)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 1: Welkom
|
||||||
|
- "Welkom terug bij les 2!"
|
||||||
|
- "Vandaag: jullie projecten uitbreiden"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 2: Planning
|
||||||
|
- 09:00-09:20: Intro OpenCode
|
||||||
|
- 09:20-09:50: Setup + Demo's
|
||||||
|
- 09:50-10:15: Hands-on start
|
||||||
|
- 10:15-10:30: PAUZE
|
||||||
|
- 10:30-11:30: Hands-on vervolg
|
||||||
|
- 11:30-12:00: Resultaten + Afsluiting
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 3: Terugblik Les 1
|
||||||
|
- **Jullie hebben:** website op Vercel, code in GitHub
|
||||||
|
- **Maar:** veel copy/paste, geen lokale dev
|
||||||
|
- "Vandaag gaan we dat oplossen"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 4: Vandaag
|
||||||
|
- Bestaande repos lokaal draaien
|
||||||
|
- Uitbreiden met AI
|
||||||
|
- Deployen via git push
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 2: INTRO OPENCODE (10 min)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 5: Wat is OpenCode?
|
||||||
|
- Open source, 60.000+ stars
|
||||||
|
- Terminal én **Desktop App** (met ingebouwde terminal!)
|
||||||
|
- Kies je AI: OpenCode Zen, Groq, Ollama, **OpenAI**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 6: Installatie
|
||||||
|
- **Terminal:** `npm i -g opencode-ai@latest`
|
||||||
|
- **Desktop App:** opencode.ai/download
|
||||||
|
- **Gratis AI Model:** `Ctrl+X M` → OpenCode Zen → **Kimi K2.5 Free**
|
||||||
|
- "Wij gebruiken vandaag de Desktop App"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 7: Build vs Plan Mode
|
||||||
|
- **Plan (📋):** leest, analyseert, verandert NIETS
|
||||||
|
- **Build (🔨):** schrijft code, maakt bestanden
|
||||||
|
- Wisselen: `Tab`
|
||||||
|
- **💡 Eén prompt per taak!**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 8: Shortcuts
|
||||||
|
- `Ctrl+P` = command menu
|
||||||
|
- `Tab` = wissel mode
|
||||||
|
- `@` = zoek bestanden (context!)
|
||||||
|
- `@explore` = codebase verkennen (read-only)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 9: @explore - Codebase Verkennen
|
||||||
|
- **Read-only** subagent
|
||||||
|
- Zoekt bestanden, vindt keywords
|
||||||
|
- Maakt **geen wijzigingen**
|
||||||
|
- Voorbeeld: `@explore how does routing work?`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 10: Deployment Workflow
|
||||||
|
- Wijzig code → git add → commit → push
|
||||||
|
- Vercel pakt automatisch op
|
||||||
|
- Jullie repos zijn al gekoppeld!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 11: Optioneel - OpenAI API Key
|
||||||
|
- **Wil je GPT-4?** platform.openai.com → API Keys
|
||||||
|
- In OpenCode: `Ctrl+X M` → OpenAI → Plak key
|
||||||
|
- **Let op:** betaald (~$0.01/prompt)
|
||||||
|
- **Tip:** Start met Kimi K2.5 Free!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 3: SETUP & DEMO (20 min)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 12: Live Demo Overzicht (blijft op scherm)
|
||||||
|
|
||||||
|
**DEMO 1: Terminal (5 min)**
|
||||||
|
- `opencode` → toon Ctrl+P, Tab, @, Ctrl+X M
|
||||||
|
- "Krachtig, maar Desktop App is vriendelijker..."
|
||||||
|
|
||||||
|
**DEMO 2: Desktop App Setup (5 min)**
|
||||||
|
- Open App → Open Folder → v0 project
|
||||||
|
- Ctrl+X M → OpenCode Zen → Kimi K2.5 Free
|
||||||
|
- Terminal: `npm install && npm run dev`
|
||||||
|
|
||||||
|
**DEMO 3: Plan Mode (5 min)**
|
||||||
|
- 📋 "Analyseer dit project. Hoe werkt de routing?"
|
||||||
|
- AI leest alleen, verandert niets
|
||||||
|
|
||||||
|
**DEMO 4: Build Mode (5 min)**
|
||||||
|
- Tab → 🔨
|
||||||
|
- "Maak nieuwe pagina /about met hero"
|
||||||
|
- Review → Accept → Refresh browser
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 4: GIT & VERCEL (10 min)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 13: Demo - Git Push & Vercel
|
||||||
|
- **DEMO:**
|
||||||
|
```bash
|
||||||
|
git add .
|
||||||
|
git commit -m "Add about page"
|
||||||
|
git push
|
||||||
|
```
|
||||||
|
- Of: GitHub Desktop
|
||||||
|
- → Open Vercel dashboard → "Building..." → Live!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 14: Preview Deployments
|
||||||
|
- **Elke branch = eigen preview URL**
|
||||||
|
- main → productie | feature/x → preview URL
|
||||||
|
- Test zonder productie te breken
|
||||||
|
- Deel preview link met team/klant
|
||||||
|
- **DEMO:** nieuwe branch pushen → toon preview in Vercel
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 15: Nieuw project naar Vercel
|
||||||
|
- **Voor huiswerk!** v0 was automatisch gekoppeld
|
||||||
|
- Vercel → Add New Project → Import Git Repository
|
||||||
|
- Selecteer repo → Deploy
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 5: HANDS-ON (85 min + 15 min pauze)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 16: Opdracht (blijft op scherm)
|
||||||
|
|
||||||
|
```
|
||||||
|
STAP 1: PROJECT KLAARZETTEN
|
||||||
|
git clone → cd → npm install → npm run dev
|
||||||
|
|
||||||
|
STAP 2: OPENCODE DESKTOP APP
|
||||||
|
Open App → Open Folder → Ctrl+X M → Zen → Kimi K2.5 Free
|
||||||
|
|
||||||
|
STAP 3: BOUW MET OPENCODE
|
||||||
|
□ Nieuwe pagina (/about, /services, /contact)
|
||||||
|
□ Voeg 2 componenten toe
|
||||||
|
□ Voeg link op homepage
|
||||||
|
💡 Eén prompt per taak!
|
||||||
|
|
||||||
|
STAP 4: DEPLOY
|
||||||
|
git add . → git commit → git push
|
||||||
|
```
|
||||||
|
|
||||||
|
**Doel:** minimaal 2x deployen | ☕ Pauze: 10:15-10:30
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Hands-on deel 1 (09:55-10:15)
|
||||||
|
- Help bij opstartproblemen
|
||||||
|
- Draait npm run dev?
|
||||||
|
- Kimi K2.5 Free geselecteerd?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### ☕ PAUZE (10:15-10:30)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Hands-on deel 2 (10:30-11:30)
|
||||||
|
**Checks:**
|
||||||
|
- 10:45 - "Wie draait lokaal?"
|
||||||
|
- 11:15 - "Wie heeft 2x gepusht?"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 6: AFSLUITING (30 min)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 17: Resultaten
|
||||||
|
- 2-3 studenten tonen werk
|
||||||
|
- "Wat toegevoegd? Hoeveel keer gepusht?"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 18: Samenvatting
|
||||||
|
- ✅ OpenCode Terminal + Desktop App
|
||||||
|
- ✅ Gratis: Kimi K2.5 Free
|
||||||
|
- ✅ Optioneel: OpenAI met API key
|
||||||
|
- ✅ Plan vs Build mode
|
||||||
|
- ✅ @explore voor codebase verkennen
|
||||||
|
- ✅ Git push → auto deploy
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 19: Huiswerk
|
||||||
|
- **Nieuw project vanaf scratch**
|
||||||
|
- create-next-app → 3 componenten
|
||||||
|
- Push naar GitHub
|
||||||
|
- **Vercel: Import Project** (zie slide 15!)
|
||||||
|
- **Inleveren:** Vercel + GitHub link in Teams
|
||||||
|
- **Les 3:** Iedereen langs, prompts bespreken
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 20: Volgende les
|
||||||
|
- OpenCode IDE Integratie
|
||||||
|
- VSCode plugin
|
||||||
|
- "Tot dan!"
|
||||||
406
v2/Les02-OpenCode/Les02-Docenttekst.md
Normal file
406
v2/Les02-OpenCode/Les02-Docenttekst.md
Normal file
@@ -0,0 +1,406 @@
|
|||||||
|
# Docenttekst Les 2: OpenCode - AI Code Assistants
|
||||||
|
|
||||||
|
> **Totale lesduur:** 3 uur (180 minuten)
|
||||||
|
> **Spreektijd docent:** ~50 minuten
|
||||||
|
> **Hands-on:** ~85 minuten
|
||||||
|
> **Pauze:** 15 minuten (10:15-10:30)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 1: WELKOM & TERUGBLIK (10 minuten)
|
||||||
|
|
||||||
|
### Slide 1: Welkomstslide
|
||||||
|
|
||||||
|
**[09:00 - 09:05]**
|
||||||
|
|
||||||
|
"Welkom terug bij les 2! Vorige week hebben jullie allemaal een website gebouwd en online gezet. Vandaag gaan we een stap verder."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 2: Planning
|
||||||
|
|
||||||
|
**[bij slide 1]**
|
||||||
|
|
||||||
|
"De planning: tot 10 voor 10 doe ik uitleg en demo's. Dan gaan jullie aan de slag met jullie eigen projecten. Kwart over 10 hebben we een korte pauze, daarna werken jullie door tot half 12."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 3: Terugblik Les 1
|
||||||
|
|
||||||
|
**[09:05 - 09:08]**
|
||||||
|
|
||||||
|
"Jullie hebben nu: een werkende website op Vercel, code in GitHub, en ervaring met v0.dev."
|
||||||
|
|
||||||
|
_[Wijs naar de problemen]_
|
||||||
|
|
||||||
|
"Maar... veel copy/paste. Geen lokale development. Beperkte controle over je code. Vandaag gaan we dat oplossen."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 4: Vandaag - De volgende stap
|
||||||
|
|
||||||
|
**[09:08 - 09:10]**
|
||||||
|
|
||||||
|
"Vandaag werken we met jullie bestaande repos. We gaan ze lokaal draaien, uitbreiden met AI, en weer deployen naar Vercel. De volledige development workflow."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 2: INTRODUCTIE OPENCODE (10 minuten)
|
||||||
|
|
||||||
|
### Slide 5: Wat is OpenCode?
|
||||||
|
|
||||||
|
**[09:10 - 09:12]**
|
||||||
|
|
||||||
|
"OpenCode - open source met meer dan 60.000 GitHub stars. Het is een AI coding assistant die direct in je project werkt."
|
||||||
|
|
||||||
|
"Er is een terminal versie én een Desktop App. Die Desktop App is super handig - vriendelijke interface en een ingebouwde terminal. Die gaan we vandaag gebruiken."
|
||||||
|
|
||||||
|
"Het mooie: je kiest je eigen AI. Er zijn gratis modellen beschikbaar, dus je hebt geen API key nodig."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 6: Installatie
|
||||||
|
|
||||||
|
**[09:12 - 09:14]**
|
||||||
|
|
||||||
|
"Hoe installeer je het? Voor terminal: npm i -g opencode-ai@latest."
|
||||||
|
|
||||||
|
"Maar wij gebruiken de Desktop App. Download van opencode.ai/download. Installeer het, en je bent klaar."
|
||||||
|
|
||||||
|
"Het AI model stel je in met Ctrl+X M. Kies OpenCode Zen, dan Kimi K2.5 Free. Gratis!"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 7: Build vs Plan Mode
|
||||||
|
|
||||||
|
**[09:14 - 09:15]**
|
||||||
|
|
||||||
|
"Belangrijk concept: twee modes."
|
||||||
|
|
||||||
|
"**Plan mode** - het klembord icoon. AI kan alleen lezen en analyseren. Perfect om je project te begrijpen."
|
||||||
|
|
||||||
|
"**Build mode** - de hamer. AI kan code schrijven en bestanden aanmaken."
|
||||||
|
|
||||||
|
"Wisselen doe je met Tab."
|
||||||
|
|
||||||
|
_[Belangrijk punt - benadrukken!]_
|
||||||
|
|
||||||
|
"En dit is cruciaal: **één prompt per taak**. Vraag niet 'maak een complete website met alles erop en eraan'. Splits het op: eerst de header, dan de hero, dan de volgende sectie. Zo houd je controle en kun je elk onderdeel goed reviewen."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 8: Shortcuts
|
||||||
|
|
||||||
|
**[09:15 - 09:16]**
|
||||||
|
|
||||||
|
"Vier shortcuts om te onthouden:"
|
||||||
|
|
||||||
|
"Ctrl+P voor het command menu. Tab om te wisselen tussen modes. @ om bestanden te zoeken - super handig voor context. @explore om je codebase te verkennen zonder wijzigingen."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 9: @explore - Codebase Verkennen
|
||||||
|
|
||||||
|
**[09:16 - 09:17]**
|
||||||
|
|
||||||
|
"@explore is een speciale feature. Het is een read-only subagent - hij leest alleen, verandert niets."
|
||||||
|
|
||||||
|
"Super handig voor nieuwe codebases. Typ @explore en dan je vraag. Bijvoorbeeld: '@explore waar is de authentication code?' of '@explore hoe werkt de routing?'"
|
||||||
|
|
||||||
|
"Het verschil met Plan mode: @explore zoekt actief door je hele project. Plan mode analyseert alleen wat je hem geeft."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 10: De Deployment Workflow
|
||||||
|
|
||||||
|
**[09:17 - 09:18]**
|
||||||
|
|
||||||
|
"Dit is de workflow die jullie vandaag gaan gebruiken:"
|
||||||
|
|
||||||
|
"Wijzig code met OpenCode. Git add, commit, push. En dan... Vercel pakt het automatisch op. Jullie project is al gekoppeld aan GitHub, dus elke push wordt automatisch live."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 11: Optioneel - OpenAI API Key
|
||||||
|
|
||||||
|
**[09:18 - 09:20]**
|
||||||
|
|
||||||
|
"Even dit: als je GPT-4 wil gebruiken in plaats van de gratis modellen, kan dat ook."
|
||||||
|
|
||||||
|
"Je maakt een account op platform.openai.com, gaat naar API Keys, maakt een key aan, en plakt die in OpenCode via Ctrl+X M."
|
||||||
|
|
||||||
|
"Let op: OpenAI is betaald, ongeveer een cent per prompt. Voor nu beginnen we met Kimi K2.5 Free - dat is gratis en werkt prima!"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 3: SETUP & DEMO (20 minuten)
|
||||||
|
|
||||||
|
### Slide 12: Live Demo Overzicht
|
||||||
|
|
||||||
|
**[09:20 - 09:40]**
|
||||||
|
|
||||||
|
_[Deze slide blijft op het scherm terwijl je alle demo's geeft]_
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### DEMO 1: Terminal Versie (5 min)
|
||||||
|
|
||||||
|
_[Open terminal - LIVE DEMO]_
|
||||||
|
|
||||||
|
"Laat me eerst de terminal versie laten zien. Installatie: npm i -g opencode-ai@latest, dan opencode."
|
||||||
|
|
||||||
|
_[Start opencode in terminal]_
|
||||||
|
|
||||||
|
"Dit is de TUI - Terminal User Interface. Kijk naar de shortcuts:"
|
||||||
|
|
||||||
|
- "Ctrl+P voor het command menu"
|
||||||
|
- "Tab om te wisselen tussen Plan en Build mode"
|
||||||
|
- "@ om bestanden te zoeken"
|
||||||
|
- "Ctrl+X M om je AI model te kiezen"
|
||||||
|
|
||||||
|
"Krachtig! Maar het kan overweldigend zijn voor beginners. Daarom..."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### DEMO 2: Desktop App Setup (5 min)
|
||||||
|
|
||||||
|
"...is er ook de Desktop App!"
|
||||||
|
|
||||||
|
_[Open Desktop App]_
|
||||||
|
|
||||||
|
"Zelfde features, maar veel vriendelijker. En kijk - een ingebouwde terminal! Dit gaan we vandaag gebruiken."
|
||||||
|
|
||||||
|
_[Laat studenten Desktop App downloaden van opencode.ai/download]_
|
||||||
|
|
||||||
|
"Ik open de Desktop App en selecteer mijn projectfolder - dat is mijn v0 repo."
|
||||||
|
|
||||||
|
_[Open project folder]_
|
||||||
|
|
||||||
|
"Nu het AI model: Ctrl+X M, kies OpenCode Zen, dan Kimi K2.5 Free."
|
||||||
|
|
||||||
|
_[Laat studenten ook configureren - help waar nodig]_
|
||||||
|
|
||||||
|
"In de ingebouwde terminal run ik npm install en npm run dev."
|
||||||
|
|
||||||
|
_[Toon localhost:3000 in browser]_
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### DEMO 3: Plan Mode (5 min)
|
||||||
|
|
||||||
|
_[LIVE DEMO in Desktop App]_
|
||||||
|
|
||||||
|
"Ik zit in Plan mode - zie het klembord icoon."
|
||||||
|
|
||||||
|
"Ik vraag: 'Analyseer dit project. Hoe werkt de routing? Hoe maak ik een nieuwe pagina?'"
|
||||||
|
|
||||||
|
_[Wacht op response]_
|
||||||
|
|
||||||
|
"Kijk - het leest alles, geeft een analyse, maar verandert niets. Perfect om eerst te begrijpen."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### DEMO 4: Build Mode (5 min)
|
||||||
|
|
||||||
|
_[LIVE DEMO in Desktop App]_
|
||||||
|
|
||||||
|
"Tab om naar Build mode te gaan. Nu vraag ik:"
|
||||||
|
|
||||||
|
"Maak een nieuwe pagina /about met een hero sectie en een team sectie. Voeg ook een link toe op de homepage naar /about."
|
||||||
|
|
||||||
|
_[Wacht op generatie]_
|
||||||
|
|
||||||
|
"Het maakt de pagina aan, de componenten, past de homepage aan. Kijk in de browser - refresh - daar is de link! En als ik klik... de nieuwe pagina!"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 4: GIT & VERCEL WORKFLOW (10 minuten)
|
||||||
|
|
||||||
|
### Slide 13: Demo - Git Push & Vercel
|
||||||
|
|
||||||
|
**[09:40 - 09:45]**
|
||||||
|
|
||||||
|
_[LIVE DEMO in Desktop App terminal]_
|
||||||
|
|
||||||
|
"Nu de belangrijke stap: deployen. Ik gebruik gewoon git."
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add .
|
||||||
|
git commit -m "Add about page"
|
||||||
|
git push
|
||||||
|
```
|
||||||
|
|
||||||
|
"Of als je GitHub Desktop prefereert: changed files links, commit message, commit, push."
|
||||||
|
|
||||||
|
_[Open Vercel dashboard]_
|
||||||
|
|
||||||
|
"Zie je? Building. Vercel heeft de push opgepikt. Na ongeveer een minuut... Live! De wijzigingen staan online."
|
||||||
|
|
||||||
|
"Dit is de workflow: code lokaal, push, automatisch live."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 14: Preview Deployments
|
||||||
|
|
||||||
|
**[09:45 - 09:47]**
|
||||||
|
|
||||||
|
"En nu iets super handig: Preview Deployments."
|
||||||
|
|
||||||
|
_[Toon Vercel dashboard]_
|
||||||
|
|
||||||
|
"Elke branch die je pusht krijgt automatisch z'n eigen preview URL. Kijk:"
|
||||||
|
|
||||||
|
"Je main branch gaat naar je productie URL. Maar als je een feature branch pusht - bijvoorbeeld feature/about - krijg je een aparte preview URL."
|
||||||
|
|
||||||
|
_[LIVE DEMO - optioneel]_
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git checkout -b feature/test-page
|
||||||
|
# Maak kleine wijziging
|
||||||
|
git add . && git commit -m "Test preview"
|
||||||
|
git push -u origin feature/test-page
|
||||||
|
```
|
||||||
|
|
||||||
|
"En kijk in Vercel... daar is je preview deployment!"
|
||||||
|
|
||||||
|
"Waarom is dit handig? Je kunt wijzigingen testen zonder je productie site te breken. En je kunt de preview link delen met je team of klant voor feedback."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 15: Nieuw project naar Vercel
|
||||||
|
|
||||||
|
**[09:47 - 09:50]**
|
||||||
|
|
||||||
|
"Dit werkt omdat jullie v0 project al aan Vercel gekoppeld is. Maar voor het huiswerk maken jullie een **nieuw** project. Dan moet je Vercel handmatig koppelen."
|
||||||
|
|
||||||
|
_[Toon Vercel dashboard]_
|
||||||
|
|
||||||
|
"Stappen: Add New Project, Import Git Repository, selecteer je repo, Deploy. Dat is het."
|
||||||
|
|
||||||
|
"Dit hebben jullie nodig voor het huiswerk - een nieuw project vanaf scratch deployen."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 5: HANDS-ON OPDRACHT (85 minuten + 15 min pauze)
|
||||||
|
|
||||||
|
### Slide 16: Aan de slag!
|
||||||
|
|
||||||
|
**[09:50 - 09:55]** _(5 minuten uitleg)_
|
||||||
|
|
||||||
|
"Jullie gaan nu een nieuwe pagina toevoegen aan jullie v0 website."
|
||||||
|
|
||||||
|
"Stap 1: Clone je repo of pull latest. Stap 2: npm install, npm run dev. Stap 3: Maak een nieuwe pagina met OpenCode - about, services, of contact. Voeg componenten toe en een link op de homepage. Stap 4: Push naar GitHub, bekijk live op Vercel."
|
||||||
|
|
||||||
|
"Doel: minimaal 2 keer deployen. Je leert hoe routing werkt in Next.js én hoe je navigatie toevoegt."
|
||||||
|
|
||||||
|
"Kwart over 10 hebben we een korte pauze van 15 minuten. Begin!"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Hands-on Deel 1
|
||||||
|
|
||||||
|
**[09:55 - 10:15]** _(20 minuten werken)_
|
||||||
|
|
||||||
|
_[Loop actief rond, help bij opstartproblemen]_
|
||||||
|
|
||||||
|
**Let op:**
|
||||||
|
- Draait npm run dev?
|
||||||
|
- Lukt git clone/pull?
|
||||||
|
- Kimi K2.5 Free geselecteerd?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### ☕ PAUZE
|
||||||
|
|
||||||
|
**[10:15 - 10:30]** _(15 minuten)_
|
||||||
|
|
||||||
|
"Oké, pauze! Om half 11 gaan we verder."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Hands-on Deel 2
|
||||||
|
|
||||||
|
**[10:30 - 11:30]** _(60 minuten werken)_
|
||||||
|
|
||||||
|
_[Loop actief rond]_
|
||||||
|
|
||||||
|
**Let op:**
|
||||||
|
- Zit student in juiste mode?
|
||||||
|
- Gebruikt @ mentions?
|
||||||
|
- Lukt git push?
|
||||||
|
|
||||||
|
**Check [10:45]:**
|
||||||
|
"Wie heeft de website lokaal draaien? Wie heeft al gepusht naar Vercel?"
|
||||||
|
|
||||||
|
**Check [11:15]:**
|
||||||
|
"Hoeveel mensen hebben al 2x gepusht? Wie zit vast?"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 6: AFSLUITING (30 minuten)
|
||||||
|
|
||||||
|
### Slide 17: Resultaten delen
|
||||||
|
|
||||||
|
**[11:30 - 11:40]**
|
||||||
|
|
||||||
|
"Stop met coderen. Wie wil laten zien wat ze hebben gebouwd?"
|
||||||
|
|
||||||
|
_[2-3 studenten tonen hun werk]_
|
||||||
|
|
||||||
|
"Wat heb je toegevoegd? Hoeveel keer gepusht? Wat ging goed, wat was lastig?"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 18: Samenvatting
|
||||||
|
|
||||||
|
**[11:40 - 11:50]**
|
||||||
|
|
||||||
|
"Wat hebben we gedaan vandaag?"
|
||||||
|
|
||||||
|
- OpenCode: terminal versie én Desktop App
|
||||||
|
- Gratis model: Kimi K2.5 Free
|
||||||
|
- Optioneel: OpenAI met API key
|
||||||
|
- Plan vs Build mode
|
||||||
|
- @explore voor codebase verkennen
|
||||||
|
- De volledige workflow: lokaal ontwikkelen, pushen, automatisch live
|
||||||
|
|
||||||
|
_[Ruimte voor vragen]_
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 19: Huiswerk
|
||||||
|
|
||||||
|
**[11:50 - 11:55]**
|
||||||
|
|
||||||
|
"Thuis: een nieuw project vanaf scratch. Niet je v0 project uitbreiden, maar helemaal nieuw beginnen."
|
||||||
|
|
||||||
|
"Stappen: create-next-app, bouw 3 componenten, push naar GitHub, en dan - belangrijk - Vercel Import Project. Zoals ik eerder liet zien."
|
||||||
|
|
||||||
|
"Inleveren via Teams: gewoon je Vercel link en GitHub link. Volgende les gaan we iedereen even langs en bespreken we je prompts. Hoeveel prompts heb je gebruikt? Hoe heb je je werk opgesplitst? Dus houd je prompts bij!"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 20: Afsluiting
|
||||||
|
|
||||||
|
**[11:55 - 12:00]**
|
||||||
|
|
||||||
|
"Volgende week: OpenCode in je IDE. Dan gaan we de VSCode plugin gebruiken voor nog sneller werken."
|
||||||
|
|
||||||
|
"Vragen? Anders tot volgende week!"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Timing Overzicht
|
||||||
|
|
||||||
|
| Blok | Tijd | Duur |
|
||||||
|
|------|------|------|
|
||||||
|
| 1. Welkom & Terugblik | 09:00-09:10 | 10 min |
|
||||||
|
| 2. Intro OpenCode | 09:10-09:20 | 10 min |
|
||||||
|
| 3. Setup & Demo | 09:20-09:40 | 20 min |
|
||||||
|
| 4. Git & Vercel | 09:40-09:50 | 10 min |
|
||||||
|
| 5. Hands-on (deel 1) | 09:50-10:15 | 25 min |
|
||||||
|
| ☕ PAUZE | 10:15-10:30 | 15 min |
|
||||||
|
| 5. Hands-on (deel 2) | 10:30-11:30 | 60 min |
|
||||||
|
| 6. Afsluiting | 11:30-12:00 | 30 min |
|
||||||
|
|
||||||
|
**Spreektijd:** ~50 min | **Hands-on:** ~85 min | **Pauze:** 15 min
|
||||||
179
v2/Les02-OpenCode/Les02-Lesplan.md
Normal file
179
v2/Les02-OpenCode/Les02-Lesplan.md
Normal file
@@ -0,0 +1,179 @@
|
|||||||
|
# Lesplan Les 2: OpenCode - AI Code Assistants
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Lesgegevens
|
||||||
|
|
||||||
|
| Item | Details |
|
||||||
|
|------|---------|
|
||||||
|
| **Les** | 2 van 18 |
|
||||||
|
| **Onderwerp** | OpenCode - AI Code Assistants |
|
||||||
|
| **Deel** | 1: AI Foundations (Les 1-4) |
|
||||||
|
| **Duur** | 3 uur (180 minuten) |
|
||||||
|
| **Spreektijd** | ~50 minuten |
|
||||||
|
| **Hands-on** | ~85 minuten |
|
||||||
|
| **Pauze** | 15 minuten (10:15-10:30) |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Leerdoelen
|
||||||
|
|
||||||
|
Na deze les kan de student:
|
||||||
|
|
||||||
|
1. Uitleggen wat OpenCode is en het verschil tussen Terminal en Desktop App
|
||||||
|
2. De OpenCode Desktop App installeren en configureren met een gratis model (Kimi K2.5 Free)
|
||||||
|
3. Werken met Plan mode en Build mode
|
||||||
|
4. @explore gebruiken om een codebase te verkennen (read-only)
|
||||||
|
5. Een bestaand GitHub project openen en lokaal draaien (in de ingebouwde terminal)
|
||||||
|
6. Wijzigingen maken met OpenCode en deployen via git push
|
||||||
|
7. De @ file mention gebruiken voor context
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Voorbereiding docent
|
||||||
|
|
||||||
|
### Technische setup
|
||||||
|
- [ ] OpenCode Terminal geïnstalleerd (`npm i -g opencode-ai@latest`)
|
||||||
|
- [ ] OpenCode Desktop App geïnstalleerd (opencode.ai/download)
|
||||||
|
- [ ] Demo project: een v0 repo gekloond en werkend
|
||||||
|
- [ ] Git geconfigureerd
|
||||||
|
|
||||||
|
### Student voorkennis (uit Les 1)
|
||||||
|
- Hebben een werkende v0 website op Vercel
|
||||||
|
- Hebben de code in een GitHub repository
|
||||||
|
- Weten hoe GitHub Desktop werkt
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Lesverloop
|
||||||
|
|
||||||
|
### Blok 1: Welkom & Terugblik (10 minuten)
|
||||||
|
|
||||||
|
| Tijd | Activiteit | Slides |
|
||||||
|
|------|------------|--------|
|
||||||
|
| 09:00-09:05 | Welkom, planning | 1-2 |
|
||||||
|
| 09:05-09:08 | Terugblik Les 1: v0 workflow + problemen | 3 |
|
||||||
|
| 09:08-09:10 | Vandaag: OpenCode + verder bouwen | 4 |
|
||||||
|
|
||||||
|
**Kernboodschap:** "Jullie hebben werkende websites. Vandaag gaan we die uitbreiden met AI direct in je editor."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Blok 2: Introductie OpenCode (10 minuten)
|
||||||
|
|
||||||
|
| Tijd | Activiteit | Slides |
|
||||||
|
|------|------------|--------|
|
||||||
|
| 09:10-09:12 | Wat is OpenCode? | 5 |
|
||||||
|
| 09:12-09:14 | Installatie (Terminal + Desktop App) | 6 |
|
||||||
|
| 09:14-09:15 | Build vs Plan mode | 7 |
|
||||||
|
| 09:15-09:17 | Shortcuts + @explore | 8-9 |
|
||||||
|
| 09:17-09:19 | Vercel deployment workflow | 10 |
|
||||||
|
| 09:19-09:20 | Optioneel: OpenAI API key | 11 |
|
||||||
|
|
||||||
|
**Belangrijk:** We gebruiken Kimi K2.5 Free - gratis, geen API key nodig!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Blok 3: Setup & Demo (20 minuten)
|
||||||
|
|
||||||
|
| Tijd | Activiteit | Slides |
|
||||||
|
|------|------------|--------|
|
||||||
|
| 09:20-09:40 | **DEMO's:** Terminal, Desktop App, Plan mode, Build mode | 12 |
|
||||||
|
|
||||||
|
**Slide 12 blijft op scherm tijdens alle demo's:**
|
||||||
|
- DEMO 1: Terminal versie (5 min) - shortcuts tonen
|
||||||
|
- DEMO 2: Desktop App setup (5 min) - project laden + Kimi K2.5 Free
|
||||||
|
- DEMO 3: Plan mode (5 min) - project analyseren
|
||||||
|
- DEMO 4: Build mode (5 min) - nieuwe pagina maken
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Blok 4: Git & Vercel Workflow (10 minuten)
|
||||||
|
|
||||||
|
| Tijd | Activiteit | Slides |
|
||||||
|
|------|------------|--------|
|
||||||
|
| 09:40-09:45 | **DEMO:** Git push + Vercel auto-deploy | 13 |
|
||||||
|
| 09:45-09:47 | **DEMO:** Preview Deployments (branches) | 14 |
|
||||||
|
| 09:47-09:50 | Nieuw project naar Vercel (voor huiswerk) | 15 |
|
||||||
|
|
||||||
|
**Kernboodschap:** "Push naar GitHub = automatisch live op Vercel. Branches krijgen preview URLs!"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Blok 5: Hands-on Opdracht (85 minuten + 15 min pauze)
|
||||||
|
|
||||||
|
| Tijd | Activiteit | Slides |
|
||||||
|
|------|------------|--------|
|
||||||
|
| 09:50-09:55 | Opdracht uitleggen | 16 |
|
||||||
|
| 09:55-10:15 | Studenten werken (20 min) | - |
|
||||||
|
| 10:15-10:30 | ☕ **PAUZE** | - |
|
||||||
|
| 10:30-11:30 | Studenten werken (60 min) | - |
|
||||||
|
|
||||||
|
**Opdracht:** Maak een nieuwe pagina in je v0 project
|
||||||
|
|
||||||
|
1. Clone je v0 repo (of gebruik GitHub Desktop)
|
||||||
|
2. Run lokaal met `npm install` + `npm run dev`
|
||||||
|
3. Met OpenCode:
|
||||||
|
- Maak nieuwe pagina (/about, /services, of /contact)
|
||||||
|
- Voeg minimaal 2 componenten toe aan de pagina
|
||||||
|
- Voeg link op homepage toe naar de nieuwe pagina
|
||||||
|
4. Push naar GitHub → bekijk live op Vercel
|
||||||
|
|
||||||
|
**Tijdens het werken:**
|
||||||
|
- Loop actief rond
|
||||||
|
- Help bij git/npm problemen
|
||||||
|
- Check: werkt lokale server?
|
||||||
|
- Aanmoedigen: meerdere keren pushen en deployen
|
||||||
|
|
||||||
|
**Tussentijdse check (10:45):**
|
||||||
|
- "Wie heeft lokaal draaien?"
|
||||||
|
- "Wie heeft een nieuwe pagina aangemaakt?"
|
||||||
|
|
||||||
|
**Check (11:15):**
|
||||||
|
- "Wie heeft de link op de homepage?"
|
||||||
|
- "Wie heeft 2x gepusht?"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Blok 6: Afsluiting (30 minuten)
|
||||||
|
|
||||||
|
| Tijd | Activiteit | Slides |
|
||||||
|
|------|------------|--------|
|
||||||
|
| 11:30-11:40 | Resultaten delen (2-3 studenten) | 17 |
|
||||||
|
| 11:40-11:50 | Samenvatting + Q&A | 18 |
|
||||||
|
| 11:50-11:55 | Huiswerk uitleggen | 19 |
|
||||||
|
| 11:55-12:00 | Afsluiting | 20 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Materialen
|
||||||
|
|
||||||
|
- **Slide-Overzicht:** Les02-Slide-Overzicht.md
|
||||||
|
- **Lesopdracht:** Les02-Bijlage-A-Lesopdracht.md
|
||||||
|
- **Huiswerkopdracht:** Les02-Bijlage-B-Huiswerkopdracht.md
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Veelvoorkomende problemen
|
||||||
|
|
||||||
|
| Probleem | Oplossing |
|
||||||
|
|----------|-----------|
|
||||||
|
| OpenCode installeert niet | Check Node.js ≥18 |
|
||||||
|
| `npm install` faalt | Delete `node_modules`, probeer opnieuw |
|
||||||
|
| `npm run dev` werkt niet | Check of je in de juiste map staat |
|
||||||
|
| Git push rejected | `git pull` eerst, dan push |
|
||||||
|
| Vercel deployt niet | Check GitHub repo permissions |
|
||||||
|
| Kimi K2.5 traag | Normaal, gratis model is iets langzamer |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Alternatieve AI providers
|
||||||
|
|
||||||
|
| Provider | Kosten | Setup |
|
||||||
|
|----------|--------|-------|
|
||||||
|
| **Kimi K2.5 Free** | Gratis | Geen key nodig (via OpenCode Zen) |
|
||||||
|
| **OpenAI (GPT-4)** | Betaald (~$0.01/prompt) | API key via platform.openai.com |
|
||||||
|
| **Groq** | Gratis tier | API key via console.groq.com |
|
||||||
|
| **Ollama** | Gratis (lokaal) | Installatie + model download |
|
||||||
|
|
||||||
|
**Aanbeveling:** Start met Kimi K2.5 Free. OpenAI voor wie extra kwaliteit wil (kost geld).
|
||||||
418
v2/Les02-OpenCode/Les02-Slide-Overzicht.md
Normal file
418
v2/Les02-OpenCode/Les02-Slide-Overzicht.md
Normal file
@@ -0,0 +1,418 @@
|
|||||||
|
# Les 2: OpenCode - AI Code Assistants (V2)
|
||||||
|
|
||||||
|
> **Deel 1: AI Foundations** (Les 1-4)
|
||||||
|
> **Totale slides:** 21
|
||||||
|
> **Lesduur:** 3 uur (180 minuten)
|
||||||
|
> **Spreektijd:** ~50 min | **Hands-on:** ~85 min | **Pauze:** 15 min
|
||||||
|
|
||||||
|
**V2 Verbeteringen:**
|
||||||
|
- Voorbereiding check toegevoegd (slide 3)
|
||||||
|
- "WACHT - nog niet installeren" waarschuwingen
|
||||||
|
- Duidelijk onderscheid System Terminal vs OpenCode Terminal
|
||||||
|
- Gratis model backup opties toegevoegd
|
||||||
|
- Platform-specifieke instructies (Mac/Windows)
|
||||||
|
|
||||||
|
**⚠️ VEREIST:** Studenten moeten [Les02-Voorbereiding.md](Les02-Voorbereiding.md) doorlopen VOOR deze les!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Slide-structuur per blok
|
||||||
|
|
||||||
|
| Blok | Onderwerp | Slides | Tijd |
|
||||||
|
|------|-----------|--------|------|
|
||||||
|
| 1 | Welkom & Terugblik + **Voorbereiding Check** | 1-5 | 12 min |
|
||||||
|
| 2 | Introductie OpenCode | 6-12 | 10 min |
|
||||||
|
| 3 | Setup & Demo | 13 | 20 min |
|
||||||
|
| 4 | Git & Vercel Workflow | 14-16 | 10 min |
|
||||||
|
| 5 | Hands-on Opdracht | 17 | 85 min |
|
||||||
|
| - | **☕ PAUZE** | - | 15 min |
|
||||||
|
| 6 | Afsluiting | 18-21 | 28 min |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 1: WELKOM & TERUGBLIK (10 minuten)
|
||||||
|
|
||||||
|
### Slide 1: Welkomstslide
|
||||||
|
**Titel:** Les 2: OpenCode - AI Code Assistants
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 2: Planning vandaag
|
||||||
|
|
||||||
|
| Tijd | Onderwerp |
|
||||||
|
|------|-----------|
|
||||||
|
| 09:00-09:12 | Terugblik + **Voorbereiding Check** |
|
||||||
|
| 09:12-09:22 | Intro OpenCode (KIJK ALLEEN, nog niet installeren!) |
|
||||||
|
| 09:22-09:42 | Setup + Demo's (NU installeren) |
|
||||||
|
| 09:42-09:52 | Git & Vercel Workflow |
|
||||||
|
| 09:52-10:15 | Hands-on: Start |
|
||||||
|
| 10:15-10:30 | ☕ **PAUZE** |
|
||||||
|
| 10:30-11:30 | Hands-on: Vervolg |
|
||||||
|
| 11:30-12:00 | Resultaten + Afsluiting |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 3: Voorbereiding Check ⚠️
|
||||||
|
|
||||||
|
**Titel:** Heb je de voorbereiding gedaan?
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────────────────┐
|
||||||
|
│ CHECK JE SETUP - Voer uit in je EIGEN terminal: │
|
||||||
|
│ ───────────────────────────────────────────────── │
|
||||||
|
│ node -v → Moet v20.x.x tonen │
|
||||||
|
│ git --version → Moet 2.x.x tonen │
|
||||||
|
│ ssh -T git@github.com → "Hi [username]!" │
|
||||||
|
│ ───────────────────────────────────────────────── │
|
||||||
|
│ ✅ Alles werkt? Top! │
|
||||||
|
│ ❌ Iets mist? Vraag de docent NU om hulp │
|
||||||
|
└─────────────────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
**⚠️ Niet voorbereid?** Dan kun je helaas niet volledig meedoen.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 4: Terugblik Les 1 - Wat hebben we?
|
||||||
|
|
||||||
|
**Jullie hebben:**
|
||||||
|
- ✅ Een werkende website op Vercel
|
||||||
|
- ✅ Code in een GitHub repository
|
||||||
|
- ✅ Ervaring met v0.dev
|
||||||
|
|
||||||
|
**Maar:**
|
||||||
|
- Veel copy/paste naar v0
|
||||||
|
- Geen lokale development
|
||||||
|
- Beperkte controle
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 5: Vandaag - De volgende stap
|
||||||
|
|
||||||
|
**OpenCode:** AI direct in je development workflow
|
||||||
|
|
||||||
|
- ✅ Werk met je bestaande repository
|
||||||
|
- ✅ Draai lokaal, zie wijzigingen direct
|
||||||
|
- ✅ Push naar GitHub → automatisch live op Vercel
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 2: INTRODUCTIE OPENCODE (10 minuten)
|
||||||
|
|
||||||
|
### Slide 6: Wat is OpenCode?
|
||||||
|
|
||||||
|
**⚠️ KIJK ALLEEN - NOG NIET INSTALLEREN!**
|
||||||
|
|
||||||
|
- 🌟 Open source (60.000+ GitHub stars)
|
||||||
|
- 🔌 Kies je AI: OpenCode Zen, Groq, Ollama, **OpenAI**
|
||||||
|
- 🖥️ Terminal én **Desktop App** (met ingebouwde terminal!)
|
||||||
|
- 🔒 Privacy-first
|
||||||
|
|
||||||
|
**Vandaag:** Desktop App + gratis model (Kimi K2.5 Free)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 7: Installatie (WACHT - straks samen!)
|
||||||
|
|
||||||
|
**⚠️ NOG NIET INSTALLEREN - Dit doen we straks SAMEN in de demo!**
|
||||||
|
|
||||||
|
**Terminal versie:**
|
||||||
|
```bash
|
||||||
|
npm i -g opencode-ai@latest
|
||||||
|
```
|
||||||
|
|
||||||
|
**Desktop App:**
|
||||||
|
- Download: **opencode.ai/download**
|
||||||
|
- Installeer voor jouw OS (Mac/Windows)
|
||||||
|
|
||||||
|
**Gratis AI Model:**
|
||||||
|
- `Ctrl+X M` → OpenCode Zen → **Kimi K2.5 Free**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 8: Build vs Plan Mode
|
||||||
|
|
||||||
|
| Mode | Icoon | Wat het doet |
|
||||||
|
|------|-------|--------------|
|
||||||
|
| **Plan** | 📋 | Analyseert, verandert NIETS |
|
||||||
|
| **Build** | 🔨 | Schrijft code, maakt bestanden |
|
||||||
|
|
||||||
|
**Wisselen:** `Tab`
|
||||||
|
|
||||||
|
**💡 Tip: Eén prompt per taak!**
|
||||||
|
- ❌ "Maak een complete website met header, hero en footer"
|
||||||
|
- ✅ "Maak een Header component" → "Voeg hero toe" → "Maak footer"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 9: Keyboard Shortcuts
|
||||||
|
|
||||||
|
| Shortcut | Actie |
|
||||||
|
|----------|-------|
|
||||||
|
| `Ctrl+P` | Command menu |
|
||||||
|
| `Tab` | Wissel Build/Plan |
|
||||||
|
| `@` | Zoek bestanden |
|
||||||
|
| `@explore` | Codebase verkennen (read-only) |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 10: @explore - Codebase Verkennen
|
||||||
|
|
||||||
|
**Wat is @explore?**
|
||||||
|
- Een **read-only** subagent voor het verkennen van je codebase
|
||||||
|
- Zoekt bestanden, vindt keywords, analyseert structuur
|
||||||
|
- Maakt **geen wijzigingen** aan je code
|
||||||
|
|
||||||
|
**Gebruik:**
|
||||||
|
```
|
||||||
|
@explore find all authentication code
|
||||||
|
@explore how does the routing work?
|
||||||
|
@explore where are the API endpoints?
|
||||||
|
```
|
||||||
|
|
||||||
|
**Wanneer gebruiken?**
|
||||||
|
- Nieuwe codebase leren kennen
|
||||||
|
- Code zoeken voordat je wijzigt
|
||||||
|
- Project structuur begrijpen
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 11: De Deployment Workflow
|
||||||
|
|
||||||
|
```
|
||||||
|
1. Wijzig code met OpenCode
|
||||||
|
2. git add .
|
||||||
|
3. git commit -m "Add about page"
|
||||||
|
4. git push
|
||||||
|
5. ✨ Vercel deployt automatisch!
|
||||||
|
```
|
||||||
|
|
||||||
|
Jullie Vercel project is al gekoppeld aan GitHub.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 12: Optioneel - OpenAI API Key
|
||||||
|
|
||||||
|
**Wil je GPT-4 gebruiken?**
|
||||||
|
|
||||||
|
1. Ga naar **platform.openai.com**
|
||||||
|
2. Maak account aan (of log in)
|
||||||
|
3. API Keys → Create new secret key
|
||||||
|
4. Kopieer de key (begint met `sk-...`)
|
||||||
|
5. In OpenCode: `Ctrl+X M` → OpenAI → Plak key
|
||||||
|
|
||||||
|
**Let op:** OpenAI is betaald (~$0.01 per prompt)
|
||||||
|
|
||||||
|
**Tip:** Start met Kimi K2.5 Free, upgrade later als je wilt!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 3: SETUP & DEMO (20 minuten)
|
||||||
|
|
||||||
|
### Slide 13: Live Demo Overzicht (blijft op scherm)
|
||||||
|
|
||||||
|
**⚠️ BELANGRIJK: Twee soorten terminals!**
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────────────────┐
|
||||||
|
│ 🖥️ SYSTEM TERMINAL (je eigen terminal) │
|
||||||
|
│ ───────────────────────────────────────────────── │
|
||||||
|
│ → Mac: Terminal app │
|
||||||
|
│ → Windows: PowerShell / Git Bash │
|
||||||
|
│ → Voor: git clone, npm install, opencode starten │
|
||||||
|
├─────────────────────────────────────────────────────┤
|
||||||
|
│ 🤖 OPENCODE TERMINAL (binnen OpenCode) │
|
||||||
|
│ ───────────────────────────────────────────────── │
|
||||||
|
│ → Verschijnt als je 'opencode' runt │
|
||||||
|
│ → Heeft AI chat + ingebouwde terminal │
|
||||||
|
│ → Voor: AI prompts, code generatie │
|
||||||
|
│ → Type 'exit' om terug te gaan naar system terminal│
|
||||||
|
└─────────────────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
**DEMO STAPPEN:**
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────────────────┐
|
||||||
|
│ DEMO 1: INSTALLATIE (5 min) - in SYSTEM terminal │
|
||||||
|
│ ───────────────────────────────────────────────── │
|
||||||
|
│ Mac: npm i -g opencode-ai@latest │
|
||||||
|
│ Windows: npm i -g opencode-ai@latest │
|
||||||
|
│ (EACCESS error? → sudo npm i -g opencode-ai@latest)│
|
||||||
|
├─────────────────────────────────────────────────────┤
|
||||||
|
│ DEMO 2: DESKTOP APP SETUP (5 min) │
|
||||||
|
│ ───────────────────────────────────────────────── │
|
||||||
|
│ 1. Open Desktop App │
|
||||||
|
│ 2. File → Open Folder → v0 project │
|
||||||
|
│ 3. Ctrl+X M → OpenCode Zen → Kimi K2.5 Free │
|
||||||
|
│ ───────────────────────────────────────────────── │
|
||||||
|
│ 💡 Tokens op? Probeer: MiniMax M2.1 Free │
|
||||||
|
│ of Big Pickle Free │
|
||||||
|
├─────────────────────────────────────────────────────┤
|
||||||
|
│ DEMO 3: PLAN MODE (5 min) │
|
||||||
|
│ ───────────────────────────────────────────────── │
|
||||||
|
│ 📋 "Analyseer dit project. Hoe werkt de routing?" │
|
||||||
|
│ → AI leest alleen, verandert niets │
|
||||||
|
├─────────────────────────────────────────────────────┤
|
||||||
|
│ DEMO 4: BUILD MODE (5 min) │
|
||||||
|
│ ───────────────────────────────────────────────── │
|
||||||
|
│ Tab → 🔨 │
|
||||||
|
│ "Maak nieuwe pagina /about met hero" │
|
||||||
|
│ → Review code → Accept → Refresh browser │
|
||||||
|
└─────────────────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
**Gratis Model Backup Opties:**
|
||||||
|
| Model | Snelheid | Tokens |
|
||||||
|
|-------|----------|--------|
|
||||||
|
| Kimi K2.5 Free | ⭐⭐⭐ | Beperkt |
|
||||||
|
| MiniMax M2.1 Free | ⭐⭐ | Beperkt |
|
||||||
|
| Big Pickle Free | ⭐⭐ | Beperkt |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 4: GIT & VERCEL WORKFLOW (10 minuten)
|
||||||
|
|
||||||
|
### Slide 14: Demo - Git Push & Vercel
|
||||||
|
|
||||||
|
**Live demo (in Desktop App terminal):**
|
||||||
|
```bash
|
||||||
|
git add .
|
||||||
|
git commit -m "Add about page"
|
||||||
|
git push
|
||||||
|
```
|
||||||
|
|
||||||
|
**→ Open Vercel dashboard:**
|
||||||
|
1. Zie: "Building..."
|
||||||
|
2. Na ~1 minuut: live op je URL!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 15: Preview Deployments
|
||||||
|
|
||||||
|
**Branches = Preview URLs**
|
||||||
|
|
||||||
|
```
|
||||||
|
main branch → productie-site.vercel.app
|
||||||
|
feature/about → productie-site-git-feature-about.vercel.app
|
||||||
|
```
|
||||||
|
|
||||||
|
**Waarom handig?**
|
||||||
|
- ✅ Test wijzigingen zonder productie te breken
|
||||||
|
- ✅ Deel preview link met team/klant
|
||||||
|
- ✅ Automatisch bij elke branch push
|
||||||
|
|
||||||
|
**Demo:**
|
||||||
|
```bash
|
||||||
|
git checkout -b feature/test-page
|
||||||
|
# Maak wijziging...
|
||||||
|
git add . && git commit -m "Test preview"
|
||||||
|
git push -u origin feature/test-page
|
||||||
|
```
|
||||||
|
→ Check Vercel: nieuwe preview deployment!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 16: Nieuw project naar Vercel (voor huiswerk)
|
||||||
|
|
||||||
|
**Stappen voor een nieuw project:**
|
||||||
|
|
||||||
|
1. Maak GitHub repository (github.com → New)
|
||||||
|
2. Push je code naar GitHub
|
||||||
|
3. Vercel: "Add New Project"
|
||||||
|
4. "Import Git Repository"
|
||||||
|
5. Selecteer je repo → Deploy
|
||||||
|
|
||||||
|
**Dit heb je nodig voor het huiswerk!**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 5: HANDS-ON OPDRACHT (85 minuten)
|
||||||
|
|
||||||
|
### Slide 17: Aan de slag! (blijft op scherm)
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────────────────┐
|
||||||
|
│ STAP 1: PROJECT KLAARZETTEN │
|
||||||
|
│ ───────────────────────────────────────────────── │
|
||||||
|
│ git clone https://github.com/[user]/[repo].git │
|
||||||
|
│ cd [repo] │
|
||||||
|
│ npm install │
|
||||||
|
│ npm run dev │
|
||||||
|
│ → Open http://localhost:3000 │
|
||||||
|
├─────────────────────────────────────────────────────┤
|
||||||
|
│ STAP 2: OPENCODE DESKTOP APP │
|
||||||
|
│ ───────────────────────────────────────────────── │
|
||||||
|
│ 1. Open Desktop App │
|
||||||
|
│ 2. File → Open Folder → je project │
|
||||||
|
│ 3. Ctrl+X M → OpenCode Zen → Kimi K2.5 Free │
|
||||||
|
├─────────────────────────────────────────────────────┤
|
||||||
|
│ STAP 3: BOUW MET OPENCODE │
|
||||||
|
│ ───────────────────────────────────────────────── │
|
||||||
|
│ □ Maak nieuwe pagina (/about, /services, /contact) │
|
||||||
|
│ □ Voeg 2 componenten toe │
|
||||||
|
│ □ Voeg link op homepage │
|
||||||
|
│ 💡 Eén prompt per taak! │
|
||||||
|
├─────────────────────────────────────────────────────┤
|
||||||
|
│ STAP 4: DEPLOY │
|
||||||
|
│ ───────────────────────────────────────────────── │
|
||||||
|
│ git add . │
|
||||||
|
│ git commit -m "Add about page" │
|
||||||
|
│ git push │
|
||||||
|
│ → Check Vercel dashboard │
|
||||||
|
└─────────────────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
**Doel:** Minimaal 2x deployen | ☕ **Pauze:** 10:15-10:30
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 6: AFSLUITING (30 minuten)
|
||||||
|
|
||||||
|
### Slide 18: Resultaten delen
|
||||||
|
|
||||||
|
- Wie wil laten zien?
|
||||||
|
- Wat heb je toegevoegd?
|
||||||
|
- Hoeveel keer gepusht?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 19: Samenvatting
|
||||||
|
|
||||||
|
- ✅ OpenCode: open-source AI assistant
|
||||||
|
- ✅ Gratis model: Kimi K2.5 Free
|
||||||
|
- ✅ Optioneel: OpenAI met API key
|
||||||
|
- ✅ Plan vs Build mode
|
||||||
|
- ✅ @explore voor codebase verkennen
|
||||||
|
- ✅ Git push → Vercel auto-deploy
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 20: Huiswerk
|
||||||
|
|
||||||
|
**Opdracht: Nieuw project vanaf scratch**
|
||||||
|
|
||||||
|
1. `npx create-next-app@latest`
|
||||||
|
2. Bouw 3 componenten met OpenCode
|
||||||
|
3. Push naar GitHub
|
||||||
|
4. Vercel: Import Project → Deploy
|
||||||
|
|
||||||
|
**Inleveren via Teams:**
|
||||||
|
- Link naar Vercel
|
||||||
|
- Link naar GitHub
|
||||||
|
|
||||||
|
**In Les 3:** We gaan iedereen langs en bespreken je prompts!
|
||||||
|
|
||||||
|
**Stappen voor Vercel: zie slide 16!**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 21: Volgende les
|
||||||
|
|
||||||
|
**Les 3:** OpenCode IDE Integratie
|
||||||
|
|
||||||
|
- VSCode plugin
|
||||||
|
- Inline code generatie
|
||||||
|
- Advanced prompting
|
||||||
|
|
||||||
|
Tot volgende week!
|
||||||
256
v2/Les02-OpenCode/Les02-Voorbereiding.md
Normal file
256
v2/Les02-OpenCode/Les02-Voorbereiding.md
Normal file
@@ -0,0 +1,256 @@
|
|||||||
|
# Les 2: Voorbereiding (Verplicht!)
|
||||||
|
|
||||||
|
**⚠️ BELANGRIJK:** Voltooi deze stappen VOOR Les 2 begint. Zonder deze setup kun je niet meedoen!
|
||||||
|
|
||||||
|
**Geschatte tijd:** 20-30 minuten
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Checklist
|
||||||
|
|
||||||
|
Aan het einde van deze voorbereiding heb je:
|
||||||
|
- [ ] Node.js geïnstalleerd via NVM
|
||||||
|
- [ ] Git geïnstalleerd
|
||||||
|
- [ ] SSH key gegenereerd en toegevoegd aan GitHub
|
||||||
|
- [ ] Terminal basics begrepen
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. Node.js installeren via NVM
|
||||||
|
|
||||||
|
**Waarom NVM?** NVM (Node Version Manager) laat je makkelijk wisselen tussen Node versies. Veel projecten vereisen specifieke versies.
|
||||||
|
|
||||||
|
### Mac / Linux
|
||||||
|
|
||||||
|
Open Terminal en voer uit:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 1. Installeer NVM
|
||||||
|
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
|
||||||
|
|
||||||
|
# 2. Sluit terminal en open opnieuw (of run dit):
|
||||||
|
source ~/.zshrc # voor zsh (standaard op Mac)
|
||||||
|
# OF
|
||||||
|
source ~/.bashrc # voor bash
|
||||||
|
|
||||||
|
# 3. Installeer Node 20 (LTS)
|
||||||
|
nvm install 20
|
||||||
|
|
||||||
|
# 4. Gebruik Node 20 als standaard
|
||||||
|
nvm use 20
|
||||||
|
nvm alias default 20
|
||||||
|
|
||||||
|
# 5. Controleer installatie
|
||||||
|
node -v # Moet v20.x.x tonen
|
||||||
|
npm -v # Moet 10.x.x tonen
|
||||||
|
```
|
||||||
|
|
||||||
|
### Windows
|
||||||
|
|
||||||
|
**Optie A: NVM voor Windows (aanbevolen)**
|
||||||
|
|
||||||
|
1. Download installer: https://github.com/coreybutler/nvm-windows/releases
|
||||||
|
2. Download `nvm-setup.exe`
|
||||||
|
3. Installeer (volg wizard)
|
||||||
|
4. Open **nieuwe** PowerShell of Command Prompt
|
||||||
|
5. Voer uit:
|
||||||
|
|
||||||
|
```powershell
|
||||||
|
nvm install 20
|
||||||
|
nvm use 20
|
||||||
|
node -v # Moet v20.x.x tonen
|
||||||
|
```
|
||||||
|
|
||||||
|
**Optie B: Direct Node.js installeren**
|
||||||
|
|
||||||
|
1. Ga naar https://nodejs.org
|
||||||
|
2. Download LTS versie (20.x)
|
||||||
|
3. Installeer (volg wizard)
|
||||||
|
4. Herstart terminal
|
||||||
|
5. Controleer: `node -v`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. Git installeren
|
||||||
|
|
||||||
|
### Mac
|
||||||
|
|
||||||
|
Git is vaak al geïnstalleerd. Check:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git --version
|
||||||
|
```
|
||||||
|
|
||||||
|
Als niet geïnstalleerd:
|
||||||
|
```bash
|
||||||
|
# Via Homebrew (aanbevolen)
|
||||||
|
brew install git
|
||||||
|
|
||||||
|
# Of download van https://git-scm.com/download/mac
|
||||||
|
```
|
||||||
|
|
||||||
|
### Windows
|
||||||
|
|
||||||
|
1. Download van https://git-scm.com/download/windows
|
||||||
|
2. Installeer (gebruik standaard opties)
|
||||||
|
3. **Belangrijk:** Kies "Git Bash" als terminal optie
|
||||||
|
4. Herstart terminal
|
||||||
|
5. Controleer: `git --version`
|
||||||
|
|
||||||
|
### Linux (Ubuntu/Debian)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
sudo apt update
|
||||||
|
sudo apt install git
|
||||||
|
git --version
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. SSH Key voor GitHub
|
||||||
|
|
||||||
|
**Waarom SSH?** Met SSH hoef je niet steeds je wachtwoord in te voeren bij git push/pull.
|
||||||
|
|
||||||
|
### Stap 1: Genereer SSH key
|
||||||
|
|
||||||
|
**Mac / Linux / Git Bash (Windows):**
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Genereer key (vervang met je eigen email!)
|
||||||
|
ssh-keygen -t ed25519 -C "jouw-email@example.com"
|
||||||
|
|
||||||
|
# Druk Enter voor standaard locatie
|
||||||
|
# Kies wachtwoord of laat leeg (Enter)
|
||||||
|
```
|
||||||
|
|
||||||
|
### Stap 2: Kopieer je public key
|
||||||
|
|
||||||
|
**Mac:**
|
||||||
|
```bash
|
||||||
|
cat ~/.ssh/id_ed25519.pub | pbcopy
|
||||||
|
```
|
||||||
|
|
||||||
|
**Linux:**
|
||||||
|
```bash
|
||||||
|
cat ~/.ssh/id_ed25519.pub
|
||||||
|
# Selecteer en kopieer handmatig
|
||||||
|
```
|
||||||
|
|
||||||
|
**Windows (Git Bash):**
|
||||||
|
```bash
|
||||||
|
cat ~/.ssh/id_ed25519.pub | clip
|
||||||
|
```
|
||||||
|
|
||||||
|
### Stap 3: Voeg toe aan GitHub
|
||||||
|
|
||||||
|
1. Ga naar https://github.com/settings/keys
|
||||||
|
2. Klik "New SSH key"
|
||||||
|
3. Titel: "Mijn Laptop" (of iets herkenbaars)
|
||||||
|
4. Plak je key
|
||||||
|
5. Klik "Add SSH key"
|
||||||
|
|
||||||
|
### Stap 4: Test de verbinding
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ssh -T git@github.com
|
||||||
|
```
|
||||||
|
|
||||||
|
Je ziet: `Hi username! You've successfully authenticated...`
|
||||||
|
|
||||||
|
**⚠️ Eerste keer:** Je krijgt een vraag over fingerprint. Type `yes`.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. Terminal Basics
|
||||||
|
|
||||||
|
Je hebt een terminal nodig om met OpenCode te werken. Hier de basics:
|
||||||
|
|
||||||
|
### Wat is een terminal?
|
||||||
|
|
||||||
|
- **Mac:** Terminal app (in Applications → Utilities)
|
||||||
|
- **Windows:** PowerShell, Command Prompt, of **Git Bash** (aanbevolen)
|
||||||
|
- **Linux:** Terminal
|
||||||
|
|
||||||
|
### Basis commando's
|
||||||
|
|
||||||
|
| Commando | Wat het doet | Voorbeeld |
|
||||||
|
|----------|--------------|-----------|
|
||||||
|
| `pwd` | Toon huidige map | `pwd` → `/Users/tim/projects` |
|
||||||
|
| `ls` | Toon bestanden in map | `ls` → toont bestanden |
|
||||||
|
| `cd` | Ga naar map | `cd projects` |
|
||||||
|
| `cd ..` | Ga map omhoog | `cd ..` |
|
||||||
|
| `mkdir` | Maak nieuwe map | `mkdir mijn-project` |
|
||||||
|
|
||||||
|
### Oefening
|
||||||
|
|
||||||
|
Open je terminal en probeer:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 1. Waar ben ik?
|
||||||
|
pwd
|
||||||
|
|
||||||
|
# 2. Wat staat hier?
|
||||||
|
ls
|
||||||
|
|
||||||
|
# 3. Ga naar Documents (of andere map)
|
||||||
|
cd Documents
|
||||||
|
|
||||||
|
# 4. Waar ben ik nu?
|
||||||
|
pwd
|
||||||
|
|
||||||
|
# 5. Ga terug
|
||||||
|
cd ..
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. Controleer alles
|
||||||
|
|
||||||
|
Voer deze commando's uit en controleer de output:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Node.js versie (moet 20.x.x zijn)
|
||||||
|
node -v
|
||||||
|
|
||||||
|
# npm versie (moet 10.x.x zijn)
|
||||||
|
npm -v
|
||||||
|
|
||||||
|
# Git versie
|
||||||
|
git --version
|
||||||
|
|
||||||
|
# SSH verbinding met GitHub
|
||||||
|
ssh -T git@github.com
|
||||||
|
```
|
||||||
|
|
||||||
|
**Alles werkt?** ✅ Je bent klaar voor Les 2!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Troubleshooting
|
||||||
|
|
||||||
|
### "command not found: nvm"
|
||||||
|
- Sluit terminal en open opnieuw
|
||||||
|
- Mac: voeg toe aan `~/.zshrc`: `export NVM_DIR="$HOME/.nvm" && [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"`
|
||||||
|
|
||||||
|
### "Permission denied" bij npm install
|
||||||
|
- Gebruik `sudo npm install -g ...` (Mac/Linux)
|
||||||
|
- Of fix npm permissies: https://docs.npmjs.com/resolving-eacces-permissions-errors
|
||||||
|
|
||||||
|
### "Permission denied (publickey)" bij GitHub
|
||||||
|
- Je SSH key is niet goed toegevoegd
|
||||||
|
- Controleer: `ls ~/.ssh/` - je moet `id_ed25519` en `id_ed25519.pub` zien
|
||||||
|
- Voeg opnieuw toe aan GitHub
|
||||||
|
|
||||||
|
### Windows: Git Bash vs PowerShell
|
||||||
|
- **Git Bash:** Unix-achtige commando's (`ls`, `cat`, etc.)
|
||||||
|
- **PowerShell:** Windows commando's
|
||||||
|
- Tip: Gebruik Git Bash voor consistentie met Mac/Linux
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Hulp nodig?
|
||||||
|
|
||||||
|
- Stuur bericht via Teams
|
||||||
|
- Kom 15 minuten eerder naar Les 2 voor hulp
|
||||||
|
|
||||||
|
**Tot Les 2!** 🚀
|
||||||
53
v2/README.md
Normal file
53
v2/README.md
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
# V2 Lesmateriaal
|
||||||
|
|
||||||
|
Verbeterde versie van het lesmateriaal op basis van feedback uit de eerste lesreeks.
|
||||||
|
|
||||||
|
## Belangrijkste verbeteringen
|
||||||
|
|
||||||
|
### Algemeen
|
||||||
|
- **Voorbereidingsdocument:** Studenten krijgen een checklist om VOOR de les te doorlopen
|
||||||
|
- **Platform-specifieke instructies:** Aparte secties voor Windows en Mac
|
||||||
|
- **Checkpoints:** "Wacht" momenten zodat iedereen kan bijblijven
|
||||||
|
- **Troubleshooting secties:** Veelvoorkomende problemen met oplossingen
|
||||||
|
|
||||||
|
### Les 1
|
||||||
|
- Strakker stappenplan voor account setup (v0, GitHub, Vercel)
|
||||||
|
- Kleinere stappen met checkpoints
|
||||||
|
- Troubleshooting slide toegevoegd
|
||||||
|
|
||||||
|
### Les 2
|
||||||
|
- **Les 0 - Voorbereiding** toegevoegd met:
|
||||||
|
- NVM + Node.js installatie
|
||||||
|
- Git setup
|
||||||
|
- SSH key configuratie
|
||||||
|
- Terminal basics
|
||||||
|
- Installatie-instructies pas NA conceptuele uitleg
|
||||||
|
- Duidelijker onderscheid OpenCode terminal vs System terminal
|
||||||
|
- Meerdere gratis AI model opties (backup voor token limits)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Bestanden
|
||||||
|
|
||||||
|
### Les 1: Introductie tot AI
|
||||||
|
- [Slide-Overzicht](Les01-Introductie-AI/Les01-Slide-Overzicht.md)
|
||||||
|
- [Lesplan](Les01-Introductie-AI/Les01-Lesplan.md)
|
||||||
|
- [Docenttekst](Les01-Introductie-AI/Les01-Docenttekst.md)
|
||||||
|
- [Keynote Notes](Les01-Introductie-AI/Les01-Docenttekst-Notes.md)
|
||||||
|
- [Lesopdracht](Les01-Introductie-AI/Les01-Bijlage-A-Lesopdracht.md)
|
||||||
|
- [Huiswerkopdracht](Les01-Introductie-AI/Les01-Bijlage-B-Huiswerkopdracht.md)
|
||||||
|
|
||||||
|
### Les 2: OpenCode
|
||||||
|
- **[Voorbereiding](Les02-OpenCode/Les02-Voorbereiding.md)** ← NIEUW
|
||||||
|
- [Slide-Overzicht](Les02-OpenCode/Les02-Slide-Overzicht.md)
|
||||||
|
- [Lesplan](Les02-OpenCode/Les02-Lesplan.md)
|
||||||
|
- [Docenttekst](Les02-OpenCode/Les02-Docenttekst.md)
|
||||||
|
- [Keynote Notes](Les02-OpenCode/Les02-Docenttekst-Notes.md)
|
||||||
|
- [Lesopdracht](Les02-OpenCode/Les02-Bijlage-A-Lesopdracht.md)
|
||||||
|
- [Huiswerkopdracht](Les02-OpenCode/Les02-Bijlage-B-Huiswerkopdracht.md)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Changelog t.o.v. v1
|
||||||
|
|
||||||
|
Zie [v1-feedback.md](../v1-feedback.md) voor de volledige reflectie.
|
||||||
Reference in New Issue
Block a user