232 lines
5.3 KiB
Markdown
232 lines
5.3 KiB
Markdown
# 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)
|
|
1. mkdir + git init (1 min)
|
|
2. npx create-next-app@latest . (2 min)
|
|
- TypeScript, Tailwind, App Router: allemaal Yes
|
|
3. npm run dev → localhost:3000 (1 min)
|
|
4. Chat: genereer .cursorrules (3 min, 1 request)
|
|
5. Composer: HeroSection component (4 min, 1 request)
|
|
6. Refresh browser → toon resultaat (1 min)
|
|
7. 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** |
|