{"id":12011,"date":"2026-03-05T10:48:15","date_gmt":"2026-03-05T02:48:15","guid":{"rendered":"https:\/\/www.cybermedian.com\/pl\/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\/pl\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","title":{"rendered":"Kompleksna studium przypadku krok po kroku: stosowanie modelu C4 do systemu bankowo\u015bci internetowej (Big Bank plc)"},"content":{"rendered":"<p>The\u00a0<strong>Model C4<\/strong>, stworzony przez Simona Browna, to prosty, hierarchiczny i przyjazny dla programist\u00f3w spos\u00f3b wizualizacji architektury oprogramowania. Wykorzystuje cztery poziomy abstrakcji (st\u0105d \u201eC4\u201d), aby opisa\u0107 system od najwy\u017cszego poziomu przegl\u0105du po szczeg\u00f3\u0142owe informacje na poziomie kodu:<\/p>\n<ol>\n<li>\n<p><strong>Kontekst systemu<\/strong>\u00a0(Poziom 1) \u2013 Wielka ca\u0142o\u015b\u0107: system i jego u\u017cytkownicy\/externalne zale\u017cno\u015bci.<\/p>\n<\/li>\n<li>\n<p><strong>Pojemniki<\/strong>\u00a0(Poziom 2) \u2013 Wysokie poziomy wybor\u00f3w technologicznych i odpowiedzialno\u015bci.<\/p>\n<\/li>\n<li>\n<p><strong>Sk\u0142adniki<\/strong>\u00a0(Poziom 3) \u2013 G\u0142\u00f3wne logiczne bloki budowlane wewn\u0105trz pojemnika.<\/p>\n<\/li>\n<li>\n<p><strong>Kod<\/strong>\u00a0(Poziom 4) \u2013 Opcjonalne szczeg\u00f3\u0142y na poziomie klas lub struktury kodu.<\/p>\n<\/li>\n<\/ol>\n<p>Wspierany jest przez trzy dodatkowe typy diagram\u00f3w:<\/p>\n<ul>\n<li>\n<p><strong>Kontekst systemu<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>Dynamiczny<\/strong><\/p>\n<\/li>\n<li>\n<p><strong>Wdro\u017cenie<\/strong><\/p>\n<\/li>\n<\/ul>\n<p class=\"\">Model jest niezale\u017cny od notacji (mo\u017cna u\u017cywa\u0107 dowolnego narz\u0119dzia do tworzenia diagram\u00f3w) i skupia si\u0119 na przejrzysto\u015bci, sp\u00f3jno\u015bci oraz odpowiednich szczeg\u00f3\u0142ach dla odbiorcy. Jest szeroko stosowany, poniewa\u017c unika diagram\u00f3w architektury typu \u201edu\u017cy k\u0142acz z b\u0142ota\u201d i mo\u017ce by\u0107 skalowany od szkic\u00f3w na tablicy do automatycznej dokumentacji.<\/p>\n<p>W tym\u00a0<strong>celowym studium przypadku<\/strong>, korzystamy z kanonicznego przyk\u0142adu z oficjalnej strony C4:\u00a0<strong>System bankowo\u015bci internetowej<\/strong>\u00a0dla fikcyjnej \u201eBig Bank plc\u201d. Celem biznesowym jest umo\u017cliwienie osobom prywatnym przegl\u0105danie swoich kont i dokonywanie p\u0142atno\u015bci online, jednocze\u015bnie integruj\u0105c si\u0119 z istniej\u0105cymi systemami j\u0105dra banku.<\/p>\n<p>Przejdziemy przez\u00a0<strong>ka\u017cdy poziom<\/strong>\u00a0z:<\/p>\n<ul>\n<li>\n<p>Cel i odbiorca<\/p>\n<\/li>\n<li>\n<p>G\u0142\u00f3wne elementy + odpowiedzialno\u015bci<\/p>\n<\/li>\n<li>\n<p>Zwi\u0105zki<\/p>\n<\/li>\n<li>\n<p>Gotowy do u\u017cycia\u00a0<strong>diagram C4 PlantUML<\/strong>(PlantUML obs\u0142uguje sk\u0142adni\u0119 C4 i wygl\u0105da pi\u0119knie w wi\u0119kszo\u015bci przegl\u0105darek Markdown)<\/p>\n<\/li>\n<li>\n<p>Podstawa i kluczowe decyzje<\/p>\n<\/li>\n<li>\n<p>Jak diagram pomaga stakeholderom<\/p>\n<\/li>\n<\/ul>\n<h3>Krok 1: Zdefiniuj zakres i stw\u00f3rz diagram kontekstu systemu (poziom 1)<\/h3>\n<p><strong>Cel<\/strong>: Poka\u017c, jak nowy system Internet Banking pasuje do \u015bwiata. Odbiorcy: stakeholderzy biznesowi, osoby niein\u017cynierskie, nowi cz\u0142onkowie zespo\u0142u.<\/p>\n<p><strong>Elementy<\/strong>\u00a0(z oficjalnego przyk\u0142adu):<\/p>\n<ul>\n<li>\n<p><strong>Klient prywatny bankowo\u015bci internetowej<\/strong>\u00a0(Person) \u2013 Klient z jednym lub wi\u0119ksz\u0105 liczb\u0105 kont bankowych osobistych.<\/p>\n<\/li>\n<li>\n<p><strong>System bankowo\u015bci internetowej<\/strong>\u00a0(System oprogramowania) \u2013 Nowy system, kt\u00f3ry budujemy.<\/p>\n<\/li>\n<li>\n<p><strong>System bankowo\u015bci g\u0142\u00f3wnej<\/strong>\u00a0(System oprogramowania, istniej\u0105cy) \u2013 Mainframe obs\u0142uguj\u0105cy dane klient\u00f3w, konta i transakcje.<\/p>\n<\/li>\n<li>\n<p><strong>System poczty e-mail<\/strong>\u00a0(System oprogramowania, zewn\u0119trzny) \u2013 Us\u0142uga Amazon Web Services Simple Email Service (AWS SES) do wysy\u0142ania potwierdze\u0144.<\/p>\n<\/li>\n<\/ul>\n<p><strong>Zwi\u0105zki<\/strong>:<\/p>\n<ul>\n<li>\n<p>Klient \u2192 u\u017cywa \u2192 System bankowo\u015bci internetowej (do przegl\u0105dania kont i dokonywania p\u0142atno\u015bci)<\/p>\n<\/li>\n<li>\n<p>System bankowo\u015bci internetowej \u2192 u\u017cywa \u2192 System bankowo\u015bci g\u0142\u00f3wnej (dla danych kont i p\u0142atno\u015bci)<\/p>\n<\/li>\n<li>\n<p>System bankowo\u015bci internetowej \u2192 wysy\u0142a e-mail przez \u2192 System poczty e-mail<\/p>\n<\/li>\n<\/ul>\n<p>Oto\u00a0<strong>Diagram kontekstowy 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 Diagram kontekstowy systemu (poziom 1) dla systemu bankowo\u015bci internetowej\r\n\r\nPerson(customer, \"Klient prywatny bankowo\u015bci internetowej\", \"Klient z jednym lub wi\u0119ksz\u0105 liczb\u0105 kont bankowych osobistych.\")\r\nSystem(internet_banking_system, \"System bankowo\u015bci internetowej\", \"Nowy system do przegl\u0105dania kont i dokonywania p\u0142atno\u015bci.\")\r\nSystem(core_banking_system, \"System bankowo\u015bci g\u0142\u00f3wnej\", \"Istniej\u0105cy mainframe obs\u0142uguj\u0105cy dane klient\u00f3w, konta i transakcje.\")\r\nSystem_Ext(email_system, \"System poczty e-mail\", \"Us\u0142uga Amazon Web Services Simple Email Service (AWS SES) do wysy\u0142ania potwierdze\u0144.\")\r\n\r\nRel(customer, internet_banking_system, \"U\u017cywa\")\r\nRel(internet_banking_system, core_banking_system, \"U\u017cywa\")\r\nRel(internet_banking_system, email_system, \"Wysy\u0142a e-mail przez\")\r\n\r\nLay_D(customer, internet_banking_system)\r\nLay_D(internet_banking_system, core_banking_system)\r\nLay_U(email_system, internet_banking_system)\r\n@enduml<\/code><\/pre>\n<pre class=\"lang-mermaid\"><code data-language=\"mermaid\"><\/code><\/pre>\n<p><strong>Podstawa i warto\u015b\u0107<\/strong>: Ten jeden diagram natychmiast odpowiada na pytanie \u201eCo budujemy i z kim si\u0119 komunikuje?\u201d. Zapobiega rozszerzaniu zakresu, wyra\u017anie pokazuj\u0105c zale\u017cno\u015bci zewn\u0119trzne. Stakeholderzy biznesowi go lubi\u0105, poniewa\u017c jeszcze nie ma szczeg\u00f3\u0142\u00f3w technologicznych.<\/p>\n<h3>Krok 2: Diagram kontener\u00f3w (poziom 2)<\/h3>\n<p><strong>Cel<\/strong>: Przybli\u017c si\u0119 do systemu bankowo\u015bci internetowej i poka\u017c g\u0142\u00f3wne jednostki wdra\u017calne\/uruchomione (kontenery) oraz wybrane technologie. Odbiorcy: architekci, liderzy programist\u00f3w, dzia\u0142 operacyjny.<\/p>\n<p><strong>Kontenery w systemie Internet Banking<\/strong>:<\/p>\n<ul>\n<li>\n<p><strong>Aplikacja jednostronicowa<\/strong>\u00a0(Przegl\u0105darka internetowa \u2013 JavaScript + Angular) \u2013 Pe\u0142ny interfejs internetowego bankowo\u015bci.<\/p>\n<\/li>\n<li>\n<p><strong>Aplikacja mobilna<\/strong>\u00a0(Urz\u0105dzenie mobilne \u2013 natywny iOS\/Android lub React Native) \u2013 Ograniczona funkcjonalno\u015b\u0107 do u\u017cytku w trakcie podr\u00f3\u017cy.<\/p>\n<\/li>\n<li>\n<p><strong>Aplikacja API<\/strong>\u00a0(Strona serwera \u2013 Java + Spring Boot) \u2013 Interfejs API JSON\/HTTPS u\u017cywany przez oba interfejsy u\u017cytkownika.<\/p>\n<\/li>\n<li>\n<p><strong>Baza danych<\/strong>\u00a0(Baza danych relacyjna \u2013 PostgreSQL) \u2013 Przechowuje dane sesji, preferencje u\u017cytkownika, przes\u0142ane podsumowania kont (dane g\u0142\u00f3wne pozostaj\u0105 na g\u0142\u00f3wnym systemie).<\/p>\n<\/li>\n<\/ul>\n<p><strong>Kluczowe relacje<\/strong>\u00a0(te same systemy zewn\u0119trzne co na poziomie 1):<\/p>\n<ul>\n<li>\n<p>SPA i aplikacja mobilna \u2192 wywo\u0142uj\u0105 \u2192 Aplikacja API<\/p>\n<\/li>\n<li>\n<p>Aplikacja API \u2194 Baza danych<\/p>\n<\/li>\n<li>\n<p>Aplikacja API \u2192 System bankowo\u015bci g\u0142\u00f3wny i System e-mail<\/p>\n<\/li>\n<\/ul>\n<p><strong>Diagram kontener\u00f3w PlantUML C4<\/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_TOP_DOWN()<br \/>\nLAYOUT_WITH_LEGEND()<\/p>\n<p>tytu\u0142 Diagram kontener\u00f3w C4 dla systemu Internet Banking<\/p>\n<p>Osoba(klient, \u201eKlient prywatnej bankowo\u015bci\u201d, \u201eKlient z jednym lub wi\u0119cej kontami prywatnymi.\u201d)<\/p>\n<p>Granica_systemu(internet_banking_system, \u201eSystem Internet Banking\u201d, \u201eNowy system do przegl\u0105dania kont i dokonywania p\u0142atno\u015bci.\u201d) {<br \/>\nKontener(spa, \u201eAplikacja jednostronicowa\u201d, \u201eJavaScript + Angular\u201d, \u201ePe\u0142ny interfejs internetowego bankowo\u015bci\u201d, $sprite=\u201dangular\u201d)<br \/>\nKontener(mobile_app, \u201eAplikacja mobilna\u201d, \u201eiOS\/Android (React Native)\u201d, \u201eOgraniczona funkcjonalno\u015b\u0107 do u\u017cytku w trakcie podr\u00f3\u017cy\u201d, $sprite=\u201dreact\u201d)<br \/>\nKontener(api_app, \u201eAplikacja API\u201d, \u201eJava + Spring Boot\u201d, \u201eInterfejs API JSON\/HTTPS u\u017cywany przez oba interfejsy u\u017cytkownika\u201d, $sprite=\u201djava\u201d)<br \/>\nContainerDb(baza_danych, \u201eBaza danych\u201d, \u201ePostgreSQL\u201d, \u201ePrzechowuje dane sesji, preferencje u\u017cytkownika oraz przes\u0142ane podsumowania kont\u201d, $sprite=&#8221;postgresql&#8221;)<br \/>\n}<\/p>\n<p>System(system_jadrowy_bankowy, \u201eSystem jadrowy bankowy\u201d, \u201eIstniej\u0105cy mainframe obs\u0142uguj\u0105cy dane klient\u00f3w, konta oraz transakcje.\u201d)<br \/>\nSystem_Ext(system_emailowy, \u201eSystem e-mailowy\u201d, \u201eAmazon Web Services Simple Email Service (AWS SES) do wysy\u0142ania potwierdze\u0144.\u201d)<\/p>\n<p>\u2018 Relacje<br \/>\nRel(klient, spa, \u201eU\u017cywa\u201d, \u201eHTTPS\u201d)<br \/>\nRel(klient, aplikacja_mobilna, \u201eU\u017cywa\u201d, \u201eHTTPS\u201d)<br \/>\nRel(spa, aplikacja_api, \u201eWywo\u0142uje\u201d, \u201eJSON\/HTTPS\u201d)<br \/>\nRel(aplikacja_mobilna, aplikacja_api, \u201eWywo\u0142uje\u201d, \u201eJSON\/HTTPS\u201d)<br \/>\nRel(aplikacja_api, baza_danych, \u201eOdczytuje i zapisuje do\u201d, \u201eJDBC\/SQL\u201d)<br \/>\nRel(aplikacja_api, system_jadrowy_bankowy, \u201eZapytania \/ Aktualizacje\u201d, \u201eJSON\/HTTPS\u201d)<br \/>\nRel(aplikacja_api, system_emailowy, \u201eWysy\u0142a e-mail przez\u201d, \u201eHTTPS\u201d)<\/p>\n<p>\u2018 Podpowiedzi uk\u0142adu (opcjonalnie \u2013 pomaga PlantUML lepiej u\u0142o\u017cy\u0107 elementy)<br \/>\nLay_D(klient, system_bankowo\u015bci_internetowej)<br \/>\nLay_D(system_bankowo\u015bci_internetowej, system_jadrowy_bankowy)<br \/>\nLay_U(system_emailowy, system_bankowo\u015bci_internetowej)<\/p>\n<p>@enduml<code data-language=\"mermaid\"><br \/>\n<\/code><\/p>\n<p><strong>Uzasadnienie<\/strong>: Wybrali\u015bmy nowoczesny wzorzec SPA + backend API dla internetu, natywn\u0105 aplikacj\u0119 mobiln\u0105 dla wydajno\u015bci oraz utrzymali\u015bmy lekk\u0105 baz\u0119 danych (wi\u0119kszo\u015b\u0107 danych znajduje si\u0119 w starszym mainfranie). Ten diagram jest jedynym \u017ar\u00f3d\u0142em prawdy dla decyzji technologicznych najwy\u017cszego poziomu i pomaga zespo\u0142om DevOps planowa\u0107 infrastruktur\u0119.<\/p>\n<h3>Krok 3: Diagram komponent\u00f3w (poziom 3)<\/h3>\n<p><strong>Cel<\/strong>: Przybli\u017cenie jednego kontenera (zazwyczaj najbardziej z\u0142o\u017conego \u2013 aplikacji API) i pokazanie jego g\u0142\u00f3wnych komponent\u00f3w logicznych. Odbiorca: zespo\u0142y programist\u00f3w.<\/p>\n<p><strong>Przyk\u0142ad: Komponenty wewn\u0105trz aplikacji API<\/strong>:<\/p>\n<ul>\n<li>\n<p>Kontroler kont (Spring MVC)<\/p>\n<\/li>\n<li>\n<p>Kontroler uwierzytelniania<\/p>\n<\/li>\n<li>\n<p>Kontroler resetu has\u0142a<\/p>\n<\/li>\n<li>\n<p>Komponent zabezpiecze\u0144 (obs\u0142uguje uwierzytelnianie, JWT itp.)<\/p>\n<\/li>\n<li>\n<p>Komponent zarz\u0105dzania kontami (koordynuje wywo\u0142ania do systemu jadrowego bankowego)<\/p>\n<\/li>\n<li>\n<p>Komponent powiadomie\u0144 e-mailowych<\/p>\n<\/li>\n<\/ul>\n<p><strong>Diagram komponentowy PlantUML C4<\/strong>\u00a0(zorientowany na aplikacj\u0119 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\ntytu\u0142 Diagram komponentowy dla systemu internetowego bankowo\u015bci \u2013 aplikacja API\r\n\r\nContainer(spa, \"Aplikacja jednostronicowa\", \"javascript i angular\", \"Dostarcza wszystkie funkcje internetowego bankowo\u015bci dla klient\u00f3w poprzez ich przegl\u0105dark\u0119 internetow\u0105.\")\r\nContainer(ma, \"Aplikacja mobilna\", \"Xamarin\", \"Dostarcza ograniczon\u0105 cz\u0119\u015b\u0107 funkcji internetowego bankowo\u015bci dla klient\u00f3w poprzez ich urz\u0105dzenie mobilne.\")\r\nContainerDb(db, \"Baza danych\", \"Schemat bazy danych relacyjnej\", \"Przechowuje informacje o rejestracji u\u017cytkownik\u00f3w, zaszyfrowane dane uwierzytelniaj\u0105ce, logi dost\u0119pu itp.\")\r\nSystem_Ext(mbs, \"System bankowy mainframe\", \"Przechowuje wszystkie podstawowe informacje o klientach, kontach, transakcjach itp.\")\r\n\r\nContainer_Boundary(api, \"Aplikacja API\") {\r\n    Component(accounts, \"Kontroler kont\", \"Spring MVC\", \"Dostarcza podsumowania kont i sald dla klient\u00f3w.\")\r\n    Component(auth, \"Kontroler uwierzytelniania\", \"Spring MVC\", \"Obs\u0142uguje logowanie u\u017cytkownika, zarz\u0105dzanie sesjami i generowanie token\u00f3w.\")\r\n    Component(reset, \"Kontroler resetowania has\u0142a\", \"Spring MVC\", \"Zezwala u\u017cytkownikom na resetowanie has\u0142a poprzez e-mail.\")\r\n    Component(security, \"Sk\u0142adnik zabezpiecze\u0144\", \"Spring Bean\", \"Obs\u0142uguje uwierzytelnianie, generowanie token\u00f3w JWT i hashowanie hase\u0142.\")\r\n    Component(accountmgmt, \"Sk\u0142adnik zarz\u0105dzania kontami\", \"Spring Bean\", \"Koordynuje wywo\u0142ania do systemu bankowego g\u0142\u00f3wnego w celu operacji na kontach.\")\r\n    Component(email, \"Sk\u0142adnik powiadomie\u0144 e-mail\", \"Spring Bean\", \"Wysy\u0142a e-maile z resetem has\u0142a i potwierdzeniem konta przez SMTP.\")\r\n\r\n    Rel(accounts, security, \"U\u017cywa\")\r\n    Rel(auth, security, \"U\u017cywa\")\r\n    Rel(reset, security, \"U\u017cywa\")\r\n    Rel(accountmgmt, mbs, \"U\u017cywa\", \"XML\/HTTPS\")\r\n    Rel(email, db, \"Odczytuje\", \"JDBC\")\r\n}\r\n\r\nRel(spa, accounts, \"U\u017cywa\", \"JSON\/HTTPS\")\r\nRel(spa, auth, \"U\u017cywa\", \"JSON\/HTTPS\")\r\nRel(spa, reset, \"U\u017cywa\", \"JSON\/HTTPS\")\r\nRel(ma, accounts, \"U\u017cywa\", \"JSON\/HTTPS\")\r\nRel(ma, auth, \"U\u017cywa\", \"JSON\/HTTPS\")\r\nRel(ma, reset, \"U\u017cywa\", \"JSON\/HTTPS\")\r\n@enduml<\/code><\/pre>\n<p><code data-language=\"mermaid\"><br \/>\n<\/code><\/p>\n<p><strong>Podstawa<\/strong>: Poziom ten pokazuje, jak s\u0105 rozdzielone odpowiedzialno\u015bci (oddzielenie obowi\u0105zk\u00f3w) i znacznie przyspiesza onboardowanie nowych programist\u00f3w. Rysujesz diagramy komponent\u00f3w tylko dla kontener\u00f3w wystarczaj\u0105co skomplikowanych, by tego wymaga\u0107.<\/p>\n<h3>Krok 4: Diagram kodu (poziom 4) \u2013 opcjonalny<\/h3>\n<p><strong>Cel<\/strong>: Pokazuje struktur\u0119 wewn\u0119trzn\u0105 pojedynczego sk\u0142adnika (diagram klas, sekwencji itp.). Odbiorca: programi\u015bci pracuj\u0105cy nad tym kodem.<\/p>\n<p>Przyk\u0142ad dla<strong>Kontroler uwierzytelniania<\/strong> sk\u0142adnik \u2013 prosty diagram klas UML w 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 \/>\ndiagramKlas<\/p>\n<p>skinparam {<br \/>\nroundcorner 8<br \/>\nColorStrzalki #444444<br \/>\nColorCzcionkiStrzalek #444444<br \/>\nColorObramowania #444444<\/p>\n<p>Klasa {<br \/>\nColorObramowania #1A237E<br \/>\nColorT\u0142a #E8EAF6<br \/>\nColorCzcionki #1A237E<br \/>\n}<br \/>\n}<\/p>\n<p>class \u201cKontrolerUwierzytelniania\u201d {<br \/>\n+login(credencjaly)<br \/>\n+od\u015bwie\u017cToken()<br \/>\n}<\/p>\n<p>class \u201cDostawcaToken\u00f3wJwt\u201d {<br \/>\n+wygenerujToken(u\u017cytkownik)<br \/>+validateToken(token)<br \/>\n}<\/p>\n<p>class \u201eUserRepository\u201c {<br \/>\n+findByUsername()<br \/>\n}<\/p>\n<p>AuthenticationController ..&gt; JwtTokenProvider : \u201eu\u017cywa&#8221;<br \/>\nAuthenticationController ..&gt; UserRepository : \u201eu\u017cywa&#8221;<br \/>\n@enduml<\/p>\n<p><code data-language=\"mermaid\"><br \/>\n<\/code>W rzeczywistych projektach cz\u0119sto pomijasz poziom 4 i wskazujesz na rzeczywisty kod \u017ar\u00f3d\u0142owy.<\/p>\n<h3>Krok 5: Diagramy wspieraj\u0105ce<\/h3>\n<p><strong>Diagram dynamiczny<\/strong>\u00a0(przyk\u0142ad: przep\u0142yw \u201eWy\u015bwietl podsumowanie konta\u201d) <\/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>tytu\u0142 Diagram dynamiczny dla Wy\u015bwietl podsumowanie konta<\/p>\n<p>Person(customer, \u201eKlient prywatny\u201d) {<br \/>\nContainer(spa, \u201eAplikacja jednostronicowa\u201d) {<br \/>\nContainer(api, \u201eAplikacja API\u201d) {<br \/>\nContainerDb(db, \u201eBaza danych\u201d) {<br \/>\nSystem_Ext(coreBanking, \u201eSystem bankowy g\u0142\u00f3wny\u201d)<br \/>\n}<br \/>\n}<br \/>\n}<br \/>\n}<\/p>\n<p>Rel(customer, spa, \u201e1. Klikni\u0119cie \u201eKonta\u201d\u201d, \u201e\u201d)<br \/>\nRel(spa, api, \u201e2. GET \/accounts\u201d, \u201eJSON\/HTTPS\u201d)<br \/>\nRel(api, db, \u201e3. Odczytaj zapisane podsumowanie\u201d, \u201e\u201d)<br \/>\nRel(api, coreBanking, \u201e4. Pobierz najnowsze dane\u201d, \u201e\u201d)<br \/>\nRel(api, spa, \u201e5. Zwr\u00f3\u0107 JSON\u201d, \u201e\u201d)<\/p>\n<p>Poka\u017cLEGEND\u0118()<br \/>\n@enduml<code data-language=\"mermaid\"><br \/>\n<\/code><\/p>\n<p><strong>Diagram rozmieszczenia<\/strong>\u00a0(mapowanie fizyczne na wysokim poziomie):<\/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>tytu\u0142 Diagram rozmieszczenia dla systemu internetowego bankowo\u015bci<\/p>\n<p>W\u0119ze\u0142_rozmieszczenia(aws, \u201eAmazon Web Services\u201d, \u201eChmura\u201d) {<br \/>\nW\u0119ze\u0142_rozmieszczenia(ec2, \u201eGrupa automatycznego skalowania EC2\u201d, \u201eLinux\u201d) {<br \/>\nKontener(api, \u201eAplikacja API\u201d, \u201eJava Spring Boot\u201d)<br \/>\n}<br \/>\nW\u0119ze\u0142_rozmieszczenia(rds, \u201eRDS\u201d, \u201ePostgreSQL\u201d) {<br \/>\nKontenerBazyDanych(db, \u201eBaza danych\u201d)<br \/>\n}<br \/>\n}<\/p>\n<p>W\u0119ze\u0142_rozmieszczenia(customerDevice, \u201eUrz\u0105dzenie klienta\u201d, \u201eWeb\/Mobilny\u201d) {<br \/>\nKontener(spa, \u201eAplikacja jednostronicowa\u201d)<br \/>\nKontener(mobile, \u201eAplikacja mobilna\u201d)<br \/>\n}<\/p>\n<p>SystemZewn\u0119trzny(coreBanking, \u201eSystem bankowo\u015bci g\u0142\u00f3wnej (mainframe lokalny)\u201d)<\/p>\n<p>Rel(spa, api, \u201eWywo\u0142uje interfejs API\u201d, \u201eHTTPS\u201d)<br \/>\nRel(mobile, api, \u201eWywo\u0142uje interfejs API\u201d, \u201eHTTPS\u201d)<br \/>\nRel_U(api, spa, \u201eDostarcza do przegl\u0105darki internetowej klienta\u201d)<br \/>\nRel_U(api, mobile, \u201eDostarcza do aplikacji mobilnej\u201d)<\/p>\n<p>Poka\u017cLegende()<br \/>\n@enduml<\/p>\n<pre class=\"lang-mermaid\"><code data-language=\"mermaid\"><\/code><\/pre>\n<h3>Jak wykorzysta\u0107 t\u0119 studi\u0119 przypadku w praktyce<\/h3>\n<ol>\n<li>\n<p>Zacznij od warsztatu: narysuj kontekst na tablicy.<\/p>\n<\/li>\n<li>\n<p>Iteruj do kontener\u00f3w i sk\u0142adnik\u00f3w przy u\u017cyciu PlantUML C4.<\/p>\n<\/li>\n<li>\n<p>Przechowuj diagramy w repozytorium kodu (jako kod!) aby by\u0142y aktualne.<\/p>\n<\/li>\n<li>\n<p>Automatycznie generuj \u017cyj\u0105c\u0105 dokumentacj\u0119.<\/p>\n<\/li>\n<\/ol>\n<p>Ten dok\u0142adny przyk\u0142ad systemu bankowo\u015bci internetowej to oficjalny referencjusz stworzony przez Simona Browna i wykorzystywany przez tysi\u0105ce organizacji na ca\u0142ym \u015bwiecie. Po wykonaniu tych krok\u00f3w posiadasz kompletny, gotowy do produkcji opis architektury, kt\u00f3ry ka\u017cdy \u2013 od CEO po nowego juniorowego programist\u0119 \u2013 mo\u017ce zrozumie\u0107 na odpowiednim poziomie szczeg\u00f3\u0142owo\u015bci.<\/p>\n<h3>Artyku\u0142y o diagramach 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>Ostateczny przewodnik po wizualizacji modelu C4 przy u\u017cyciu narz\u0119dzi AI firmy Visual Paradigm<\/strong><\/a>: Ten przewodnik wyja\u015bnia, jak wykorzysta\u0107 narz\u0119dzia wspierane przez sztuczn\u0105 inteligencj\u0119, aby zautomatyzowa\u0107 i ulepszy\u0107 wizualizacj\u0119 modelu C4, co przyspiesza projektowanie architektury oprogramowania.<\/li>\n<li><a href=\"https:\/\/www.archimetric.com\/leveraging-visual-paradigms-ai-c4-studio-a-comprehensive-guide-to-streamlined-architectural-documentation\/\"><strong>Wykorzystanie AI Studio C4 firmy Visual Paradigm do uproszczonej dokumentacji architektury<\/strong><\/a>: Ten artyku\u0142 opisuje spos\u00f3b wykorzystania stacji zwi\u0119kszonych o AI do tworzenia czystych, skalowalnych i utrzymywalnych dokument\u00f3w architektury oprogramowania.<\/li>\n<li><a href=\"https:\/\/blog.visual-paradigm.com\/the-ultimate-guide-to-c4-plantuml-studio-revolutionizing-software-architecture-design\/\"><strong>Ostateczny przewodnik po C4-PlantUML Studio: rewolucja w projektowaniu architektury oprogramowania<\/strong><\/a>: Ten zas\u00f3b bada \u0142\u0105czenie automatyzacji opartej na sztucznej inteligencji, przejrzysto\u015bci modelu C4 oraz elastyczno\u015bci PlantUML w jednym pot\u0119\u017cnym narz\u0119dziu.<\/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>Kompletny przewodnik po AI-zasilenym C4 PlantUML Studio firmy Visual Paradigm<\/strong><\/a>: Ten przewodnik opisuje narz\u0119dzie specjalnie stworzone, kt\u00f3re zosta\u0142o wydane na prze\u0142omie 2025 roku i przekszta\u0142ca polecenia w j\u0119zyku naturalnym w z\u0142o\u017cone diagramy C4.<\/li>\n<li><a href=\"https:\/\/www.visual-paradigm.com\/features\/c4-plantuml-studio\/\"><strong>C4-PlantUML Studio | Generator diagram\u00f3w C4 z wykorzystaniem sztucznej inteligencji<\/strong><\/a>: Ten przegl\u0105d funkcji podkre\u015bla narz\u0119dzie oparte na sztucznej inteligencji, kt\u00f3re zosta\u0142o zaprojektowane do generowania diagram\u00f3w architektury oprogramowania C4 na podstawie prostych opis\u00f3w tekstowych.<\/li>\n<li><a href=\"https:\/\/www.archimetric.com\/comprehensive-tutorial-generating-and-modifying-c4-component-diagrams-with-visual-paradigm-ai-chatbot\/\"><strong>Generowanie i modyfikowanie diagram\u00f3w komponent\u00f3w C4 za pomoc\u0105 czatobota AI firmy Visual Paradigm<\/strong><\/a>: Ten samouczek pokazuje, jak wykorzysta\u0107 czatobota z AI do iteracyjnego tworzenia i doskonalenia architektury poziomu komponent\u00f3w dla z\u0142o\u017conych system\u00f3w.<\/li>\n<li><a href=\"https:\/\/ai.visual-paradigm.com\/tool\/ai-powered-c4-plantuml-studio\/about-the-diagrams\/\"><strong>Generator diagram\u00f3w C4 z wykorzystaniem sztucznej inteligencji: podstawowe poziomy i wspieraj\u0105ce widoki<\/strong><\/a>: Ta strona wyja\u015bnia, jak generator AI wspiera cztery podstawowe poziomy modelu C4 \u2013 Kontekst, Kontener, Komponent i Wdro\u017cenie \u2013 aby zapewni\u0107 kompleksow\u0105 dokumentacj\u0119.<\/li>\n<li><a href=\"https:\/\/updates.visual-paradigm.com\/releases\/ai-diagram-generator-complete-c4-model\/\"><strong>Generator diagram\u00f3w z AI: wydanie z pe\u0142n\u0105 obs\u0142ug\u0105 modelu C4<\/strong><\/a>: Ta aktualizacja szczeg\u00f3\u0142owo opisuje zintegrowane funkcje z AI, kt\u00f3re umo\u017cliwiaj\u0105 automatyczne tworzenie hierarchicznych diagram\u00f3w modelu 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>Generator AI modelu C4: automatyzacja pe\u0142nego cyklu modelowania<\/strong><\/a>: Ten zas\u00f3b podkre\u015bla, jak specjalistyczny czatobot z AI wykorzystuje przekazy rozm\u00f3w, aby zapewni\u0107 sp\u00f3jno\u015b\u0107 dokumentacji architektury dla zespo\u0142\u00f3w DevOps.<\/li>\n<li><a href=\"https:\/\/www.archimetric.com\/comprehensive-review-generic-ai-chatbots-vs-visual-paradigms-c4-tools\/\"><strong>Kompleksowa analiza: og\u00f3lnoustrojowe czatoboty AI w por\u00f3wnaniu z narz\u0119dziami C4 firmy Visual Paradigm<\/strong><\/a>: To por\u00f3wnanie wyja\u015bnia, dlaczego specjalistyczne narz\u0119dzia, takie jak C4 PlantUML Studio, zapewniaj\u0105 bardziej zorganizowane i profesjonalne wyniki ni\u017c og\u00f3lne modele j\u0119zykowe.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The\u00a0Model C4, stworzony przez Simona Browna, to prosty, hierarchiczny i przyjazny dla programist\u00f3w spos\u00f3b wizualizacji architektury oprogramowania. Wykorzystuje cztery poziomy<\/p>\n","protected":false},"author":11,"featured_media":12012,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","footnotes":""},"categories":[110],"tags":[],"class_list":["post-12011","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>Kompleksna studium przypadku krok po kroku: stosowanie modelu C4 do systemu bankowo\u015bci internetowej (Big Bank plc) - Cybermediana<\/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\/pl\/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=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Kompleksna studium przypadku krok po kroku: stosowanie modelu C4 do systemu bankowo\u015bci internetowej (Big Bank plc) - Cybermediana\" \/>\n<meta property=\"og:description\" content=\"The\u00a0Model C4, stworzony przez Simona Browna, to prosty, hierarchiczny i przyjazny dla programist\u00f3w spos\u00f3b wizualizacji architektury oprogramowania. Wykorzystuje cztery poziomy\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.cybermedian.com\/pl\/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=\"Cybermediana\" \/>\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=\"Napisane przez\" \/>\n\t<meta name=\"twitter:data1\" content=\"curtis\" \/>\n\t<meta name=\"twitter:label2\" content=\"Szacowany czas czytania\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minut\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.cybermedian.com\/pl\/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\/pl\/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\/pl\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\"},\"headline\":\"Kompleksna studium przypadku krok po kroku: stosowanie modelu C4 do systemu bankowo\u015bci internetowej (Big Bank plc)\",\"datePublished\":\"2026-03-05T02:48:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.cybermedian.com\/pl\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\"},\"wordCount\":1881,\"image\":{\"@id\":\"https:\/\/www.cybermedian.com\/pl\/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\/pl\/wp-content\/uploads\/sites\/16\/2026\/03\/img_69a8e7e9e8ab5.png\",\"articleSection\":[\"C4 Model\"],\"inLanguage\":\"pl-PL\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.cybermedian.com\/pl\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\",\"url\":\"https:\/\/www.cybermedian.com\/pl\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\",\"name\":\"Kompleksna studium przypadku krok po kroku: stosowanie modelu C4 do systemu bankowo\u015bci internetowej (Big Bank plc) - Cybermediana\",\"isPartOf\":{\"@id\":\"https:\/\/www.cybermedian.com\/pl\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.cybermedian.com\/pl\/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\/pl\/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\/pl\/wp-content\/uploads\/sites\/16\/2026\/03\/img_69a8e7e9e8ab5.png\",\"datePublished\":\"2026-03-05T02:48:15+00:00\",\"author\":{\"@id\":\"https:\/\/www.cybermedian.com\/pl\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.cybermedian.com\/pl\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.cybermedian.com\/pl\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/www.cybermedian.com\/pl\/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\/pl\/wp-content\/uploads\/sites\/16\/2026\/03\/img_69a8e7e9e8ab5.png\",\"contentUrl\":\"https:\/\/www.cybermedian.com\/pl\/wp-content\/uploads\/sites\/16\/2026\/03\/img_69a8e7e9e8ab5.png\",\"width\":527,\"height\":739},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.cybermedian.com\/pl\/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\/pl\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Kompleksna studium przypadku krok po kroku: stosowanie modelu C4 do systemu bankowo\u015bci internetowej (Big Bank plc)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.cybermedian.com\/pl\/#website\",\"url\":\"https:\/\/www.cybermedian.com\/pl\/\",\"name\":\"Cybermediana\",\"description\":\"Uczenie si\u0119 jednej nowej rzeczy ka\u017cdego dnia\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.cybermedian.com\/pl\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.cybermedian.com\/pl\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d\",\"name\":\"curtis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/www.cybermedian.com\/pl\/#\/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\/pl\/author\/curtis\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Kompleksna studium przypadku krok po kroku: stosowanie modelu C4 do systemu bankowo\u015bci internetowej (Big Bank plc) - Cybermediana","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\/pl\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","og_locale":"pl_PL","og_type":"article","og_title":"Kompleksna studium przypadku krok po kroku: stosowanie modelu C4 do systemu bankowo\u015bci internetowej (Big Bank plc) - Cybermediana","og_description":"The\u00a0Model C4, stworzony przez Simona Browna, to prosty, hierarchiczny i przyjazny dla programist\u00f3w spos\u00f3b wizualizacji architektury oprogramowania. Wykorzystuje cztery poziomy","og_url":"https:\/\/www.cybermedian.com\/pl\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","og_site_name":"Cybermediana","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":{"Napisane przez":"curtis","Szacowany czas czytania":"8 minut"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.cybermedian.com\/pl\/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\/pl\/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\/pl\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d"},"headline":"Kompleksna studium przypadku krok po kroku: stosowanie modelu C4 do systemu bankowo\u015bci internetowej (Big Bank plc)","datePublished":"2026-03-05T02:48:15+00:00","mainEntityOfPage":{"@id":"https:\/\/www.cybermedian.com\/pl\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/"},"wordCount":1881,"image":{"@id":"https:\/\/www.cybermedian.com\/pl\/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\/pl\/wp-content\/uploads\/sites\/16\/2026\/03\/img_69a8e7e9e8ab5.png","articleSection":["C4 Model"],"inLanguage":"pl-PL"},{"@type":"WebPage","@id":"https:\/\/www.cybermedian.com\/pl\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","url":"https:\/\/www.cybermedian.com\/pl\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/","name":"Kompleksna studium przypadku krok po kroku: stosowanie modelu C4 do systemu bankowo\u015bci internetowej (Big Bank plc) - Cybermediana","isPartOf":{"@id":"https:\/\/www.cybermedian.com\/pl\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.cybermedian.com\/pl\/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\/pl\/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\/pl\/wp-content\/uploads\/sites\/16\/2026\/03\/img_69a8e7e9e8ab5.png","datePublished":"2026-03-05T02:48:15+00:00","author":{"@id":"https:\/\/www.cybermedian.com\/pl\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d"},"breadcrumb":{"@id":"https:\/\/www.cybermedian.com\/pl\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.cybermedian.com\/pl\/a-comprehensive-step-by-step-case-study-applying-the-c4-model-to-the-internet-banking-system-big-bank-plc\/"]}]},{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/www.cybermedian.com\/pl\/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\/pl\/wp-content\/uploads\/sites\/16\/2026\/03\/img_69a8e7e9e8ab5.png","contentUrl":"https:\/\/www.cybermedian.com\/pl\/wp-content\/uploads\/sites\/16\/2026\/03\/img_69a8e7e9e8ab5.png","width":527,"height":739},{"@type":"BreadcrumbList","@id":"https:\/\/www.cybermedian.com\/pl\/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\/pl\/"},{"@type":"ListItem","position":2,"name":"Kompleksna studium przypadku krok po kroku: stosowanie modelu C4 do systemu bankowo\u015bci internetowej (Big Bank plc)"}]},{"@type":"WebSite","@id":"https:\/\/www.cybermedian.com\/pl\/#website","url":"https:\/\/www.cybermedian.com\/pl\/","name":"Cybermediana","description":"Uczenie si\u0119 jednej nowej rzeczy ka\u017cdego dnia","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.cybermedian.com\/pl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":"Person","@id":"https:\/\/www.cybermedian.com\/pl\/#\/schema\/person\/016578d8c88d35825fd3fbafc4f76b4d","name":"curtis","image":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/www.cybermedian.com\/pl\/#\/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\/pl\/author\/curtis\/"}]}},"_links":{"self":[{"href":"https:\/\/www.cybermedian.com\/pl\/wp-json\/wp\/v2\/posts\/12011","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cybermedian.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cybermedian.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/pl\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/pl\/wp-json\/wp\/v2\/comments?post=12011"}],"version-history":[{"count":0,"href":"https:\/\/www.cybermedian.com\/pl\/wp-json\/wp\/v2\/posts\/12011\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/pl\/wp-json\/wp\/v2\/media\/12012"}],"wp:attachment":[{"href":"https:\/\/www.cybermedian.com\/pl\/wp-json\/wp\/v2\/media?parent=12011"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cybermedian.com\/pl\/wp-json\/wp\/v2\/categories?post=12011"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cybermedian.com\/pl\/wp-json\/wp\/v2\/tags?post=12011"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}