कृषि IOT के लिए लोरा-आधारित दृश्य निगरानी प्रणाली - फायरबेस और एंगुलर का उपयोग करके एक फ्रंटेड एप्लिकेशन डिजाइन करना: 10 कदम

2024 लेखक: John Day | [email protected]. अंतिम बार संशोधित: 2024-01-30 09:18

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

चरण 1: अपने कंप्यूटर में कोणीय सेटअप करें

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

इस पूरे ट्यूटोरियल पर विचार करें कि यह विंडोज़ 10 के वातावरण पर आधारित है और उम्मीद है कि आपको कोणीय और फायरबेस के बारे में बुनियादी ज्ञान है।

विंडोज़ पर नोड.जेएस और एनपीएम स्थापित करें।

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

कृपया जांचें कि क्या आपने आगे बढ़ने से पहले सफलतापूर्वक नोड स्थापित किया है।

कोणीय स्थापित करें।

अपना कमांड लाइन टूल खोलें और कमांड के नीचे चलाएँ, npm इंस्टाल -g @angular/cli

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

चरण 2: अपनी परियोजना संरचना सेटअप करें

जहाँ आप अपना प्रोजेक्ट बनाना चाहते हैं, वहाँ जाएँ, मेरे लिए मैंने D:\Angular-Projects इस स्थान का उपयोग किया है। उस स्थान पर कमांड लाइन प्रॉम्प्ट खोलें। कमांड के नीचे टाइप करें।

एनजी नई कृषि-निगरानी-प्रणाली

तो कोणीय उन सभी आवश्यक चीजों का निर्माण करेगा जो हम अपने फ्रंट-एंड में रखना चाहते हैं। इससे पहले कि हम फ़्रंटएंड और बैकएंड को एक साथ कनेक्ट करें। आइए कोणीय और फायरबेस के बारे में थोड़ा सीखें।

कोणीय

आइए बात करते हैं कि विशिष्ट वेब आर्किटेक्चर कैसा दिखता है, फ्रंटएंड या क्लाइंट साइड बैकएंड या सर्वर साइड है, क्लाइंट साइड का मतलब है कि यह वह जगह है जहां सभी HTML, CSS शामिल हैं, लेकिन कोणीय में हमें अपने लिए अलग वेब पेज बनाने की आवश्यकता नहीं है। जैसे, home.html, about.hml, index.html…आदि। संपूर्ण एप्लिकेशन के लिए केवल एक ही पृष्ठ है, यह index.html है जब उपयोगकर्ता अन्य पृष्ठों के माध्यम से जाता है या अन्य में index.html उन पृष्ठों के साथ प्रस्तुत करने जा रहा है, जिसका अर्थ है कि निश्चित पृष्ठ का HTML और css दृश्य। इसलिए हमारे पूरे आवेदन में केवल एक ही.html पृष्ठ है। इसे ही हम एसपीए कहते हैं। तो चलिए अपना एप्लीकेशन बनाते हैं। कमांड के नीचे उसी डायरेक्टरी टाइप में सीएमडी खोलें।

एनजी घटक घर उत्पन्न करते हैं।

यह आपके होम पेज के कंटेन को जेनरेट करेगा, फिर आपको होम.एचटीएमएल फाइल और होम.एचटीएमएल फाइल और होम.सीएसएस को होम.एचटीएमएल फाइल में दिखाई देगा, जहां आप परिभाषित करने जा रहे हैं कि आपके होम पेज की संरचना और होम में कैसा है। css जहाँ आप होम पेज के लिए अपनी शैलियों को जोड़ने जा रहे हैं, और अंत में home.ts फ़ाइल जहाँ आप हमारे बैकएंड के साथ काम करने के लिए आपको टाइपस्क्रिप्ट या जावास्क्रिप्ट कोड कोड करने जा रहे हैं।

चरण 3: बूटस्ट्रैप 4 स्थापित करना

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

npm बूटस्ट्रैप@3. स्थापित करें

अब आपको इस बारे में चिंता करने की ज़रूरत नहीं है कि हम अपने वेब पेजों की संरचना कैसे कर सकते हैं, बूटस्ट्रैप काम करेगा।

चरण 4: मार्गों को परिभाषित करना

आईओटी परियोजना में हम हेडर, फुटर, तापमान, आर्द्रता, सीओ2 प्रतिशत, मिट्टी की नमी एकत्र करने जा रहे हैं। इसलिए हम 4 वेब पेज बनाने जा रहे हैं जिसका मतलब है कि कोणीय में हम इनमें से प्रत्येक इंडेक्स के लिए 4 घटक बनाने जा रहे हैं।

AppModule घटक में कोणीय राउटर मॉड्यूल आयात करें।

अलग फ़ाइल में मार्गों को परिभाषित करें।

const मार्ग: मार्ग = [{ पथ: 'प्रथम-घटक', घटक: HomeComponent}, {पथ: 'दूसरा-घटक', घटक: HumiComponent},];

कोड की इन पंक्तियों को AppMoodule में आयात टैग के अंदर जोड़ें।

@NgModule ({आयात: [RouterModule.forRoot (मार्ग)], निर्यात: [RouterModule]})

आइए हमारे हेडर.एचटीएमएल फ़ाइल के अंदर बूटस्ट्रैप नेविगेशन बार कोड जोड़ें और हमारे घटकों को लिंक करें,

चरण 5: फायरबेस

फायरबेस सबसे अच्छी सेवाओं में से एक है जो Google अपने उपयोगकर्ताओं को प्रदान कर रहा है। तो इस परियोजना के लिए हमने जिन सुविधाओं का उपयोग किया है उनमें से एक है फायरबेस रीयलटाइम डेटाबेस और होस्टिंग। आइए एक फायरबेस खाता बनाएं और हमारे प्रोजेक्ट को फायरबेस रीयलटाइम डेटाबेस से कनेक्ट करें।

चरण 01: अपने gamil खाते में लॉगिन करें

चरण 02: अपने खोज बार में फायरबेस कंसोल टाइप करें

चरण 03: अब आपका काम हो गया।

चरण 6: एंगुलर में फायरबेस स्थापित करें

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

npm फायरबेस स्थापित करें @ कोणीय/आग --save

चरण 7: हमारे एंगुलर प्रोजेक्ट को फायरबेस से जोड़ना।

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

निर्यात स्थिरांक पर्यावरण = {

उत्पादन: सच, फायरबेस: {

आपका कॉन्फ़िगरेशन विवरण यहाँ…

}

};

और app.module.ts. के अंदर नीचे दिए गए कोड भी जोड़ें

आयात: [AngularFireModule.initializeApp(environment.firebase),….],

चरण 8: अपने कोणीय प्रोजेक्ट में NgxCharts लाइब्रेरी स्थापित करना

जैसा कि हमने पिछले चरणों में किया था, प्रोजेक्ट पथ पर जाएं, अपने सीएमडी में नीचे कोड टाइप करें।

npm i @swimlane/ngx-charts --save

NgxChart आधिकारिक साइट इस साइट पर जाएं और जो चार्ट आप चाहते हैं उसे प्राप्त करें। मैंने लाइन चार्ट के साथ प्राथमिकता दी। इस यूआरएल पर जाएं और कोड को पकड़ें और इसे संबंधित घटकों में जोड़ें।

चरण 9: एक सर्विस क्लास और रीयलटाइम डेटाबेस बनाएं।

प्रोजेक्ट फोल्डर में जाएं और सीएमडी खोलें और एनजी जनरेट कमांड के साथ सेवा के लिए एक वैध पथ और पसंदीदा वर्ग का नाम टाइप करें। कोड में जाने से पहले मैं फायरबेस रीयल-टाइम डेटाबेस के बारे में थोड़ा सा विचार देना चाहता हूं। यह किसी अन्य रिलेशनल मॉडल डेटाबेस की तरह नहीं है। हम डेटाबेस की इस विविधता में एक तालिका संरचना नहीं देख सकते हैं, इसे एनओएसक्यूएल डेटाबेस कहा जाता है हम एक टेक्स्ट बेस या दस्तावेज़ आधार डेटा संरचना देख सकते हैं। जिसे JSON कहा जाता है, इसलिए यदि हम उस तरह के डेटाबेस में डेटा स्टोर करना चाहते हैं तो हमें उन्हें JSON ऑब्जेक्ट्स की तरह पास करना होगा। ऊपर की तस्वीर में आप देख सकते हैं, हमारे डेटाबेस में डिवाइस नामक एक नोड या एज है, और उस नोड के नीचे डिवाइसए नामक एक और नोड है और उस नोड के नीचे, आप प्रत्येक इंडेक्स जैसे आर्द्रता, तापमान..आदि के ऊपर देख सकते हैं। हम नोड के तहत आप समय-समय पर एकत्र किए गए वरिष्ठ डेटा को देख सकते हैं।

एसिंक गेटडाटा () {

यह आइटम = ;

नया वादा वापस करें ((संकल्प) => {

यह.डेटाबेस। list(`/devices/${this.sessionService.get("DeviceA")}/${"Hum"}`).snapshotChanges().subscribe(snapshot => {

स्नैपशॉट। प्रत्येक के लिए (तत्व => {

अगर (!element.key.startsWith('current_hum')) {

यह.आइटम.पुश({

नाम: पल (element.payload.val()['date'], 'YYYY-M-DD hh:mm:ss').format('YYYY-MM-DD hh:mm'), value: element.payload.वैल () ['मूल्य']

});

}

});

संकल्प (यह। आइटम);

});

});

}

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

async ngOnInit () {this.items = प्रतीक्षा करें this.humService.getData ();

यह।बहु = [{

नाम: '%', श्रृंखला: this.items

}];

}

यहां हमारे घटक वर्ग ngOnInit विधि के अंदर हमने अपनी सेवा को बहु सरणी को पॉप्युलेट किया है जिसे हम ग्राफ़ के लिए मानों को पास करना चाहिए।

चरण 10: अपनी परियोजना संकलित करें

अपने प्रोजेक्ट फोल्डर में जाएं और सीएमडी खोलें और एनजी सर्वर टाइप करें, फिर सभी टाइपस्क्रिप्ट कोड जावास्क्रिप्ट में बदलने जा रहे हैं। और उस यूआरएल को टाइप करें जिसे सीएमडी आपको संकेत देने जा रहा है, उपरोक्त प्रोजेक्ट के लिए https://localhost:4200/home और आपका काम हो गया।