1034 lines
36 KiB
Markdown
1034 lines
36 KiB
Markdown
# Les 3: Cursor - AI-Powered Code Editor
|
|
## Slide-Overzicht (180 minuten / 3 uur)
|
|
|
|
---
|
|
|
|
## BLOK 1: WELKOM & MEDEDELING
|
|
### *Duur: 10 minuten | Slides 1-4*
|
|
|
|
---
|
|
|
|
### **Slide 1: Titelslide**
|
|
**Les 3: Cursor - AI-Powered Code Editor**
|
|
|
|
```
|
|
╔════════════════════════════════════════╗
|
|
║ LES 3: CURSOR ║
|
|
║ AI-Powered Code Editor ║
|
|
║ ║
|
|
║ Tim ║
|
|
║ NOVI Hogeschool ║
|
|
╚════════════════════════════════════════╝
|
|
```
|
|
|
|
**Timing:** 2 minuten
|
|
|
|
---
|
|
|
|
### **Slide 2: Planning Vandaag**
|
|
|
|
| Blok | Onderdeel | Duur |
|
|
|------|-----------|------|
|
|
| **Blok 1** | Welkom & Mededeling | 10 min |
|
|
| **Blok 2** | Installatie & Setup | 20 min |
|
|
| **Blok 3** | Cursor Features | 15 min |
|
|
| **Blok 4** | Skills, Rules & Requests | 15 min |
|
|
| **Blok 5** | Live Demo: Nieuw Project | 15 min |
|
|
| **PAUZE** | | 15 min |
|
|
| **Blok 6** | Hands-On Opdracht | 75 min |
|
|
| **Blok 7** | Afsluiting | 15 min |
|
|
|
|
**Timing:** 2 minuten
|
|
|
|
**Doelen van vandaag:**
|
|
- Cursor installeren en setup afronden
|
|
- Cursor Skills installeren (Next.js, React, Tailwind)
|
|
- .cursorrules genereren met AI Chat
|
|
- Nieuw project opzetten met npx create-next-app
|
|
- Een component bouwen volgens de regels
|
|
|
|
---
|
|
|
|
### **Slide 3: Mededeling Huiswerk & Les 2 Terugblik**
|
|
|
|
**Wat is er gebeurd in Les 2?**
|
|
- Jullie hebben OpenCode gebruikt voor AI-assisted development
|
|
- OpenCode had **token limieten** op free plan → snel op
|
|
- Terminal problemen: EACCES, permission denied, SSH issues
|
|
|
|
**Waarom schakelen we over naar Cursor?**
|
|
- ✅ Cursor is **ontworpen** voor developers
|
|
- ✅ Gratis **Student plan** beschikbaar (500 fast requests/maand)
|
|
- ✅ VS Code fork → **terminal ingebouwd** (geen losse terminal nodig)
|
|
- ✅ Leest je hele codebase als context
|
|
- ✅ Installeerbare **Skills** voor frameworks (Next.js, React, Tailwind)
|
|
|
|
**Timing:** 3 minuten
|
|
|
|
---
|
|
|
|
### **Slide 4: Wat is Cursor?**
|
|
|
|
```
|
|
╔════════════════════════════════════════╗
|
|
║ CURSOR = VS CODE + AI ║
|
|
║ ║
|
|
║ • Gebaseerd op VS Code ║
|
|
║ • Ingebouwde AI assistent ║
|
|
║ • Gratis voor studenten (Pro plan) ║
|
|
║ • 500 fast requests/maand ║
|
|
║ ║
|
|
║ Models beschikbaar: ║
|
|
║ - GPT-4o (standaard) ║
|
|
║ - Claude 3.5 Sonnet ║
|
|
║ - Claude 3.5 Haiku (sneller) ║
|
|
╚════════════════════════════════════════╝
|
|
```
|
|
|
|
**Key Features:**
|
|
1. **Chat Panel (Ctrl+L)** - Vraag AI over je code
|
|
2. **Inline Edit (Ctrl+K)** - Selecteer code → AI past aan
|
|
3. **Composer (Ctrl+I)** - Multi-file edits voor grotere taken
|
|
4. **Tab Completion** - AI voorspelt je volgende lijn code
|
|
5. **@ Mentions** - Context geven: @file, @folder, @web, @docs
|
|
|
|
**Pricing (voor ons):**
|
|
- **Hobby account** (gratis) = Beperkte requests, langzamer
|
|
- **Student Pro** (gratis via cursor.com/students) = 500 fast requests/maand
|
|
- ⚠️ Start vandaag met Hobby, upgrade naar Student later
|
|
|
|
**Timing:** 3 minuten
|
|
|
|
---
|
|
|
|
## BLOK 2: INSTALLATIE & SETUP
|
|
### *Duur: 20 minuten | Slides 5-8*
|
|
|
|
---
|
|
|
|
### **Slide 5: Download Cursor**
|
|
|
|
**Stap 1: Ga naar cursor.com**
|
|
|
|
```
|
|
Kies je besturingssysteem:
|
|
├── 🍎 macOS (Intel / Apple Silicon)
|
|
├── 🪟 Windows (Installer)
|
|
└── 🐧 Linux (Snap / Appimage / Deb)
|
|
```
|
|
|
|
**Installatie:**
|
|
- **macOS:** Open `.dmg`, sleep Cursor naar Applications folder
|
|
- **Windows:** Run installer, default locations
|
|
- **Linux:** Snap of direct executable
|
|
|
|
**Controle:**
|
|
Na installatie, start Cursor → je ziet welcome screen
|
|
|
|
**Timing:** 3 minuten
|
|
|
|
---
|
|
|
|
### **Slide 6: Account Aanmaken & Student Plan**
|
|
|
|
**Stap 1: Start Cursor → Sign Up**
|
|
|
|
**Stap 2: Kies HOBBY account**
|
|
```
|
|
┌─────────────────────────────────────────┐
|
|
│ ACCOUNT OPTIONS │
|
|
├─────────────────────────────────────────┤
|
|
│ ✓ Hobby (gratis, basic features) │
|
|
│ → Start hier! │
|
|
│ │
|
|
│ ○ Student (gratis, 500 fast requests) │
|
|
│ → Upgrade later via cursor.com/students│
|
|
│ │
|
|
│ ○ Pro (betaald) │
|
|
│ → Niet nodig voor ons │
|
|
└─────────────────────────────────────────┘
|
|
```
|
|
|
|
**Stap 3: E-mail & wachtwoord → verifieer e-mail**
|
|
|
|
**Stap 4: UPGRADE NAAR STUDENT (vandaag of morgen)**
|
|
1. Ga naar https://cursor.com/students
|
|
2. Log in met je account
|
|
3. Voer NOVI e-mail in
|
|
4. Volg verification process
|
|
|
|
**⚠️ CHECKPOINT: Je ziet Cursor welcome screen**
|
|
|
|
**Timing:** 5 minuten
|
|
|
|
---
|
|
|
|
### **Slide 7: Interface Tour - De Onderdelen**
|
|
|
|
```
|
|
╔════════════════════════════════════════════════════════════╗
|
|
║ CURSOR INTERFACE ║
|
|
╠════════════════════════════════════════════════════════════╣
|
|
║ ┌────────────────────────────────────────────────────────┐ ║
|
|
║ │ ACTIVITY BAR │ ║
|
|
║ │ (Links: Explorer, Search, Source Control, Extensions) │ ║
|
|
║ └────────────────────────────────────────────────────────┘ ║
|
|
║ ┌────────────────────────────────────────────────────────┐ ║
|
|
║ │ SIDEBAR │ EDITOR │ CHAT │ ║
|
|
║ │ (Files/Folders) │ (Code hier) │ (Ctrl+L)│ ║
|
|
║ │ │ │ │ ║
|
|
║ │ • project/ │ import... │ ╭─────╮ │ ║
|
|
║ │ ├── src/ │ │ │ Chat│ ║
|
|
║ │ ├── public/ │ function... │ ╰─────╯ ║
|
|
║ │ └── package.json │ │ │ ║
|
|
║ └────────────────────────────────────────────────────────┘ ║
|
|
║ ┌────────────────────────────────────────────────────────┐ ║
|
|
║ │ TERMINAL (Ctrl+`) │ ║
|
|
║ │ $ npm run dev │ ║
|
|
║ └────────────────────────────────────────────────────────┘ ║
|
|
╚════════════════════════════════════════════════════════════╝
|
|
```
|
|
|
|
**Belangrijkste onderdelen:**
|
|
|
|
| Onderdeel | Functie | Shortcut |
|
|
|-----------|---------|----------|
|
|
| **Sidebar** | Bekijk bestanden/folders | Ctrl+B (toggle) |
|
|
| **Editor** | Schrijf en edit je code | Midden |
|
|
| **Terminal** | Run commands (npm, git, etc.) | Ctrl+` |
|
|
| **Chat Panel** | Vraag AI over je code | Ctrl+L |
|
|
| **Command Palette** | Commands zoeken | Ctrl+Shift+P |
|
|
|
|
**Timing:** 4 minuten
|
|
|
|
---
|
|
|
|
### **Slide 8: Terminal Setup Check - SAMEN DOEN**
|
|
|
|
**Stap 1: Open Terminal** → Druk `Ctrl+`` (backtick)
|
|
|
|
**Stap 2: Run deze commands (1 per 1)**
|
|
|
|
```bash
|
|
# Check Node.js versie
|
|
node -v
|
|
# Verwacht: v20.x.x of hoger ✓
|
|
|
|
# Check Git versie
|
|
git --version
|
|
# Verwacht: git version 2.x.x ✓
|
|
|
|
# Check npm
|
|
npm -v
|
|
# Verwacht: 10.x.x ✓
|
|
|
|
# Check npx (nodig voor create-next-app!)
|
|
npx -v
|
|
# Verwacht: 10.x.x ✓ (zelfde versie als npm)
|
|
```
|
|
|
|
**Veel voorkomende errors & fixes:**
|
|
|
|
```
|
|
ERROR: "command not found: node"
|
|
→ Node.js niet geïnstalleerd
|
|
→ FIX: Download van nodejs.org (v20+) of gebruik nvm
|
|
|
|
ERROR: "command not found: npx"
|
|
→ Oude Node versie of npm niet goed geïnstalleerd
|
|
→ FIX: npm install -g npx OF nvm install 20
|
|
|
|
ERROR: "EACCES: permission denied"
|
|
→ FIX: chmod +x [bestand] of gebruik nvm
|
|
```
|
|
|
|
**⚠️ CHECKPOINT: node, git, npm EN npx werken allemaal**
|
|
|
|
**Timing:** 8 minuten
|
|
|
|
---
|
|
|
|
## BLOK 3: CURSOR FEATURES
|
|
### *Duur: 15 minuten | Slides 9-13*
|
|
|
|
---
|
|
|
|
### **Slide 9: Chat Panel (Ctrl+L)**
|
|
|
|
**Wat is Chat Panel?**
|
|
Vraag AI vragen over je code. AI kan je hele codebase zien.
|
|
|
|
**Hoe gebruik je het:**
|
|
```
|
|
1. Druk Ctrl+L
|
|
2. Chat panel opent rechts
|
|
3. Type je vraag
|
|
4. AI analyseert en antwoordt
|
|
|
|
VOORBEELD VRAGEN:
|
|
├─ "Wat doet deze functie?"
|
|
├─ "Hoe kan ik dit component beter maken?"
|
|
├─ "Genereer een .cursorrules voor dit project"
|
|
├─ "Leg uit wat package.json doet"
|
|
└─ "Wat zijn alle routes in dit project?"
|
|
```
|
|
|
|
**Pro tip:** Wees specifiek in je vragen → bespaart requests!
|
|
|
|
**Timing:** 3 minuten
|
|
|
|
---
|
|
|
|
### **Slide 10: Inline Edit (Ctrl+K)**
|
|
|
|
**Wat is Inline Edit?**
|
|
Selecteer code → geef AI instructie → AI past aan.
|
|
|
|
**Hoe gebruik je het:**
|
|
|
|
```
|
|
STAP 1: Selecteer code (klik+drag)
|
|
STAP 2: Druk Ctrl+K → prompt popup
|
|
STAP 3: Type je instructie
|
|
STAP 4: Accept (Enter) of Reject (Esc)
|
|
```
|
|
|
|
**VOORBEELD:**
|
|
```javascript
|
|
// Origineel (inline styles):
|
|
<div style={{padding: '20px', backgroundColor: 'blue'}}>
|
|
|
|
// Selecteer, Ctrl+K: "Converteer naar Tailwind classes"
|
|
|
|
// Result:
|
|
<div className="p-5 bg-blue-500">
|
|
```
|
|
|
|
**Wanneer:** Kleine aanpassingen, styling, inline styles → Tailwind
|
|
|
|
**Timing:** 3 minuten
|
|
|
|
---
|
|
|
|
### **Slide 11: Composer (Ctrl+I)**
|
|
|
|
**Wat is Composer?**
|
|
Multi-file editor: grote opdrachten, meerdere files tegelijk.
|
|
|
|
**Hoe gebruik je het:**
|
|
|
|
```
|
|
STAP 1: Druk Ctrl+I → Composer opent
|
|
STAP 2: Typ je taak
|
|
"Voeg /about pagina toe met hero en content sectie"
|
|
STAP 3: AI creëert plan + preview
|
|
STAP 4: Review & Accept alle changes
|
|
```
|
|
|
|
**VOORBEELD:**
|
|
```
|
|
Je zegt: "Maak een ContactForm component met Tailwind"
|
|
Composer maakt aan:
|
|
├─ components/ContactForm.tsx
|
|
├─ Update app/contact/page.tsx
|
|
└─ Voegt form validatie toe
|
|
```
|
|
|
|
**Wanneer:** Nieuwe pagina's, grote features, meerdere files
|
|
|
|
**Timing:** 3 minuten
|
|
|
|
---
|
|
|
|
### **Slide 12: Tab Completion**
|
|
|
|
**Wat is Tab Completion?**
|
|
AI voorspelt je volgende lijn code terwijl je typt.
|
|
|
|
```
|
|
Je typt:
|
|
const users = fetch(
|
|
|
|
AI voorstelt (grijs):
|
|
const users = fetch('/api/users')
|
|
.then(res => res.json())
|
|
|
|
Je drukt TAB → ingevoegd!
|
|
```
|
|
|
|
**Pro tip:** Tab completion is GRATIS / kost geen premium requests!
|
|
→ Gebruik dit zo veel mogelijk i.p.v. Chat/Composer voor kleine dingen.
|
|
|
|
**Timing:** 2 minuten
|
|
|
|
---
|
|
|
|
### **Slide 13: @ Mentions - Context geven**
|
|
|
|
```
|
|
@file → Specifiek bestand meegeven
|
|
@folder → Hele folder meegeven
|
|
@web → Internet zoeken
|
|
@docs → Documentatie referenties (Next.js, React, Tailwind!)
|
|
```
|
|
|
|
**VOORBEELD:**
|
|
```
|
|
"Hoe maak ik een server component? @docs Next.js"
|
|
→ AI zoekt in Next.js documentatie voor antwoord
|
|
```
|
|
|
|
**Timing:** 2 minuten
|
|
|
|
---
|
|
|
|
## BLOK 4: SKILLS, RULES & REQUESTS
|
|
### *Duur: 15 minuten | Slides 14-16*
|
|
|
|
---
|
|
|
|
### **Slide 14: Cursor Skills Installeren**
|
|
|
|
**⚠️ SAMEN DOEN - Iedereen volgt mee!**
|
|
|
|
**Wat zijn Cursor Skills/Docs?**
|
|
Documentatie die Cursor kan raadplegen via @docs. Hierdoor begrijpt AI je frameworks beter.
|
|
|
|
**Stap 1: Open Cursor Settings**
|
|
```
|
|
Ctrl+Shift+P → "Cursor Settings" → Features → Docs
|
|
```
|
|
|
|
**Stap 2: Voeg documentatie toe**
|
|
```
|
|
┌─────────────────────────────────────────┐
|
|
│ + Add new doc │
|
|
├─────────────────────────────────────────┤
|
|
│ 1. Next.js │
|
|
│ URL: https://nextjs.org/docs │
|
|
│ │
|
|
│ 2. React │
|
|
│ URL: https://react.dev │
|
|
│ │
|
|
│ 3. Tailwind CSS │
|
|
│ URL: https://tailwindcss.com/docs │
|
|
│ │
|
|
│ (Optioneel) │
|
|
│ 4. shadcn/ui │
|
|
│ URL: https://ui.shadcn.com │
|
|
└─────────────────────────────────────────┘
|
|
```
|
|
|
|
**Stap 3: Test het!**
|
|
```
|
|
Chat (Ctrl+L): "Hoe maak ik een layout in Next.js? @docs Next.js"
|
|
→ AI gebruikt de officiële Next.js docs als bron
|
|
```
|
|
|
|
**Waarom?**
|
|
- AI geeft betere, up-to-date antwoorden
|
|
- Geen verouderde patterns
|
|
- Specifiek voor jouw stack
|
|
|
|
**⚠️ CHECKPOINT: Minimaal Next.js en Tailwind docs toegevoegd**
|
|
|
|
**Timing:** 5 minuten
|
|
|
|
---
|
|
|
|
### **Slide 15: .cursorrules - Genereren met AI Chat**
|
|
|
|
**Wat is .cursorrules?**
|
|
Een bestand in je project root dat AI vertelt hoe jij wilt werken.
|
|
|
|
**⚠️ WE GAAN DIT NIET HANDMATIG SCHRIJVEN**
|
|
We laten Cursor Chat het genereren! Dat bespaart tijd en geeft een goed startpunt.
|
|
|
|
**Hoe:**
|
|
```
|
|
STAP 1: Open Chat (Ctrl+L)
|
|
|
|
STAP 2: Typ dit prompt:
|
|
"Genereer een .cursorrules bestand voor een Next.js project.
|
|
Het project gebruikt:
|
|
- Next.js App Router
|
|
- Tailwind CSS voor styling
|
|
- TypeScript
|
|
- Functional components met React hooks
|
|
- Nederlandse comments
|
|
Maak regels voor file structure, naming conventions,
|
|
en styling guidelines."
|
|
|
|
STAP 3: Kopieer de output
|
|
|
|
STAP 4: Maak nieuw bestand: .cursorrules (in project root)
|
|
|
|
STAP 5: Paste + Save (Ctrl+S)
|
|
```
|
|
|
|
**Dit kost 1 request → efficiënt!**
|
|
|
|
**Timing:** 5 minuten
|
|
|
|
---
|
|
|
|
### **Slide 16: Request Management - Hobby Account Tips**
|
|
|
|
**⚠️ BELANGRIJK: Jullie requests zijn beperkt!**
|
|
|
|
**Hobby account:** Beperkt aantal premium requests per maand
|
|
**Student account:** 500 fast requests per maand (upgrade z.s.m.!)
|
|
|
|
**Hoe zuinig omgaan met requests:**
|
|
|
|
```
|
|
╔════════════════════════════════════════════════════════╗
|
|
║ GRATIS / GOEDKOOP: ║
|
|
║ ✅ Tab Completion (kost GEEN premium request) ║
|
|
║ ✅ Code typen met AI suggesties ║
|
|
║ ║
|
|
║ KOST 1 REQUEST: ║
|
|
║ ⚡ Chat vraag (Ctrl+L) ║
|
|
║ ⚡ Inline Edit (Ctrl+K) ║
|
|
║ ⚡ Composer actie (Ctrl+I) ║
|
|
║ ║
|
|
║ TIPS OM REQUESTS TE BESPAREN: ║
|
|
║ 1. Denk EERST, prompt DAARNA ║
|
|
║ 2. Combineer taken in 1 prompt ║
|
|
║ ✗ "Maak een button" → "Maak het blauw" ║
|
|
║ → "Voeg hover toe" = 3 requests ║
|
|
║ ✓ "Maak een blauwe button met hover effect" ║
|
|
║ = 1 request! ║
|
|
║ 3. Gebruik Tab Completion voor kleine dingen ║
|
|
║ 4. Lees error messages ZELF eerst ║
|
|
║ 5. Gebruik @docs voor framework vragen ║
|
|
╚════════════════════════════════════════════════════════╝
|
|
```
|
|
|
|
**Timing:** 5 minuten
|
|
|
|
---
|
|
|
|
## BLOK 5: LIVE DEMO - NIEUW PROJECT
|
|
### *Duur: 15 minuten | Slide 17*
|
|
|
|
---
|
|
|
|
### **Slide 17: Demo - Nieuw Project Opzetten (blijft op scherm)**
|
|
|
|
**Docent demonstreert de HELE workflow die studenten straks zelf doen:**
|
|
|
|
```
|
|
╔═════════════════════════════════════════════════════════╗
|
|
║ LIVE DEMO: NIEUW PROJECT ║
|
|
╠═════════════════════════════════════════════════════════╣
|
|
║ ║
|
|
║ STAP 1: Git Repository (2 min) ║
|
|
║ ├─ $ mkdir my-cursor-project ║
|
|
║ ├─ $ cd my-cursor-project ║
|
|
║ ├─ $ git init ║
|
|
║ └─ Open in Cursor: File → Open Folder ║
|
|
║ ║
|
|
║ STAP 2: npx Scaffold (3 min) ║
|
|
║ ├─ Terminal in Cursor (Ctrl+`) ║
|
|
║ ├─ $ npx create-next-app@latest . ║
|
|
║ │ ├─ TypeScript? → Yes ║
|
|
║ │ ├─ ESLint? → Yes ║
|
|
║ │ ├─ Tailwind CSS? → Yes ║
|
|
║ │ ├─ src/ directory? → Yes ║
|
|
║ │ ├─ App Router? → Yes ║
|
|
║ │ └─ Import alias? → @/* (default) ║
|
|
║ └─ $ npm run dev → localhost:3000 ║
|
|
║ ║
|
|
║ STAP 3: Skills Check (1 min) ║
|
|
║ ├─ Settings → Docs → Next.js, React, Tailwind ║
|
|
║ └─ (al gedaan in Slide 14) ║
|
|
║ ║
|
|
║ STAP 4: .cursorrules via Chat (3 min) ║
|
|
║ ├─ Ctrl+L → Chat ║
|
|
║ ├─ "Genereer .cursorrules voor Next.js + Tailwind" ║
|
|
║ ├─ Kopieer output → maak .cursorrules ║
|
|
║ └─ Save (Ctrl+S) → 1 request gebruikt ║
|
|
║ ║
|
|
║ STAP 5: Component Bouwen (4 min) ║
|
|
║ ├─ Ctrl+I → Composer ║
|
|
║ ├─ "Maak een HeroSection component met: ║
|
|
║ │ - Grote titel, subtitel ║
|
|
║ │ - Gradient achtergrond ║
|
|
║ │ - CTA button ║
|
|
║ │ - Tailwind styling, responsive" ║
|
|
║ ├─ Accept → component gemaakt ║
|
|
║ ├─ Voeg toe aan page.tsx ║
|
|
║ └─ Refresh browser → ZIE RESULTAAT! ║
|
|
║ ║
|
|
║ STAP 6: Git Commit (2 min) ║
|
|
║ ├─ $ git add . ║
|
|
║ ├─ $ git commit -m "Initial project with hero" ║
|
|
║ └─ (Push naar GitHub komt later) ║
|
|
║ ║
|
|
╚═════════════════════════════════════════════════════════╝
|
|
```
|
|
|
|
**Kernboodschap:** "Van niks naar werkende website in 15 minuten!"
|
|
|
|
**Timing:** 15 minuten (hele blok is demo)
|
|
|
|
---
|
|
|
|
## BLOK 6: HANDS-ON OPDRACHT
|
|
### *Duur: 75 minuten + 15 minuten pauze | Slide 18*
|
|
|
|
---
|
|
|
|
### **Slide 18: Aan de Slag! (blijft op scherm)**
|
|
|
|
```
|
|
╔════════════════════════════════════════════════════════════╗
|
|
║ LES 3 HANDS-ON OPDRACHT ║
|
|
║ Bouw je eigen project met Cursor! ║
|
|
╚════════════════════════════════════════════════════════════╝
|
|
|
|
STAP 1: NIEUW PROJECT AANMAKEN
|
|
═════════════════════════════════════════════════════════════
|
|
|
|
□ Open Cursor Terminal (Ctrl+`)
|
|
|
|
□ Maak een nieuwe map:
|
|
$ mkdir ~/projects/mijn-project
|
|
$ cd ~/projects/mijn-project
|
|
|
|
□ Initialiseer Git:
|
|
$ git init
|
|
|
|
□ Scaffold met npx:
|
|
$ npx create-next-app@latest .
|
|
|
|
Antwoorden op de vragen:
|
|
┌────────────────────────────────────┐
|
|
│ TypeScript? → Yes │
|
|
│ ESLint? → Yes │
|
|
│ Tailwind CSS? → Yes │
|
|
│ src/ directory? → Yes │
|
|
│ App Router? → Yes │
|
|
│ Import alias @/*? → Yes (Enter) │
|
|
└────────────────────────────────────┘
|
|
|
|
□ Start dev server:
|
|
$ npm run dev
|
|
|
|
□ Open browser: http://localhost:3000
|
|
→ Je ziet de Next.js welcome pagina!
|
|
|
|
✓ CHECKPOINT 1: localhost:3000 toont Next.js default pagina
|
|
|
|
|
|
STAP 2: CURSOR CONFIGUREREN
|
|
═════════════════════════════════════════════════════════════
|
|
|
|
□ Check dat je Docs/Skills hebt (Slide 14):
|
|
Settings → Features → Docs
|
|
→ Next.js, React, Tailwind moeten erin staan
|
|
|
|
□ Genereer .cursorrules via Chat:
|
|
Ctrl+L → Chat Panel
|
|
Typ: "Genereer een .cursorrules bestand voor dit project.
|
|
We gebruiken Next.js App Router, Tailwind CSS,
|
|
TypeScript, en functional components met hooks.
|
|
Nederlandse comments. Geef regels voor
|
|
file structure, naming, en styling."
|
|
|
|
□ Maak .cursorrules bestand:
|
|
- File → New File → naam: .cursorrules
|
|
- Plak de output van Chat
|
|
- Save (Ctrl+S)
|
|
|
|
⚡ Dit kostte 1 request - goed besteed!
|
|
|
|
✓ CHECKPOINT 2: .cursorrules staat in project root
|
|
|
|
|
|
STAP 3: BOUW EEN COMPONENT (de fun part!)
|
|
═════════════════════════════════════════════════════════════
|
|
|
|
⚠️ LET OP: Combineer taken in 1 prompt om requests te sparen!
|
|
|
|
TAAK 1: HERO COMPONENT (Composer, 1 request)
|
|
─────────────────────────────────────────────
|
|
□ Druk Ctrl+I → Composer
|
|
□ Typ: "Maak een HeroSection component in
|
|
src/components/HeroSection.tsx.
|
|
Met grote titel, subtitel, gradient achtergrond,
|
|
CTA button, responsive Tailwind styling.
|
|
Voeg de HeroSection toe aan src/app/page.tsx
|
|
(vervang de default Next.js content)."
|
|
□ Review de preview
|
|
□ Click Accept
|
|
□ Refresh localhost:3000 → ZIE JE HERO!
|
|
|
|
→ DOEL: 1 Composer prompt = werkend component!
|
|
|
|
|
|
TAAK 2: STYLING TWEAKEN (Inline Edit, 1 request)
|
|
─────────────────────────────────────────────────
|
|
□ Open src/components/HeroSection.tsx
|
|
□ Selecteer de hele component code
|
|
□ Druk Ctrl+K → Inline Edit
|
|
□ Typ: "Voeg een hover animatie toe aan de button.
|
|
Maak de gradient mooier met meer kleuren.
|
|
Zorg voor goede spacing op mobiel."
|
|
□ Accept (Enter)
|
|
□ Refresh browser → Verbeterd!
|
|
|
|
→ DOEL: Quick styling fix met 1 request
|
|
|
|
|
|
TAAK 3: EXTRA FEATURE (Composer, 1 request)
|
|
────────────────────────────────────────────
|
|
□ Druk Ctrl+I → Composer
|
|
□ Kies EEN van deze:
|
|
A) "Maak een FeatureCards component met 3 cards.
|
|
Elke card heeft een icon (emoji), titel, en tekst.
|
|
Responsive grid: 1 kolom mobiel, 3 kolommen desktop.
|
|
Tailwind styling. Voeg toe onder de Hero op page.tsx."
|
|
|
|
B) "Maak een ContactForm component met naam, email,
|
|
en bericht velden. Tailwind styling.
|
|
Voeg toe op een nieuwe /contact pagina."
|
|
|
|
C) "Maak een Footer component met links, copyright,
|
|
en social media icons (emoji). Voeg toe aan layout.tsx."
|
|
|
|
□ Accept → Refresh browser
|
|
|
|
→ DOEL: 2e component gemaakt = project groeit!
|
|
|
|
✓ CHECKPOINT 3: Minimaal 2 componenten werken op je site
|
|
|
|
|
|
STAP 4: GIT COMMIT
|
|
═════════════════════════════════════════════════════════════
|
|
|
|
□ Terminal (Ctrl+`) in Cursor:
|
|
$ git add .
|
|
$ git commit -m "Add hero and feature components"
|
|
|
|
□ (Optioneel) Maak GitHub repo en push:
|
|
$ gh repo create mijn-project --public --source=. --push
|
|
OF:
|
|
Ga naar github.com → New Repository → volg instructies
|
|
|
|
✓ CHECKPOINT 4: Code gecommit!
|
|
|
|
|
|
═════════════════════════════════════════════════════════════
|
|
☕ PAUZE: 10:15 - 10:30 (15 minuten)
|
|
═════════════════════════════════════════════════════════════
|
|
|
|
Na pauze: Verder bouwen! Voeg meer componenten toe.
|
|
Gebruik je overige requests SLIM.
|
|
|
|
|
|
═════════════════════════════════════════════════════════════
|
|
NA PAUZE: VERDER BOUWEN
|
|
═════════════════════════════════════════════════════════════
|
|
|
|
□ Voeg nog 1-2 componenten toe met Composer
|
|
(let op: je requests zijn beperkt!)
|
|
|
|
□ Gebruik Tab Completion voor kleine code (GRATIS!)
|
|
|
|
□ Gebruik Inline Edit voor styling fixes (1 request per fix)
|
|
|
|
□ Probeer @docs te gebruiken:
|
|
Chat: "Hoe werkt de App Router? @docs Next.js"
|
|
|
|
|
|
═════════════════════════════════════════════════════════════
|
|
DOELEN BEREIKT?
|
|
═════════════════════════════════════════════════════════════
|
|
|
|
✓ Nieuw project gescaffold met npx
|
|
✓ Cursor Skills/Docs geïnstalleerd
|
|
✓ .cursorrules gegenereerd met Chat
|
|
✓ Minimaal 2 componenten gebouwd
|
|
✓ Alles werkt op localhost:3000
|
|
✓ Git commits gemaakt
|
|
✓ Requests slim gebruikt! 🎉
|
|
|
|
|
|
═════════════════════════════════════════════════════════════
|
|
HELP NODIG?
|
|
═════════════════════════════════════════════════════════════
|
|
|
|
npx create-next-app faalt:
|
|
→ Check Node versie: node -v (moet v18+)
|
|
→ Probeer: npx create-next-app@latest mijn-project
|
|
|
|
npm run dev faalt:
|
|
→ Check of je in de juiste map staat: pwd
|
|
→ $ rm -rf node_modules && npm install
|
|
|
|
Cursor Chat/Composer reageert niet:
|
|
→ Check internet
|
|
→ Check requests: cursor.com/account
|
|
→ Restart Cursor
|
|
|
|
Git problemen:
|
|
→ $ git status → check wat er mis is
|
|
→ $ git add . && git commit -m "message"
|
|
```
|
|
|
|
**Timing:** 75 minuten + 15 minuten pauze
|
|
|
|
---
|
|
|
|
## BLOK 7: AFSLUITING
|
|
### *Duur: 15 minuten | Slides 19-22*
|
|
|
|
---
|
|
|
|
### **Slide 19: Resultaten Delen**
|
|
|
|
**Show & Tell (5 minuten)**
|
|
|
|
```
|
|
╔═══════════════════════════════════════════════════════╗
|
|
║ TOON JE PROJECT AAN DE KLAS ║
|
|
║ (3-4 studenten, ~1 minuut per project) ║
|
|
╚═══════════════════════════════════════════════════════╝
|
|
```
|
|
|
|
**Wat we kijken naar:**
|
|
- Welke componenten heb je gemaakt? ✓
|
|
- Werkt het op localhost? ✓
|
|
- Hoe veel requests heb je gebruikt? ✓
|
|
- Hoe ziet je .cursorrules eruit? ✓
|
|
|
|
**Timing:** 5 minuten
|
|
|
|
---
|
|
|
|
### **Slide 20: Samenvatting**
|
|
|
|
```
|
|
╔════════════════════════════════════════════════════════╗
|
|
║ CURSOR - WAT HEBBEN WE GELEERD? ║
|
|
╠════════════════════════════════════════════════════════╣
|
|
║ ║
|
|
║ SETUP ║
|
|
║ ├─ Cursor installeren + Hobby/Student account ║
|
|
║ ├─ Skills/Docs toevoegen (Next.js, React, Tailwind) ║
|
|
║ └─ .cursorrules genereren met AI Chat ║
|
|
║ ║
|
|
║ AI FEATURES ║
|
|
║ ├─ Chat (Ctrl+L) → vragen, analyse, genereren ║
|
|
║ ├─ Composer (Ctrl+I) → grote taken, meerdere files ║
|
|
║ ├─ Inline Edit (Ctrl+K) → kleine aanpassingen ║
|
|
║ ├─ Tab Completion → gratis code suggesties ║
|
|
║ └─ @mentions → context geven (@file, @docs) ║
|
|
║ ║
|
|
║ WORKFLOW ║
|
|
║ ├─ npx create-next-app → scaffold ║
|
|
║ ├─ .cursorrules → AI kent je regels ║
|
|
║ ├─ Composer → componenten bouwen ║
|
|
║ └─ git commit → code opslaan ║
|
|
║ ║
|
|
║ REQUEST MANAGEMENT ║
|
|
║ ├─ Tab Completion = GRATIS ║
|
|
║ ├─ Combineer taken in 1 prompt ║
|
|
║ └─ Denk EERST, prompt DAARNA ║
|
|
║ ║
|
|
╚════════════════════════════════════════════════════════╝
|
|
```
|
|
|
|
**Timing:** 3 minuten
|
|
|
|
---
|
|
|
|
### **Slide 21: Huiswerk - Debug Challenge!**
|
|
|
|
**Download het huiswerk-zipbestand van Teams**
|
|
|
|
```
|
|
╔════════════════════════════════════════════════════════╗
|
|
║ LES 3 HUISWERK: DEBUG CHALLENGE ║
|
|
╚════════════════════════════════════════════════════════╝
|
|
|
|
OPDRACHT:
|
|
Download het zipbestand "les3-debug-challenge.zip" van Teams.
|
|
Dit is een Next.js project met EXPRES FOUTEN erin!
|
|
|
|
Jouw taak: Fix ALLE fouten met behulp van Cursor.
|
|
|
|
FOUTEN DIE JE GAAT TEGENKOMEN:
|
|
═════════════════════════════════════════════════════════
|
|
|
|
1. MISSENDE DEPENDENCIES
|
|
→ npm install zal FALEN
|
|
→ Bekijk de error message
|
|
→ Gebruik Cursor Chat: "Welke dependencies missen er?"
|
|
→ Fix package.json en installeer opnieuw
|
|
|
|
2. SYNTAX ERRORS
|
|
→ npm run dev zal ERRORS geven
|
|
→ Lees de error messages in de terminal
|
|
→ Gebruik Cursor om de fouten te vinden en te fixen
|
|
→ Tip: ESLint helpt hier ook!
|
|
|
|
3. INLINE STYLES → TAILWIND
|
|
→ Sommige componenten gebruiken inline styles
|
|
→ Gebruik Inline Edit (Ctrl+K) om ze naar Tailwind
|
|
te converteren
|
|
→ Selecteer de code, Ctrl+K:
|
|
"Converteer alle inline styles naar Tailwind classes"
|
|
|
|
4. SKILL NODIG!
|
|
→ Voor de Tailwind conversie heb je de Tailwind docs
|
|
nodig in Cursor
|
|
→ Check dat je Tailwind docs hebt toegevoegd
|
|
(Settings → Docs)
|
|
|
|
INLEVEREN (voor Les 4):
|
|
═════════════════════════════════════════════════════════
|
|
|
|
□ Werkend project (npm run dev zonder errors)
|
|
□ Alle inline styles omgezet naar Tailwind
|
|
□ Push naar GitHub
|
|
□ Vercel deployment (optioneel maar aanbevolen)
|
|
|
|
POST OP TEAMS:
|
|
→ GitHub link
|
|
→ Screenshot van werkende site
|
|
→ Kort: "Dit waren de fouten die ik tegenkwam en
|
|
hoe ik ze heb opgelost"
|
|
```
|
|
|
|
**Tips:**
|
|
- Lees ERROR MESSAGES - ze vertellen je precies wat fout is
|
|
- Gebruik de terminal in Cursor (niet een losse terminal!)
|
|
- Chat is je vriend: "Wat betekent deze error: [plak error]"
|
|
- Tab Completion is gratis - gebruik het!
|
|
|
|
**Timing:** 5 minuten
|
|
|
|
---
|
|
|
|
### **Slide 22: Volgende Les - Effectief Prompting**
|
|
|
|
```
|
|
╔════════════════════════════════════════════════════════╗
|
|
║ LES 4: EFFECTIEF PROMPTING & ║
|
|
║ ITERATIEF WERKEN MET AI ║
|
|
╚════════════════════════════════════════════════════════╝
|
|
|
|
Onderwerpen:
|
|
├─ Prompt engineering 101 (betere vragen stellen)
|
|
├─ Iteratief refinement (prompt → review → verbeter)
|
|
├─ Debugging met AI (errors → fixes)
|
|
├─ Code reviews met AI
|
|
└─ .cursorrules verfijnen
|
|
|
|
Voorbereiding:
|
|
└─ Huiswerk debug challenge MOET af zijn!
|
|
```
|
|
|
|
**Tot ziens volgende week! 🚀**
|
|
|
|
**Timing:** 2 minuten
|
|
|
|
---
|
|
|
|
## BIJLAGE: TROUBLESHOOTING CHEAT SHEET
|
|
|
|
### Common Issues & Solutions
|
|
|
|
**TERMINAL ISSUES**
|
|
|
|
```
|
|
ERROR: "command not found: npx"
|
|
→ Node.js niet geïnstalleerd of te oude versie
|
|
→ FIX: nvm install 20 && nvm use 20
|
|
|
|
ERROR: "EACCES: permission denied"
|
|
→ File permissions probleem
|
|
→ FIX: gebruik nvm (geen sudo nodig)
|
|
|
|
ERROR: "create-next-app faalt"
|
|
→ Node versie te oud
|
|
→ FIX: node -v (moet v18+), anders nvm install 20
|
|
```
|
|
|
|
**CURSOR ISSUES**
|
|
|
|
```
|
|
Chat/Composer not responding
|
|
→ Check internet connection
|
|
→ Restart Cursor
|
|
→ Check requests: cursor.com/account
|
|
|
|
.cursorrules wordt niet gelezen
|
|
→ Check: bestand in project ROOT (niet in src/)
|
|
→ Check: bestandsnaam exact ".cursorrules" (met punt)
|
|
|
|
Extensions not loading
|
|
→ Command Palette → Reload Window
|
|
```
|
|
|
|
**GIT ISSUES**
|
|
|
|
```
|
|
"fatal: not a git repository"
|
|
→ $ git init (in project folder)
|
|
|
|
"nothing to commit"
|
|
→ Alle files al gecommit, maak eerst wijzigingen
|
|
```
|
|
|
|
---
|
|
|
|
## 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: Nieuw Project | 15 min |
|
|
| **PAUZE** | | **15 min** |
|
|
| 6 | Hands-On Opdracht | 75 min |
|
|
| 7 | Afsluiting | 15 min |
|
|
| **TOTAAL** | | **180 min** |
|
|
|
|
---
|
|
|
|
## NOTITIES VOOR TIM
|
|
|
|
- **Voorbereiding:**
|
|
- Test npx create-next-app op eigen machine
|
|
- Cursor Skills/Docs vooraf toevoegen (Next.js, React, Tailwind)
|
|
- .cursorrules genereren als demo
|
|
- Maak het huiswerk zipbestand klaar met fouten (les3-debug-challenge.zip)
|
|
|
|
- **Huiswerk zip moet bevatten:**
|
|
- Next.js project met:
|
|
- package.json met missende dependency (bijv. `lucide-react` used maar niet in deps)
|
|
- Syntax error in een component (missing closing tag of typo)
|
|
- 3-4 componenten met inline styles (style={{...}}) i.p.v. Tailwind
|
|
- Een component die een import mist
|
|
|
|
- **Tijdens les:**
|
|
- Terminal checks (Slide 8) zijn KRITISCH
|
|
- Benadruk request management VOOR hands-on begint
|
|
- npx create-next-app duurt 1-2 min, laat iedereen wachten
|
|
- Loop rond tijdens hands-on, help met npx/npm issues
|
|
|
|
- **Request bewust:**
|
|
- Demo gebruikt ~3 requests (cursorrules + hero + feature)
|
|
- Studenten moeten ~5-7 requests in de les gebruiken
|
|
- Tab Completion benadrukken als gratis alternatief
|
|
|
|
---
|
|
|
|
**Einde Slide-Overzicht Les 3**
|