2.9 KiB
2.9 KiB
Les 2: AI Code Assistants en OpenCode Desktop App
📋 Lesmateriaal nog niet uitgewerkt
De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
- Les02-Slide-Overzicht.md
- Les02-Lesplan.md
- Les02-Bijlage-A-Lesopdracht.md
- Les02-Bijlage-B-Huiswerkopdracht.md
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
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?
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)
React Opfrissen (30 min)
BELANGRIJK: Voordat je verder gaat, fris je React kennis op via EdHub.
- Bekijk de React basics modules
- Focus op: components, props, state, hooks
- Dit is essentieel voor de rest van de cursus!
Component Library Bouwen (1.5 uur)
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