एक व्यापक चरण-दर-चरण केस स्टडी: इंटरनेट बैंकिंग सिस्टम (बिग बैंक प्लीसी) में C4 मॉडल के अनुप्रयोग

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

LAYOUT_TOP_DOWN()
LAYOUT_WITH_LEGEND()

title सिस्टम संदर्भ आरेख (स्तर 1) इंटरनेट बैंकिंग सिस्टम के लिए

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

@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 इंटरनेट बैंकिंग प्रणाली के लिए सी4 कंटेनर आरेख

Person(customer, "व्यक्तिगत बैंकिंग ग्राहक", "एक या अधिक व्यक्तिगत बैंक खातों वाला ग्राहक।")

System_Boundary(internet_banking_system, "इंटरनेट बैंकिंग प्रणाली", "खातों को देखने और भुगतान करने के लिए नई प्रणाली।") {
Container(spa, "सिंगल-पेज एप्लिकेशन", "जावास्क्रिप्ट + एंगुलर", "पूर्ण इंटरनेट बैंकिंग यूआई", $sprite="angular")
Container(mobile_app, "मोबाइल एप्लिकेशन", "iOS/Android (रिएक्ट नेटिव)", "चलते-फिरते उपयोग के लिए सीमित कार्यक्षमता", $sprite="react")
Container(api_app, "एपीआई एप्लिकेशन", "जावा + स्प्रिंग बूट", "दोनों फ्रंट-एंड्स द्वारा उपयोग की जाने वाली जीसन/एचटीटीपीएस एपीआई", $sprite="java")
ContainerDb(database, "डेटाबेस", "पोस्टग्रेसक्वल", "सत्र डेटा, उपयोगकर्ता पसंदीदा, कैश किए गए खाता सारांश संग्रहित करता है", $sprite="postgresql")
}

System(core_banking_system, "कोर बैंकिंग प्रणाली", "ग्राहक डेटा, खाते और लेनदेन को संभालने वाला मौजूदा मुख्यफ्रेम।")
System_Ext(email_system, "ईमेल प्रणाली", "पुष्टिकरण भेजने के लिए अमेज़न वेब सेवाओं सिंपल ईमेल सेवा (एवीएस एसईएस)।")

' संबंध
Rel(customer, spa, "उपयोग करता है", "एचटीटीपीएस")
Rel(customer, mobile_app, "उपयोग करता है", "एचटीटीपीएस")
Rel(spa, api_app, "कॉल करता है", "जीसन/एचटीटीपीएस")
Rel(mobile_app, api_app, "कॉल करता है", "जीसन/एचटीटीपीएस")
Rel(api_app, database, "पढ़ता है और लिखता है", "जेडबीसी/एसक्यूएल")
Rel(api_app, core_banking_system, "प्रश्न पूछता है / अद्यतन करता है", "जीसन/एचटीटीपीएस")
Rel(api_app, 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_Component.puml

LAYOUT_WITH_LEGEND()

title इंटरनेट बैंकिंग प्रणाली - एपीआई एप्लिकेशन के लिए घटक आरेख

Container(spa, "एकल पृष्ठ एप्लिकेशन", "जावास्क्रिप्ट और एंगुलर", "ग्राहकों को उनके वेब ब्राउज़र के माध्यम से सभी इंटरनेट बैंकिंग कार्यक्षमता प्रदान करता है।")
Container(ma, "मोबाइल एप्लिकेशन", "एक्सामारिन", "ग्राहकों को उनके मोबाइल उपकरण के माध्यम से इंटरनेट बैंकिंग कार्यक्षमता के सीमित सबसेट प्रदान करता है।")
ContainerDb(db, "डेटाबेस", "संबंधात्मक डेटाबेस स्कीमा", "उपयोगकर्ता पंजीकरण जानकारी, हैश किए गए प्रमाणीकरण प्रमाण, प्रवेश लॉग, आदि संग्रहीत करता है।")
System_Ext(mbs, "मेनफ्रेम बैंकिंग प्रणाली", "ग्राहकों, खातों, लेनदेन आदि के संबंध में सभी मूल बैंकिंग जानकारी संग्रहीत करता है।")

Container_Boundary(api, "एपीआई एप्लिकेशन") {
    Component(accounts, "खाता नियंत्रक", "स्प्रिंग एमवीसी", "ग्राहकों को खाता सारांश और शेष राशि प्रदान करता है।")
    Component(auth, "प्रमाणीकरण नियंत्रक", "स्प्रिंग एमवीसी", "उपयोगकर्ता लॉगिन, सत्र प्रबंधन और टोकन उत्पादन का प्रबंधन करता है।")
    Component(reset, "पासवर्ड रीसेट नियंत्रक", "स्प्रिंग एमवीसी", "उपयोगकर्ताओं को ईमेल के माध्यम से अपना पासवर्ड रीसेट करने की अनुमति देता है।")
    Component(security, "सुरक्षा घटक", "स्प्रिंग बीन", "प्रमाणीकरण, जेटीवी टोकन उत्पादन और पासवर्ड हैशिंग का प्रबंधन करता है।")
    Component(accountmgmt, "खाता प्रबंधन घटक", "स्प्रिंग बीन", "खाता संचालन के लिए कोर बैंकिंग प्रणाली कॉल के समन्वय करता है।")
    Component(email, "ईमेल सूचना घटक", "स्प्रिंग बीन", "एसएमटीपी के माध्यम से पासवर्ड रीसेट ईमेल और खाता सत्यापन ईमेल भेजता है।")

    Rel(accounts, security, "उपयोग करता है")
    Rel(auth, security, "उपयोग करता है")
    Rel(reset, security, "उपयोग करता है")
    Rel(accountmgmt, mbs, "उपयोग करता है", "XML/HTTPS")
    Rel(email, db, "पढ़ता है", "जेडबीसी")
}

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 "प्रमाणीकरण नियंत्रक" {
+लॉगिन(प्रमाणपत्र)
+टोकन ताजा करें()
}

class "जेटीवी टोकन प्रदाता" {
+टोकन उत्पन्न करें(उपयोगकर्ता)
+टोकन की पुष्टि करें(टोकन)
}

class "उपयोगकर्ता भंडार" {
+उपयोगकर्ता नाम से खोजें()
}

प्रमाणीकरण नियंत्रक ..> जेटीवी टोकन प्रदाता : "उपयोग करता है"
प्रमाणीकरण नियंत्रक ..> उपयोगकर्ता भंडार : "उपयोग करता है"
@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 स्वचालित स्केलिंग समूह", "Linux") {
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