fix: lesson 4
This commit is contained in:
Tim Rijkse
@@ -1,125 +1,114 @@
|
||||
# Les 3: AI Ethics, Privacy & Security + WebStorm Integration
|
||||
# Les 3: Cursor Setup & Basics
|
||||
|
||||
> 📋 **Lesmateriaal nog niet uitgewerkt**
|
||||
> ✅ **Les gegeven op woensdag 26 februari 2026**
|
||||
>
|
||||
> De volgende bestanden worden gegenereerd wanneer deze les wordt uitgewerkt:
|
||||
> - Les03-Slide-Overzicht.md
|
||||
> - Les03-Lesplan.md
|
||||
> - Les03-Bijlage-A-Lesopdracht.md
|
||||
> - Les03-Bijlage-B-Huiswerkopdracht.md
|
||||
> Lesmateriaal volledig uitgewerkt:
|
||||
> - [Slide-Overzicht](../Les03-Cursor-Basics/Les03-Slide-Overzicht.md)
|
||||
> - [Lesplan](../Les03-Cursor-Basics/Les03-Lesplan.md)
|
||||
> - [Docenttekst](../Les03-Cursor-Basics/Les03-Docenttekst.md)
|
||||
> - [Keynote Notes](../Les03-Cursor-Basics/Les03-Docenttekst-Notes.md)
|
||||
> - [Lesopdracht](../Les03-Cursor-Basics/Les03-Bijlage-A-Lesopdracht.md)
|
||||
> - [Huiswerkopdracht](../Les03-Cursor-Basics/Les03-Bijlage-B-Huiswerkopdracht.md)
|
||||
> - [Hands-On Opdracht (PDF)](../Les03-Cursor-Basics/Les03-Hands-On-Opdracht.pdf)
|
||||
> - [Huiswerkopdracht (PDF)](../Les03-Cursor-Basics/Les03-Huiswerkopdracht.pdf)
|
||||
> - Debug Challenge zips: standaard (5 fouten), hard (12 fouten), super hard (18 fouten)
|
||||
|
||||
---
|
||||
|
||||
## Hoofdstuk
|
||||
**Deel 1: AI Foundations** (Les 1-4)
|
||||
|
||||
## Context
|
||||
Oorspronkelijk zou les 3 gaan over AI Ethics, Privacy & Security. Tim heeft besloten om in plaats daarvan een praktische les over Cursor te geven. Dit sluit beter aan bij wat studenten nodig hebben en was een goede keuze — studenten waren enthousiast.
|
||||
|
||||
## Beschrijving
|
||||
Cruciale kennis over veilig en ethisch werken met AI, gecombineerd met professionele IDE workflow.
|
||||
Praktische les over Cursor als primaire AI-powered editor. Studenten leren Cursor installeren, configureren en gebruiken om een compleet Next.js project op te zetten.
|
||||
|
||||
---
|
||||
|
||||
## Te Behandelen
|
||||
|
||||
### Groepsdiscussie (15 min)
|
||||
Bespreek klassikaal de blog posts uit Les 2 - wat waren de ervaringen met AI-assisted coding? Welke limitations ontdekte je?
|
||||
### Blok 1: Cursor Overzicht (15 min)
|
||||
- Wat is Cursor? VS Code fork met AI
|
||||
- Free vs Pro vs Student Plan (500 fast requests/maand)
|
||||
- Request types: Tab Completion (gratis), Chat, Composer, Inline Edit (elk 1 request)
|
||||
|
||||
### Deel 1: Ethics, Privacy & Security (1 uur)
|
||||
### Blok 2: Samen Doen — Setup Check (10 min)
|
||||
- Terminal check: node -v, git --version, npm -v, npx -v
|
||||
- Cursor Student Plan activeren via cursor.com/students
|
||||
|
||||
**Privacy Risico's - Wat NOOIT te delen:**
|
||||
- API keys
|
||||
- Client data
|
||||
- Credentials
|
||||
- Persoonlijke informatie
|
||||
### Blok 3: Cursor Skills & Docs (10 min)
|
||||
- Settings → Features → Docs: Next.js, React, Tailwind toevoegen
|
||||
- @docs mentions in Chat voor framework-specifieke hulp
|
||||
|
||||
**Overige Onderwerpen:**
|
||||
- Data ownership bij AI services
|
||||
- Bias in AI models
|
||||
- Security vulnerabilities (SQL injection, XSS, prompt injection)
|
||||
- GDPR/AVG compliance basics
|
||||
- Professional responsibility als developer
|
||||
- Wanneer gebruik je AI wel/niet?
|
||||
### Blok 4: Nieuw Project Aanmaken (15 min)
|
||||
- git init → npx create-next-app@latest
|
||||
- TypeScript, Tailwind, App Router, src/ directory
|
||||
|
||||
### Deel 2: WebStorm Integration (1 uur)
|
||||
### Blok 5: .cursorrules Genereren (10 min)
|
||||
- Via Cursor Chat (Ctrl+L / Cmd+L) — kost 1 request
|
||||
- Project-specifieke regels voor Next.js, Tailwind, TypeScript
|
||||
|
||||
**WebStorm Setup:**
|
||||
- WebStorm installatie (gratis via school licentie)
|
||||
- OpenCode plugin voor WebStorm installeren en configureren
|
||||
### Blok 6: Keyboard Shortcuts & Request Management (15 min)
|
||||
- Tab = gratis autocomplete
|
||||
- Ctrl+K / Cmd+K = Inline Edit (1 request)
|
||||
- Ctrl+L / Cmd+L = Chat (1 request)
|
||||
- Ctrl+I / Cmd+I = Composer (1 request)
|
||||
- Slim combineren van taken in 1 prompt
|
||||
|
||||
**Voordelen IDE vs Standalone:**
|
||||
- Project context
|
||||
- Git integration
|
||||
- Debugging
|
||||
- Refactoring tools
|
||||
### Pauze (15 min)
|
||||
|
||||
**Live Demo:**
|
||||
- Zelfde taak in OpenCode standalone vs WebStorm
|
||||
### Blok 7: Hands-On — Bouw Componenten (75 min)
|
||||
- Taak 1: Hero Component via Composer
|
||||
- Taak 2: Styling tweaken via Inline Edit
|
||||
- Taak 3: Extra feature naar keuze (FeatureCards, ContactForm, of Footer)
|
||||
- Git commit
|
||||
- Verder bouwen voor wie klaar is
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
- WebStorm (school licentie)
|
||||
- OpenCode plugin
|
||||
- Git
|
||||
- Cursor (Student Plan — gratis Pro voor studenten)
|
||||
- Git & GitHub
|
||||
- Node.js + npx
|
||||
- Next.js, TypeScript, Tailwind CSS
|
||||
|
||||
---
|
||||
|
||||
## Lesopdracht (2 uur)
|
||||
## Lesopdracht (75 min — hands-on na pauze)
|
||||
Beschikbaar als losse PDF: [Les03-Hands-On-Opdracht.pdf](../Les03-Cursor-Basics/Les03-Hands-On-Opdracht.pdf)
|
||||
|
||||
### Deel 1: Security Workshop (1 uur)
|
||||
|
||||
**Groepswerk (30 min):**
|
||||
- Docent toont 3 AI-generated code snippets met security/privacy issues
|
||||
- Studenten identificeren problemen in groepjes
|
||||
|
||||
**Individueel (30 min):**
|
||||
- Laat AI code genereren voor een login form
|
||||
- Review op security
|
||||
- Fix problemen
|
||||
- Maak persoonlijke "AI Safety Checklist" voor toekomstig gebruik
|
||||
|
||||
### Deel 2: WebStorm Setup (1 uur)
|
||||
|
||||
**Setup:**
|
||||
- Installeer WebStorm met school licentie
|
||||
- Installeer OpenCode plugin
|
||||
- Configureer met je model
|
||||
|
||||
**Vergelijking:**
|
||||
- Rebuild een component uit Les 2 in WebStorm
|
||||
- Ervaar het verschil
|
||||
|
||||
**Documentatie:**
|
||||
- Voordelen van IDE vs standalone
|
||||
- Welke workflow prefereer je?
|
||||
Stappen:
|
||||
1. Nieuw project aanmaken (git init, npx create-next-app, npm run dev)
|
||||
2. Cursor configureren (Skills/Docs, .cursorrules genereren)
|
||||
3. Componenten bouwen (Hero via Composer, styling via Inline Edit, extra feature)
|
||||
4. Git commit
|
||||
|
||||
---
|
||||
|
||||
## Huiswerk (2 uur)
|
||||
## Huiswerk: Debug Challenge
|
||||
|
||||
**Bouw Secure Feature:**
|
||||
Kies één van:
|
||||
- Contact form met server-side validatie
|
||||
- User authentication flow met JWT
|
||||
Studenten krijgen een intentioneel kapot Next.js project en moeten het repareren met Cursor. Drie moeilijkheidsniveaus:
|
||||
|
||||
**Process:**
|
||||
1. Laat AI initial code genereren
|
||||
2. Review met je Safety Checklist
|
||||
3. Identificeer en fix alle security/privacy issues
|
||||
| Niveau | Fouten | Categorieën | Geschatte tijd |
|
||||
|--------|--------|-------------|----------------|
|
||||
| **Standaard** | 5 | Missing deps, typos, missing imports, inline styles → Tailwind | 1.5-2 uur |
|
||||
| **Hard** | 12 | + logische fouten, React anti-patterns, useEffect bugs | 2-3 uur |
|
||||
| **Super Hard** | 18 | + Next.js Server/Client, circular deps, TypeScript, Context | 3-4 uur |
|
||||
|
||||
**Uitgebreide README:**
|
||||
- Wat AI genereerde
|
||||
- Welke issues je vond (security, privacy, GDPR)
|
||||
- Hoe je ze fixt
|
||||
- Lessons learned
|
||||
- Waarom WebStorm workflow beter/slechter is dan standalone OpenCode
|
||||
Inleveren via Teams: GitHub link + screenshot + beschrijving van gefixt fouten.
|
||||
|
||||
Deadline: Vóór Les 4.
|
||||
|
||||
---
|
||||
|
||||
## Leerdoelen
|
||||
Na deze les kan de student:
|
||||
- Privacy risico's bij AI-gebruik identificeren
|
||||
- Security vulnerabilities in AI-gegenereerde code herkennen
|
||||
- GDPR/AVG compliance basics begrijpen
|
||||
- WebStorm met OpenCode plugin configureren
|
||||
- Het verschil tussen standalone en IDE-geïntegreerde workflow beoordelen
|
||||
- Een persoonlijke AI Safety Checklist toepassen
|
||||
- Cursor installeren en het Student Plan activeren
|
||||
- Skills/Docs configureren voor Next.js, React en Tailwind
|
||||
- Een .cursorrules bestand genereren via Cursor Chat
|
||||
- Een nieuw Next.js project opzetten met npx create-next-app
|
||||
- De keyboard shortcuts (Tab, Ctrl+K, Ctrl+L, Ctrl+I) toepassen
|
||||
- Requests efficiënt beheren door taken te combineren
|
||||
- Componenten bouwen met Composer en Inline Edit
|
||||
- Fouten debuggen met behulp van Cursor
|
||||
|
||||
Reference in New Issue
Block a user