سیستم نظارت بصری مبتنی بر LoRa برای کشاورزی Iot - طراحی یک برنامه کاربردی Fronted با استفاده از Firebase & Angular: 10 مرحله

2024 نویسنده: John Day | [email protected]. آخرین اصلاح شده: 2024-01-30 08:51

در فصل قبل ما در مورد نحوه عملکرد سنسورها با ماژول loRa برای پر کردن پایگاه داده Firebase Realtime صحبت کردیم و نمودار سطح بسیار بالا را مشاهده کردیم که نشان می دهد کل پروژه ما چگونه کار می کند. در این فصل ما در مورد چگونگی تکمیل این داده ها در برنامه وب صحبت خواهیم کرد.

مرحله 1: Angular را در رایانه خود تنظیم کنید

Angular یکی از محبوب ترین چارچوب های مبتنی بر جاوا اسکریپت (که در واقع تایپ است) است که بیشتر در صنعت نرم افزار استفاده می شود ، زیرا ما از firebase به عنوان پشتیبان خود استفاده می کنیم (باطن به عنوان سرور) تنها چیزی که برای دستکاری آن نیاز داریم یک پیش نمایش برای دستکاری این باطن است. بنابراین بیایید ببینیم چگونه می توان تمام موارد لازم را از ابتدا نصب کرد.

در نظر بگیرید که تمام این آموزش بر اساس محیط ویندوز 10 است و امیدواریم که اطلاعات اولیه در مورد angular و firebase داشته باشید.

node.js و NPM را در ویندوز نصب کنید

ابتدا به وب سایت رسمی Node.js node.js بروید و آخرین نسخه node.js را بارگیری کنید ، گره یک محیط اجرا برای اجرای همه کدهای جاوا اسکریپت است. NPM مخفف node package manager است که به شما کمک می کند تا سایر نرم افزارهای لازم را از طریق ابزار خط فرمان نصب کنید ، این ایده اصلی در مورد گره و NPM است اگر می خواهید عمیق تر شوید ، تعداد زیادی وب سایت و ویدیو وجود دارد که می توانید اطلاعات بیشتری کسب کنید. (مطمئن شوید که کامپیوتر خود را بصورت جهانی نصب کرده اید).

لطفاً قبل از ادامه کار ، بررسی کنید که آیا با موفقیت گره را نصب کرده اید.

Angular را نصب کنید

ابزار خط فرمان خود را باز کرده و دستور زیر را اجرا کنید ،

npm install -g @angular/cli

در حال حاضر مطمئن شوید که angular را با موفقیت نصب کرده اید ، می توانید برای این وب سایت رسمی angular اطلاعات بیشتری در مورد angular کسب کنید.

مرحله 2: ساختار پروژه خود را تنظیم کنید

به جایی که می خواهید پروژه خود را ایجاد کنید بروید ، برای من از D: / Angular-Projects این مکان استفاده کرده ام. خط فرمان را در آن مکان باز کنید. دستور زیر را تایپ کنید

ng-سیستم نظارت جدید کشاورزی

سپس Angular همه چیز لازم را ایجاد می کند که می خواهیم در قسمت جلویی خود داشته باشیم. قبل از اینکه frontend و backend را با هم وصل کنیم. بیایید کمی در مورد angular و firebase بیاموزیم.

زاویه دار

بیایید در مورد ظاهر معماری وب معمولی صحبت کنیم ، پشتیبان طرف مقابل یا سرویس گیرنده وجود دارد ، سمت کلاینت به این معنی است که همه HTML ، CSS در آن قرار دارد ، اما در زاویه ای ما مجبور نیستیم صفحات وب sperate برای محتوای خود ایجاد کنیم مانند ، home.html ، about.hml ، index.html … و غیره. فقط یک صفحه واحد برای کل برنامه وجود دارد. این index.html است وقتی کاربر از صفحات دیگر یا سایر صفحات حاوی index استفاده می کند. html با محتوای آن صفحات به معنی نمایش html و css صفحه خاص ارائه می شود. بنابراین کل برنامه ما شامل تنها یک صفحه.html است. این همان چیزی است که ما SPA نامیده ایم. بنابراین اجازه دهید برنامه خود را ایجاد کنیم. CMD را در همان دستور دایرکتوری زیر باز کنید.

ng تولید مولفه های خانگی

این محتویات صفحه اصلی شما را ایجاد می کند ، سپس یک فایل home.ts و فایل home.html و home.css را در فایل home.html مشاهده خواهید کرد که در آن می خواهید نحوه ساختار صفحه اصلی خود و در خانه را مشخص کنید. css جایی که قصد دارید سبک های خود را برای صفحه اصلی اضافه کنید ، و در آخر فایل home.ts که در آن قصد دارید کد تایپ شده یا جاوا اسکریپت را برای کار با پشتیبان ما کدگذاری کنید.

مرحله 3: نصب Bootstrap 4

همانطور که در مرحله قبل بحث کردیم ، اکنون پروژه خود را مرحله بندی کرده ایم و اکنون ایده روشنی در مورد نحوه عملکرد زاویه دار داریم. در حال حاضر به منظور یک ظاهر طراحی شده ما قصد داریم از بوت استرپ 4 استفاده کنیم ، تا بوت استرپ را به نوع پروژه زیر در دستور پروژه در مسیر پروژه نصب کنیم.

npm bootstrap@3 را نصب کنید

در حال حاضر لازم نیست نگران باشید که چگونه می توانیم صفحات وب خود را ساختار دهیم ، bootstrap این کار را انجام می دهد.

مرحله 4: تعیین مسیرها

در پروژه IOT ما قصد داریم سرصفحه ، پاورقی ، دما ، رطوبت ، درصد Co2 ، رطوبت خاک را جمع آوری کنیم. بنابراین ما قصد داریم 4 صفحه وب ایجاد کنیم به این معنی که در angular ما قصد داریم 4 جزء برای هر یک از این نمایه ها ایجاد کنیم.

ماژول روتر زاویه ای را در جزء AppModule وارد کنید.

مسیرها را در فایل جداگانه تعریف کنید.

const lines: Routes = [{path: 'first-component'، component: HomeComponent} ،

{path: 'second-component' ، component: HumiComponent} ،];

این خطوط کد را داخل برچسب وارد کردن در AppMoodule اضافه کنید.

NgModule ({واردات: [RouterModule.forRoot (مسیرها] ، صادرات: [RouterModule]})

بیایید بارکد ناوبری bootstrap را داخل فایل header.html خود اضافه کرده و اجزای خود را پیوند دهیم ،

مرحله 5: Firebase

Firebase یکی از جالبترین خدماتی است که گوگل به کاربران خود ارائه می دهد. بنابراین یکی از ویژگی هایی که ما برای این پروژه استفاده کرده ایم پایگاه داده و میزبانی بی درنگ firebase است. اجازه دهید یک حساب firebase ایجاد کنیم و پروژه خود را به پایگاه داده realbase وصل کنیم.

مرحله 01: وارد حساب gamil خود شوید

مرحله 02: کنسول firebase را در نوار جستجوی خود تایپ کنید

مرحله 03: اکنون کار شما تمام شده است.

مرحله 6: Firebase را در Angular نصب کنید

برای کار با firebase ، ما باید کتابخانه ای را نصب یا شامل آن کنیم که firebase و angular را به هم متصل کند. به مسیر پروژه خود بروید و CMD را باز کنید و کد زیر را تایپ کنید.

npm firebase @angular/fire --save را نصب کنید

مرحله 7: اتصال پروژه Angular ما با Firebase

اکنون ما باید پروژه خود را به firebase اضافه کنیم. نماد پروژه را در حساب firebase خود فشار دهید ، و نام پروژه ای را که دوست دارید وارد کنید و دو مورد دیگر را نیز ادامه دهید تا زمانی که داشبورد آبی زیبا حساب firebase خود را مشاهده کنید ، می توانید ببینید ستون سمت چپ ما می توانیم لیست همه firebase را مشاهده کنیم خدمات ، بنابراین ما می توانیم از هر یک از این خدمات استفاده کنیم. اکنون همه چیز آماده حرکت است در کنسول خود یک برنامه برای شروع اضافه کنید و روی نماد کلیک کنید. برای دریافت تمام جزئیات پیکربندی برای اتصال برنامه زاویه ای ما به حساب firebase. این جزئیات مختص پروژه ما هستند. اکنون این جزئیات را کپی کرده و به پروژه زاویه ای خود بروید و محیط را پیدا کنید. t کد زیر را اضافه کرده و آن جزئیات را در آنجا بچسبانید.

صادرات محیط const = {

تولید: true ، firebase: {

جزئیات پیکربندی شما در اینجا…

}

};

و همچنین کدهای زیر را در داخل app.module.ts اضافه کنید

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

مرحله 8: نصب کتابخانه NgxCharts در پروژه Angular شما

همانند مراحل قبلی به مسیر پروژه بروید ، کد زیر را در CMD خود تایپ کنید.

npm i @swimlane/ngx-charts-ذخیره کنید

سایت رسمی NgxChart به این سایت بروید و نمودار مورد نظر خود را بگیرید. من ترجیح دادم با نمودار خطی. به این آدرس اینترنتی بروید و کد را بگیرید و آن را به اجزای مربوطه اضافه کنید.

مرحله 9: ایجاد کلاس خدمات و پایگاه داده بیدرنگ

به پوشه پروژه بروید و CMD را باز کنید و یک مسیر معتبر و نام کلاس ترجیحی برای سرویس را به همراه دستور ng generate تایپ کنید. قبل از وارد شدن به کد ، می خواهم ایده کمی در مورد پایگاه داده در زمان واقعی firebase ارائه کنم. مانند پایگاه داده مدل رابطه ای دیگر نیست. ما نمی توانیم ساختار جدول را در این تنوع پایگاه داده مشاهده کنیم ، این پایگاه داده NOSQL نامیده می شود که ما می توانیم یک پایگاه داده متنی یا پایگاه داده سند را مشاهده کنیم. که JSON نامیده می شود ، بنابراین اگر می خواهیم داده هایی را در این نوع پایگاه داده ذخیره کنیم ، باید آنها را مانند JSON Objects ارسال کنیم. در تصویر بالا مشاهده می کنید ، در پایگاه داده ما یک گره یا لبه به نام دستگاه وجود دارد و در زیر آن گره یک گره دیگر به نام DeviceA وجود دارد و در زیر آن گره ، می توانید در بالای هر شاخص مانند رطوبت ، دما و غیره مشاهده کنید. در زیر گره Hum می توانید داده های سنوری را که به صورت دوره ای جمع آوری شده است مشاهده کنید.

asDynk getData () {

this.items = ؛

بازگشت وعده جدید ((حل) => {

this.database list (`/devices/$ {this.sessionService.get (" DeviceA ")}/$ {" Hum "}`).snapshotChanges (). مشترک شوید (عکس فوری => {

snapshot.forEach (element => {

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

this.items.push ({

نام: moment (element.payload.val () ['date'] ، 'YYYY-M-DD hh: mm: ss'). format ('YYYY-MM-DD hh: mm') ، مقدار: element.payload.val () ['مقدار']

});

}

});

حل و فصل (this.items) ؛

});

});

}

این کد کلاس سرویس برای دسترسی به داده های ذخیره شده در زیر گره hum در پایگاه داده است ، تنها کاری که باید انجام دهید این است که کلاس () getData () کلاس را در جایی که می خواهید نمودار خود را پر کنید فراخوانی کنید.

async ngOnInit () {this.items = منتظر this.humService.getData ()؛

this.multi = [{

نام: '٪'

، سری: this.items

}];

}

در داخل متد کلاس متد ngOnInit ما سرویس خود را پر از چند آرایه می نامیم که آرایه ای است که باید مقادیر را برای نمودار ارسال کنیم.

مرحله 10: پروژه خود را کامپایل کنید

به پوشه پروژه خود بروید و CMD را باز کنید و ng server را تایپ کنید ، سپس تمام کد Typescript به جاوا اسکریپت تبدیل می شود. و url مورد نظر CMD را برای پروژه بالا https:// localhost: 4200/home تایپ کنید و کار شما تمام شده است.