315 lines
9.1 KiB
Markdown
315 lines
9.1 KiB
Markdown
# Les 9 Huiswerk: Bouw je eigen app met de 5 Cursor-technieken
|
|
|
|
**Vak:** AI-Assisted Development
|
|
**Opleiding:** NOVI Hogeschool Utrecht
|
|
**Deadline:** Voor de volgende les
|
|
|
|
---
|
|
|
|
## Overzicht
|
|
|
|
In de les heb je 5 Cursor-technieken geleerd en toegepast op LinkVault. Nu is het tijd om te laten zien dat je deze technieken zelfstandig kunt toepassen. Je gaat een **eigen app** bouwen van scratch -- geen LinkVault!
|
|
|
|
---
|
|
|
|
## Kies je app
|
|
|
|
Kies een van de volgende projecten (of bedenk er zelf een):
|
|
|
|
| Optie | Omschrijving |
|
|
|-------|-------------|
|
|
| **Recepten app** | Recepten opslaan met ingredienten, bereidingswijze en tags |
|
|
| **Film tracker** | Films bijhouden met rating, genre en watchlist |
|
|
| **Notitie app** | Notities met categorieen en zoekfunctie |
|
|
| **Eigen idee** | Overleg dit eerst met Tim voordat je begint! |
|
|
|
|
**Tech stack:** Next.js 16, TypeScript, Tailwind CSS (net als in de les).
|
|
|
|
---
|
|
|
|
## Checklist: Wat moet je opleveren?
|
|
|
|
Gebruik deze checklist om te controleren of je alles hebt gedaan. Elk punt is **verplicht** (tenzij anders aangegeven).
|
|
|
|
- [ ] **1. Cursor Rules** -- `.cursor/rules/` map aangemaakt met minimaal 2 rule bestanden (met YAML frontmatter!)
|
|
- [ ] **2. Plan Mode** -- Plan Mode gebruikt om je app te plannen (maak een screenshot van je plan)
|
|
- [ ] **3. Agent Mode** -- Agent Mode gebruikt om minimaal 2 features te bouwen
|
|
- [ ] **4. Debug Mode** -- Debug Mode gebruikt voor minstens 1 bug (maak een screenshot van je debug sessie)
|
|
- [ ] **5. Tests** -- Tests geschreven met de agent (minimaal 3 unit tests)
|
|
- [ ] **6. Code Review** -- "Find Issues" gedraaid en eventuele issues gefixt
|
|
- [ ] **7. Semantic Commits** -- Semantic commits gemaakt (feat:, fix:, docs:, etc.)
|
|
- [ ] **8. GitHub** -- Alles gepusht naar een GitHub repository
|
|
- [ ] **9. (Bonus)** -- Pull Request aangemaakt en door Cursor laten reviewen
|
|
|
|
---
|
|
|
|
## Wat lever je in?
|
|
|
|
1. **GitHub repository link** -- Zorg dat de repo public is (of nodig Tim uit als collaborator)
|
|
2. **Korte reflectie (200 woorden)** -- Beantwoord deze vragen:
|
|
- Welke Cursor-technieken werkten het beste voor jou?
|
|
- Waar liep je vast?
|
|
- Wat doe je de volgende keer anders?
|
|
3. **Screenshots** van:
|
|
- Je Plan Mode plan
|
|
- Een Debug Mode sessie
|
|
- Je test resultaten (terminal output)
|
|
|
|
---
|
|
|
|
## Tips
|
|
|
|
- Begin met Plan Mode! Laat Cursor eerst een plan maken voordat je gaat bouwen.
|
|
- Commit vroeg en vaak. Gebruik semantic commits vanaf het begin.
|
|
- Loop je vast? Gebruik Debug Mode -- beschrijf de fout en laat Cursor helpen.
|
|
- Houd je prompt requests in de gaten. Je hebt 500 fast requests per maand op het Student Plan.
|
|
|
|
---
|
|
|
|
## Appendix A: Keyboard Shortcuts Reference
|
|
|
|
Alle belangrijke Cursor sneltoetsen op een rij:
|
|
|
|
| Actie | Windows / Linux | macOS |
|
|
|-------|----------------|-------|
|
|
| Chat openen | `Ctrl+L` | `Cmd+L` |
|
|
| Plan Mode toggle | `Shift+Tab` | `Shift+Tab` |
|
|
| Inline Edit | `Ctrl+K` | `Cmd+K` |
|
|
| Composer | `Ctrl+I` | `Cmd+I` |
|
|
| Autocomplete accepteren | `Tab` | `Tab` |
|
|
| Terminal openen | `` Ctrl+` `` | `` Ctrl+` `` |
|
|
| Command Palette | `Ctrl+Shift+P` | `Cmd+Shift+P` |
|
|
|
|
---
|
|
|
|
## Appendix B: .cursor/rules Templates
|
|
|
|
Maak een `.cursor/rules/` map in je project root en voeg daar `.mdc` bestanden toe. Hieronder staan templates die je kunt kopieren en aanpassen voor je eigen project.
|
|
|
|
### project.mdc (algemene projectregels)
|
|
|
|
```markdown
|
|
---
|
|
description: Algemene projectregels en conventies
|
|
alwaysApply: true
|
|
---
|
|
|
|
# Project Regels
|
|
|
|
## Tech Stack
|
|
- Next.js 16 met App Router
|
|
- TypeScript (strict mode)
|
|
- Tailwind CSS voor styling
|
|
|
|
## Conventies
|
|
- Gebruik functionele componenten met TypeScript interfaces
|
|
- Bestandsnamen in kebab-case
|
|
- Componenten in PascalCase
|
|
- Gebruik `async/await` in plaats van `.then()` chains
|
|
|
|
## Mappenstructuur
|
|
- `src/app/` -- App Router pagina's en layouts
|
|
- `src/components/` -- Herbruikbare componenten
|
|
- `src/lib/` -- Utility functies en types
|
|
- `src/types/` -- TypeScript type definities
|
|
```
|
|
|
|
### components.mdc (componentregels)
|
|
|
|
```markdown
|
|
---
|
|
description: Regels voor React componenten
|
|
globs:
|
|
- "src/components/**/*.tsx"
|
|
- "src/app/**/*.tsx"
|
|
---
|
|
|
|
# Component Regels
|
|
|
|
## Structuur
|
|
- Elke component heeft een eigen map met index.tsx
|
|
- Props worden gedefinieerd als TypeScript interface boven de component
|
|
- Gebruik `"use client"` alleen wanneer nodig (interactieve componenten)
|
|
|
|
## Styling
|
|
- Gebruik Tailwind utility classes
|
|
- Geen inline styles
|
|
- Gebruik `cn()` helper voor conditionele classes
|
|
|
|
## Toegankelijkheid
|
|
- Alle images hebben een alt attribuut
|
|
- Interactieve elementen hebben aria-labels
|
|
- Gebruik semantische HTML elementen
|
|
```
|
|
|
|
### styles.mdc (styling regels)
|
|
|
|
```markdown
|
|
---
|
|
description: Regels voor styling en Tailwind gebruik
|
|
globs:
|
|
- "src/**/*.css"
|
|
- "src/**/*.tsx"
|
|
---
|
|
|
|
# Styling Regels
|
|
|
|
## Tailwind CSS
|
|
- Gebruik de standaard Tailwind kleurenpalet
|
|
- Definieer custom kleuren in `tailwind.config.ts`
|
|
- Gebruik `dark:` variant voor dark mode support
|
|
- Responsive design: mobile-first (`sm:`, `md:`, `lg:`)
|
|
|
|
## CSS Bestanden
|
|
- Gebruik `globals.css` alleen voor CSS variabelen en base styles
|
|
- Geen component-specifieke CSS bestanden -- gebruik Tailwind classes
|
|
```
|
|
|
|
---
|
|
|
|
## Appendix C: Prompt Templates
|
|
|
|
Goede prompts maken het verschil. Hieronder staan templates die je kunt gebruiken voor elke techniek.
|
|
|
|
### 1. Plan Mode prompt
|
|
|
|
```
|
|
Ik wil een [app naam] bouwen met Next.js 16, TypeScript en Tailwind CSS.
|
|
|
|
De app moet het volgende kunnen:
|
|
- [Feature 1]
|
|
- [Feature 2]
|
|
- [Feature 3]
|
|
|
|
Maak een gedetailleerd plan met:
|
|
1. Mappenstructuur
|
|
2. Benodigde componenten
|
|
3. Data model / types
|
|
4. Stappen om te bouwen (in volgorde)
|
|
|
|
Gebruik de App Router en server components waar mogelijk.
|
|
```
|
|
|
|
### 2. Agent Mode feature prompt
|
|
|
|
```
|
|
Bouw de [feature naam] feature voor mijn app.
|
|
|
|
Wat het moet doen:
|
|
- [Beschrijving van de feature]
|
|
- [Verwacht gedrag]
|
|
- [Edge cases]
|
|
|
|
Gebruik bestaande types uit src/types/ en componenten uit src/components/.
|
|
Volg de regels in .cursor/rules/.
|
|
```
|
|
|
|
### 3. Debug Mode prompt
|
|
|
|
```
|
|
Ik krijg de volgende fout:
|
|
|
|
[Plak hier de foutmelding of beschrijf het onverwachte gedrag]
|
|
|
|
Wat ik verwacht: [beschrijf het verwachte gedrag]
|
|
Wat er gebeurt: [beschrijf wat er daadwerkelijk gebeurt]
|
|
|
|
Het relevante bestand is [bestandsnaam]. Kun je de bug vinden en fixen?
|
|
```
|
|
|
|
### 4. Test writing prompt
|
|
|
|
```
|
|
Schrijf unit tests voor [component/functie naam].
|
|
|
|
Test minimaal:
|
|
- Het happy path (normaal gebruik)
|
|
- Edge cases (lege input, lange strings, etc.)
|
|
- Error handling
|
|
|
|
Gebruik de bestaande test setup in het project.
|
|
```
|
|
|
|
### 5. Semantic commits prompt
|
|
|
|
```
|
|
Maak een semantic commit message voor de huidige wijzigingen.
|
|
|
|
Gebruik dit formaat:
|
|
- feat: voor nieuwe features
|
|
- fix: voor bugfixes
|
|
- docs: voor documentatie
|
|
- style: voor opmaak (geen code wijzigingen)
|
|
- refactor: voor code refactoring
|
|
- test: voor tests
|
|
- chore: voor overige taken
|
|
|
|
Houd de message kort en beschrijvend in het Engels.
|
|
```
|
|
|
|
### 6. Code review prompt
|
|
|
|
```
|
|
Review de code in [bestandsnaam of map].
|
|
|
|
Let op:
|
|
- TypeScript best practices
|
|
- Performance issues
|
|
- Security problemen
|
|
- Toegankelijkheid
|
|
- Code duplicatie
|
|
|
|
Geef concrete suggesties voor verbeteringen.
|
|
```
|
|
|
|
---
|
|
|
|
## Appendix D: Troubleshooting
|
|
|
|
### Plan Mode verschijnt niet
|
|
|
|
| Probleem | Oplossing |
|
|
|----------|----------|
|
|
| Plan Mode optie niet zichtbaar | Zorg dat je Cursor versie up-to-date is (Help > Check for Updates) |
|
|
| Toggle doet niets | Probeer `Shift+Tab` in het chat venster, niet in de editor |
|
|
| Plan wordt niet gegenereerd | Zorg dat je prompt duidelijk genoeg is -- geef context over wat je wilt bouwen |
|
|
|
|
### Agent Mode voert niets uit
|
|
|
|
| Probleem | Oplossing |
|
|
|----------|----------|
|
|
| Agent maakt geen bestanden aan | Controleer of Agent Mode actief is (niet Ask Mode) in de chat dropdown |
|
|
| Agent stopt halverwege | Druk op "Continue" of geef een follow-up prompt |
|
|
| Agent maakt fouten | Wees specifieker in je prompt, verwijs naar bestaande bestanden |
|
|
|
|
### .cursor/rules worden niet opgepikt
|
|
|
|
| Probleem | Oplossing |
|
|
|----------|----------|
|
|
| Rules hebben geen effect | Controleer dat de map `.cursor/rules/` heet (niet `.cursor/rule/`) |
|
|
| YAML frontmatter fout | Controleer de `---` blokken bovenaan elk `.mdc` bestand |
|
|
| Globs matchen niet | Check je glob patronen -- `src/**/*.tsx` matcht alles onder src/ |
|
|
| Bestanden staan verkeerd | De `.cursor/` map moet in je project root staan |
|
|
|
|
### Tests draaien niet
|
|
|
|
| Probleem | Oplossing |
|
|
|----------|----------|
|
|
| `npm test` geeft fout | Controleer of Vitest of Jest is geinstalleerd: `npm install -D vitest` |
|
|
| Tests worden niet gevonden | Bestandsnaam moet eindigen op `.test.ts` of `.test.tsx` |
|
|
| Import errors in tests | Controleer je `tsconfig.json` paths en test configuratie |
|
|
| Module not found | Voer `npm install` uit om dependencies te installeren |
|
|
|
|
### Git / GitHub problemen
|
|
|
|
| Probleem | Oplossing |
|
|
|----------|----------|
|
|
| `git push` geeft permission denied | Controleer of je SSH key of personal access token is ingesteld |
|
|
| Repo niet gevonden op GitHub | Maak eerst een repo aan op github.com en volg de instructies |
|
|
| Merge conflicts | Gebruik `git status` om conflicten te zien, los ze op in Cursor |
|
|
| Vergeten te committen | `git add .` en daarna `git commit -m "feat: beschrijving"` |
|
|
|
|
---
|
|
|
|
Veel succes en plezier met bouwen! Kom je er niet uit, stel je vraag in het les-kanaal.
|