de_DEen_USes_ESfa_IRfr_FRhi_INid_IDjapl_PLpt_PTru_RUvizh_CNzh_TW

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

این مدل C4, که توسط سیمون براون ایجاد شده است، روشی ساده، سلسله مراتبی و دوستدار توسعه‌دهندگان برای نمایش معماری نرم‌افزار است. این مدل از چهار سطح انتزاعی (که به همین دلیل «C4» نامیده می‌شود) برای توصیف یک سیستم از نمای کلی تا جزئیات سطح کد استفاده می‌کند:

  1. زمینه سیستم (سطح 1) – دید کلی: سیستم و کاربران یا وابستگی‌های خارجی آن.

  2. کانتینرها (سطح 2) – انتخاب‌های فناوری سطح بالا و مسئولیت‌ها.

  3. اجزاء (سطح 3) – بلوک‌های ساختاری منطقی اصلی درون یک کانتینر.

  4. کد (سطح 4) – جزئیات اختیاری سطح کلاس یا ساختار کد.

این مدل توسط سه نوع دیگر از نمودارها حمایت می‌شود:

  • چشم‌انداز سیستم

  • پویا

  • نصب و راه‌اندازی

این مدل وابسته به نمادگذاری نیست (شما می‌توانید هر ابزار نمودارسازی را استفاده کنید) و بر روی شفافیت، هماهنگی و جزئیات مناسب مخاطب تمرکز دارد. به دلیل جلوگیری از نمودارهای معماری «کره بزرگ خاکستری» و مقیاس‌پذیری از طرح‌های سیاه‌برد تا مستندات خودکار، به طور گسترده مورد پذیرش قرار گرفته است.

برای این مطالعه موردی هدفمند, ما از مثال استاندارد موجود در وب‌سایت رسمی C4 استفاده می‌کنیم: سیستم بانکداری اینترنتی برای شرکت فیکشنی «بیگ بانک plc». هدف کسب‌وکار این است که مشتریان شخصی بتوانند حساب‌های خود را مشاهده کنند و پرداخت‌های آنلاین انجام دهند در حالی که با سیستم‌های اصلی بانک موجود یکپارچه شوند.

ما از هر سطح با:

  • هدف و مخاطب

  • عناصر کلیدی + مسئولیت‌ها

  • رابطه‌ها

  • یک نمودار C4 آماده استفاده نمودار C4 PlantUML(PlantUML از سینتکس C4 پشتیبانی می‌کند و در اکثر نمایشگرهای مارکداون به زیبایی نمایش داده می‌شود)

  • دلیل و تصمیمات کلیدی

  • چگونه این نمودار به ذینفعان کمک می‌کند

مرحله ۱: تعیین محدوده و ایجاد نمودار زمینه سیستم (سطح ۱)

هدف: نشان دادن اینکه سیستم جدید بانکداری اینترنتی چگونه در دنیا جای می‌گیرد. مخاطب: ذینفعان کسب‌وکار، افراد غیرفنی، اعضای جدید تیم.

عناصر (از مثال رسمی):

  • مشتری بانکداری شخصی (فرد) – مشتری با یک یا چند حساب بانکی شخصی.

  • سیستم بانکداری اینترنتی (سیستم نرم‌افزاری) – سیستم جدیدی که ما در حال ساخت آن هستیم.

  • سیستم بانکداری اصلی (سیستم نرم‌افزاری، موجود) – ماشین اصلی که داده‌های مشتری، حساب‌ها و تراکنش‌ها را مدیریت می‌کند.

  • سیستم ایمیل (سیستم نرم‌افزاری، خارجی) – سرویس ایمیل ساده آمازون وِب سرویس (AWS SES) برای ارسال تأییدیه‌ها.

رابطه‌ها:

  • مشتری → استفاده می‌کند از → سیستم بانکداری اینترنتی (برای مشاهده حساب‌ها و انجام پرداخت‌ها)

  • سیستم بانکداری اینترنتی → استفاده می‌کند از → سیستم بانکداری اصلی (برای داده‌های حساب و پرداخت‌ها)

  • سیستم بانکداری اینترنتی → ایمیل ارسال می‌کند از طریق → سیستم ایمیل

اینجا یک نمودار زمینه C4 PlantUML:

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

دلیل و ارزش: این نمودار تکی بلافاصله پاسخ می‌دهد به «چه چیزی در حال ساخت هستیم و با چه کیستی که صحبت می‌کند؟» با نشان دادن صریح وابستگی‌های خارجی، از گسترش بی‌رویه محدوده جلوگیری می‌کند. ذینفعان کسب‌وکار آن را دوست دارند زیرا هنوز جزئیات فنی وجود ندارد.

مرحله ۲: نمودار کانتینر (سطح ۲)

هدف: ورود به سیستم بانکداری اینترنتی و نشان دادن واحدهای اصلی قابل نصب/اجرا (کانتینرها) و انتخاب فناوری‌های آن‌ها. مخاطب: مهندسان معماری، توسعه‌دهندگان ارشد، تیم عملیات.

کانتینرها درون سیستم بانکداری اینترنتی:

  • برنامه صفحه تکی (مرورگر اینترنت – جاوااسکریپت + آنگولار) – رابط کاربری کامل بانکداری اینترنتی.

  • اپلیکیشن موبایل (دستگاه موبایل – ناتیو iOS/Android یا ریاکت ناتیو) – عملکرد محدود برای استفاده در حال حرکت.

  • برنامه API (طرف سرور – جاوا + اسپرینگ بوت) – API JSON/HTTPS که توسط هر دو طرف جلویی استفاده می‌شود.

  • پایگاه داده (پایگاه داده رابطه‌ای – پست‌گری‌اس‌کیل) – داده‌های جلسه، ترجیحات کاربر، خلاصه‌های حساب کش شده را ذخیره می‌کند (داده‌های اصلی در سیستم اصلی باقی می‌مانند).

رابطه‌های کلیدی (سیستم‌های خارجی همانند سطح 1):

  • SPA و اپلیکیشن موبایل → تماس → برنامه API

  • برنامه API ↔ پایگاه داده

  • برنامه API → سیستم بانکداری اصلی و سیستم ایمیل

نمودار کانتینر C4 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_TOP_DOWN()
LAYOUT_WITH_LEGEND()

عنوان نمودار کانتینر C4 برای سیستم بانکداری اینترنتی

شخص(مشتری، “مشتری بانکداری شخصی”， “مشتری با یک یا چند حساب بانکی شخصی.”)

مرز سیستم(internet_banking_system، “سیستم بانکداری اینترنتی”， “سیستم جدید برای مشاهده حساب‌ها و انجام پرداخت‌ها.”) {
کانتینر(spa، “برنامه صفحه تکی”， “جاوااسکریپت + آنگولار”， “رابط کاربری کامل بانکداری اینترنتی”， $sprite=”angular”)
کانتینر(mobile_app، “اپلیکیشن موبایل”， “iOS/Android (ریاکت ناتیو)”， “عملکرد محدود برای استفاده در حال حرکت”， $sprite=”react”)
کانتینر(api_app، “برنامه API”， “جاوا + اسپرینگ بوت”， “API JSON/HTTPS که توسط هر دو طرف جلویی استفاده می‌شود”， $sprite=”java”)
ContainerDb(database, “پایگاه داده”, “PostgreSQL”, “داده‌های جلسه، ترجیحات کاربر، خلاصه‌های حساب ذخیره‌شده”, $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

دلیل: ما الگوی مدرن SPA + پایه‌گاه API را برای وب انتخاب کردیم، یک برنامه موبایل سفارشی برای عملکرد، و پایگاه داده سبک‌وزن نگه داشتیم (بیشتر داده‌ها در ماشین اصلی قدیمی زندگی می‌کنند). این نمودار منبع واحد حقیقت برای تصمیمات فنی سطح بالا است و به تیم‌های DevOps در برنامه‌ریزی زیرساخت کمک می‌کند.

مرحله 3: نمودار مؤلفه‌ها (سطح 3)

هدف: به یک کانتینر (معمولاً پیچیده‌ترین آن – برنامه API) نزدیک‌تر شوید و مؤلفه‌های منطقی اصلی آن را نشان دهید. مخاطب: تیم‌های توسعه.

مثال: مؤلفه‌های داخل برنامه API:

  • کنترلر حساب‌ها (Spring MVC)

  • کنترلر احراز هویت

  • کنترلر بازنشانی رمز عبور

  • مؤلفه امنیت (مدیریت احراز هویت، JWT و غیره)

  • مؤلفه مدیریت حساب‌ها (همکاری در تماس‌ها به سیستم بانکی اصلی)

  • مؤلفه اطلاع‌رسانی ایمیل

نمودار مؤلفه C4 PlantUML (متمرکز بر کاربرد API):

@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


دلیل: این سطح نشان می‌دهد که مسئولیت‌ها چگونه تقسیم می‌شوند (جدا شدن نگرانی‌ها) و ورود کاربران جدید به پروژه را بسیار سریع‌تر می‌کند. شما فقط نمودارهای مؤلفه را برای کانتینرها می‌کشید که به اندازه کافی پیچیده هستند تا این کار ارزش داشته باشد.

مرحله ۴: نمودار کد (سطح ۴) – اختیاری

هدف: ساختار داخلی یک مؤلفه واحد را نشان می‌دهد (نمودار کلاس، توالی و غیره). مخاطب: توسعه‌دهندگانی که روی این کد کار می‌کنند.

مثال برایکنترلر احراز هویتمؤلفه – یک نمودار کلاس ساده UML در PlantUML:

@startuml
nmudarDiagram

skinparam {
گوشه‌های گرد ۸
رنگ پیکان #444444
رنگ فونت پیکان #444444
رنگ حاشیه #444444

کلاس {
رنگ حاشیه #1A237E
رنگ پس‌زمینه #E8EAF6
رنگ فونت #1A237E
}
}

کلاس “کنترلر احراز هویت” {
+ورود(credentials)
+تجدید توکن()
}

کلاس “ارائه‌دهنده توکن JWT” {
+تولید توکن(user)
+validateToken(token)
}

کلاس “UserRepository” {
+findByUsername()
}

AuthenticationController ..> JwtTokenProvider : “uses”
AuthenticationController ..> UserRepository : “uses”
@enduml


در پروژه‌های واقعی اغلب سطح ۴ را نادیده می‌گیرید و به کد منبع واقعی اشاره می‌کنید.

مرحله ۵: نمودارهای پشتیبان

نمودار پویا (مثال: جریان “مشاهده خلاصه حساب”)

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

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

شخص(customer, “مشتری بانکداری شخصی”) {
کانتینر(spa, “برنامه صفحه تکی”) {
کانتینر(api, “برنامه API”) {
کانتینرDb(db, “پایگاه داده”) {
سیستم_خارجی(coreBanking, “سیستم بانکداری اصلی”)
}
}
}
}

ارتباط(customer, spa, “۱. کلیک روی ‘حساب‌ها’”, “”)
ارتباط(spa, api, “۲. GET /accounts”, “JSON/HTTPS”)
ارتباط(api, db, “۳. خواندن خلاصه کش شده”, “”)
ارتباط(api, coreBanking, “۴. دریافت آخرین داده‌ها”, “”)
ارتباط(api, spa, “۵. بازگرداندن JSON”, “”)

نمایش_ légenda()
@enduml

نمودار انتقال (نقشه‌برداری فیزیکی سطح بالا):

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

عنوان نمودار انتقال برای سیستم بانکداری اینترنتی

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

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

سیستم_بیرونی(coreBanking, “سیستم بانکداری اصلی (ماشین اصلی داخلی)”)

ارتباط(spa, api, “تماس API انجام می‌دهد به”, “HTTPS”)
ارتباط(mobile, api, “تماس API انجام می‌دهد به”, “HTTPS”)
ارتباط_مخصوص(api, spa, “تحویل به مرورگر وب مشتری”)
ارتباط_مخصوص(api, mobile, “تحویل به اپلیکیشن موبایل”)

نمایش_ légend()
@enduml

چگونه از این مطالعه موردی در عمل استفاده کنیم

  1. با یک کارگاه شروع کنید: متناظری را روی تخته سیاه رسم کنید.

  2. با استفاده از PlantUML C4 به کانتینرها و اجزای مختلف بروید.

  3. نمودارها را در مخزن کد (به عنوان کد!) نگه دارید تا به‌روز بمانند.

  4. مستندات زنده را به صورت خودکار تولید کنید.

این مثال دقیق سیستم بانکداری اینترنتی، مرجع رسمی است که توسط سیمون براون ایجاد شده و در هزاران سازمان جهانی استفاده می‌شود. با دنبال کردن این مراحل، اکنون یک توصیف معماری کامل و آماده بهره‌برداری دارید که هر کسی—از مدیرعامل تا توسعه‌دهنده جوان جدید—می‌تواند در سطح مناسب جزئیات آن را درک کند.

مقاله‌های نمودار C4

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