LoRa-põhine põllumajanduse visuaalne seiresüsteem Iot - Esiotstarbelise rakenduse kujundamine Firebase & Angular abil: 10 sammu

2024 Autor: John Day | [email protected]. Viimati modifitseeritud: 2024-01-30 08:45

Eelmises peatükis rääkisime sellest, kuidas andurid töötavad koos loRa mooduliga, et täita Firebase Realtime andmebaas, ja nägime väga kõrgetasemelist diagrammi, kuidas kogu meie projekt töötab. Selles peatükis räägime sellest, kuidas saame neid andmeid veebirakenduses täita.

Samm: seadistage arvutis nurk

Angular on üks populaarsemaid javascripti (mis on tegelikult masinakirja) põhiseid raamistikke, mida enamasti kasutatakse tarkvaratööstuses, kuna kasutame oma taustaprogrammina firebase'i (taustaprogrammi kui serverit) ja ainuke asi, mida vajame, on selle taustaprogrammiga manipuleerimiseks mõeldud kasutajaliides. Nii et vaatame, kuidas installida kõik vajalikud asjad nullist.

kaaluge, et kogu see õpetus põhineb Windows 10 keskkonnal ja loodan, et teil on põhiteadmised nurga- ja tulebaasi kohta.

Installige Windowsile node.js ja NPM

Kõigepealt minge Node.js ametlikule veebisaidile node.js ja laadige alla node.js uusim versioon, node on käituskeskkond kõigi JavaScripti koodide käitamiseks. NPM tähistab sõlmepaketihaldurit, mis aitab teil käsurea tööriista kaudu installida kogu muu vajaliku tarkvara, see on sõlme ja NPM -i põhiidee, kui soovite sügavamale minna, on palju veebisaite ja videoid, mida saate rohkem teada saada sõlme kohta. (Veenduge, et arvutisse oleks installitud node.js globaalselt).

enne edasiliikumist kontrollige, kas olete sõlme edukalt installinud.

Paigaldage Angular

Avage oma käsurea tööriist ja käivitage käsk allpool

npm install -g @angular/cli

nüüd veenduge, et teil on nurk edukalt installitud, selle nurgakese ametliku veebisaidi kohta saate nurga kohta rohkem teada saada.

2. samm: seadistage oma projekti struktuur

Minge sinna, kuhu soovite oma projekti luua, minu jaoks olen seda asukohta kasutanud D: / Angular-Projects. Avage selles kohas käsurea viip. Sisestage käsk allpool.

uus põllumajanduse seiresüsteem

siis loob Angular kõik vajalikud asjad, mida me tahame oma esipaneelil kasutada. enne, kui ühendasime esi- ja taustaprogrammi kokku. õpime natuke nurga ja tulebaasi kohta.

Nurgeline

Räägime sellest, kuidas tüüpiline veebiarhitektuur välja näeb, on olemas kasutajaliides või kliendipoolne taustaprogramm või serveripool. Kliendipool tähendab, et see on koht, kus kogu HTML, CSS sisaldab, kuid nurga all ei pea me oma sisu jaoks looma spetsiifilisi veebilehti nagu, home.html, about.hml, index.html … jne. kogu rakenduse jaoks on ainult üks leht, see on indeks.html, kui kasutaja läbib teisi lehti või muu sisaldab indeksit.html renderdab koos nende lehtede sisuga, mis tähendab teatud lehe html- ja css -vaadet. nii et kogu meie rakendus sisaldab ainult ühte.html lehte. Seda me nimetasime SPA -ks. Nii et loome oma rakenduse. avage CMD samas kataloogitüübis allpool.

ng luua komponent koju.

see genereerib teie avalehe sisu, siis näete failis home.ts ja home.html ning home.css failis home.html, kus kavatsete määratleda, kuidas teie avaleht üles ehitatakse ja kuidas see kodus on. css, kuhu kavatsete lisada oma kodulehe stiilid, ja lõpuks home.ts -faili, kus kodeerite masinakirja või JavaScripti koodi, et töötada meie taustaprogrammiga.

Samm 3: Bootstrapi installimine 4

Nagu me eelmises etapis arutasime, on meil oma projekt samm ja nüüd on meil selge ettekujutus nurga toimimisest. Nüüd kasutame stiilieesmärgil bootstrap 4, et installida bootstrap meie projekti tüübile allpool olevale projekti tüübile.

npm installige bootstrap@3

nüüd ei pea te muretsema selle pärast, kuidas me oma veebilehti struktureerida saame, saab alglaadur hakkama.

4. samm: marsruutide määratlemine

IOT -projekti raames kogume päise, jaluse, temperatuuri, niiskuse, Co2 protsendi, mulla niiskuse. nii et me loome 4 veebilehte, mis tähendab nurga all, et loome iga indeksi jaoks 4 komponenti.

importige nurkruuteri moodul AppModule'i komponenti.

määrake marsruudid eraldi failis.

const marsruudid: Routes = [{tee: 'esimene komponent', komponent: HomeComponent}, {tee: 'teine komponent', komponent: HumiComponent},];

lisage need koodiridad AppMoodule'i impordimärgendisse.

@NgModule ({import: [RouterModule.forRoot (marsruudid)], eksport: [RouterModule]})

Lisame bootstrapi navigeerimisvöötkoodi oma faili header.html ja linkime komponendid,

5. toiming: Firebase

Firebase on üks lahedamaid teenuseid, mida Google oma kasutajatele pakub. Nii et üks selle projekti jaoks kasutatud funktsioone on firebase'i reaalajas andmebaas ja hostimine. loome firebase'i konto ja ühendame oma projekti firebase'i reaalajas andmebaasiga.

samm 01: logige sisse oma Gamili kontole

samm 02: tippige otsinguribale firebase konsool

samm 03: nüüd olete lõpetanud.

6. toiming: installige Firebase Angularisse

Firebase'iga töötamiseks oleme installinud või lisanud selle abiteegi Firebase'i ja Angular'i ühendamiseks. minge projekti teele ja avage CMD ning tippige kood alla.

npm install firebase @angular/fire --save

Samm: meie nurgaprojekti ühendamine Firebase'iga

nüüd peame oma projekti tulebaasi lisama. vajutage oma Firebase'i kontol projekti lisamise ikooni ja andke projekti nimi, mis teile meeldib, ning jätkake ka kahe teisega, kuni näete oma Firebase'i konto seda sinist ilusat armatuurlauda, näete, et vasakpoolses veerus näeme kogu Firebase'i loendit teenuseid, nii et saame kasutada kõiki neid teenuseid. nüüd on kõik minekuks valmis. lisage alustamiseks oma konsoolis rakendus ja klõpsake ikooni. saada kõik konfiguratsiooni üksikasjad, et ühendada meie nurgeline rakendus Firebase'i kontoga. Need üksikasjad on meie projekti jaoks ainulaadsed. kopeerige need üksikasjad ja minge oma nurgaprojekti, leidke keskkond. lisage allolev kood ja kleepige need andmed sinna.

export const keskkond = {

tootmine: tõsi, firebase: {

oma konfiguratsiooni üksikasjad siin …

}

};

ja lisage ka järgmised koodid rakendusse.module.ts

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

Samm: NgxCharts'i kogu installimine oma nurgaprojekti

Minge projekti teele nagu eelmistes sammudes, tippige oma CMD -sse kood.

npm i @swimlane/ngx-charts-salvesta

NgxCharti ametlik sait minge sellele saidile ja haarake soovitud diagramm. Eelistasin joondiagrammiga. minge sellele URL -ile ja haarake kood ning lisage see vastavatesse komponentidesse.

Samm: looge teenuseklass ja reaalajas andmebaas

Minge projekti kausta ja avage CMD ning tippige teenuse kehtiv tee ja eelistatud klassi nimi koos käsuga ng create. Enne koodi sisenemist tahaksin anda vähe ettekujutust Firebase'i reaalajas andmebaasist. See pole sarnane ühegi teise relatsioonimudeli andmebaasiga. Me ei näe selles tabelistruktuuris erinevaid andmebaase. Seda nimetatakse NOSQL andmebaasiks, näeme tekstibaasi või dokumendibaasi andmestruktuuri. Seda nimetatakse JSON -iks, nii et kui me soovime sellistesse andmebaasidesse andmeid salvestada, peame need JSON -objektidena edastama. Ülaltoodud pildil näete, et meie andmebaasis on sõlm või serv, mida nimetatakse seadmeteks, ja selle sõlme all on teine sõlm nimega DeviceA ja selle sõlme all näete iga indeksi kohal, nagu niiskus, temperatuur jne. Hum -sõlme all näete perioodiliselt kogutud andmeid.

async getData () {

this.items = ;

tagasta uus lubadus ((lahendamine) => {

see.andmebaas. list (`/devices/$ {this.sessionService.get (" DeviceA ")}/$ {" Hum "}`).snapshotChanges (). subscribe (snapshot => {

snapshot.forEach (element => {

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

this.items.push ({

nimi: hetk (element.payload.val () ['kuupäev'], 'YYYY-M-DD hh: mm: ss'). formaat ('YYYY-MM-DD hh: mm'), value: element.payload.val () ['väärtus']

});

}

});

lahendada (this.items);

});

});

}

see on teenindusklassi kood juurdepääsuks andmetele, mis on salvestatud andmebaasi hum sõlme alla. Peate vaid helistama sellele klassi getData () funktsioonile, kuhu soovite oma diagrammi sisestada.

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

see.multi = [{

nimi: '%', seeria: this.items

}];

}

Siin meie komponendiklassi ngOnInit meetodi sees oleme kutsunud oma teenuse asustatud mitme massiivi, mille massiiv peaksime graafiku väärtused edastama.

Samm: koostage oma projekt

Minge oma projekti kausta ja avage CMD ja tippige ng server, siis teisendatakse kogu Typescripti kood javascripti. ja tippige URL, mida CMD teile küsib, ülaltoodud projekti https:// localhost: 4200/home jaoks ja olete valmis.