# 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):
// Selecteer, Ctrl+K: "Converteer naar Tailwind classes" // Result:
``` **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**