187 lines
4.7 KiB
Markdown
187 lines
4.7 KiB
Markdown
# Les 13 — Lesopdracht
|
|
## Pokédex opzetten + eerste deploy naar Vercel
|
|
|
|
**Vak:** AI-Assisted Development
|
|
**Opleiding:** NOVI Hogeschool Utrecht
|
|
**Duur:** 30 min in-class
|
|
**Status:** Tijdens de les afronden — daarna huiswerk uitbreiden
|
|
|
|
---
|
|
|
|
## Doel
|
|
|
|
Aan het einde van deze opdracht heb je een **werkende Pokédex** op `pokedex-{jouwnaam}.vercel.app`, gebouwd met Cursor Composer, gepushed naar GitHub, en automatisch gedeployed via Vercel.
|
|
|
|
---
|
|
|
|
## Vereisten
|
|
|
|
- Node 20+, pnpm, git
|
|
- **Cursor** geïnstalleerd (cursor.com) — Pro account is fijn maar niet verplicht voor lesopdracht
|
|
- **GitHub** account
|
|
- **Vercel** account (signup met GitHub kan)
|
|
|
|
---
|
|
|
|
## Stap 1 — Nieuwe Next.js app
|
|
|
|
```bash
|
|
pnpm create next-app@latest pokedex \
|
|
--typescript --tailwind --app --no-src-dir --import-alias "@/*"
|
|
cd pokedex
|
|
```
|
|
|
|
Open in Cursor:
|
|
|
|
```bash
|
|
cursor .
|
|
```
|
|
|
|
---
|
|
|
|
## Stap 2 — Eerste feature met Composer
|
|
|
|
Open Composer: `Cmd+I` (Mac) of `Ctrl+I` (Win/Linux).
|
|
|
|
**Prompt:**
|
|
|
|
> Bouw een Pokédex-startpagina op `app/page.tsx`. Haal de eerste 151 Pokémon van PokéAPI (`https://pokeapi.co/api/v2/pokemon?limit=151`) als Server Component. Toon ze in een grid van cards (Tailwind, ~4 per rij op desktop). Elke card heeft: naam (capitalized), pokeapi sprite (`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/{id}.png`), en pokemon nummer. Make sure cards have hover effect. Gebruik `next/image` voor de sprites.
|
|
|
|
Accepteer de diffs. Run lokaal:
|
|
|
|
```bash
|
|
pnpm dev
|
|
```
|
|
|
|
Open http://localhost:3000 — Pokémon-grid zichtbaar.
|
|
|
|
> **Tip:** als sprites niet laden, voeg PokéAPI's domain toe aan `next.config.ts` (Composer kan dit voor je doen — vraag het hem).
|
|
|
|
---
|
|
|
|
## Stap 3 — Detail-pagina (optioneel als tijd)
|
|
|
|
**Composer prompt:**
|
|
|
|
> Voeg detail-pagina toe op `app/pokemon/[name]/page.tsx`. Toon: grote sprite, naam, types als chips (met type-kleur), stats (HP, attack, defense, etc) als progress bars, en height + weight. Link de cards op de homepage naar `/pokemon/{name}`.
|
|
|
|
Test in browser.
|
|
|
|
---
|
|
|
|
## Stap 4 — GitHub repo
|
|
|
|
Maak een nieuwe repo op GitHub:
|
|
- Naam: `pokedex`
|
|
- Public
|
|
- Geen README/license (we hebben al bestanden)
|
|
|
|
Lokaal:
|
|
|
|
```bash
|
|
git init
|
|
git add .
|
|
git commit -m "Initial Pokédex with Cursor Composer"
|
|
git branch -M main
|
|
git remote add origin https://github.com/JOUW-USER/pokedex.git
|
|
git push -u origin main
|
|
```
|
|
|
|
Check op GitHub: code is daar.
|
|
|
|
---
|
|
|
|
## Stap 5 — Vercel verbinden
|
|
|
|
1. Ga naar https://vercel.com — login met GitHub
|
|
2. **Add New → Project**
|
|
3. Kies je `pokedex` repo
|
|
4. Vercel detecteert Next.js — laat alle defaults staan
|
|
5. Klik **Deploy**
|
|
|
|
Wacht ~60-90 seconden. Vercel toont:
|
|
|
|
```
|
|
🎉 Your project has been deployed
|
|
https://pokedex-{jouwnaam}.vercel.app
|
|
```
|
|
|
|
Klik de URL. Werkt? Klaar.
|
|
|
|
---
|
|
|
|
## Stap 6 — Test een tweede deploy
|
|
|
|
Wijzig de titel van de homepage (kun je via Composer):
|
|
|
|
> Verander de h1 van "Pokédex" naar "Mijn Pokédex".
|
|
|
|
Push:
|
|
|
|
```bash
|
|
git add .
|
|
git commit -m "Custom title"
|
|
git push
|
|
```
|
|
|
|
Check Vercel dashboard — nieuwe deploy verschijnt direct. ~30s later: live.
|
|
|
|
---
|
|
|
|
## Eisen
|
|
|
|
- [ ] Repo `pokedex` op GitHub, public
|
|
- [ ] Minimaal 1 feature toegevoegd met Composer
|
|
- [ ] App werkt lokaal (`pnpm dev`)
|
|
- [ ] Vercel productie URL werkt
|
|
- [ ] Tweede push triggert automatische deploy
|
|
- [ ] Geen errors in Vercel build logs
|
|
|
|
---
|
|
|
|
## Tijdsindeling (30 min)
|
|
|
|
| Stap | Tijd |
|
|
|------|------|
|
|
| 1 — Next.js setup | 3 min |
|
|
| 2 — Composer eerste feature | 10 min |
|
|
| 3 — Detail-pagina (optioneel) | 5 min |
|
|
| 4 — GitHub repo + push | 5 min |
|
|
| 5 — Vercel deploy | 5 min |
|
|
| 6 — Tweede deploy test | 2 min |
|
|
|
|
---
|
|
|
|
## Veelvoorkomende problemen
|
|
|
|
| Symptoom | Oplossing |
|
|
|----------|-----------|
|
|
| `next/image` klaagt over PokéAPI domein | Voeg `images.remotePatterns` toe in `next.config.ts` (vraag Composer) |
|
|
| `pnpm: command not found` | Installeer: `npm install -g pnpm` |
|
|
| Vercel build error: TS-error | Composer: "fix de TypeScript build error" |
|
|
| Cursor Composer niet zichtbaar | Cmd+I — als niets gebeurt, herstart Cursor |
|
|
| Push naar GitHub: permission denied | Setup SSH key of gebruik HTTPS met PAT |
|
|
| Vercel deploy mislukt | Check build logs in dashboard — meestal env-var of dep-issue |
|
|
|
|
---
|
|
|
|
## Klaar? Verder met huiswerk
|
|
|
|
Het huiswerk bouwt voort op deze setup:
|
|
|
|
- Feature branch met **Background Agent**
|
|
- GitHub Actions CI workflow
|
|
- Branch protection op `main`
|
|
- `DEPLOY.md` met reflectie over Composer vs Background
|
|
|
|
Zie `Les13-Huiswerk.md` of `Les13-Huiswerk.pdf`.
|
|
|
|
---
|
|
|
|
## Tips
|
|
|
|
- **Lees Vercel build logs** als iets faalt — meestal staat de oplossing er letterlijk in
|
|
- **Push klein en vaak** — kleinere commits = makkelijker rollback
|
|
- **Composer is voor pair programming** — accepteer per file, niet blind alles
|
|
- **Sla `pokedex` url op** — die heb je nog nodig voor huiswerk
|