LoRa-basiertes visuelles Überwachungssystem für die Landwirtschaft Iot - Entwerfen einer Fronted-Anwendung mit Firebase und Angular - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:15

Im vorherigen Kapitel haben wir darüber gesprochen, wie die Sensoren mit dem loRa-Modul arbeiten, um die Firebase Realtime-Datenbank zu füllen, und wir haben das sehr hohe Diagramm gesehen, wie unser gesamtes Projekt funktioniert. In diesem Kapitel werden wir darüber sprechen, wie wir diese Daten in Webanwendungen füllen können.

Schritt 1: Richten Sie Angular in Ihrem Computer ein

Angular ist eines der beliebtesten auf Javascript (eigentlich Typoskript) basierenden Frameworks, das hauptsächlich in der Softwareindustrie verwendet wird, da wir Firebase als unser Backend (Backend als Server) verwenden, brauchen wir nur ein Frontend, um dieses Backend zu manipulieren. Sehen wir uns also an, wie Sie all dies von Grund auf neu installieren.

Beachten Sie, dass dieses gesamte Tutorial auf der Windows 10-Umgebung basiert und Sie hoffen, dass Sie über grundlegende Kenntnisse über Angular und Firebase verfügen.

Installieren Sie node.js und NPM unter Windows

Gehen Sie zunächst zur offiziellen Node.js-Website node.js und laden Sie die neueste Version von node.js herunter. Node ist eine Laufzeitumgebung zum Ausführen aller Javascript-Codes. NPM steht für Node Package Manager, der Ihnen hilft, alle andere erforderliche Software über das Befehlszeilentool zu installieren about node. (Stellen Sie sicher, dass Sie node.js global auf Ihrem Computer installiert haben).

Bitte überprüfen Sie, ob Sie den Knoten erfolgreich installiert haben, bevor Sie fortfahren.

Angular installieren

Öffnen Sie Ihr Befehlszeilentool und führen Sie den folgenden Befehl aus, npm install -g @angular/cli

Stellen Sie nun sicher, dass Sie Angular erfolgreich installiert haben. Sie können in diesem Tutorial mehr über Angular erfahren.

Schritt 2: Richten Sie Ihre Projektstruktur ein

Gehen Sie dorthin, wo Sie Ihr Projekt erstellen möchten, für meins habe ich D:\Angular-Projects diesen Ort verwendet. Öffnen Sie die Befehlszeilenaufforderung an diesem Ort. Geben Sie den folgenden Befehl ein.

ng neues Landwirtschafts-Monitoring-System

dann erstellt angle alle notwendigen Dinge, die wir in unserem Frontend haben wollen. bevor wir Frontend und Backend miteinander verbunden haben. Lassen Sie uns etwas über Angular und Firebase lernen.

Eckig

Lassen Sie uns darüber sprechen, wie die typische Webarchitektur aussieht, es gibt Frontend- oder Client-Seite, Backend oder Server-Seite, Client-Seite bedeutet, dass dort das gesamte HTML, CSS enthalten ist, aber im Winkel müssen wir keine separaten Webseiten für unsere Inhalte erstellen wie home.html, about.hml, index.html…etc. Es gibt nur eine einzige Seite für die gesamte Anwendung, es ist index.html, wenn der Benutzer durch andere Seiten geht oder andere enthält index.html wird mit dem Inhalt der Seiten rendern, die die HTML- und CSS-Ansicht der bestimmten Seite bedeuten. Daher enthält unsere gesamte Anwendung nur eine einzige.html-Seite. Das haben wir SPA genannt. Lassen Sie uns also unsere Anwendung erstellen. Öffnen Sie das CMD im gleichen Verzeichnistyp unter dem Befehl.

ng Komponente nach Hause generieren.

Dadurch wird der Inhalt Ihrer Homepage generiert, dann sehen Sie eine home.ts-Datei und eine home.html-Datei und eine home.css in der home.html-Datei, in der Sie die Struktur Ihrer Homepage und die Homepage definieren. css, wo Sie Ihre Stile für die Homepage hinzufügen werden, und schließlich die Datei home.ts, in der Sie Ihren Typoskript- oder Javascript-Code codieren werden, um mit unserem Backend zu arbeiten.

Schritt 3: Installieren von Bootstrap 4

Wie wir im vorherigen Schritt besprochen haben, haben wir jetzt unser Projekt und jetzt haben wir eine klare Vorstellung davon, wie der Winkel funktioniert. Jetzt werden wir zu Stylingzwecken Bootstrap 4 verwenden, um Bootstrap in unserem Projekttyp unter dem Befehl im Projektpfad zu installieren.

npm install bootstrap@3

Jetzt müssen Sie sich keine Gedanken mehr darüber machen, wie wir unsere Webseiten strukturieren können, Bootstrap wird es tun.

Schritt 4: Routen definieren

In unserem IOT-Projekt werden wir Header, Footer, Temperatur, Feuchtigkeit, Co2-Prozentsatz und Feuchtigkeit des Bodens sammeln. Also werden wir 4 Webseiten erstellen, was bedeutet, dass wir 4 Komponenten für jeden dieser Indizes erstellen werden.

Importieren Sie das Winkelroutermodul in die AppModule-Komponente.

Definieren Sie die Routen in einer separaten Datei.

const routen: Routes = [{ path: 'first-component', component: HomeComponent}, { Pfad: 'zweite Komponente', Komponente: HumiComponent},];

Fügen Sie diese Codezeilen in das Import-Tag in AppMoodule ein.

@NgModule({ importiert: [RouterModule.forRoot(routes)], exportiert: [RouterModule] })

Fügen wir den Bootstrap-Navigations-Barcode in unsere Datei header.html ein und verknüpfen Sie unsere Komponenten.

Schritt 5: Firebase

Firebase ist einer der coolsten Dienste, die Google seinen Nutzern bietet. Eine der Funktionen, die wir für dieses Projekt verwendet haben, ist die Firebase-Echtzeitdatenbank und das Hosting. Lassen Sie uns ein Firebase-Konto erstellen und unser Projekt mit der Firebase-Echtzeitdatenbank verbinden.

Schritt 01: Melden Sie sich bei Ihrem Gamil-Konto an

Schritt 02: Geben Sie Firebase Console in Ihre Suchleiste ein

Schritt 03: Jetzt sind Sie fertig.

Schritt 6: Firebase in Angular installieren

Um mit Firebase zu arbeiten, haben wir diese helfende Bibliothek installiert oder eingebunden, um Firebase und Angle miteinander zu verbinden. Gehen Sie zu Ihrem Projektpfad und öffnen Sie CMD und geben Sie den folgenden Code ein.

npm install firebase @angular/fire --save

Schritt 7: Verbinden unseres Angular-Projekts mit Firebase

Jetzt müssen wir unser Projekt zu Firebase hinzufügen. Drücken Sie Projektsymbol hinzufügen in Ihrem Firebase-Konto, und geben Sie einen Projektnamen ein, den Sie mögen, und fahren Sie mit den anderen beiden fort, bis Sie das blaue schöne Dashboard Ihres Firebase-Kontos sehen. In der linken Spalte können wir die gesamte Liste der Firebase sehen Dienste, damit wir jeden dieser Dienste nutzen können. jetzt ist alles fahrbereit. Fügen Sie in Ihrer Konsole eine App hinzu, um zu beginnen, und klicken Sie auf das Symbol. um alle Konfigurationsdetails zu erhalten, um unsere Winkelanwendung mit dem Firebase-Konto zu verbinden. Diese Details sind einzigartig für unser Projekt. Kopieren Sie nun diese Details und gehen Sie zu Ihrem Winkelprojekt, suchen Sie den Environment.ts-Code und fügen Sie diese Details dort ein.

export const umgebung = {

Produktion: wahr, Feuerbasis: {

Ihre Konfigurationsdetails hier…

}

};

und fügen Sie auch die folgenden Codes innerhalb von app.module.ts hinzu

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

Schritt 8: Installieren der NgxCharts-Bibliothek in Ihrem Angular-Projekt

Gehen Sie wie in den vorherigen Schritten zum Projektpfad und geben Sie den folgenden Code in Ihr CMD ein.

npm i @swimlane/ngx-charts --save

NgxChart Official Site gehen Sie zu dieser Site und holen Sie sich das gewünschte Diagramm. Ich bevorzuge mit Liniendiagramm. Gehen Sie zu dieser URL, holen Sie sich den Code und fügen Sie ihn den entsprechenden Komponenten hinzu.

Schritt 9: Erstellen Sie eine Serviceklasse und eine Echtzeitdatenbank

Gehen Sie zum Projektordner und öffnen Sie CMD und geben Sie einen gültigen Pfad und bevorzugten Klassennamen für den Dienst zusammen mit dem Befehl nggeneriere ein. Bevor wir auf den Code eingehen, möchte ich eine kleine Vorstellung von der Firebase-Echtzeitdatenbank geben. Sie ist nicht wie jede andere relationale Modelldatenbank. Wir können in dieser Vielfalt von Datenbanken keine Tabellenstruktur sehen. Dies wird als NOSQL-Datenbank bezeichnet. Wir können eine Textbasis- oder Dokumentbasis-Datenstruktur sehen. Das heißt JSON. Wenn wir also Daten in einer solchen Datenbank speichern möchten, müssen wir diese als JSON-Objekte übergeben. Im obigen Bild sehen Sie: In unserer Datenbank gibt es einen Knoten oder eine Kante namens Geräte, und unter diesem Knoten befindet sich ein weiterer Knoten namens DeviceA und unter diesem Knoten können Sie über jedem Index wie Feuchtigkeit, Temperatur usw..unter dem Hum-Knoten können Sie die Sensordaten sehen, die regelmäßig gesammelt wurden.

async getData() {

this.items = ;

neues Versprechen zurückgeben ((auflösen) => {

diese. Datenbank. list(`/devices/${this.sessionService.get("DeviceA")}/${"Hum"}`).snapshotChanges().subscribe(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'), Wert: element.payload.val()['Wert']

});

}

});

auflösen (this.items);

});

});

}

Dies ist der Serviceklassencode für den Zugriff auf die Daten, die unter dem Hum-Knoten in der Datenbank gespeichert sind. Alles, was Sie tun müssen, ist diese Klasse getData()-Funktion dort aufzurufen, wo Sie Ihr Diagramm füllen möchten.

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

this.multi = [{

Name: '%', Serie: this.items

}];

}

Hier in unserer Komponentenklasse ngOnInit-Methode haben wir unseren Dienst aufgerufen, der das Multi-Array gefüllt hat, das das Array, an das wir die Werte für den Graphen übergeben sollen.

Schritt 10: Kompilieren Sie Ihr Projekt

Gehen Sie zu Ihrem Projektordner und öffnen Sie CMD und geben Sie ng server ein. Dann wird der gesamte Typescript-Code in Javascript umgewandelt. und geben Sie die URL ein, die das CMD Sie auffordern wird, für das obige Projekt https://localhost:4200/home und Sie sind fertig.