271 lines
7.1 KiB
Markdown
271 lines
7.1 KiB
Markdown
# Les 10: AI Tool Selection & Workflows
|
|
|
|
---
|
|
|
|
## Hoofdstuk
|
|
**Deel 3: AI Tooling & Prototyping** (Les 10-12)
|
|
|
|
## Beschrijving
|
|
Leer de sterke en zwakke punten van elke AI tool kennen. Ontwikkel een framework om de juiste tool te kiezen voor de juiste taak en bouw je eigen workflow.
|
|
|
|
---
|
|
|
|
## Te Behandelen
|
|
|
|
### Waarom Tool Selection Belangrijk Is
|
|
|
|
Je kent nu meerdere AI tools:
|
|
- ChatGPT (brainstormen, planning, uitleg)
|
|
- Claude (lange context, nuance, analyse)
|
|
- v0.dev (UI prototyping)
|
|
- OpenCode (code schrijven met project context)
|
|
|
|
**Het probleem:** Elke tool heeft sterke en zwakke punten. De juiste tool kiezen bespaart tijd en levert betere resultaten.
|
|
|
|
---
|
|
|
|
### Tool Vergelijking
|
|
|
|
| Tool | Sterk in | Minder sterk in | Kosten |
|
|
|------|----------|-----------------|--------|
|
|
| **ChatGPT** | Brainstormen, uitleg, planning, algemene kennis | Grote codebases, lange context | Gratis / Pro €20/maand |
|
|
| **Claude** | Lange documenten, nuance, analyse, veiligheid | Soms te voorzichtig, geen images genereren | Gratis / Pro $20/maand |
|
|
| **v0.dev** | UI components, snel prototypen, Tailwind | Complexe logica, backend | Gratis tier |
|
|
| **OpenCode** | Code schrijven, project context, terminal | Geen web access, geen images | Gratis |
|
|
|
|
---
|
|
|
|
### Tool Selection Framework
|
|
|
|
**Stap 1: Identificeer de taak**
|
|
- Wat wil je bereiken?
|
|
- Hoe complex is het?
|
|
- Hoeveel context is nodig?
|
|
|
|
**Stap 2: Kies de juiste tool**
|
|
|
|
```
|
|
Als je wilt... Gebruik...
|
|
─────────────────────────────────────────────────
|
|
Brainstormen over een idee → ChatGPT
|
|
Een lange codebase analyseren → Claude
|
|
Snel een UI component maken → v0.dev
|
|
Code schrijven met project context → OpenCode
|
|
Een complex document begrijpen → Claude
|
|
Uitleg krijgen over een concept → ChatGPT
|
|
React component met styling → v0.dev
|
|
Feature implementeren in project → OpenCode
|
|
```
|
|
|
|
---
|
|
|
|
### Workflow Patterns
|
|
|
|
**Pattern 1: Planning → Prototyping → Implementation**
|
|
```
|
|
1. ChatGPT: Brainstorm features, maak planning
|
|
2. v0.dev: Genereer UI prototypes
|
|
3. OpenCode: Implementeer met project context
|
|
```
|
|
|
|
**Pattern 2: Research → Design → Build**
|
|
```
|
|
1. ChatGPT/Claude: Research beste aanpak
|
|
2. v0.dev: Design components
|
|
3. OpenCode: Bouw en integreer
|
|
```
|
|
|
|
**Pattern 3: Quick Iteration**
|
|
```
|
|
1. v0.dev: Snel component genereren
|
|
2. OpenCode: Aanpassen en integreren
|
|
3. Repeat
|
|
```
|
|
|
|
---
|
|
|
|
### Praktijk: Dezelfde Taak, Drie Tools
|
|
|
|
**Opdracht:** Bouw een Contact Form component
|
|
|
|
**Met ChatGPT:**
|
|
```
|
|
Prompt: Ik wil een contact form maken met React en Tailwind.
|
|
Velden: naam, email, bericht. Validatie nodig.
|
|
Geef me de code en leg uit hoe het werkt.
|
|
```
|
|
→ Krijg: Uitleg + code, maar zonder project context
|
|
|
|
**Met v0.dev:**
|
|
```
|
|
Prompt: Modern contact form with name, email, message fields.
|
|
Tailwind styling, validation, responsive design.
|
|
```
|
|
→ Krijg: Visueel prototype, direct te gebruiken
|
|
|
|
**Met OpenCode:**
|
|
```
|
|
Prompt: Maak een ContactForm component in src/components/
|
|
met naam, email en bericht velden. Gebruik onze bestaande
|
|
Input en Button components. Voeg Zod validatie toe.
|
|
```
|
|
→ Krijg: Geïntegreerde code die past in je project
|
|
|
|
---
|
|
|
|
### Wanneer Combineer Je Tools?
|
|
|
|
**Scenario 1: Nieuwe feature bouwen**
|
|
1. ChatGPT: "Hoe zou je een dark mode toggle implementeren in React?"
|
|
2. v0.dev: "Dark mode toggle component with smooth transition"
|
|
3. OpenCode: "Integreer deze toggle in onze navbar, sla preference op in localStorage"
|
|
|
|
**Scenario 2: Bug oplossen**
|
|
1. OpenCode: Vraag om bug te identificeren
|
|
2. Claude: Als de foutmelding complex is, vraag om uitleg
|
|
3. OpenCode: Implementeer de fix
|
|
|
|
**Scenario 3: Nieuwe technologie leren**
|
|
1. ChatGPT: "Leg uit hoe React Server Components werken"
|
|
2. v0.dev: "Example of React Server Component with data fetching"
|
|
3. OpenCode: "Help me dit toe te passen in mijn Next.js project"
|
|
|
|
---
|
|
|
|
### Anti-Patterns (Wat Niet Te Doen)
|
|
|
|
**❌ Verkeerde tool voor de taak:**
|
|
- ChatGPT vragen om een hele app te bouwen → te weinig context
|
|
- v0.dev vragen om complexe backend logica → niet zijn sterke punt
|
|
- OpenCode vragen om design inspiratie → kan geen images maken
|
|
|
|
**❌ Heen en weer kopiëren zonder begrip:**
|
|
- Kopieer niet blind code van ChatGPT naar je project
|
|
- Begrijp eerst WAT de code doet
|
|
|
|
**❌ Dezelfde prompt in elke tool:**
|
|
- Pas je prompt aan per tool
|
|
- v0.dev wil visuele beschrijvingen
|
|
- OpenCode wil project-specifieke context
|
|
|
|
---
|
|
|
|
## Tools
|
|
- ChatGPT
|
|
- Claude
|
|
- v0.dev
|
|
- OpenCode/WebStorm
|
|
|
|
---
|
|
|
|
## Lesopdracht (2 uur)
|
|
|
|
### Tool Comparison Challenge
|
|
|
|
**Deel 1: Dezelfde Taak, Drie Tools (1 uur)**
|
|
|
|
Bouw een "Contact Form" component met alle drie de tools:
|
|
|
|
1. **ChatGPT (20 min)**
|
|
- Vraag om code + uitleg
|
|
- Noteer: hoe lang duurde het, kwaliteit output, wat miste?
|
|
|
|
2. **v0.dev (20 min)**
|
|
- Genereer visueel prototype
|
|
- Noteer: hoe snel, hoe mooi, hoe aanpasbaar?
|
|
|
|
3. **OpenCode (20 min)**
|
|
- Integreer in bestaand project
|
|
- Noteer: hoe goed past het, hoeveel aanpassing nodig?
|
|
|
|
**Deel 2: Analyse (30 min)**
|
|
|
|
Vul dit schema in:
|
|
|
|
| Aspect | ChatGPT | v0.dev | OpenCode |
|
|
|--------|---------|--------|----------|
|
|
| Tijd tot werkend component | | | |
|
|
| Kwaliteit code | | | |
|
|
| Visueel design | | | |
|
|
| Past in project | | | |
|
|
| Hoeveel aanpassing nodig | | | |
|
|
| Totaalscore (1-10) | | | |
|
|
|
|
**Deel 3: Workflow Documentatie (30 min)**
|
|
|
|
- Maak `docs/WORKFLOW.md` in je project
|
|
- Documenteer je ideale workflow per taaktype
|
|
- Inclusief template prompts voor elke tool
|
|
|
|
### Deliverable
|
|
- Screenshot van alle 3 contact forms
|
|
- Ingevuld vergelijkingsschema
|
|
- `docs/WORKFLOW.md` bestand
|
|
|
|
---
|
|
|
|
## Huiswerk (2 uur)
|
|
|
|
### Bouw Je Tool Selection Cheat Sheet
|
|
|
|
**Deel 1: Cheat Sheet Maken (1 uur)**
|
|
|
|
Maak een persoonlijke "Tool Selection Cheat Sheet" (1 pagina):
|
|
|
|
```markdown
|
|
# Mijn AI Tool Cheat Sheet
|
|
|
|
## Wanneer gebruik ik wat?
|
|
|
|
### ChatGPT
|
|
- ✅ Gebruik voor: [jouw ervaring]
|
|
- ❌ Niet voor: [jouw ervaring]
|
|
- 💡 Beste prompt tip: [jouw tip]
|
|
|
|
### Claude
|
|
- ✅ Gebruik voor: [jouw ervaring]
|
|
- ❌ Niet voor: [jouw ervaring]
|
|
- 💡 Beste prompt tip: [jouw tip]
|
|
|
|
### v0.dev
|
|
- ✅ Gebruik voor: [jouw ervaring]
|
|
- ❌ Niet voor: [jouw ervaring]
|
|
- 💡 Beste prompt tip: [jouw tip]
|
|
|
|
### OpenCode
|
|
- ✅ Gebruik voor: [jouw ervaring]
|
|
- ❌ Niet voor: [jouw ervaring]
|
|
- 💡 Beste prompt tip: [jouw tip]
|
|
```
|
|
|
|
**Deel 2: Testen op Nieuwe Taken (45 min)**
|
|
|
|
Test je cheat sheet op 2 nieuwe taken:
|
|
1. Bouw een "Testimonial Card" component
|
|
2. Voeg een "Dark Mode Toggle" toe
|
|
|
|
Per taak: kies tools op basis van cheat sheet, voer uit, update cheat sheet.
|
|
|
|
**Deel 3: Reflectie (15 min)**
|
|
|
|
Schrijf korte reflectie (400 woorden):
|
|
- Welke tool is jouw favoriet en waarom?
|
|
- Wanneer combineer je tools?
|
|
- Wat ga je anders doen na deze les?
|
|
|
|
### Deliverable
|
|
- Tool Selection Cheat Sheet (1 pagina)
|
|
- 2 gebouwde components
|
|
- Reflectie (400 woorden)
|
|
|
|
---
|
|
|
|
## Leerdoelen
|
|
Na deze les kan de student:
|
|
- De sterke en zwakke punten van elke AI tool benoemen
|
|
- De juiste tool kiezen voor een specifieke taak
|
|
- Meerdere tools combineren in een effectieve workflow
|
|
- Een persoonlijke workflow documenteren
|
|
- Template prompts schrijven per tool
|
|
- Kritisch evalueren welke tool wanneer het beste werkt
|