fix: attachments

This commit is contained in:
Tim Rijkse
2026-02-02 18:57:58 +01:00
parent 6ee5bd8c41
commit 3b97792d86
2 changed files with 99 additions and 223 deletions

View File

@@ -1,192 +1,83 @@
# Bijlage B: Huiswerkopdracht Les 1 # Bijlage B: Huiswerkopdracht Les 1
## Reflectie, Use Cases en Tweede Schets ## Voor volgende week
**Cursus:** AI Fundamentals **Cursus:** AI Fundamentals
**Les:** 1 - Introductie AI & Large Language Models **Les:** 1 - Introductie AI & Large Language Models
**Geschatte tijd:** ~2-3 uur **Inleveren:** Via Teams, voor de volgende les
**Deadline:** Voor aanvang les 2
--- ---
## Inleiding ## Opdracht 1: Reflectie (500 woorden)
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. Schrijf een reflectie over je eerste ervaring met AI-tools.
### Deelvragen
Gebruik deze vragen als leidraad:
1. **Wat vond je verrassend aan werken met AI?**
- Was er iets dat je niet had verwacht?
- Wat viel je op aan de snelheid, kwaliteit of manier van werken?
2. **Wat ging goed? Wat vond je lastig?**
- Welke stappen in de workflow gingen soepel?
- Waar liep je tegenaan? Hoe heb je dat opgelost?
3. **Hoe zie je AI jouw werk als developer veranderen?**
- Wat betekent dit voor jouw toekomstige manier van werken?
- Welke taken zou je vaker met AI willen doen?
### Tips
- Wees eerlijk en persoonlijk
- Geef concrete voorbeelden uit de les
- Het gaat om jouw ervaring, er zijn geen foute antwoorden
- Schrijf in je eigen woorden (niet door AI laten schrijven!)
--- ---
## Deel 1: Reflectie (500 woorden) ## Opdracht 2: Breid je v0 website uit
Schrijf een reflectie over je eerste ervaringen met AI-tools voor development. Voeg minimaal **1 nieuwe sectie** toe aan je landingspagina van de les.
**Structuur:** ### Mogelijke secties
### Wat heb ik geleerd? - Pricing table
Beschrijf de belangrijkste inzichten uit de les. Denk aan: - Features overzicht
- 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 - Contact formulier
- Footer met links - Footer met links
- About section met team foto's - Team sectie
- Extra testimonials
- Newsletter signup
### Stap 2: Teken op papier ### Werkwijze
Maak een schets van je gekozen component. Denk aan:
- Layout (waar staat wat?)
- Tekst indicaties
- Buttons en links
- Afbeelding placeholders
### Stap 3: ChatGPT prompt Gebruik dezelfde workflow als in de les:
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 1. **Teken** de nieuwe sectie op papier
Gebruik de gegenereerde prompt in v0.dev. 2. **Upload** naar je ChatGPT Project
3. **Genereer** in v0.dev (vergeet niet: tech stack, kleuren, stijl!)
4. **Deploy** de update naar Vercel
### Stap 5: Deploy (optioneel) ### Op te leveren
Als je tijd hebt, deploy naar Vercel.
### Documentatie - Screenshot van je nieuwe schets
Lever de volgende screenshots/foto's aan: - Screenshot van het v0 resultaat
1. Foto van je papieren schets - Je updated Vercel URL
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 ## Inleveren
Lever de volgende onderdelen in via Teams chat: | Wat | Format |
|-----|--------|
| Reflectie | Word, PDF of direct in Teams |
| Screenshots | Afbeeldingen |
| Vercel URL | Link |
1. **Reflectie** (Word/PDF/Markdown) **Waar:** Teams
- Minimaal 500 woorden **Deadline:** Voor de volgende les
- 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.
--- ---

View File

@@ -30,8 +30,8 @@
| | | - Theorie over AI en LLMs (~45 min) | | | | - Theorie over AI en LLMs (~45 min) |
| | | - Praktijk: ChatGPT leren gebruiken (~25 min) | | | | - Praktijk: ChatGPT leren gebruiken (~25 min) |
| | | - Prompt Engineering basics (~15 min) | | | | - Prompt Engineering basics (~15 min) |
| | | - Live demo: van schets naar website (~27 min) | | | | - Live demo: van schets naar website (~20 min) |
| | | - Hands-on opdracht: jouw tekening wordt een website (~55 min) | | | | - Hands-on opdracht: bouw een complete landingspagina (~55 min) |
| | | | | | | |
| | | **Leerdoelen van vandaag** | | | | **Leerdoelen van vandaag** |
| | | 1. Begrijpen wat AI en LLMs zijn | | | | 1. Begrijpen wat AI en LLMs zijn |
@@ -135,93 +135,78 @@
| | | | | | | |
| | | **Clue: Specificeer altijd je tech stack, kleuren en stijl voor consistente resultaten.** | | | | **Clue: Specificeer altijd je tech stack, kleuren en stijl voor consistente resultaten.** |
| | | | | | | |
| **85-112** | **Live Demo: v0.dev** | *Instructievorm: live demonstratie (27 min)* | | **85-105** | **Live Demo: v0.dev** | *Instructievorm: live demonstratie (20 min)* |
| | | *Doel:* "Wow-moment" creëren met de schets-naar-website workflow | | | | *Doel:* "Wow-moment" creëren met de schets-naar-website workflow |
| | | | | | | |
| | | **Introductie v0.dev (3 min)** | | | | **Introductie v0.dev + Workflow (5 min)** |
| | | Leg uit wat v0.dev is: AI-powered UI generator van Vercel. | | | | Leg uit wat v0.dev is en de 5-stappen workflow: |
| | | |
| | | **De Slimme Workflow (2 min)** |
| | | Leg de 5-stappen workflow uit: |
| | | 1. TEKEN op papier | | | | 1. TEKEN op papier |
| | | 2. FOTO maken | | | | 2. FOTO maken |
| | | 3. Upload naar CHATGPT + beschrijf wensen (tech stack, kleuren, stijl) | | | | 3. Upload naar CHATGPT + beschrijf wensen |
| | | 4. ChatGPT maakt PROMPT | | | | 4. ChatGPT maakt PROMPT |
| | | 5. Plak in V0.DEV → Website! | | | | 5. Plak in V0.DEV → Website! |
| | | | | | | |
| | | **Demo 1: Schets maken (3 min)** | | | | **Live Demo (15 min)** |
| | | Teken live op papier een hero section: links tekst + button, rechts afbeelding placeholder. | | | | Voer de hele workflow uit in één vloeiende demo: |
| | | - Teken simpele hero section op papier |
| | | - Foto maken en uploaden naar ChatGPT Project |
| | | - Prompt genereren met tech stack, kleuren, stijl |
| | | - Kopiëren naar v0.dev en genereren |
| | | - Itereren met follow-up prompts |
| | | | | | | |
| | | **Demo 2: Foto naar ChatGPT (8 min)** | | | | **BELANGRIJK: Deployment NIET live doen!** |
| | | Upload foto en geef beschrijving mee: | | | | Leg kort uit hoe het werkt (Add Integration → GitHub → Deploy), maar studenten zoeken dit straks zelf uit. |
| | | - "Dit is een schets voor een hero section" |
| | | - Tech stack: React met Tailwind CSS |
| | | - Kleuren: Blauw thema met primary #2563EB |
| | | - Stijl: Modern, minimalistisch, professioneel |
| | | - "Maak hier een gedetailleerde prompt voor v0.dev van" |
| | | |
| | | **Demo 3: Prompt naar v0 (6 min)** |
| | | Kopieer de gegenereerde prompt naar v0.dev. Toon het resultaat. |
| | | |
| | | **Demo 4: Itereren (3 min)** |
| | | Verfijn met follow-up prompts. |
| | | |
| | | **Demo 5: Deployen (2 min)** |
| | | Doorloop het deployment proces: Add Integration → GitHub → Deploy. |
| | | | | | | |
| | | **Clue: De schets is je startpunt, ChatGPT is je vertaler, v0.dev is je bouwer.** | | | | **Clue: De schets is je startpunt, ChatGPT is je vertaler, v0.dev is je bouwer.** |
| | | | | | | |
| **112-165** | **Hands-on Opdracht** | *Werkvorm: individueel werken (53 min)* | | **105-160** | **Hands-on Opdracht** | *Werkvorm: individueel werken (55 min)* |
| | | *Doel:* Zelfstandig de workflow doorlopen | | | | *Doel:* Zelfstandig de workflow doorlopen |
| | | | | | | |
| | | **Opdracht introductie (5 min)** | | | | **Opdracht introductie (5 min)** |
| | | Deel de opdracht uit (zie Bijlage: Lesopdracht). Studenten gaan: | | | | Deel de opdracht uit (zie Bijlage: Lesopdracht). Studenten bouwen een **complete landingspagina**: |
| | | 1. **TEKENEN** op papier - hero section | | | | - Minimaal **3 secties** (hero, features, pricing, etc.) |
| | | 2. **FOTO** maken van schets | | | | - Minimaal **1 carousel** (image/testimonial slider) |
| | | 3. **CHATGPT** - upload + beschrijf (tech stack, kleuren, stijl) | | | | - Minimaal **1 accordion** (FAQ of uitklapbare content) |
| | | 4. **PROMPT** kopiëren | | | | - **Deployment:** Zelf uitzoeken! |
| | | 5. **V0.DEV** - genereren |
| | | 6. **DEPLOY** naar Vercel |
| | | | | | | |
| | | **Benodigdheden check** | | | | **Benodigdheden check** |
| | | Zorg dat iedereen papier en pen heeft! | | | | Zorg dat iedereen papier en pen heeft! |
| | | | | | | |
| | | **Zelfstandig werken (40 min)** | | | | **Zelfstandig werken (45 min)** |
| | | Loop rond en help studenten waar nodig. Let op: | | | | Loop rond en help studenten waar nodig. Let op: |
| | | - Kwaliteit van de schets (simpel is prima) | | | | - Hebben ze 3+ secties getekend? |
| | | - Carousel en accordion in de schets? |
| | | - Volledigheid van ChatGPT prompt (tech stack, kleuren, stijl) | | | | - Volledigheid van ChatGPT prompt (tech stack, kleuren, stijl) |
| | | - Problemen met v0.dev of deployment | | | | - Deployment: laat ze eerst zelf zoeken, help pas daarna |
| | | | | | | |
| | | **Tussentijdse check (halverwege)** | | | | **Tussentijdse check (halverwege)** |
| | | "Wie heeft al een prompt uit ChatGPT?" | | | | "Wie heeft 3+ secties? Carousel en accordion gepland?" |
| | | "Wie is al in v0.dev bezig?" | | | | "Begin met deployen als je v0 resultaat hebt!" |
| | | | | | | |
| | | **Clue: Het doel is de workflow leren, niet perfectie!** | | | | **Clue: Het doel is de workflow leren, niet perfectie!** |
| | | | | | | |
| **165-180** | **Afsluiting** | *Werkvorm: klassikaal gesprek (15 min)* | | **160-180** | **Afsluiting** | *Werkvorm: klassikaal gesprek (20 min)* |
| | | | | | | |
| | | **Korte terugblik (5 min)** | | | | **Resultaten delen (8 min)** |
| | | Vraag 2-3 studenten om te delen: | | | | Vraag 2-3 studenten om te delen: |
| | | - Hoe was de ervaring? | | | | - Laat je schets en v0 resultaat zien |
| | | - Leek het resultaat op je schets? | | | | - Wat ging goed? Wat was lastig? |
| | | | | | | |
| | | **Samenvatting (3 min)** | | | | **Samenvatting (4 min)** |
| | | - LLMs en next-token prediction | | | | - LLMs en next-token prediction |
| | | - Prompt engineering: tech stack, kleuren, stijl | | | | - Prompt engineering: tech stack, kleuren, stijl |
| | | - **De workflow: Schets → ChatGPT → v0.dev → Website** | | | | - **De workflow: Schets → ChatGPT → v0.dev → Website** |
| | | | | | | |
| | | **Huiswerk (5 min)** | | | | **Huiswerk (5 min)** |
| | | Deel de huiswerkopdracht (zie Bijlage: Huiswerkopdracht): | | | | 1. **Reflectie (500 woorden)** met deelvragen: |
| | | - Reflectie schrijven (500 woorden) | | | | - Wat vond je verrassend aan werken met AI? |
| | | - 5 AI use cases bedenken | | | | - Wat ging goed? Wat vond je lastig? |
| | | - **Tweede schets doorlopen met andere component** | | | | - Hoe zie je AI jouw werk als developer veranderen? |
| | | - Inleveren via Teams chat | | | | 2. **Breid je v0 website uit** met minimaal 1 nieuwe sectie |
| | | | | | | - Inleveren via Teams, voor volgende les |
| | | **Vooruitblik** |
| | | Volgende les: Prompt Engineering verdieping. |
| | | | | | | |
| | | **Afsluiting** | | | | **Afsluiting** |
| | | Bedank de studenten. Wijs op de beschikbaarheid voor vragen (Teams). | | | | Bedank de studenten. Tot volgende week! |
--- ---
@@ -229,14 +214,14 @@
| Blok | Onderwerp | Start | Eind | Duur | | Blok | Onderwerp | Start | Eind | Duur |
|------|-----------|-------|------|------| |------|-----------|-------|------|------|
| 1 | Welkom & Introductie | 0:00 | 0:13 | 13 min | | 1 | Welkom & Introductie | 0:00 | 0:15 | 15 min |
| 2 | Wat is AI? | 0:13 | 0:33 | 20 min | | 2 | Wat is AI? | 0:15 | 0:40 | 25 min |
| 3 | AI Landscape | 0:33 | 0:45 | 12 min | | 3 | AI Landscape | 0:40 | 0:50 | 10 min |
| 4 | ChatGPT in de Praktijk | 0:45 | 1:10 | 25 min | | 4 | ChatGPT in de Praktijk | 0:50 | 1:10 | 20 min |
| 5 | Prompt Engineering | 1:10 | 1:25 | 15 min | | 5 | Prompt Engineering | 1:10 | 1:25 | 15 min |
| 6 | Live Demo v0.dev | 1:25 | 1:52 | 27 min | | 6 | Live Demo v0.dev | 1:25 | 1:45 | 20 min |
| 7 | Hands-on Opdracht | 1:52 | 2:45 | 53 min | | 7 | Hands-on Opdracht | 1:45 | 2:40 | 55 min |
| 8 | Afsluiting | 2:45 | 3:00 | 15 min | | 8 | Afsluiting | 2:40 | 3:00 | 20 min |
**Totaal: 180 minuten (3 uur)** **Totaal: 180 minuten (3 uur)**
@@ -284,4 +269,4 @@ Observeer tijdens de les:
## Bijlagen ## Bijlagen
1. Bijlage A: Lesopdracht - Van Schets naar Website met AI 1. Bijlage A: Lesopdracht - Van Schets naar Website met AI
2. Bijlage B: Huiswerkopdracht - Reflectie, Use Cases en Tweede Schets 2. Bijlage B: Huiswerkopdracht - Reflectie en Website Uitbreiding