4.0 KiB
Les 2 - Lesopdracht: Website uitbreiden met OpenCode
Doel
Maak een nieuwe pagina in je v0 project met de OpenCode Desktop App. Je leert:
- Werken met de OpenCode Desktop App
- Plan mode en Build mode gebruiken
- 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 Desktop App (10 min)
Open de Desktop App
- Start OpenCode Desktop App
- Open je projectfolder (File → Open Folder)
- Selecteer je v0 project
Selecteer gratis AI model
- Druk
Ctrl+O - Kies "OpenCode Zen"
- Selecteer "Kimi K2.5 Free"
Start je project (in de ingebouwde terminal)
npm install
npm run dev
Checkpoint: ✅ Desktop App draait + localhost:3000 werkt
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.
💡 BELANGRIJK: Eén prompt per taak!
Splits je werk op in kleine stappen. Niet alles in één prompt!
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 structuur
Prompt 1:
Maak een nieuwe pagina /about (of /services of /contact) met een basis layout.
Stap 3: Voeg componenten toe
Prompt 2:
Voeg een hero sectie toe aan de /about pagina met titel en beschrijving.
Gebruik Tailwind CSS voor styling.
Prompt 3:
Voeg een content sectie toe onder de hero (bijv. team cards, diensten lijst, of contact info).
Stap 4: Voeg navigatie toe
Prompt 4:
@app/page.tsx
Voeg een link toe naar de /about 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