Architektura opiera si\u0119 na\u00a0modelu C4<\/strong>\u00a0(Kontekst, Kontenery, Komponenty, Kod), zapewniaj\u0105c hierarchiczny widok systemu od abstrakcji najwy\u017cszego poziomu a\u017c po infrastruktur\u0119 wdra\u017cania.<\/p>\n Cel:<\/strong>\u00a0Poka\u017c system w kontek\u015bcie jego u\u017cytkownik\u00f3w i zale\u017cno\u015bci zewn\u0119trznych.<\/p>\n Diagram odniesienia:<\/strong>\u00a0Obraz 4 (g\u0142\u00f3wny) i Obraz 1 (uproszczony widok).<\/p>\n System\u00a0System bankowo\u015bci internetowej<\/strong>\u00a0znajduje si\u0119 w granicach\u00a0Big Bank plc<\/strong>\u00a0przedsi\u0119biorstwa. Dzia\u0142a jako kana\u0142 cyfrowy dla\u00a0klienta bankowo\u015bci indywidualnej<\/strong>.<\/p>\n U\u017cytkownicy (aktorzy):<\/strong><\/p>\n Klient bankowo\u015bci indywidualnej:<\/strong>\u00a0G\u0142\u00f3wny u\u017cytkownik, kt\u00f3ry interakcje z systemem w celu przegl\u0105dania sald i dokonywania p\u0142atno\u015bci.<\/p>\n<\/li>\n Personel obs\u0142ugi klienta:<\/strong>\u00a0Pracownicy banku, kt\u00f3rzy pomagaj\u0105 klientom (pokazani na Obrazie 4).<\/p>\n<\/li>\n Personel biura tylnej:<\/strong>\u00a0Personel administracyjny i wsparcia (pokazany na Obrazie 4).<\/p>\n<\/li>\n<\/ul>\n<\/li>\n Systemy zewn\u0119trzne:<\/strong><\/p>\n System bankowy mainframe:<\/strong>\u00a0System \u017ar\u00f3d\u0142owy. Przechowuje wszystkie podstawowe informacje bankowe (klienci, konta, transakcje). System Internet Banking opiera si\u0119 na nim w celu uzyskania wiarygodnych danych.<\/p>\n<\/li>\n System poczty e-mail:<\/strong>\u00a0Wewn\u0119trzny system Microsoft Exchange u\u017cywany do wysy\u0142ania powiadomie\u0144 (np. resetowanie hase\u0142, potwierdzenia) do klient\u00f3w.<\/p>\n<\/li>\n Bankomat:<\/strong>\u00a0Oddzielny system oprogramowania umo\u017cliwiaj\u0105cy wyp\u0142aty got\u00f3wki (pokazany na Rysunku 4, aby przedstawi\u0107 szerszy ekosystem).<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n Kluczowe relacje:<\/strong>\u00a0Klient interakcjonuje z Systemem Internet Banking, kt\u00f3ry z kolei dzia\u0142a jako fasada dla starszego systemu mainframe w celu pobierania danych i przetwarzania p\u0142atno\u015bci.<\/p>\n Cel:<\/strong>\u00a0Poka\u017c wy\u017csze poziomy wybor\u00f3w technologicznych oraz spos\u00f3b dystrybucji odpowiedzialno\u015bci w obr\u0119bie systemu.<\/p>\n Diagram odniesienia:<\/strong>\u00a0Rysunek 2.<\/p>\n System Internet Banking\u201d z poziomu 1 jest roz\u0142o\u017cony na pi\u0119\u0107 r\u00f3\u017cnych kontener\u00f3w (jednostek wdra\u017calnych).<\/p>\n Aplikacja internetowa (Java i Spring MVC):<\/strong><\/p>\n Rola:<\/strong>\u00a0S\u0142u\u017cy jako punkt wej\u015bcia dla u\u017cytkownik\u00f3w internetowych.<\/p>\n<\/li>\n Funkcja:<\/strong>\u00a0Dostarcza zawarto\u015b\u0107 statyczn\u0105 (HTML\/CSS\/JS) oraz aplikacj\u0119 jednostronicow\u0105 (SPA) do przegl\u0105darki klienta przez HTTPS.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n Aplikacja jednostronicowa (JavaScript i Angular):<\/strong><\/p>\n Rola:<\/strong>\u00a0Logika po stronie klienta dzia\u0142aj\u0105ca w przegl\u0105darce.<\/p>\n<\/li>\n Funkcja:<\/strong>\u00a0Dostarcza pe\u0142ny zestaw funkcji bankowo\u015bci internetowej. Wykonuje wywo\u0142ania interfejsu API do serwera backendowego.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n Aplikacja mobilna (Xamarin):<\/strong><\/p>\n Rola:<\/strong>\u00a0Aplikacja po stronie klienta dla urz\u0105dze\u0144 mobilnych.<\/p>\n<\/li>\n Funkcja:<\/strong>Dostarcza ograniczony zestaw funkcji w por\u00f3wnaniu do aplikacji internetowej. R\u00f3wnie\u017c wykonywane s\u0105 wywo\u0142ania interfejsu API do zaplecza.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n Aplikacja API (Java i Spring MVC):<\/strong><\/p>\n Rola:<\/strong>\u00a0G\u0142\u00f3wna logika zaplecza.<\/p>\n<\/li>\n Funkcja:<\/strong>\u00a0Dostarcza interfejs API w formacie JSON\/HTTPS. Obs\u0142uguje uwierzytelnianie, logik\u0119 biznesow\u0105 oraz komunikacj\u0119 z systemami zewn\u0119trznymi (Baza danych, Mainframe, Email).<\/p>\n<\/li>\n<\/ul>\n<\/li>\n Baza danych (schemat Oracle):<\/strong><\/p>\n Rola:<\/strong>\u00a0Trwa\u0142e przechowywanie danych.<\/p>\n<\/li>\n Funkcja:<\/strong>\u00a0Przechowuje informacje o rejestracji u\u017cytkownika, hashowane dane logowania oraz dzienniki dost\u0119pu.Uwaga: Podstawowe dane bankowe pozostaj\u0105 w systemie Mainframe.<\/em><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n Kluczowa relacja:<\/strong>\u00a0Obie aplikacje \u2014 Web App (poprzez SPA) i aplikacja mobilna \u2014 komunikuj\u0105 si\u0119 z\u00a0Aplikacj\u0119 API<\/strong>. Nast\u0119pnie aplikacja API komunikuje si\u0119 z\u00a0Baz\u0105 danych<\/strong>\u00a0w celu danych lokalnych oraz z\u00a0Mainframe<\/strong>\u00a0w celu danych podstawowych bankowych.<\/p>\n Cel:<\/strong>\u00a0Zamierza przybli\u017cy\u0107 konkretny kontener (Aplikacj\u0119 API), aby pokaza\u0107 jego wewn\u0119trzne elementy budowlane.<\/p>\n Diagram odniesienia:<\/strong>\u00a0Obrazek 3.<\/p>\n Ten diagram rozk\u0142ada\u00a0Aplikacj\u0119 API<\/strong>\u00a0na kontener logicznych komponent\u00f3w.<\/p>\n Kontrolery (Spring MVC Rest Controllers):<\/strong>\u00a0Obs\u0142uguj\u0105 przychodz\u0105ce \u017c\u0105dania HTTP.<\/p>\n Kontroler logowania:<\/strong>\u00a0Obs\u0142uguje uwierzytelnianie u\u017cytkownika.<\/p>\n<\/li>\n Kontroler resetowania has\u0142a:<\/strong>\u00a0Obs\u0142uguje przep\u0142ywy odzyskiwania has\u0142a.<\/p>\n<\/li>\n Kontroler podsumowania kont:<\/strong>\u00a0Pobiera dane konta dla u\u017cytkownika.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n Sk\u0142adniki (Spring Beans):<\/strong>\u00a0Zawieraj\u0105 logik\u0119 biznesow\u0105.<\/p>\n Sk\u0142adnik zabezpiecze\u0144:<\/strong>\u00a0Obs\u0142uguje logowanie i zmian\u0119 hase\u0142. U\u017cywany przez kontrolery logowania i resetowania has\u0142a.<\/p>\n<\/li>\n Sk\u0142adnik e-mail:<\/strong>\u00a0Obs\u0142uguje wysy\u0142anie e-maili. U\u017cywany przez kontroler resetowania has\u0142a.<\/p>\n<\/li>\n Facade systemu bankowego Mainframe:<\/strong>\u00a0Odpowiednik zewn\u0119trznego systemu Mainframe. Przekszta\u0142ca wywo\u0142ania interfejsu API wewn\u0119trznych na format XML\/HTTPS wymagany przez starszy system Mainframe. U\u017cywany przez kontroler podsumowania kont.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n Kluczowa relacja:<\/strong>\u00a0Poni\u017csza\u00a0Kontroler podsumowania kont<\/strong>\u00a0korzysta z\u00a0Facade systemu bankowego Mainframe<\/strong>\u00a0w celu pobrania danych z zewn\u0119trznego systemu Mainframe, co pokazuje rozdzielenie odpowiedzialno\u015bci mi\u0119dzy warstw\u0105 interfejsu API a warstw\u0105 integracji.<\/p>\n Cel:<\/strong>\u00a0Poka\u017c, jak kontenery oprogramowania s\u0105 mapowane na infrastruktur\u0119 fizyczn\u0105.<\/p>\n Diagram odniesienia:<\/strong>\u00a0Obraz 5.<\/p>\n Ten diagram ilustruje \u015brodowisko uruchomieniowe.<\/p>\n Strona klienta:<\/strong><\/p>\n Urz\u0105dzenie mobilne:<\/strong>Uruchamia aplikacj\u0119 mobiln\u0105 (iOS\/Android).<\/p>\n<\/li>\n Komputer:<\/strong>Uruchamia przegl\u0105dark\u0119 internetow\u0105 (Chrome\/Firefox\/Safari\/Edge), kt\u00f3ra hostuje aplikacj\u0119 jednostronicow\u0105.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n Centrum danych Big Bank plc:<\/strong><\/p>\n Serwery internetowe (bigbank-web<\/strong>*):** w\u0119z\u0142y Ubuntu 16.04 LTS dzia\u0142aj\u0105ceApache Tomcat 8.x<\/strong>.<\/p>\n HostujeAplikacj\u0119 internetow\u0105<\/strong>orazaplikacj\u0105 API<\/strong>.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n Serwery baz danych (bigbank-db01\/02):<\/strong>w\u0119z\u0142y Ubuntu 16.04 LTS dzia\u0142aj\u0105ceOracle 12c<\/strong>.<\/p>\n Oracle \u2013 podstawowy:<\/strong>G\u0142\u00f3wna baza danych.<\/p>\n<\/li>\n Oracle \u2013 pomocniczy:<\/strong>Kopia zapasowa zapewniaj\u0105ca odporno\u015b\u0107\/wysok\u0105 dost\u0119pno\u015b\u0107.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n Kluczowe relacje:<\/strong>Aplikacja mobilna i przegl\u0105darka internetowa \u0142\u0105cz\u0105 si\u0119 przez internet zaplikacj\u0105 API<\/strong>hostowan\u0105 na Tomcat. Aplikacja API \u0142\u0105czy si\u0119 przez JDBC z klastrem bazy danych Oracle.<\/p>\n Na podstawie tego przypadku badawczego zastosowano nast\u0119puj\u0105ce zasady modelowania C4:<\/p>\n Poziomy abstrakcji:<\/strong>Model pomy\u015blnie przechodzi od \u201eKto go u\u017cywa?\u201d (kontekst) do \u201eZ czego si\u0119 sk\u0142ada?\u201d (kontenery) do \u201eJak jest zorganizowany?\u201d (komponenty) do \u201eGdzie dzia\u0142a?\u201d (wdro\u017cenie).<\/p>\n<\/li>\n Granice zakresu:<\/strong><\/p>\n Na poziomie 1 granica \u201eBig Bank plc\u201d jasno rozdziela systemy wewn\u0119trzne od aktor\u00f3w zewn\u0119trznych.<\/p>\n<\/li>\n Na poziomie 2 granica \u201eSystem Internetowy Bankowy\u201d hermetyzuje konkretny oprogramowanie tworzone, oddzielaj\u0105c je od starszego systemu Mainframe.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n Oddzielenie odpowiedzialno\u015bci:<\/strong><\/p>\n Frontend vs. Backend:<\/strong>Oddzielenie aplikacji jednostronicowej (frontend) od aplikacji API (backend) pozwala na niezale\u017cn\u0105 rozw\u00f3j i skalowanie.<\/p>\n<\/li>\n Oddzielenie danych:<\/strong>Wra\u017cliwe dane bazowe bankowe przechowywane s\u0105 w systemie Mainframe, podczas gdy System Internetowy Bankowy przechowuje tylko dane potrzebne do dost\u0119pu u\u017cytkownika w swojej w\u0142asnej bazie danych Oracle.<\/p>\n<\/li>\n<\/ul>\n<\/li>\n Neutralno\u015b\u0107 technologiczna (gdy to odpowiednie):<\/strong>Diagramy okre\u015blaj\u0105 technologie (Java, Angular, Oracle), gdy s\u0105 one istotne dla decyzji architektonicznej, ale skupiaj\u0105 si\u0119 przede wszystkim na\u00a0relacjach<\/em>i\u00a0odpowiedzialno\u015bciach<\/em>blok\u00f3w.<\/p>\n<\/li>\n Oznaczenia:<\/strong>U\u017cywana jest standardowa notacja C4:<\/p>\n Osoba:<\/strong>Postacie z drutu (lub ko\u0142a w tej konkretnej stylizacji renderowania).<\/p>\n<\/li>\n System oprogramowania\/Container\/Element:<\/strong>Okr\u0105g\u0142e prostok\u0105ty o r\u00f3\u017cnych kolorach (niebieski dla wewn\u0119trznego\/pierwotnego, szary dla zewn\u0119trznego\/sekundarnego).<\/p>\n<\/li>\n Zwi\u0105zki:<\/strong>Przerywane strza\u0142ki z etykietami opisuj\u0105cymi protok\u00f3\u0142 (np. [HTTPS], [JSON], [JDBC]).<\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":" 1. Podsumowanie wykonawcze To studium przypadku dokumentuje architektur\u0119 systemu\u00a0System bankowo\u015bci internetowej\u00a0dla\u00a0Big Bank plc. System zosta\u0142 zaprojektowany w taki spos\u00f3b, aby klienci indywidualni mogli przegl\u0105da\u0107 salda kont, histori\u0119 transakcji oraz dokonywa\u0107…<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_yoast_wpseo_title":"","_yoast_wpseo_metadesc":"","fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[83,84,87],"tags":[],"class_list":["post-3694","post","type-post","status-publish","format-standard","hentry","category-ai","category-ai-chatbot","category-c4-model"],"yoast_head":"\n
\n2. Poziom 1: Diagram kontekstu systemu<\/h2>\n
Analiza<\/h3>\n
![\"C4](\"https:\/\/online.visual-paradigm.com\/repository\/images\/c11adb2f-dc05-47e8-88cc-369892d99372\/c4-model-design\/c4-model-system-context-diagram-for-internet-banking-system.png\"\/)
<\/p>\n\n
\n
\n
\n3. Poziom 2: Diagram kontener\u00f3w<\/h2>\n
Analiza<\/h3>\n
![\"C4](\"https:\/\/online.visual-paradigm.com\/repository\/images\/eb7352f8-0099-45f4-85a1-85c9cd3dfade\/c4-model-design\/c4-model-container-diagram-for-internet-banking-system.png\"\/)
<\/p>\n\n
\n
\n
\n
\n
\n
\n4. Poziom 3: Diagram komponent\u00f3w<\/h2>\n
Analiza<\/h3>\n
![\"C4](\"https:\/\/online.visual-paradigm.com\/repository\/images\/f8ca52e5-8e0f-45ec-a8fe-d2e2933518e4\/c4-model-design\/c4-model-component-diagram-for-internet-banking-system.png\"\/)
<\/p>\n\n
\n
\n
\n5. Poziom 4: Diagram wdro\u017cenia<\/h2>\n
Analiza<\/h3>\n
![\"C4](\"https:\/\/online.visual-paradigm.com\/repository\/images\/d05814ec-ea32-4f01-a160-b07805252807\/c4-model-design\/c4-model-deployment-diagram-for-internet-banking-system.png\"\/)
<\/p>\n\n
\n
\n
\n
\n
\n6. Kluczowe koncepcje i zasady stosowane<\/h2>\n
\n
\n
\n
\n