179 lines
5.6 KiB
Markdown
179 lines
5.6 KiB
Markdown
# Les 3 — Lesopdracht
|
|
## Bouw je eerste Cursor-componenten
|
|
|
|
**Vak:** AI-Assisted Development
|
|
**Opleiding:** NOVI Hogeschool Utrecht
|
|
**Werkvorm:** in-class, na de pauze (±75 minuten)
|
|
**Status:** klaar = drie components live op `localhost:3000` + eerste git commit
|
|
|
|
---
|
|
|
|
## Doel
|
|
|
|
Je gebruikt vandaag voor het eerst Cursor's drie hoofdsneltoetsen — Tab, Cmd+K en Cmd+L — om een werkende Next.js homepage te bouwen. Aan het eind heb je een Hero, een styling-tweak en één extra feature in je code, plus een eerste git commit.
|
|
|
|
---
|
|
|
|
## Wat je nodig hebt (klaar uit de demo)
|
|
|
|
- Cursor geïnstalleerd + Pro Student actief
|
|
- Skills/Docs voor Next.js, React, Tailwind toegevoegd
|
|
- Vers Next.js-project: `mijn-eerste-cursor-app`
|
|
- `npm run dev` draait op `localhost:3000`
|
|
|
|
---
|
|
|
|
## Stappenplan
|
|
|
|
### Stap 1 — `.cursorrules` genereren
|
|
|
|
Open Cursor in je project. Druk **Cmd+L** voor de chat. Plak deze prompt:
|
|
|
|
```
|
|
Maak een .cursorrules voor dit Next.js 16 project. Focus op:
|
|
- TypeScript strict mode
|
|
- Tailwind CSS voor styling, geen CSS modules
|
|
- Server components by default; "use client" alleen waar nodig
|
|
- @/ import alias
|
|
- Functional components
|
|
|
|
Geef alleen het bestand terug, geen extra uitleg.
|
|
```
|
|
|
|
Cursor geeft een bestand. Kopieer de inhoud naar een nieuw bestand `.cursorrules` in de root van je project. Save.
|
|
|
|
### Stap 2 — Taak 1: Hero-component (via Cmd+L)
|
|
|
|
Open `src/app/page.tsx`. Druk **Cmd+L** voor de chat (nieuwe chat). Plak deze prompt:
|
|
|
|
```
|
|
@file:src/app/page.tsx
|
|
|
|
Vervang de huidige inhoud met een Hero-component. Specs:
|
|
- Gradient achtergrond (subtiele blauwe verloop)
|
|
- Grote titel: "Mijn Eerste Cursor App"
|
|
- Ondertitel: "Gebouwd in les 3 met Cursor"
|
|
- Twee CTA-knoppen: "Aan de slag" (primair) en "Meer info" (secundair)
|
|
- Responsive: stack op mobiel, naast elkaar op desktop
|
|
- Tailwind only, geen custom CSS
|
|
- Inline in app/page.tsx houden (geen aparte component file)
|
|
```
|
|
|
|
Cursor toont een diff. Bekijk de code, klik **Accept all**. Save. Open `http://localhost:3000` in je browser.
|
|
|
|
✅ **Check:** je ziet je Hero. Responsive: maak browser smaller, knoppen moeten onder elkaar staan.
|
|
|
|
### Stap 3 — Taak 2: Styling-tweak (via Cmd+K)
|
|
|
|
Selecteer in `src/app/page.tsx` de twee knoppen (de hele button- of link-blokken). Druk **Cmd+K**. Plak deze prompt in het balkje:
|
|
|
|
```
|
|
Verander de primaire knop naar een paars gradient (purple-600 naar pink-600). Maak de secundaire knop transparant met een paarse border en paarse tekst. Voeg een hover-effect toe aan beide.
|
|
```
|
|
|
|
Cursor toont een inline diff. Druk **Tab** om te accepteren. Save. Refresh browser.
|
|
|
|
✅ **Check:** knoppen zijn paars, hover werkt.
|
|
|
|
### Stap 4 — Taak 3: Extra feature (vrije keuze)
|
|
|
|
Kies één van de drie. Gebruik Cmd+L of Cmd+K naar wat het beste past.
|
|
|
|
**Optie A — FeatureCards (3 cards onder de Hero)**
|
|
|
|
```
|
|
Voeg onder de Hero in @file:src/app/page.tsx een sectie toe met 3 feature-cards.
|
|
Per card: een emoji-icoon, een titel, een korte beschrijving.
|
|
Drie features: "Snel", "AI-powered", "Open Source".
|
|
Grid layout: 1 kolom mobiel, 3 kolommen desktop.
|
|
Tailwind styling, matched de Hero.
|
|
```
|
|
|
|
**Optie B — ContactForm (form onderaan)**
|
|
|
|
```
|
|
Voeg onder de Hero in @file:src/app/page.tsx een contact-form toe.
|
|
Velden: naam, e-mail, bericht (textarea).
|
|
Een submit-knop in dezelfde paarse stijl als de Hero CTAs.
|
|
Form moet er goed uitzien — max-width, padding, ronde hoeken.
|
|
"use client" gebruiken, met useState voor de velden (nog geen echte submit-logica).
|
|
```
|
|
|
|
**Optie C — Footer (footer met links + copyright)**
|
|
|
|
```
|
|
Voeg een Footer toe onder de hele page-inhoud in @file:src/app/page.tsx.
|
|
Drie kolommen: "Product" (3 links), "Resources" (3 links), "Contact" (e-mail + locatie).
|
|
Copyright-regel onderaan: "© 2026 Mijn Eerste Cursor App".
|
|
Matched de Hero-stijl, donkere achtergrond voor contrast.
|
|
```
|
|
|
|
Cursor toont diff → Accept → save → refresh.
|
|
|
|
✅ **Check:** je extra feature staat in de pagina, matched de Hero-stijl.
|
|
|
|
### Stap 5 — Git commit
|
|
|
|
Open een terminal in Cursor (Ctrl+ ` of Terminal → New Terminal).
|
|
|
|
```bash
|
|
git init
|
|
git add .
|
|
git commit -m "first cursor build: hero + tweaks + extra feature"
|
|
```
|
|
|
|
Optioneel: push naar GitHub.
|
|
|
|
```bash
|
|
gh repo create mijn-eerste-cursor-app --public --source=. --push
|
|
```
|
|
|
|
(Vereist `gh auth login`.)
|
|
|
|
---
|
|
|
|
## Op te leveren
|
|
|
|
In de chat (Teams):
|
|
|
|
1. Screenshot van je `localhost:3000` met Hero + extra feature zichtbaar
|
|
2. Korte tekst: welke optie (A/B/C) heb je gekozen voor taak 3?
|
|
3. Optioneel: GitHub-URL als je hebt gepushed
|
|
|
|
---
|
|
|
|
## Bonus — als je tijd over hebt
|
|
|
|
- Vraag Cursor om een dark/light mode toggle toe te voegen
|
|
- Probeer `@docs:Tailwind` om een geavanceerde animatie te toevoegen
|
|
- Voeg een tweede pagina toe (`src/app/about/page.tsx`) en link ernaar vanuit de Hero
|
|
- Genereer favicon + metadata via Cursor
|
|
|
|
---
|
|
|
|
## Vastgelopen?
|
|
|
|
| Probleem | Snelle fix |
|
|
|----------|-----------|
|
|
| Cursor reageert niet bij Cmd+L | Settings → Account: nog Pro Student? Anders opnieuw activeren |
|
|
| Tab-completion komt niet | Settings → Features → Cursor Tab → check enabled |
|
|
| Tailwind classes worden niet toegepast | Check `globals.css` op `@tailwind base/components/utilities` |
|
|
| Diff is verkeerd | Esc om te rejecten, herformuleer prompt specifieker |
|
|
| `@file` werkt niet | Wacht 5 sec na file aanmaken (Cursor moet indexeren) |
|
|
| Geen requests meer | Wacht op nieuwe maand, of plug je eigen OpenAI/Claude key in via Settings |
|
|
|
|
Tim loopt rond — vragen gewoon stellen.
|
|
|
|
---
|
|
|
|
## Reflectie (na afloop)
|
|
|
|
Denk na voor jezelf:
|
|
- Hoeveel requests heb je gebruikt? (Settings → Account toont saldo)
|
|
- Welke sneltoets voelde het meest natuurlijk?
|
|
- Wanneer zou je liever zelf typen dan Cursor laten genereren?
|
|
|
|
Dat zijn de gewoontes die je deze opleiding gaat ontwikkelen.
|
|
|
|
Veel succes!
|