3. C4 niveau 3 — Component Diagram
Tekstuele modellering
Op C4 niveau 3 wordt gekeken naar de logische hoofdcomponenten binnen één gekozen container: de OefenHub Webapp.
Hoofdcomponenten binnen de webapp
- Web UI / Blazor schermlaag
- Application Services / Use-case-orkestratie
- Autorisatie- en frontendcontextcomponent
- Identity- en accountlifecycle-integratie
- Relatie- en toegangsbeheer
- Catalogus-, configuratie- en contentbeheer
- Technische module-integratie en strategylaag
- Oefenrun-, resultaat- en statistiekverwerking
- Realtime en live-view
- Mailbox- en systeemberichten
- Site-notificaties en UI-notificatieafhandeling
- Ticketing en meldingsafhandeling
- Document- en PDF-export
- Background jobs en cleanup
- Data access / persistence-laag
Toelichting bij het diagram
Het componentdiagram voor niveau 3 richt zich bewust op de OefenHub Webapp als gekozen container. Daarmee maakt dit niveau zichtbaar hoe de modulaire monolithische applicatie intern logisch is opgesplitst in verantwoordelijkheden voor presentatie, use-case-uitvoering, autorisatie, domeinlogica, integraties en operationele webapp-functies.
Figuur 3 — OefenHub C4 niveau 3: Component Diagram
workspace "OefenHub" "C4 model niveau 3 - Component Diagram" {
model {
leerling = person "Leerling" "Maakt oefeningen, hervat oefeningen en bekijkt resultaten binnen toegestane niveaucontext."
ouder = person "Ouder/voogd" "Bekijkt gekoppelde leerlingdata en kan live meekijken."
docent = person "Docent" "Beheert niveaus, categorieën, oefeningen en leerlingtoegang."
beheerder = person "Beheerder" "Beheert accounts, centrale inhoud, instellingen en systeembeheer."
testdocent = person "TestDocent" "Gebruikt testmodules in een gecontroleerde docentcontext."
oefenhub = softwareSystem "OefenHub" "Nederlandstalige webapplicatie voor oefenen, voortgang, beheer en ondersteuning van leerlingen, ouders/voogden, docenten en beheerders." {
webapp = container "OefenHub Webapp" "Primaire .NET / C# / Blazor Web App met gebruikersinterface, businesslogica, autorisatie, integraties, SignalR, TickerQ en QuestPDF." ".NET / C# / Blazor Web App" {
webui = component "Web UI / Blazor schermlaag" "Verzorgt pagina’s, componenten, navigatie en gebruikersinteractie." "Blazor UI"
appservices = component "Application Services / Use-case-orkestratie" "Coördineert applicatieflows en use-cases." "Application layer"
authctx = component "Autorisatie- en frontendcontextcomponent" "Bepaalt actieve context, frontpage-opbouw en objectniveau-autorisatie." "Authorization / context"
identity = component "Identity- en accountlifecycle-integratie" "Verwerkt provisioning, identity-koppeling en accountlifecycle met Keycloak." "Integration"
relations = component "Relatie- en toegangsbeheer" "Verwerkt relaties, uitnodigingen, niveautoegang en collaboratorlogica." "Domain component"
content = component "Catalogus-, configuratie- en contentbeheer" "Beheert niveaus, categorieën, oefeningen, instellingen en beheerbare inhoud binnen codegedreven layoutgrenzen." "Domain component"
modules = component "Technische module-integratie en strategylaag" "Ontsluit technische oefenmodules via vaste contracten en vertaalt generieke use-cases naar modulespecifieke logica." "Module integration"
runs = component "Oefenrun-, resultaat- en statistiekverwerking" "Verwerkt runs, voortgang, hybride opslag, resultaten, historie en statistieken." "Domain component"
realtime = component "Realtime en live-view" "Ondersteunt SignalR-gebaseerd live meekijken en realtime interacties." "Realtime"
mailbox = component "Mailbox- en systeemberichten" "Verwerkt threadgebaseerde privéberichten en mailboxgerichte systeemberichten." "Domain component"
sitenotifications = component "Site-notificaties en UI-notificatieafhandeling" "Verwerkt doelgroepgerichte site-notificaties, once-per-browser state en frontpage-gerichte notificatielogica." "Domain component"
tickets = component "Ticketing en meldingsafhandeling" "Verwerkt tickets, discussies, closures, reopen-verzoeken en formele tickethistorie." "Domain component"
pdf = component "Document- en PDF-export" "Genereert met QuestPDF resultaatdocumenten en PDF-uitvoer." "Document generation"
jobs = component "Background jobs en cleanup" "Voert via TickerQ geplande taken, cleanup en schedulerlogica uit." "Background processing"
persistence = component "Data access / persistence-laag" "Verzorgt relationele opslag, hybride payloadopslag en uitlezing van domeindata, historie en auditrecords." "Persistence"
}
database = container "OefenHub Database" "Slaat domeindata, configuratie, historie, auditgerelateerde records en operationele applicatiegegevens op." "SQL Database"
}
keycloak = softwareSystem "Keycloak" "Externe identity provider voor authenticatie, registratie, sessies en credential-lifecycle."
mail = softwareSystem "Mailvoorziening" "Externe e-mailafhandeling voor verificaties, uitnodigingen en notificatiegerelateerde processen."
leerling -> webui "Gebruikt via browser"
ouder -> webui "Gebruikt via browser"
docent -> webui "Gebruikt via browser"
beheerder -> webui "Gebruikt via browser"
testdocent -> webui "Gebruikt via browser"
webui -> appservices "Start use-cases en schermacties"
appservices -> authctx "Valideert context en toegestane acties"
appservices -> identity "Gebruikt voor identity- en accountflows"
appservices -> relations "Gebruikt voor relatie- en toegangslogica"
appservices -> content "Gebruikt voor beheer en configuratie"
appservices -> modules "Gebruikt voor modulespecifieke generatie-, render- en validatielogica"
appservices -> runs "Gebruikt voor oefenruns, resultaten en statistieken"
appservices -> realtime "Gebruikt voor live-view en realtime interactie"
appservices -> mailbox "Gebruikt voor privéberichten en mailboxgerichte systeemberichten"
appservices -> sitenotifications "Gebruikt voor site-notificaties en frontpagegerichte meldinglogica"
appservices -> tickets "Gebruikt voor tickets en meldingsafhandeling"
appservices -> pdf "Gebruikt voor document- en PDF-export"
appservices -> jobs "Triggert of gebruikt achtergrondtaken waar nodig"
identity -> keycloak "Gebruikt voor authenticatie en identity-gerelateerde flows"
mailbox -> mail "Verstuurt verificaties, uitnodigingen en notificatie-e-mails"
relations -> persistence "Leest en schrijft domeindata"
content -> persistence "Leest en schrijft domeindata"
runs -> persistence "Leest en schrijft domeindata"
realtime -> persistence "Leest actuele status en context"
mailbox -> persistence "Leest en schrijft domeindata"
sitenotifications -> persistence "Leest en schrijft notificatie- en browsercontextdata"
tickets -> persistence "Leest en schrijft ticket- en historiedata"
pdf -> persistence "Leest historisch consistente brondata"
jobs -> persistence "Leest en schrijft systeem- en cleanupdata"
persistence -> database "Persistente opslag"
}
views {
component webapp "ComponentDiagram" {
include *
autolayout lr
title "OefenHub - C4 niveau 3 - Component Diagram"
}
theme default
}
}
C4 niveau 3A — Web/UI en use-case-orkestratie
Deze deeluitwerking richt zich op de voorkant van de webapp: de Blazor-schermlaag, de use-case-orkestratie en de autorisatie-/frontendcontext die bepaalt welke schermacties, frontpage-opbouw en gegevens in de actuele context zijn toegestaan.
Hiermee wordt zichtbaar hoe gebruikersinteractie niet direct met domeincomponenten praat, maar via een gecontroleerde use-case-laag verloopt. Dit diagram is vooral relevant voor schermgedrag, runtime contextcompositie, browserlokale state en het scheiden van presentatie en applicatielogica.
Figuur 4 — OefenHub C4 niveau 3A: Web/UI en use-case-orkestratie
workspace "OefenHub" "C4 model niveau 3A - Web/UI en use-case-orkestratie" {
model {
leerling = person "Leerling" "Gebruikt de webapp via browser."
ouder = person "Ouder/voogd" "Gebruikt de webapp via browser."
docent = person "Docent" "Gebruikt de webapp via browser."
beheerder = person "Beheerder" "Gebruikt de webapp via browser."
testdocent = person "TestDocent" "Gebruikt de webapp via browser."
oefenhub = softwareSystem "OefenHub" "Architectuurweergave van de webappcontainer." {
webapp = container "OefenHub Webapp" "Modulaire monolithische .NET / C# / Blazor Web App." ".NET / C# / Blazor Web App" {
webui = component "Web UI / Blazor schermlaag" "Verzorgt pagina’s, componenten, navigatie en gebruikersinteractie." "Blazor UI"
appservices = component "Application Services / Use-case-orkestratie" "Coördineert applicatieflows en use-cases." "Application layer"
authctx = component "Autorisatie- en frontendcontextcomponent" "Bepaalt actieve context, frontpage-opbouw en objectniveau-autorisatie." "Authorization / context"
}
}
leerling -> webui "Gebruikt via browser"
ouder -> webui "Gebruikt via browser"
docent -> webui "Gebruikt via browser"
beheerder -> webui "Gebruikt via browser"
testdocent -> webui "Gebruikt via browser"
webui -> appservices "Start use-cases en schermacties"
appservices -> authctx "Valideert context en toegestane acties"
}
views {
component webapp "ComponentDiagram3A" {
include leerling
include ouder
include docent
include beheerder
include testdocent
include webui
include appservices
include authctx
autolayout lr
title "OefenHub - C4 niveau 3A - Web/UI en use-case-orkestratie"
}
theme default
}
}
C4 niveau 3B — Relatie-, toegang- en accountdomein
Deze deeluitwerking zoomt in op identity, accountlifecycle, relatiebeheer, niveautoegang, collaboratorlogica en objectniveau-autorisatie.
Dit diagram is vooral relevant voor de scheiding tussen Keycloak, interne domeinidentiteit, relatiegedrag en niveauautorisaties. Het helpt om toegangslogica los te zien van de bredere oefen- en contentstromen.
Figuur 5 — OefenHub C4 niveau 3B: Relatie-, toegang- en accountdomein
workspace "OefenHub" "C4 model niveau 3B - Relatie-, toegang- en accountdomein" {
model {
oefenhub = softwareSystem "OefenHub" "Architectuurweergave van de webappcontainer." {
webapp = container "OefenHub Webapp" "Modulaire monolithische .NET / C# / Blazor Web App." ".NET / C# / Blazor Web App" {
appservices = component "Application Services / Use-case-orkestratie" "Coördineert applicatieflows en use-cases." "Application layer"
authctx = component "Autorisatie- en frontendcontextcomponent" "Bepaalt actieve context en objectniveau-autorisatie." "Authorization / context"
identity = component "Identity- en accountlifecycle-integratie" "Verwerkt provisioning, identity-koppeling en accountlifecycle met Keycloak." "Integration"
relations = component "Relatie- en toegangsbeheer" "Verwerkt relaties, uitnodigingen, niveautoegang en collaboratorlogica." "Domain component"
persistence = component "Data access / persistence-laag" "Verzorgt opslag en uitlezing van domeindata, historie en auditrecords." "Persistence"
}
database = container "OefenHub Database" "Slaat domeindata, configuratie, historie en auditrecords op." "SQL Database"
}
keycloak = softwareSystem "Keycloak" "Externe identity provider voor authenticatie, registratie, sessies en credential-lifecycle."
appservices -> authctx "Valideert context en toegestane acties"
appservices -> identity "Gebruikt voor identity- en accountflows"
appservices -> relations "Gebruikt voor relatie- en toegangslogica"
relations -> persistence "Leest en schrijft domeindata"
authctx -> relations "Gebruikt relatie- en toegangscontext"
identity -> keycloak "Gebruikt voor authenticatie en identity-gerelateerde flows"
persistence -> database "Persistente opslag"
}
views {
component webapp "ComponentDiagram3B" {
include appservices
include authctx
include identity
include relations
include persistence
include database
include keycloak
autolayout lr
title "OefenHub - C4 niveau 3B - Relatie-, toegang- en accountdomein"
}
theme default
}
}
C4 niveau 3C — Oefendomein
Deze deeluitwerking richt zich op de inhoudelijke kern van OefenHub: catalogus- en configuratiebeheer, technische module-integratie, oefenruns, resultaten, statistieken, realtime/live-view en document-/PDF-export.
Dit diagram is vooral bruikbaar voor het begrijpen van de samenhang tussen configuratie, modulestrategie, hybride opslag, runverwerking, historie, statistieken, realtime meekijken en exportfunctionaliteit.
Figuur 6 — OefenHub C4 niveau 3C: Oefendomein
workspace "OefenHub" "C4 model niveau 3C - Oefendomein" {
model {
oefenhub = softwareSystem "OefenHub" "Architectuurweergave van de webappcontainer." {
webapp = container "OefenHub Webapp" "Modulaire monolithische .NET / C# / Blazor Web App." ".NET / C# / Blazor Web App" {
appservices = component "Application Services / Use-case-orkestratie" "Coördineert applicatieflows en use-cases." "Application layer"
content = component "Catalogus-, configuratie- en contentbeheer" "Beheert niveaus, categorieën, oefeningen, instellingen en beheerbare inhoud." "Domain component"
modules = component "Technische module-integratie en strategylaag" "Ontsluit technische oefenmodules via vaste contracten." "Module integration"
runs = component "Oefenrun-, resultaat- en statistiekverwerking" "Verwerkt runs, hybride opslag, resultaten, historie en statistieken." "Domain component"
realtime = component "Realtime en live-view" "Ondersteunt SignalR-gebaseerd live meekijken en realtime interacties." "Realtime"
pdf = component "Document- en PDF-export" "Genereert met QuestPDF documentuitvoer." "Document generation"
persistence = component "Data access / persistence-laag" "Verzorgt relationele opslag en hybride payloadopslag." "Persistence"
}
database = container "OefenHub Database" "Slaat domeindata, configuratie, historie en auditrecords op." "SQL Database"
}
appservices -> content "Gebruikt voor beheer en configuratie"
appservices -> modules "Gebruikt voor modulespecifieke logica"
appservices -> runs "Gebruikt voor oefenruns, resultaten en statistieken"
appservices -> realtime "Gebruikt voor live-view en realtime interactie"
appservices -> pdf "Gebruikt voor document- en PDF-export"
content -> persistence "Leest en schrijft domeindata"
runs -> persistence "Leest en schrijft domeindata"
realtime -> persistence "Leest actuele status en context"
pdf -> persistence "Leest historisch consistente brondata"
persistence -> database "Persistente opslag"
}
views {
component webapp "ComponentDiagram3C" {
include appservices
include content
include modules
include runs
include realtime
include pdf
include persistence
include database
autolayout lr
title "OefenHub - C4 niveau 3C - Oefendomein"
}
theme default
}
}
C4 niveau 3D — Communicatie en achtergrondverwerking
Deze deeluitwerking focust op mailbox- en systeemberichten, site-notificaties, ticketing, mailafhandeling, background jobs en cleanup. Hiermee wordt zichtbaar hoe interactieve communicatie en systeemgestuurde achtergrondprocessen samenkomen in dezelfde modulaire monolithische webapp, maar architectonisch wel als afzonderlijke logische componenten te onderscheiden zijn.
Dit diagram helpt vooral bij het begrijpen van de gescheiden communicatiedomeinen, notificatiestromen, geplande opschoning, uitnodigingsverloop en andere systeemtaken die niet altijd direct door een actieve gebruiker worden gestart.
Figuur 7 — OefenHub C4 niveau 3D: Communicatie en achtergrondverwerking
workspace "OefenHub" "C4 model niveau 3D - Communicatie en achtergrondverwerking" {
model {
oefenhub = softwareSystem "OefenHub" "Architectuurweergave van de webappcontainer." {
webapp = container "OefenHub Webapp" "Modulaire monolithische .NET / C# / Blazor Web App." ".NET / C# / Blazor Web App" {
appservices = component "Application Services / Use-case-orkestratie" "Coördineert applicatieflows en use-cases." "Application layer"
mailbox = component "Mailbox- en systeemberichten" "Verwerkt threadgebaseerde privéberichten en mailboxgerichte systeemberichten." "Domain component"
sitenotifications = component "Site-notificaties en UI-notificatieafhandeling" "Verwerkt doelgroepgerichte site-notificaties en browserlokale notificatiestate." "Domain component"
tickets = component "Ticketing en meldingsafhandeling" "Verwerkt tickets, closures, reopen-verzoeken en formele tickethistorie." "Domain component"
jobs = component "Background jobs en cleanup" "Voert via TickerQ geplande taken en cleanup uit." "Background processing"
persistence = component "Data access / persistence-laag" "Verzorgt opslag en uitlezing van domeindata, historie en auditrecords." "Persistence"
}
database = container "OefenHub Database" "Slaat domeindata, configuratie, historie en auditrecords op." "SQL Database"
}
mail = softwareSystem "Mailvoorziening" "Externe e-mailafhandeling voor verificaties, uitnodigingen en notificatiegerelateerde processen."
appservices -> mailbox "Gebruikt voor privéberichten en systeemberichten"
appservices -> sitenotifications "Gebruikt voor site-notificaties en UI-notificatielogica"
appservices -> tickets "Gebruikt voor tickets en meldingsafhandeling"
appservices -> jobs "Triggert of gebruikt achtergrondtaken waar nodig"
mailbox -> persistence "Leest en schrijft domeindata"
sitenotifications -> persistence "Leest en schrijft notificatiedata"
tickets -> persistence "Leest en schrijft ticket- en historiedata"
jobs -> persistence "Leest en schrijft systeem- en cleanupdata"
mailbox -> mail "Verstuurt verificaties, uitnodigingen en notificatie-e-mails"
persistence -> database "Persistente opslag"
}
views {
component webapp "ComponentDiagram3D" {
include appservices
include mailbox
include sitenotifications
include tickets
include jobs
include persistence
include database
include mail
autolayout lr
title "OefenHub - C4 niveau 3D - Communicatie en achtergrondverwerking"
}
theme default
}
}