Mas antes disso, vamos abordar a importância dos aplicativos climáticos.
Um rico em recursos previsão do tempo O aplicativo pode fornecer grande valor para várias indústrias. Alguns benefícios notáveis das aplicações meteorológicas incluem:
- Fornecendo acesso imediato às condições climáticas locais e às próximas previsões, economizando tempo.
- Fornecer notificações em tempo real sobre as condições climáticas prevalecentes e esperadas.
- Ajudar governos e administrações locais a se prepararem para desastres naturais e salvarem vidas.
- Ajudar os agricultores a tomar medidas preventivas.
- Facilitar a indústria global de viagens e turismo.
- Fornecer previsões meteorológicas claras que são cruciais no setor de aviação e logística.
Aqui estão algumas das coisas necessárias para criar um aplicativo meteorológico com sucesso:
- Familiaridade com o JavaScript (Node.js)
- Um editor de texto, como o Bloco de notas ou um IDE. O meu favorito é o Visual Studio
- Acesso a um API meteorológica confiável como ClimaCell
- Acesso a um serviço de mapa
- Conhecimento de HTML, CSS e Bootstrap
Depois de prepará-los, você estará pronto.
O ClimaCell é um provedor de clima popular que oferece informações precisas dados meteorológicos históricos bem como previsões por meio de uma API fácil de consumir.
Seus recursos de previsão ajudam os usuários em setores sensíveis ao clima a manterem-se atualizados sobre o gerenciamento de suas operações.
Desenvolvida pela MicroWeather, a API do ClimaCell oferece informações práticas sobre o clima geradas a partir de mais de vinte parâmetros climáticos. Os usuários também podem gerar camadas visuais de mapas climáticos para aprimorar sua experiência.
Nesta seção, mostrarei como eu criei um aplicativo de previsão em que um usuário entra na cidade ou em qualquer outro local por nome e obtém dados meteorológicos da API do ClimaCell. A API responde à solicitação retornando dados, que são exibidos ao usuário.
Instale o JS do nó e crie um novo projeto
Para este projeto, usaremos o Node.js – um dos ambientes de tempo de execução mais populares para JavaScript. O Node.js ajuda os desenvolvedores a criar aplicativos da Web rápidos. Possui uma ampla variedade de bibliotecas e módulos para a criação de aplicativos avançados da web.
Se você não possui o Node.js no seu dispositivo, pode instalá-lo a partir do website oficial.
Uma vez instalado, usamos este comando para inicializar o npm – o gerenciador de pacotes padrão usado pelo Node.js.
$ npm init
Isso cria nosso projeto, assim você será solicitado a inserir alguns detalhes, como nome do pacote, descrição, repositório Git e muito mais.
Em seguida, instalamos os módulos necessários para executar nosso projeto. Para gerar um esqueleto de aplicativo Node.js., usamos express – uma estrutura para criar aplicativos da web Node.js.
$ npm install express
A instalação da estrutura expressa ajuda a executar o servidor, manipular solicitações de clientes e conectar o modelo HTML correto a uma resposta.
Em seguida, também instalaremos o unirest – uma solução simples, porém poderosa, que permite solicitar uma biblioteca.
Isso nos ajudará a fazer solicitações à API do ClimaCell e a lidar com as respostas.
Use este comando:
npm install unirest
Neste ponto, instalamos os módulos necessários e o projeto está pronto.
Em seguida, geramos um aplicativo meteorológico usando a ferramenta geradora expressa. Na linha de comando, digite:
express --view=pug weather-app-nodejs
Agora você deve ter uma visão como esta na linha de comando:
Obtenha a API do clima do ClimaCell
Para ter acesso ao API ClimaCell, será necessário se inscrever em uma conta na página deles.
Depois de criar uma conta, entre no painel da API Microweather, que se parece com:
No painel, clique nas referências para verificar os pontos de extremidade da API. Como você pode ver, a API do ClimaCell possui vários pontos de extremidade, incluindo previsão de curto prazo, previsão horária, dados em tempo real e muito mais.
Vale ressaltar que cada nó de extremidade possui seu próprio trecho de código. Por exemplo, aqui está o trecho de código Node.js. para obter dados climáticos em tempo real.
Você pode aprender mais sobre como usar a API ClimaCell em seus seção de recursos do desenvolvedor.
Modificando o aplicativo
Para chamar a API do ClimaCell, primeiro precisamos editar alguns arquivos. Aqui, você pode usar o Bloco de notas ou abrir o diretório do projeto no IDE para facilitar a edição. Deve aparecer como mostrado:
Começamos a modificar nossos arquivos adicionando bootstrap ao layout.pug. Abra o diretório views e insira esse trecho no arquivo.
Em seguida, criamos um formulário adicionando o snippet abaixo ao arquivo index.pug.
Observe como usamos o Método de postagem HTTP para enviar dados para o servidor. O código acima também define o parâmetro de ação para a rota climática e adiciona a entrada de texto como “cidade”.
Um botão de entrada para buscar o clima também é adicionado.
Agora criamos uma tabela HTML logo abaixo do formulário para exibir registros meteorológicos buscados.
A inserção do snippet de código acima cria uma tabela parecida com esta:
Chamando a API ClimaCell
Para enviar solicitações para a API ClimaCell, precisamos instalar o módulo de solicitação.
npm i request --save
Em seguida, adicionamos as credenciais da API do ClimaCell no arquivo index.js. Abra o arquivo no diretório de rotas e adicione a chave API que você obteve no painel do ClimaCell:
Aqui está o código para adicionar credenciais da API:
Depois de adicionar as credenciais da API, atualizamos a rota do índice. Isso é feito substituindo a seção de código em ‘/’ rota em arquivo index.js.
Terminamos criando a rota climática em index.js.
Esse trecho de código permite que os dados no formulário de entrada sejam postados na rota do índice. Depois que o usuário digita o nome de uma cidade, ele é atribuído à variável da cidade usando o objeto de solicitação.
A URL é anexada com o nome da cidade e o ID e a solicitação enviada à API do ClimaCell.
A resposta do servidor da API do ClimaCell é retornada como um arquivo JSON, que é analisado e alimentado no modelo de saída.
Por exemplo, se o usuário estava procurando previsões meteorológicas de Boston, o aplicativo retornaria isso:
Nota – A temperatura neste exemplo é mostrada em Kelvin e é igual a 50 ° F ou 10 ° C.
Adicione mapas para visualizar seus dados
Você pode integrar mapas interativos ao seu aplicativo de previsão para aprimorar a experiência do usuário. Isso pode ser alcançado usando um provedor de serviços de mapas de terceiros para aplicativos da web.
Mapbox é uma dessas ferramentas que ajuda os desenvolvedores a criar mapas climáticos impressionantes para seus aplicativos. Ele se integra perfeitamente a qualquer aplicativo meteorológico.
Para usar o Mapbox, inscreva-se no site deles e confira sua API. Existem integrações para Android, iOS, Web e Unity. Nesse caso, escolhemos a integração da Web para nossa ferramenta.
Podemos instalar a CDN do Mapbox ou usar o empacotador de módulo. Vamos usar o empacotador de módulo.
O primeiro passo seria instalar o pacote
npm install Mapbox-gl –save
Em seguida, adicionamos o arquivo GL JS CSS no arquivo HTML, incluindo esse trecho no
Agora podemos adicionar o mapa ao nosso aplicativo. Para fazer isso, use o snippet de código abaixo.
Você pode escolher onde colocar o mapa substituindo o
“CONTAINER_ELEMENT_ID”.
Aqui está um exemplo de mapa gerado usando o Mapbox:
Nesse ponto, grande parte do trabalho está concluído e seu aplicativo pode obter previsões do tempo para qualquer cidade usando a API do ClimaCell. No entanto, você pode considerar adicionar mais recursos interativos ao seu aplicativo ou estender sua funcionalidade.
Aqui estão algumas coisas que você pode querer fazer:
- Adicione uma função de pesquisa.
- Melhore a aparência da sua interface de usuário.
- Consulte o aplicativo por ID ou nome.
- Exiba uma lista de cidades de destino e seus respectivos IDs.
- Adicione parâmetros para exibir dados meteorológicos adicionais.
- Integre notificações em tempo real e sinais de aviso.
Como você pode ver, o processo básico de criação de aplicativos é bastante simples e direto. Seguindo o processo acima para aproveitar o poder de uma API climática, até mesmo desenvolvedores iniciantes podem colocar seu aplicativo climático em funcionamento em questão de minutos.
