fix: update description
This commit is contained in:
Tim Rijkse
@@ -6,236 +6,203 @@
|
||||
**Deel 1: AI Foundations** (Les 1-4)
|
||||
|
||||
## Beschrijving
|
||||
Introductie tot OpenCode: een open-source AI coding assistant. Eerst de terminal versie (overweldigend maar krachtig), daarna de desktop app (gebruiksvriendelijker). Focus op keyboard shortcuts en Build vs Plan mode.
|
||||
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: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
|
||||
|
||||
---
|
||||
|
||||
## Te Behandelen
|
||||
|
||||
### Groepsdiscussie (15 min)
|
||||
Bespreek klassikaal de reflecties uit Les 1 - wat zijn de voor- en nadelen van AI die jullie zien? Hoe voelde de schets-naar-website workflow?
|
||||
|
||||
---
|
||||
|
||||
### Wat is OpenCode?
|
||||
|
||||
- Open-source AI coding assistant (26.000+ GitHub stars)
|
||||
- Werkt met meerdere AI providers: Groq (gratis), Ollama (lokaal), OpenAI, Anthropic
|
||||
- Twee versies: **Terminal UI** en **Desktop App**
|
||||
- Privacy-first: je code blijft lokaal tenzij je kiest voor cloud
|
||||
- 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)
|
||||
|
||||
---
|
||||
|
||||
### Demo: Terminal UI (10 min)
|
||||
|
||||
**Doel:** Laat zien hoe krachtig maar overweldigend de terminal versie is.
|
||||
|
||||
```bash
|
||||
# Installatie
|
||||
curl -fsSL https://opencode.ai/install | bash
|
||||
|
||||
# Of via npm
|
||||
npm i -g opencode-ai@latest
|
||||
|
||||
# Start
|
||||
opencode
|
||||
```
|
||||
|
||||
**Laat zien:**
|
||||
- TUI (Terminal User Interface) opent
|
||||
- Veel keyboard shortcuts
|
||||
- Krachtig maar... "dit ziet er complex uit, toch?"
|
||||
|
||||
---
|
||||
|
||||
### Demo: Desktop App (5 min)
|
||||
|
||||
**Doel:** Opluchting - "gelukkig is er ook dit!"
|
||||
|
||||
- Download van opencode.ai/download
|
||||
- Zelfde features, vriendelijkere interface
|
||||
- Keyboard shortcuts werken ook hier
|
||||
- **Dit gaan we gebruiken in de les**
|
||||
|
||||
---
|
||||
|
||||
### Keyboard Shortcuts (10 min)
|
||||
|
||||
Deze werken in BEIDE versies:
|
||||
### Keyboard Shortcuts
|
||||
|
||||
| Shortcut | Actie |
|
||||
|----------|-------|
|
||||
| `Ctrl+K` | Command dialog (belangrijkste!) |
|
||||
| `Ctrl+N` | Nieuwe sessie |
|
||||
| `Ctrl+A` | Wissel tussen sessies |
|
||||
| `Ctrl+O` | Model selectie |
|
||||
| `Ctrl+K` | Command menu |
|
||||
| `Tab` | Wissel Build/Plan mode |
|
||||
| `@` | File fuzzy search |
|
||||
| `Ctrl+S` | Stuur bericht |
|
||||
| `Esc` | Terug/annuleer |
|
||||
| `Ctrl+O` | Model selectie |
|
||||
|
||||
**Tip:** `@` is super handig - typ `@` en begin te typen om bestanden te zoeken.
|
||||
**Tip:** `@` is super handig - typ `@` en begin te typen om bestanden te zoeken en context te geven aan de AI.
|
||||
|
||||
---
|
||||
|
||||
### Build vs Plan Mode (10 min)
|
||||
### Build vs Plan Mode
|
||||
|
||||
OpenCode heeft twee "agents" - wissel met `Tab`:
|
||||
OpenCode heeft twee modes - wissel met `Tab`:
|
||||
|
||||
| Mode | Icoon | Wat het doet |
|
||||
|------|-------|--------------|
|
||||
| **Build** | 🔨 | Volledige toegang - kan code schrijven, bestanden aanpassen, commands uitvoeren |
|
||||
| **Plan** | 📋 | Read-only - analyseert code, maakt plannen, maar verandert niets |
|
||||
| **Plan** | 📋 | Read-only - leest, analyseert, verandert NIETS |
|
||||
| **Build** | 🔨 | Volledige toegang - schrijft code, maakt bestanden |
|
||||
|
||||
**Workflow tip:**
|
||||
1. Start in **Plan mode**: "Analyseer dit project en leg uit wat het doet"
|
||||
2. Wissel naar **Build mode**: "Voeg nu een navbar toe"
|
||||
**Workflow:**
|
||||
1. Start in **Plan mode**: "Analyseer dit project. Waar kan ik testimonials toevoegen?"
|
||||
2. Wissel naar **Build mode**: "Maak nu de Testimonials component"
|
||||
|
||||
---
|
||||
|
||||
### AI Modellen Instellen (10 min)
|
||||
### De Deployment Workflow
|
||||
|
||||
#### Optie 1: Groq (gratis cloud)
|
||||
1. Ga naar console.groq.com
|
||||
2. Maak account aan
|
||||
3. Genereer API key
|
||||
4. In OpenCode: `Ctrl+O` → Groq → Plak key
|
||||
De volledige workflow die jullie vandaag leren:
|
||||
|
||||
**Voordeel:** Snel, gratis, geen lokale setup
|
||||
**Nadeel:** Code gaat naar cloud
|
||||
1. **Wijzig code** met OpenCode
|
||||
2. **Test lokaal** op localhost:3000
|
||||
3. **Git add, commit, push**
|
||||
4. **Vercel pakt automatisch op** → Live!
|
||||
|
||||
#### Optie 2: Ollama (lokaal)
|
||||
1. Download ollama.ai
|
||||
2. `ollama pull llama3.2` (of ander model)
|
||||
3. In OpenCode: `Ctrl+O` → Ollama
|
||||
|
||||
**Voordeel:** Privacy, geen internet nodig
|
||||
**Nadeel:** Langzamer, gebruikt je hardware
|
||||
Jullie v0 project is al gekoppeld aan GitHub/Vercel, dus elke push wordt automatisch live.
|
||||
|
||||
---
|
||||
|
||||
### Wanneer AI Wel/Niet Vertrouwen (5 min)
|
||||
### Nieuw Project naar Vercel (voor huiswerk)
|
||||
|
||||
**Wel vertrouwen:**
|
||||
- Boilerplate code
|
||||
- Bekende patterns (React components, API routes)
|
||||
- Syntax die je vergeten bent
|
||||
|
||||
**Niet blind vertrouwen:**
|
||||
- Security-gevoelige code
|
||||
- Business logic
|
||||
- Complexe algoritmes
|
||||
|
||||
**Altijd:** Lees en begrijp de code voordat je het accepteert!
|
||||
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
|
||||
- Groq API (gratis)
|
||||
- Ollama (optioneel, lokaal)
|
||||
- OpenCode Terminal (`npm i -g opencode-ai@latest`)
|
||||
- OpenCode Zen (gratis AI, GLM 4.7)
|
||||
- Git
|
||||
- Vercel
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (2 uur)
|
||||
## Lesopdracht (85 min hands-on)
|
||||
|
||||
### Deel 1: Setup (30 min)
|
||||
### Doel
|
||||
Breid je v0 website uit met OpenCode. Leer de volledige workflow: lokaal draaien, uitbreiden met AI, deployen via git push.
|
||||
|
||||
1. Download en installeer OpenCode Desktop App
|
||||
2. Maak Groq account aan en genereer API key
|
||||
3. Configureer Groq in OpenCode (`Ctrl+O`)
|
||||
4. **Optioneel:** Installeer Ollama en test lokaal model
|
||||
### Stap 1: Project Lokaal Draaien (15 min)
|
||||
|
||||
### Deel 2: Interface Verkennen (30 min)
|
||||
|
||||
1. Open een bestaand project (of maak nieuwe folder)
|
||||
2. Oefen keyboard shortcuts:
|
||||
- `Ctrl+K` → bekijk beschikbare commands
|
||||
- `@` → zoek een bestand
|
||||
- `Ctrl+N` → nieuwe sessie
|
||||
- `Tab` → wissel Build/Plan mode
|
||||
3. Test Plan mode: "Analyseer dit project en beschrijf de structuur"
|
||||
|
||||
### Deel 3: Component Bouwen (60 min)
|
||||
|
||||
Bouw een responsive navbar met OpenCode:
|
||||
|
||||
**Stap 1 - Plan mode:**
|
||||
```
|
||||
Ik wil een responsive navbar bouwen met React en Tailwind.
|
||||
Desktop: logo links, links midden, button rechts.
|
||||
Mobile: hamburger menu.
|
||||
Analyseer wat ik nodig heb.
|
||||
```bash
|
||||
git clone https://github.com/jouw-username/jouw-project.git
|
||||
cd jouw-project
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
**Stap 2 - Build mode:**
|
||||
```
|
||||
Bouw nu de navbar component zoals we besproken hebben.
|
||||
Open http://localhost:3000 - je ziet je website!
|
||||
|
||||
### Stap 2: OpenCode Configureren (10 min)
|
||||
|
||||
```bash
|
||||
opencode
|
||||
```
|
||||
|
||||
**Vereisten:**
|
||||
- Logo placeholder links
|
||||
- 4 navigatie links
|
||||
- CTA button rechts
|
||||
- Mobile hamburger menu (werkend)
|
||||
- Tailwind CSS styling
|
||||
Selecteer gratis AI model:
|
||||
1. Druk `Ctrl+O`
|
||||
2. Kies "OpenCode Zen"
|
||||
3. Selecteer "GLM 4.7"
|
||||
|
||||
### Documentatie
|
||||
### Stap 3: Uitbreiden met OpenCode (45 min)
|
||||
|
||||
Noteer tijdens het bouwen:
|
||||
- Hoeveel prompts heb je gebruikt?
|
||||
- Welke iteraties waren nodig?
|
||||
- Wat werkte goed/niet?
|
||||
- Build vs Plan mode - wanneer gebruikte je welke?
|
||||
**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)
|
||||
|
||||
```bash
|
||||
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 (2 uur)
|
||||
## Huiswerk
|
||||
|
||||
### React Opfrissen (optioneel, 30 min)
|
||||
### Nieuw Project Vanaf Scratch
|
||||
|
||||
Als je merkt dat je React kennis is weggezakt:
|
||||
- Bekijk React Fundamentals op EdHub
|
||||
- Focus op: components, props, state, hooks
|
||||
- Dit is essentieel voor de rest van de cursus!
|
||||
Maak een **nieuw** project (niet je v0 project uitbreiden):
|
||||
|
||||
### Component Library Bouwen (1.5 uur)
|
||||
**Stap 1: Project aanmaken**
|
||||
```bash
|
||||
npx create-next-app@latest mijn-project
|
||||
cd mijn-project
|
||||
```
|
||||
Kies: TypeScript, Tailwind CSS, App Router
|
||||
|
||||
Bouw een landing page component library met OpenCode:
|
||||
**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
|
||||
|
||||
1. **Hero section** - grote headline, subtitle, CTA button, afbeelding
|
||||
2. **Features section** - 3 cards met icons en beschrijving
|
||||
3. **Testimonial card** - quote, naam, foto, bedrijf
|
||||
4. **CTA section** - headline, beschrijving, button
|
||||
5. **Footer** - links, social icons, copyright
|
||||
**Stap 3: Push naar GitHub**
|
||||
```bash
|
||||
git add .
|
||||
git commit -m "Initial components"
|
||||
git push
|
||||
```
|
||||
|
||||
**Vereisten:**
|
||||
- Gebruik Plan mode voor elk component eerst
|
||||
- Alles responsive met Tailwind CSS
|
||||
- Test op mobile en desktop
|
||||
**Stap 4: Koppel aan Vercel**
|
||||
1. Ga naar vercel.com/new
|
||||
2. Import Git Repository
|
||||
3. Selecteer je nieuwe repo
|
||||
4. Deploy
|
||||
|
||||
### Blog Post (300 woorden)
|
||||
### Reflectie (300 woorden)
|
||||
|
||||
Schrijf over je OpenCode ervaring:
|
||||
- Hoe voelde de terminal vs desktop app?
|
||||
Schrijf over je ervaring:
|
||||
- Hoe voelde werken met OpenCode?
|
||||
- Build vs Plan mode - wanneer gebruik je welke?
|
||||
- Groq vs Ollama - welke koos je en waarom?
|
||||
- Keyboard shortcuts - welke zijn het handigst?
|
||||
- Zou je OpenCode blijven gebruiken?
|
||||
|
||||
### Bonus
|
||||
|
||||
Probeer de terminal versie als je alleen desktop hebt gebruikt (of andersom).
|
||||
- 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:
|
||||
- OpenCode installeren en configureren (desktop en terminal)
|
||||
- Groq en/of Ollama als AI provider instellen
|
||||
- Keyboard shortcuts gebruiken voor efficiënt werken
|
||||
- Build vs Plan mode inzetten voor verschillende taken
|
||||
- De `@` file search gebruiken om context te geven
|
||||
- Components bouwen met AI assistance
|
||||
- Kritisch beoordelen wanneer AI output te vertrouwen is
|
||||
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
|
||||
|
||||
Reference in New Issue
Block a user