5.3 KiB
5.3 KiB
Les 3 - Keynote Notes
Spreektijd: ~55 min | Hands-on: ~75 min | Pauze: 15 min (10:15-10:30)
BLOK 1: WELKOM & MEDEDELING (10 min)
Slide 1: Titelslide
- Welkom Les 3, vandaag: Cursor
- "Dit wordt je nieuwe favoriete tool!"
Slide 2: Planning
- 09:00-09:30: Setup + Installatie
- 09:30-09:58: Features + Skills + Request tips
- 09:58-10:13: Live Demo nieuw project
- 10:13-10:15: Start Hands-on
- 10:15-10:30: PAUZE
- 10:30-11:45: Hands-on vervolg
- 11:45-12:00: Afsluiting
Slide 3: Terugblik Les 2
- OpenCode problemen: token limits, EACCES, permission denied
- "Niet jullie schuld, beperking platform"
- Waarom Cursor: voor developers, meer requests, ingebouwde terminal, Skills
Slide 4: Wat is Cursor?
- VS Code + AI ingebouwd
- Gratis Student plan: 500 fast requests/maand
- 5 features: Chat, Inline Edit, Composer, Tab Completion, @mentions
- Hobby EERST → Student upgrade later
BLOK 2: INSTALLATIE & SETUP (20 min)
Slide 5: Download Cursor
- cursor.com → juiste OS versie
- macOS: Intel of Apple Silicon (let op!)
- Windows: Installer
- "Allemaal gedownload?"
Slide 6: Account Aanmaken
- Sign Up → Hobby account EERST
- Email + wachtwoord verifiëren
- Student upgrade: cursor.com/students (later)
- ✓ CHECKPOINT: Cursor geopend, account gemaakt
Slide 7: Interface Tour
- Activity Bar (links), Sidebar (files), Editor (midden)
- Chat Panel: Ctrl+L (rechts)
- Terminal: Ctrl+` (onderin) → alles in 1 window!
Slide 8: Terminal Setup Check
- SAMEN DOEN - iedereen tegelijk
node -v(v20+)git --version(2.x+)npm -v(10.x+)npx -v(10.x+) → nodig voor create-next-app!- Help bij errors, CHECKPOINT
BLOK 3: CURSOR FEATURES (15 min)
Slide 9: Chat Panel (Ctrl+L)
- Vragen over code, AI ziet hele codebase
- Wees specifiek → bespaart requests
- "Analyseer dit project" → AI leest alles
Slide 10: Inline Edit (Ctrl+K)
- Select code → Ctrl+K → instructie → Accept/Reject
- Voorbeeld: inline styles → Tailwind
- Voor: kleine aanpassingen, styling fixes
Slide 11: Composer (Ctrl+I)
- Multi-file, grote taken
- "Voeg pagina toe" → AI maakt alles
- Preview → Accept → instant
Slide 12: Tab Completion
- AI voorspelt code, druk Tab
- GRATIS - kost geen premium request!
- Benadrukken: gebruik dit voor kleine dingen
Slide 13: @ Mentions
- @file, @folder, @web, @docs
- @docs belangrijk: verwijst naar geïnstalleerde docs
- "Hoe werkt App Router? @docs Next.js"
BLOK 4: SKILLS, RULES & REQUESTS (15 min)
Slide 14: Cursor Skills Installeren
- SAMEN DOEN!
- Settings → Features → Docs → Add
- Toevoegen: nextjs.org/docs, react.dev, tailwindcss.com/docs
- Test: Chat + @docs Next.js
- ✓ CHECKPOINT: Docs toegevoegd
Slide 15: .cursorrules via Chat
- NIET handmatig schrijven
- Chat (Ctrl+L): "Genereer .cursorrules voor Next.js + Tailwind + TypeScript"
- Kopieer → maak bestand → save
- 1 request = goed besteed
Slide 16: Request Management
- Hobby = beperkte requests
- Tab Completion = GRATIS
- Chat/Composer/Inline Edit = 1 request
- Tips: denk eerst, combineer taken, gebruik Tab Completion
- "3 kleine prompts = 3 requests. 1 grote prompt = 1 request!"
BLOK 5: LIVE DEMO (15 min)
Slide 17: Demo Nieuw Project (blijft op scherm)
- mkdir + git init (1 min)
- npx create-next-app@latest . (2 min)
- TypeScript, Tailwind, App Router: allemaal Yes
- npm run dev → localhost:3000 (1 min)
- Chat: genereer .cursorrules (3 min, 1 request)
- Composer: HeroSection component (4 min, 1 request)
- Refresh browser → toon resultaat (1 min)
- git add + commit (1 min)
- "Van niks naar werkende site in 15 min!"
BLOK 6: HANDS-ON (75 min + 15 min pauze)
Slide 18: Opdracht (blijft op scherm)
- STAP 1: mkdir + git init + npx create-next-app + npm run dev
- STAP 2: Check Skills/Docs, genereer .cursorrules via Chat
- STAP 3: Bouw componenten (Hero, Features, Form, Footer)
- STAP 4: git commit
- Let op requests! Max ~6-7 in de les
- ☕ Pauze 10:15-10:30
Checks:
- 10:45: "Wie heeft npx gedaan? .cursorrules? Component?"
- 11:00: "Wie heeft 2 componenten? Requests over?"
- 11:30: "Wie heeft gecommit?"
BLOK 7: AFSLUITING (15 min)
Slide 19: Resultaten
- 3-4 studenten tonen werk
- "Welke componenten? Hoeveel requests?"
Slide 20: Samenvatting
- ✅ Cursor setup + Skills/Docs
- ✅ .cursorrules via AI Chat
- ✅ npx create-next-app workflow
- ✅ Chat, Composer, Inline Edit, Tab Completion
- ✅ Request management (Tab = gratis!)
Slide 21: Huiswerk - Debug Challenge
- Download zip van Teams
- Fouten: missende deps, syntax errors, inline styles
- Fix met Cursor terminal + AI
- Push naar GitHub
- Post op Teams: link + screenshot + beschrijving
Slide 22: Volgende Les
- Les 4: Effectief Prompting & Iteratief Werken
- Huiswerk MOET af zijn!
TIMING SUMMARY
| Blok | Onderdeel | Duur |
|---|---|---|
| 1 | Welkom & Mededeling | 10 min |
| 2 | Installatie & Setup | 20 min |
| 3 | Cursor Features | 15 min |
| 4 | Skills, Rules & Requests | 15 min |
| 5 | Live Demo | 15 min |
| PAUZE | 15 min | |
| 6 | Hands-On | 75 min |
| 7 | Afsluiting | 15 min |
| TOTAAL | 180 min |