5.1 KiB
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:
- Start in Plan mode: "Analyseer dit project. Waar kan ik testimonials toevoegen?"
- Wissel naar Build mode: "Maak nu de Testimonials component"
De Deployment Workflow
De volledige workflow die jullie vandaag leren:
- Wijzig code met OpenCode
- Test lokaal op localhost:3000
- Git add, commit, push
- 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):
- Vercel Dashboard → Add New Project
- Import Git Repository
- 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)
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)
- Open Desktop App
- Open je projectfolder
Ctrl+O→ OpenCode Zen → GLM 4.7- 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)
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
npx create-next-app@latest mijn-project
cd mijn-project
Kies: TypeScript, Tailwind CSS, App Router
Stap 2: 3 Componenten bouwen met OpenCode
- Navbar - logo, links, responsive hamburger menu
- Hero - headline, subtitle, CTA button
- Keuze: Features, Footer, of ander component
Stap 3: Push naar GitHub
git add .
git commit -m "Initial components"
git push
Stap 4: Koppel aan Vercel
- Ga naar vercel.com/new
- Import Git Repository
- Selecteer je nieuwe repo
- 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:
- Uitleggen wat OpenCode is en het verschil tussen Terminal en Desktop App
- De OpenCode Desktop App installeren en configureren met OpenCode Zen (gratis)
- Werken met Plan mode en Build mode
- Een bestaand GitHub project openen en lokaal draaien (in de ingebouwde terminal)
- Wijzigingen maken met OpenCode en deployen via git push
- De @ file mention gebruiken voor context