Sistemi i Monitorimit Vizual të Bazuar në LoRa për Bujqësinë Iot - Hartimi i një aplikacioni të përparuar duke përdorur Firebase & Angular: 10 hapa

2024 Autor: John Day | [email protected]. E modifikuara e fundit: 2024-01-30 12:10

Në kapitullin e mëparshëm ne flasim për mënyrën sesi sensorët po punojnë me modulin loRa për të mbushur bazën e të dhënave të bazës së zjarrit Realtime, dhe ne pamë diagramin e nivelit shumë të lartë se si po punon i gjithë projekti ynë. Në këtë kapitull do të flasim për mënyrën se si mund t'i popullojmë ato të dhëna në aplikacionin në internet.

Hapi 1: Konfiguroni Angular në kompjuterin tuaj

Angular është një nga kornizat më të njohura të bazuara në javascript (e cila në të vërtetë është daktilografuese) e përdorur kryesisht në industrinë e softuerit, pasi ne përdorim firebase si backend tonë (backend si server) e vetmja gjë që na nevojitet është një frontend për të manipuluar këtë backend. Pra, le të shohim se si t'i instalojmë të gjitha ato të nevojshme nga e para.

Konsideroni që i gjithë ky mësim bazohet në mjedisin e Windows 10 dhe shpresoni të keni njohuri themelore në lidhje me këndin dhe bazën e zjarrit.

Instaloni node.js dhe NPM në dritare

Para së gjithash shkoni në faqen zyrtare të Node.js node.js dhe shkarkoni versionin e fundit të node.js, nyja është një mjedis ekzekutimi për të ekzekutuar të gjithë kodet javascript. NPM qëndron për menaxherin e paketave të nyjeve që ju ndihmojnë të instaloni të gjithë programet e tjerë të nevojshëm përmes mjetit të linjës së komandës, kjo është ideja themelore në lidhje me nyjen dhe NPM nëse doni të shkoni më thellë ka mijëra faqe në internet dhe video që mund të fitoni më shumë njohuri rreth nyjes. (Sigurohuni që keni instaluar node.js globalisht kompjuterin tuaj).

ju lutemi kontrolloni nëse e keni instaluar me sukses nyjen para se të shkoni përpara.

Instaloni Angular

Hapni veglën tuaj të linjës së komandës dhe ekzekutoni nën komandën, npm install -g @angular/cli

tani sigurohuni që keni instaluar me sukses angular, mund të mësoni më shumë rreth angular për këtë faqe zyrtare tutorial angular.

Hapi 2: Vendosni strukturën e projektit tuaj

Shkoni atje ku dëshironi të krijoni projektin tuaj, për timen kam përdorur D: / Angular-Projekton këtë vendndodhje. Hapni linjën e komandës në atë vend. Shkruani komandën më poshtë.

ng sistemi i ri i monitorimit të bujqësisë

atëherë këndore do të krijojë të gjitha gjërat e nevojshme që ne duam të kemi në front-end tonë. para se të lidhnim së bashku frontend dhe backend. le të mësojmë pak rreth këndore dhe firebase.

Këndore

Le të flasim për atë se si duket arkitektura tipike e uebit, ka një sfond të përparme ose të klientit ose anën e serverit, ana e klientit do të thotë se është aty ku përmban të gjithë HTML, CSS, por në këndore nuk kemi pse të krijojmë faqe të veçanta në internet për përmbajtjet tona si, home.html, about.hml, index.html… etj. ekziston vetëm një faqe e vetme për të gjithë aplikacionin është index.html kur përdoruesi kalon nëpër faqe të tjera ose përmban indeks tjetër. html do të paraqitet me përmbajtjen e atyre faqeve që nënkuptojnë pamjen html dhe css të faqes së caktuar. kështu që i gjithë aplikacioni ynë përmban vetëm një faqe të vetme.html. Kjo është ajo që ne e quajtëm SPA. Pra, le të krijojmë aplikacionin tonë. hapni CMD në të njëjtin lloj drejtori më poshtë komandën.

ng gjenerojnë përbërës në shtëpi.

kjo do të krijojë përmbajtjen e faqes tuaj fillestare, atëherë do të shihni një skedar home.ts dhe skedar home.html dhe home.css në skedarin home.html ku do të përcaktoni se si struktura e faqes tuaj fillestare dhe në shtëpi. css ku do të shtoni stilet tuaja për faqen kryesore, dhe së fundi skedarin home.ts ku do të kodoni kodin tuaj të shkrimit ose javascript për të punuar me backendin tonë.

Hapi 3: Instalimi i Bootstrap 4

Siç kemi diskutuar në hapin e mëparshëm tani ne kemi hap projektin tonë dhe tani kemi një ide të qartë se si funksionon këndi. tani për qëllimin e stilimit ne do të përdorim bootstrap 4, për të instaluar bootstrap në llojin e projektit tonë poshtë komandës në rrugën e projektit.

npm instaloni bootstrap@3

tani nuk keni pse të shqetësoheni se si mund të strukturojmë faqet tona të internetit, bootstrap do ta bëjë këtë.

Hapi 4: Përcaktimi i Rrugëve

Në projektin IOT ne do të mbledhim titullin, fundin, temperaturën, lagështinë, përqindjen e CO2, lagështinë e tokës. kështu që ne do të krijojmë 4 faqe në internet që do të thotë në këndore do të krijojmë 4 përbërës për secilin nga këto indekse.

importoni modulin këndor të ruterit në komponentin AppModule.

përcaktoni rrugët në skedarë të veçantë.

rrugët const: Routes = [{path: 'first-component', component: HomeComponent}, {path: 'komponenti i dytë', komponenti: HumiComponent},];

shtoni këto rreshta të kodit brenda etiketës së importit në AppMoodule.

@NgModule ({importet: [RouterModule.forRoot (rrugët)], eksporton: [RouterModule]})

Le të shtojmë kodin e navigimit bootstrap brenda skedarit tonë header.html dhe të lidhim përbërësit tanë,

Hapi 5: Baza e zjarrit

Firebase është një nga shërbimet më interesante që Google po u ofron përdoruesve të tyre. Pra, një nga veçoritë që ne kemi përdorur për këtë projekt është baza e të dhënave dhe pritja në kohë reale e bazës së zjarrit. le të krijojmë një llogari firebase dhe ta lidhim projektin tonë me bazën e të dhënave në kohë reale.

hapi 01: Hyni në llogarinë tuaj gamil

hapi 02: shkruani tastierën firebase në shiritin tuaj të kërkimit

hapi 03: tani keni mbaruar.

Hapi 6: Instaloni Firebase në Angular

Për të punuar me bazën e zjarrit ne kemi instaluar ose përfshirë atë bibliotekë ndihmëse për të lidhur bazën e zjarrit dhe këndore së bashku. shkoni në rrugën tuaj të projektit dhe hapni CMD dhe shkruani kodin më poshtë.

npm instaloni firebase @angular/fire --save

Hapi 7: Lidhja e projektit tonë këndor me Firebase

tani duhet të shtojmë projektin tonë në bazën e zjarrit. shtypni shtoni ikonën e projektit në llogarinë tuaj firebase, dhe jepni një emër projekti që ju pëlqen dhe vazhdoni dy të tjerë gjithashtu derisa të shihni panelin e bukur blu të llogarisë tuaj firebase, mund të shihni që kolona në anën e majtë mund të shohim të gjithë listën e bazës së zjarrit shërbimeve, kështu që ne mund të përdorim secilin nga këto shërbime. tani gjithçka është gati për të shkuar. në tastierën tuaj shtoni një aplikacion për të filluar dhe klikoni në ikonën. për të marrë të gjitha detajet e konfigurimit për të lidhur aplikacionin tonë këndor me llogarinë e firebase. Këto detaje janë unike për projektin tonë. tani kopjoni ato detaje dhe shkoni te projekti juaj këndor gjeni mjedisin.ts shtoni kodin më poshtë dhe ngjisni ato detaje atje.

konstrukti i eksportit të mjedisit = {

prodhimi: i vërtetë, bazë zjarri: {

detajet e konfigurimit tuaj këtu…

}

};

dhe gjithashtu shtoni kodet më poshtë brenda aplikacionit.module.ts

importon: [AngularFireModule.initializeApp (ambienti. firebase),….],

Hapi 8: Instalimi i Bibliotekës NgxCharts në Projektin tuaj Këndor

Shkoni në rrugën e projektit siç bëmë në hapat e mëparshëm, shkruani kodin më poshtë në CMD tuaj.

npm i @swimlane/ngx-charts-ruaj

Faqja zyrtare e NgxChart shkoni në këtë faqe dhe kapni tabelën që dëshironi. Preferova me grafikun e linjave. shkoni në këtë url dhe kapni kodin dhe shtojeni atë në përbërësit përkatës.

Hapi 9: Krijoni një klasë shërbimi dhe një bazë të dhënash në kohë reale

Shkoni te dosja e projektit dhe hapni CMD dhe shkruani një shteg të vlefshëm dhe emrin e preferuar të klasës për shërbimin së bashku me komandën ng generate. Para se të kalojmë në kodin, do të doja të jepja pak ide në lidhje me bazën e të dhënave në kohë reale. Nuk është si çdo bazë të dhënash modele relacionale. Ne nuk mund të shohim një strukturë të tabelës në këtë Shumëllojshmëri të bazave të të dhënave, Kjo quhet baza e të dhënave NOSQL mund të shohim një strukturë të të dhënave të bazës së tekstit ose bazës së dokumentit. E cila quhet JSON, kështu që nëse duam të ruajmë të dhënat brenda në ato lloj bazash të të dhënave, ne duhet t'i kalojmë ato si JSON Objects. Në foton e mësipërme mund të shihni, Në bazën tonë të të dhënave ekziston një nyje ose skaj i quajtur pajisje, dhe nën atë nyje ekziston një nyje tjetër e quajtur DeviceA dhe nën atë nyje, ju mund të shihni mbi secilin indekse si lagështia, temperatura etj. Nën nyjen Hum mund të shihni të dhënat e senorit të mbledhura në mënyrë periodike.

async getData () {

this.items = ;

ktheu Premtimin e ri ((zgjidh) => {

kjo.baza e të dhënave. lista (`/devices/$ {this.sessionService.get (" DeviceA ")}/$ {" Hum "}`).snapshotChanges (). abonohu (fotografia => {

snapshot.forEach (element => {

nëse (! element.key.startsWith ('current_hum')) {

this.items.push ({

emri: momenti (element.payload.val () ['data'], 'YYYY-M-DD hh: mm: ss'). format ('YYYY-MM-DD hh: mm'), vlera: element.pagesa.val () ['vlera']

});

}

});

zgjidh (kjo. artikujt);

});

});

}

ky është kodi i klasës së shërbimit për të hyrë në të dhënat që ruhen nën nyjen hum në bazën e të dhënave, gjithçka që duhet të bëni është ta thërrisni këtë klasë funksion getData () ku dëshironi të plotësoni grafikun tuaj.

async ngOnInit () {this.items = presim këtë.humService.getData ();

kjo.multi = [{

emri: '%', seri: this.items

}];

}

Këtu brenda metodës sonë të klasës përbërëse ngOnInit ne kemi thirrur shërbimin tonë të populluar me vargun multi të cilin vargu që duhet të kalojmë vlerat për grafikun.

Hapi 10: Përpiloni projektin tuaj

Shkoni te dosja e projektit tuaj dhe hapni CMD dhe shkruani server ng, Atëherë i gjithë kodi i Typescript do të konvertohet në javascript. dhe shkruani url -në që CMD do t'ju kërkojë, për projektin e mësipërm https:// localhost: 4200/home dhe ju jeni gati.