rubberducky/novi-lessons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: les

Browse Source
This commit is contained in:
Tim Rijkse
2026-06-17 07:15:32 +02:00
parent c023192113
commit ad8b25e70c
115 changed files with 6316 additions and 16971 deletions
Download Patch File Download Diff File Expand all files Collapse all files

489
Les03-Cursor-Basics/Les03-Lesstof.md
View File

@@ -1,354 +1,309 @@
# Les 3 — Lesstof
## Cursor — AI-Powered Code Editor
## Cursor Basics
**Vak:** AI Fundamentals
**Vak:** AI-Assisted Development
**Opleiding:** NOVI Hogeschool Utrecht
**Vorige les:** Les 2 — OpenCode
**Volgende les:** Les 4 — TypeScript Fundamentals
---
## Inhoud
## Doel van deze les
1. [Wat is Cursor](#1-wat-is-cursor)
2. [Setup + eerste keer opstarten](#2-setup--eerste-keer-opstarten)
3. [De vier kern-features](#3-de-vier-kern-features)
4. [Chat (Cmd+L)](#4-chat-cmdl)
5. [Inline Edit (Cmd+K)](#5-inline-edit-cmdk)
6. [Composer / Agent (Cmd+I)](#6-composer--agent-cmdi)
7. [Tab — predictive completion](#7-tab--predictive-completion)
8. [@-mentions — context erbij halen](#8--mentions--context-erbij-halen)
9. [.cursorrules — project-context](#9-cursorrules--project-context)
10. [Debug-flow met AI](#10-debug-flow-met-ai)
11. [Wanneer Cursor vs Console](#11-wanneer-cursor-vs-console)
Aan het einde van deze les heb je:
- Cursor geïnstalleerd en geactiveerd met je Student Plan
- Skills/Docs geconfigureerd voor Next.js, React, Tailwind
- Een werkend Next.js project opgezet via `npx create-next-app`
- De drie hoofdsneltoetsen (Tab / Cmd+K / Cmd+L) actief gebruikt
- Een `.cursorrules`-bestand in je project
- Een Hero-component, een styling-tweak en één extra feature gebouwd
- Je eerste commit naar Git gedaan
---
## 1. Wat is Cursor
**Cursor** is een AI-first code editor — een fork van VS Code met AI-features verweven in elk onderdeel. Geen plugin, geen sidebar — AI is overal: tab-completion, chat, inline edit, agent mode.
Cursor is een **fork van Visual Studio Code** met AI als kernfeature ingebouwd. Dat betekent: alles wat je in VS Code kunt — file explorer, terminal, debugger, extensies — werkt hier ook. Het verschil: AI is geen plug-in maar een onderdeel van de editor zelf.
### Waarom Cursor?
### Werkt met meerdere modellen
- Vertrouwde VS Code interface (alle extensies werken)
- AI features die écht in je workflow zitten
- Multi-file edits met diff-preview
- Background Agents (later in de leerlijn — Les 15)
- Werkt met OpenAI, Anthropic, of eigen API keys
Cursor laat je per chat kiezen welk AI-model je gebruikt:
- **Claude** (Opus, Sonnet, Haiku) — sterk in code-redenering
- **GPT** (4, 4o, 5) — solide allround
- **Gemini** (Pro, Flash) — snel en goedkoop
- **Lokaal** (via Ollama) — privacy en kosten-vriendelijk
### Cost
### Waarom relevant
- **Hobby (gratis)** — limited, Tab completion, basic chat
- **Pro ($20/maand)** — alles, onbeperkt, Background Agents
- **Business** — teams, SSO, audit
Voor deze leerlijn: Pro aanrader. Hobby werkt voor leren maar je raakt rate-limits.
- Industry-standard in AI-assisted development
- Veel vacatures noemen het expliciet
- Gratis Pro Student voor NOVI-studenten
---
## 2. Setup + eerste keer opstarten
## 2. Student Plan activeren
### Installatie
### Wat krijg je
Download van cursor.com — installeer net als VS Code.
| Tier | Fast requests/maand | Premium models | Tab-completion |
|------|--------------------:|----------------|----------------|
| Free | 50 | beperkt | onbeperkt |
| Pro | 500 | volledig | onbeperkt |
| **Pro Student** | **500** | **volledig** | **onbeperkt** |
| Business | 1000+ | volledig | onbeperkt |
### Eerste opstarten
Pro Student = gewone Pro, maar gratis voor verified studenten.
1. Sign in met email of GitHub
2. Cursor vraagt: "Import VS Code settings?" — Ja
3. Kies thema, snelkoppelingen
4. Opt-in op AI training of opt-out (privacy keuze)
### Hoe activeer je
### Model kiezen
1. Ga naar `cursor.com/students`
2. Log in met je **NOVI e-mailadres** (niet je persoonlijke Gmail)
3. SheerID verifieert je via NOVI's inschrijfsysteem (1–10 min)
4. Cursor upgrade je account automatisch naar **Pro Student**
Settings → Models. Defaults:
- Cursor Auto (default — Cursor kiest beste model)
- Claude Sonnet 4.6 (default voor code)
- GPT-5 (alternatief)
- o3 (reasoning — trager maar slimmer)
### Verifiëren
Vuistregel: Sonnet voor 90%, o3 voor complex.
Open Cursor → Settings (Cmd+,) → Tab **General** → check **Account**. Status moet **"Pro Student"** zijn.
### Een project openen
Twee opties:
- File → Open Folder (zoals VS Code)
- Terminal: `cursor .` in je project-folder
Als het "Free" blijft: log opnieuw in via cursor.com/students en herstart Cursor.
---
## 3. De vier kern-features
## 3. Installeren
Cursor heeft veel features. Vier die je dagelijks gebruikt:
```bash
# 1. Download van cursor.com (kies je OS)
# 2. Installeer als gewone app (sleep naar Applications op Mac,
# next-next-finish op Windows)
# 3. Open Cursor → Sign in
# 4. Optioneel: importeer VS Code instellingen (klik Ja bij de prompt)
```
| Feature | Shortcut | Wanneer |
|---------|----------|---------|
| **Tab** | (auto) | Voltooi-suggesties tijdens typen |
| **Inline Edit** | `Cmd+K` | Korte edit op selectie of cursor-positie |
| **Chat** | `Cmd+L` | Vragen stellen, code uitleggen |
| **Composer/Agent** | `Cmd+I` | Multi-file edits, refactors |
Deze leren = 80% van Cursor's waarde gebruiken.
Eerste keer Cursor opent vraagt hij:
- VS Code settings importeren? **Ja** (theme, keybindings, extensies blijven)
- Welk model kiezen? Voor nu: laat default staan
---
## 4. Chat (Cmd+L)
## 4. Skills / Docs configureren
**Wat:** sidebar-chat. Type vraag, krijg antwoord. Net als ChatGPT maar mét je code als context.
Cursor kan officiële framework-documentatie indexeren. Vervolgens kun je in chat schrijven `@docs:Next.js` en de AI antwoordt met actuele info uit die docs.
### Wanneer
### Setup
- Code uitleggen ("wat doet deze functie?")
- Algemene vragen tijdens coden ("hoe gebruik je useMemo?")
- Debug-hulp ("waarom werkt dit niet?")
1. Settings → **Features** → **Docs**
2. Klik **+ Add new doc**
3. Voeg toe (één voor één):
- `Next.js` (URL: `https://nextjs.org/docs`)
- `React` (URL: `https://react.dev`)
- `Tailwind CSS` (URL: `https://tailwindcss.com/docs`)
4. Wacht tot indexering klaar is (1–2 min per doc)
### Context erbij
### Gebruiken
- `@filename` — voeg specifieke file toe als context
- `@Codebase` — hele repo (gebruikt embeddings)
- `@Web` — search het web
- `@Docs` — geïmporteerde documentatie
- Sleep een file naar chat — toegevoegd als context
In Cmd+L (chat):
### Agent-mode binnen Chat
```
@docs:Tailwind hoe centreer ik verticaal en horizontaal met flex?
```
Switch knop bovenaan: Ask | Agent. Met Agent mode kan Chat ook files bewerken — vergelijkbaar met Composer.
Cursor antwoordt met de juiste Tailwind-classes uit de officiële docs.
---
## 5. Inline Edit (Cmd+K)
## 5. Eerste Next.js project
**Wat:** edit-popup op je cursor-positie. Beschrijf wat je wilt, AI past selectie of nieuwe code aan.
### Scaffolden
### Voorbeelden
```bash
cd ~/web # of waar jij je projecten houdt
npx create-next-app@latest mijn-eerste-cursor-app
```
Selecteer een functie + `Cmd+K`:
> "Voeg error handling toe"
Prompts:
AI past selectie aan, diff zichtbaar, accept/reject.
| Vraag | Aanbevolen | Waarom |
|-------|-----------|--------|
| TypeScript? | **Ja** | strict typing voorkomt bugs |
| ESLint? | **Ja** | code-style consistency |
| Tailwind CSS? | **Ja** | utility-first styling |
| `src/` directory? | **Ja** | houdt project-root schoon |
| App Router? | **Ja** | moderne Next.js flow |
| Turbopack? | **Ja** | snellere dev-builds |
| Import alias `@/*`? | **Ja** | `@/components/x` ipv `../../components/x` |
Lege regel + `Cmd+K`:
> "Genereer een TypeScript interface voor een User met name, email, role"
### Starten
AI inserts code.
```bash
cd mijn-eerste-cursor-app
npm run dev # → http://localhost:3000
```
### Wanneer
### Openen in Cursor
- Snelle wijziging op één plek
- Code generaten tussen bestaande regels
- Selectie aanpassen
```bash
cursor . # opent huidige folder in Cursor
```
Voor multi-file edits → Composer.
Of: File → Open Folder → kies de map.
---
## 6. Composer / Agent (Cmd+I)
## 6. De drie hoofdsneltoetsen
**Wat:** de zwaarste AI-feature. Multi-file edits met preview van alle diffs.
| Sneltoets | Functie | Kost |
|-----------|---------|------|
| **Tab** | Accept AI auto-completion | **Gratis** |
| **Cmd+K** | Inline edit op selectie | 1 request |
| **Cmd+L** | Chat-paneel openen | 1 request |
### Tab — autocomplete
Cursor analyseert je hele bestand én recente edits. Hij suggereert hele blokken code, niet alleen één woord.
**Voorbeeld:** typ een commentaar `// render team list` op een lege regel. Cursor genereert de hele component eronder. Druk **Tab** om te accepteren, **Esc** om te negeren.
**Wanneer:** boilerplate, herhalende patronen, voorspelbare code (CRUD, list renders).
### Cmd+K — inline edit
Voor gerichte één-bestand-wijzigingen.
**Stappen:**
1. Selecteer code (of zet cursor op een regel)
2. Druk **Cmd+K**
3. Input-balkje opent boven je code
4. Typ je instructie: *"converteer naar TypeScript"*
5. Cursor toont een **diff direct in de editor**
6. **Tab** = Accept, **Esc** = Reject
**Wanneer:** variabele hernoemen, één functie refactoren, types toevoegen, commentaar uitleggen.
### Cmd+L — Chat
Voor vragen en grotere taken.
**Stappen:**
1. Druk **Cmd+L** — chat-paneel opent rechts
2. Optioneel: gebruik `@`-mentions voor context (zie volgende sectie)
3. Typ je vraag of taak
4. Cursor antwoordt + kan diffs voorstellen
5. Apply / Reject per file
**Wanneer:** uitleg vragen, grote multi-file taken, code-review.
---
## 7. Context via `@`-mentions
In Cmd+L (chat) type je `@` voor een autocomplete-menu:
| Tag | Wat het doet |
|-----|--------------|
| `@file:foo.tsx` | inclusief één specifiek bestand |
| `@folder:components` | hele map |
| `@code:functionName` | losse functie of class |
| `@docs:Next.js` | officiële Next.js docs (eerst configureren) |
| `@web` | live web-search |
| `@git` | git history / blame |
**Voorbeeld:**
```
@file:page.tsx Refactor deze component zodat hij @docs:React useReducer gebruikt in plaats van useState.
```
---
## 8. Request management
500 requests per maand klinkt veel, maar zonder discipline ben je er in een week doorheen.
### Tips
- **Combineer in 1 Cmd+L:** *"maak een Hero met titel, ondertitel, twee CTA-knoppen, gradient achtergrond en responsive"* = één request voor een hele feature.
- **Tab is gratis** — gebruik het voor alles wat eenvoudig is.
- **Cmd+K voor gerichte edits** — niet voor "maak iets nieuws".
- **Cmd+L met `@file`** — bespaar Cursor het zoeken naar context.
### Anti-patterns
- Tien losse Cmd+K's voor één feature
- Cmd+L met te weinig context (*"maak iets cools"*)
- Vergeten dat Tab bestaat
---
## 9. `.cursorrules`
Een bestand in de root van je project dat Cursor bij elke prompt meeleest.
### Voorbeeld
`Cmd+I` opent Composer panel:
```text
# .cursorrules
> "Voeg een /about pagina toe met team-leden in een grid. Match styling van homepage. Gebruik Tailwind. Maak een aparte component voor team-member."
Composer:
1. Leest `app/page.tsx` voor stijl
2. Maakt `app/about/page.tsx`
3. Maakt `components/TeamMember.tsx`
4. Toont alle diffs
Jij accepteert per file of "Accept All".
### Wanneer
- Nieuwe features (multi-file)
- Refactors
- Bugfixes die meerdere files raken
### Terminal commands
Composer kan ook terminal-commands runnen — vraagt approval. "Run pnpm install" → Composer doet het.
---
## 7. Tab — predictive completion
Cursor's Tab-completion ziet **wat je gaat typen voordat je 't typt**. Vergelijkbaar met GitHub Copilot maar slimmer (gebruikt je hele file + recent edits).
### Hoe gebruiken
- Type — suggesties verschijnen grijs
- `Tab` — accepteer
- `Esc` — afwijzen
### Cursor Tab vs Copilot
Cursor Tab kan:
- Multi-line suggesties (hele functie ineens)
- Cursor verplaatsen naar volgende edit-locatie (handig bij refactors)
- Suggesties op basis van wat je net hebt geschreven elders
Verschil voelbaar na een dag gebruik.
### Wanneer uitzetten
Soms ga je sneller zonder. Cmd+Shift+P → "Cursor Tab" → toggle.
---
## 8. @-mentions — context erbij halen
`@` in chat of Composer = context kiezen.
### Soorten
| Mention | Wat | Voorbeeld |
|---------|-----|-----------|
| `@File` | Specifieke file | `@app/page.tsx` |
| `@Folder` | Hele folder | `@components/` |
| `@Codebase` | Repo via embeddings | `@Codebase` |
| `@Docs` | Geïmporteerde docs | `@Next.js` |
| `@Web` | Web search | `@Web "Next.js 16 caching"` |
| `@Git` | Recent commits | `@Git` |
| `@Definitions` | Symbols | `@Definitions:UserController` |
### Goede prompts
Zonder mentions: AI gokt welke files relevant zijn (langzamer, soms fout).
Met mentions: AI heeft exact wat 't nodig heeft.
```
@app/api/auth/route.ts @lib/supabase.ts
Voeg een endpoint toe /api/user dat de logged-in user returnt.
Gebruik supabase auth.getUser().
- 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
- Geen any-types; expliciete return types op exports
```
---
### Genereren
## 9. .cursorrules — project-context
Vraag Cursor het zelf in Cmd+L:
**`.cursorrules`** = markdown-file in project-root die Cursor leest bij elke prompt. Net als AGENTS.md in Les 2.
### Voorbeeld
```markdown
# Cursor Rules — QuickPoll
## Stack
- Next.js 16 App Router
- TypeScript strict mode
- Tailwind v4
- Supabase (DB + Auth)
## Conventies
- Server Components default, "use client" alleen waar nodig
- Tailwind classes inline, geen CSS-files
- Geen comments tenzij gevraagd
- Volg bestaande naming (camelCase functions, PascalCase components)
- Throw geen errors uit RSCs — return { error } object
## Verboden
- Gebruik geen Next.js Pages Router (alleen App Router)
- Geen any-types in TypeScript
- Geen inline styles
```
Maak een .cursorrules voor dit Next.js project. Focus op TypeScript strict, Tailwind, en App Router conventies.
```
Cursor stelt een goede basis voor. Pas aan naar smaak en commit het in je repo.
### Effect
AI checkt deze rules bij elke prompt. "Maak een Server Component" wordt automatisch "use client"-vrij. "Voeg comment toe" wordt overgeslagen.
Je hoeft niet elke keer "vergeet niet TypeScript te gebruiken" in je chat te typen. Cursor weet het al.
### Beperkingen
- Cursor's parsing is niet 100% strikt — soms vergeet AI rules
- Hou 'm tussen 30-200 regels (te lang = vergeten)
- Test of rules echt werken — soms moet je expliciet refereren
> **Vooruitblik (Les 14):** in nieuwere Cursor-versies is er ook een `.cursor/rules/`-map met meerdere `.mdc`-bestanden + YAML front-matter (`alwaysApply`, `globs`). Voor nu is `.cursorrules` in de root prima en simpeler.
---
## 10. Debug-flow met AI
## 10. Hands-on — wat je gaat bouwen
### Pattern 1 — Console error
Drie kleine taken in je net gescaffolde project:
Console error → kopieer → in chat plakken:
| Taak | Wat | Sneltoets |
|------|-----|-----------|
| **1** | Hero-component (titel, subtitel, 2 CTA-knoppen, gradient, responsive) | Cmd+L |
| **2** | Styling-tweak: kleuren/spacing van de knoppen | Cmd+K |
| **3** | Extra feature naar keuze: FeatureCards / ContactForm / Footer | Cmd+L of Cmd+K |
```
TypeError: Cannot read property 'name' of undefined
at UserCard (components/UserCard.tsx:12)
```
Daarna `git add . && git commit -m "first cursor build"`.
AI: leest UserCard.tsx, vindt waar `name` undefined kan zijn, suggereert fix.
### Pattern 2 — Onverwachte output
```
Mijn fetchData() returnt undefined ipv users. Hier is de code:
@lib/api.ts
Wat gaat er mis?
```
AI: leest code, identificeert (vaak) async/await issue of missende return.
### Pattern 3 — Tests falen
Run test → copy output → chat:
```
Test "should return user list" faalt:
Expected: Array(3)
Received: undefined
@__tests__/api.test.ts
@lib/api.ts
```
AI: traceert, fixt.
### Pattern 4 — Refactor
```
Refactor @app/api/users/route.ts naar gebruik van Supabase
in plaats van mock-data.
Gebruik @lib/supabase.ts voor de client.
```
Composer doet multi-file edit.
Exacte stappen + voorbeeldprompts: zie `Les03-Lesopdracht.pdf`.
---
## 11. Wanneer Cursor vs Console
## 11. Verder lezen
Cursor is geweldig maar niet altijd het antwoord.
### Cursor wel
- Code schrijven, refactoren, debuggen
- Nieuwe features
- Boilerplate
- Documentatie
### Cursor niet
- Git workflow (gebruik gewoon `git`)
- File-management buiten project (Finder/Explorer)
- Terminal-heavy taken (gewone shell)
- Browser debuggen (DevTools)
- Een quick lookup (ChatGPT/browser)
### Hybride
Veel pro devs: **Cursor voor IDE-werk, Claude.ai voor brainstormen, Terminal voor git**. Gebruik niet één tool voor alles.
- **Cursor docs** — `cursor.com/docs` — features, sneltoetsen, rules-syntax
- **Cursor changelog** — `cursor.com/changelog` — wat is nieuw
- **Next.js docs** — `nextjs.org/docs`
- **Tailwind docs** — `tailwindcss.com/docs`
---
## Bronnen
## Samenvatting
- **Cursor docs:** https://docs.cursor.com
- **Cursor Tab features:** https://docs.cursor.com/tab
- **Cursor Composer:** https://docs.cursor.com/composer
- **.cursorrules examples:** https://github.com/PatrickJS/awesome-cursorrules
- **Cursor changelog:** https://www.cursor.com/changelog
- **Cursor forum (community):** https://forum.cursor.com
Vandaag heb je geleerd:
- Cursor is een VS Code-fork met AI ingebouwd
- Student Plan = 500 requests/maand gratis (via cursor.com/students)
- Drie sneltoetsen: Tab (gratis), Cmd+K (inline edit), Cmd+L (chat)
- Context via `@`-mentions: file, folder, code, docs, web, git
- `.cursorrules` per project voor consistente AI-output
- Eerste hands-on met Hero / tweak / extra feature
Volgende les: TypeScript Fundamentals. Veel later (Les 14): Cursor 3 deep dive met Editor / Agents Window en deployment.