LoRa-Batay sa Visual Monitoring System para sa Agrikultura Iot - Pagdidisenyo ng isang Pangunahing Application Gamit ang Firebase & Angular: 10 Hakbang

2024 May -akda: John Day | [email protected]. Huling binago: 2024-01-30 13:10

Sa nakaraang kabanata pinag-uusapan natin kung paano gumagana ang mga sensor sa loRa module upang mapunan ang firebase Realtime database, at nakita namin ang napakataas na antas ng diagram kung paano gumagana ang aming buong proyekto. Sa kabanatang ito ay pag-uusapan natin kung paano namin mapupunan ang mga datos na iyon sa web application.

Hakbang 1: I-setup ang Angular sa Iyong Computer

Angular ay isa sa pinakatanyag na javascript (na kung saan ay tunay na script) batay sa balangkas na kadalasang ginagamit sa industriya ng software, habang ginagamit namin ang firebase bilang aming backend (backend bilang isang server) na bagay lamang na kailangan namin ay isang frontend upang manipulahin ang backend na ito. Hayaan makita kung paano i-install ang lahat ng mga kinakailangan na ito mula sa simula.

isaalang-alang ang buong tutorial na ito ay batay sa windows 10 environment at umaasa na mayroon kang pangunahing kaalaman tungkol sa angular at firebase.

I-install ang node.js at NPM sa windows

Una sa lahat pumunta sa opisyal na website node.js node.js at mag-download ng pinakabagong bersyon ng node.js, ang node ay isang runtime environment upang patakbuhin ang lahat ng mga javascript code. Ang NPM ay nangangahulugang manager ng node package na makakatulong sa iyo na mai-install ang lahat ng iba pang kinakailangang software sa pamamagitan ng tool ng command line, iyon ang pangunahing ideya tungkol sa node at NPM kung nais mong lumalim nang mas maraming tonelada ng mga website at video na maaari kang makakuha ng karagdagang kaalaman tungkol sa node. (Tiyaking na-install mo ang node.js sa buong mundo ang iyong computer).

mangyaring suriin kung matagumpay mong na-install ang node bago ka magpatuloy.

I-install ang Angular

Buksan ang iyong tool sa linya ng utos at patakbuhin sa ibaba ang utos, npm install -g @ angular / kliyente

tiyaking ngayon na matagumpay mong na-install ang angular, maaari kang matuto nang higit pa tungkol sa angular para sa tutorial na angular na opisyal na website na ito.

Hakbang 2: I-set up ang Iyong Project Istraktura

Pumunta sa kung saan mo nais na likhain ang proyekto mo, para sa akin ginamit ko ang D: / Angular-Proyekto sa lokasyong ito. Buksan ang prompt ng command line sa lokasyon na iyon. Mag-type sa ibaba ng utos.

ng bagong sistema ng pagsubaybay sa agrikultura

pagkatapos angular ay lilikha ng lahat ng kinakailangang mga bagay na nais naming magkaroon sa aming front-end. bago kami magkonekta ng frontend at backend magkasama. alamin natin nang kaunti ang tungkol sa angular at firebase.

Anggulo

Pag-usapan natin ang tungkol sa kung paano ang hitsura ng tipikal na arkitektura ng web, mayroong frontend o backend ng client side o server side, ang panig ng client ay nangangahulugang ito ay kung saan naglalaman ang lahat ng HTML, CSS, ngunit sa angular hindi namin kailangang lumikha ng sperate web pages para sa aming naglalaman. tulad ng, home.html, about.hml, index.html… atbp. mayroon lamang isang solong pahina para sa buong application na ito ay index.html kapag ang gumagamit ay dumaan sa iba pang mga pahina o iba pang naglalaman ng index.html ay maglalagay kasama ang naglalaman ng mga pahinang iyon na nangangahulugang html at css view ng isang tiyak na pahina. kaya ang aming buong aplikasyon ay naglalaman lamang ng isang solong pahina ng html. Ito ang tinawag naming SPA. Kaya't likhain natin ang aming aplikasyon. buksan ang CMD sa parehong uri ng direktoryo sa ibaba utos.

ng makabuo ng sangkap ng bahay.

bubuo ito ng naglalaman ng iyong home page, pagkatapos ay makakakita ka ng isang file na home.ts at home.html file at home.css sa home.html file kung saan mo tutukuyin kung paano ang istraktura ng iyong home page at sa bahay. css kung saan mo idaragdag ang iyong mga istilo para sa home page, at panghuli home.ts file kung saan ka pupunta sa code sa iyo ng typecript o javascript code upang gumana kasama ang aming backend.

Hakbang 3: Pag-install ng Bootstrap 4

Tulad ng tinalakay sa nakaraang hakbang ngayon ay mayroon kaming hakbang sa aming proyekto at ngayon mayroon kaming malinaw na ideya tungkol sa kung paano gumagana ang angular. ngayon para sa layunin ng estilo na gagamitin namin ang bootstrap 4, upang mai-install ang bootstrap sa aming uri ng proyekto sa ibaba ng utos sa path ng proyekto.

Nag-install ng bootstrap @ 3

Ngayon hindi mo na kailangang magalala tungkol sa kung paano namin mai-istraktura ang aming mga web page, gagawin ng bootstrap ang bagay.

Hakbang 4: Pagtukoy sa Mga Ruta

Sa labas ng proyekto ng IOT ay magkokolekta kami ng header, footer, temperatura, halumigmig, porsyento ng Co2, kahalumigmigan ng lupa. sa gayon lilikha kami ng 4 na mga web page na nangangahulugang sa angular ay lilikha kami ng 4 na mga bahagi para sa bawat isa sa mga index na ito.

i-import angular module ng router sa bahagi ng AppModule.

tukuyin ang mga ruta sa magkakahiwalay na file.

mga ruta ng const: Ruta = [{path: 'first-component', bahagi: HomeComponent}, {path: 'pangalawang bahagi', bahagi: HumiComponent},];

idagdag ang mga linya ng code sa loob ng pag-import ng tag sa AppMoodule.

@NgModule ({import: [RouterModule.forRoot (mga ruta)], i-export: [RouterModule]})

Magdagdag tayo ng bootstrap navigation bar code sa loob ng aming header.html file at i-link ang aming mga bahagi,

Hakbang 5: Firebase

Ang Firebase ay isa sa pinaka-cool na serbisyo na ibinibigay ng google sa kanilang mga gumagamit. Kaya ang isa sa mga tampok na ginamit namin sa proyektong ito ay ang firebase realtime database at pagho-host. lumikha tayo ng isang firebase account at ikonekta ang aming proyekto sa firebase realtime database.

hakbang 01: Mag-login sa iyong gamil account

hakbang 02: i-type ang firebase console sa iyong paghahanap bar

hakbang 03: ngayon tapos ka na.

Hakbang 6: I-install ang Firebase sa Angular

Upang gumana sa firebase mayroon kaming mai-install o isinasama ang tumutulong sa library na ikonekta ang firebase at angular na magkasama. pumunta sa iyo ng path ng proyekto at buksan ang CMD at i-type sa ibaba ang code.

npm install firebase @ angular / fire --save

Hakbang 7: Pagkonekta sa Aming Angular Project Sa Firebase

ngayon kailangan naming idagdag ang aming proyekto sa firebase. pindutin ang idagdag ang icon ng proyekto sa iyong firebase account, at magbigay ng isang pangalan ng proyekto na gusto mo at ipagpatuloy ang dalawa pa rin hanggang sa makita mo ang asul na magandang dashboard ng iyong firebase account, maaari mong makita na ang kaliwang bahagi ng haligi maaari naming makita ang lahat ng listahan ng firebase mga serbisyo, upang maaari naming magamit ang bawat isa sa serbisyong ito. ngayon handa na ang lahat. sa iyong console magdagdag ng isang app upang makapagsimula at mag-click sa icon. upang makuha ang lahat ng mga detalye sa pagsasaayos upang ikonekta ang aming angular application sa firebase account. Ang mga detalyeng ito ay natatangi sa aming proyekto. kopyahin ngayon ang mga detalyeng iyon at pumunta sa iyong angular na proyekto hanapin ang environment.ts magdagdag sa ibaba ng code at i-paste ang mga detalyeng iyon doon.

export const environment = {

produksyon: totoo, firebase: {

ang iyong mga detalye sa pagsasaayos dito …

}

};

at magdagdag din sa ibaba ng mga code sa loob ng app.module.ts

na-import: [AngularFireModule.initializeApp (environment.firebase),….],

Hakbang 8: Pag-install ng NgxCharts Library sa Iyong Angular Project

Pumunta sa path ng proyekto tulad ng ginawa namin sa mga nakaraang hakbang, i-type sa ibaba ang code sa iyong CMD.

npm i @ swimlane / ngx-charts - save

Opisyal na site ngxxart pumunta sa site na ito at kunin ang tsart na gusto mo. Mas ginusto ko sa line chart. pumunta sa url na ito at kunin ang code at idagdag ito sa mga kaukulang bahagi.

Hakbang 9: Lumikha ng isang Class ng Serbisyo at Realtime Database

Pumunta sa folder ng proyekto at buksan ang CMD at mag-type ng wastong landas at ginustong pangalan ng klase para sa serbisyo kasama ang utos ng pagbuo ng. Bago kami pumunta sa code nais kong magbigay ng kaunting ideya tungkol sa firebase real-time na database. Hindi ito tulad ng anumang iba pang pamanggit na modelo ng database. Hindi namin makita ang isang istraktura ng talahanayan sa ito ng Varity ng mga database, Ito ay tinatawag na NOSQL database na maaari naming makita ang isang batayan ng teksto o istraktura ng data ng batayang dokumento. Na kung saan ay tinatawag na JSON, kaya kung nais naming mag-imbak ng data sa loob ng ganyang uri ng database kailangan naming ipasa ang mga tulad ng JSON Objects. Sa larawan sa itaas maaari mong makita, Sa aming database mayroong isang node o gilid na tinatawag na mga aparato, at sa ilalim ng node na iyon ay may isa pang node na tinatawag na DeviceA at sa ilalim ng node na iyon, maaari mong makita sa itaas ng bawat mga index tulad ng halumigmig, temperatura..tb.. sa ilalim ng node ng Hum maaari mong makita ang data ng senor na nakolekta pana-panahon.

async getData () {

this.items = ;

ibalik ang bagong Pangako ((resolbahin) => {

ito.database. listahan (`/ aparato / $ {this.sessionService.get (" DeviceA ")} / $ {" Hum "}`).snapshotChanges (). mag-subscribe (snapshot => {

snapshot.forEach (element => {

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

this.items.push ({

pangalan: moment (element.payload.val () ['date'], 'YYYY-M-DD hh: mm: ss'). format ('YYYY-MM-DD hh: mm'), halaga: element.payload.val () ['halaga']

});

}

});

malutas (ito.item);

});

});

}

ito ang code ng klase ng serbisyo upang mai-access ang data na nakaimbak sa ilalim ng hum node sa database, ang kailangan mo lang gawin ay tawagan ang function na ito ng getData () kung saan nais mong mapunan ang iyong tsart.

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

this.multi = [{

pangalan: '%', serye: ito.mga item

}];

}

Dito sa loob ng aming sangkap ng klase ngOnInit na pamamaraan tinawag namin ang aming serbisyo na pinunan ang multi array na kung saan ang array na dapat naming ipasa ang mga halaga para sa grap.

Hakbang 10: Tipunin ang Iyong Proyekto

Pumunta sa iyong folder ng proyekto at buksan ang CMD at i-type ng server, Pagkatapos ang lahat ng code ng Typescript ay magko-convert sa javascript. at i-type ang url na hihilingin sa iyo ng CMD, para sa itaas na proyekto https:// localhost: 4200 / home at tapos ka na.