Sistema di monitoraggio visivo basato su LoRa per l'agricoltura Iot - Progettare un'applicazione frontale utilizzando Firebase e Angular: 10 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 09:59

Nel capitolo precedente abbiamo parlato di come funzionano i sensori con il modulo loRa per popolare il database Firebase Realtime, e abbiamo visto il diagramma ad altissimo livello di come funziona l'intero nostro progetto. In questo capitolo parleremo di come possiamo popolare quei dati nell'applicazione web.

Passaggio 1: imposta Angular sul tuo computer

Angular è uno dei framework basati su javascript (che in realtà è dattiloscritto) più popolari utilizzati principalmente nell'industria del software, poiché utilizziamo firebase come backend (backend come server) l'unica cosa di cui abbiamo bisogno è un frontend per manipolare questo backend. Quindi vediamo come installare da zero tutto ciò che è necessario.

considera che questo intero tutorial è basato sull'ambiente Windows 10 e spera che tu abbia una conoscenza di base di angolare e firebase.

Installa node.js e NPM su Windows

Prima di tutto vai sul sito Web ufficiale di Node.js node.js e scarica l'ultima versione di node.js, node è un ambiente runtime per eseguire tutti i codici javascript. NPM è l'acronimo di node package manager che ti aiuta a installare tutti gli altri software necessari tramite lo strumento della riga di comando, questa è l'idea di base sul nodo e NPM se vuoi approfondire ci sono tonnellate di siti Web e video che puoi acquisire più conoscenza about node. (Assicurati di aver installato node.js globalmente sul tuo computer).

controlla se hai installato correttamente il nodo prima di andare avanti.

Installa angolare

Apri il tuo strumento da riga di comando ed esegui sotto il comando, npm install -g @angular/cli

ora assicurati di aver installato angular con successo, puoi saperne di più su angular per questo sito web ufficiale di angular.

Passaggio 2: imposta la struttura del tuo progetto

Vai dove vuoi creare il tuo progetto, per il mio ho usato D:\Angular-Projects questa posizione. Apri il prompt della riga di comando in quella posizione. Digita sotto il comando.

ng nuovo sistema-di-monitoraggio-agricoltura

quindi angular creerà tutte le cose necessarie che vogliamo avere nel nostro front-end. prima di collegare frontend e backend insieme. impariamo un po' su angolare e firebase.

Angolare

Parliamo di come appare la tipica architettura web, c'è frontend o lato client backend o lato server, lato client significa che è dove tutto HTML, CSS contiene, ma in angolare non dobbiamo creare pagine web separate per i nostri contenuti come, home.html, about.hml, index.html … ecc. c'è solo una singola pagina per l'intera applicazione è index.html quando l'utente passa attraverso altre pagine o altro contiene index.html sta per rendere con il contenuto di quelle pagine che significano html e css vista di una determinata pagina. quindi la nostra intera applicazione contiene solo una singola pagina.html. Questo è quello che abbiamo chiamato SPA. Quindi creiamo la nostra applicazione. apri il CMD nello stesso tipo di directory sotto il comando.

ng genera componente home.

questo genererà il contenuto della tua home page, quindi vedrai un file home.ts e un file home.html e home.css nel file home.html dove andrai a definire come struttura la tua home page e nella home. css dove aggiungerai i tuoi stili per la home page, e infine il file home.ts dove codificherai il tuo codice dattiloscritto o javascript per lavorare con il nostro backend.

Passaggio 3: installazione di Bootstrap 4

Come abbiamo discusso nel passaggio precedente, ora abbiamo completato il nostro progetto e ora abbiamo un'idea chiara di come funziona l'angolare. ora per lo stile useremo bootstrap 4, per installare bootstrap nel nostro tipo di progetto sotto il comando nel percorso del progetto.

npm install bootstrap@3

ora non devi preoccuparti di come possiamo strutturare le nostre pagine web, bootstrap farà la cosa.

Passaggio 4: definizione dei percorsi

Nel nostro progetto IOT raccoglieremo intestazione, piè di pagina, temperatura, umidità, percentuale di Co2, umidità del suolo. quindi creeremo 4 pagine web che significano in angolare che creeremo 4 componenti per ciascuno di questi indici.

importare il modulo router angolare nel componente AppModule.

definire le rotte in un file separato.

const route: Routes = [{ path: 'first-component', component: HomeComponent}, { percorso: 'secondo componente', componente: HumiComponent},];

aggiungi queste righe di codice all'interno del tag di importazione in AppMoodule.

@NgModule({ importa: [RouterModule.forRoot(rotte)], esporta: [RouterModule] })

Aggiungiamo il codice a barre di navigazione bootstrap all'interno del nostro file header.html e colleghiamo i nostri componenti,

Passaggio 5: Firebase

Firebase è uno dei servizi più interessanti che Google offre ai propri utenti. Quindi una delle funzionalità che abbiamo utilizzato per questo progetto è il database e l'hosting in tempo reale di Firebase. creiamo un account firebase e colleghiamo il nostro progetto al database realtime firebase.

passaggio 01: Accedi al tuo account gamil

passaggio 02: digita console firebase nella barra di ricerca

passaggio 03: ora hai finito.

Passaggio 6: installa Firebase in Angular

Per lavorare con Firebase abbiamo installato o incluso quella libreria di aiuto per connettere Firebase e Angular insieme. vai al percorso del tuo progetto e apri CMD e digita il codice sottostante.

npm install firebase @angular/fire --save

Passaggio 7: collegamento del nostro progetto angolare con Firebase

ora dobbiamo aggiungere il nostro progetto in firebase. premi l'icona aggiungi progetto sul tuo account firebase e dai un nome al progetto che ti piace e continua anche altri due fino a quando non vedi quella bella dashboard blu del tuo account firebase, puoi vedere che nella colonna di sinistra possiamo vedere l'intero elenco di firebase servizi, quindi possiamo utilizzare ciascuno di questi servizi. ora tutto è pronto per partire. nella tua console aggiungi un'app per iniziare e fai clic sull'icona. per ottenere tutti i dettagli di configurazione per connettere la nostra applicazione angolare con l'account firebase. Questi dettagli sono unici per il nostro progetto. ora copia quei dettagli e vai al tuo progetto angolare trova l'ambiente.ts aggiungi il codice sotto e incolla quei dettagli lì.

export const ambiente = {

produzione: true, firebase: {

i dettagli della tua configurazione qui…

}

};

e aggiungi anche i codici sottostanti all'interno di app.module.ts

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

Passaggio 8: installazione della libreria NgxCharts nel tuo progetto angolare

Vai al percorso del progetto come abbiamo fatto nei passaggi precedenti, digita sotto il codice nel tuo CMD.

npm i @swimlane/ngx-charts --save

Sito ufficiale di NgxChart vai su questo sito e prendi il grafico che desideri. Ho preferito con il grafico a linee. vai a questo URL e prendi il codice e aggiungilo ai componenti corrispondenti.

Passaggio 9: creare una classe di servizio e un database in tempo reale

Vai alla cartella del progetto e apri CMD e digita un percorso valido e il nome della classe preferita per il servizio insieme al comando ng generate. Prima di entrare nel codice, vorrei dare una piccola idea sul database in tempo reale di Firebase. Non è come qualsiasi altro database di modelli relazionali. Non possiamo vedere una struttura di tabella in questa varietà di database, questo è chiamato database NOSQL possiamo vedere una struttura di dati di base di testo o documento. Che si chiama JSON, quindi se volessimo archiviare i dati all'interno di quel tipo di database, dobbiamo passarli come oggetti JSON. Nell'immagine sopra puoi vedere, Nel nostro database c'è un nodo o un bordo chiamato dispositivi, e sotto quel nodo c'è un altro nodo chiamato DispositivoA e sotto quel nodo, puoi vedere sopra ogni indice come umidità, temperatura..ecc. sotto il nodo Hum puoi vedere i dati del seno che sono stati raccolti periodicamente.

getData asincrono() {

this.items = ;

return new Promise((risolvi) => {

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

snapshot.forEach(elemento => {

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

this.items.push({

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

});

}

});

risolvere(questo.oggetti);

});

});

}

questo è il codice della classe di servizio per accedere ai dati che sono memorizzati sotto il nodo hum nel database, tutto ciò che devi fare è chiamare questa funzione getData() di classe dove vuoi popolare il tuo grafico.

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

questo.multi = [{

nome: '%', serie: this.items

}];

}

Qui all'interno della nostra classe componente il metodo ngOnInit abbiamo chiamato il nostro servizio popolato il multi array quale array a cui dovremmo passare i valori per il grafico.

Passaggio 10: compila il tuo progetto

Vai alla cartella del tuo progetto e apri CMD e digita ng server, quindi tutto il codice Typescript verrà convertito in javascript. e digita l'URL che il CMD ti chiederà, per il progetto sopra https://localhost:4200/home e il gioco è fatto.