414 lines
16 KiB
Markdown
414 lines
16 KiB
Markdown
# Eindopdracht
|
|
|
|
## Leerlijn AI-Driven Development (30 EC)
|
|
|
|
**Versie 1.0**
|
|
|
|
---
|
|
|
|
## Inhoudsopgave
|
|
|
|
1. [Eindopdracht AI-Driven Development](#eindopdracht-ai-driven-development)
|
|
2. [Deelopdrachten](#deelopdrachten)
|
|
3. [Quickscan](#quickscan)
|
|
4. [Structuur](#structuur)
|
|
5. [Beoordelingscriteria](#beoordelingscriteria)
|
|
|
|
---
|
|
|
|
# Eindopdracht AI-Driven Development
|
|
|
|
## Integrale eindopdracht
|
|
|
|
De leerlijn AI-Driven Development leert je om als developer effectief samen te werken met AI tools. Je leert niet alleen apps bouwen MET AI, maar ook AI features bouwen IN je apps.
|
|
|
|
Om deze leerlijn af te ronden dien je de volgende leeruitkomsten aan te tonen:
|
|
|
|
1. **Fundamentals of AI-Driven Development**
|
|
Je kunt AI tools (ChatGPT, Claude, OpenCode) effectief inzetten voor code generatie en begrijpt de basisprincipes van Large Language Models.
|
|
|
|
2. **Prompt Engineering & Iteratief Werken**
|
|
Je kunt effectieve prompts schrijven, iteratief werken met AI, en Skills gebruiken voor consistente output.
|
|
|
|
3. **Backend Development met Supabase**
|
|
Je kunt een database opzetten, CRUD operaties uitvoeren, en authenticatie implementeren met Supabase.
|
|
|
|
4. **AI-Assisted Development met Cursor**
|
|
Je kunt Cursor effectief gebruiken voor code generatie, inclusief .cursorrules, context management, en Composer mode.
|
|
|
|
5. **AI Features Bouwen met Vercel AI SDK**
|
|
Je kunt AI-powered features implementeren in je applicatie met de Vercel AI SDK (chat interfaces, streaming responses).
|
|
|
|
6. **Testing, Debugging & Deployment**
|
|
Je kunt code debuggen met AI hulp, tests schrijven, en een applicatie deployen naar productie.
|
|
|
|
---
|
|
|
|
## Algemene opdrachtbeschrijving
|
|
|
|
In het bedrijfsleven worden steeds vaker AI-tools ingezet om sneller en efficiënter software te ontwikkelen. Als moderne developer wordt van je verwacht dat je deze tools beheerst en weet hoe je AI-features integreert in applicaties.
|
|
|
|
Voor deze eindopdracht bouw je een **volledige webapplicatie met AI-integratie**. Je bent vrij in de keuze van het type applicatie, zolang je maar aantoont dat je de geleerde tools en technieken beheerst.
|
|
|
|
**Wat je gaat doen:**
|
|
|
|
- Een professionele repository opzetten met juiste structuur en documentatie
|
|
- .cursorrules files schrijven die Cursor instrueren voor jouw project
|
|
- Een Next.js applicatie bouwen met Tailwind CSS
|
|
- Data opslaan en ophalen via Supabase (database + authenticatie)
|
|
- Een AI-powered feature implementeren met de Vercel AI SDK
|
|
- Je applicatie deployen naar Vercel
|
|
- Je proces documenteren in PROMPT-LOG.md en AI-DECISIONS.md
|
|
|
|
**Voorbeeldprojecten:**
|
|
|
|
| Project | Beschrijving | AI Feature |
|
|
|---------|--------------|------------|
|
|
| **AI Recipe Generator** | App waar je ingrediënten invoert en recepten krijgt | Chat: "Wat kan ik maken met kip, rijst en paprika?" |
|
|
| **Smart Budget Buddy** | Persoonlijke finance tracker met inzichten | Chat: "Analyseer mijn uitgaven en geef tips" |
|
|
| **Travel Planner AI** | Reis planning app met AI assistent | Chat: "Plan een weekend Barcelona voor 2 personen" |
|
|
|
|
Je mag ook een eigen projectidee bedenken, mits het voldoet aan alle technische eisen.
|
|
|
|
Door deze opdracht uit te voeren toon je aan dat je zelfstandig een moderne webapplicatie kunt bouwen met AI-assisted development, en dat je AI-features kunt integreren die echte waarde toevoegen voor gebruikers.
|
|
|
|
Om de leerlijn AI-Driven Development met succes af te ronden is een voldoende nodig voor de integrale eindopdracht; met de deelopdrachten kunnen geen losse cursussen worden afgerond.
|
|
|
|
---
|
|
|
|
## Op te leveren producten
|
|
|
|
- **GitHub Repository** met volledige broncode en documentatie
|
|
- **Deployed applicatie** op Vercel (werkende URL)
|
|
- **Technisch verantwoordingsdocument** (PDF, 1500-2000 woorden)
|
|
- **Slide deck** voor presentatie (10-15 slides)
|
|
- **Demo** van de werkende applicatie (live of video, max 5 minuten)
|
|
|
|
---
|
|
|
|
# Deelopdrachten
|
|
|
|
## Deelopdracht 1: Project Setup & Repository Inrichting
|
|
|
|
Een goed gestructureerd project is essentieel voor effectief werken met AI tools. In deze deelopdracht richt je je repository professioneel in, zodat Cursor en andere AI tools optimaal kunnen functioneren.
|
|
|
|
**Wat je doet:**
|
|
|
|
Je maakt een nieuwe GitHub repository aan en zet een Next.js project op met de juiste folder structuur. Je schrijft .cursorrules files die Cursor instrueren over jouw tech stack en conventies. Je maakt documentatie files aan die je gedurende het project gaat vullen.
|
|
|
|
**Vereisten:**
|
|
|
|
- GitHub repository met duidelijke naam en beschrijving
|
|
- Next.js project met TypeScript en Tailwind CSS
|
|
- Folder structuur volgens best practices:
|
|
```
|
|
project/
|
|
├── .cursor/rules/
|
|
│ ├── general.mdc
|
|
│ └── [andere rules files]
|
|
├── docs/
|
|
│ ├── PROJECT-BRIEF.md
|
|
│ ├── PROMPT-LOG.md
|
|
│ └── AI-DECISIONS.md
|
|
├── src/
|
|
│ ├── app/
|
|
│ ├── components/
|
|
│ └── lib/
|
|
├── .env.example
|
|
└── README.md
|
|
```
|
|
- Minimaal 2 .cursorrules files met project-specifieke instructies
|
|
- Volledig ingevulde PROJECT-BRIEF.md met:
|
|
- Projectnaam en beschrijving
|
|
- Doelgroep
|
|
- Core features (3-5)
|
|
- Tech stack keuzes
|
|
- Complete README.md met installatie-instructies
|
|
- .env.example met alle benodigde environment variables
|
|
|
|
**Op te leveren:**
|
|
- GitHub repository URL
|
|
- Screenshot van folder structuur
|
|
- Inhoud van je belangrijkste .cursorrules file
|
|
|
|
---
|
|
|
|
## Deelopdracht 2: Database & Authenticatie met Supabase
|
|
|
|
Elke serieuze applicatie heeft data opslag en gebruikersbeheer nodig. Je gaat Supabase gebruiken om dit te realiseren, met hulp van AI voor de implementatie.
|
|
|
|
**Wat je doet:**
|
|
|
|
Je maakt een Supabase project aan en ontwerpt je database schema via de Table Editor (geen SQL kennis nodig). Je implementeert CRUD operaties in je Next.js app en voegt authenticatie toe zodat gebruikers kunnen inloggen.
|
|
|
|
**Vereisten:**
|
|
|
|
- Supabase project aangemaakt en gekoppeld
|
|
- Minimaal 2 tabellen die relevant zijn voor je applicatie
|
|
- Werkende CRUD operaties (Create, Read, Update, Delete)
|
|
- Authenticatie geïmplementeerd:
|
|
- Login/registratie pagina
|
|
- Protected routes (alleen voor ingelogde gebruikers)
|
|
- User-specifieke data (elke user ziet alleen eigen data)
|
|
- Environment variables correct geconfigureerd
|
|
- Foutafhandeling bij database operaties
|
|
|
|
**Op te leveren:**
|
|
- Screenshot van je Supabase tabellen
|
|
- Beschrijving van je database schema in AI-DECISIONS.md
|
|
- Werkende login flow (gedemonstreerd in eindpresentatie)
|
|
|
|
---
|
|
|
|
## Deelopdracht 3: AI Feature met Vercel AI SDK
|
|
|
|
Het onderscheidende element van jouw applicatie is de AI-integratie. Je gaat een chat-interface of AI-powered feature bouwen die echte waarde toevoegt voor de gebruiker.
|
|
|
|
**Wat je doet:**
|
|
|
|
Je installeert de Vercel AI SDK en bouwt een feature waarbij gebruikers kunnen communiceren met AI. Dit kan een chatbot zijn, een content generator, of een andere AI-powered functionaliteit die past bij jouw applicatie.
|
|
|
|
**Vereisten:**
|
|
|
|
- Vercel AI SDK (`ai` package) geïnstalleerd en geconfigureerd
|
|
- API route voor AI communicatie (`/api/chat` of vergelijkbaar)
|
|
- Frontend met `useChat` of `useCompletion` hook
|
|
- Streaming responses (tekst verschijnt woord voor woord)
|
|
- Relevante system prompt die past bij jouw applicatie
|
|
- Context uit je Supabase database meegeven aan AI (bijv. user preferences, historische data)
|
|
- Goede UX:
|
|
- Loading indicator tijdens AI response
|
|
- Error handling bij API fouten
|
|
- Mogelijkheid om conversation te clearen
|
|
- Conversation history opslaan in Supabase (optioneel maar aangeraden)
|
|
|
|
**Op te leveren:**
|
|
- Beschrijving van je AI feature in AI-DECISIONS.md
|
|
- System prompt die je gebruikt (met uitleg waarom)
|
|
- Minimaal 5 prompts in PROMPT-LOG.md die leidden tot je AI implementatie
|
|
|
|
---
|
|
|
|
## Deelopdracht 4: Testing, Deployment & Presentatie
|
|
|
|
Een applicatie is pas af als hij getest, gedeployed, en gedocumenteerd is. Je rondt je project af en bereidt een presentatie voor.
|
|
|
|
**Wat je doet:**
|
|
|
|
Je test je applicatie grondig (handmatig en/of geautomatiseerd), deployt naar Vercel, en maakt een presentatie waarin je je werk demonstreert en reflecteert op het ontwikkelproces.
|
|
|
|
**Vereisten:**
|
|
|
|
**Testing & Quality:**
|
|
- Applicatie handmatig getest op belangrijkste flows
|
|
- Minimaal 1 bug gevonden en opgelost met AI hulp (gedocumenteerd in PROMPT-LOG.md)
|
|
- Code review uitgevoerd met AI (gedocumenteerd in AI-DECISIONS.md)
|
|
- Geen console errors in productie
|
|
|
|
**Deployment:**
|
|
- Applicatie gedeployed op Vercel
|
|
- Environment variables correct geconfigureerd in Vercel
|
|
- Applicatie werkt volledig op productie URL
|
|
- Custom domain (optioneel)
|
|
|
|
**Documentatie:**
|
|
- PROMPT-LOG.md bevat minimaal 10 significante prompts
|
|
- AI-DECISIONS.md bevat minimaal 5 gedocumenteerde beslissingen
|
|
- README.md is up-to-date en compleet
|
|
|
|
**Presentatie (slide deck + demo):**
|
|
- Introductie: wat doet je app, voor wie?
|
|
- Demo: live walkthrough van belangrijkste features
|
|
- AI integratie: toon je AI feature in actie
|
|
- Technische keuzes: waarom deze aanpak?
|
|
- Reflectie: wat ging goed, wat was lastig, wat heb je geleerd?
|
|
- Conclusie: wat zou je anders doen?
|
|
|
|
**Op te leveren:**
|
|
- Productie URL (Vercel)
|
|
- Technisch verantwoordingsdocument (PDF)
|
|
- Slide deck (PDF of PPTX)
|
|
- Demo (live tijdens presentatie of video)
|
|
|
|
---
|
|
|
|
# Quickscan
|
|
|
|
Hieronder vind je de randvoorwaarden waaraan de eindopdracht moet voldoen. De beoordelaar kan op basis van deze eisen de eindopdracht teruggeven en zal deze niet verder nakijken tot aan de eisen is voldaan.
|
|
|
|
## Algemene eisen
|
|
|
|
- [ ] Naam van de student, inleverdatum en leerlijntitel zijn opgenomen op de titelpagina van het verantwoordingsdocument
|
|
- [ ] Het technisch verantwoordingsdocument is digitaal ingeleverd als PDF
|
|
- [ ] De slide deck is digitaal ingeleverd als PDF of PPTX
|
|
- [ ] De GitHub repository URL is bijgevoegd
|
|
- [ ] De Vercel productie URL is bijgevoegd en werkt
|
|
- [ ] Alle deelopdrachten zijn uitgewerkt en de gevraagde deelproducten zijn aanwezig
|
|
- [ ] Het verantwoordingsdocument is goed leesbaar zonder storende grammatica- en spellingsfouten
|
|
- [ ] De omvang van het verantwoordingsdocument beslaat 1500-2000 woorden (exclusief inhoudsopgave en bijlagen)
|
|
- [ ] De presentatie duurt maximaal 15 minuten (inclusief demo)
|
|
- [ ] Pagina's in het verantwoordingsdocument zijn genummerd
|
|
|
|
## Inhoudelijke eisen
|
|
|
|
- [ ] De GitHub repository bevat een complete folder structuur zoals beschreven
|
|
- [ ] Er zijn minimaal 2 .cursorrules files aanwezig met zinvolle instructies
|
|
- [ ] docs/PROJECT-BRIEF.md is volledig ingevuld
|
|
- [ ] docs/PROMPT-LOG.md bevat minimaal 10 gedocumenteerde prompts
|
|
- [ ] docs/AI-DECISIONS.md bevat minimaal 5 gedocumenteerde beslissingen
|
|
- [ ] README.md bevat installatie-instructies die werken
|
|
- [ ] De applicatie gebruikt Next.js met TypeScript en Tailwind CSS
|
|
- [ ] De applicatie is gekoppeld aan Supabase met minimaal 2 tabellen
|
|
- [ ] CRUD operaties zijn geïmplementeerd en werken
|
|
- [ ] Authenticatie is geïmplementeerd (login/registratie)
|
|
- [ ] De Vercel AI SDK is geïmplementeerd met werkende AI feature
|
|
- [ ] Streaming responses zijn geïmplementeerd
|
|
- [ ] De applicatie is gedeployed op Vercel en werkt volledig
|
|
|
|
## AI-gebruik
|
|
|
|
- [ ] Het gebruik van AI is toegestaan en verwacht bij deze eindopdracht
|
|
- [ ] Alle significante AI prompts zijn gedocumenteerd in PROMPT-LOG.md
|
|
- [ ] Architectuurbeslissingen gemaakt met AI hulp zijn gedocumenteerd in AI-DECISIONS.md
|
|
- [ ] Je bent te allen tijde verantwoordelijk voor de kwaliteit van de opgeleverde code
|
|
- [ ] Je kunt tijdens de presentatie uitleggen hoe je code werkt
|
|
|
|
---
|
|
|
|
# Structuur
|
|
|
|
## Technisch Verantwoordingsdocument
|
|
|
|
Voor het technisch verantwoordingsdocument wordt de volgende structuur aanbevolen:
|
|
|
|
### Titelpagina
|
|
- Naam student
|
|
- Inleverdatum
|
|
- Projectnaam
|
|
- GitHub URL
|
|
- Vercel URL
|
|
|
|
### Samenvatting
|
|
Een korte samenvatting (max 150 woorden) van wat je hebt gebouwd en de belangrijkste resultaten.
|
|
|
|
### Inhoudsopgave
|
|
Overzichtelijke inhoudsopgave met paginanummers.
|
|
|
|
### 1. Introductie
|
|
- Wat is het probleem dat je oplost?
|
|
- Wie is je doelgroep?
|
|
- Wat zijn de belangrijkste features?
|
|
|
|
### 2. Technische Implementatie
|
|
- Gekozen tech stack en waarom
|
|
- Database design (met diagram of beschrijving)
|
|
- AI feature: hoe werkt het, welke system prompt, waarom deze aanpak
|
|
- Belangrijkste technische uitdagingen en oplossingen
|
|
|
|
### 3. AI-Assisted Development Proces
|
|
- Hoe heb je AI tools ingezet tijdens development?
|
|
- Welke tools werkten goed, welke minder?
|
|
- Voorbeelden van effectieve prompts (verwijs naar PROMPT-LOG.md)
|
|
- Belangrijkste beslissingen gemaakt met AI hulp (verwijs naar AI-DECISIONS.md)
|
|
|
|
### 4. Reflectie
|
|
- Wat ging goed?
|
|
- Wat was uitdagend?
|
|
- Wat heb je geleerd over AI-assisted development?
|
|
- Wat zou je anders doen bij een volgend project?
|
|
|
|
### 5. Conclusie
|
|
Korte conclusie met de belangrijkste takeaways.
|
|
|
|
### Bijlagen
|
|
- Link naar GitHub repository
|
|
- Link naar Vercel deployment
|
|
- Eventuele screenshots of diagrammen
|
|
|
|
---
|
|
|
|
## Repository Structuur
|
|
|
|
Je repository moet de volgende structuur hebben:
|
|
|
|
```
|
|
project-naam/
|
|
├── .cursor/
|
|
│ └── rules/
|
|
│ ├── general.mdc # Algemene project regels
|
|
│ ├── components.mdc # Component conventies (optioneel)
|
|
│ └── api.mdc # API/Supabase regels (optioneel)
|
|
├── docs/
|
|
│ ├── PROJECT-BRIEF.md # Project beschrijving
|
|
│ ├── PROMPT-LOG.md # Gedocumenteerde prompts
|
|
│ └── AI-DECISIONS.md # Architectuur beslissingen
|
|
├── src/
|
|
│ ├── app/ # Next.js App Router
|
|
│ │ ├── api/
|
|
│ │ │ └── chat/
|
|
│ │ │ └── route.ts # AI API route
|
|
│ │ ├── login/
|
|
│ │ │ └── page.tsx
|
|
│ │ ├── layout.tsx
|
|
│ │ └── page.tsx
|
|
│ ├── components/
|
|
│ │ ├── ui/ # Basis UI components
|
|
│ │ └── features/ # Feature-specifieke components
|
|
│ ├── lib/
|
|
│ │ ├── supabase.ts # Supabase client
|
|
│ │ └── utils.ts
|
|
│ └── types/
|
|
│ └── index.ts
|
|
├── .env.example # Template voor env vars
|
|
├── .env.local # Lokale env vars (NIET committen)
|
|
├── .gitignore
|
|
├── next.config.js
|
|
├── package.json
|
|
├── README.md
|
|
├── tailwind.config.js
|
|
└── tsconfig.json
|
|
```
|
|
|
|
---
|
|
|
|
# Beoordelingscriteria
|
|
|
|
De eindopdracht wordt beoordeeld op basis van de volgende criteria. Per criterium kent de beoordelaar een cijfer van 1-10 toe.
|
|
|
|
| Deelopdracht | Criterium | Weging |
|
|
|--------------|-----------|--------|
|
|
| **1. Project Setup** | *Leeruitkomst: Repository inrichting & AI configuratie* | **15%** |
|
|
| 1.1 | Repository structuur is professioneel en compleet | 5% |
|
|
| 1.2 | .cursorrules files zijn zinvol en project-specifiek | 5% |
|
|
| 1.3 | Documentatie (README, PROJECT-BRIEF) is compleet | 5% |
|
|
| **2. Database & Auth** | *Leeruitkomst: Backend development met Supabase* | **25%** |
|
|
| 2.1 | Database schema is logisch en past bij de applicatie | 10% |
|
|
| 2.2 | CRUD operaties werken correct | 10% |
|
|
| 2.3 | Authenticatie is correct geïmplementeerd | 5% |
|
|
| **3. AI Feature** | *Leeruitkomst: AI features bouwen met Vercel AI SDK* | **30%** |
|
|
| 3.1 | AI feature voegt waarde toe voor de gebruiker | 10% |
|
|
| 3.2 | Technische implementatie is correct (streaming, error handling) | 10% |
|
|
| 3.3 | System prompt en context zijn doordacht | 10% |
|
|
| **4. Testing & Deployment** | *Leeruitkomst: Testing, debugging & deployment* | **15%** |
|
|
| 4.1 | Applicatie werkt volledig in productie | 10% |
|
|
| 4.2 | Code kwaliteit en foutafhandeling | 5% |
|
|
| **5. Proces & Documentatie** | *Leeruitkomst: AI-assisted development proces* | **15%** |
|
|
| 5.1 | PROMPT-LOG.md toont effectief prompt gebruik | 5% |
|
|
| 5.2 | AI-DECISIONS.md toont doordachte keuzes | 5% |
|
|
| 5.3 | Presentatie en verantwoordingsdocument | 5% |
|
|
| **Totaal** | | **100%** |
|
|
|
|
---
|
|
|
|
## Cijferbepaling
|
|
|
|
| Cijfer | Betekenis |
|
|
|--------|-----------|
|
|
| 9-10 | Uitstekend: overtreft alle verwachtingen, creatief en professioneel |
|
|
| 7-8 | Goed: voldoet ruim aan alle eisen, weinig verbeterpunten |
|
|
| 6 | Voldoende: voldoet aan de basiseisen |
|
|
| 5 | Onvoldoende: voldoet niet aan alle basiseisen, maar dichtbij |
|
|
| 1-4 | Onvoldoende: significante onderdelen ontbreken of werken niet |
|
|
|
|
Een voldoende (≥5.5) is vereist om de leerlijn af te ronden.
|