194 lines
5.4 KiB
Markdown
194 lines
5.4 KiB
Markdown
# Bijlage B: Huiswerkopdracht Les 1
|
|
|
|
## Reflectie, Use Cases en Tweede Schets
|
|
|
|
**Cursus:** AI Fundamentals
|
|
**Les:** 1 - Introductie AI & Large Language Models
|
|
**Geschatte tijd:** ~2-3 uur
|
|
**Deadline:** Voor aanvang les 2
|
|
|
|
---
|
|
|
|
## Inleiding
|
|
|
|
In de les heb je kennisgemaakt met AI en Large Language Models. Je hebt de workflow geleerd: van een tekening op papier, via ChatGPT, naar een werkende website in v0.dev. Met deze huiswerkopdracht ga je dieper nadenken over wat je hebt geleerd en pas je de workflow nog een keer toe.
|
|
|
|
---
|
|
|
|
## Deel 1: Reflectie (500 woorden)
|
|
|
|
Schrijf een reflectie over je eerste ervaringen met AI-tools voor development.
|
|
|
|
**Structuur:**
|
|
|
|
### Wat heb ik geleerd?
|
|
Beschrijf de belangrijkste inzichten uit de les. Denk aan:
|
|
- Wat wist je al over AI voordat je begon?
|
|
- Wat was nieuw of verrassend?
|
|
- Hoe kijk je nu anders naar AI dan voor de les?
|
|
|
|
### Mijn ervaring met de workflow
|
|
Reflecteer op de schets-naar-website workflow:
|
|
- Hoe voelde het om te beginnen met tekenen?
|
|
- Werkte ChatGPT goed als "vertaler" van je schets naar prompt?
|
|
- Hoe was het resultaat in v0.dev vergeleken met je verwachting?
|
|
- Wat zou je volgende keer anders doen?
|
|
|
|
### Kritische kanttekeningen
|
|
Wees kritisch:
|
|
- Wat zijn mogelijke risico's of beperkingen die je ziet?
|
|
- Wanneer zou je AI NIET gebruiken?
|
|
- Welke ethische overwegingen komen bij je op?
|
|
|
|
### Vooruitblik
|
|
Kijk vooruit:
|
|
- Hoe denk je AI in te gaan zetten in je werk/studie?
|
|
- Welke vaardigheden wil je nog ontwikkelen?
|
|
|
|
**Eisen:**
|
|
- Minimaal 500 woorden
|
|
- Persoonlijk en reflectief (niet alleen opsommen)
|
|
- In je eigen woorden (niet door AI laten schrijven!)
|
|
|
|
---
|
|
|
|
## Deel 2: AI Use Cases (5 stuks)
|
|
|
|
Bedenk **vijf concrete use cases** waarin AI jou kan helpen in je werk als (frontend) developer.
|
|
|
|
**Per use case beschrijf je:**
|
|
|
|
1. **De situatie:** Welk probleem of welke taak?
|
|
2. **De AI-toepassing:** Welke tool zou je gebruiken en hoe?
|
|
3. **Het verwachte resultaat:** Wat levert het op?
|
|
4. **Mogelijke valkuilen:** Waar moet je op letten?
|
|
|
|
**Voorbeeld:**
|
|
|
|
| **Use Case** | Responsive navigation menu maken |
|
|
|---|---|
|
|
| **Situatie** | Ik moet een hamburger menu bouwen dat werkt op alle schermformaten |
|
|
| **AI-toepassing** | Schets tekenen → ChatGPT voor prompt → v0.dev voor generatie |
|
|
| **Verwacht resultaat** | Werkende code die ik kan aanpassen aan mijn design |
|
|
| **Valkuilen** | ARIA-labels checken, testen of het echt responsive is |
|
|
|
|
**Denk aan use cases zoals:**
|
|
- Code schrijven of debuggen
|
|
- Documentatie genereren
|
|
- Designs omzetten naar code
|
|
- Tests schrijven
|
|
- Code reviews
|
|
- Learning nieuwe technologieën
|
|
- Refactoring
|
|
- Performance optimalisatie
|
|
|
|
---
|
|
|
|
## Deel 3: Tweede Schets → Website
|
|
|
|
Doorloop de workflow van de les **nog een keer**, maar nu voor een ander component.
|
|
|
|
### Stap 1: Kies een component
|
|
Kies een van deze opties (of verzin zelf iets):
|
|
- Features section (3-4 features met iconen)
|
|
- Pricing table (3 prijsplannen)
|
|
- Testimonials sectie
|
|
- Contact formulier
|
|
- Footer met links
|
|
- About section met team foto's
|
|
|
|
### Stap 2: Teken op papier
|
|
Maak een schets van je gekozen component. Denk aan:
|
|
- Layout (waar staat wat?)
|
|
- Tekst indicaties
|
|
- Buttons en links
|
|
- Afbeelding placeholders
|
|
|
|
### Stap 3: ChatGPT prompt
|
|
Upload je schets naar ChatGPT en beschrijf:
|
|
- **Tech stack:** React met Tailwind CSS
|
|
- **Kleuren:** Kies een kleurenschema (mag anders zijn dan de les)
|
|
- **Stijl:** Beschrijf de look & feel
|
|
- **Doel:** Voor welk type website is dit?
|
|
|
|
### Stap 4: v0.dev genereren
|
|
Gebruik de gegenereerde prompt in v0.dev.
|
|
|
|
### Stap 5: Deploy (optioneel)
|
|
Als je tijd hebt, deploy naar Vercel.
|
|
|
|
### Documentatie
|
|
Lever de volgende screenshots/foto's aan:
|
|
1. Foto van je papieren schets
|
|
2. Screenshot van je ChatGPT prompt
|
|
3. Screenshot van de gegenereerde ChatGPT output
|
|
4. Screenshot van het v0.dev resultaat
|
|
5. (Optioneel) Vercel URL
|
|
|
|
---
|
|
|
|
## Inleveren
|
|
|
|
Lever de volgende onderdelen in via Teams chat:
|
|
|
|
1. **Reflectie** (Word/PDF/Markdown)
|
|
- Minimaal 500 woorden
|
|
- Duidelijke structuur met kopjes
|
|
|
|
2. **Use Cases document** (Word/PDF/Markdown)
|
|
- 5 use cases in tabel of lijst formaat
|
|
|
|
3. **Tweede Schets documentatie**
|
|
- Foto van je schets
|
|
- Screenshots van ChatGPT conversatie
|
|
- Screenshot van v0.dev resultaat
|
|
- (Optioneel) Vercel URL
|
|
|
|
**Bestandsnaam:** `[Achternaam]_Les1_Huiswerk.pdf` of stuur los via Teams
|
|
|
|
---
|
|
|
|
## Beoordelingscriteria
|
|
|
|
| **Onderdeel** | **Punten** | **Criteria** |
|
|
|---|---|---|
|
|
| Reflectie | 35% | Diepgang, persoonlijke inzichten, kritische houding |
|
|
| Use Cases (5x) | 25% | Relevantie, creativiteit, volledigheid |
|
|
| Tweede Schets | 40% | Kwaliteit schets, specificaties in prompt, eindresultaat |
|
|
|
|
**Let op:** Deze opdracht wordt beoordeeld op **eigen inbreng**. Reflecties die duidelijk door AI zijn geschreven worden niet geaccepteerd.
|
|
|
|
---
|
|
|
|
## Tips
|
|
|
|
- **Start vroeg** - Gun jezelf tijd om na te denken
|
|
- **Wees eerlijk** - Er zijn geen foute reflecties, het gaat om jouw ervaring
|
|
- **Experimenteer** - Probeer verschillende specificaties in je prompt
|
|
- **Wees specifiek** - Geef duidelijke kleuren, stijl en tech stack mee
|
|
- **Documenteer goed** - Screenshots maken terwijl je bezig bent is makkelijker dan achteraf
|
|
|
|
---
|
|
|
|
## Checklist Tweede Schets
|
|
|
|
Zorg dat je bij je tweede schets het volgende hebt gespecificeerd:
|
|
|
|
| Element | Check |
|
|
|---------|-------|
|
|
| Tech stack (React + Tailwind) | ☐ |
|
|
| Kleuren (hex codes of beschrijving) | ☐ |
|
|
| Stijl/Look & Feel | ☐ |
|
|
| Type website/doelgroep | ☐ |
|
|
| Responsive design | ☐ |
|
|
|
|
---
|
|
|
|
## Vragen?
|
|
|
|
Heb je vragen over de opdracht? Stuur een bericht via Teams.
|
|
|
|
---
|
|
|
|
*Succes!*
|