93 lines
2.3 KiB
Markdown
93 lines
2.3 KiB
Markdown
# Les 2: AI Code Assistants en OpenCode Desktop App
|
|
|
|
## Hoofdstuk
|
|
**Hoofdstuk 1: Fundamentals** (Les 1-3)
|
|
|
|
## Beschrijving
|
|
Introductie tot standalone AI coding tools. OpenCode als eerste hands-on ervaring met AI-geïntegreerde development.
|
|
|
|
---
|
|
|
|
## Te Behandelen
|
|
|
|
### Theorie
|
|
- Verschil tussen chat-interfaces en geïntegreerde development tools
|
|
- OpenCode als standalone desktop applicatie (geen IDE nodig)
|
|
- Installatie en configuratie met gratis modellen (Ollama lokaal of Groq API)
|
|
- Interface verkenning: code editor, chat sidebar, terminal, file browser
|
|
- Best practices voor code generation prompts
|
|
- Iteratief werken met AI
|
|
- Wanneer welk model gebruiken (snelheid vs kwaliteit)
|
|
|
|
### Praktijk
|
|
- OpenCode installeren en configureren
|
|
- Gratis modellen testen (Ollama lokaal OF Groq API)
|
|
- Interface verkennen
|
|
- Component bouwen met AI assistance
|
|
|
|
---
|
|
|
|
## Tools
|
|
- OpenCode (standalone)
|
|
- Ollama/Groq API
|
|
- Vercel
|
|
|
|
---
|
|
|
|
## Lesopdracht (2 uur)
|
|
|
|
**Deel 1: Setup (45 min)**
|
|
- Installeer OpenCode desktop app
|
|
- Koppel een gratis model: Ollama lokaal OF Groq API
|
|
- Test beide opties en kies wat voor jou werkt
|
|
|
|
**Deel 2: Interface Verkenning**
|
|
- Probeer code completion
|
|
- Test chat functionaliteit
|
|
- Terminal commands
|
|
- File operations
|
|
|
|
**Deel 3: Component Bouwen (1u 15min)**
|
|
- Bouw een complete responsive navbar component
|
|
- Mobile hamburger menu
|
|
- Alleen met AI assistance via OpenCode
|
|
|
|
**Documentatie:**
|
|
- Aantal prompts gebruikt
|
|
- Iteraties nodig
|
|
- Wat werkte goed/niet
|
|
- Hoeveel tijd bespaard vs handmatig coderen
|
|
|
|
---
|
|
|
|
## Huiswerk (2 uur)
|
|
|
|
**Component Library Bouwen:**
|
|
Bouw een volledige landing page component library met OpenCode:
|
|
- Hero section
|
|
- Features section (3 cards met icons)
|
|
- Testimonial card
|
|
- CTA section met button
|
|
- Footer
|
|
|
|
**Vereisten:**
|
|
- Alles responsive met Tailwind CSS
|
|
- Test op mobile en desktop
|
|
|
|
**Blog Post (300 woorden):**
|
|
Schrijf over je ervaring:
|
|
- Wat ging goed/fout
|
|
- Limitations van gratis modellen vs betaalde
|
|
- Hoe voelt AI-assisted coding met OpenCode standalone app
|
|
- Zou je dit blijven gebruiken?
|
|
|
|
---
|
|
|
|
## Leerdoelen
|
|
Na deze les kan de student:
|
|
- OpenCode installeren en configureren
|
|
- Gratis AI modellen gebruiken (Ollama/Groq)
|
|
- De OpenCode interface effectief gebruiken
|
|
- Components bouwen met AI assistance
|
|
- Het verschil begrijpen tussen chat-interfaces en geïntegreerde tools
|