Modèle C4

4 niveaux de zoom :

• Context
• Container
• Component
• Code.

Représente le même système à plusieurs niveaux de détail.

vue très large : où se place ton système ?

Les 4 C

Context

Vue très large : Ton système vu de l’extérieur, “Ce système sert à quoi, pour qui, et avec quoi il parle ?”. On y voit :

• les utilisateurs,
• les systèmes externes,
• ton application au milieu,
• les grandes interactions.

Exemple :

• Client
• Admin
• Shop Platform
• Stripe
• Service de mails

Container

Vue intermédiaire : quels gros blocs le composent (blocs exécutable ou stockant des données), “Techniquement, mon système est découpé en quels gros morceaux?".

Exemple:

• Frontend Web App (Nuxt/Vue)
• Backend API (Node.js ou PHP)
• MariaDB
• Worker d’envoi d’e-mails

Component

Vue fine : comment un bloc est organisé, “À l’intérieur de ce bloc, quels sont les modules importants et leurs responsabilités ?”?

Exemple poru une API :

• Auth Controller
• Order Service
• Payment Service
• Product Repository
• Email Gateway

Code

Vue très fine : à quoi ressemble le code / design interne ?

Niveau “Code” prévu, mais en pratique il est souvent optionnel, “Comment ce composant est structuré en classes, interfaces, modules, etc. ?”.

Exemple

workspace "Webshop"Adext2" "C4 model example for an online store"workspace" {
 
    model {

        customeruser = person "Customer"User"

        "Browses products and places orders"
        admin = person "Admin" "Manages products, stock, and orders"

        stripeadext = softwareSystem "Stripe" "Processes online payments"
        mailService = softwareSystem "Mail Service" "Sends transactional emails"

        webshop = softwareSystem "Webshop" "Online store platform"Adext2" {

            webapp = container "Web Application"App" "Customer-facingAngular" website{

                andloginView admin= dashboard"component "Nuxt.js"Login View"

                authService = component "auth.service"

                externalsListView = component "Externals List View"

                externalsService = component "externals.service"

                newExternalView = component " New external view"

                formService = component "form.service"

            }

            api = container "Backend API" "Handles{

                businessexternalsController logic,= authentication, orders, and payments"component "PHP"Externals Controller"

                loginController = component "Login Controller"

                pagesController = component "Page Controller"

                externalModel = component "External Model"

                ldapModel = component "Ldap Model"

                config = component "Config"

            }

            db = container "Database"DataBase"

        "Stores}
 
        users,// products,Niveau orders,2  andContainers

            stock" "MariaDB"
            worker = container "Email Worker" "Sends order confirmation and notification emails" "PHP CLI"

            checkoutController = component "Checkout Controller" "Receives checkout requests" "PHP Controller"
            orderService = component "Order Service" "Creates orders and coordinates checkout workflow" "PHP Service"
            paymentService = component "Payment Service" "Creates Stripe payment sessions" "PHP Service"
            productRepository = component "Product Repository" "Reads and writes product data" "PHP Repository"
            orderRepository = component "Order Repository" "Reads and writes order data" "PHP Repository"
            mailGateway = component "Mail Gateway" "Sends email jobs to the worker" "PHP Service"

            customeruser -> webapp "Uses"
            admin -> webapp "Uses"Utilise"

            webapp -> api "Calls REST API over HTTPS"Appelle" 

            api -> db "ReadsLit/Ecrit"
 
        and// writesNiveau data"3 

            api// API

            externalsController -> stripeexternalModel "CreatesUtilise"

            payment sessions via API"
            apipagesController -> workerexternalModel "QueuesUtilise"

            email jobs"
            workerloginController -> mailServiceldapModel "SendsUtilise"

            emails via SMTP/API"

            apiexternalModel -> checkoutControllerconfig "HandlesUtilise"

            checkout requests"
            checkoutControllerldapModel -> orderServiceconfig "Calls"Utilise"

            orderServiceexternalModel -> paymentServicedb "Calls"Se orderServiceconnecte / MYSQL"

            ldapModel -> orderRepositorydb "StoresSe order"connecte orderService/ MYSQL"
 
            // Front - LoginView

            loginView -> productRepositoryauthService "ChecksUtilise"

            stock"
            orderServiceauthService -> mailGatewayloginController "QueuesHTTP"
 
            confirmation// email"Front }- Externals list

            externalsListView -> externalsService "Utilise"

            externalsService -> externalsController "HTTP"
 
            // Front - New external

            newExternalView -> formService "Utilise"

            formService -> externalsController "HTTP"
 
 
    }
 
    views {

        systemContext webshop "SystemContext"adext {

            include *user

            include adext

            autolayout lr

        }
 
        container webshop "Containers"adext {

            include *

            autolayout lr

        }
 
        component api "APIComponents" {

            include checkoutController
            include orderService
            include paymentService
            include productRepository
            include orderRepository
            include mailGateway*

            autolayout lr

        }
 
        themecomponent defaultwebapp {

            include *

            autolayout lr

        }

    }

}