Хөдөө аж ахуйн LoRa дээр суурилсан харааны хяналтын систем Iot - Firebase & Angular ашиглан урд талын програм зохиох: 10 алхам

2024 Зохиолч: John Day | [email protected]. Хамгийн сүүлд өөрчлөгдсөн: 2024-01-30 11:00

Өмнөх бүлэгт галын баазын бодит цагийн мэдээллийн баазыг бөглөхийн тулд loRa модультай хэрхэн ажилладаг талаар ярилцсан бөгөөд манай төсөл бүхэлдээ хэрхэн ажиллаж байгааг маш өндөр түвшинд харсан. Энэ бүлэгт бид эдгээр өгөгдлийг вэб програм дээр хэрхэн бөглөх талаар ярилцах болно.

Алхам 1: Компьютер дээрээ өнцөг тохируулна уу

Angular бол програм хангамжийн салбарт ихэвчлэн хэрэглэгддэг javascript -ийн хамгийн алдартай хүрээний нэг юм. Учир нь бидэнд firebase -ийг арын хэсэг болгон ашигладаг (серверийн арын хэсэг), бидэнд хэрэгтэй зүйл бол энэ арын хэсгийг удирдах урд талын хэсэг юм. Тиймээс шаардлагатай бүх зүйлийг эхнээс нь хэрхэн яаж суулгахыг үзье.

Энэхүү гарын авлага нь Windows 10 -ийн орчин дээр суурилсан бөгөөд өнцгийн болон галын баазын талаар анхан шатны мэдлэгтэй болно гэж найдаж байна.

Windows дээр node.js болон NPM -ийг суулгаарай

Юуны өмнө Node.js албан ёсны вэбсайт node.js руу ороод node.js -ийн хамгийн сүүлийн хувилбарыг татаж аваарай, зангилаа бол бүх javascript кодыг ажиллуулах цаг юм. NPM нь бусад шаардлагатай бүх програм хангамжийг тушаалын мөрийн хэрэгслээр дамжуулан суулгахад тусалдаг зангилааны багцын менежер гэсэн утгатай бөгөөд хэрэв та илүү гүнзгийрүүлэхийг хүсч байвал зангилаа ба БХГ -ийн талаархи үндсэн санаа бол та илүү их мэдлэг олж авах боломжтой олон вэбсайт, видео бичлэгүүдтэй болно. зангилааны тухай. (Дэлхий даяар node.js -ийг компьютер дээрээ суулгасан эсэхээ шалгаарай).

урагшлахаасаа өмнө зангилаа амжилттай суулгасан эсэхийг шалгана уу.

Angular суулгах

Командын шугамын хэрэгслийг нээгээд командын доор ажиллуулна уу.

npm суулгах -g @angular/cli

Та одоо angular -ийг амжилттай суулгасан эсэхээ шалгаарай, та энэ сургалтын өнцгийн албан ёсны вэбсайтаас өнцгийн талаар илүү ихийг олж мэдэх боломжтой.

Алхам 2: Төслийнхөө бүтцийг тохируулна уу

Төсөл үүсгэхийг хүссэн газраа оч, миний хувьд энэ байрлалыг D: / Angular-Projects ашигласан. Тухайн газарт тушаалын мөрийн мөрийг нээнэ үү. Доорх тушаалыг бичнэ үү.

хөдөө аж ахуйн хяналтын шинэ систем

Дараа нь өнцөг булан нь бидний урд талд байлгахыг хүссэн бүх зүйлийг бий болгоно. урд болон арын хэсгийг хооронд нь холбохоос өмнө. өнцгийн болон галын суурийн талаар бага зэрэг сурцгаая.

Өнцөг

Ердийн вэб архитектур хэрхэн харагддаг талаар ярилцъя, урд талын эсвэл клиент талын арын хэсэг эсвэл серверийн тал байдаг, үйлчлүүлэгчийн тал нь бүх HTML, CSS -ийг агуулдаг гэсэн үг юм, гэхдээ өнцгийн хувьд бид өөрсдийн агуулгад зориулж вэб хуудас үүсгэх шаардлагагүй болно. home.html, about.hml, index.html гэх мэт. Хэрэглэгчид бусад хуудсуудаар эсвэл бусад index.html агуулсан хуудсуудаар дамжих үед тухайн хуудасны html болон css харах гэсэн утгыг агуулсан хуудсуудыг үзүүлэх болно. Тиймээс манай програм бүхэлдээ ганцхан.html хуудас агуулдаг. Үүнийг бид ДЦГ гэж нэрлэсэн. Тиймээс програмаа бүтээцгээе. Командын доорх лавлах төрлийн CMD -ийг нээнэ үү.

ng гэрт бүрэлдэхүүн хэсэг үүсгэх.

Энэ нь таны нүүр хуудасны агуулгыг бий болгоно, дараа нь та home.ts файл болон home.html файл болон home.css файлыг home.html файлд харах болно, та өөрийн нүүр хуудасны бүтэц, гэрт хэрхэн байгааг тодорхойлох болно. css, та нүүр хуудасныхаа хэв маягийг нэмэх гэж байгаа бөгөөд хамгийн сүүлд манай backend -тэй ажиллахын тулд typcript эсвэл javascript кодыг кодлох гэж байгаа home.ts файлыг оруулна уу.

Алхам 3: Bootstrap 4 -ийг суулгах

Өмнөх алхам дээр ярьсанчлан одоо бид төслийнхөө алхамыг хийж, одоо өнцөг хэрхэн ажилладаг талаар тодорхой ойлголттой боллоо. Одоо сарлагийн саваг хийхийн тулд бид bootstrap 4 -ийг ашиглан төслийн зам дээрх төслийн төрөлд bootstrap -ийг суулгах гэж байна.

npm bootstrap@3 -ийг суулгаарай

Одоо бид вэб хуудсуудаа хэрхэн бүтээх талаар санаа зовох хэрэггүй болно, bootstrap үүнийг хийх болно.

Алхам 4: Маршрут тодорхойлох

IOT төсөл дээр бид толгой, хөл, температур, чийгшил, Co2 хувь, хөрсний чийгийг цуглуулах болно. Тиймээс бид 4 вэб хуудас үүсгэх гэж байгаа бөгөөд энэ нь эдгээр индекс тус бүрт 4 бүрэлдэхүүн хэсэг үүсгэх болно гэсэн үг юм.

өнцгийн чиглүүлэгч модулийг AppModule бүрэлдэхүүн хэсэгт импортлох.

тусдаа файлд маршрут тодорхойлох.

const маршрутууд: Routes = [{path: 'first-component', component: HomeComponent}, {зам: 'хоёр дахь бүрэлдэхүүн хэсэг', бүрэлдэхүүн хэсэг: HumiComponent},];

эдгээр кодын мөрийг AppMoodule дахь импортын шошго дотор нэмнэ үү.

@NgModule ({импорт: [RouterModule.forRoot (маршрут)], экспорт: [RouterModule]})

Header.html файл дотор bootstrap навигацийн зураасан кодыг нэмж, бүрэлдэхүүн хэсгүүдийг холбоно уу.

Алхам 5: Firebase

Firebase бол google -ийн хэрэглэгчдэд үзүүлж буй хамгийн гайхалтай үйлчилгээ юм. Тиймээс энэ төсөлд ашиглаж байсан нэг онцлог бол firebase -ийн бодит цагийн мэдээллийн бааз, хостинг юм. firebase данс үүсгээд төслөө firebase -ийн бодит цагийн мэдээллийн сантай холбож үзье.

алхам 01: gamil данс руугаа нэвтэрнэ үү

Алхам 02: хайлтын талбарт firebase консол бичнэ үү

Алхам 03: одоо та хийж байна.

Алхам 6: Firebase -ийг өнцгөөр суулгаарай

Firebase -тэй ажиллахын тулд бид галын баазыг хооронд нь холбоход туслах номын санг суулгасан болно. Төслийн зам руу очиж CMD -ийг нээж кодын доор бичнэ үү.

npm firebase @angular/fire -аварна уу

Алхам 7: Манай өнцгийн төслийг Firebase -тай холбох

Одоо бид төслөө галын баазад нэмэх ёстой. Firebase дансандаа төслийн дүрс нэмэх товчийг дарж, өөрт таалагдсан төслийнхөө нэрийг өгч, нөгөө хоёроо үргэлжлүүлээд галын баазынхаа цэнхэр өнгийн гоёмсог самбарыг харах хүртэл зүүн талын баганаас бид галын баазын бүх жагсаалтыг харах боломжтой болно. үйлчилгээ, тиймээс бид эдгээр үйлчилгээ тус бүрийг ашиглаж болно. одоо бүх зүйл явахад бэлэн байна. консол дээрээ эхлүүлэхийн тулд програм нэмж, дүрс дээр дарна уу. Firebase данстай манай өнцгийн програмыг холбохын тулд бүх тохиргооны дэлгэрэнгүй мэдээллийг авах. Эдгээр дэлгэрэнгүй мэдээлэл нь манай төслийн онцлог шинж чанартай байдаг. одоо эдгээр нарийн ширийн зүйлийг хуулж аваад өөрийн өнцөг булангийн төсөл рүү ороод орчноо олоорой. доорх кодыг нэмээд тэдгээр мэдээллийг тэнд оруулна уу.

const орчныг экспортлох = {

үйлдвэрлэл: үнэн, галын суурь: {

энд таны тохиргооны дэлгэрэнгүй …

}

};

мөн app.module.ts доторх кодуудыг доор нэмнэ үү

импорт: [AngularFireModule.initializeApp (environment.firebase),….],

Алхам 8: Таны өнцгийн төсөлд NgxCharts номын санг суулгах

Өмнөх алхмуудын нэгэн адил төслийн зам руу очиж CMD дээрээ кодын доор бичнэ үү.

npm i @swimlane/ngx-charts-хадгална уу

NgxChart албан ёсны сайт нь энэ сайт руу ороод хүссэн хүснэгтээ аваарай. Би шугаман диаграмыг илүүд үзсэн. Энэ URL руу очоод кодыг аваад холбогдох бүрэлдэхүүн хэсгүүдэд нэмнэ үү.

Алхам 9: Үйлчилгээний анги ба бодит цагийн мэдээллийн бааз үүсгэнэ үү

Төслийн хавтас руу очоод CMD -ийг нээгээд ng generate командын хамт үйлчилгээний зөв зам, сонгосон ангийн нэрийг бичнэ үү. Код руу орохын өмнө би бодит цагийн мэдээллийн баазын талаар бага зэрэг мэдээлэл өгөхийг хүсч байна. Энэ нь бусад харилцааны загварын мэдээллийн сантай адил биш юм. Энэхүү мэдээллийн сангийн олон төрлөөс бид хүснэгтийн бүтцийг харж чадахгүй байна, Үүнийг NOSQL мэдээллийн бааз гэж нэрлэдэг бөгөөд бид текст бааз, баримт бичгийн баазын өгөгдлийн бүтцийг харж болно. Үүнийг JSON гэж нэрлэдэг тул хэрэв бид ийм өгөгдлийн санд өгөгдөл хадгалахыг хүсч байвал тэдгээрийг JSON объект шиг дамжуулах ёстой. Дээрх зураг дээр манай мэдээллийн санд төхөөрөмж гэж нэрлэгддэг зангилаа эсвэл ирмэг байгаа бөгөөд энэ зангилааны доор DeviceA нэртэй өөр нэг зангилаа байгаа бөгөөд энэ зангилааны доор та чийгшил, температур гэх мэт индекс бүрийн дээрээс харж болно. Hum зангилааны дор үе үе цуглуулсан сенорын өгөгдлийг харах боломжтой.

async getData () {

this.items = ;

шинэ амлалт буцаах ((шийдвэрлэх) => {

энэ мэдээллийн сан. жагсаалт (`/төхөөрөмжүүд/$ {this.sessionService.get (" DeviceA ")}/$ {" Хум "}`).snapshotChanges (). бүртгүүлэх (хормын хувилбар => {

хормын хувилбар.forEach (element => {

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

this.items.push ({

нэр: мөч (element.payload.val () ['огноо'], 'YYYY-M-DD hh: mm: ss'). формат ('YYYY-MM-DD hh: mm'), утга: element.payload.val () ['утга']

});

}

});

шийдвэрлэх (this.items);

});

});

}

Энэ бол мэдээллийн сан дахь hum node дор хадгалагдсан өгөгдөлд хандах үйлчилгээний ангийн код юм, та диаграмыг бөглөхийг хүсч буй энэ ангийн getData () функцийг дуудахад л хангалттай.

async ngOnInit () {this.items = this.humService.getData () -ийг хүлээж байна;

this.multi = [{

нэр: '%', цуврал: this.items

}];

}

Энд ngOnInit бүрэлдэхүүн хэсгийн анги дотор бид үйлчилгээгээ графикийн утгыг дамжуулах ёстой массивыг дүүргэсэн гэж нэрлэдэг.

Алхам 10: Төслөө эмхэтгэх

Төслийн хавтас руугаа ороод CMD -ийг нээгээд ng сервер бичээд дараа нь бүх Typescript кодыг javascript болгон хөрвүүлэх болно. Дээрх төслийн https:// localhost: 4200/home дээр CMD танд өгөх гэж байгаа url -г бичээрэй.