fix: les 6
This commit is contained in:
@@ -1,261 +1,157 @@
|
||||
# Les 12: Introduction to Cursor
|
||||
# Les 12: Project Setup & AI Config (.cursorrules, claude.md)
|
||||
|
||||
---
|
||||
|
||||
## Hoofdstuk
|
||||
**Deel 3: AI Tooling & Prototyping** (Les 10-12)
|
||||
**Deel 3: Full-Stack Development** (Les 9-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.
|
||||
Professional project setup en AI configuration voor optimal developer experience. Setup .cursorrules, claude.md, docs/ folder, folder structure optimalisatie en git best practices.
|
||||
|
||||
---
|
||||
|
||||
## Te Behandelen
|
||||
## Te Behandelen (~45 min)
|
||||
|
||||
### Groepsdiscussie (15 min)
|
||||
Bespreek klassikaal de prototype ervaringen uit Les 11 - welke workflow patterns werkten goed? Wat ging fout en hoe loste je dat op?
|
||||
|
||||
### Waarom Cursor?
|
||||
|
||||
**Tot nu toe gebruikten we:**
|
||||
- OpenCode (gratis, goed voor leren)
|
||||
- Claude Desktop (voor agents en projects)
|
||||
|
||||
**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)
|
||||
|
||||
---
|
||||
|
||||
### Free vs Pro
|
||||
|
||||
| Aspect | Free Tier | Pro ($20/maand) |
|
||||
|--------|-----------|-----------------|
|
||||
| Tab completion | ✅ | ✅ |
|
||||
| CMD+K edits | Beperkt | Onbeperkt |
|
||||
| Chat | Beperkt | Onbeperkt |
|
||||
| Composer | Beperkt | Onbeperkt |
|
||||
| Models | GPT-5, Claude | Alle modellen |
|
||||
|
||||
**Voor deze cursus:** Free tier is voldoende!
|
||||
|
||||
---
|
||||
|
||||
### Installatie
|
||||
|
||||
1. Ga naar [cursor.sh](https://cursor.sh)
|
||||
2. Download voor jouw OS
|
||||
3. Installeer
|
||||
4. Open Cursor
|
||||
5. Sign in met GitHub
|
||||
|
||||
**Eerste keer:**
|
||||
- Cursor vraagt om settings te importeren van VS Code (optioneel)
|
||||
- Accept default keybindings
|
||||
|
||||
---
|
||||
|
||||
### 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]
|
||||
```
|
||||
|
||||
#### 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
|
||||
|
||||
**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:**
|
||||
```
|
||||
@components/Button.tsx - How can I add a loading prop to this?
|
||||
```
|
||||
|
||||
#### 5. Composer Mode
|
||||
Multi-file generatie in één keer.
|
||||
|
||||
**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
|
||||
|
||||
---
|
||||
|
||||
### Workflow Vergelijking
|
||||
|
||||
| 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 |
|
||||
|
||||
---
|
||||
|
||||
### Keyboard Shortcuts Cheat Sheet
|
||||
|
||||
| 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 |
|
||||
- Waarom goede project structuur cruciaal is voor AI tools
|
||||
- De ideale folder structuur voor Next.js + AI collaboration
|
||||
- .cursorrules file: syntax, best practices, examples
|
||||
- claude.md: project documentation voor Claude
|
||||
- docs/ folder organization: AI-DECISIONS.md, ARCHITECTURE.md, PROMPT-LOG.md
|
||||
- .env.local vs .env.example configuratie
|
||||
- .gitignore en .cursorignore voor AI tools
|
||||
- .git best practices: meaningful commits, proper history
|
||||
- README setup met project info
|
||||
- TypeScript configuration optimization
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
- Cursor
|
||||
- Git
|
||||
- GitHub
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (2 uur)
|
||||
## Lesopdracht (2 uur, klassikaal)
|
||||
|
||||
### Cursor Verkennen
|
||||
### Setup Je Eindproject Proper
|
||||
|
||||
**Deel 1: Setup (20 min)**
|
||||
**Groepsdiscussie (15 min):**
|
||||
Bespreek klassikaal de architecture planning uit Les 11 - welke design patterns voelen goed voor jullie eindproject?
|
||||
|
||||
1. Download en installeer Cursor
|
||||
2. Sign in met GitHub
|
||||
3. Open je Todo app project
|
||||
4. Verken de interface
|
||||
**Deel 1: Folder Structure (30 min)**
|
||||
|
||||
**Deel 2: Tab Completion (30 min)**
|
||||
Zorg dat je project er zo uitziet:
|
||||
```
|
||||
project/
|
||||
├── src/
|
||||
│ ├── app/
|
||||
│ ├── components/
|
||||
│ │ ├── ui/
|
||||
│ │ ├── layout/
|
||||
│ │ └── features/
|
||||
│ ├── lib/
|
||||
│ ├── hooks/
|
||||
│ └── types/
|
||||
├── docs/
|
||||
├── public/
|
||||
├── .cursorrules
|
||||
├── .env.local
|
||||
├── .env.example
|
||||
├── .gitignore
|
||||
├── README.md
|
||||
└── claude.md
|
||||
```
|
||||
|
||||
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?
|
||||
**Deel 2: .cursorrules Writing (30 min)**
|
||||
|
||||
**Deel 3: CMD+K Oefenen (30 min)**
|
||||
Maak comprehensive `.cursorrules`:
|
||||
1. Project naam + beschrijving
|
||||
2. Tech stack (Next.js 14, TypeScript, Tailwind, Supabase)
|
||||
3. File structure conventions
|
||||
4. Code conventions (naming, styling, error handling)
|
||||
5. TypeScript strict rules
|
||||
6. DO's en DON'Ts specifiek voor je project
|
||||
|
||||
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"
|
||||
Example snippets:
|
||||
- "Named exports only, no default exports"
|
||||
- "All components are functional with TypeScript"
|
||||
- "Use Tailwind classes, no inline styles"
|
||||
|
||||
Noteer wat werkt en wat niet.
|
||||
**Deel 3: Documentation Files (30 min)**
|
||||
|
||||
**Deel 4: Chat + @ Mentions (20 min)**
|
||||
Maak in docs/ folder:
|
||||
- `PROJECT-BRIEF.md` - Project overview, features
|
||||
- `ARCHITECTURE.md` - Component structure, data flow
|
||||
- `AI-DECISIONS.md` - Start document met AI choices
|
||||
- `PROMPT-LOG.md` - Template voor prompts die je gebruikt
|
||||
|
||||
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 4: Git Setup (20 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
|
||||
1. Review `.gitignore` (include `.env.local`)
|
||||
2. Make initial commit: "Initial project setup"
|
||||
3. Push naar GitHub
|
||||
4. Verify: `.env.local` NOT in git history
|
||||
|
||||
### Deliverable
|
||||
- Screenshot van werkende Tab completion
|
||||
- 3 voorbeelden van CMD+K edits
|
||||
- Notities: wat werkt wel/niet goed
|
||||
- Complete folder structure
|
||||
- Comprehensive .cursorrules file
|
||||
- Documentation files in docs/
|
||||
- GitHub repo met clean initial commit
|
||||
- README.md with project info
|
||||
|
||||
---
|
||||
|
||||
## Huiswerk (2 uur)
|
||||
|
||||
### Bouw Feature met Cursor
|
||||
### Optimize Configuration & Start Building
|
||||
|
||||
**Deel 1: Feature Bouwen (1.5 uur)**
|
||||
**Deel 1: tsconfig.json Optimization (30 min)**
|
||||
|
||||
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
|
||||
1. Enable strict mode in TypeScript
|
||||
2. Configure path aliases for cleaner imports:
|
||||
```json
|
||||
"@/*": ["./src/*"]
|
||||
```
|
||||
3. Set proper include/exclude
|
||||
|
||||
**Gebruik ALLE Cursor features:**
|
||||
- Tab completion voor nieuwe code
|
||||
- CMD+K voor aanpassingen
|
||||
- Chat voor vragen
|
||||
- Composer voor multi-file changes
|
||||
**Deel 2: Tailwind & Component Setup (45 min)**
|
||||
|
||||
**Deel 2: Reflectie (30 min)**
|
||||
1. Customize `tailwind.config.ts` with your colors
|
||||
2. Setup `globals.css` properly
|
||||
3. Create 5 base UI components:
|
||||
- Button.tsx
|
||||
- Input.tsx
|
||||
- Card.tsx
|
||||
- Layout.tsx
|
||||
- Navigation.tsx
|
||||
|
||||
Schrijf vergelijking (400 woorden):
|
||||
- Cursor vs OpenCode: wat is beter?
|
||||
- Welke feature gebruik je het meest?
|
||||
- Is free tier voldoende?
|
||||
- Ga je overstappen?
|
||||
**Deel 3: Lib Setup (30 min)**
|
||||
|
||||
Create essential lib files:
|
||||
- `lib/supabase.ts` - Initialize Supabase client
|
||||
- `lib/utils.ts` - Utility functions
|
||||
- `lib/constants.ts` - App constants
|
||||
- `types/database.ts` - Database types
|
||||
|
||||
### Deliverable
|
||||
- Werkende Due Dates feature
|
||||
- GitHub commit met de changes
|
||||
- Reflectie (400 woorden)
|
||||
- Optimized TypeScript config with path aliases
|
||||
- Base UI components created
|
||||
- Lib utilities setup
|
||||
- Documentation updated with decisions
|
||||
- GitHub commits with setup progress
|
||||
|
||||
---
|
||||
|
||||
## 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
|
||||
- Een professional project structure opzetten
|
||||
- Een effectieve .cursorrules file schrijven
|
||||
- claude.md projectdocumentatie maken
|
||||
- AI-DECISIONS.md beginnen en onderhouden
|
||||
- Git best practices volgen
|
||||
- TypeScript strict mode configureren
|
||||
- Path aliases voor cleaner imports opzetten
|
||||
- Base components en utilities creëren
|
||||
- Voorbereiding maken op Deel 4 (Advanced AI)
|
||||
|
||||
Reference in New Issue
Block a user