fix: les 6
This commit is contained in:
@@ -1,346 +1,122 @@
|
||||
# Les 16: Mastering Cursor
|
||||
# Les 16: Eindproject Werkdag 2
|
||||
|
||||
---
|
||||
|
||||
## Hoofdstuk
|
||||
**Deel 4: Advanced AI Features** (Les 13-18)
|
||||
**Deel 4: Advanced AI & Deployment** (Les 13-18)
|
||||
|
||||
## Beschrijving
|
||||
Verdieping in Cursor's geavanceerde features. Leer model keuze, Composer Mode, @ mentions, en .cursorrules optimaal gebruiken.
|
||||
Verlengde werksessie voor je eindproject. Continue Development Day waar je intensief aan je AI-powered applicatie werkt met begeleiding en feedback van de docent.
|
||||
|
||||
---
|
||||
|
||||
## Te Behandelen
|
||||
|
||||
### Groepsdiscussie (15 min)
|
||||
Bespreek klassikaal de context management ervaringen uit Les 15 - welke strategieën werkten het beste?
|
||||
Bespreek klassikaal de deployment ervaringen uit Les 15 - welke problemen kwamen jullie tegen en hoe losten jullie die op?
|
||||
|
||||
### Model Keuze
|
||||
### Doel van deze werkdag
|
||||
|
||||
**Wanneer welk model?**
|
||||
|
||||
| Model | Gebruik voor | Kosten |
|
||||
|-------|-------------|--------|
|
||||
| **Haiku** | Simpele taken, autocomplete | Goedkoop |
|
||||
| **Sonnet** | Dagelijks werk, de meeste taken | Medium |
|
||||
| **Opus** | Complexe architectuur, multi-file | Duur |
|
||||
|
||||
**Vuistregels:**
|
||||
- Tab completion: Haiku (automatisch)
|
||||
- CMD+K: Sonnet (default)
|
||||
- Composer: Sonnet of Opus
|
||||
- Complexe debugging: Opus
|
||||
Deze les is puur praktisch werken:
|
||||
- Bugs fixen die je bent tegengekomen
|
||||
- Features afmaken die nog niet klaar zijn
|
||||
- Code cleanup en optimalisatie
|
||||
- Performance verbeteren
|
||||
- Documentatie aanpassen
|
||||
- Testen in productie
|
||||
|
||||
---
|
||||
|
||||
### Composer Mode Diepgaand
|
||||
### Checklist voor deze sessie
|
||||
|
||||
**Wat is Composer?**
|
||||
Multi-file generatie in één keer. Cursor plant en voert wijzigingen uit over meerdere bestanden.
|
||||
**Code Quality:**
|
||||
- [ ] TypeScript geen errors
|
||||
- [ ] ESLint check passed
|
||||
- [ ] Geen unused imports/variables
|
||||
- [ ] Proper error handling overal
|
||||
|
||||
**Wanneer Composer gebruiken:**
|
||||
- Nieuwe feature met meerdere components
|
||||
- Refactoring over meerdere files
|
||||
- Boilerplate generatie
|
||||
- Complexe wijzigingen
|
||||
**Features:**
|
||||
- [ ] Alle core features werken
|
||||
- [ ] AI feature functionaliteit compleet
|
||||
- [ ] Edge cases afgehandeld
|
||||
- [ ] Loading states geimplementeerd
|
||||
- [ ] Error states geimplementeerd
|
||||
|
||||
**Composer Workflow:**
|
||||
1. CMD+I opent Composer
|
||||
2. Beschrijf je doel duidelijk
|
||||
3. Voeg context toe met @ mentions
|
||||
4. Laat Cursor plannen
|
||||
5. Review het plan
|
||||
6. Accept of reject per file
|
||||
7. Itereer met feedback
|
||||
**Performance:**
|
||||
- [ ] Lighthouse score > 80
|
||||
- [ ] Images optimized
|
||||
- [ ] Lazy loading waar nodig
|
||||
- [ ] Bundle size reasonable
|
||||
|
||||
**Voorbeeld prompt:**
|
||||
```
|
||||
Create a user profile page with:
|
||||
- @components/ui/ style components
|
||||
- Profile header with avatar
|
||||
- Edit form with validation
|
||||
- Save to @lib/supabase.ts
|
||||
- Loading and error states
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### @ Mentions Systeem
|
||||
|
||||
**Alle types:**
|
||||
|
||||
| Mention | Wat het doet | Voorbeeld |
|
||||
|---------|--------------|-----------|
|
||||
| `@file.tsx` | Specifieke file | `@Button.tsx` |
|
||||
| `@folder/` | Hele folder | `@components/` |
|
||||
| `@codebase` | Zoek in codebase | `@codebase auth logic` |
|
||||
| `@Docs` | Officiële docs | `@Docs Next.js routing` |
|
||||
| `@Web` | Web zoeken | `@Web Supabase auth setup` |
|
||||
|
||||
**Best practices:**
|
||||
- Wees specifiek met file mentions
|
||||
- Gebruik folder mentions voor context
|
||||
- @Docs voor up-to-date informatie
|
||||
- Combineer mentions voor betere context
|
||||
|
||||
---
|
||||
|
||||
### .cursorrules Advanced
|
||||
|
||||
**Meerdere rules files:**
|
||||
|
||||
```
|
||||
.cursor/
|
||||
└── rules/
|
||||
├── general.mdc # Project-brede regels
|
||||
├── components.mdc # Component conventies
|
||||
├── api.mdc # API route regels
|
||||
└── testing.mdc # Test conventies
|
||||
```
|
||||
|
||||
**Effectieve rules schrijven:**
|
||||
|
||||
```markdown
|
||||
# Component Rules
|
||||
|
||||
## Structure
|
||||
Alle components moeten volgen:
|
||||
1. Props interface bovenaan
|
||||
2. Component function
|
||||
3. Named export onderaan
|
||||
|
||||
## Example
|
||||
\`\`\`tsx
|
||||
interface ButtonProps {
|
||||
label: string
|
||||
onClick: () => void
|
||||
variant?: 'primary' | 'secondary'
|
||||
}
|
||||
|
||||
export function Button({ label, onClick, variant = 'primary' }: ButtonProps) {
|
||||
return (
|
||||
<button onClick={onClick} className={...}>
|
||||
{label}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
\`\`\`
|
||||
|
||||
## DON'Ts
|
||||
- Geen default exports
|
||||
- Geen inline styles
|
||||
- Geen any types
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Codebase Indexing
|
||||
|
||||
**Hoe Cursor indexeert:**
|
||||
- Scant alle files in je project
|
||||
- Bouwt semantic understanding
|
||||
- Gebruikt voor autocomplete en context
|
||||
|
||||
**Optimaliseren:**
|
||||
1. Goede `.cursorignore` (node_modules, .next, etc.)
|
||||
2. Semantische naming
|
||||
3. Duidelijke file structuur
|
||||
4. Comments waar nodig
|
||||
|
||||
**Re-indexeren:**
|
||||
CMD+Shift+P → "Reindex"
|
||||
|
||||
---
|
||||
|
||||
### Cost Management
|
||||
|
||||
**Token gebruik monitoren:**
|
||||
- Cursor toont token count in chat
|
||||
- Check monthly usage in settings
|
||||
|
||||
**Bespaartips:**
|
||||
1. Gebruik Haiku voor simpele taken
|
||||
2. Beperk context (niet hele codebase)
|
||||
3. Wees specifiek in prompts
|
||||
4. Fresh chat voor nieuwe onderwerpen
|
||||
|
||||
**Free tier strategie:**
|
||||
- Focus op Tab completion (onbeperkt)
|
||||
- Gebruik CMD+K spaarzaam
|
||||
- Composer alleen voor grote taken
|
||||
|
||||
---
|
||||
|
||||
### Debugging met Cursor
|
||||
|
||||
**AI-Assisted Debugging:**
|
||||
|
||||
**Stap 1: Error identificeren**
|
||||
```
|
||||
@file-met-error.tsx
|
||||
Ik krijg deze error: [plak error]
|
||||
Wat gaat er mis?
|
||||
```
|
||||
|
||||
**Stap 2: Context toevoegen**
|
||||
```
|
||||
@file-met-error.tsx
|
||||
@gerelateerde-file.ts
|
||||
De error treedt op wanneer ik X doe.
|
||||
Console log toont: [data]
|
||||
```
|
||||
|
||||
**Stap 3: Fix implementeren**
|
||||
- Selecteer code met error
|
||||
- CMD+K → "Fix this error: [beschrijving]"
|
||||
- Review en test
|
||||
|
||||
---
|
||||
|
||||
### Refactoring met Cursor
|
||||
|
||||
**Pattern 1: Extract Component**
|
||||
```
|
||||
Selecteer JSX block → CMD+K
|
||||
"Extract this into a separate component called ProductCard"
|
||||
```
|
||||
|
||||
**Pattern 2: Extract Hook**
|
||||
```
|
||||
Selecteer state + useEffect → CMD+K
|
||||
"Extract this into a custom hook called useProductData"
|
||||
```
|
||||
|
||||
**Pattern 3: Improve Performance**
|
||||
```
|
||||
@Component.tsx
|
||||
"Optimize this component:
|
||||
- Add memoization waar nodig
|
||||
- Fix unnecessary re-renders
|
||||
- Improve loading performance"
|
||||
```
|
||||
**Deployment:**
|
||||
- [ ] Builds succesvol lokaal
|
||||
- [ ] Alle env vars in Vercel
|
||||
- [ ] Works in production
|
||||
- [ ] Supabase redirects configured
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
- Cursor
|
||||
- Claude models (Haiku/Sonnet/Opus)
|
||||
- .cursorrules
|
||||
- Chrome DevTools
|
||||
- Vercel Dashboard
|
||||
- Supabase Dashboard
|
||||
- GitHub
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (2 uur)
|
||||
## Lesopdracht (4 uur)
|
||||
|
||||
### Multi-Step Form Wizard
|
||||
### Intensive Development Session
|
||||
|
||||
**Bouw met Composer:**
|
||||
**Hou je voortgang bij:**
|
||||
|
||||
| Stap | Features |
|
||||
|------|----------|
|
||||
| 1 | Personal info (naam, email) |
|
||||
| 2 | Preferences (theme, notifications) |
|
||||
| 3 | Review & confirm |
|
||||
| 4 | Success animation |
|
||||
**Eerste uur:**
|
||||
- [ ] Maak prioriteiten list
|
||||
- [ ] Fix top 3 bugs
|
||||
- [ ] Test alles lokaal
|
||||
|
||||
**Requirements:**
|
||||
- Progress indicator
|
||||
- Per-stap validatie
|
||||
- localStorage persistence
|
||||
- TypeScript strict
|
||||
- Tailwind styling
|
||||
- Mobile responsive
|
||||
**Twee uur:**
|
||||
- [ ] Implementeer ontbrekende features
|
||||
- [ ] Add missing error handling
|
||||
- [ ] Improve styling/UX
|
||||
|
||||
**Process:**
|
||||
**Drie uur:**
|
||||
- [ ] Code cleanup
|
||||
- [ ] Performance optimization
|
||||
- [ ] Redeploy
|
||||
|
||||
**Deel 1: Composer Setup (30 min)**
|
||||
1. Open Composer (CMD+I)
|
||||
2. Schrijf comprehensive prompt
|
||||
3. Include @ mentions naar relevante files
|
||||
4. Kies Sonnet of Opus
|
||||
|
||||
**Deel 2: Generatie & Review (45 min)**
|
||||
1. Laat Composer genereren
|
||||
2. Review elke file
|
||||
3. Accept wat goed is
|
||||
4. Reject wat niet past
|
||||
|
||||
**Deel 3: Refinement (45 min)**
|
||||
1. Gebruik CMD+K voor kleine fixes
|
||||
2. Chat voor vragen
|
||||
3. Itereer tot het werkt
|
||||
**Vier uur:**
|
||||
- [ ] Final testing in production
|
||||
- [ ] Screenshot taken
|
||||
- [ ] Docs updated
|
||||
|
||||
### Deliverable
|
||||
- Werkende form wizard
|
||||
- Notities: welk model wanneer, hoeveel iteraties
|
||||
- Werkende app (lokaal en productie)
|
||||
- Updated PROMPT-LOG.md
|
||||
- Updated AI-DECISIONS.md
|
||||
- Screenshot van werkende app
|
||||
|
||||
---
|
||||
|
||||
## Huiswerk (2 uur)
|
||||
## Huiswerk
|
||||
|
||||
### Perfecte .cursorrules
|
||||
|
||||
**Deel 1: Research (30 min)**
|
||||
- Zoek 3-5 .cursorrules voorbeelden online
|
||||
- Analyseer wat ze effectief maakt
|
||||
|
||||
**Deel 2: Write Comprehensive Rules (1 uur)**
|
||||
|
||||
Maak complete .cursorrules voor je eindproject:
|
||||
|
||||
```markdown
|
||||
# [Project Naam]
|
||||
|
||||
## Tech Stack
|
||||
[Jouw stack]
|
||||
|
||||
## Code Conventions
|
||||
[Jouw conventies]
|
||||
|
||||
## File Naming
|
||||
[Jouw regels]
|
||||
|
||||
## Component Structure
|
||||
[Jouw patterns]
|
||||
|
||||
## Styling
|
||||
[Tailwind regels]
|
||||
|
||||
## API Routes
|
||||
[Route conventies]
|
||||
|
||||
## Error Handling
|
||||
[Error patterns]
|
||||
|
||||
## DON'Ts
|
||||
[Wat te vermijden]
|
||||
```
|
||||
|
||||
**Deel 3: Test (30 min)**
|
||||
1. Start nieuw component
|
||||
2. Vraag Cursor om het te bouwen
|
||||
3. Check: volgt Cursor je regels?
|
||||
4. Itereer indien nodig
|
||||
Continue working on your end project for next session. Make sure to:
|
||||
- Push all changes to GitHub
|
||||
- Document what you've done
|
||||
- List remaining work for next session
|
||||
|
||||
### Deliverable
|
||||
- Complete .cursorrules file
|
||||
- Screenshot van Cursor die regels volgt
|
||||
- Korte analyse: wat werkt goed, wat niet
|
||||
|
||||
---
|
||||
|
||||
## 💡 Eindopdracht Check-in
|
||||
|
||||
Hoe gaat je eindproject? Loop je ergens tegenaan? Dit is een goed moment om vragen te stellen en feedback te krijgen van de docent en klasgenoten.
|
||||
- All work committed and pushed
|
||||
- Documentation current
|
||||
- Task list for Les 17
|
||||
|
||||
---
|
||||
|
||||
## Leerdoelen
|
||||
Na deze les kan de student:
|
||||
- Het juiste Claude model kiezen per taak
|
||||
- Composer Mode effectief gebruiken voor multi-file features
|
||||
- @ mentions strategisch inzetten voor context
|
||||
- Geavanceerde .cursorrules files schrijven
|
||||
- Codebase indexing optimaliseren
|
||||
- Token gebruik monitoren en kosten beheren
|
||||
- AI-assisted debugging toepassen
|
||||
- Refactoring uitvoeren met Cursor
|
||||
- Zelfstandig bugs identificeren en fixen
|
||||
- Code quality verbeteren
|
||||
- Performance optimisatie toepassen
|
||||
- Productie deployment testen en valideren
|
||||
- Documentatie up-to-date houden
|
||||
|
||||
Reference in New Issue
Block a user