de_DEen_USes_ESfa_IRfr_FRhi_INid_IDjapl_PLpt_PTru_RUvizh_CNzh_TW

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

C4 मॉडल, साइमन ब्राउन द्वारा बनाया गया, सॉफ्टवेयर आर्किटेक्चर को देखने का एक सरल, पदानुक्रमिक और डेवलपर-अनुकूल तरीका है। इसमें चार स्तरों के अमूल्यता का उपयोग (इसलिए “C4”) किया जाता है ताकि एक प्रणाली का उच्चतम स्तर का अवलोकन लेखा-परीक्षण तक विस्तार से वर्णन किया जा सके:

  1. प्रणाली संदर्भ (स्तर 1) – बड़ी छवि: प्रणाली और उसके उपयोगकर्ता/बाहरी निर्भरताएं।

  2. कंटेनर (स्तर 2) – उच्च स्तर के तकनीकी चयन और जिम्मेदारियां।

  3. घटक (स्तर 3) – कंटेनर के अंदर मुख्य तार्किक निर्माण ब्लॉक।

  4. कोड (स्तर 4) – वैकल्पिक क्लास-स्तर या कोड-संरचना विवरण।

इसका समर्थन तीन अतिरिक्त आरेख प्रकारों द्वारा किया जाता है:

  • प्रणाली लैंडस्केप

  • गतिशील

  • डिप्लॉयमेंट

मॉडल नोटेशन-स्वतंत्र है (आप किसी भी आरेख बनाने वाले उपकरण का उपयोग कर सकते हैं) और स्पष्टता, संगतता और दर्शक-उपयुक्त विवरण पर ध्यान केंद्रित करता है। इसे व्यापक रूप से अपनाया जाता है क्योंकि यह “बड़े मैदान के गांठ” आर्किटेक्चर आरेखों से बचता है और व्हाइटबोर्ड ड्राइंग से लेकर स्वचालित दस्तावेजीकरण तक पैमाने पर फैलता है।

इस लक्षित केस स्टडी, हम आधिकारिक C4 वेबसाइट से मानक उदाहरण का उपयोग करते हैं: इंटरनेट बैंकिंग प्रणाली काल्पनिक “बिग बैंक प्लीसी” के लिए। व्यावसायिक लक्ष्य व्यक्तिगत ग्राहकों को अपने खातों को देखने और ऑनलाइन भुगतान करने की अनुमति देना है, जबकि बैंक की मौजूदा कोर प्रणालियों के साथ एकीकृत रहना।

हम हर स्तर के साथ:

  • उद्देश्य और दर्शक

  • मुख्य तत्व + जिम्मेदारियां

  • संबंध

  • एक तैयार-उपयोग वाला PlantUML C4 आरेख (PlantUML C4 सिंटैक्स का समर्थन करता है और अधिकांश मार्कडाउन दर्शकों में बेहतरीन तरीके से प्रदर्शित होता है)

  • तर्क और मुख्य निर्णय

  • आरेख कैसे स्टेकहोल्डर्स की सहायता करता है

चरण 1: सीमा निर्धारित करें और सिस्टम संदर्भ आरेख (स्तर 1) बनाएं

उद्देश्य: नए इंटरनेट बैंकिंग सिस्टम के दुनिया में कैसे फिट होता है, यह दिखाएं। दर्शक: व्यावसायिक स्टेकहोल्डर्स, तकनीकी नहीं जानने वाले लोग, नए टीम सदस्य।

तत्व (आधिकारिक उदाहरण से):

  • व्यक्तिगत बैंकिंग ग्राहक (व्यक्ति) – एक या एक से अधिक व्यक्तिगत बैंक खातों वाला ग्राहक।

  • इंटरनेट बैंकिंग सिस्टम (सॉफ्टवेयर सिस्टम) – हम बना रहे हैं नया सिस्टम।

  • कोर बैंकिंग सिस्टम (सॉफ्टवेयर सिस्टम, मौजूदा) – मुख्य फ्रेम जो ग्राहक डेटा, खाते और लेनदेन को संभालता है।

  • ईमेल सिस्टम (सॉफ्टवेयर सिस्टम, बाहरी) – पुष्टिकरण भेजने के लिए अमेज़न वेब सेवाओं सिंपल ईमेल सेवा (AWS SES)।

संबंध:

  • ग्राहक → उपयोग करता है → इंटरनेट बैंकिंग सिस्टम (खाते देखने और भुगतान करने के लिए)

  • इंटरनेट बैंकिंग सिस्टम → उपयोग करता है → कोर बैंकिंग सिस्टम (खाता डेटा और भुगतान के लिए)

  • इंटरनेट बैंकिंग सिस्टम → ईमेल भेजता है → ईमेल सिस्टम के माध्यम से

यहाँ है PlantUML 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

तर्क और मूल्य: यह एकल आरेख तुरंत “हम क्या बना रहे हैं और यह किससे बात करता है?” का उत्तर देता है। बाहरी निर्भरताओं को स्पष्ट करके यह सीमा विस्तार को रोकता है। व्यावसायिक स्टेकहोल्डर्स इसे पसंद करते हैं क्योंकि अभी तक कोई तकनीकी विवरण नहीं है।

चरण 2: कंटेनर आरेख (स्तर 2)

उद्देश्य: इंटरनेट बैंकिंग सिस्टम में जूम करें और मुख्य डिप्लॉय किए जा सकने वाले/चलाए जा सकने वाले इकाइयों (कंटेनर) और उनके तकनीकी चयनों को दिखाएं। दर्शक: वास्तुकार, प्रमुख विकासकर्ता, संचालन टीम।

इंटरनेट बैंकिंग सिस्टम के अंदर कंटेनर:

  • सिंगल-पेज एप्लिकेशन (वेब ब्राउज़र – जावास्क्रिप्ट + एंगुलर) – पूर्ण इंटरनेट बैंकिंग यूआई।

  • मोबाइल एप्लिकेशन (मोबाइल उपकरण – iOS/Android नेटिव या रिएक्ट नेटिव) – चलते-फिरते उपयोग के लिए सीमित कार्यक्षमता।

  • एपीआई एप्लिकेशन (सर्वर-साइड – जावा + स्प्रिंग बूट) – दोनों फ्रंट-एंड्स द्वारा उपयोग की जाने वाली जेसॉन/एचटीटीपीएस एपीआई।

  • डेटाबेस (संबंधित डेटाबेस – पोस्टग्रेसक्वल) – सत्र डेटा, उपयोगकर्ता पसंदीदा, कैश किए गए खाता सारांश स्टोर करता है (मुख्य डेटा मुख्यफ्रेम में रहता है)।

मुख्य संबंध (लेवल 1 के समान बाहरी प्रणालियाँ):

  • एसपीए और मोबाइल एप्लिकेशन → कॉल → एपीआई एप्लिकेशन

  • एपीआई एप्लिकेशन ↔ डेटाबेस

  • एपीआई एप्लिकेशन → कोर बैंकिंग प्रणाली और ईमेल प्रणाली

प्लांटयूएमएल सी4 कंटेनर डायग्राम:

@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

लेआउट टॉप डाउन()
लेआउट विथ लेजेंड()

शीर्षक इंटरनेट बैंकिंग सिस्टम के लिए सी4 कंटेनर डायग्राम

व्यक्ति(ग्राहक, “व्यक्तिगत बैंकिंग ग्राहक”, “एक या एक से अधिक व्यक्तिगत बैंक खातों वाला ग्राहक।”)

सिस्टम_सीमा(इंटरनेट_बैंकिंग_प्रणाली, “इंटरनेट बैंकिंग प्रणाली”, “खातों को देखने और भुगतान करने के लिए नई प्रणाली।”) {
कंटेनर(एसपीए, “सिंगल-पेज एप्लिकेशन”, “जावास्क्रिप्ट + एंगुलर”, “पूर्ण इंटरनेट बैंकिंग यूआई”, $स्प्राइट=”एंगुलर”)
कंटेनर(मोबाइल_एप्लिकेशन, “मोबाइल एप्लिकेशन”, “iOS/Android (रिएक्ट नेटिव)”, “चलते-फिरते उपयोग के लिए सीमित कार्यक्षमता”, $स्प्राइट=”रिएक्ट”)
कंटेनर(एपीआई_एप्लिकेशन, “एपीआई एप्लिकेशन”, “जावा + स्प्रिंग बूट”, “दोनों फ्रंट-एंड्स द्वारा उपयोग की जाने वाली जेसॉन/एचटीटीपीएस एपीआई”, $स्प्राइट=”जावा”)
ContainerDb(database, “डेटाबेस”, “PostgreSQL”, “सत्र डेटा, उपयोगकर्ता पसंदीदा, कैश किए गए खाता सारांश स्टोर करता है”, $sprite=”postgresql”)
}

System(core_banking_system, “कोर बैंकिंग सिस्टम”, “ग्राहक डेटा, खाते और लेनदेन को संभालने वाला मौजूदा मेनफ्रेम।”)
System_Ext(email_system, “ईमेल सिस्टम”, “पुष्टिकरण भेजने के लिए अमेज़ॅन वेब सेवाओं सिंपल ईमेल सेवा (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 आदि को संभालता है)

  • खाता प्रबंधन घटक (कोर बैंकिंग को कॉल करने के लिए निर्देशन करता है)

  • ईमेल सूचना घटक

प्लांटयूएमएल सी4 कंपोनेंट डायग्राम (एपीआई एप्लिकेशन पर ध्यान केंद्रित):

@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


तर्कसंगतता: इस स्तर पर ज़िम्मेदारियों के विभाजन (चिंता के विभाजन) को दिखाया जाता है और नए डेवलपर्स के एकीकरण को बहुत तेज़ करता है। आप केवल उन कंटेनर्स के लिए कंपोनेंट डायग्राम बनाते हैं जो इसके लायक जटिल हैं।

चरण 4: कोड डायग्राम (स्तर 4) – वैकल्पिक

उद्देश्य: एकल घटक की आंतरिक संरचना को दिखाएं (वर्ग डायग्राम, अनुक्रम आदि)। दर्शक: उस कोड पर काम कर रहे डेवलपर्स।

के लिए उदाहरणप्रमाणीकरण नियंत्रक घटक – प्लांटयूएमएल में एक सरल यूएमएल वर्ग डायग्राम:

@startuml
classDiagram

skinparam {
roundcorner 8
ArrowColor #444444
ArrowFontColor #444444
BorderColor #444444

Class {
BorderColor #1A237E
BackgroundColor #E8EAF6
FontColor #1A237E
}
}

class “प्रमाणीकरण नियंत्रक” {
+login(प्रमाणपत्र)
+refreshToken()
}

class “जेवीटी टोकन प्रदाता” {
+generateToken(उपयोगकर्ता)
+validateToken(token)
}

वर्ग “UserRepository” {
+findByUsername()
}

AuthenticationController ..> JwtTokenProvider : “उपयोग करता है”
AuthenticationController ..> UserRepository : “उपयोग करता है”
@enduml


वास्तविक परियोजनाओं में आप अक्सर स्तर 4 को छोड़ देते हैं और वास्तविक स्रोत कोड की ओर इशारा करते हैं।

चरण 5: समर्थन आरेख

गतिशील आरेख (उदाहरण: “खाता सारांश देखें” प्रवाह)

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

शीर्षक खाता सारांश देखने के लिए गतिशील आरेख

व्यक्ति(ग्राहक, “व्यक्तिगत बैंकिंग ग्राहक”) {
कंटेनर(spa, “एकल-पृष्ठ अनुप्रयोग”) {
कंटेनर(api, “API अनुप्रयोग”) {
कंटेनरDb(db, “डेटाबेस”) {
System_Ext(coreBanking, “मुख्य बैंकिंग प्रणाली”)
}
}
}
}

Rel(ग्राहक, spa, “1. ‘खाते’ पर क्लिक करता है”, “”)
Rel(spa, api, “2. GET /accounts”, “JSON/HTTPS”)
Rel(api, db, “3. कैश किए गए सारांश को पढ़ता है”, “”)
Rel(api, coreBanking, “4. नवीनतम डेटा प्राप्त करता है”, “”)
Rel(api, spa, “5. JSON लौटाता है”, “”)

प्रदर्शित_प्रतीक()
@enduml

डेप्लॉयमेंट आरेख (उच्च-स्तरीय भौतिक मैपिंग):

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

शीर्षक इंटरनेट बैंकिंग प्रणाली के लिए डेप्लॉयमेंट आरेख

डेप्लॉयमेंट_नोड(aws, “अमेज़ॅन वेब सेवाएं”, “बादल”) {
डेप्लॉयमेंट_नोड(ec2, “EC2 स्वचालित स्केलिंग समूह”, “लिनक्स”) {
कंटेनर(api, “API एप्लिकेशन”, “जावा स्प्रिंग बूट”)
}
डेप्लॉयमेंट_नोड(rds, “RDS”, “पोस्टग्रेसक्यूएल”) {
कंटेनरडीबी(db, “डेटाबेस”)
}
}

डेप्लॉयमेंट_नोड(ग्राहक उपकरण, “ग्राहक का उपकरण”, “वेब/मोबाइल”) {
कंटेनर(spa, “एकल-पृष्ठ एप्लिकेशन”)
कंटेनर(मोबाइल, “मोबाइल एप्लिकेशन”)
}

सिस्टम_एक्सट(coreBanking, “मुख्य बैंकिंग प्रणाली (स्थानीय मेनफ्रेम)”)

संबंध(spa, api, “API कॉल करता है”, “HTTPS”)
संबंध(mobile, api, “API कॉल करता है”, “HTTPS”)
संबंध_उपयोग(api, spa, “ग्राहक के वेब ब्राउज़र में डिलीवर करता है”)
संबंध_उपयोग(api, मोबाइल, “मोबाइल एप्लिकेशन में डिलीवर करता है”)

लेजेंड_दिखाएं()
@enduml

इस केस स्टडी का व्यावहारिक उपयोग कैसे करें

  1. एक कार्यशाला से शुरू करें: एक सफेद बोर्ड पर संदर्भ बनाएं।

  2. PlantUML C4 का उपयोग करके कंटेनर और घटकों तक बढ़ें।

  3. आरेख को कोड रिपो में रखें (कोड के रूप में!) ताकि वे अद्यतन रहें।

  4. स्वचालित रूप से जीवंत दस्तावेज़ीकरण बनाएं।

यह बिल्कुल सटीक इंटरनेट बैंकिंग सिस्टम उदाहरण साइमन ब्राउन द्वारा बनाए गए आधिकारिक संदर्भ के रूप में है और दुनिया भर के हजारों संगठनों में उपयोग किया जाता है। इन चरणों का पालन करने के बाद आपके पास एक पूर्ण, उत्पादन-तैयार आर्किटेक्चर विवरण है जिसे कोई भी—सीईओ से लेकर नए जूनियर डेवलपर तक—सही स्तर की विस्तार से समझ सकता है।

सी4 डायग्राम लेख

यह पोस्ट Deutsch, English, Español, فارسی, Français, Bahasa Indonesia, 日本語, Polski, Portuguese, Ру́сский, Việt Nam, 简体中文 और 繁體中文 में भी उपलब्ध है।