5.0 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. Focus op de terminal versie met OpenCode Zen (gratis, geen API key nodig). Studenten werken met hun bestaande v0 project en leren 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)
- OpenCode Zen: gratis AI modellen, geen API key nodig
- Terminal-based interface (TUI)
- 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 Terminal (
npm i -g opencode-ai@latest) - OpenCode Zen (gratis AI, GLM 4.7)
- Git
- Vercel
Lesopdracht (85 min hands-on)
Doel
Breid je v0 website uit met OpenCode. Leer de volledige workflow: lokaal draaien, uitbreiden 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 Configureren (10 min)
opencode
Selecteer gratis AI model:
- Druk
Ctrl+O - Kies "OpenCode Zen"
- Selecteer "GLM 4.7"
Stap 3: Uitbreiden met OpenCode (45 min)
Fase 1 - Plan mode (📋):
Analyseer dit project. Welke componenten zijn er?
Waar zou ik een testimonials sectie kunnen toevoegen?
Fase 2 - Build mode (🔨):
Kies minimaal 2 van deze opdrachten:
- Testimonials sectie - 3 cards, responsive
- Pricing sectie - 3 tiers, highlight middelste
- FAQ sectie - accordion style, animaties
- Verbeter bestaande componenten - hover effecten, scroll animaties
Stap 4: Deploy naar Vercel (10 min)
git add .
git commit -m "Add testimonials section"
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 waarom het efficiënter is dan de v0/ChatGPT workflow
- OpenCode installeren en configureren met OpenCode Zen (gratis)
- Werken met Plan mode en Build mode
- Een bestaand GitHub project clonen en lokaal draaien
- Wijzigingen maken met OpenCode en deployen via git push
- De @ file mention gebruiken voor context