fix: debug challenge
This commit is contained in:
Tim Rijkse
493
Les03-Cursor-Basics/Les03-Bijlage-A-Lesopdracht.md
Normal file
493
Les03-Cursor-Basics/Les03-Bijlage-A-Lesopdracht.md
Normal file
@@ -0,0 +1,493 @@
|
|||||||
|
# Les 3: Cursor Basics - Lesopdracht (In-Class Assignment)
|
||||||
|
|
||||||
|
## Doelstelling
|
||||||
|
|
||||||
|
In deze les leer je hoe je **Cursor** effectief gebruikt om snel professionele componenten te bouwen. Je maakt een **NIEUW** Next.js project met Cursor Composer, genereert AI-gegenereerde cursorrules, en oefent met Tab Completion, Chat, Inline Edit en Composer.
|
||||||
|
|
||||||
|
**Eindresultaat:** Een werkende Next.js applicatie met Hero component en Feature Cards, volledig gebouwd met Cursor.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Timing
|
||||||
|
|
||||||
|
**Totaal: 85 minuten**
|
||||||
|
- Setup & Git: 10 min
|
||||||
|
- Skills & cursorrules: 10 min
|
||||||
|
- Hero Component (Composer): 20 min
|
||||||
|
- Feature Cards (Composer): 20 min
|
||||||
|
- Inline Edit styling: 15 min
|
||||||
|
- Git commit: 5 min
|
||||||
|
- Buffer: 5 min
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Voorbereiding
|
||||||
|
|
||||||
|
### Benodigde software
|
||||||
|
- **Cursor** (gedownload en geïnstalleerd van cursor.com)
|
||||||
|
- **Node.js** 18+ en npm
|
||||||
|
- **Git** (voor versiecontrole)
|
||||||
|
- **Terminal/Command Prompt**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Stap 1: Project aanmaken met Git (10 minuten)
|
||||||
|
|
||||||
|
### Stap 1.1: Nieuwe folder en Git init
|
||||||
|
|
||||||
|
Open Terminal/Command Prompt op je computer (niet in Cursor nog):
|
||||||
|
|
||||||
|
```bash
|
||||||
|
mkdir les3-cursor-project
|
||||||
|
cd les3-cursor-project
|
||||||
|
git init
|
||||||
|
```
|
||||||
|
|
||||||
|
### Stap 1.2: Open in Cursor
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cursor .
|
||||||
|
```
|
||||||
|
|
||||||
|
Dit opent je lege project in Cursor.
|
||||||
|
|
||||||
|
**Checkpoint 1:** Project is open in Cursor met lege folder.
|
||||||
|
|
||||||
|
### Stap 1.3: Create Next.js app in Cursor Terminal
|
||||||
|
|
||||||
|
Open de Terminal in Cursor met **Ctrl+`** (backtick):
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npx create-next-app@latest . --typescript --tailwind --app
|
||||||
|
```
|
||||||
|
|
||||||
|
Beantwoord alle vragen met **Yes (y)**:
|
||||||
|
- TypeScript? → **Yes**
|
||||||
|
- ESLint? → **Yes**
|
||||||
|
- Tailwind CSS? → **Yes**
|
||||||
|
- `src/` directory? → **No**
|
||||||
|
- App Router? → **Yes**
|
||||||
|
- Default import alias? → **Yes**
|
||||||
|
|
||||||
|
Dit duurt ~2-3 minuten. Wacht tot het klaar is.
|
||||||
|
|
||||||
|
**Checkpoint 2:** Next.js project is aangemaakt. Je ziet `app/`, `components/`, `package.json`, etc. in de file tree.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Stap 2: Cursor Skills & Docs (10 minuten)
|
||||||
|
|
||||||
|
### Stap 2.1: Open Settings
|
||||||
|
|
||||||
|
Klik op het **⚙️ Settings icoon** linksonder in Cursor.
|
||||||
|
|
||||||
|
### Stap 2.2: Activeer Docs
|
||||||
|
|
||||||
|
Ga naar **Features** → **Docs**
|
||||||
|
|
||||||
|
Voeg deze drie documenten toe (zoek en click Add):
|
||||||
|
1. **Next.js** (officiële docs)
|
||||||
|
2. **React** (officiële docs)
|
||||||
|
3. **Tailwind CSS** (officiële docs)
|
||||||
|
|
||||||
|
Dit helpt Cursor veel beter code te genereren omdat het toegang heeft tot de juiste documentatie.
|
||||||
|
|
||||||
|
### Stap 2.3: Controleer Tab Completion
|
||||||
|
|
||||||
|
Ga naar **Features** → **Completion**
|
||||||
|
- Zorg dat **Tab Completion** is ingeschakeld (dit is gratis!)
|
||||||
|
|
||||||
|
**Checkpoint 3:** Alle drie docs zijn zichtbaar in je Docs sidebar rechts. Tab Completion is enabled.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Stap 3: Generate cursorrules met Chat (1 request)
|
||||||
|
|
||||||
|
### Stap 3.1: Open Cursor Chat
|
||||||
|
|
||||||
|
Druk **Ctrl+L** (Windows/Linux) of **Cmd+L** (Mac).
|
||||||
|
|
||||||
|
Een chat panel opent aan de zijkant.
|
||||||
|
|
||||||
|
### Stap 3.2: Prompt voor .cursorrules
|
||||||
|
|
||||||
|
Typ deze prompt en druk Enter:
|
||||||
|
|
||||||
|
```
|
||||||
|
Je bent een expert Next.js developer. Genereer een .cursorrules bestand
|
||||||
|
voor een Next.js project met TypeScript, Tailwind CSS, en App Router.
|
||||||
|
|
||||||
|
Het bestand moet guidelines bevatten voor:
|
||||||
|
- Functional components en React hooks
|
||||||
|
- TypeScript best practices
|
||||||
|
- Tailwind CSS utilities (nooit inline styles)
|
||||||
|
- Bestandsnaamgeving (PascalCase voor components, camelCase voor utils)
|
||||||
|
- Folder structuur (/app, /components, /lib)
|
||||||
|
- Comments in het Nederlands
|
||||||
|
- Keine `any` types
|
||||||
|
|
||||||
|
Output het volledige .cursorrules bestand klaar om te copy-pasten.
|
||||||
|
```
|
||||||
|
|
||||||
|
Wacht op Cursor's antwoord.
|
||||||
|
|
||||||
|
### Stap 3.3: Copy de output
|
||||||
|
|
||||||
|
Cursor geeft je het complete .cursorrules bestand.
|
||||||
|
|
||||||
|
Selecteer alle code (Ctrl+A in de chat output) en kopieer het.
|
||||||
|
|
||||||
|
### Stap 3.4: Maak .cursorrules bestand
|
||||||
|
|
||||||
|
1. Rechtsklik op de root folder in de left sidebar
|
||||||
|
2. Klik "New File"
|
||||||
|
3. Noem het `.cursorrules` (met punt aan het begin!)
|
||||||
|
4. Plak de content
|
||||||
|
|
||||||
|
Save het bestand (Ctrl+S).
|
||||||
|
|
||||||
|
**Checkpoint 4:** `.cursorrules` bestand bestaat in je project root met goede guidelines.
|
||||||
|
|
||||||
|
**Request Budget: 1 van ~7 used**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Stap 4: Hero Component met Composer (20 minuten)
|
||||||
|
|
||||||
|
### Stap 4.1: Maak component file
|
||||||
|
|
||||||
|
1. Rechtsklik op de `app` folder
|
||||||
|
2. "New File"
|
||||||
|
3. Noem het `app/components/Hero.tsx`
|
||||||
|
|
||||||
|
(Dit maakt automatisch de `components` subfolder)
|
||||||
|
|
||||||
|
### Stap 4.2: Open Composer
|
||||||
|
|
||||||
|
Met het Hero.tsx file open, druk **Ctrl+Shift+I** (Windows/Linux) of **Cmd+Shift+I** (Mac).
|
||||||
|
|
||||||
|
De Composer panel opent.
|
||||||
|
|
||||||
|
### Stap 4.3: Geef instructie aan Composer
|
||||||
|
|
||||||
|
In Composer, typ:
|
||||||
|
|
||||||
|
```
|
||||||
|
Maak een Hero component (TypeScript, React functional component) met:
|
||||||
|
- Grote h1 heading: "Welkom bij Cursor"
|
||||||
|
- Subheading met beschrijvende tekst: "Bouw websites snel met AI"
|
||||||
|
- Een CTA button: "Aan de slag" (link naar #features)
|
||||||
|
- Responsive design: Tailwind CSS (md: breakpoint)
|
||||||
|
- Flexbox voor verticale centrering
|
||||||
|
- Dark mode compatible (dark: classes)
|
||||||
|
- Gradient background (blauw naar paars)
|
||||||
|
- Geen external dependencies
|
||||||
|
|
||||||
|
Geef alleen de component code, geen imports of exports statements voor buiten.
|
||||||
|
```
|
||||||
|
|
||||||
|
Cursor genereert het component.
|
||||||
|
|
||||||
|
### Stap 4.4: Accept of refine
|
||||||
|
|
||||||
|
Review de getoonde code. Klik **Accept All** (groene knop) om het in je bestand in te voegen.
|
||||||
|
|
||||||
|
**Checkpoint 5:** Hero.tsx file bevat een werkend Hero component met juiste structuur.
|
||||||
|
|
||||||
|
**Request Budget: 2 van ~7 used**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Stap 5: Feature Cards Component met Composer (20 minuten)
|
||||||
|
|
||||||
|
### Stap 5.1: Maak component file
|
||||||
|
|
||||||
|
1. Rechtsklik op `app` folder
|
||||||
|
2. "New File"
|
||||||
|
3. Noem het `app/components/FeatureCards.tsx`
|
||||||
|
|
||||||
|
### Stap 5.2: Open Composer
|
||||||
|
|
||||||
|
Druk **Ctrl+Shift+I** in dit nieuwe bestand.
|
||||||
|
|
||||||
|
### Stap 5.3: Composer prompt
|
||||||
|
|
||||||
|
```
|
||||||
|
Maak een FeatureCards component (TypeScript, React) dat:
|
||||||
|
- Een grid van 3 feature cards toont
|
||||||
|
- Responsive: 1 kolom op mobile, 3 kolommen op desktop (Tailwind grid)
|
||||||
|
- Elke card heeft:
|
||||||
|
* Een icon uit lucide-react (Package, Zap, Layers)
|
||||||
|
* Een h3 title
|
||||||
|
* Een description text
|
||||||
|
- Hover effect: transform scale-105 en shadow toename
|
||||||
|
- Cards hebben border en padding (Tailwind)
|
||||||
|
- Dark mode ready
|
||||||
|
- lucide-react is geïmporteerd bovenaan
|
||||||
|
|
||||||
|
Geef alleen de component code.
|
||||||
|
```
|
||||||
|
|
||||||
|
Composer genereert het component.
|
||||||
|
|
||||||
|
### Stap 5.4: Accept
|
||||||
|
|
||||||
|
Klik **Accept All**.
|
||||||
|
|
||||||
|
### Stap 5.5: Install lucide-react
|
||||||
|
|
||||||
|
In je Cursor Terminal (Ctrl+`):
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install lucide-react
|
||||||
|
```
|
||||||
|
|
||||||
|
Wacht tot npm klaar is.
|
||||||
|
|
||||||
|
**Checkpoint 6:** FeatureCards.tsx werkt, lucide-react is geïnstalleerd.
|
||||||
|
|
||||||
|
**Request Budget: 3 van ~7 used**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Stap 6: Integreer in Homepage (5 minuten)
|
||||||
|
|
||||||
|
### Stap 6.1: Open `app/page.tsx`
|
||||||
|
|
||||||
|
Dit is je homepage.
|
||||||
|
|
||||||
|
### Stap 6.2: Update de content
|
||||||
|
|
||||||
|
Vervang de bestaande content (of voeg toe aan het bestand) met:
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import Hero from './components/Hero';
|
||||||
|
import FeatureCards from './components/FeatureCards';
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
return (
|
||||||
|
<main className="min-h-screen">
|
||||||
|
<Hero />
|
||||||
|
<section className="py-20 bg-gray-50 dark:bg-gray-900">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<h2 className="text-4xl font-bold mb-12 text-center">Features</h2>
|
||||||
|
<FeatureCards />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Save (Ctrl+S).
|
||||||
|
|
||||||
|
### Stap 6.3: Test in browser
|
||||||
|
|
||||||
|
In Cursor Terminal:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Open `http://localhost:3000` in je browser.
|
||||||
|
|
||||||
|
Je ziet nu: Hero → Features section met 3 cards.
|
||||||
|
|
||||||
|
**Checkpoint 7:** Website draait lokaal en ziet er netjes uit.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Stap 7: Styling Refinement met Inline Edit (15 minuten)
|
||||||
|
|
||||||
|
Nu gebruiken we **Inline Edit** (Ctrl+K) voor kleine styling tweaks.
|
||||||
|
|
||||||
|
### Stap 7.1: Hero button styling
|
||||||
|
|
||||||
|
1. Open `app/components/Hero.tsx`
|
||||||
|
2. Klik ergens in de button JSX
|
||||||
|
3. Druk **Ctrl+K**
|
||||||
|
4. Type:
|
||||||
|
|
||||||
|
```
|
||||||
|
Voeg een hover effect toe aan de button:
|
||||||
|
- Scale slightly bigger on hover
|
||||||
|
- Change background color smoothly
|
||||||
|
- Add smooth transition
|
||||||
|
```
|
||||||
|
|
||||||
|
5. Review de suggestie, klik Accept
|
||||||
|
|
||||||
|
### Stap 7.2: Card shadows verbeteren
|
||||||
|
|
||||||
|
1. Open `app/components/FeatureCards.tsx`
|
||||||
|
2. Selecteer een card div
|
||||||
|
3. Druk **Ctrl+K**
|
||||||
|
4. Type:
|
||||||
|
|
||||||
|
```
|
||||||
|
Voeg een mooier shadow effect toe aan de cards:
|
||||||
|
- Larger shadow on hover
|
||||||
|
- Smooth transition
|
||||||
|
- Better depth perception
|
||||||
|
```
|
||||||
|
|
||||||
|
5. Accept
|
||||||
|
|
||||||
|
### Stap 7.3: Typography verbeteren
|
||||||
|
|
||||||
|
1. Open `app/page.tsx`
|
||||||
|
2. Druk **Ctrl+K**
|
||||||
|
3. Type:
|
||||||
|
|
||||||
|
```
|
||||||
|
Maak de "Features" heading groter en mooier:
|
||||||
|
- Groter font size
|
||||||
|
- Betere kleur gradient
|
||||||
|
```
|
||||||
|
|
||||||
|
5. Accept
|
||||||
|
|
||||||
|
Refresh je browser (F5) om de changes te zien.
|
||||||
|
|
||||||
|
**Checkpoint 8:** Styling ziet er gepolijst uit, hover effects werken.
|
||||||
|
|
||||||
|
**Request Budget: 4-5 van ~7 used**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Stap 8: Git Commit (5 minuten)
|
||||||
|
|
||||||
|
### Stap 8.1: Open Source Control
|
||||||
|
|
||||||
|
Druk **Ctrl+Shift+G** in Cursor.
|
||||||
|
|
||||||
|
Source Control panel opent links.
|
||||||
|
|
||||||
|
### Stap 8.2: Stage alle bestanden
|
||||||
|
|
||||||
|
Klik op het **+** icoon bij "Changes" of druk **Ctrl+Shift+A**.
|
||||||
|
|
||||||
|
Alle bestanden worden staged (groen).
|
||||||
|
|
||||||
|
### Stap 8.3: Write commit message
|
||||||
|
|
||||||
|
In het message veld, typ:
|
||||||
|
|
||||||
|
```
|
||||||
|
feat: Build Hero and FeatureCards components with Cursor Composer
|
||||||
|
```
|
||||||
|
|
||||||
|
### Stap 8.4: Commit
|
||||||
|
|
||||||
|
Druk **Ctrl+Enter** of klik de ✓ button.
|
||||||
|
|
||||||
|
Je commit is gemaakt!
|
||||||
|
|
||||||
|
**Checkpoint 9:** Git commit is succesvol (geen errors).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Keyboard Shortcuts Reference
|
||||||
|
|
||||||
|
| Actie | Windows | Mac |
|
||||||
|
|-------|---------|-----|
|
||||||
|
| **Cursor Chat** | Ctrl+L | Cmd+L |
|
||||||
|
| **Composer** | Ctrl+Shift+I | Cmd+Shift+I |
|
||||||
|
| **Inline Edit (quick fix)** | Ctrl+K | Cmd+K |
|
||||||
|
| **Terminal** | Ctrl+` | Cmd+` |
|
||||||
|
| **Command Palette** | Ctrl+Shift+P | Cmd+Shift+P |
|
||||||
|
| **Source Control** | Ctrl+Shift+G | Cmd+Shift+G |
|
||||||
|
| **Save** | Ctrl+S | Cmd+S |
|
||||||
|
| **Tab Completion** | Tab | Tab |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Request Budget Tracking
|
||||||
|
|
||||||
|
Je hebt **~7 requests** beschikbaar in deze les:
|
||||||
|
|
||||||
|
| Fase | Type | Requests |
|
||||||
|
|------|------|----------|
|
||||||
|
| cursorrules generatie | Chat | 1 |
|
||||||
|
| Hero Component | Composer | 1 |
|
||||||
|
| FeatureCards Component | Composer | 1 |
|
||||||
|
| Button styling tweak | Inline Edit | 0.5 |
|
||||||
|
| Card styling tweak | Inline Edit | 0.5 |
|
||||||
|
| Typography tweak | Inline Edit | 0.5 |
|
||||||
|
| Buffer/extra | - | 2.5 |
|
||||||
|
|
||||||
|
**💡 Pro tip:** Gebruik **Tab Completion** (gratis!) voor:
|
||||||
|
- Imports toevoegen
|
||||||
|
- Props schrijven
|
||||||
|
- Repetitieve code (zelfde classNames herhalen)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Troubleshooting
|
||||||
|
|
||||||
|
### Probleem: "Module not found: lucide-react"
|
||||||
|
**Oplossing:**
|
||||||
|
```bash
|
||||||
|
npm install lucide-react
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
(Herstart je dev server na npm install)
|
||||||
|
|
||||||
|
### Probleem: Composer stelt rare dingen voor
|
||||||
|
**Oplossing:** Wees specifieker in je prompt. Verwijs naar bestaande code:
|
||||||
|
- "Voeg lucide-react icons toe" (voldoende duidelijk)
|
||||||
|
- "Zorg dat het met TypeScript werkt" (specifieer)
|
||||||
|
|
||||||
|
### Probleem: Inline Edit accepteert niet
|
||||||
|
**Oplossing:** Klik de groene ✓ knop of druk Ctrl+Enter
|
||||||
|
|
||||||
|
### Probleem: `npm run dev` geeft error
|
||||||
|
**Stappen:**
|
||||||
|
1. Controleer dat je in de juiste folder bent: `pwd`
|
||||||
|
2. Controleer node versie: `node --version` (moet 18+ zijn)
|
||||||
|
3. Verwijder en herinstalleer dependencies:
|
||||||
|
```bash
|
||||||
|
rm -rf node_modules package-lock.json
|
||||||
|
npm install
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### Probleem: Port 3000 al in gebruik
|
||||||
|
```bash
|
||||||
|
npm run dev -- -p 3001
|
||||||
|
# Openen: http://localhost:3001
|
||||||
|
```
|
||||||
|
|
||||||
|
### Probleem: Git werkt niet
|
||||||
|
**Controleer:**
|
||||||
|
- Ben je in de juiste folder? `pwd` moet je project folder zijn
|
||||||
|
- Bestaat `.git` folder? `ls -la .git`
|
||||||
|
- Zijn je bestanden getracked? `git status`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Checklist - Vinkje alles af voor je klaar bent
|
||||||
|
|
||||||
|
- [ ] Git init en create-next-app uitgevoerd
|
||||||
|
- [ ] Cursor Skills (Next.js, React, Tailwind) geactiveerd
|
||||||
|
- [ ] `.cursorrules` bestand gegenereerd en in root geplaatst
|
||||||
|
- [ ] `app/components/Hero.tsx` aangemaakt met Composer
|
||||||
|
- [ ] `app/components/FeatureCards.tsx` aangemaakt met Composer
|
||||||
|
- [ ] lucide-react geïnstalleerd via npm
|
||||||
|
- [ ] Componenten geïmporteerd in `app/page.tsx`
|
||||||
|
- [ ] `npm run dev` draait zonder errors
|
||||||
|
- [ ] Website ziet er goed uit op http://localhost:3000
|
||||||
|
- [ ] Styling verfijnd met Inline Edit (minimaal 2 aanpassingen)
|
||||||
|
- [ ] Git commit gemaakt met duidelijke message
|
||||||
|
- [ ] Alle bestanden zijn saved (geen rode stippen in sidebar)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Volgende stappen
|
||||||
|
|
||||||
|
**Voor volgende les:**
|
||||||
|
- Zorg dat `npm run dev` nog werkt
|
||||||
|
- Download het huiswerk zip bestand van Teams (les3-debug-challenge.zip)
|
||||||
|
- Voorkom dat je project files verwijdert/opslaanslecht
|
||||||
|
|
||||||
|
**Veel succes! 🚀**
|
||||||
375
Les03-Cursor-Basics/Les03-Bijlage-B-Huiswerkopdracht.md
Normal file
375
Les03-Cursor-Basics/Les03-Bijlage-B-Huiswerkopdracht.md
Normal file
@@ -0,0 +1,375 @@
|
|||||||
|
# Les 3: Cursor Basics - Huiswerkopdracht (Homework - DEBUG CHALLENGE)
|
||||||
|
|
||||||
|
**Deadline:** Vóór Les 4
|
||||||
|
|
||||||
|
**Type:** Debug Challenge - Je krijgt een kapot Next.js project en moet het repareren met Cursor.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Introductie
|
||||||
|
|
||||||
|
Dit huiswerk is anders dan gewoon code schrijven. Je krijgt een **intentioneel kapot** Next.js project dat je met Cursor moet debuggen.
|
||||||
|
|
||||||
|
Je leert:
|
||||||
|
- Errors opsporen met Cursor
|
||||||
|
- De Terminal gebruiken voor error messages
|
||||||
|
- Inline styles naar Tailwind CSS converteren
|
||||||
|
- Missing imports en dependencies vinden
|
||||||
|
- ESLint warnings beheren
|
||||||
|
|
||||||
|
**Geschatte tijd:** 1.5-2 uur
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Stap 0: Download het Zip-bestand
|
||||||
|
|
||||||
|
Download `les3-debug-challenge.zip` van Teams.
|
||||||
|
|
||||||
|
Unzip het bestand:
|
||||||
|
```bash
|
||||||
|
unzip les3-debug-challenge.zip
|
||||||
|
cd les3-debug-challenge
|
||||||
|
```
|
||||||
|
|
||||||
|
Open het in Cursor:
|
||||||
|
```bash
|
||||||
|
cursor .
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Wat je tegenkomt
|
||||||
|
|
||||||
|
Het project `les3-debug-challenge` bevat deze INTENTIONELE ERRORS:
|
||||||
|
|
||||||
|
### Error Type 1: Missing Dependencies
|
||||||
|
|
||||||
|
**Wat:** `lucide-react` wordt gebruikt in `components/HeroIcon.tsx`, maar staat niet in `package.json`.
|
||||||
|
|
||||||
|
**Hoe te vinden:**
|
||||||
|
- Open Terminal in Cursor (Ctrl+`)
|
||||||
|
- Run: `npm run dev`
|
||||||
|
- Je ziet: `Error: Module not found: lucide-react`
|
||||||
|
|
||||||
|
**Hoe te fixen:**
|
||||||
|
```bash
|
||||||
|
npm install lucide-react
|
||||||
|
```
|
||||||
|
|
||||||
|
### Error Type 2: Syntax Errors (typos, missing closing tags)
|
||||||
|
|
||||||
|
**Wat:** Een component heeft een vergeten closing JSX tag of import typo.
|
||||||
|
|
||||||
|
**Bijv. in `app/page.tsx`:**
|
||||||
|
```tsx
|
||||||
|
<Hero // Missing closing >
|
||||||
|
```
|
||||||
|
|
||||||
|
Of in imports:
|
||||||
|
```tsx
|
||||||
|
import { Button } from '@/componenst/Button' // typo: componenst
|
||||||
|
```
|
||||||
|
|
||||||
|
**Hoe te vinden:**
|
||||||
|
- Terminal errors: `SyntaxError` of `Cannot find module`
|
||||||
|
- Cursor geeft rode underlines in editor
|
||||||
|
- Gebruik Cursor Chat (Ctrl+L) om de error uit te leggen
|
||||||
|
|
||||||
|
**Hoe te fixen:**
|
||||||
|
1. Kijk naar de regel number in error
|
||||||
|
2. Open dat bestand
|
||||||
|
3. Controleer imports en JSX syntax
|
||||||
|
4. Fix typos
|
||||||
|
5. Save en test: `npm run dev`
|
||||||
|
|
||||||
|
### Error Type 3: Inline Styles (moeten naar Tailwind)
|
||||||
|
|
||||||
|
**Wat:** Een component gebruikt `style={{...}}` ipv Tailwind classes.
|
||||||
|
|
||||||
|
**Bijv. in `components/Card.tsx`:**
|
||||||
|
```tsx
|
||||||
|
<div style={{
|
||||||
|
padding: '20px',
|
||||||
|
backgroundColor: '#f0f0f0',
|
||||||
|
borderRadius: '8px',
|
||||||
|
border: '1px solid #ccc'
|
||||||
|
}}>
|
||||||
|
Content
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
**Hoe te fixen:** Gebruik Cursor **Inline Edit (Ctrl+K)**
|
||||||
|
|
||||||
|
1. Open het bestand
|
||||||
|
2. Selecteer de `style={{...}}` block
|
||||||
|
3. Druk **Ctrl+K**
|
||||||
|
4. Type:
|
||||||
|
|
||||||
|
```
|
||||||
|
Converteer deze inline styles naar Tailwind CSS classes.
|
||||||
|
Verwijder de style prop en voeg className toe.
|
||||||
|
```
|
||||||
|
|
||||||
|
5. Cursor converteerd het naar:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
<div className="p-5 bg-gray-100 rounded-lg border border-gray-300">
|
||||||
|
Content
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
6. Accept en verify
|
||||||
|
|
||||||
|
**Tabel: Inline Styles → Tailwind Mapping**
|
||||||
|
| Inline Style | Tailwind Class |
|
||||||
|
|--------------|----------------|
|
||||||
|
| `padding: '20px'` | `p-5` (4px × 5) |
|
||||||
|
| `backgroundColor: '#f0f0f0'` | `bg-gray-100` |
|
||||||
|
| `borderRadius: '8px'` | `rounded-lg` |
|
||||||
|
| `border: '1px solid #ccc'` | `border border-gray-300` |
|
||||||
|
| `marginBottom: '16px'` | `mb-4` |
|
||||||
|
| `display: 'flex'` | `flex` |
|
||||||
|
| `justifyContent: 'center'` | `justify-center` |
|
||||||
|
|
||||||
|
### Error Type 4: Missing Imports
|
||||||
|
|
||||||
|
**Wat:** Een component wordt gebruikt maar niet geïmporteerd.
|
||||||
|
|
||||||
|
**Bijv. in `app/page.tsx`:**
|
||||||
|
```tsx
|
||||||
|
export default function Home() {
|
||||||
|
return <FeatureCards /> // FeatureCards is niet geïmporteerd!
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Hoe te vinden:**
|
||||||
|
- Cursor geeft rode underline: "Cannot find name 'FeatureCards'"
|
||||||
|
- Terminal error bij `npm run dev`
|
||||||
|
|
||||||
|
**Hoe te fixen:**
|
||||||
|
- Voeg import bovenaan toe:
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
import FeatureCards from '@/components/FeatureCards';
|
||||||
|
```
|
||||||
|
|
||||||
|
Of gebruik Cursor's **Quick Fix** (Ctrl+. op de fout).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Debug-aanpak stap-voor-stap
|
||||||
|
|
||||||
|
### Stap 1: Installeer eerst alles
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Stap 2: Start dev server
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Lees ALLE errors van boven naar beneden.
|
||||||
|
|
||||||
|
### Stap 3: Fix errors één voor één
|
||||||
|
|
||||||
|
**Beginnen bij:**
|
||||||
|
1. **npm install errors** (missing packages)
|
||||||
|
2. **Syntax errors** (ESLint, typos)
|
||||||
|
3. **Runtime errors** (module not found, missing imports)
|
||||||
|
4. **Styling issues** (inline styles)
|
||||||
|
|
||||||
|
### Stap 4: Use Cursor Chat voor moeilijke errors
|
||||||
|
|
||||||
|
Druk **Ctrl+L** en beschrijf de error:
|
||||||
|
|
||||||
|
```
|
||||||
|
Ik krijg deze error:
|
||||||
|
Error: Cannot find module 'lucide-react'
|
||||||
|
|
||||||
|
Hoe fix ik dit?
|
||||||
|
```
|
||||||
|
|
||||||
|
Cursor helpt je.
|
||||||
|
|
||||||
|
### Stap 5: Verify in browser
|
||||||
|
|
||||||
|
Na elke fix:
|
||||||
|
1. Zorg dat `npm run dev` draait zonder errors
|
||||||
|
2. Open http://localhost:3000
|
||||||
|
3. Check visueel dat alles werkt
|
||||||
|
4. Geen rode errors in console (F12 → Console tab)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Checklist van errors om op te lossen
|
||||||
|
|
||||||
|
Zorg dat je ALLE deze punten fixt:
|
||||||
|
|
||||||
|
- [ ] **npm install errors** - Alle missing dependencies geïnstalleerd
|
||||||
|
- [ ] **Syntax errors** - Alle closing tags toegevoegd, imports gecorrigeerd
|
||||||
|
- [ ] **Missing imports** - Alle componenten die gebruikt worden zijn geïmporteerd
|
||||||
|
- [ ] **Inline styles** - Minimaal 3 inline styles → Tailwind conversions
|
||||||
|
- [ ] **ESLint warnings** - Geen rode/oranje squiggly lines meer
|
||||||
|
- [ ] **Browser console** - Geen rood errors (F12)
|
||||||
|
- [ ] **Visual check** - Website ziet er correct uit
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tips per error-type
|
||||||
|
|
||||||
|
### Voor Missing Dependencies
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Check welke packages ontbreken
|
||||||
|
npm install
|
||||||
|
|
||||||
|
# Of installeer handmatig
|
||||||
|
npm install [package-name]
|
||||||
|
```
|
||||||
|
|
||||||
|
### Voor Syntax Errors
|
||||||
|
|
||||||
|
- **Controleer imports:** `import X from '@/components/X'` (check spelling)
|
||||||
|
- **Controleer JSX closing:** Elke `<div>` moet `</div>` hebben
|
||||||
|
- **Controleer quotes:** Tailwind classes moeten in dubbele quotes: `className="..."`
|
||||||
|
|
||||||
|
### Voor Inline Styles → Tailwind
|
||||||
|
|
||||||
|
Gebruik altijd Inline Edit (Ctrl+K):
|
||||||
|
1. Select de `style={{...}}` code
|
||||||
|
2. Ctrl+K
|
||||||
|
3. Type: "Convert to Tailwind classes"
|
||||||
|
4. Accept
|
||||||
|
|
||||||
|
Tailwind Cheat Sheet:
|
||||||
|
- Padding: `p-2`, `p-4`, `p-8` (2, 4, 8 × 4px)
|
||||||
|
- Margin: `m-2`, `mb-4`, `mt-2`
|
||||||
|
- Background: `bg-white`, `bg-gray-100`, `bg-blue-500`
|
||||||
|
- Border: `border`, `border-2`, `border-gray-300`
|
||||||
|
- Radius: `rounded`, `rounded-lg`, `rounded-full`
|
||||||
|
- Display: `flex`, `grid`, `block`
|
||||||
|
- Colors: `text-white`, `bg-red-500`, `border-blue-300`
|
||||||
|
|
||||||
|
### Voor Missing Imports
|
||||||
|
|
||||||
|
Cursor's Quick Fix (Ctrl+.) werkt vaak:
|
||||||
|
1. Klik op de rode error
|
||||||
|
2. Druk Ctrl+.
|
||||||
|
3. "Add import"
|
||||||
|
|
||||||
|
Of manual:
|
||||||
|
```tsx
|
||||||
|
import ComponentNaam from '@/components/ComponentNaam';
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Submitting Your Work
|
||||||
|
|
||||||
|
### Voor Les 4:
|
||||||
|
|
||||||
|
Maak een **GitHub commit** en **push** het:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
git add .
|
||||||
|
git commit -m "fix: debug all errors and convert styles to Tailwind"
|
||||||
|
git push
|
||||||
|
```
|
||||||
|
|
||||||
|
Post in Teams:
|
||||||
|
1. **GitHub link** naar je debugged project
|
||||||
|
2. **Screenshot** van je werkende website (http://localhost:3000)
|
||||||
|
3. **Korte beschrijving:** Welke errors heb je gerepareerd?
|
||||||
|
```
|
||||||
|
- Fixed missing lucide-react dependency
|
||||||
|
- Fixed typo in import statement (componenst → components)
|
||||||
|
- Converted 5 inline styles to Tailwind classes
|
||||||
|
- Added missing Hero import to page.tsx
|
||||||
|
- Verified no ESLint errors
|
||||||
|
```
|
||||||
|
|
||||||
|
### Checklist voor inlevering
|
||||||
|
|
||||||
|
- [ ] Alle npm/syntax/import errors zijn fixed
|
||||||
|
- [ ] `npm run dev` draait zonder errors
|
||||||
|
- [ ] http://localhost:3000 toont de website correct
|
||||||
|
- [ ] Browser console (F12) toont geen errors
|
||||||
|
- [ ] Minimaal 3 inline styles zijn converted naar Tailwind
|
||||||
|
- [ ] Git commit is gemaakt
|
||||||
|
- [ ] GitHub link gepost in Teams
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Bonus: Maak je eigen component (optioneel)
|
||||||
|
|
||||||
|
Na alle errors te hebben opgelost, voeg je **een eigen component** toe:
|
||||||
|
|
||||||
|
Ideeën:
|
||||||
|
- Een "Newsletter Signup" sectie
|
||||||
|
- Een "Call to Action" button bar
|
||||||
|
- Een "Stats" sectiie met cijfers
|
||||||
|
- Een "Testimonials" carousel
|
||||||
|
- Een "FAQ" sectie met accordions
|
||||||
|
|
||||||
|
**Hoe:**
|
||||||
|
1. Open Composer (Ctrl+Shift+I)
|
||||||
|
2. Prompt:
|
||||||
|
|
||||||
|
```
|
||||||
|
Maak een [ComponentNaam] component met:
|
||||||
|
- [beschrijving]
|
||||||
|
- Tailwind CSS styling
|
||||||
|
- Responsive design
|
||||||
|
- TypeScript types
|
||||||
|
|
||||||
|
Voeg het toe aan /components en importeer het in /app/page.tsx
|
||||||
|
```
|
||||||
|
|
||||||
|
3. Accept en test
|
||||||
|
|
||||||
|
**Bonus punten!**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Troubleshooting Debug Errors
|
||||||
|
|
||||||
|
### Error: "SyntaxError: Unexpected token"
|
||||||
|
**Oorzaak:** Ontbrekende haakje, quote, of JSX closing tag
|
||||||
|
**Fix:** Kijk naar de regel in de editor, controleer haakjes
|
||||||
|
|
||||||
|
### Error: "Cannot find module 'X'"
|
||||||
|
**Oorzaak:** Package niet geïnstalleerd OF typo in import
|
||||||
|
**Fix:**
|
||||||
|
- Check spelling in import statement
|
||||||
|
- Of: `npm install X`
|
||||||
|
|
||||||
|
### Error: "Cannot find name 'Component'"
|
||||||
|
**Oorzaak:** Component niet geïmporteerd
|
||||||
|
**Fix:** Voeg import toe boven het bestand
|
||||||
|
|
||||||
|
### Error in Browser Console (F12)
|
||||||
|
**Oplossing:** Zeg dit tegen Cursor Chat:
|
||||||
|
```
|
||||||
|
Ik zie deze error in de browser console:
|
||||||
|
[paste de error]
|
||||||
|
|
||||||
|
Wat betekent het en hoe fix ik het?
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Veel Succes!
|
||||||
|
|
||||||
|
Je gaat leren:
|
||||||
|
- ✅ Debuggen met Cursor
|
||||||
|
- ✅ Terminal errors lezen
|
||||||
|
- ✅ Inline styles naar Tailwind converteren
|
||||||
|
- ✅ Imports en dependencies beheren
|
||||||
|
- ✅ Website testen in browser
|
||||||
|
|
||||||
|
Dit zijn essentiële vaardigheden als je echt met code werkt!
|
||||||
|
|
||||||
|
**Deadline:** Vóór Les 4 🚀
|
||||||
175
Les03-Cursor-Basics/Les03-Debug-Challenge-ANTWOORDEN.md
Normal file
175
Les03-Cursor-Basics/Les03-Debug-Challenge-ANTWOORDEN.md
Normal file
@@ -0,0 +1,175 @@
|
|||||||
|
# Debug Challenge - Antwoordenblad (ALLEEN VOOR TIM)
|
||||||
|
|
||||||
|
**⚠️ NIET DELEN MET STUDENTEN**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Overzicht Fouten
|
||||||
|
|
||||||
|
Het project bevat **4 typen fouten**, verspreid over **8 bestanden**.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## FOUT 1: Missing Dependency — `lucide-react`
|
||||||
|
|
||||||
|
**Bestanden:** `components/Hero.tsx`, `components/FeatureCards.tsx`
|
||||||
|
**Symptoom:** `npm install` werkt, maar `npm run dev` geeft:
|
||||||
|
```
|
||||||
|
Module not found: Can't resolve 'lucide-react'
|
||||||
|
```
|
||||||
|
|
||||||
|
**Oorzaak:** `lucide-react` wordt geïmporteerd in Hero.tsx en FeatureCards.tsx, maar staat NIET in package.json.
|
||||||
|
|
||||||
|
**Fix:**
|
||||||
|
```bash
|
||||||
|
npm install lucide-react
|
||||||
|
```
|
||||||
|
|
||||||
|
**Leerdoel:** Studenten leren dat je imports moet matchen met dependencies in package.json.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## FOUT 2: Typo in Import Path
|
||||||
|
|
||||||
|
**Bestand:** `app/page.tsx` (regel 1)
|
||||||
|
**Symptoom:**
|
||||||
|
```
|
||||||
|
Module not found: Can't resolve '@/componenst/Hero'
|
||||||
|
```
|
||||||
|
|
||||||
|
**Oorzaak:** Typo: `@/componenst/Hero` i.p.v. `@/components/Hero`
|
||||||
|
|
||||||
|
**Fix:**
|
||||||
|
```tsx
|
||||||
|
// FOUT:
|
||||||
|
import Hero from "@/componenst/Hero";
|
||||||
|
|
||||||
|
// CORRECT:
|
||||||
|
import Hero from "@/components/Hero";
|
||||||
|
```
|
||||||
|
|
||||||
|
**Leerdoel:** Lezen van error messages, herkennen van typos in import paden.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## FOUT 3: Missing Import — `TestimonialSection`
|
||||||
|
|
||||||
|
**Bestand:** `app/page.tsx` (regel 9)
|
||||||
|
**Symptoom:**
|
||||||
|
```
|
||||||
|
ReferenceError: TestimonialSection is not defined
|
||||||
|
```
|
||||||
|
|
||||||
|
**Oorzaak:** `<TestimonialSection />` wordt gebruikt in page.tsx maar is niet geïmporteerd.
|
||||||
|
|
||||||
|
**Fix:** Voeg import toe bovenaan page.tsx:
|
||||||
|
```tsx
|
||||||
|
import TestimonialSection from "@/components/TestimonialSection";
|
||||||
|
```
|
||||||
|
|
||||||
|
**Leerdoel:** Begrijpen dat elk component geïmporteerd moet worden.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## FOUT 4: Missing Imports in layout.tsx — `Navbar` en `Footer`
|
||||||
|
|
||||||
|
**Bestand:** `app/layout.tsx` (regels 17-18)
|
||||||
|
**Symptoom:**
|
||||||
|
```
|
||||||
|
ReferenceError: Navbar is not defined
|
||||||
|
ReferenceError: Footer is not defined
|
||||||
|
```
|
||||||
|
|
||||||
|
**Oorzaak:** `<Navbar />` en `<Footer />` worden gebruikt maar niet geïmporteerd.
|
||||||
|
|
||||||
|
**Fix:** Voeg imports toe bovenaan layout.tsx:
|
||||||
|
```tsx
|
||||||
|
import Navbar from "@/components/Navbar";
|
||||||
|
import Footer from "@/components/Footer";
|
||||||
|
```
|
||||||
|
|
||||||
|
**Leerdoel:** Zelfs in layout.tsx moeten componenten geïmporteerd worden.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## FOUT 5: Inline Styles → Tailwind (6 bestanden!)
|
||||||
|
|
||||||
|
**Bestanden met inline styles:**
|
||||||
|
1. `components/Hero.tsx` — hele component
|
||||||
|
2. `components/FeatureCards.tsx` — hele component
|
||||||
|
3. `components/TestimonialSection.tsx` — hele component
|
||||||
|
4. `components/Navbar.tsx` — hele component
|
||||||
|
5. `components/Footer.tsx` — hele component
|
||||||
|
6. `app/about/page.tsx` — hele pagina
|
||||||
|
7. `app/contact/page.tsx` — hele pagina (formulier)
|
||||||
|
|
||||||
|
**Symptoom:** Geen error, maar code gebruikt `style={{...}}` i.p.v. Tailwind classes.
|
||||||
|
|
||||||
|
**Voorbeeld fix (Hero.tsx):**
|
||||||
|
```tsx
|
||||||
|
// FOUT (inline styles):
|
||||||
|
<section style={{
|
||||||
|
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||||
|
padding: '80px 20px',
|
||||||
|
textAlign: 'center',
|
||||||
|
color: 'white',
|
||||||
|
minHeight: '500px',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center'
|
||||||
|
}}>
|
||||||
|
|
||||||
|
// CORRECT (Tailwind):
|
||||||
|
<section className="bg-gradient-to-br from-indigo-500 to-purple-700 py-20 px-5 text-center text-white min-h-[500px] flex items-center justify-center">
|
||||||
|
```
|
||||||
|
|
||||||
|
**Aanpak voor studenten:**
|
||||||
|
1. Selecteer de `style={{...}}` code
|
||||||
|
2. Druk `Ctrl+K` (Inline Edit)
|
||||||
|
3. Typ: "Converteer alle inline styles naar Tailwind CSS classes"
|
||||||
|
4. Accept
|
||||||
|
|
||||||
|
**Leerdoel:** Leren werken met Tailwind, Inline Edit gebruiken voor refactoring.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Samenvatting: Alle Fouten
|
||||||
|
|
||||||
|
| # | Type | Bestand | Ernst |
|
||||||
|
|---|------|---------|-------|
|
||||||
|
| 1 | Missing dependency | package.json (lucide-react) | 🔴 Blokkerend |
|
||||||
|
| 2 | Typo in import | app/page.tsx (`componenst`) | 🔴 Blokkerend |
|
||||||
|
| 3 | Missing import | app/page.tsx (TestimonialSection) | 🔴 Blokkerend |
|
||||||
|
| 4 | Missing imports | app/layout.tsx (Navbar, Footer) | 🔴 Blokkerend |
|
||||||
|
| 5 | Inline styles | 7 bestanden | 🟡 Niet blokkerend, maar opdracht |
|
||||||
|
|
||||||
|
**Verwachte volgorde van oplossen:**
|
||||||
|
1. `npm install` → werkt (geen errors hier)
|
||||||
|
2. `npm run dev` → Module not found: lucide-react → `npm install lucide-react`
|
||||||
|
3. `npm run dev` → Can't resolve '@/componenst/Hero' → fix typo
|
||||||
|
4. `npm run dev` → TestimonialSection not defined → add import
|
||||||
|
5. `npm run dev` → Navbar/Footer not defined → add imports
|
||||||
|
6. `npm run dev` → ✅ WERKT! Site is zichtbaar
|
||||||
|
7. Inline styles → Tailwind conversie (Inline Edit)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Verwachte Requests Gebruik
|
||||||
|
|
||||||
|
| Actie | Requests |
|
||||||
|
|-------|----------|
|
||||||
|
| "Welke deps missen?" (Chat) | 1 |
|
||||||
|
| Fix typos/imports (handmatig of Chat) | 0-1 |
|
||||||
|
| Inline styles conversie (Inline Edit × 3-5) | 3-5 |
|
||||||
|
| **Totaal** | **4-7 requests** |
|
||||||
|
|
||||||
|
Studenten op Hobby plan moeten dit kunnen doen. Tab Completion helpt bij imports.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tips voor Tim
|
||||||
|
|
||||||
|
- **Moeilijkheidsgraad:** Gemiddeld. Fouten 1-4 zijn "lees de error message" niveau. Fout 5 (Tailwind) is de echte oefening.
|
||||||
|
- **Als studenten vastlopen:** Wijs ze op de terminal error messages. Zeg: "Lees de eerste regel van de error."
|
||||||
|
- **Grid responsiveness:** De FeatureCards en TestimonialSection grids zijn `repeat(3, 1fr)` — op mobiel breken ze. Bonuspunt als studenten dit ook fixen naar responsive grid.
|
||||||
|
- **Contact form:** Werkt functioneel (alert), maar alle styling is inline. Goed voorbeeld van een formulier omzetten naar Tailwind.
|
||||||
322
Les03-Cursor-Basics/Les03-Debug-Challenge-Hard-ANTWOORDEN.md
Normal file
322
Les03-Cursor-Basics/Les03-Debug-Challenge-Hard-ANTWOORDEN.md
Normal file
@@ -0,0 +1,322 @@
|
|||||||
|
# Debug Challenge HARD - Antwoordenblad (ALLEEN VOOR TIM)
|
||||||
|
|
||||||
|
**⚠️ NIET DELEN MET STUDENTEN**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Overzicht
|
||||||
|
|
||||||
|
Dit project is aanzienlijk complexer dan de easy versie. Het bevat:
|
||||||
|
- Blog met dynamische routes
|
||||||
|
- Dashboard met statistieken
|
||||||
|
- API route voor quotes
|
||||||
|
- Utility functions
|
||||||
|
- TypeScript types
|
||||||
|
|
||||||
|
**12 fouten verspreid over 4 categorieën:**
|
||||||
|
- Blokkerende fouten (compile/runtime)
|
||||||
|
- Logische fouten (code draait maar werkt verkeerd)
|
||||||
|
- Pattern fouten (React anti-patterns)
|
||||||
|
- Styling fouten (inline styles + custom CSS → Tailwind)
|
||||||
|
|
||||||
|
**Geschatte tijd: 2-3 uur met AI**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## CATEGORIE 1: BLOKKERENDE FOUTEN
|
||||||
|
|
||||||
|
### Fout 1: Missing dependency — `clsx`
|
||||||
|
|
||||||
|
**Bestand:** `lib/utils.ts` (regel 2)
|
||||||
|
**Symptoom:**
|
||||||
|
```
|
||||||
|
Module not found: Can't resolve 'clsx'
|
||||||
|
```
|
||||||
|
|
||||||
|
**Oorzaak:** `clsx` wordt geïmporteerd maar staat niet in package.json.
|
||||||
|
`formatDate()` wordt overal gebruikt, dus dit blokkeert ALLES.
|
||||||
|
|
||||||
|
**Fix:**
|
||||||
|
```bash
|
||||||
|
npm install clsx
|
||||||
|
```
|
||||||
|
|
||||||
|
**Moeilijkheid:** ⭐ (makkelijk, zelfde als easy versie)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Fout 2: Verkeerde import path — NextResponse
|
||||||
|
|
||||||
|
**Bestand:** `app/api/quotes/route.ts` (regel 2)
|
||||||
|
**Symptoom:**
|
||||||
|
```
|
||||||
|
Module not found: Can't resolve 'next/servers'
|
||||||
|
```
|
||||||
|
|
||||||
|
**Oorzaak:** `"next/servers"` moet `"next/server"` zijn (zonder s).
|
||||||
|
|
||||||
|
**Fix:**
|
||||||
|
```ts
|
||||||
|
// FOUT:
|
||||||
|
import { NextResponse } from "next/servers";
|
||||||
|
|
||||||
|
// CORRECT:
|
||||||
|
import { NextResponse } from "next/server";
|
||||||
|
```
|
||||||
|
|
||||||
|
**Moeilijkheid:** ⭐⭐ (subtiel — 1 letter verschil)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## CATEGORIE 2: LOGISCHE FOUTEN
|
||||||
|
|
||||||
|
### Fout 3: Array.slice() met verkeerde parameters
|
||||||
|
|
||||||
|
**Bestand:** `components/BlogPreview.tsx` (regel 7)
|
||||||
|
**Symptoom:** BlogPreview sectie op homepage toont GEEN posts (lege grid)
|
||||||
|
|
||||||
|
**Oorzaak:** `blogPosts.slice(-2, 0)` retourneert een lege array.
|
||||||
|
`slice(-2, 0)` betekent: start bij index -2 (2e van achteren), stop bij index 0 — dat is leeg!
|
||||||
|
|
||||||
|
**Fix:**
|
||||||
|
```ts
|
||||||
|
// FOUT:
|
||||||
|
const recentPosts = blogPosts.slice(-2, 0);
|
||||||
|
|
||||||
|
// CORRECT:
|
||||||
|
const recentPosts = blogPosts.slice(0, 2);
|
||||||
|
```
|
||||||
|
|
||||||
|
**Moeilijkheid:** ⭐⭐⭐ (geen error, gewoon lege output — student moet debuggen WAAROM)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Fout 4: Icon mapping mist "star" entry
|
||||||
|
|
||||||
|
**Bestand:** `app/dashboard/page.tsx` (regel 25-30)
|
||||||
|
**Symptoom:** De "Rating" stat card toont geen icon (undefined rendered als leeg)
|
||||||
|
|
||||||
|
**Oorzaak:** `getIcon()` functie heeft entries voor "users", "eye", "clock" maar NIET voor "star". De stats array bevat wel `icon: "star"`.
|
||||||
|
|
||||||
|
**Fix:**
|
||||||
|
```ts
|
||||||
|
function getIcon(iconName: string) {
|
||||||
|
const icons: Record<string, React.ReactNode> = {
|
||||||
|
users: <Users size={24} />,
|
||||||
|
eye: <Eye size={24} />,
|
||||||
|
clock: <Clock size={24} />,
|
||||||
|
star: <Star size={24} />, // ← TOEVOEGEN
|
||||||
|
};
|
||||||
|
return icons[iconName];
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Moeilijkheid:** ⭐⭐⭐ (geen crash, subtiel visueel verschil)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Fout 5: Mobile menu altijd verborgen
|
||||||
|
|
||||||
|
**Bestand:** `components/Header.tsx` (regel 62 + 73)
|
||||||
|
**Symptoom:** Hamburger menu knop is onzichtbaar, en zelfs als je `display: none` verwijdert van de button, is het dropdown menu ALSOOK `display: none`.
|
||||||
|
|
||||||
|
**Oorzaak:** Twee problemen:
|
||||||
|
1. De hamburger button heeft `display: 'none'` → onzichtbaar
|
||||||
|
2. Het mobile menu div heeft `display: 'none'` → zelfs als `menuOpen` true is
|
||||||
|
|
||||||
|
**Fix:** Dit moet volledig naar responsive Tailwind met `md:hidden`/`md:flex`:
|
||||||
|
```tsx
|
||||||
|
// Button: verberg op desktop, toon op mobiel
|
||||||
|
<button className="md:hidden" ...>
|
||||||
|
|
||||||
|
// Desktop nav: verberg op mobiel
|
||||||
|
<nav className="hidden md:flex gap-6" ...>
|
||||||
|
|
||||||
|
// Mobile menu: toon als flex wanneer open
|
||||||
|
{menuOpen && (
|
||||||
|
<div className="flex flex-col md:hidden p-3 border-t bg-white">
|
||||||
|
```
|
||||||
|
|
||||||
|
**Moeilijkheid:** ⭐⭐⭐⭐ (vereist begrijpen van responsive design patterns)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## CATEGORIE 3: REACT PATTERN FOUTEN
|
||||||
|
|
||||||
|
### Fout 6: async functie in useEffect
|
||||||
|
|
||||||
|
**Bestand:** `app/dashboard/page.tsx` (regel 35-39)
|
||||||
|
**Symptoom:** React warning in console:
|
||||||
|
```
|
||||||
|
Warning: useEffect must not return anything besides a function
|
||||||
|
```
|
||||||
|
En mogelijke infinite loop.
|
||||||
|
|
||||||
|
**Oorzaak:** `useEffect(async () => {...})` is een React anti-pattern. async functie retourneert een Promise, maar useEffect verwacht `void` of een cleanup functie.
|
||||||
|
|
||||||
|
**Fix:**
|
||||||
|
```tsx
|
||||||
|
// FOUT:
|
||||||
|
useEffect(async () => {
|
||||||
|
const res = await fetch("/api/quotes");
|
||||||
|
...
|
||||||
|
}, [quote]);
|
||||||
|
|
||||||
|
// CORRECT:
|
||||||
|
useEffect(() => {
|
||||||
|
async function fetchQuote() {
|
||||||
|
const res = await fetch("/api/quotes");
|
||||||
|
const data = await res.json();
|
||||||
|
setQuote(data.text);
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
fetchQuote();
|
||||||
|
}, []); // ← ook dependency array gefixed (zie Fout 7)
|
||||||
|
```
|
||||||
|
|
||||||
|
**Moeilijkheid:** ⭐⭐⭐⭐ (vereist kennis van React hooks patterns)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Fout 7: Verkeerde dependency array → infinite loop
|
||||||
|
|
||||||
|
**Bestand:** `app/dashboard/page.tsx` (regel 39)
|
||||||
|
**Symptoom:** Dashboard pagina loopt vast, continue fetch requests in Network tab
|
||||||
|
|
||||||
|
**Oorzaak:** `[quote]` als dependency betekent: "run opnieuw als `quote` verandert". Maar de effect ZET quote, wat de effect OPNIEUW triggert → infinite loop.
|
||||||
|
|
||||||
|
**Fix:**
|
||||||
|
```tsx
|
||||||
|
// FOUT:
|
||||||
|
}, [quote]);
|
||||||
|
|
||||||
|
// CORRECT:
|
||||||
|
}, []); // Lege array = run 1x bij mount
|
||||||
|
```
|
||||||
|
|
||||||
|
**Moeilijkheid:** ⭐⭐⭐⭐ (vereist begrip van useEffect dependency arrays)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Fout 8: Null check mist op quote state
|
||||||
|
|
||||||
|
**Bestand:** `components/QuoteOfTheDay.tsx` (regel 22)
|
||||||
|
**Symptoom:** `TypeError: Cannot read properties of null (reading 'text')`
|
||||||
|
|
||||||
|
**Oorzaak:** `quote` begint als `null`, maar zodra loading false is, probeert de component `quote.text` te lezen. Als de API fails of traag is, kan dit crashen.
|
||||||
|
|
||||||
|
**Fix:** Voeg TypeScript type toe en null check:
|
||||||
|
```tsx
|
||||||
|
// Verbeterde state typing:
|
||||||
|
const [quote, setQuote] = useState<{ text: string; author: string } | null>(null);
|
||||||
|
|
||||||
|
// In de render:
|
||||||
|
{!loading && quote && (
|
||||||
|
<>
|
||||||
|
<blockquote>"{quote.text}"</blockquote>
|
||||||
|
<cite>— {quote.author}</cite>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
```
|
||||||
|
|
||||||
|
**Moeilijkheid:** ⭐⭐⭐ (runtime error, maar duidelijke error message)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## CATEGORIE 4: STYLING FOUTEN (Inline Styles → Tailwind)
|
||||||
|
|
||||||
|
### Fout 9: Custom CSS classes in globals.css
|
||||||
|
|
||||||
|
**Bestand:** `app/globals.css`
|
||||||
|
**Probleem:** `.card`, `.page-container`, `.section-title` zijn custom CSS classes. Deze horen Tailwind utility classes te zijn.
|
||||||
|
|
||||||
|
**Fix:** Verwijder custom CSS uit globals.css. Vervang in alle componenten:
|
||||||
|
- `.card` → `className="p-6 bg-white rounded-xl border border-gray-200 hover:shadow-lg hover:-translate-y-0.5 transition-all"`
|
||||||
|
- `.page-container` → `className="max-w-[1200px] mx-auto px-5"`
|
||||||
|
- `.section-title` → `className="text-3xl font-bold text-center mb-10 text-gray-900"`
|
||||||
|
|
||||||
|
**Moeilijkheid:** ⭐⭐⭐ (moet begrijpen waarom Tailwind beter is dan custom CSS)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Fout 10-12: Inline styles in alle componenten
|
||||||
|
|
||||||
|
**Bestanden met inline styles:**
|
||||||
|
|
||||||
|
| # | Bestand | Complexiteit |
|
||||||
|
|---|---------|-------------|
|
||||||
|
| 10 | `components/Hero.tsx` | Hoog (gradient, positioning) |
|
||||||
|
| 11 | `components/Header.tsx` | Hoog (responsive, sticky) |
|
||||||
|
| 12 | `components/Footer.tsx` | Medium (grid, links) |
|
||||||
|
| - | `components/StatsSection.tsx` | Medium (grid) |
|
||||||
|
| - | `components/BlogPreview.tsx` | Medium (grid, cards) |
|
||||||
|
| - | `components/QuoteOfTheDay.tsx` | Laag |
|
||||||
|
| - | `app/blog/page.tsx` | Medium (grid, tags) |
|
||||||
|
| - | `app/blog/[slug]/page.tsx` | Medium (article layout) |
|
||||||
|
| - | `app/dashboard/page.tsx` | Hoog (stats grid, cards) |
|
||||||
|
|
||||||
|
**Studenten moeten minimaal 3-4 bestanden omzetten.**
|
||||||
|
|
||||||
|
**Aanpak:**
|
||||||
|
1. Selecteer inline style code
|
||||||
|
2. `Ctrl+K` → "Converteer inline styles naar Tailwind CSS. Gebruik de brand- kleuren uit tailwind.config.ts waar mogelijk."
|
||||||
|
3. Review + Accept
|
||||||
|
|
||||||
|
**Moeilijkheid:** ⭐⭐ per bestand (maar het zijn er VEEL)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Samenvatting Alle Fouten
|
||||||
|
|
||||||
|
| # | Type | Bestand | Ernst | Moeilijkheid |
|
||||||
|
|---|------|---------|-------|-------------|
|
||||||
|
| 1 | Missing dependency (clsx) | lib/utils.ts | 🔴 Blokkerend | ⭐ |
|
||||||
|
| 2 | Verkeerde import (next/servers) | api/quotes/route.ts | 🔴 Blokkerend | ⭐⭐ |
|
||||||
|
| 3 | Verkeerde slice() params | BlogPreview.tsx | 🟡 Logisch | ⭐⭐⭐ |
|
||||||
|
| 4 | Missende icon mapping | dashboard/page.tsx | 🟡 Logisch | ⭐⭐⭐ |
|
||||||
|
| 5 | Mobile menu altijd hidden | Header.tsx | 🟡 Logisch | ⭐⭐⭐⭐ |
|
||||||
|
| 6 | async in useEffect | dashboard/page.tsx | 🟠 Anti-pattern | ⭐⭐⭐⭐ |
|
||||||
|
| 7 | Infinite loop dep array | dashboard/page.tsx | 🔴 Runtime crash | ⭐⭐⭐⭐ |
|
||||||
|
| 8 | Null check quote state | QuoteOfTheDay.tsx | 🔴 Runtime crash | ⭐⭐⭐ |
|
||||||
|
| 9 | Custom CSS → Tailwind | globals.css | 🟡 Styling | ⭐⭐⭐ |
|
||||||
|
| 10-12 | Inline styles (9+ bestanden) | Overal | 🟡 Styling | ⭐⭐ elk |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Verwachte Oplos-Volgorde
|
||||||
|
|
||||||
|
1. `npm install` → werkt
|
||||||
|
2. `npm run dev` → `Can't resolve 'clsx'` → `npm install clsx`
|
||||||
|
3. `npm run dev` → `Can't resolve 'next/servers'` → fix import
|
||||||
|
4. Site laadt! Maar:
|
||||||
|
- BlogPreview is leeg → fix slice()
|
||||||
|
- Dashboard crasht/loopt vast → fix useEffect + dep array
|
||||||
|
- Quote component crasht → fix null check
|
||||||
|
- Rating icon mist → fix icon mapping
|
||||||
|
- Mobile menu werkt niet → fix responsive
|
||||||
|
5. Inline styles → Tailwind conversie
|
||||||
|
6. Custom CSS → Tailwind refactor
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Verwacht Request Gebruik
|
||||||
|
|
||||||
|
| Actie | Requests |
|
||||||
|
|-------|----------|
|
||||||
|
| Debug blokkerende errors (Chat) | 2-3 |
|
||||||
|
| Fix logische fouten (Chat + Edit) | 3-4 |
|
||||||
|
| Fix React patterns (Chat) | 2-3 |
|
||||||
|
| Inline styles → Tailwind (Inline Edit × 4-5) | 4-5 |
|
||||||
|
| **Totaal** | **11-15 requests** |
|
||||||
|
|
||||||
|
⚠️ Dit is meer dan de easy versie. Studenten op Hobby plan moeten efficiënt werken. Student plan (500/maand) is ruim voldoende.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Tips voor Tim
|
||||||
|
|
||||||
|
- **Dit is echt moeilijk.** Fout 5, 6, 7 zijn lastig voor beginners. Verwacht dat studenten hier hulp bij nodig hebben.
|
||||||
|
- **De useEffect fouten** zijn een goed leermoment — dit is een HEEL veelvoorkomende bug in React.
|
||||||
|
- **De slice() bug** is een subtiele logische fout. Studenten moeten leren: "het werkt zonder errors, maar het resultaat klopt niet" → debuggen.
|
||||||
|
- **Mobile menu** is bewust moeilijk. Dit vereist dat ze responsive design begrijpen. Goede Cursor prompt: "Maak deze header responsive met een hamburger menu dat werkt op mobiel met Tailwind."
|
||||||
|
- **Geef de easy zip als standaard.** Hard is voor studenten die de easy versie snel af hebben of die extra uitdaging willen.
|
||||||
231
Les03-Cursor-Basics/Les03-Docenttekst-Notes.md
Normal file
231
Les03-Cursor-Basics/Les03-Docenttekst-Notes.md
Normal file
@@ -0,0 +1,231 @@
|
|||||||
|
# Les 3 - Keynote Notes
|
||||||
|
|
||||||
|
**Spreektijd:** ~55 min | **Hands-on:** ~75 min | **Pauze:** 15 min (10:15-10:30)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 1: WELKOM & MEDEDELING (10 min)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 1: Titelslide
|
||||||
|
- Welkom Les 3, vandaag: Cursor
|
||||||
|
- "Dit wordt je nieuwe favoriete tool!"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 2: Planning
|
||||||
|
- 09:00-09:30: Setup + Installatie
|
||||||
|
- 09:30-09:58: Features + Skills + Request tips
|
||||||
|
- 09:58-10:13: Live Demo nieuw project
|
||||||
|
- 10:13-10:15: Start Hands-on
|
||||||
|
- 10:15-10:30: PAUZE
|
||||||
|
- 10:30-11:45: Hands-on vervolg
|
||||||
|
- 11:45-12:00: Afsluiting
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 3: Terugblik Les 2
|
||||||
|
- **OpenCode problemen:** token limits, EACCES, permission denied
|
||||||
|
- "Niet jullie schuld, beperking platform"
|
||||||
|
- **Waarom Cursor:** voor developers, meer requests, ingebouwde terminal, Skills
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 4: Wat is Cursor?
|
||||||
|
- VS Code + AI ingebouwd
|
||||||
|
- **Gratis Student plan:** 500 fast requests/maand
|
||||||
|
- **5 features:** Chat, Inline Edit, Composer, Tab Completion, @mentions
|
||||||
|
- Hobby EERST → Student upgrade later
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 2: INSTALLATIE & SETUP (20 min)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 5: Download Cursor
|
||||||
|
- cursor.com → juiste OS versie
|
||||||
|
- macOS: Intel of Apple Silicon (let op!)
|
||||||
|
- Windows: Installer
|
||||||
|
- "Allemaal gedownload?"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 6: Account Aanmaken
|
||||||
|
- Sign Up → **Hobby account EERST**
|
||||||
|
- Email + wachtwoord verifiëren
|
||||||
|
- Student upgrade: cursor.com/students (later)
|
||||||
|
- ✓ CHECKPOINT: Cursor geopend, account gemaakt
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 7: Interface Tour
|
||||||
|
- Activity Bar (links), Sidebar (files), Editor (midden)
|
||||||
|
- **Chat Panel:** Ctrl+L (rechts)
|
||||||
|
- **Terminal:** Ctrl+` (onderin) → alles in 1 window!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 8: Terminal Setup Check
|
||||||
|
- **SAMEN DOEN** - iedereen tegelijk
|
||||||
|
- `node -v` (v20+)
|
||||||
|
- `git --version` (2.x+)
|
||||||
|
- `npm -v` (10.x+)
|
||||||
|
- `npx -v` (10.x+) → **nodig voor create-next-app!**
|
||||||
|
- Help bij errors, CHECKPOINT
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 3: CURSOR FEATURES (15 min)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 9: Chat Panel (Ctrl+L)
|
||||||
|
- Vragen over code, AI ziet hele codebase
|
||||||
|
- Wees specifiek → bespaart requests
|
||||||
|
- "Analyseer dit project" → AI leest alles
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 10: Inline Edit (Ctrl+K)
|
||||||
|
- Select code → Ctrl+K → instructie → Accept/Reject
|
||||||
|
- Voorbeeld: inline styles → Tailwind
|
||||||
|
- Voor: kleine aanpassingen, styling fixes
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 11: Composer (Ctrl+I)
|
||||||
|
- Multi-file, grote taken
|
||||||
|
- "Voeg pagina toe" → AI maakt alles
|
||||||
|
- Preview → Accept → instant
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 12: Tab Completion
|
||||||
|
- AI voorspelt code, druk Tab
|
||||||
|
- **GRATIS - kost geen premium request!**
|
||||||
|
- Benadrukken: gebruik dit voor kleine dingen
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 13: @ Mentions
|
||||||
|
- @file, @folder, @web, @docs
|
||||||
|
- **@docs belangrijk:** verwijst naar geïnstalleerde docs
|
||||||
|
- "Hoe werkt App Router? @docs Next.js"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 4: SKILLS, RULES & REQUESTS (15 min)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 14: Cursor Skills Installeren
|
||||||
|
- **SAMEN DOEN!**
|
||||||
|
- Settings → Features → Docs → Add
|
||||||
|
- Toevoegen: nextjs.org/docs, react.dev, tailwindcss.com/docs
|
||||||
|
- Test: Chat + @docs Next.js
|
||||||
|
- ✓ CHECKPOINT: Docs toegevoegd
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 15: .cursorrules via Chat
|
||||||
|
- NIET handmatig schrijven
|
||||||
|
- Chat (Ctrl+L): "Genereer .cursorrules voor Next.js + Tailwind + TypeScript"
|
||||||
|
- Kopieer → maak bestand → save
|
||||||
|
- **1 request = goed besteed**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 16: Request Management
|
||||||
|
- Hobby = beperkte requests
|
||||||
|
- **Tab Completion = GRATIS**
|
||||||
|
- Chat/Composer/Inline Edit = 1 request
|
||||||
|
- Tips: denk eerst, combineer taken, gebruik Tab Completion
|
||||||
|
- "3 kleine prompts = 3 requests. 1 grote prompt = 1 request!"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 5: LIVE DEMO (15 min)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 17: Demo Nieuw Project (blijft op scherm)
|
||||||
|
1. mkdir + git init (1 min)
|
||||||
|
2. npx create-next-app@latest . (2 min)
|
||||||
|
- TypeScript, Tailwind, App Router: allemaal Yes
|
||||||
|
3. npm run dev → localhost:3000 (1 min)
|
||||||
|
4. Chat: genereer .cursorrules (3 min, 1 request)
|
||||||
|
5. Composer: HeroSection component (4 min, 1 request)
|
||||||
|
6. Refresh browser → toon resultaat (1 min)
|
||||||
|
7. git add + commit (1 min)
|
||||||
|
- **"Van niks naar werkende site in 15 min!"**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 6: HANDS-ON (75 min + 15 min pauze)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 18: Opdracht (blijft op scherm)
|
||||||
|
- STAP 1: mkdir + git init + npx create-next-app + npm run dev
|
||||||
|
- STAP 2: Check Skills/Docs, genereer .cursorrules via Chat
|
||||||
|
- STAP 3: Bouw componenten (Hero, Features, Form, Footer)
|
||||||
|
- STAP 4: git commit
|
||||||
|
- **Let op requests! Max ~6-7 in de les**
|
||||||
|
- ☕ Pauze 10:15-10:30
|
||||||
|
|
||||||
|
**Checks:**
|
||||||
|
- 10:45: "Wie heeft npx gedaan? .cursorrules? Component?"
|
||||||
|
- 11:00: "Wie heeft 2 componenten? Requests over?"
|
||||||
|
- 11:30: "Wie heeft gecommit?"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 7: AFSLUITING (15 min)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 19: Resultaten
|
||||||
|
- 3-4 studenten tonen werk
|
||||||
|
- "Welke componenten? Hoeveel requests?"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 20: Samenvatting
|
||||||
|
- ✅ Cursor setup + Skills/Docs
|
||||||
|
- ✅ .cursorrules via AI Chat
|
||||||
|
- ✅ npx create-next-app workflow
|
||||||
|
- ✅ Chat, Composer, Inline Edit, Tab Completion
|
||||||
|
- ✅ Request management (Tab = gratis!)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 21: Huiswerk - Debug Challenge
|
||||||
|
- Download zip van Teams
|
||||||
|
- **Fouten:** missende deps, syntax errors, inline styles
|
||||||
|
- Fix met Cursor terminal + AI
|
||||||
|
- Push naar GitHub
|
||||||
|
- Post op Teams: link + screenshot + beschrijving
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 22: Volgende Les
|
||||||
|
- Les 4: Effectief Prompting & Iteratief Werken
|
||||||
|
- Huiswerk MOET af zijn!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## TIMING SUMMARY
|
||||||
|
|
||||||
|
| Blok | Onderdeel | Duur |
|
||||||
|
|------|-----------|------|
|
||||||
|
| 1 | Welkom & Mededeling | 10 min |
|
||||||
|
| 2 | Installatie & Setup | 20 min |
|
||||||
|
| 3 | Cursor Features | 15 min |
|
||||||
|
| 4 | Skills, Rules & Requests | 15 min |
|
||||||
|
| 5 | Live Demo | 15 min |
|
||||||
|
| **PAUZE** | | **15 min** |
|
||||||
|
| 6 | Hands-On | 75 min |
|
||||||
|
| 7 | Afsluiting | 15 min |
|
||||||
|
| **TOTAAL** | | **180 min** |
|
||||||
561
Les03-Cursor-Basics/Les03-Docenttekst.md
Normal file
561
Les03-Cursor-Basics/Les03-Docenttekst.md
Normal file
@@ -0,0 +1,561 @@
|
|||||||
|
# Les 3: Cursor - AI-Powered Code Editor
|
||||||
|
## Docenttekst (Spreektekst voor Tim)
|
||||||
|
|
||||||
|
> **Totale lesduur:** 3 uur (180 minuten)
|
||||||
|
> **Totale spreektijd:** ~90 minuten (verdeeld over blokken)
|
||||||
|
> **Hands-on praktijk:** ~75 minuten
|
||||||
|
> **Pauze:** 15 minuten (10:15-10:30)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 1: WELKOM & MEDEDELING (10 min)
|
||||||
|
|
||||||
|
### Slide 1: Titelslide - Welkom Les 3, Cursor!
|
||||||
|
**[09:00 - 09:02]**
|
||||||
|
|
||||||
|
"Goedemorgen iedereen, welkom bij Les 3! Vandaag gaan we kennismaken met Cursor, een code editor die echt gemaakt is voor developers. Dit is geen random AI tool – het is gebouwd VOOR programmeurs. In de vorige les hebben jullie gemerkt dat OpenCode wat problemen had: token limits, EACCES errors, en niet echt ontworpen voor professionele development. Cursor lost dat allemaal op. We gaan hem vandaag installeren, je eerste project bouwen, en je zult zien hoe snel je daarmee dingen kunt maken."
|
||||||
|
|
||||||
|
_[Glimlach, maak oogcontact. Stel de energie in voor een praktische, hands-on les.]_
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 2: Planning vandaag
|
||||||
|
**[09:02 - 09:05]**
|
||||||
|
|
||||||
|
"Dit is de planning voor vandaag. We starten met een korte terugblik op waarom Cursor beter is dan OpenCode. Dan gaan we Cursor installeren en je account opzetten – dat gaat snel. Daarna laat ik alle features zien: Chat, Inline Edit, Composer, Tab Completion, en @mentions. We doen een interfacetour zodat je precies weet waar alles zit.
|
||||||
|
|
||||||
|
Vervolgens duiken we in het inrichten van Cursor Skills – dat is belangrijk, je gaat framework documentatie inladen zodat de AI beter kan helpen. We maken je eerste .cursorrules file, en ik leg uit hoe je request limit management moet denken.
|
||||||
|
|
||||||
|
Om 09:40 doen we een live demo: ik bouw in real-time een Next.js project van nul tot werkend. Dan krijgen jullie rond 10:00 een praktische opdracht. Jullie bouwen zelf een project, en we hebben een pauze van 10:15 tot 10:30. Na de pauze werken jullie verder, en we afsluiten met het delen van jullie resultaten, een samenvatting, en huiswerk."
|
||||||
|
|
||||||
|
_[Wijs naar timeline op slide. Ga niet te snel. Geef studenten een gevoel van progressie.]_
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 3: Terugblik Les 2 - Waarom Cursor beter is
|
||||||
|
**[09:05 - 09:08]**
|
||||||
|
|
||||||
|
"Laten we even teruggaan naar Les 2 met OpenCode. Veel van jullie hebben vast gelopen tegen problemen, toch? Token limits die onverwacht opraken, EACCES permission errors als je externe packages wilde installeren, en eigenlijk voelde het meer als een AI chatbot dan als een echte code editor.
|
||||||
|
|
||||||
|
Cursor is fundamenteel anders. Het is GEBOUWD voor developers. Cursor ziet je hele codebase tegelijk – Chat werkt niet op fragmenten, maar snapt je hele project. De AI completion (Tab completion) is ingebouwd en super snel. Bovendien: het Hobby plan is helemaal gratis, en studenten kunnen upgraden naar het Student plan, ook gratis, via cursor.com/students. Geen creditcard nodig.
|
||||||
|
|
||||||
|
En het allerbelangrijkste: Cursor heeft een INGEBOUWDE terminal. Je kunt node -v, npm install, en git commands rechtstreeks uitvoeren zonder naar een ander venster te hoppen. Alles gebeurt in één editor."
|
||||||
|
|
||||||
|
_[Maak oogcontact. Zeg duidelijk "gratis" – dat is een belangrijk voordeel.]_
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 4: Wat is Cursor? Features en pricing
|
||||||
|
**[09:08 - 09:10]**
|
||||||
|
|
||||||
|
"Oké, wat IS Cursor precies? Het is eigenlijk VS Code – dezelfde editor die de helft van de wereld gebruikt – maar dan met krachtige AI features ingebouwd. Je krijgt vijf hoofdfeatures:
|
||||||
|
|
||||||
|
**Eerste: Chat (Ctrl+L).** Je kunt vragen stellen over je code. De AI ziet je hele codebase en kan context begrijpen. Je kunt vragen 'Hoe werkt deze functie?' of 'Wat doet dit component?'. Wees specifiek in je vragen, dan krijg je betere antwoorden.
|
||||||
|
|
||||||
|
**Tweede: Inline Edit (Ctrl+K).** Je selecteert code, geeft een instructie zoals 'Zet dit om naar Tailwind classes', en de AI edit precies dat stukje. Super handig voor kleine aanpassingen.
|
||||||
|
|
||||||
|
**Derde: Composer (Ctrl+I).** Dit is voor grotere taken. Je kunt zeggen 'Voeg een product pagina toe met filtering en cart functionaliteit', en de AI genereert meerdere files tegelijk. Echt krachtig.
|
||||||
|
|
||||||
|
**Vierde: Tab Completion.** De AI voorspelt je code. Je begint te typen, en het suggereert wat je waarschijnlijk wilt. Je drukt Tab en klaar. Dit kost GEEN requests – het is gratis!
|
||||||
|
|
||||||
|
**Vijfde: @mentions.** Je kunt context geven door @file, @folder, @web, en @docs te gebruiken. @docs is echt belangrijk: je kunt framework documentatie inladen, zodat de AI tegen de juiste versie van React of Next.js praat.
|
||||||
|
|
||||||
|
Nu: pricing. Het Hobby plan is gratis en volstaat voor het meeste. Je krijgt beperkte requests – precies genoeg om te oefenen. Als je Student ben, kun je naar cursor.com/students gaan en upgraden naar Student, ook gratis, met veel meer requests."
|
||||||
|
|
||||||
|
_[Toon de vijf features op je vingers. Zeg "GRATIS" luidop voor Tab Completion – veel studenten snappen niet dat dit geen request kost.]_
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 2: INSTALLATIE & SETUP (20 min)
|
||||||
|
|
||||||
|
### Slide 5: Download en installatie
|
||||||
|
**[09:10 - 09:14]**
|
||||||
|
|
||||||
|
"Goed, laten we beginnen met installatie. Je gaat naar cursor.com en klikt op Download. Cursor draait op Mac, Windows, en Linux – dus voor iedereen. De installer is heel eenvoudig: je downloadt het, opent het, sleep je Cursor naar je Applications folder, en klaar. Als je op Windows bent, run je de .exe en volg je de stappen.
|
||||||
|
|
||||||
|
Dit kost ongeveer twee minuten. Als je al VS Code hebt, hoef je niks te desinstalleren – Cursor en VS Code kunnen naast elkaar bestaan zonder problemen."
|
||||||
|
|
||||||
|
_[Navigeer naar cursor.com en wijs de download knop aan. Laat zien hoe het eruit ziet op Mac en Windows (screenshot).]_
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 6: Account aanmaken en upgraden
|
||||||
|
**[09:14 - 09:18]**
|
||||||
|
|
||||||
|
"Zodra Cursor open is, maak je een account aan. Je hoeft NIET direct Student plan te nemen – begin met Hobby. Je geeft je emailadres en een wachtwoord in. Cursor stuurt je een bevestigingsmail.
|
||||||
|
|
||||||
|
BELANGRIJK: als je Student bent, upgrade je NA deze eerste setup. Je gaat naar cursor.com/students, logt in met diezelfde email, en kiest Student plan. Geen creditcard, geen gedoe – je werkt gewoon mee met onze les en je bent gedekt.
|
||||||
|
|
||||||
|
Na login zie je je Hobby account. Dan gaan we gelijk verder met setup."
|
||||||
|
|
||||||
|
_[Toon account maken op je eigen machine. Zeg duidelijk: "Hobby EERST, Student plan LATER". CHECKPOINT: check rond of iedereen ingelogd is.]_
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 7: Interface tour
|
||||||
|
**[09:18 - 09:22]**
|
||||||
|
|
||||||
|
"Oké, je bent ingelogd. Laten we de interface doornemen zodat je weet waar alles zit.
|
||||||
|
|
||||||
|
Links zie je de **Activity Bar** – kleine iconen voor Files, Search, Source Control, en Run & Debug. Dit is hetzelfde als VS Code.
|
||||||
|
|
||||||
|
Daaronder zie je de **Sidebar** – dit is waar je bestanden staan als je Files opent.
|
||||||
|
|
||||||
|
In het midden: de **Editor**. Dit is waar je code schrijft en bewerkt.
|
||||||
|
|
||||||
|
Aan de rechterkant – en dit is NIEUW vergeleken met normale VS Code – de **Chat Panel**. Dit open je met Ctrl+L. Hier stel je vragen over je code.
|
||||||
|
|
||||||
|
Onder de editor zie je de **Terminal** – Ctrl+backtick, dus Ctrl+` – hier voer je commands uit.
|
||||||
|
|
||||||
|
Het mooie is: ALLES zit in één window. Je hoeft niet tussen VS Code en ChatGPT heen en weer te springen."
|
||||||
|
|
||||||
|
_[Beweeg je cursor rond op de interface. Duid elke component aan. Open de Chat Panel met Ctrl+L, sluit het weer met Escape.]_
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 8: Terminal setup check SAMEN
|
||||||
|
**[09:22 - 09:30]**
|
||||||
|
|
||||||
|
"Nu gaan we even checken of je setup klaar is. Dit doen we via de Terminal. Open Terminal met Ctrl+backtick – dus Ctrl+`.
|
||||||
|
|
||||||
|
Je ziet prompt. We gaan drie commands checken:
|
||||||
|
|
||||||
|
**Eerste: node -v** – dit geeft je Node.js versie. Je wilt versie 18 of hoger. Als je error ziet 'command not found', moet je Node.js installeren via nodejs.org.
|
||||||
|
|
||||||
|
**Tweede: git --version** – dit geeft je Git versie. Versie 2.20 of hoger is prima.
|
||||||
|
|
||||||
|
**Derde: npm -v** – dit is de Package Manager die met Node.js komt. Ook 7.0 of hoger.
|
||||||
|
|
||||||
|
**Vierde: npx -v** – dit is ESSENTIEEL. npx gebruiken we straks om create-next-app te draaien. Als npx niet werkt, kun je geen nieuw project aanmaken. npx komt normaal mee met npm, dus als npm werkt, werkt npx ook. Maar even checken!
|
||||||
|
|
||||||
|
Wie errors ziet, geen paniek. Steek je hand op, ik help je. Dit duurt twee minuten per persoon."
|
||||||
|
|
||||||
|
_[Open je eigen Terminal. Typ de vier commands. Laat zien wat output eruitziet. Sta twee minuten stil en help studenten die problemen hebben.]_
|
||||||
|
|
||||||
|
_[CHECKPOINT: zorg dat iedereen node, git, npm EN npx werkend heeft. Dit is essentieel voor de rest van de les.]_
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 3: CURSOR FEATURES (15 min)
|
||||||
|
|
||||||
|
### Slide 9: Chat Panel - Vragen over je code
|
||||||
|
**[09:30 - 09:36]**
|
||||||
|
|
||||||
|
"Nu duiken we in de échte kracht van Cursor: de Features. Laten we beginnen met **Chat Panel**.
|
||||||
|
|
||||||
|
Je opent Chat met Ctrl+L. Ik open het nu even op mijn scherm. Je ziet een textbox waar je kunt typen. Het bijzondere: Cursor ziet je HELE project, niet gewoon het stukje code dat je hebt geselect.
|
||||||
|
|
||||||
|
Stel je voor: je hebt een Next.js project met 15 componenten. Je kunt in Chat vragen: 'Hoe werkt de authentication flow in dit project?' en de AI snapt je hele setup en geeft een ingewikkeld antwoord.
|
||||||
|
|
||||||
|
**Tips voor goede Chat vragen:**
|
||||||
|
- Wees specifiek. Zeg niet 'Fix dit' maar 'Zet alle inline styles om naar Tailwind classes en zorg dat de layout hetzelfde blijft.'
|
||||||
|
- Geef context. 'In de ProductCard component, de border is nu blauw, kan hij rood zijn en dikker?'
|
||||||
|
- Stel vervolgvragen. De AI onthoudt wat je eerder vroeg.
|
||||||
|
|
||||||
|
Chat kost één request per bericht. Hop voorzichtig – je hebt beperkte requests op Hobby."
|
||||||
|
|
||||||
|
_[Open Chat (Ctrl+L). Typ een voorbeeld vraag. Laat zien hoe antwoord zich opent.]_
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 10: Inline Edit - Snelle code changes
|
||||||
|
**[09:36 - 09:41]**
|
||||||
|
|
||||||
|
"Volgende feature: **Inline Edit (Ctrl+K)**. Dit is voor als je kleine stukken wilt aanpassen.
|
||||||
|
|
||||||
|
Stel je voor: je hebt een component met inline styles – die lelijke style={{color: 'red', marginTop: '10px'}}. Je wilt dit naar Tailwind. Je selecteert die hele component code, drukt Ctrl+K, en je typt: 'Zet alle inline styles om naar Tailwind classes, keep the same styling.'
|
||||||
|
|
||||||
|
Cursor selecteert precies dat stukje, geeft een preview, en je ziet de diff. Je kunt dan een diff accepteren of afwijzen. Super handig voor refactoring.
|
||||||
|
|
||||||
|
**Voorbeeld in mijn hoofd:**
|
||||||
|
Input: Component met inline styles
|
||||||
|
Instructie: 'Convert to Tailwind'
|
||||||
|
Output: Dezelfde component, maar nu className='text-red-600 mt-2.5'
|
||||||
|
|
||||||
|
Dit kost ook één request. Gebruik het voor kleine, chirurgische aanpassingen."
|
||||||
|
|
||||||
|
_[Maak een voorbeeld component met inline styles. Demonstreer Ctrl+K en de AI vervanging.]_
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 11: Composer - Multi-file grote taken
|
||||||
|
**[09:41 - 09:46]**
|
||||||
|
|
||||||
|
"Nu het heavyweight: **Composer (Ctrl+I)**. Dit is voor als je GROTE dingen wilt doen – dingen die meerdere files raken.
|
||||||
|
|
||||||
|
Stel je voor: je hebt een Next.js app met één pagina. Je wilt een heel nieuwe feature: een Admin Dashboard met login, user list, en stats panel. Dit raakt misschien 5 bestanden: nieuwe route, nieuwe component, styles, database queries, alles.
|
||||||
|
|
||||||
|
In plaats van dit in stukken te vragen in Chat, openen je Composer met Ctrl+I. Je zegt: 'Voeg een Admin Dashboard toe met login, user management, en stats. Zet het op /admin route.'
|
||||||
|
|
||||||
|
Composer genereert ALLES tegelijk – alle files, alle imports, alle routing. Je ziet een preview, klikt 'Accept', en BOEM – je project heeft een werkende admin dashboard.
|
||||||
|
|
||||||
|
Dit is échte time-saver. En ja, dit kost ook één request – niet meer, niet minder, want Cursor snapt dat je één logische taak doet."
|
||||||
|
|
||||||
|
_[Open je eigen project. Open Composer (Ctrl+I). Laat zien hoe je een multi-file taak kunt beschrijven.]_
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 12: Tab Completion - AI code voorspelling
|
||||||
|
**[09:46 - 09:50]**
|
||||||
|
|
||||||
|
"Feature vier: **Tab Completion**. Dit is mijn favoriet. En het BELANGRIJKSTE: dit kost GEEN requests. Nul. Gratis.
|
||||||
|
|
||||||
|
Je begint gewoon code te typen. Terwijl je typt, ziet Cursor wat je waarschijnlijk wilt doen. Je typt:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const handleClick = () => {
|
||||||
|
```
|
||||||
|
|
||||||
|
En Cursor suggereert al wat je waarschijnlijk volgende doet. Je drukt Tab en het wordt aanvaard. Je typt verder, Tab, verder, Tab. Dit gaat super snel.
|
||||||
|
|
||||||
|
**Waarom is dit gratis?** Omdat Tab Completion niet intensief is voor Cursor – het is lokale voorspelling, niet een volledige AI analyse. Dus gebruik dit VEEL! Dit moet je reflexmatig doen.
|
||||||
|
|
||||||
|
**Tip:** als je een suggestion ziet die je niet wilt, druk je gewoon Escape of tik je wat anders. Geen probleem.
|
||||||
|
|
||||||
|
Dit is echt de feature waar je sneller in je code wordt als je het goed gebruikt."
|
||||||
|
|
||||||
|
_[Demonstreer Tab Completion in je editor. Typ langzaam zodat Cursor suggestions toont. Druk Tab en laat zien hoe snel dit gaat.]_
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 13: @mentions - Context voor je vragen
|
||||||
|
**[09:50 - 09:55]**
|
||||||
|
|
||||||
|
"Laatste feature: **@mentions**. Dit is hoe je de AI context geeft.
|
||||||
|
|
||||||
|
Je kent het van Slack en Discord: als je @iemand typt, tag je ze. In Cursor Chat doe je iets soortgelijks.
|
||||||
|
|
||||||
|
Je kunt typen:
|
||||||
|
- **@file** – je verwijst naar een specifiek bestand. Voorbeeld: '@pages/api/auth.js write a logout endpoint'
|
||||||
|
- **@folder** – je verwijst naar een hele folder. Voorbeeld: '@components analyze this folder and tell me architecture'
|
||||||
|
- **@web** – de AI zoekt het web op. Voorbeeld: 'how do I connect to @web stripe payment gateway?'
|
||||||
|
- **@docs** – DIT IS HEEL BELANGRIJK – je verwijst naar framework documentatie. Voorbeeld: '@docs latest react patterns for state management'
|
||||||
|
|
||||||
|
@docs is een game changer. Als je @docs docs react typen, zal de AI antwoorden tegen de officieële React documentatie, niet tegen oude tutorials. Dit voorkomt dat je advice krijgt van 2019.
|
||||||
|
|
||||||
|
We gaan straks je Skills opzetten, en daar laad je @docs in. Ongelofelijk powerful."
|
||||||
|
|
||||||
|
_[Typ in Chat: '@docs how do I use hooks?' Laat zien dat niks gebeurt totdat Skills ingesteld zijn – dat doen we volgende slide.]_
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 4: SKILLS, RULES & REQUESTS (15 min)
|
||||||
|
|
||||||
|
### Slide 14: Cursor Skills - Framework documentatie inladen
|
||||||
|
**[09:55 - 10:05]**
|
||||||
|
|
||||||
|
"Oké, volgende stap. Ik zei net dat @docs belangrijk is. Daarvoor moeten we eerst je **Cursor Skills** instellen. Dit is hoe je documentatie inlaadt zodat de AI weet tegen welke versies het praat.
|
||||||
|
|
||||||
|
We doen dit SAMEN, dus volg mee op je eigen machine.
|
||||||
|
|
||||||
|
**Stap 1:** Ga naar Settings. Op Mac: Cmd+, (command komma). Op Windows: Ctrl+, (control komma). De Settings paneel opent.
|
||||||
|
|
||||||
|
**Stap 2:** Je zoekt naar 'Features' en je klikt op Features.
|
||||||
|
|
||||||
|
**Stap 3:** Je zoekt naar 'Docs' – je ziet 'Cursor Docs' instelling. Daar klikt je op.
|
||||||
|
|
||||||
|
**Stap 4:** Je ziet een + knop. Je klikt erop. Nu kun je documentatie toevoegen. Dit zijn de drie die ik aanraad:
|
||||||
|
|
||||||
|
- **Next.js:** je gaat naar nextjs.org/docs en je pakt die URL. Voeg toe.
|
||||||
|
- **React:** react.dev is de officieële React docs. Voeg toe.
|
||||||
|
- **Tailwind CSS:** tailwindcss.com/docs. Voeg toe.
|
||||||
|
|
||||||
|
Na toevoegen kun je in Chat @docs gebruiken en de AI leest tegen jouw documentatie. Test het: type in Chat '@docs what is the latest way to do routing in next.js?' en je krijgt antwoord uit de officieële Next.js documentatie, niet uit random StackOverflow.
|
||||||
|
|
||||||
|
Dit is echt belangrijk voor professioneel werken."
|
||||||
|
|
||||||
|
_[DOEN, niet demo. Zorg dat iedereen dit meegedaan heeft. Help met technische vragen. CHECKPOINT: vraag "Iedereen Skills ingesteld?" en wacht op bevestiging.]_
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 15: .cursorrules - Jouw AI richtlijnen
|
||||||
|
**[10:05 - 10:12]**
|
||||||
|
|
||||||
|
"Nu gaan we een .cursorrules bestand maken. Dit is NIET handmatig geschreven – Cursor genereert dit voor je.
|
||||||
|
|
||||||
|
Een .cursorrules file is een bestand in de root van je project waarin je aan Cursor zegt: 'Hey, als je met mijn code werkt, volg deze richtlijnen.'
|
||||||
|
|
||||||
|
Voorbeeld richtlijnen:
|
||||||
|
- 'Alle componenten moeten TypeScript hebben type annotations'
|
||||||
|
- 'Gebruik Tailwind, geen CSS modules'
|
||||||
|
- 'Nederlandse comments in de code'
|
||||||
|
- 'Altijd error handling toevoegen'
|
||||||
|
|
||||||
|
Dit is SUPER handig omdat je je preferences maar één keer ingesteld hebt, en dan volgt de AI altijd.
|
||||||
|
|
||||||
|
**Hoe maak je het?** Heel makkelijk:
|
||||||
|
|
||||||
|
**Stap 1:** Je opent Chat (Ctrl+L).
|
||||||
|
|
||||||
|
**Stap 2:** Je plakt deze prompt:
|
||||||
|
|
||||||
|
'Genereer een .cursorrules bestand voor een Next.js + Tailwind CSS + TypeScript project. Include richtlijnen voor: code style, components best practices, error handling, en Nederlandse comments. Output het volledige bestand klaar om te kopieën.'
|
||||||
|
|
||||||
|
**Stap 3:** Cursor genereert een complete .cursorrules file. Je kopieert dit.
|
||||||
|
|
||||||
|
**Stap 4:** In je project maak je een nieuw bestand genaamd `.cursorrules` in de root folder. Je plakt de content en je saved.
|
||||||
|
|
||||||
|
**Klaar!** Dát is één request, en nu volgt Cursor altijd jouw rules.
|
||||||
|
|
||||||
|
Dit is echt tijd besparen. Je zegt nooit meer 'gebruik TypeScript' – dat weet Cursor al."
|
||||||
|
|
||||||
|
_[Open Chat. Paste je eigen .cursorrules prompt (aanwezig op je machine). Laat zien hoe output eruitziet. Demonstreer kopieën naar nieuw bestand.]_
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 16: Request management - Budget uitzetten
|
||||||
|
**[10:12 - 10:20]**
|
||||||
|
|
||||||
|
"Oké, de grote vraag: requests. Op Hobby heb je BEPERKT aantal requests. Je wilt ze slim gebruiken.
|
||||||
|
|
||||||
|
**Hier is de breakdown:**
|
||||||
|
- **Tab Completion:** GRATIS. Ongelimiteerd. Gebruik dit voor kleine dingen.
|
||||||
|
- **Chat:** 1 request per bericht. Wees voorzichtig.
|
||||||
|
- **Inline Edit:** 1 request. Snel maar denk je in voor je tikt.
|
||||||
|
- **Composer:** 1 request, ongeacht hoe groot. Dit is eigenlijk heel voordelig voor grote dingen.
|
||||||
|
|
||||||
|
**Budget tips:**
|
||||||
|
|
||||||
|
**Eén: Denk eerst, prompt daarna.** Voordat je iets vraagt, bepaal je wat je PRECIES wilt. Maak een kopje koffie, bedenk je vraag, tik dan. Dit voorkomt vijf mislukte requests.
|
||||||
|
|
||||||
|
**Twee: Combineer taken.** In plaats van drie aparte Chat vragen, maak je één grote vraag. Zeg alles in één bericht.
|
||||||
|
|
||||||
|
**Drie: Gebruik Tab Completion voor kleine dingen.** Import statements, losse variabelen, functies. Dit bespaart requests.
|
||||||
|
|
||||||
|
**Vier: Composer voor grote refactors.** Als je iets aan meerdere files moet doen, doe je het in Composer, niet in aparte Chat vragen.
|
||||||
|
|
||||||
|
**Vijf: @mentions voor efficiency.** @docs helpt je beter vragen stellen, minder 'wat is het beste patroon' vragen.
|
||||||
|
|
||||||
|
Op Hobby krijg je genoeg om deze hele les te doen en meer. Maar als je gaat echt projecten bouwen, upgrade je naar Student. Dan heb je veel meer."
|
||||||
|
|
||||||
|
_[Toon scherm met request counter. Leg uit waar je request status ziet (rechtsboven in Cursor).]_
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 5: LIVE DEMO (15 min)
|
||||||
|
|
||||||
|
### Slide 17: Live Demo - Van nul naar werkende website
|
||||||
|
**[10:20 - 10:35]**
|
||||||
|
|
||||||
|
"Oké, genoeg theorie. Ik bouw nu in real-time een werkende Next.js website. Dit doet twee dingen: één, je ziet hoe snel dit echt gaat, en twee, je ziet de volledige workflow die je straks zelf doet.
|
||||||
|
|
||||||
|
**Stap 1: Project setup**
|
||||||
|
```bash
|
||||||
|
mkdir my-demo-site
|
||||||
|
cd my-demo-site
|
||||||
|
git init
|
||||||
|
```
|
||||||
|
|
||||||
|
Ik heb een folder, git aan. Cursor openen.
|
||||||
|
|
||||||
|
**Stap 2: Next.js project**
|
||||||
|
```bash
|
||||||
|
npx create-next-app@latest . --typescript --tailwind --app
|
||||||
|
```
|
||||||
|
|
||||||
|
Ik zeg Yes op TypeScript, Yes op Tailwind, Yes op App Router. Dit duurt ongeveer een minuut.
|
||||||
|
|
||||||
|
**Stap 3: Dev server**
|
||||||
|
```bash
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Nu draait http://localhost:3000 met de default Next.js pagina.
|
||||||
|
|
||||||
|
**Stap 4: .cursorrules via Chat**
|
||||||
|
Ctrl+L. Ik paste mijn prompt. Één request. Copy. Make file `.cursorrules`. Done.
|
||||||
|
|
||||||
|
**Stap 5: HeroSection via Composer**
|
||||||
|
Ctrl+I. 'Create a Hero section component in app/components/HeroSection.tsx with a headline, subheading, and a Call-to-Action button. Use Tailwind classes. Make it look modern.'
|
||||||
|
|
||||||
|
Cursor genereert de hele component. Één request. Ik accepteer.
|
||||||
|
|
||||||
|
**Stap 6: Integrate in page**
|
||||||
|
Ik open app/page.tsx. Voeg import HeroSection. Zet het in HTML. Refresh browser. BOOM. Werkende website, mooi design.
|
||||||
|
|
||||||
|
**Stap 7: Git commit**
|
||||||
|
```bash
|
||||||
|
git add .
|
||||||
|
git commit -m "Initial setup with HeroSection"
|
||||||
|
```
|
||||||
|
|
||||||
|
**Totaal:** Ik gebruikte 2 requests (één voor .cursorrules, één voor HeroSection). Tab Completion hielp met imports en minor edits. Van nul naar werkende website in 15 minuten. Dat kan jij straks ook."
|
||||||
|
|
||||||
|
_[ECHTE DEMO, niet gerendeert. Wys elke stap live. Stop niet totdat npm run dev werkt en browser toont mooi design. Timing is belangrijk – studenten moeten zien dat dit ECHT snel gaat.]_
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 6: HANDS-ON PRAKTIJK (75 min + 15 min pauze)
|
||||||
|
|
||||||
|
### Slide 18: Hands-on opdracht - Studenten bouwen eigen project
|
||||||
|
**[10:35 - 10:50] (+ pauze 10:15-10:30, dan verder tot 11:30]**
|
||||||
|
|
||||||
|
"Jullie beurt. Hier is wat je gaat doen. Dit is dezelfde workflow als mijn demo, maar je doet het zelf.
|
||||||
|
|
||||||
|
**Opdracht:** Bouw een NIEUW project. Mag elk onderwerp zijn – portfolio site, blog, product showcase, whatever. Belangrijkste: je volgt deze stappen:
|
||||||
|
|
||||||
|
**Stap 1: Project initialize**
|
||||||
|
```bash
|
||||||
|
mkdir my-awesome-project
|
||||||
|
cd my-awesome-project
|
||||||
|
git init
|
||||||
|
```
|
||||||
|
|
||||||
|
**Stap 2: Next.js setup**
|
||||||
|
```bash
|
||||||
|
npx create-next-app@latest . --typescript --tailwind --app
|
||||||
|
```
|
||||||
|
TypeScript = Yes, Tailwind = Yes, App Router = Yes.
|
||||||
|
|
||||||
|
**Stap 3: Cursor Skills check**
|
||||||
|
Zorg dat je Next.js, React, en Tailwind documentatie ingeladen hebt. Test @docs.
|
||||||
|
|
||||||
|
**Stap 4: .cursorrules genereren**
|
||||||
|
Chat, één prompt, één request. Kopieën naar bestand.
|
||||||
|
|
||||||
|
**Stap 5: Componenten bouwen**
|
||||||
|
Gebruik Composer (Ctrl+I) om componenten te genereren:
|
||||||
|
- HeroSection (headline, subheading, CTA)
|
||||||
|
- FeatureCards (3-4 feature cards met iconen en beschrijvingen)
|
||||||
|
- TestimonialSection (3 testimonials)
|
||||||
|
- Footer
|
||||||
|
|
||||||
|
Elke Composer request = één component.
|
||||||
|
|
||||||
|
**Stap 6: Integreren in main page**
|
||||||
|
Import alle componenten in app/page.tsx. npm run dev. Check dat alles looks good.
|
||||||
|
|
||||||
|
**Stap 7: Git commit**
|
||||||
|
```bash
|
||||||
|
git add .
|
||||||
|
git commit -m "Complete project setup with all components"
|
||||||
|
```
|
||||||
|
|
||||||
|
**Timing:**
|
||||||
|
- Nu tot 10:15: je begint. Ik loop rond, ik help met problemen.
|
||||||
|
- 10:15-10:30: PAUZE. Stretch, koffie, toilet.
|
||||||
|
- 10:30-11:15: jullie bouwen verder. Meer componenten, refinement, styling tweaks. Ik help.
|
||||||
|
|
||||||
|
**Checks tussendoor:**
|
||||||
|
- Is npm run dev werkend?
|
||||||
|
- Hoe veel requests heb je gebruikt?
|
||||||
|
- Zit je stuck? Vraag me.
|
||||||
|
|
||||||
|
**Let op:** dit is HANDS-ON. Je moet dit zelf doen, niet copy-paste van mij. De waarde zit in het leren van de workflow."
|
||||||
|
|
||||||
|
_[Zet timer op. Check na 10 minuten wie klaar is met setup. Help trackers. Zorg dat iedereen minstens HeroSection werkend heeft voor de pauze.]_
|
||||||
|
|
||||||
|
_[Na pauze: motiveer studenten, help met volgende componenten, praise progress.]_
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## BLOK 7: AFSLUITING (15 min)
|
||||||
|
|
||||||
|
### Slide 19: Resultaten delen
|
||||||
|
**[11:15 - 11:25]**
|
||||||
|
|
||||||
|
"Goed werk iedereen! Nu gaan we een paar resultaten delen. Ik wil 3-4 van jullie zien wat je hebt gebouwd.
|
||||||
|
|
||||||
|
[Roep studenten op om hun project op scherm te delen. Laat hun website zien. Zeg wat je goed vindt – 'Leuke kleuren!' of 'Mooie layout, hoe heb je die FeatureCards gedaan?' Geef high-fives digitaal of letterlijk.]
|
||||||
|
|
||||||
|
Dit is echt professioneel werk. En je hebt dit in anderhalf uur gebouwd. Besef je dat? Met OpenCode zou dit twee keer zo lang geduurd hebben."
|
||||||
|
|
||||||
|
_[Echt naar mensen luisteren. 3-4 korte demo's, niet lang. Maak het positief.]_
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 20: Samenvatting - De les in vijf punten
|
||||||
|
**[11:25 - 11:35]**
|
||||||
|
|
||||||
|
"Laten we samenvatten wat je vandaag geleerd hebt.
|
||||||
|
|
||||||
|
**Eén: Setup.** Je kunt Cursor installeren, een account maken, Skills configureren. Dit is standaard, je doet dit nu automatisch.
|
||||||
|
|
||||||
|
**Twee: AI Features.** Je kent Chat, Inline Edit, Composer, Tab Completion, @mentions. Elke feature heeft een use case. Chat voor vragen, Composer voor grote dingen, Tab Completion voor snelheid.
|
||||||
|
|
||||||
|
**Drie: Workflow.** Initialize project, create Next.js app, .cursorrules, build components, integrate, commit. Dit is de bouwsteen voor alle projecten voortaan.
|
||||||
|
|
||||||
|
**Vier: Request Management.** Je weet dat je beperkt hebt, je plant je requests, je combineert taken. Je denkt, daarna prompt.
|
||||||
|
|
||||||
|
**Vijf: Speed.** Je bouwde een website in anderhalf uur. Dat gaat niet slimmer worden – dat is de norm voortaan.
|
||||||
|
|
||||||
|
Dit zijn de fundamentals. Volgende les gaan we dieper: effectief prompting, hoe je betere vragen stelt, hoe je iteratief werkt met de AI. Dat is waar de echte magie gebeurt."
|
||||||
|
|
||||||
|
_[Zeg duidelijk, maak oogcontact. Dit is de afsluiting.]_
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 21: Huiswerk - DEBUG CHALLENGE
|
||||||
|
**[11:35 - 11:40]**
|
||||||
|
|
||||||
|
"Huiswerk. Dit is een DEBUG CHALLENGE. Je gaat een zip bestand krijgen via Teams. Die zip bevat een half-gebouwde Next.js project – EXPRES met fouten.
|
||||||
|
|
||||||
|
**Wat zit erin:**
|
||||||
|
- Missende dependencies (package.json incomplete)
|
||||||
|
- Syntax errors (typos in components)
|
||||||
|
- Inline styles die naar Tailwind moeten
|
||||||
|
- Import statements die broken zijn
|
||||||
|
- Misschien een API route die niet werkt
|
||||||
|
|
||||||
|
**Je taak:**
|
||||||
|
1. Download de zip
|
||||||
|
2. Extract em
|
||||||
|
3. Open in Cursor
|
||||||
|
4. USE Cursor om ALLE fouten te fixen. Niet handmatig repareren – dat is het punt niet. Gebruik Chat, Inline Edit, Composer. Leer hoe je de AI gebruikt om bugs op te spotten en te fixen.
|
||||||
|
5. Als alles werkend is: npm run dev moet geen errors geven
|
||||||
|
6. Push naar je GitHub
|
||||||
|
|
||||||
|
**Due:** volgende les. Zorg dat je een werkend project hebt en een GitHub link.
|
||||||
|
|
||||||
|
Dit is echt oefenen. Debugging met AI is een skill. Je leert het nu."
|
||||||
|
|
||||||
|
_[Upload de zip naar Teams. Zeg de naam van het bestand luid.]_
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Slide 22: Volgende les preview
|
||||||
|
**[11:40 - 11:45]**
|
||||||
|
|
||||||
|
"Volgende les: **Effectief Prompting & Iteratief Werken**. We gaan dieper.
|
||||||
|
|
||||||
|
Vandaag maakte je basale prompts. Volgende keer leren we:
|
||||||
|
- Prompt engineering: hoe je vragen stelt zodat de AI beter begrijpt wat je wilt
|
||||||
|
- Iteratie: hoe je feedback geeft en verbeteringen doet, stap voor stap
|
||||||
|
- Context building: hoe je de AI steeds meer context geeft voor betere resultaten
|
||||||
|
- Real-world scenarios: fixing bugs, refactoring code, building complex features
|
||||||
|
|
||||||
|
Dit is waar development met AI echt wordt. Prompting is een skill, net als typen of debuggen. We gaan het trainen.
|
||||||
|
|
||||||
|
Tot volgende week!"
|
||||||
|
|
||||||
|
_[Smile. Dit is motiverend. Zeg "Goed gedaan vandaag" en bedank iedereen voor de aandacht.]_
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## TIMING OVERVIEW
|
||||||
|
|
||||||
|
| Blok | Slides | Duratie | Totaal (min) |
|
||||||
|
|------|--------|---------|------|
|
||||||
|
| **BLOK 1: Welkom & Mededeling** | 1-4 | 10 min | 0-10 |
|
||||||
|
| **BLOK 2: Installatie & Setup** | 5-8 | 20 min | 10-30 |
|
||||||
|
| **BLOK 3: Cursor Features** | 9-13 | 15 min | 30-45 |
|
||||||
|
| **BLOK 4: Skills, Rules & Requests** | 14-16 | 15 min | 45-60 |
|
||||||
|
| **BLOK 5: Live Demo** | 17 | 15 min | 60-75 |
|
||||||
|
| **BLOK 6: Hands-on (incl. pauze)** | 18 | 75 min + 15 min pauze | 75-165 |
|
||||||
|
| | | Pauze: 10:15-10:30 | |
|
||||||
|
| **BLOK 7: Afsluiting** | 19-22 | 10 min | 165-175 |
|
||||||
|
| **TOTAAL** | 22 | **175 minuten (2h 55min)** | |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## EXTRA NOTES VOOR TIM
|
||||||
|
|
||||||
|
- **Checkpoints:** Slide 6, 8, 14 – zorg dat iedereen op dezelfde plek is voor je verdergaat
|
||||||
|
- **Problemen:** Bij terminal setup kan het 5 minuten extra kosten. Plan dit in.
|
||||||
|
- **Live demo timing:** dit duurt 15 minuten ECHT. Niet sneller – studenten moeten het zien gebeuren.
|
||||||
|
- **Hands-on pauze:** 10:15-10:30 is VAST. Studenten hebben dit nodig.
|
||||||
|
- **Request usage:** controleer rond 10:45 dat niemand meer dan 5 requests gebruikt heeft. Anders raken ze op.
|
||||||
|
- **Debugging hw:** zip bestand moet express simple bugs hebben (missing import, extra comma, inline style). Niet complex.
|
||||||
|
- **Energy:** rond minuut 120 zakt energie. Zet muziek op pauze, trek grappen, keep it real.
|
||||||
193
Les03-Cursor-Basics/Les03-Hands-On-Opdracht.pdf
Normal file
193
Les03-Cursor-Basics/Les03-Hands-On-Opdracht.pdf
Normal file
@@ -0,0 +1,193 @@
|
|||||||
|
%PDF-1.4
|
||||||
|
%<25><><EFBFBD><EFBFBD> ReportLab Generated PDF document (opensource)
|
||||||
|
1 0 obj
|
||||||
|
<<
|
||||||
|
/F1 2 0 R /F2 3 0 R /F3 4 0 R /F4 5 0 R /F5 7 0 R /F6 9 0 R
|
||||||
|
>>
|
||||||
|
endobj
|
||||||
|
2 0 obj
|
||||||
|
<<
|
||||||
|
/BaseFont /Helvetica /Encoding /WinAnsiEncoding /Name /F1 /Subtype /Type1 /Type /Font
|
||||||
|
>>
|
||||||
|
endobj
|
||||||
|
3 0 obj
|
||||||
|
<<
|
||||||
|
/BaseFont /Helvetica-Bold /Encoding /WinAnsiEncoding /Name /F2 /Subtype /Type1 /Type /Font
|
||||||
|
>>
|
||||||
|
endobj
|
||||||
|
4 0 obj
|
||||||
|
<<
|
||||||
|
/BaseFont /ZapfDingbats /Name /F3 /Subtype /Type1 /Type /Font
|
||||||
|
>>
|
||||||
|
endobj
|
||||||
|
5 0 obj
|
||||||
|
<<
|
||||||
|
/BaseFont /Courier /Encoding /WinAnsiEncoding /Name /F4 /Subtype /Type1 /Type /Font
|
||||||
|
>>
|
||||||
|
endobj
|
||||||
|
6 0 obj
|
||||||
|
<<
|
||||||
|
/Contents 17 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 16 0 R /Resources <<
|
||||||
|
/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ]
|
||||||
|
>> /Rotate 0 /Trans <<
|
||||||
|
|
||||||
|
>>
|
||||||
|
/Type /Page
|
||||||
|
>>
|
||||||
|
endobj
|
||||||
|
7 0 obj
|
||||||
|
<<
|
||||||
|
/BaseFont /Symbol /Name /F5 /Subtype /Type1 /Type /Font
|
||||||
|
>>
|
||||||
|
endobj
|
||||||
|
8 0 obj
|
||||||
|
<<
|
||||||
|
/Contents 18 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 16 0 R /Resources <<
|
||||||
|
/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ]
|
||||||
|
>> /Rotate 0 /Trans <<
|
||||||
|
|
||||||
|
>>
|
||||||
|
/Type /Page
|
||||||
|
>>
|
||||||
|
endobj
|
||||||
|
9 0 obj
|
||||||
|
<<
|
||||||
|
/BaseFont /Helvetica-Oblique /Encoding /WinAnsiEncoding /Name /F6 /Subtype /Type1 /Type /Font
|
||||||
|
>>
|
||||||
|
endobj
|
||||||
|
10 0 obj
|
||||||
|
<<
|
||||||
|
/Contents 19 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 16 0 R /Resources <<
|
||||||
|
/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ]
|
||||||
|
>> /Rotate 0 /Trans <<
|
||||||
|
|
||||||
|
>>
|
||||||
|
/Type /Page
|
||||||
|
>>
|
||||||
|
endobj
|
||||||
|
11 0 obj
|
||||||
|
<<
|
||||||
|
/Contents 20 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 16 0 R /Resources <<
|
||||||
|
/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ]
|
||||||
|
>> /Rotate 0 /Trans <<
|
||||||
|
|
||||||
|
>>
|
||||||
|
/Type /Page
|
||||||
|
>>
|
||||||
|
endobj
|
||||||
|
12 0 obj
|
||||||
|
<<
|
||||||
|
/Contents 21 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 16 0 R /Resources <<
|
||||||
|
/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ]
|
||||||
|
>> /Rotate 0 /Trans <<
|
||||||
|
|
||||||
|
>>
|
||||||
|
/Type /Page
|
||||||
|
>>
|
||||||
|
endobj
|
||||||
|
13 0 obj
|
||||||
|
<<
|
||||||
|
/Contents 22 0 R /MediaBox [ 0 0 595.2756 841.8898 ] /Parent 16 0 R /Resources <<
|
||||||
|
/Font 1 0 R /ProcSet [ /PDF /Text /ImageB /ImageC /ImageI ]
|
||||||
|
>> /Rotate 0 /Trans <<
|
||||||
|
|
||||||
|
>>
|
||||||
|
/Type /Page
|
||||||
|
>>
|
||||||
|
endobj
|
||||||
|
14 0 obj
|
||||||
|
<<
|
||||||
|
/PageMode /UseNone /Pages 16 0 R /Type /Catalog
|
||||||
|
>>
|
||||||
|
endobj
|
||||||
|
15 0 obj
|
||||||
|
<<
|
||||||
|
/Author (\(anonymous\)) /CreationDate (D:20260224200450+00'00') /Creator (\(unspecified\)) /Keywords () /ModDate (D:20260224200450+00'00') /Producer (ReportLab PDF Library - \(opensource\))
|
||||||
|
/Subject (\(unspecified\)) /Title (\(anonymous\)) /Trapped /False
|
||||||
|
>>
|
||||||
|
endobj
|
||||||
|
16 0 obj
|
||||||
|
<<
|
||||||
|
/Count 6 /Kids [ 6 0 R 8 0 R 10 0 R 11 0 R 12 0 R 13 0 R ] /Type /Pages
|
||||||
|
>>
|
||||||
|
endobj
|
||||||
|
17 0 obj
|
||||||
|
<<
|
||||||
|
/Filter [ /ASCII85Decode /FlateDecode ] /Length 2112
|
||||||
|
>>
|
||||||
|
stream
|
||||||
|
Gb!#\D/\/e&H;*)E<TCYm:qAoU8WImdO]7aV+Fk&.gGdd</!o.g9N4j8CnCLm5n4A,s/Q*A3hpQNdR"7DnP8DUDZo+A+"h)#'`.YSQ?4:LVYu)8L+_)i*aq-g@7tGI?5$%mh<eU75YW*@i?XY,)S;rPS\KDo@d?KLl>gQP*60D-SQB)pW1QDm)&aE3Lc9&-8!MT]orLmVIsJ/?-Zm"Gmq_@IiQ=pab?-oQ]oOi\p9`Nj@'FB)%<ZUnD$(q*aK3:PU8_:%^CtLNjQUCeistuiqZXa74TEL5gY+A(m'Cu&ehMi$ABObf);.@*4U$'i\hZHOsnnK!XaRd7<#`1$82(=hff[6ooUQf1!k.oL:_7,`k\VdE,/u)!onlGb^pAajlH7BXpg]q_A"[U-W_Xa_q<33Q9ABhZFk-d/1POu7E*MR(u4'4D27=C;h;2!1t%iII:3_Rd"g5D_C6=SN&6A8%"c>%qQ&0lJiV0i7%-!_5Q,E&LgZg'*Z6ACAD&B'U.VgiWAR>=8uXf8cnPk?pW_OW6tsJQ=[?'rEO@8eJdA5qXX7)Vrn&i&p+ct9A*ZH`7'3a'0D5Pf?L\is]Zo@I5!=[qo@+Ie[iu0%9G/[]NqJrNM'*S=->`[_0>Z$W$Di=Fk8iiN=-\aq'3^`ZUOr`W0a5/2kYd+K>@:.ZpFT:Cou-8<Q3lN49IRItO;VSfG+e`eol[h2.]Tr/"iTF\0<XK8=MfB*J%7t9Ou.G85:0uagQ1CM+;g-`[lM!fXhb)**H#t\3O=e)g&MFuG2'LKK,63q-0?Zt]muI2jCW#Hm4!B%^Q'uWPNcr)5+&P*Ai?9tp\_%AcXpq70:pa5%.`HQlb(:lT%nAXr<E7W<7K&4O^r7"7uA\t!<\`8pL&LgXWdF<%"QjHWNo<qV%J&=0L1^?!sCnl\COR;)'Gl?][i/$/HapB_#VnM4"R+,fmdI]c(3*7J8E0N6fG`f+RNH1g%K?lfgMN>1>u3Bb3J[*H`+Z&iV;p#j!QhbE:W^1IfOhBa7&_N5<-Au9h6j>CI5%5O)OfiQKt&XYOe;d,%RASTie:=IiE_tp.N^>!L,;)qR6R$])2)>o^cFjW#7eR#hqdA>NQjGRq9;oU,D1;%Hbqj^J!$/?nh#c18TPA3X(a#;D;Zglu%l@D:lnU]b/#'_60lDX(\hd$UPNCRbaHq=DM3cZIuo/#1[DEN)RroD0/&UF+m'#@uF^YY+qZB$FF,2SPG)OkqF+6W\2eH]`l:mVBCrYb+m>'L%HK7M;;p)Ge;V2dS_2qrMjH6H77Pbq%OHaT-C&(aS9fK]Lt'5JKo"'hcb=AYBnd[R/E0bB@nIAQD]oc;t_lhB[d)HB(aqsQ.X1s*$QQZege^IcLMVIg$o`oChJ^/Z0*EGh4!eEB<CX0k%C6W8j(&<@&poS3ui^fJRUMW?K%TN=/>)*3"5cqLRWm?\:WfJhr<h!m3"Y<4=p8b*nN9O[6"m5^kGRE-&71N+gul=1Q8Q*C56]O&QP3$>U1m)0Kb,03uW@3HXb'^q80EF6SMtJY)phZi"]@oM&Bg2Of[#MR'&%L_tLa`K@N47.jX?GdFqd3W]!j+?#QZfQN[a+;jh8Wa(op'AMd<DF`cJsWu7sSXBMcM:("'gDl@[0>*`Cg3]KuP$\#0QlhZX[j7Y+KUEAB)%uYh,Vk\WO9F7ooq=_PFKku(gedl#XP#>:MBbpMf@'pW;=d=jFgRkk+-7lGIjQb&RG_E9;o*g74XP5tU76UsHof'5/_Hj$BPE*]H+.i+RQCa^E7VD/!=%pAG:HFEQrugRi.V,AIkGD>=_6oV)Vn\6gRa$D"%j>,+em^a2=7IhANFUT@gZPj,#9"`tJ<=?6;(\_XM-%$H&Cq"*K9H"8q1fILp9GO?Pbk"VLg"AXZSpP.CImbZA8MO+H:gA/,/VXqORZkXkQZN49g:0"l26mm*M7'jH,Le>Eb-Hke'-OcTD1.X3p>UcGF+C4B'i>*h0kY%]NMgtqdI?^OE8iNp-N_pq;>BWlZd]>^dckE,Z)+S5gY/eU.<.T.m/tSY\='mYI-;%N=6H,=)GEu,d$![(Y3EUp*\!Pa'N**JFRk/N4h7q&o=sT/2Xe]ZU>@)(8:=Qp/5dR~>endstream
|
||||||
|
endobj
|
||||||
|
18 0 obj
|
||||||
|
<<
|
||||||
|
/Filter [ /ASCII85Decode /FlateDecode ] /Length 2051
|
||||||
|
>>
|
||||||
|
stream
|
||||||
|
GauHLgJ[&k&:Ml+oN(?Y"VqeTP%C&J]s'3./-@[fZVt)IMfAk:*'7pt0^RD09>8?T!!u!n"a3OVW@pc>gNJ,,Y@IT&@t6du0K=0i@5,=s7h>^=@lP>!rpA5lb"VRuf&K.X^8)*l&0>tB+>1V6#P'C?i7+ehSg;2E'F705SG-GOLAnG1JFC>R1bZ-S5(r1!fKDsfF>D"VkdlFg`]Q4@rVHjaA66?uY-T[Y#![lEE>eo5K&I.I[uDP<d):)hjq65<*K]&(b#KEe_s)@])V(Jh0+n`)N_5+jGg]5NT[jr>Qc*l,(PMtq7CZ;<$=(qmg``7eC*j=E3g372)Ju[POt)an6L@M[>f4$f8:0fI3a/hDpmr1k"2n9*qoi:KGD$99=tee$\SJ!G_rZ'&>1]gRgB:ED5h;g9N=Gl^F[-4R>cAt[jpIa??JI9)0-lUIS<(:_.^Nl>(rj[GN%XH%_67pJkiRIo70I\bMg&b(]DeR`8,'k*0ljJU>*2;W(r[gP=oPX[F"c<l1Z,_B)SZ/6RD;r`/Tnd^?SC2T_jnDp>=[^FQBr.0EEL"pKC*fEp.E'8H2f#+Gb/iUf^g?eh=QN/`u.Z/Fd4_[g2-&lg%uh1iSGVm?Q'Plc8J9$"Em+hmXu;A"D?NsPc>&1Y8oI$ed<-H"WJEC&BCQG\Vr,hj(bM@%%FNa`irlGIm%:q@8L<&Dl1X=NBKW2[;p%C>EG2.eZQDq8\If/:ra&5YmY+1&LP%[U9Vkt<a(DN7_PIkg$p8s#7Ee[VF3*BP.>Fp=ZK9k:)-qCDK7VY#D[[JI]8%VdV46)%.Q05oGnW,^XN#8UW9(5dT*Aaj\oa31!gP"@ZeW6a/s-==d;g?59:C$$O;[-pbBEclj#3mQ$WR[CUS$'rYa/+)"MBU/:ZMc.A)R2.oaQajkr$?D.<6aB%E%?ksVFgO_=D*p-#>rC+,j,?'^\f_'$jo0Y,JdEfX-kTD+Q>DJ%Jb\7cO`B.gtA2>e8+!t70:hb.ug^qEL;Coh&SH`E^0[tZpoU[C_uI>1I_OR>/(QaHB14F@u+aIZ>hq1KoA%(_[%NADan10Z8%4P['SX]?rlba;A9A[n84c]+Y>8t%WJ["M7);6sA8j-EeNZ]ETPC9;o]EDq!dRM/UUCYcK<>8fkQ;:r6m'5"BK!3J18K[!d*JqH%**s4c4YN,b9=Ll`o0No")reH.)^HS82S`#ZX0TT<aZRd\4"HE%b3).O65t_4Snd(>1],F6-4S,-K)HUh^1cYdtIfX57c.9p^"#Ri+5SF>fN=r@dp]Ebp8hqqi"Q+kdL8JK+_m0J[U>s-D$82AtX!6gGE=#Z`$S1'W^0pa5B41Kip[p's4bN^^PJa0i?dB5-%SkRZ"IK+OJD_H`]N$!.^XgdaN5?3F2#Nb1`?;[MPGE_EI=Z=8r?-rZ9-&#domDJT9YM:'#J)JHoVuRSN&rtFc<T'!e")"V*L>/ZDldS6hc-MNLE/A'@8uY[qn>&8FGX!qkBL6i1(;Xp,=eB/oLu5C8&fnHl<NWp87XqmjO47lH5D?mRBV&[%8>4#h$MoI46bM&_e]]j/FJF%a*sF(^Dno:d7<\T_e`_Y1,t<Cl1ad$a=`g%a.np"T>CjKE7aYhZA,PLXN[;l/L5ND7U0d!TgkCjSdMZqEpV2-KBL9sUoYK<5I\#*H(SaR/0%5OiYY`B]QP1MSZRtIW+[eTZ_hZt-lOCH(5q*@55%t*9mh_C$n:"&9(5eIji3V+cs>Q-JY$;A;(SPCa0b6L+0R0@DkX<giH&tQd!1)gZ+DR1@2*2^OCpN9*jLe\R-9%KE2>5YBmbi]:!56f#gqUbr?0a\km\^]3f*?OK%,@?Qd[c@j"(WQ^ijj`V)g19$hrs<].H&_T'2<^'D"(YRn(N]6%[-W?Xa#=1ig(1G4tiFN&`?0Hl<l;gjq:%,IQ6"Mt/%-Ha7f$F844fK%R'93Dk23_qUGZHiDeMHRbHX)B<m5_VCH=3>:RjaLq$jqArt?R>0[Fq$jDELF$-YG`PFJTg]eoVWHs_6$T;i8M*"/0E=JJ_9t7fkku#=G@-(~>endstream
|
||||||
|
endobj
|
||||||
|
19 0 obj
|
||||||
|
<<
|
||||||
|
/Filter [ /ASCII85Decode /FlateDecode ] /Length 1990
|
||||||
|
>>
|
||||||
|
stream
|
||||||
|
Gb!kt>>s<8'RnqHELN<>CsjFO=gDUNqEP;m1r,:4-8QZKN)qP7YJ%3SOSntsad;\WZ9TA_:<4"D83/]ods$g\5k,r&s$pRLf)]^&A\^8.QbW_9&0/N8d/27lB9\hRM-H#S_0hS!+@:<PqEQ=F!=&A@.'VDdo3<J%:P%Flik,f<)#?b6!+uQ1VKn<cE"Jna@V_(B?o#sDkc0;Wc94-)Hocq5Co!!Q.a*uin2)-(BaDul#d,=qB`e*\+ZAan73%Y8n>%=%.L.c!S!PaIII8o\R,9OkdX-G:d4CO@7A:sW;$g)4:O4J"W&4e<Tf(p^'G;+-_Pq<_KOWIk-a%Lb9QhSJ$'*PN-&4J(<AQFk41"Am76?_j2BChV;52'4KFbD>2G<<?[F%H_"eT-gg3^!OiDN.`a"tW^+MQpN?pHhC*M8fg99"(<(?cM@\VA:o4_cpZ3`c\$C*CGuJ@((`badKdgg'+`E4G]'!MS:7Nsjl"&L/:(ht"da"kWHPB27lmp9YX&p#/VM_G+'qV++t*r\E"mNL`qDLN%g=f#(kWY[YuKTmeVfL2K89li*EQ;>!r`/$ok!?[_uiB^J>?Kn)Ja0I.5*8D#n;@'b']^\@_LE-MuqhZ4?m(<WN]P#>/3@0q1WP<?H8q<(m]hA\]I)V/Wc*VOo/8bI3#Ep)rR0AoLmR=0HApqfOZ04BC[.+&BQIfj%E\_P*_`iCU8ZBB.IWF[C'a^GR28)T;,43EMlKI5BHag!1WKumK%HYSGflbO[8@;g+43]PeW$2.0_N<\W-)c#/XIS)NoJ(C987HeDLJAEZm1YMOI::8A%i>\=+&n-Ma`fh%@EDrG9^g^;;_Ha#5Y=k%^7T)#qI&@(B\`C2dafa?q)8t-639UUZ]C1=<^k'cePLLjNFc'b<Dr1rHcW8],i1@\cb$uka=0@S02,32B^2^Jh-(IP.\bME+Vc[jWX9-6piH<F7c1M9WIMgr&di2CKZMn0u-bg]TB_4$gcZ-OE'W9E`k:[si>h0i)=/m9r&Lu9DE^#(r0&8Ci[6'dNE,.CNh],FnhjbEC]BK.KgD>7,^_#8$$G\`mA)s[`)n,dpOhsE\@.tg+;3@EEOI.^N93[!W++R]889XbC@E07KL/Kg1(p[o[AP65XTdb`KDU%ruB&>OX--RTJD#,LJ7Yr$nL?sR>]6['ITJkLuA7lC-buuK%#mWJj-9Ju+dhW:O-bFXrX)>VLNZ@Ys[u*(+Lj'lcRBVQuc)!W7_]-tD>3=D.@J"Q*6I]=j4K9Td[bH@B]<dN^`E-LL@M$sPeg6:G$u)l'9:`_I@X:ndNUh$*)gg]l:Zo5;*PRtVmKL4A0eLR"I>&V;TW99NeI[CREYmcm(?N"N:.H=3T/&Q]Tq71RbVXu]'lZ.#Ceqp12BgAQcMP(3^C=,B3n0MT1b%BOIkAcbJOuacL3W]LXMFc&pj:h4g0`i<e#+,X`%1)ia*0ZjiU28tYtP_k@FL.%;]Hs4#DY?,!&fI-E`:YnBWtA:[KBl)]'[D6;h9d+mu=I]N)0c82qFb\g!"%+BK_f&H/A=3i&uQ-)eU0uPud4M2S.U>[?`Zk3j,4BZC,L*4Mn%=lbs^OPnpg-ZG5UGCe$UE`N==3hClScIucDN!*WT$$nJf.2'Y/Q^G)aZVsMN`i^\D9lT54G8RB(o]QPT@Zs6^WUI\0==#03GBiKOpcBh'K=--riQs=2k\`6LY+.i7:b(%DLXt/d?mc9ZHQer#M(SY-nf7+<Rs0RN?+fW4^>k#ug7OtM[Pk,"5`"pp5X#/Hng-L@.>>f[I^VQJdDbO/HM>nWb1@YnLUA0^s<\ZfAGM;cAkP`:4#;ke:*p(6:-r]Pt2cKlqoemN3c#HDLjDggV"=#aq296\;.!40p-l_Hr5s+^'eGR(2>k>^&m?,YC#J$>uNq.[poA>+3[^3QfYYg!+NQ5IaCtEc0#_]3P,@LDg[]LK]=fcZGmkR&5?b)<0[+PR0/n1B5B+##5mk==5Ud4~>endstream
|
||||||
|
endobj
|
||||||
|
20 0 obj
|
||||||
|
<<
|
||||||
|
/Filter [ /ASCII85Decode /FlateDecode ] /Length 1972
|
||||||
|
>>
|
||||||
|
stream
|
||||||
|
Gb!#\>>s99'RnB338<-3KJ!k&/B]q-IA#7ifG;n.VYcO33fZa)Cb)n6./W?)8A=.O6=@9,('\U>k]/;J^2mfl(B.5'5>2(6%,g?6!bF'q!m1h)_0bAT>2NMK`7"d[LoR(dl3kc;_RXGB4qPcO%LUlW:S?8'e.mYKXp:I/#N\,X&no%H3S;C!?"CLgi%.F>H)I9$Im2/0E*C&=0c)J>?d@V(9k5;?Q&<c1&&BM`"5jD<\;%gMXiO"3Z//6#`"n;_bC/A1SrK&0PVDA.:B4f5pFQTf7^]b<TrQHT-D_A,iri/IH?<o*[G.\6HZN:.:;TiQ;>55e/S$b%J81U\5&SF]Z"&J`ng]k!'LnM%c"4=qj&R[IVm19CS6;n!i1=>ZK3hq<G:4#pq&I;c&MOD!ECr_,%(B^\F@o=glQ*%7ClE5Kn,;,?A,*Qi_AVFR>o][S\;J!f+q*0QPM[-20D:h_r)FD2oX(8Y[?_`7=u?N6f%]Z%'&%u%PBRph^$eB*^o7a"74'`s?'WVK3kU,JUYP?H^NtKK=0D[(%A>i2]92l5SGf$2Ai7#!-#7^_/H5$a@n%DtmLN"2>K/fDWjU%DHcY>6r?T+8OC*=I9=P:+(sBZ>W-NrBa8<9@@b6IBCd^/tX)NGHP/p*h"J]'CBYjhf31@<Si&E.dmPnl5'A/,Gi=aFP%ia<obC3&gch!H>%cN;l@:i]ljS4<lDAGQ70"91:S8=d:]s)BVbF+Z!1Xm?$(onNS4tNIO#ZLNi'r7su1*,8YN;,G;qG;I'm5+_%2WZuIWEEOY(%19$*j;VG/^&CDN:BNI=Hd/3o"fh.r<0'$2,r3h##64!]UTXn3lhn/h@%T^K$3kGM]eC<P\JAkh&m["&F)'7b-WjmLR?K&"FBT3ReL<J6Brbpa@'<(_h1<)U-clpOL)SB[JoPh1<4P.kXNE7Mf9SgR>OuGM&Jg/]T"&[B8)cf(^*]`)l7$G?^.'GTb.+c(ocmrAdXS"b_(`t7K/jjf]aKb9isV(#]CatKVr^q2[3QQ(-u&mW[ug/5oKmJ+ije7F9j+Z7Cq'[OmuPN9@)/1Wq9[4"QRTaUlep;8iR1$9sd!e*dQD+hN./;pG'C0i_KC0X;$sU)dYqqbjn-fSDRo*A6Ks>Y/2TC;)jR;KB[ail4kEG6/&h)%dqi@fEoJ\nF*qW4MrsG1R@'HRVoK@5(%\2_HQ!.j;a'sWi^!`dbOQLLlgt(,_f&YRiSpl5NgmU[1p*PkGfs1o/`''c?c>BU<d+81:`"R#p/&5<krL<BBiZ5Vb*ar<;a&N;F_:LC/V8VqNqC<aoq-AI>o'p'=`rcZ@nN_O-]a'#g[,+[`Q@._`"iiQAl^nhJsK</D%B(7+2n&CYF*0HBP*@dtq:r`*EhO*gY2s:ZD)Jb?CIHX-6O0DQQR6BZGRJg?)R>K#=THdKe>mODp()_mr9#@Y<a[`ka@r[_5PO<o)+clZM*5kau2lF?+g_V%Eb1?+7`XP1Qh[B)"X>^6XjjB"`t[?!LdlmXs]=VY4&9K/2Tg4Ht[[Pkc7Hj(u7iB*Mq;/Q'MFI-O:(M8OgoZJE`t;8u[Rk[<EmTWG0FW,CJ0Pga$_?=CatK9Hh]O5]L%!4r,eMt=c[EPS*"n(2@Z-U0+/$tPZ3`=_EOX1n1R`B0[*dsW5X!.q<MUpC#p_q9,<2fd)G2=7*KhqTbB(W:=_'kt:=lUShs!e4Gt(?,<G+F!q'\,3/!U&to)$MFE+PGj">49i+C*pU<9'7H!p&q"d6G]A>8:NbJ6i*j0r4uY;4Q1$=D)lpop6q![+1Y8kea3-;C+Cg(p.2C`0`S"^RI[hoR`gndRl$`c`4WglkqT#Z"MWhE(/'K\p&sDH>mF4QpV__\=i[Da3>V36X^*]^1TC+Sn2fW>F>u<cI;ehLQl'dY2dpnBLl!d$l>0CC&hd0Zl:PMMfMrir'@=D2/h,@tDW-EoqP8Dmre/qdNm"X*KZ=5JF~>endstream
|
||||||
|
endobj
|
||||||
|
21 0 obj
|
||||||
|
<<
|
||||||
|
/Filter [ /ASCII85Decode /FlateDecode ] /Length 1435
|
||||||
|
>>
|
||||||
|
stream
|
||||||
|
Gb"/&>>sNP'Ro4H*2dPO(orUD:WF:'$S%t\b-90L0/5:#%1+@iFoVE3%LG[n"a7A4R>6nSPO;1i^@.T\>XF#"Nu%bJ0u.KF%PK5,#5o]Ai<\Z)5c`deD3QR)/pNC+k8ciO75Qtj\3tZ$8:hKhdZN?NbL<Gk*9"II"EPikHdEj%o>Y=VO5OiCAk<>2IQY[]\hS:SK@CF'Ed2!9KhhBV%9LZmAAM3-7'k!>Ih]mda=kniLAnmjEeb4,f.$*+`>H+J4'HBZba-hVEg4U,$8-Ja&%jea58lX"ErRjLOI@;I+:9KU(_lBVK5dZ^[AS!UiP9LO;0GBA3h'cBd[Vo/$A-6I(VAfSmVo2uiY\g6kB"8?R#7n"\U@>_M:f]I]\!H[ogj?O"kisJi7gH6NR&pmX>"[:kql0LmP/[&EFYOTgXF[SkQ)/k"2k'A.?$4WCEX9f8;,4k13^12CP>1t;SG\:c+$0,:m?R5WP_%l4WIe4lHhk'LDP>PguO1$l]3p^m&G2OIG8U_qB/U0ahY^5"Nbm.k'K`.Yo:,&Y:Ed"hq(K.Y0^*_[A<Tc[%s"pjOLU_f]%:k[p$Yl>YDqkUtS4KCAT)V&m@"+?&N\O,XkE^:S910/VsuX%WLnZ[)?PlV09AC*'%(1094D5,d)&\:3ss"hs-cAH>qU:j'/Rj]bD0Ul_X):.]@>VV:#\[+GE<>QoI]C\2C))-I2-OZFZq')=k;eq!qoh\51<Sia`2a!:>o--V8.6gn;Ls"(ROilu=X6.6KF3*$u>D[VgD^ROleY*kn_[YHsBm136KscmumHZ@D#M4f_6IQqkO8W!.@NmlqS@O@bhh2`K^A"RF$"AAZul/MPs%Re7=HHRJdcf=h%3D<rD#SU7iO6T^;ZVq*!7B-ah]0:Wor0RUoMq9Yq&94<FT`n>27;/bWNDU[[o+N!"?8WZ5U'6:q9`(-<e'"Kpu&GAUXSqTrV[ER*OA(i@%&%+Dk#j"U6[oA[XkH64-$NF@M#c9,*m8.L1=1rT^<G`B,'a/)6nEe9CO5SJ%#2bnA?ZJCDSkLKX9;]6kO%\=Mo:A%ifr'goKbE]#$aRMAE)6K`5!MX/3UaCo=rfS>oigbKrpeQNLMO>!"C*PCI]M$l'tc^711SLY4<)UnX6%Bjcj@th%45f[ClN>EE.9i@U-VXtilV'eBlgG$O1P7bq"bUm;0I2%@rZ$#\9-a^pS/!MdpOtNWcep.#n#bX1boj;aM]F5BP/V4PKlYM(]_1'rHfB:A)G<T?g:?>kpOrhc),)*gHF\_aP(m)]s1e!P/*-MOt8iWKTOH?jUVX:95FuJh_eFSB^h??oY>o@r:S4H'='#+=1/&i+(Hg/ane%honGLuq6)jSZdcglf$,dg]'&J(m;!hUlY@Uhia;GcV!;MoX`p>K6]`3N2[;&qC'QrrDaR3-H+cY#`nqKI;do~>endstream
|
||||||
|
endobj
|
||||||
|
22 0 obj
|
||||||
|
<<
|
||||||
|
/Filter [ /ASCII85Decode /FlateDecode ] /Length 1644
|
||||||
|
>>
|
||||||
|
stream
|
||||||
|
Gb!#\D/\/e&H;*)E@BDT9jjEc8;YKeD*_O7Akgkol^%U@+u-MgM/jn&anG%Ee=0e`^LT4[V+?EknT`C9F!QfX5k,qsre;l;cQa:@A\^9amXPTf?uu]n7_Q"=7\d'%-Z8OH#j/`u!>32DdK^sFIUJ7uXT<3<B:_bLk:$t48C[Mj8tga6$ZODLI%D-W%dsK5'n\"==0j:c_FY%mS9sbqlLt[2T8dt*:9lFM5CNsZYmJ3o%APA2:+VLa&7XtN<Q&l;#>b+_8`a>jW$Rs*=1LT+'L(VD*/#WN25o"oR+=j%<>(N*Fnf"?aSd&1C\R-Nqf"aHiEu(/M_s5T]SQ4u(b6$_iMN5Z\qGF-:2aGPploF#>3DiV4[PP%T[X(=+3Qr(S,J_I<0WKa;_sg&fi3ag9"[qhbSLjUWFtS4B8!J.BkAgTEs%Q=LV"["b-RZ.>U>G$89P5:%C$'Fds52_)U`!t72Z4SJR=%KGT!"Hiu-&^U:SR_`$WVJMDGM_pa7k[c6:9Lo2M489Xq7\aohop3$tl@r^aA/T&>XG;RoLY@bcSG^0D-)3bgJ,k&W?$B@3uKl9'bdIKqA(]W03PYJ:oUClk87=lU`&UH"$;Z.j5A%Og)S'<2P^;fgBX:P*V3Su&cp^l$!75K5LP";C)a[ZHa2;)dCEKjn!Ggu&3VMQjk@nTZN+RmC/q7D^Sr#%<nD%IU.?W!kA[3bGZZ0#u_l"8e+bI#Wo*EVZ,A,(/PjgZ/SV,>QHl3A7%nZbLWb&bZd#J2NY4"iLRYQ40JnaC;X2:IncK_]XXLW@eOZa;;J;i]13\'68l"YO!g6>jb0W)Y\nq5^_u-CdZbk*O(Q%Vi$gBnUAi7he#.q_=](sbA^c']CF>Z-aY/OU*p></g$--D`'En:^1#[=T'Bi/W"+'!s5T&&2#8$0cu)P"c#q3Yq$/_eDD/6PYqll5e%@bXj&nh@hE-_h*RWhKaTE(EA]*1_H*<;93SG8=p-g?[^2ER<iABQ^m>]g]pIG@haFo,&Q:87(4ZXM5YJUKkn2h(\t,t%j)[9hLPaT>GtTS(=K+2g[S(GX?7KRD[@^_TC"H1:3!Fa<b?/\a''<Wo97:e.Dp@)A6`@0%NIDm#Lb#9F.)1#[Y5+fW"^8)V<JU`^.=HQPiK^'q2LD7.o=:u:Wa]Q[lPd5a0\KEa?'.r"IltM0+rDLH9\LCjIsp6,?\9*O='0$n[EOi`b<;4P1<_T/K$mQ;kWu._4-I;Alhhfb^5G/<4#0L*D_k#(k.-7Tn%p?TdI8K?2nr'JjuSjL,OWHeif8s1H.r`?F"d;3GT5m0ND5N$^$@_ga5cU6h:s"g-$$I4,dU_qK"BkUm%Kj21=#T$:)u,:#^/.Bs$MISi:"$C<!<Gf:oT[JA=<&Jo=H'+nBeS/ku,:`fp;KG<]TT*$H5boZnJIVCfRWAetCMBYh<;[3208([isJbk_-N=[sC_VSS"qkKNA-.J/Q0/<RpRhmb8lR[GhS[cll;-<40#Fh?r6,'>cpm(inraVO?VLcn&R3+!+p.i?[bq03gG'kLfbU0Q4Y509!;_;<*]i][^&RX(KbW*S#46lX@n8fK=DAC.&.Rh%gQRYJg*meNVPIf?=R,O+G<ui`W]:Dh#V]+M-)a*)EK_ndiE`!><7,9E~>endstream
|
||||||
|
endobj
|
||||||
|
xref
|
||||||
|
0 23
|
||||||
|
0000000000 65535 f
|
||||||
|
0000000061 00000 n
|
||||||
|
0000000142 00000 n
|
||||||
|
0000000249 00000 n
|
||||||
|
0000000361 00000 n
|
||||||
|
0000000444 00000 n
|
||||||
|
0000000549 00000 n
|
||||||
|
0000000754 00000 n
|
||||||
|
0000000831 00000 n
|
||||||
|
0000001036 00000 n
|
||||||
|
0000001151 00000 n
|
||||||
|
0000001357 00000 n
|
||||||
|
0000001563 00000 n
|
||||||
|
0000001769 00000 n
|
||||||
|
0000001975 00000 n
|
||||||
|
0000002045 00000 n
|
||||||
|
0000002326 00000 n
|
||||||
|
0000002420 00000 n
|
||||||
|
0000004624 00000 n
|
||||||
|
0000006767 00000 n
|
||||||
|
0000008849 00000 n
|
||||||
|
0000010913 00000 n
|
||||||
|
0000012440 00000 n
|
||||||
|
trailer
|
||||||
|
<<
|
||||||
|
/ID
|
||||||
|
[<a50303de963c6daad04950ac9bd7ed41><a50303de963c6daad04950ac9bd7ed41>]
|
||||||
|
% ReportLab generated PDF document -- digest (opensource)
|
||||||
|
|
||||||
|
/Info 15 0 R
|
||||||
|
/Root 14 0 R
|
||||||
|
/Size 23
|
||||||
|
>>
|
||||||
|
startxref
|
||||||
|
14176
|
||||||
|
%%EOF
|
||||||
240
Les03-Cursor-Basics/Les03-Lesplan.md
Normal file
240
Les03-Cursor-Basics/Les03-Lesplan.md
Normal file
@@ -0,0 +1,240 @@
|
|||||||
|
# Lesplan Les 3: Cursor - AI-Powered Code Editor
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Lesgegevens
|
||||||
|
|
||||||
|
| Item | Details |
|
||||||
|
|------|---------|
|
||||||
|
| **Les** | 3 van 18 |
|
||||||
|
| **Onderwerp** | Cursor - AI-Powered Code Editor |
|
||||||
|
| **Deel** | 1: AI Foundations (Les 1-4) |
|
||||||
|
| **Duur** | 3 uur (180 minuten) |
|
||||||
|
| **Spreektijd** | ~55 minuten |
|
||||||
|
| **Hands-on** | ~75 minuten |
|
||||||
|
| **Pauze** | 15 minuten (10:15-10:30) |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Leerdoelen
|
||||||
|
|
||||||
|
Na deze les kan de student:
|
||||||
|
|
||||||
|
1. Uitleggen wat Cursor is en waarom het beter is dan OpenCode
|
||||||
|
2. Cursor installeren en een Hobby/Student account aanmaken
|
||||||
|
3. Cursor Skills/Docs installeren voor Next.js, React en Tailwind
|
||||||
|
4. Een .cursorrules bestand genereren met AI Chat
|
||||||
|
5. Een nieuw Next.js project opzetten met npx create-next-app
|
||||||
|
6. De vijf AI features gebruiken: Chat, Inline Edit, Composer, Tab Completion, @mentions
|
||||||
|
7. Efficiënt omgaan met requests (Hobby account management)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Voorbereiding docent
|
||||||
|
|
||||||
|
### Technische setup
|
||||||
|
- [ ] Cursor geïnstalleerd
|
||||||
|
- [ ] Student account geactiveerd
|
||||||
|
- [ ] npx create-next-app getest
|
||||||
|
- [ ] Cursor Skills/Docs toegevoegd (Next.js, React, Tailwind)
|
||||||
|
- [ ] Demo .cursorrules gegenereerd
|
||||||
|
- [ ] Huiswerk zipbestand gemaakt (les3-debug-challenge.zip) met:
|
||||||
|
- Missende dependencies in package.json
|
||||||
|
- Syntax errors in componenten
|
||||||
|
- Inline styles die naar Tailwind moeten
|
||||||
|
- Missing imports
|
||||||
|
|
||||||
|
### Student voorkennis (uit Les 1-2)
|
||||||
|
- GitHub account, basis git
|
||||||
|
- npm/node.js geïnstalleerd
|
||||||
|
- Terminal basics
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Lesverloop
|
||||||
|
|
||||||
|
### Blok 1: Welkom & Mededeling (10 minuten)
|
||||||
|
|
||||||
|
| Tijd | Activiteit | Slides |
|
||||||
|
|------|------------|--------|
|
||||||
|
| 09:00-09:02 | Welkom, titelslide | 1 |
|
||||||
|
| 09:02-09:04 | Planning vandaag | 2 |
|
||||||
|
| 09:04-09:07 | Terugblik Les 2, waarom Cursor | 3 |
|
||||||
|
| 09:07-09:10 | Wat is Cursor? Features overzicht | 4 |
|
||||||
|
|
||||||
|
**Kernboodschap:** "Cursor is speciaal gemaakt voor developers. Geen token limits, ingebouwde terminal, gratis Student plan."
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Blok 2: Installatie & Setup (20 minuten)
|
||||||
|
|
||||||
|
| Tijd | Activiteit | Slides |
|
||||||
|
|------|------------|--------|
|
||||||
|
| 09:10-09:13 | Download Cursor | 5 |
|
||||||
|
| 09:13-09:18 | Account aanmaken (Hobby → Student later) | 6 |
|
||||||
|
| 09:18-09:22 | Interface tour | 7 |
|
||||||
|
| 09:22-09:30 | Terminal Setup Check SAMEN | 8 |
|
||||||
|
|
||||||
|
**Checkpoints:**
|
||||||
|
- ✓ Cursor geïnstalleerd en geopend
|
||||||
|
- ✓ node -v, git --version, npm -v werken
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Blok 3: Cursor Features (15 minuten)
|
||||||
|
|
||||||
|
| Tijd | Activiteit | Slides |
|
||||||
|
|------|------------|--------|
|
||||||
|
| 09:30-09:33 | Chat Panel (Ctrl+L) | 9 |
|
||||||
|
| 09:33-09:36 | Inline Edit (Ctrl+K) | 10 |
|
||||||
|
| 09:36-09:39 | Composer (Ctrl+I) | 11 |
|
||||||
|
| 09:39-09:41 | Tab Completion (GRATIS!) | 12 |
|
||||||
|
| 09:41-09:43 | @ Mentions + @docs | 13 |
|
||||||
|
|
||||||
|
**Kernboodschap:** "Vijf features, elk voor ander doel. Tab Completion is GRATIS - gebruik dat voor kleine dingen!"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Blok 4: Skills, Rules & Requests (15 minuten)
|
||||||
|
|
||||||
|
| Tijd | Activiteit | Slides |
|
||||||
|
|------|------------|--------|
|
||||||
|
| 09:43-09:48 | Cursor Skills installeren (Next.js, React, Tailwind docs) - SAMEN DOEN | 14 |
|
||||||
|
| 09:48-09:53 | .cursorrules genereren met Chat | 15 |
|
||||||
|
| 09:53-09:58 | Request management tips (Hobby account) | 16 |
|
||||||
|
|
||||||
|
**Checkpoints:**
|
||||||
|
- ✓ Docs toegevoegd in Cursor Settings
|
||||||
|
- ✓ Studenten begrijpen request kosten
|
||||||
|
|
||||||
|
**Belangrijk:** Benadruk dat Tab Completion GRATIS is. Chat/Composer/Inline Edit kosten elk 1 request.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Blok 5: Live Demo (15 minuten)
|
||||||
|
|
||||||
|
| Tijd | Activiteit | Slides |
|
||||||
|
|------|------------|--------|
|
||||||
|
| 09:58-10:13 | LIVE DEMO: Nieuw project workflow | 17 |
|
||||||
|
|
||||||
|
**Demo flow:**
|
||||||
|
1. mkdir + git init (1 min)
|
||||||
|
2. npx create-next-app@latest . (2 min)
|
||||||
|
3. npm run dev → toon localhost:3000 (1 min)
|
||||||
|
4. Chat: genereer .cursorrules (3 min, 1 request)
|
||||||
|
5. Composer: maak HeroSection component (4 min, 1 request)
|
||||||
|
6. Toon resultaat in browser (1 min)
|
||||||
|
7. git add + commit (1 min)
|
||||||
|
|
||||||
|
**Doel:** Studenten zien de hele workflow in 15 minuten
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Blok 6: Hands-On Opdracht (75 min + 15 min pauze)
|
||||||
|
|
||||||
|
#### Deel 1 (10:13-10:15, intro + start)
|
||||||
|
|
||||||
|
| Tijd | Activiteit |
|
||||||
|
|------|------------|
|
||||||
|
| 10:13-10:15 | Opdracht uitleggen (Slide 18 op scherm) |
|
||||||
|
|
||||||
|
#### Hands-on Deel 1 (start - 10:15)
|
||||||
|
|
||||||
|
Studenten starten met STAP 1 (npx create-next-app)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### ☕ PAUZE (10:15-10:30)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### Hands-on Deel 2 (10:30-11:45)
|
||||||
|
|
||||||
|
**Check [10:45]:**
|
||||||
|
"Wie heeft npx gedaan? Wie heeft .cursorrules? Wie heeft een component?"
|
||||||
|
|
||||||
|
**Check [11:00]:**
|
||||||
|
"Wie heeft al 2 componenten? Hoeveel requests heb je nog over?"
|
||||||
|
|
||||||
|
**Check [11:30]:**
|
||||||
|
"Wie heeft git gecommit? Wie wil zijn project laten zien?"
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Blok 7: Afsluiting (15 minuten)
|
||||||
|
|
||||||
|
| Tijd | Activiteit | Slides |
|
||||||
|
|------|------------|--------|
|
||||||
|
| 11:45-11:50 | Resultaten delen (3-4 studenten) | 19 |
|
||||||
|
| 11:50-11:53 | Samenvatting | 20 |
|
||||||
|
| 11:53-11:58 | Huiswerk uitleggen (DEBUG CHALLENGE!) | 21 |
|
||||||
|
| 11:58-12:00 | Volgende les preview | 22 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Materialen
|
||||||
|
|
||||||
|
- **Slide-Overzicht:** Les03-Slide-Overzicht.md
|
||||||
|
- **Lesopdracht:** Les03-Bijlage-A-Lesopdracht.md
|
||||||
|
- **Huiswerkopdracht:** Les03-Bijlage-B-Huiswerkopdracht.md
|
||||||
|
|
||||||
|
### Huiswerk zipbestand voorbereiden
|
||||||
|
|
||||||
|
**les3-debug-challenge.zip moet bevatten:**
|
||||||
|
- Een Next.js project (App Router, TypeScript, Tailwind)
|
||||||
|
- package.json met 1-2 missende dependencies (bijv. lucide-react gebruikt maar niet in deps)
|
||||||
|
- 1-2 syntax errors (missing closing tag, typo in import)
|
||||||
|
- 3-4 componenten met inline styles (style={{...}}) die naar Tailwind moeten
|
||||||
|
- Een component met een missing import
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Veelvoorkomende problemen
|
||||||
|
|
||||||
|
| Probleem | Oorzaak | Oplossing |
|
||||||
|
|----------|---------|-----------|
|
||||||
|
| npx create-next-app faalt | Node.js te oud | nvm install 20 && nvm use 20 |
|
||||||
|
| npm run dev werkt niet | Verkeerde folder | cd naar project folder, npm install |
|
||||||
|
| Chat/Composer reageert niet | Requests op of internet | Check cursor.com/account, check internet |
|
||||||
|
| .cursorrules werkt niet | Niet in root of typo | Check bestandsnaam en locatie |
|
||||||
|
| Cursor crash | Memory issue | Restart Cursor |
|
||||||
|
| Terminal commands not found | PATH niet goed | Restart Cursor, check nvm |
|
||||||
|
|
||||||
|
## Request Budget Planning
|
||||||
|
|
||||||
|
| Activiteit | Requests |
|
||||||
|
|------------|----------|
|
||||||
|
| .cursorrules genereren (Chat) | 1 |
|
||||||
|
| Hero component (Composer) | 1 |
|
||||||
|
| Styling tweaken (Inline Edit) | 1 |
|
||||||
|
| Extra component (Composer) | 1 |
|
||||||
|
| Vragen/debugging (Chat) | 2-3 |
|
||||||
|
| **Totaal in de les** | **~6-7** |
|
||||||
|
|
||||||
|
Tab Completion kost GEEN requests - benadruk dit!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Voorbereiding Tim
|
||||||
|
|
||||||
|
**1-2 dagen voor les:**
|
||||||
|
- [ ] npx create-next-app testen op eigen machine
|
||||||
|
- [ ] Cursor Skills/Docs toevoegen
|
||||||
|
- [ ] .cursorrules genereren als demo
|
||||||
|
- [ ] Huiswerk zip maken met fouten
|
||||||
|
- [ ] Upload zip naar Teams
|
||||||
|
|
||||||
|
**Dag voor les:**
|
||||||
|
- [ ] Projector test
|
||||||
|
- [ ] Internet snelheid checken
|
||||||
|
- [ ] Cursor fresh install testen (wie upgrade snel?)
|
||||||
|
|
||||||
|
**Tijdens les:**
|
||||||
|
- [ ] Iedereen npx create-next-app laten draaien
|
||||||
|
- [ ] Terminal checks KRITISCH (slide 8)
|
||||||
|
- [ ] Request management benadrukken
|
||||||
|
- [ ] Active walking tijdens hands-on
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Succes met Les 3!**
|
||||||
1033
Les03-Cursor-Basics/Les03-Slide-Overzicht.md
Normal file
1033
Les03-Cursor-Basics/Les03-Slide-Overzicht.md
Normal file
File diff suppressed because it is too large
Load Diff
BIN
Les03-Cursor-Basics/les3-debug-challenge-hard.zip
Normal file
BIN
Les03-Cursor-Basics/les3-debug-challenge-hard.zip
Normal file
Binary file not shown.
BIN
Les03-Cursor-Basics/les3-debug-challenge.zip
Normal file
BIN
Les03-Cursor-Basics/les3-debug-challenge.zip
Normal file
Binary file not shown.
BIN
Les03-Cursor-Basics/zi4PuQhg
Normal file
BIN
Les03-Cursor-Basics/zi4PuQhg
Normal file
Binary file not shown.
563
readme.md
563
readme.md
@@ -19,26 +19,28 @@ Een 18-weekse cursus die studenten meeneemt van AI-beginner naar AI-powered deve
|
|||||||
|
|
||||||
## Overzicht
|
## Overzicht
|
||||||
|
|
||||||
|
> **Let op:** Curriculum v2 - geherstructureerd na feedback les 1-2. Cursor vervangt OpenCode als primaire AI tool. Meer tijd voor Next.js en Supabase.
|
||||||
|
|
||||||
| Les | Onderwerp | Deel | Status |
|
| Les | Onderwerp | Deel | Status |
|
||||||
|-----|-----------|------|--------|
|
|-----|-----------|------|--------|
|
||||||
| 01 | [Introductie tot AI en Large Language Models](Samenvattingen/Les01-Samenvatting.md) | 1 | ✅ Uitgewerkt |
|
| 01 | [Introductie tot AI en Large Language Models](Samenvattingen/Les01-Samenvatting.md) | 1 | ✅ Gegeven |
|
||||||
| 02 | [AI Code Assistants en OpenCode](Samenvattingen/Les02-Samenvatting.md) | 1 | ✅ Uitgewerkt |
|
| 02 | [AI Code Assistants (OpenCode → Cursor)](Samenvattingen/Les02-Samenvatting.md) | 1 | ✅ Gegeven |
|
||||||
| 03 | [AI Ethics, Privacy & Security + WebStorm](Samenvattingen/Les03-Samenvatting.md) | 1 | 📋 Samenvatting |
|
| 03 | [Cursor Setup & Basics](Samenvattingen/Les03-Samenvatting.md) | 1 | 🔨 In ontwikkeling |
|
||||||
| 04 | [Effectief Prompting, Iteratief Werken & Skills](Samenvattingen/Les04-Samenvatting.md) | 1 | 📋 Samenvatting |
|
| 04 | [Effectief Prompting, Iteratief Werken & Skills](Samenvattingen/Les04-Samenvatting.md) | 1 | 📋 Samenvatting |
|
||||||
| 05 | [TypeScript Basics](Samenvattingen/Les05-Samenvatting.md) | 2 | 📋 Samenvatting |
|
| 05 | [TypeScript Basics](Samenvattingen/Les05-Samenvatting.md) | 2 | 📋 Samenvatting |
|
||||||
| 06 | [Next.js Fundamentals 1: SSR & Routing](Samenvattingen/Les06-Samenvatting.md) | 2 | 📋 Samenvatting |
|
| 06 | [Next.js 1: Pages, Routing & Layouts](Samenvattingen/Les06-Samenvatting.md) | 2 | 📋 Samenvatting |
|
||||||
| 07 | [Next.js Fundamentals 2: API Routes & Data Fetching](Samenvattingen/Les07-Samenvatting.md) | 2 | 📋 Samenvatting |
|
| 07 | [Next.js 2: Server Components & Data Fetching](Samenvattingen/Les07-Samenvatting.md) | 2 | 📋 Samenvatting |
|
||||||
| 08 | [Database Principles](Samenvattingen/Les08-Samenvatting.md) | 2 | 📋 Samenvatting |
|
| 08 | [Next.js 3: API Routes & Server Actions](Samenvattingen/Les08-Samenvatting.md) | 2 | 📋 Samenvatting |
|
||||||
| 09 | [Supabase Basics](Samenvattingen/Les09-Samenvatting.md) | 2 | 📋 Samenvatting |
|
| 09 | [Database Principles & Supabase Setup](Samenvattingen/Les09-Samenvatting.md) | 2 | 📋 Samenvatting |
|
||||||
| 10 | [Full-Stack Mini Project](Samenvattingen/Les10-Samenvatting.md) | 3 | 📋 Samenvatting |
|
| 10 | [Supabase: Auth & CRUD](Samenvattingen/Les10-Samenvatting.md) | 2 | 📋 Samenvatting |
|
||||||
| 11 | [Hands-on: Van Idee naar Prototype](Samenvattingen/Les11-Samenvatting.md) | 3 | 📋 Samenvatting |
|
| 11 | [Full-Stack Mini Project](Samenvattingen/Les11-Samenvatting.md) | 3 | 📋 Samenvatting |
|
||||||
| 12 | [Introduction to Cursor](Samenvattingen/Les12-Samenvatting.md) | 3 | 📋 Samenvatting |
|
| 12 | [Styling: Tailwind CSS & shadcn/ui](Samenvattingen/Les12-Samenvatting.md) | 3 | 📋 Samenvatting |
|
||||||
| 13 | [Prompt Engineering & Custom GPTs](Samenvattingen/Les13-Samenvatting.md) | 4 | 📋 Samenvatting |
|
| 13 | [Hands-on: Van Idee naar Prototype](Samenvattingen/Les13-Samenvatting.md) | 3 | 📋 Samenvatting |
|
||||||
| 14 | [Project Setup & Repository Structure](Samenvattingen/Les14-Samenvatting.md) | 4 | 📋 Samenvatting |
|
| 14 | [Project Setup & AI Config (.cursorrules, claude.md)](Samenvattingen/Les14-Samenvatting.md) | 3 | 📋 Samenvatting |
|
||||||
| 15 | [MCP & Context Management](Samenvattingen/Les15-Samenvatting.md) | 4 | 📋 Samenvatting |
|
| 15 | [Vercel AI SDK, Tool Calling & Agents](Samenvattingen/Les15-Samenvatting.md) | 4 | 📋 Samenvatting |
|
||||||
| 16 | [Mastering Cursor](Samenvattingen/Les16-Samenvatting.md) | 4 | 📋 Samenvatting |
|
| 16 | [AI Chat Interface & Streaming](Samenvattingen/Les16-Samenvatting.md) | 4 | 📋 Samenvatting |
|
||||||
| 17 | [Vercel AI SDK, Tool Calling & Agents](Samenvattingen/Les17-Samenvatting.md) | 4 | 📋 Samenvatting |
|
| 17 | [Eindproject Werkdag](Samenvattingen/Les17-Samenvatting.md) | 4 | 📋 Samenvatting |
|
||||||
| 18 | [Deployment & Production](Samenvattingen/Les18-Samenvatting.md) | 4 | 📋 Samenvatting |
|
| 18 | [Deployment, Presentaties & Evaluatie](Samenvattingen/Les18-Samenvatting.md) | 4 | 📋 Samenvatting |
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -46,12 +48,12 @@ Een 18-weekse cursus die studenten meeneemt van AI-beginner naar AI-powered deve
|
|||||||
|
|
||||||
| Deel | Lessen | Tools | Kosten |
|
| Deel | Lessen | Tools | Kosten |
|
||||||
|------|--------|-------|--------|
|
|------|--------|-------|--------|
|
||||||
| Deel 1: AI Foundations | 1-4 | ChatGPT, v0.dev, OpenCode Desktop App, WebStorm | Gratis (WebStorm via school) |
|
| Deel 1: AI Foundations | 1-4 | ChatGPT, v0.dev, OpenCode, **Cursor** | Gratis (Cursor Student Plan) |
|
||||||
| Deel 2: Technical Foundations | 5-9 | TypeScript, Next.js, React Query, Supabase | Gratis |
|
| Deel 2: Technical Foundations | 5-10 | TypeScript, Next.js, Supabase | Gratis |
|
||||||
| Deel 3: Integration & AI Tooling | 10-12 | Next.js, Supabase, Cursor | Free tier beschikbaar |
|
| Deel 3: Full-Stack Development | 11-14 | Next.js, Supabase, Tailwind, **shadcn/ui**, Cursor | Gratis |
|
||||||
| Deel 4: Advanced AI Features | 13-18 | Cursor, Custom GPTs, Claude Projects, Vercel AI SDK, Tool Calling, Agents | Free tier beschikbaar |
|
| Deel 4: Advanced AI & Deployment | 15-18 | Cursor, Vercel AI SDK, Vercel | Gratis (Cursor Student Plan) |
|
||||||
|
|
||||||
**Eindopdracht:** Cursor (free tier voldoende)
|
**Eindopdracht:** Cursor (Student Plan - gratis Pro voor 1 jaar)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -59,7 +61,7 @@ Een 18-weekse cursus die studenten meeneemt van AI-beginner naar AI-powered deve
|
|||||||
|
|
||||||
**4 lessen · 7 EC**
|
**4 lessen · 7 EC**
|
||||||
|
|
||||||
Kennismaking met AI, LLMs en de basis van AI-assisted development.
|
Kennismaking met AI, LLMs en de basis van AI-assisted development met Cursor.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -98,30 +100,30 @@ Kennismaking met AI, LLMs en de basis van AI-assisted development.
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Les 2: AI Code Assistants en OpenCode
|
### Les 2: AI Code Assistants (OpenCode → Cursor)
|
||||||
|
|
||||||
**Tools:** OpenCode Desktop App, OpenCode Zen (gratis AI), Git, Vercel
|
**Tools:** OpenCode Desktop App, Cursor (Preview), Git, Vercel
|
||||||
|
|
||||||
**Docent vertelt:**
|
**Docent vertelt:**
|
||||||
- Wat is OpenCode? Open-source AI coding assistant met 60.000+ GitHub stars
|
- Recap: OpenCode workflow uit Les 1 huiswerk
|
||||||
- Terminal versie (korte demo) vs Desktop App (wat we gebruiken)
|
- Introduceer Cursor: professionele AI editor
|
||||||
- OpenCode Zen: gratis AI modellen, geen API key nodig
|
- Cursor vs OpenCode: krachten en zwakten
|
||||||
- Keyboard shortcuts: `Ctrl+K` (commands), `@` (file search), `Tab` (Build/Plan mode)
|
- Installatie en configuratie
|
||||||
- Build vs Plan mode: wanneer welke gebruiken
|
- Keyboard shortcuts: `Tab` (autocomplete), `Ctrl+K` (inline edit), `Ctrl+L` (chat)
|
||||||
- De deployment workflow: git push → Vercel auto-deploy
|
- De deployment workflow: git push → Vercel auto-deploy
|
||||||
|
|
||||||
**Studenten doen:**
|
**Studenten doen:**
|
||||||
- Korte terugblik op Les 1 (v0 workflow)
|
- OpenCode Desktop App gebruiken voor continue integratie
|
||||||
- OpenCode Desktop App installeren en OpenCode Zen configureren
|
- Cursor installeren en eerste keer verkennen
|
||||||
- Bestaand v0 project openen en lokaal draaien (in ingebouwde terminal)
|
- Bestaand v0 project openen in Cursor
|
||||||
- Met OpenCode een nieuwe pagina maken + link op homepage
|
- Met Cursor een nieuwe pagina maken + link op homepage
|
||||||
- Deployen via git push → Vercel
|
- Deployen via git push → Vercel
|
||||||
|
|
||||||
**Lesopdracht:** Maak een nieuwe pagina in je v0 project. Clone je repo, draai lokaal, maak een pagina (/about, /services, of /contact) met componenten, voeg link op homepage toe, deploy minimaal 2x naar Vercel.
|
**Lesopdracht:** Maak een nieuwe pagina in je v0 project. Clone je repo, draai lokaal, maak een pagina (/about, /services, of /contact) met componenten, voeg link op homepage toe, deploy minimaal 2x naar Vercel.
|
||||||
|
|
||||||
**Huiswerk:**
|
**Huiswerk:**
|
||||||
- Maak nieuw project vanaf scratch met `create-next-app`
|
- Maak nieuw project vanaf scratch met `create-next-app`
|
||||||
- Bouw 3 componenten met OpenCode (navbar, hero, + keuze)
|
- Bouw 3 componenten met Cursor (navbar, hero, + keuze)
|
||||||
- Push naar GitHub, koppel aan Vercel
|
- Push naar GitHub, koppel aan Vercel
|
||||||
- Schrijf reflectie (300 woorden)
|
- Schrijf reflectie (300 woorden)
|
||||||
|
|
||||||
@@ -137,27 +139,29 @@ Kennismaking met AI, LLMs en de basis van AI-assisted development.
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Les 3: AI Ethics, Privacy & Security + WebStorm Integration
|
### Les 3: Cursor Setup & Basics
|
||||||
|
|
||||||
**Tools:** WebStorm (school licentie), OpenCode plugin, Git
|
**Tools:** Cursor, Git, GitHub
|
||||||
|
|
||||||
**Docent vertelt:**
|
**Docent vertelt:**
|
||||||
- Privacy risico's: wat NOOIT te delen met AI (API keys, credentials, client data)
|
- Cursor overview: tab completion, inline edits, chat, composer
|
||||||
- Data ownership bij AI services - waar gaat je code naartoe?
|
- Free tier vs Student Plan vs Pro
|
||||||
- Security vulnerabilities in AI-generated code (SQL injection, XSS)
|
- Installatie en first-time setup
|
||||||
- GDPR/AVG compliance basics
|
- Keyboard shortcuts: `Tab` (autocomplete), `Ctrl+K` (inline), `Ctrl+L` (chat), `Ctrl+Shift+L` (composer)
|
||||||
- WebStorm als professionele IDE
|
- AI model keuze: wanneer Haiku vs Sonnet?
|
||||||
|
- Privacy & security: hoe Cursor data behandelt
|
||||||
|
- `.cursorrules` introduceer: custom instructions voor je project
|
||||||
|
|
||||||
**Studenten doen:**
|
**Studenten doen:**
|
||||||
- **Groepsdiscussie:** Bespreek klassikaal de blog posts uit Les 2 - wat waren de ervaringen met AI-assisted coding?
|
- **Groepsdiscussie:** Bespreek klassikaal ervaringen van vorige les - wat vond je van Cursor vs OpenCode?
|
||||||
- Security workshop: identificeer problemen in AI-generated code
|
- Cursor installeren en Student Plan activeren
|
||||||
- Maak persoonlijke "AI Safety Checklist"
|
- Een van je Les 2 projecten openen in Cursor
|
||||||
- WebStorm installeren met school licentie
|
- Tab completion, Ctrl+K, en Ctrl+L uitproberen
|
||||||
- OpenCode plugin configureren in WebStorm
|
- Begint `.cursorrules` bestand voor je project
|
||||||
|
|
||||||
**Lesopdracht:** Security audit van AI-generated code (vind 5 problemen), setup WebStorm met OpenCode plugin, maak je eerste project in WebStorm.
|
**Lesopdracht:** Open je Les 2 project in Cursor, voeg 3 nieuwe features toe (elk met ander shortcut: Tab, Ctrl+K, Chat), test telkens of het werkt, noteer: welke shortcut voelt het nuttigst?
|
||||||
|
|
||||||
**Huiswerk:** Bouw secure feature (contact form of auth flow), review met je Safety Checklist, schrijf uitgebreide README met gevonden issues en fixes.
|
**Huiswerk:** Experimenteer met Cursor Composer (Ctrl+Shift+L) op een bestaande component, schrijf reflectie (300 woorden) vergelijk je Cursor/OpenCode ervaringen, maak start-`.cursorrules` voor je eindproject.
|
||||||
|
|
||||||
[→ Ga naar Les 3](Samenvattingen/Les03-Samenvatting.md)
|
[→ Ga naar Les 3](Samenvattingen/Les03-Samenvatting.md)
|
||||||
|
|
||||||
@@ -191,7 +195,7 @@ Kennismaking met AI, LLMs en de basis van AI-assisted development.
|
|||||||
|
|
||||||
# Deel 2: Technical Foundations
|
# Deel 2: Technical Foundations
|
||||||
|
|
||||||
**5 lessen · 8 EC**
|
**6 lessen · 10 EC**
|
||||||
|
|
||||||
Stevige technische basis: TypeScript, Next.js, databases en Supabase.
|
Stevige technische basis: TypeScript, Next.js, databases en Supabase.
|
||||||
|
|
||||||
@@ -228,7 +232,7 @@ Stevige technische basis: TypeScript, Next.js, databases en Supabase.
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Les 6: Next.js Fundamentals 1 - SSR & Routing
|
### Les 6: Next.js 1: Pages, Routing & Layouts
|
||||||
|
|
||||||
**Tools:** Next.js 14, OpenCode/WebStorm, Vercel
|
**Tools:** Next.js 14, OpenCode/WebStorm, Vercel
|
||||||
|
|
||||||
@@ -262,137 +266,167 @@ Stevige technische basis: TypeScript, Next.js, databases en Supabase.
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Les 7: Next.js Fundamentals 2 - API Routes & Data Fetching
|
### Les 7: Next.js 2: Server Components & Data Fetching
|
||||||
|
|
||||||
**Tools:** Next.js 14, React Query (TanStack Query), OpenCode
|
**Tools:** Next.js 14, React Query (TanStack Query), Cursor
|
||||||
|
|
||||||
**Docent vertelt:**
|
**Docent vertelt:**
|
||||||
- Server Components vs Client Components
|
- Server Components vs Client Components
|
||||||
- 'use client' directive: wanneer en waarom
|
- 'use client' directive: wanneer en waarom
|
||||||
- Data fetching in Server Components (async/await)
|
- Data fetching in Server Components (async/await)
|
||||||
- API Routes: Route Handlers in App Router
|
|
||||||
- GET, POST, PUT, DELETE requests
|
|
||||||
- React Query: waarom, installatie, basics
|
- React Query: waarom, installatie, basics
|
||||||
- useQuery en useMutation hooks
|
- useQuery en useMutation hooks
|
||||||
- Caching en revalidation basics
|
- Caching en revalidation strategies
|
||||||
|
|
||||||
**Studenten doen:**
|
**Studenten doen:**
|
||||||
- Server Component met data fetching maken
|
- Server Component met data fetching maken
|
||||||
- API route schrijven
|
- Client Component met React Query maken
|
||||||
- Client Component met React Query
|
- useQuery en useMutation implementeren
|
||||||
- CRUD operations via API routes
|
- Caching strategieën testen
|
||||||
|
|
||||||
**Lesopdracht:**
|
**Lesopdracht:**
|
||||||
1. Maak `/api/products` route met GET en POST
|
1. Maak Server Component met async data fetching
|
||||||
2. Bouw Server Component die products fetcht
|
2. Bouw Client Component met React Query
|
||||||
3. Installeer React Query, maak QueryClientProvider
|
3. Implementeer useQuery voor producten
|
||||||
4. Bouw Client Component met useQuery
|
4. Voeg useMutation toe voor user interactions
|
||||||
5. Implementeer useMutation voor product toevoegen
|
5. Test caching behavior
|
||||||
|
|
||||||
**Huiswerk:** Voeg PUT en DELETE toe aan API, implementeer optimistic updates met React Query, bouw complete CRUD interface.
|
**Huiswerk:** Experimenteer met revalidation strategies, voeg error boundaries toe, bouw loading states voor betere UX.
|
||||||
|
|
||||||
[→ Ga naar Les 7](Samenvattingen/Les07-Samenvatting.md)
|
[→ Ga naar Les 7](Samenvattingen/Les07-Samenvatting.md)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Les 8: Database Principles
|
### Les 8: Next.js 3: API Routes & Server Actions
|
||||||
|
|
||||||
**Tools:** Diagramming tool (draw.io/Excalidraw), Supabase (ter voorbereiding)
|
**Tools:** Next.js 14, Cursor, Supabase
|
||||||
|
|
||||||
**Docent vertelt:**
|
**Docent vertelt:**
|
||||||
- Wat is een relationele database?
|
- API Routes: Route Handlers in App Router
|
||||||
- Tabellen, rijen (records), kolommen (fields)
|
- HTTP methods: GET, POST, PUT, DELETE
|
||||||
- Primary Keys: unieke identificatie
|
- Server Actions: form actions en mutations
|
||||||
- Foreign Keys: relaties tussen tabellen
|
- Request/response handling
|
||||||
- Relatie types: one-to-one, one-to-many, many-to-many
|
- Error handling in API routes
|
||||||
- Normalisatie basics: waarom data niet dupliceren
|
- Middleware basics (authentication)
|
||||||
- Data types: text, integer, boolean, timestamp, uuid
|
|
||||||
- NULL values en defaults
|
|
||||||
- Indexen: waarom en wanneer
|
|
||||||
|
|
||||||
**Studenten doen:**
|
**Studenten doen:**
|
||||||
- Database schema tekenen voor simpel project
|
- API routes schrijven voor CRUD operaties
|
||||||
- Relaties identificeren en documenteren
|
- Server Actions implementeren voor forms
|
||||||
- Normalisatie oefening: slechte structuur verbeteren
|
- Request validation toevoegen
|
||||||
- Primary en Foreign Keys bepalen
|
- Error handling testen
|
||||||
|
- Authentication middleware bouwen
|
||||||
|
|
||||||
**Lesopdracht:**
|
**Lesopdracht:**
|
||||||
1. Teken database schema voor "Blog met Comments" (users, posts, comments)
|
1. Maak `/api/items` routes (GET, POST, PUT, DELETE)
|
||||||
2. Identificeer alle relaties en key types
|
2. Bouw Server Actions voor form submissions
|
||||||
3. Normaliseer een "slechte" database structuur (gegeven)
|
3. Voeg request validation toe met Zod
|
||||||
4. Schrijf data types en constraints op
|
4. Implementeer error handling
|
||||||
5. Bereid voor: welke tabellen heeft jouw eindproject nodig?
|
5. Test all CRUD operations
|
||||||
|
|
||||||
**Huiswerk:** Maak volledig database schema voor je eindproject, documenteer alle relaties, bereid Supabase account aan voor volgende les.
|
**Huiswerk:** Voeg authentication middleware toe, implementeer optimistic UI updates, schrijf API route tests.
|
||||||
|
|
||||||
[→ Ga naar Les 8](Samenvattingen/Les08-Samenvatting.md)
|
[→ Ga naar Les 8](Samenvattingen/Les08-Samenvatting.md)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Les 9: Supabase Basics
|
### Les 9: Database Principles & Supabase Setup
|
||||||
|
|
||||||
**Tools:** Supabase, Next.js, OpenCode
|
**Tools:** Diagramming tool (draw.io/Excalidraw), Supabase, Cursor
|
||||||
|
|
||||||
**Docent vertelt:**
|
**Docent vertelt:**
|
||||||
|
- Wat is een relationele database? Tabellen, rijen, kolommen
|
||||||
|
- Primary Keys, Foreign Keys en relaties
|
||||||
|
- Relatie types: one-to-one, one-to-many, many-to-many
|
||||||
|
- Normalisatie basics
|
||||||
- Wat is Supabase? (database + auth in één)
|
- Wat is Supabase? (database + auth in één)
|
||||||
- Supabase project aanmaken (live demo)
|
- Supabase project setup
|
||||||
- Table Editor: tabellen maken zonder SQL
|
- Table Editor: tabellen maken zonder SQL
|
||||||
- Je database schema van vorige les implementeren
|
- Environment variables configuratie
|
||||||
- Environment variables: wat, waarom, hoe
|
|
||||||
- Supabase client setup
|
|
||||||
- CRUD operaties uitgelegd
|
|
||||||
- Auth UI component (plug & play login)
|
|
||||||
|
|
||||||
**Studenten doen:**
|
**Studenten doen:**
|
||||||
- **Groepsdiscussie:** Bespreek database schemas - wie heeft welke structuur gekozen en waarom?
|
- Database schema tekenen voor eigen project
|
||||||
- Supabase account en project aanmaken
|
- Supabase account en project aanmaken
|
||||||
- Tabellen maken via UI (gebaseerd op Les 8 schema)
|
- Tabellen maken via UI (op basis van eigen schema)
|
||||||
- `.env.local` configureren
|
- `.env.local` configureren
|
||||||
- Supabase client maken
|
- Supabase client instellen
|
||||||
- Data ophalen en tonen
|
|
||||||
- Auth toevoegen
|
|
||||||
|
|
||||||
**Lesopdracht:**
|
**Lesopdracht:**
|
||||||
1. Maak Supabase project
|
1. Teken database schema voor jouw eindproject
|
||||||
2. Maak je tabellen via Table Editor (uit Les 8)
|
2. Maak Supabase project
|
||||||
3. Configureer `.env.local`
|
3. Implementeer je tabellen in Table Editor
|
||||||
4. Bouw Todo app: lijst tonen, toevoegen, afvinken, verwijderen
|
4. Configureer `.env.local`
|
||||||
5. Voeg login toe met Auth UI
|
5. Test connectie met Supabase client
|
||||||
|
|
||||||
**Huiswerk:** Extend Todo app (filtering, user-specifieke todos), deploy naar Vercel met env vars, test in productie.
|
**Huiswerk:** Refine je database schema, voeg meer relaties toe, dokumenteer decisions, bereid Les 10 vor.
|
||||||
|
|
||||||
[→ Ga naar Les 9](Samenvattingen/Les09-Samenvatting.md)
|
[→ Ga naar Les 9](Samenvattingen/Les09-Samenvatting.md)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
# Deel 3: Integration & AI Tooling
|
### Les 10: Supabase: Auth & CRUD
|
||||||
|
|
||||||
**3 lessen · 5 EC**
|
**Tools:** Supabase, Next.js, Cursor, React Query
|
||||||
|
|
||||||
Integratie van alle geleerde technieken en introductie van professionele AI tools.
|
**Docent vertelt:**
|
||||||
|
- Supabase Authentication: email/password, OAuth basics
|
||||||
|
- User sessions en JWT tokens
|
||||||
|
- Row Level Security (RLS) policies
|
||||||
|
- CRUD operaties in Supabase
|
||||||
|
- Realtime subscriptions introduceer
|
||||||
|
- Error handling en validation
|
||||||
|
- Best practices: secrets, security
|
||||||
|
|
||||||
|
**Studenten doen:**
|
||||||
|
- **Groepsdiscussie:** Database schemas van vorige les - aanpassingen nodig?
|
||||||
|
- Auth setup met email/password
|
||||||
|
- User sessions implementeren
|
||||||
|
- RLS policies schrijven
|
||||||
|
- CRUD app bouwen (Todo, Notes, Bookmarks)
|
||||||
|
- Realtime features testen
|
||||||
|
|
||||||
|
**Lesopdracht:**
|
||||||
|
1. Setup Supabase Auth (email/password)
|
||||||
|
2. Maak login/signup forms
|
||||||
|
3. Implementeer user sessions
|
||||||
|
4. Schrijf RLS policies voor je tabellen
|
||||||
|
5. Bouw complete CRUD app met auth
|
||||||
|
|
||||||
|
**Huiswerk:** Add OAuth provider (Google/GitHub), implementeer logout en password reset, deploy naar Vercel met env secrets.
|
||||||
|
|
||||||
|
[→ Ga naar Les 10](Samenvattingen/Les10-Samenvatting.md)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Les 10: Full-Stack Mini Project
|
# Deel 3: Full-Stack Development
|
||||||
|
|
||||||
**Tools:** VS Code, Supabase, Browser DevTools
|
**4 lessen · 7 EC**
|
||||||
|
|
||||||
|
Integratie van alle geleerde technieken, styling en voorbereiding op eindproject.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Les 11: Full-Stack Mini Project
|
||||||
|
|
||||||
|
**Tools:** Cursor, Supabase, Browser DevTools
|
||||||
|
|
||||||
**Docent vertelt:**
|
**Docent vertelt:**
|
||||||
- Je hebt nu alle bouwstenen: TypeScript, Next.js, Supabase
|
- Je hebt nu alle bouwstenen: TypeScript, Next.js, Supabase, Auth
|
||||||
- Vandaag combineren we alles in een werkende mini-app
|
- Vandaag combineren we alles in een werkende mini-app
|
||||||
- Geen nieuwe concepten - alleen integratie en toepassing
|
- Geen nieuwe concepten - alleen integratie en toepassing
|
||||||
|
- Probleemoplossing in real time
|
||||||
|
|
||||||
**Studenten doen:**
|
**Studenten doen:**
|
||||||
- **Groepsdiscussie:** Bespreek Supabase ervaringen uit Les 9 - welke uitdagingen bij auth en RLS?
|
- **Groepsdiscussie:** Bespreek auth & CRUD ervaringen uit Les 10
|
||||||
- Bookmark manager bouwen: login, bookmarks toevoegen/bekijken/verwijderen
|
- Mini-project kiezen: Bookmarks, Todo's, Notes, of Recipe Collection
|
||||||
- Alle geleerde technieken combineren
|
- Met Cursor alle onderdelen kombinieren: auth, database, API, UI
|
||||||
- Zelfstandig integratieproblemen oplossen
|
- Zelfstandig problemen oplossen
|
||||||
|
- Polish en afronden
|
||||||
|
|
||||||
**Lesopdracht:** Bouw een Personal Bookmarks app met login, CRUD operaties, en RLS. Checkpoints: 30 min setup, 60 min auth, 90 min CRUD, 120 min delete, 150 min polish.
|
**Lesopdracht:** Bouw een volledige mini-app met: login, CRUD operaties, RLS security. Checkpoints: 30 min setup, 60 min auth, 90 min CRUD, 120 min testing, 150 min polish.
|
||||||
|
|
||||||
**Huiswerk:** Reflectie schrijven (200 woorden): wat ging goed, waar liep je vast. Maak lijst van 3 verbeterpunten voor je code.
|
**Huiswerk:** Verbeterpunten toevoegen, reflectie schrijven (200 woorden), repo opruimen, voorbereiden op styling.
|
||||||
|
|
||||||
[→ Ga naar Les 10](Samenvattingen/Les10-Samenvatting.md)
|
[→ Ga naar Les 11](Samenvattingen/Les11-Samenvatting.md)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -428,235 +462,258 @@ Integratie van alle geleerde technieken en introductie van professionele AI tool
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Les 12: Introduction to Cursor
|
### Les 12: Styling: Tailwind CSS & shadcn/ui
|
||||||
|
|
||||||
**Tools:** Cursor
|
**Tools:** Tailwind CSS, shadcn/ui, Cursor
|
||||||
|
|
||||||
**Docent vertelt:**
|
**Docent vertelt:**
|
||||||
- Waarom Cursor? De professionele AI editor
|
- Waarom Tailwind? Utility-first CSS approach
|
||||||
- Free tier vs Pro: wat krijg je?
|
- Tailwind setup in Next.js (meestal al aanwezig)
|
||||||
- Core features: Tab completion, CMD+K, Chat, Composer
|
- Basis utilities: flexbox, grid, spacing, colors
|
||||||
- Cursor vs OpenCode: wanneer welke?
|
- Tailwind components: buttons, cards, forms
|
||||||
- Live demo van Cursor workflow
|
- Wat is shadcn/ui? High-quality component library
|
||||||
|
- shadcn/ui installatie en configuratie
|
||||||
|
- Theme customization
|
||||||
|
- Dark mode setup
|
||||||
|
|
||||||
**Studenten doen:**
|
**Studenten doen:**
|
||||||
- Cursor installeren
|
- Tailwind basix oefenen op bestaande components
|
||||||
- Bestaand project openen in Cursor
|
- shadcn/ui components installeren en gebruiken
|
||||||
- Tab completion ervaren
|
- Custom Tailwind themes making
|
||||||
- CMD+K voor inline edits
|
- Bestaande mini-project restylen met Tailwind + shadcn
|
||||||
- Chat voor vragen over code
|
- Dark mode implementeren
|
||||||
- Composer voor multi-file changes
|
|
||||||
|
|
||||||
**Lesopdracht:**
|
**Lesopdracht:**
|
||||||
1. Installeer Cursor (free tier)
|
1. Refactor je mini-project UI met Tailwind classes
|
||||||
2. Open je Todo app in Cursor
|
2. Installeer 5 shadcn/ui components (Button, Card, Input, etc.)
|
||||||
3. Voeg nieuwe feature toe met alleen Cursor (bijv. due dates)
|
3. Cre je eigen color theme in Tailwind
|
||||||
4. Gebruik elke feature minstens 3x: Tab, CMD+K, Chat, Composer
|
4. Implementeer dark mode toggle
|
||||||
5. Noteer: wat werkt goed, wat is wennen?
|
5. Polish: zorg dat het er professioneel uitziet
|
||||||
|
|
||||||
**Huiswerk:** Bouw complete mini-feature met Cursor, vergelijk ervaring met OpenCode, schrijf reflectie (400 woorden).
|
**Huiswerk:** Refactor alle components, add animations met Tailwind, explore shadcn variations, dokumenteer styling decisions.
|
||||||
|
|
||||||
[→ Ga naar Les 12](Samenvattingen/Les12-Samenvatting.md)
|
[→ Ga naar Les 12](Samenvattingen/Les12-Samenvatting.md)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Les 13: Prompt Engineering & Custom GPTs
|
### Les 13: Hands-on: Van Idee naar Prototype
|
||||||
|
|
||||||
**Tools:** ChatGPT (Custom GPTs), Claude (Projects)
|
**Tools:** Cursor, ChatGPT (voor planning)
|
||||||
|
|
||||||
**Docent vertelt:**
|
**Docent vertelt:**
|
||||||
- Advanced prompt engineering: structured output, constraints, iterative refinement
|
- Hoe ga je van vaag idee naar concrete features?
|
||||||
- Custom GPTs: hoe maak je ze, wanneer gebruiken
|
- Feature breakdown methode
|
||||||
- Claude Projects: custom instructions + project knowledge
|
- Component thinking: UI opdelen in herbruikbare stukken
|
||||||
- Vergelijking: Custom GPT vs Claude Project
|
- MVP (Minimum Viable Product) denken
|
||||||
- Prompt template library opbouwen
|
- User stories schrijven
|
||||||
|
- Efficiënt met Cursor samenwerken voor iteratie
|
||||||
|
|
||||||
**Studenten doen:**
|
**Studenten doen:**
|
||||||
- **Groepsdiscussie:** Bespreek Cursor reflecties - hoe verschilt het van OpenCode?
|
- **Groepsdiscussie:** Reflectie op styling - waar ben je tevreden mee?
|
||||||
- Custom GPT maken voor code review
|
- Kiezen van eindproject idee (of voorgestelde opties)
|
||||||
- Claude Project opzetten voor eigen project
|
- Met AI feature breakdown maken
|
||||||
- Beide testen en vergelijken
|
- Component structuur ontwerpen
|
||||||
- Persoonlijke prompt library starten
|
- Start codebase met folder structure
|
||||||
|
- Eerste components bouwen
|
||||||
|
|
||||||
**Lesopdracht:**
|
**Voorbeeld projecten:**
|
||||||
1. Maak Custom GPT "Code Reviewer" met specifieke checklist
|
- E-commerce product filter & search
|
||||||
2. Maak Claude Project voor je project met context
|
- Recipe planner met shoppinglist
|
||||||
3. Test beide met dezelfde code
|
- Expense tracker met analytics
|
||||||
4. Documenteer: welke is beter waarvoor?
|
- Blog platform met comments
|
||||||
|
|
||||||
**Huiswerk:** Optimaliseer je AI assistants, maak persoonlijke prompt library, schrijf reflectie over Custom GPTs vs Claude Projects.
|
**Lesopdracht:** Kies eindproject idee, maak feature breakdown met AI, ontwerp component tree, zet up codebase, bouw eerste 2-3 components.
|
||||||
|
|
||||||
|
**Huiswerk:** Bouw meer components, integreer eerste data, documenteer architecture decisions, voorbereiding Les 14.
|
||||||
|
|
||||||
[→ Ga naar Les 13](Samenvattingen/Les13-Samenvatting.md)
|
[→ Ga naar Les 13](Samenvattingen/Les13-Samenvatting.md)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
# Deel 4: Advanced AI Features
|
# Deel 4: Advanced AI & Deployment
|
||||||
|
|
||||||
**6 lessen · 10 EC**
|
**4 lessen · 6 EC**
|
||||||
|
|
||||||
Professionele workflows, advanced Cursor, AI features bouwen en deployment.
|
AI-powered features, streaming, finale afronding en deployment.
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Les 14: Project Setup & Repository Structure
|
### Les 14: Project Setup & AI Config (.cursorrules, claude.md)
|
||||||
|
|
||||||
**Tools:** Cursor, Git, GitHub
|
**Tools:** Cursor, Git, GitHub
|
||||||
|
|
||||||
**Docent vertelt:**
|
**Docent vertelt:**
|
||||||
- Waarom goede project structuur cruciaal is voor AI
|
- Waarom goede project structuur cruciaal is voor AI samenwerking
|
||||||
- De ideale folder structuur voor Next.js + Cursor
|
- De ideale folder structuur voor Next.js + AI tools
|
||||||
- .cursorrules files: wat zijn ze, hoe schrijf je ze
|
- `.cursorrules` files: syntax, best practices, examples
|
||||||
- docs/ folder: PROMPT-LOG, AI-DECISIONS, PROJECT-BRIEF
|
- `claude.md`: project documentation voor Claude
|
||||||
- Environment variables: lokaal vs productie
|
- `docs/` folder: AI-DECISIONS.md, ARCHITECTURE.md
|
||||||
- README best practices
|
- Environment variables: lokaal vs productie setup
|
||||||
|
- `.gitignore` en `.cursorignore` voor AI tools
|
||||||
|
- README en documentatie best practices
|
||||||
|
|
||||||
**Studenten doen:**
|
**Studenten doen:**
|
||||||
- Eindproject repository aanmaken
|
- Eindproject repository aanmaken/opschonen
|
||||||
- Folder structuur opzetten
|
- Folder structuur optimaliseren
|
||||||
- .cursorrules files schrijven
|
- Uitgebreide `.cursorrules` schrijven
|
||||||
- docs/ templates invullen
|
- Project documentatie in claude.md
|
||||||
- Eerste commit en push
|
- docs/ folder vullen
|
||||||
|
- Eerste commits pushen
|
||||||
|
|
||||||
**Lesopdracht:**
|
**Lesopdracht:**
|
||||||
1. `npx create-next-app` voor je eindproject
|
1. Review folder structuur van je huidige project
|
||||||
2. Maak folder structuur aan (zie template)
|
2. Schrijf comprehensive `.cursorrules` (50+ lines)
|
||||||
3. Schrijf `general.mdc` met jouw project regels
|
3. Maak `claude.md` met project overview
|
||||||
4. Vul PROJECT-BRIEF.md volledig in
|
4. Vul `docs/AI-DECISIONS.md` in
|
||||||
5. Push naar GitHub
|
5. Push naar GitHub met cleane git history
|
||||||
|
|
||||||
**Huiswerk:** Voeg extra .cursorrules files toe, start PROMPT-LOG.md, maak eerste components met Cursor.
|
**Huiswerk:** Polish documentatie, add architecture diagrams, test .cursorrules in Cursor, prepare voor Deel 4.
|
||||||
|
|
||||||
> 💡 **Eindopdracht:** Dit is een goed moment om te starten met deelopdracht 1. Je kunt de setup die je vandaag maakt direct gebruiken voor je eindproject.
|
|
||||||
|
|
||||||
[→ Ga naar Les 14](Samenvattingen/Les14-Samenvatting.md)
|
[→ Ga naar Les 14](Samenvattingen/Les14-Samenvatting.md)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Les 15: MCP & Context Management
|
### Les 15: Vercel AI SDK, Tool Calling & Agents
|
||||||
|
|
||||||
**Tools:** Cursor, Claude Desktop, MCP servers
|
**Tools:** Vercel AI SDK, Zod, Externe APIs, Cursor
|
||||||
|
|
||||||
**Docent vertelt:**
|
**Docent vertelt:**
|
||||||
- Wat is MCP (Model Context Protocol)?
|
- Vercel AI SDK basics: useChat, streaming
|
||||||
- MCP servers: filesystem, GitHub, databases
|
- Tool Calling: AI laat externe APIs aanroepen
|
||||||
- Claude Desktop + MCP configureren
|
- Agents: AI voert autonome multi-step taken uit
|
||||||
- Context windows: wat zijn tokens, waarom limiet?
|
- Zod voor schema validation
|
||||||
- Context strategieën: relevante files, pruning
|
- System prompts schrijven
|
||||||
- .cursorignore voor grote projecten
|
- Error handling en best practices
|
||||||
|
- Gratis APIs voor projecten
|
||||||
|
|
||||||
**Studenten doen:**
|
**Studenten doen:**
|
||||||
- MCP servers configureren in Claude Desktop
|
- AI SDK + Zod installeren
|
||||||
- Filesystem MCP testen
|
- Chat interface bouwen met streaming
|
||||||
- GitHub MCP verkennen
|
- Tools definiëren voor externe API
|
||||||
- Context optimalisatie oefenen
|
- Tool calling implementeren
|
||||||
- .cursorignore opzetten
|
- Simple agent bouwen
|
||||||
|
|
||||||
**Lesopdracht:**
|
**Lesopdracht:**
|
||||||
1. Configureer Claude Desktop met filesystem MCP
|
1. Installeer Vercel AI SDK en Zod
|
||||||
2. Test: laat Claude je project analyseren
|
2. Bouw chat interface met streaming
|
||||||
3. Configureer GitHub MCP
|
3. Definieer minimaal 2 tools
|
||||||
4. Maak .cursorignore voor je project
|
4. Implementeer tool calling
|
||||||
5. Experimenteer: wat gebeurt er met grote vs kleine context?
|
5. Test met externe API
|
||||||
|
|
||||||
**Huiswerk:** Voeg extra MCP server toe (naar keuze), optimaliseer je project voor AI context, documenteer in AI-DECISIONS.md.
|
**Huiswerk:** Add more tools, implementeer agents met `maxSteps`, documenteer in AI-DECISIONS.md, integreer in eindproject.
|
||||||
|
|
||||||
[→ Ga naar Les 15](Samenvattingen/Les15-Samenvatting.md)
|
[→ Ga naar Les 15](Samenvattingen/Les15-Samenvatting.md)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Les 16: Mastering Cursor
|
### Les 16: AI Chat Interface & Streaming
|
||||||
|
|
||||||
**Tools:** Cursor, Claude models
|
**Tools:** Vercel AI SDK, Cursor, Browser APIs
|
||||||
|
|
||||||
**Docent vertelt:**
|
**Docent vertelt:**
|
||||||
- Model keuze: wanneer Haiku vs Sonnet vs Opus?
|
- Streaming responses: hoe werkt het?
|
||||||
- Composer Mode diepgaand: multi-file generatie
|
- useChat hook: state management
|
||||||
- @ mentions: @Files, @Folders, @Code, @Docs, @Web
|
- Chat UI patterns: message history, loading states
|
||||||
- Codebase indexing optimaliseren
|
- Markdown rendering in chat
|
||||||
- .cursorrules advanced: meerdere files, condities
|
- Error states en edge cases
|
||||||
- Cost management: tokens monitoren
|
- User input handling en sanitization
|
||||||
|
- Performance optimalisatie
|
||||||
|
|
||||||
**Studenten doen:**
|
**Studenten doen:**
|
||||||
- Verschillende models testen op zelfde taak
|
- Chat UI bouwen met useChat
|
||||||
- Complexe feature bouwen met Composer
|
- Streaming responses implementeren
|
||||||
- @ mentions effectief gebruiken
|
- Message history managen
|
||||||
- .cursorrules uitbreiden en testen
|
- Error handling toevoegen
|
||||||
|
- Styling met Tailwind
|
||||||
|
- In eindproject integreren
|
||||||
|
|
||||||
**Lesopdracht:** Bouw complexe Multi-Step Form Wizard met Cursor Composer (4 stappen, progress indicator, validation, localStorage persistence).
|
**Lesopdracht:**
|
||||||
|
1. Bouw chat interface met Vercel AI SDK
|
||||||
|
2. Implementeer streaming responses
|
||||||
|
3. Maak message history persistent (localStorage of DB)
|
||||||
|
4. Voeg error handling toe
|
||||||
|
5. Style met Tailwind + shadcn/ui
|
||||||
|
|
||||||
**Huiswerk:** Research .cursorrules voorbeelden online, schrijf uitgebreide .cursorrules voor jouw eindproject, test en itereer.
|
**Huiswerk:** Add chat features (clear history, export, favorites), deploy naar Vercel, gather user feedback.
|
||||||
|
|
||||||
> 💡 **Eindopdracht check-in:** Hoe gaat je eindproject? Loop je ergens tegenaan? Dit is een goed moment om vragen te stellen en feedback te krijgen.
|
|
||||||
|
|
||||||
[→ Ga naar Les 16](Samenvattingen/Les16-Samenvatting.md)
|
[→ Ga naar Les 16](Samenvattingen/Les16-Samenvatting.md)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Les 17: Vercel AI SDK, Tool Calling & Agents
|
### Les 17: Eindproject Werkdag
|
||||||
|
|
||||||
**Tools:** Vercel AI SDK, Zod, Externe APIs (TheCocktailDB, TheMealDB, etc.)
|
**Tools:** Cursor, Vercel, Supabase, alle vorige tools
|
||||||
|
|
||||||
**Docent vertelt:**
|
**Docent vertelt:**
|
||||||
- Vercel AI SDK basics: useChat, streaming
|
- Q&A session: wat loop je tegen aan?
|
||||||
- **Tool Calling:** AI laat externe APIs aanroepen
|
- Cursor tips & tricks review
|
||||||
- **Agents:** AI voert autonome multi-step taken uit met `maxSteps`
|
- Debugging strategies
|
||||||
- Gratis APIs voor projecten (TheCocktailDB, TheMealDB, Open Trivia DB)
|
- Performance optimization basics
|
||||||
- Best practices voor tool design en system prompts
|
- Deployment troubleshooting
|
||||||
|
- Final checklist review
|
||||||
|
|
||||||
**Studenten doen:**
|
**Studenten doen:**
|
||||||
- AI SDK + Zod installeren
|
- **Volle dag werken aan eindproject**
|
||||||
- Tools definiëren voor externe API
|
- Docent beschikbaar voor individuele hulp
|
||||||
- Tool calling implementeren
|
- Features afmaken
|
||||||
- Agent bouwen met `maxSteps`
|
- Testing en bug fixes
|
||||||
- Error handling toevoegen
|
- Voorbereiding voor presentatie
|
||||||
|
- Code review voorbereiden
|
||||||
|
|
||||||
**Lesopdracht:**
|
**Lesopdracht:**
|
||||||
1. Kies een gratis API (cocktails, recepten, of quiz)
|
1. Alle features afmaken van je eindproject
|
||||||
2. Implementeer minimaal 3 tools
|
2. Testing: user flows doorlopen
|
||||||
3. Bouw een agent met `maxSteps: 5`
|
3. Bug fixes en edge cases
|
||||||
4. Test: "Plan een menu voor..." of vergelijkbare complexe taak
|
4. Code cleanup en refactoring
|
||||||
|
5. Deploy naar Vercel
|
||||||
|
|
||||||
**Huiswerk:** Bouw agent voor eindproject met externe API, minimaal 3 tools, documenteer design in AI-DECISIONS.md.
|
**Huiswerk:** Laatste fixes, presentatie voorbereiden, documentatie finaliseren, demo video opnemen (optioneel).
|
||||||
|
|
||||||
> 💡 **Eindopdracht:** Heb je al nagedacht over je AI feature? Bespreek je idee met de docent en klasgenoten.
|
|
||||||
|
|
||||||
[→ Ga naar Les 17](Samenvattingen/Les17-Samenvatting.md)
|
[→ Ga naar Les 17](Samenvattingen/Les17-Samenvatting.md)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### Les 18: Deployment & Production
|
### Les 18: Deployment, Presentaties & Evaluatie
|
||||||
|
|
||||||
**Tools:** Vercel, GitHub, Supabase
|
**Tools:** Vercel, GitHub, Supabase
|
||||||
|
|
||||||
**Eindopdracht kickoff (15 min):**
|
**Deployment Setup (30 min):**
|
||||||
- Eindopdracht requirements doornemen
|
- Vercel deployment flow
|
||||||
- Beoordelingscriteria uitleggen
|
- Environment variables setup
|
||||||
- Timeline en deadlines
|
- Supabase productie configuration
|
||||||
- Vragen beantwoorden
|
- Custom domains (optioneel)
|
||||||
|
- Performance optimization (Lighthouse)
|
||||||
|
- Security checklist
|
||||||
|
|
||||||
|
**Presentaties & Evaluatie (90 min):**
|
||||||
|
- Iedereen presenteert eindproject (5 min per student)
|
||||||
|
- Live demo
|
||||||
|
- Vragen van docent en klasgenoten
|
||||||
|
- Feedback ontvangen
|
||||||
|
- Course evaluatie
|
||||||
|
|
||||||
**Docent vertelt:**
|
**Docent vertelt:**
|
||||||
- Vercel deployment flow
|
- Best practices deployment
|
||||||
- Environment variables in Vercel
|
- Performance monitoring
|
||||||
- Supabase productie setup
|
- Error tracking en logging
|
||||||
- Custom domains
|
- Continuous deployment setup
|
||||||
- Performance basics (Lighthouse)
|
- Next steps: career paths, advanced topics
|
||||||
- Security checklist voor productie
|
|
||||||
|
|
||||||
**Studenten doen:**
|
**Studenten doen:**
|
||||||
- Eindproject deployen naar Vercel
|
- Final deployment naar Vercel
|
||||||
- Env vars configureren
|
- Performance audit (Lighthouse)
|
||||||
- Supabase redirect URLs instellen
|
|
||||||
- Lighthouse audit runnen
|
|
||||||
- Security checklist doorlopen
|
- Security checklist doorlopen
|
||||||
|
- Presentatie geven (5 min)
|
||||||
|
- Course feedback geven
|
||||||
|
|
||||||
**Lesopdracht:**
|
**Lesopdracht:**
|
||||||
1. Deploy eindproject naar Vercel
|
1. Deploy eindproject productie
|
||||||
2. Configureer alle env vars
|
2. Configure environment variables
|
||||||
3. Test volledige app in productie
|
3. Run Lighthouse audit (score >80)
|
||||||
4. Run Lighthouse, fix issues tot score >80
|
4. Complete security checklist
|
||||||
5. Doorloop security checklist
|
5. Present your project
|
||||||
|
|
||||||
**Huiswerk:** Custom domain toevoegen (optioneel), performance optimaliseren, documentatie updaten met productie URL, werk aan eindopdracht.
|
**Huiswerk:** N.A. - Course afgerond!
|
||||||
|
|
||||||
[→ Ga naar Les 18](Samenvattingen/Les18-Samenvatting.md)
|
[→ Ga naar Les 18](Samenvattingen/Les18-Samenvatting.md)
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user