Système de surveillance visuelle basé sur LoRa pour l'agriculture Iot - Concevoir une application frontale à l'aide de Firebase et d'Angular : 10 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:05

Dans le chapitre précédent, nous avons expliqué comment les capteurs fonctionnent avec le module lora pour remplir la base de données en temps réel de firebase, et nous avons vu le diagramme de très haut niveau sur le fonctionnement de l'ensemble de notre projet. Dans ce chapitre, nous allons parler de la façon dont nous pouvons remplir ces données dans une application Web.

Étape 1: Configurez Angular sur votre ordinateur

Angular est l'un des frameworks javascript les plus populaires (qui est en fait dactylographié) principalement utilisé dans l'industrie du logiciel, car nous utilisons Firebase comme backend (backend en tant que serveur), la seule chose dont nous avons besoin est une interface pour manipuler ce backend. Voyons donc comment installer tout ce qui est nécessaire à partir de zéro.

Considérez que tout ce didacticiel est basé sur l'environnement Windows 10 et en espérant que vous avez des connaissances de base sur angulaire et Firebase.

Installez node.js et NPM sur Windows

Tout d'abord, allez sur le site officiel de Node.js node.js et téléchargez la dernière version de node.js, node est un environnement d'exécution pour exécuter tous les codes javascript. NPM signifie node package manager qui vous aide à installer tous les autres logiciels nécessaires via l'outil de ligne de commande, c'est l'idée de base sur le nœud et NPM si vous voulez aller plus loin, il y a des tonnes de sites Web et de vidéos que vous pouvez acquérir plus de connaissances à propos de node.(Assurez-vous d'avoir installé node.js globalement sur votre ordinateur).

veuillez vérifier si vous avez correctement installé le nœud avant de continuer.

Installez Angular

Ouvrez votre outil de ligne de commande et exécutez la commande ci-dessous, npm install -g @angular/cli

assurez-vous maintenant que vous avez installé angular avec succès, vous pouvez en savoir plus sur angular pour ce site Web officiel de tutoriel angular.

Étape 2: Configurez la structure de votre projet

Allez là où vous voulez créer votre projet, pour le mien, j'ai utilisé D:\Angular-Projects cet emplacement. Ouvrez l'invite de ligne de commande à cet emplacement. Tapez ci-dessous la commande.

ng nouveau système de surveillance agricole

alors angular créera toutes les choses nécessaires que nous voulons avoir dans notre front-end. avant de connecter le frontend et le backend ensemble. apprenons un peu sur angulaire et firebase.

Angulaire

Parlons de l'apparence de l'architecture Web typique, il y a l'interface ou le côté client, le côté client ou le côté serveur, le côté client signifie que c'est là que tout le HTML, CSS contient, mais en angulaire, nous n'avons pas à créer de pages Web séparées pour notre contient comme, home.html, about.hml, index.html…etc. il n'y a qu'une seule page pour l'ensemble de l'application, c'est index.html lorsque l'utilisateur parcourt d'autres pages ou que d'autres contiennent index.html va s'afficher avec le contenu de ces pages, ce qui signifie une vue html et css de la page en question. donc toute notre application ne contient qu'une seule page.html. C'est ce que nous avons appelé SPA. Créons donc notre application. ouvrez le CMD dans le même type de répertoire sous la commande.

ng générer le composant home.

cela générera le contenu de votre page d'accueil, puis vous verrez un fichier home.ts et un fichier home.html et home.css dans le fichier home.html où vous allez définir la structure de votre page d'accueil et dans la maison. css où vous allez ajouter vos styles pour la page d'accueil, et enfin le fichier home.ts où vous allez coder votre code tapuscrit ou javascript pour travailler avec notre backend.

Étape 3: Installation de Bootstrap 4

Comme nous en avons discuté à l'étape précédente, nous avons maintenant une étape de notre projet et nous avons maintenant une idée claire du fonctionnement de l'angulaire. maintenant, à des fins de style, nous allons utiliser bootstrap 4 pour installer bootstrap sur notre type de projet sous la commande dans le chemin du projet.

npm installer bootstrap@3

maintenant, vous n'avez plus à vous soucier de la façon dont nous pouvons structurer nos pages Web, bootstrap fera l'affaire.

Étape 4: Définition des itinéraires

Dans notre projet IOT, nous allons collecter l'en-tête, le pied de page, la température, l'humidité, le pourcentage de Co2, l'humidité du sol. nous allons donc créer 4 pages Web, ce qui signifie qu'en angulaire, nous allons créer 4 composants pour chacun de ces index.

importer le module de routeur angulaire dans le composant AppModule.

définir les routes dans un fichier séparé.

const routes: Routes = [{ chemin: 'premier-composant', composant: HomeComponent}, { chemin: 'second-composant', composant: HumiComponent},];

ajoutez ces lignes de code à l'intérieur de la balise import dans AppMoodule.

@NgModule({ importe: [RouterModule.forRoot(routes)], exporte: [RouterModule] })

Ajoutons le code à barres de navigation bootstrap dans notre fichier header.html et lions nos composants,

Étape 5: Firebase

Firebase est l'un des services les plus cool que google fournisse à ses utilisateurs. Ainsi, l'une des fonctionnalités que nous avons utilisées pour ce projet est la base de données et l'hébergement en temps réel Firebase. créons un compte firebase et connectons notre projet à la base de données en temps réel firebase.

étape 01: Connectez-vous à votre compte gamil

étape 02: tapez console firebase dans votre barre de recherche

étape 03: vous avez maintenant terminé.

Étape 6: Installez Firebase dans Angular

Pour travailler avec firebase, nous avons installé ou inclus cette bibliothèque d'aide pour connecter firebase et angulaire ensemble. accédez au chemin de votre projet, ouvrez CMD et tapez le code ci-dessous.

npm install firebase @angular/fire --save

Étape 7: Connecter notre projet angulaire à Firebase

maintenant nous devons ajouter notre projet dans firebase. appuyez sur l'icône d'ajout de projet sur votre compte firebase, et donnez un nom de projet que vous aimez et continuez les deux autres également jusqu'à ce que vous voyiez le beau tableau de bord bleu de votre compte firebase, vous pouvez voir que la colonne de gauche, nous pouvons voir la liste de toutes les firebase services, afin que nous puissions utiliser chacun de ces services. maintenant tout est prêt à partir. dans votre console, ajoutez une application pour commencer et cliquez sur l'icône. pour obtenir tous les détails de configuration pour connecter notre application angulaire avec le compte firebase. Ces détails sont uniques à notre projet. maintenant, copiez ces détails et accédez à votre projet angulaire, recherchez l'environnement. Ajoutez le code ci-dessous et collez ces détails là-bas.

export const environnement = {

production: vrai, firebase: {

vos détails de configuration ici…

}

};

et ajoutez également les codes ci-dessous à l'intérieur de l'app.module.ts

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

Étape 8: Installation de la bibliothèque NgxCharts dans votre projet angulaire

Accédez au chemin du projet comme nous l'avons fait aux étapes précédentes, tapez le code ci-dessous dans votre CMD.

npm i @swimlane/ngx-charts --save

Site officiel de NgxChart, allez sur ce site et récupérez le graphique de votre choix. J'ai préféré avec un graphique en courbes. accédez à cette URL et récupérez le code et ajoutez-le aux composants correspondants.

Étape 9: créez une classe de service et une base de données en temps réel

Allez dans le dossier du projet et ouvrez CMD et tapez un chemin d'accès valide et un nom de classe préféré pour le service avec la commande ng generate. Avant d'entrer dans le code, je voudrais donner une petite idée de la base de données en temps réel Firebase. Elle ne ressemble à aucune autre base de données de modèles relationnels. Nous ne pouvons pas voir une structure de table dans cette variété de bases de données, c'est ce qu'on appelle une base de données NOSQL, nous pouvons voir une base de texte ou une structure de données de base de document. Qui s'appelle JSON, donc si nous voulions stocker des données à l'intérieur de ce type de base de données, nous devons les transmettre comme des objets JSON. Dans l'image ci-dessus, vous pouvez voir, dans notre base de données, il y a un nœud ou un bord appelé devices, et sous ce nœud il y a un autre nœud appelé DeviceA et sous ce nœud, vous pouvez voir au-dessus de chaque index comme l'humidité, la température, etc. Sous le nœud Hum, vous pouvez voir les données du capteur qui ont été collectées périodiquement.

async getData() {

this.items = ;

renvoie une nouvelle promesse ((résolution) => {

cette.base.de.données. list(`/devices/${this.sessionService.get("DeviceA")}/${"Hum"}`).snapshotChanges().subscribe(snapshot => {

snapshot.forEach(élément => {

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

this.items.push({

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

});

}

});

résoudre(this.items);

});

});

}

il s'agit du code de classe de service pour accéder aux données stockées sous le nœud hum dans la base de données, tout ce que vous avez à faire est d'appeler cette fonction getData() de classe où vous souhaitez remplir votre graphique.

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

this.multi = [{

Nom: '%', série: this.items

}];

}

Ici, à l'intérieur de notre méthode ngOnInit de classe de composants, nous avons appelé notre service qui a rempli le tableau multiple dans lequel nous devons transmettre les valeurs du graphique.

Étape 10: Compilez votre projet

Allez dans votre dossier de projet et ouvrez CMD et tapez ng server, Ensuite, tout le code Typescript va être converti en javascript. et tapez l'URL que le CMD va vous demander, pour le projet ci-dessus https://localhost:4200/home et vous avez terminé.