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 को स्थानीय फ़ाइल के माध्यम से रिपोर्ट में एम्बेड करने के बीच चयन कर सकते हैं। हम इस इन्वेंट्री इनवॉइस एप्लिकेशन के लिए अपना डेटा किसी दूरस्थ स्रोत से लोड करेंगे। जब सब कुछ जोड़ दिया जाता है, तो अपने डेटा स्रोत को बचाने के लिए बटन पर क्लिक करें। सहेजें डेटा स्रोत एक साधारण कनेक्शन कॉन्फ़िगरेशन है; अभी तक कोई अनुरोध नहीं किया गया है। नोट: अब जबकि हमने एक डेटा स्रोत बना लिया है, हमें एक डेटा सेट बनाने की आवश्यकता है जो डेटा को पुनः प्राप्त करने के लिए उस स्रोत का उपयोग करता है। डेटा सेट बनाने के लिए, हमारे डेटा स्रोत के बगल में दिखाई देने वाले बटन पर क्लिक करें: प्लस इससे विंडो खुल जाएगी: नई डेटा सेट हमें आमतौर पर यहां दो गुण सेट करने की आवश्यकता होती है: और । उरी/पथ ActiveReportsJS को बताता है कि एपीआई एंडपॉइंट पर पहुंचने के बाद JSON फाइल को कहां देखना है, और Json Path का उपयोग हमारे Node.js इनवॉइस एप्लिकेशन को यह बताने के लिए किया जाता है कि हम JSON का कौन सा हिस्सा हथियाना चाहते हैं। Uri/path JSON Path उरी/पथ के लिए, हम अपने ग्राहकों पर डेटा वापस करने के लिए उपयोग करेंगे। हमारे मामले में, हम सभी प्रविष्टियों को प्राप्त करना चाहते हैं, इसलिए हम JSON पथ के रूप में पास करेंगे। /ग्राहकों का $.* अंत में, हमें डेटा स्रोत को सत्यापित करने की आवश्यकता है ताकि ActiveReportsJS पुष्टि कर सके कि यह डेटा पुनर्प्राप्त कर सकता है। यदि आप देखते हैं कि सरणी मानों से भरी हुई है, तो आपको पता चल जाएगा कि आपका डेटा स्रोत सत्यापित किया गया था: डेटाबेस फ़ील्ड हमें अपने एप्लिकेशन के लिए एक अन्य डेटा स्रोत की आवश्यकता होगी, जिसका उपयोग हम नोड.जेएस इनवॉइस ऐप के माध्यम से किए गए ऑर्डर के डेटा को पुनः प्राप्त करने के लिए करेंगे। आपका दूसरा डेटा स्रोत ऐसा दिखना चाहिए: हमें दो और डेटा सेट की आवश्यकता होगी: एक NWAPI डेटा स्रोत पर आधारित, Uri/पथ के रूप में उपयोग कर रहा है, और दूसरा NWOData स्रोत पर आधारित, Uri/पथ के रूप में उपयोग कर रहा है। डेटा सेट के लिए, Json पथ को पर भी सेट करें। /Products का /Orders का ऑर्डर $.value[*] सेट अप करते समय, डेटा पैनल ऐसा दिखना चाहिए: परिकलित फ़ील्ड का उपयोग करना कभी-कभी, आपको रिपोर्ट में उपयोग करने के लिए एक या अधिक स्रोत फ़ील्ड को नए परिकलित फ़ील्ड में बदलने की आवश्यकता होगी। ActiveReportsJS इस आवश्यकता को पूरा करने के लिए समृद्ध अंतर्निर्मित कार्यों के साथ एक अभिव्यक्ति भाषा प्रदान करता है। इस उदाहरण में, आइए ऑर्डरडेट फ़ील्ड को "माह/वर्ष" प्रारूप में बदलें। इसे प्राप्त करने के लिए आपको स्वचालित रूप से बाध्य डेटाबेस फ़ील्ड की सूची में एक कस्टम फ़ील्ड जोड़ना होगा। डेटा सेट को संपादित करें, और अनुभाग का विस्तार करें; यहीं पर हम अपना नया परिकलित क्षेत्र जोड़ सकते हैं। फ़ील्ड को और मान के रूप में सेट करें: ऑर्डर परिकलित फ़ील्ड महीना वर्ष नाम दें, को {DateTime.Parse(OrderDate).ToString("MM/yyyy")} NWOData स्रोत के आधार पर नामक एक नया डेटा सेट बनाएँ; Uri/path को पर सेट करें और Json पथ को पर सेट करें। OrderDetails /OrderDetails $.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 का उपयोग करेगा। आरंभ करने के लिए, और इसे अपनी पसंदीदा IDE में खोलें। फिर, कमांड लाइन में, चलाएँ: InventoryInvoice नामक एक नया फ़ोल्डर बनाएँ, npm init यह आपको अपनी फ़ाइल सेट अप करके चलाएगा, जिसका उपयोग आपके एप्लिकेशन को बनाने के लिए किया जाएगा। एक बार आपकी फ़ाइल जनरेट हो जाने के बाद, निम्नलिखित दो कमांड चलाएँ: package.json npm install express npm install @grapecity/activereports यह Express, Node.js के लिए एक रूपरेखा और ActiveReports स्थापित करेगा, जिसका उपयोग हम चालान प्रदर्शित करने के लिए करेंगे। अब हमारे पास एक्सप्रेस स्थापित है, हमें इसे उपयोग में लाने की आवश्यकता है। फ़ोल्डर में नामक एक नई फ़ाइल बनाएँ। यह फ़ाइल हमारे Node.js इन्वेंट्री इनवॉइस एप्लिकेशन को सर्व करने के लिए एक्सप्रेस का उपयोग करेगी। InventoryInvoice index.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 ActiveReportsJS Viewer #arjs-viewer { width: 100%; height: 100vh; } function load() { const viewer = new ActiveReports.Viewer('#arjs-viewer'); viewer.open('MonthlyOrders.rdlx-json'); } यहाँ पर जाने के लिए कुछ चीज़ें हैं। सबसे पहले, हम अपनी HTML फ़ाइल में चार फ़ाइलें शामिल कर रहे हैं; , , , और । CSS फ़ाइलें ActiveReportsJS के लिए मुख्य CSS फ़ाइल हैं और दर्शक को शैली देने के लिए उपयोग की जाने वाली CSS फ़ाइल हैं। ar-js-ui.css ar-js-viewer.css ar-js-core.js ar-js-viewer.js जेएस फाइलें समान हैं; व्यूअर के लिए एक कोर JS फ़ाइल और एक JS फ़ाइल। दूसरा, HTML के लिए, हम ActiveReportsJS व्यूअर बनाने के लिए केवल एक पंक्ति का उपयोग कर रहे हैं। हमें बस एक आईडी के साथ एक सिंगल डिव चाहिए जिसका उपयोग हम व्यूअर को डिव के साथ जोड़ने के लिए कर सकते हैं। तीसरा, जावास्क्रिप्ट में, पृष्ठ लोड होने के बाद, हम एक नया ActiveReports.Viewer नियंत्रण बना रहे हैं, इसे हमारे div से संबद्ध कर रहे हैं, और फिर इसे हमारी रिपोर्ट खोलने के लिए कह रहे हैं। अंत में, हम CSS की एक छोटी राशि शामिल कर रहे हैं ताकि दर्शक स्क्रीन की संपूर्णता को ग्रहण कर सकें। एक बार यह हो जाने के बाद, आपको केवल अपनी रिपोर्ट को फ़ोल्डर में ले जाने की आवश्यकता है, और अपना Node.js इन्वेंट्री इनवॉइस ऐप प्रारंभ करने के लिए निम्न कमांड चलाएँ: InventoryInvoice node index.js लोकलहोस्ट: 3000 पर नेविगेट करें, और आपको अपने द्वारा बनाई गई रिपोर्ट को देखना और उससे इंटरैक्ट करने में सक्षम होना चाहिए: ActiveReportsJS व्यूअर घटक भी उत्तरदायी है; यह स्क्रीन आकार की एक विस्तृत श्रृंखला में विभिन्न उपकरणों पर उचित रूप से प्रस्तुत किया जाता है। आप अपने वेब ब्राउज़र में उपलब्ध डेवलपर टूल का उपयोग विभिन्न मोबाइल उपकरणों, स्क्रीन आकार और पेज ओरिएंटेशन का त्वरित अनुकरण करने के लिए कर सकते हैं: अंतिम नोट्स और उसके साथ, हम कर चुके हैं! इस लेख ने ग्रेपसिटी के ActiveReportsJS डिज़ाइनर का उपयोग करके मासिक इन्वेंट्री इनवॉइस रिपोर्ट बनाने के लिए व्यावहारिक दृष्टिकोण प्रदान किया। हमने महीनों के आधार पर समूहीकृत बिक्री चार्ट बनाने के लिए जानकारी एकत्र करने के तरीके के साथ-साथ ड्रिल-डाउन कार्यक्षमता के साथ एक इंटरैक्टिव, सारणीबद्ध रिपोर्ट बनाई, जो महीने और ऑर्डर आईडी के अनुसार बिक्री को समेकित करती है। यदि आप भरे हुए आवेदन और रिपोर्ट को देखना चाहते हैं, तो आप इसे पा सकते हैं। हैप्पी कोडिंग! यहां