👲🏻 🧛🏼 🎭 एक ऑनलाइन बैंकिंग प्रणाली में RxJs पुस्तकालय का उपयोग करने की विशेषताएं 🥤 🤷🏼 👈🏻

परिचय

आधुनिक ऑनलाइन बैंकिंग प्रणाली को तैयार करना एक जटिल कार्य है। इसी समय, एप्लिकेशन के क्लाइंट भाग को विकसित करने के लिए कई कार्य सूचना के कई स्रोतों से लगभग एक साथ आने वाले बड़ी मात्रा में डेटा को संसाधित करने की प्रक्रिया से जुड़े हैं। दूरस्थ बैंकिंग प्रणाली (आरबीएस), त्वरित संदेश सेवा, विभिन्न सूचना सेवाओं से डेटा प्राप्त किया जाना चाहिए और वास्तविक समय में यहां और अभी संसाधित किया जाना चाहिए। इस तरह की समस्याओं को हल करने के लिए, प्रतिक्रियाशील प्रोग्रामिंग विधियों का आज व्यापक रूप से उपयोग किया जाता है।

व्यापक अर्थ में "रिएक्टिव प्रोग्रामिंग" शब्द का अर्थ अनुप्रयोग के ऐसे संगठन से है, जिसमें डेटा धाराओं की स्थिति को संसाधित करने के परिणामस्वरूप सिस्टम में परिवर्तनों का प्रसार होता है। इस पद्धति के साथ महत्वपूर्ण मुद्दे सूचना प्रवाह प्रस्तुत करने की सरलता और प्रस्तुति परिणामों के अतुल्यकालिक प्रसंस्करण के दौरान होने वाली त्रुटियों के जवाब की संभावना है।

एक संकीर्ण अर्थ में, प्रतिक्रियाशील वेब यूआई प्रोग्रामिंग का मतलब ऑफ-द-शेल्फ डेवलपर टूल का उपयोग कर सकता है, जैसे कि आरएक्सजे लाइब्रेरी। यह लाइब्रेरी ऑब्जर्वेबल ऑब्जेक्ट का उपयोग करके डेटा अनुक्रमों का एक असतत प्रतिनिधित्व प्रदान करती है, जो कुछ निश्चित अंतराल पर एप्लिकेशन में प्रवेश करने वाली जानकारी के स्रोत के रूप में कार्य करती है।

छोटे व्यवसायों के लिए एक ऑनलाइन बैंक के वेब इंटरफेस को डिजाइन करने के उदाहरण पर पुस्तकालय का उपयोग करने की सुविधाओं पर विचार करें। UI को विकसित करते समय, हमने अंतर्निहित अंतर्निहित RxJs लाइब्रेरी संस्करण 6 के साथ Google कोणीय 6 प्लेटफ़ॉर्म का उपयोग किया।

प्रतिक्रियाशील यूआई डिजाइन कार्य

उपयोगकर्ता के लिए, इंटरनेट बैंक के अधिकांश ऑपरेशन अक्सर तीन चरणों में आते हैं:

सूची से आवश्यक संचालन का चयन करना, उदाहरण के लिए, ऋण चुकाना या खाता फिर से भरना;
संबंधित फॉर्म का आंशिक समापन (भुगतान विवरण संगठन के नाम या उपयोगकर्ता द्वारा दर्ज किए गए पेयी के नाम से स्वतः भर जाता है);
एसएमएस संदेश या इलेक्ट्रॉनिक हस्ताक्षर का उपयोग कर संचालन की स्वचालित पुष्टि।

डेवलपर के दृष्टिकोण से, इन चरणों के कार्यान्वयन में निम्नलिखित कार्यों का समाधान शामिल है:

आरबीएस सिस्टम की स्थिति की जांच करना, सूची में संचालन पर डेटा की प्रासंगिकता सुनिश्चित करना;
डेटा का अतुल्यकालिक प्रसंस्करण एक फॉर्म भरते समय होता है, जिसमें उपयोगकर्ता द्वारा दर्ज किया गया डेटा और सूचना संदेश सेवाओं से प्राप्त होता है (उदाहरण के लिए, बैंक का टिन और बीआईसी);
पूर्ण किए गए फॉर्म का सत्यापन;
फॉर्म में डेटा की स्वचालित बचत।

आरबीएस सिस्टम की स्थिति की जाँच करना

आरबी प्रणाली से प्रासंगिक डेटा प्राप्त करने की प्रक्रिया, उदाहरण के लिए, एक क्रेडिट लाइन या भुगतान आदेश की स्थिति के बारे में जानकारी, दो चरण शामिल हैं:

डेटा उपलब्धता की स्थिति की जाँच करना;
अद्यतन डेटा प्राप्त करना।

डेटा की वर्तमान स्थिति की जांच करने के लिए, एक निश्चित अवधि के साथ और कुछ समय तक डेटा की तत्परता के बारे में प्रतिक्रिया प्राप्त होने तक सिस्टम के एपीआई से अनुरोध किया जाता है।

आरबी प्रणाली के लिए कई संभावित उत्तर हैं:

{रिक्त: सत्य} - डेटा अभी तैयार नहीं है;
अद्यतन डेटा क्लाइंट द्वारा प्राप्त किया जा सकता है;

{ empty: false // -   }

एक गलती।

परिणामस्वरूप, प्रासंगिक डेटा की प्राप्ति के रूप में किया जाता है:

 const MIN_TIME = 2000; const MAX_TIME = 60000; const EXP_BASE = 1.4; request() //     .pipe( expand((response, index) => { const delayTime = Math.min(MIN_TIME * Math.pow(EXP_BASE, index), MAX_TIME); return response.empty ? request().pipe(delay(delayTime)) : EMPTY; }), last() ) .subscribe((response) => { /** -  */ });

चलो कदम से कदम का विश्लेषण करें:

हम एक निवेदन भेजते हैं। अनुरोध ()
जवाब विस्तार से जाता है। विस्तार एक आरएक्सजेएस स्टेटमेंट है जो आंतरिक और बाहरी अवलोकन के लिए प्रत्येक अगले अलर्ट के लिए अपने ब्लॉक के भीतर कोड को दोहराता है, जब तक कि थ्रेड अपने सफल समापन की घोषणा नहीं करता। इसलिए, धारा को पूरा करने के लिए, इस तरह के एक ऑब्जर्वेबल को वापस करना आवश्यक है ताकि एक भी अगला न हो - ईएमपीटीवाई।
यदि प्रतिक्रिया {रिक्त: सत्य} आई, तो हम एक निश्चित समय की देरी (विलंब समय) के बाद दूसरा अनुरोध करते हैं। अनुरोधों के साथ सर्वर को अधिभार नहीं देने के लिए, हम प्रत्येक नए अनुरोध के साथ पिंग के लिए समय अंतराल बढ़ाते हैं।
यदि अगले अनुरोध के दौरान प्रतिक्रिया में कुछ और आया था, तो हम पिंग करना बंद कर देते हैं (ईएमपीटीवाई वापस लौटते हैं) और अंतिम अनुरोध का परिणाम ग्राहक (अंतिम () ऑपरेटर) को वापस करते हैं।
उत्तर प्राप्त करने के बाद, हम परिणाम लेते हैं और इसे संसाधित करते हैं। फॉर्म की एक वस्तु सदस्यता में मिल जाएगी:

 { empty: false // -   }

प्रतिक्रियात्मक रूप

कोणीय ढांचे से ReactiveForms पुस्तकालय का उपयोग करके एक भुगतान दस्तावेज़ के प्रतिक्रियाशील वेब रूप को डिजाइन करने के कार्य पर विचार करें।

लायब्रेरी के तीन आधार वर्ग फॉर्मकंट्रोल, फॉर्मग्रुप और फॉर्मअरे आपको फॉर्म फील्ड के एक घोषणात्मक विवरण का उपयोग करने की अनुमति देते हैं, फ़ील्ड के प्रारंभिक मान सेट करते हैं, और प्रत्येक क्षेत्र के लिए सत्यापन नियम भी निर्धारित करते हैं:

 this.myForm = new FormGroup({ name: new FormControl('', Validators.required), //          surname: new FormControl('') });

बड़ी संख्या में फ़ील्ड्स वाले प्रपत्रों के लिए, यह फॉर्मब्युलर सेवा का उपयोग करने के लिए प्रथागत है, जो आपको अधिक कोड कोड का उपयोग करके उन्हें बनाने की अनुमति देता है

 this.myForm = this.fb.group({ name: ['', Validators.required], surname: '' });

भुगतान आदेश पृष्ठ के टेम्प्लेट में फ़ॉर्म बनाने के बाद, यह myForm फ़ॉर्म के लिंक के साथ-साथ इसके क्षेत्रों के नाम और उपनाम के नाम को निर्दिष्ट करने के लिए पर्याप्त है।

 <form [formGroup]="myForm"> <label>Name: <input formControlName="name"> </label> <label>Surname: <input formControlName="surname"> </label> </form>

परिणामी डिज़ाइन आपको उपयोगकर्ता इनपुट के परिणामस्वरूप फ़ॉर्म फ़ील्ड के माध्यम से गुजरने वाली जानकारी के किसी भी प्रवाह को उत्पन्न करने और ट्रैक करने की अनुमति देता है, और एप्लिकेशन के व्यावसायिक तर्क के आधार पर। ऐसा करने के लिए, बस ValueChanges फॉर्म के अतुल्यकालिक पर्यवेक्षक द्वारा उत्पन्न घटनाओं की सदस्यता लें

 this.myForm.valueChanges .subscribe(value => { … //     })

मान लीजिए कि व्यावसायिक तर्क भुगतान गंतव्य के विवरण में स्वचालित रूप से भरने के लिए आवश्यकताओं को परिभाषित करता है जब उपयोगकर्ता प्राप्तकर्ता या संगठन के नाम में प्रवेश करता है। संगठन के TIN / नाम में उपयोगकर्ता द्वारा दर्ज किए गए प्रसंस्करण डेटा के लिए कोड इस तरह दिखाई देगा:

 this.payForm.valueChanges .pipe( mergeMap(value => this.getRequisites(value)) //       ) .subscribe(requisites => { this.patchFormByRequisites(requisites) //        })

मान्यता

सत्यापनकर्ता दो रूपों में आते हैं:

तुल्यकालिक;
अतुल्यकालिक।

हम नियमित रूप से तुल्यकालिक सत्यापनकर्ताओं का सामना करते हैं - ये कार्य हैं जो क्षेत्र के साथ काम करते समय दर्ज किए गए डेटा की जांच करते हैं। प्रतिक्रियाशील रूपों के संदर्भ में:
"एक तुल्यकालिक सत्यापनकर्ता एक फ़ंक्शन है जो नियंत्रण रूपों को लेता है और यदि कोई त्रुटि और गलत है तो एक सत्य मान देता है।"

 function customValidator(control) { return isInvalid(control.value) ? { code: "mistake", message: "smth wents wrong" } : null; }

हम एक सत्यापनकर्ता को लागू करेंगे जो यह जांच करेगा कि क्या उपयोगकर्ता को दस्तावेजों की एक श्रृंखला के रूप में संकेत दिया गया है, यदि पासपोर्ट को पहले से पहचान दस्तावेज के प्रकार के रूप में इंगित किया गया था:

 function requredSeria(control) { const docType = control.parent.get("docType"); let error = null; if (docType && docType.value === "passport" && !control.value) { error = { code: "wrongSeria", message: "  " } } return error; }

यहां हम मूल रूप का भी उल्लेख करते हैं और इसके उपयोग से हमें दूसरे क्षेत्र का मूल्य मिलता है। केवल एक त्रुटि के रूप में सच लौटना संभव था, लेकिन इस मामले में अन्यथा करने का निर्णय लिया गया था। आप इन त्रुटि संदेशों को किसी नियंत्रण या प्रपत्र के त्रुटियों के क्षेत्र में पकड़ सकते हैं। यदि फ़ील्ड में कई सत्यापनकर्ता हैं, तो आप वास्तव में निर्दिष्ट कर सकते हैं कि कौन से सत्यापनकर्ता वांछित त्रुटि संदेश प्रदर्शित करने में विफल रहे हैं या अन्य फ़ील्ड के सत्यापन को समायोजित कर सकते हैं।

सत्यापनकर्ता को निम्न रूप में जोड़ा जाएगा:

  this.documentForm = this.fb.group({ docType: ['', Validators.required], seria: ['', requredSeria], number: '' });

बॉक्स से बाहर, कई सामान्य रूप से सामना किए गए सत्यापनकर्ता भी उपलब्ध हैं। उन सभी का प्रतिनिधित्व वैलिडेटर्स क्लास के स्थिर तरीकों द्वारा किया जाता है। सत्यापनकर्ताओं की रचना के लिए भी तरीके हैं।
एक फ़ील्ड की गलतता तुरंत पूरे फॉर्म की अमान्यता की ओर ले जाती है। इसका उपयोग तब किया जा सकता है जब आपको एक निश्चित ओके बटन को निष्क्रिय करने की आवश्यकता होती है, यदि फॉर्म में कम से कम एक अमान्य फ़ील्ड है। फिर यह सब एक शर्त "myform.invalid" की जांच करने के लिए नीचे आता है, जो कि फॉर्म अमान्य होने पर वापस आ जाएगा।

अतुल्यकालिक सत्यापनकर्ता में एक अंतर है - वापसी मूल्य का प्रकार। सत्य या मिथ्या मूल्य को एक वादे या एक अवलोकन में पारित किया जाना चाहिए।

प्रत्येक नियंत्रण या प्रत्येक रूप में एक स्थिति (mySuperForm.status) होती है, जो "वैध", "निवेश", "छूट" हो सकती है। चूंकि अतुल्यकालिक सत्यापनकर्ताओं का उपयोग करते समय यह स्पष्ट नहीं हो सकता है कि वर्तमान में फॉर्म किस स्थिति में है, इसलिए "भुगतान" की एक विशेष स्थिति है। इस स्थिति के लिए धन्यवाद (mySuperForm.status === "PENDING"), आप प्रीलोडर प्रदर्शित कर सकते हैं या कोई अन्य रूप स्टाइल कर सकते हैं।

ऑटो बचाओ

बैंकिंग सॉफ्टवेयर (सॉफ्टवेयर) के विकास में विभिन्न मानक दस्तावेजों के साथ काम करना शामिल है। उदाहरण के लिए, ये एप्लिकेशन फॉर्म या प्रश्नावली हैं, जिनमें दर्जनों आवश्यक फ़ील्ड शामिल हो सकते हैं। ऐसे स्वैच्छिक दस्तावेजों के साथ काम करते समय, अतिरिक्त उपयोगकर्ता सुविधा के लिए ऑटोसविंग समर्थन की आवश्यकता होती है, ताकि यदि आप अपना इंटरनेट कनेक्शन या अन्य तकनीकी समस्याएं खो देते हैं, तो उपयोगकर्ता द्वारा दर्ज किया गया डेटा सर्वर पर ड्राफ्ट संस्करण में रहता है।

क्लाइंट-सर्वर आर्किटेक्चर के लिए स्वत: सहेजने की प्रक्रिया के मुख्य पहलू इस प्रकार हैं:

जिस क्रम में परिवर्तन किए गए थे उस क्रम में सेव रिक्वेस्ट को सर्वर द्वारा संसाधित किया जाना चाहिए। यदि आप तुरंत प्रत्येक परिवर्तन के लिए अनुरोध भेजते हैं, तो आप यह गारंटी नहीं दे सकते कि पहले का अनुरोध अगला नहीं आएगा और नए परिवर्तनों को अधिलेखित नहीं करेगा।
सर्वर में बड़ी संख्या में अनुरोध भेजने के लिए आवश्यक नहीं है जब तक कि उपयोगकर्ता ने प्रवेश नहीं किया है, यह समय के अनुसार ऐसा करने के लिए पर्याप्त है।
यदि अपेक्षाकृत बड़े विलंब के साथ कई बदलाव किए गए हैं, और पहले परिवर्तनों के लिए अनुरोध अभी तक वापस नहीं आया है, तो पहले अनुरोध के लौटने पर तुरंत प्रत्येक बाद के बदलाव के लिए अनुरोध भेजने की आवश्यकता नहीं है। आप केवल उत्तरार्द्ध ले सकते हैं, ताकि अप्रासंगिक डेटा न भेजें।

पहले मामले को आसानी से कॉनकटैट ऑपरेटर के उपयोग से निपटा जा सकता है। दूसरे मामले को बिना किसी समस्या के हल किया जाएगा। तीसरे के तर्क के रूप में वर्णित किया जा सकता है:

 const lastRequest$ = new BehaviorSubject(null); //   queue$.subscribe(lastRequest$); queue$ .pipe( debounceTime(1000), exaustMap(request$ => request$.pipe( //  ,     map(response => ({request$, response})), //       catchError(() => of(null) //   ) ) .subscribe(({request$, response}) => { if (lastRequest$.value !== request$) { queue$.next(lastRequest$.value); //     } });

यह एक अनुरोध भेजने के लिए saveQueue $ में बना हुआ है। कॉनसेप्ट मैप के बजाय एक्सटाप्साउपर ऑपरेटर की उपस्थिति पर ध्यान दें। यह ऑपरेटर बाहरी अवलोकन के सभी नोटिफिकेशन को अनदेखा करना आवश्यक है जब तक कि आंतरिक ने अपना अवलोकन ("संकलित") पूरा नहीं किया है। लेकिन हमारे मामले में, यदि अनुरोध के दौरान नई अधिसूचनाओं की कतार होगी, तो हमें अंतिम एक लेना होगा और बाकी को छोड़ देना चाहिए। exaustMap पिछले एक सहित सब कुछ छोड़ देगा। इसलिए, हम व्यवहार अधिसूचना में अंतिम सूचना को सहेजते हैं, और सदस्यता में, यदि वर्तमान संसाधित अनुरोध पिछले एक से अलग है, तो हम अंतिम अनुरोध को फिर से कतार में फेंक देंगे।

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

निष्कर्ष

RxJS पुस्तकालय का उपयोग करके प्रतिक्रियाशील प्रोग्रामिंग प्रौद्योगिकियों के विकास का आज का स्तर आपको दूरस्थ बैंकिंग प्रणालियों के अत्यधिक लोड किए गए इंटरफेस के साथ बातचीत के आयोजन के लिए अतिरिक्त श्रम लागत के बिना ऑनलाइन बैंकिंग सिस्टम के लिए पूर्ण क्लाइंट एप्लिकेशन बनाने की अनुमति देता है।

RxJS के साथ पहला परिचित एक अनुभवी डेवलपर को भी डरा सकता है, जिसका सामना लाइब्रेरी के "पेचीदगियों" से होता है जो डिज़ाइन पैटर्न "ऑब्जर्वर" को लागू करते हैं। लेकिन, शायद इन कठिनाइयों को पार करते हुए, भविष्य में RxJS वास्तविक समय में विषम डेटा धाराओं के अतुल्यकालिक प्रसंस्करण की समस्याओं को हल करने में एक अनिवार्य उपकरण बन जाएगा।

एक ऑनलाइन बैंकिंग प्रणाली में RxJs पुस्तकालय का उपयोग करने की विशेषताएं