5.4 KiB
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:
- De situatie: Welk probleem of welke taak?
- De AI-toepassing: Welke tool zou je gebruiken en hoe?
- Het verwachte resultaat: Wat levert het op?
- 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:
- Foto van je papieren schets
- Screenshot van je ChatGPT prompt
- Screenshot van de gegenereerde ChatGPT output
- Screenshot van het v0.dev resultaat
- (Optioneel) Vercel URL
Inleveren
Lever de volgende onderdelen in via Teams chat:
-
Reflectie (Word/PDF/Markdown)
- Minimaal 500 woorden
- Duidelijke structuur met kopjes
-
Use Cases document (Word/PDF/Markdown)
- 5 use cases in tabel of lijst formaat
-
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!