Qishloq xo'jaligi uchun LoRa-ga asoslangan vizual monitoring tizimi - Firebase va burchak yordamida oldingi ilovani loyihalash: 10 qadam

2024 Muallif: John Day | [email protected]. Oxirgi o'zgartirilgan: 2024-01-30 13:22

O'tgan bobda biz sensorlar loRa moduli bilan real vaqt rejimida yong'in bazasini to'ldirish uchun qanday ishlayotgani haqida gapiramiz va biz butun loyihamiz qanday ishlashini juda yuqori darajadagi diagrammani ko'rdik. Bu bobda biz bu ma'lumotlarni veb -ilovada qanday to'ldirishimiz mumkinligi haqida gaplashamiz.

1 -qadam: Kompyuteringizda burchakni o'rnating

Burchak - bu dasturiy ta'minot sohasida eng ko'p ishlatiladigan javascript -ga asoslangan eng mashhur ramkalardan biri, chunki biz firebase -ni bizning orqa tomonimiz (server sifatida backend) sifatida ishlatamiz, faqat bu orqa tomonni boshqarishning old qismi. Keling, bularning barchasini noldan qanday o'rnatishni ko'rib chiqaylik.

O'ylaymanki, bu qo'llanma Windows 10 muhitiga asoslangan va siz burchak va olov bazasi haqida asosiy ma'lumotga ega bo'lishingizni umid qilaman.

Windows -da node.js va NPM -ni o'rnating

Birinchidan, Node.js rasmiy veb -sayti node.js -ga o'ting va node.js -ning so'nggi versiyasini yuklab oling, tugun - bu barcha JavaScript kodlarini ishga tushirish vaqti. NPM tugunlar to'plami menejerini anglatadi, bu sizga boshqa barcha kerakli dasturiy ta'minotni buyruq qatori vositasi orqali o'rnatishga yordam beradi, bu tugun va NPM haqidagi asosiy g'oya, agar siz chuqurroq kirishni xohlasangiz, ko'proq ma'lumot olishingiz mumkin bo'lgan veb -saytlar va videolar ko'p. tugun haqida. (node.js ni butun dunyo bo'ylab kompyuteringizga o'rnatganingizga ishonch hosil qiling).

oldinga borishdan oldin tugunni muvaffaqiyatli o'rnatganingizni tekshiring.

Burchakni o'rnatish

Buyruq satri vositasini oching va buyruq ostidan ishga tushiring, npm install -g @angular/cli

Endi siz burchakni muvaffaqiyatli o'rnatganingizga ishonch hosil qiling, siz bu o'quv qo'llanmasining burchakli rasmiy veb -sayti uchun burchak haqida ko'proq bilib olishingiz mumkin.

2 -qadam: Loyihaning tuzilishini o'rnating

Loyihani yaratmoqchi bo'lgan joyga boring, men bu joyni ishlatganman: D: / Angular-Projects. Bu erda buyruq satrini oching. Quyidagi buyruqni kiriting.

yangi qishloq xo'jaligi monitoringi tizimi

keyin burchak biz xohlagan hamma narsani yaratadi. Old va orqa tomonni bir -biriga ulashdan oldin. Keling, burchak va olov bazasi haqida ozgina bilib olaylik.

Burchakli

Keling, odatiy veb -arxitekturasi qanday ko'rinishda bo'lishi haqida gapiraylik, old tomoni yoki mijoz tomoni yoki server tomoni bor, mijoz tomoni - bu HTML, CSS -ni o'z ichiga oladigan joy, lekin burchakda biz o'z tarkibimiz uchun alohida veb -sahifalarni yaratishga hojat yo'q. masalan, home.html, about.hml, index.html … va boshqalar. butun dastur uchun faqat bitta bitta sahifa bor, agar foydalanuvchi boshqa sahifalardan o'tib ketsa yoki index.html o'z ichiga olgan bo'lsa, u ma'lum bir sahifaning html va CSS ko'rinishini bildiradigan sahifalarni o'z ichiga oladi. shuning uchun bizning butun ilovamiz faqat bitta.html sahifasini o'z ichiga oladi. Bu SPA deb nomlangan narsa. Shunday qilib, keling, o'z ilovamizni yarataylik. buyruq ostidagi bir xil katalog turidagi CMD -ni oching.

ng uy komponentini yaratadi.

bu sizning bosh sahifangizning tarkibini yaratadi, keyin siz home.ts faylini va home.html faylini va home.hts faylini ko'rasiz, u erda siz o'zingizning uy sahifangizning tuzilishi va uyda qanday bo'lishini aniqlaysiz. Bosh sahifa uchun o'z uslubingizni qo'shmoqchi bo'lgan CSS va nihoyat, bizning orqa tomonimiz bilan ishlash uchun sizga kod yozmoqchi bo'lgan javascript yoki home.ts fayli.

3 -qadam: Bootstrap 4 -ni o'rnatish

Oldingi bosqichda muhokama qilganimizdek, hozirda biz o'z loyihamizga qadam qo'ydik va endi burchak qanday ishlashi haqida aniq tasavvurga egamiz. Endi uslublar uchun biz bootstrap 4 dan foydalanamiz, loyiha yo'lida quyida joylashgan loyiha turiga bootstrap o'rnatamiz.

npm bootstrap@3 ni o'rnating

Endi biz veb -sahifalarimizni qanday tuzishimiz mumkinligi haqida qayg'urmasligingiz kerak, bootstrap hamma narsani qiladi.

4 -qadam: marshrutlarni aniqlash

IOT loyihasida biz yuqori, pastki, harorat, namlik, Co2 foiz, tuproq namligini yig'amiz. shuning uchun biz 4 ta veb -sahifani yaratmoqchimiz, bu burchakda biz har bir indeks uchun 4 ta komponent yaratamiz.

burchakli router modulini AppModule komponentiga import qilish.

alohida faylda marshrutlarni aniqlang.

const marshrutlar: Marshrutlar = [{yo'l: 'birinchi komponent', komponent: HomeComponent}, {yo'l: "ikkinchi komponent", komponent: HumiComponent},];

ushbu kod satrlarini AppMoodule -dagi import yorlig'iga qo'shing.

@NgModule ({import: [RouterModule.forRoot (yo'nalishlar)], eksport: [RouterModule]})

Header.html fayliga bootstrap navigatsiya shtrix kodini qo'shamiz va komponentalarimizni bog'laymiz,

5 -qadam: Firebase

Firebase - Google o'z foydalanuvchilariga taqdim etadigan eng zo'r xizmatlardan biri. Shunday qilib, biz ushbu loyihada ishlatgan xususiyatlardan biri bu real vaqtdagi ma'lumotlar bazasi va xosting. Firebase hisob qaydnomasini yaratamiz va loyihamizni real vaqtli ma'lumotlar bazasiga ulaymiz.

qadam 01: Gamil hisobingizga kiring

02 -qadam: qidiruv paneliga firebase konsolini kiriting

03 -qadam: endi ishingiz tugadi.

6 -qadam: Firebase -ni burchakka o'rnating

Yong'in bazasi bilan ishlash uchun biz kutubxonaga yong'in bazasi va burchakni bir -biriga ulashga yordam beradigan dasturni o'rnatdik. sizga loyiha yo'lini oching va CMD -ni oching va quyidagi kodni kiriting.

npm firebase @angular/fire -ni saqlang

7 -qadam: burchakli loyihamizni Firebase bilan ulash

Endi biz o'z loyihamizni olov bazasiga qo'shishimiz kerak. Firebase hisob qaydnomangizda loyiha belgisini qo'shish tugmachasini bosing va sizga yoqadigan loyiha nomini bering va boshqa ikkita ismni davom ettiring, shunda siz firebase hisobingizning ko'k rangdagi chiroyli boshqaruv panelini ko'rmaguningizcha, biz chap yonboshidagi ustunni ko'rishingiz mumkin. xizmatlar, shuning uchun biz ushbu xizmatlarning har biridan foydalanishimiz mumkin. endi hamma narsa ketishga tayyor. konsolda ishga tushirish uchun ilovani qo'shing va belgini bosing. bizning burchakli ilovamizni firebase hisobiga ulash uchun barcha konfiguratsiya tafsilotlarini olish. Bu tafsilotlar bizning loyihamizga xosdir. Endi bu tafsilotlarni nusxa ko'chiring va burchakli loyihangizga o'ting, muhitni toping.ts quyidagi kodni qo'shing va o'sha ma'lumotlarni shu erga joylashtiring.

const muhitini eksport qilish = {

ishlab chiqarish: haqiqiy, olov bazasi: {

konfiguratsiya tafsilotlari bu erda …

}

};

shuningdek, app.module.ts ichidagi kodlarni qo'shing

import: [AngularFireModule.initializeApp (Environment.firebase),….],

8 -qadam: NgxCharts kutubxonasini burchakli loyihangizga o'rnatish

Oldingi bosqichlarda bo'lgani kabi, loyiha yo'liga o'ting, CMD -ga kodni pastiga yozing.

npm i @swimlane/ngx-charts-saqlang

NgxChart rasmiy sayti bu saytga o'ting va kerakli jadvalni oling. Men chiziqli jadvalni afzal ko'rdim. bu url -ga o'ting va kodni oling va uni tegishli komponentlarga qo'shing.

9 -qadam: Xizmat sinfini va real vaqtda ma'lumotlar bazasini yarating

Loyiha papkasiga o'ting va CMD -ni oching va ng generate buyrug'i bilan birga xizmat uchun to'g'ri yo'l va tanlangan sinf nomini kiriting. Kodga kirishdan oldin men real vaqt rejimida firebase ma'lumotlar bazasi haqida ozgina ma'lumot bermoqchiman. Bu boshqa model modellar bazasiga o'xshamaydi. Biz ma'lumotlar bazalarining xilma -xilligida jadval tuzilishini ko'ra olmaymiz, bu NOSQL ma'lumotlar bazasi deb nomlanadi, biz matnli bazani yoki hujjatlar bazasi ma'lumotlar tuzilmasini ko'rishimiz mumkin. Bu JSON deb nomlanadi, shuning uchun agar biz ma'lumotlarni bunday ma'lumotlar bazasida saqlamoqchi bo'lsak, biz ularni JSON ob'ektlari kabi berishimiz kerak. Yuqoridagi rasmda siz ko'rishingiz mumkin, bizning ma'lumotlar bazamizda qurilmalar deb nomlangan tugun yoki chekka bor va bu tugun ostida DeviceA deb nomlangan boshqa tugun bor va bu tugun ostida siz namlik, harorat va boshqalar kabi har bir indeksni ko'rishingiz mumkin. Hum tugunining ostida siz vaqti -vaqti bilan to'plangan senor ma'lumotlarini ko'rishingiz mumkin.

async getData () {

this.items = ;

yangi va'dani qaytarish ((hal qilish) => {

bu ma'lumotlar bazasi. ro'yxat (`/devices/$ {this.sessionService.get (" DeviceA ")}/$ {" Hum "}`).snapshotChanges (). obuna bo'ling (oniy tasvir => {

oniy tasvir.forEach (element => {

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

this.items.push ({

ism: moment (element.payload.val () ['sana'], 'YYYY-A-KG ss: mm: ss'). format ('YYYY-MM-KG ss: mm'), qiymat: element.payload.val () ['qiymat']

});

}

});

hal qilish (this.items);

});

});

}

bu ma'lumotlar bazasidagi hum tugunida saqlanadigan ma'lumotlarga kirish uchun xizmat ko'rsatish klassi kodi, siz grafikni to'ldirmoqchi bo'lgan getData () sinfiga qo'ng'iroq qilishingiz kifoya.

async ngOnInit () {this.items = this.humService.getData () ni kuting;

bu.multi = [{

ism: '%', qator: this.items

}];

}

Bu erda ngOnInit komponentli sinf ichida biz o'z xizmatimizni grafik uchun qiymatlarni o'tkazishimiz kerak bo'lgan qatorni to'ldirgan deb ataymiz.

10 -qadam: Loyihangizni tuzing

Loyiha papkasiga o'ting va CMD -ni oching va ng serverini kiriting, shunda barcha Typescript kodi JavaScript -ga aylanadi. va yuqoridagi https:// localhost: 4200/home loyihasi uchun CMD sizga ko'rsatmoqchi bo'lgan urlni kiriting va siz bajarasiz.