نظام المراقبة المرئية القائم على LoRa للزراعة Iot - تصميم تطبيق ذو واجهة باستخدام Firebase & Angular: 10 خطوات

2024 مؤلف: John Day | [email protected]. آخر تعديل: 2024-01-30 07:36

في الفصل السابق ، تحدثنا عن كيفية عمل المستشعرات مع وحدة loRa لملء قاعدة بيانات Firebase Realtime ، ورأينا الرسم التخطيطي عالي المستوى لكيفية عمل مشروعنا بالكامل. سنتحدث في هذا الفصل عن كيفية نشر هذه البيانات في تطبيق الويب.

الخطوة 1: إعداد Angular في جهاز الكمبيوتر الخاص بك

Angular هي واحدة من أكثر إطارات جافا سكريبت شيوعًا (وهي في الواقع مطبوعة) تستخدم في الغالب في صناعة البرمجيات ، حيث نستخدم Firebase كواجهة خلفية (الواجهة الخلفية كخادم) ، الشيء الوحيد الذي نحتاجه هو واجهة أمامية للتعامل مع هذه الخلفية. لذلك دعونا نرى كيفية تثبيت كل ما هو ضروري من البداية.

ضع في اعتبارك أن هذا البرنامج التعليمي بأكمله يعتمد على بيئة Windows 10 ، ونأمل أن يكون لديك معرفة أساسية حول الزاوية وقاعدة النار.

قم بتثبيت node.js و NPM على windows

بادئ ذي بدء ، انتقل إلى موقع Node.js الرسمي لموقع Node.js وقم بتنزيل أحدث إصدار من node.js ، فإن العقدة عبارة عن بيئة تشغيل لتشغيل جميع أكواد جافا سكريبت. يرمز NPM إلى مدير حزم العقدة الذي يساعدك على تثبيت جميع البرامج الضرورية الأخرى من خلال أداة سطر الأوامر ، وهذه هي الفكرة الأساسية حول العقدة و NPM إذا كنت تريد التعمق في ذلك ، فهناك الكثير من مواقع الويب ومقاطع الفيديو التي يمكنك اكتساب المزيد من المعرفة بها حول العقدة. (تأكد من تثبيت node.js عالميًا على جهاز الكمبيوتر الخاص بك).

يرجى التحقق مما إذا كنت قد قمت بتثبيت العقدة بنجاح قبل المضي قدمًا.

تثبيت Angular

افتح أداة سطر الأوامر وقم بتشغيل الأمر أدناه ،

تثبيت npm -g @ angular / cli

تأكد الآن من تثبيت برنامج Angular بنجاح ، يمكنك معرفة المزيد حول Angular لموقع الويب الرسمي الزاوي التعليمي هذا.

الخطوة 2: قم بإعداد هيكل المشروع الخاص بك

انتقل إلى المكان الذي تريد إنشاء مشروعك فيه ، فقد استخدمت D: / Angular-Projects هذا الموقع. افتح موجه سطر الأوامر في هذا الموقع. اكتب الأمر أدناه.

ng نظام جديد لمراقبة الزراعة

ثم الزاوية ستنشئ كل الأشياء الضرورية التي نريدها في واجهتنا الأمامية. قبل أن نربط الواجهة الأمامية والخلفية معًا. دعونا نتعلم القليل عن الزاوي و Firebase.

الزاوي

دعنا نتحدث عن كيف تبدو بنية الويب النموذجية ، هناك واجهة أمامية أو خلفية من جانب العميل أو جانب الخادم ، ويعني جانب العميل أنه المكان الذي يحتوي على كل HTML و CSS ، ولكن في الزاوية لا يتعين علينا إنشاء صفحات ويب متفرقة لمحتوياتنا مثل ، home.html ، about.hml ، index.html… إلخ. هناك صفحة واحدة فقط للتطبيق بالكامل ، وهي index.html عندما ينتقل المستخدم من خلال صفحات أخرى أو غيرها من الصفحات التي تحتوي على index.html سيتم عرضها مع احتواء تلك الصفحات التي تعني عرض html و css لصفحة معينة. لذا فإن تطبيقنا بالكامل يحتوي على صفحة html واحدة فقط. هذا ما أطلقنا عليه اسم SPA. لذلك دعونا ننشئ تطبيقنا. افتح CMD في نفس نوع الدليل أدناه الأمر.

نانوغرام إنشاء الصفحة الرئيسية للمكون.

سيؤدي هذا إلى إنشاء محتوى الصفحة الرئيسية الخاصة بك ، ثم سترى ملف home.ts وملف home.html و home.css في ملف home.html حيث ستحدد كيفية هيكل صفحتك الرئيسية وفي الصفحة الرئيسية. css حيث ستضيف الأنماط الخاصة بك للصفحة الرئيسية ، وأخيرًا ملف home.ts حيث ستنتقل إلى رمز نص مكتوب أو كود جافا سكريبت للعمل مع الواجهة الخلفية لدينا.

الخطوة 3: تثبيت Bootstrap 4

كما ناقشنا في الخطوة السابقة ، لدينا الآن خطوة في مشروعنا والآن لدينا فكرة واضحة حول كيفية عمل الزاوية. الآن لغرض التصميم ، سنستخدم bootstrap 4 ، لتثبيت bootstrap على نوع مشروعنا أدناه الأمر في مسار المشروع.

npm تثبيت bootstrap @ 3

الآن لا داعي للقلق بشأن كيفية هيكلة صفحات الويب الخاصة بنا ، فإن bootstrap سيفعل الشيء.

الخطوة 4: تحديد المسارات

في مشروع IOT ، سنقوم بجمع رأس الصفحة ، وتذييلها ، ودرجة الحرارة ، والرطوبة ، ونسبة ثاني أكسيد الكربون ، ورطوبة التربة. لذلك سنقوم بإنشاء 4 صفحات ويب تعني في الزاوية أننا سننشئ 4 مكونات لكل من هذه الفهارس.

استيراد وحدة التوجيه الزاوي في مكون AppModule.

تحديد المسارات في ملف منفصل.

مسارات const: Routes = [{path: 'first-component'، component: HomeComponent}،

{المسار: 'المكون الثاني' ، المكون: HumiComponent} ،];

أضف سطور التعليمات البرمجية هذه داخل علامة الاستيراد في AppMoodule.

NgModule ({الاستيراد: [RouterModule.forRoot (المسارات)] ، الصادرات: [RouterModule]})

دعنا نضيف كود شريط التنقل bootstrap داخل ملف header.html الخاص بنا وربط مكوناتنا ،

الخطوة 5: Firebase

تعد Firebase واحدة من أروع الخدمات التي تقدمها Google لمستخدميها. لذا فإن إحدى الميزات التي استخدمناها لهذا المشروع هي قاعدة بيانات واستضافة Firebase Realtime. لنقم بإنشاء حساب على Firebase وربط مشروعنا بقاعدة بيانات الوقت الفعلي لـ firebase.

الخطوة 01: تسجيل الدخول إلى حساب gamil الخاص بك

الخطوة 02: اكتب وحدة تحكم Firebase في شريط البحث

الخطوة 03: الآن انتهيت.

الخطوة 6: قم بتثبيت Firebase في Angular

للعمل مع Firebase ، قمنا بتثبيت أو تضمين تلك المكتبة المساعدة لربط Firebase والزاوية معًا. انتقل إلى مسار المشروع وافتح CMD واكتب الكود أدناه.

npm install firebase @ angular / fire - save. حفظ. npm

الخطوة 7: توصيل مشروعنا الزاوي بـ Firebase

الآن علينا إضافة مشروعنا إلى Firebase. اضغط على رمز إضافة مشروع على حسابك في Firebase ، وأعط اسم المشروع الذي تريده وتابع مشروعين آخرين أيضًا حتى ترى لوحة القيادة الزرقاء الجميلة لحساب Firebase الخاص بك ، يمكنك أن ترى أن العمود الموجود على الجانب الأيسر يمكننا رؤية قائمة جميع Firebase الخدمات ، حتى نتمكن من استخدام كل من هذه الخدمات. الآن كل شيء جاهز للذهاب. في وحدة التحكم الخاصة بك ، أضف تطبيقًا للبدء وانقر فوق الرمز. للحصول على جميع تفاصيل التكوين لربط تطبيقنا الزاوي بحساب Firebase. هذه التفاصيل فريدة لمشروعنا. الآن انسخ هذه التفاصيل وانتقل إلى مشروعك الزاوي اعثر على البيئة. أضف الكود أدناه والصق تلك التفاصيل هناك.

بيئة التصدير المستمر = {

الإنتاج: صحيح ، فايربيس: {

تفاصيل التكوين الخاصة بك هنا …

}

};

وأضف أيضًا الرموز أدناه داخل app.module.ts

الواردات: [AngularFireModule.initializeApp (environment.firebase)….] ،

الخطوة 8: تثبيت مكتبة NgxCharts في مشروع Angular الخاص بك

انتقل إلى مسار المشروع كما فعلنا في الخطوات السابقة ، اكتب الكود أدناه في CMD الخاص بك.

npm i @ swimlane / ngx-charts - حفظ

موقع NgxChart الرسمي ، انتقل إلى هذا الموقع واحصل على المخطط الذي تريده. فضلت الرسم البياني الخطي. انتقل إلى عنوان url هذا واحصل على الكود وأضفه إلى المكونات المقابلة.

الخطوة 9: إنشاء فئة خدمة وقاعدة بيانات في الوقت الفعلي

انتقل إلى مجلد المشروع وافتح CMD واكتب مسارًا صالحًا واسم الفئة المفضل للخدمة جنبًا إلى جنب مع أمر إنشاء ng. قبل أن ندخل في الكود ، أود أن أعطي فكرة بسيطة عن قاعدة بيانات الوقت الحقيقي لـ Firebase. إنها ليست مثل أي قاعدة بيانات نموذجية علائقية أخرى. لا يمكننا رؤية بنية الجدول في هذا التنوع من قواعد البيانات ، وهذا ما يسمى قاعدة بيانات NOSQL يمكننا رؤية قاعدة نصية أو بنية بيانات قاعدة المستند. وهو ما يسمى JSON ، لذلك إذا أردنا تخزين البيانات بداخله في هذا النوع من قواعد البيانات ، فعلينا تمريرها مثل كائنات JSON. في الصورة أعلاه يمكنك أن ترى ، في قاعدة البيانات لدينا عقدة أو حافة تسمى الأجهزة ، وتحت تلك العقدة توجد عقدة أخرى تسمى DeviceA وتحت تلك العقدة ، يمكنك أن ترى فوق كل فهارس مثل الرطوبة ودرجة الحرارة.. إلخ. تحت عقدة همهمة ، يمكنك رؤية بيانات السينور التي تم جمعها بشكل دوري.

getData غير المتزامن () {

this.items = ؛

إرجاع الوعد الجديد ((حل) => {

هذه قاعدة البيانات. list (`/ devices / $ {this.sessionService.get (" DeviceA ")} / $ {" Hum "}`).snapshotChanges (). subscribe (snapshot => {

snapshot.forEach (element => {

if (! element.key.startsWith ('current_hum')) {

this.items.push ({

الاسم: اللحظة (element.payload.val () ['date']، 'YYYY-M-DD hh: mm: ss'). التنسيق ('YYYY-MM-DD hh: mm') ، value: element.payload.val () ['القيمة']

});

}

});

حل (this.items) ؛

});

});

}

هذا هو رمز فئة الخدمة للوصول إلى البيانات المخزنة تحت عقدة همهمة في قاعدة البيانات ، كل ما عليك فعله هو استدعاء وظيفة getData () هذه حيث تريد ملء المخطط الخاص بك.

async ngOnInit () {this.items = await this.humService.getData ()؛

this.multi = [{

اسم: '٪'

، سلسلة: this.items

}];

}

هنا داخل طريقة ngOnInit الخاصة بفئة المكون الخاصة بنا ، قمنا باستدعاء خدمتنا ملأت المصفوفة المتعددة التي يجب أن نمرر قيمها للرسم البياني.

الخطوة 10: قم بتجميع مشروعك

انتقل إلى مجلد المشروع الخاص بك وافتح CMD واكتب ng server ، ثم يتم تحويل جميع التعليمات البرمجية لـ Typescript إلى جافا سكريبت. واكتب عنوان url الذي سيطالبك CMD به ، للمشروع أعلاه https:// localhost: 4200 / home ، وقد انتهيت.