یک مطالعه موردی جامع و مرحله‌به‌مرحله: به‌کارگیری مدل C4 در سیستم بانکداری اینترنتی (شرکت بیگ بانک plc)

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

LAYOUT_TOP_DOWN()
LAYOUT_WITH_LEGEND()

title نمودار زمینه سیستم (سطح ۱) برای سیستم بانکداری اینترنتی

Person(customer, "مشتری بانکداری شخصی", "مشتری با یک یا چند حساب بانکی شخصی.")
System(internet_banking_system, "سیستم بانکداری اینترنتی", "سیستم جدید برای مشاهده حساب‌ها و انجام پرداخت‌ها.")
System(core_banking_system, "سیستم بانکداری اصلی", "ماشین اصلی موجود که داده‌های مشتری، حساب‌ها و تراکنش‌ها را مدیریت می‌کند.")
System_Ext(email_system, "سیستم ایمیل", "سرویس ایمیل ساده AWS (AWS SES) برای ارسال تأییدیه‌ها.")

Rel(customer, internet_banking_system, "استفاده می‌کند از")
Rel(internet_banking_system, core_banking_system, "استفاده می‌کند از")
Rel(internet_banking_system, email_system, "ایمیل ارسال می‌کند از طریق")

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

@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 نمودار کانتینر C4 برای سیستم بانکداری اینترنتی

Person(customer, "مشتری بانکداری شخصی", "مشتری با یک یا چند حساب بانکی شخصی.")

System_Boundary(internet_banking_system, "سیستم بانکداری اینترنتی", "سیستم جدید برای مشاهده حساب‌ها و انجام پرداخت‌ها.") {
Container(spa, "برنامه صفحه تکی", "جاوااسکریپت + آنگولار", "رابط کاربری کامل بانکداری اینترنتی", $sprite="angular")
Container(mobile_app, "اپلیکیشن موبایل", "iOS/Android (ریاکت نیتیو)", "عملکرد محدود برای استفاده در حال حرکت", $sprite="react")
Container(api_app, "اپلیکیشن API", "جاوا + اسپرینگ بوت", "API JSON/HTTPS که توسط هر دو سمت جلویی استفاده می‌شود", $sprite="java")
ContainerDb(database, "پایگاه داده", "پست‌گری‌اس‌کیل", "داده‌های جلسه، ترجیحات کاربر، خلاصه‌های حساب کش شده", $sprite="postgresql")
}

System(core_banking_system, "سیستم بانکداری اصلی", "مینفریم موجود که داده‌های مشتری، حساب‌ها و تراکنش‌ها را مدیریت می‌کند.")
System_Ext(email_system, "سیستم ایمیل", "سرویس ساده ایمیل AWS (AWS SES) برای ارسال تأییدیه‌ها.")

' روابط
Rel(customer, spa, "استفاده می‌کند از", "HTTPS")
Rel(customer, mobile_app, "استفاده می‌کند از", "HTTPS")
Rel(spa, api_app, "تماس می‌گیرد به", "JSON/HTTPS")
Rel(mobile_app, api_app, "تماس می‌گیرد به", "JSON/HTTPS")
Rel(api_app, database, "خواندن و نوشتن به", "JDBC/SQL")
Rel(api_app, core_banking_system, "پرس و جو / به‌روزرسانی", "JSON/HTTPS")
Rel(api_app, email_system, "ارسال ایمیل از طریق", "HTTPS")

' نکات چیدمان (اختیاری – به PlantUML کمک می‌کند تا عناصر را بهتر چیده شود)
Lay_D(customer, internet_banking_system)
Lay_D(internet_banking_system, core_banking_system)
Lay_U(email_system, internet_banking_system)

@enduml

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

LAYOUT_WITH_LEGEND()

title نمودار جزئیات سیستم بانکداری اینترنتی - کاربرد API

Container(spa, "برنامه صفحه تکی", "javascript و angular", "تمامی قابلیت‌های بانکداری اینترنتی را به مشتریان از طریق مرورگر وب ارائه می‌دهد.")
Container(ma, "اپلیکیشن موبایل", "Xamarin", "مجموعه‌ای محدود از قابلیت‌های بانکداری اینترنتی را به مشتریان از طریق دستگاه موبایل ارائه می‌دهد.")
ContainerDb(db, "پایگاه داده", "ساختار پایگاه داده رابطه‌ای", "اطلاعات ثبت‌نام کاربران، اعتبارات احراز هویت هش‌شده، لاگ‌های دسترسی و غیره را ذخیره می‌کند.")
System_Ext(mbs, "سیستم بانکی اصلی", "تمامی اطلاعات بانکی اصلی مربوط به مشتریان، حساب‌ها، تراکنش‌ها و غیره را ذخیره می‌کند.")

Container_Boundary(api, "کاربرد API") {
    Component(accounts, "کنترلر حساب‌ها", "Spring MVC", "خلاصه و موجودی حساب‌ها را به مشتریان ارائه می‌دهد.")
    Component(auth, "کنترلر احراز هویت", "Spring MVC", "احراز هویت کاربر، مدیریت جلسه و تولید توکن را مدیریت می‌کند.")
    Component(reset, "کنترلر بازنشانی رمز عبور", "Spring MVC", "به کاربران اجازه می‌دهد تا رمز عبور خود را از طریق ایمیل بازنشانی کنند.")
    Component(security, "اجزای امنیتی", "Spring Bean", "احراز هویت، تولید توکن JWT و هش کردن رمز عبور را مدیریت می‌کند.")
    Component(accountmgmt, "اجزای مدیریت حساب", "Spring Bean", "هماهنگ‌کننده فراخوانی‌ها به سیستم بانکی اصلی برای عملیات حساب‌ها.")
    Component(email, "اجزای اطلاع‌رسانی ایمیلی", "Spring Bean", "ایمیل‌های بازنشانی رمز عبور و ایمیل‌های تأیید حساب را از طریق SMTP ارسال می‌کند.")

    Rel(accounts, security, "استفاده می‌کند")
    Rel(auth, security, "استفاده می‌کند")
    Rel(reset, security, "استفاده می‌کند")
    Rel(accountmgmt, mbs, "استفاده می‌کند", "XML/HTTPS")
    Rel(email, db, "خواندن", "JDBC")
}

Rel(spa, accounts, "استفاده می‌کند", "JSON/HTTPS")
Rel(spa, auth, "استفاده می‌کند", "JSON/HTTPS")
Rel(spa, reset, "استفاده می‌کند", "JSON/HTTPS")
Rel(ma, accounts, "استفاده می‌کند", "JSON/HTTPS")
Rel(ma, auth, "استفاده می‌کند", "JSON/HTTPS")
Rel(ma, reset, "استفاده می‌کند", "JSON/HTTPS")
@enduml

@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 : "استفاده می‌کند"
AuthenticationController ..> UserRepository : "استفاده می‌کند"
@enduml

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

title دیاگرام پویای نمایش خلاصه حساب کاربران شخصی

Person(customer, "مشتری بانکداری شخصی") {
Container(spa, "برنامه صفحه تکی") {
Container(api, "برنامه API") {
ContainerDb(db, "پایگاه داده") {
System_Ext(coreBanking, "سیستم بانکی اصلی")
}
}
}
}

Rel(customer, spa, "1. کلیک روی 'حساب‌ها'", "")
Rel(spa, api, "2. GET /accounts", "JSON/HTTPS")
Rel(api, db, "3. خواندن خلاصه ذخیره‌شده", "")
Rel(api, coreBanking, "4. دریافت آخرین داده‌ها", "")
Rel(api, spa, "5. بازگرداندن JSON", "")

SHOW_LEGEND()
@enduml

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

title دیاگرام نصب برای سیستم بانکداری اینترنتی

Deployment_Node(aws, "Amazon Web Services", "ابر") {
Deployment_Node(ec2, "گروه خودکار مقیاس‌دهی EC2", "لینوکس") {
Container(api, "برنامه API", "Java Spring Boot")
}
Deployment_Node(rds, "RDS", "PostgreSQL") {
ContainerDb(db, "پایگاه داده")
}
}

Deployment_Node(customerDevice, "دستگاه مشتری", "وب/موبایل") {
Container(spa, "برنامه صفحه تکی")
Container(mobile, "اپلیکیشن موبایل")
}

System_Ext(coreBanking, "سیستم بانکی اصلی (ماشین اصلی داخلی)")

Rel(spa, api, "تماس‌های API انجام می‌دهد به", "HTTPS")
Rel(mobile, api, "تماس‌های API انجام می‌دهد به", "HTTPS")
Rel_U(api, spa, "تحویل به مرورگر مشتری")
Rel_U(api, mobile, "تحویل به اپلیکیشن موبایل")

SHOW_LEGEND()
@enduml