{"id":12120,"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: zastosowanie 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><strong>Kontekst systemu<\/strong>\u00a0(Poziom 1) \u2013 Wielka ca\u0142o\u015b\u0107: system i jego u\u017cytkownicy\/externalne zale\u017cno\u015bci.<\/li>\n<li><strong>Pojemniki<\/strong>\u00a0(Poziom 2) \u2013 Wysokie poziomy wybor\u00f3w technologicznych i odpowiedzialno\u015bci.<\/li>\n<li><strong>Sk\u0142adniki<\/strong>\u00a0(Poziom 3) \u2013 G\u0142\u00f3wne logiczne bloki budowlane wewn\u0105trz pojemnika.<\/li>\n<li><strong>Kod<\/strong>\u00a0(Poziom 4) \u2013 Opcjonalne szczeg\u00f3\u0142y na poziomie klas lub struktury kodu.<\/li>\n<\/ol>\n<p>Wspierany jest przez trzy dodatkowe typy diagram\u00f3w:<\/p>\n<ul>\n<li><strong>Kontekst systemu<\/strong><\/li>\n<li><strong>Dynamiczny<\/strong><\/li>\n<li><strong>Wdro\u017cenie<\/strong><\/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 odpowiednim poziomie szczeg\u00f3\u0142\u00f3w dla odbiorcy. Jest szeroko stosowany, poniewa\u017c unika diagram\u00f3w architektury typu \u201edu\u017cy k\u0142acz b\u0142ota\u201d i mo\u017ce by\u0107 skalowany od szkic\u00f3w na tablicy do automatycznie generowanej dokumentacji.<\/p>\n<p>W tym\u00a0<strong>celowym studium przypadku<\/strong>, korzystamy z klasycznego 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\u0105drowymi banku.<\/p>\n<p>Przejdziemy przez\u00a0<strong>ka\u017cdy poziom<\/strong>\u00a0z:<\/p>\n<ul>\n<li>Cel i odbiorca<\/li>\n<li>G\u0142\u00f3wne elementy + odpowiedzialno\u015bci<\/li>\n<li>Zwi\u0105zki<\/li>\n<li>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)<\/li>\n<li>Podstawa i kluczowe decyzje<\/li>\n<li>Jak diagram pomaga stakeholderom<\/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><strong>Klient prywatny bankowo\u015bci<\/strong>\u00a0(Person) \u2013 Klient z jednym lub wi\u0119ksz\u0105 liczb\u0105 kont bankowych osobistych.<\/li>\n<li><strong>System bankowo\u015bci internetowej<\/strong>\u00a0(System oprogramowania) \u2013 Nowy system, kt\u00f3ry budujemy.<\/li>\n<li><strong>System bankowo\u015bci centralnej<\/strong>\u00a0(System oprogramowania, istniej\u0105cy) \u2013 Mainframe obs\u0142uguj\u0105cy dane klient\u00f3w, konta i transakcje.<\/li>\n<li><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.<\/li>\n<\/ul>\n<p><strong>Zwi\u0105zki<\/strong>:<\/p>\n<ul>\n<li>Klient \u2192 u\u017cywa \u2192 System bankowo\u015bci internetowej (do przegl\u0105dania kont i dokonywania p\u0142atno\u015bci)<\/li>\n<li>System bankowo\u015bci internetowej \u2192 u\u017cywa \u2192 System bankowo\u015bci centralnej (dane kont i p\u0142atno\u015bci)<\/li>\n<li>System bankowo\u015bci internetowej \u2192 wysy\u0142a e-mail przez \u2192 System poczty e-mail<\/li>\n<\/ul>\n<p>Oto\u00a0<strong>Diagram kontekstu 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\"\/><\/p>\n<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com#plantuml:bLF9Zjf04BqZyGyLJaO2h4WvvJG4h6GaPq0n2Ct9Akm2Mkd5wYwsV7swRSCW9YZ9qQ_ULbtoasEql5Uos_aWT27t9S6EkNAVuzYFM1IZWt1xbCCABPPYgqQ5KN4bKGVLq74fnJgUV1hE0xJydiOA7PFrK3unckd4ewhsxtRIyUjikSWNita-dQrUeluLMZqllkLfyZLvcGQqss71aY0xUoi5hGzC1MujAeXIEf24ZttO60lFVcWrCNn1_LFeRQiABdEopkYes3isYkm0UWs2yagUjBEU7uxXmeIZu1qOJU03bB44rKMuzaB0eZ1xpMxKyssRl4YqFV9rOvsx6lU-3ng6oCMEGDCH6cwzpq7GCP0k6O2w18MriCApehlSmjTxdpa9fT_d9IVXE40AXTxun_JdzluoGDVbIsGSNFC7TG6sg1qMB8o-JS-J4qVapUHRT18-RpB72dyP3IjQGqRs80foa0bL-GEtr0Q5QBpA84kovgwET5dNCdeZhCAtw6xd1ycRgpv--QKZ5nI1_v3rvmVy9-dTvfclx1hGdn6RhYcUy-dVs_OlpF_fsOgMToTu7F7a6_g_yJS0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edytuj PlantUML w VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Plantuml<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#plantuml:ZPFFRjf04CRlIBp3b1D80LIffvw20cgZKa0r2FLahTTRidZ_MDvrdFKHbOUe-XYzzbRyNfsrWQ2AL3cnV3FppMzcv5jZIMPpATgjDrnHaSSC7gnDpVlX44EMqy4ZDpaH_PHa9EOREQ1Q3bD1bA_g6niB7WtltlKNNbfzdWubCPPbA8LtMbdsP0TfxTzkJKTVvwjbk9mlml5yFUlspjBwVland4u-J6PZhxPRrjcysi6Oaqr692JUAJ4s1-FGNURGJNN9jOItFOW5ESiHKOakTFMJSk1OaobcTS6stdF1CgDLDn6SANi3dK_r0zBC5SGgTrdRUGwNi6MnSX947a713pyIKnxs83Wj8_prPCTAHnz06nrnO_4vwE0WGOtLRUZ2Po27_atiHMAFCCFCusWGQoGjsKOSzZ5Hd3ITEUhum0cyb5OxdAJskjAUuZWP4Ug5vgTmq_hUMCNPzh2d3YJXwXkUWO6EJBNBDtcZ8mU3Pfr_VXKtDH519BHHXYHqoouemicJFP6acfRs0gFv3woFdOJlFfAar0hMB8A0PO-SCWC1bwbWCF4v9nMwetK0mIJe-VqKpZZSGBq9RGlEihXarVSQejtwmiJvzbSFigf-unvzia-zbd9baQykEi-yRYYFqzP7BHl2AN7X-3-ClLFAQzYEoQj_TtxLzfQf63_Ilm00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">\r\n@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\ntytu\u0142 Diagram kontekstu systemu (poziom 1) dla systemu bankowo\u015bci internetowej\r\n\r\nPerson(klient, \"Klient prywatny bankowo\u015bci\", \"Klient z jednym lub wi\u0119ksz\u0105 liczb\u0105 kont bankowych osobistych.\")\r\nSystem(system_internetowy, \"System bankowo\u015bci internetowej\", \"Nowy system do przegl\u0105dania kont i dokonywania p\u0142atno\u015bci.\")\r\nSystem(system_centralny, \"System bankowo\u015bci centralnej\", \"Istniej\u0105cy mainframe obs\u0142uguj\u0105cy dane klient\u00f3w, konta i transakcje.\")\r\nSystem_Ext(system_poczty, \"System poczty e-mail\", \"Amazon Web Services Simple Email Service (AWS SES) do wysy\u0142ania potwierdze\u0144.\")\r\n\r\nRel(klient, system_internetowy, \"U\u017cywa\")\r\nRel(system_internetowy, system_centralny, \"U\u017cywa\")\r\nRel(system_internetowy, system_poczty, \"Wysy\u0142a e-mail przez\")\r\n\r\nLay_D(klient, system_internetowy)\r\nLay_D(system_internetowy, system_centralny)\r\nLay_U(system_poczty, system_internetowy)\r\n@enduml<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#plantuml:ZPFFRjf04CRlIBp3b1D80LIffvw20cgZKa0r2FLahTTRidZ_MDvrdFKHbOUe-XYzzbRyNfsrWQ2AL3cnV3FppMzcv5jZIMPpATgjDrnHaSSC7gnDpVlX44EMqy4ZDpaH_PHa9EOREQ1Q3bD1bA_g6niB7WtltlKNNbfzdWubCPPbA8LtMbdsP0TfxTzkJKTVvwjbk9mlml5yFUlspjBwVland4u-J6PZhxPRrjcysi6Oaqr692JUAJ4s1-FGNURGJNN9jOItFOW5ESiHKOakTFMJSk1OaobcTS6stdF1CgDLDn6SANi3dK_r0zBC5SGgTrdRUGwNi6MnSX947a713pyIKnxs83Wj8_prPCTAHnz06nrnO_4vwE0WGOtLRUZ2Po27_atiHMAFCCFCusWGQoGjsKOSzZ5Hd3ITEUhum0cyb5OxdAJskjAUuZWP4Ug5vgTmq_hUMCNPzh2d3YJXwXkUWO6EJBNBDtcZ8mU3Pfr_VXKtDH519BHHXYHqoouemicJFP6acfRs0gFv3woFdOJlFfAar0hMB8A0PO-SCWC1bwbWCF4v9nMwetK0mIJe-VqKpZZSGBq9RGlEihXarVSQejtwmiJvzbSFigf-unvzia-zbd9baQykEi-yRYYFqzP7BHl2AN7X-3-ClLFAQzYEoQj_TtxLzfQf63_Ilm00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com#plantuml:bLF9Zjf04BqZyGyLJaO2h4WvvJG4h6GaPq0n2Ct9Akm2Mkd5wYwsV7swRSCW9YZ9qQ_ULbtoasEql5Uos_aWT27t9S6EkNAVuzYFM1IZWt1xbCCABPPYgqQ5KN4bKGVLq74fnJgUV1hE0xJydiOA7PFrK3unckd4ewhsxtRIyUjikSWNita-dQrUeluLMZqllkLfyZLvcGQqss71aY0xUoi5hGzC1MujAeXIEf24ZttO60lFVcWrCNn1_LFeRQiABdEopkYes3isYkm0UWs2yagUjBEU7uxXmeIZu1qOJU03bB44rKMuzaB0eZ1xpMxKyssRl4YqFV9rOvsx6lU-3ng6oCMEGDCH6cwzpq7GCP0k6O2w18MriCApehlSmjTxdpa9fT_d9IVXE40AXTxun_JdzluoGDVbIsGSNFC7TG6sg1qMB8o-JS-J4qVapUHRT18-RpB72dyP3IjQGqRs80foa0bL-GEtr0Q5QBpA84kovgwET5dNCdeZhCAtw6xd1ycRgpv--QKZ5nI1_v3rvmVy9-dTvfclx1hGdn6RhYcUy-dVs_OlpF_fsOgMToTu7F7a6_g_yJS0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edytuj PlantUML w VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p><strong>Podstawa i warto\u015b\u0107<\/strong>: Ten pojedynczy diagram natychmiast odpowiada na pytanie \u201eCo budujemy i z kim si\u0119 komunikuje?\u201d. Zapobiega rozszerzaniu zakresu, jasno 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 system Internet Banking i poka\u017c g\u0142\u00f3wne jednostki wdra\u017calne\/uruchomione (kontenery) oraz wybrane technologie. Odbiorcy: architekci, kierownicy zespo\u0142\u00f3w programist\u00f3w, dzia\u0142 operacyjny.<\/p>\n<p><strong>Kontenery wewn\u0105trz systemu Internet Banking<\/strong>:<\/p>\n<ul>\n<li><strong>Aplikacja jednostronicowa<\/strong>\u00a0(Przegl\u0105darka internetowa \u2013 JavaScript + Angular) \u2013 Pe\u0142ny interfejs u\u017cytkownika internetowego bankowo\u015bci.<\/li>\n<li><strong>Aplikacja mobilna<\/strong>\u00a0(Urz\u0105dzenie mobilne \u2013 natywna wersja iOS\/Android lub React Native) \u2013 Ograniczona funkcjonalno\u015b\u0107 do u\u017cytku w trakcie podr\u00f3\u017cy.<\/li>\n<li><strong>Aplikacja API<\/strong>\u00a0(Strona serwera \u2013 Java + Spring Boot) \u2013 Interfejs API JSON\/HTTPS u\u017cywany przez oba interfejsy u\u017cytkownika.<\/li>\n<li><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 w g\u0142\u00f3wnym systemie g\u0142\u00f3wnym).<\/li>\n<\/ul>\n<p><strong>Kluczowe relacje<\/strong>\u00a0(te same systemy zewn\u0119trzne co na poziomie 1):<\/p>\n<ul>\n<li>SPA i aplikacja mobilna \u2192 wywo\u0142uj\u0105 \u2192 Aplikacja API<\/li>\n<li>Aplikacja API \u2194 Baza danych<\/li>\n<li>Aplikacja API \u2192 System bankowo\u015bci g\u0142\u00f3wny i System e-mail<\/li>\n<\/ul>\n<p><strong>Diagram kontener\u00f3w C4 w 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<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com#plantuml:lLNDZjis4BuRy3jCZGBLeklLeJaLA12lxJPRE6idih7eoHX9OvijHR8aPSSf2lGTyePvaWuf-M_ZHNlAJHpEpFSDvvlHQ-VH-hgItSutGXMoBWastXltOvhobHV5tLQu6cNVeCLIhAkxGbUfaQX2LD_vKeey7Rxgpu9fyNQILkWyMJOjXrfv58hidRcEO75tjnP-K-Ur8rkmEoaV0NnjiBG_d804t_PNxD5tnWfFxe1JqZRSkHJLkfRuTR1-nor-5I2ZdLzRSd_A5gxRcGn-coxco_bqjXnDdnwJcwFfwM7-PZaP_p9-70Lhj-E5bmJ3Lt3i18m4hYrMiD8M7fYQLUJX7jKVGgqXspDw5I9dP9rMIL4xhokojz1hB2YFpiFshiUN0pXumevB1wq86A3Ibi0S0dCE12mANIllxdgHOOEul6TRYNQVY9RICczGbYuwCCGBP0FwV4EWQ0UDRonjAsWNd0vmWAg42cEWmNr53GNugzivlatY37AsZ7qazMUu9XWO8qN1Ow1L0FgLsvuLLXWFtyEWqLkm_rnB2GVgq5A7nGFVVTjqzgTUAyzGzWcnqhcGj4HZEClRU0YO8QUOPkb0bLQB4fBtX8M7HoQofPjmEn4LPorXLQiYi4Cf_3vMpeho6-glDR3ypWdOaECI7ereiGUpXsl5SfaPXtCnzrhxQCscZ-cR-NoMGOXXZ1BoFUIQkxwoGSgaIdUE6sRb0dQK9oLwpD4H9nordo7vh55xzcuIJfbd-JXmv1nJWX1p6m0j64ihigGAShTGOB5X4csdmTLLXLRG1OVJ60KcVv-KbnICyQNOXa6uNmfj_44u7qmL5xBYCUAfPs79O3eEGCFp8BpRg3nlKJcCdMgKt-f-_C4dnCda2NeSZcUOWme_SlLFb4D6bjS2FqacAiDAQLqRAoI3fmooSNOJPU2u3P6MLYjXApn1TplVmNkIZMKZZEjs-7WswiqOB5nymbxiTOYxTBfGxbNVcEQai25AwIuLTF0yp_M_0evEPphY4IbTa60LNtmNzobu7JECxeTfKDNp-ElTVrTJ412ai32CGF_5uba7ip01ZP7t45uyJ7Zy2UvrxM4ZmbvAj6dc5px_ymas98s3mwyKqB9kU0sHfBYn82VFIoPiVDmlHsVjU65l7ZrVtAjNNg0DMZnJviiGtSvhBfb_J_y2\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edytuj PlantUML w VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Plantuml<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#plantuml:lLNDRYD54BvRyZiK4HAEYEq3Uq92MZkEM2yXDZksBBXODJELITiptKDtJuOnGa8HAnw04-8nk78ZVX6UXEeU_oQnuBGtkxgwlg_g-whdjR6eRP6bpSP7GaPf4HFSMPkRpxjTFh8YwjmBKs3Qpb5ZB9Ai4wcicwSetQssiN4gmkxbg_ROXQPVNtSpD9OqX-QNIbeKadGdVnb1Ozb9XBqhmiAGZZYTfFK0jiWnrf_jWGIVjcyvesroBIoPBKvCz-xCT54cHOeV1ck1z_X1W79bRAB9V9zku9gDwzwte-baFXcDvuFHxAPrlWlDXfCty-khBwzk1YxQR5XXKuA1m4HZ1ajFXVJVVvPm-GhY5C5K39SLCEGJBSb27-LIoCHT7fCsIhQYmbYLaRw0iwzImQr0hgiIhQpE3aBA28nnyVW-gc11iLIG5Y6Kul7tY1OU6K8khSegkkkSUNA1nvxtLI5Zr5LBR3ZCmvh3l2R787NcCv8E_uOhRhg0M36r5INfu_iOfS0QLd2SVp1b5yhN3qnThV-81DE07vkDdKbR9aUksCjJiSHeWNKVncebMOiI7TnRrZs8jCWjV0gzsd0kFgRrWwp0jt1B2mF5-g_AShkIQy6sCrLIeZPpy1JuwiUryb-SRUphPhEdbAbGf3J7F3zYviFICnAZeDkJiLOYXjOxmiZ23Q_jFPsxqn4Bp-nNIYBS5d8PBVXNwlf__DNDgwPPG0bMup8In4h6R10E7tBJhkunCyp5CrgzyN0x91vFm9Tb0dsbh8iETxFXD7WRZ6wwRoQJSU0vi3YL5sy5AiJz7AkZGHvISXjun6WGjcAq6A8XHklZ2e5Tm7Rp-jHh57npxVynK7Idoc91BeV0a5c82oP0jwH9HXm_nBtmr0nRH_e1cI9JvSvXXwpsw-gu_RItUIjIcauw-y0IaAmVU47hxHeQAmNLMxMDRzskGYPK94LzwjjO-cNah0jFZEVeP9M6bLsGtxhDpbtzO5kKeKYVCQ6s2pligI_F6wEv9-VR-eXLpf3z13CA8I3DxnGPQFLc0GHNmRapLLcPoitAhPkofI0ThsZzosRjFu5tbB9TgDdW7mVFIxr-K-y6Hy2xmzqvJZjQYHFPljJUeREAP_l0QdjtxfotpJwi-BylxH8FJ3UAerLbdQi4h3Z1U8CfNs3Gl-mw-psz_h8lliEyidw2NUWjBNz_nShDx3-uFD5qLWknKQxUhwDPEJLcPeahzinIGB7axBY0biet3mN1Fp__nYfco4xOVk4XfPnToIloe7Z-_99GIXaxhtAV8gpcWmEvJhpgkyoJh_uBWzbScZxnxcc8PkCroPY_c_y2\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">\r\n@startuml\r\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Container.puml\r\n!include https:\/\/raw.githubusercontent.com\/tupadr3\/plantuml-icon-font-sprites\/master\/devicons\/angular.puml\r\n!include https:\/\/raw.githubusercontent.com\/tupadr3\/plantuml-icon-font-sprites\/master\/devicons\/java.puml\r\n!include https:\/\/raw.githubusercontent.com\/tupadr3\/plantuml-icon-font-sprites\/master\/devicons\/postgresql.puml\r\n\r\nLAYOUT_TOP_DOWN()\r\nLAYOUT_WITH_LEGEND()\r\n\r\ntitle Diagram kontener\u00f3w C4 dla systemu Internet Banking\r\n\r\nPerson(customer, \"Klient prywatny\", \"Klient posiadaj\u0105cy jedno lub wi\u0119cej kont bankowych.\")\r\n\r\nSystem_Boundary(internet_banking_system, \"System Internet Banking\", \"Nowy system do przegl\u0105dania kont i dokonywania p\u0142atno\u015bci.\") {\r\nContainer(spa, \"Aplikacja jednostronicowa\", \"JavaScript + Angular\", \"Pe\u0142ny interfejs u\u017cytkownika internetowego bankowo\u015bci\", $sprite=\"angular\")\r\nContainer(mobile_app, \"Aplikacja mobilna\", \"iOS\/Android (React Native)\", \"Ograniczona funkcjonalno\u015b\u0107 do u\u017cytku w trakcie podr\u00f3\u017cy\", $sprite=\"react\")\r\nContainer(api_app, \"Aplikacja API\", \"Java + Spring Boot\", \"Interfejs API JSON\/HTTPS u\u017cywany przez oba interfejsy u\u017cytkownika\", $sprite=\"java\")\r\nContainerDb(database, \"Baza danych\", \"PostgreSQL\", \"Przechowuje dane sesji, preferencje u\u017cytkownika, przes\u0142ane podsumowania kont\", $sprite=\"postgresql\")\r\n}\r\n\r\nSystem(core_banking_system, \"System bankowo\u015bci g\u0142\u00f3wny\", \"Istniej\u0105cy g\u0142\u00f3wny system obs\u0142uguj\u0105cy dane klient\u00f3w, konta i transakcje.\")\r\nSystem_Ext(email_system, \"System e-mail\", \"Us\u0142uga prostego e-maila Amazon Web Services (AWS SES) do wysy\u0142ania potwierdze\u0144.\")\r\n\r\n' Relacje\r\nRel(customer, spa, \"U\u017cywa\", \"HTTPS\")\r\nRel(customer, mobile_app, \"U\u017cywa\", \"HTTPS\")\r\nRel(spa, api_app, \"Wywo\u0142uje\", \"JSON\/HTTPS\")\r\nRel(mobile_app, api_app, \"Wywo\u0142uje\", \"JSON\/HTTPS\")\r\nRel(api_app, database, \"Odczytuje i zapisuje do\", \"JDBC\/SQL\")\r\nRel(api_app, core_banking_system, \"Zapytania \/ Aktualizacje\", \"JSON\/HTTPS\")\r\nRel(api_app, email_system, \"Wysy\u0142a e-mail przez\", \"HTTPS\")\r\n\r\n' Wskaz\u00f3wki uk\u0142adu (opcjonalne \u2013 pomaga PlantUML lepiej u\u0142o\u017cy\u0107 elementy)\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\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#plantuml:lLNDRYD54BvRyZiK4HAEYEq3Uq92MZkEM2yXDZksBBXODJELITiptKDtJuOnGa8HAnw04-8nk78ZVX6UXEeU_oQnuBGtkxgwlg_g-whdjR6eRP6bpSP7GaPf4HFSMPkRpxjTFh8YwjmBKs3Qpb5ZB9Ai4wcicwSetQssiN4gmkxbg_ROXQPVNtSpD9OqX-QNIbeKadGdVnb1Ozb9XBqhmiAGZZYTfFK0jiWnrf_jWGIVjcyvesroBIoPBKvCz-xCT54cHOeV1ck1z_X1W79bRAB9V9zku9gDwzwte-baFXcDvuFHxAPrlWlDXfCty-khBwzk1YxQR5XXKuA1m4HZ1ajFXVJVVvPm-GhY5C5K39SLCEGJBSb27-LIoCHT7fCsIhQYmbYLaRw0iwzImQr0hgiIhQpE3aBA28nnyVW-gc11iLIG5Y6Kul7tY1OU6K8khSegkkkSUNA1nvxtLI5Zr5LBR3ZCmvh3l2R787NcCv8E_uOhRhg0M36r5INfu_iOfS0QLd2SVp1b5yhN3qnThV-81DE07vkDdKbR9aUksCjJiSHeWNKVncebMOiI7TnRrZs8jCWjV0gzsd0kFgRrWwp0jt1B2mF5-g_AShkIQy6sCrLIeZPpy1JuwiUryb-SRUphPhEdbAbGf3J7F3zYviFICnAZeDkJiLOYXjOxmiZ23Q_jFPsxqn4Bp-nNIYBS5d8PBVXNwlf__DNDgwPPG0bMup8In4h6R10E7tBJhkunCyp5CrgzyN0x91vFm9Tb0dsbh8iETxFXD7WRZ6wwRoQJSU0vi3YL5sy5AiJz7AkZGHvISXjun6WGjcAq6A8XHklZ2e5Tm7Rp-jHh57npxVynK7Idoc91BeV0a5c82oP0jwH9HXm_nBtmr0nRH_e1cI9JvSvXXwpsw-gu_RItUIjIcauw-y0IaAmVU47hxHeQAmNLMxMDRzskGYPK94LzwjjO-cNah0jFZEVeP9M6bLsGtxhDpbtzO5kKeKYVCQ6s2pligI_F6wEv9-VR-eXLpf3z13CA8I3DxnGPQFLc0GHNmRapLLcPoitAhPkofI0ThsZzosRjFu5tbB9TgDdW7mVFIxr-K-y6Hy2xmzqvJZjQYHFPljJUeREAP_l0QdjtxfotpJwi-BylxH8FJ3UAerLbdQi4h3Z1U8CfNs3Gl-mw-psz_h8lliEyidw2NUWjBNz_nShDx3-uFD5qLWknKQxUhwDPEJLcPeahzinIGB7axBY0biet3mN1Fp__nYfco4xOVk4XfPnToIloe7Z-_99GIXaxhtAV8gpcWmEvJhpgkyoJh_uBWzbScZxnxcc8PkCroPY_c_y2\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com#plantuml:lLNDZjis4BuRy3jCZGBLeklLeJaLA12lxJPRE6idih7eoHX9OvijHR8aPSSf2lGTyePvaWuf-M_ZHNlAJHpEpFSDvvlHQ-VH-hgItSutGXMoBWastXltOvhobHV5tLQu6cNVeCLIhAkxGbUfaQX2LD_vKeey7Rxgpu9fyNQILkWyMJOjXrfv58hidRcEO75tjnP-K-Ur8rkmEoaV0NnjiBG_d804t_PNxD5tnWfFxe1JqZRSkHJLkfRuTR1-nor-5I2ZdLzRSd_A5gxRcGn-coxco_bqjXnDdnwJcwFfwM7-PZaP_p9-70Lhj-E5bmJ3Lt3i18m4hYrMiD8M7fYQLUJX7jKVGgqXspDw5I9dP9rMIL4xhokojz1hB2YFpiFshiUN0pXumevB1wq86A3Ibi0S0dCE12mANIllxdgHOOEul6TRYNQVY9RICczGbYuwCCGBP0FwV4EWQ0UDRonjAsWNd0vmWAg42cEWmNr53GNugzivlatY37AsZ7qazMUu9XWO8qN1Ow1L0FgLsvuLLXWFtyEWqLkm_rnB2GVgq5A7nGFVVTjqzgTUAyzGzWcnqhcGj4HZEClRU0YO8QUOPkb0bLQB4fBtX8M7HoQofPjmEn4LPorXLQiYi4Cf_3vMpeho6-glDR3ypWdOaECI7ereiGUpXsl5SfaPXtCnzrhxQCscZ-cR-NoMGOXXZ1BoFUIQkxwoGSgaIdUE6sRb0dQK9oLwpD4H9nordo7vh55xzcuIJfbd-JXmv1nJWX1p6m0j64ihigGAShTGOB5X4csdmTLLXLRG1OVJ60KcVv-KbnICyQNOXa6uNmfj_44u7qmL5xBYCUAfPs79O3eEGCFp8BpRg3nlKJcCdMgKt-f-_C4dnCda2NeSZcUOWme_SlLFb4D6bjS2FqacAiDAQLqRAoI3fmooSNOJPU2u3P6MLYjXApn1TplVmNkIZMKZZEjs-7WswiqOB5nymbxiTOYxTBfGxbNVcEQai25AwIuLTF0yp_M_0evEPphY4IbTa60LNtmNzobu7JECxeTfKDNp-ElTVrTJ412ai32CGF_5uba7ip01ZP7t45uyJ7Zy2UvrxM4ZmbvAj6dc5px_ymas98s3mwyKqB9kU0sHfBYn82VFIoPiVDmlHsVjU65l7ZrVtAjNNg0DMZnJviiGtSvhBfb_J_y2\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edytuj PlantUML w VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p><strong>Podstawa<\/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 systemie g\u0142\u00f3wnym). Ten diagram jest jedynym \u017ar\u00f3d\u0142em wiarygodnych informacji dotycz\u0105cych decyzji technologicznych na najwy\u017cszym poziomie 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\u017c jeden kontener (zazwyczaj najbardziej z\u0142o\u017cony \u2013 aplikacj\u0119 API) i poka\u017c jego g\u0142\u00f3wne komponenty logiczne. Odbiorcy: zespo\u0142y programist\u00f3w.<\/p>\n<p><strong>Przyk\u0142ad: Komponenty wewn\u0105trz aplikacji API<\/strong>:<\/p>\n<ul>\n<li>Kontroler kont (Spring MVC)<\/li>\n<li>Kontroler uwierzytelniania<\/li>\n<li>Kontroler resetowania has\u0142a<\/li>\n<li>Sk\u0142adnik zabezpiecze\u0144 (obs\u0142uguje uwierzytelnianie, JWT itp.)<\/li>\n<li>Sk\u0142adnik zarz\u0105dzania kontami (koordynuje wywo\u0142ania do systemu bankowo\u015bci g\u0142\u00f3wnej)<\/li>\n<li>Sk\u0142adnik powiadomie\u0144 e-mail<\/li>\n<\/ul>\n<p><strong>Diagram sk\u0142adnik\u00f3w PlantUML C4<\/strong>\u00a0(skupiony na aplikacji 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<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com#plantuml:fLLDJzj04BqZyH-cEGKfa4jFFP44L4048XnAUuh6ziRPTZ-itNKeglhVExEsOuVIj5AH8fpTyNjlvxtPdFk0BbHQ7H-zaoPJLIvW4qBfFup7j1LaThQLla9rMgB3N1RwBBDwN2eq_DQf3xcIwNZs_dJ1Iu_psx567uIZfTNCwj8QOS9P6HcEZsudN-uVbwkdw-NLwlRou-NTnV24ruCCIi2k7dA9XKCDQ-lWsX2S4G6cQBv9Kq3oGWGQJc6ok8P9MIgPaL1h66XcJK1fX1lw4aSmIEW5GbvW8Vgb0zhwYblqcPDb03GvVOfAeUETXRDRcGiFg1I4ZG3PIaWR2UlAP8o3IeON21QooWUhXVEmbSZlI0VF8eNKsMSltDdWfAzDixIvJQMAgfZpCsfqqkpJWv9Q1f63hr9Fz7Rz7t9qpPUBhSp4lg2BT9Ydn7o10LFqWbKy28Kr9hJBa6GReP5tas0TAQpeRE148NrmiPgqaMSwFezWWtv3wh4Y1IOqlOVCYPo_el8Zm2mJteEo1NqH8Ol2QeTNbz_3KAUUUqKornG8yIe4FIdiLTEVZ1PslUa90anj5RhcH7PRcK1FfDzuZ5ti2UdrQ3MboXpTon1BIRIlmZSuWH_7Hq1_knGFE_J1f7a4ndDMAH6JbfIEDSu_pVQDhwl9Tisfu1LAQ8eqOjIjFOEZp5Uqr6wctE_w8U8hWbUjdMI59EyysSBlQJGqF9gGHb55iD-4WK9GIoBm6mB83X5YX3Yq2_J-sRhye8A9KZGeKK0yNuHeWbks09nbofzKRt1waLMEqi_8pMEts-ER2ZJz8-zdSmGtJylVZbWVV2U3KqrGRtM-zaqNEdIUmtpNmOEAxXrDLvmZafLHd6CZECyppdCRV5_VVdmpjZ6nPIFqhJJ4XX7y9V-7Enlakel4dzKamkI-EtFjHyIgmzXoRuNh09jzzYcPBnVD2B4Ukarwuz0pwv5oregEHJ6y1mgQS1s2wBjGtn-nX6zP-dswMYuNIR--wL2y0Hy4vh7ovc8wuwAVV0AkYhydlObk8M-I-xiEiwkiX_0lLUsa_BbC_okh_XTI_LVES_ATVgn_0G00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edytuj PlantUML w VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Plantuml<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#plantuml:dPRDRjj64CVl1lmEMvzaGBOkFVKKMpAQE7OiL7ATzYACbXDggVqWTfTXoQ908TJe0-Hav35wxQtIY_H9EalI5gcehb511s4vE_ER_tnGhvm7wpCb3m--4fhBB4Asy3vrtmm6zCWBVlfHk0paIGeM8X6hKsxK89MWmwqJvoCfveFXroVZS7HxVJLGu3nQEfeDZKgDHkrFqoh2uS7LsGytjzFPtPlfwzdLnRSNxqQzut3kXPV8HW9Y2ugvvMO5aHRBl_x8MII1kO9SgepDGIzDRZQVkM12KnIDtkIOiBz__SGWbM89F05sDduJd0wDzY0qsfvBeS-EpfuC4eoqSTuQBRZ9uOWU9l0H7BSYzKmmq74cmORpaGaAyH9Oxah2M0fa7pAzv0d-EqvWNaf1cOSCKfFQ4aic-8A5Nx5StqTWb-k7rgtr_UdHSPjPTP6LcGkfAzJteC0AtQKpf1nbKngzlcUyN3ziFgz_RqZ5_o7DR4cO9MfAk0wENSBHl1VDYU4SA7m4kk2BW3JX2rJWAMHPDCVCeWHU91gJO36c67nXyema5Fg3iGg2ceRC4gIgG23EDdyMdfZhBkYp1JYw0Xg3JsHPBj2MXKUf1IJhUuvz9aqiM4IAh1_IZ0cVLhoJgdTc5p_vdfgx05WTi7Yp8iUwQBGfTicsvKvDH2hdf5SRjxv6ECONf3SHR8NiioMfr6UKYtPGLU0HfoNWxDnacXgXw44gEiMc1ZuwPZyV7Z3wF4rH3pYd6puayPQSM2FHLf4gtLFgYPXTVp_iDaQWprIGJa1bJFtjG4RTqbTiEz4ol-X4wcXEto-ZtipTPfN5GJugHXKJsvMabYwXxglgaKENW29nM8maI7F1coNg_KmM7VeEL7NIP4SzGelZIwmViSo1icsH6CKqj2vZS_bf1F14WP1x41pop0fVX2YFUugoccEP2kGbRdvh0PmZw1rXTbIaljsNExkycv8iZrrVy-5cjQzETLUeMFaTfYUbwyAJqdlGtXfZeq9NBL_GYbXLzf7PktIReQ75aJEECcCcnNfUTHE3B_OWOj2o0vUQN41ab22z6gttiDqLhWX5gGsGbNN5Q7gRQWbov8EWzQ9IDGEhIpYvdewRcGiutw5iJL2hZBVK5lGIE6wPLQt_h4dJYS-xQLUcNZwDKTZYzAfyFPsE9-qRZL3LNhs9EBK9rILONuxEXy7mbv1DiAnUQQs5i7LyERbvj_MyjQt7-J_j7aViEKFryjZgPQ7L2oA_GXtH_uX_0000\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">\r\n@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 Diagram sk\u0142adnik\u00f3w dla systemu bankowo\u015bci internetowej \u2013 aplikacja API\r\n\r\nContainer(spa, \"Aplikacja jednostronicowa\", \"javascript i angular\", \"Dostarcza wszystkie funkcje bankowo\u015bci internetowej dla klient\u00f3w poprzez ich przegl\u0105dark\u0119 internetow\u0105.\")\r\nContainer(ma, \"Aplikacja mobilna\", \"Xamarin\", \"Dostarcza ograniczon\u0105 cz\u0119\u015b\u0107 funkcji bankowo\u015bci internetowej dla klient\u00f3w poprzez ich urz\u0105dzenie mobilne.\")\r\nContainerDb(db, \"Baza danych\", \"Schemat bazy danych relacyjnej\", \"Przechowuje informacje o rejestracji u\u017cytkownik\u00f3w, hashowane dane uwierzytelniaj\u0105ce, logi dost\u0119pu itp.\")\r\nSystem_Ext(mbs, \"System g\u0142\u00f3wny bankowy\", \"Przechowuje wszystkie podstawowe informacje bankowe dotycz\u0105ce klient\u00f3w, kont, transakcji 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 bankowo\u015bci g\u0142\u00f3wnej 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\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#plantuml:dPRDRjj64CVl1lmEMvzaGBOkFVKKMpAQE7OiL7ATzYACbXDggVqWTfTXoQ908TJe0-Hav35wxQtIY_H9EalI5gcehb511s4vE_ER_tnGhvm7wpCb3m--4fhBB4Asy3vrtmm6zCWBVlfHk0paIGeM8X6hKsxK89MWmwqJvoCfveFXroVZS7HxVJLGu3nQEfeDZKgDHkrFqoh2uS7LsGytjzFPtPlfwzdLnRSNxqQzut3kXPV8HW9Y2ugvvMO5aHRBl_x8MII1kO9SgepDGIzDRZQVkM12KnIDtkIOiBz__SGWbM89F05sDduJd0wDzY0qsfvBeS-EpfuC4eoqSTuQBRZ9uOWU9l0H7BSYzKmmq74cmORpaGaAyH9Oxah2M0fa7pAzv0d-EqvWNaf1cOSCKfFQ4aic-8A5Nx5StqTWb-k7rgtr_UdHSPjPTP6LcGkfAzJteC0AtQKpf1nbKngzlcUyN3ziFgz_RqZ5_o7DR4cO9MfAk0wENSBHl1VDYU4SA7m4kk2BW3JX2rJWAMHPDCVCeWHU91gJO36c67nXyema5Fg3iGg2ceRC4gIgG23EDdyMdfZhBkYp1JYw0Xg3JsHPBj2MXKUf1IJhUuvz9aqiM4IAh1_IZ0cVLhoJgdTc5p_vdfgx05WTi7Yp8iUwQBGfTicsvKvDH2hdf5SRjxv6ECONf3SHR8NiioMfr6UKYtPGLU0HfoNWxDnacXgXw44gEiMc1ZuwPZyV7Z3wF4rH3pYd6puayPQSM2FHLf4gtLFgYPXTVp_iDaQWprIGJa1bJFtjG4RTqbTiEz4ol-X4wcXEto-ZtipTPfN5GJugHXKJsvMabYwXxglgaKENW29nM8maI7F1coNg_KmM7VeEL7NIP4SzGelZIwmViSo1icsH6CKqj2vZS_bf1F14WP1x41pop0fVX2YFUugoccEP2kGbRdvh0PmZw1rXTbIaljsNExkycv8iZrrVy-5cjQzETLUeMFaTfYUbwyAJqdlGtXfZeq9NBL_GYbXLzf7PktIReQ75aJEECcCcnNfUTHE3B_OWOj2o0vUQN41ab22z6gttiDqLhWX5gGsGbNN5Q7gRQWbov8EWzQ9IDGEhIpYvdewRcGiutw5iJL2hZBVK5lGIE6wPLQt_h4dJYS-xQLUcNZwDKTZYzAfyFPsE9-qRZL3LNhs9EBK9rILONuxEXy7mbv1DiAnUQQs5i7LyERbvj_MyjQt7-J_j7aViEKFryjZgPQ7L2oA_GXtH_uX_0000\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com#plantuml:fLLDJzj04BqZyH-cEGKfa4jFFP44L4048XnAUuh6ziRPTZ-itNKeglhVExEsOuVIj5AH8fpTyNjlvxtPdFk0BbHQ7H-zaoPJLIvW4qBfFup7j1LaThQLla9rMgB3N1RwBBDwN2eq_DQf3xcIwNZs_dJ1Iu_psx567uIZfTNCwj8QOS9P6HcEZsudN-uVbwkdw-NLwlRou-NTnV24ruCCIi2k7dA9XKCDQ-lWsX2S4G6cQBv9Kq3oGWGQJc6ok8P9MIgPaL1h66XcJK1fX1lw4aSmIEW5GbvW8Vgb0zhwYblqcPDb03GvVOfAeUETXRDRcGiFg1I4ZG3PIaWR2UlAP8o3IeON21QooWUhXVEmbSZlI0VF8eNKsMSltDdWfAzDixIvJQMAgfZpCsfqqkpJWv9Q1f63hr9Fz7Rz7t9qpPUBhSp4lg2BT9Ydn7o10LFqWbKy28Kr9hJBa6GReP5tas0TAQpeRE148NrmiPgqaMSwFezWWtv3wh4Y1IOqlOVCYPo_el8Zm2mJteEo1NqH8Ol2QeTNbz_3KAUUUqKornG8yIe4FIdiLTEVZ1PslUa90anj5RhcH7PRcK1FfDzuZ5ti2UdrQ3MboXpTon1BIRIlmZSuWH_7Hq1_knGFE_J1f7a4ndDMAH6JbfIEDSu_pVQDhwl9Tisfu1LAQ8eqOjIjFOEZp5Uqr6wctE_w8U8hWbUjdMI59EyysSBlQJGqF9gGHb55iD-4WK9GIoBm6mB83X5YX3Yq2_J-sRhye8A9KZGeKK0yNuHeWbks09nbofzKRt1waLMEqi_8pMEts-ER2ZJz8-zdSmGtJylVZbWVV2U3KqrGRtM-zaqNEdIUmtpNmOEAxXrDLvmZafLHd6CZECyppdCRV5_VVdmpjZ6nPIFqhJJ4XX7y9V-7Enlakel4dzKamkI-EtFjHyIgmzXoRuNh09jzzYcPBnVD2B4Ukarwuz0pwv5oregEHJ6y1mgQS1s2wBjGtn-nX6zP-dswMYuNIR--wL2y0Hy4vh7ovc8wuwAVV0AkYhydlObk8M-I-xiEiwkiX_0lLUsa_BbC_okh_XTI_LVES_ATVgn_0G00\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edytuj PlantUML w VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p><strong>Podstawa<\/strong>: Ten poziom pokazuje, jak s\u0105 rozdzielone odpowiedzialno\u015bci (oddzielanie obowi\u0105zk\u00f3w), co znacznie przyspiesza onboardowanie nowych programist\u00f3w. Rysujesz diagramy sk\u0142adnik\u00f3w tylko dla kontener\u00f3w wystarczaj\u0105co skomplikowanych, by tego wymaga\u0142y.<\/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.). Odbiorcy: 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<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com#plantuml:XLBTQiCW5BuNV0V9Rbe6XVsmbLsCfbbwiQinjWSGFKqbnbEEfgMClViqJKiJA1CH_CxtSuwuy45IQ1lBcRBI-pSZAv8DPvpvshYjZ1VnmnbXwxH2Sa1YpbbEXFi2BPAuUUnMZwtGXH6-HD908v2p8iKbwq7zBhz_U2uZA5LTTQ5zePoN-Ug9iuk04_Uts_q08ilRi04NZ9B1e2iYdz1Qe2o5tLgiZ9ie0fquqlff10dM17xpXJMuoNHezxuF7Vv1k3FwP5D1V0aPu2XfFL3osKbhz1aDwHovVKVc9spHcu1qE7gjZTFBGweusS0v_zeSOZPx5UEkn8l8OXS--qStpBzGBS3f-0t-0000\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edytuj PlantUML w VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Plantuml<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#plantuml:XLBTIiCm5BuFv1r2lTaG1lwWmmjPLxiBhqJq0K9preMcEUCaNIdYctdhUvbqtR05COH0llFzd1EoSbwIRsh3MM6aSqzQbYHhpZXpbRPx6IxYWpF2nge2oGA99MSf4ROP6YHnSTkl0TkWzHDyZQI09Y1dMOoBrgFwLNfzSvy7K1PLsOSEXNoPfvixpdu5dBYV_Hu644dQ-1rOhmlfDTeiy0cD0KfYsAN1KjjPGQ0YHnet3o31bi3jth02EvkFxPvRt-ClX0UjJZObX9UG7ewInW55duCqMfrH7y-9stjWli8UdVP8tT5hgwrQTx5YPGtd_B_c48l5evXs9Hv4qdn_TQrC_b6EEnZfLc1L-0e_\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">\r\n@startuml\r\nclassDiagram\r\n\r\nskinparam {\r\nroundcorner 8\r\nArrowColor #444444\r\nArrowFontColor #444444\r\nBorderColor #444444\r\n\r\nClass {\r\nBorderColor #1A237E\r\nBackgroundColor #E8EAF6\r\nFontColor #1A237E\r\n}\r\n}\r\n\r\nclass \"AuthenticationController\" {\r\n+login(credentials)\r\n+refreshToken()\r\n}\r\n\r\nclass \"JwtTokenProvider\" {\r\n+generateToken(user)\r\n+validateToken(token)\r\n}\r\n\r\nclass \"UserRepository\" {\r\n+findByUsername()\r\n}\r\n\r\nAuthenticationController ..&gt; JwtTokenProvider : \"u\u017cywa\"\r\nAuthenticationController ..&gt; UserRepository : \"u\u017cywa\"\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#plantuml:XLBTIiCm5BuFv1r2lTaG1lwWmmjPLxiBhqJq0K9preMcEUCaNIdYctdhUvbqtR05COH0llFzd1EoSbwIRsh3MM6aSqzQbYHhpZXpbRPx6IxYWpF2nge2oGA99MSf4ROP6YHnSTkl0TkWzHDyZQI09Y1dMOoBrgFwLNfzSvy7K1PLsOSEXNoPfvixpdu5dBYV_Hu644dQ-1rOhmlfDTeiy0cD0KfYsAN1KjjPGQ0YHnet3o31bi3jth02EvkFxPvRt-ClX0UjJZObX9UG7ewInW55duCqMfrH7y-9stjWli8UdVP8tT5hgwrQTx5YPGtd_B_c48l5evXs9Hv4qdn_TQrC_b6EEnZfLc1L-0e_\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com#plantuml:XLBTQiCW5BuNV0V9Rbe6XVsmbLsCfbbwiQinjWSGFKqbnbEEfgMClViqJKiJA1CH_CxtSuwuy45IQ1lBcRBI-pSZAv8DPvpvshYjZ1VnmnbXwxH2Sa1YpbbEXFi2BPAuUUnMZwtGXH6-HD908v2p8iKbwq7zBhz_U2uZA5LTTQ5zePoN-Ug9iuk04_Uts_q08ilRi04NZ9B1e2iYdz1Qe2o5tLgiZ9ie0fquqlff10dM17xpXJMuoNHezxuF7Vv1k3FwP5D1V0aPu2XfFL3osKbhz1aDwHovVKVc9spHcu1qE7gjZTFBGweusS0v_zeSOZPx5UEkn8l8OXS--qStpBzGBS3f-0t-0000\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edytuj PlantUML w VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p>W rzeczywistych projektach cz\u0119sto pomijasz poziom 4 i zamiast tego 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<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com#plantuml:VP9FRzD04CNlblmTXbpgIiGMK2wScjff2ogjLGTwZ2QxqsJL_QVTCH1LV7VMTee2I4XxyPlVMxytslF86BWtEizUAIjqBmbsp3v-gAeqOYNARohsgESU0qgrDQLmfl8QxU2QHvPQRQhwRDuEqfVFDvN1o1IIj6x8QxStPBdquo_oZ1LhWcPlqIW1Kk4se8575-2hek-m4CBrbg7hZS6m7nmjXUXi8Vh8pb1u3RD9GGqNQ9-KtK9zcCrEuJdFQcSPbQLGH8y9xnAYQTxYbc3XlLOYrNBsRnYzIl2Y_VWVgDaKSfEe1Xat66aQT_jKsAoNFxWGBj0XLSBgzFKxv4JDJlFivz79itlIH-Mco6zAg5E4fmWdXut4ardI1_V0ZzGK-6q9LyiLL7ZW1knJTtTRNQzMRVTY6Dan-hiIxWab21GxaX2dHHzVFh9_5ZahuP9Ox40ZKsIGgVy_bYdw--5-xeE58SKBb9PqVVUmlbbUBM-R8WddP6Lw4hy0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edytuj PlantUML w VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Plantuml<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#plantuml:RPB1RjGm48RlaV8EmruQ93OHK2wSshAh0YtTY5s4r0kQsDRM6yUsR8V8gRZqmYlGv-YLMtVV2pjHeLiXvU3yy_tZ-MqVMOV6jOr8asTS4j5I1bVEQVksA4B9SP9_vxP5CTLeaF9ranFL55gWZAwfTLJmgdXtE2sZzENJUT6WTSm4wTkCQQ5ymwJBzR15cZZlsjqDp3Yk3JP0lSI6arvwe0BXAwUgRg5KrBQDwb1oX3Cb7KRhmgeAirhmqEy5JCw61MZZEtJIJvx3TPf4c4bcCginCCTQy1h91c73g5JM6IKv2OsVqAZv7drSVjWdJh3tCvIUN6Mq2cZuHw23C89B7q8tbwoJsrjdGfwCACDEKDPSheDXh4CL1DLvMEzkxk-wE7MQ_7ZqfSbd9k88VtEEGLxc4FBMaczl2MTmC1pAmIHKOeS7py2EMLxbS3fVGL57C78VbukBulrgLIuVEmPuIFGwXmKblNUuWJx85YK3_UyYsDFD1kj-oCCyN5t5cUb1uaQgplOidjB_lMEoDpbSTkR-RliJueWFP9gKgiRTx_FvwVnYjlsL1Us8IHgUqHy0\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">\r\n@startuml\r\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Deployment.puml\r\n\r\ntytu\u0142 Diagram dynamiczny dla Widoku Podsumowania Konta\r\n\r\nOsoba(klient, \"Klient prywatny\") {\r\nKontener(spa, \"Aplikacja jednostronicowa\") {\r\nKontener(api, \"Aplikacja API\") {\r\nKontenerBazyDanych(db, \"Baza danych\") {\r\nSystemZewn\u0119trzny(coreBanking, \"System bankowy g\u0142\u00f3wny\")\r\n}\r\n}\r\n}\r\n}\r\n\r\nRelacja(klient, spa, \"1. Klikni\u0119cie 'Konta'\", \"\")\r\nRelacja(spa, api, \"2. GET \/konta\", \"JSON\/HTTPS\")\r\nRelacja(api, db, \"3. Odczytaj zapisane podsumowanie\", \"\")\r\nRelacja(api, coreBanking, \"4. Pobierz najnowsze dane\", \"\")\r\nRelacja(api, spa, \"5. Zwr\u00f3\u0107 JSON\", \"\")\r\n\r\nPoka\u017cLEGEND\u0118()\r\n@enduml<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#plantuml:RPB1RjGm48RlaV8EmruQ93OHK2wSshAh0YtTY5s4r0kQsDRM6yUsR8V8gRZqmYlGv-YLMtVV2pjHeLiXvU3yy_tZ-MqVMOV6jOr8asTS4j5I1bVEQVksA4B9SP9_vxP5CTLeaF9ranFL55gWZAwfTLJmgdXtE2sZzENJUT6WTSm4wTkCQQ5ymwJBzR15cZZlsjqDp3Yk3JP0lSI6arvwe0BXAwUgRg5KrBQDwb1oX3Cb7KRhmgeAirhmqEy5JCw61MZZEtJIJvx3TPf4c4bcCginCCTQy1h91c73g5JM6IKv2OsVqAZv7drSVjWdJh3tCvIUN6Mq2cZuHw23C89B7q8tbwoJsrjdGfwCACDEKDPSheDXh4CL1DLvMEzkxk-wE7MQ_7ZqfSbd9k88VtEEGLxc4FBMaczl2MTmC1pAmIHKOeS7py2EMLxbS3fVGL57C78VbukBulrgLIuVEmPuIFGwXmKblNUuWJx85YK3_UyYsDFD1kj-oCCyN5t5cUb1uaQgplOidjB_lMEoDpbSTkR-RliJueWFP9gKgiRTx_FvwVnYjlsL1Us8IHgUqHy0\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com#plantuml:VP9FRzD04CNlblmTXbpgIiGMK2wScjff2ogjLGTwZ2QxqsJL_QVTCH1LV7VMTee2I4XxyPlVMxytslF86BWtEizUAIjqBmbsp3v-gAeqOYNARohsgESU0qgrDQLmfl8QxU2QHvPQRQhwRDuEqfVFDvN1o1IIj6x8QxStPBdquo_oZ1LhWcPlqIW1Kk4se8575-2hek-m4CBrbg7hZS6m7nmjXUXi8Vh8pb1u3RD9GGqNQ9-KtK9zcCrEuJdFQcSPbQLGH8y9xnAYQTxYbc3XlLOYrNBsRnYzIl2Y_VWVgDaKSfEe1Xat66aQT_jKsAoNFxWGBj0XLSBgzFKxv4JDJlFivz79itlIH-Mco6zAg5E4fmWdXut4ardI1_V0ZzGK-6q9LyiLL7ZW1knJTtTRNQzMRVTY6Dan-hiIxWab21GxaX2dHHzVFh9_5ZahuP9Ox40ZKsIGgVy_bYdw--5-xeE58SKBb9PqVVUmlbbUBM-R8WddP6Lw4hy0\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edytuj PlantUML w VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<p><strong>Diagram wdro\u017cenia<\/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<div class=\"vpascode-viewer-container vpascode-fancy-active\">\n<div class=\"vpascode-header\">\n<span class=\"vpascode-lang-label\">PlantUML<\/span><br \/>\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com#plantuml:ZL9DJzj04Br7yd_Ovb97gcC9zTGJ8Ow0Ag4k1d6qnlPWLkoNTjS9jEA_CuFJfWqzz6RFlFVclPaz3H5y7BHA9X-aQTNGeNY8qOKlUKwjADlvLeO1LER0GoTxFM-jpfq2mwmin4x99bz-paektMxMkOOGqLEfBj0f-wpHnBbx6v5CeemAnQ4X2Wcz1otkhHUNXeW6epW3yoXDBwfdajBCEp3gAzjX2hlmIKmN6dvO8-wm4HNwhMmnJAcyL7RefZFnypqFsnC2h9OdOZ54crKjA1vqxktWcBgMPdWQgKjh8aY3FWKdULXvAHREATdIMgnXz5VOWgYSPuapQ-DqbanUtW_r7PkzBYhcb3R4tcFrVNqqfcZIhY500H4Q2BWNU_bN_7O8qMhY88VcoFl2no366e-YlUGRsqY5nuc20-fNv5jXLaAFVoMR_GdLRmA47fKOk7UMJCRxrAkdcBRMu_viR8V-ZgueKciov-b3a_0ztHndB9HChb6DXiOzR-0HW-1jqt5K4D5obekRcx9YFAD_UVfVGdqxtd2CNQ2IM_GC5F41HNlOtOvUKkFjBg0_elvUmp5xR90LDwQfBhxTrUlL-UggIAbmYgQZj_yA\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 8px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edytuj PlantUML w VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<div class=\"vpascode-code-wrapper\">\n            <div class=\"vpascode-viewer-container vpascode-fancy-active\">\r\n                                <div class=\"vpascode-header\">\r\n                    <span class=\"vpascode-lang-label\">Plantuml<\/span>\r\n                    <a href=\"https:\/\/www.vpascode.com\/#plantuml:dLDDRzf04BqZyH-sd40gM8fwwYa1epGDgMW8Gkgb6jPJix0VrdgDQrUv8FK_DEhFw3Mtul_LMPiWqNBgoVRRUJDltbjVfWwiovHijru9pMKM8LivbwHlWu2EdE23hKWpaFq4B4GYLWDkL918q9xLJrqanJ8OlUbFFJI_cmGAKeUMeCyX9j8K2hKR9FM8TiiLBgjsB1GGMr0iZwofdb4BO944DYk8gZ9sewc3HcToZ0qRWjwOt5G_kV0j5lkd4glTuaZjGfw-Pfqh1QNHR85BDaEx5HpJ3i6ZbSeiT7hispagyWkgkRPP0WmoPnIuWfVQZqqt84qENjjuTE5RJOJElZQTRWr9r6Yxa0W_Ev5Y0tmDx6fwuqlVmvRMIQpGCHiQupgzTklnd00RUUttuSopfYPriSNPnydfb26KHGYwuAjkjAGw-YR3Qk3G-F6yCnbbc0jwnLj93mT4djjo_pqgFSWs3Ufdas_1dLaAgV6l5TC4JbPSOwH9g3LQS3B8ApZMAjy1JyfhICD1QBlLXFm9Sxr_ShRKHPSRYpvaCekOpJbRrgaNBAvslt_bkc1T1K9_eLk3J1hAHXSztxFTkaVf1pKwcpmM1TsNNRP6bjTlTOeK3OkCt_NTmyDqvialr1VP_yMUDvUWiIaq_e_YFX_34bjYBCbji1jnDFiVvj6q4p8S71G71t7Th3kbvQldoVXw_27S_-WITeawel_h3m00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 8px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n                                <div class=\"vpascode-code-wrapper\">\r\n                    <pre class=\"lang-plantuml\"><code class=\"language-plantuml\" data-language=\"plantuml\" class=\"language-plantuml\">\r\n@startuml\r\n!include https:\/\/static.visual-paradigm.com\/plantuml-stdlib\/C4-PlantUML\/master\/C4_Deployment.puml\r\n\r\ntytu\u0142 Diagram wdro\u017cenia dla Systemu Internetowego Bankowo\u015bci\r\n\r\nW\u0119ze\u0142Wdro\u017cenia(aws, \"Amazon Web Services\", \"Chmura\") {\r\nW\u0119ze\u0142Wdro\u017cenia(ec2, \"Grupa automatycznego skalowania EC2\", \"Linux\") {\r\nKontener(api, \"Aplikacja API\", \"Java Spring Boot\")\r\n}\r\nW\u0119ze\u0142Wdro\u017cenia(rds, \"RDS\", \"PostgreSQL\") {\r\nKontenerBazyDanych(db, \"Baza danych\")\r\n}\r\n}\r\n\r\nW\u0119ze\u0142Wdro\u017cenia(ustawienieKlienta, \"Urz\u0105dzenie klienta\", \"Web\/Mobilne\") {\r\nKontener(spa, \"Aplikacja jednostronicowa\")\r\nKontener(mobile, \"Aplikacja mobilna\")\r\n}\r\n\r\nSystemZewn\u0119trzny(coreBanking, \"System bankowy g\u0142\u00f3wny (mainframe lokalny)\")\r\n\r\nRelacja(spa, api, \"Wywo\u0142uje wywo\u0142ania API do\", \"HTTPS\")\r\nRelacja(mobile, api, \"Wywo\u0142uje wywo\u0142ania API do\", \"HTTPS\")\r\nRelacjaU(api, spa, \"Dostarcza do przegl\u0105darki klienta\")\r\nRelacjaU(api, mobile, \"Dostarcza do aplikacji mobilnej\")\r\n\r\nPoka\u017cLEGEND\u0118()\r\n@enduml\r\n<\/code><\/pre>                <\/div>\r\n                <div class=\"vpascode-actions\">\r\n                    <a href=\"https:\/\/www.vpascode.com\/#plantuml:dLDDRzf04BqZyH-sd40gM8fwwYa1epGDgMW8Gkgb6jPJix0VrdgDQrUv8FK_DEhFw3Mtul_LMPiWqNBgoVRRUJDltbjVfWwiovHijru9pMKM8LivbwHlWu2EdE23hKWpaFq4B4GYLWDkL918q9xLJrqanJ8OlUbFFJI_cmGAKeUMeCyX9j8K2hKR9FM8TiiLBgjsB1GGMr0iZwofdb4BO944DYk8gZ9sewc3HcToZ0qRWjwOt5G_kV0j5lkd4glTuaZjGfw-Pfqh1QNHR85BDaEx5HpJ3i6ZbSeiT7hispagyWkgkRPP0WmoPnIuWfVQZqqt84qENjjuTE5RJOJElZQTRWr9r6Yxa0W_Ev5Y0tmDx6fwuqlVmvRMIQpGCHiQupgzTklnd00RUUttuSopfYPriSNPnydfb26KHGYwuAjkjAGw-YR3Qk3G-F6yCnbbc0jwnLj93mT4djjo_pqgFSWs3Ufdas_1dLaAgV6l5TC4JbPSOwH9g3LQS3B8ApZMAjy1JyfhICD1QBlLXFm9Sxr_ShRKHPSRYpvaCekOpJbRrgaNBAvslt_bkc1T1K9_eLk3J1hAHXSztxFTkaVf1pKwcpmM1TsNNRP6bjTlTOeK3OkCt_NTmyDqvialr1VP_yMUDvUWiIaq_e_YFX_34bjYBCbji1jnDFiVvj6q4p8S71G71t7Th3kbvQldoVXw_27S_-WITeawel_h3m00\" \r\n                       target=\"_blank\" \r\n                       rel=\"noopener noreferrer\" \r\n                       class=\"vpascode-fancy-btn\">\r\n                        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-right: 6px;\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg>\r\n                        <span>Edit Plantuml in VPasCode<\/span>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n            \n<\/p><\/div>\n<div class=\"vpascode-actions\">\n<a class=\"vpascode-fancy-btn\" href=\"https:\/\/www.vpascode.com#plantuml:ZL9DJzj04Br7yd_Ovb97gcC9zTGJ8Ow0Ag4k1d6qnlPWLkoNTjS9jEA_CuFJfWqzz6RFlFVclPaz3H5y7BHA9X-aQTNGeNY8qOKlUKwjADlvLeO1LER0GoTxFM-jpfq2mwmin4x99bz-paektMxMkOOGqLEfBj0f-wpHnBbx6v5CeemAnQ4X2Wcz1otkhHUNXeW6epW3yoXDBwfdajBCEp3gAzjX2hlmIKmN6dvO8-wm4HNwhMmnJAcyL7RefZFnypqFsnC2h9OdOZ54crKjA1vqxktWcBgMPdWQgKjh8aY3FWKdULXvAHREATdIMgnXz5VOWgYSPuapQ-DqbanUtW_r7PkzBYhcb3R4tcFrVNqqfcZIhY500H4Q2BWNU_bN_7O8qMhY88VcoFl2no366e-YlUGRsqY5nuc20-fNv5jXLaAFVoMR_GdLRmA47fKOk7UMJCRxrAkdcBRMu_viR8V-ZgueKciov-b3a_0ztHndB9HChb6DXiOzR-0HW-1jqt5K4D5obekRcx9YFAD_UVfVGdqxtd2CNQ2IM_GC5F41HNlOtOvUKkFjBg0_elvUmp5xR90LDwQfBhxTrUlL-UggIAbmYgQZj_yA\" rel=\"noopener noreferrer\" target=\"_blank\"><br \/>\n<svg fill=\"none\" height=\"14\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2.5\" style=\"margin-right: 6px;\" viewbox=\"0 0 24 24\" width=\"14\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"><\/path><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"><\/path><\/svg><br \/>\n<span>Edytuj PlantUML w VPasCode<\/span><br \/>\n<\/a>\n<\/div>\n<\/div>\n<h3>Jak wykorzysta\u0107 t\u0119 studi\u0119 przypadku w praktyce<\/h3>\n<ol>\n<li>Zacznij od warsztatu: narysuj kontekst na tablicy.<\/li>\n<li>Iteruj do kontener\u00f3w i komponent\u00f3w przy u\u017cyciu PlantUML C4.<\/li>\n<li>Przechowuj diagramy w repozytorium kodu (jako kod!) aby by\u0142y zawsze aktualne.<\/li>\n<li>Automatycznie generuj \u017cywe dokumenty.<\/li>\n<\/ol>\n<p>Ten dok\u0142adny przyk\u0142ad Systemu Internetowego Bankowo\u015bci to oficjalny referencja stworzona przez Simona Browna i jest wykorzystywana w tysi\u0105cach organizacji na ca\u0142ym \u015bwiecie. Poprzez przestrzeganie tych krok\u00f3w posiadasz teraz kompletn\u0105, gotow\u0105 do produkcji dokumentacj\u0119 architektury, kt\u00f3r\u0105 ka\u017cdy \u2013 od CEO po nowego juniorowego programisty \u2013 mo\u017ce zrozumie\u0107 na odpowiednim poziomie szczeg\u00f3\u0142owo\u015bci.<\/p>\n<h3>Artyku\u0142y diagram\u00f3w 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 Visual Paradigm<\/strong><\/a>: Ten przewodnik wyja\u015bnia, jak wykorzysta\u0107 narz\u0119dzia wspierane przez sztuczn\u0105 inteligencj\u0119 do automatyzacji i poprawy wizualizacji modelu C4 w celu szybszego projektowania 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 C4 Studio Visual Paradigm do uproszczonej dokumentacji architektury<\/strong><\/a>: Ten artyku\u0142 opisuje wykorzystanie stacji z wzmocnion\u0105 sztuczn\u0105 inteligencj\u0105 do tworzenia czystej, skalowalnej i \u0142atwej do utrzymania dokumentacji 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 sterowanej przez sztuczn\u0105 inteligencj\u0119, 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-zasilonym C4 PlantUML Studio 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 sterowane przez sztuczn\u0105 inteligencj\u0119, 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 Visual Paradigm<\/strong><\/a>: Ten samouczek demonstruje wykorzystanie czatobota zasilanego przez sztuczn\u0105 inteligencj\u0119 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 z wykorzystaniem sztucznej inteligencji wspiera cztery podstawowe poziomy modelu C4 \u2013 Kontekst, Kontener, Komponent i Wdro\u017cenie \u2013 w celu zapewnienia kompleksowej dokumentacji.<\/li>\n<li><a href=\"https:\/\/updates.visual-paradigm.com\/releases\/ai-diagram-generator-complete-c4-model\/\"><strong>Generator diagram\u00f3w AI: Wersja z pe\u0142n\u0105 obs\u0142ug\u0105 modelu C4<\/strong><\/a>: Ta aktualizacja zawiera szczeg\u00f3\u0142owe informacje o zintegrowanych funkcjach opartych na 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 modelu C4 oparty na AI: Automatyzacja pe\u0142nego cyklu modelowania<\/strong><\/a>: Ten zas\u00f3b pokazuje, jak specjalistyczny czatbot oparty na AI wykorzystuje przekazy komunikacyjne, 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\u00f3lne czatboty AI w por\u00f3wnaniu do narz\u0119dzi C4 firmy Visual Paradigm<\/strong><\/a>: 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":12121,"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-12120","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: zastosowanie 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: zastosowanie 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=\"7 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: zastosowanie 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\":1409,\"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-1.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: zastosowanie 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-1.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-1.png\",\"contentUrl\":\"https:\/\/www.cybermedian.com\/pl\/wp-content\/uploads\/sites\/16\/2026\/03\/img_69a8e7e9e8ab5-1.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: zastosowanie 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: zastosowanie 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: zastosowanie 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":"7 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: zastosowanie 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":1409,"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-1.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: zastosowanie 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-1.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-1.png","contentUrl":"https:\/\/www.cybermedian.com\/pl\/wp-content\/uploads\/sites\/16\/2026\/03\/img_69a8e7e9e8ab5-1.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: zastosowanie 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\/12120","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=12120"}],"version-history":[{"count":0,"href":"https:\/\/www.cybermedian.com\/pl\/wp-json\/wp\/v2\/posts\/12120\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cybermedian.com\/pl\/wp-json\/wp\/v2\/media\/12121"}],"wp:attachment":[{"href":"https:\/\/www.cybermedian.com\/pl\/wp-json\/wp\/v2\/media?parent=12120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cybermedian.com\/pl\/wp-json\/wp\/v2\/categories?post=12120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cybermedian.com\/pl\/wp-json\/wp\/v2\/tags?post=12120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}