Node.js इन्वेंटरी और इनवॉइस बिलिंग एप्लिकेशन बनाना: एक गाइड

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

ऐसा करने से आप अपने व्यवसाय के प्रदर्शन के शीर्ष पर बने रह सकते हैं और आपको जब भी और जहाँ भी आवश्यकता हो, सूचित निर्णय ले सकते हैं।

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

इस लेख में, हम आपको दिखाएंगे कि कैसे एक उत्तरदायी Node.js इन्वेंट्री प्रबंधन प्रणाली का निर्माण किया जाए, जिससे उपयोगकर्ता ActiveReportsJS का उपयोग करके ऑर्डर रिपोर्ट ट्रैक कर सकें। हम निम्नलिखित विषयों को कवर करेंगे:

• रिपोर्ट का शीर्षक डिजाइन करना

• Node.js में डेटा एक्सेस को परिभाषित करना

• परिकलित फ़ील्ड का उपयोग करना

• चार्ट नियंत्रण जोड़ना

• तालिका नियंत्रण जोड़ना

• उप-तालिकाओं को परिभाषित करना

• ड्रिल-डाउन कार्यक्षमता जोड़ना

• टेबल्स में सॉर्टिंग कॉलम जोड़ना

• Node.js इनवॉइस एप्लिकेशन बनाना

  
  

यदि आप पूर्ण रिपोर्ट और आवेदन के साथ पालन करना चाहते हैं, तो आप यहां रिपॉजिटरी पा सकते हैं।

वेब-आधारित बिक्री रिपोर्ट बनाना

हमारे परिदृश्य के लिए, हमारे पास ACME Inc. नाम का एक ग्राहक है जिसने हमें बिक्री रिपोर्ट बनाने के लिए अनुबंधित किया है। अनुरोध रिपोर्ट के मॉकअप के साथ आता है, जो इस तरह दिखता है:

ऊपर की तरह एंटरप्राइज़-स्तरीय रिपोर्ट बनाने के लिए, GrapeCity ActiveReportsJS डिज़ाइनर प्रदान करता है। यह सहज ज्ञान युक्त टूल आपकी रिपोर्ट को डेटा लाने और टेबल, बार चार्ट, पाई चार्ट आदि जैसे दृश्य तत्वों का उपयोग करके इसे प्रस्तुत करने के लिए कॉन्फ़िगर करने में आपकी सहायता करता है।

ActiveReportsJS डिज़ाइनर रिपोर्ट परिभाषाओं को एक विशेष JSON प्रारूप में संग्रहीत करता है और उन्हें .rdlx-json एक्सटेंशन वाली फ़ाइलों में सहेजता है।

रिपोर्ट का शीर्षक डिजाइन करना

एक नई रिपोर्ट बनाने के लिए, डिज़ाइनर में, फ़ाइल मेनू n डिज़ाइनर टूलबार खोलें और सतत पृष्ठ लेआउट रिपोर्ट विकल्प चुनें:

अब जबकि हमारे पास एक नई रिपोर्ट है, बाईं ओर स्थित हैमबर्गर बटन पर क्लिक करने से नियंत्रण कक्ष विस्तृत हो जाएगा। यहां से, आप नियंत्रणों को रिपोर्ट में शामिल करने के लिए उन्हें अपने रिपोर्ट कैनवास पर खींच और छोड़ सकते हैं:

हमारी रिपोर्ट के लिए, हमारे पास सबसे ऊपर एक कंटेनर होगा जिसमें लोगो इमेज और एक लेबल होगा। नियंत्रण कक्ष से रिपोर्ट कैनवास पर एक कंटेनर नियंत्रण खींचें और छोड़ें; फिर रिपोर्ट कैनवास पर कंटेनर नियंत्रण में छवि और टेक्स्टबॉक्स नियंत्रण को खींचें और छोड़ें।

किसी छवि को छवि नियंत्रण से लिंक करने के लिए, आप या तो छवि को बाहरी स्रोत से खींच सकते हैं, जैसे URL या डेटाबेस या छवि को स्थानीय फ़ाइल से एम्बेड कर सकते हैं। हमारी छवि ACME Inc. का लोगो होगी।

टेक्स्टबॉक्स के लिए, आप फ़ॉन्ट, आकार और रंग को अनुकूलित कर सकते हैं जैसा कि आप फिट देखते हैं। शीर्षक टेक्स्ट के लिए, हम इसे मासिक ऑर्डर पर सेट करेंगे।

पूरा होने पर, आपका शीर्षक कुछ इस तरह दिखना चाहिए:

Node.js में डेटा एक्सेस को परिभाषित करना

ActiveReportsJS डिज़ाइनर दो प्रकार की संस्थाओं के माध्यम से डेटा कनेक्शन प्रबंधित करता है: डेटा स्रोत और डेटा सेट।

डेटा स्रोत बाहरी डेटा संग्रहण के कनेक्शन के रूप में कार्य करता है, जैसे कि URI या JSON फ़ाइल या JSON दस्तावेज़ जिसे रिपोर्ट में एम्बेड किया जा सकता है।

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

हमारा इन्वेंट्री इनवॉइस सॉफ़्टवेयर HTTP सेवा पर स्थित बाहरी API के माध्यम से डेटा तक पहुंच प्राप्त करेगा, जो JSON प्रारूप में परिणाम लौटाएगा। रिपोर्ट उस सेवा के "लाइव" डेटा के आधार पर विभिन्न प्रकार की ऑर्डर जानकारी दिखाएगी।

अपनी रिपोर्ट में ग्राहक डेटा तक पहुंच निर्धारित करने के लिए, डेटा स्रोत टैब का चयन करके प्रारंभ करें और "डेटा स्रोत" अनुभाग में जोड़ें बटन पर क्लिक करें:

यह नया डेटा स्रोत विंडो लाएगा:

यह विंडो डेटा स्रोत को नाम देती है, डेटा प्रदाता सेट करती है, और कोई भी अतिरिक्त HTTP हेडर या आवश्यक पैरामीटर जोड़ती है।

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

नोट: डेटा स्रोत एक साधारण कनेक्शन कॉन्फ़िगरेशन है; अभी तक कोई अनुरोध नहीं किया गया है।

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

इससे नई डेटा सेट विंडो खुल जाएगी:

हमें आमतौर पर यहां दो गुण सेट करने की आवश्यकता होती है: Uri/path और JSON Path । उरी/पथ ActiveReportsJS को बताता है कि एपीआई एंडपॉइंट पर पहुंचने के बाद JSON फाइल को कहां देखना है, और Json Path का उपयोग हमारे Node.js इनवॉइस एप्लिकेशन को यह बताने के लिए किया जाता है कि हम JSON का कौन सा हिस्सा हथियाना चाहते हैं।

उरी/पथ के लिए, हम अपने ग्राहकों पर डेटा वापस करने के लिए /ग्राहकों का उपयोग करेंगे। हमारे मामले में, हम सभी प्रविष्टियों को प्राप्त करना चाहते हैं, इसलिए हम JSON पथ के रूप में $.* पास करेंगे।

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

हमें अपने एप्लिकेशन के लिए एक अन्य डेटा स्रोत की आवश्यकता होगी, जिसका उपयोग हम नोड.जेएस इनवॉइस ऐप के माध्यम से किए गए ऑर्डर के डेटा को पुनः प्राप्त करने के लिए करेंगे। आपका दूसरा डेटा स्रोत ऐसा दिखना चाहिए:

हमें दो और डेटा सेट की आवश्यकता होगी: एक NWAPI डेटा स्रोत पर आधारित, Uri/पथ के रूप में /Products का उपयोग कर रहा है, और दूसरा NWOData स्रोत पर आधारित, Uri/पथ के रूप में /Orders का उपयोग कर रहा है। ऑर्डर डेटा सेट के लिए, Json पथ को $.value[*] पर भी सेट करें।

सेट अप करते समय, डेटा पैनल ऐसा दिखना चाहिए:

परिकलित फ़ील्ड का उपयोग करना

कभी-कभी, आपको रिपोर्ट में उपयोग करने के लिए एक या अधिक स्रोत फ़ील्ड को नए परिकलित फ़ील्ड में बदलने की आवश्यकता होगी। ActiveReportsJS इस आवश्यकता को पूरा करने के लिए समृद्ध अंतर्निर्मित कार्यों के साथ एक अभिव्यक्ति भाषा प्रदान करता है।

इस उदाहरण में, आइए ऑर्डरडेट फ़ील्ड को "माह/वर्ष" प्रारूप में बदलें। इसे प्राप्त करने के लिए आपको स्वचालित रूप से बाध्य डेटाबेस फ़ील्ड की सूची में एक कस्टम फ़ील्ड जोड़ना होगा।

ऑर्डर डेटा सेट को संपादित करें, और परिकलित फ़ील्ड अनुभाग का विस्तार करें; यहीं पर हम अपना नया परिकलित क्षेत्र जोड़ सकते हैं। फ़ील्ड को महीना वर्ष नाम दें, और मान को {DateTime.Parse(OrderDate).ToString("MM/yyyy")} के रूप में सेट करें:

NWOData स्रोत के आधार पर OrderDetails नामक एक नया डेटा सेट बनाएँ; Uri/path को /OrderDetails पर सेट करें और Json पथ को $.value[*] पर सेट करें।

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

ऑर्डर विवरण डेटा सेट के परिकलित फ़ील्ड अनुभाग का विस्तार करें, फ़ील्ड को सबटोटल नाम दें, और मान को {राउंड (100 * (यूनिटप्राइस - यूनिटप्राइस * डिस्काउंट) * मात्रा) / 100} के रूप में सेट करें।

चार्ट नियंत्रण जोड़ना

अब जब हमने कई डेटा स्रोत सेट कर लिए हैं, तो उन्हें रिपोर्ट में शामिल करने का समय आ गया है; ऐसा करने के लिए, हम एक चार्ट जोड़ेंगे। चार्ट कंट्रोल को कंट्रोल पैनल से खींचकर रिपोर्ट पर छोड़ने से चार्ट विज़ार्ड सामने आ जाएगा:

सुनिश्चित करें कि डेटा सेट हमारे ऑर्डर विवरण सेट का उपयोग करने के लिए सेट है, और नेक्स्ट बटन पर क्लिक करें।

अब हम अपना डेटा और श्रेणी फ़ील्ड सेट कर सकते हैं। "डेटा मान" के लिए, एक नया फ़ील्ड जोड़ें। नाम को {सबटोटल} पर और एग्रीगेट को योग पर सेट करें। फिर, "डेटा श्रेणियाँ" के लिए, फ़ील्ड को {Lookup(OrderId, OrderId, MonthYear, "Orders")} पर सेट करें। ऐसा दिखना चाहिए:

अगला क्लिक करें, और फिर समाप्त क्लिक करें। चार्ट को देखने से पहले हमें जो आखिरी काम करना है, वह है चार्ट के विभिन्न तत्वों की संपत्तियों में कुछ अंतिम परिवर्तन करना।

चार्ट के तत्वों को संशोधित करने के लिए, आपको केवल यह सुनिश्चित करने की आवश्यकता है कि आप डेटा विंडो के बजाय गुण विंडो देख रहे हैं और फिर चार्ट के एक तत्व पर क्लिक करें।

गुण विंडो वर्तमान में चयनित तत्व के सभी गुणों को दिखाने के लिए अद्यतन होगी। चार्ट गुणों को निम्नानुसार परिभाषित करें:

पूर्ण होने पर, आपकी रिपोर्ट इस तरह दिखनी चाहिए:

पूर्वावलोकन पर क्लिक करने से हमें लोड होने वाले डेटा वाली रिपोर्ट दिखाई देगी:

तालिका नियंत्रण जोड़ना

चार्ट के अलावा, हम चाहते हैं कि उपयोगकर्ता हमारे Node.js चालान ऐप में अधिक डेटा देख सकें। आइए महीने-दर-माह ऑर्डर की मात्रा का एक सारणीबद्ध दृश्य बनाएं। तालिका नियंत्रण को नियंत्रण कक्ष से खींचकर चार्ट के नीचे रिपोर्ट पर छोड़ें:

डिफ़ॉल्ट रूप से, एक ActiveReportsJS तालिका तीन कॉलम और तीन पंक्तियों के साथ बनाई जाती है। शीर्ष पंक्ति हेडर पंक्ति के रूप में कार्य करती है, मध्य पंक्ति हमारी विवरण पंक्ति है और हमारे डेटा को रखती है, और नीचे की पंक्ति पाद लेख पंक्ति है।

रिपोर्ट लेखक तालिका का आकार बदल सकते हैं, पंक्तियों और स्तंभों को जोड़ या हटा सकते हैं, एकाधिक शीर्षलेख और पादलेख परिभाषित कर सकते हैं, और इसी तरह।

अब, तालिका का चयन करें, गुण पैनल पर जाएँ, और गुणों को निम्नानुसार परिभाषित करें:

फिर तालिका के शीर्ष लेख और पादलेख पंक्तियों को हटा दें, क्योंकि इनकी आवश्यकता नहीं है। यह उस पंक्ति में एक सेल पर राइट-क्लिक करके किया जाता है जिसे आप हटाना चाहते हैं, पंक्ति विकल्प का चयन करके और पंक्ति हटाएं पर क्लिक करके:

अब, विवरण पंक्ति के लिए कक्षों को मर्ज करें। यह उन सेल का चयन करके किया जाता है जिन्हें आप मर्ज करना चाहते हैं, चयनित सेल में से किसी एक पर राइट-क्लिक करके, मेनू से सेल विकल्प का चयन करके, और मर्ज सेल पर क्लिक करके किया जाता है:

अब नए विलय किए गए सेल का चयन करें, इसके टेक्स्ट बॉक्स का नाम txtMonth पर सेट करें, और इसके मान को {MonthName(Month(OrderDate))}/{Year(OrderDate)} पर सेट करें:

अंत में, आपको टेबल ग्रुपिंग को परिभाषित करना होगा। यह सेल का चयन करके और पॉपअप मेनू से <विवरण समूह> का चयन करके किया जा सकता है।

समूह के पहले स्तर को सूत्र {Year(OrderDate)} और दूसरे स्तर को {Month(OrderDate)} के रूप में सेट करें:

नई तालिका तालिका अनुभाग में डेटा के प्रथम स्तर को प्रदर्शित करती है:

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

नई तालिका के गुणों को निम्नानुसार परिभाषित करें:

अब नए मर्ज किए गए सेल का चयन करें, इसके टेक्स्ट बॉक्स का नाम txtOrderId पर सेट करें, और इसके मान को ऑर्डर आईडी: {OrderId} पर सेट करें। एक बार यह सेट हो जाने के बाद, परिणाम देखने के लिए रिपोर्ट का पूर्वावलोकन करें:

ध्यान दें कि टेबलऑर्डर टेबल आपकी रिपोर्ट में दूसरे स्तर पर है; यह किसी विशेष महीने के भीतर दिए गए आदेशों का विवरण देता है।

उप-तालिकाओं को परिभाषित करना

अब जब हम महीने के अनुसार आदेश प्रदर्शित कर रहे हैं, तो यह समय है कि हम अपने वस्तु-सूची इनवॉइस एप्लिकेशन के माध्यम से आने वाले प्रत्येक आदेश के लिए एक आदेश विवरण अनुभाग जोड़ें।

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

अगला, सभी तीन कोशिकाओं को एक में मिलाने के बजाय, केंद्र और दाएँ कोशिकाओं को एक में मिला दें और बाईं कोशिका को अपने स्वयं के कक्ष के रूप में छोड़ दें।

बाएं सेल सूत्र को कुल के रूप में परिभाषित करें: मर्ज किए गए सेल के लिए, सेल एलाइनमेंट को बाईं ओर सेट करने के लिए गुण पैनल का उपयोग करें और इसके प्रारूप गुण को करेंसी पर सेट करें, और मर्ज किए गए सेल सूत्र को {SUM(Subtotal)} के रूप में सेट करें:

Explorer में tableOrderTotal तालिका का चयन करें, और फ़िल्टर गुण का विस्तार करें। आइटम जोड़ें पर क्लिक करें और निम्न फ़ील्ड के साथ एक नया फ़िल्टर मानदंड जोड़ें:

जैसा कि आप देख सकते हैं, नई तालिका ऑर्डरटोटल तालिका ऑर्डर विवरण डेटा सेट पर आधारित है। टेबल ऑर्डर पंक्ति के ऑर्डर आईडी द्वारा ऑर्डर विवरण को फ़िल्टर करके और उप-योग फ़ील्ड मानों को जोड़कर कुल मान प्राप्त किया जाता है।

पूर्वावलोकन पर क्लिक करने से अद्यतन तालिका प्रदर्शित होगी:

अंत में, हम अपने इनवॉयस के लिए ऑर्डर आइटम को दर्शाने वाली एक टेबल तैयार करेंगे।

TableOrders तालिका में एक नई विवरण पंक्ति बनाएँ, फिर नई विवरण पंक्ति के अंदर एक नई तालिका बनाएँ, जिसे tableOrderDetails कहा जाता है। तालिका को निम्नानुसार कॉन्फ़िगर करें:

पूर्ण होने पर, तालिका इस तरह दिखनी चाहिए:

पूर्वावलोकन पर क्लिक करने से नई तालिका दिखाई देगी:

इससे पहले कि हम आगे बढ़ें, हम तालिका के स्वरूप को बेहतर बनाने के लिए थोड़ा स्टाइल करेंगे। यहाँ समाप्त संस्करण कैसा दिखता है:

ड्रिल-डाउन कार्यक्षमता जोड़ना

अब, रिपोर्ट में ड्रिल-डाउन कार्यात्मकता जोड़ते हैं, जिससे हमें टेबलऑर्डर्स और टेबलऑर्डरडिटेल्स टेबल्स को तब तक संक्षिप्त रखने की अनुमति मिलती है जब तक कि उपयोगकर्ता उन्हें विस्तृत नहीं कर देता।

तालिका आदेश तालिका का चयन करें, और छिपे हुए और टॉगल आइटम गुणों को निम्नानुसार बदलें:

TableOrderDetails तालिका का चयन करें, और इसे संक्षिप्त करने योग्य भी बनाएं:

अब, हम +/- प्रतीकों पर क्लिक करके विवरण स्तरों को विस्तृत और संक्षिप्त कर सकते हैं:

इसके बाद, चलिए अपने Node.js चालान एप्लिकेशन की रिपोर्ट में कुछ और विवरण जोड़ते हैं।

TableOrderDetails तालिका में मौजूदा शीर्ष लेख पंक्ति के ऊपर चार नई पंक्तियाँ जोड़ें। इन चार पंक्तियों के ऊपर और नीचे एक बफर के रूप में काम करेंगे, और बीच की दो पंक्तियों में वह डेटा होगा जिसे हम प्रदर्शित करना चाहते हैं।

जोड़ी गई दूसरी और तीसरी पंक्तियों में, प्रत्येक पंक्ति के दूर-बाएँ कक्ष को अपने आप छोड़ दें, और प्रत्येक पंक्ति के लिए शेष कक्षों को मिला दें। फिर, पंक्तियों को इस प्रकार भरें:

पूर्वावलोकन पर क्लिक करें, और आप चालान में जोड़े गए ग्राहक का नाम और ऑर्डर की तारीख देख सकते हैं:

टेबल में सॉर्टिंग कॉलम जोड़ना

रिपोर्ट में हम जो आखिरी चीज जोड़ेंगे वह है ऑर्डर विवरण के कॉलम को क्रमबद्ध करने की क्षमता।

प्रत्येक हेडर सेल का चयन करें, और निम्नलिखित सूत्रों के साथ यूजर सॉर्ट सेक्शन के तहत सॉर्ट एक्सप्रेशन फ़ील्ड भरें:

पूर्वावलोकन पर क्लिक करें, और अब आप कॉलम हेडर के बगल में सॉर्ट आइकन देख सकते हैं; ऑर्डर आइटम को मात्रा द्वारा क्रमबद्ध करें:

ऑर्डर को कुल कीमत के अनुसार क्रमित करें:

Node.JS इनवॉइस एप्लिकेशन बनाना

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

नमूना अनुप्रयोग सर्वर साइड पर वेब ऐप को निष्पादित करने के लिए, एक जावास्क्रिप्ट रनटाइम वातावरण Node.js का उपयोग करेगा।

आरंभ करने के लिए, InventoryInvoice नामक एक नया फ़ोल्डर बनाएँ, और इसे अपनी पसंदीदा IDE में खोलें। फिर, कमांड लाइन में, चलाएँ:

 npm init

यह आपको अपनी package.json फ़ाइल सेट अप करके चलाएगा, जिसका उपयोग आपके एप्लिकेशन को बनाने के लिए किया जाएगा। एक बार आपकी फ़ाइल जनरेट हो जाने के बाद, निम्नलिखित दो कमांड चलाएँ:

 npm install express npm install @grapecity/activereports

यह Express, Node.js के लिए एक रूपरेखा और ActiveReports स्थापित करेगा, जिसका उपयोग हम चालान प्रदर्शित करने के लिए करेंगे।

अब हमारे पास एक्सप्रेस स्थापित है, हमें इसे उपयोग में लाने की आवश्यकता है। InventoryInvoice फ़ोल्डर में index.js नामक एक नई फ़ाइल बनाएँ। यह फ़ाइल हमारे Node.js इन्वेंट्री इनवॉइस एप्लिकेशन को सर्व करने के लिए एक्सप्रेस का उपयोग करेगी।

index.js फ़ाइल के अंदर, निम्न कोड जोड़ें:

 const express = require('express'); //import Express.js module const app = express(); const path = require('path'); app.use(express.static(path.join(__dirname))); app.listen(3000, () => { console.log(`Example app listening on port 3000`) })

अब, हम यहां क्या कर रहे हैं, इसकी त्वरित व्याख्या का समय आ गया है:

• कोड की पहली दो पंक्तियों में हमारे सर्वर में एक्सप्रेस शामिल है और हमें एक्सप्रेस विधियों और गुणों को संदर्भित करने के लिए उपयोग करने के लिए एक चर देता है।

• तीसरी पंक्ति एक चर बनाती है जो फ़ोल्डर के सापेक्ष पथ की ओर ले जाती है, और चौथी पंक्ति एक्सप्रेस को बताती है कि हम इस पथ को अपने आवेदन के स्थिर पथ के रूप में उपयोग करना चाहते हैं।

• आवेदन शुरू करने के लिए लाइन छह से आठ तक एक्सप्रेस का उपयोग करें; यहां, हम इसे पोर्ट 3000 पर चलाने के लिए कह रहे हैं, और जब यह चलना शुरू होता है, तो हम टर्मिनल पर एक संदेश लॉग करते हैं।

और वह बहुत ही बुनियादी स्तर पर एक्सप्रेस है! अब जब हमारे पास एक सर्वर है जिसे हम इन्वेंट्री इनवॉइस सॉफ़्टवेयर लॉन्च करना शुरू कर सकते हैं, तो उपयोगकर्ता को सेवा प्रदान करने के लिए एक पृष्ठ बनाने का समय आ गया है।

InventoryInvoice फ़ोल्डर में एक नई फ़ाइल बनाएँ और इसे index.html नाम दें। एक बार बनने के बाद, निम्न कोड डालें:

 <html> <head> <meta charset="utf-8" /> <title>ActiveReportsJS Viewer</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="node_modules/@grapecity/activereports/styles/ar-js-ui.css" /> <link rel="stylesheet" href="node_modules/@grapecity/activereports/styles/ar-js-viewer.css" /> <script type="text/javascript" src="node_modules/@grapecity/activereports/dist/ar-js-core.js"></script> <script type="text/javascript" src="node_modules/@grapecity/activereports/dist/ar-js-viewer.js"></script> <style> #arjs-viewer { width: 100%; height: 100vh; } </style> </head> <body onload="load()"> <div id="arjs-viewer"></div> <script> function load() { const viewer = new ActiveReports.Viewer('#arjs-viewer'); viewer.open('MonthlyOrders.rdlx-json'); } </script> </body> </html>

यहाँ पर जाने के लिए कुछ चीज़ें हैं। सबसे पहले, हम अपनी HTML फ़ाइल में चार फ़ाइलें शामिल कर रहे हैं; ar-js-ui.css , ar-js-viewer.css , ar-js-core.js , और ar-js-viewer.js । CSS फ़ाइलें ActiveReportsJS के लिए मुख्य CSS फ़ाइल हैं और दर्शक को शैली देने के लिए उपयोग की जाने वाली CSS फ़ाइल हैं।

जेएस फाइलें समान हैं; व्यूअर के लिए एक कोर JS फ़ाइल और एक JS फ़ाइल।

दूसरा, HTML के लिए, हम ActiveReportsJS व्यूअर बनाने के लिए केवल एक पंक्ति का उपयोग कर रहे हैं। हमें बस एक आईडी के साथ एक सिंगल डिव चाहिए जिसका उपयोग हम व्यूअर को डिव के साथ जोड़ने के लिए कर सकते हैं।

तीसरा, जावास्क्रिप्ट में, पृष्ठ लोड होने के बाद, हम एक नया ActiveReports.Viewer नियंत्रण बना रहे हैं, इसे हमारे div से संबद्ध कर रहे हैं, और फिर इसे हमारी रिपोर्ट खोलने के लिए कह रहे हैं।

अंत में, हम CSS की एक छोटी राशि शामिल कर रहे हैं ताकि दर्शक स्क्रीन की संपूर्णता को ग्रहण कर सकें।

एक बार यह हो जाने के बाद, आपको केवल अपनी रिपोर्ट को InventoryInvoice फ़ोल्डर में ले जाने की आवश्यकता है, और अपना Node.js इन्वेंट्री इनवॉइस ऐप प्रारंभ करने के लिए निम्न कमांड चलाएँ:

 node index.js

लोकलहोस्ट: 3000 पर नेविगेट करें, और आपको अपने द्वारा बनाई गई रिपोर्ट को देखना और उससे इंटरैक्ट करने में सक्षम होना चाहिए:

ActiveReportsJS व्यूअर घटक भी उत्तरदायी है; यह स्क्रीन आकार की एक विस्तृत श्रृंखला में विभिन्न उपकरणों पर उचित रूप से प्रस्तुत किया जाता है। आप अपने वेब ब्राउज़र में उपलब्ध डेवलपर टूल का उपयोग विभिन्न मोबाइल उपकरणों, स्क्रीन आकार और पेज ओरिएंटेशन का त्वरित अनुकरण करने के लिए कर सकते हैं:

अंतिम नोट्स

और उसके साथ, हम कर चुके हैं! इस लेख ने ग्रेपसिटी के ActiveReportsJS डिज़ाइनर का उपयोग करके मासिक इन्वेंट्री इनवॉइस रिपोर्ट बनाने के लिए व्यावहारिक दृष्टिकोण प्रदान किया।

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

यदि आप भरे हुए आवेदन और रिपोर्ट को देखना चाहते हैं, तो आप इसे यहां पा सकते हैं। हैप्पी कोडिंग!