Tutorial: Visualize dados do sensor em tempo real do seu hub IoT do Azure em um aplicativo Web

Neste artigo, você aprenderá a visualizar dados de sensores em tempo real que seu hub IoT recebe com um aplicativo Web Node.js em execução no computador local. Depois de executar o aplicativo Web localmente, você pode hospedá-lo no Serviço de Aplicativo do Azure.

Pré-requisitos

O exemplo de aplicativo Web para este tutorial está escrito em Node.js. As etapas neste artigo assumem uma máquina de desenvolvimento do Windows; no entanto, você também pode executar essas etapas em um sistema Linux em seu shell preferido.

• Uma subscrição do Azure. Se não tiver uma subscrição do Azure, crie uma conta gratuita antes de começar.

• Um hub IoT em sua assinatura do Azure. Se você ainda não tiver um hub, siga as etapas em Criar um hub IoT.

• Um dispositivo registrado em seu hub IoT. Se você não tiver um dispositivo em seu hub IoT, siga as etapas em Registrar um dispositivo.

• Um dispositivo simulado que envia mensagens de telemetria para seu hub IoT. Use o simulador online do Raspberry Pi para obter um dispositivo simulado que envia dados de temperatura para o Hub IoT.

• Node.js versão 14 ou posterior. Para verificar a versão do nó, execute node --version.

• Git.

• Use o ambiente Bash no Azure Cloud Shell. Para obter mais informações, consulte Guia de início rápido para Bash no Azure Cloud Shell.

  

• Se preferir executar comandos de referência da CLI localmente, instale a CLI do Azure. Se estiver a utilizar o Windows ou macOS, considere executar a CLI do Azure num contentor Docker. Para obter mais informações, consulte Como executar a CLI do Azure em um contêiner do Docker.

  • Se estiver a utilizar uma instalação local, inicie sessão no CLI do Azure ao utilizar o comando az login. Para concluir o processo de autenticação, siga os passos apresentados no seu terminal. Para outras opções de entrada, consulte Entrar com a CLI do Azure.

  • Quando solicitado, instale a extensão da CLI do Azure na primeira utilização. Para obter mais informações sobre as extensões, veja Utilizar extensões com o CLI do Azure.

  • Execute o comando az version para localizar a versão e as bibliotecas dependentes instaladas. Para atualizar para a versão mais recente, execute o comando az upgrade.

Adicionar um grupo de consumidores ao seu hub IoT

Os grupos de consumidores fornecem vistas independentes para o fluxo de eventos que permitem que as aplicações e os serviços do Azure consumam dados de forma independente do mesmo ponto de extremidade dos Hubs de Eventos. Nesta seção, você adiciona um grupo de consumidores ao ponto de extremidade interno do hub IoT que o aplicativo Web usa para ler dados.

Execute o seguinte comando para adicionar um grupo de consumidores ao ponto de extremidade interno do seu hub IoT:

az iot hub consumer-group create --hub-name YOUR_IOT_HUB_NAME --name YOUR_CONSUMER_GROUP_NAME

Anote o nome que você escolher, você precisa dele mais tarde neste tutorial.

Obter uma cadeia de conexão de serviço para seu hub IoT

Os hubs IoT são criados com várias políticas de acesso padrão. Uma dessas políticas é a política de serviço , que fornece permissões suficientes para um serviço ler e gravar os pontos de extremidade do hub IoT. Execute o seguinte comando para obter uma cadeia de conexão para seu hub IoT que adere à política de serviço:

az iot hub connection-string show --hub-name YOUR_IOT_HUB_NAME --policy-name service

A cadeia de conexão de serviço deve ser semelhante ao exemplo a seguir:

"HostName=YOUR_IOT_HUB_NAME.azure-devices.net;SharedAccessKeyName=service;SharedAccessKey=YOUR_SHARED_ACCESS_KEY"

Anote a cadeia de conexão de serviço, você precisará dela mais tarde neste tutorial.

Importante

Este artigo inclui etapas para se conectar a um serviço usando uma assinatura de acesso compartilhado. Esse método de autenticação é conveniente para teste e avaliação, mas autenticar em um serviço com ID do Microsoft Entra ou identidades gerenciadas é uma abordagem mais segura. Para saber mais, consulte Práticas > recomendadas de segurança Segurança na nuvem.

Baixe o aplicativo Web do GitHub

Baixe ou clone o exemplo de aplicativo Web do GitHub: web-apps-node-iot-hub-data-visualization.

Examine o código do aplicativo Web

Em sua máquina de desenvolvimento, navegue até o diretório web-apps-node-iot-hub-data-visualization e abra o aplicativo Web em seu editor favorito. A seguir mostra a estrutura de arquivo exibida no Visual Studio Code:

Reserve um momento para examinar os seguintes arquivos:

• server.js é um script do lado do serviço que inicializa o soquete da Web e a classe wrapper de Hubs de Eventos. Ele fornece um retorno de chamada para a classe wrapper de Hubs de Eventos que a classe usa para transmitir mensagens de entrada para o soquete da Web.

• scripts/event-hub-reader.js é um script do lado do serviço que se conecta ao ponto de extremidade interno do hub IoT usando a cadeia de conexão especificada e o grupo de consumidores. Ele extrai o DeviceId e EnqueuedTimeUtc de metadados em mensagens de entrada e, em seguida, retransmite a mensagem usando o método de retorno de chamada registrado por server.js.

• public/js/chart-device-data.js é um script do lado do cliente que escuta no soquete da Web, controla cada DeviceId e armazena os últimos 50 pontos de dados de entrada para cada dispositivo. Em seguida, ele vincula os dados do dispositivo selecionado ao objeto gráfico.

• public/index.html lida com o layout da interface do usuário para a página da Web e faz referência aos scripts necessários para a lógica do lado do cliente.

Configurar variáveis de ambiente para o aplicativo Web

Para ler dados do seu hub IoT, o aplicativo Web precisa da cadeia de conexão do seu hub IoT e do nome do grupo de consumidores que ele deve ler. Ele obtém essas cadeias de caracteres do ambiente de processo nas seguintes linhas no server.js:

const iotHubConnectionString = process.env.IotHubConnectionString;
if (!iotHubConnectionString) {
  console.error(`Environment variable IotHubConnectionString must be specified.`);
  return;
}
console.log(`Using IoT Hub connection string [${iotHubConnectionString}]`);

const eventHubConsumerGroup = process.env.EventHubConsumerGroup;
console.log(eventHubConsumerGroup);
if (!eventHubConsumerGroup) {
  console.error(`Environment variable EventHubConsumerGroup must be specified.`);
  return;
}
console.log(`Using event hub consumer group [${eventHubConsumerGroup}]`);

Defina as variáveis de ambiente na janela de comando com os seguintes comandos. Substitua os valores de espaço reservado pela cadeia de conexão de serviço para seu hub IoT e o nome do grupo de consumidores criado anteriormente. Não cite as cordas.

set IotHubConnectionString=YOUR_IOT_HUB_CONNECTION_STRING
set EventHubConsumerGroup=YOUR_CONSUMER_GROUP_NAME

Executar a aplicação Web

1. Certifique-se de que o dispositivo está a funcionar e a enviar dados.

2. Na janela de comando, execute as seguintes linhas para baixar e instalar pacotes referenciados e iniciar o site:

   npm install
   npm start
   

3. Você deve ver a saída no console que indica que o aplicativo Web se conectou com êxito ao seu hub IoT e está escutando na porta 3000:

   

Abra uma página da Web para ver dados do seu hub IoT

Abra um navegador para http://localhost:3000.

Na lista Selecione um dispositivo, selecione seu dispositivo para ver um gráfico em execução dos últimos 50 pontos de dados de temperatura e umidade enviados pelo dispositivo para seu hub IoT.

Você também verá a saída no console que mostra as mensagens que seu aplicativo Web está transmitindo para o cliente do navegador:

Hospedar o aplicativo Web no Serviço de Aplicativo

O Serviço de Aplicativo do Azure fornece uma plataforma como serviço (PAAS) para hospedar aplicativos Web. Os aplicativos Web hospedados no Serviço de Aplicativo podem se beneficiar de recursos poderosos do Azure, como segurança, balanceamento de carga e escalabilidade, bem como do Azure e de soluções de DevOps de parceiros, como implantação contínua, gerenciamento de pacotes e assim por diante. O Serviço de Aplicativo suporta aplicativos Web desenvolvidos em muitas linguagens populares e implantados na infraestrutura Windows ou Linux.

Nesta seção, você provisiona um aplicativo Web no Serviço de Aplicativo e implanta seu código nele usando comandos da CLI do Azure. Você pode encontrar detalhes dos comandos usados na documentação az webapp .

1. Um plano do Serviço de Aplicativo define um conjunto de recursos de computação para execução de um aplicativo hospedado no Serviço de Aplicativo. Neste tutorial, usamos a camada Desenvolvedor/Gratuito para hospedar o aplicativo Web. Com o nível Gratuito, seu aplicativo Web é executado em recursos compartilhados do Windows com outros aplicativos do Serviço de Aplicativo, incluindo aplicativos de outros clientes. O Azure também oferece planos do Serviço de Aplicativo para implantar aplicativos Web em recursos de computação do Linux. Você pode pular esta etapa se já tiver um plano do Serviço de Aplicativo que deseja usar.

   Para criar um plano do Serviço de Aplicativo usando a camada gratuita do Windows, use o comando az appservice plan create . Use o mesmo grupo de recursos em que seu hub IoT está. O nome do seu plano de serviço pode conter letras maiúsculas e minúsculas, números e hífenes.

   az appservice plan create --name NEW_NAME_FOR_YOUR_APP_SERVICE_PLAN --resource-group YOUR_RESOURCE_GROUP_NAME --sku FREE
   

2. Use o comando az webapp create para provisionar um aplicativo Web em seu plano do Serviço de Aplicativo. O --deployment-local-git parâmetro permite que o código do aplicativo Web seja carregado e implantado a partir de um repositório Git em sua máquina local. O nome do aplicativo Web deve ser globalmente exclusivo e pode conter letras maiúsculas e minúsculas, números e hífenes. Certifique-se de especificar a versão 14 ou posterior do Node para o --runtime parâmetro, dependendo da versão do tempo de execução do Node.js que você está usando. Você pode usar o az webapp list-runtimes comando para obter uma lista de tempos de execução suportados.

   az webapp create -n NEW_NAME_FOR_YOUR_WEB_APP -g YOUR_RESOURCE_GROUP_NAME -p YOUR_APP_SERVICE_PLAN_NAME --runtime "NODE:14LTS" --deployment-local-git
   

3. Use o comando az webapp config appsettings set para adicionar configurações de aplicativo para as variáveis de ambiente que especificam a cadeia de conexão do hub IoT e o grupo de consumidores do hub de eventos. As configurações individuais são delimitadas por espaço no -settings parâmetro. Use a cadeia de conexão de serviço para seu hub IoT e o grupo de consumidores que você criou anteriormente neste tutorial.

   az webapp config appsettings set -n YOUR_WEB_APP_NAME -g YOUR_RESOURCE_GROUP_NAME --settings EventHubConsumerGroup=YOUR_CONSUMER_GROUP_NAME IotHubConnectionString="YOUR_IOT_HUB_CONNECTION_STRING"
   

4. Habilite o protocolo Web Sockets para o aplicativo Web e defina o aplicativo Web para receber somente solicitações HTTPS (as solicitações HTTP são redirecionadas para HTTPS).

   az webapp config set -n YOUR_WEB_APP_NAME -g YOUR_RESOURCE_GROUP_NAME --web-sockets-enabled true
   az webapp update -n YOUR_WEB_APP_NAME -g YOUR_RESOURCE_GROUP_NAME --https-only true
   

5. Para implantar o código no Serviço de Aplicativo, use credenciais de implantação em nível de usuário. Suas credenciais de implantação no nível do usuário são diferentes das credenciais do Azure e são usadas para implantações locais e FTP do Git em um aplicativo Web. Depois de definidos, eles são válidos em todos os seus aplicativos do Serviço de Aplicativo em todas as assinaturas em sua conta do Azure. Se você tiver definido anteriormente credenciais de implantação em nível de usuário, poderá usá-las.

   Se você não tiver definido anteriormente credenciais de implantação no nível do usuário ou não se lembrar de sua senha, execute o comando az webapp deployment user set . Seu nome de usuário de implantação deve ser exclusivo no Azure e não deve conter o símbolo '@' para pushes locais do Git. Quando lhe for pedido, introduza e confirme a sua nova palavra-passe. A senha deve ter pelo menos oito caracteres, com dois dos três elementos a seguir: letras, números e símbolos.

   az webapp deployment user set --user-name NAME_FOR_YOUR_USER_CREDENTIALS
   

6. Obtenha a URL do Git a ser usada para enviar seu código para o Serviço de Aplicativo.

   az webapp deployment source config-local-git -n YOUR_WEB_APP_NAME -g YOUR_RESOURCE_GROUP_NAME
   

7. Adicione um controle remoto ao seu clone que faça referência ao repositório Git do aplicativo Web no Serviço de Aplicativo. Substitua o espaço reservado GIT_ENDPOINT_URL pela URL retornada na etapa anterior. Certifique-se de que você está no diretório de exemplo, web-apps-code-iot-hub-data-visualization e, em seguida, execute o seguinte comando na janela de comando.

   git remote add webapp GIT_ENDPOINT_URL
   

8. Para implantar o código no Serviço de Aplicativo, digite o seguinte comando na janela de comando. Certifique-se de que você está no diretório de exemplo web-apps-code-iot-hub-data-visualization. Se você for solicitado a fornecer credenciais, insira as credenciais de implantação em nível de usuário que você criou na etapa 5. Envie por push para a ramificação principal do controle remoto do Serviço de Aplicativo.

   git push webapp master:master
   

9. O progresso das atualizações de implantação na janela de comando. Uma implantação bem-sucedida termina com linhas semelhantes à seguinte saída:

   remote:
   remote: Finished successfully.
   remote: Running post deployment command(s)...
   remote: Deployment successful.
   To https://contoso-web-app-3.scm.azurewebsites.net/contoso-web-app-3.git
   6b132dd..7cbc994  master -> master
   

10. Execute o seguinte comando para consultar o estado da sua aplicação Web e certifique-se de que está em execução:

    az webapp show -n YOUR_WEB_APP_NAME -g YOUR_RESOURCE_GROUP_NAME --query state
    

11. Navegue para https://<your web app name>.azurewebsites.net num browser. Uma página da Web semelhante à que você viu quando executou o aplicativo Web localmente é exibida. Supondo que seu dispositivo esteja executando e enviando dados, você verá um gráfico em execução das 50 leituras de temperatura e umidade mais recentes enviadas pelo dispositivo.

Resolução de Problemas

Se você encontrar algum problema com este exemplo, tente as etapas nas seções a seguir. Se você ainda tiver problemas, envie-nos feedback no final deste artigo.

Problemas do cliente

• Se um dispositivo não aparecer na lista ou se nenhum gráfico estiver a ser desenhado, certifique-se de que o código do dispositivo está a ser executado no dispositivo.

• No navegador, abra as ferramentas de desenvolvedor (em muitos navegadores a tecla F12 a abre) e encontre o console. Procure quaisquer avisos ou erros impressos lá.

• Você pode depurar o script do lado do cliente em /js/chat-device-data.js.

Problemas com o site local

• Observe a saída na janela onde você iniciou o nó para a saída do console.

• Depure o código do servidor, especificamente server.js e /scripts/event-hub-reader.js.

Problemas do Serviço de Aplicativo do Azure

• No portal do Azure, vá para seu aplicativo Web. Em Monitoramento , no painel esquerdo, selecione Logs do Serviço de Aplicativo. Ative o Registo de Aplicações (Sistema de Ficheiros), defina Nível como Erro e, em seguida, selecione Guardar. Em seguida, abra o fluxo de log (em Monitoramento).

• No seu aplicativo Web no portal do Azure, em Ferramentas de Desenvolvimento, selecione Console e valide as versões do nó e do npm com node -v e npm -v.

• Se você vir um erro sobre não encontrar um pacote, você pode ter executado as etapas fora de ordem. Quando o site é implantado (com git push), o serviço de aplicativo é executado npm installcom base na versão atual do nó que ele configurou. Se isso for alterado na configuração mais tarde, você precisará fazer uma alteração sem sentido no código e enviar novamente.

Próximos passos

Você usou com sucesso seu aplicativo Web para visualizar dados de sensores em tempo real do seu hub IoT.

Para outra maneira de interagir com dados do Hub IoT do Azure, consulte o seguinte tutorial:

Utilizar Logic Apps para monitorização remota e notificações