fix: implement lessons feedback
This commit is contained in:
Tim Rijkse
@@ -1,278 +1,270 @@
|
||||
# Les 10: Introduction to Cursor
|
||||
# Les 10: AI Tool Selection & Workflows
|
||||
|
||||
---
|
||||
|
||||
## Hoofdstuk
|
||||
**Hoofdstuk 3: Advanced** (Les 10-18)
|
||||
**Deel 3: AI Tooling & Prototyping** (Les 10-12)
|
||||
|
||||
## Beschrijving
|
||||
Kennismaking met Cursor - de professionele AI code editor. Leer de core features en ontdek waarom dit de tool is voor serieuze AI-assisted development.
|
||||
Leer de sterke en zwakke punten van elke AI tool kennen. Ontwikkel een framework om de juiste tool te kiezen voor de juiste taak en bouw je eigen workflow.
|
||||
|
||||
---
|
||||
|
||||
## Te Behandelen
|
||||
|
||||
### Waarom Cursor?
|
||||
### Waarom Tool Selection Belangrijk Is
|
||||
|
||||
**Tot nu toe gebruikten we:**
|
||||
- OpenCode (gratis, goed voor leren)
|
||||
- Claude Desktop (voor agents en projects)
|
||||
Je kent nu meerdere AI tools:
|
||||
- ChatGPT (brainstormen, planning, uitleg)
|
||||
- Claude (lange context, nuance, analyse)
|
||||
- v0.dev (UI prototyping)
|
||||
- OpenCode (code schrijven met project context)
|
||||
|
||||
**Cursor is de volgende stap:**
|
||||
- Purpose-built voor AI-assisted coding
|
||||
- Professionele editor (gebaseerd op VS Code)
|
||||
- Superieure AI integratie
|
||||
- Free tier beschikbaar (voldoende voor de cursus)
|
||||
**Het probleem:** Elke tool heeft sterke en zwakke punten. De juiste tool kiezen bespaart tijd en levert betere resultaten.
|
||||
|
||||
---
|
||||
|
||||
### Free vs Pro
|
||||
### Tool Vergelijking
|
||||
|
||||
| Aspect | Free Tier | Pro ($20/maand) |
|
||||
|--------|-----------|-----------------|
|
||||
| Tab completion | ✅ | ✅ |
|
||||
| CMD+K edits | Beperkt | Onbeperkt |
|
||||
| Chat | Beperkt | Onbeperkt |
|
||||
| Composer | Beperkt | Onbeperkt |
|
||||
| Models | GPT-4, Claude | Alle modellen |
|
||||
|
||||
**Voor deze cursus:** Free tier is voldoende!
|
||||
| Tool | Sterk in | Minder sterk in | Kosten |
|
||||
|------|----------|-----------------|--------|
|
||||
| **ChatGPT** | Brainstormen, uitleg, planning, algemene kennis | Grote codebases, lange context | Gratis / Pro €20/maand |
|
||||
| **Claude** | Lange documenten, nuance, analyse, veiligheid | Soms te voorzichtig, geen images genereren | Gratis / Pro $20/maand |
|
||||
| **v0.dev** | UI components, snel prototypen, Tailwind | Complexe logica, backend | Gratis tier |
|
||||
| **OpenCode** | Code schrijven, project context, terminal | Geen web access, geen images | Gratis |
|
||||
|
||||
---
|
||||
|
||||
### Installatie
|
||||
### Tool Selection Framework
|
||||
|
||||
1. Ga naar [cursor.sh](https://cursor.sh)
|
||||
2. Download voor jouw OS
|
||||
3. Installeer
|
||||
4. Open Cursor
|
||||
5. Sign in met GitHub
|
||||
**Stap 1: Identificeer de taak**
|
||||
- Wat wil je bereiken?
|
||||
- Hoe complex is het?
|
||||
- Hoeveel context is nodig?
|
||||
|
||||
**Eerste keer:**
|
||||
- Cursor vraagt om settings te importeren van VS Code (optioneel)
|
||||
- Accept default keybindings
|
||||
**Stap 2: Kies de juiste tool**
|
||||
|
||||
---
|
||||
|
||||
### Core Features
|
||||
|
||||
#### 1. Tab Completion
|
||||
AI-powered autocomplete die hele blokken code voorspelt.
|
||||
|
||||
**Hoe het werkt:**
|
||||
- Begin met typen
|
||||
- Cursor suggereert code in grijs
|
||||
- Druk Tab om te accepteren
|
||||
- Druk Escape om te negeren
|
||||
|
||||
**Tip:** Schrijf een comment over wat je wilt, en Tab completion vult de code in.
|
||||
|
||||
```typescript
|
||||
// Function that calculates the total price with tax
|
||||
// [Tab completion vult de functie in]
|
||||
```
|
||||
Als je wilt... Gebruik...
|
||||
─────────────────────────────────────────────────
|
||||
Brainstormen over een idee → ChatGPT
|
||||
Een lange codebase analyseren → Claude
|
||||
Snel een UI component maken → v0.dev
|
||||
Code schrijven met project context → OpenCode
|
||||
Een complex document begrijpen → Claude
|
||||
Uitleg krijgen over een concept → ChatGPT
|
||||
React component met styling → v0.dev
|
||||
Feature implementeren in project → OpenCode
|
||||
```
|
||||
|
||||
#### 2. CMD+K (Inline Editing)
|
||||
Selecteer code en vraag AI om het aan te passen.
|
||||
---
|
||||
|
||||
**Hoe het werkt:**
|
||||
1. Selecteer code (of zet cursor op een regel)
|
||||
2. Druk CMD+K (Mac) of Ctrl+K (Windows)
|
||||
3. Typ je instructie
|
||||
4. Enter om te genereren
|
||||
5. Accept of Reject de wijziging
|
||||
### Workflow Patterns
|
||||
|
||||
**Voorbeelden:**
|
||||
- "Add error handling"
|
||||
- "Convert to TypeScript"
|
||||
- "Make this responsive"
|
||||
- "Add loading state"
|
||||
|
||||
#### 3. Chat (Sidebar)
|
||||
Converseer met AI over je code.
|
||||
|
||||
**Hoe het werkt:**
|
||||
1. CMD+Shift+L opent Chat
|
||||
2. Stel je vraag
|
||||
3. AI heeft context van je open file
|
||||
|
||||
**Voorbeelden:**
|
||||
- "Explain what this function does"
|
||||
- "How can I optimize this?"
|
||||
- "What's wrong with this code?"
|
||||
|
||||
#### 4. @ Mentions
|
||||
Refereer naar files, folders, of documentatie.
|
||||
|
||||
**Syntax:**
|
||||
- `@filename.tsx` - specifieke file
|
||||
- `@folder/` - hele folder
|
||||
- `@Docs` - officiële docs zoeken
|
||||
- `@Web` - web zoeken
|
||||
|
||||
**Voorbeeld:**
|
||||
**Pattern 1: Planning → Prototyping → Implementation**
|
||||
```
|
||||
@components/Button.tsx - How can I add a loading prop to this?
|
||||
1. ChatGPT: Brainstorm features, maak planning
|
||||
2. v0.dev: Genereer UI prototypes
|
||||
3. OpenCode: Implementeer met project context
|
||||
```
|
||||
|
||||
#### 5. Composer Mode
|
||||
Multi-file generatie in één keer.
|
||||
**Pattern 2: Research → Design → Build**
|
||||
```
|
||||
1. ChatGPT/Claude: Research beste aanpak
|
||||
2. v0.dev: Design components
|
||||
3. OpenCode: Bouw en integreer
|
||||
```
|
||||
|
||||
**Hoe het werkt:**
|
||||
1. CMD+I opent Composer
|
||||
2. Beschrijf wat je wilt bouwen
|
||||
3. AI genereert meerdere files tegelijk
|
||||
4. Review en accept changes
|
||||
|
||||
**Wanneer gebruiken:**
|
||||
- Nieuwe features met meerdere components
|
||||
- Refactoring over meerdere files
|
||||
- Boilerplate code genereren
|
||||
**Pattern 3: Quick Iteration**
|
||||
```
|
||||
1. v0.dev: Snel component genereren
|
||||
2. OpenCode: Aanpassen en integreren
|
||||
3. Repeat
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Workflow Vergelijking
|
||||
### Praktijk: Dezelfde Taak, Drie Tools
|
||||
|
||||
| Taak | OpenCode | Cursor |
|
||||
|------|----------|--------|
|
||||
| Snelle fix | Chat | CMD+K |
|
||||
| Nieuwe component | Chat | Tab completion + CMD+K |
|
||||
| Multi-file feature | Meerdere chats | Composer |
|
||||
| Code uitleg | Chat | Chat + @ mentions |
|
||||
| Refactoring | Chat | CMD+K of Composer |
|
||||
**Opdracht:** Bouw een Contact Form component
|
||||
|
||||
**Met ChatGPT:**
|
||||
```
|
||||
Prompt: Ik wil een contact form maken met React en Tailwind.
|
||||
Velden: naam, email, bericht. Validatie nodig.
|
||||
Geef me de code en leg uit hoe het werkt.
|
||||
```
|
||||
→ Krijg: Uitleg + code, maar zonder project context
|
||||
|
||||
**Met v0.dev:**
|
||||
```
|
||||
Prompt: Modern contact form with name, email, message fields.
|
||||
Tailwind styling, validation, responsive design.
|
||||
```
|
||||
→ Krijg: Visueel prototype, direct te gebruiken
|
||||
|
||||
**Met OpenCode:**
|
||||
```
|
||||
Prompt: Maak een ContactForm component in src/components/
|
||||
met naam, email en bericht velden. Gebruik onze bestaande
|
||||
Input en Button components. Voeg Zod validatie toe.
|
||||
```
|
||||
→ Krijg: Geïntegreerde code die past in je project
|
||||
|
||||
---
|
||||
|
||||
### Tips voor Beginners
|
||||
### Wanneer Combineer Je Tools?
|
||||
|
||||
1. **Start met Tab completion**
|
||||
- Gewoon typen en kijken wat er gebeurt
|
||||
- Comments zijn je vriend
|
||||
**Scenario 1: Nieuwe feature bouwen**
|
||||
1. ChatGPT: "Hoe zou je een dark mode toggle implementeren in React?"
|
||||
2. v0.dev: "Dark mode toggle component with smooth transition"
|
||||
3. OpenCode: "Integreer deze toggle in onze navbar, sla preference op in localStorage"
|
||||
|
||||
2. **CMD+K voor snelle edits**
|
||||
- Selecteer precies wat je wilt aanpassen
|
||||
- Wees specifiek in je instructie
|
||||
**Scenario 2: Bug oplossen**
|
||||
1. OpenCode: Vraag om bug te identificeren
|
||||
2. Claude: Als de foutmelding complex is, vraag om uitleg
|
||||
3. OpenCode: Implementeer de fix
|
||||
|
||||
3. **Chat voor vragen**
|
||||
- Als je iets niet begrijpt
|
||||
- Als je opties wilt vergelijken
|
||||
|
||||
4. **@ mentions voor context**
|
||||
- AI weet niet automatisch over andere files
|
||||
- Voeg relevante files toe met @
|
||||
**Scenario 3: Nieuwe technologie leren**
|
||||
1. ChatGPT: "Leg uit hoe React Server Components werken"
|
||||
2. v0.dev: "Example of React Server Component with data fetching"
|
||||
3. OpenCode: "Help me dit toe te passen in mijn Next.js project"
|
||||
|
||||
---
|
||||
|
||||
### Keyboard Shortcuts Cheat Sheet
|
||||
### Anti-Patterns (Wat Niet Te Doen)
|
||||
|
||||
| Actie | Mac | Windows |
|
||||
|-------|-----|---------|
|
||||
| Tab completion accept | Tab | Tab |
|
||||
| Inline edit | CMD+K | Ctrl+K |
|
||||
| Open Chat | CMD+Shift+L | Ctrl+Shift+L |
|
||||
| Open Composer | CMD+I | Ctrl+I |
|
||||
| Accept suggestion | CMD+Y | Ctrl+Y |
|
||||
| Reject suggestion | CMD+N | Ctrl+N |
|
||||
**❌ Verkeerde tool voor de taak:**
|
||||
- ChatGPT vragen om een hele app te bouwen → te weinig context
|
||||
- v0.dev vragen om complexe backend logica → niet zijn sterke punt
|
||||
- OpenCode vragen om design inspiratie → kan geen images maken
|
||||
|
||||
**❌ Heen en weer kopiëren zonder begrip:**
|
||||
- Kopieer niet blind code van ChatGPT naar je project
|
||||
- Begrijp eerst WAT de code doet
|
||||
|
||||
**❌ Dezelfde prompt in elke tool:**
|
||||
- Pas je prompt aan per tool
|
||||
- v0.dev wil visuele beschrijvingen
|
||||
- OpenCode wil project-specifieke context
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
- Cursor
|
||||
- GitHub
|
||||
- ChatGPT
|
||||
- Claude
|
||||
- v0.dev
|
||||
- OpenCode/WebStorm
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (2 uur)
|
||||
|
||||
### Cursor Verkennen
|
||||
### Tool Comparison Challenge
|
||||
|
||||
**Deel 1: Setup (20 min)**
|
||||
**Deel 1: Dezelfde Taak, Drie Tools (1 uur)**
|
||||
|
||||
1. Download en installeer Cursor
|
||||
2. Sign in met GitHub
|
||||
3. Open je Todo app project
|
||||
4. Verken de interface
|
||||
Bouw een "Contact Form" component met alle drie de tools:
|
||||
|
||||
**Deel 2: Tab Completion (30 min)**
|
||||
1. **ChatGPT (20 min)**
|
||||
- Vraag om code + uitleg
|
||||
- Noteer: hoe lang duurde het, kwaliteit output, wat miste?
|
||||
|
||||
Maak nieuwe file `src/components/LoadingSpinner.tsx`:
|
||||
1. Typ comment: `// Loading spinner component with size prop`
|
||||
2. Laat Tab completion de rest doen
|
||||
3. Itereer met meer comments
|
||||
4. Noteer: hoe goed is de completion?
|
||||
2. **v0.dev (20 min)**
|
||||
- Genereer visueel prototype
|
||||
- Noteer: hoe snel, hoe mooi, hoe aanpasbaar?
|
||||
|
||||
**Deel 3: CMD+K Oefenen (30 min)**
|
||||
3. **OpenCode (20 min)**
|
||||
- Integreer in bestaand project
|
||||
- Noteer: hoe goed past het, hoeveel aanpassing nodig?
|
||||
|
||||
Open je TodoList component:
|
||||
1. Selecteer de list rendering code
|
||||
2. CMD+K → "Add loading state with skeleton"
|
||||
3. Selecteer een button
|
||||
4. CMD+K → "Add disabled state while loading"
|
||||
5. Selecteer een function
|
||||
6. CMD+K → "Add try-catch with error toast"
|
||||
**Deel 2: Analyse (30 min)**
|
||||
|
||||
Noteer wat werkt en wat niet.
|
||||
Vul dit schema in:
|
||||
|
||||
**Deel 4: Chat + @ Mentions (20 min)**
|
||||
| Aspect | ChatGPT | v0.dev | OpenCode |
|
||||
|--------|---------|--------|----------|
|
||||
| Tijd tot werkend component | | | |
|
||||
| Kwaliteit code | | | |
|
||||
| Visueel design | | | |
|
||||
| Past in project | | | |
|
||||
| Hoeveel aanpassing nodig | | | |
|
||||
| Totaalscore (1-10) | | | |
|
||||
|
||||
1. Open Chat (CMD+Shift+L)
|
||||
2. Vraag: "@TodoList.tsx What could I improve in this component?"
|
||||
3. Vraag: "@lib/supabase.ts How do I add real-time subscriptions?"
|
||||
4. Probeer @Docs voor Next.js documentatie
|
||||
**Deel 3: Workflow Documentatie (30 min)**
|
||||
|
||||
**Deel 5: Composer Proberen (20 min)**
|
||||
|
||||
1. Open Composer (CMD+I)
|
||||
2. Vraag: "Create a Settings page with dark mode toggle and notification preferences. Use our existing component style."
|
||||
3. Review de gegenereerde files
|
||||
4. Accept of reject
|
||||
- Maak `docs/WORKFLOW.md` in je project
|
||||
- Documenteer je ideale workflow per taaktype
|
||||
- Inclusief template prompts voor elke tool
|
||||
|
||||
### Deliverable
|
||||
- Screenshot van werkende Tab completion
|
||||
- 3 voorbeelden van CMD+K edits
|
||||
- Notities: wat werkt wel/niet goed
|
||||
- Screenshot van alle 3 contact forms
|
||||
- Ingevuld vergelijkingsschema
|
||||
- `docs/WORKFLOW.md` bestand
|
||||
|
||||
---
|
||||
|
||||
## Huiswerk (2 uur)
|
||||
|
||||
### Bouw Feature met Cursor
|
||||
### Bouw Je Tool Selection Cheat Sheet
|
||||
|
||||
**Deel 1: Feature Bouwen (1.5 uur)**
|
||||
**Deel 1: Cheat Sheet Maken (1 uur)**
|
||||
|
||||
Voeg "Due Dates" toe aan je Todo app:
|
||||
1. Elk todo kan een due date hebben
|
||||
2. Toon due date in de lijst
|
||||
3. Sorteer op due date
|
||||
4. Markeer overdue items in rood
|
||||
Maak een persoonlijke "Tool Selection Cheat Sheet" (1 pagina):
|
||||
|
||||
**Gebruik ALLE Cursor features:**
|
||||
- Tab completion voor nieuwe code
|
||||
- CMD+K voor aanpassingen
|
||||
- Chat voor vragen
|
||||
- Composer voor multi-file changes
|
||||
```markdown
|
||||
# Mijn AI Tool Cheat Sheet
|
||||
|
||||
**Deel 2: Reflectie (30 min)**
|
||||
## Wanneer gebruik ik wat?
|
||||
|
||||
Schrijf vergelijking (400 woorden):
|
||||
- Cursor vs OpenCode: wat is beter?
|
||||
- Welke feature gebruik je het meest?
|
||||
- Is free tier voldoende?
|
||||
- Ga je overstappen?
|
||||
### ChatGPT
|
||||
- ✅ Gebruik voor: [jouw ervaring]
|
||||
- ❌ Niet voor: [jouw ervaring]
|
||||
- 💡 Beste prompt tip: [jouw tip]
|
||||
|
||||
### Claude
|
||||
- ✅ Gebruik voor: [jouw ervaring]
|
||||
- ❌ Niet voor: [jouw ervaring]
|
||||
- 💡 Beste prompt tip: [jouw tip]
|
||||
|
||||
### v0.dev
|
||||
- ✅ Gebruik voor: [jouw ervaring]
|
||||
- ❌ Niet voor: [jouw ervaring]
|
||||
- 💡 Beste prompt tip: [jouw tip]
|
||||
|
||||
### OpenCode
|
||||
- ✅ Gebruik voor: [jouw ervaring]
|
||||
- ❌ Niet voor: [jouw ervaring]
|
||||
- 💡 Beste prompt tip: [jouw tip]
|
||||
```
|
||||
|
||||
**Deel 2: Testen op Nieuwe Taken (45 min)**
|
||||
|
||||
Test je cheat sheet op 2 nieuwe taken:
|
||||
1. Bouw een "Testimonial Card" component
|
||||
2. Voeg een "Dark Mode Toggle" toe
|
||||
|
||||
Per taak: kies tools op basis van cheat sheet, voer uit, update cheat sheet.
|
||||
|
||||
**Deel 3: Reflectie (15 min)**
|
||||
|
||||
Schrijf korte reflectie (400 woorden):
|
||||
- Welke tool is jouw favoriet en waarom?
|
||||
- Wanneer combineer je tools?
|
||||
- Wat ga je anders doen na deze les?
|
||||
|
||||
### Deliverable
|
||||
- Werkende Due Dates feature
|
||||
- GitHub commit met de changes
|
||||
- Tool Selection Cheat Sheet (1 pagina)
|
||||
- 2 gebouwde components
|
||||
- Reflectie (400 woorden)
|
||||
|
||||
---
|
||||
|
||||
## Leerdoelen
|
||||
Na deze les kan de student:
|
||||
- Cursor installeren en configureren
|
||||
- Tab completion effectief gebruiken
|
||||
- CMD+K gebruiken voor inline edits
|
||||
- Chat gebruiken met @ mentions voor context
|
||||
- Composer mode gebruiken voor multi-file generatie
|
||||
- Het verschil beoordelen tussen Cursor en OpenCode
|
||||
- De juiste Cursor feature kiezen per taak
|
||||
- De sterke en zwakke punten van elke AI tool benoemen
|
||||
- De juiste tool kiezen voor een specifieke taak
|
||||
- Meerdere tools combineren in een effectieve workflow
|
||||
- Een persoonlijke workflow documenteren
|
||||
- Template prompts schrijven per tool
|
||||
- Kritisch evalueren welke tool wanneer het beste werkt
|
||||
|
||||
Reference in New Issue
Block a user