fix: debug challenge
This commit is contained in:
Tim Rijkse
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!**
|
||||
Reference in New Issue
Block a user