{"id":12346,"date":"2026-03-05T10:48:15","date_gmt":"2026-03-05T02:48:15","guid":{"rendered":"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/"},"modified":"2026-03-05T10:48:15","modified_gmt":"2026-03-05T02:48:15","slug":"a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc","status":"publish","type":"post","link":"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","title":{"rendered":"Une \u00e9tude de cas compl\u00e8te et \u00e9tape par \u00e9tape : application du mod\u00e8le C4 au syst\u00e8me de banque en ligne (Big Bank plc)"},"content":{"rendered":"<p>Le\u00a0<strong>mod\u00e8le C4<\/strong>, cr\u00e9\u00e9 par Simon Brown, est une m\u00e9thode simple, hi\u00e9rarchique et conviviale pour les d\u00e9veloppeurs afin de visualiser l&#8217;architecture logicielle. Elle utilise quatre niveaux d&#8217;abstraction (d&#8217;o\u00f9 le \u00ab C4 \u00bb) pour d\u00e9crire un syst\u00e8me, du niveau le plus \u00e9lev\u00e9 jusqu&#8217;aux d\u00e9tails au niveau du code :<\/p>\n<ol>\n<li>\n<p><strong>Contexte du syst\u00e8me<\/strong>\u00a0(Niveau 1) \u2013 La vue d&#8217;ensemble : le syst\u00e8me et ses utilisateurs\/d\u00e9pendances externes.<\/p>\n<\/li>\n<li>\n<p><strong>Conteneurs<\/strong>\u00a0(Niveau 2) \u2013 Choix technologiques de haut niveau et responsabilit\u00e9s.<\/p>\n<\/li>\n<li>\n<p><strong>Composants<\/strong>\u00a0(Niveau 3) \u2013 Blocs logiques majeurs \u00e0 l&#8217;int\u00e9rieur d&#8217;un conteneur.<\/p>\n<\/li>\n<li>\n<p><strong>Code<\/strong>\u00a0(Niveau 4) \u2013 D\u00e9tails optionnels au niveau des classes ou de la structure du code.<\/p>\n<\/li>\n<\/ol>\n<p>Il est soutenu par trois types suppl\u00e9mentaires de diagrammes :<\/p>\n<ul>\n<li>\n<p><strong>Paysage du syst\u00e8me<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>Dynamique<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>D\u00e9ploiement<\/strong><\/p>\n<\/li>\n<\/ul>\n<p class=\"\">Le mod\u00e8le est ind\u00e9pendant de la notation (vous pouvez utiliser n&#8217;importe quel outil de diagrammation) et se concentre sur la clart\u00e9, la coh\u00e9rence et les d\u00e9tails adapt\u00e9s au public cible. Il est largement adopt\u00e9 car il \u00e9vite les diagrammes d&#8217;architecture \u00ab big ball of mud \u00bb et s&#8217;adapte des croquis au tableau blanc \u00e0 la documentation automatis\u00e9e.<\/p>\n<p>Pour cette\u00a0<strong>\u00e9tude de cas cibl\u00e9e<\/strong>, nous utilisons l&#8217;exemple canonique du site officiel C4 :\u00a0<strong>Syst\u00e8me de banque en ligne<\/strong>\u00a0pour la banque fictive \u00ab Big Bank plc \u00bb. L&#8217;objectif m\u00e9tier est de permettre aux clients particuliers de consulter leurs comptes et de r\u00e9aliser des paiements en ligne tout en s&#8217;int\u00e9grant aux syst\u00e8mes centraux existants de la banque.<\/p>\n<p>Nous allons passer en revue\u00a0<strong>chaque niveau<\/strong>\u00a0avec :<\/p>\n<ul>\n<li>\n<p>Objectif et public cible<\/p>\n<\/li>\n<li>\n<p>\u00c9l\u00e9ments cl\u00e9s + responsabilit\u00e9s<\/p>\n<\/li>\n<li>\n<p>Relations<\/p>\n<\/li>\n<li>\n<p>Un diagramme C4 PlantUML pr\u00eat \u00e0 l&#8217;emploi\u00a0<strong>diagramme PlantUML C4<\/strong>(PlantUML prend en charge la syntaxe C4 et s&#8217;affiche magnifiquement dans la plupart des visualisateurs Markdown)<\/p>\n<\/li>\n<li>\n<p>Raisonnement et d\u00e9cisions cl\u00e9s<\/p>\n<\/li>\n<li>\n<p>Comment le diagramme aide les parties prenantes<\/p>\n<\/li>\n<\/ul>\n<h3>\u00c9tape 1 : D\u00e9finir le p\u00e9rim\u00e8tre et cr\u00e9er le diagramme de contexte du syst\u00e8me (Niveau 1)<\/h3>\n<p><strong>Objectif<\/strong>: Montrer comment le nouveau syst\u00e8me de banque en ligne s&#8217;int\u00e8gre dans le monde. Public cible : parties prenantes m\u00e9tier, personnes non techniques, nouveaux membres de l&#8217;\u00e9quipe.<\/p>\n<p><strong>\u00c9l\u00e9ments<\/strong>\u00a0(exemple officiel) :<\/p>\n<ul>\n<li>\n<p><strong>Client de banque personnelle<\/strong>\u00a0(Personne) \u2013 Un client poss\u00e9dant un ou plusieurs comptes bancaires personnels.<\/p>\n<\/li>\n<li>\n<p><strong>Syst\u00e8me de banque en ligne<\/strong>\u00a0(Syst\u00e8me logiciel) \u2013 Le nouveau syst\u00e8me que nous d\u00e9veloppons.<\/p>\n<\/li>\n<li>\n<p><strong>Syst\u00e8me bancaire central<\/strong>\u00a0(Syst\u00e8me logiciel, existant) \u2013 Syst\u00e8me central qui g\u00e8re les donn\u00e9es des clients, les comptes et les transactions.<\/p>\n<\/li>\n<li>\n<p><strong>Syst\u00e8me de messagerie<\/strong>\u00a0(Syst\u00e8me logiciel, externe) \u2013 Service Simple d&#8217;Email d&#8217;Amazon Web Services (AWS SES) pour envoyer des confirmations.<\/p>\n<\/li>\n<\/ul>\n<p><strong>Relations<\/strong>:<\/p>\n<ul>\n<li>\n<p>Client \u2192 utilise \u2192 Syst\u00e8me de banque en ligne (pour consulter les comptes et effectuer des paiements)<\/p>\n<\/li>\n<li>\n<p>Syst\u00e8me de banque en ligne \u2192 utilise \u2192 Syst\u00e8me bancaire central (pour les donn\u00e9es de compte et les paiements)<\/p>\n<\/li>\n<li>\n<p>Syst\u00e8me de banque en ligne \u2192 envoie un courriel via \u2192 Syst\u00e8me de messagerie<\/p>\n<\/li>\n<\/ul>\n<p>Voici le\u00a0<strong>Diagramme de contexte C4 PlantUML<\/strong>:<\/p>\n<p id=\"GeUKeRH\"><img alt=\"\" class=\"alignnone size-full wp-image-15959\" decoding=\"async\" height=\"739\" loading=\"lazy\" sizes=\"auto, (max-width: 527px) 100vw, 527px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png 527w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5-214x300.png 214w\" width=\"527\"\/><code data-language=\"mermaid\"><\/code><\/p>\n<pre class=\"relative p-4 text-sm overflow-auto h-full box-border !bg-gray-900 text-gray-100\"><code class=\"text-gray-100\">@startuml\r\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Context.puml\r\n\r\nLAYOUT_TOP_DOWN()\r\nLAYOUT_WITH_LEGEND()\r\n\r\ntitle Diagramme de contexte du syst\u00e8me (Niveau 1) pour le syst\u00e8me de banque en ligne\r\n\r\nPersonne(client, \"Client de banque personnelle\", \"Un client poss\u00e9dant un ou plusieurs comptes bancaires personnels.\")\r\nSyst\u00e8me(systeme_banque_en_ligne, \"Syst\u00e8me de banque en ligne\", \"Le nouveau syst\u00e8me pour consulter les comptes et effectuer des paiements.\")\r\nSyst\u00e8me(systeme_banque_centrale, \"Syst\u00e8me bancaire central\", \"Syst\u00e8me central existant g\u00e9rant les donn\u00e9es des clients, les comptes et les transactions.\")\r\nSyst\u00e8me_Ext(systeme_messagerie, \"Syst\u00e8me de messagerie\", \"Service Simple d'Email d'Amazon Web Services (AWS SES) pour envoyer des confirmations.\")\r\n\r\nRel(client, systeme_banque_en_ligne, \"Utilise\")\r\nRel(systeme_banque_en_ligne, systeme_banque_centrale, \"Utilise\")\r\nRel(systeme_banque_en_ligne, systeme_messagerie, \"Envoie un courriel via\")\r\n\r\nLay_D(client, systeme_banque_en_ligne)\r\nLay_D(systeme_banque_en_ligne, systeme_banque_centrale)\r\nLay_U(systeme_messagerie, systeme_banque_en_ligne)\r\n@enduml<\/code><\/pre>\n<pre class=\"lang-mermaid\"><code data-language=\"mermaid\"><\/code><\/pre>\n<p><strong>Raisonnement et valeur<\/strong>: Ce seul diagramme r\u00e9pond imm\u00e9diatement \u00e0 la question \u00ab Qu&#8217;est-ce que nous construisons et avec qui interagit-il ? \u00bb. Il emp\u00eache le d\u00e9bordement de p\u00e9rim\u00e8tre en rendant explicites les d\u00e9pendances externes. Les parties prenantes m\u00e9tier l&#8217;appr\u00e9cient car aucun d\u00e9tail technique n&#8217;est encore pr\u00e9sent.<\/p>\n<h3>\u00c9tape 2 : Diagramme de conteneurs (Niveau 2)<\/h3>\n<p><strong>Objectif<\/strong>: Zoomer sur le syst\u00e8me de banque en ligne et montrer les principaux unit\u00e9s d\u00e9ployables\/ex\u00e9cutables (conteneurs) ainsi que leurs choix technologiques. Public cible : architectes, chefs d\u00e9veloppeurs, \u00e9quipes op\u00e9rationnelles.<\/p>\n<p><strong>Conteneurs \u00e0 l&#8217;int\u00e9rieur du syst\u00e8me de banque en ligne<\/strong>:<\/p>\n<ul>\n<li>\n<p><strong>Application \u00e0 page unique<\/strong>\u00a0(Navigateur web \u2013 JavaScript + Angular) \u2013 Interface utilisateur compl\u00e8te de la banque en ligne.<\/p>\n<\/li>\n<li>\n<p><strong>Application mobile<\/strong>\u00a0(Appareil mobile \u2013 natif iOS\/Android ou React Native) \u2013 Fonctionnalit\u00e9s limit\u00e9es pour une utilisation en d\u00e9placement.<\/p>\n<\/li>\n<li>\n<p><strong>Application d&#8217;API<\/strong>\u00a0(C\u00f4t\u00e9 serveur \u2013 Java + Spring Boot) \u2013 API JSON\/HTTPS utilis\u00e9e par les deux interfaces frontales.<\/p>\n<\/li>\n<li>\n<p><strong>Base de donn\u00e9es<\/strong>\u00a0(Base de donn\u00e9es relationnelle \u2013 PostgreSQL) \u2013 Stocke les donn\u00e9es de session, les pr\u00e9f\u00e9rences utilisateur, les r\u00e9sum\u00e9s de comptes mis en cache (les donn\u00e9es principales restent sur le syst\u00e8me central).<\/p>\n<\/li>\n<\/ul>\n<p><strong>Relations cl\u00e9s<\/strong>\u00a0(m\u00eames syst\u00e8mes externes que le niveau 1) :<\/p>\n<ul>\n<li>\n<p>SPA et application mobile \u2192 appel \u2192 Application d&#8217;API<\/p>\n<\/li>\n<li>\n<p>Application d&#8217;API \u2194 Base de donn\u00e9es<\/p>\n<\/li>\n<li>\n<p>Application d&#8217;API \u2192 Syst\u00e8me bancaire central et syst\u00e8me de messagerie<\/p>\n<\/li>\n<\/ul>\n<p><strong>Diagramme de conteneurs C4 PlantUML<\/strong>:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/uml.planttext.com\/plantuml\/png\/lLN1ZY8t4BqZyGyL52azoW27x2bIf6M0P2TY1tORDCe9LNSNuCHjExORbaIHyW_vm_sIBRiRwDbXjCfbEU5oLRrNhbVLhvr7wwjITZlV29NBgY3OUM_SZyCXNtcH3_R2LIZx1YqMObiESbqEZKGLelhE5r9am_6h_YAOLczdmnAT9ykczLWhZqAH7PZh21OFWwtmkogh7DcStKdv2E0hWuNzuG8a-BQ_OO--CrPuSYUSWlRXpWrHRIk9NmVhTzpZLm4oslcj9VUdRE2wdTdej_bgkLxE5-l9_F4XkJcR7k-NRzQpwI_JXqcmTZjUU4amVWNdJi14uDPY2HjjuPwfMKKUxb3z8TGMqYEZbo5oGTPfbUILyxeaUmkzseBox3nkxdfyEOAJ9nouTD2AW05ARGdCAJ3ZGC0yrvNoRj2B36l4zHtR2hJ7H3IKrbcDidRHWI5U81lGbpi2HGUeVMDfUq67u7I20rG5b1W33HvBgYd0tzqEyE_yFeapo1bJzfFKN-2MO6IC53cFWbO1x5TkVPfROJny3wDQSy7-SoKbdEX3GnzMztptRTtTdtgDH4FfJr5BdGb9QpI6CxsDXu0RyefvEXofmcfHGFAUCFVmm6JsT1DkPwBap0LiAfK7XYY5FyONO6Nv7VMt6bY6RH8sv7XE0Orey4UB-sj5Sxaff-2YxhJsqPhE7uPlbij52Y66SGh8Zf1fLi361bcJAbmREypDC-X9bXJeCKD7d7JI_0q0YrhzwRjPEAMUvUJ0aNDC2qBCRG2rO2njo9BAoTr2ZlcEYJIT1rUL9Lf1JtXSnYgm-UUYn2HdZEVY6mSXFnVUz8DmFfXABcJ3OyLRW8KcW-ay43NFan1lenAzHUKmTgoUX6OEfXzyGfnCNg2duTZ279Nu5rV_I1caP7bDy9EaeZIicCQrja8oUamXdQOtKGwEMn5fQRKHjiGBTBVp7RmdMLjsmhXkXu-jqOyZSVhrLYu-vSKG1H0IFOrgI_fBKMs4imxPQOnIjiDQYZk5jc7-PsZB7Iu2X1uFMU62WClOgqFSpE1rbFpaRZmCUhoIuxfqtbKKr0T3M1b6YS_m1JAVAI0DKrGRUQzXY3-7XkRDyAWh3piHzboYJRq7uEE__y6Ef75m-ZG3MjOThpII53SWPEHvOOKl21xNarRtNjZ3PyyNz_ILHsY2Lfyf-sM8RkSrbyoVkqy0\"\/><\/p>\n<p>@startuml<br \/>\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Container.puml<br \/>\n!include https:\/\/raw.githubusercontent.com\/tupadr3\/plantuml-icon-font-sprites\/master\/devicons\/angular.puml<br \/>\n!include https:\/\/raw.githubusercontent.com\/tupadr3\/plantuml-icon-font-sprites\/master\/devicons\/java.puml<br \/>\n!include https:\/\/raw.githubusercontent.com\/tupadr3\/plantuml-icon-font-sprites\/master\/devicons\/postgresql.puml<\/p>\n<p>LAYOUT_HAUT_BAS()<br \/>\nLAYOUT_AVEC_L\u00c9GENDE()<\/p>\n<p>titre Diagramme de conteneurs C4 pour le syst\u00e8me de banque en ligne<\/p>\n<p>Personne(client, \u00ab Client de banque personnelle \u00bb, \u00ab Un client poss\u00e9dant un ou plusieurs comptes bancaires personnels. \u00bb)<\/p>\n<p>Systeme_Bordure(systeme_banque_en_ligne, \u00ab Syst\u00e8me de banque en ligne \u00bb, \u00ab Le nouveau syst\u00e8me pour consulter les comptes et effectuer des paiements. \u00bb) {<br \/>\nConteneur(spa, \u00ab Application \u00e0 page unique \u00bb, \u00ab JavaScript + Angular \u00bb, \u00ab Interface utilisateur compl\u00e8te de la banque en ligne \u00bb, $sprite=&#8221;angular&#8221;)<br \/>\nConteneur(application_mobile, \u00ab Application mobile \u00bb, \u00ab iOS\/Android (React Native) \u00bb, \u00ab Fonctionnalit\u00e9s limit\u00e9es pour une utilisation en d\u00e9placement \u00bb, $sprite=&#8221;react&#8221;)<br \/>\nConteneur(application_api, \u00ab Application d&#8217;API \u00bb, \u00ab Java + Spring Boot \u00bb, \u00ab API JSON\/HTTPS utilis\u00e9e par les deux interfaces frontales \u00bb, $sprite=&#8221;java&#8221;)<br \/>\nContainerDb(base_de_donnees, \u201cBase de donn\u00e9es\u201d, \u201cPostgreSQL\u201d, \u201cStocke les donn\u00e9es de session, les pr\u00e9f\u00e9rences des utilisateurs et les r\u00e9sum\u00e9s de comptes mis en cache\u201d, $sprite=&#8221;postgresql&#8221;)<br \/>\n}<\/p>\n<p>Systeme(systeme_bancaire_central, \u201cSyst\u00e8me bancaire central\u201d, \u201cMainframe existant g\u00e9rant les donn\u00e9es clients, les comptes et les transactions.\u201d)<br \/>\nSysteme_Ext(systeme_email, \u201cSyst\u00e8me email\u201d, \u201cService simple de messagerie d&#8217;Amazon Web Services (AWS SES) pour envoyer des confirmations.\u201d)<\/p>\n<p>\u2018 Relations<br \/>\nRel(client, spa, \u201cUtilise\u201d, \u201cHTTPS\u201d)<br \/>\nRel(client, application_mobile, \u201cUtilise\u201d, \u201cHTTPS\u201d)<br \/>\nRel(spa, application_api, \u201cAppelle\u201d, \u201cJSON\/HTTPS\u201d)<br \/>\nRel(application_mobile, application_api, \u201cAppelle\u201d, \u201cJSON\/HTTPS\u201d)<br \/>\nRel(application_api, base_de_donnees, \u201cLit et \u00e9crit dans\u201d, \u201cJDBC\/SQL\u201d)<br \/>\nRel(application_api, systeme_bancaire_central, \u201cInterroge \/ Met \u00e0 jour\u201d, \u201cJSON\/HTTPS\u201d)<br \/>\nRel(application_api, systeme_email, \u201cEnvoie un email via\u201d, \u201cHTTPS\u201d)<\/p>\n<p>\u2018 Indications de disposition (facultatif \u2013 aide PlantUML \u00e0 organiser les \u00e9l\u00e9ments mieux)<br \/>\nLay_D(client, systeme_banque_en_ligne)<br \/>\nLay_D(systeme_banque_en_ligne, systeme_bancaire_central)<br \/>\nLay_U(systeme_email, systeme_banque_en_ligne)<\/p>\n<p>@enduml<code data-language=\"mermaid\"><br \/>\n<\/code><\/p>\n<p><strong>Raisonnement<\/strong>: Nous avons choisi un mod\u00e8le moderne SPA + backend API pour le web, une application mobile native pour des performances optimales, et avons gard\u00e9 la base de donn\u00e9es l\u00e9g\u00e8re (la majorit\u00e9 des donn\u00e9es se trouvent dans le mainframe h\u00e9rit\u00e9). Ce diagramme est la source unique de v\u00e9rit\u00e9 pour les d\u00e9cisions technologiques de haut niveau et aide les \u00e9quipes DevOps \u00e0 planifier l&#8217;infrastructure.<\/p>\n<h3>\u00c9tape 3 : Diagramme de composants (Niveau 3)<\/h3>\n<p><strong>Objectif<\/strong>: Zoomer sur un conteneur (g\u00e9n\u00e9ralement le plus complexe \u2013 l&#8217;application API) et montrer ses principaux composants logiques. Public cible : les \u00e9quipes de d\u00e9veloppement.<\/p>\n<p><strong>Exemple : Composants \u00e0 l&#8217;int\u00e9rieur de l&#8217;application API<\/strong>:<\/p>\n<ul>\n<li>\n<p>Contr\u00f4leur des comptes (Spring MVC)<\/p>\n<\/li>\n<li>\n<p>Contr\u00f4leur d&#8217;authentification<\/p>\n<\/li>\n<li>\n<p>Contr\u00f4leur de r\u00e9initialisation du mot de passe<\/p>\n<\/li>\n<li>\n<p>Composant de s\u00e9curit\u00e9 (g\u00e8re l&#8217;authentification, JWT, etc.)<\/p>\n<\/li>\n<li>\n<p>Composant de gestion des comptes (orche\u65af\u7279re les appels au syst\u00e8me bancaire central)<\/p>\n<\/li>\n<li>\n<p>Composant de notification par email<\/p>\n<\/li>\n<\/ul>\n<p><strong>Diagramme de composants PlantUML C4<\/strong>\u00a0(focalis\u00e9 sur l&#8217;application API) :<\/p>\n<p id=\"fzJuCAx\"><img alt=\"\" class=\"alignnone size-full wp-image-15962\" decoding=\"async\" height=\"916\" loading=\"lazy\" sizes=\"auto, (max-width: 1684px) 100vw, 1684px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62.png 1684w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62-300x163.png 300w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62-1024x557.png 1024w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62-768x418.png 768w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8eafc11b62-1536x835.png 1536w\" width=\"1684\"\/><\/p>\n<pre class=\"relative p-4 text-sm overflow-auto h-full box-border !bg-gray-900 text-gray-100\"><code class=\"text-gray-100\">@startuml\r\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Component.puml\r\n\r\nLAYOUT_WITH_LEGEND()\r\n\r\ntitle Diagramme de composants pour le syst\u00e8me de banque en ligne - application API\r\n\r\nContainer(spa, \"Application \u00e0 page unique\", \"javascript et angular\", \"Fournit toutes les fonctionnalit\u00e9s de banque en ligne aux clients via leur navigateur web.\")\r\nContainer(ma, \"Application mobile\", \"Xamarin\", \"Fournit un sous-ensemble limit\u00e9 des fonctionnalit\u00e9s de banque en ligne aux clients via leur appareil mobile.\")\r\nContainerDb(db, \"Base de donn\u00e9es\", \"Sch\u00e9ma de base de donn\u00e9es relationnelle\", \"Stocke les informations d'inscription des utilisateurs, les identifiants d'authentification hach\u00e9s, les journaux d'acc\u00e8s, etc.\")\r\nSystem_Ext(mbs, \"Syst\u00e8me bancaire principal\", \"Stocke toutes les informations essentielles sur les clients, les comptes, les transactions, etc.\")\r\n\r\nContainer_Boundary(api, \"Application API\") {\r\n    Component(accounts, \"Contr\u00f4leur des comptes\", \"Spring MVC\", \"Fournit les r\u00e9sum\u00e9s et soldes des comptes aux clients.\")\r\n    Component(auth, \"Contr\u00f4leur d'authentification\", \"Spring MVC\", \"G\u00e8re la connexion des utilisateurs, la gestion des sessions et la g\u00e9n\u00e9ration des jetons.\")\r\n    Component(reset, \"Contr\u00f4leur de r\u00e9initialisation du mot de passe\", \"Spring MVC\", \"Permet aux utilisateurs de r\u00e9initialiser leur mot de passe par courrier \u00e9lectronique.\")\r\n    Component(security, \"Composant de s\u00e9curit\u00e9\", \"Spring Bean\", \"G\u00e8re l'authentification, la g\u00e9n\u00e9ration des jetons JWT et le hachage des mots de passe.\")\r\n    Component(accountmgmt, \"Composant de gestion des comptes\", \"Spring Bean\", \"Orchestre les appels au syst\u00e8me bancaire principal pour les op\u00e9rations sur les comptes.\")\r\n    Component(email, \"Composant de notification par courrier \u00e9lectronique\", \"Spring Bean\", \"Envoie des courriels de r\u00e9initialisation de mot de passe et de v\u00e9rification de compte via SMTP.\")\r\n\r\n    Rel(accounts, security, \"Utilise\")\r\n    Rel(auth, security, \"Utilise\")\r\n    Rel(reset, security, \"Utilise\")\r\n    Rel(accountmgmt, mbs, \"Utilise\", \"XML\/HTTPS\")\r\n    Rel(email, db, \"Lit\", \"JDBC\")\r\n}\r\n\r\nRel(spa, accounts, \"Utilise\", \"JSON\/HTTPS\")\r\nRel(spa, auth, \"Utilise\", \"JSON\/HTTPS\")\r\nRel(spa, reset, \"Utilise\", \"JSON\/HTTPS\")\r\nRel(ma, accounts, \"Utilise\", \"JSON\/HTTPS\")\r\nRel(ma, auth, \"Utilise\", \"JSON\/HTTPS\")\r\nRel(ma, reset, \"Utilise\", \"JSON\/HTTPS\")\r\n@enduml<\/code><\/pre>\n<p><code data-language=\"mermaid\"><br \/>\n<\/code><\/p>\n<p><strong>Raisonnement<\/strong>: Ce niveau montre comment les responsabilit\u00e9s sont r\u00e9parties (s\u00e9paration des pr\u00e9occupations) et rend l&#8217;int\u00e9gration des nouveaux d\u00e9veloppeurs beaucoup plus rapide. Vous ne dessinez des diagrammes de composants que pour les conteneurs suffisamment complexes pour le justifier.<\/p>\n<h3>\u00c9tape 4 : Diagramme de code (niveau 4) \u2013 facultatif<\/h3>\n<p><strong>Objectif<\/strong>: Montrer la structure interne d&#8217;un composant unique (diagramme de classes, diagramme de s\u00e9quence, etc.). Public cible : les d\u00e9veloppeurs travaillant sur ce code.<\/p>\n<p>Exemple pour le\u00a0<strong>Contr\u00f4leur d&#8217;authentification<\/strong>composant \u2013 un diagramme de classes UML simple en PlantUML :<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/uml.planttext.com\/plantuml\/png\/XL91QiCm4BmR_0VXNX8AWRIb3Js4ECOvz5HA-m0XRHnXUJUiv8HGylTQTkea3gM2rM5cPtPMQE6yP5zNDexYo9K6jv9b9RxZI0Yc6hKYHc0n2q3AJFkCBB6uUsfFZwu8_Gsp9DR0Dt2ep4hdkZ63lcdwyFYIdmYfogADSIBpMPwkdZloOkHPSuoZOrX5jVv9MliDe3TAUaEODGecQu6JRlIzfSBWI37eq2Mj6xSmmvh1RJwf11oDhotVzhx5tvbsHf-j2cZUINheHBK3xhnsqXhTupxS0yUlflS3jkIC9pxy-gqDwkKXS2Whw5FyjP6OJEPYc4syYgH9uf9_TDS9BbGBGDryZXy0\"\/><\/p>\n<p>@startuml<br \/>\ndiagrammeDeClasses<\/p>\n<p>skinparam {<br \/>\narrondirCoin 8<br \/>\nCouleurFl\u00e8che #444444<br \/>\nCouleurPoliceFl\u00e8che #444444<br \/>\nCouleurBordure #444444<\/p>\n<p>Classe {<br \/>\nCouleurBordure #1A237E<br \/>\nCouleurFond #E8EAF6<br \/>\nCouleurPolice #1A237E<br \/>\n}<br \/>\n}<\/p>\n<p>classe \u201cContr\u00f4leurD&#8217;authentification\u201d {<br \/>\n+connexion(identifiants)<br \/>\n+r\u00e9cup\u00e9rerJeton()<br \/>\n}<\/p>\n<p>classe \u201cFournisseurDeJetonJwt\u201d {<br \/>\n+g\u00e9n\u00e9rerJeton(utilisateur)<br \/>+validateToken(token)<br \/>\n}<\/p>\n<p>class \u201cUserRepository\u201d {<br \/>\n+findByUsername()<br \/>\n}<\/p>\n<p>AuthenticationController ..&gt; JwtTokenProvider : \u201cutilise\u201d<br \/>\nAuthenticationController ..&gt; UserRepository : \u201cutilise\u201d<br \/>\n@enduml<\/p>\n<p><code data-language=\"mermaid\"><br \/>\n<\/code>Dans les projets r\u00e9els, vous passez souvent le niveau 4 et pointez vers le code source r\u00e9el au lieu de cela.<\/p>\n<h3>\u00c9tape 5 : Diagrammes d&#8217;accompagnement<\/h3>\n<p><strong>Diagramme dynamique<\/strong>\u00a0(exemple : flux \u00ab Visualiser le r\u00e9sum\u00e9 du compte \u00bb)<\/p>\n<p><img alt=\"\" class=\"alignnone size-full wp-image-15964\" decoding=\"async\" height=\"823\" loading=\"lazy\" sizes=\"auto, (max-width: 533px) 100vw, 533px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8ec710652f.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8ec710652f.png 533w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8ec710652f-194x300.png 194w\" width=\"533\"\/><\/p>\n<p>@startuml<br \/>\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Deployment.puml<\/p>\n<p>title Diagramme dynamique pour Visualiser le r\u00e9sum\u00e9 du compte<\/p>\n<p>Person(customer, \u201cClient de banque personnelle\u201d) {<br \/>\nContainer(spa, \u201cApplication \u00e0 page unique\u201d) {<br \/>\nContainer(api, \u201cApplication API\u201d) {<br \/>\nContainerDb(db, \u201cBase de donn\u00e9es\u201d) {<br \/>\nSystem_Ext(coreBanking, \u201cSyst\u00e8me bancaire central\u201d)<br \/>\n}<br \/>\n}<br \/>\n}<br \/>\n}<\/p>\n<p>Rel(customer, spa, \u201c1. Clique sur \u2018Comptes\u2019\u201d, \u201c\u201d)<br \/>\nRel(spa, api, \u201c2. GET \/accounts\u201d, \u201cJSON\/HTTPS\u201d)<br \/>\nRel(api, db, \u201c3. Lire le r\u00e9sum\u00e9 mis en cache\u201d, \u201c\u201d)<br \/>\nRel(api, coreBanking, \u201c4. R\u00e9cup\u00e9rer les donn\u00e9es les plus r\u00e9centes\u201d, \u201c\u201d)<br \/>\nRel(api, spa, \u201c5. Retourner JSON\u201d, \u201c\u201d)<\/p>\n<p>MONTRER_LEGEND()<br \/>\n@enduml<code data-language=\"mermaid\"><br \/>\n<\/code><\/p>\n<p><strong>Diagramme de d\u00e9ploiement<\/strong>\u00a0(mappage physique de haut niveau)\u00a0:<\/p>\n<p id=\"EQNbTiP\"><img alt=\"\" class=\"alignnone size-full wp-image-15965\" decoding=\"async\" height=\"562\" loading=\"lazy\" sizes=\"auto, (max-width: 714px) 100vw, 714px\" src=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8edea159ca.png\" srcset=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8edea159ca.png 714w, https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8edea159ca-300x236.png 300w\" width=\"714\"\/><\/p>\n<p>@startuml<br \/>\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Deployment.puml<\/p>\n<p>titre Diagramme de d\u00e9ploiement pour le syst\u00e8me bancaire en ligne<\/p>\n<p>Noeud_Deploiement(aws, \u00ab\u00a0Amazon Web Services\u00a0\u00bb, \u00ab\u00a0Cloud\u00a0\u00bb) {<br \/>\nNoeud_Deploiement(ec2, \u00ab\u00a0Groupe d\u2019auto-\u00e9chelonnement EC2\u00a0\u00bb, \u00ab\u00a0Linux\u00a0\u00bb) {<br \/>\nConteneur(api, \u00ab\u00a0Application API\u00a0\u00bb, \u00ab\u00a0Java Spring Boot\u00a0\u00bb)<br \/>\n}<br \/>\nNoeud_Deploiement(rds, \u00ab\u00a0RDS\u00a0\u00bb, \u00ab\u00a0PostgreSQL\u00a0\u00bb) {<br \/>\nConteneurBaseDeDonn\u00e9es(db, \u00ab\u00a0Base de donn\u00e9es\u00a0\u00bb)<br \/>\n}<br \/>\n}<\/p>\n<p>Noeud_Deploiement(clientDevice, \u00ab\u00a0Appareil du client\u00a0\u00bb, \u00ab\u00a0Web\/Mobile\u00a0\u00bb) {<br \/>\nConteneur(spa, \u00ab\u00a0Application \u00e0 page unique\u00a0\u00bb)<br \/>\nConteneur(mobile, \u00ab\u00a0Application mobile\u00a0\u00bb)<br \/>\n}<\/p>\n<p>Syst\u00e8me_Ext(coreBanking, \u00ab\u00a0Syst\u00e8me bancaire central (mainframe local)\u00a0\u00bb)<\/p>\n<p>Rel(spa, api, \u00ab\u00a0Effectue des appels API vers\u00a0\u00bb, \u00ab\u00a0HTTPS\u00a0\u00bb)<br \/>\nRel(mobile, api, \u00ab\u00a0Effectue des appels API vers\u00a0\u00bb, \u00ab\u00a0HTTPS\u00a0\u00bb)<br \/>\nRel_U(api, spa, \u00ab\u00a0Fournit au navigateur web du client\u00a0\u00bb)<br \/>\nRel_U(api, mobile, \u00ab\u00a0Fournit \u00e0 l\u2019application mobile\u00a0\u00bb)<\/p>\n<p>MONTRER_L\u00c9GENDE()<br \/>\n@enduml<\/p>\n<pre class=\"lang-mermaid\"><code data-language=\"mermaid\"><\/code><\/pre>\n<h3>Comment utiliser cette \u00e9tude de cas en pratique<\/h3>\n<ol>\n<li>\n<p>Commencez par un atelier\u00a0: dessinez le contexte sur un tableau blanc.<\/p>\n<\/li>\n<li>\n<p>It\u00e9rez vers les conteneurs et les composants en utilisant PlantUML C4.<\/p>\n<\/li>\n<li>\n<p>Gardez les diagrammes dans le d\u00e9p\u00f4t de code (en tant que code\u00a0!) afin qu\u2019ils restent \u00e0 jour.<\/p>\n<\/li>\n<li>\n<p>G\u00e9n\u00e9rez automatiquement une documentation vivante.<\/p>\n<\/li>\n<\/ol>\n<p>Cet exemple exact du syst\u00e8me de banque en ligne est la r\u00e9f\u00e9rence officielle cr\u00e9\u00e9e par Simon Brown et utilis\u00e9 par des milliers d&#8217;organisations dans le monde entier. En suivant ces \u00e9tapes, vous disposez d\u00e9sormais d&#8217;une description compl\u00e8te et pr\u00eate \u00e0 \u00eatre mise en production de l&#8217;architecture, compr\u00e9hensible par n&#8217;importe qui \u2013 du PDG au nouveau d\u00e9veloppeur junior \u2013 au bon niveau de d\u00e9tail.<\/p>\n<h3>Articles sur les diagrammes C4<\/h3>\n<ul>\n<li><a href=\"https:\/\/www.archimetric.com\/the-ultimate-guide-to-c4-model-visualization-with-visual-paradigms-ai-tools\/\"><strong>Guide ultime pour la visualisation du mod\u00e8le C4 \u00e0 l&#8217;aide des outils d&#8217;IA de Visual Paradigm<\/strong><\/a>: Ce guide explique comment tirer parti des outils aliment\u00e9s par l&#8217;IA pour automatiser et am\u00e9liorer la visualisation du mod\u00e8le C4 afin de concevoir plus rapidement des architectures logicielles.<\/li>\n<li><a href=\"https:\/\/www.archimetric.com\/leveraging-visual-paradigms-ai-c4-studio-a-comprehensive-guide-to-streamlined-architectural-documentation\/\"><strong>Utilisation de l&#8217;AI C4 Studio de Visual Paradigm pour une documentation d&#8217;architecture simplifi\u00e9e<\/strong><\/a>: Cet article d\u00e9taille l&#8217;utilisation d&#8217;un studio am\u00e9lior\u00e9 par l&#8217;IA pour cr\u00e9er une documentation d&#8217;architecture logicielle claire, \u00e9volutif et maintenable.<\/li>\n<li><a href=\"https:\/\/blog.visual-paradigm.com\/the-ultimate-guide-to-c4-plantuml-studio-revolutionizing-software-architecture-design\/\"><strong>Le guide ultime pour C4-PlantUML Studio : r\u00e9volutionner la conception d&#8217;architecture logicielle<\/strong><\/a>: Cette ressource explore la combinaison de l&#8217;automatisation pilot\u00e9e par l&#8217;IA, de la clart\u00e9 du mod\u00e8le C4 et de la flexibilit\u00e9 de PlantUML en un outil puissant unique.<\/li>\n<li><a href=\"https:\/\/www.cybermedian.com\/%F0%9F%A7%A0-a-comprehensive-guide-to-visual-paradigms-ai-powered-c4-plantuml-studio\/\"><strong>Un guide complet sur l&#8217;AI C4 PlantUML Studio de Visual Paradigm<\/strong><\/a>: Ce guide d\u00e9crit un outil sp\u00e9cialement con\u00e7u, lanc\u00e9 \u00e0 la fin 2025, qui transforme les invites en langage naturel en diagrammes C4 multicouches.<\/li>\n<li><a href=\"https:\/\/www.visual-paradigm.com\/features\/c4-plantuml-studio\/\"><strong>Studio C4-PlantUML | G\u00e9n\u00e9rateur de diagrammes C4 aliment\u00e9 par l&#8217;IA<\/strong><\/a>: Cette vue d&#8217;ensemble des fonctionnalit\u00e9s met en \u00e9vidence un outil pilot\u00e9 par l&#8217;IA con\u00e7u pour g\u00e9n\u00e9rer des diagrammes d&#8217;architecture logicielle C4 \u00e0 partir de simples descriptions textuelles.<\/li>\n<li><a href=\"https:\/\/www.archimetric.com\/comprehensive-tutorial-generating-and-modifying-c4-component-diagrams-with-visual-paradigm-ai-chatbot\/\"><strong>G\u00e9n\u00e9ration et modification de diagrammes de composants C4 avec le chatbot d&#8217;IA de Visual Paradigm<\/strong><\/a>: Ce tutoriel montre comment utiliser un chatbot aliment\u00e9 par l&#8217;IA pour cr\u00e9er et affiner it\u00e9rativement l&#8217;architecture au niveau des composants pour des syst\u00e8mes complexes.<\/li>\n<li><a href=\"https:\/\/ai.visual-paradigm.com\/tool\/ai-powered-c4-plantuml-studio\/about-the-diagrams\/\"><strong>G\u00e9n\u00e9rateur de diagrammes C4 aliment\u00e9 par l&#8217;IA : niveaux fondamentaux et vues d&#8217;accompagnement<\/strong><\/a>: Cette page explique comment le g\u00e9n\u00e9rateur d&#8217;IA prend en charge les quatre niveaux fondamentaux du mod\u00e8le C4 \u2013 Contexte, Conteneur, Composant et D\u00e9ploiement \u2013 afin de fournir une documentation compl\u00e8te.<\/li>\n<li><a href=\"https:\/\/updates.visual-paradigm.com\/releases\/ai-diagram-generator-complete-c4-model\/\"><strong>G\u00e9n\u00e9rateur de diagrammes d&#8217;IA : version avec prise en charge compl\u00e8te du mod\u00e8le C4<\/strong><\/a>: Cette mise \u00e0 jour d\u00e9taille l&#8217;int\u00e9gration de fonctionnalit\u00e9s aliment\u00e9es par l&#8217;IA pour la cr\u00e9ation automatis\u00e9e de diagrammes hi\u00e9rarchiques du mod\u00e8le C4.<\/li>\n<li><a href=\"https:\/\/www.ez-knowledge.com\/beyond-the-code-how-ai-automates-c4-model-diagrams-for-devops-and-cloud-teams\/\"><strong>G\u00e9n\u00e9rateur d&#8217;IA du mod\u00e8le C4 : automatisation de tout le cycle de mod\u00e9lisation<\/strong><\/a>: Cette ressource met en \u00e9vidence comment un chatbot d&#8217;IA sp\u00e9cialis\u00e9 utilise des invites conversationnelles pour assurer la coh\u00e9rence dans la documentation d&#8217;architecture pour les \u00e9quipes DevOps.<\/li>\n<li><a href=\"https:\/\/www.archimetric.com\/comprehensive-review-generic-ai-chatbots-vs-visual-paradigms-c4-tools\/\"><strong>Revue compl\u00e8te : chatbots d&#8217;IA g\u00e9n\u00e9riques vs. outils C4 de Visual Paradigm<\/strong><\/a>: Cette comparaison explique pourquoi des outils sp\u00e9cialis\u00e9s comme le Studio C4 PlantUML offrent des r\u00e9sultats plus structur\u00e9s et de qualit\u00e9 professionnelle que les mod\u00e8les linguistiques g\u00e9n\u00e9raux.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Le\u00a0mod\u00e8le C4, cr\u00e9\u00e9 par Simon Brown, est une m\u00e9thode simple, hi\u00e9rarchique et conviviale pour les d\u00e9veloppeurs afin de visualiser l&#8217;architecture<\/p>\n","protected":false},"author":11,"featured_media":12347,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","footnotes":""},"categories":[109],"tags":[],"class_list":["post-12346","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-c4-model"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Une \u00e9tude de cas compl\u00e8te et \u00e9tape par \u00e9tape : application du mod\u00e8le C4 au syst\u00e8me de banque en ligne (Big Bank plc) - Cyberm\u00e9diane<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Une \u00e9tude de cas compl\u00e8te et \u00e9tape par \u00e9tape : application du mod\u00e8le C4 au syst\u00e8me de banque en ligne (Big Bank plc) - Cyberm\u00e9diane\" \/>\n<meta property=\"og:description\" content=\"Le\u00a0mod\u00e8le C4, cr\u00e9\u00e9 par Simon Brown, est une m\u00e9thode simple, hi\u00e9rarchique et conviviale pour les d\u00e9veloppeurs afin de visualiser l&#8217;architecture\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\" \/>\n<meta property=\"og:site_name\" content=\"Cyberm\u00e9diane\" \/>\n<meta property=\"article:published_time\" content=\"2026-03-05T02:48:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png\" \/><meta property=\"og:image\" content=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png\" \/>\n\t<meta property=\"og:image:width\" content=\"527\" \/>\n\t<meta property=\"og:image:height\" content=\"739\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"curtis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"curtis\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\"},\"author\":{\"name\":\"curtis\",\"@id\":\"https:\/\/www.cybermedian.com\/fr\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\"},\"headline\":\"Une \u00e9tude de cas compl\u00e8te et \u00e9tape par \u00e9tape : application du mod\u00e8le C4 au syst\u00e8me de banque en ligne (Big Bank plc)\",\"datePublished\":\"2026-03-05T02:48:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\"},\"wordCount\":2280,\"image\":{\"@id\":\"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.cybermedian.com\/fr\/wp-content\/uploads\/sites\/10\/2026\/03\/img_69a8e7e9e8ab5.png\",\"articleSection\":[\"C4 Model\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\",\"url\":\"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\",\"name\":\"Une \u00e9tude de cas compl\u00e8te et \u00e9tape par \u00e9tape : application du mod\u00e8le C4 au syst\u00e8me de banque en ligne (Big Bank plc) - Cyberm\u00e9diane\",\"isPartOf\":{\"@id\":\"https:\/\/www.cybermedian.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.cybermedian.com\/fr\/wp-content\/uploads\/sites\/10\/2026\/03\/img_69a8e7e9e8ab5.png\",\"datePublished\":\"2026-03-05T02:48:15+00:00\",\"author\":{\"@id\":\"https:\/\/www.cybermedian.com\/fr\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage\",\"url\":\"https:\/\/www.cybermedian.com\/fr\/wp-content\/uploads\/sites\/10\/2026\/03\/img_69a8e7e9e8ab5.png\",\"contentUrl\":\"https:\/\/www.cybermedian.com\/fr\/wp-content\/uploads\/sites\/10\/2026\/03\/img_69a8e7e9e8ab5.png\",\"width\":527,\"height\":739},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.cybermedian.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Une \u00e9tude de cas compl\u00e8te et \u00e9tape par \u00e9tape : application du mod\u00e8le C4 au syst\u00e8me de banque en ligne (Big Bank plc)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.cybermedian.com\/fr\/#website\",\"url\":\"https:\/\/www.cybermedian.com\/fr\/\",\"name\":\"Cyberm\u00e9diane\",\"description\":\"Apprendre une nouvelle chose tous les jours\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.cybermedian.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.cybermedian.com\/fr\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\",\"name\":\"curtis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/www.cybermedian.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g\",\"caption\":\"curtis\"},\"url\":\"https:\/\/www.cybermedian.com\/fr\/author\/curtis\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Une \u00e9tude de cas compl\u00e8te et \u00e9tape par \u00e9tape : application du mod\u00e8le C4 au syst\u00e8me de banque en ligne (Big Bank plc) - Cyberm\u00e9diane","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","og_locale":"fr_FR","og_type":"article","og_title":"Une \u00e9tude de cas compl\u00e8te et \u00e9tape par \u00e9tape : application du mod\u00e8le C4 au syst\u00e8me de banque en ligne (Big Bank plc) - Cyberm\u00e9diane","og_description":"Le\u00a0mod\u00e8le C4, cr\u00e9\u00e9 par Simon Brown, est une m\u00e9thode simple, hi\u00e9rarchique et conviviale pour les d\u00e9veloppeurs afin de visualiser l&#8217;architecture","og_url":"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","og_site_name":"Cyberm\u00e9diane","article_published_time":"2026-03-05T02:48:15+00:00","og_image":[{"url":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png","type":"","width":"","height":""},{"width":527,"height":739,"url":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png","type":"image\/png"}],"author":"curtis","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.cybermedian.com\/wp-content\/uploads\/2026\/03\/img_69a8e7e9e8ab5.png","twitter_misc":{"\u00c9crit par":"curtis","Dur\u00e9e de lecture estim\u00e9e":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#article","isPartOf":{"@id":"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/"},"author":{"name":"curtis","@id":"https:\/\/www.cybermedian.com\/fr\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d"},"headline":"Une \u00e9tude de cas compl\u00e8te et \u00e9tape par \u00e9tape : application du mod\u00e8le C4 au syst\u00e8me de banque en ligne (Big Bank plc)","datePublished":"2026-03-05T02:48:15+00:00","mainEntityOfPage":{"@id":"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/"},"wordCount":2280,"image":{"@id":"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cybermedian.com\/fr\/wp-content\/uploads\/sites\/10\/2026\/03\/img_69a8e7e9e8ab5.png","articleSection":["C4 Model"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","url":"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","name":"Une \u00e9tude de cas compl\u00e8te et \u00e9tape par \u00e9tape : application du mod\u00e8le C4 au syst\u00e8me de banque en ligne (Big Bank plc) - Cyberm\u00e9diane","isPartOf":{"@id":"https:\/\/www.cybermedian.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage"},"image":{"@id":"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage"},"thumbnailUrl":"https:\/\/www.cybermedian.com\/fr\/wp-content\/uploads\/sites\/10\/2026\/03\/img_69a8e7e9e8ab5.png","datePublished":"2026-03-05T02:48:15+00:00","author":{"@id":"https:\/\/www.cybermedian.com\/fr\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d"},"breadcrumb":{"@id":"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#primaryimage","url":"https:\/\/www.cybermedian.com\/fr\/wp-content\/uploads\/sites\/10\/2026\/03\/img_69a8e7e9e8ab5.png","contentUrl":"https:\/\/www.cybermedian.com\/fr\/wp-content\/uploads\/sites\/10\/2026\/03\/img_69a8e7e9e8ab5.png","width":527,"height":739},{"@type":"BreadcrumbList","@id":"https:\/\/www.cybermedian.com\/fr\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.cybermedian.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Une \u00e9tude de cas compl\u00e8te et \u00e9tape par \u00e9tape : application du mod\u00e8le C4 au syst\u00e8me de banque en ligne (Big Bank plc)"}]},{"@type":"WebSite","@id":"https:\/\/www.cybermedian.com\/fr\/#website","url":"https:\/\/www.cybermedian.com\/fr\/","name":"Cyberm\u00e9diane","description":"Apprendre une nouvelle chose tous les jours","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.cybermedian.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/www.cybermedian.com\/fr\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d","name":"curtis","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.cybermedian.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6910084565fcc601ec03c6693bb8ea480c1e52ccaa0efb299eb038bb6a1edc87?s=96&d=mm&r=g","caption":"curtis"},"url":"https:\/\/www.cybermedian.com\/fr\/author\/curtis\/"}]}},"_links":{"self":[{"href":"https:\/\/www.cybermedian.com\/fr\/wp-json\/wp\/v2\/posts\/12346","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cybermedian.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cybermedian.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/fr\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/fr\/wp-json\/wp\/v2\/comments?post=12346"}],"version-history":[{"count":0,"href":"https:\/\/www.cybermedian.com\/fr\/wp-json\/wp\/v2\/posts\/12346\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/fr\/wp-json\/wp\/v2\/media\/12347"}],"wp:attachment":[{"href":"https:\/\/www.cybermedian.com\/fr\/wp-json\/wp\/v2\/media?parent=12346"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cybermedian.com\/fr\/wp-json\/wp\/v2\/categories?post=12346"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cybermedian.com\/fr\/wp-json\/wp\/v2\/tags?post=12346"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}