fix: add lesson 2
This commit is contained in:
Tim Rijkse
207
Les02-OpenCode/Les02-Bijlage-A-Lesopdracht.md
Normal file
207
Les02-OpenCode/Les02-Bijlage-A-Lesopdracht.md
Normal file
@@ -0,0 +1,207 @@
|
||||
# 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)
|
||||
174
Les02-OpenCode/Les02-Bijlage-B-Huiswerkopdracht.md
Normal file
174
Les02-OpenCode/Les02-Bijlage-B-Huiswerkopdracht.md
Normal file
@@ -0,0 +1,174 @@
|
||||
# Les 2 - Huiswerkopdracht
|
||||
|
||||
**Deadline:** Voor les 3
|
||||
|
||||
---
|
||||
|
||||
## Opdracht 1: Nieuw Project vanaf Scratch (2 uur)
|
||||
|
||||
In de les heb je een bestaand project uitgebreid. Nu ga je een **nieuw project** maken met OpenCode.
|
||||
|
||||
### Stap 1: Maak een nieuw React project
|
||||
|
||||
```bash
|
||||
npx create-next-app@latest mijn-nieuwe-project
|
||||
cd mijn-nieuwe-project
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Kies bij de prompts:
|
||||
- TypeScript: Yes
|
||||
- Tailwind CSS: Yes
|
||||
- App Router: Yes
|
||||
|
||||
### Stap 2: Configureer OpenCode
|
||||
|
||||
```bash
|
||||
opencode
|
||||
```
|
||||
|
||||
Selecteer OpenCode Zen → GLM 4.7 (gratis).
|
||||
|
||||
### Stap 3: Bouw minimaal 3 componenten
|
||||
|
||||
Gebruik Plan mode om te ontwerpen, Build mode om te bouwen.
|
||||
|
||||
**Verplichte componenten:**
|
||||
|
||||
#### 1. Header/Navbar
|
||||
- Logo
|
||||
- Navigatie links
|
||||
- CTA button
|
||||
- Mobile hamburger menu (werkend!)
|
||||
|
||||
#### 2. Hero Section
|
||||
- Headline
|
||||
- Subtitle
|
||||
- 1-2 buttons
|
||||
- Achtergrond (gradient of afbeelding)
|
||||
|
||||
#### 3. Kies één:
|
||||
|
||||
**Optie A: Feature Cards**
|
||||
- Minimaal 3 cards
|
||||
- Icon, titel, beschrijving per card
|
||||
- Responsive grid
|
||||
|
||||
**Optie B: Testimonials**
|
||||
- Minimaal 2 testimonials
|
||||
- Quote, naam, foto placeholder
|
||||
- Mooie styling
|
||||
|
||||
**Optie C: Pricing Table**
|
||||
- 3 pricing tiers
|
||||
- Features per tier
|
||||
- Highlight recommended
|
||||
|
||||
### Stap 4: Push naar GitHub
|
||||
|
||||
**Anders dan bij v0!** Bij v0 was Vercel automatisch gekoppeld. Nu moet je dit handmatig doen.
|
||||
|
||||
#### 4a. Maak GitHub repository
|
||||
|
||||
1. Ga naar github.com
|
||||
2. Klik "+" → "New repository"
|
||||
3. Naam: bijvoorbeeld `mijn-nieuwe-project`
|
||||
4. **Public** aanvinken
|
||||
5. Klik "Create repository"
|
||||
|
||||
#### 4b. Push je code
|
||||
|
||||
GitHub toont instructies. Voer uit in je projectmap:
|
||||
|
||||
```bash
|
||||
git remote add origin https://github.com/JOUW-USERNAME/mijn-nieuwe-project.git
|
||||
git branch -M main
|
||||
git push -u origin main
|
||||
```
|
||||
|
||||
**Of met GitHub Desktop:**
|
||||
1. File → Add Local Repository
|
||||
2. Selecteer je projectmap
|
||||
3. Publish repository
|
||||
|
||||
---
|
||||
|
||||
### Stap 5: Koppel aan Vercel
|
||||
|
||||
1. Ga naar vercel.com (log in met GitHub)
|
||||
2. Klik "Add New..." → "Project"
|
||||
3. "Import Git Repository"
|
||||
4. Selecteer je nieuwe repo
|
||||
5. Framework: Next.js (automatisch gedetecteerd)
|
||||
6. Klik "Deploy"
|
||||
|
||||
**Na ~1 minuut:** Je website is live!
|
||||
|
||||
**Tip:** Elke volgende `git push` wordt automatisch gedeployed.
|
||||
|
||||
---
|
||||
|
||||
## Opdracht 2: Reflectie (300 woorden)
|
||||
|
||||
Schrijf over je OpenCode ervaring.
|
||||
|
||||
### Beantwoord deze vragen:
|
||||
|
||||
1. **Les vs Huiswerk**
|
||||
- Wat was het verschil tussen werken met een bestaand project (les) en een nieuw project (huiswerk)?
|
||||
- Wat vond je makkelijker/moeilijker?
|
||||
|
||||
2. **Plan vs Build mode**
|
||||
- Hoe heb je Plan mode gebruikt?
|
||||
- Wanneer switch je naar Build?
|
||||
|
||||
3. **Vergelijking met v0**
|
||||
- Hoe verschilt OpenCode van v0.dev?
|
||||
- Wat zijn voor- en nadelen van beide?
|
||||
|
||||
4. **Workflow**
|
||||
- Hoe vaak heb je gepusht naar Vercel?
|
||||
- Wat is je ideale workflow geworden?
|
||||
|
||||
5. **Tips voor jezelf**
|
||||
- Welke shortcuts gebruik je het meest?
|
||||
- Wat zou je volgende keer anders doen?
|
||||
|
||||
---
|
||||
|
||||
## Inleveren via Teams
|
||||
|
||||
1. **Link naar live website** (Vercel URL)
|
||||
2. **Link naar GitHub repository**
|
||||
3. **Screenshots** van je 3 componenten (desktop + mobile)
|
||||
4. **Reflectie** als tekst of document
|
||||
|
||||
---
|
||||
|
||||
## Beoordeling
|
||||
|
||||
| Onderdeel | Punten |
|
||||
|-----------|--------|
|
||||
| Header/Navbar compleet + responsive | 2 |
|
||||
| Hero Section compleet | 2 |
|
||||
| Derde component compleet | 2 |
|
||||
| Deployed op Vercel | 1 |
|
||||
| Reflectie (inhoud + inzicht) | 3 |
|
||||
| **Totaal** | **10** |
|
||||
|
||||
---
|
||||
|
||||
## Bonus (optioneel)
|
||||
|
||||
- [ ] Voeg meer dan 3 componenten toe
|
||||
- [ ] Implementeer dark mode
|
||||
- [ ] Voeg animaties toe met Framer Motion
|
||||
- [ ] Maak meerdere pagina's
|
||||
|
||||
---
|
||||
|
||||
## Hulp nodig?
|
||||
|
||||
- Check de OpenCode documentatie: opencode.ai/docs
|
||||
- Bekijk de les slides nogmaals
|
||||
- Stel vragen in Teams
|
||||
222
Les02-OpenCode/Les02-Docenttekst-Notes.md
Normal file
222
Les02-OpenCode/Les02-Docenttekst-Notes.md
Normal file
@@ -0,0 +1,222 @@
|
||||
# Les 2 - Keynote Notes
|
||||
|
||||
**Spreektijd:** ~50 min | **Hands-on:** ~85 min | **Pauze:** 15 min (10:15-10:30)
|
||||
|
||||
---
|
||||
|
||||
## BLOK 1: WELKOM & TERUGBLIK (8 min)
|
||||
|
||||
---
|
||||
|
||||
### Slide 1: Welkom
|
||||
- "Welkom terug bij les 2!"
|
||||
- "Vandaag: jullie projecten uitbreiden"
|
||||
|
||||
---
|
||||
|
||||
### Slide 2: Planning
|
||||
- 09:00-09:20: Intro OpenCode
|
||||
- 09:20-09:50: Setup + Demo's
|
||||
- 09:50-10:15: Hands-on start
|
||||
- 10:15-10:30: PAUZE
|
||||
- 10:30-11:30: Hands-on vervolg
|
||||
- 11:30-12:00: Resultaten + Afsluiting
|
||||
|
||||
---
|
||||
|
||||
### Slide 3: Terugblik Les 1
|
||||
- **Jullie hebben:** website op Vercel, code in GitHub
|
||||
- **Maar:** veel copy/paste, geen lokale dev
|
||||
- "Vandaag gaan we dat oplossen"
|
||||
|
||||
---
|
||||
|
||||
### Slide 4: Vandaag
|
||||
- Bestaande repos lokaal draaien
|
||||
- Uitbreiden met AI
|
||||
- Deployen via git push
|
||||
|
||||
---
|
||||
|
||||
## BLOK 2: INTRO OPENCODE (12 min)
|
||||
|
||||
---
|
||||
|
||||
### Slide 5: Wat is OpenCode?
|
||||
- Open source, 60.000+ stars
|
||||
- Kies je AI: **OpenCode Zen** (gratis!)
|
||||
- Geen API key nodig
|
||||
|
||||
---
|
||||
|
||||
### Slide 6: Build vs Plan Mode
|
||||
- **Plan (📋):** leest, analyseert, verandert NIETS
|
||||
- **Build (🔨):** schrijft code, maakt bestanden
|
||||
- Wisselen: `Tab`
|
||||
|
||||
---
|
||||
|
||||
### Slide 7: Shortcuts
|
||||
- `Ctrl+K` = command menu
|
||||
- `Tab` = wissel mode
|
||||
- `@` = zoek bestanden
|
||||
- `Ctrl+O` = model kiezen
|
||||
|
||||
---
|
||||
|
||||
### Slide 8: @ Mention
|
||||
- Typ `@` + filename
|
||||
- AI krijgt exacte context
|
||||
- Voorbeeld: @Hero.tsx voeg gradient toe
|
||||
|
||||
---
|
||||
|
||||
### Slide 9: Deployment Workflow
|
||||
- Wijzig code → git add → commit → push
|
||||
- Vercel pakt automatisch op
|
||||
- Jullie repos zijn al gekoppeld!
|
||||
|
||||
---
|
||||
|
||||
## BLOK 3: SETUP & DEMO (20 min)
|
||||
|
||||
---
|
||||
|
||||
### Slide 10: Installatie
|
||||
- **DEMO + studenten doen mee:**
|
||||
```bash
|
||||
npm i -g opencode-ai@latest
|
||||
opencode
|
||||
```
|
||||
- `Ctrl+O` → OpenCode Zen → GLM 4.7
|
||||
|
||||
---
|
||||
|
||||
### Slide 11: Demo - Lokaal draaien
|
||||
- **DEMO:**
|
||||
```bash
|
||||
git clone [url]
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
- Open localhost:3000
|
||||
|
||||
---
|
||||
|
||||
### Slide 12: Demo - Plan Mode
|
||||
- **DEMO:**
|
||||
- "Analyseer dit project. Waar kan ik testimonials toevoegen?"
|
||||
- AI leest alleen, verandert niets
|
||||
|
||||
---
|
||||
|
||||
### Slide 13: Demo - Build Mode
|
||||
- Tab → 🔨
|
||||
- **DEMO:** "Maak Testimonials component"
|
||||
- Toon resultaat in browser
|
||||
|
||||
---
|
||||
|
||||
## BLOK 4: GIT & VERCEL (12 min)
|
||||
|
||||
---
|
||||
|
||||
### Slide 14: Demo - Git Push
|
||||
- **DEMO:**
|
||||
```bash
|
||||
git add .
|
||||
git commit -m "Add testimonials"
|
||||
git push
|
||||
```
|
||||
- Of: GitHub Desktop
|
||||
|
||||
---
|
||||
|
||||
### Slide 15: Demo - Vercel Auto-Deploy
|
||||
- **DEMO:**
|
||||
- Open Vercel dashboard
|
||||
- Toon "Building..." status
|
||||
- Na ~1 min: live!
|
||||
|
||||
---
|
||||
|
||||
### Slide 16: Nieuw project naar Vercel
|
||||
- **Voor huiswerk!** v0 was automatisch gekoppeld
|
||||
- **DEMO:** Vercel → Add New Project → Import Git Repository
|
||||
- Selecteer repo → Deploy
|
||||
|
||||
---
|
||||
|
||||
## BLOK 5: HANDS-ON (85 min + 15 min pauze)
|
||||
|
||||
---
|
||||
|
||||
### Slide 17: Opdracht (09:50-09:55)
|
||||
- **Breid je v0 website uit:**
|
||||
1. Clone/pull repo
|
||||
2. npm install + npm run dev
|
||||
3. Voeg secties toe met OpenCode
|
||||
4. Push → live op Vercel
|
||||
- **Doel:** minimaal 2x deployen
|
||||
- "Kwart over 10 pauze!"
|
||||
|
||||
---
|
||||
|
||||
### Hands-on deel 1 (09:55-10:15)
|
||||
|
||||
**20 minuten werken** (25 min incl. uitleg)
|
||||
|
||||
Help bij opstartproblemen:
|
||||
- Draait npm run dev?
|
||||
- OpenCode Zen geselecteerd?
|
||||
|
||||
---
|
||||
|
||||
### ☕ PAUZE (10:15-10:30)
|
||||
|
||||
"Om half 11 gaan we verder"
|
||||
|
||||
---
|
||||
|
||||
### Hands-on deel 2 (10:30-11:30)
|
||||
|
||||
**60 minuten werken**
|
||||
|
||||
**Checks:**
|
||||
- 10:45 - "Wie draait lokaal?"
|
||||
- 11:15 - "Wie heeft 2x gepusht?"
|
||||
|
||||
---
|
||||
|
||||
## BLOK 6: AFSLUITING (30 min)
|
||||
|
||||
---
|
||||
|
||||
### Slide 18: Resultaten
|
||||
- 2-3 studenten tonen werk
|
||||
- "Wat toegevoegd? Hoeveel keer gepusht?"
|
||||
|
||||
---
|
||||
|
||||
### Slide 19: Samenvatting
|
||||
- ✅ OpenCode + Zen (gratis)
|
||||
- ✅ Plan vs Build mode
|
||||
- ✅ @ file mentions
|
||||
- ✅ Git push → auto deploy
|
||||
- ✅ Van copy/paste → lokale dev
|
||||
|
||||
---
|
||||
|
||||
### Slide 20: Huiswerk
|
||||
- **Nieuw project vanaf scratch**
|
||||
- create-next-app → 3 componenten
|
||||
- Push naar GitHub
|
||||
- **Vercel: Import Project** (zie slide 16!)
|
||||
- 300 woorden reflectie
|
||||
|
||||
---
|
||||
|
||||
### Slide 21: Volgende les
|
||||
- OpenCode IDE Integratie
|
||||
- VSCode plugin
|
||||
- "Tot dan!"
|
||||
348
Les02-OpenCode/Les02-Docenttekst.md
Normal file
348
Les02-OpenCode/Les02-Docenttekst.md
Normal file
@@ -0,0 +1,348 @@
|
||||
# Docenttekst Les 2: OpenCode - AI Code Assistants
|
||||
|
||||
> **Totale lesduur:** 3 uur (180 minuten)
|
||||
> **Spreektijd docent:** ~50 minuten
|
||||
> **Hands-on:** ~85 minuten
|
||||
> **Pauze:** 15 minuten (10:15-10:30)
|
||||
|
||||
---
|
||||
|
||||
## BLOK 1: WELKOM & TERUGBLIK (8 minuten)
|
||||
|
||||
### Slide 1: Welkomstslide
|
||||
|
||||
**[09:00 - 09:02]**
|
||||
|
||||
"Welkom terug bij les 2! Vorige week hebben jullie allemaal een website gebouwd en online gezet. Vandaag gaan we een stap verder."
|
||||
|
||||
---
|
||||
|
||||
### Slide 2: Planning
|
||||
|
||||
**[09:02 - 09:04]**
|
||||
|
||||
"De planning: tot 10 voor 10 doe ik uitleg en demo's. Dan gaan jullie aan de slag met jullie eigen projecten. Kwart over 10 hebben we een korte pauze, daarna werken jullie door tot half 12."
|
||||
|
||||
---
|
||||
|
||||
### Slide 3: Terugblik Les 1
|
||||
|
||||
**[09:04 - 09:06]**
|
||||
|
||||
"Jullie hebben nu: een werkende website op Vercel, code in GitHub, en ervaring met v0.dev."
|
||||
|
||||
_[Wijs naar de problemen]_
|
||||
|
||||
"Maar... veel copy/paste. Geen lokale development. Beperkte controle over je code. Vandaag gaan we dat oplossen."
|
||||
|
||||
---
|
||||
|
||||
### Slide 4: Vandaag - De volgende stap
|
||||
|
||||
**[09:06 - 09:08]**
|
||||
|
||||
"Vandaag werken we met jullie bestaande repos. We gaan ze lokaal draaien, uitbreiden met AI, en weer deployen naar Vercel. De volledige development workflow."
|
||||
|
||||
---
|
||||
|
||||
## BLOK 2: INTRODUCTIE OPENCODE (12 minuten)
|
||||
|
||||
### Slide 5: Wat is OpenCode?
|
||||
|
||||
**[09:08 - 09:11]**
|
||||
|
||||
"OpenCode - open source met meer dan 60.000 GitHub stars. Het is een AI coding assistant die direct in je project werkt."
|
||||
|
||||
"Het mooie: je kiest je eigen AI. Vandaag gebruiken we OpenCode Zen - dat is gratis en je hebt geen API key nodig."
|
||||
|
||||
---
|
||||
|
||||
### Slide 6: Build vs Plan Mode
|
||||
|
||||
**[09:11 - 09:14]**
|
||||
|
||||
"Belangrijk concept: twee modes."
|
||||
|
||||
"**Plan mode** - het klembord icoon. AI kan alleen lezen en analyseren. Perfect om je project te begrijpen."
|
||||
|
||||
"**Build mode** - de hamer. AI kan code schrijven en bestanden aanmaken."
|
||||
|
||||
"Wisselen doe je met Tab. Workflow: eerst Plan om te begrijpen, dan Build om te bouwen."
|
||||
|
||||
---
|
||||
|
||||
### Slide 7: Shortcuts
|
||||
|
||||
**[09:14 - 09:16]**
|
||||
|
||||
"Vier shortcuts om te onthouden:"
|
||||
|
||||
"Ctrl+K voor het command menu. Tab om te wisselen tussen modes. @ om bestanden te zoeken. Ctrl+O om je AI model te kiezen."
|
||||
|
||||
---
|
||||
|
||||
### Slide 8: De @ mention
|
||||
|
||||
**[09:16 - 09:18]**
|
||||
|
||||
"Die @ is krachtig. Je typt @, begint een bestandsnaam te typen, en het zoekt door je project. Bijvoorbeeld: @Hero.tsx - voeg een gradient toe. De AI krijgt dan exacte context."
|
||||
|
||||
---
|
||||
|
||||
### Slide 9: De Deployment Workflow
|
||||
|
||||
**[09:18 - 09:20]**
|
||||
|
||||
"Dit is de workflow die jullie vandaag gaan gebruiken:"
|
||||
|
||||
"Wijzig code met OpenCode. Git add, commit, push. En dan... Vercel pakt het automatisch op. Jullie project is al gekoppeld aan GitHub, dus elke push wordt automatisch live."
|
||||
|
||||
---
|
||||
|
||||
## BLOK 3: SETUP & DEMO (20 minuten)
|
||||
|
||||
### Slide 10: Installatie
|
||||
|
||||
**[09:20 - 09:25]**
|
||||
|
||||
_[Open terminal]_
|
||||
|
||||
"Installatie: npm i -g opencode-ai@latest. Dan opencode om te starten."
|
||||
|
||||
_[Demonstreer installatie]_
|
||||
|
||||
"Voor het AI model: Ctrl+O, kies OpenCode Zen, dan GLM 4.7. Gratis, geen key nodig."
|
||||
|
||||
_[Laat studenten ook installeren - help waar nodig]_
|
||||
|
||||
---
|
||||
|
||||
### Slide 11: Demo - Project Lokaal Draaien
|
||||
|
||||
**[09:25 - 09:30]**
|
||||
|
||||
_[LIVE DEMO]_
|
||||
|
||||
"Ik ga nu een v0 project clonen en lokaal draaien."
|
||||
|
||||
```bash
|
||||
git clone [demo-repo-url]
|
||||
cd project-naam
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
"Open localhost:3000 - daar is de website, lokaal op mijn machine."
|
||||
|
||||
_[Toon de website in browser]_
|
||||
|
||||
---
|
||||
|
||||
### Slide 12: Demo - Plan Mode
|
||||
|
||||
**[09:30 - 09:35]**
|
||||
|
||||
_[LIVE DEMO]_
|
||||
|
||||
"Nu start ik OpenCode in dit project. Ik zit in Plan mode - zie het klembord."
|
||||
|
||||
"Ik vraag: 'Analyseer dit project. Welke componenten zijn er en waar zou ik een testimonials sectie kunnen toevoegen?'"
|
||||
|
||||
_[Wacht op response]_
|
||||
|
||||
"Kijk - het leest alles, geeft een analyse, maar verandert niets. Perfect om eerst te begrijpen."
|
||||
|
||||
---
|
||||
|
||||
### Slide 13: Demo - Build Mode
|
||||
|
||||
**[09:35 - 09:40]**
|
||||
|
||||
_[LIVE DEMO]_
|
||||
|
||||
"Tab om naar Build mode te gaan. Nu vraag ik:"
|
||||
|
||||
"@src/components/ Maak een Testimonials component met 3 cards, responsive, en voeg toe aan de homepage."
|
||||
|
||||
_[Wacht op generatie]_
|
||||
|
||||
"Het maakt bestanden aan, past imports aan. Kijk in de browser - refresh - daar is de nieuwe sectie!"
|
||||
|
||||
---
|
||||
|
||||
## BLOK 4: GIT & VERCEL WORKFLOW (12 minuten)
|
||||
|
||||
### Slide 14: Demo - Git Push
|
||||
|
||||
**[09:40 - 09:45]**
|
||||
|
||||
_[LIVE DEMO]_
|
||||
|
||||
"Nu de belangrijke stap: deployen. Ik gebruik gewoon git."
|
||||
|
||||
```bash
|
||||
git add .
|
||||
git commit -m "Add testimonials section"
|
||||
git push
|
||||
```
|
||||
|
||||
"Of als je GitHub Desktop prefereert: changed files links, commit message, commit, push."
|
||||
|
||||
---
|
||||
|
||||
### Slide 15: Demo - Vercel Auto-Deploy
|
||||
|
||||
**[09:44 - 09:48]**
|
||||
|
||||
_[LIVE DEMO]_
|
||||
|
||||
"Open Vercel dashboard..."
|
||||
|
||||
_[Toon building status]_
|
||||
|
||||
"Zie je? Building. Vercel heeft de push opgepikt. Na ongeveer een minuut..."
|
||||
|
||||
_[Wacht/toon resultaat]_
|
||||
|
||||
"Live! De wijzigingen staan online. Dit is de workflow: code lokaal, push, automatisch live."
|
||||
|
||||
---
|
||||
|
||||
### Slide 16: Nieuw project naar Vercel
|
||||
|
||||
**[09:48 - 09:50]**
|
||||
|
||||
"Dit werkt omdat jullie v0 project al aan Vercel gekoppeld is. Maar voor het huiswerk maken jullie een **nieuw** project. Dan moet je Vercel handmatig koppelen."
|
||||
|
||||
_[Toon Vercel dashboard]_
|
||||
|
||||
"Stappen: Add New Project, Import Git Repository, selecteer je repo, Deploy. Dat is het."
|
||||
|
||||
"Dit hebben jullie nodig voor het huiswerk - een nieuw project vanaf scratch deployen."
|
||||
|
||||
---
|
||||
|
||||
## BLOK 5: HANDS-ON OPDRACHT (85 minuten + 15 min pauze)
|
||||
|
||||
### Slide 17: Aan de slag!
|
||||
|
||||
**[09:50 - 09:55]** _(5 minuten uitleg)_
|
||||
|
||||
"Jullie gaan nu jullie eigen v0 website uitbreiden."
|
||||
|
||||
"Stap 1: Clone je repo of pull latest. Stap 2: npm install, npm run dev. Stap 3: Voeg nieuwe secties toe met OpenCode. Stap 4: Push naar GitHub, bekijk live op Vercel."
|
||||
|
||||
"Doel: minimaal 2 keer deployen. Je mag kiezen wat je toevoegt - testimonials, pricing, FAQ, of verbeteringen aan bestaande componenten."
|
||||
|
||||
"Kwart over 10 hebben we een korte pauze van 15 minuten. Begin!"
|
||||
|
||||
---
|
||||
|
||||
### Hands-on Deel 1
|
||||
|
||||
**[09:55 - 10:15]** _(20 minuten werken)_
|
||||
|
||||
_[Loop actief rond, help bij opstartproblemen]_
|
||||
|
||||
**Let op:**
|
||||
- Draait npm run dev?
|
||||
- Lukt git clone/pull?
|
||||
- OpenCode Zen geselecteerd?
|
||||
|
||||
---
|
||||
|
||||
### ☕ PAUZE
|
||||
|
||||
**[10:15 - 10:30]** _(15 minuten)_
|
||||
|
||||
"Oké, pauze! Om half 11 gaan we verder."
|
||||
|
||||
---
|
||||
|
||||
### Hands-on Deel 2
|
||||
|
||||
**[10:30 - 11:30]** _(60 minuten werken)_
|
||||
|
||||
_[Loop actief rond]_
|
||||
|
||||
**Let op:**
|
||||
- Zit student in juiste mode?
|
||||
- Gebruikt @ mentions?
|
||||
- Lukt git push?
|
||||
|
||||
**Check [10:45]:**
|
||||
"Wie heeft de website lokaal draaien? Wie heeft al gepusht naar Vercel?"
|
||||
|
||||
**Check [11:15]:**
|
||||
"Hoeveel mensen hebben al 2x gepusht? Wie zit vast?"
|
||||
|
||||
---
|
||||
|
||||
## BLOK 6: AFSLUITING (30 minuten)
|
||||
|
||||
### Slide 18: Resultaten delen
|
||||
|
||||
**[11:30 - 11:40]**
|
||||
|
||||
"Stop met coderen. Wie wil laten zien wat ze hebben gebouwd?"
|
||||
|
||||
_[2-3 studenten tonen hun werk]_
|
||||
|
||||
"Wat heb je toegevoegd? Hoeveel keer gepusht? Wat ging goed, wat was lastig?"
|
||||
|
||||
---
|
||||
|
||||
### Slide 19: Samenvatting
|
||||
|
||||
**[11:40 - 11:50]**
|
||||
|
||||
"Wat hebben we gedaan vandaag?"
|
||||
|
||||
- OpenCode: open-source AI assistant
|
||||
- OpenCode Zen: gratis AI modellen
|
||||
- Plan vs Build mode
|
||||
- @ file mentions voor context
|
||||
- De volledige workflow: lokaal ontwikkelen, pushen, automatisch live
|
||||
|
||||
"Van v0 copy/paste naar echte lokale development."
|
||||
|
||||
_[Ruimte voor vragen]_
|
||||
|
||||
---
|
||||
|
||||
### Slide 20: Huiswerk
|
||||
|
||||
**[11:50 - 11:55]**
|
||||
|
||||
"Thuis: een nieuw project vanaf scratch. Niet je v0 project uitbreiden, maar helemaal nieuw beginnen."
|
||||
|
||||
"Stappen: create-next-app, bouw 3 componenten, push naar GitHub, en dan - belangrijk - Vercel Import Project. Zoals ik eerder liet zien."
|
||||
|
||||
"In de huiswerkopdracht staan alle stappen uitgeschreven. Plus 300 woorden reflectie."
|
||||
|
||||
---
|
||||
|
||||
### Slide 21: Afsluiting
|
||||
|
||||
**[11:55 - 12:00]**
|
||||
|
||||
"Volgende week: OpenCode in je IDE. Dan gaan we de VSCode plugin gebruiken voor nog sneller werken."
|
||||
|
||||
"Vragen? Anders tot volgende week!"
|
||||
|
||||
---
|
||||
|
||||
## Timing Overzicht
|
||||
|
||||
| Blok | Tijd | Duur |
|
||||
|------|------|------|
|
||||
| 1. Welkom & Terugblik | 09:00-09:08 | 8 min |
|
||||
| 2. Intro OpenCode | 09:08-09:20 | 12 min |
|
||||
| 3. Setup & Demo | 09:20-09:40 | 20 min |
|
||||
| 4. Git & Vercel | 09:40-09:50 | 10 min |
|
||||
| 5. Hands-on (deel 1) | 09:50-10:15 | 25 min |
|
||||
| ☕ PAUZE | 10:15-10:30 | 15 min |
|
||||
| 5. Hands-on (deel 2) | 10:30-11:30 | 60 min |
|
||||
| 6. Afsluiting | 11:30-12:00 | 30 min |
|
||||
|
||||
**Spreektijd:** ~50 min | **Hands-on:** ~85 min | **Pauze:** 15 min
|
||||
170
Les02-OpenCode/Les02-Lesplan.md
Normal file
170
Les02-OpenCode/Les02-Lesplan.md
Normal file
@@ -0,0 +1,170 @@
|
||||
# Lesplan Les 2: OpenCode - AI Code Assistants
|
||||
|
||||
---
|
||||
|
||||
## Lesgegevens
|
||||
|
||||
| Item | Details |
|
||||
|------|---------|
|
||||
| **Les** | 2 van 18 |
|
||||
| **Onderwerp** | OpenCode - AI Code Assistants |
|
||||
| **Deel** | 1: AI Foundations (Les 1-4) |
|
||||
| **Duur** | 3 uur (180 minuten) |
|
||||
| **Spreektijd** | ~50 minuten |
|
||||
| **Hands-on** | ~85 minuten |
|
||||
| **Pauze** | 15 minuten (10:15-10:30) |
|
||||
|
||||
---
|
||||
|
||||
## Leerdoelen
|
||||
|
||||
Na deze les kan de student:
|
||||
|
||||
1. Uitleggen wat OpenCode is en waarom het efficiënter is dan de v0/ChatGPT workflow
|
||||
2. OpenCode installeren en configureren met OpenCode Zen (gratis)
|
||||
3. Werken met Plan mode en Build mode
|
||||
4. Een bestaand GitHub project clonen en lokaal draaien
|
||||
5. Wijzigingen maken met OpenCode en deployen via git push
|
||||
6. De @ file mention gebruiken voor context
|
||||
|
||||
---
|
||||
|
||||
## Voorbereiding docent
|
||||
|
||||
### Technische setup
|
||||
- [ ] OpenCode Terminal geïnstalleerd (`npm i -g opencode-ai@latest`)
|
||||
- [ ] Demo project: een v0 repo gekloond en werkend
|
||||
- [ ] Git geconfigureerd
|
||||
|
||||
### Student voorkennis (uit Les 1)
|
||||
- Hebben een werkende v0 website op Vercel
|
||||
- Hebben de code in een GitHub repository
|
||||
- Weten hoe GitHub Desktop werkt
|
||||
|
||||
---
|
||||
|
||||
## Lesverloop
|
||||
|
||||
### Blok 1: Welkom & Terugblik (8 minuten)
|
||||
|
||||
| Tijd | Activiteit | Slides |
|
||||
|------|------------|--------|
|
||||
| 09:00-09:02 | Welkom, planning | 1-2 |
|
||||
| 09:02-09:06 | Terugblik Les 1: v0 workflow + problemen | 3 |
|
||||
| 09:06-09:08 | Vandaag: OpenCode + verder bouwen | 4 |
|
||||
|
||||
**Kernboodschap:** "Jullie hebben werkende websites. Vandaag gaan we die uitbreiden met AI direct in je editor."
|
||||
|
||||
---
|
||||
|
||||
### Blok 2: Introductie OpenCode (12 minuten)
|
||||
|
||||
| Tijd | Activiteit | Slides |
|
||||
|------|------------|--------|
|
||||
| 09:08-09:11 | Wat is OpenCode? + OpenCode Zen | 5 |
|
||||
| 09:11-09:14 | Build vs Plan mode | 6 |
|
||||
| 09:14-09:17 | Shortcuts + @ mentions | 7-8 |
|
||||
| 09:17-09:20 | Vercel deployment workflow | 9 |
|
||||
|
||||
**Belangrijk:** OpenCode Zen is gratis - geen API key nodig!
|
||||
|
||||
---
|
||||
|
||||
### Blok 3: Setup & Demo (20 minuten)
|
||||
|
||||
| Tijd | Activiteit | Slides |
|
||||
|------|------------|--------|
|
||||
| 09:20-09:25 | OpenCode installatie + Zen configureren | 10 |
|
||||
| 09:25-09:30 | **DEMO:** Repo clonen, `npm install`, `npm run dev` | 11 |
|
||||
| 09:30-09:35 | **DEMO:** Plan mode - project analyseren | 12 |
|
||||
| 09:35-09:40 | **DEMO:** Build mode - component toevoegen | 13 |
|
||||
|
||||
---
|
||||
|
||||
### Blok 4: Git & Vercel Workflow (12 minuten)
|
||||
|
||||
| Tijd | Activiteit | Slides |
|
||||
|------|------------|--------|
|
||||
| 09:40-09:44 | **DEMO:** Git add, commit, push | 14 |
|
||||
| 09:44-09:48 | **DEMO:** Vercel auto-deploy tonen | 15 |
|
||||
| 09:48-09:50 | Nieuw project naar Vercel (voor huiswerk) | 16 |
|
||||
|
||||
**Kernboodschap:** "Push naar GitHub = automatisch live op Vercel"
|
||||
|
||||
---
|
||||
|
||||
### Blok 5: Hands-on Opdracht (85 minuten + 15 min pauze)
|
||||
|
||||
| Tijd | Activiteit | Slides |
|
||||
|------|------------|--------|
|
||||
| 09:50-09:55 | Opdracht uitleggen | 17 |
|
||||
| 09:55-10:15 | Studenten werken (20 min) | - |
|
||||
| 10:15-10:30 | ☕ **PAUZE** | - |
|
||||
| 10:30-11:30 | Studenten werken (60 min) | - |
|
||||
|
||||
**Opdracht:** Breid je v0 website uit met OpenCode
|
||||
|
||||
1. Clone je v0 repo (of gebruik GitHub Desktop)
|
||||
2. Run lokaal met `npm install` + `npm run dev`
|
||||
3. Voeg toe met OpenCode:
|
||||
- Nieuwe sectie (Testimonials, Pricing, FAQ)
|
||||
- Verbeteringen aan bestaande componenten
|
||||
- Mobile responsiveness fixes
|
||||
4. Push naar GitHub → bekijk live op Vercel
|
||||
|
||||
**Tijdens het werken:**
|
||||
- Loop actief rond
|
||||
- Help bij git/npm problemen
|
||||
- Check: werkt lokale server?
|
||||
- Aanmoedigen: meerdere keren pushen en deployen
|
||||
|
||||
**Tussentijdse check (10:45):**
|
||||
- "Wie heeft lokaal draaien?"
|
||||
- "Wie heeft al gepusht naar Vercel?"
|
||||
|
||||
**Check (11:15):**
|
||||
- "Wie heeft 2x gepusht?"
|
||||
|
||||
---
|
||||
|
||||
### Blok 6: Afsluiting (30 minuten)
|
||||
|
||||
| Tijd | Activiteit | Slides |
|
||||
|------|------------|--------|
|
||||
| 11:30-11:40 | Resultaten delen (2-3 studenten) | 18 |
|
||||
| 11:40-11:50 | Samenvatting + Q&A | 19 |
|
||||
| 11:50-11:55 | Huiswerk uitleggen | 20 |
|
||||
| 11:55-12:00 | Afsluiting | 21 |
|
||||
|
||||
---
|
||||
|
||||
## Materialen
|
||||
|
||||
- **Slide-Overzicht:** Les02-Slide-Overzicht.md
|
||||
- **Lesopdracht:** Les02-Bijlage-A-Lesopdracht.md
|
||||
- **Huiswerkopdracht:** Les02-Bijlage-B-Huiswerkopdracht.md
|
||||
|
||||
---
|
||||
|
||||
## Veelvoorkomende problemen
|
||||
|
||||
| Probleem | Oplossing |
|
||||
|----------|-----------|
|
||||
| OpenCode installeert niet | Check Node.js ≥18 |
|
||||
| `npm install` faalt | Delete `node_modules`, probeer opnieuw |
|
||||
| `npm run dev` werkt niet | Check of je in de juiste map staat |
|
||||
| Git push rejected | `git pull` eerst, dan push |
|
||||
| Vercel deployt niet | Check GitHub repo permissions |
|
||||
| OpenCode Zen traag | Normaal, gratis model is iets langzamer |
|
||||
|
||||
---
|
||||
|
||||
## Alternatieve AI providers
|
||||
|
||||
| Provider | Kosten | Setup |
|
||||
|----------|--------|-------|
|
||||
| **OpenCode Zen (GLM 4.7)** | Gratis | Geen key nodig |
|
||||
| **Groq** | Gratis tier | API key via console.groq.com |
|
||||
| **Ollama** | Gratis (lokaal) | Installatie + model download |
|
||||
|
||||
**Aanbeveling:** Start met Zen. Ollama als thuiswerk voor wie privacy wil.
|
||||
285
Les02-OpenCode/Les02-Slide-Overzicht.md
Normal file
285
Les02-OpenCode/Les02-Slide-Overzicht.md
Normal file
@@ -0,0 +1,285 @@
|
||||
# Les 2: OpenCode - AI Code Assistants
|
||||
|
||||
> **Deel 1: AI Foundations** (Les 1-4)
|
||||
> **Totale slides:** 21
|
||||
> **Lesduur:** 3 uur (180 minuten)
|
||||
> **Spreektijd:** ~50 min | **Hands-on:** ~85 min | **Pauze:** 15 min
|
||||
|
||||
---
|
||||
|
||||
## Slide-structuur per blok
|
||||
|
||||
| Blok | Onderwerp | Slides | Tijd |
|
||||
|------|-----------|--------|------|
|
||||
| 1 | Welkom & Terugblik | 1-4 | 8 min |
|
||||
| 2 | Introductie OpenCode | 5-9 | 12 min |
|
||||
| 3 | Setup & Demo | 10-13 | 20 min |
|
||||
| 4 | Git & Vercel Workflow | 14-16 | 12 min |
|
||||
| 5 | Hands-on Opdracht | 17 | 85 min |
|
||||
| - | **☕ PAUZE** | - | 15 min |
|
||||
| 6 | Afsluiting | 18-21 | 30 min |
|
||||
|
||||
---
|
||||
|
||||
## BLOK 1: WELKOM & TERUGBLIK (8 minuten)
|
||||
|
||||
### Slide 1: Welkomstslide
|
||||
**Titel:** Les 2: OpenCode - AI Code Assistants
|
||||
|
||||
---
|
||||
|
||||
### Slide 2: Planning vandaag
|
||||
|
||||
| Tijd | Onderwerp |
|
||||
|------|-----------|
|
||||
| 09:00-09:20 | Terugblik + Intro OpenCode |
|
||||
| 09:20-09:50 | Setup + Demo's |
|
||||
| 09:50-10:15 | Hands-on: Start |
|
||||
| 10:15-10:30 | ☕ **PAUZE** |
|
||||
| 10:30-11:30 | Hands-on: Vervolg |
|
||||
| 11:30-12:00 | Resultaten + Afsluiting |
|
||||
|
||||
---
|
||||
|
||||
### Slide 3: Terugblik Les 1 - Wat hebben we?
|
||||
|
||||
**Jullie hebben:**
|
||||
- ✅ Een werkende website op Vercel
|
||||
- ✅ Code in een GitHub repository
|
||||
- ✅ Ervaring met v0.dev
|
||||
|
||||
**Maar:**
|
||||
- Veel copy/paste naar v0
|
||||
- Geen lokale development
|
||||
- Beperkte controle
|
||||
|
||||
---
|
||||
|
||||
### Slide 4: Vandaag - De volgende stap
|
||||
|
||||
**OpenCode:** AI direct in je development workflow
|
||||
|
||||
- ✅ Werk met je bestaande repository
|
||||
- ✅ Draai lokaal, zie wijzigingen direct
|
||||
- ✅ Push naar GitHub → automatisch live op Vercel
|
||||
|
||||
---
|
||||
|
||||
## BLOK 2: INTRODUCTIE OPENCODE (12 minuten)
|
||||
|
||||
### Slide 5: Wat is OpenCode?
|
||||
|
||||
- 🌟 Open source (60.000+ GitHub stars)
|
||||
- 🔌 Kies je AI: **OpenCode Zen** (gratis!), Groq, Ollama
|
||||
- 🖥️ Terminal of Desktop App
|
||||
- 🔒 Privacy-first
|
||||
|
||||
**Vandaag:** OpenCode Zen met GLM 4.7 (gratis, geen key nodig)
|
||||
|
||||
---
|
||||
|
||||
### Slide 6: Build vs Plan Mode
|
||||
|
||||
| Mode | Icoon | Wat het doet |
|
||||
|------|-------|--------------|
|
||||
| **Plan** | 📋 | Analyseert, verandert NIETS |
|
||||
| **Build** | 🔨 | Schrijft code, maakt bestanden |
|
||||
|
||||
**Wisselen:** `Tab`
|
||||
|
||||
**Workflow:** Plan → begrijpen → Build → bouwen
|
||||
|
||||
---
|
||||
|
||||
### Slide 7: Keyboard Shortcuts
|
||||
|
||||
| Shortcut | Actie |
|
||||
|----------|-------|
|
||||
| `Ctrl+K` | Command menu |
|
||||
| `Tab` | Wissel Build/Plan |
|
||||
| `@` | Zoek bestanden |
|
||||
| `Ctrl+O` | Model selectie |
|
||||
|
||||
---
|
||||
|
||||
### Slide 8: De @ file mention
|
||||
|
||||
```
|
||||
@src/components/Hero.tsx
|
||||
Maak de heading groter en voeg een gradient toe
|
||||
```
|
||||
|
||||
- Typ `@` + begin filename
|
||||
- Fuzzy search door project
|
||||
- AI krijgt exacte context
|
||||
|
||||
---
|
||||
|
||||
### Slide 9: De Deployment Workflow
|
||||
|
||||
```
|
||||
1. Wijzig code met OpenCode
|
||||
2. git add .
|
||||
3. git commit -m "Add testimonials"
|
||||
4. git push
|
||||
5. ✨ Vercel deployt automatisch!
|
||||
```
|
||||
|
||||
Jullie Vercel project is al gekoppeld aan GitHub.
|
||||
|
||||
---
|
||||
|
||||
## BLOK 3: SETUP & DEMO (20 minuten)
|
||||
|
||||
### Slide 10: Installatie
|
||||
|
||||
**Terminal:**
|
||||
```bash
|
||||
npm i -g opencode-ai@latest
|
||||
opencode
|
||||
```
|
||||
|
||||
**AI Model:**
|
||||
- `Ctrl+O` → OpenCode Zen → GLM 4.7
|
||||
- Gratis, geen key nodig!
|
||||
|
||||
---
|
||||
|
||||
### Slide 11: Demo - Project Lokaal Draaien
|
||||
|
||||
**Live demo:**
|
||||
1. Clone repo: `git clone <github-url>`
|
||||
2. Open folder: `cd project-naam`
|
||||
3. Install: `npm install`
|
||||
4. Start: `npm run dev`
|
||||
5. Open http://localhost:3000
|
||||
|
||||
---
|
||||
|
||||
### Slide 12: Demo - Plan Mode
|
||||
|
||||
**Live demo:**
|
||||
1. `opencode` in projectmap
|
||||
2. Check: 📋 = Plan mode
|
||||
3. Vraag: "Analyseer dit project en beschrijf de structuur"
|
||||
|
||||
_(AI leest alleen, verandert niets)_
|
||||
|
||||
---
|
||||
|
||||
### Slide 13: Demo - Build Mode
|
||||
|
||||
**Live demo:**
|
||||
1. `Tab` → wissel naar 🔨
|
||||
2. Vraag: "Voeg een Testimonials sectie toe onder de hero"
|
||||
3. Review de code
|
||||
4. Accept
|
||||
|
||||
---
|
||||
|
||||
## BLOK 4: GIT & VERCEL WORKFLOW (12 minuten)
|
||||
|
||||
### Slide 14: Demo - Git Push
|
||||
|
||||
**Live demo:**
|
||||
```bash
|
||||
git add .
|
||||
git commit -m "Add testimonials section"
|
||||
git push
|
||||
```
|
||||
|
||||
Of gebruik GitHub Desktop!
|
||||
|
||||
---
|
||||
|
||||
### Slide 15: Demo - Vercel Auto-Deploy
|
||||
|
||||
**Live demo:**
|
||||
1. Open Vercel dashboard
|
||||
2. Zie: "Building..."
|
||||
3. Na ~1 minuut: live op je URL!
|
||||
|
||||
**Tip:** Vercel toont ook preview voor branches
|
||||
|
||||
---
|
||||
|
||||
### Slide 16: Nieuw project naar Vercel (voor huiswerk)
|
||||
|
||||
**Stappen voor een nieuw project:**
|
||||
|
||||
1. Maak GitHub repository (github.com → New)
|
||||
2. Push je code naar GitHub
|
||||
3. Vercel: "Add New Project"
|
||||
4. "Import Git Repository"
|
||||
5. Selecteer je repo → Deploy
|
||||
|
||||
**Dit heb je nodig voor het huiswerk!**
|
||||
|
||||
---
|
||||
|
||||
## BLOK 5: HANDS-ON OPDRACHT (83 minuten)
|
||||
|
||||
### Slide 17: Aan de slag!
|
||||
|
||||
**Opdracht:** Breid je v0 website uit met OpenCode
|
||||
|
||||
**Stappen:**
|
||||
1. Clone je repo (of pull latest)
|
||||
2. `npm install` + `npm run dev`
|
||||
3. Voeg toe met OpenCode:
|
||||
- Nieuwe sectie (Testimonials, Pricing, of FAQ)
|
||||
- Verbeteringen aan bestaande componenten
|
||||
4. Push naar GitHub → bekijk live!
|
||||
|
||||
**Doel:** Minimaal 2 keer deployen naar Vercel
|
||||
|
||||
**Tijd:** 85 minuten (09:50-10:15 + 10:30-11:30)
|
||||
|
||||
☕ **Pauze:** 10:15-10:30
|
||||
|
||||
---
|
||||
|
||||
## BLOK 6: AFSLUITING (30 minuten)
|
||||
|
||||
### Slide 18: Resultaten delen
|
||||
|
||||
- Wie wil laten zien?
|
||||
- Wat heb je toegevoegd?
|
||||
- Hoeveel keer gepusht?
|
||||
|
||||
---
|
||||
|
||||
### Slide 19: Samenvatting
|
||||
|
||||
- ✅ OpenCode: open-source AI assistant
|
||||
- ✅ OpenCode Zen: gratis AI modellen
|
||||
- ✅ Plan vs Build mode
|
||||
- ✅ @ file mentions voor context
|
||||
- ✅ Git push → Vercel auto-deploy
|
||||
- ✅ Van v0 copy/paste → lokale development
|
||||
|
||||
---
|
||||
|
||||
### Slide 20: Huiswerk
|
||||
|
||||
**Opdracht: Nieuw project vanaf scratch**
|
||||
|
||||
1. `npx create-next-app@latest`
|
||||
2. Bouw 3 componenten met OpenCode
|
||||
3. Push naar GitHub
|
||||
4. Vercel: Import Project → Deploy
|
||||
5. 300 woorden reflectie
|
||||
|
||||
**Stappen voor Vercel: zie slide 16!**
|
||||
|
||||
---
|
||||
|
||||
### Slide 21: Volgende les
|
||||
|
||||
**Les 3:** OpenCode IDE Integratie
|
||||
|
||||
- VSCode plugin
|
||||
- Inline code generatie
|
||||
- Advanced prompting
|
||||
|
||||
Tot volgende week!
|
||||
Reference in New Issue
Block a user