LoRa-basert visuelt overvåkingssystem for landbruk Iot - Designe en applikasjon med front ved hjelp av Firebase & Angular: 10 trinn

2024 Forfatter: John Day | [email protected]. Sist endret: 2024-01-30 11:20

I forrige kapittel snakker vi om hvordan sensorene jobber med loRa -modulen for å fylle ut sanntidsdatabasen for firebase, og vi så diagrammet på veldig høyt nivå hvordan hele prosjektet vårt fungerer. I dette kapitlet vil vi snakke om hvordan vi kan fylle ut disse dataene i webapplikasjoner.

Trinn 1: Sett opp vinkel i datamaskinen

Angular er en av de mest populære javascript (som faktisk er typeskript) -baserte rammer som hovedsakelig brukes i programvareindustrien, ettersom vi bruker firebase som backend (backend som server), det eneste vi trenger er en frontend for å manipulere denne backend. Så la oss se hvordan du installerer alt som er nødvendig fra grunnen av.

Tenk på at hele denne opplæringen er basert på Windows 10 -miljø og håper du har grunnleggende kunnskap om vinkel og firebase.

Installer node.js og NPM på Windows

Først av alt, gå til Node.js offisielle nettsted node.js og last ned siste versjon av node.js, node er et kjøretidsmiljø for å kjøre alle javascript -kodene. NPM står for node package manager som hjelper deg med å installere all annen nødvendig programvare gjennom kommandolinjeverktøyet, det er den grunnleggende ideen om noden og NPM hvis du vil gå dypere er det tonnevis av nettsteder og videoer som du kan få mer kunnskap om node. (Sørg for at du har installert node.js globalt på datamaskinen).

vennligst sjekk om du har installert node før du går videre.

Installer Angular

Åpne kommandolinjeverktøyet og kjør under kommandoen, npm installere -g @angular/cli

Sørg nå for at du har installert angular vellykket. Du kan lære mer om angular for denne offisielle nettsiden angular.

Trinn 2: Sett opp prosjektstrukturen

Gå til der du vil lage prosjektet, for mitt har jeg brukt D: / Angular-Projects denne plasseringen. Åpne ledetekstlinjen på dette stedet. Skriv under kommandoen.

ng nytt landbruk-overvåkingssystem

da vil kantet skape alle de nødvendige tingene vi ønsker å ha i front-end. før vi koblet frontend og backend sammen. la oss lære litt om vinkel og firebase.

Vinklet

La oss snakke om hvordan den typiske webarkitekturen ser ut, det er frontend eller klientsiden backend eller serversiden, klientsiden betyr at det er her alt HTML, CSS inneholder, men i vinkel trenger vi ikke å lage sperate nettsider for våre inneholder som, home.html, about.hml, index.html … etc. det er bare en enkelt side for hele applikasjonen, det er index.html når brukeren går gjennom andre sider eller andre inneholder index.html kommer til å gjengi med innholdet av de sidene som betyr html og css -visning av den bestemte siden. så hele applikasjonen vår inneholder bare en enkelt.html -side. Dette er det vi kalte SPA. Så la oss lage vår applikasjon. åpne CMD i samme katalogtype under kommandoen.

ng generere komponent hjem.

dette vil generere innholdet på hjemmesiden din, så vil du se en home.ts -fil og home.html -fil og home.css i home.html -filen der du skal definere hvordan hjemmesiden din strukturerer og i hjemmet. css hvor du skal legge til stilene dine for hjemmesiden, og til slutt home.ts -filen der du skal kode din typeskript eller javascript -kode for å jobbe med backend.

Trinn 3: Installere Bootstrap 4

Som vi diskuterte i det forrige trinnet nå, har vi gått vårt prosjekt, og nå har vi en klar idé om hvordan vinkelen fungerer. nå for stylingformålet skal vi bruke bootstrap 4, for å installere bootstrap til vår prosjekttype under kommandoen i prosjektbanen.

npm installer bootstrap@3

nå trenger du ikke bekymre deg for hvordan vi kan strukturere våre nettsider, bootstrap vil gjøre tingen.

Trinn 4: Definere ruter

I IOT -prosjektet skal vi samle topptekst, bunntekst, temperatur, fuktighet, Co2 -prosent, fuktighet i jorda. så vi skal lage 4 nettsider som betyr at vi i vinkel vil lage 4 komponenter for hver av disse indeksene.

importer vinkelrutemodulen i AppModule -komponenten.

definere rutene i en egen fil.

const ruter: Ruter = [{path: 'first-component', component: HomeComponent}, {path: 'second-component', component: HumiComponent},];

legg til disse kodelinjene i import -taggen i AppMoodule.

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

La oss legge til bootstrap -navigasjon strekkode inne i header.html -filen og koble våre komponenter,

Trinn 5: Firebase

Firebase er en av de kuleste tjenestene Google tilbyr til sine brukere. Så en av funksjonene vi har brukt til dette prosjektet er firebase sanntidsdatabase og hosting. la oss opprette en firebase -konto og koble prosjektet vårt til firebase sanntidsdatabase.

trinn 01: Logg inn på gamil -kontoen din

Trinn 02: Skriv Firebase -konsoll i søkefeltet

trinn 03: nå er du ferdig.

Trinn 6: Installer Firebase i Angular

For å jobbe med firebase har vi installert eller inkludert det hjelpende biblioteket for å koble firebase og kantete sammen. gå til prosjektbanen din og åpne CMD og skriv inn koden nedenfor.

npm installer firebase @angular/fire --save

Trinn 7: Koble vårt vinkelprosjekt til Firebase

nå må vi legge prosjektet vårt til firebase. Trykk på legg til prosjektikon på firebase -kontoen din, og gi et prosjektnavn du liker, og fortsett de to andre også til du ser det blå, flotte dashbordet for din firebase -konto. Du kan se at kolonnen til venstre kan vi se hele listen over firebase tjenester, slik at vi kan bruke hver av disse tjenestene. nå er alt klart. legg til en app i konsollen for å komme i gang, og klikk på ikonet. for å få alle konfigurasjonsdetaljene for å koble vår kantede applikasjon til en Firebase -konto. Disse detaljene er unike for prosjektet vårt. kopier nå disse detaljene og gå til ditt vinkelprosjekt, finn miljøet.ts legg til koden nedenfor og lim inn detaljene der.

eksport const miljø = {

produksjon: true, firebase: {

konfigurasjonsdetaljene dine her …

}

};

og legg også til koder nedenfor inne i app.module.ts

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

Trinn 8: Installere NgxCharts -biblioteket i ditt vinkelprosjekt

Gå til prosjektbanen som vi gjorde i tidligere trinn, skriv inn koden nedenfor i CMD.

npm i @swimlane/ngx-diagrammer-lagre

NgxChart Official site gå til dette nettstedet og ta diagrammet du vil ha. Jeg foretrakk med linjediagram. gå til denne nettadressen og ta tak i koden og legg den til i de tilsvarende komponentene.

Trinn 9: Lag en serviceklasse og sanntidsdatabase

Gå til prosjektmappen og åpne CMD og skriv inn en gyldig bane og foretrukket klassenavn for tjenesten sammen med ng generere kommandoen. Før vi går inn på koden, vil jeg gi en liten ide om sanntids database for firebase. Det er ikke som noen annen relasjonsmodelldatabase. Vi kan ikke se en tabellstruktur i denne databasen. Dette kalles NOSQL -database, vi kan se en tekstbase eller dokumentbase datastruktur. Som kalles JSON, så hvis vi ønsket å lagre data inne i den typen database, må vi sende dem som JSON Objects. På bildet ovenfor kan du se, I vår database er det en node eller kant som kalles enheter, og under den noden er det en annen node som heter DeviceA og under den noden kan du se over hver indeks som fuktighet, temperatur..etc.. under Hum -noden kan du se senordataene som ble samlet inn med jevne mellomrom.

async getData () {

this.items = ;

returner nytt løfte ((løse) => {

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

øyeblikksbilde.forEach (element => {

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

this.items.push ({

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

});

}

});

løse (this.items);

});

});

}

dette er tjenesteklassekoden for å få tilgang til dataene som er lagret under brumknuten i databasen, alt du trenger å gjøre er å kalle denne klassen getData () -funksjonen der du vil fylle ut diagrammet.

async ngOnInit () {this.items = venter på this.humService.getData ();

dette.multi = [{

Navn: '%', series: this.items

}];

}

Her inne i komponentklassen ngOnInit -metoden har vi kalt tjenesten vår befolket multi -matrisen som matrisen som vi skal passere verdiene for grafen.

Trinn 10: Kompiler prosjektet ditt

Gå til prosjektmappen din og åpne CMD og skriv ng server. Deretter skal alle Typescript -koden konverteres til javascript. og skriv inn url som CMD kommer til å be deg om, for ovenstående prosjekt https:// localhost: 4200/home, og du er ferdig.