novi-lessons/Les13-Cursor-Vercel-Deploy/Les13-Huiswerk.md

Les 13 — Huiswerk

Background Agent + CI + branch protection + DEPLOY.md

Vak: AI-Assisted Development Opleiding: NOVI Hogeschool Utrecht Deadline: Voor Les 14 — MCP servers Inleveren: GitHub repo URL + Vercel productie URL + DEPLOY.md

---

Doel

Bouwt voort op de lesopdracht (Pokédex op Vercel productie). In dit huiswerk:

• Voeg een feature toe via Cursor Background Agent → preview URL
• Voeg GitHub Actions CI toe (lint + build)
• Activeer branch protection op main
• Schrijf DEPLOY.md met reflectie

Niet klaar met de lesopdracht? Eerst die afmaken — het huiswerk heeft die als startpunt.

---

Onderdeel A — Feature met Background Agent (verplicht)

Voeg een feature toe via Cursor Background Agent, niet via Composer.

Stappen

1. Open Background Agent in Cursor:

   • Cmd+Shift+P → "Open Background Agent"
   • Eerste keer: verbind je GitHub repo aan Cursor cloud (volg flow)

2. Schrijf een specifieke prompt. Vage prompts → matige output. Voorbeeld:

   Maak een nieuwe branch feature/search. Voeg een controlled input toe bovenaan app/page.tsx. Filter de Pokémon-lijst case-insensitive op naam terwijl gebruiker typt. Houd Tailwind-styling consistent met bestaande cards. Push de branch en open een PR met titel "Add search bar". Voeg in de PR body een korte beschrijving van wat je gedaan hebt.

3. Wacht (~3-5 min). Volg in Cursor panel wat agent doet.

4. Open PR op GitHub. Vercel zet een comment met preview URL. Klik die — feature werkt live.

5. Review:

   • Code-diff op GitHub
   • Live test op preview URL
   • Eventueel: comment achterlaten of nieuwe prompt aan agent

6. Merge PR (of laat open tot je CI hebt — zie B).

Feature-ideeën (kies één — of bedenk eigen)

• Search bar — filter Pokémon op naam
• Type filter — chips per type (fire, water, ...) om te filteren
• Sort — op nummer of naam (asc/desc)
• Favorites — localStorage-based, ster-icoon per card
• Pagination — 20 per pagina i.p.v. 151 in één keer
• Eigen externe API — voeg bv. weather widget toe (Open-Meteo, geen key)

Eisen

• Feature gebouwd via Background Agent (niet Composer)
• Branch feature/... op GitHub bestaat
• PR open of gemerged
• Vercel preview URL werkt
• In DEPLOY.md: prompt + agent-resultaat reflectie

---

Onderdeel B — GitHub Actions CI (verplicht)

Voeg een CI workflow toe die lint + build draait op elke PR.

Stappen

1. Via Composer (of handmatig) maak .github/workflows/ci.yml:

   name: CI
   on:
     pull_request:
       branches: [main]
     push:
       branches: [main]
   
   jobs:
     check:
       runs-on: ubuntu-latest
       steps:
         - uses: actions/checkout@v4
         - uses: pnpm/action-setup@v3
           with:
             version: 9
         - uses: actions/setup-node@v4
           with:
             node-version: 20
             cache: pnpm
         - run: pnpm install --frozen-lockfile
         - run: pnpm lint
         - run: pnpm build
   

2. Push naar een nieuwe branch chore/add-ci:

   git checkout -b chore/add-ci
   git add .github/workflows/ci.yml
   git commit -m "Add CI workflow"
   git push -u origin chore/add-ci
   

3. Open PR op GitHub → tab "Actions" → workflow draait → groene check

4. Merge naar main

Test je CI

• Maak een typo in code (bv. <dvi> in plaats van <div>)
• Push naar nieuwe branch + open PR
• CI faalt → rode X
• Fix met Composer of Background Agent → push → groene check

Eisen

• .github/workflows/ci.yml in repo
• CI draait succesvol op merge naar main
• Minstens 1 voorbeeld van rode CI (screenshot of beschrijving in DEPLOY.md)

---

Onderdeel C — Branch protection (verplicht)

Bescherm main zodat niemand direct kan pushen.

Stappen

1. GitHub repo → Settings → Branches → Add rule
2. Branch name pattern: main
3. Check: Require a pull request before merging
4. Check: Require status checks to pass before merging → select check (van CI workflow)
5. Check: Do not allow bypassing the above settings (optioneel maar aanbevolen)
6. Save changes

Test

git checkout main
echo "test" >> README.md
git add . && git commit -m "direct push"
git push

Verwacht: ! [remote rejected] main -> main (protected branch hook declined).

Goed — protection werkt.

Eisen

• Branch protection actief op main
• PR's vereisen groene CI voor merge
• Direct pushes naar main worden geweigerd

---

Onderdeel D — DEPLOY.md (verplicht)

Schrijf in repo-root.

Sectie 1 — URLs

- Productie: https://pokedex-XXX.vercel.app
- Preview (feature/search): https://pokedex-git-feature-search-XXX.vercel.app
- GitHub repo: https://github.com/USER/pokedex

Sectie 2 — Background Agent prompt

Plak je exacte prompt + wat de agent uiteindelijk leverde:

**Prompt:**
"Maak een nieuwe branch ..."

**Resultaat:**
- Branch: feature/search
- PR #4 — Add search bar
- Files changed: app/page.tsx, app/components/SearchBar.tsx
- Build time: 2m 14s

Sectie 3 — Composer vs Background reflectie

Maximaal 200 woorden over:

• Wanneer werkte Composer beter voor jou?
• Wanneer Background Agent?
• Eén voorbeeld waar de agent verbluffend goed was
• Eén voorbeeld waar het matig was (en wat je deed)

Sectie 4 — CI workflow

• Link naar .github/workflows/ci.yml
• 1 screenshot van een groene CI run
• 1 screenshot of beschrijving van een rode CI run + hoe je het fixte

Sectie 5 — Eén observatie

Iets wat je opviel deze week:

• Preview deployments — wat was makkelijker dan verwacht?
• Branch protection — hoe veranderde je workflow?
• Vercel logs / Cursor Background panel?
• Iets anders?

Vorm

• Max 600 woorden totaal
• Concrete links, screenshots, prompts
• Mag wat informeel

---

Bonus (optioneel)

Bonus 1 — Eigen externe API

Integreer een 2e externe API in je Pokédex (of als losse pagina):

• Open-Meteo (weer, geen key) — bv. "Pikachu's geboorteplaats Pallet Town weer"
• GitHub API — embed repo-stats van je eigen pokedex-repo
• Quote API — random quote bovenaan elke detail-pagina

Bonus 2 — Environment scoping

• Voeg een NEXT_PUBLIC_APP_NAME env-var toe
• Production scope: "Pokédex"
• Preview scope: "Pokédex (Preview)"
• Development scope (.env.local): "Pokédex (Dev)"
• Toon de naam in header → zie verschil per environment

Bonus 3 — Twee parallelle Background Agents

Start 2 features tegelijk:

• feature/sort — sorteer op naam of nummer
• feature/types — type-filter chips

Documenteer in DEPLOY.md of parallel werken meerwaarde gaf, of dat het lastig was.

Bonus 4 — Custom domain

Voeg een custom domain toe via Vercel (gratis subdomeinen via vercel.app blijven werken). Niet verplicht — leuk om eens gedaan te hebben.

---

Inleveren

1. GitHub repo URL in Brightspace
2. Vercel productie URL in Brightspace
3. DEPLOY.md in repo-root
4. Updated .github/workflows/ci.yml in repo
5. Minstens 1 merged PR van een Background Agent

---

Beoordeling

Criterium	Punten
A — Background Agent feature werkt + preview URL	3
B — GitHub Actions CI werkt + bewijs van rode + groene run	2
C — Branch protection actief op main	1
D — DEPLOY.md compleet met 5 secties	3
Productie URL werkt	1
Totaal	10

Voldoende = 6+. Bonus telt mee bij twijfelgevallen.

---

Tijd-indicatie

Onderdeel	Tijd
A — Background Agent feature	40 min
B — GitHub Actions CI	25 min
C — Branch protection	5 min
D — DEPLOY.md schrijven	30 min
Totaal	~1,5-2 uur

---

Veelvoorkomende valkuilen

Probleem	Oplossing
Background Agent niet beschikbaar	Cursor Pro nodig — gebruik trial of vraag credits
Agent maakt branch niet	Prompt explicieter: "Push branch en open PR"
Vercel preview URL leeg / 404	Preview-deploy nog aan het builden — wacht 1-2 min
CI faalt op pnpm install	frozen-lockfile flag aan — commit je pnpm-lock.yaml
Branch protection blokkeert merge	CI moet eerst groen zijn — wacht of fix lint-errors
Background Agent kost te veel credits	Maak prompts korter, beperk scope per agent

---

Tips

• Specifieke prompts voor Background Agent — vague = matig
• Lees PR description die agent schrijft — staat vaak goede uitleg in
• Vercel logs zijn je vriend — bouwfout? Logs lezen meestal de oplossing
• Houd DEPLOY.md bij tijdens werken — screenshots maak je dan in flow, niet aan eind
• CI failure ≠ slechte agent — CI vangt typo's, agent loopt soms net naast

Volgende les: MCP — Model Context Protocol. Een vector-DB met PostgreSQL pgvector. We gaan een tool bouwen die semantic search doet — handig om in een agent te gebruiken. Tot dan!