Sistema de monitorització visual basat en LoRa per a agricultura Iot - Disseny d'una aplicació frontal amb Firebase i Angular: 10 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:10

Al capítol anterior parlem de com funcionen els sensors amb el mòdul loRa per omplir la base de dades en temps real de Firebase, i hem vist el diagrama de nivell molt alt com funciona tot el nostre projecte. En aquest capítol parlarem de com podem emplenar aquestes dades a l'aplicació web.

Pas 1: configureu Angular a l'ordinador

Angular és un dels marcs més populars basats en javascript (que en realitat és mecanoscrit) que s’utilitza principalment a la indústria del programari, ja que utilitzem firebase com a backend (backend com a servidor), l’únic que necessitem és un frontend per manipular aquest backend. Així doncs, vegem com instal·lar tots aquests necessaris des de zero.

tingueu en compte que tot aquest tutorial és bàsic a l'entorn de Windows 10 i espero que tingueu coneixements bàsics sobre angular i firebase.

Instal·leu node.js i NPM a Windows

Primer de tot, aneu al lloc web oficial Node.js node.js i descarregueu la versió més recent de node.js, node és un entorn d'execució per executar tots els codis javascript. NPM significa gestor de paquets de nodes que us ajuda a instal·lar tots els altres programes necessaris a través de l'eina de línia d'ordres, que és la idea bàsica sobre el node i NPM si voleu aprofundir, hi ha un munt de llocs web i vídeos per obtenir més coneixement. sobre node. (Assegureu-vos que heu instal·lat node.js de manera global a l'ordinador).

comproveu si heu instal·lat correctament el node abans de continuar.

Instal·leu Angular

Obriu l'eina de línia d'ordres i executeu sota l'ordre, npm install -g @ angular / cli

ara assegureu-vos que heu instal·lat angular correctament, podeu obtenir més informació sobre angular per a aquest tutorial lloc web oficial angular.

Pas 2: configureu l'estructura del projecte

Aneu a on voleu crear el vostre projecte, per al meu he utilitzat D: / Angular-Projects aquesta ubicació. Obriu l'indicador de línia d'ordres en aquesta ubicació. Escriviu l'ordre següent.

Nou sistema de control de l'agricultura

llavors angular crearà totes les coses necessàries que vulguem tenir a la nostra interfície. abans de connectar frontend i backend junts. aprenem una mica sobre angular i firebase.

Angular

Parlem de l’aspecte de l’arquitectura web típica: hi ha frontend o backend del client o servidor, el client significa que és on conté tot l’HTML, CSS, però en angular no hem de crear pàgines web esperades per als nostres contenidors. com, home.html, about.hml, index.html … etc. només hi ha una pàgina única per a tota l'aplicació, és index.html quan l'usuari passa per altres pàgines o conté index.html que renderitzarà amb el contingut d'aquestes pàgines que signifiquen visualització html i css de la pàgina determinada. de manera que tota la nostra aplicació només conté una sola pàgina.html. Això és el que anomenem SPA. Així que anem a crear la nostra aplicació. obriu el CMD al mateix tipus de directori que hi ha a sota de l'ordre.

generar components inicials.

això generarà el contingut de la vostra pàgina d'inici i, a continuació, veureu un fitxer home.ts i un fitxer home.html i home.css al fitxer home.html, on definireu com s'estructura la vostra pàgina d'inici i a casa. css on voleu afegir els vostres estils per a la pàgina d'inici i, finalment, el fitxer home.ts on codifiqueu el codi mecanoscrit o javascript per treballar amb el nostre backend.

Pas 3: Instal·lació de Bootstrap 4

Com hem comentat al pas anterior, ara tenim un pas al nostre projecte i ara tenim una idea clara de com funciona l’angular. ara per a la finalitat d'estil, utilitzarem bootstrap 4, per instal·lar bootstrap al nostre tipus de projecte a sota de l'ordre al camí del projecte.

npm instal·lar bootstrap @ 3

ara no us haureu de preocupar de com podem estructurar les nostres pàgines web, bootstrap ho farà.

Pas 4: definició de rutes

En el projecte IOT, recollirem capçalera, peu de pàgina, temperatura, humitat, percentatge de CO2, humitat del sòl. de manera que crearem 4 pàgines web que significa que en angular crearem 4 components per a cadascun d’aquests índexs.

importar mòdul de router angular al component AppModule.

definiu les rutes en un fitxer separat.

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

afegiu aquestes línies de codi dins de l'etiqueta d'importació a AppMoodule.

@NgModule ({importacions: [RouterModule.forRoot (rutes)], exportacions: [RouterModule]})

Afegim codi de barres de navegació bootstrap dins del nostre fitxer header.html i enllacem els nostres components,

Pas 5: Firebase

Firebase és un dels serveis més interessants que Google proporciona als seus usuaris. Per tant, una de les funcions que hem utilitzat per a aquest projecte és la base de dades i allotjament en temps real de Firebase. creem un compte de firebase i connectem el nostre projecte a la base de dades en temps real de firebase.

pas 01: Inicieu la sessió al vostre compte de gamil

pas 02: escriviu consola firebase a la barra de cerca

pas 03: ara heu acabat.

Pas 6: instal·leu Firebase a Angular

Per treballar amb firebase, hem d'instal·lar o incloure aquesta biblioteca que ajuda a connectar Firebase i angular junts. aneu a la ruta del projecte i obriu CMD i escriviu a sota del codi.

npm instal·leu firebase @ angular / fire --save

Pas 7: connectar el nostre projecte angular amb Firebase

ara hem d'afegir el nostre projecte a Firebase. premeu la icona Afegeix un projecte al vostre compte de Firebase i doneu el nom del projecte que vulgueu i continueu amb altres dos fins que vegeu el bonic tauler blau del vostre compte de Firebase. Podeu veure que a la columna de l'esquerra podem veure la llista completa de Firebase serveis, de manera que podem utilitzar cadascun d’aquests serveis. ara ja està tot a punt. a la consola, afegiu una aplicació per començar i feu clic a la icona. per obtenir tots els detalls de configuració per connectar la nostra aplicació angular amb el compte de firebase. Aquests detalls són exclusius del nostre projecte. ara copieu aquests detalls i aneu al vostre projecte angular. Cerqueu el medi ambient. Afegiu el codi següent i enganxeu-hi els detalls.

export const entorn = {

producció: true, firebase: {

la vostra configuració aquí …

}

};

i també afegiu codis a continuació dins de l’app.module.ts

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

Pas 8: Instal·lació de la biblioteca NgxCharts al vostre projecte angular

Aneu al camí del projecte com hem fet en els passos anteriors, escriviu el codi següent al vostre CMD.

npm i @ swimlane / ngx-charts --save

El lloc oficial de NgxChart aneu a aquest lloc i agafeu el gràfic que vulgueu. He preferit amb el gràfic de línies. aneu a aquesta url i agafeu el codi i afegiu-lo als components corresponents.

Pas 9: creeu una classe de servei i una base de dades en temps real

Aneu a la carpeta del projecte i obriu el CMD i escriviu un camí vàlid i un nom de classe preferit per al servei juntament amb l'ordre ng generate. Abans d’entrar al codi, m’agradaria donar poca idea de la base de dades en temps real de Firebase. No és com cap altra base de dades de models relacionals. No podem veure una estructura de taula en aquesta varietat de bases de dades, això s’anomena base de dades NOSQL; podem veure una base de text o una estructura de dades de base de documents. El que s’anomena JSON, de manera que si volíem emmagatzemar dades dins d’aquest tipus de base de dades hauríem de passar-les com objectes JSON. A la imatge superior podeu veure: A la nostra base de dades hi ha un node o vora anomenat dispositius, i sota aquest node hi ha un altre node anomenat DeviceA i sota aquest node, podeu veure a sobre de cada índex com humitat, temperatura … etc.. sota el node Hum podeu veure les dades del senor que es recopilaven periòdicament.

getData asíncron () {

this.items = ;

torna Promesa nova ((resolve) => {

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

snapshot.forEach (element => {

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

this.items.push ({

nom: moment (element.payload.val () ['data'], 'AAAA-M-DD hh: mm: ss'). format ('AAAA-MM-DD hh: mm'), valor: element.payload.val () ['valor']

});

}

});

resoldre (aquest article);

});

});

}

aquest és el codi de la classe de servei per accedir a les dades que s’emmagatzemen sota el node d’humor de la base de dades, tot el que heu de fer és trucar a aquesta funció getData () de la classe on voleu omplir el gràfic.

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

this.multi = [{

nom: '%', sèrie: this.items

}];

}

Aquí dins del nostre mètode ngOnInit de classe de components hem trucat al nostre servei per omplir la matriu múltiple a la matriu que hauríem de passar els valors del gràfic.

Pas 10: Compileu el vostre projecte

Aneu a la carpeta del projecte i obriu CMD i escriviu ng server. Tot el codi Typescript es convertirà en javascript. i escriviu l'URL que us demanarà el CMD, per al projecte https:// localhost: 4200 / home anterior i heu acabat.