de_DEen_USes_ESfa_IRfr_FRhi_INid_IDjapl_PLpt_PTru_RUvizh_CNzh_TW

Một nghiên cứu trường hợp toàn diện từng bước: Áp dụng mô hình C4 vào Hệ thống Ngân hàng Trực tuyến (Big Bank plc)

Các mô hình C4, được tạo bởi Simon Brown, là một cách đơn giản, phân cấp và thân thiện với nhà phát triển để trực quan hóa kiến trúc phần mềm. Nó sử dụng bốn cấp độ trừu tượng (do đó gọi là “C4”) để mô tả một hệ thống từ cái nhìn tổng quan cấp cao nhất cho đến chi tiết cấp mã nguồn:

  1. Bối cảnh Hệ thống (Cấp độ 1) – Tổng quan lớn: hệ thống và người dùng/điểm phụ thuộc bên ngoài của nó.

  2. Các thành phần (Cấp độ 2) – Các lựa chọn công nghệ cấp cao và trách nhiệm.

  3. Các thành phần (Cấp độ 3) – Các khối xây dựng logic chính bên trong một thành phần.

  4. Mã nguồn (Cấp độ 4) – Chi tiết tùy chọn ở cấp độ lớp hoặc cấu trúc mã nguồn.

Nó được hỗ trợ bởi ba loại sơ đồ bổ sung:

  • Bản đồ Hệ thống

  • Động

  • Triển khai

Mô hình này độc lập với ký hiệu (bạn có thể sử dụng bất kỳ công cụ vẽ sơ đồ nào) và tập trung vào sự rõ ràng, nhất quán và chi tiết phù hợp với đối tượng người xem. Nó được áp dụng rộng rãi vì tránh được các sơ đồ kiến trúc dạng “bóng lộn xộn” và có thể mở rộng từ bản phác thảo trên bảng trắng đến tài liệu hóa tự động.

Đối với nghiên cứu trường hợp này nghiên cứu trường hợp nhắm mục tiêu, chúng tôi sử dụng ví dụ chuẩn từ trang web chính thức của C4: Hệ thống Ngân hàng Trực tuyến cho ngân hàng giả tưởng “Big Bank plc”. Mục tiêu kinh doanh là cho phép khách hàng cá nhân xem tài khoản và thực hiện thanh toán trực tuyến, đồng thời tích hợp với các hệ thống cốt lõi hiện có của ngân hàng.

Chúng tôi sẽ đi qua từng cấp độ mỗi cấp độ với:

  • Mục đích và đối tượng người xem

  • Các yếu tố chính + trách nhiệm

  • Các mối quan hệ

  • Một sơ đồ C4 PlantUML sẵn sàng sử dụng sơ đồ C4 PlantUML(PlantUML hỗ trợ cú pháp C4 và hiển thị đẹp mắt trong hầu hết các trình xem Markdown)

  • Lý do và các quyết định chính

  • Làm thế nào sơ đồ hỗ trợ các bên liên quan

Bước 1: Xác định phạm vi và tạo sơ đồ bối cảnh hệ thống (Mức độ 1)

Mục đích: Hiển thị cách hệ thống Ngân hàng trực tuyến mới phù hợp với thế giới. Đối tượng: các bên liên quan kinh doanh, người không chuyên kỹ thuật, thành viên mới trong nhóm.

Các thành phần (từ ví dụ chính thức):

  • Khách hàng Ngân hàng Cá nhân (Người) – Một khách hàng có một hoặc nhiều tài khoản ngân hàng cá nhân.

  • Hệ thống Ngân hàng Trực tuyến (Hệ thống phần mềm) – Hệ thống mới mà chúng ta đang xây dựng.

  • Hệ thống Ngân hàng Chính (Hệ thống phần mềm, hiện có) – Máy chủ chính xử lý dữ liệu khách hàng, tài khoản và giao dịch.

  • Hệ thống Email (Hệ thống phần mềm, bên ngoài) – Dịch vụ Email Đơn giản của Amazon Web Services (AWS SES) để gửi xác nhận.

Các mối quan hệ:

  • Khách hàng → sử dụng → Hệ thống Ngân hàng Trực tuyến (để xem tài khoản và thực hiện thanh toán)

  • Hệ thống Ngân hàng Trực tuyến → sử dụng → Hệ thống Ngân hàng Chính (để xử lý dữ liệu tài khoản và thanh toán)

  • Hệ thống Ngân hàng Trực tuyến → gửi email thông qua → Hệ thống Email

Đây là sơ đồ Sơ đồ bối cảnh C4 của PlantUML:

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

LAYOUT_TOP_DOWN()
LAYOUT_WITH_LEGEND()

title Sơ đồ Bối cảnh Hệ thống (Mức độ 1) cho Hệ thống Ngân hàng Trực tuyến

Person(customer, "Khách hàng Ngân hàng Cá nhân", "Một khách hàng có một hoặc nhiều tài khoản ngân hàng cá nhân.")
System(internet_banking_system, "Hệ thống Ngân hàng Trực tuyến", "Hệ thống mới để xem tài khoản và thực hiện thanh toán.")
System(core_banking_system, "Hệ thống Ngân hàng Chính", "Máy chủ chính hiện có xử lý dữ liệu khách hàng, tài khoản và giao dịch.")
System_Ext(email_system, "Hệ thống Email", "Dịch vụ Email Đơn giản của Amazon Web Services (AWS SES) để gửi xác nhận.")

Rel(customer, internet_banking_system, "Sử dụng")
Rel(internet_banking_system, core_banking_system, "Sử dụng")
Rel(internet_banking_system, email_system, "Gửi email thông qua")

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

Lý do và giá trị: Sơ đồ duy nhất này ngay lập tức trả lời câu hỏi “Chúng ta đang xây dựng gì và ai là người mà nó giao tiếp?” Nó ngăn chặn sự mở rộng phạm vi bằng cách làm rõ các phụ thuộc bên ngoài. Các bên liên quan kinh doanh yêu thích nó vì vẫn chưa có chi tiết công nghệ nào.

Bước 2: Sơ đồ Container (Mức độ 2)

Mục đích: Thu nhỏ vào Hệ thống Ngân hàng Trực tuyến và hiển thị các đơn vị triển khai/chạy được chính (container) và các lựa chọn công nghệ của chúng. Đối tượng: kiến trúc sư, trưởng nhóm phát triển, nhân viên vận hành.

Các container bên trong Hệ thống Ngân hàng Trực tuyến:

  • Ứng dụng Trang Đơn (Trình duyệt web – JavaScript + Angular) – Giao diện người dùng toàn diện cho ngân hàng trực tuyến.

  • Ứng dụng Di động (Thiết bị di động – Native iOS/Android hoặc React Native) – Chức năng hạn chế cho việc sử dụng khi di chuyển.

  • Ứng dụng API (Bên máy chủ – Java + Spring Boot) – API JSON/HTTPS được sử dụng bởi cả hai giao diện phía trước.

  • Cơ sở dữ liệu (Cơ sở dữ liệu quan hệ – PostgreSQL) – Lưu trữ dữ liệu phiên làm việc, cài đặt người dùng, tóm tắt tài khoản đã được lưu tạm (dữ liệu cốt lõi vẫn nằm trên máy chủ chính).

Các mối quan hệ chính (cùng các hệ thống bên ngoài như Mức 1):

  • SPA và Ứng dụng Di động → gọi → Ứng dụng API

  • Ứng dụng API ↔ Cơ sở dữ liệu

  • Ứng dụng API → Hệ thống Ngân hàng Cốt lõi và Hệ thống Thư điện tử

Sơ đồ Container C4 của PlantUML:

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

tiêu đề Sơ đồ Container C4 cho Hệ thống Ngân hàng Trực tuyến

Person(khach_hang, “Khách hàng Ngân hàng Cá nhân”, “Một khách hàng có một hoặc nhiều tài khoản ngân hàng cá nhân.”)

System_Boundary(hệ_thống_ngân_hàng_trực_tuyến, “Hệ thống Ngân hàng Trực tuyến”, “Hệ thống mới để xem tài khoản và thực hiện thanh toán.”) {
Container(spa, “Ứng dụng Trang Đơn”, “JavaScript + Angular”, “Giao diện người dùng toàn diện cho ngân hàng trực tuyến”, $sprite=”angular”)
Container(ung_dung_di_dong, “Ứng dụng Di động”, “iOS/Android (React Native)”, “Chức năng hạn chế cho việc sử dụng khi di chuyển”, $sprite=”react”)
Container(ung_dung_api, “Ứng dụng API”, “Java + Spring Boot”, “API JSON/HTTPS được sử dụng bởi cả hai giao diện phía trước”, $sprite=”java”)
ContainerDb(database, “Cơ sở dữ liệu”, “PostgreSQL”, “Lưu trữ dữ liệu phiên làm việc, tùy chọn người dùng, tóm tắt tài khoản đã được lưu tạm”, $sprite=”postgresql”)
}

System(core_banking_system, “Hệ thống ngân hàng cốt lõi”, “Máy chủ chính hiện có xử lý dữ liệu khách hàng, tài khoản và giao dịch.”)
System_Ext(email_system, “Hệ thống Email”, “Dịch vụ Gửi Email Đơn giản của Amazon Web Services (AWS SES) để gửi xác nhận.”)

‘ Quan hệ
Rel(customer, spa, “Sử dụng”, “HTTPS”)
Rel(customer, mobile_app, “Sử dụng”, “HTTPS”)
Rel(spa, api_app, “Gọi”, “JSON/HTTPS”)
Rel(mobile_app, api_app, “Gọi”, “JSON/HTTPS”)
Rel(api_app, database, “Đọc từ và ghi vào”, “JDBC/SQL”)
Rel(api_app, core_banking_system, “Truy vấn / Cập nhật”, “JSON/HTTPS”)
Rel(api_app, email_system, “Gửi email qua”, “HTTPS”)

‘ Gợi ý bố cục (tùy chọn – giúp PlantUML sắp xếp các thành phần tốt hơn)
Lay_D(customer, internet_banking_system)
Lay_D(internet_banking_system, core_banking_system)
Lay_U(email_system, internet_banking_system)

@enduml

Lý do: Chúng tôi đã chọn mô hình hiện đại SPA + backend API cho web, ứng dụng di động bản địa để tối ưu hiệu suất, và giữ cơ sở dữ liệu nhẹ nhàng (hầu hết dữ liệu nằm trong máy chủ chính cũ). Sơ đồ này là nguồn duy nhất đáng tin cậy cho các quyết định công nghệ cấp cao và giúp nhóm DevOps lên kế hoạch hạ tầng.

Bước 3: Sơ đồ thành phần (Mức độ 3)

Mục đích: Phóng to vào một container (thường là container phức tạp nhất – Ứng dụng API) và hiển thị các thành phần logic chính. Đối tượng: các đội phát triển.

Ví dụ: Các thành phần bên trong Ứng dụng API:

  • Bộ điều khiển Tài khoản (Spring MVC)

  • Bộ điều khiển Xác thực

  • Bộ điều khiển Đặt lại mật khẩu

  • Thành phần Bảo mật (xử lý xác thực, JWT, v.v.)

  • Thành phần Quản lý Tài khoản (điều phối các cuộc gọi đến Ngân hàng Cốt lõi)

  • Thành phần Thông báo Email

Sơ đồ thành phần PlantUML C4 (được tập trung vào Ứng dụng API):

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

LAYOUT_WITH_LEGEND()

title Sơ đồ thành phần cho Hệ thống Ngân hàng Trực tuyến - Ứng dụng API

Container(spa, "Ứng dụng Trang Đơn", "javascript và angular", "Cung cấp tất cả các chức năng ngân hàng trực tuyến cho khách hàng thông qua trình duyệt web của họ.")
Container(ma, "Ứng dụng Di động", "Xamarin", "Cung cấp một tập hợp con hạn chế các chức năng ngân hàng trực tuyến cho khách hàng thông qua thiết bị di động của họ.")
ContainerDb(db, "Cơ sở dữ liệu", "Sơ đồ Cơ sở dữ liệu quan hệ", "Lưu trữ thông tin đăng ký người dùng, thông tin xác thực đã mã hóa, nhật ký truy cập, v.v.")
System_Ext(mbs, "Hệ thống Ngân hàng Mainframe", "Lưu trữ tất cả thông tin cốt lõi về khách hàng, tài khoản, giao dịch, v.v.")

Container_Boundary(api, "Ứng dụng API") {
    Component(accounts, "Bộ điều khiển Tài khoản", "Spring MVC", "Cung cấp tóm tắt tài khoản và số dư cho khách hàng.")
    Component(auth, "Bộ điều khiển Xác thực", "Spring MVC", "Xử lý đăng nhập người dùng, quản lý phiên và tạo token.")
    Component(reset, "Bộ điều khiển Đặt lại Mật khẩu", "Spring MVC", "Cho phép người dùng đặt lại mật khẩu thông qua email.")
    Component(security, "Thành phần Bảo mật", "Spring Bean", "Xử lý xác thực, tạo token JWT và mã hóa mật khẩu.")
    Component(accountmgmt, "Thành phần Quản lý Tài khoản", "Spring Bean", "Điều phối các cuộc gọi đến hệ thống Ngân hàng Cốt lõi cho các thao tác tài khoản.")
    Component(email, "Thành phần Thông báo Email", "Spring Bean", "Gửi email đặt lại mật khẩu và email xác minh tài khoản thông qua SMTP.")

    Rel(accounts, security, "Sử dụng")
    Rel(auth, security, "Sử dụng")
    Rel(reset, security, "Sử dụng")
    Rel(accountmgmt, mbs, "Sử dụng", "XML/HTTPS")
    Rel(email, db, "Đọc", "JDBC")
}

Rel(spa, accounts, "Sử dụng", "JSON/HTTPS")
Rel(spa, auth, "Sử dụng", "JSON/HTTPS")
Rel(spa, reset, "Sử dụng", "JSON/HTTPS")
Rel(ma, accounts, "Sử dụng", "JSON/HTTPS")
Rel(ma, auth, "Sử dụng", "JSON/HTTPS")
Rel(ma, reset, "Sử dụng", "JSON/HTTPS")
@enduml


Lý do: Mức độ này cho thấy cách các trách nhiệm được phân chia (tách biệt các vấn đề) và giúp việc đưa các nhà phát triển mới vào làm việc nhanh hơn nhiều. Bạn chỉ vẽ sơ đồ thành phần cho các container đủ phức tạp để xứng đáng với việc làm như vậy.

Bước 4: Sơ đồ Mã nguồn (Mức độ 4) – Tùy chọn

Mục đích: Hiển thị cấu trúc bên trong của một thành phần duy nhất (sơ đồ lớp, sơ đồ tuần tự, v.v.). Đối tượng: các nhà phát triển đang làm việc trên mã nguồn đó.

Ví dụ cho thành phần Bộ điều khiển Xác thựcthành phần – một sơ đồ lớp UML đơn giản trong PlantUML:

@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 : “uses”
AuthenticationController ..> UserRepository : “uses”
@enduml


Trong các dự án thực tế, bạn thường bỏ qua Mức 4 và thay vào đó trỏ đến mã nguồn thực tế.

Bước 5: Sơ đồ hỗ trợ

Sơ đồ động (ví dụ: luồng “Xem tóm tắt tài khoản”)

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

title Sơ đồ động cho Xem tóm tắt tài khoản

Person(customer, “Khách hàng cá nhân ngân hàng”) {
Container(spa, “Ứng dụng trang đơn”) {
Container(api, “Ứng dụng API”) {
ContainerDb(db, “Cơ sở dữ liệu”) {
System_Ext(coreBanking, “Hệ thống ngân hàng cốt lõi”)
}
}
}
}

Rel(customer, spa, “1. Nhấn vào ‘Tài khoản’”, “”)
Rel(spa, api, “2. GET /accounts”, “JSON/HTTPS”)
Rel(api, db, “3. Đọc tóm tắt đã được lưu tạm”, “”)
Rel(api, coreBanking, “4. Lấy dữ liệu mới nhất”, “”)
Rel(api, spa, “5. Trả về JSON”, “”)

HIỂN_THỊ_CHÚ_THÍCH()
@enduml

Sơ đồ triển khai (bản đồ vật lý cấp cao):

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

title Sơ đồ triển khai cho Hệ thống Ngân hàng Trực tuyến

Deployment_Node(aws, “Amazon Web Services”, “Mây”) {
Deployment_Node(ec2, “Nhóm Auto-Scaling EC2”, “Linux”) {
Container(api, “Ứng dụng API”, “Java Spring Boot”)
}
Deployment_Node(rds, “RDS”, “PostgreSQL”) {
ContainerDb(db, “Cơ sở dữ liệu”)
}
}

Deployment_Node(customerDevice, “Thiết bị của Khách hàng”, “Web/Điện thoại di động”) {
Container(spa, “Ứng dụng Trang Đơn”)
Container(mobile, “Ứng dụng Di động”)
}

System_Ext(coreBanking, “Hệ thống Ngân hàng Lõi (mainframe nội bộ)”)

Rel(spa, api, “Gọi API đến”, “HTTPS”)
Rel(mobile, api, “Gọi API đến”, “HTTPS”)
Rel_U(api, spa, “Cung cấp đến trình duyệt web của khách hàng”)
Rel_U(api, mobile, “Cung cấp đến ứng dụng di động”)

SHOW_LEGEND()
@enduml

Làm thế nào để sử dụng Trường hợp nghiên cứu này trong thực tế

  1. Bắt đầu bằng một buổi làm việc: vẽ Sơ đồ Bối cảnh trên bảng trắng.

  2. Lặp lại để đi đến Các Container và Các thành phần bằng cách sử dụng PlantUML C4.

  3. Giữ các sơ đồ trong kho mã nguồn (như mã nguồn!) để chúng luôn được cập nhật.

  4. Tự động tạo tài liệu sống động.

Ví dụ Hệ thống Ngân hàng Trực tuyến này là tài liệu tham khảo chính thức do Simon Brown tạo ra và được sử dụng tại hàng nghìn tổ chức trên toàn thế giới. Bằng cách tuân theo các bước này, bạn hiện đã có một mô tả kiến trúc hoàn chỉnh, sẵn sàng sản xuất, mà bất kỳ ai – từ CEO đến lập trình viên mới – đều có thể hiểu ở mức độ chi tiết phù hợp.

Bài viết về Sơ đồ C4

This post is also available in Deutsch, English, Español, فارسی, Français, English, Bahasa Indonesia, 日本語, Polski, Portuguese, Ру́сский, 简体中文 and 繁體中文.