fix: better order
This commit is contained in:
Tim Rijkse
@@ -1,198 +1,187 @@
|
||||
# Les 17: Advanced Deployment & Production (Vercel)
|
||||
|
||||
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
||||
>
|
||||
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
|
||||
> - Les17-Slide-Overzicht.md
|
||||
> - Les17-Lesplan.md
|
||||
> - Les17-Bijlage-A-Lesopdracht.md
|
||||
> - Les17-Bijlage-B-Huiswerkopdracht.md
|
||||
# Les 17: Eindopdracht Kickoff
|
||||
|
||||
---
|
||||
|
||||
## Hoofdstuk
|
||||
**Hoofdstuk 3: Advanced** (Les 8-18)
|
||||
**Hoofdstuk 3: Advanced** (Les 10-18)
|
||||
|
||||
## Beschrijving
|
||||
Production-ready deployment.
|
||||
Bespreking van de eindopdracht requirements, planning maken, en laatste vragen beantwoorden voordat studenten zelfstandig verder werken.
|
||||
|
||||
---
|
||||
|
||||
## Te Behandelen
|
||||
|
||||
### Vercel Deployment Deep Dive
|
||||
### Eindopdracht Overview
|
||||
|
||||
**Hoe werkt Vercel:**
|
||||
- Edge network
|
||||
- Serverless
|
||||
- Automatic builds
|
||||
**Wat is de eindopdracht?**
|
||||
- Bouw een AI-powered web applicatie
|
||||
- Gebruik alle tools die je hebt geleerd
|
||||
- Vrije keuze in implementatie
|
||||
|
||||
**Git Integratie:**
|
||||
- Push main → deploy
|
||||
- Branches → preview URLs
|
||||
- Preview deployments
|
||||
- Instant rollbacks
|
||||
- Environments
|
||||
**Drie voorbeeldprojecten:**
|
||||
1. **AI Recipe Generator** - Recepten op basis van ingrediënten
|
||||
2. **Smart Budget Buddy** - Financieel overzicht met AI insights
|
||||
3. **Travel Planner AI** - Reisplanning met AI suggesties
|
||||
|
||||
### Environment Variables
|
||||
- Verschillende vars per environment
|
||||
- Secrets handlen
|
||||
- Accessing (process.env, NEXT_PUBLIC_)
|
||||
- Best practices
|
||||
**Of:** Eigen idee (met goedkeuring docent)
|
||||
|
||||
### Custom Domains
|
||||
- Domein toevoegen
|
||||
- DNS config
|
||||
- HTTPS automatic
|
||||
- Multiple domains
|
||||
---
|
||||
|
||||
### Performance Optimization
|
||||
### Requirements Doorlopen
|
||||
|
||||
| Categorie | Technieken |
|
||||
|-----------|------------|
|
||||
| Images | Next.js Image, lazy loading, responsive, WebP/AVIF |
|
||||
| Fonts | next/font, font-display, reducing files |
|
||||
| Code | Dynamic imports, lazy loading, route-based splitting |
|
||||
| General | Bundle analyse, caching strategies, connection pooling |
|
||||
**Technische vereisten:**
|
||||
- Next.js 14 met App Router
|
||||
- TypeScript
|
||||
- Tailwind CSS
|
||||
- Supabase (database + auth)
|
||||
- Vercel AI SDK (chat of completion feature)
|
||||
- Deployed op Vercel
|
||||
|
||||
### Vercel Analytics
|
||||
**Documentatie vereisten:**
|
||||
- `docs/PROJECT-BRIEF.md` - Project beschrijving
|
||||
- `docs/PROMPT-LOG.md` - Minimaal 10 prompts
|
||||
- `docs/AI-DECISIONS.md` - Minimaal 5 beslissingen
|
||||
- Complete README met setup instructies
|
||||
|
||||
**Web Vitals:**
|
||||
- CLS (Cumulative Layout Shift)
|
||||
- FID (First Input Delay)
|
||||
- LCP (Largest Contentful Paint)
|
||||
- FCP (First Contentful Paint)
|
||||
- TTFB (Time to First Byte)
|
||||
---
|
||||
|
||||
**Features:**
|
||||
- Real user monitoring
|
||||
- Speed insights
|
||||
- Audience insights
|
||||
### Beoordelingscriteria
|
||||
|
||||
### Error Tracking
|
||||
- Edge Function logs
|
||||
- Error boundaries
|
||||
- Logging services (Sentry, LogRocket)
|
||||
| Criterium | Weging |
|
||||
|-----------|--------|
|
||||
| Technische uitvoering | 40% |
|
||||
| AI integratie | 25% |
|
||||
| Documentatie (PROMPT-LOG, AI-DECISIONS) | 20% |
|
||||
| Code kwaliteit & organisatie | 15% |
|
||||
|
||||
### CI/CD
|
||||
- GitHub Actions
|
||||
- Automated testing
|
||||
- Type checking
|
||||
- Linting
|
||||
- E2E on previews
|
||||
**Minimale vereisten:**
|
||||
- App werkt in productie
|
||||
- Auth + CRUD werkt
|
||||
- AI feature werkt
|
||||
- Documentatie compleet
|
||||
|
||||
### Supabase Production
|
||||
- Connection pooling
|
||||
- Backups
|
||||
- Monitoring
|
||||
- Rate limiting
|
||||
---
|
||||
|
||||
### Security Checklist
|
||||
- Env vars secure
|
||||
- No secrets exposed
|
||||
- HTTPS
|
||||
- CSP headers
|
||||
- Rate limiting
|
||||
- Validation
|
||||
- Dependency updates
|
||||
### Timeline
|
||||
|
||||
**Nu tot deadline:**
|
||||
- Les 17: Kickoff, planning maken
|
||||
- Les 18: Werksessie met docent support
|
||||
- Daarna: Zelfstandig afronden
|
||||
|
||||
**Tips:**
|
||||
- Focus eerst op werkende MVP
|
||||
- Dan pas polish
|
||||
- Documenteer TIJDENS het bouwen
|
||||
|
||||
---
|
||||
|
||||
### Veel Voorkomende Vragen
|
||||
|
||||
**Q: Mag ik een ander project doen dan de voorbeelden?**
|
||||
A: Ja, met goedkeuring. Bespreek je idee met de docent.
|
||||
|
||||
**Q: Moet ik alle AI tools gebruiken?**
|
||||
A: Je moet minimaal Cursor en Vercel AI SDK gebruiken. De rest is optioneel.
|
||||
|
||||
**Q: Wat als ik vastloop?**
|
||||
A: Documenteer het probleem in PROMPT-LOG, vraag hulp in Les 18.
|
||||
|
||||
**Q: Hoeveel prompts moet ik loggen?**
|
||||
A: Minimaal 10, maar meer is beter. Focus op prompts waarvan je iets leerde.
|
||||
|
||||
---
|
||||
|
||||
### Planning Maken
|
||||
|
||||
**Wat moet je nog doen?**
|
||||
|
||||
Maak checklist:
|
||||
- [ ] Core features compleet
|
||||
- [ ] AI feature werkt
|
||||
- [ ] Auth werkt
|
||||
- [ ] Design afgewerkt
|
||||
- [ ] Edge cases gehandled
|
||||
- [ ] Documentatie compleet
|
||||
- [ ] Deployed en getest
|
||||
|
||||
**Prioriteer:**
|
||||
1. Wat werkt nog niet?
|
||||
2. Wat is kritiek vs nice-to-have?
|
||||
3. Hoeveel tijd heb je?
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
- Vercel
|
||||
- GitHub Actions
|
||||
- Sentry/LogRocket
|
||||
- Lighthouse
|
||||
- Cursor
|
||||
- Alle geleerde tools
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (2 uur)
|
||||
|
||||
### Production-Ready Deployment van Beste Project
|
||||
### Plan Je Afronding
|
||||
|
||||
**(Todo app aanbevolen)**
|
||||
**Deel 1: Status Check (30 min)**
|
||||
|
||||
### Phase 1: Pre-Deployment Checklist (30 min)
|
||||
Beantwoord voor jezelf:
|
||||
1. Welke features werken al?
|
||||
2. Welke features missen nog?
|
||||
3. Wat is je grootste blocker?
|
||||
4. Hoe staat je documentatie ervoor?
|
||||
|
||||
Verify:
|
||||
- Env vars
|
||||
- Error boundaries
|
||||
- Loading states
|
||||
- 404 page
|
||||
- SEO basics
|
||||
- Favicon
|
||||
- TypeScript errors
|
||||
Maak een eerlijke inschatting.
|
||||
|
||||
### Phase 2: Performance Optimization (45 min)
|
||||
**Deel 2: Planning Maken (30 min)**
|
||||
|
||||
- Run Lighthouse (aim 90+)
|
||||
- Fix met Cursor:
|
||||
- Optimize images
|
||||
- Reduce bundle
|
||||
- Optimize fonts
|
||||
- Improve Core Web Vitals
|
||||
- Re-run
|
||||
- Document
|
||||
Maak gedetailleerde planning:
|
||||
- Wat doe je vandaag?
|
||||
- Wat doe je in Les 18?
|
||||
- Wat doe je thuis?
|
||||
- Wanneer ben je klaar?
|
||||
|
||||
### Phase 3: Deploy & Monitor (45 min)
|
||||
**Deel 3: Begin Met Hoogste Prioriteit (1 uur)**
|
||||
|
||||
- Deploy naar Vercel
|
||||
- Custom domain (optional)
|
||||
- Enable Analytics
|
||||
- Setup error monitoring
|
||||
- Maak monitoring dashboard
|
||||
- Test grondig
|
||||
Start met de belangrijkste ontbrekende onderdelen:
|
||||
- Werkt je AI feature? → Prioriteit 1
|
||||
- Werkt auth? → Prioriteit 2
|
||||
- Is het deployed? → Prioriteit 3
|
||||
|
||||
Vraag hulp als je vastloopt!
|
||||
|
||||
### Deliverable
|
||||
- Production URL
|
||||
- Lighthouse screenshot
|
||||
- Dashboard access
|
||||
- Statusoverzicht: wat werkt, wat niet
|
||||
- Planning voor afronden
|
||||
- Voortgang op hoogste prioriteit
|
||||
|
||||
---
|
||||
|
||||
## Huiswerk (2 uur)
|
||||
## Huiswerk
|
||||
|
||||
### Maak Production Deployment Playbook
|
||||
### Werk aan je Eindopdracht
|
||||
|
||||
### Deel 1: Comprehensive Checklist (1 uur)
|
||||
**Dit is geen nieuw huiswerk - gebruik deze tijd om je eindopdracht af te ronden.**
|
||||
|
||||
Schrijf checklists voor:
|
||||
- Pre-Deployment
|
||||
- Environment Setup
|
||||
- Performance Requirements
|
||||
- Monitoring Setup
|
||||
- Post-Deployment
|
||||
- Rollback Plan
|
||||
Focus op:
|
||||
1. Features compleet maken
|
||||
2. Bugs fixen
|
||||
3. Documentatie bijwerken
|
||||
4. Testen in productie
|
||||
|
||||
### Deel 2: GitHub Actions (optional, 30 min)
|
||||
- Setup automated checks op PRs
|
||||
|
||||
### Deel 3: Monitoring Dashboard (30 min)
|
||||
|
||||
Bouw admin dashboard met:
|
||||
- Deployment status
|
||||
- Errors
|
||||
- Performance metrics
|
||||
- Database usage
|
||||
- API usage
|
||||
- Custom metrics
|
||||
- Auto-refresh 5min
|
||||
**Bereid vragen voor:**
|
||||
Schrijf op waar je hulp bij nodig hebt voor Les 18 (werksessie).
|
||||
|
||||
### Deliverable
|
||||
- Playbook
|
||||
- GitHub Actions
|
||||
- Dashboard
|
||||
- Reflectie (200 woorden)
|
||||
- Voortgang op eindopdracht
|
||||
- Lijst met vragen voor Les 18
|
||||
|
||||
---
|
||||
|
||||
## Leerdoelen
|
||||
Na deze les kan de student:
|
||||
- Vercel deployment configureren met Git integration
|
||||
- Environment variables veilig beheren
|
||||
- Custom domains configureren
|
||||
- Performance optimaliseren voor Web Vitals
|
||||
- Analytics en monitoring opzetten
|
||||
- CI/CD implementeren met GitHub Actions
|
||||
- Security best practices toepassen voor productie
|
||||
- De eindopdracht requirements begrijpen
|
||||
- Een realistische planning maken
|
||||
- Prioriteiten stellen voor afronden
|
||||
- Eigen voortgang eerlijk inschatten
|
||||
- Hulp vragen waar nodig
|
||||
|
||||
Reference in New Issue
Block a user