LoRa-pohjainen visuaalinen maatalouden seurantajärjestelmä Iot - Fronted -sovelluksen suunnittelu Firebasen ja Angularin avulla: 10 vaihetta

2024 Kirjoittaja: John Day | [email protected]. Viimeksi muokattu: 2024-01-30 08:59

Edellisessä luvussa puhuimme siitä, miten anturit toimivat loRa -moduulin kanssa paloaseman reaaliaikaisen tietokannan täyttämiseksi, ja näimme erittäin korkean tason kaavion, kuinka koko projektimme toimii. Tässä luvussa puhumme siitä, miten voimme täyttää nämä tiedot verkkosovelluksessa.

Vaihe 1: Määritä Angular tietokoneeseen

Angular on yksi suosituimmista javascript (joka on itse asiassa kirjoituskone) -pohjaisista puitteista, joita käytetään enimmäkseen ohjelmistoteollisuudessa, koska käytämme firebasea taustaohjelmana (backend palvelimena). Joten katsotaan kuinka asennetaan kaikki tarvittavat tyhjästä.

Harkitse tätä opetusohjelmaa Windows 10 -ympäristössä ja toivon, että sinulla on perustiedot kulmasta ja palosta.

Asenna node.js ja NPM Windowsiin

Ensinnäkin siirry Node.js: n viralliselle verkkosivustolle node.js ja lataa node.js: n uusin versio, node on ajonaikainen ympäristö, jossa voidaan ajaa kaikki javascript -koodit. NPM tarkoittaa solmupaketinhallintaa, joka auttaa sinua asentamaan kaikki muut tarvittavat ohjelmistot komentorivityökalun kautta, mikä on perusidea solmusta ja NPM: stä, jos haluat mennä syvemmälle, on olemassa paljon sivustoja ja videoita, joista voit saada lisää tietoa (varmista, että tietokoneellesi on asennettu maailmanlaajuisesti node.js.)

tarkista, oletko onnistuneesti asentanut solmun, ennen kuin jatkat eteenpäin.

Asenna Angular

Avaa komentorivityökalu ja suorita komento alla, npm install -g @angular/cli

Varmista nyt, että olet asentanut angular onnistuneesti, voit oppia lisää angularista tästä Angular -opetusohjelmasta.

Vaihe 2: Määritä projektirakenne

Mene sinne, minne haluat luoda projektisi, omalleni olen käyttänyt D: / Angular-Projects tätä sijaintia. Avaa komentorivikehote kyseisessä paikassa. Kirjoita alla oleva komento.

uusi maatalouden seurantajärjestelmä

sitten Angular luo kaikki tarvittavat asiat, jotka haluamme olla käyttöliittymässämme. ennen kuin yhdistimme etu- ja taustajärjestelmän yhteen. opitaan vähän kulmasta ja tulipohjasta.

Kulmikas

Puhutaanpa siitä, miltä tyypillinen verkkoarkkitehtuuri näyttää, siellä on käyttöliittymä tai asiakaspuolen tausta- tai palvelinpuoli, asiakaspuoli tarkoittaa sitä, että kaikki HTML, CSS sisältää, mutta kulmikassan ei tarvitse luoda sperate -verkkosivuja kuten home.html, about.hml, index.html… jne. koko sovellukselle on vain yksi sivu, se on index.html, kun käyttäjä käy läpi muita sivuja tai muita sisältää index.html aikoo renderoida niiden sivujen sisällön kanssa, jotka tarkoittavat tietyn sivun html- ja css -näkymää. joten koko sovelluksemme sisältää vain yhden.html -sivun. Tätä kutsuimme SPA: ksi. Luo siis sovelluksemme. avaa CMD samassa hakemistotyypissä alla.

ng tuottaa komponentin kotiin.

tämä luo kotisivusi sisällön, ja näet home.ts -tiedoston ja home.html -tiedoston sekä home.css -tiedoston home.html -tiedostossa, jossa määrität kotisivusi rakenteen ja etusivun. css, johon aiot lisätä tyylejä etusivulle, ja lopuksi home.ts -tiedosto, johon aiot koodata kirjoitus- tai javascript -koodisi, jotta voimme käyttää taustajärjestelmäämme.

Vaihe 3: Bootstrapin asentaminen 4

Kuten keskustelimme edellisessä vaiheessa, nyt meillä on vaihe projektimme ja nyt meillä on selkeä käsitys siitä, miten kulma toimii. nyt muotoilutarkoituksessa aiomme käyttää bootstrap 4: tä, asentaaksesi bootstrapin projektityypin alla olevaan komentoon projektipolussa.

npm asenna bootstrap@3

nyt sinun ei tarvitse huolehtia siitä, miten voimme rakentaa verkkosivumme, bootstrap tekee asian.

Vaihe 4: Reittien määrittäminen

IOT -projektissa keräämme otsikon, alatunnisteen, lämpötilan, kosteuden, CO2 -prosentin, maaperän kosteuden. joten aiomme luoda 4 verkkosivua, jotka tarkoittavat kulmittain, että aiomme luoda 4 komponenttia kullekin näistä indekseistä.

Tuo kulmireititinmoduuli AppModule -komponenttiin.

määrittele reitit erilliseen tiedostoon.

const reitit: Reitit = [{polku: 'ensimmäinen komponentti', komponentti: Kotikomponentti}, {polku: 'toinen komponentti', komponentti: HumiComponent},];

lisää nämä koodirivit AppMoodulen tuontitunnisteeseen.

@NgModule ({tuonti: [RouterModule.forRoot (reitit)], vienti: [RouterModule]})

Lisäämme bootstrap -navigointiviivakoodin header.html -tiedostoomme ja linkitämme komponentit,

Vaihe 5: Firebase

Firebase on yksi hienoimmista palveluista, joita Google tarjoaa käyttäjilleen. Joten yksi ominaisuuksista, joita olemme käyttäneet tässä projektissa, on firebase -reaaliaikainen tietokanta ja isännöinti. luodaan firebase -tili ja yhdistetään projektimme firebase -reaaliaikaiseen tietokantaan.

vaihe 01: Kirjaudu sisään gamil -tilillesi

vaihe 02: kirjoita hakupalkkiin firebase -konsoli

vaihe 03: nyt olet valmis.

Vaihe 6: Asenna Firebase Angulariin

Firebasen kanssa työskentelemiseksi olemme asentaneet tai sisällyttäneet avustavan kirjaston yhdistämään Firebasen ja Angularin yhteen. Siirry projektipolulle ja avaa CMD ja kirjoita alla oleva koodi.

npm asenna firebase @angular/fire --save

Vaihe 7: Kulmaprojektimme yhdistäminen Firebasen kanssa

Nyt meidän on lisättävä projektimme firebaseen. paina lisää projektikuvake Firebase -tililläsi ja anna haluamasi projektin nimi ja jatka myös muita kahta, kunnes näet Firebase -tilisi sinisen kauniin hallintapaneelin. palveluita, joten voimme käyttää kutakin näistä palveluista. nyt kaikki on valmiina lähtöön. lisää konsoliin sovellus aloittaaksesi ja napsauta kuvaketta. saadaksesi kaikki määritystiedot kulma -sovelluksemme yhdistämiseksi firebase -tiliin. Nämä yksityiskohdat ovat ainutlaatuisia projektillemme. kopioi nyt nämä tiedot ja siirry kulmaprojektiisi ja etsi ympäristö. lisää alla oleva koodi ja liitä nämä tiedot sinne.

viedä const -ympäristö = {

tuotanto: true, firebase: {

määritystietosi täällä …

}

};

ja lisää myös alla koodit app.module.ts

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

Vaihe 8: NgxCharts -kirjaston asentaminen kulmaprojektiisi

Siirry projektin polulle kuten aiemmissa vaiheissa, kirjoita alla oleva koodi CMD: hen.

npm i @swimlane/ngx-charts-tallenna

NgxChart Virallinen sivusto mene tälle sivustolle ja nappaa haluamasi kaavio. Halusin viivakaavion kanssa. Siirry tähän URL -osoitteeseen ja nappaa koodi ja lisää se vastaaviin komponentteihin.

Vaihe 9: Luo palveluluokka ja reaaliaikainen tietokanta

Siirry projektikansioon ja avaa CMD ja kirjoita palvelulle kelvollinen polku ja ensisijainen luokan nimi yhdessä ng -generointikomennon kanssa. Ennen kuin menemme koodiin, haluaisin antaa vähän käsitystä Firebase-reaaliaikaisesta tietokannasta. Se ei ole kuin mikään muu relaatiomallitietokanta. Emme voi nähdä taulukkorakennetta tässä Erilaisia tietokantoja. Tätä kutsutaan NOSQL -tietokantaksi, voimme nähdä tekstikannan tai asiakirjakannan tietorakenteen. Sitä kutsutaan JSONiksi, joten jos halusimme tallentaa tietoja tällaiseen tietokantaan, meidän on välitettävä ne JSON -objektien tapaan. Yllä olevasta kuvasta näet, että tietokannassamme on solmu tai reuna, jota kutsutaan laitteiksi, ja kyseisen solmun alla on toinen solmu nimeltä DeviceA ja kyseisen solmun alla näet kunkin indeksin yläpuolella, kuten kosteus, lämpötila jne.. Hum -solmun alla näet ajoittain kerätyt anturitiedot.

async getData () {

this.items = ;

palauta uusi lupaus ((ratkaise) => {

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

snapshot.forEach (elementti => {

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

this.items.push ({

nimi: hetki (element.payload.val () ['päivämäärä'], 'VVVV-K-PP hh: mm: ss'). muoto ('VVVV-KK-PP hh: mm'), arvo: element.payload.val () ['arvo']

});

}

});

ratkaista (this.items);

});

});

}

tämä on palveluluokan koodi, jolla pääsee tietokannan hum -solmun alle tallennettuihin tietoihin. Sinun tarvitsee vain kutsua tämä luokan getData () -funktio, johon haluat täyttää kaaviosi.

async ngOnInit () {this.items = odota tätä.humService.getData ();

tämä.multi = [{

nimi: '%', sarja: this.items

}];

}

Täällä komponenttiluokan ngOnInit -menetelmässä olemme kutsuneet palveluamme asuttamaan monitaulukon, jonka taulukko meidän pitäisi välittää kaavion arvoille.

Vaihe 10: Kokoa projekti

Siirry projektikansioon ja avaa CMD ja kirjoita ng -palvelin. Sitten kaikki Typescript -koodit muunnetaan javascriptiksi. ja kirjoita URL -osoite, jota CMD pyytää sinua, yllä olevalle projektille https:// localhost: 4200/home ja olet valmis.