fix: debug challenge
This commit is contained in:
Tim Rijkse
493
Les03-Cursor-Basics/Les03-Bijlage-A-Lesopdracht.md
Normal file
493
Les03-Cursor-Basics/Les03-Bijlage-A-Lesopdracht.md
Normal file
@@ -0,0 +1,493 @@
|
||||
# Les 3: Cursor Basics - Lesopdracht (In-Class Assignment)
|
||||
|
||||
## Doelstelling
|
||||
|
||||
In deze les leer je hoe je **Cursor** effectief gebruikt om snel professionele componenten te bouwen. Je maakt een **NIEUW** Next.js project met Cursor Composer, genereert AI-gegenereerde cursorrules, en oefent met Tab Completion, Chat, Inline Edit en Composer.
|
||||
|
||||
**Eindresultaat:** Een werkende Next.js applicatie met Hero component en Feature Cards, volledig gebouwd met Cursor.
|
||||
|
||||
---
|
||||
|
||||
## Timing
|
||||
|
||||
**Totaal: 85 minuten**
|
||||
- Setup & Git: 10 min
|
||||
- Skills & cursorrules: 10 min
|
||||
- Hero Component (Composer): 20 min
|
||||
- Feature Cards (Composer): 20 min
|
||||
- Inline Edit styling: 15 min
|
||||
- Git commit: 5 min
|
||||
- Buffer: 5 min
|
||||
|
||||
---
|
||||
|
||||
## Voorbereiding
|
||||
|
||||
### Benodigde software
|
||||
- **Cursor** (gedownload en geïnstalleerd van cursor.com)
|
||||
- **Node.js** 18+ en npm
|
||||
- **Git** (voor versiecontrole)
|
||||
- **Terminal/Command Prompt**
|
||||
|
||||
---
|
||||
|
||||
## Stap 1: Project aanmaken met Git (10 minuten)
|
||||
|
||||
### Stap 1.1: Nieuwe folder en Git init
|
||||
|
||||
Open Terminal/Command Prompt op je computer (niet in Cursor nog):
|
||||
|
||||
```bash
|
||||
mkdir les3-cursor-project
|
||||
cd les3-cursor-project
|
||||
git init
|
||||
```
|
||||
|
||||
### Stap 1.2: Open in Cursor
|
||||
|
||||
```bash
|
||||
cursor .
|
||||
```
|
||||
|
||||
Dit opent je lege project in Cursor.
|
||||
|
||||
**Checkpoint 1:** Project is open in Cursor met lege folder.
|
||||
|
||||
### Stap 1.3: Create Next.js app in Cursor Terminal
|
||||
|
||||
Open de Terminal in Cursor met **Ctrl+`** (backtick):
|
||||
|
||||
```bash
|
||||
npx create-next-app@latest . --typescript --tailwind --app
|
||||
```
|
||||
|
||||
Beantwoord alle vragen met **Yes (y)**:
|
||||
- TypeScript? → **Yes**
|
||||
- ESLint? → **Yes**
|
||||
- Tailwind CSS? → **Yes**
|
||||
- `src/` directory? → **No**
|
||||
- App Router? → **Yes**
|
||||
- Default import alias? → **Yes**
|
||||
|
||||
Dit duurt ~2-3 minuten. Wacht tot het klaar is.
|
||||
|
||||
**Checkpoint 2:** Next.js project is aangemaakt. Je ziet `app/`, `components/`, `package.json`, etc. in de file tree.
|
||||
|
||||
---
|
||||
|
||||
## Stap 2: Cursor Skills & Docs (10 minuten)
|
||||
|
||||
### Stap 2.1: Open Settings
|
||||
|
||||
Klik op het **⚙️ Settings icoon** linksonder in Cursor.
|
||||
|
||||
### Stap 2.2: Activeer Docs
|
||||
|
||||
Ga naar **Features** → **Docs**
|
||||
|
||||
Voeg deze drie documenten toe (zoek en click Add):
|
||||
1. **Next.js** (officiële docs)
|
||||
2. **React** (officiële docs)
|
||||
3. **Tailwind CSS** (officiële docs)
|
||||
|
||||
Dit helpt Cursor veel beter code te genereren omdat het toegang heeft tot de juiste documentatie.
|
||||
|
||||
### Stap 2.3: Controleer Tab Completion
|
||||
|
||||
Ga naar **Features** → **Completion**
|
||||
- Zorg dat **Tab Completion** is ingeschakeld (dit is gratis!)
|
||||
|
||||
**Checkpoint 3:** Alle drie docs zijn zichtbaar in je Docs sidebar rechts. Tab Completion is enabled.
|
||||
|
||||
---
|
||||
|
||||
## Stap 3: Generate cursorrules met Chat (1 request)
|
||||
|
||||
### Stap 3.1: Open Cursor Chat
|
||||
|
||||
Druk **Ctrl+L** (Windows/Linux) of **Cmd+L** (Mac).
|
||||
|
||||
Een chat panel opent aan de zijkant.
|
||||
|
||||
### Stap 3.2: Prompt voor .cursorrules
|
||||
|
||||
Typ deze prompt en druk Enter:
|
||||
|
||||
```
|
||||
Je bent een expert Next.js developer. Genereer een .cursorrules bestand
|
||||
voor een Next.js project met TypeScript, Tailwind CSS, en App Router.
|
||||
|
||||
Het bestand moet guidelines bevatten voor:
|
||||
- Functional components en React hooks
|
||||
- TypeScript best practices
|
||||
- Tailwind CSS utilities (nooit inline styles)
|
||||
- Bestandsnaamgeving (PascalCase voor components, camelCase voor utils)
|
||||
- Folder structuur (/app, /components, /lib)
|
||||
- Comments in het Nederlands
|
||||
- Keine `any` types
|
||||
|
||||
Output het volledige .cursorrules bestand klaar om te copy-pasten.
|
||||
```
|
||||
|
||||
Wacht op Cursor's antwoord.
|
||||
|
||||
### Stap 3.3: Copy de output
|
||||
|
||||
Cursor geeft je het complete .cursorrules bestand.
|
||||
|
||||
Selecteer alle code (Ctrl+A in de chat output) en kopieer het.
|
||||
|
||||
### Stap 3.4: Maak .cursorrules bestand
|
||||
|
||||
1. Rechtsklik op de root folder in de left sidebar
|
||||
2. Klik "New File"
|
||||
3. Noem het `.cursorrules` (met punt aan het begin!)
|
||||
4. Plak de content
|
||||
|
||||
Save het bestand (Ctrl+S).
|
||||
|
||||
**Checkpoint 4:** `.cursorrules` bestand bestaat in je project root met goede guidelines.
|
||||
|
||||
**Request Budget: 1 van ~7 used**
|
||||
|
||||
---
|
||||
|
||||
## Stap 4: Hero Component met Composer (20 minuten)
|
||||
|
||||
### Stap 4.1: Maak component file
|
||||
|
||||
1. Rechtsklik op de `app` folder
|
||||
2. "New File"
|
||||
3. Noem het `app/components/Hero.tsx`
|
||||
|
||||
(Dit maakt automatisch de `components` subfolder)
|
||||
|
||||
### Stap 4.2: Open Composer
|
||||
|
||||
Met het Hero.tsx file open, druk **Ctrl+Shift+I** (Windows/Linux) of **Cmd+Shift+I** (Mac).
|
||||
|
||||
De Composer panel opent.
|
||||
|
||||
### Stap 4.3: Geef instructie aan Composer
|
||||
|
||||
In Composer, typ:
|
||||
|
||||
```
|
||||
Maak een Hero component (TypeScript, React functional component) met:
|
||||
- Grote h1 heading: "Welkom bij Cursor"
|
||||
- Subheading met beschrijvende tekst: "Bouw websites snel met AI"
|
||||
- Een CTA button: "Aan de slag" (link naar #features)
|
||||
- Responsive design: Tailwind CSS (md: breakpoint)
|
||||
- Flexbox voor verticale centrering
|
||||
- Dark mode compatible (dark: classes)
|
||||
- Gradient background (blauw naar paars)
|
||||
- Geen external dependencies
|
||||
|
||||
Geef alleen de component code, geen imports of exports statements voor buiten.
|
||||
```
|
||||
|
||||
Cursor genereert het component.
|
||||
|
||||
### Stap 4.4: Accept of refine
|
||||
|
||||
Review de getoonde code. Klik **Accept All** (groene knop) om het in je bestand in te voegen.
|
||||
|
||||
**Checkpoint 5:** Hero.tsx file bevat een werkend Hero component met juiste structuur.
|
||||
|
||||
**Request Budget: 2 van ~7 used**
|
||||
|
||||
---
|
||||
|
||||
## Stap 5: Feature Cards Component met Composer (20 minuten)
|
||||
|
||||
### Stap 5.1: Maak component file
|
||||
|
||||
1. Rechtsklik op `app` folder
|
||||
2. "New File"
|
||||
3. Noem het `app/components/FeatureCards.tsx`
|
||||
|
||||
### Stap 5.2: Open Composer
|
||||
|
||||
Druk **Ctrl+Shift+I** in dit nieuwe bestand.
|
||||
|
||||
### Stap 5.3: Composer prompt
|
||||
|
||||
```
|
||||
Maak een FeatureCards component (TypeScript, React) dat:
|
||||
- Een grid van 3 feature cards toont
|
||||
- Responsive: 1 kolom op mobile, 3 kolommen op desktop (Tailwind grid)
|
||||
- Elke card heeft:
|
||||
* Een icon uit lucide-react (Package, Zap, Layers)
|
||||
* Een h3 title
|
||||
* Een description text
|
||||
- Hover effect: transform scale-105 en shadow toename
|
||||
- Cards hebben border en padding (Tailwind)
|
||||
- Dark mode ready
|
||||
- lucide-react is geïmporteerd bovenaan
|
||||
|
||||
Geef alleen de component code.
|
||||
```
|
||||
|
||||
Composer genereert het component.
|
||||
|
||||
### Stap 5.4: Accept
|
||||
|
||||
Klik **Accept All**.
|
||||
|
||||
### Stap 5.5: Install lucide-react
|
||||
|
||||
In je Cursor Terminal (Ctrl+`):
|
||||
|
||||
```bash
|
||||
npm install lucide-react
|
||||
```
|
||||
|
||||
Wacht tot npm klaar is.
|
||||
|
||||
**Checkpoint 6:** FeatureCards.tsx werkt, lucide-react is geïnstalleerd.
|
||||
|
||||
**Request Budget: 3 van ~7 used**
|
||||
|
||||
---
|
||||
|
||||
## Stap 6: Integreer in Homepage (5 minuten)
|
||||
|
||||
### Stap 6.1: Open `app/page.tsx`
|
||||
|
||||
Dit is je homepage.
|
||||
|
||||
### Stap 6.2: Update de content
|
||||
|
||||
Vervang de bestaande content (of voeg toe aan het bestand) met:
|
||||
|
||||
```typescript
|
||||
import Hero from './components/Hero';
|
||||
import FeatureCards from './components/FeatureCards';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main className="min-h-screen">
|
||||
<Hero />
|
||||
<section className="py-20 bg-gray-50 dark:bg-gray-900">
|
||||
<div className="container mx-auto px-4">
|
||||
<h2 className="text-4xl font-bold mb-12 text-center">Features</h2>
|
||||
<FeatureCards />
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
Save (Ctrl+S).
|
||||
|
||||
### Stap 6.3: Test in browser
|
||||
|
||||
In Cursor Terminal:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Open `http://localhost:3000` in je browser.
|
||||
|
||||
Je ziet nu: Hero → Features section met 3 cards.
|
||||
|
||||
**Checkpoint 7:** Website draait lokaal en ziet er netjes uit.
|
||||
|
||||
---
|
||||
|
||||
## Stap 7: Styling Refinement met Inline Edit (15 minuten)
|
||||
|
||||
Nu gebruiken we **Inline Edit** (Ctrl+K) voor kleine styling tweaks.
|
||||
|
||||
### Stap 7.1: Hero button styling
|
||||
|
||||
1. Open `app/components/Hero.tsx`
|
||||
2. Klik ergens in de button JSX
|
||||
3. Druk **Ctrl+K**
|
||||
4. Type:
|
||||
|
||||
```
|
||||
Voeg een hover effect toe aan de button:
|
||||
- Scale slightly bigger on hover
|
||||
- Change background color smoothly
|
||||
- Add smooth transition
|
||||
```
|
||||
|
||||
5. Review de suggestie, klik Accept
|
||||
|
||||
### Stap 7.2: Card shadows verbeteren
|
||||
|
||||
1. Open `app/components/FeatureCards.tsx`
|
||||
2. Selecteer een card div
|
||||
3. Druk **Ctrl+K**
|
||||
4. Type:
|
||||
|
||||
```
|
||||
Voeg een mooier shadow effect toe aan de cards:
|
||||
- Larger shadow on hover
|
||||
- Smooth transition
|
||||
- Better depth perception
|
||||
```
|
||||
|
||||
5. Accept
|
||||
|
||||
### Stap 7.3: Typography verbeteren
|
||||
|
||||
1. Open `app/page.tsx`
|
||||
2. Druk **Ctrl+K**
|
||||
3. Type:
|
||||
|
||||
```
|
||||
Maak de "Features" heading groter en mooier:
|
||||
- Groter font size
|
||||
- Betere kleur gradient
|
||||
```
|
||||
|
||||
5. Accept
|
||||
|
||||
Refresh je browser (F5) om de changes te zien.
|
||||
|
||||
**Checkpoint 8:** Styling ziet er gepolijst uit, hover effects werken.
|
||||
|
||||
**Request Budget: 4-5 van ~7 used**
|
||||
|
||||
---
|
||||
|
||||
## Stap 8: Git Commit (5 minuten)
|
||||
|
||||
### Stap 8.1: Open Source Control
|
||||
|
||||
Druk **Ctrl+Shift+G** in Cursor.
|
||||
|
||||
Source Control panel opent links.
|
||||
|
||||
### Stap 8.2: Stage alle bestanden
|
||||
|
||||
Klik op het **+** icoon bij "Changes" of druk **Ctrl+Shift+A**.
|
||||
|
||||
Alle bestanden worden staged (groen).
|
||||
|
||||
### Stap 8.3: Write commit message
|
||||
|
||||
In het message veld, typ:
|
||||
|
||||
```
|
||||
feat: Build Hero and FeatureCards components with Cursor Composer
|
||||
```
|
||||
|
||||
### Stap 8.4: Commit
|
||||
|
||||
Druk **Ctrl+Enter** of klik de ✓ button.
|
||||
|
||||
Je commit is gemaakt!
|
||||
|
||||
**Checkpoint 9:** Git commit is succesvol (geen errors).
|
||||
|
||||
---
|
||||
|
||||
## Keyboard Shortcuts Reference
|
||||
|
||||
| Actie | Windows | Mac |
|
||||
|-------|---------|-----|
|
||||
| **Cursor Chat** | Ctrl+L | Cmd+L |
|
||||
| **Composer** | Ctrl+Shift+I | Cmd+Shift+I |
|
||||
| **Inline Edit (quick fix)** | Ctrl+K | Cmd+K |
|
||||
| **Terminal** | Ctrl+` | Cmd+` |
|
||||
| **Command Palette** | Ctrl+Shift+P | Cmd+Shift+P |
|
||||
| **Source Control** | Ctrl+Shift+G | Cmd+Shift+G |
|
||||
| **Save** | Ctrl+S | Cmd+S |
|
||||
| **Tab Completion** | Tab | Tab |
|
||||
|
||||
---
|
||||
|
||||
## Request Budget Tracking
|
||||
|
||||
Je hebt **~7 requests** beschikbaar in deze les:
|
||||
|
||||
| Fase | Type | Requests |
|
||||
|------|------|----------|
|
||||
| cursorrules generatie | Chat | 1 |
|
||||
| Hero Component | Composer | 1 |
|
||||
| FeatureCards Component | Composer | 1 |
|
||||
| Button styling tweak | Inline Edit | 0.5 |
|
||||
| Card styling tweak | Inline Edit | 0.5 |
|
||||
| Typography tweak | Inline Edit | 0.5 |
|
||||
| Buffer/extra | - | 2.5 |
|
||||
|
||||
**💡 Pro tip:** Gebruik **Tab Completion** (gratis!) voor:
|
||||
- Imports toevoegen
|
||||
- Props schrijven
|
||||
- Repetitieve code (zelfde classNames herhalen)
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Probleem: "Module not found: lucide-react"
|
||||
**Oplossing:**
|
||||
```bash
|
||||
npm install lucide-react
|
||||
npm run dev
|
||||
```
|
||||
(Herstart je dev server na npm install)
|
||||
|
||||
### Probleem: Composer stelt rare dingen voor
|
||||
**Oplossing:** Wees specifieker in je prompt. Verwijs naar bestaande code:
|
||||
- "Voeg lucide-react icons toe" (voldoende duidelijk)
|
||||
- "Zorg dat het met TypeScript werkt" (specifieer)
|
||||
|
||||
### Probleem: Inline Edit accepteert niet
|
||||
**Oplossing:** Klik de groene ✓ knop of druk Ctrl+Enter
|
||||
|
||||
### Probleem: `npm run dev` geeft error
|
||||
**Stappen:**
|
||||
1. Controleer dat je in de juiste folder bent: `pwd`
|
||||
2. Controleer node versie: `node --version` (moet 18+ zijn)
|
||||
3. Verwijder en herinstalleer dependencies:
|
||||
```bash
|
||||
rm -rf node_modules package-lock.json
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### Probleem: Port 3000 al in gebruik
|
||||
```bash
|
||||
npm run dev -- -p 3001
|
||||
# Openen: http://localhost:3001
|
||||
```
|
||||
|
||||
### Probleem: Git werkt niet
|
||||
**Controleer:**
|
||||
- Ben je in de juiste folder? `pwd` moet je project folder zijn
|
||||
- Bestaat `.git` folder? `ls -la .git`
|
||||
- Zijn je bestanden getracked? `git status`
|
||||
|
||||
---
|
||||
|
||||
## Checklist - Vinkje alles af voor je klaar bent
|
||||
|
||||
- [ ] Git init en create-next-app uitgevoerd
|
||||
- [ ] Cursor Skills (Next.js, React, Tailwind) geactiveerd
|
||||
- [ ] `.cursorrules` bestand gegenereerd en in root geplaatst
|
||||
- [ ] `app/components/Hero.tsx` aangemaakt met Composer
|
||||
- [ ] `app/components/FeatureCards.tsx` aangemaakt met Composer
|
||||
- [ ] lucide-react geïnstalleerd via npm
|
||||
- [ ] Componenten geïmporteerd in `app/page.tsx`
|
||||
- [ ] `npm run dev` draait zonder errors
|
||||
- [ ] Website ziet er goed uit op http://localhost:3000
|
||||
- [ ] Styling verfijnd met Inline Edit (minimaal 2 aanpassingen)
|
||||
- [ ] Git commit gemaakt met duidelijke message
|
||||
- [ ] Alle bestanden zijn saved (geen rode stippen in sidebar)
|
||||
|
||||
---
|
||||
|
||||
## Volgende stappen
|
||||
|
||||
**Voor volgende les:**
|
||||
- Zorg dat `npm run dev` nog werkt
|
||||
- Download het huiswerk zip bestand van Teams (les3-debug-challenge.zip)
|
||||
- Voorkom dat je project files verwijdert/opslaanslecht
|
||||
|
||||
**Veel succes! 🚀**
|
||||
375
Les03-Cursor-Basics/Les03-Bijlage-B-Huiswerkopdracht.md
Normal file
375
Les03-Cursor-Basics/Les03-Bijlage-B-Huiswerkopdracht.md
Normal file
@@ -0,0 +1,375 @@
|
||||
# Les 3: Cursor Basics - Huiswerkopdracht (Homework - DEBUG CHALLENGE)
|
||||
|
||||
**Deadline:** Vóór Les 4
|
||||
|
||||
**Type:** Debug Challenge - Je krijgt een kapot Next.js project en moet het repareren met Cursor.
|
||||
|
||||
---
|
||||
|
||||
## Introductie
|
||||
|
||||
Dit huiswerk is anders dan gewoon code schrijven. Je krijgt een **intentioneel kapot** Next.js project dat je met Cursor moet debuggen.
|
||||
|
||||
Je leert:
|
||||
- Errors opsporen met Cursor
|
||||
- De Terminal gebruiken voor error messages
|
||||
- Inline styles naar Tailwind CSS converteren
|
||||
- Missing imports en dependencies vinden
|
||||
- ESLint warnings beheren
|
||||
|
||||
**Geschatte tijd:** 1.5-2 uur
|
||||
|
||||
---
|
||||
|
||||
## Stap 0: Download het Zip-bestand
|
||||
|
||||
Download `les3-debug-challenge.zip` van Teams.
|
||||
|
||||
Unzip het bestand:
|
||||
```bash
|
||||
unzip les3-debug-challenge.zip
|
||||
cd les3-debug-challenge
|
||||
```
|
||||
|
||||
Open het in Cursor:
|
||||
```bash
|
||||
cursor .
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Wat je tegenkomt
|
||||
|
||||
Het project `les3-debug-challenge` bevat deze INTENTIONELE ERRORS:
|
||||
|
||||
### Error Type 1: Missing Dependencies
|
||||
|
||||
**Wat:** `lucide-react` wordt gebruikt in `components/HeroIcon.tsx`, maar staat niet in `package.json`.
|
||||
|
||||
**Hoe te vinden:**
|
||||
- Open Terminal in Cursor (Ctrl+`)
|
||||
- Run: `npm run dev`
|
||||
- Je ziet: `Error: Module not found: lucide-react`
|
||||
|
||||
**Hoe te fixen:**
|
||||
```bash
|
||||
npm install lucide-react
|
||||
```
|
||||
|
||||
### Error Type 2: Syntax Errors (typos, missing closing tags)
|
||||
|
||||
**Wat:** Een component heeft een vergeten closing JSX tag of import typo.
|
||||
|
||||
**Bijv. in `app/page.tsx`:**
|
||||
```tsx
|
||||
<Hero // Missing closing >
|
||||
```
|
||||
|
||||
Of in imports:
|
||||
```tsx
|
||||
import { Button } from '@/componenst/Button' // typo: componenst
|
||||
```
|
||||
|
||||
**Hoe te vinden:**
|
||||
- Terminal errors: `SyntaxError` of `Cannot find module`
|
||||
- Cursor geeft rode underlines in editor
|
||||
- Gebruik Cursor Chat (Ctrl+L) om de error uit te leggen
|
||||
|
||||
**Hoe te fixen:**
|
||||
1. Kijk naar de regel number in error
|
||||
2. Open dat bestand
|
||||
3. Controleer imports en JSX syntax
|
||||
4. Fix typos
|
||||
5. Save en test: `npm run dev`
|
||||
|
||||
### Error Type 3: Inline Styles (moeten naar Tailwind)
|
||||
|
||||
**Wat:** Een component gebruikt `style={{...}}` ipv Tailwind classes.
|
||||
|
||||
**Bijv. in `components/Card.tsx`:**
|
||||
```tsx
|
||||
<div style={{
|
||||
padding: '20px',
|
||||
backgroundColor: '#f0f0f0',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #ccc'
|
||||
}}>
|
||||
Content
|
||||
</div>
|
||||
```
|
||||
|
||||
**Hoe te fixen:** Gebruik Cursor **Inline Edit (Ctrl+K)**
|
||||
|
||||
1. Open het bestand
|
||||
2. Selecteer de `style={{...}}` block
|
||||
3. Druk **Ctrl+K**
|
||||
4. Type:
|
||||
|
||||
```
|
||||
Converteer deze inline styles naar Tailwind CSS classes.
|
||||
Verwijder de style prop en voeg className toe.
|
||||
```
|
||||
|
||||
5. Cursor converteerd het naar:
|
||||
|
||||
```tsx
|
||||
<div className="p-5 bg-gray-100 rounded-lg border border-gray-300">
|
||||
Content
|
||||
</div>
|
||||
```
|
||||
|
||||
6. Accept en verify
|
||||
|
||||
**Tabel: Inline Styles → Tailwind Mapping**
|
||||
| Inline Style | Tailwind Class |
|
||||
|--------------|----------------|
|
||||
| `padding: '20px'` | `p-5` (4px × 5) |
|
||||
| `backgroundColor: '#f0f0f0'` | `bg-gray-100` |
|
||||
| `borderRadius: '8px'` | `rounded-lg` |
|
||||
| `border: '1px solid #ccc'` | `border border-gray-300` |
|
||||
| `marginBottom: '16px'` | `mb-4` |
|
||||
| `display: 'flex'` | `flex` |
|
||||
| `justifyContent: 'center'` | `justify-center` |
|
||||
|
||||
### Error Type 4: Missing Imports
|
||||
|
||||
**Wat:** Een component wordt gebruikt maar niet geïmporteerd.
|
||||
|
||||
**Bijv. in `app/page.tsx`:**
|
||||
```tsx
|
||||
export default function Home() {
|
||||
return <FeatureCards /> // FeatureCards is niet geïmporteerd!
|
||||
}
|
||||
```
|
||||
|
||||
**Hoe te vinden:**
|
||||
- Cursor geeft rode underline: "Cannot find name 'FeatureCards'"
|
||||
- Terminal error bij `npm run dev`
|
||||
|
||||
**Hoe te fixen:**
|
||||
- Voeg import bovenaan toe:
|
||||
|
||||
```tsx
|
||||
import FeatureCards from '@/components/FeatureCards';
|
||||
```
|
||||
|
||||
Of gebruik Cursor's **Quick Fix** (Ctrl+. op de fout).
|
||||
|
||||
---
|
||||
|
||||
## Debug-aanpak stap-voor-stap
|
||||
|
||||
### Stap 1: Installeer eerst alles
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
### Stap 2: Start dev server
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Lees ALLE errors van boven naar beneden.
|
||||
|
||||
### Stap 3: Fix errors één voor één
|
||||
|
||||
**Beginnen bij:**
|
||||
1. **npm install errors** (missing packages)
|
||||
2. **Syntax errors** (ESLint, typos)
|
||||
3. **Runtime errors** (module not found, missing imports)
|
||||
4. **Styling issues** (inline styles)
|
||||
|
||||
### Stap 4: Use Cursor Chat voor moeilijke errors
|
||||
|
||||
Druk **Ctrl+L** en beschrijf de error:
|
||||
|
||||
```
|
||||
Ik krijg deze error:
|
||||
Error: Cannot find module 'lucide-react'
|
||||
|
||||
Hoe fix ik dit?
|
||||
```
|
||||
|
||||
Cursor helpt je.
|
||||
|
||||
### Stap 5: Verify in browser
|
||||
|
||||
Na elke fix:
|
||||
1. Zorg dat `npm run dev` draait zonder errors
|
||||
2. Open http://localhost:3000
|
||||
3. Check visueel dat alles werkt
|
||||
4. Geen rode errors in console (F12 → Console tab)
|
||||
|
||||
---
|
||||
|
||||
## Checklist van errors om op te lossen
|
||||
|
||||
Zorg dat je ALLE deze punten fixt:
|
||||
|
||||
- [ ] **npm install errors** - Alle missing dependencies geïnstalleerd
|
||||
- [ ] **Syntax errors** - Alle closing tags toegevoegd, imports gecorrigeerd
|
||||
- [ ] **Missing imports** - Alle componenten die gebruikt worden zijn geïmporteerd
|
||||
- [ ] **Inline styles** - Minimaal 3 inline styles → Tailwind conversions
|
||||
- [ ] **ESLint warnings** - Geen rode/oranje squiggly lines meer
|
||||
- [ ] **Browser console** - Geen rood errors (F12)
|
||||
- [ ] **Visual check** - Website ziet er correct uit
|
||||
|
||||
---
|
||||
|
||||
## Tips per error-type
|
||||
|
||||
### Voor Missing Dependencies
|
||||
|
||||
```bash
|
||||
# Check welke packages ontbreken
|
||||
npm install
|
||||
|
||||
# Of installeer handmatig
|
||||
npm install [package-name]
|
||||
```
|
||||
|
||||
### Voor Syntax Errors
|
||||
|
||||
- **Controleer imports:** `import X from '@/components/X'` (check spelling)
|
||||
- **Controleer JSX closing:** Elke `<div>` moet `</div>` hebben
|
||||
- **Controleer quotes:** Tailwind classes moeten in dubbele quotes: `className="..."`
|
||||
|
||||
### Voor Inline Styles → Tailwind
|
||||
|
||||
Gebruik altijd Inline Edit (Ctrl+K):
|
||||
1. Select de `style={{...}}` code
|
||||
2. Ctrl+K
|
||||
3. Type: "Convert to Tailwind classes"
|
||||
4. Accept
|
||||
|
||||
Tailwind Cheat Sheet:
|
||||
- Padding: `p-2`, `p-4`, `p-8` (2, 4, 8 × 4px)
|
||||
- Margin: `m-2`, `mb-4`, `mt-2`
|
||||
- Background: `bg-white`, `bg-gray-100`, `bg-blue-500`
|
||||
- Border: `border`, `border-2`, `border-gray-300`
|
||||
- Radius: `rounded`, `rounded-lg`, `rounded-full`
|
||||
- Display: `flex`, `grid`, `block`
|
||||
- Colors: `text-white`, `bg-red-500`, `border-blue-300`
|
||||
|
||||
### Voor Missing Imports
|
||||
|
||||
Cursor's Quick Fix (Ctrl+.) werkt vaak:
|
||||
1. Klik op de rode error
|
||||
2. Druk Ctrl+.
|
||||
3. "Add import"
|
||||
|
||||
Of manual:
|
||||
```tsx
|
||||
import ComponentNaam from '@/components/ComponentNaam';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Submitting Your Work
|
||||
|
||||
### Voor Les 4:
|
||||
|
||||
Maak een **GitHub commit** en **push** het:
|
||||
|
||||
```bash
|
||||
git add .
|
||||
git commit -m "fix: debug all errors and convert styles to Tailwind"
|
||||
git push
|
||||
```
|
||||
|
||||
Post in Teams:
|
||||
1. **GitHub link** naar je debugged project
|
||||
2. **Screenshot** van je werkende website (http://localhost:3000)
|
||||
3. **Korte beschrijving:** Welke errors heb je gerepareerd?
|
||||
```
|
||||
- Fixed missing lucide-react dependency
|
||||
- Fixed typo in import statement (componenst → components)
|
||||
- Converted 5 inline styles to Tailwind classes
|
||||
- Added missing Hero import to page.tsx
|
||||
- Verified no ESLint errors
|
||||
```
|
||||
|
||||
### Checklist voor inlevering
|
||||
|
||||
- [ ] Alle npm/syntax/import errors zijn fixed
|
||||
- [ ] `npm run dev` draait zonder errors
|
||||
- [ ] http://localhost:3000 toont de website correct
|
||||
- [ ] Browser console (F12) toont geen errors
|
||||
- [ ] Minimaal 3 inline styles zijn converted naar Tailwind
|
||||
- [ ] Git commit is gemaakt
|
||||
- [ ] GitHub link gepost in Teams
|
||||
|
||||
---
|
||||
|
||||
## Bonus: Maak je eigen component (optioneel)
|
||||
|
||||
Na alle errors te hebben opgelost, voeg je **een eigen component** toe:
|
||||
|
||||
Ideeën:
|
||||
- Een "Newsletter Signup" sectie
|
||||
- Een "Call to Action" button bar
|
||||
- Een "Stats" sectiie met cijfers
|
||||
- Een "Testimonials" carousel
|
||||
- Een "FAQ" sectie met accordions
|
||||
|
||||
**Hoe:**
|
||||
1. Open Composer (Ctrl+Shift+I)
|
||||
2. Prompt:
|
||||
|
||||
```
|
||||
Maak een [ComponentNaam] component met:
|
||||
- [beschrijving]
|
||||
- Tailwind CSS styling
|
||||
- Responsive design
|
||||
- TypeScript types
|
||||
|
||||
Voeg het toe aan /components en importeer het in /app/page.tsx
|
||||
```
|
||||
|
||||
3. Accept en test
|
||||
|
||||
**Bonus punten!**
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting Debug Errors
|
||||
|
||||
### Error: "SyntaxError: Unexpected token"
|
||||
**Oorzaak:** Ontbrekende haakje, quote, of JSX closing tag
|
||||
**Fix:** Kijk naar de regel in de editor, controleer haakjes
|
||||
|
||||
### Error: "Cannot find module 'X'"
|
||||
**Oorzaak:** Package niet geïnstalleerd OF typo in import
|
||||
**Fix:**
|
||||
- Check spelling in import statement
|
||||
- Of: `npm install X`
|
||||
|
||||
### Error: "Cannot find name 'Component'"
|
||||
**Oorzaak:** Component niet geïmporteerd
|
||||
**Fix:** Voeg import toe boven het bestand
|
||||
|
||||
### Error in Browser Console (F12)
|
||||
**Oplossing:** Zeg dit tegen Cursor Chat:
|
||||
```
|
||||
Ik zie deze error in de browser console:
|
||||
[paste de error]
|
||||
|
||||
Wat betekent het en hoe fix ik het?
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Veel Succes!
|
||||
|
||||
Je gaat leren:
|
||||
- ✅ Debuggen met Cursor
|
||||
- ✅ Terminal errors lezen
|
||||
- ✅ Inline styles naar Tailwind converteren
|
||||
- ✅ Imports en dependencies beheren
|
||||
- ✅ Website testen in browser
|
||||
|
||||
Dit zijn essentiële vaardigheden als je echt met code werkt!
|
||||
|
||||
**Deadline:** Vóór Les 4 🚀
|
||||
175
Les03-Cursor-Basics/Les03-Debug-Challenge-ANTWOORDEN.md
Normal file
175
Les03-Cursor-Basics/Les03-Debug-Challenge-ANTWOORDEN.md
Normal file
@@ -0,0 +1,175 @@
|
||||
# Debug Challenge - Antwoordenblad (ALLEEN VOOR TIM)
|
||||
|
||||
**⚠️ NIET DELEN MET STUDENTEN**
|
||||
|
||||
---
|
||||
|
||||
## Overzicht Fouten
|
||||
|
||||
Het project bevat **4 typen fouten**, verspreid over **8 bestanden**.
|
||||
|
||||
---
|
||||
|
||||
## FOUT 1: Missing Dependency — `lucide-react`
|
||||
|
||||
**Bestanden:** `components/Hero.tsx`, `components/FeatureCards.tsx`
|
||||
**Symptoom:** `npm install` werkt, maar `npm run dev` geeft:
|
||||
```
|
||||
Module not found: Can't resolve 'lucide-react'
|
||||
```
|
||||
|
||||
**Oorzaak:** `lucide-react` wordt geïmporteerd in Hero.tsx en FeatureCards.tsx, maar staat NIET in package.json.
|
||||
|
||||
**Fix:**
|
||||
```bash
|
||||
npm install lucide-react
|
||||
```
|
||||
|
||||
**Leerdoel:** Studenten leren dat je imports moet matchen met dependencies in package.json.
|
||||
|
||||
---
|
||||
|
||||
## FOUT 2: Typo in Import Path
|
||||
|
||||
**Bestand:** `app/page.tsx` (regel 1)
|
||||
**Symptoom:**
|
||||
```
|
||||
Module not found: Can't resolve '@/componenst/Hero'
|
||||
```
|
||||
|
||||
**Oorzaak:** Typo: `@/componenst/Hero` i.p.v. `@/components/Hero`
|
||||
|
||||
**Fix:**
|
||||
```tsx
|
||||
// FOUT:
|
||||
import Hero from "@/componenst/Hero";
|
||||
|
||||
// CORRECT:
|
||||
import Hero from "@/components/Hero";
|
||||
```
|
||||
|
||||
**Leerdoel:** Lezen van error messages, herkennen van typos in import paden.
|
||||
|
||||
---
|
||||
|
||||
## FOUT 3: Missing Import — `TestimonialSection`
|
||||
|
||||
**Bestand:** `app/page.tsx` (regel 9)
|
||||
**Symptoom:**
|
||||
```
|
||||
ReferenceError: TestimonialSection is not defined
|
||||
```
|
||||
|
||||
**Oorzaak:** `<TestimonialSection />` wordt gebruikt in page.tsx maar is niet geïmporteerd.
|
||||
|
||||
**Fix:** Voeg import toe bovenaan page.tsx:
|
||||
```tsx
|
||||
import TestimonialSection from "@/components/TestimonialSection";
|
||||
```
|
||||
|
||||
**Leerdoel:** Begrijpen dat elk component geïmporteerd moet worden.
|
||||
|
||||
---
|
||||
|
||||
## FOUT 4: Missing Imports in layout.tsx — `Navbar` en `Footer`
|
||||
|
||||
**Bestand:** `app/layout.tsx` (regels 17-18)
|
||||
**Symptoom:**
|
||||
```
|
||||
ReferenceError: Navbar is not defined
|
||||
ReferenceError: Footer is not defined
|
||||
```
|
||||
|
||||
**Oorzaak:** `<Navbar />` en `<Footer />` worden gebruikt maar niet geïmporteerd.
|
||||
|
||||
**Fix:** Voeg imports toe bovenaan layout.tsx:
|
||||
```tsx
|
||||
import Navbar from "@/components/Navbar";
|
||||
import Footer from "@/components/Footer";
|
||||
```
|
||||
|
||||
**Leerdoel:** Zelfs in layout.tsx moeten componenten geïmporteerd worden.
|
||||
|
||||
---
|
||||
|
||||
## FOUT 5: Inline Styles → Tailwind (6 bestanden!)
|
||||
|
||||
**Bestanden met inline styles:**
|
||||
1. `components/Hero.tsx` — hele component
|
||||
2. `components/FeatureCards.tsx` — hele component
|
||||
3. `components/TestimonialSection.tsx` — hele component
|
||||
4. `components/Navbar.tsx` — hele component
|
||||
5. `components/Footer.tsx` — hele component
|
||||
6. `app/about/page.tsx` — hele pagina
|
||||
7. `app/contact/page.tsx` — hele pagina (formulier)
|
||||
|
||||
**Symptoom:** Geen error, maar code gebruikt `style={{...}}` i.p.v. Tailwind classes.
|
||||
|
||||
**Voorbeeld fix (Hero.tsx):**
|
||||
```tsx
|
||||
// FOUT (inline styles):
|
||||
<section style={{
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
padding: '80px 20px',
|
||||
textAlign: 'center',
|
||||
color: 'white',
|
||||
minHeight: '500px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}>
|
||||
|
||||
// CORRECT (Tailwind):
|
||||
<section className="bg-gradient-to-br from-indigo-500 to-purple-700 py-20 px-5 text-center text-white min-h-[500px] flex items-center justify-center">
|
||||
```
|
||||
|
||||
**Aanpak voor studenten:**
|
||||
1. Selecteer de `style={{...}}` code
|
||||
2. Druk `Ctrl+K` (Inline Edit)
|
||||
3. Typ: "Converteer alle inline styles naar Tailwind CSS classes"
|
||||
4. Accept
|
||||
|
||||
**Leerdoel:** Leren werken met Tailwind, Inline Edit gebruiken voor refactoring.
|
||||
|
||||
---
|
||||
|
||||
## Samenvatting: Alle Fouten
|
||||
|
||||
| # | Type | Bestand | Ernst |
|
||||
|---|------|---------|-------|
|
||||
| 1 | Missing dependency | package.json (lucide-react) | 🔴 Blokkerend |
|
||||
| 2 | Typo in import | app/page.tsx (`componenst`) | 🔴 Blokkerend |
|
||||
| 3 | Missing import | app/page.tsx (TestimonialSection) | 🔴 Blokkerend |
|
||||
| 4 | Missing imports | app/layout.tsx (Navbar, Footer) | 🔴 Blokkerend |
|
||||
| 5 | Inline styles | 7 bestanden | 🟡 Niet blokkerend, maar opdracht |
|
||||
|
||||
**Verwachte volgorde van oplossen:**
|
||||
1. `npm install` → werkt (geen errors hier)
|
||||
2. `npm run dev` → Module not found: lucide-react → `npm install lucide-react`
|
||||
3. `npm run dev` → Can't resolve '@/componenst/Hero' → fix typo
|
||||
4. `npm run dev` → TestimonialSection not defined → add import
|
||||
5. `npm run dev` → Navbar/Footer not defined → add imports
|
||||
6. `npm run dev` → ✅ WERKT! Site is zichtbaar
|
||||
7. Inline styles → Tailwind conversie (Inline Edit)
|
||||
|
||||
---
|
||||
|
||||
## Verwachte Requests Gebruik
|
||||
|
||||
| Actie | Requests |
|
||||
|-------|----------|
|
||||
| "Welke deps missen?" (Chat) | 1 |
|
||||
| Fix typos/imports (handmatig of Chat) | 0-1 |
|
||||
| Inline styles conversie (Inline Edit × 3-5) | 3-5 |
|
||||
| **Totaal** | **4-7 requests** |
|
||||
|
||||
Studenten op Hobby plan moeten dit kunnen doen. Tab Completion helpt bij imports.
|
||||
|
||||
---
|
||||
|
||||
## Tips voor Tim
|
||||
|
||||
- **Moeilijkheidsgraad:** Gemiddeld. Fouten 1-4 zijn "lees de error message" niveau. Fout 5 (Tailwind) is de echte oefening.
|
||||
- **Als studenten vastlopen:** Wijs ze op de terminal error messages. Zeg: "Lees de eerste regel van de error."
|
||||
- **Grid responsiveness:** De FeatureCards en TestimonialSection grids zijn `repeat(3, 1fr)` — op mobiel breken ze. Bonuspunt als studenten dit ook fixen naar responsive grid.
|
||||
- **Contact form:** Werkt functioneel (alert), maar alle styling is inline. Goed voorbeeld van een formulier omzetten naar Tailwind.
|
||||
322
Les03-Cursor-Basics/Les03-Debug-Challenge-Hard-ANTWOORDEN.md
Normal file
322
Les03-Cursor-Basics/Les03-Debug-Challenge-Hard-ANTWOORDEN.md
Normal file
@@ -0,0 +1,322 @@
|
||||
# Debug Challenge HARD - Antwoordenblad (ALLEEN VOOR TIM)
|
||||
|
||||
**⚠️ NIET DELEN MET STUDENTEN**
|
||||
|
||||
---
|
||||
|
||||
## Overzicht
|
||||
|
||||
Dit project is aanzienlijk complexer dan de easy versie. Het bevat:
|
||||
- Blog met dynamische routes
|
||||
- Dashboard met statistieken
|
||||
- API route voor quotes
|
||||
- Utility functions
|
||||
- TypeScript types
|
||||
|
||||
**12 fouten verspreid over 4 categorieën:**
|
||||
- Blokkerende fouten (compile/runtime)
|
||||
- Logische fouten (code draait maar werkt verkeerd)
|
||||
- Pattern fouten (React anti-patterns)
|
||||
- Styling fouten (inline styles + custom CSS → Tailwind)
|
||||
|
||||
**Geschatte tijd: 2-3 uur met AI**
|
||||
|
||||
---
|
||||
|
||||
## CATEGORIE 1: BLOKKERENDE FOUTEN
|
||||
|
||||
### Fout 1: Missing dependency — `clsx`
|
||||
|
||||
**Bestand:** `lib/utils.ts` (regel 2)
|
||||
**Symptoom:**
|
||||
```
|
||||
Module not found: Can't resolve 'clsx'
|
||||
```
|
||||
|
||||
**Oorzaak:** `clsx` wordt geïmporteerd maar staat niet in package.json.
|
||||
`formatDate()` wordt overal gebruikt, dus dit blokkeert ALLES.
|
||||
|
||||
**Fix:**
|
||||
```bash
|
||||
npm install clsx
|
||||
```
|
||||
|
||||
**Moeilijkheid:** ⭐ (makkelijk, zelfde als easy versie)
|
||||
|
||||
---
|
||||
|
||||
### Fout 2: Verkeerde import path — NextResponse
|
||||
|
||||
**Bestand:** `app/api/quotes/route.ts` (regel 2)
|
||||
**Symptoom:**
|
||||
```
|
||||
Module not found: Can't resolve 'next/servers'
|
||||
```
|
||||
|
||||
**Oorzaak:** `"next/servers"` moet `"next/server"` zijn (zonder s).
|
||||
|
||||
**Fix:**
|
||||
```ts
|
||||
// FOUT:
|
||||
import { NextResponse } from "next/servers";
|
||||
|
||||
// CORRECT:
|
||||
import { NextResponse } from "next/server";
|
||||
```
|
||||
|
||||
**Moeilijkheid:** ⭐⭐ (subtiel — 1 letter verschil)
|
||||
|
||||
---
|
||||
|
||||
## CATEGORIE 2: LOGISCHE FOUTEN
|
||||
|
||||
### Fout 3: Array.slice() met verkeerde parameters
|
||||
|
||||
**Bestand:** `components/BlogPreview.tsx` (regel 7)
|
||||
**Symptoom:** BlogPreview sectie op homepage toont GEEN posts (lege grid)
|
||||
|
||||
**Oorzaak:** `blogPosts.slice(-2, 0)` retourneert een lege array.
|
||||
`slice(-2, 0)` betekent: start bij index -2 (2e van achteren), stop bij index 0 — dat is leeg!
|
||||
|
||||
**Fix:**
|
||||
```ts
|
||||
// FOUT:
|
||||
const recentPosts = blogPosts.slice(-2, 0);
|
||||
|
||||
// CORRECT:
|
||||
const recentPosts = blogPosts.slice(0, 2);
|
||||
```
|
||||
|
||||
**Moeilijkheid:** ⭐⭐⭐ (geen error, gewoon lege output — student moet debuggen WAAROM)
|
||||
|
||||
---
|
||||
|
||||
### Fout 4: Icon mapping mist "star" entry
|
||||
|
||||
**Bestand:** `app/dashboard/page.tsx` (regel 25-30)
|
||||
**Symptoom:** De "Rating" stat card toont geen icon (undefined rendered als leeg)
|
||||
|
||||
**Oorzaak:** `getIcon()` functie heeft entries voor "users", "eye", "clock" maar NIET voor "star". De stats array bevat wel `icon: "star"`.
|
||||
|
||||
**Fix:**
|
||||
```ts
|
||||
function getIcon(iconName: string) {
|
||||
const icons: Record<string, React.ReactNode> = {
|
||||
users: <Users size={24} />,
|
||||
eye: <Eye size={24} />,
|
||||
clock: <Clock size={24} />,
|
||||
star: <Star size={24} />, // ← TOEVOEGEN
|
||||
};
|
||||
return icons[iconName];
|
||||
}
|
||||
```
|
||||
|
||||
**Moeilijkheid:** ⭐⭐⭐ (geen crash, subtiel visueel verschil)
|
||||
|
||||
---
|
||||
|
||||
### Fout 5: Mobile menu altijd verborgen
|
||||
|
||||
**Bestand:** `components/Header.tsx` (regel 62 + 73)
|
||||
**Symptoom:** Hamburger menu knop is onzichtbaar, en zelfs als je `display: none` verwijdert van de button, is het dropdown menu ALSOOK `display: none`.
|
||||
|
||||
**Oorzaak:** Twee problemen:
|
||||
1. De hamburger button heeft `display: 'none'` → onzichtbaar
|
||||
2. Het mobile menu div heeft `display: 'none'` → zelfs als `menuOpen` true is
|
||||
|
||||
**Fix:** Dit moet volledig naar responsive Tailwind met `md:hidden`/`md:flex`:
|
||||
```tsx
|
||||
// Button: verberg op desktop, toon op mobiel
|
||||
<button className="md:hidden" ...>
|
||||
|
||||
// Desktop nav: verberg op mobiel
|
||||
<nav className="hidden md:flex gap-6" ...>
|
||||
|
||||
// Mobile menu: toon als flex wanneer open
|
||||
{menuOpen && (
|
||||
<div className="flex flex-col md:hidden p-3 border-t bg-white">
|
||||
```
|
||||
|
||||
**Moeilijkheid:** ⭐⭐⭐⭐ (vereist begrijpen van responsive design patterns)
|
||||
|
||||
---
|
||||
|
||||
## CATEGORIE 3: REACT PATTERN FOUTEN
|
||||
|
||||
### Fout 6: async functie in useEffect
|
||||
|
||||
**Bestand:** `app/dashboard/page.tsx` (regel 35-39)
|
||||
**Symptoom:** React warning in console:
|
||||
```
|
||||
Warning: useEffect must not return anything besides a function
|
||||
```
|
||||
En mogelijke infinite loop.
|
||||
|
||||
**Oorzaak:** `useEffect(async () => {...})` is een React anti-pattern. async functie retourneert een Promise, maar useEffect verwacht `void` of een cleanup functie.
|
||||
|
||||
**Fix:**
|
||||
```tsx
|
||||
// FOUT:
|
||||
useEffect(async () => {
|
||||
const res = await fetch("/api/quotes");
|
||||
...
|
||||
}, [quote]);
|
||||
|
||||
// CORRECT:
|
||||
useEffect(() => {
|
||||
async function fetchQuote() {
|
||||
const res = await fetch("/api/quotes");
|
||||
const data = await res.json();
|
||||
setQuote(data.text);
|
||||
setLoading(false);
|
||||
}
|
||||
fetchQuote();
|
||||
}, []); // ← ook dependency array gefixed (zie Fout 7)
|
||||
```
|
||||
|
||||
**Moeilijkheid:** ⭐⭐⭐⭐ (vereist kennis van React hooks patterns)
|
||||
|
||||
---
|
||||
|
||||
### Fout 7: Verkeerde dependency array → infinite loop
|
||||
|
||||
**Bestand:** `app/dashboard/page.tsx` (regel 39)
|
||||
**Symptoom:** Dashboard pagina loopt vast, continue fetch requests in Network tab
|
||||
|
||||
**Oorzaak:** `[quote]` als dependency betekent: "run opnieuw als `quote` verandert". Maar de effect ZET quote, wat de effect OPNIEUW triggert → infinite loop.
|
||||
|
||||
**Fix:**
|
||||
```tsx
|
||||
// FOUT:
|
||||
}, [quote]);
|
||||
|
||||
// CORRECT:
|
||||
}, []); // Lege array = run 1x bij mount
|
||||
```
|
||||
|
||||
**Moeilijkheid:** ⭐⭐⭐⭐ (vereist begrip van useEffect dependency arrays)
|
||||
|
||||
---
|
||||
|
||||
### Fout 8: Null check mist op quote state
|
||||
|
||||
**Bestand:** `components/QuoteOfTheDay.tsx` (regel 22)
|
||||
**Symptoom:** `TypeError: Cannot read properties of null (reading 'text')`
|
||||
|
||||
**Oorzaak:** `quote` begint als `null`, maar zodra loading false is, probeert de component `quote.text` te lezen. Als de API fails of traag is, kan dit crashen.
|
||||
|
||||
**Fix:** Voeg TypeScript type toe en null check:
|
||||
```tsx
|
||||
// Verbeterde state typing:
|
||||
const [quote, setQuote] = useState<{ text: string; author: string } | null>(null);
|
||||
|
||||
// In de render:
|
||||
{!loading && quote && (
|
||||
<>
|
||||
<blockquote>"{quote.text}"</blockquote>
|
||||
<cite>— {quote.author}</cite>
|
||||
</>
|
||||
)}
|
||||
```
|
||||
|
||||
**Moeilijkheid:** ⭐⭐⭐ (runtime error, maar duidelijke error message)
|
||||
|
||||
---
|
||||
|
||||
## CATEGORIE 4: STYLING FOUTEN (Inline Styles → Tailwind)
|
||||
|
||||
### Fout 9: Custom CSS classes in globals.css
|
||||
|
||||
**Bestand:** `app/globals.css`
|
||||
**Probleem:** `.card`, `.page-container`, `.section-title` zijn custom CSS classes. Deze horen Tailwind utility classes te zijn.
|
||||
|
||||
**Fix:** Verwijder custom CSS uit globals.css. Vervang in alle componenten:
|
||||
- `.card` → `className="p-6 bg-white rounded-xl border border-gray-200 hover:shadow-lg hover:-translate-y-0.5 transition-all"`
|
||||
- `.page-container` → `className="max-w-[1200px] mx-auto px-5"`
|
||||
- `.section-title` → `className="text-3xl font-bold text-center mb-10 text-gray-900"`
|
||||
|
||||
**Moeilijkheid:** ⭐⭐⭐ (moet begrijpen waarom Tailwind beter is dan custom CSS)
|
||||
|
||||
---
|
||||
|
||||
### Fout 10-12: Inline styles in alle componenten
|
||||
|
||||
**Bestanden met inline styles:**
|
||||
|
||||
| # | Bestand | Complexiteit |
|
||||
|---|---------|-------------|
|
||||
| 10 | `components/Hero.tsx` | Hoog (gradient, positioning) |
|
||||
| 11 | `components/Header.tsx` | Hoog (responsive, sticky) |
|
||||
| 12 | `components/Footer.tsx` | Medium (grid, links) |
|
||||
| - | `components/StatsSection.tsx` | Medium (grid) |
|
||||
| - | `components/BlogPreview.tsx` | Medium (grid, cards) |
|
||||
| - | `components/QuoteOfTheDay.tsx` | Laag |
|
||||
| - | `app/blog/page.tsx` | Medium (grid, tags) |
|
||||
| - | `app/blog/[slug]/page.tsx` | Medium (article layout) |
|
||||
| - | `app/dashboard/page.tsx` | Hoog (stats grid, cards) |
|
||||
|
||||
**Studenten moeten minimaal 3-4 bestanden omzetten.**
|
||||
|
||||
**Aanpak:**
|
||||
1. Selecteer inline style code
|
||||
2. `Ctrl+K` → "Converteer inline styles naar Tailwind CSS. Gebruik de brand- kleuren uit tailwind.config.ts waar mogelijk."
|
||||
3. Review + Accept
|
||||
|
||||
**Moeilijkheid:** ⭐⭐ per bestand (maar het zijn er VEEL)
|
||||
|
||||
---
|
||||
|
||||
## Samenvatting Alle Fouten
|
||||
|
||||
| # | Type | Bestand | Ernst | Moeilijkheid |
|
||||
|---|------|---------|-------|-------------|
|
||||
| 1 | Missing dependency (clsx) | lib/utils.ts | 🔴 Blokkerend | ⭐ |
|
||||
| 2 | Verkeerde import (next/servers) | api/quotes/route.ts | 🔴 Blokkerend | ⭐⭐ |
|
||||
| 3 | Verkeerde slice() params | BlogPreview.tsx | 🟡 Logisch | ⭐⭐⭐ |
|
||||
| 4 | Missende icon mapping | dashboard/page.tsx | 🟡 Logisch | ⭐⭐⭐ |
|
||||
| 5 | Mobile menu altijd hidden | Header.tsx | 🟡 Logisch | ⭐⭐⭐⭐ |
|
||||
| 6 | async in useEffect | dashboard/page.tsx | 🟠 Anti-pattern | ⭐⭐⭐⭐ |
|
||||
| 7 | Infinite loop dep array | dashboard/page.tsx | 🔴 Runtime crash | ⭐⭐⭐⭐ |
|
||||
| 8 | Null check quote state | QuoteOfTheDay.tsx | 🔴 Runtime crash | ⭐⭐⭐ |
|
||||
| 9 | Custom CSS → Tailwind | globals.css | 🟡 Styling | ⭐⭐⭐ |
|
||||
| 10-12 | Inline styles (9+ bestanden) | Overal | 🟡 Styling | ⭐⭐ elk |
|
||||
|
||||
---
|
||||
|
||||
## Verwachte Oplos-Volgorde
|
||||
|
||||
1. `npm install` → werkt
|
||||
2. `npm run dev` → `Can't resolve 'clsx'` → `npm install clsx`
|
||||
3. `npm run dev` → `Can't resolve 'next/servers'` → fix import
|
||||
4. Site laadt! Maar:
|
||||
- BlogPreview is leeg → fix slice()
|
||||
- Dashboard crasht/loopt vast → fix useEffect + dep array
|
||||
- Quote component crasht → fix null check
|
||||
- Rating icon mist → fix icon mapping
|
||||
- Mobile menu werkt niet → fix responsive
|
||||
5. Inline styles → Tailwind conversie
|
||||
6. Custom CSS → Tailwind refactor
|
||||
|
||||
---
|
||||
|
||||
## Verwacht Request Gebruik
|
||||
|
||||
| Actie | Requests |
|
||||
|-------|----------|
|
||||
| Debug blokkerende errors (Chat) | 2-3 |
|
||||
| Fix logische fouten (Chat + Edit) | 3-4 |
|
||||
| Fix React patterns (Chat) | 2-3 |
|
||||
| Inline styles → Tailwind (Inline Edit × 4-5) | 4-5 |
|
||||
| **Totaal** | **11-15 requests** |
|
||||
|
||||
⚠️ Dit is meer dan de easy versie. Studenten op Hobby plan moeten efficiënt werken. Student plan (500/maand) is ruim voldoende.
|
||||
|
||||
---
|
||||
|
||||
## Tips voor Tim
|
||||
|
||||
- **Dit is echt moeilijk.** Fout 5, 6, 7 zijn lastig voor beginners. Verwacht dat studenten hier hulp bij nodig hebben.
|
||||
- **De useEffect fouten** zijn een goed leermoment — dit is een HEEL veelvoorkomende bug in React.
|
||||
- **De slice() bug** is een subtiele logische fout. Studenten moeten leren: "het werkt zonder errors, maar het resultaat klopt niet" → debuggen.
|
||||
- **Mobile menu** is bewust moeilijk. Dit vereist dat ze responsive design begrijpen. Goede Cursor prompt: "Maak deze header responsive met een hamburger menu dat werkt op mobiel met Tailwind."
|
||||
- **Geef de easy zip als standaard.** Hard is voor studenten die de easy versie snel af hebben of die extra uitdaging willen.
|
||||
231
Les03-Cursor-Basics/Les03-Docenttekst-Notes.md
Normal file
231
Les03-Cursor-Basics/Les03-Docenttekst-Notes.md
Normal file
@@ -0,0 +1,231 @@
|
||||
# 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** |
|
||||
561
Les03-Cursor-Basics/Les03-Docenttekst.md
Normal file
561
Les03-Cursor-Basics/Les03-Docenttekst.md
Normal file
@@ -0,0 +1,561 @@
|
||||
# Les 3: Cursor - AI-Powered Code Editor
|
||||
## Docenttekst (Spreektekst voor Tim)
|
||||
|
||||
> **Totale lesduur:** 3 uur (180 minuten)
|
||||
> **Totale spreektijd:** ~90 minuten (verdeeld over blokken)
|
||||
> **Hands-on praktijk:** ~75 minuten
|
||||
> **Pauze:** 15 minuten (10:15-10:30)
|
||||
|
||||
---
|
||||
|
||||
## BLOK 1: WELKOM & MEDEDELING (10 min)
|
||||
|
||||
### Slide 1: Titelslide - Welkom Les 3, Cursor!
|
||||
**[09:00 - 09:02]**
|
||||
|
||||
"Goedemorgen iedereen, welkom bij Les 3! Vandaag gaan we kennismaken met Cursor, een code editor die echt gemaakt is voor developers. Dit is geen random AI tool – het is gebouwd VOOR programmeurs. In de vorige les hebben jullie gemerkt dat OpenCode wat problemen had: token limits, EACCES errors, en niet echt ontworpen voor professionele development. Cursor lost dat allemaal op. We gaan hem vandaag installeren, je eerste project bouwen, en je zult zien hoe snel je daarmee dingen kunt maken."
|
||||
|
||||
_[Glimlach, maak oogcontact. Stel de energie in voor een praktische, hands-on les.]_
|
||||
|
||||
---
|
||||
|
||||
### Slide 2: Planning vandaag
|
||||
**[09:02 - 09:05]**
|
||||
|
||||
"Dit is de planning voor vandaag. We starten met een korte terugblik op waarom Cursor beter is dan OpenCode. Dan gaan we Cursor installeren en je account opzetten – dat gaat snel. Daarna laat ik alle features zien: Chat, Inline Edit, Composer, Tab Completion, en @mentions. We doen een interfacetour zodat je precies weet waar alles zit.
|
||||
|
||||
Vervolgens duiken we in het inrichten van Cursor Skills – dat is belangrijk, je gaat framework documentatie inladen zodat de AI beter kan helpen. We maken je eerste .cursorrules file, en ik leg uit hoe je request limit management moet denken.
|
||||
|
||||
Om 09:40 doen we een live demo: ik bouw in real-time een Next.js project van nul tot werkend. Dan krijgen jullie rond 10:00 een praktische opdracht. Jullie bouwen zelf een project, en we hebben een pauze van 10:15 tot 10:30. Na de pauze werken jullie verder, en we afsluiten met het delen van jullie resultaten, een samenvatting, en huiswerk."
|
||||
|
||||
_[Wijs naar timeline op slide. Ga niet te snel. Geef studenten een gevoel van progressie.]_
|
||||
|
||||
---
|
||||
|
||||
### Slide 3: Terugblik Les 2 - Waarom Cursor beter is
|
||||
**[09:05 - 09:08]**
|
||||
|
||||
"Laten we even teruggaan naar Les 2 met OpenCode. Veel van jullie hebben vast gelopen tegen problemen, toch? Token limits die onverwacht opraken, EACCES permission errors als je externe packages wilde installeren, en eigenlijk voelde het meer als een AI chatbot dan als een echte code editor.
|
||||
|
||||
Cursor is fundamenteel anders. Het is GEBOUWD voor developers. Cursor ziet je hele codebase tegelijk – Chat werkt niet op fragmenten, maar snapt je hele project. De AI completion (Tab completion) is ingebouwd en super snel. Bovendien: het Hobby plan is helemaal gratis, en studenten kunnen upgraden naar het Student plan, ook gratis, via cursor.com/students. Geen creditcard nodig.
|
||||
|
||||
En het allerbelangrijkste: Cursor heeft een INGEBOUWDE terminal. Je kunt node -v, npm install, en git commands rechtstreeks uitvoeren zonder naar een ander venster te hoppen. Alles gebeurt in één editor."
|
||||
|
||||
_[Maak oogcontact. Zeg duidelijk "gratis" – dat is een belangrijk voordeel.]_
|
||||
|
||||
---
|
||||
|
||||
### Slide 4: Wat is Cursor? Features en pricing
|
||||
**[09:08 - 09:10]**
|
||||
|
||||
"Oké, wat IS Cursor precies? Het is eigenlijk VS Code – dezelfde editor die de helft van de wereld gebruikt – maar dan met krachtige AI features ingebouwd. Je krijgt vijf hoofdfeatures:
|
||||
|
||||
**Eerste: Chat (Ctrl+L).** Je kunt vragen stellen over je code. De AI ziet je hele codebase en kan context begrijpen. Je kunt vragen 'Hoe werkt deze functie?' of 'Wat doet dit component?'. Wees specifiek in je vragen, dan krijg je betere antwoorden.
|
||||
|
||||
**Tweede: Inline Edit (Ctrl+K).** Je selecteert code, geeft een instructie zoals 'Zet dit om naar Tailwind classes', en de AI edit precies dat stukje. Super handig voor kleine aanpassingen.
|
||||
|
||||
**Derde: Composer (Ctrl+I).** Dit is voor grotere taken. Je kunt zeggen 'Voeg een product pagina toe met filtering en cart functionaliteit', en de AI genereert meerdere files tegelijk. Echt krachtig.
|
||||
|
||||
**Vierde: Tab Completion.** De AI voorspelt je code. Je begint te typen, en het suggereert wat je waarschijnlijk wilt. Je drukt Tab en klaar. Dit kost GEEN requests – het is gratis!
|
||||
|
||||
**Vijfde: @mentions.** Je kunt context geven door @file, @folder, @web, en @docs te gebruiken. @docs is echt belangrijk: je kunt framework documentatie inladen, zodat de AI tegen de juiste versie van React of Next.js praat.
|
||||
|
||||
Nu: pricing. Het Hobby plan is gratis en volstaat voor het meeste. Je krijgt beperkte requests – precies genoeg om te oefenen. Als je Student ben, kun je naar cursor.com/students gaan en upgraden naar Student, ook gratis, met veel meer requests."
|
||||
|
||||
_[Toon de vijf features op je vingers. Zeg "GRATIS" luidop voor Tab Completion – veel studenten snappen niet dat dit geen request kost.]_
|
||||
|
||||
---
|
||||
|
||||
## BLOK 2: INSTALLATIE & SETUP (20 min)
|
||||
|
||||
### Slide 5: Download en installatie
|
||||
**[09:10 - 09:14]**
|
||||
|
||||
"Goed, laten we beginnen met installatie. Je gaat naar cursor.com en klikt op Download. Cursor draait op Mac, Windows, en Linux – dus voor iedereen. De installer is heel eenvoudig: je downloadt het, opent het, sleep je Cursor naar je Applications folder, en klaar. Als je op Windows bent, run je de .exe en volg je de stappen.
|
||||
|
||||
Dit kost ongeveer twee minuten. Als je al VS Code hebt, hoef je niks te desinstalleren – Cursor en VS Code kunnen naast elkaar bestaan zonder problemen."
|
||||
|
||||
_[Navigeer naar cursor.com en wijs de download knop aan. Laat zien hoe het eruit ziet op Mac en Windows (screenshot).]_
|
||||
|
||||
---
|
||||
|
||||
### Slide 6: Account aanmaken en upgraden
|
||||
**[09:14 - 09:18]**
|
||||
|
||||
"Zodra Cursor open is, maak je een account aan. Je hoeft NIET direct Student plan te nemen – begin met Hobby. Je geeft je emailadres en een wachtwoord in. Cursor stuurt je een bevestigingsmail.
|
||||
|
||||
BELANGRIJK: als je Student bent, upgrade je NA deze eerste setup. Je gaat naar cursor.com/students, logt in met diezelfde email, en kiest Student plan. Geen creditcard, geen gedoe – je werkt gewoon mee met onze les en je bent gedekt.
|
||||
|
||||
Na login zie je je Hobby account. Dan gaan we gelijk verder met setup."
|
||||
|
||||
_[Toon account maken op je eigen machine. Zeg duidelijk: "Hobby EERST, Student plan LATER". CHECKPOINT: check rond of iedereen ingelogd is.]_
|
||||
|
||||
---
|
||||
|
||||
### Slide 7: Interface tour
|
||||
**[09:18 - 09:22]**
|
||||
|
||||
"Oké, je bent ingelogd. Laten we de interface doornemen zodat je weet waar alles zit.
|
||||
|
||||
Links zie je de **Activity Bar** – kleine iconen voor Files, Search, Source Control, en Run & Debug. Dit is hetzelfde als VS Code.
|
||||
|
||||
Daaronder zie je de **Sidebar** – dit is waar je bestanden staan als je Files opent.
|
||||
|
||||
In het midden: de **Editor**. Dit is waar je code schrijft en bewerkt.
|
||||
|
||||
Aan de rechterkant – en dit is NIEUW vergeleken met normale VS Code – de **Chat Panel**. Dit open je met Ctrl+L. Hier stel je vragen over je code.
|
||||
|
||||
Onder de editor zie je de **Terminal** – Ctrl+backtick, dus Ctrl+` – hier voer je commands uit.
|
||||
|
||||
Het mooie is: ALLES zit in één window. Je hoeft niet tussen VS Code en ChatGPT heen en weer te springen."
|
||||
|
||||
_[Beweeg je cursor rond op de interface. Duid elke component aan. Open de Chat Panel met Ctrl+L, sluit het weer met Escape.]_
|
||||
|
||||
---
|
||||
|
||||
### Slide 8: Terminal setup check SAMEN
|
||||
**[09:22 - 09:30]**
|
||||
|
||||
"Nu gaan we even checken of je setup klaar is. Dit doen we via de Terminal. Open Terminal met Ctrl+backtick – dus Ctrl+`.
|
||||
|
||||
Je ziet prompt. We gaan drie commands checken:
|
||||
|
||||
**Eerste: node -v** – dit geeft je Node.js versie. Je wilt versie 18 of hoger. Als je error ziet 'command not found', moet je Node.js installeren via nodejs.org.
|
||||
|
||||
**Tweede: git --version** – dit geeft je Git versie. Versie 2.20 of hoger is prima.
|
||||
|
||||
**Derde: npm -v** – dit is de Package Manager die met Node.js komt. Ook 7.0 of hoger.
|
||||
|
||||
**Vierde: npx -v** – dit is ESSENTIEEL. npx gebruiken we straks om create-next-app te draaien. Als npx niet werkt, kun je geen nieuw project aanmaken. npx komt normaal mee met npm, dus als npm werkt, werkt npx ook. Maar even checken!
|
||||
|
||||
Wie errors ziet, geen paniek. Steek je hand op, ik help je. Dit duurt twee minuten per persoon."
|
||||
|
||||
_[Open je eigen Terminal. Typ de vier commands. Laat zien wat output eruitziet. Sta twee minuten stil en help studenten die problemen hebben.]_
|
||||
|
||||
_[CHECKPOINT: zorg dat iedereen node, git, npm EN npx werkend heeft. Dit is essentieel voor de rest van de les.]_
|
||||
|
||||
---
|
||||
|
||||
## BLOK 3: CURSOR FEATURES (15 min)
|
||||
|
||||
### Slide 9: Chat Panel - Vragen over je code
|
||||
**[09:30 - 09:36]**
|
||||
|
||||
"Nu duiken we in de échte kracht van Cursor: de Features. Laten we beginnen met **Chat Panel**.
|
||||
|
||||
Je opent Chat met Ctrl+L. Ik open het nu even op mijn scherm. Je ziet een textbox waar je kunt typen. Het bijzondere: Cursor ziet je HELE project, niet gewoon het stukje code dat je hebt geselect.
|
||||
|
||||
Stel je voor: je hebt een Next.js project met 15 componenten. Je kunt in Chat vragen: 'Hoe werkt de authentication flow in dit project?' en de AI snapt je hele setup en geeft een ingewikkeld antwoord.
|
||||
|
||||
**Tips voor goede Chat vragen:**
|
||||
- Wees specifiek. Zeg niet 'Fix dit' maar 'Zet alle inline styles om naar Tailwind classes en zorg dat de layout hetzelfde blijft.'
|
||||
- Geef context. 'In de ProductCard component, de border is nu blauw, kan hij rood zijn en dikker?'
|
||||
- Stel vervolgvragen. De AI onthoudt wat je eerder vroeg.
|
||||
|
||||
Chat kost één request per bericht. Hop voorzichtig – je hebt beperkte requests op Hobby."
|
||||
|
||||
_[Open Chat (Ctrl+L). Typ een voorbeeld vraag. Laat zien hoe antwoord zich opent.]_
|
||||
|
||||
---
|
||||
|
||||
### Slide 10: Inline Edit - Snelle code changes
|
||||
**[09:36 - 09:41]**
|
||||
|
||||
"Volgende feature: **Inline Edit (Ctrl+K)**. Dit is voor als je kleine stukken wilt aanpassen.
|
||||
|
||||
Stel je voor: je hebt een component met inline styles – die lelijke style={{color: 'red', marginTop: '10px'}}. Je wilt dit naar Tailwind. Je selecteert die hele component code, drukt Ctrl+K, en je typt: 'Zet alle inline styles om naar Tailwind classes, keep the same styling.'
|
||||
|
||||
Cursor selecteert precies dat stukje, geeft een preview, en je ziet de diff. Je kunt dan een diff accepteren of afwijzen. Super handig voor refactoring.
|
||||
|
||||
**Voorbeeld in mijn hoofd:**
|
||||
Input: Component met inline styles
|
||||
Instructie: 'Convert to Tailwind'
|
||||
Output: Dezelfde component, maar nu className='text-red-600 mt-2.5'
|
||||
|
||||
Dit kost ook één request. Gebruik het voor kleine, chirurgische aanpassingen."
|
||||
|
||||
_[Maak een voorbeeld component met inline styles. Demonstreer Ctrl+K en de AI vervanging.]_
|
||||
|
||||
---
|
||||
|
||||
### Slide 11: Composer - Multi-file grote taken
|
||||
**[09:41 - 09:46]**
|
||||
|
||||
"Nu het heavyweight: **Composer (Ctrl+I)**. Dit is voor als je GROTE dingen wilt doen – dingen die meerdere files raken.
|
||||
|
||||
Stel je voor: je hebt een Next.js app met één pagina. Je wilt een heel nieuwe feature: een Admin Dashboard met login, user list, en stats panel. Dit raakt misschien 5 bestanden: nieuwe route, nieuwe component, styles, database queries, alles.
|
||||
|
||||
In plaats van dit in stukken te vragen in Chat, openen je Composer met Ctrl+I. Je zegt: 'Voeg een Admin Dashboard toe met login, user management, en stats. Zet het op /admin route.'
|
||||
|
||||
Composer genereert ALLES tegelijk – alle files, alle imports, alle routing. Je ziet een preview, klikt 'Accept', en BOEM – je project heeft een werkende admin dashboard.
|
||||
|
||||
Dit is échte time-saver. En ja, dit kost ook één request – niet meer, niet minder, want Cursor snapt dat je één logische taak doet."
|
||||
|
||||
_[Open je eigen project. Open Composer (Ctrl+I). Laat zien hoe je een multi-file taak kunt beschrijven.]_
|
||||
|
||||
---
|
||||
|
||||
### Slide 12: Tab Completion - AI code voorspelling
|
||||
**[09:46 - 09:50]**
|
||||
|
||||
"Feature vier: **Tab Completion**. Dit is mijn favoriet. En het BELANGRIJKSTE: dit kost GEEN requests. Nul. Gratis.
|
||||
|
||||
Je begint gewoon code te typen. Terwijl je typt, ziet Cursor wat je waarschijnlijk wilt doen. Je typt:
|
||||
|
||||
```javascript
|
||||
const handleClick = () => {
|
||||
```
|
||||
|
||||
En Cursor suggereert al wat je waarschijnlijk volgende doet. Je drukt Tab en het wordt aanvaard. Je typt verder, Tab, verder, Tab. Dit gaat super snel.
|
||||
|
||||
**Waarom is dit gratis?** Omdat Tab Completion niet intensief is voor Cursor – het is lokale voorspelling, niet een volledige AI analyse. Dus gebruik dit VEEL! Dit moet je reflexmatig doen.
|
||||
|
||||
**Tip:** als je een suggestion ziet die je niet wilt, druk je gewoon Escape of tik je wat anders. Geen probleem.
|
||||
|
||||
Dit is echt de feature waar je sneller in je code wordt als je het goed gebruikt."
|
||||
|
||||
_[Demonstreer Tab Completion in je editor. Typ langzaam zodat Cursor suggestions toont. Druk Tab en laat zien hoe snel dit gaat.]_
|
||||
|
||||
---
|
||||
|
||||
### Slide 13: @mentions - Context voor je vragen
|
||||
**[09:50 - 09:55]**
|
||||
|
||||
"Laatste feature: **@mentions**. Dit is hoe je de AI context geeft.
|
||||
|
||||
Je kent het van Slack en Discord: als je @iemand typt, tag je ze. In Cursor Chat doe je iets soortgelijks.
|
||||
|
||||
Je kunt typen:
|
||||
- **@file** – je verwijst naar een specifiek bestand. Voorbeeld: '@pages/api/auth.js write a logout endpoint'
|
||||
- **@folder** – je verwijst naar een hele folder. Voorbeeld: '@components analyze this folder and tell me architecture'
|
||||
- **@web** – de AI zoekt het web op. Voorbeeld: 'how do I connect to @web stripe payment gateway?'
|
||||
- **@docs** – DIT IS HEEL BELANGRIJK – je verwijst naar framework documentatie. Voorbeeld: '@docs latest react patterns for state management'
|
||||
|
||||
@docs is een game changer. Als je @docs docs react typen, zal de AI antwoorden tegen de officieële React documentatie, niet tegen oude tutorials. Dit voorkomt dat je advice krijgt van 2019.
|
||||
|
||||
We gaan straks je Skills opzetten, en daar laad je @docs in. Ongelofelijk powerful."
|
||||
|
||||
_[Typ in Chat: '@docs how do I use hooks?' Laat zien dat niks gebeurt totdat Skills ingesteld zijn – dat doen we volgende slide.]_
|
||||
|
||||
---
|
||||
|
||||
## BLOK 4: SKILLS, RULES & REQUESTS (15 min)
|
||||
|
||||
### Slide 14: Cursor Skills - Framework documentatie inladen
|
||||
**[09:55 - 10:05]**
|
||||
|
||||
"Oké, volgende stap. Ik zei net dat @docs belangrijk is. Daarvoor moeten we eerst je **Cursor Skills** instellen. Dit is hoe je documentatie inlaadt zodat de AI weet tegen welke versies het praat.
|
||||
|
||||
We doen dit SAMEN, dus volg mee op je eigen machine.
|
||||
|
||||
**Stap 1:** Ga naar Settings. Op Mac: Cmd+, (command komma). Op Windows: Ctrl+, (control komma). De Settings paneel opent.
|
||||
|
||||
**Stap 2:** Je zoekt naar 'Features' en je klikt op Features.
|
||||
|
||||
**Stap 3:** Je zoekt naar 'Docs' – je ziet 'Cursor Docs' instelling. Daar klikt je op.
|
||||
|
||||
**Stap 4:** Je ziet een + knop. Je klikt erop. Nu kun je documentatie toevoegen. Dit zijn de drie die ik aanraad:
|
||||
|
||||
- **Next.js:** je gaat naar nextjs.org/docs en je pakt die URL. Voeg toe.
|
||||
- **React:** react.dev is de officieële React docs. Voeg toe.
|
||||
- **Tailwind CSS:** tailwindcss.com/docs. Voeg toe.
|
||||
|
||||
Na toevoegen kun je in Chat @docs gebruiken en de AI leest tegen jouw documentatie. Test het: type in Chat '@docs what is the latest way to do routing in next.js?' en je krijgt antwoord uit de officieële Next.js documentatie, niet uit random StackOverflow.
|
||||
|
||||
Dit is echt belangrijk voor professioneel werken."
|
||||
|
||||
_[DOEN, niet demo. Zorg dat iedereen dit meegedaan heeft. Help met technische vragen. CHECKPOINT: vraag "Iedereen Skills ingesteld?" en wacht op bevestiging.]_
|
||||
|
||||
---
|
||||
|
||||
### Slide 15: .cursorrules - Jouw AI richtlijnen
|
||||
**[10:05 - 10:12]**
|
||||
|
||||
"Nu gaan we een .cursorrules bestand maken. Dit is NIET handmatig geschreven – Cursor genereert dit voor je.
|
||||
|
||||
Een .cursorrules file is een bestand in de root van je project waarin je aan Cursor zegt: 'Hey, als je met mijn code werkt, volg deze richtlijnen.'
|
||||
|
||||
Voorbeeld richtlijnen:
|
||||
- 'Alle componenten moeten TypeScript hebben type annotations'
|
||||
- 'Gebruik Tailwind, geen CSS modules'
|
||||
- 'Nederlandse comments in de code'
|
||||
- 'Altijd error handling toevoegen'
|
||||
|
||||
Dit is SUPER handig omdat je je preferences maar één keer ingesteld hebt, en dan volgt de AI altijd.
|
||||
|
||||
**Hoe maak je het?** Heel makkelijk:
|
||||
|
||||
**Stap 1:** Je opent Chat (Ctrl+L).
|
||||
|
||||
**Stap 2:** Je plakt deze prompt:
|
||||
|
||||
'Genereer een .cursorrules bestand voor een Next.js + Tailwind CSS + TypeScript project. Include richtlijnen voor: code style, components best practices, error handling, en Nederlandse comments. Output het volledige bestand klaar om te kopieën.'
|
||||
|
||||
**Stap 3:** Cursor genereert een complete .cursorrules file. Je kopieert dit.
|
||||
|
||||
**Stap 4:** In je project maak je een nieuw bestand genaamd `.cursorrules` in de root folder. Je plakt de content en je saved.
|
||||
|
||||
**Klaar!** Dát is één request, en nu volgt Cursor altijd jouw rules.
|
||||
|
||||
Dit is echt tijd besparen. Je zegt nooit meer 'gebruik TypeScript' – dat weet Cursor al."
|
||||
|
||||
_[Open Chat. Paste je eigen .cursorrules prompt (aanwezig op je machine). Laat zien hoe output eruitziet. Demonstreer kopieën naar nieuw bestand.]_
|
||||
|
||||
---
|
||||
|
||||
### Slide 16: Request management - Budget uitzetten
|
||||
**[10:12 - 10:20]**
|
||||
|
||||
"Oké, de grote vraag: requests. Op Hobby heb je BEPERKT aantal requests. Je wilt ze slim gebruiken.
|
||||
|
||||
**Hier is de breakdown:**
|
||||
- **Tab Completion:** GRATIS. Ongelimiteerd. Gebruik dit voor kleine dingen.
|
||||
- **Chat:** 1 request per bericht. Wees voorzichtig.
|
||||
- **Inline Edit:** 1 request. Snel maar denk je in voor je tikt.
|
||||
- **Composer:** 1 request, ongeacht hoe groot. Dit is eigenlijk heel voordelig voor grote dingen.
|
||||
|
||||
**Budget tips:**
|
||||
|
||||
**Eén: Denk eerst, prompt daarna.** Voordat je iets vraagt, bepaal je wat je PRECIES wilt. Maak een kopje koffie, bedenk je vraag, tik dan. Dit voorkomt vijf mislukte requests.
|
||||
|
||||
**Twee: Combineer taken.** In plaats van drie aparte Chat vragen, maak je één grote vraag. Zeg alles in één bericht.
|
||||
|
||||
**Drie: Gebruik Tab Completion voor kleine dingen.** Import statements, losse variabelen, functies. Dit bespaart requests.
|
||||
|
||||
**Vier: Composer voor grote refactors.** Als je iets aan meerdere files moet doen, doe je het in Composer, niet in aparte Chat vragen.
|
||||
|
||||
**Vijf: @mentions voor efficiency.** @docs helpt je beter vragen stellen, minder 'wat is het beste patroon' vragen.
|
||||
|
||||
Op Hobby krijg je genoeg om deze hele les te doen en meer. Maar als je gaat echt projecten bouwen, upgrade je naar Student. Dan heb je veel meer."
|
||||
|
||||
_[Toon scherm met request counter. Leg uit waar je request status ziet (rechtsboven in Cursor).]_
|
||||
|
||||
---
|
||||
|
||||
## BLOK 5: LIVE DEMO (15 min)
|
||||
|
||||
### Slide 17: Live Demo - Van nul naar werkende website
|
||||
**[10:20 - 10:35]**
|
||||
|
||||
"Oké, genoeg theorie. Ik bouw nu in real-time een werkende Next.js website. Dit doet twee dingen: één, je ziet hoe snel dit echt gaat, en twee, je ziet de volledige workflow die je straks zelf doet.
|
||||
|
||||
**Stap 1: Project setup**
|
||||
```bash
|
||||
mkdir my-demo-site
|
||||
cd my-demo-site
|
||||
git init
|
||||
```
|
||||
|
||||
Ik heb een folder, git aan. Cursor openen.
|
||||
|
||||
**Stap 2: Next.js project**
|
||||
```bash
|
||||
npx create-next-app@latest . --typescript --tailwind --app
|
||||
```
|
||||
|
||||
Ik zeg Yes op TypeScript, Yes op Tailwind, Yes op App Router. Dit duurt ongeveer een minuut.
|
||||
|
||||
**Stap 3: Dev server**
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Nu draait http://localhost:3000 met de default Next.js pagina.
|
||||
|
||||
**Stap 4: .cursorrules via Chat**
|
||||
Ctrl+L. Ik paste mijn prompt. Één request. Copy. Make file `.cursorrules`. Done.
|
||||
|
||||
**Stap 5: HeroSection via Composer**
|
||||
Ctrl+I. 'Create a Hero section component in app/components/HeroSection.tsx with a headline, subheading, and a Call-to-Action button. Use Tailwind classes. Make it look modern.'
|
||||
|
||||
Cursor genereert de hele component. Één request. Ik accepteer.
|
||||
|
||||
**Stap 6: Integrate in page**
|
||||
Ik open app/page.tsx. Voeg import HeroSection. Zet het in HTML. Refresh browser. BOOM. Werkende website, mooi design.
|
||||
|
||||
**Stap 7: Git commit**
|
||||
```bash
|
||||
git add .
|
||||
git commit -m "Initial setup with HeroSection"
|
||||
```
|
||||
|
||||
**Totaal:** Ik gebruikte 2 requests (één voor .cursorrules, één voor HeroSection). Tab Completion hielp met imports en minor edits. Van nul naar werkende website in 15 minuten. Dat kan jij straks ook."
|
||||
|
||||
_[ECHTE DEMO, niet gerendeert. Wys elke stap live. Stop niet totdat npm run dev werkt en browser toont mooi design. Timing is belangrijk – studenten moeten zien dat dit ECHT snel gaat.]_
|
||||
|
||||
---
|
||||
|
||||
## BLOK 6: HANDS-ON PRAKTIJK (75 min + 15 min pauze)
|
||||
|
||||
### Slide 18: Hands-on opdracht - Studenten bouwen eigen project
|
||||
**[10:35 - 10:50] (+ pauze 10:15-10:30, dan verder tot 11:30]**
|
||||
|
||||
"Jullie beurt. Hier is wat je gaat doen. Dit is dezelfde workflow als mijn demo, maar je doet het zelf.
|
||||
|
||||
**Opdracht:** Bouw een NIEUW project. Mag elk onderwerp zijn – portfolio site, blog, product showcase, whatever. Belangrijkste: je volgt deze stappen:
|
||||
|
||||
**Stap 1: Project initialize**
|
||||
```bash
|
||||
mkdir my-awesome-project
|
||||
cd my-awesome-project
|
||||
git init
|
||||
```
|
||||
|
||||
**Stap 2: Next.js setup**
|
||||
```bash
|
||||
npx create-next-app@latest . --typescript --tailwind --app
|
||||
```
|
||||
TypeScript = Yes, Tailwind = Yes, App Router = Yes.
|
||||
|
||||
**Stap 3: Cursor Skills check**
|
||||
Zorg dat je Next.js, React, en Tailwind documentatie ingeladen hebt. Test @docs.
|
||||
|
||||
**Stap 4: .cursorrules genereren**
|
||||
Chat, één prompt, één request. Kopieën naar bestand.
|
||||
|
||||
**Stap 5: Componenten bouwen**
|
||||
Gebruik Composer (Ctrl+I) om componenten te genereren:
|
||||
- HeroSection (headline, subheading, CTA)
|
||||
- FeatureCards (3-4 feature cards met iconen en beschrijvingen)
|
||||
- TestimonialSection (3 testimonials)
|
||||
- Footer
|
||||
|
||||
Elke Composer request = één component.
|
||||
|
||||
**Stap 6: Integreren in main page**
|
||||
Import alle componenten in app/page.tsx. npm run dev. Check dat alles looks good.
|
||||
|
||||
**Stap 7: Git commit**
|
||||
```bash
|
||||
git add .
|
||||
git commit -m "Complete project setup with all components"
|
||||
```
|
||||
|
||||
**Timing:**
|
||||
- Nu tot 10:15: je begint. Ik loop rond, ik help met problemen.
|
||||
- 10:15-10:30: PAUZE. Stretch, koffie, toilet.
|
||||
- 10:30-11:15: jullie bouwen verder. Meer componenten, refinement, styling tweaks. Ik help.
|
||||
|
||||
**Checks tussendoor:**
|
||||
- Is npm run dev werkend?
|
||||
- Hoe veel requests heb je gebruikt?
|
||||
- Zit je stuck? Vraag me.
|
||||
|
||||
**Let op:** dit is HANDS-ON. Je moet dit zelf doen, niet copy-paste van mij. De waarde zit in het leren van de workflow."
|
||||
|
||||
_[Zet timer op. Check na 10 minuten wie klaar is met setup. Help trackers. Zorg dat iedereen minstens HeroSection werkend heeft voor de pauze.]_
|
||||
|
||||
_[Na pauze: motiveer studenten, help met volgende componenten, praise progress.]_
|
||||
|
||||
---
|
||||
|
||||
## BLOK 7: AFSLUITING (15 min)
|
||||
|
||||
### Slide 19: Resultaten delen
|
||||
**[11:15 - 11:25]**
|
||||
|
||||
"Goed werk iedereen! Nu gaan we een paar resultaten delen. Ik wil 3-4 van jullie zien wat je hebt gebouwd.
|
||||
|
||||
[Roep studenten op om hun project op scherm te delen. Laat hun website zien. Zeg wat je goed vindt – 'Leuke kleuren!' of 'Mooie layout, hoe heb je die FeatureCards gedaan?' Geef high-fives digitaal of letterlijk.]
|
||||
|
||||
Dit is echt professioneel werk. En je hebt dit in anderhalf uur gebouwd. Besef je dat? Met OpenCode zou dit twee keer zo lang geduurd hebben."
|
||||
|
||||
_[Echt naar mensen luisteren. 3-4 korte demo's, niet lang. Maak het positief.]_
|
||||
|
||||
---
|
||||
|
||||
### Slide 20: Samenvatting - De les in vijf punten
|
||||
**[11:25 - 11:35]**
|
||||
|
||||
"Laten we samenvatten wat je vandaag geleerd hebt.
|
||||
|
||||
**Eén: Setup.** Je kunt Cursor installeren, een account maken, Skills configureren. Dit is standaard, je doet dit nu automatisch.
|
||||
|
||||
**Twee: AI Features.** Je kent Chat, Inline Edit, Composer, Tab Completion, @mentions. Elke feature heeft een use case. Chat voor vragen, Composer voor grote dingen, Tab Completion voor snelheid.
|
||||
|
||||
**Drie: Workflow.** Initialize project, create Next.js app, .cursorrules, build components, integrate, commit. Dit is de bouwsteen voor alle projecten voortaan.
|
||||
|
||||
**Vier: Request Management.** Je weet dat je beperkt hebt, je plant je requests, je combineert taken. Je denkt, daarna prompt.
|
||||
|
||||
**Vijf: Speed.** Je bouwde een website in anderhalf uur. Dat gaat niet slimmer worden – dat is de norm voortaan.
|
||||
|
||||
Dit zijn de fundamentals. Volgende les gaan we dieper: effectief prompting, hoe je betere vragen stelt, hoe je iteratief werkt met de AI. Dat is waar de echte magie gebeurt."
|
||||
|
||||
_[Zeg duidelijk, maak oogcontact. Dit is de afsluiting.]_
|
||||
|
||||
---
|
||||
|
||||
### Slide 21: Huiswerk - DEBUG CHALLENGE
|
||||
**[11:35 - 11:40]**
|
||||
|
||||
"Huiswerk. Dit is een DEBUG CHALLENGE. Je gaat een zip bestand krijgen via Teams. Die zip bevat een half-gebouwde Next.js project – EXPRES met fouten.
|
||||
|
||||
**Wat zit erin:**
|
||||
- Missende dependencies (package.json incomplete)
|
||||
- Syntax errors (typos in components)
|
||||
- Inline styles die naar Tailwind moeten
|
||||
- Import statements die broken zijn
|
||||
- Misschien een API route die niet werkt
|
||||
|
||||
**Je taak:**
|
||||
1. Download de zip
|
||||
2. Extract em
|
||||
3. Open in Cursor
|
||||
4. USE Cursor om ALLE fouten te fixen. Niet handmatig repareren – dat is het punt niet. Gebruik Chat, Inline Edit, Composer. Leer hoe je de AI gebruikt om bugs op te spotten en te fixen.
|
||||
5. Als alles werkend is: npm run dev moet geen errors geven
|
||||
6. Push naar je GitHub
|
||||
|
||||
**Due:** volgende les. Zorg dat je een werkend project hebt en een GitHub link.
|
||||
|
||||
Dit is echt oefenen. Debugging met AI is een skill. Je leert het nu."
|
||||
|
||||
_[Upload de zip naar Teams. Zeg de naam van het bestand luid.]_
|
||||
|
||||
---
|
||||
|
||||
### Slide 22: Volgende les preview
|
||||
**[11:40 - 11:45]**
|
||||
|
||||
"Volgende les: **Effectief Prompting & Iteratief Werken**. We gaan dieper.
|
||||
|
||||
Vandaag maakte je basale prompts. Volgende keer leren we:
|
||||
- Prompt engineering: hoe je vragen stelt zodat de AI beter begrijpt wat je wilt
|
||||
- Iteratie: hoe je feedback geeft en verbeteringen doet, stap voor stap
|
||||
- Context building: hoe je de AI steeds meer context geeft voor betere resultaten
|
||||
- Real-world scenarios: fixing bugs, refactoring code, building complex features
|
||||
|
||||
Dit is waar development met AI echt wordt. Prompting is een skill, net als typen of debuggen. We gaan het trainen.
|
||||
|
||||
Tot volgende week!"
|
||||
|
||||
_[Smile. Dit is motiverend. Zeg "Goed gedaan vandaag" en bedank iedereen voor de aandacht.]_
|
||||
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
## TIMING OVERVIEW
|
||||
|
||||
| Blok | Slides | Duratie | Totaal (min) |
|
||||
|------|--------|---------|------|
|
||||
| **BLOK 1: Welkom & Mededeling** | 1-4 | 10 min | 0-10 |
|
||||
| **BLOK 2: Installatie & Setup** | 5-8 | 20 min | 10-30 |
|
||||
| **BLOK 3: Cursor Features** | 9-13 | 15 min | 30-45 |
|
||||
| **BLOK 4: Skills, Rules & Requests** | 14-16 | 15 min | 45-60 |
|
||||
| **BLOK 5: Live Demo** | 17 | 15 min | 60-75 |
|
||||
| **BLOK 6: Hands-on (incl. pauze)** | 18 | 75 min + 15 min pauze | 75-165 |
|
||||
| | | Pauze: 10:15-10:30 | |
|
||||
| **BLOK 7: Afsluiting** | 19-22 | 10 min | 165-175 |
|
||||
| **TOTAAL** | 22 | **175 minuten (2h 55min)** | |
|
||||
|
||||
---
|
||||
|
||||
## EXTRA NOTES VOOR TIM
|
||||
|
||||
- **Checkpoints:** Slide 6, 8, 14 – zorg dat iedereen op dezelfde plek is voor je verdergaat
|
||||
- **Problemen:** Bij terminal setup kan het 5 minuten extra kosten. Plan dit in.
|
||||
- **Live demo timing:** dit duurt 15 minuten ECHT. Niet sneller – studenten moeten het zien gebeuren.
|
||||
- **Hands-on pauze:** 10:15-10:30 is VAST. Studenten hebben dit nodig.
|
||||
- **Request usage:** controleer rond 10:45 dat niemand meer dan 5 requests gebruikt heeft. Anders raken ze op.
|
||||
- **Debugging hw:** zip bestand moet express simple bugs hebben (missing import, extra comma, inline style). Niet complex.
|
||||
- **Energy:** rond minuut 120 zakt energie. Zet muziek op pauze, trek grappen, keep it real.
|
||||
193
Les03-Cursor-Basics/Les03-Hands-On-Opdracht.pdf
Normal file
193
Les03-Cursor-Basics/Les03-Hands-On-Opdracht.pdf
Normal file
@@ -0,0 +1,193 @@
|
||||
%PDF-1.4
|
||||
%<25><><EFBFBD><EFBFBD> ReportLab Generated PDF document (opensource)
|
||||
1 0 obj
|
||||
<<
|
||||
/F1 2 0 R /F2 3 0 R /F3 4 0 R /F4 5 0 R /F5 7 0 R /F6 9 0 R
|
||||
>>
|
||||
endobj
|
||||
2 0 obj
|
||||
<<
|
||||
/BaseFont /Helvetica /Encoding /WinAnsiEncoding /Name /F1 /Subtype /Type1 /Type /Font
|
||||
>>
|
||||
endobj
|
||||
3 0 obj
|
||||
<<
|
||||
/BaseFont /Helvetica-Bold /Encoding /WinAnsiEncoding /Name /F2 /Subtype /Type1 /Type /Font
|
||||
>>
|
||||
endobj
|
||||
4 0 obj
|
||||
<<
|
||||
/BaseFont /ZapfDingbats /Name /F3 /Subtype /Type1 /Type /Font
|
||||
>>
|
||||
endobj
|
||||
5 0 obj
|
||||
<<
|
||||
/BaseFont /Courier /Encoding /WinAnsiEncoding /Name /F4 /Subtype /Type1 /Type /Font
|
||||
>>
|
||||
endobj
|
||||
6 0 obj
|
||||
<<
|
||||
/Contents 17 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 16 0 R /Resources <<
|
||||
/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ]
|
||||
>> /Rotate 0 /Trans <<
|
||||
|
||||
>>
|
||||
/Type /Page
|
||||
>>
|
||||
endobj
|
||||
7 0 obj
|
||||
<<
|
||||
/BaseFont /Symbol /Name /F5 /Subtype /Type1 /Type /Font
|
||||
>>
|
||||
endobj
|
||||
8 0 obj
|
||||
<<
|
||||
/Contents 18 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 16 0 R /Resources <<
|
||||
/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ]
|
||||
>> /Rotate 0 /Trans <<
|
||||
|
||||
>>
|
||||
/Type /Page
|
||||
>>
|
||||
endobj
|
||||
9 0 obj
|
||||
<<
|
||||
/BaseFont /Helvetica-Oblique /Encoding /WinAnsiEncoding /Name /F6 /Subtype /Type1 /Type /Font
|
||||
>>
|
||||
endobj
|
||||
10 0 obj
|
||||
<<
|
||||
/Contents 19 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 16 0 R /Resources <<
|
||||
/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ]
|
||||
>> /Rotate 0 /Trans <<
|
||||
|
||||
>>
|
||||
/Type /Page
|
||||
>>
|
||||
endobj
|
||||
11 0 obj
|
||||
<<
|
||||
/Contents 20 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 16 0 R /Resources <<
|
||||
/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ]
|
||||
>> /Rotate 0 /Trans <<
|
||||
|
||||
>>
|
||||
/Type /Page
|
||||
>>
|
||||
endobj
|
||||
12 0 obj
|
||||
<<
|
||||
/Contents 21 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 16 0 R /Resources <<
|
||||
/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ]
|
||||
>> /Rotate 0 /Trans <<
|
||||
|
||||
>>
|
||||
/Type /Page
|
||||
>>
|
||||
endobj
|
||||
13 0 obj
|
||||
<<
|
||||
/Contents 22 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 16 0 R /Resources <<
|
||||
/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ]
|
||||
>> /Rotate 0 /Trans <<
|
||||
|
||||
>>
|
||||
/Type /Page
|
||||
>>
|
||||
endobj
|
||||
14 0 obj
|
||||
<<
|
||||
/PageMode /UseNone /Pages 16 0 R /Type /Catalog
|
||||
>>
|
||||
endobj
|
||||
15 0 obj
|
||||
<<
|
||||
/Author (\(anonymous\)) /CreationDate (D:20260224200450+00'00') /Creator (\(unspecified\)) /Keywords () /ModDate (D:20260224200450+00'00') /Producer (ReportLab PDF Library - \(opensource\))
|
||||
/Subject (\(unspecified\)) /Title (\(anonymous\)) /Trapped /False
|
||||
>>
|
||||
endobj
|
||||
16 0 obj
|
||||
<<
|
||||
/Count 6 /Kids [ 6 0 R 8 0 R 10 0 R 11 0 R 12 0 R 13 0 R ] /Type /Pages
|
||||
>>
|
||||
endobj
|
||||
17 0 obj
|
||||
<<
|
||||
/Filter [ /ASCII85Decode /FlateDecode ] /Length 2112
|
||||
>>
|
||||
stream
|
||||
Gb!#\D/\/e&H;*)E<TCYm:qAoU8WImdO]7aV+Fk&.gGdd</!o.g9N4j8CnCLm5n4A,s/Q*A3hpQNdR"7DnP8DUDZo+A+"h)#'`.YSQ?4:LVYu)8L+_)i*aq-g@7tGI?5$%mh<eU75YW*@i?XY,)S;rPS\KDo@d?KLl>gQP*60D-SQB)pW1QDm)&aE3Lc9&-8!MT]orLmVIsJ/?-Zm"Gmq_@IiQ=pab?-oQ]oOi\p9`Nj@'FB)%<ZUnD$(q*aK3:PU8_:%^CtLNjQUCeistuiqZXa74TEL5gY+A(m'Cu&ehMi$ABObf);.@*4U$'i\hZHOsnnK!XaRd7<#`1$82(=hff[6ooUQf1!k.oL:_7,`k\VdE,/u)!onlGb^pAajlH7BXpg]q_A"[U-W_Xa_q<33Q9ABhZFk-d/1POu7E*MR(u4'4D27=C;h;2!1t%iII:3_Rd"g5D_C6=SN&6A8%"c>%qQ&0lJiV0i7%-!_5Q,E&LgZg'*Z6ACAD&B'U.VgiWAR>=8uXf8cnPk?pW_OW6tsJQ=[?'rEO@8eJdA5qXX7)Vrn&i&p+ct9A*ZH`7'3a'0D5Pf?L\is]Zo@I5!=[qo@+Ie[iu0%9G/[]NqJrNM'*S=->`[_0>Z$W$Di=Fk8iiN=-\aq'3^`ZUOr`W0a5/2kYd+K>@:.ZpFT:Cou-8<Q3lN49IRItO;VSfG+e`eol[h2.]Tr/"iTF\0<XK8=MfB*J%7t9Ou.G85:0uagQ1CM+;g-`[lM!fXhb)**H#t\3O=e)g&MFuG2'LKK,63q-0?Zt]muI2jCW#Hm4!B%^Q'uWPNcr)5+&P*Ai?9tp\_%AcXpq70:pa5%.`HQlb(:lT%nAXr<E7W<7K&4O^r7"7uA\t!<\`8pL&LgXWdF<%"QjHWNo<qV%J&=0L1^?!sCnl\COR;)'Gl?][i/$/HapB_#VnM4"R+,fmdI]c(3*7J8E0N6fG`f+RNH1g%K?lfgMN>1>u3Bb3J[*H`+Z&iV;p#j!QhbE:W^1IfOhBa7&_N5<-Au9h6j>CI5%5O)OfiQKt&XYOe;d,%RASTie:=IiE_tp.N^>!L,;)qR6R$])2)>o^cFjW#7eR#hqdA>NQjGRq9;oU,D1;%Hbqj^J!$/?nh#c18TPA3X(a#;D;Zglu%l@D:lnU]b/#'_60lDX(\hd$UPNCRbaHq=DM3cZIuo/#1[DEN)RroD0/&UF+m'#@uF^YY+qZB$FF,2SPG)OkqF+6W\2eH]`l:mVBCrYb+m>'L%HK7M;;p)Ge;V2dS_2qrMjH6H77Pbq%OHaT-C&(aS9fK]Lt'5JKo"'hcb=AYBnd[R/E0bB@nIAQD]oc;t_lhB[d)HB(aqsQ.X1s*$QQZege^IcLMVIg$o`oChJ^/Z0*EGh4!eEB<CX0k%C6W8j(&<@&poS3ui^fJRUMW?K%TN=/>)*3"5cqLRWm?\:WfJhr<h!m3"Y<4=p8b*nN9O[6"m5^kGRE-&71N+gul=1Q8Q*C56]O&QP3$>U1m)0Kb,03uW@3HXb'^q80EF6SMtJY)phZi"]@oM&Bg2Of[#MR'&%L_tLa`K@N47.jX?GdFqd3W]!j+?#QZfQN[a+;jh8Wa(op'AMd<DF`cJsWu7sSXBMcM:("'gDl@[0>*`Cg3]KuP$\#0QlhZX[j7Y+KUEAB)%uYh,Vk\WO9F7ooq=_PFKku(gedl#XP#>:MBbpMf@'pW;=d=jFgRkk+-7lGIjQb&RG_E9;o*g74XP5tU76UsHof'5/_Hj$BPE*]H+.i+RQCa^E7VD/!=%pAG:HFEQrugRi.V,AIkGD>=_6oV)Vn\6gRa$D"%j>,+em^a2=7IhANFUT@gZPj,#9"`tJ<=?6;(\_XM-%$H&Cq"*K9H"8q1fILp9GO?Pbk"VLg"AXZSpP.CImbZA8MO+H:gA/,/VXqORZkXkQZN49g:0"l26mm*M7'jH,Le>Eb-Hke'-OcTD1.X3p>UcGF+C4B'i>*h0kY%]NMgtqdI?^OE8iNp-N_pq;>BWlZd]>^dckE,Z)+S5gY/eU.<.T.m/tSY\='mYI-;%N=6H,=)GEu,d$![(Y3EUp*\!Pa'N**JFRk/N4h7q&o=sT/2Xe]ZU>@)(8:=Qp/5dR~>endstream
|
||||
endobj
|
||||
18 0 obj
|
||||
<<
|
||||
/Filter [ /ASCII85Decode /FlateDecode ] /Length 2051
|
||||
>>
|
||||
stream
|
||||
GauHLgJ[&k&:Ml+oN(?Y"VqeTP%C&J]s'3./-@[fZVt)IMfAk:*'7pt0^RD09>8?T!!u!n"a3OVW@pc>gNJ,,Y@IT&@t6du0K=0i@5,=s7h>^=@lP>!rpA5lb"VRuf&K.X^8)*l&0>tB+>1V6#P'C?i7+ehSg;2E'F705SG-GOLAnG1JFC>R1bZ-S5(r1!fKDsfF>D"VkdlFg`]Q4@rVHjaA66?uY-T[Y#![lEE>eo5K&I.I[uDP<d):)hjq65<*K]&(b#KEe_s)@])V(Jh0+n`)N_5+jGg]5NT[jr>Qc*l,(PMtq7CZ;<$=(qmg``7eC*j=E3g372)Ju[POt)an6L@M[>f4$f8:0fI3a/hDpmr1k"2n9*qoi:KGD$99=tee$\SJ!G_rZ'&>1]gRgB:ED5h;g9N=Gl^F[-4R>cAt[jpIa??JI9)0-lUIS<(:_.^Nl>(rj[GN%XH%_67pJkiRIo70I\bMg&b(]DeR`8,'k*0ljJU>*2;W(r[gP=oPX[F"c<l1Z,_B)SZ/6RD;r`/Tnd^?SC2T_jnDp>=[^FQBr.0EEL"pKC*fEp.E'8H2f#+Gb/iUf^g?eh=QN/`u.Z/Fd4_[g2-&lg%uh1iSGVm?Q'Plc8J9$"Em+hmXu;A"D?NsPc>&1Y8oI$ed<-H"WJEC&BCQG\Vr,hj(bM@%%FNa`irlGIm%:q@8L<&Dl1X=NBKW2[;p%C>EG2.eZQDq8\If/:ra&5YmY+1&LP%[U9Vkt<a(DN7_PIkg$p8s#7Ee[VF3*BP.>Fp=ZK9k:)-qCDK7VY#D[[JI]8%VdV46)%.Q05oGnW,^XN#8UW9(5dT*Aaj\oa31!gP"@ZeW6a/s-==d;g?59:C$$O;[-pbBEclj#3mQ$WR[CUS$'rYa/+)"MBU/:ZMc.A)R2.oaQajkr$?D.<6aB%E%?ksVFgO_=D*p-#>rC+,j,?'^\f_'$jo0Y,JdEfX-kTD+Q>DJ%Jb\7cO`B.gtA2>e8+!t70:hb.ug^qEL;Coh&SH`E^0[tZpoU[C_uI>1I_OR>/(QaHB14F@u+aIZ>hq1KoA%(_[%NADan10Z8%4P['SX]?rlba;A9A[n84c]+Y>8t%WJ["M7);6sA8j-EeNZ]ETPC9;o]EDq!dRM/UUCYcK<>8fkQ;:r6m'5"BK!3J18K[!d*JqH%**s4c4YN,b9=Ll`o0No")reH.)^HS82S`#ZX0TT<aZRd\4"HE%b3).O65t_4Snd(>1],F6-4S,-K)HUh^1cYdtIfX57c.9p^"#Ri+5SF>fN=r@dp]Ebp8hqqi"Q+kdL8JK+_m0J[U>s-D$82AtX!6gGE=#Z`$S1'W^0pa5B41Kip[p's4bN^^PJa0i?dB5-%SkRZ"IK+OJD_H`]N$!.^XgdaN5?3F2#Nb1`?;[MPGE_EI=Z=8r?-rZ9-&#domDJT9YM:'#J)JHoVuRSN&rtFc<T'!e")"V*L>/ZDldS6hc-MNLE/A'@8uY[qn>&8FGX!qkBL6i1(;Xp,=eB/oLu5C8&fnHl<NWp87XqmjO47lH5D?mRBV&[%8>4#h$MoI46bM&_e]]j/FJF%a*sF(^Dno:d7<\T_e`_Y1,t<Cl1ad$a=`g%a.np"T>CjKE7aYhZA,PLXN[;l/L5ND7U0d!TgkCjSdMZqEpV2-KBL9sUoYK<5I\#*H(SaR/0%5OiYY`B]QP1MSZRtIW+[eTZ_hZt-lOCH(5q*@55%t*9mh_C$n:"&9(5eIji3V+cs>Q-JY$;A;(SPCa0b6L+0R0@DkX<giH&tQd!1)gZ+DR1@2*2^OCpN9*jLe\R-9%KE2>5YBmbi]:!56f#gqUbr?0a\km\^]3f*?OK%,@?Qd[c@j"(WQ^ijj`V)g19$hrs<].H&_T'2<^'D"(YRn(N]6%[-W?Xa#=1ig(1G4tiFN&`?0Hl<l;gjq:%,IQ6"Mt/%-Ha7f$F844fK%R'93Dk23_qUGZHiDeMHRbHX)B<m5_VCH=3>:RjaLq$jqArt?R>0[Fq$jDELF$-YG`PFJTg]eoVWHs_6$T;i8M*"/0E=JJ_9t7fkku#=G@-(~>endstream
|
||||
endobj
|
||||
19 0 obj
|
||||
<<
|
||||
/Filter [ /ASCII85Decode /FlateDecode ] /Length 1990
|
||||
>>
|
||||
stream
|
||||
Gb!kt>>s<8'RnqHELN<>CsjFO=gDUNqEP;m1r,:4-8QZKN)qP7YJ%3SOSntsad;\WZ9TA_:<4"D83/]ods$g\5k,r&s$pRLf)]^&A\^8.QbW_9&0/N8d/27lB9\hRM-H#S_0hS!+@:<PqEQ=F!=&A@.'VDdo3<J%:P%Flik,f<)#?b6!+uQ1VKn<cE"Jna@V_(B?o#sDkc0;Wc94-)Hocq5Co!!Q.a*uin2)-(BaDul#d,=qB`e*\+ZAan73%Y8n>%=%.L.c!S!PaIII8o\R,9OkdX-G:d4CO@7A:sW;$g)4:O4J"W&4e<Tf(p^'G;+-_Pq<_KOWIk-a%Lb9QhSJ$'*PN-&4J(<AQFk41"Am76?_j2BChV;52'4KFbD>2G<<?[F%H_"eT-gg3^!OiDN.`a"tW^+MQpN?pHhC*M8fg99"(<(?cM@\VA:o4_cpZ3`c\$C*CGuJ@((`badKdgg'+`E4G]'!MS:7Nsjl"&L/:(ht"da"kWHPB27lmp9YX&p#/VM_G+'qV++t*r\E"mNL`qDLN%g=f#(kWY[YuKTmeVfL2K89li*EQ;>!r`/$ok!?[_uiB^J>?Kn)Ja0I.5*8D#n;@'b']^\@_LE-MuqhZ4?m(<WN]P#>/3@0q1WP<?H8q<(m]hA\]I)V/Wc*VOo/8bI3#Ep)rR0AoLmR=0HApqfOZ04BC[.+&BQIfj%E\_P*_`iCU8ZBB.IWF[C'a^GR28)T;,43EMlKI5BHag!1WKumK%HYSGflbO[8@;g+43]PeW$2.0_N<\W-)c#/XIS)NoJ(C987HeDLJAEZm1YMOI::8A%i>\=+&n-Ma`fh%@EDrG9^g^;;_Ha#5Y=k%^7T)#qI&@(B\`C2dafa?q)8t-639UUZ]C1=<^k'cePLLjNFc'b<Dr1rHcW8],i1@\cb$uka=0@S02,32B^2^Jh-(IP.\bME+Vc[jWX9-6piH<F7c1M9WIMgr&di2CKZMn0u-bg]TB_4$gcZ-OE'W9E`k:[si>h0i)=/m9r&Lu9DE^#(r0&8Ci[6'dNE,.CNh],FnhjbEC]BK.KgD>7,^_#8$$G\`mA)s[`)n,dpOhsE\@.tg+;3@EEOI.^N93[!W++R]889XbC@E07KL/Kg1(p[o[AP65XTdb`KDU%ruB&>OX--RTJD#,LJ7Yr$nL?sR>]6['ITJkLuA7lC-buuK%#mWJj-9Ju+dhW:O-bFXrX)>VLNZ@Ys[u*(+Lj'lcRBVQuc)!W7_]-tD>3=D.@J"Q*6I]=j4K9Td[bH@B]<dN^`E-LL@M$sPeg6:G$u)l'9:`_I@X:ndNUh$*)gg]l:Zo5;*PRtVmKL4A0eLR"I>&V;TW99NeI[CREYmcm(?N"N:.H=3T/&Q]Tq71RbVXu]'lZ.#Ceqp12BgAQcMP(3^C=,B3n0MT1b%BOIkAcbJOuacL3W]LXMFc&pj:h4g0`i<e#+,X`%1)ia*0ZjiU28tYtP_k@FL.%;]Hs4#DY?,!&fI-E`:YnBWtA:[KBl)]'[D6;h9d+mu=I]N)0c82qFb\g!"%+BK_f&H/A=3i&uQ-)eU0uPud4M2S.U>[?`Zk3j,4BZC,L*4Mn%=lbs^OPnpg-ZG5UGCe$UE`N==3hClScIucDN!*WT$$nJf.2'Y/Q^G)aZVsMN`i^\D9lT54G8RB(o]QPT@Zs6^WUI\0==#03GBiKOpcBh'K=--riQs=2k\`6LY+.i7:b(%DLXt/d?mc9ZHQer#M(SY-nf7+<Rs0RN?+fW4^>k#ug7OtM[Pk,"5`"pp5X#/Hng-L@.>>f[I^VQJdDbO/HM>nWb1@YnLUA0^s<\ZfAGM;cAkP`:4#;ke:*p(6:-r]Pt2cKlqoemN3c#HDLjDggV"=#aq296\;.!40p-l_Hr5s+^'eGR(2>k>^&m?,YC#J$>uNq.[poA>+3[^3QfYYg!+NQ5IaCtEc0#_]3P,@LDg[]LK]=fcZGmkR&5?b)<0[+PR0/n1B5B+##5mk==5Ud4~>endstream
|
||||
endobj
|
||||
20 0 obj
|
||||
<<
|
||||
/Filter [ /ASCII85Decode /FlateDecode ] /Length 1972
|
||||
>>
|
||||
stream
|
||||
Gb!#\>>s99'RnB338<-3KJ!k&/B]q-IA#7ifG;n.VYcO33fZa)Cb)n6./W?)8A=.O6=@9,('\U>k]/;J^2mfl(B.5'5>2(6%,g?6!bF'q!m1h)_0bAT>2NMK`7"d[LoR(dl3kc;_RXGB4qPcO%LUlW:S?8'e.mYKXp:I/#N\,X&no%H3S;C!?"CLgi%.F>H)I9$Im2/0E*C&=0c)J>?d@V(9k5;?Q&<c1&&BM`"5jD<\;%gMXiO"3Z//6#`"n;_bC/A1SrK&0PVDA.:B4f5pFQTf7^]b<TrQHT-D_A,iri/IH?<o*[G.\6HZN:.:;TiQ;>55e/S$b%J81U\5&SF]Z"&J`ng]k!'LnM%c"4=qj&R[IVm19CS6;n!i1=>ZK3hq<G:4#pq&I;c&MOD!ECr_,%(B^\F@o=glQ*%7ClE5Kn,;,?A,*Qi_AVFR>o][S\;J!f+q*0QPM[-20D:h_r)FD2oX(8Y[?_`7=u?N6f%]Z%'&%u%PBRph^$eB*^o7a"74'`s?'WVK3kU,JUYP?H^NtKK=0D[(%A>i2]92l5SGf$2Ai7#!-#7^_/H5$a@n%DtmLN"2>K/fDWjU%DHcY>6r?T+8OC*=I9=P:+(sBZ>W-NrBa8<9@@b6IBCd^/tX)NGHP/p*h"J]'CBYjhf31@<Si&E.dmPnl5'A/,Gi=aFP%ia<obC3&gch!H>%cN;l@:i]ljS4<lDAGQ70"91:S8=d:]s)BVbF+Z!1Xm?$(onNS4tNIO#ZLNi'r7su1*,8YN;,G;qG;I'm5+_%2WZuIWEEOY(%19$*j;VG/^&CDN:BNI=Hd/3o"fh.r<0'$2,r3h##64!]UTXn3lhn/h@%T^K$3kGM]eC<P\JAkh&m["&F)'7b-WjmLR?K&"FBT3ReL<J6Brbpa@'<(_h1<)U-clpOL)SB[JoPh1<4P.kXNE7Mf9SgR>OuGM&Jg/]T"&[B8)cf(^*]`)l7$G?^.'GTb.+c(ocmrAdXS"b_(`t7K/jjf]aKb9isV(#]CatKVr^q2[3QQ(-u&mW[ug/5oKmJ+ije7F9j+Z7Cq'[OmuPN9@)/1Wq9[4"QRTaUlep;8iR1$9sd!e*dQD+hN./;pG'C0i_KC0X;$sU)dYqqbjn-fSDRo*A6Ks>Y/2TC;)jR;KB[ail4kEG6/&h)%dqi@fEoJ\nF*qW4MrsG1R@'HRVoK@5(%\2_HQ!.j;a'sWi^!`dbOQLLlgt(,_f&YRiSpl5NgmU[1p*PkGfs1o/`''c?c>BU<d+81:`"R#p/&5<krL<BBiZ5Vb*ar<;a&N;F_:LC/V8VqNqC<aoq-AI>o'p'=`rcZ@nN_O-]a'#g[,+[`Q@._`"iiQAl^nhJsK</D%B(7+2n&CYF*0HBP*@dtq:r`*EhO*gY2s:ZD)Jb?CIHX-6O0DQQR6BZGRJg?)R>K#=THdKe>mODp()_mr9#@Y<a[`ka@r[_5PO<o)+clZM*5kau2lF?+g_V%Eb1?+7`XP1Qh[B)"X>^6XjjB"`t[?!LdlmXs]=VY4&9K/2Tg4Ht[[Pkc7Hj(u7iB*Mq;/Q'MFI-O:(M8OgoZJE`t;8u[Rk[<EmTWG0FW,CJ0Pga$_?=CatK9Hh]O5]L%!4r,eMt=c[EPS*"n(2@Z-U0+/$tPZ3`=_EOX1n1R`B0[*dsW5X!.q<MUpC#p_q9,<2fd)G2=7*KhqTbB(W:=_'kt:=lUShs!e4Gt(?,<G+F!q'\,3/!U&to)$MFE+PGj">49i+C*pU<9'7H!p&q"d6G]A>8:NbJ6i*j0r4uY;4Q1$=D)lpop6q![+1Y8kea3-;C+Cg(p.2C`0`S"^RI[hoR`gndRl$`c`4WglkqT#Z"MWhE(/'K\p&sDH>mF4QpV__\=i[Da3>V36X^*]^1TC+Sn2fW>F>u<cI;ehLQl'dY2dpnBLl!d$l>0CC&hd0Zl:PMMfMrir'@=D2/h,@tDW-EoqP8Dmre/qdNm"X*KZ=5JF~>endstream
|
||||
endobj
|
||||
21 0 obj
|
||||
<<
|
||||
/Filter [ /ASCII85Decode /FlateDecode ] /Length 1435
|
||||
>>
|
||||
stream
|
||||
Gb"/&>>sNP'Ro4H*2dPO(orUD:WF:'$S%t\b-90L0/5:#%1+@iFoVE3%LG[n"a7A4R>6nSPO;1i^@.T\>XF#"Nu%bJ0u.KF%PK5,#5o]Ai<\Z)5c`deD3QR)/pNC+k8ciO75Qtj\3tZ$8:hKhdZN?NbL<Gk*9"II"EPikHdEj%o>Y=VO5OiCAk<>2IQY[]\hS:SK@CF'Ed2!9KhhBV%9LZmAAM3-7'k!>Ih]mda=kniLAnmjEeb4,f.$*+`>H+J4'HBZba-hVEg4U,$8-Ja&%jea58lX"ErRjLOI@;I+:9KU(_lBVK5dZ^[AS!UiP9LO;0GBA3h'cBd[Vo/$A-6I(VAfSmVo2uiY\g6kB"8?R#7n"\U@>_M:f]I]\!H[ogj?O"kisJi7gH6NR&pmX>"[:kql0LmP/[&EFYOTgXF[SkQ)/k"2k'A.?$4WCEX9f8;,4k13^12CP>1t;SG\:c+$0,:m?R5WP_%l4WIe4lHhk'LDP>PguO1$l]3p^m&G2OIG8U_qB/U0ahY^5"Nbm.k'K`.Yo:,&Y:Ed"hq(K.Y0^*_[A<Tc[%s"pjOLU_f]%:k[p$Yl>YDqkUtS4KCAT)V&m@"+?&N\O,XkE^:S910/VsuX%WLnZ[)?PlV09AC*'%(1094D5,d)&\:3ss"hs-cAH>qU:j'/Rj]bD0Ul_X):.]@>VV:#\[+GE<>QoI]C\2C))-I2-OZFZq')=k;eq!qoh\51<Sia`2a!:>o--V8.6gn;Ls"(ROilu=X6.6KF3*$u>D[VgD^ROleY*kn_[YHsBm136KscmumHZ@D#M4f_6IQqkO8W!.@NmlqS@O@bhh2`K^A"RF$"AAZul/MPs%Re7=HHRJdcf=h%3D<rD#SU7iO6T^;ZVq*!7B-ah]0:Wor0RUoMq9Yq&94<FT`n>27;/bWNDU[[o+N!"?8WZ5U'6:q9`(-<e'"Kpu&GAUXSqTrV[ER*OA(i@%&%+Dk#j"U6[oA[XkH64-$NF@M#c9,*m8.L1=1rT^<G`B,'a/)6nEe9CO5SJ%#2bnA?ZJCDSkLKX9;]6kO%\=Mo:A%ifr'goKbE]#$aRMAE)6K`5!MX/3UaCo=rfS>oigbKrpeQNLMO>!"C*PCI]M$l'tc^711SLY4<)UnX6%Bjcj@th%45f[ClN>EE.9i@U-VXtilV'eBlgG$O1P7bq"bUm;0I2%@rZ$#\9-a^pS/!MdpOtNWcep.#n#bX1boj;aM]F5BP/V4PKlYM(]_1'rHfB:A)G<T?g:?>kpOrhc),)*gHF\_aP(m)]s1e!P/*-MOt8iWKTOH?jUVX:95FuJh_eFSB^h??oY>o@r:S4H'='#+=1/&i+(Hg/ane%honGLuq6)jSZdcglf$,dg]'&J(m;!hUlY@Uhia;GcV!;MoX`p>K6]`3N2[;&qC'QrrDaR3-H+cY#`nqKI;do~>endstream
|
||||
endobj
|
||||
22 0 obj
|
||||
<<
|
||||
/Filter [ /ASCII85Decode /FlateDecode ] /Length 1644
|
||||
>>
|
||||
stream
|
||||
Gb!#\D/\/e&H;*)E@BDT9jjEc8;YKeD*_O7Akgkol^%U@+u-MgM/jn&anG%Ee=0e`^LT4[V+?EknT`C9F!QfX5k,qsre;l;cQa:@A\^9amXPTf?uu]n7_Q"=7\d'%-Z8OH#j/`u!>32DdK^sFIUJ7uXT<3<B:_bLk:$t48C[Mj8tga6$ZODLI%D-W%dsK5'n\"==0j:c_FY%mS9sbqlLt[2T8dt*:9lFM5CNsZYmJ3o%APA2:+VLa&7XtN<Q&l;#>b+_8`a>jW$Rs*=1LT+'L(VD*/#WN25o"oR+=j%<>(N*Fnf"?aSd&1C\R-Nqf"aHiEu(/M_s5T]SQ4u(b6$_iMN5Z\qGF-:2aGPploF#>3DiV4[PP%T[X(=+3Qr(S,J_I<0WKa;_sg&fi3ag9"[qhbSLjUWFtS4B8!J.BkAgTEs%Q=LV"["b-RZ.>U>G$89P5:%C$'Fds52_)U`!t72Z4SJR=%KGT!"Hiu-&^U:SR_`$WVJMDGM_pa7k[c6:9Lo2M489Xq7\aohop3$tl@r^aA/T&>XG;RoLY@bcSG^0D-)3bgJ,k&W?$B@3uKl9'bdIKqA(]W03PYJ:oUClk87=lU`&UH"$;Z.j5A%Og)S'<2P^;fgBX:P*V3Su&cp^l$!75K5LP";C)a[ZHa2;)dCEKjn!Ggu&3VMQjk@nTZN+RmC/q7D^Sr#%<nD%IU.?W!kA[3bGZZ0#u_l"8e+bI#Wo*EVZ,A,(/PjgZ/SV,>QHl3A7%nZbLWb&bZd#J2NY4"iLRYQ40JnaC;X2:IncK_]XXLW@eOZa;;J;i]13\'68l"YO!g6>jb0W)Y\nq5^_u-CdZbk*O(Q%Vi$gBnUAi7he#.q_=](sbA^c']CF>Z-aY/OU*p></g$--D`'En:^1#[=T'Bi/W"+'!s5T&&2#8$0cu)P"c#q3Yq$/_eDD/6PYqll5e%@bXj&nh@hE-_h*RWhKaTE(EA]*1_H*<;93SG8=p-g?[^2ER<iABQ^m>]g]pIG@haFo,&Q:87(4ZXM5YJUKkn2h(\t,t%j)[9hLPaT>GtTS(=K+2g[S(GX?7KRD[@^_TC"H1:3!Fa<b?/\a''<Wo97:e.Dp@)A6`@0%NIDm#Lb#9F.)1#[Y5+fW"^8)V<JU`^.=HQPiK^'q2LD7.o=:u:Wa]Q[lPd5a0\KEa?'.r"IltM0+rDLH9\LCjIsp6,?\9*O='0$n[EOi`b<;4P1<_T/K$mQ;kWu._4-I;Alhhfb^5G/<4#0L*D_k#(k.-7Tn%p?TdI8K?2nr'JjuSjL,OWHeif8s1H.r`?F"d;3GT5m0ND5N$^$@_ga5cU6h:s"g-$$I4,dU_qK"BkUm%Kj21=#T$:)u,:#^/.Bs$MISi:"$C<!<Gf:oT[JA=<&Jo=H'+nBeS/ku,:`fp;KG<]TT*$H5boZnJIVCfRWAetCMBYh<;[3208([isJbk_-N=[sC_VSS"qkKNA-.J/Q0/<RpRhmb8lR[GhS[cll;-<40#Fh?r6,'>cpm(inraVO?VLcn&R3+!+p.i?[bq03gG'kLfbU0Q4Y509!;_;<*]i][^&RX(KbW*S#46lX@n8fK=DAC.&.Rh%gQRYJg*meNVPIf?=R,O+G<ui`W]:Dh#V]+M-)a*)EK_ndiE`!><7,9E~>endstream
|
||||
endobj
|
||||
xref
|
||||
0 23
|
||||
0000000000 65535 f
|
||||
0000000061 00000 n
|
||||
0000000142 00000 n
|
||||
0000000249 00000 n
|
||||
0000000361 00000 n
|
||||
0000000444 00000 n
|
||||
0000000549 00000 n
|
||||
0000000754 00000 n
|
||||
0000000831 00000 n
|
||||
0000001036 00000 n
|
||||
0000001151 00000 n
|
||||
0000001357 00000 n
|
||||
0000001563 00000 n
|
||||
0000001769 00000 n
|
||||
0000001975 00000 n
|
||||
0000002045 00000 n
|
||||
0000002326 00000 n
|
||||
0000002420 00000 n
|
||||
0000004624 00000 n
|
||||
0000006767 00000 n
|
||||
0000008849 00000 n
|
||||
0000010913 00000 n
|
||||
0000012440 00000 n
|
||||
trailer
|
||||
<<
|
||||
/ID
|
||||
[<a50303de963c6daad04950ac9bd7ed41><a50303de963c6daad04950ac9bd7ed41>]
|
||||
% ReportLab generated PDF document -- digest (opensource)
|
||||
|
||||
/Info 15 0 R
|
||||
/Root 14 0 R
|
||||
/Size 23
|
||||
>>
|
||||
startxref
|
||||
14176
|
||||
%%EOF
|
||||
240
Les03-Cursor-Basics/Les03-Lesplan.md
Normal file
240
Les03-Cursor-Basics/Les03-Lesplan.md
Normal file
@@ -0,0 +1,240 @@
|
||||
# Lesplan Les 3: Cursor - AI-Powered Code Editor
|
||||
|
||||
---
|
||||
|
||||
## Lesgegevens
|
||||
|
||||
| Item | Details |
|
||||
|------|---------|
|
||||
| **Les** | 3 van 18 |
|
||||
| **Onderwerp** | Cursor - AI-Powered Code Editor |
|
||||
| **Deel** | 1: AI Foundations (Les 1-4) |
|
||||
| **Duur** | 3 uur (180 minuten) |
|
||||
| **Spreektijd** | ~55 minuten |
|
||||
| **Hands-on** | ~75 minuten |
|
||||
| **Pauze** | 15 minuten (10:15-10:30) |
|
||||
|
||||
---
|
||||
|
||||
## Leerdoelen
|
||||
|
||||
Na deze les kan de student:
|
||||
|
||||
1. Uitleggen wat Cursor is en waarom het beter is dan OpenCode
|
||||
2. Cursor installeren en een Hobby/Student account aanmaken
|
||||
3. Cursor Skills/Docs installeren voor Next.js, React en Tailwind
|
||||
4. Een .cursorrules bestand genereren met AI Chat
|
||||
5. Een nieuw Next.js project opzetten met npx create-next-app
|
||||
6. De vijf AI features gebruiken: Chat, Inline Edit, Composer, Tab Completion, @mentions
|
||||
7. Efficiënt omgaan met requests (Hobby account management)
|
||||
|
||||
---
|
||||
|
||||
## Voorbereiding docent
|
||||
|
||||
### Technische setup
|
||||
- [ ] Cursor geïnstalleerd
|
||||
- [ ] Student account geactiveerd
|
||||
- [ ] npx create-next-app getest
|
||||
- [ ] Cursor Skills/Docs toegevoegd (Next.js, React, Tailwind)
|
||||
- [ ] Demo .cursorrules gegenereerd
|
||||
- [ ] Huiswerk zipbestand gemaakt (les3-debug-challenge.zip) met:
|
||||
- Missende dependencies in package.json
|
||||
- Syntax errors in componenten
|
||||
- Inline styles die naar Tailwind moeten
|
||||
- Missing imports
|
||||
|
||||
### Student voorkennis (uit Les 1-2)
|
||||
- GitHub account, basis git
|
||||
- npm/node.js geïnstalleerd
|
||||
- Terminal basics
|
||||
|
||||
---
|
||||
|
||||
## Lesverloop
|
||||
|
||||
### Blok 1: Welkom & Mededeling (10 minuten)
|
||||
|
||||
| Tijd | Activiteit | Slides |
|
||||
|------|------------|--------|
|
||||
| 09:00-09:02 | Welkom, titelslide | 1 |
|
||||
| 09:02-09:04 | Planning vandaag | 2 |
|
||||
| 09:04-09:07 | Terugblik Les 2, waarom Cursor | 3 |
|
||||
| 09:07-09:10 | Wat is Cursor? Features overzicht | 4 |
|
||||
|
||||
**Kernboodschap:** "Cursor is speciaal gemaakt voor developers. Geen token limits, ingebouwde terminal, gratis Student plan."
|
||||
|
||||
---
|
||||
|
||||
### Blok 2: Installatie & Setup (20 minuten)
|
||||
|
||||
| Tijd | Activiteit | Slides |
|
||||
|------|------------|--------|
|
||||
| 09:10-09:13 | Download Cursor | 5 |
|
||||
| 09:13-09:18 | Account aanmaken (Hobby → Student later) | 6 |
|
||||
| 09:18-09:22 | Interface tour | 7 |
|
||||
| 09:22-09:30 | Terminal Setup Check SAMEN | 8 |
|
||||
|
||||
**Checkpoints:**
|
||||
- ✓ Cursor geïnstalleerd en geopend
|
||||
- ✓ node -v, git --version, npm -v werken
|
||||
|
||||
---
|
||||
|
||||
### Blok 3: Cursor Features (15 minuten)
|
||||
|
||||
| Tijd | Activiteit | Slides |
|
||||
|------|------------|--------|
|
||||
| 09:30-09:33 | Chat Panel (Ctrl+L) | 9 |
|
||||
| 09:33-09:36 | Inline Edit (Ctrl+K) | 10 |
|
||||
| 09:36-09:39 | Composer (Ctrl+I) | 11 |
|
||||
| 09:39-09:41 | Tab Completion (GRATIS!) | 12 |
|
||||
| 09:41-09:43 | @ Mentions + @docs | 13 |
|
||||
|
||||
**Kernboodschap:** "Vijf features, elk voor ander doel. Tab Completion is GRATIS - gebruik dat voor kleine dingen!"
|
||||
|
||||
---
|
||||
|
||||
### Blok 4: Skills, Rules & Requests (15 minuten)
|
||||
|
||||
| Tijd | Activiteit | Slides |
|
||||
|------|------------|--------|
|
||||
| 09:43-09:48 | Cursor Skills installeren (Next.js, React, Tailwind docs) - SAMEN DOEN | 14 |
|
||||
| 09:48-09:53 | .cursorrules genereren met Chat | 15 |
|
||||
| 09:53-09:58 | Request management tips (Hobby account) | 16 |
|
||||
|
||||
**Checkpoints:**
|
||||
- ✓ Docs toegevoegd in Cursor Settings
|
||||
- ✓ Studenten begrijpen request kosten
|
||||
|
||||
**Belangrijk:** Benadruk dat Tab Completion GRATIS is. Chat/Composer/Inline Edit kosten elk 1 request.
|
||||
|
||||
---
|
||||
|
||||
### Blok 5: Live Demo (15 minuten)
|
||||
|
||||
| Tijd | Activiteit | Slides |
|
||||
|------|------------|--------|
|
||||
| 09:58-10:13 | LIVE DEMO: Nieuw project workflow | 17 |
|
||||
|
||||
**Demo flow:**
|
||||
1. mkdir + git init (1 min)
|
||||
2. npx create-next-app@latest . (2 min)
|
||||
3. npm run dev → toon localhost:3000 (1 min)
|
||||
4. Chat: genereer .cursorrules (3 min, 1 request)
|
||||
5. Composer: maak HeroSection component (4 min, 1 request)
|
||||
6. Toon resultaat in browser (1 min)
|
||||
7. git add + commit (1 min)
|
||||
|
||||
**Doel:** Studenten zien de hele workflow in 15 minuten
|
||||
|
||||
---
|
||||
|
||||
### Blok 6: Hands-On Opdracht (75 min + 15 min pauze)
|
||||
|
||||
#### Deel 1 (10:13-10:15, intro + start)
|
||||
|
||||
| Tijd | Activiteit |
|
||||
|------|------------|
|
||||
| 10:13-10:15 | Opdracht uitleggen (Slide 18 op scherm) |
|
||||
|
||||
#### Hands-on Deel 1 (start - 10:15)
|
||||
|
||||
Studenten starten met STAP 1 (npx create-next-app)
|
||||
|
||||
---
|
||||
|
||||
#### ☕ PAUZE (10:15-10:30)
|
||||
|
||||
---
|
||||
|
||||
#### Hands-on Deel 2 (10:30-11:45)
|
||||
|
||||
**Check [10:45]:**
|
||||
"Wie heeft npx gedaan? Wie heeft .cursorrules? Wie heeft een component?"
|
||||
|
||||
**Check [11:00]:**
|
||||
"Wie heeft al 2 componenten? Hoeveel requests heb je nog over?"
|
||||
|
||||
**Check [11:30]:**
|
||||
"Wie heeft git gecommit? Wie wil zijn project laten zien?"
|
||||
|
||||
---
|
||||
|
||||
### Blok 7: Afsluiting (15 minuten)
|
||||
|
||||
| Tijd | Activiteit | Slides |
|
||||
|------|------------|--------|
|
||||
| 11:45-11:50 | Resultaten delen (3-4 studenten) | 19 |
|
||||
| 11:50-11:53 | Samenvatting | 20 |
|
||||
| 11:53-11:58 | Huiswerk uitleggen (DEBUG CHALLENGE!) | 21 |
|
||||
| 11:58-12:00 | Volgende les preview | 22 |
|
||||
|
||||
---
|
||||
|
||||
## Materialen
|
||||
|
||||
- **Slide-Overzicht:** Les03-Slide-Overzicht.md
|
||||
- **Lesopdracht:** Les03-Bijlage-A-Lesopdracht.md
|
||||
- **Huiswerkopdracht:** Les03-Bijlage-B-Huiswerkopdracht.md
|
||||
|
||||
### Huiswerk zipbestand voorbereiden
|
||||
|
||||
**les3-debug-challenge.zip moet bevatten:**
|
||||
- Een Next.js project (App Router, TypeScript, Tailwind)
|
||||
- package.json met 1-2 missende dependencies (bijv. lucide-react gebruikt maar niet in deps)
|
||||
- 1-2 syntax errors (missing closing tag, typo in import)
|
||||
- 3-4 componenten met inline styles (style={{...}}) die naar Tailwind moeten
|
||||
- Een component met een missing import
|
||||
|
||||
---
|
||||
|
||||
## Veelvoorkomende problemen
|
||||
|
||||
| Probleem | Oorzaak | Oplossing |
|
||||
|----------|---------|-----------|
|
||||
| npx create-next-app faalt | Node.js te oud | nvm install 20 && nvm use 20 |
|
||||
| npm run dev werkt niet | Verkeerde folder | cd naar project folder, npm install |
|
||||
| Chat/Composer reageert niet | Requests op of internet | Check cursor.com/account, check internet |
|
||||
| .cursorrules werkt niet | Niet in root of typo | Check bestandsnaam en locatie |
|
||||
| Cursor crash | Memory issue | Restart Cursor |
|
||||
| Terminal commands not found | PATH niet goed | Restart Cursor, check nvm |
|
||||
|
||||
## Request Budget Planning
|
||||
|
||||
| Activiteit | Requests |
|
||||
|------------|----------|
|
||||
| .cursorrules genereren (Chat) | 1 |
|
||||
| Hero component (Composer) | 1 |
|
||||
| Styling tweaken (Inline Edit) | 1 |
|
||||
| Extra component (Composer) | 1 |
|
||||
| Vragen/debugging (Chat) | 2-3 |
|
||||
| **Totaal in de les** | **~6-7** |
|
||||
|
||||
Tab Completion kost GEEN requests - benadruk dit!
|
||||
|
||||
---
|
||||
|
||||
## Voorbereiding Tim
|
||||
|
||||
**1-2 dagen voor les:**
|
||||
- [ ] npx create-next-app testen op eigen machine
|
||||
- [ ] Cursor Skills/Docs toevoegen
|
||||
- [ ] .cursorrules genereren als demo
|
||||
- [ ] Huiswerk zip maken met fouten
|
||||
- [ ] Upload zip naar Teams
|
||||
|
||||
**Dag voor les:**
|
||||
- [ ] Projector test
|
||||
- [ ] Internet snelheid checken
|
||||
- [ ] Cursor fresh install testen (wie upgrade snel?)
|
||||
|
||||
**Tijdens les:**
|
||||
- [ ] Iedereen npx create-next-app laten draaien
|
||||
- [ ] Terminal checks KRITISCH (slide 8)
|
||||
- [ ] Request management benadrukken
|
||||
- [ ] Active walking tijdens hands-on
|
||||
|
||||
---
|
||||
|
||||
**Succes met Les 3!**
|
||||
1033
Les03-Cursor-Basics/Les03-Slide-Overzicht.md
Normal file
1033
Les03-Cursor-Basics/Les03-Slide-Overzicht.md
Normal file
File diff suppressed because it is too large
Load Diff
BIN
Les03-Cursor-Basics/les3-debug-challenge-hard.zip
Normal file
BIN
Les03-Cursor-Basics/les3-debug-challenge-hard.zip
Normal file
Binary file not shown.
BIN
Les03-Cursor-Basics/les3-debug-challenge.zip
Normal file
BIN
Les03-Cursor-Basics/les3-debug-challenge.zip
Normal file
Binary file not shown.
BIN
Les03-Cursor-Basics/zi4PuQhg
Normal file
BIN
Les03-Cursor-Basics/zi4PuQhg
Normal file
Binary file not shown.
Reference in New Issue
Block a user