fix: better order
This commit is contained in:
Tim Rijkse
@@ -1,12 +1,4 @@
|
||||
# Les 10: Project Setup & Repository Structure
|
||||
|
||||
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
||||
>
|
||||
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
|
||||
> - Les10-Slide-Overzicht.md
|
||||
> - Les10-Lesplan.md
|
||||
> - Les10-Bijlage-A-Lesopdracht.md
|
||||
> - Les10-Bijlage-B-Huiswerkopdracht.md
|
||||
# Les 10: Introduction to Cursor
|
||||
|
||||
---
|
||||
|
||||
@@ -14,205 +6,273 @@
|
||||
**Hoofdstuk 3: Advanced** (Les 10-18)
|
||||
|
||||
## Beschrijving
|
||||
Leer hoe je een professioneel project opzet met goede folder structuur, documentatie, en AI-configuratie files. Dit vormt de basis voor je eindopdracht.
|
||||
Kennismaking met Cursor - de professionele AI code editor. Leer de core features en ontdek waarom dit de tool is voor serieuze AI-assisted development.
|
||||
|
||||
---
|
||||
|
||||
## Te Behandelen
|
||||
|
||||
### Waarom Project Structure Belangrijk Is
|
||||
- AI tools werken beter met duidelijke structuur
|
||||
- Makkelijker samenwerken
|
||||
- Sneller nieuwe features toevoegen
|
||||
- Professionele uitstraling
|
||||
### Waarom Cursor?
|
||||
|
||||
### Ideale Folder Structuur
|
||||
**Tot nu toe gebruikten we:**
|
||||
- OpenCode (gratis, goed voor leren)
|
||||
- Claude Desktop (voor agents en projects)
|
||||
|
||||
```
|
||||
project/
|
||||
├── .cursor/
|
||||
│ └── rules/ # Cursor instructies
|
||||
│ ├── general.mdc # Algemene project regels
|
||||
│ └── components.mdc # Component-specifieke regels
|
||||
├── docs/
|
||||
│ ├── PROMPT-LOG.md # Belangrijke AI prompts
|
||||
│ ├── AI-DECISIONS.md # Architectuur beslissingen
|
||||
│ └── PROJECT-BRIEF.md # Project beschrijving
|
||||
├── src/
|
||||
│ ├── app/ # Next.js App Router
|
||||
│ ├── components/
|
||||
│ │ ├── ui/ # Basis UI components
|
||||
│ │ └── features/ # Feature-specifieke components
|
||||
│ ├── lib/ # Utilities en helpers
|
||||
│ └── types/ # TypeScript types
|
||||
├── .env.local # Environment variables
|
||||
├── .env.example # Template voor env vars
|
||||
├── .gitignore
|
||||
└── README.md
|
||||
**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-4, 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]
|
||||
```
|
||||
|
||||
### .cursorrules Files
|
||||
#### 2. CMD+K (Inline Editing)
|
||||
Selecteer code en vraag AI om het aan te passen.
|
||||
|
||||
**Wat zijn .cursorrules?**
|
||||
- Markdown files met instructies voor Cursor
|
||||
- Project-specifieke regels en conventies
|
||||
- Worden automatisch meegenomen in context
|
||||
**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
|
||||
|
||||
**Voorbeeld `general.mdc`:**
|
||||
```markdown
|
||||
# Project Rules
|
||||
**Voorbeelden:**
|
||||
- "Add error handling"
|
||||
- "Convert to TypeScript"
|
||||
- "Make this responsive"
|
||||
- "Add loading state"
|
||||
|
||||
## Tech Stack
|
||||
- Next.js 14 met App Router
|
||||
- TypeScript (strict mode)
|
||||
- Tailwind CSS voor styling
|
||||
- Supabase voor backend
|
||||
#### 3. Chat (Sidebar)
|
||||
Converseer met AI over je code.
|
||||
|
||||
## Code Conventies
|
||||
- Gebruik functionele components
|
||||
- Prefer named exports
|
||||
- Destructure props
|
||||
- Gebruik async/await (geen .then())
|
||||
**Hoe het werkt:**
|
||||
1. CMD+Shift+L opent Chat
|
||||
2. Stel je vraag
|
||||
3. AI heeft context van je open file
|
||||
|
||||
## Styling
|
||||
- Tailwind classes, geen inline styles
|
||||
- Mobile-first approach
|
||||
- Gebruik design tokens waar mogelijk
|
||||
**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?
|
||||
```
|
||||
|
||||
### docs/ Folder
|
||||
#### 5. Composer Mode
|
||||
Multi-file generatie in één keer.
|
||||
|
||||
**PROMPT-LOG.md**
|
||||
- Log van belangrijke prompts die tot goede code leidden
|
||||
- Minimaal 10 prompts documenteren
|
||||
- Format: doel → prompt → resultaat
|
||||
**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
|
||||
|
||||
**AI-DECISIONS.md**
|
||||
- Architectuur beslissingen gemaakt met AI hulp
|
||||
- Waarom bepaalde keuzes gemaakt
|
||||
- Trade-offs en alternatieven
|
||||
**Wanneer gebruiken:**
|
||||
- Nieuwe features met meerdere components
|
||||
- Refactoring over meerdere files
|
||||
- Boilerplate code genereren
|
||||
|
||||
**PROJECT-BRIEF.md**
|
||||
- Wat doet het project?
|
||||
- Wie is de doelgroep?
|
||||
- Welke features zijn er?
|
||||
---
|
||||
|
||||
### Environment Variables
|
||||
### Workflow Vergelijking
|
||||
|
||||
**.env.example** (commit naar Git):
|
||||
```
|
||||
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
|
||||
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
|
||||
OPENAI_API_KEY=your-openai-key
|
||||
```
|
||||
| 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 |
|
||||
|
||||
**.env.local** (NOOIT committen):
|
||||
```
|
||||
NEXT_PUBLIC_SUPABASE_URL=https://xxx.supabase.co
|
||||
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...
|
||||
OPENAI_API_KEY=sk-...
|
||||
```
|
||||
---
|
||||
|
||||
### README.md Best Practices
|
||||
- Project titel en korte beschrijving
|
||||
- Screenshots of demo GIF
|
||||
- Installatie instructies
|
||||
- Environment variables uitleg
|
||||
- Beschikbare scripts (`npm run dev`, etc.)
|
||||
### Tips voor Beginners
|
||||
|
||||
### Git Best Practices
|
||||
- Kleine, focused commits
|
||||
- Duidelijke commit messages
|
||||
- Feature branches
|
||||
- `.gitignore` correct ingesteld
|
||||
1. **Start met Tab completion**
|
||||
- Gewoon typen en kijken wat er gebeurt
|
||||
- Comments zijn je vriend
|
||||
|
||||
2. **CMD+K voor snelle edits**
|
||||
- Selecteer precies wat je wilt aanpassen
|
||||
- Wees specifiek in je instructie
|
||||
|
||||
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 @
|
||||
|
||||
---
|
||||
|
||||
### 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 |
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
- Cursor
|
||||
- Git & GitHub
|
||||
- Next.js
|
||||
- VS Code / WebStorm
|
||||
- GitHub
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (2 uur)
|
||||
|
||||
### Richt je Eindproject Repository In
|
||||
### Cursor Verkennen
|
||||
|
||||
**Deel 1: Repository Setup (30 min)**
|
||||
- Maak nieuwe GitHub repository
|
||||
- Clone lokaal
|
||||
- Run `npx create-next-app@latest` met TypeScript + Tailwind
|
||||
- Push initial commit
|
||||
**Deel 1: Setup (20 min)**
|
||||
|
||||
**Deel 2: Folder Structuur (30 min)**
|
||||
- Maak `docs/` folder met:
|
||||
- `PROJECT-BRIEF.md` (beschrijf je eindproject idee)
|
||||
- `PROMPT-LOG.md` (lege template)
|
||||
- `AI-DECISIONS.md` (lege template)
|
||||
- Maak `.cursor/rules/` folder met:
|
||||
- `general.mdc` (project regels)
|
||||
- Reorganiseer `src/` folder
|
||||
1. Download en installeer Cursor
|
||||
2. Sign in met GitHub
|
||||
3. Open je Todo app project
|
||||
4. Verken de interface
|
||||
|
||||
**Deel 3: Environment Setup (20 min)**
|
||||
- Maak `.env.example` met alle benodigde variabelen
|
||||
- Maak `.env.local` met echte waarden
|
||||
- Controleer `.gitignore` (env files moeten erin staan!)
|
||||
**Deel 2: Tab Completion (30 min)**
|
||||
|
||||
**Deel 4: README & Git (40 min)**
|
||||
- Schrijf complete README.md
|
||||
- Maak eerste feature branch
|
||||
- Commit alle changes met goede messages
|
||||
- Push en maak PR (voor jezelf)
|
||||
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 3: CMD+K Oefenen (30 min)**
|
||||
|
||||
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"
|
||||
|
||||
Noteer wat werkt en wat niet.
|
||||
|
||||
**Deel 4: Chat + @ Mentions (20 min)**
|
||||
|
||||
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 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
|
||||
|
||||
### Deliverable
|
||||
- GitHub repository met complete structuur
|
||||
- Alle docs files aanwezig
|
||||
- .cursorrules file geschreven
|
||||
- README compleet
|
||||
- Screenshot van werkende Tab completion
|
||||
- 3 voorbeelden van CMD+K edits
|
||||
- Notities: wat werkt wel/niet goed
|
||||
|
||||
---
|
||||
|
||||
## Huiswerk (2 uur)
|
||||
|
||||
### Verfijn je Project Setup
|
||||
### Bouw Feature met Cursor
|
||||
|
||||
**Deel 1: .cursorrules Uitbreiden (45 min)**
|
||||
- Voeg `components.mdc` toe met component conventies
|
||||
- Voeg `api.mdc` toe met API/Supabase regels
|
||||
- Test of Cursor de regels oppikt
|
||||
**Deel 1: Feature Bouwen (1.5 uur)**
|
||||
|
||||
**Deel 2: Documentatie (45 min)**
|
||||
- Vul `PROJECT-BRIEF.md` volledig in:
|
||||
- Projectnaam en tagline
|
||||
- Probleem dat je oplost
|
||||
- Target audience
|
||||
- Core features (3-5)
|
||||
- Nice-to-have features
|
||||
- Tech stack keuzes
|
||||
- Start `AI-DECISIONS.md` met eerste beslissing
|
||||
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
|
||||
|
||||
**Deel 3: Basis Components (30 min)**
|
||||
- Maak `src/components/ui/` met basic components:
|
||||
- Button.tsx
|
||||
- Card.tsx
|
||||
- Input.tsx
|
||||
- Gebruik Cursor met je nieuwe .cursorrules
|
||||
**Gebruik ALLE Cursor features:**
|
||||
- Tab completion voor nieuwe code
|
||||
- CMD+K voor aanpassingen
|
||||
- Chat voor vragen
|
||||
- Composer voor multi-file changes
|
||||
|
||||
**Deel 2: Reflectie (30 min)**
|
||||
|
||||
Schrijf vergelijking (400 woorden):
|
||||
- Cursor vs OpenCode: wat is beter?
|
||||
- Welke feature gebruik je het meest?
|
||||
- Is free tier voldoende?
|
||||
- Ga je overstappen?
|
||||
|
||||
### Deliverable
|
||||
- Uitgebreide .cursorrules (minimaal 2 files)
|
||||
- Volledig ingevulde PROJECT-BRIEF.md
|
||||
- Basis UI components gemaakt met Cursor
|
||||
- Screenshot van Cursor die je rules gebruikt
|
||||
- Werkende Due Dates feature
|
||||
- GitHub commit met de changes
|
||||
- Reflectie (400 woorden)
|
||||
|
||||
---
|
||||
|
||||
## Leerdoelen
|
||||
Na deze les kan de student:
|
||||
- Een professionele project structuur opzetten
|
||||
- .cursorrules files schrijven voor project-specifieke AI instructies
|
||||
- Documentatie files maken (PROMPT-LOG, AI-DECISIONS, PROJECT-BRIEF)
|
||||
- Environment variables correct beheren
|
||||
- Git best practices toepassen
|
||||
- Een README schrijven die anderen kunnen volgen
|
||||
- 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
|
||||
|
||||
Reference in New Issue
Block a user