191 lines
7.5 KiB
Plaintext
191 lines
7.5 KiB
Plaintext
# 🚀 Mission Control – Bouwplan Template
|
||
|
||
💡 **Tip:** Dit document kun je samenstellen met hulp van AI-tools zoals **ChatGPT, Claude, Cursor** of **Gemini**.
|
||
Gebruik ze als **sparringpartner** om de bouw van je software te plannen, te documenteren en te verbeteren – zelfs als je geen ontwikkelaar bent.
|
||
Afhankelijk van de **complexiteit van je software** bepaal je zelf hoe gedetailleerd je elk onderdeel uitwerkt. Voor kleine prototypes volstaat een beknopt overzicht; voor grotere projecten kun je per fase en subfase inzoomen.
|
||
|
||
---
|
||
|
||
**Projectnaam:** _[vul in]_
|
||
**Versie:** _v1.0_
|
||
**Datum:** _[dd-mm-jjjj]_
|
||
**Auteur:** _[naam]_
|
||
|
||
---
|
||
|
||
## 1. Doel en context
|
||
🎯 **Doel:** Leg uit wat je gaat bouwen en waarom.
|
||
📘 **Toelichting:** Beschrijf kort de aanleiding voor het project en hoe het past binnen je organisatie of productstrategie. Verwijs hier naar het PRD of FO voor achtergrond.
|
||
|
||
**Voorbeeld:**
|
||
> Het doel is een werkend MVP te bouwen van de AI-assistent voor zorgdossiers. We tonen de meerwaarde van AI binnen de intake → profiel → plan workflow.
|
||
|
||
---
|
||
|
||
## 2. Uitgangspunten
|
||
🎯 **Doel:** Benoem de vaste kaders waarbinnen het project wordt ontwikkeld.
|
||
📘 **Toelichting:** Denk aan gebruikte stack, beperkingen (tijd, budget, resources) en aannames.
|
||
|
||
**Voorbeeld:**
|
||
- Stack: SvelteKit + Firebase + Vertex AI
|
||
- Tijd: 3 weken bouwtijd voor MVP
|
||
- Geen productiegegevens (alle data fictief)
|
||
- Doel: demo op AI-inspiratiesessie
|
||
|
||
---
|
||
|
||
## 3. Fase- en subfase-overzicht
|
||
🎯 **Doel:** De bouw opdelen in logische fases met een duidelijke volgorde.
|
||
📘 **Toelichting:** Elke fase bevat het doel, afhankelijkheden en status. Je kunt de status handmatig of via AI bijhouden.
|
||
|
||
**Voorbeeld:**
|
||
| Fase | Titel | Doel | Status | Opmerkingen |
|
||
|------|--------|------|---------|--------------|
|
||
| 0 | Setup | Repo, omgeving, dependencies | ✅ Gereed | Config getest |
|
||
| 1 | Data & Firebase | Datamodel en demo-data | 🔄 In Progress | Rules nog aanvullen |
|
||
| 2 | UI & Layout | SvelteKit layout, navigatie | ⏳ To Do | Wireframes gereed |
|
||
| 3 | AI-integratie | Vertex AI endpoints | ⏳ To Do | Test met Gemini model |
|
||
| 4 | Testing & Deploy | Demo testen & live zetten | ⏳ To Do | |
|
||
|
||
---
|
||
|
||
## 4. Subfases (uitwerking per fase)
|
||
🎯 **Doel:** Verdeel complexe fases in beheersbare subfases voor meer overzicht.
|
||
📘 **Toelichting:** Je bepaalt zelf het detailniveau. Kleine projecten kunnen volstaan met 2-3 subfases; grotere implementaties kunnen tot 10 subfases bevatten. Gebruik dit format om focus en voortgang te behouden.
|
||
|
||
**Voorbeeldstructuur:**
|
||
|
||
### Fase 0 — Setup
|
||
| Subfase | Doel | Status | Afhankelijkheden | Opmerkingen |
|
||
|----------|------|--------|------------------|--------------|
|
||
| 0.1 | Repo aanmaken | ✅ | — | GitHub en Vercel gereed |
|
||
| 0.2 | Dependencies installeren | ✅ | 0.1 | Tailwind, Lucide, Firebase |
|
||
| 0.3 | Omgevingsvariabelen configureren | 🔄 | 0.2 | `.env.local` + Vercel vars |
|
||
| 0.4 | Template cleanup | ⏳ | 0.2 | Verwijder standaard demo-content |
|
||
|
||
### Fase 1 — Data & Firebase
|
||
| Subfase | Doel | Status | Afhankelijkheden | Opmerkingen |
|
||
|----------|------|--------|------------------|--------------|
|
||
| 1.1 | Datamodel ontwerpen | 🔄 | 0.4 | Definieer `clients`, `intakes`, `plans` |
|
||
| 1.2 | Security Rules schrijven | ⏳ | 1.1 | Demo-user all access |
|
||
| 1.3 | Demo-data seeden | ⏳ | 1.1 | 3 testcliënten + intake |
|
||
|
||
### Fase 2 — UI & Layout
|
||
| Subfase | Doel | Status | Afhankelijkheden | Opmerkingen |
|
||
|----------|------|--------|------------------|--------------|
|
||
| 2.1 | Layout skelet bouwen | ⏳ | 1.3 | Topbalk + navigatie |
|
||
| 2.2 | Componentenbibliotheek koppelen | ⏳ | 2.1 | shadcn/ui of eigen variant |
|
||
| 2.3 | Navigatie en routes | ⏳ | 2.1 | `/clients/[id]` structuur |
|
||
|
||
### Fase 3 — AI-integratie
|
||
| Subfase | Doel | Status | Afhankelijkheden | Opmerkingen |
|
||
|----------|------|--------|------------------|--------------|
|
||
| 3.1 | Vertex AI configureren | ⏳ | 0.3 | GCP SA key in `.env` |
|
||
| 3.2 | Endpoints aanmaken | ⏳ | 3.1 | summarize, extract, plan |
|
||
| 3.3 | Logging & telemetrie | ⏳ | 3.2 | Log requests in `ai_events` |
|
||
|
||
### Fase 4 — Testing & Deploy
|
||
| Subfase | Doel | Status | Afhankelijkheden | Opmerkingen |
|
||
|----------|------|--------|------------------|--------------|
|
||
| 4.1 | Smoke tests uitvoeren | ⏳ | 3.3 | Prompt snapshots testen |
|
||
| 4.2 | Demo dry-run | ⏳ | 4.1 | Met tijdmeting (≤10 min) |
|
||
| 4.3 | Publicatie Vercel | ⏳ | 4.2 | EU-regio deployment |
|
||
|
||
---
|
||
|
||
## 5. Fasebeschrijving (detail)
|
||
🎯 **Doel:** Per fase beschrijven wat er moet gebeuren, zonder in code te duiken.
|
||
📘 **Toelichting:** Gebruik korte opsommingen en eventueel snippets om een AI-tool te laten helpen bij specifieke taken.
|
||
|
||
**Voorbeeldstructuur:**
|
||
|
||
### Fase 1 – Setup
|
||
* Doel: basisomgeving inrichten.
|
||
* Taken:
|
||
- Init SvelteKit project met Tailwind.
|
||
- Voeg ESLint, Prettier en TypeScript toe.
|
||
- Controleer lokale run in dev-modus.
|
||
* Snippet (voorbeeld prompt voor Cursor):
|
||
```
|
||
Maak een SvelteKit boilerplate met Tailwind en lucide-icons. Voeg een voorbeeldcomponent toe.
|
||
```
|
||
|
||
### Fase 2 – Data & Firebase
|
||
* Doel: datamodel definiëren en seed-data aanmaken.
|
||
* Taken:
|
||
- Collections opzetten (`clients`, `intakes`, `plans`).
|
||
- Security Rules schrijven.
|
||
- Demo-gebruiker configureren.
|
||
|
||
### Fase 3 – UI & Interactie
|
||
* Doel: interface opzetten volgens UX/FO.
|
||
* Taken:
|
||
- Layout bouwen met Topbalk + Linkernav.
|
||
- Dummy-content tonen per tab.
|
||
- Toetscombinaties testen (Ctrl+S, Cmd+K).
|
||
* Snippet (prompt):
|
||
```
|
||
Bouw een Svelte-component voor de linkernavigatie met active state en hover animatie.
|
||
```
|
||
|
||
### Fase 4 – AI-integratie
|
||
* Doel: AI-functionaliteit koppelen (server-side).
|
||
* Taken:
|
||
- Vertex AI instellen (Gemini model).
|
||
- Endpoints maken: summarize, extract, plan.
|
||
- Output testen met fictieve data.
|
||
|
||
---
|
||
|
||
## 6. Kwaliteit & Testplan
|
||
🎯 **Doel:** vastleggen hoe de kwaliteit van het project wordt geborgd.
|
||
📘 **Toelichting:** Licht toe welke tests je uitvoert en hoe je weet dat de build stabiel is.
|
||
|
||
**Voorbeeld:**
|
||
- Smoke tests per flow (A/B/C)
|
||
- Snapshot tests op AI-output structuur
|
||
- Handmatige demo-run vóór oplevering
|
||
|
||
---
|
||
|
||
## 7. Demo & Presentatieplan
|
||
🎯 **Doel:** beschrijven hoe de demo wordt gepresenteerd of getest.
|
||
📘 **Toelichting:** Vermeld wat je laat zien, wie betrokken is en welk scenario wordt gevolgd.
|
||
|
||
**Voorbeeld:**
|
||
> We tonen in 10 minuten de flow: nieuwe cliënt → intake → AI-samenvatting → behandelplan.
|
||
> De demo draait lokaal in Vercel met mockdata.
|
||
|
||
---
|
||
|
||
## 8. Risico’s & Mitigatie
|
||
🎯 **Doel:** risico’s vroeg signaleren en voorzien van oplossingen.
|
||
📘 **Toelichting:** Gebruik dit als dynamische checklist.
|
||
|
||
**Voorbeeld:**
|
||
| Risico | Impact | Mitigatie |
|
||
|--------|---------|------------|
|
||
| AI-output inconsistent | Hoog | Test prompts, gebruik snapshot tests |
|
||
| Firebase regels te open | Middel | Sluiten voor productie |
|
||
| Tijdsdruk | Hoog | Schalen op taken via AI of no-code tooling |
|
||
|
||
---
|
||
|
||
## 9. Evaluatie & Lessons Learned
|
||
🎯 **Doel:** reflecteren op het proces en verbeteringen vastleggen.
|
||
📘 **Toelichting:** noteer inzichten na elke sprint of oplevering.
|
||
|
||
**Voorbeeld:**
|
||
> De AI-rail werkte goed, maar het kostte extra tijd om prompts te fine-tunen. Voor de volgende iteratie gebruiken we vooraf geteste promptblokken.
|
||
|
||
---
|
||
|
||
## 10. Referenties
|
||
🎯 **Doel:** koppelen aan de overige Mission Control-documenten.
|
||
|
||
**Verwijzingen:**
|
||
- PRD – Product Requirements Document
|
||
- FO – Functioneel Ontwerp
|
||
- TO – Technisch Ontwerp
|
||
- UX/UI-specificatie
|
||
- API Access Document |