392 lines
9.6 KiB
Markdown
392 lines
9.6 KiB
Markdown
# Les 3 — Cursor Basics
|
||
## Slide Overzicht (Klas A — fysiek, demo + hands-on)
|
||
|
||
**Lesvorm:** Tim demonstreert klassikaal, daarna zelf bouwen.
|
||
**Doel:** Cursor installeren + activeren als Student, en de basis-sneltoetsen leren.
|
||
**Vervolg op:** Les 2 — OpenCode
|
||
**Aansluit op:** Les 4 — TypeScript Fundamentals (en later Les 14 — Cursor + Vercel)
|
||
|
||
---
|
||
|
||
## Blok-structuur
|
||
|
||
| Blok | Onderwerp | Slides |
|
||
|------|-----------|--------|
|
||
| 1 | Welkom + Wat is Cursor | 1–3 |
|
||
| 2 | Student Plan + Installatie | 4–6 |
|
||
| 3 | Skills/Docs + Eerste project | 7–9 |
|
||
| 4 | Drie sneltoetsen + request-management | 10–14 |
|
||
| 5 | `.cursorrules` introductie | 15 |
|
||
| 6 | Hands-on: bouw je eerste componenten | 16–19 |
|
||
| 7 | Afronding + vooruitblik | 20 |
|
||
|
||
---
|
||
|
||
## Slide 1: Title
|
||
### Les 3 — Cursor Basics
|
||
|
||
**Visual:**
|
||
- Background: CREAM
|
||
- "Les 3" in BLUE
|
||
- "Cursor Basics" in BLACK
|
||
- Subtitle: "Je eerste AI-powered editor — gratis voor studenten"
|
||
- Iconen onderaan: Cursor-logo, Next.js, Tailwind
|
||
|
||
---
|
||
|
||
## Slide 2: Vandaag
|
||
### Wat je aan het eind kunt
|
||
|
||
**Drie dingen:**
|
||
1. Cursor installeren + Student Plan activeren
|
||
2. De drie hoofdsneltoetsen kennen (Tab / Cmd+K / Cmd+L)
|
||
3. Een werkend Next.js-project met Hero-component bouwen
|
||
|
||
**Werkwijze:** ik demonstreer, jullie kijken mee. Na de pauze bouw je zelf je eerste componenten.
|
||
|
||
**Visual:** drie stappen van "blanco scherm" naar "werkende app".
|
||
|
||
---
|
||
|
||
## Slide 3: Wat is Cursor
|
||
### VS Code, maar met AI ingebouwd
|
||
|
||
**Wat het is:**
|
||
- Een fork van Visual Studio Code
|
||
- AI is GEEN extensie — het zit in de IDE zelf
|
||
- Werkt met Claude, GPT, Gemini en lokale modellen
|
||
- Je kunt al je VS Code extensies blijven gebruiken
|
||
|
||
**Waarom relevant voor jou:**
|
||
- Industry standard voor AI-assisted development
|
||
- Vacatures noemen het steeds vaker
|
||
- Gratis Pro voor studenten via NOVI e-mail
|
||
|
||
**Visual:** Cursor logo + screenshot van de IDE.
|
||
|
||
---
|
||
|
||
## Slide 4: Student Plan
|
||
### Gratis Pro voor studenten
|
||
|
||
**Wat je krijgt:**
|
||
- 500 fast requests per maand (gratis tier: 50)
|
||
- Toegang tot premium modellen (Claude, GPT-4, Gemini)
|
||
- Onbeperkt gebruik van tab-completion
|
||
|
||
**Hoe activeer je:**
|
||
1. Ga naar `cursor.com/students`
|
||
2. Log in met je NOVI e-mailadres
|
||
3. Bevestig via SheerID (1–2 minuten verificatie)
|
||
4. Je account is upgraded naar Pro Student
|
||
|
||
**Visual:** cursor.com/students landingspagina.
|
||
|
||
---
|
||
|
||
## Slide 5: Installeren
|
||
### Vier stappen
|
||
|
||
```bash
|
||
# 1. Download van cursor.com
|
||
# 2. Installeer als gewone app
|
||
# 3. Open Cursor → kies "Sign in"
|
||
# 4. Optioneel: importeer VS Code settings + extensies
|
||
```
|
||
|
||
**Bij eerste start:**
|
||
- Cursor vraagt of je VS Code instellingen wilt importeren — **Ja**
|
||
- Kies een theme (zelfde als je VS Code)
|
||
- Klaar — je staat in Cursor
|
||
|
||
**Visual:** download-pagina screenshot.
|
||
|
||
---
|
||
|
||
## Slide 6: Eerste login + check
|
||
### Werkt het Student Plan?
|
||
|
||
**Test:**
|
||
1. Open Cursor → Settings (Cmd+,)
|
||
2. Tab **General** → check **"Account"**
|
||
3. Status moet zijn: **"Pro Student"**
|
||
|
||
Als het "Free" zegt: opnieuw inloggen via cursor.com/students en daarna Cursor herstarten.
|
||
|
||
**Visual:** Settings → Account screenshot met "Pro Student" label.
|
||
|
||
---
|
||
|
||
## Slide 7: Skills / Docs configureren
|
||
### Geef Cursor frameworks-kennis
|
||
|
||
**Wat het doet:**
|
||
- Cursor indexeert officiële documentatie
|
||
- Je kunt erin zoeken via `@docs:Next.js` in chat
|
||
- Belangrijk: framework-specifieke vragen worden veel beter
|
||
|
||
**Setup:**
|
||
1. Settings → **Features** → **Docs**
|
||
2. Klik **+ Add new doc**
|
||
3. Voeg toe: `Next.js`, `React`, `Tailwind CSS`
|
||
4. Wacht tot indexering klaar is (1–2 min)
|
||
|
||
**Visual:** Docs-instellingen met drie toegevoegde frameworks.
|
||
|
||
---
|
||
|
||
## Slide 8: Eerste Next.js project
|
||
### Met `npx create-next-app`
|
||
|
||
```bash
|
||
cd ~/web
|
||
npx create-next-app@latest mijn-eerste-cursor-app
|
||
|
||
# Beantwoord prompts:
|
||
# TypeScript? Ja
|
||
# ESLint? Ja
|
||
# Tailwind CSS? Ja
|
||
# src/ directory? Ja
|
||
# App Router? Ja
|
||
# Import alias @/* ? Ja
|
||
```
|
||
|
||
```bash
|
||
cd mijn-eerste-cursor-app
|
||
npm run dev # → localhost:3000
|
||
```
|
||
|
||
**Visual:** terminal met de prompts.
|
||
|
||
---
|
||
|
||
## Slide 9: Cursor opent het project
|
||
### Eerste indruk
|
||
|
||
**Wat je ziet:**
|
||
- Linker zijbalk = file explorer (zoals VS Code)
|
||
- Midden = editor
|
||
- Onder = terminal
|
||
- Rechts: AI-paneel (toggle met Cmd+L)
|
||
|
||
**Wat is anders dan VS Code:**
|
||
- AI-paneel rechts
|
||
- Tab-completion is slimmer (kijkt mee met je hele bestand)
|
||
- Cmd+K geeft je een AI-prompt direct in de editor
|
||
|
||
**Visual:** Cursor venster met annotaties.
|
||
|
||
---
|
||
|
||
## Slide 10: De drie sneltoetsen
|
||
### Onthoud deze drie
|
||
|
||
| Sneltoets | Wat het doet | Kost |
|
||
|-----------|--------------|------|
|
||
| **Tab** | Accept AI auto-completion | **Gratis** |
|
||
| **Cmd+K** | Inline edit op selectie | 1 request |
|
||
| **Cmd+L** | Chat-paneel openen | 1 request |
|
||
|
||
**Eén regel om te onthouden:**
|
||
- Klein → **Tab**
|
||
- Eén bestand wijzigen → **Cmd+K**
|
||
- Vraag stellen → **Cmd+L**
|
||
|
||
**Visual:** drie iconen + toetsenbord-grafiek.
|
||
|
||
---
|
||
|
||
## Slide 11: Tab — autocomplete
|
||
### Gratis, oneindig, slim
|
||
|
||
**Wat het doet:**
|
||
- Cursor analyseert je hele bestand + recente edits
|
||
- Suggereert hele blokken code, niet alleen één woord
|
||
- Druk **Tab** om te accepteren, **Esc** om te negeren
|
||
|
||
**Wanneer gebruik je het:**
|
||
- Boilerplate (imports, types, props)
|
||
- Herhalende patronen
|
||
- Voorspelbare code (CRUD operations, list renders)
|
||
|
||
**Tip:** typ een commentaar `// render team list` — Cursor genereert de hele component eronder.
|
||
|
||
**Visual:** code-editor met grijze suggestie-tekst.
|
||
|
||
---
|
||
|
||
## Slide 12: Cmd+K — inline edit
|
||
### Specifieke wijziging op selectie
|
||
|
||
**Hoe:**
|
||
1. Selecteer code (of zet je cursor op een regel)
|
||
2. Druk **Cmd+K**
|
||
3. Er opent een input-balkje boven je code
|
||
4. Typ wat je wilt — bv. *"converteer naar TypeScript"*
|
||
5. Cursor toont een diff
|
||
6. **Tab** = Accept, **Esc** = Reject
|
||
|
||
**Wanneer gebruik je het:**
|
||
- Refactor één functie of component
|
||
- Variabele hernoemen
|
||
- TypeScript-types toevoegen
|
||
- Comment uitleggen
|
||
|
||
**Kost:** 1 request per Cmd+K.
|
||
|
||
**Visual:** screenshot van inline-prompt boven geselecteerde code.
|
||
|
||
---
|
||
|
||
## Slide 13: Cmd+L — Chat
|
||
### Vragen + grotere taken
|
||
|
||
**Hoe:**
|
||
1. Druk **Cmd+L** — chat-paneel opent rechts
|
||
2. Typ je vraag of taak
|
||
3. Optioneel: `@file:foo.tsx`, `@docs:Next.js`, `@web` voor context
|
||
4. Cursor antwoordt + kan voorstellen om code te wijzigen
|
||
|
||
**Wanneer gebruik je het:**
|
||
- Uitleg vragen ("hoe werkt useEffect?")
|
||
- Grotere taken die meerdere bestanden raken
|
||
- Code-review op een specifieke functie
|
||
|
||
**Kost:** 1 request per chat-conversatie (vervolg-berichten gratis tot je een nieuwe context start).
|
||
|
||
**Visual:** chat-paneel met `@docs:Next.js` mention.
|
||
|
||
---
|
||
|
||
## Slide 14: Request management
|
||
### Hoe haal je veel uit 500 requests
|
||
|
||
**Tips:**
|
||
- Combineer taken in 1 Cmd+L: *"maak een Hero met titel, ondertitel, twee CTA-knoppen en responsive design"*
|
||
- Gebruik **Tab** voor alles wat eenvoudig is — kost niets
|
||
- Cmd+K alleen voor gerichte één-bestand-edits
|
||
- Cmd+L met `@file` om Cursor exact te vertellen waar te kijken
|
||
|
||
**Anti-pattern:**
|
||
- Tien losse Cmd+K's voor één feature
|
||
- Cmd+L met te weinig context ("maak iets cools")
|
||
|
||
**Visual:** request-budget-meter met "500 / maand".
|
||
|
||
---
|
||
|
||
## Slide 15: `.cursorrules` introductie
|
||
### Per-project instructies
|
||
|
||
**Wat het is:**
|
||
- Bestand `.cursorrules` in de project-root
|
||
- Cursor leest dit bij elke AI-prompt
|
||
- Vertelt "hoe wij hier dingen doen"
|
||
|
||
**Voorbeeld:**
|
||
|
||
```text
|
||
# .cursorrules
|
||
|
||
- Gebruik TypeScript strict mode
|
||
- Tailwind voor styling, geen CSS modules
|
||
- Server components by default; "use client" alleen waar nodig
|
||
- Imports met @/ alias voor src/
|
||
- Functional components, geen classes
|
||
```
|
||
|
||
**Genereren:** vraag Cursor in chat (Cmd+L): *"Maak een .cursorrules voor dit Next.js project"*. Kost 1 request, je hebt een goede basis.
|
||
|
||
**Visual:** code-block met voorbeeld-regels.
|
||
|
||
---
|
||
|
||
## Slide 16: Hands-on — overzicht
|
||
### Drie taken na de pauze
|
||
|
||
**Taak 1 — Hero component** (via Cmd+L)
|
||
- Titel + ondertitel + twee CTA-knoppen
|
||
- Gradient achtergrond
|
||
- Responsive
|
||
|
||
**Taak 2 — Styling tweak** (via Cmd+K)
|
||
- Kleur van de knoppen aanpassen
|
||
- Spacing tunen
|
||
|
||
**Taak 3 — Extra feature** (vrije keuze)
|
||
- FeatureCards / ContactForm / Footer
|
||
|
||
**Tot slot:** `git init && git add . && git commit -m "first cursor build"`
|
||
|
||
**Visual:** drie taken-kaarten.
|
||
|
||
---
|
||
|
||
## Slide 17: Taak 1 demo — Hero
|
||
### Live met Cmd+L
|
||
|
||
**Wat ik live demonstreer:**
|
||
|
||
```text
|
||
Prompt in Cmd+L:
|
||
"Bouw een Hero-component in app/page.tsx.
|
||
Specs:
|
||
- Gradient achtergrond (blauw)
|
||
- Grote titel + ondertitel
|
||
- Twee CTA-knoppen: 'Aan de slag' en 'Meer info'
|
||
- Responsive
|
||
- Tailwind only"
|
||
```
|
||
|
||
Cursor maakt diff → ik bekijk → Accept → save → bekijk in browser.
|
||
|
||
**Visual:** screenshot van resultaat in browser.
|
||
|
||
---
|
||
|
||
## Slide 18: Taak 2 demo — Cmd+K tweak
|
||
### Snelle styling-aanpassing
|
||
|
||
**Wat ik live demonstreer:**
|
||
1. Selecteer de twee knoppen
|
||
2. Cmd+K → *"verander primaire knop naar paars gradient, secundaire naar transparant met rand"*
|
||
3. Tab = accept
|
||
4. Bekijk in browser
|
||
|
||
**Effect:** zelfde feature, kleine verandering, één request.
|
||
|
||
**Visual:** voor/na vergelijking van de knoppen.
|
||
|
||
---
|
||
|
||
## Slide 19: Hands-on tijd
|
||
### Nu jullie — 75 minuten
|
||
|
||
**Aan het werk in je eigen project:**
|
||
1. Open Cursor in je net gescaffolde project
|
||
2. Volg de stappen uit `Les03-Lesopdracht.pdf`
|
||
3. Drie taken: Hero / Cmd+K tweak / extra feature naar keuze
|
||
4. Eindig met `git commit`
|
||
|
||
**Vragen?** Tim loopt rond.
|
||
|
||
**Visual:** opdrachtkaart.
|
||
|
||
---
|
||
|
||
## Slide 20: Vooruitblik
|
||
### Wat volgt
|
||
|
||
**Les 4 — TypeScript Fundamentals:**
|
||
- Strict types, generics, utility types
|
||
- TypeScript in je Next.js project
|
||
|
||
**Veel later (Les 14):**
|
||
- Cursor 3 — Editor Window vs Agents Window
|
||
- Agent mode en background agents
|
||
- Vercel deployment + preview URLs
|
||
|
||
**Vandaag was de basis** — Tab, Cmd+K, Cmd+L. Vanaf nu ga je deze sneltoetsen elke les terugzien.
|
||
|
||
**Visual:** roadmap van Les 3 → Les 14.
|