81 lines
2.3 KiB
Markdown
81 lines
2.3 KiB
Markdown
# Les 13: Externe APIs + Cursor agents + Vercel deploy
|
|
|
|
> ✅ **Deze les is volledig uitgewerkt**
|
|
|
|
## Lesmateriaal
|
|
|
|
- [Slide Overzicht](../Les13-Cursor-Vercel-Deploy/Les13-Slide-Overzicht.md)
|
|
- [Docenttekst](../Les13-Cursor-Vercel-Deploy/Les13-Docenttekst.md)
|
|
- [Lesstof](../Les13-Cursor-Vercel-Deploy/Les13-Lesstof.md)
|
|
- [Lesopdracht](../Les13-Cursor-Vercel-Deploy/Les13-Lesopdracht.md)
|
|
- [Huiswerk](../Les13-Cursor-Vercel-Deploy/Les13-Huiswerk.md)
|
|
|
|
---
|
|
|
|
## Deel
|
|
**Deel 3 — AI Development** (Les 11-16)
|
|
|
|
## Beschrijving
|
|
We verlaten `localhost:3000`. We bouwen een kleine Pokédex die de PokéAPI gebruikt (geen LLM nodig), zetten Cursor's Composer + Background Agent in voor feature branches, en deployen naar Vercel met preview deployments + GitHub Actions CI.
|
|
|
|
---
|
|
|
|
## Te Behandelen
|
|
|
|
### Theorie
|
|
- Externe APIs in Next.js (server-side fetch, caching)
|
|
- Cursor Composer vs. Background Agent — wanneer welke?
|
|
- Vercel preview deployments per branch
|
|
- GitHub Actions CI (lint + build per PR)
|
|
- Environment variables: lokaal vs. Vercel
|
|
|
|
### Live demo's
|
|
1. Nieuwe Pokédex-app — PokéAPI integreren
|
|
2. Feature branch via Cursor Composer
|
|
3. Background Agent: PR + diff review
|
|
4. Vercel deploy + preview URL per PR
|
|
5. GH Actions workflow voor lint + typecheck
|
|
|
|
---
|
|
|
|
## Tools
|
|
- Next.js 16
|
|
- Cursor (Composer + Background Agent)
|
|
- Vercel (productie + previews)
|
|
- GitHub Actions
|
|
- PokéAPI (geen key nodig)
|
|
|
|
---
|
|
|
|
## Lesopdracht (in-class, 60 min)
|
|
|
|
Studenten kijken mee. In-class oefening:
|
|
- Clone de Pokédex-starter
|
|
- Maak een feature branch via Cursor Composer ("voeg type-filter toe")
|
|
- Push naar GitHub en bekijk je Vercel preview URL
|
|
- Merge de PR — zie GH Actions runnen
|
|
|
|
**Inleveren:** Screenshot van werkende preview URL.
|
|
|
|
---
|
|
|
|
## Huiswerk (take-home)
|
|
|
|
Neem je AI SDK-project uit Les 11/12:
|
|
- Deploy naar Vercel
|
|
- Voeg minimaal 1 externe API toe (geen LLM)
|
|
- Configureer GH Actions CI (lint + build)
|
|
- README beschrijft hoe lokaal + hoe productie
|
|
|
|
**Inleveren:** GitHub + Vercel URL via Teams.
|
|
|
|
---
|
|
|
|
## Leerdoelen
|
|
Na deze les kan de student:
|
|
- Externe APIs aanroepen vanuit een Next.js server route
|
|
- Het verschil uitleggen tussen Cursor Composer en Background Agent
|
|
- Een feature branch + preview deployment opzetten
|
|
- GitHub Actions CI configureren voor een Next.js project
|
|
- Environment variables veilig beheren tussen lokaal en Vercel
|