194 lines
3.5 KiB
Markdown
194 lines
3.5 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. 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:**
|
|
```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
|
|
- [ ] 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
|