208 lines
3.6 KiB
Markdown
208 lines
3.6 KiB
Markdown
# 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:**
|
|
```bash
|
|
git clone https://github.com/jouw-username/jouw-project.git
|
|
cd jouw-project
|
|
```
|
|
|
|
**Optie B - GitHub Desktop:**
|
|
1. File → Clone Repository
|
|
2. Selecteer je v0 project
|
|
3. Clone
|
|
|
|
### Installeer dependencies
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
### Start development server
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
Open http://localhost:3000 - je ziet je website!
|
|
|
|
**Checkpoint:** ✅ Website draait lokaal
|
|
|
|
---
|
|
|
|
## Stap 2: OpenCode Configureren (10 min)
|
|
|
|
### Start OpenCode
|
|
```bash
|
|
opencode
|
|
```
|
|
|
|
### Selecteer gratis AI model
|
|
1. Druk `Ctrl+O`
|
|
2. Kies "OpenCode Zen"
|
|
3. 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. Welke componenten zijn er?
|
|
Waar zou ik een testimonials sectie kunnen toevoegen?
|
|
```
|
|
|
|
### Fase 2: Bouw (Build Mode)
|
|
|
|
Druk `Tab` om naar Build mode (🔨) te gaan.
|
|
|
|
**Kies minimaal 2 van deze opdrachten:**
|
|
|
|
#### Optie A: Testimonials Sectie
|
|
```
|
|
@src/components/
|
|
Maak een Testimonials component met:
|
|
- 3 testimonial cards naast elkaar
|
|
- Foto placeholder, quote, naam, functie
|
|
- Responsive: onder elkaar op mobile
|
|
- Voeg toe aan de homepage onder de hero
|
|
```
|
|
|
|
#### Optie B: Pricing Sectie
|
|
```
|
|
@src/components/
|
|
Maak een Pricing component met:
|
|
- 3 pricing tiers (Basic, Pro, Enterprise)
|
|
- Features lijst per tier
|
|
- CTA button per tier
|
|
- Highlight de middelste (Pro)
|
|
```
|
|
|
|
#### Optie C: FAQ Sectie
|
|
```
|
|
@src/components/
|
|
Maak een FAQ component met:
|
|
- Minimaal 5 vragen
|
|
- Accordion style (klik om te openen)
|
|
- Smooth animatie
|
|
```
|
|
|
|
#### Optie D: Verbeter bestaande componenten
|
|
```
|
|
@src/components/[ComponentNaam].tsx
|
|
Verbeter deze component:
|
|
- Betere mobile responsiveness
|
|
- Hover effecten toevoegen
|
|
- Animaties bij scroll
|
|
```
|
|
|
|
**Checkpoint:** ✅ Nieuwe sectie(s) toegevoegd
|
|
|
|
---
|
|
|
|
## Stap 4: Deploy naar Vercel (10 min)
|
|
|
|
### Commit je wijzigingen
|
|
|
|
**Terminal:**
|
|
```bash
|
|
git add .
|
|
git commit -m "Add testimonials section"
|
|
git push
|
|
```
|
|
|
|
**Of GitHub Desktop:**
|
|
1. Zie changed files links
|
|
2. Schrijf commit message
|
|
3. Commit to main
|
|
4. Push origin
|
|
|
|
### Check Vercel
|
|
1. Open je Vercel dashboard
|
|
2. Zie "Building..." status
|
|
3. 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:
|
|
1. Wijzig met OpenCode
|
|
2. Test lokaal
|
|
3. Commit & push
|
|
4. 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?
|
|
1. Wees specifieker in je prompt
|
|
2. Verwijs naar het exacte bestand met @
|
|
3. Bekijk de error in terminal
|
|
4. Vraag een klasgenoot of de docent
|
|
|
|
---
|
|
|
|
## Inleveren
|
|
|
|
Aan het einde van de les:
|
|
- [ ] Website draait lokaal
|
|
- [ ] Minimaal 1 nieuwe sectie toegevoegd
|
|
- [ ] Minimaal 2x gepusht naar Vercel
|
|
- [ ] Wijzigingen zijn live
|
|
|
|
---
|
|
|
|
## Bonus (als je klaar bent)
|
|
|
|
- [ ] Voeg dark mode toggle toe
|
|
- [ ] Implementeer smooth scroll navigatie
|
|
- [ ] Voeg contact formulier toe
|
|
- [ ] Maak een aparte pagina (About, Contact)
|