de_DEen_USes_ESfa_IRfr_FRhi_INid_IDjapl_PLpt_PTru_RUvizh_CNzh_TW

Kompleksna studium przypadku krok po kroku: stosowanie 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 odpowiednich szczegółach dla odbiorcy. Jest szeroko stosowany, ponieważ unika diagramów architektury typu „duży kłacz z błota” i może być skalowany od szkiców na tablicy do automatycznej dokumentacji.

W tym celowym studium przypadku, korzystamy z kanonicznego 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ądra 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 internetowej (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 głównej (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 głównej (dla danych kont i płatności)

  • System bankowości internetowej → wysyła e-mail przez → System poczty e-mail

Oto Diagram kontekstowy C4 PlantUML:

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

LAYOUT_TOP_DOWN()
LAYOUT_WITH_LEGEND()

title Diagram kontekstowy systemu (poziom 1) dla systemu bankowości internetowej

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

Rel(customer, internet_banking_system, "Używa")
Rel(internet_banking_system, core_banking_system, "Używa")
Rel(internet_banking_system, email_system, "Wysyła e-mail przez")

Lay_D(customer, internet_banking_system)
Lay_D(internet_banking_system, core_banking_system)
Lay_U(email_system, internet_banking_system)
@enduml

Podstawa i wartość: Ten jeden diagram natychmiast odpowiada na pytanie „Co budujemy i z kim się komunikuje?”. Zapobiega rozszerzaniu zakresu, wyraźnie 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ż się do systemu bankowości internetowej i pokaż główne jednostki wdrażalne/uruchomione (kontenery) oraz wybrane technologie. Odbiorcy: architekci, liderzy programistów, dział operacyjny.

Kontenery w systemie Internet Banking:

  • Aplikacja jednostronicowa (Przeglądarka internetowa – JavaScript + Angular) – Pełny interfejs internetowego bankowości.

  • Aplikacja mobilna (Urządzenie mobilne – natywny 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ą na głównym systemie).

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 PlantUML C4:

@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()

tytuł Diagram kontenerów C4 dla systemu Internet Banking

Osoba(klient, „Klient prywatnej bankowości”, „Klient z jednym lub więcej kontami prywatnymi.”)

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

System(system_jadrowy_bankowy, „System jadrowy bankowy”, „Istniejący mainframe obsługujący dane klientów, konta oraz transakcje.”)
System_Ext(system_emailowy, „System e-mailowy”, „Amazon Web Services Simple Email Service (AWS SES) do wysyłania potwierdzeń.”)

‘ Relacje
Rel(klient, spa, „Używa”, „HTTPS”)
Rel(klient, aplikacja_mobilna, „Używa”, „HTTPS”)
Rel(spa, aplikacja_api, „Wywołuje”, „JSON/HTTPS”)
Rel(aplikacja_mobilna, aplikacja_api, „Wywołuje”, „JSON/HTTPS”)
Rel(aplikacja_api, baza_danych, „Odczytuje i zapisuje do”, „JDBC/SQL”)
Rel(aplikacja_api, system_jadrowy_bankowy, „Zapytania / Aktualizacje”, „JSON/HTTPS”)
Rel(aplikacja_api, system_emailowy, „Wysyła e-mail przez”, „HTTPS”)

‘ Podpowiedzi układu (opcjonalnie – pomaga PlantUML lepiej ułożyć elementy)
Lay_D(klient, system_bankowości_internetowej)
Lay_D(system_bankowości_internetowej, system_jadrowy_bankowy)
Lay_U(system_emailowy, system_bankowości_internetowej)

@enduml

Uzasadnienie: 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 mainfranie). Ten diagram jest jedynym źródłem prawdy dla decyzji technologicznych najwyższego poziomu i pomaga zespołom DevOps planować infrastrukturę.

Krok 3: Diagram komponentów (poziom 3)

Cel: Przybliżenie jednego kontenera (zazwyczaj najbardziej złożonego – aplikacji API) i pokazanie jego głównych komponentów logicznych. Odbiorca: zespoły programistów.

Przykład: Komponenty wewnątrz aplikacji API:

  • Kontroler kont (Spring MVC)

  • Kontroler uwierzytelniania

  • Kontroler resetu hasła

  • Komponent zabezpieczeń (obsługuje uwierzytelnianie, JWT itp.)

  • Komponent zarządzania kontami (koordynuje wywołania do systemu jadrowego bankowego)

  • Komponent powiadomień e-mailowych

Diagram komponentowy PlantUML C4 (zorientowany na aplikację API):

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

LAYOUT_WITH_LEGEND()

tytuł Diagram komponentowy dla systemu internetowego bankowości – aplikacja API

Container(spa, "Aplikacja jednostronicowa", "javascript i angular", "Dostarcza wszystkie funkcje internetowego bankowości dla klientów poprzez ich przeglądarkę internetową.")
Container(ma, "Aplikacja mobilna", "Xamarin", "Dostarcza ograniczoną część funkcji internetowego bankowości dla klientów poprzez ich urządzenie mobilne.")
ContainerDb(db, "Baza danych", "Schemat bazy danych relacyjnej", "Przechowuje informacje o rejestracji użytkowników, zaszyfrowane dane uwierzytelniające, logi dostępu itp.")
System_Ext(mbs, "System bankowy mainframe", "Przechowuje wszystkie podstawowe informacje o klientach, kontach, transakcjach 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 bankowego głównego 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


Podstawa: Poziom ten pokazuje, jak są rozdzielone odpowiedzialności (oddzielenie obowiązków) i znacznie przyspiesza onboardowanie nowych programistów. Rysujesz diagramy komponentów tylko dla kontenerów wystarczająco skomplikowanych, by tego wymagać.

Krok 4: Diagram kodu (poziom 4) – opcjonalny

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

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

@startuml
diagramKlas

skinparam {
roundcorner 8
ColorStrzalki #444444
ColorCzcionkiStrzalek #444444
ColorObramowania #444444

Klasa {
ColorObramowania #1A237E
ColorTła #E8EAF6
ColorCzcionki #1A237E
}
}

class “KontrolerUwierzytelniania” {
+login(credencjaly)
+odświeżToken()
}

class “DostawcaTokenówJwt” {
+wygenerujToken(użytkownik)
+validateToken(token)
}

class „UserRepository“ {
+findByUsername()
}

AuthenticationController ..> JwtTokenProvider : „używa”
AuthenticationController ..> UserRepository : „używa”
@enduml


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

Krok 5: Diagramy wspierające

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

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

tytuł Diagram dynamiczny dla Wyświetl podsumowanie konta

Person(customer, „Klient prywatny”) {
Container(spa, „Aplikacja jednostronicowa”) {
Container(api, „Aplikacja API”) {
ContainerDb(db, „Baza danych”) {
System_Ext(coreBanking, „System bankowy główny”)
}
}
}
}

Rel(customer, spa, „1. Kliknięcie „Konta””, „”)
Rel(spa, api, „2. GET /accounts”, „JSON/HTTPS”)
Rel(api, db, „3. Odczytaj zapisane podsumowanie”, „”)
Rel(api, coreBanking, „4. Pobierz najnowsze dane”, „”)
Rel(api, spa, „5. Zwróć JSON”, „”)

PokażLEGENDĘ()
@enduml

Diagram rozmieszczenia (mapowanie fizyczne na wysokim poziomie):

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

tytuł Diagram rozmieszczenia dla systemu internetowego bankowości

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

Węzeł_rozmieszczenia(customerDevice, „Urządzenie klienta”, „Web/Mobilny”) {
Kontener(spa, „Aplikacja jednostronicowa”)
Kontener(mobile, „Aplikacja mobilna”)
}

SystemZewnętrzny(coreBanking, „System bankowości głównej (mainframe lokalny)”)

Rel(spa, api, „Wywołuje interfejs API”, „HTTPS”)
Rel(mobile, api, „Wywołuje interfejs API”, „HTTPS”)
Rel_U(api, spa, „Dostarcza do przeglądarki internetowej klienta”)
Rel_U(api, mobile, „Dostarcza do aplikacji mobilnej”)

PokażLegende()
@enduml

Jak wykorzystać tę studię przypadku w praktyce

  1. Zacznij od warsztatu: narysuj kontekst na tablicy.

  2. Iteruj do kontenerów i składników przy użyciu PlantUML C4.

  3. Przechowuj diagramy w repozytorium kodu (jako kod!) aby były aktualne.

  4. Automatycznie generuj żyjącą dokumentację.

Ten dokładny przykład systemu bankowości internetowej to oficjalny referencjusz stworzony przez Simona Browna i wykorzystywany przez tysiące organizacji na całym świecie. Po wykonaniu tych kroków posiadasz kompletny, gotowy do produkcji opis architektury, który każdy – od CEO po nowego juniorowego programistę – może zrozumieć na odpowiednim poziomie szczegółowości.

Artykuły o diagramach C4

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