3.5 KiB
3.5 KiB
Les 2 - Lesopdracht: Website uitbreiden met OpenCode
Doel
Breid je v0 website uit met OpenCode. Je leert:
- Project lokaal draaien
- Werken met Plan en Build mode
- Wijzigingen deployen via git push
Tijd
85 minuten (09:50-10:15 + 10:30-11:30)
☕ Pauze: 10:15-10:30
Stap 1: Project Lokaal Draaien (15 min)
Clone je repository
Optie A - Terminal:
git clone https://github.com/jouw-username/jouw-project.git
cd jouw-project
Optie B - GitHub Desktop:
- File → Clone Repository
- Selecteer je v0 project
- Clone
Installeer dependencies
npm install
Start development server
npm run dev
Open http://localhost:3000 - je ziet je website!
Checkpoint: ✅ Website draait lokaal
Stap 2: OpenCode Configureren (10 min)
Start OpenCode
opencode
Selecteer gratis AI model
- Druk
Ctrl+O - Kies "OpenCode Zen"
- Selecteer "GLM 4.7"
Checkpoint: ✅ OpenCode draait met Zen model
Stap 3: Uitbreiden met OpenCode (45 min)
Fase 1: Analyseer (Plan Mode)
Check dat je in Plan mode zit (📋 icoon).
Analyseer dit project. Hoe werkt de routing?
Hoe maak ik een nieuwe pagina in Next.js?
Fase 2: Maak een nieuwe pagina (Build Mode)
Druk Tab om naar Build mode (🔨) te gaan.
Opdracht: Maak een nieuwe pagina met componenten
Stap 1: Kies je pagina
Kies één van deze opties:
- About - Over ons pagina
- Services - Diensten pagina
- Contact - Contact pagina
Stap 2: Maak de pagina aan
Maak een nieuwe pagina /about (of /services of /contact).
De pagina moet minimaal 2 componenten bevatten:
- Een hero sectie met titel en beschrijving
- Een content sectie (bijv. team cards, diensten lijst, of contact info)
Gebruik Tailwind CSS voor styling.
Stap 3: Voeg navigatie toe
@app/page.tsx
Voeg een link toe naar de nieuwe pagina.
De link moet zichtbaar zijn in de hero of header.
Gebruik Next.js Link component.
Checkpoint: ✅ Nieuwe pagina gemaakt + link op homepage
Stap 4: Deploy naar Vercel (10 min)
Commit je wijzigingen
Terminal:
git add .
git commit -m "Add testimonials section"
git push
Of GitHub Desktop:
- Zie changed files links
- Schrijf commit message
- Commit to main
- Push origin
Check Vercel
- Open je Vercel dashboard
- Zie "Building..." status
- Na ~1 min: bekijk je live site!
Checkpoint: ✅ Wijzigingen live op Vercel
Stap 5: Herhaal! (10 min)
Doe minimaal nog één wijziging en push opnieuw.
Het doel is dat je de volledige workflow meerdere keren doorloopt:
- Wijzig met OpenCode
- Test lokaal
- Commit & push
- Bekijk live
Tips
@ Mentions gebruiken
@src/components/Hero.tsx
Maak de heading groter en gebruik een gradient
Plan mode voor vragen
📋 Hoe kan ik animaties toevoegen aan mijn cards?
Build mode voor actie
🔨 Voeg fade-in animatie toe aan de feature cards
Stuck?
- Wees specifieker in je prompt
- Verwijs naar het exacte bestand met @
- Bekijk de error in terminal
- Vraag een klasgenoot of de docent
Inleveren
Aan het einde van de les:
- Website draait lokaal
- Nieuwe pagina aangemaakt (bijv. /about)
- Link op homepage naar nieuwe pagina
- Minimaal 2x gepusht naar Vercel
- Wijzigingen zijn live
Bonus (als je klaar bent)
- Voeg een tweede pagina toe
- Maak een navbar component met links naar alle pagina's
- Voeg dark mode toggle toe
- Implementeer smooth scroll animaties