LoRa-baserat visuellt övervakningssystem för jordbruk Iot - Designa en frontad applikation med Firebase & Angular: 10 steg

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:36

I det föregående kapitlet pratar vi om hur sensorerna arbetar med loRa -modulen för att fylla i eldatabasen Realtime -databas, och vi såg diagrammet på mycket hög nivå hur hela vårt projekt fungerar. I det här kapitlet kommer vi att prata om hur vi kan fylla i data i webbapplikationer.

Steg 1: Installera Angular i din dator

Angular är en av de mest populära javascript (som faktiskt är typskript) baserade ramar som oftast används i mjukvaruindustrin, eftersom vi använder firebase som vår backend (backend som server) det enda vi behöver är en frontend för att manipulera denna backend. Så låt oss se hur du installerar allt som behövs från grunden.

Tänk på att hela denna handledning är baserad på Windows 10 -miljö och hoppas att du har grundläggande kunskaper om vinkel och eldbas.

Installera node.js och NPM på Windows

Först och främst gå till Node.js officiella webbplats node.js och ladda ner den senaste versionen av node.js, node är en runtime -miljö för att köra alla javascript -koder. NPM står för nodpakethanteraren som hjälper dig att installera all annan nödvändig programvara via kommandoradsverktyget, det är grundtanken om noden och NPM om du vill gå djupare finns det massor av webbplatser och videor som du kan få mer kunskap om om nod. (Se till att du har installerat node.js globalt på din dator).

Kontrollera om du har installerat noden innan du går vidare.

Installera Angular

Öppna ditt kommandoradsverktyg och kör under kommandot, npm installera -g @angular/cli

Se nu till att du har installerat Angular framgångsrikt, du kan lära dig mer om Angular för denna officiella webbplats för Angular.

Steg 2: Konfigurera din projektstruktur

Gå till där du vill skapa ditt projekt, för mitt har jag använt D: / Angular-Projects den här platsen. Öppna kommandoradsraden på den platsen. Skriv kommandot nedan.

ng nytt jordbruksövervakningssystem

då kommer vinkel att skapa alla nödvändiga saker som vi vill ha i vår front-end. innan vi kopplade frontend och backend ihop. låt oss lära oss lite om vinkel och eldbas.

Vinkel

Låt oss prata om hur den typiska webbarkitekturen ser ut, det finns frontend eller klientsida backend eller serversida, klientsidan betyder att det är där all HTML, CSS innehåller, men i vinkel behöver vi inte skapa sperata webbsidor för våra innehåll gillar, home.html, about.hml, index.html … etc. det finns bara en enda sida för hela applikationen, det är index.html när användaren går igenom andra sidor eller annat innehåller index.html kommer att återge med innehållet på de sidor som betyder html- och css -visning av viss sida. så hela vår applikation innehåller bara en enda.html -sida. Detta är vad vi kallade SPA. Så låt oss skapa vår applikation. öppna CMD i samma katalogtyp nedan kommando.

ng generera komponent hem.

detta genererar innehållet på din hemsida, då kommer du att se en home.ts -fil och home.html -fil och home.css i home.html -filen där du ska definiera hur din hemsides struktur och i hemmet. css där du ska lägga till dina stilar för hemsidan, och slutligen home.ts -fil där du ska koda din typskript eller javascript -kod för att fungera med vår backend.

Steg 3: Installera Bootstrap 4

Som vi diskuterade i föregående steg nu har vi tagit vårt projekt och nu har vi en klar uppfattning om hur vinkeln fungerar. nu för stylingändamålet kommer vi att använda bootstrap 4, för att installera bootstrap till vår projekttyp under kommandot i projektvägen.

npm installera bootstrap@3

nu behöver du inte oroa dig för hur vi kan strukturera våra webbsidor, bootstrap kommer att göra saken.

Steg 4: Definiera rutter

I IOT -projektet kommer vi att samla sidhuvud, sidfot, temperatur, fuktighet, Co2 -procent, jordens fukt. så vi ska skapa 4 webbsidor som betyder i vinkel att vi kommer att skapa 4 komponenter för vart och ett av dessa index.

importera vinkelrouter -modul i AppModule -komponenten.

definiera rutterna i en separat fil.

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

lägg till dessa kodrader i importtaggen i AppMoodule.

@NgModule ({import: [RouterModule.forRoot (routes)], export: [RouterModule]})

Låt oss lägga till bootstrap -navigationsstreckkod i vår header.html -fil och länka våra komponenter,

Steg 5: Firebase

Firebase är en av de coolaste tjänsterna som Google tillhandahåller sina användare. Så en av de funktioner som vi har använt för det här projektet är databas och webbhotell i realtid. låt oss skapa ett firebase -konto och koppla vårt projekt till eldatabasen i realtid.

steg 01: Logga in på ditt gamil -konto

Steg 02: Skriv in Firebase -konsolen i sökfältet

steg 03: nu är du klar.

Steg 6: Installera Firebase i Angular

För att arbeta med firebase har vi installerat eller inkluderat det hjälpande biblioteket för att ansluta firebase och vinkel ihop. gå till din projektväg och öppna CMD och skriv nedan kod.

npm installera firebase @angular/fire --save

Steg 7: Anslut vårt vinkelprojekt med Firebase

nu måste vi lägga till vårt projekt i firebase. tryck på lägg till projektikon på ditt firebase -konto, och ge ett projektnamn du gillar och fortsätt andra två också tills du ser den där vackra vackra instrumentpanelen för ditt firebase -konto, du kan se att kolumnen till vänster kan vi se hela listan över firebase tjänster, så att vi kan använda var och en av dessa tjänster. nu är allt klart. lägg till en app i din konsol för att komma igång och klicka på ikonen. för att få alla konfigurationsdetaljer för att ansluta vår vinkelapplikation med firebase -konto. Dessa detaljer är unika för vårt projekt. kopiera nu dessa detaljer och gå till ditt vinklade projekt, hitta miljö.ts lägg till koden nedan och klistra in dessa detaljer där.

export const miljö = {

produktion: true, firebase: {

dina konfigurationsdetaljer här …

}

};

och lägg även till koder nedanför i app.module.ts

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

Steg 8: Installera NgxCharts -biblioteket i ditt vinkelprojekt

Gå till projektvägen som vi gjorde i föregående steg, skriv nedan kod i din CMD.

npm i @swimlane/ngx-diagram-spara

NgxChart Officiell webbplats gå till den här webbplatsen och ta det diagram du vill ha. Jag föredrog med linjediagram. gå till den här webbadressen och ta tag i koden och lägg till den i motsvarande komponenter.

Steg 9: Skapa en serviceklass och realtidsdatabas

Gå till projektmappen och öppna CMD och skriv in en giltig sökväg och önskat klassnamn för tjänsten tillsammans med kommandot ng generera. Innan vi går in på koden skulle jag vilja ge en liten uppfattning om eldatabas i realtid databas. Det är inte som någon annan relationsmodelldatabas. Vi kan inte se en tabellstruktur i denna mängd databaser. Detta kallas NOSQL -databas, vi kan se en textbas eller en databasdatastruktur. Som kallas JSON, så om vi ville lagra data inuti den typen av databas måste vi skicka dem som JSON -objekt. På bilden ovan kan du se, I vår databas finns en nod eller kant som kallas enheter, och under den noden finns en annan nod som heter DeviceA och under den noden kan du se ovanför varje index som fuktighet, temperatur..etc.. under Hum -noden kan du se senordata som samlades in regelbundet.

async getData () {

this.items = ;

returnera nytt löfte ((lösa) => {

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

snapshot.forEach (element => {

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

this.items.push ({

name: moment (element.payload.val () ['date'], 'YYYY-M-DD hh: mm: ss'). format ('YYYY-MM-DD hh: mm'), value: element.payload.val () ['värde']

});

}

});

lösa (this.items);

});

});

}

detta är serviceklasskoden för åtkomst till data som lagras under humnoden i databasen, allt du behöver göra är att ringa denna klass getData () -funktion där du vill fylla ditt diagram.

async ngOnInit () {this.items = inväntar this.humService.getData ();

detta.multi = [{

namn: '%', serie: this.items

}];

}

Här i vår komponentklass ngOnInit -metod har vi kallat vår tjänst för att fylla i multi -arrayen som arrayen som vi ska skicka värdena för grafen.

Steg 10: Sammanställ ditt projekt

Gå till din projektmapp och öppna CMD och skriv ng -server. Då kommer all Typskript -kod att konverteras till javascript. och skriv webbadressen som CMD kommer att uppmana dig, för ovanstående projekt https:// localhost: 4200/home och du är klar.