204 lines
5.1 KiB
Markdown
204 lines
5.1 KiB
Markdown
# Les 2: AI Code Assistants en OpenCode
|
|
|
|
---
|
|
|
|
## Hoofdstuk
|
|
**Deel 1: AI Foundations** (Les 1-4)
|
|
|
|
## Beschrijving
|
|
Introductie tot OpenCode: een open-source AI coding assistant met 60.000+ GitHub stars. Na een korte demo van de terminal versie werken studenten met de **Desktop App** (met ingebouwde terminal). Met OpenCode Zen (gratis, geen API key nodig) leren ze de volledige development workflow: lokaal draaien, uitbreiden met AI, en deployen via git push.
|
|
|
|
---
|
|
|
|
## Tijdsindeling
|
|
|
|
| Blok | Tijd | Duur |
|
|
|------|------|------|
|
|
| 1. Welkom & Terugblik | 09:00-09:10 | 10 min |
|
|
| 2. Intro OpenCode | 09:10-09:20 | 10 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
|
|
|
|
---
|
|
|
|
## Te Behandelen
|
|
|
|
### Wat is OpenCode?
|
|
|
|
- Open-source AI coding assistant (60.000+ GitHub stars)
|
|
- **Terminal versie** (krachtig) én **Desktop App** (gebruiksvriendelijk + ingebouwde terminal)
|
|
- **OpenCode Zen:** gratis AI modellen, geen API key nodig
|
|
- Kies je eigen AI model: GLM 4.7 (aanbevolen)
|
|
|
|
---
|
|
|
|
### Keyboard Shortcuts
|
|
|
|
| Shortcut | Actie |
|
|
|----------|-------|
|
|
| `Ctrl+K` | Command menu |
|
|
| `Tab` | Wissel Build/Plan mode |
|
|
| `@` | File fuzzy search |
|
|
| `Ctrl+O` | Model selectie |
|
|
|
|
**Tip:** `@` is super handig - typ `@` en begin te typen om bestanden te zoeken en context te geven aan de AI.
|
|
|
|
---
|
|
|
|
### Build vs Plan Mode
|
|
|
|
OpenCode heeft twee modes - wissel met `Tab`:
|
|
|
|
| Mode | Icoon | Wat het doet |
|
|
|------|-------|--------------|
|
|
| **Plan** | 📋 | Read-only - leest, analyseert, verandert NIETS |
|
|
| **Build** | 🔨 | Volledige toegang - schrijft code, maakt bestanden |
|
|
|
|
**Workflow:**
|
|
1. Start in **Plan mode**: "Analyseer dit project. Waar kan ik testimonials toevoegen?"
|
|
2. Wissel naar **Build mode**: "Maak nu de Testimonials component"
|
|
|
|
---
|
|
|
|
### De Deployment Workflow
|
|
|
|
De volledige workflow die jullie vandaag leren:
|
|
|
|
1. **Wijzig code** met OpenCode
|
|
2. **Test lokaal** op localhost:3000
|
|
3. **Git add, commit, push**
|
|
4. **Vercel pakt automatisch op** → Live!
|
|
|
|
Jullie v0 project is al gekoppeld aan GitHub/Vercel, dus elke push wordt automatisch live.
|
|
|
|
---
|
|
|
|
### Nieuw Project naar Vercel (voor huiswerk)
|
|
|
|
Voor nieuwe projecten (niet gekoppeld via v0):
|
|
1. Vercel Dashboard → Add New Project
|
|
2. Import Git Repository
|
|
3. Selecteer repo → Deploy
|
|
|
|
---
|
|
|
|
## Tools
|
|
- OpenCode Desktop App (opencode.ai/download)
|
|
- OpenCode Zen (gratis AI, GLM 4.7)
|
|
- Git
|
|
- Vercel
|
|
|
|
---
|
|
|
|
## Lesopdracht (85 min hands-on)
|
|
|
|
### Doel
|
|
Maak een nieuwe pagina in je v0 project. Leer de volledige workflow: lokaal draaien, pagina maken met AI, deployen via git push.
|
|
|
|
### Stap 1: Project Lokaal Draaien (15 min)
|
|
|
|
```bash
|
|
git clone https://github.com/jouw-username/jouw-project.git
|
|
cd jouw-project
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
Open http://localhost:3000 - je ziet je website!
|
|
|
|
### Stap 2: OpenCode Desktop App (10 min)
|
|
|
|
1. Open Desktop App
|
|
2. Open je projectfolder
|
|
3. `Ctrl+O` → OpenCode Zen → GLM 4.7
|
|
4. In ingebouwde terminal: `npm install` + `npm run dev`
|
|
|
|
### Stap 3: Nieuwe Pagina Maken (45 min)
|
|
|
|
**Fase 1 - Plan mode (📋):**
|
|
```
|
|
Analyseer dit project. Hoe werkt de routing?
|
|
Hoe maak ik een nieuwe pagina in Next.js?
|
|
```
|
|
|
|
**Fase 2 - Build mode (🔨):**
|
|
|
|
Maak een nieuwe pagina:
|
|
- Kies: **/about**, **/services**, of **/contact**
|
|
- Voeg minimaal 2 componenten toe (hero + content)
|
|
- Voeg link op homepage toe naar de nieuwe pagina
|
|
|
|
### Stap 4: Deploy naar Vercel (10 min)
|
|
|
|
```bash
|
|
git add .
|
|
git commit -m "Add about page"
|
|
git push
|
|
```
|
|
|
|
Open Vercel dashboard, zie "Building...", na ~1 min: live!
|
|
|
|
### Stap 5: Herhaal!
|
|
|
|
Doe minimaal nog één wijziging en push opnieuw. **Doel: minimaal 2x deployen.**
|
|
|
|
---
|
|
|
|
## Huiswerk
|
|
|
|
### Nieuw Project Vanaf Scratch
|
|
|
|
Maak een **nieuw** project (niet je v0 project uitbreiden):
|
|
|
|
**Stap 1: Project aanmaken**
|
|
```bash
|
|
npx create-next-app@latest mijn-project
|
|
cd mijn-project
|
|
```
|
|
Kies: TypeScript, Tailwind CSS, App Router
|
|
|
|
**Stap 2: 3 Componenten bouwen met OpenCode**
|
|
1. **Navbar** - logo, links, responsive hamburger menu
|
|
2. **Hero** - headline, subtitle, CTA button
|
|
3. **Keuze:** Features, Footer, of ander component
|
|
|
|
**Stap 3: Push naar GitHub**
|
|
```bash
|
|
git add .
|
|
git commit -m "Initial components"
|
|
git push
|
|
```
|
|
|
|
**Stap 4: Koppel aan Vercel**
|
|
1. Ga naar vercel.com/new
|
|
2. Import Git Repository
|
|
3. Selecteer je nieuwe repo
|
|
4. Deploy
|
|
|
|
### Reflectie (300 woorden)
|
|
|
|
Schrijf over je ervaring:
|
|
- Hoe voelde werken met OpenCode?
|
|
- Build vs Plan mode - wanneer gebruik je welke?
|
|
- Wat ging goed bij het deployen?
|
|
- Wat was de moeilijkste stap?
|
|
- Vergelijk met de v0 workflow uit Les 1
|
|
|
|
---
|
|
|
|
## Leerdoelen
|
|
|
|
Na deze les kan de student:
|
|
1. Uitleggen wat OpenCode is en het verschil tussen Terminal en Desktop App
|
|
2. De OpenCode Desktop App installeren en configureren met OpenCode Zen (gratis)
|
|
3. Werken met Plan mode en Build mode
|
|
4. Een bestaand GitHub project openen en lokaal draaien (in de ingebouwde terminal)
|
|
5. Wijzigingen maken met OpenCode en deployen via git push
|
|
6. De @ file mention gebruiken voor context
|