Sistema de monitoramento visual baseado em LoRa para agricultura Iot - Projetando um aplicativo fronteado usando Firebase e Angular: 10 etapas

2025 Autor: John Day | [email protected]. Última modificação: 2025-01-23 15:03

No capítulo anterior, falamos sobre como os sensores estão trabalhando com o módulo loRa para preencher o banco de dados Firebase Realtime, e vimos o diagrama de alto nível como todo o nosso projeto está funcionando. Neste capítulo, falaremos sobre como podemos preencher esses dados em um aplicativo da web.

Etapa 1: configure o Angular em seu computador

Angular é um dos frameworks baseados em javascript (que na verdade é typescript) mais populares usados principalmente na indústria de software, já que usamos o firebase como nosso back-end (back-end como servidor), a única coisa de que precisamos é de um front-end para manipular esse back-end. Então vamos ver como instalar tudo isso do zero.

considere que todo este tutorial é baseado no ambiente Windows 10 e espera que você tenha conhecimento básico sobre angular e firebase.

Instale node.js e NPM no Windows

Em primeiro lugar, vá para o site oficial do Node.js, node.js, e baixe a versão mais recente do node.js, o node é um ambiente de execução para executar todos os códigos javascript. NPM significa gerenciador de pacotes de nó que ajuda você a instalar todos os outros softwares necessários através da ferramenta de linha de comando, que é a ideia básica sobre o nó e NPM se você quiser ir mais fundo, existem toneladas de sites e vídeos que você pode obter mais conhecimento sobre o nó. (Certifique-se de instalar o node.js globalmente em seu computador).

por favor, verifique se você instalou o node com sucesso antes de prosseguir.

Instale o Angular

Abra sua ferramenta de linha de comando e execute o comando abaixo, npm install -g @ angular / cli

agora certifique-se de instalar o angular com sucesso, você pode aprender mais sobre o angular neste tutorial no site oficial do angular.

Etapa 2: configure sua estrutura de projeto

Vá para onde deseja criar seu projeto, para o meu usei D: / Angular-Projects neste local. Abra o prompt da linha de comando nesse local. Digite o comando abaixo.

ng novo sistema de monitoramento de agricultura

então o angular criará todas as coisas necessárias que desejamos ter em nosso front-end. antes de conectarmos o front-end e o back-end. vamos aprender um pouco sobre angular e firebase.

Angular

Vamos falar sobre como a arquitetura da web típica se parece, há front-end ou backend do lado do cliente ou lado do servidor, lado do cliente significa que é onde todo o HTML, CSS contém, mas no angular não temos que criar páginas da web separadas para o nosso conteúdo como, home.html, about.hml, index.html… etc. existe apenas uma única página para a aplicação inteira é index.html quando o usuário passa por outras páginas ou outro contém index.html vai renderizar com o conteúdo dessas páginas que significam visualização em html e css de determinada página. portanto, todo o nosso aplicativo contém apenas uma única página.html. Isso é o que chamamos de SPA. Então, vamos criar nosso aplicativo. abra o CMD no mesmo tipo de diretório abaixo do comando.

ng gerar o componente inicial.

isso irá gerar o conteúdo de sua página inicial, então você verá um arquivo home.ts e um arquivo home.html e home.css no arquivo home.html onde você vai definir a estrutura de sua página inicial e na página inicial. css onde você adicionará seus estilos para a página inicial e, por último, o arquivo home.ts onde você irá codificar seu texto digitado ou código javascript para trabalhar com nosso back-end.

Etapa 3: Instalando o Bootstrap 4

Como discutimos na etapa anterior, agora avançamos nosso projeto e agora temos uma ideia clara sobre como o angular funciona. agora, para fins de estilização, usaremos o bootstrap 4, para instalar o bootstrap em nosso projeto digite abaixo do comando no caminho do projeto.

npm install bootstrap @ 3

agora você não precisa se preocupar em como podemos estruturar nossas páginas da web, o bootstrap fará isso.

Etapa 4: Definindo Rotas

Em nosso projeto IOT iremos coletar cabeçalho, rodapé, temperatura, umidade, porcentagem de CO2, umidade do solo. então vamos criar 4 páginas web que significam que em angular iremos criar 4 componentes para cada um desses índices.

importe o módulo de roteador angular no componente AppModule.

definir as rotas em arquivo separado.

rotas const: Routes = [{path: 'first-component', component: HomeComponent}, {caminho: 'segundo componente', componente: HumiComponent},];

adicione essas linhas de código dentro da tag de importação no AppMoodule.

@NgModule ({importações: [RouterModule.forRoot (rotas)], exportações: [RouterModule]})

Vamos adicionar o código de barras de navegação bootstrap dentro de nosso arquivo header.html e vincular nossos componentes,

Etapa 5: Firebase

O Firebase é um dos serviços mais legais que o Google oferece aos seus usuários. Portanto, um dos recursos que usamos neste projeto é o banco de dados em tempo real do Firebase e hospedagem. vamos criar uma conta firebase e conectar nosso projeto ao banco de dados firebase realtime.

passo 01: Faça login em sua conta gamil

etapa 02: digite firebase console na barra de pesquisa

passo 03: agora você está pronto.

Etapa 6: Instale o Firebase no Angular

Para trabalhar com o firebase, instalamos ou incluímos essa biblioteca de ajuda para conectar o firebase e o angular. vá para o caminho do projeto e abra o CMD e digite o código abaixo.

npm install firebase @ angular / fire --save

Etapa 7: conectando nosso projeto angular ao Firebase

agora temos que adicionar nosso projeto ao firebase. pressione add project icon em sua conta do firebase e dê um nome de projeto que você goste e continue outros dois também até ver aquele lindo painel azul da sua conta do firebase, você pode ver que na coluna do lado esquerdo podemos ver a lista completa do firebase serviços, para que possamos usar cada um desses serviços. agora tudo está pronto para ir. no console, adicione um aplicativo para começar e clique no ícone. para obter todos os detalhes de configuração para conectar nosso aplicativo angular à conta do firebase. Esses detalhes são exclusivos do nosso projeto. agora copie esses detalhes e vá para o seu projeto angular, encontre o environment.ts adicione o código abaixo e cole esses detalhes lá.

export const environment = {

produção: verdadeiro, firebase: {

seus detalhes de configuração aqui …

}

};

e também adicione os códigos abaixo dentro do app.module.ts

importações: [AngularFireModule.initializeApp (environment.firebase),….],

Etapa 8: Instalando a Biblioteca NgxCharts em seu projeto Angular

Vá para o caminho do projeto como fizemos nas etapas anteriores, digite o código abaixo em seu CMD.

npm i @ swimlane / ngx-charts --save

Site oficial do NgxChart acesse este site e pegue o gráfico que você deseja. Eu preferia com gráfico de linha. vá para este url, pegue o código e adicione-o aos componentes correspondentes.

Etapa 9: criar uma classe de serviço e um banco de dados em tempo real

Vá para a pasta do projeto e abra o CMD e digite um caminho válido e um nome de classe preferencial para o serviço junto com o comando ng generate. Antes de entrarmos no código, gostaria de dar uma pequena ideia sobre o banco de dados em tempo real firebase. Não é como qualquer outro banco de dados de modelo relacional. Não podemos ver uma estrutura de tabela nesta Varidade de bancos de dados. Isso é chamado de banco de dados NOSQL, podemos ver uma base de texto ou estrutura de dados de base de documentos. Que é chamado de JSON, então se quisermos armazenar dados dentro desse tipo de banco de dados, temos que passá-los como objetos JSON. Na imagem acima você pode ver, Em nosso banco de dados há um nó ou borda chamado dispositivos, e sob esse nó há um outro nó chamado DeviceA e sob esse nó, você pode ver acima de cada índice como umidade, temperatura … etc.. sob o nó Hum, você pode ver os dados senor que foram coletados periodicamente.

async getData () {

this.items = ;

retornar nova promessa ((resolver) => {

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

snapshot.forEach (element => {

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

this.items.push ({

nome: momento (element.payload.val () ['data'], 'AAAA-M-DD hh: mm: ss'). formato ('AAAA-MM-DD hh: mm'), valor: element.payload.val () ['valor']

});

}

});

resolver (this.items);

});

});

}

este é o código da classe de serviço para acessar os dados armazenados no nó hum no banco de dados, tudo o que você precisa fazer é chamar esta função getData () da classe onde deseja preencher o gráfico.

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

this.multi = [{

nome: '%', series: this.items

}];

}

Aqui, dentro de nossa classe de componente do método ngOnInit, chamamos nosso serviço e preenchemos o array multi, o qual devemos passar os valores para o gráfico.

Etapa 10: compilar seu projeto

Vá para a pasta do projeto e abra o CMD e digite o servidor. Então, todo o código do Typescript será convertido em javascript. e digite a url que o CMD irá solicitar, para o projeto acima https:// localhost: 4200 / home e pronto.