de_DEen_USes_ESfa_IRfr_FRhi_INid_IDjapl_PLpt_PTru_RUvizh_CNzh_TW

Kompleksna studium przypadku krok po kroku: zastosowanie modelu C4 do systemu bankowości internetowej (Big Bank plc)

The model C4, stworzony przez Simona Browna, to prosty, hierarchiczny i przyjazny dla programistów sposób wizualizacji architektury oprogramowania. Wykorzystuje cztery poziomy abstrakcji (stąd „C4”), aby opisać system od najwyższego poziomu przeglądu po szczegółowe informacje na poziomie kodu:

  1. Kontekst systemu (Poziom 1) – Wielka całość: system i jego użytkownicy/externalne zależności.
  2. Pojemniki (Poziom 2) – Wysokie poziomy wyborów technologicznych i odpowiedzialności.
  3. Składniki (Poziom 3) – Główne logiczne bloki budowlane wewnątrz pojemnika.
  4. Kod (Poziom 4) – Opcjonalne szczegóły na poziomie klas lub struktury kodu.

Wspierany jest przez trzy dodatkowe typy diagramów:

  • Kontekst systemu
  • Dynamiczny
  • Wdrożenie

Model jest niezależny od notacji (można używać dowolnego narzędzia do tworzenia diagramów) i skupia się na przejrzystości, spójności oraz odpowiednim poziomie szczegółów dla odbiorcy. Jest szeroko stosowany, ponieważ unika diagramów architektury typu „duży kłacz błota” i może być skalowany od szkiców na tablicy do automatycznie generowanej dokumentacji.

W tym celowym studium przypadku, korzystamy z klasycznego przykładu z oficjalnej strony C4: System bankowości internetowej dla fikcyjnej „Big Bank plc”. Celem biznesowym jest umożliwienie osobom prywatnym przeglądanie swoich kont i dokonywanie płatności online, jednocześnie integrując się z istniejącymi systemami jądrowymi banku.

Przejdziemy przez każdy poziom z:

  • Cel i odbiorca
  • Główne elementy + odpowiedzialności
  • Związki
  • Gotowy do użycia diagram C4 PlantUML (PlantUML obsługuje składnię C4 i wygląda pięknie w większości przeglądarek Markdown)
  • Podstawa i kluczowe decyzje
  • Jak diagram pomaga stakeholderom

Krok 1: Zdefiniuj zakres i stwórz diagram kontekstu systemu (poziom 1)

Cel: Pokaż, jak nowy system Internet Banking pasuje do świata. Odbiorcy: stakeholderzy biznesowi, osoby nieinżynierskie, nowi członkowie zespołu.

Elementy (z oficjalnego przykładu):

  • Klient prywatny bankowości (Person) – Klient z jednym lub większą liczbą kont bankowych osobistych.
  • System bankowości internetowej (System oprogramowania) – Nowy system, który budujemy.
  • System bankowości centralnej (System oprogramowania, istniejący) – Mainframe obsługujący dane klientów, konta i transakcje.
  • System poczty e-mail (System oprogramowania, zewnętrzny) – Usługa Amazon Web Services Simple Email Service (AWS SES) do wysyłania potwierdzeń.

Związki:

  • Klient → używa → System bankowości internetowej (do przeglądania kont i dokonywania płatności)
  • System bankowości internetowej → używa → System bankowości centralnej (dane kont i płatności)
  • System bankowości internetowej → wysyła e-mail przez → System poczty e-mail

Oto Diagram kontekstu C4 PlantUML:

PlantUML


Edytuj PlantUML w VPasCode
Plantuml Edit Plantuml in VPasCode 

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Context.puml

LAYOUT_TOP_DOWN()
LAYOUT_WITH_LEGEND()

tytuł Diagram kontekstu systemu (poziom 1) dla systemu bankowości internetowej

Person(klient, "Klient prywatny bankowości", "Klient z jednym lub większą liczbą kont bankowych osobistych.")
System(system_internetowy, "System bankowości internetowej", "Nowy system do przeglądania kont i dokonywania płatności.")
System(system_centralny, "System bankowości centralnej", "Istniejący mainframe obsługujący dane klientów, konta i transakcje.")
System_Ext(system_poczty, "System poczty e-mail", "Amazon Web Services Simple Email Service (AWS SES) do wysyłania potwierdzeń.")

Rel(klient, system_internetowy, "Używa")
Rel(system_internetowy, system_centralny, "Używa")
Rel(system_internetowy, system_poczty, "Wysyła e-mail przez")

Lay_D(klient, system_internetowy)
Lay_D(system_internetowy, system_centralny)
Lay_U(system_poczty, system_internetowy)
@enduml
Edit Plantuml in VPasCode



Edytuj PlantUML w VPasCode

Podstawa i wartość: Ten pojedynczy diagram natychmiast odpowiada na pytanie „Co budujemy i z kim się komunikuje?”. Zapobiega rozszerzaniu zakresu, jasno pokazując zależności zewnętrzne. Stakeholderzy biznesowi go lubią, ponieważ jeszcze nie ma szczegółów technologicznych.

Krok 2: Diagram kontenerów (poziom 2)

Cel: Przybliż system Internet Banking i pokaż główne jednostki wdrażalne/uruchomione (kontenery) oraz wybrane technologie. Odbiorcy: architekci, kierownicy zespołów programistów, dział operacyjny.

Kontenery wewnątrz systemu Internet Banking:

  • Aplikacja jednostronicowa (Przeglądarka internetowa – JavaScript + Angular) – Pełny interfejs użytkownika internetowego bankowości.
  • Aplikacja mobilna (Urządzenie mobilne – natywna wersja iOS/Android lub React Native) – Ograniczona funkcjonalność do użytku w trakcie podróży.
  • Aplikacja API (Strona serwera – Java + Spring Boot) – Interfejs API JSON/HTTPS używany przez oba interfejsy użytkownika.
  • Baza danych (Baza danych relacyjna – PostgreSQL) – Przechowuje dane sesji, preferencje użytkownika, przesłane podsumowania kont (dane główne pozostają w głównym systemie głównym).

Kluczowe relacje (te same systemy zewnętrzne co na poziomie 1):

  • SPA i aplikacja mobilna → wywołują → Aplikacja API
  • Aplikacja API ↔ Baza danych
  • Aplikacja API → System bankowości główny i System e-mail

Diagram kontenerów C4 w PlantUML:

PlantUML


Edytuj PlantUML w VPasCode
Plantuml Edit Plantuml in VPasCode 

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/angular.puml
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/java.puml
!include https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons/postgresql.puml

LAYOUT_TOP_DOWN()
LAYOUT_WITH_LEGEND()

title Diagram kontenerów C4 dla systemu Internet Banking

Person(customer, "Klient prywatny", "Klient posiadający jedno lub więcej kont bankowych.")

System_Boundary(internet_banking_system, "System Internet Banking", "Nowy system do przeglądania kont i dokonywania płatności.") {
Container(spa, "Aplikacja jednostronicowa", "JavaScript + Angular", "Pełny interfejs użytkownika internetowego bankowości", $sprite="angular")
Container(mobile_app, "Aplikacja mobilna", "iOS/Android (React Native)", "Ograniczona funkcjonalność do użytku w trakcie podróży", $sprite="react")
Container(api_app, "Aplikacja API", "Java + Spring Boot", "Interfejs API JSON/HTTPS używany przez oba interfejsy użytkownika", $sprite="java")
ContainerDb(database, "Baza danych", "PostgreSQL", "Przechowuje dane sesji, preferencje użytkownika, przesłane podsumowania kont", $sprite="postgresql")
}

System(core_banking_system, "System bankowości główny", "Istniejący główny system obsługujący dane klientów, konta i transakcje.")
System_Ext(email_system, "System e-mail", "Usługa prostego e-maila Amazon Web Services (AWS SES) do wysyłania potwierdzeń.")

' Relacje
Rel(customer, spa, "Używa", "HTTPS")
Rel(customer, mobile_app, "Używa", "HTTPS")
Rel(spa, api_app, "Wywołuje", "JSON/HTTPS")
Rel(mobile_app, api_app, "Wywołuje", "JSON/HTTPS")
Rel(api_app, database, "Odczytuje i zapisuje do", "JDBC/SQL")
Rel(api_app, core_banking_system, "Zapytania / Aktualizacje", "JSON/HTTPS")
Rel(api_app, email_system, "Wysyła e-mail przez", "HTTPS")

' Wskazówki układu (opcjonalne – pomaga PlantUML lepiej ułożyć elementy)
Lay_D(customer, internet_banking_system)
Lay_D(internet_banking_system, core_banking_system)
Lay_U(email_system, internet_banking_system)

@enduml
Edit Plantuml in VPasCode



Edytuj PlantUML w VPasCode

Podstawa: Wybraliśmy nowoczesny wzorzec SPA + backend API dla internetu, natywną aplikację mobilną dla wydajności oraz utrzymaliśmy lekką bazę danych (większość danych znajduje się w starszym systemie głównym). Ten diagram jest jedynym źródłem wiarygodnych informacji dotyczących decyzji technologicznych na najwyższym poziomie i pomaga zespołom DevOps planować infrastrukturę.

Krok 3: Diagram komponentów (poziom 3)

Cel: Przybliż jeden kontener (zazwyczaj najbardziej złożony – aplikację API) i pokaż jego główne komponenty logiczne. Odbiorcy: zespoły programistów.

Przykład: Komponenty wewnątrz aplikacji API:

  • Kontroler kont (Spring MVC)
  • Kontroler uwierzytelniania
  • Kontroler resetowania hasła
  • Składnik zabezpieczeń (obsługuje uwierzytelnianie, JWT itp.)
  • Składnik zarządzania kontami (koordynuje wywołania do systemu bankowości głównej)
  • Składnik powiadomień e-mail

Diagram składników PlantUML C4 (skupiony na aplikacji API):

PlantUML


Edytuj PlantUML w VPasCode
Plantuml Edit Plantuml in VPasCode 

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Component.puml

LAYOUT_WITH_LEGEND()

title Diagram składników dla systemu bankowości internetowej – aplikacja API

Container(spa, "Aplikacja jednostronicowa", "javascript i angular", "Dostarcza wszystkie funkcje bankowości internetowej dla klientów poprzez ich przeglądarkę internetową.")
Container(ma, "Aplikacja mobilna", "Xamarin", "Dostarcza ograniczoną część funkcji bankowości internetowej dla klientów poprzez ich urządzenie mobilne.")
ContainerDb(db, "Baza danych", "Schemat bazy danych relacyjnej", "Przechowuje informacje o rejestracji użytkowników, hashowane dane uwierzytelniające, logi dostępu itp.")
System_Ext(mbs, "System główny bankowy", "Przechowuje wszystkie podstawowe informacje bankowe dotyczące klientów, kont, transakcji itp.")

Container_Boundary(api, "Aplikacja API") {
    Component(accounts, "Kontroler kont", "Spring MVC", "Dostarcza podsumowania kont i sald dla klientów.")
    Component(auth, "Kontroler uwierzytelniania", "Spring MVC", "Obsługuje logowanie użytkownika, zarządzanie sesjami i generowanie tokenów.")
    Component(reset, "Kontroler resetowania hasła", "Spring MVC", "Zezwala użytkownikom na resetowanie hasła poprzez e-mail.")
    Component(security, "Składnik zabezpieczeń", "Spring Bean", "Obsługuje uwierzytelnianie, generowanie tokenów JWT i hashowanie haseł.")
    Component(accountmgmt, "Składnik zarządzania kontami", "Spring Bean", "Koordynuje wywołania do systemu bankowości głównej w celu operacji na kontach.")
    Component(email, "Składnik powiadomień e-mail", "Spring Bean", "Wysyła e-maile z resetem hasła i potwierdzeniem konta przez SMTP.")

    Rel(accounts, security, "Używa")
    Rel(auth, security, "Używa")
    Rel(reset, security, "Używa")
    Rel(accountmgmt, mbs, "Używa", "XML/HTTPS")
    Rel(email, db, "Odczytuje", "JDBC")
}

Rel(spa, accounts, "Używa", "JSON/HTTPS")
Rel(spa, auth, "Używa", "JSON/HTTPS")
Rel(spa, reset, "Używa", "JSON/HTTPS")
Rel(ma, accounts, "Używa", "JSON/HTTPS")
Rel(ma, auth, "Używa", "JSON/HTTPS")
Rel(ma, reset, "Używa", "JSON/HTTPS")
@enduml
Edit Plantuml in VPasCode



Edytuj PlantUML w VPasCode

Podstawa: Ten poziom pokazuje, jak są rozdzielone odpowiedzialności (oddzielanie obowiązków), co znacznie przyspiesza onboardowanie nowych programistów. Rysujesz diagramy składników tylko dla kontenerów wystarczająco skomplikowanych, by tego wymagały.

Krok 4: Diagram kodu (poziom 4) – opcjonalny

Cel: Pokazuje strukturę wewnętrzną pojedynczego składnika (diagram klas, sekwencji itp.). Odbiorcy: programiści pracujący nad tym kodem.

Przykład dlaKontroler uwierzytelnianiaskładnik – prosty diagram klas UML w PlantUML:

PlantUML


Edytuj PlantUML w VPasCode
Plantuml Edit Plantuml in VPasCode 

@startuml
classDiagram

skinparam {
roundcorner 8
ArrowColor #444444
ArrowFontColor #444444
BorderColor #444444

Class {
BorderColor #1A237E
BackgroundColor #E8EAF6
FontColor #1A237E
}
}

class "AuthenticationController" {
+login(credentials)
+refreshToken()
}

class "JwtTokenProvider" {
+generateToken(user)
+validateToken(token)
}

class "UserRepository" {
+findByUsername()
}

AuthenticationController ..> JwtTokenProvider : "używa"
AuthenticationController ..> UserRepository : "używa"
@enduml
Edit Plantuml in VPasCode



Edytuj PlantUML w VPasCode

W rzeczywistych projektach często pomijasz poziom 4 i zamiast tego wskazujesz na rzeczywisty kod źródłowy.

Krok 5: Diagramy wspierające

Diagram dynamiczny (przykład: przepływ „Wyświetl podsumowanie konta”)

PlantUML


Edytuj PlantUML w VPasCode
Plantuml Edit Plantuml in VPasCode 

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml

tytuł Diagram dynamiczny dla Widoku Podsumowania Konta

Osoba(klient, "Klient prywatny") {
Kontener(spa, "Aplikacja jednostronicowa") {
Kontener(api, "Aplikacja API") {
KontenerBazyDanych(db, "Baza danych") {
SystemZewnętrzny(coreBanking, "System bankowy główny")
}
}
}
}

Relacja(klient, spa, "1. Kliknięcie 'Konta'", "")
Relacja(spa, api, "2. GET /konta", "JSON/HTTPS")
Relacja(api, db, "3. Odczytaj zapisane podsumowanie", "")
Relacja(api, coreBanking, "4. Pobierz najnowsze dane", "")
Relacja(api, spa, "5. Zwróć JSON", "")

PokażLEGENDĘ()
@enduml
Edit Plantuml in VPasCode



Edytuj PlantUML w VPasCode

Diagram wdrożenia (mapowanie fizyczne na wysokim poziomie):

PlantUML


Edytuj PlantUML w VPasCode
Plantuml Edit Plantuml in VPasCode 

@startuml
!include https://static.visual-paradigm.com/plantuml-stdlib/C4-PlantUML/master/C4_Deployment.puml

tytuł Diagram wdrożenia dla Systemu Internetowego Bankowości

WęzełWdrożenia(aws, "Amazon Web Services", "Chmura") {
WęzełWdrożenia(ec2, "Grupa automatycznego skalowania EC2", "Linux") {
Kontener(api, "Aplikacja API", "Java Spring Boot")
}
WęzełWdrożenia(rds, "RDS", "PostgreSQL") {
KontenerBazyDanych(db, "Baza danych")
}
}

WęzełWdrożenia(ustawienieKlienta, "Urządzenie klienta", "Web/Mobilne") {
Kontener(spa, "Aplikacja jednostronicowa")
Kontener(mobile, "Aplikacja mobilna")
}

SystemZewnętrzny(coreBanking, "System bankowy główny (mainframe lokalny)")

Relacja(spa, api, "Wywołuje wywołania API do", "HTTPS")
Relacja(mobile, api, "Wywołuje wywołania API do", "HTTPS")
RelacjaU(api, spa, "Dostarcza do przeglądarki klienta")
RelacjaU(api, mobile, "Dostarcza do aplikacji mobilnej")

PokażLEGENDĘ()
@enduml
Edit Plantuml in VPasCode



Edytuj PlantUML w VPasCode

Jak wykorzystać tę studię przypadku w praktyce

  1. Zacznij od warsztatu: narysuj kontekst na tablicy.
  2. Iteruj do kontenerów i komponentów przy użyciu PlantUML C4.
  3. Przechowuj diagramy w repozytorium kodu (jako kod!) aby były zawsze aktualne.
  4. Automatycznie generuj żywe dokumenty.

Ten dokładny przykład Systemu Internetowego Bankowości to oficjalny referencja stworzona przez Simona Browna i jest wykorzystywana w tysiącach organizacji na całym świecie. Poprzez przestrzeganie tych kroków posiadasz teraz kompletną, gotową do produkcji dokumentację architektury, którą każdy – od CEO po nowego juniorowego programisty – może zrozumieć na odpowiednim poziomie szczegółowości.

Artykuły diagramów C4

Ten post dostępny jest również w Deutsch, English, Español, فارسی, Français, English, Bahasa Indonesia, 日本語, Portuguese, Ру́сский, Việt Nam, 简体中文 and 繁體中文