167 lines
9.1 KiB
Markdown
167 lines
9.1 KiB
Markdown
# Les 14 — Docenttekst (normaal)
|
||
|
||
**Online les via Teams. Voor uitgebreide voorbereiding + context per blok.**
|
||
**Voor letterlijk voorleesbaar script: zie `Les14-Docenttekst-Autocue.md`.**
|
||
|
||
---
|
||
|
||
## Lesvorm en flow
|
||
|
||
| Onderdeel | Indeling |
|
||
|-----------|----------|
|
||
| Theorie + demo | ±1 uur klassikaal (live demo via screenshare) |
|
||
| Pauze | 15 minuten |
|
||
| Nu jullie | ±1,5 uur zelf doen met begeleiding via chat |
|
||
|
||
**Setup tijdens de les:**
|
||
- Monitor 1 (privé): autocue-document fullscreen
|
||
- Monitor 2 (gedeeld in Teams): Cursor + browser + terminal + slides naast elkaar
|
||
|
||
Tip voor de online-les: zet je Teams-deelvenster zo in dat slides en code allebei zichtbaar zijn. Cursor + terminal samen, slides klein in een hoek.
|
||
|
||
---
|
||
|
||
## Voorbereiding — week vooraf
|
||
|
||
**Accounts checken (studenten allemaal):**
|
||
- GitHub-account met `gh` CLI ingelogd (`gh auth login`)
|
||
- Vercel-account met CLI: `npm i -g vercel && vercel login`
|
||
- Cursor geïnstalleerd, Pro of Business plan actief, ingelogd
|
||
|
||
**Communicatie:** stuur een Slack-bericht een dag vooraf met deze checklist. Als iemand morgen vastloopt op de installatie ben je een kwartier kwijt.
|
||
|
||
---
|
||
|
||
## Voorbereiding — dag van de les
|
||
|
||
**30 minuten vooraf:**
|
||
- Cursor open in een nieuwe lege folder voor de demo
|
||
- Browser tabs: github.com (logged in), vercel.com/dashboard, vercel.com/new
|
||
- Twee terminals klaar (één in de demo-folder, één voor ad-hoc commando's)
|
||
- Slides in een aparte fullscreen of klein in een hoek
|
||
- Autocue-document op tweede monitor
|
||
|
||
**Backup scenario:**
|
||
- Een eerder voltooide demo-folder klaar voor het geval live demo vastloopt
|
||
- Screenshots van Vercel preview-URL's voor het geval Vercel traag deploy't
|
||
- Pre-gemaakte `.cursor/rules/general.mdc` en `AGENTS.md` om snel te kunnen plakken
|
||
|
||
**Copy-paste-klaar materiaal:**
|
||
- Repo-naam (`mijn-portfolio` of vergelijkbaar)
|
||
- Twee feature-prompts (zie autocue Bijlage C)
|
||
- `.cursor/rules/general.mdc` inhoud (zie autocue Bijlage A)
|
||
- `AGENTS.md` inhoud (zie autocue Bijlage B)
|
||
|
||
---
|
||
|
||
## Per blok — wat je extra wilt zeggen
|
||
|
||
### Blok 1 — Welkom + Vandaag (slides 1–2)
|
||
**Doel:** verwachtingen zetten — het is een live demo van begin tot eind.
|
||
|
||
Maak duidelijk dat het anders is dan eerdere lessen: je bouwt een hele cyclus voor hun ogen op. Vraag tussendoor of het tempo klopt — online is het lastig om non-verbale signalen te lezen. Laat ze hun hand opsteken (Teams reactie) als iets onduidelijk is.
|
||
|
||
### Blok 2 — Scaffold + Git + Vercel (slides 3–7)
|
||
**Doel:** in 15 minuten van leeg naar live productie-URL.
|
||
|
||
**Slide 3 — Scaffold:** ga niet door de `create-next-app` prompts heen alsof het triviaal is. Studenten hebben dit vaak nog nooit gedaan. Beschrijf elke keuze kort:
|
||
- TypeScript: ja, want strict typing
|
||
- ESLint: ja, standaard
|
||
- Tailwind: ja, we gebruiken het hele jaar
|
||
- src/ dir: ja, het houdt root schoon
|
||
- App Router: ja, dat is de moderne flow
|
||
- Turbopack: ja als default, geeft betere DX
|
||
|
||
**Slide 4 — Git:** veelgemaakte fout is `git push` zonder eerst remote add. Laat zien wat de foutmelding eruitziet en hoe je het oplost. Wijs ook expliciet op `.gitignore` — je toont dat `node_modules` en `.env.local` NIET in de eerste commit zitten.
|
||
|
||
**Slide 5 — Vercel:** wacht écht de 45 seconden af. Gebruik die tijd om uit te leggen wat Vercel doet onder de motorkap (clone, install, build, deploy). Het wachten levert spanning op — gebruik het didactisch.
|
||
|
||
**Slide 6/7 — URLs en env vars:** dit is nog theorie, want we hebben nog geen secrets. Belofte aan studenten: "zo direct ga ik dit ook live gebruiken met Vercel CLI."
|
||
|
||
### Blok 3 — Vercel CLI (slides 8–10)
|
||
**Doel:** student begrijpt het verschil tussen dashboard en CLI, en ziet één concrete workflow (`link` + `env pull`).
|
||
|
||
Belangrijk: maak duidelijk dat we GEEN env vars echt hebben — we tonen de syntax. Als je het wilt demonstreren met een echte var, voeg er één toe (`MIJN_NAAM=Tim`) en pull die naar lokaal, om te laten zien dat de file gevuld wordt.
|
||
|
||
`vercel env pull` is een eye-opener voor veel studenten. Het scheelt je manuelle gepruts elke keer als productie-vars wijzigen.
|
||
|
||
### Blok 4 — Cursor in detail (slides 11–17)
|
||
**Doel:** student kent de hoofdfeatures en weet wanneer welke te gebruiken.
|
||
|
||
Deze 7 slides zijn de inhoudelijke kern. Niet door doorheen jakkeren. Geef per modus een micro-demo:
|
||
|
||
- **Slide 12 (modi):** open de chat met Cmd+L, sluit met Esc. Druk Cmd+K op een regel in code en typ "rename this variable". Toggle Plan-mode in de chat — laat zien hoe de UI verandert.
|
||
- **Slide 13 (@-mentions):** typ `@` in chat, laat het autocomplete-menu zien. Probeer `@web:Next.js 16 release notes` voor een live web-search demo.
|
||
- **Slide 14 (Cursor Rules):** maak live een `.cursor/rules/general.mdc` aan. Zet er één duidelijke regel in (bv. "altijd functional components, nooit class components"). Test daarna in een nieuwe chat dat de AI die regel volgt.
|
||
- **Slide 15 (AGENTS.md):** plak je voorbereide voorbeeld. Leg uit waarom ook Claude Code en Copilot dit lezen.
|
||
- **Slide 16 (Background agents):** demo de feature-2-prompt al hier even kort, om visueel te maken hoe een agent in een aparte tab opent.
|
||
|
||
Vraag aan het eind van dit blok: "welke modus zou je gebruiken voor X?" — twee of drie scenario's. Kort, voor engagement.
|
||
|
||
### Blok 5 — Live feature-workflow (slides 18–22)
|
||
**Doel:** de hele cyclus laten zien — niet alleen Cursor, niet alleen Vercel, maar de combo.
|
||
|
||
**Slide 19 — Demo 1:** plan + apply. Maak het visueel: open de chat, plak de feature-1-prompt, wacht tot het plan verschijnt, lees het door, klik Apply. Dan met Cmd+K één tweak. Commit.
|
||
|
||
**Slide 20 — Push + preview:** push, switch naar browser tab Vercel, wacht op build, open preview-URL. Gebruik de wachttijd om te zeggen: "kijk, vanaf hier ben je niet meer alleen — je kunt deze URL nu delen met collega's of klanten zonder dat zij iets hoeven te installeren."
|
||
|
||
**Slide 21 — Demo 2 background agent:** dit is de WOW-moment van de les. Plak de feature-2-prompt, klik "open in background", en demonstreer LETTERLIJK dat je in main editor blijft werken. Doe een Cmd+K in een ander bestand. Dat illustreert het parallel-werken.
|
||
|
||
**Slide 22 — Merge:** open beide PR's op github.com. Toon de Vercel-bot comment. Merge één naar `main`. Switch terug naar Vercel dashboard om de productie-deploy te zien starten.
|
||
|
||
### Blok 6 — Recap + Nu jullie (slides 23–25)
|
||
**Doel:** overgang naar zelf-doen.
|
||
|
||
Voor de pauze: vraag of er nog iets onduidelijk was uit de demo. In een online setting moet je actief uitlokken — studenten typen vaak niet uit zichzelf.
|
||
|
||
Na de pauze: laat een gedeelde chat open zodat studenten kunnen tonen waar ze vastlopen. Wees actief in de chat. Loop om de 15 minuten een check-in: "hoe ver iedereen?"
|
||
|
||
---
|
||
|
||
## Veelvoorkomende vragen + antwoorden
|
||
|
||
**"Waarom Cursor en niet gewoon VS Code met GitHub Copilot?"**
|
||
Beide werken. Cursor's voordeel: tighter integratie van plan/build/agent flows en background agents. VS Code + Copilot is solid voor inline-completion. Voor agent-workflows is Cursor (of Claude Code) doorgaans soepeler. Test allebei en kies.
|
||
|
||
**"Wat kost Cursor?"**
|
||
Hobby tier is gratis met limits. Pro is rond €20/maand. Voor de cursus genoeg.
|
||
|
||
**"Kan ik mijn API-key in Cursor gebruiken in plaats van hun subscription?"**
|
||
Ja — Settings → Models. Voeg je OpenAI/Anthropic key toe. Goedkoper bij weinig gebruik, duurder bij veel.
|
||
|
||
**"Wat als ik een typo maak in `.cursor/rules/`?"**
|
||
Cursor parseert de YAML front-matter, gooit een waarschuwing bij syntax errors. Open de file en kijk linksonder voor de error.
|
||
|
||
**"Zal Cursor mijn code naar OpenAI sturen?"**
|
||
Hangt af van je settings. Cursor heeft "Privacy mode" — code wordt niet bewaard door OpenAI of Anthropic. Check Settings → Privacy.
|
||
|
||
**"Hoe kies ik tussen Plan en Build?"**
|
||
Plan voor onbekende terrein of grote features. Build als je precies weet wat je wilt en het kleiner is. Bij twijfel: Plan, dan klik je Apply als het bevalt.
|
||
|
||
**"Werkt Vercel CLI ook voor andere frameworks?"**
|
||
Ja — Astro, SvelteKit, Vue, Remix, alles wat Vercel ondersteunt. De link- en env-flow is identiek.
|
||
|
||
**"Wat als ik géén Vercel wil gebruiken?"**
|
||
Alternatieven: Netlify (vergelijkbare workflow), Cloudflare Pages (goedkoper bij schaal), zelf hosten op een Hetzner box met Coolify (zoals Tim doet). De Cursor-workflow blijft hetzelfde — alleen de deploy-step verandert.
|
||
|
||
---
|
||
|
||
## Foutmodi tijdens de les
|
||
|
||
| Probleem | Snelle fix |
|
||
|----------|-----------|
|
||
| `gh repo create` faalt — niet ingelogd | `gh auth login` opnieuw |
|
||
| Vercel detecteert geen Next.js | Build directory leeg gelaten, niet `out/` typen |
|
||
| Vercel build crasht op env var | Tijdelijk een dummy zetten in dashboard |
|
||
| Cursor verliest context | Esc, nieuwe chat starten, opnieuw `@`-mention |
|
||
| Background agent doet niets | Eerst zien of het Pro/Business-plan vereist |
|
||
| `vercel link` koppelt aan verkeerd project | `rm -rf .vercel` en opnieuw |
|
||
|
||
---
|
||
|
||
## Vooruitblik Les 15
|
||
|
||
Volgende les: RAG met embeddings. We bouwen een PDF Q&A-app. Studenten moeten daarvoor hun Next.js-app van vandaag live hebben staan, met minstens twee PR's gemerged. Anders missen ze het fundament voor de RAG-stack.
|
||
|
||
Stuur de avond ervoor een Slack-bericht: "checklist voor Les 15 — productie-URL + 2 merged PR's — laat in chat zien als je vastzit."
|