LoRa-baseret visuelt overvågningssystem til landbrug Iot - Design af en front -applikation ved hjælp af Firebase & Angular: 10 trin

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:25

I det foregående kapitel taler vi om, hvordan sensorerne arbejder med loRa -modul for at udfylde Firebase Realtime -databasen, og vi så diagrammet på meget højt niveau, hvordan hele vores projekt fungerer. I dette kapitel vil vi tale om, hvordan vi kan udfylde disse data i webapplikation.

Trin 1: Opsætning af vinkel i din computer

Angular er en af de mest populære javascript (som faktisk er typeskript) -baserede rammer, der for det meste bruges i softwareindustrien, da vi bruger firebase som vores backend (backend som server), det eneste vi har brug for er en frontend til at manipulere denne backend. Så lad os se, hvordan du installerer alle de nødvendige dette fra bunden.

overvej at hele denne vejledning er baseret på Windows 10 -miljø og håber, at du har grundlæggende viden om vinkel og firebase.

Installer node.js og NPM på Windows

Først og fremmest skal du gå til Node.js officielle hjemmeside node.js og downloade den nyeste version af node.js, node er et runtime -miljø til at køre alle javascript -koder. NPM står for nodepakkehåndtering, som hjælper dig med at installere al den anden nødvendige software gennem kommandolinjeværktøjet, det er den grundlæggende idé om noden og NPM, hvis du vil gå dybere, er der masser af websteder og videoer, som du kan få mere viden om om node. (Sørg for, at du har installeret node.js globalt på din computer).

Kontroller venligst, om du har installeret node med succes, før du går videre.

Installer Angular

Åbn dit kommandolinjeværktøj, og kør under kommandoen, npm installere -g @angular/cli

Sørg nu for, at du har installeret vinklet med succes, du kan lære mere om kantet til denne tutorial angular officielle hjemmeside.

Trin 2: Konfigurer din projektstruktur

Gå til det sted, hvor du vil oprette dit projekt, for mit har jeg brugt D: / Angular-Projects denne placering. Åbn kommandolinjeprompt på den placering. Skriv kommandoen nedenfor.

ng nyt landbrug-overvågningssystem

så vil kantet skabe alle de nødvendige ting, som vi vil have i vores front-end. før vi forbandt frontend og backend sammen. lad os lære lidt om vinkel og firebase.

Vinklet

Lad os tale om, hvordan den typiske webarkitektur ser ud, der er frontend eller klientside -backend eller serverside, klientsiden betyder, at det er her, alt HTML, CSS indeholder, men i vinkel behøver vi ikke at oprette sperate websider til vores indhold som, home.html, about.hml, index.html … osv. der er kun en enkelt side til hele applikationen, det er index.html, når brugeren går igennem andre sider, eller andre indeholder index.html vil gengive med indholdet af de sider, der betyder html og css -visning af den bestemte side. så hele vores applikation indeholder kun en enkelt.html -side. Det er det, vi kaldte SPA. Så lad os oprette vores applikation. Åbn CMD i den samme bibliotekstype under kommandoen.

ng generere komponent hjem.

dette vil generere indeholdelsen af din startside, så vil du se en home.ts -fil og home.html -fil og home.css i home.html -filen, hvor du vil definere, hvordan din hjemmeside struktur og i hjemmet. css, hvor du vil tilføje dine stilarter til startsiden, og endelig home.ts -fil, hvor du vil kode dit typeskript eller javascript -kode for at arbejde med vores backend.

Trin 3: Installation af Bootstrap 4

Som vi diskuterede i det foregående trin nu, har vi trin vores projekt, og nu har vi en klar idé om, hvordan vinklen fungerer. nu til stylingformålet skal vi bruge bootstrap 4, til at installere bootstrap til vores projekttype nedenfor kommando i projektsti.

npm installer bootstrap@3

nu behøver du ikke bekymre dig om, hvordan vi kan strukturere vores websider, bootstrap vil gøre det.

Trin 4: Definere ruter

I IOT -projektet skal vi indsamle header, footer, temperatur, fugtighed, Co2 procentdel, jordens fugtighed. så vi skal oprette 4 websider, der betyder, at vi i vinklet vil oprette 4 komponenter til hvert af disse indekser.

importer vinkelrouter -modul i AppModule -komponenten.

definere ruter i separat fil.

const ruter: Ruter = [{sti: 'første-komponent', komponent: HomeComponent}, {sti: 'anden-komponent', komponent: HumiComponent},];

tilføj disse kodelinjer inde i importtagget i AppMoodule.

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

Lad os tilføje bootstrap -navigationsstregkode inde i vores header.html -fil og linke vores komponenter,

Trin 5: Firebase

Firebase er en af de sejeste tjenester, som Google leverer til deres brugere. Så en af de funktioner, vi har brugt til dette projekt, er firebase -database i realtid og hosting. lad os oprette en firebase -konto og forbinde vores projekt med firebase -database i realtid.

trin 01: Log ind på din gamil -konto

trin 02: skriv firebase -konsol i din søgelinje

trin 03: nu er du færdig.

Trin 6: Installer Firebase i Angular

For at arbejde med firebase har vi installeret eller inkluderet det hjælpende bibliotek til at forbinde firebase og kantet sammen. gå til din projektsti og åbn CMD og skriv nedenstående kode.

npm installer firebase @angular/fire --save

Trin 7: Tilslutning af vores vinkelprojekt til Firebase

nu skal vi tilføje vores projekt til firebase. tryk på tilføj projektikon på din firebase -konto, og giv et projektnavn, du kan lide, og fortsæt andre to også, indtil du ser det blå smukke instrumentbræt på din firebase -konto, kan du se, at kolonnen til venstre kan vi se hele listen over firebase tjenester, så vi kan bruge hver af disse tjenester. nu er alt klar til at gå. tilføj en app i din konsol for at komme i gang, og klik på ikonet. for at få alle konfigurationsdetaljerne til at forbinde vores kantede applikation med firebase -konto. Disse detaljer er unikke for vores projekt. kopier nu disse detaljer og gå til dit kantede projekt, find miljøet.ts tilføj nedenstående kode og indsæt disse oplysninger der.

eksport const miljø = {

produktion: true, firebase: {

dine konfigurationsdetaljer her …

}

};

og tilføj også nedenstående koder inde i app.module.ts

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

Trin 8: Installation af NgxCharts -bibliotek i dit kantede projekt

Gå til projektsti som vi gjorde i tidligere trin, skriv nedenstående kode i din CMD.

npm i @swimlane/ngx-diagrammer-gem

NgxChart Officielt websted gå til dette websted og tag det diagram, du ønsker. Jeg foretrak med linjediagram. gå til denne url og tag koden og tilføj den til de tilsvarende komponenter.

Trin 9: Opret en serviceklasse og realtidsdatabase

Gå til projektmappen, og åbn CMD, og indtast en gyldig sti og foretrukket klassenavn for tjenesten sammen med kommandoen ng generere. Inden vi går ind i koden, vil jeg gerne give en lille ide om firebase-realtidsdatabase. Det er ikke som enhver anden relationel modeldatabase. Vi kan ikke se en tabelstruktur i denne Databasevarighed. Dette kaldes NOSQL -database, vi kan se en tekstbase eller dokumentbasedatastruktur. Hvilket kaldes JSON, så hvis vi ville gemme data inde i den slags database, skal vi videregive dem som JSON Objects. På billedet ovenfor kan du se, I vores database er der en knude eller kant kaldet enheder, og under denne knude er der en anden knude kaldet DeviceA og under denne knude kan du se over hver indeks som fugtighed, temperatur..etc.. under Hum -noden kan du se senordata, der blev indsamlet med jævne mellemrum.

async getData () {

this.items = ;

returner nye løfter ((løse) => {

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

snapshot.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'), værdi: element.payload.val () ['værdi']

});

}

});

løse (dette. varer);

});

});

}

dette er serviceklassekoden for at få adgang til de data, der er gemt under brummeknuden i databasen, alt du skal gøre er at kalde denne klasse getData () -funktion, hvor du vil udfylde dit diagram.

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

dette.multi = [{

navn: '%', serie: dette. varer

}];

}

Her inde i vores komponentklasse ngOnInit -metode har vi kaldt vores service for at udfylde multi -arrayet, som arrayet, som vi skulle videregive værdierne for grafen.

Trin 10: Kompilér dit projekt

Gå til din projektmappe, og åbn CMD, og skriv ng -server. Så vil al Typescript -koden konvertere til javascript. og skriv den url, som CMD vil bede dig om, for ovenstående projekt https:// localhost: 4200/home, og du er færdig.