Айыл чарбасына LoRa негизделген визуалдык мониторинг системасы - Firebase & Angular колдонуп алдыңкы колдонмону иштеп чыгуу: 10 кадам

2024 Автор: John Day | [email protected]. Акыркы өзгөртүү: 2024-01-30 10:36

Мурунку бөлүмдө сенсорлор loRa модулу менен реалдуу убакыт базасынын базасын толтуруу үчүн кантип иштешкени жөнүндө сүйлөшөбүз жана биз бүт проектибиздин кандай иштеп жатканын абдан жогорку деңгээлдеги диаграмманы көрдүк. Бул бөлүмдө биз бул маалыматтарды веб тиркемеде кантип толтуруу жөнүндө сүйлөшөбүз.

1 -кадам: Компьютериңизде бурчтукту орнотуңуз

Бурчтук - эң популярдуу JavaScriptтин (негизи типтеги) негизинен негизинен программалык камсыздоо тармагында колдонулган алкактарынын бири, анткени биз firebaseди биздин арткы бетибиз (сервер катары backend) катары колдонобуз. Ошентип, булардын бардыгын нөлдөн кантип орнотууну карап көрөлү.

Бул окуу куралы Windows 10 чөйрөсүнө негизделген жана бурчтук жана от базасы жөнүндө негизги билимге ээ экениңизди үмүттөнөм.

Терезелерге node.js жана NPM орнотуңуз

Биринчиден, Node.js расмий сайтына node.js барып, node.js акыркы версиясын жүктөп алыңыз, түйүн бардык JavaScript коддорун иштетүү үчүн иштөө убактысы. NPM буйрук сабынын куралы аркылуу башка бардык керектүү программаларды орнотууга жардам берген түйүн пакетинин менеджерин билдирет, эгер сиз тереңирээк билгиңиз келсе, түйүн жана NPM жөнүндө негизги идея, бул жерде сиз көбүрөөк маалымат ала турган веб -сайттар жана видеолор бар. node жөнүндө. (node.js глобалдык түрдө сиздин компьютериңизде орнотулганын текшериңиз).

сураныч, алдыга өтүүдөн мурун түйүн ийгиликтүү орнотулганын текшериңиз.

Angular орнотуу

Буйрук сабынын куралын ачыңыз жана төмөнкү буйрукту иштетиңиз, npm орнотуу -g @angular/cli

Эми сиз бурчтукту ийгиликтүү орнотуп алган экениңизди текшериңиз, бул үйрөткүч бурчтук расмий веб -сайты үчүн бурчтук жөнүндө көбүрөөк биле аласыз.

2 -кадам: Долбоордун структурасын орнотуңуз

Долбоорду түзгүңүз келген жерге барыңыз, мен үчүн D: / Angular-Projects бул жерди колдондум. Ошол жерде буйрук сабын ачыңыз. Төмөндөгү буйрукту териңиз.

жаңы айыл чарба мониторинг системасы

анда бурчтук биздин алдыңкы бөлүктө болгубуз келген бардык керектүү нерселерди жаратат. биз алдыңкы жана арткы жагын бириктиргенге чейин. бурчтук жана от базасы жөнүндө бир аз үйрөнөлү.

Бурчтуу

Келгиле, типтүү веб архитектурасы кандай көрүнөөрү жөнүндө сүйлөшөлү, алдыңкы же кардардык тарап же сервердик жагы бар, кардар тарабы бардык HTML, CSS камтылган жерди билдирет, бирок бурчтуу түрдө биздин камтылган үчүн веб -баракчаларды түзүүнүн кажети жок. сыяктуу, home.html, about.hml, index.html … ж. Колдонуучу башка барактардан өткөндө же index.html камтыган бардык баракчалардын html жана CSS көрүнүштөрүн билдирген баракчаларды камтыйт. Ошентип, биздин бардык колдонмо бир гана.html баракты камтыйт. Бул биз SPA деп атаган нерсе. Ошентип, биздин колдонмону түзөлү. CMDди ошол эле каталог түрүндө төмөнкү буйруктан ачыңыз.

ng home компонентин түзүңүз.

бул сиздин башкы баракчаңызды камтыйт, андан кийин сиз home.ts файлын жана home.html файлын жана home.css файлын көрөсүз, анда сиз үй баракчаңыздын структурасын жана үйдө кантип аныктай тургандыгыңызды билесиз. css, анда сиз үй стилиңизге стилиңизди кошо турган болосуз, жана акыры биздин backend менен иштөө үчүн сизге typcript же javascript кодун коё турган home.ts файлы.

3 -кадам: Bootstrap 4 орнотуу

Мурунку кадамда талкуулаганыбыздай, азыр биз долбоорубузга кадам таштадык жана азыр бурчтуктун кантип иштээри жөнүндө так түшүнүккө ээ болдук. азыр стилдөө максатында биз bootstrap 4ти колдонобуз, bootstrapты биздин долбоордун түрүнө долбоордун жолунда төмөнкү буйрукка орнотуу үчүн.

npm bootstrap@3 орнотуу

Эми веб -баракчаларыбызды кантип түзө алабыз деп тынчсыздануунун кажети жок, bootstrap муну жасайт.

4 -кадам: Маршруттарды аныктоо

IOT долбоорунда биз баш, колонтитул, температура, нымдуулук, Co2 пайызы, топурактын нымдуулугун чогултканы жатабыз. Ошентип, биз 4 веб баракты түзөбүз, бул бурчтукта бул индекстердин ар бири үчүн 4 компонент түзөбүз дегенди билдирет.

AppModule компонентине бурчтук роутер модулун импорттоо.

жолдорду өзүнчө файлда аныктоо.

const маршруттары: Маршруттар = [{жол: 'биринчи компонент', компонент: HomeComponent}, {жол: "экинчи компонент", компонент: HumiComponent},];

коддун бул саптарын AppMooduleдогу импорттоо тегинин ичине кошуңуз.

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

Келгиле, header.html файлына bootstrap багыттоо штрих кодун кошуп, компоненттерибизди байланыштырып,

5 -кадам: Firebase

Firebase - бул Google колдонуучуларына эң сонун кызматтардын бири. Ошентип, биз бул долбоорго колдонгон өзгөчөлүктөрдүн бири - бул реалдуу убакыт режиминдеги база жана хостинг. Firebase эсебин түзүп, долбоорубузду Firebase реалдуу убакыт базасына туташтыралы.

кадам 01: gamil эсебиңизге кириңиз

02 -кадам: издөө тилкесине firebase консолун териңиз

03 -кадам: Эми сиз бүттүңүз.

6 -кадам: Firebase'ди бурчка орнотуңуз

Firebase менен иштөө үчүн бизде китепканага Firebase менен бурчтукту бириктирүүгө жардам берүүчү китепкана орнотулган же камтылган. сизге проект жолуңузга өтүңүз жана CMDди ачыңыз жана коддун астына териңиз.

npm firebase @angular/fire -сактоо

7 -кадам: Биздин бурчтуу долбоорду Firebase менен туташтыруу

Эми биз өзүбүздүн долбоорду firebaseге кошушубуз керек. Firebase аккаунтуңуздагы проект сөлөкөтүн кошуп, өзүңүзгө жаккан долбоордун атын бериңиз жана калган экөөнү улантыңыз, ошондо сиз 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 буйругу менен бирге кызмат үчүн жарактуу жолду жана артыкчылыктуу класстын атын териңиз. Кодго кирерден мурун мен реалдуу убакытта firebase маалымат базасы жөнүндө бир аз түшүнүк бергим келет. Бул башка реляциялык моделдер базасына окшош эмес. Биз маалымат базаларынын бул түрдүүлүгүндө стол түзүмүн көрө албайбыз, бул NOSQL маалымат базасы деп аталат, биз текст базасын же документ базасынын маалымат структурасын көрө алабыз. Бул JSON деп аталат, андыктан эгер биз маалыматтарды ушундай базада сактоону кааласак, биз аларды JSON Objects сыяктуу өткөрүп беришибиз керек. Жогорудагы сүрөттө сиз көрө аласыз, биздин маалымат базабызда түзмөктөр деп аталган түйүн же чети бар, ал түйүндүн астында DeviceA деп аталган дагы бир түйүн бар жана ал түйүндүн астында ар бир индекстин үстүндө нымдуулук, температура ж.б.. көрө аласыз. Hum түйүнүнүн астында мезгил -мезгили менен чогултулган сенордук маалыматтарды көрө аласыз.

async getData () {

this.items = ;

жаңы убаданы кайтаруу ((чечүү) => {

бул. маалымат базасы. тизме (`/devices/$ {this.sessionService.get (" DeviceA ")}/$ {" Hum "}`).snapshotChanges (). жазылуу (snapshot => {

snapshot.forEach (element => {

эгер (! element.key.startsWith ('current_hum'))) {

this.items.push ({

аты: учур (element.payload.val () ['дата'], 'YYYY-A-DD hh: mm: ss'). формат ('YYYY-MM-GS hh: mm'), маани: element.payload.val () ['value']

});

}

});

чечүү (this.items);

});

});

}

бул маалымат базасындагы hum түйүнүнүн астында сакталган маалыматтарга жетүү үчүн кызмат классынын коду, диаграммаңызды толтургусу келген бул класс getData () функциясын чакыруу гана керек.

async ngOnInit () {this.items = this.humService.getData () күтөбүз;

this.multi = [{

аты: '%', серия: this.items

}];

}

Бул жерде биздин ngOnInit класс компоненти классында биздин кызмат графиктин маанилерин өткөрүп бериши керек болгон массивди толтурган.

10 -кадам: Долбооруңузду түзүңүз

Долбооруңуздун папкасына өтүңүз жана CMDди ачыңыз жана ng серверин териңиз, анда бардык Typescript коду javascriptке айланат. жана CMD сизге сунуштай турган url териңиз, жогорудагы долбоор үчүн https:// localhost: 4200/home жана сиз бүттүңүз.