Configurando a Visualização do Web APP

Agora que temos um dispositivo conectado à Helium Network, bem como dados fluindo do dispositivo para a Helium Network e para os Microsoft Azure IoT Hubs, vamos começar a explorar como analisar e visualizar esses dados.

Preparação do ambiente

Para usar esta rotina, faça o download e configure previamente o Git e o Azure CLI para o seu computador.

Não entraremos aqui na instalação e configuração do Git, mas focaremos na instalação do Azure CLI para sistemas Windows e MacOS.

A Interface de Linha de Comando do Azure (Azure Command-Line Interface, CLI) é uma ferramenta de linha de comando multiplataforma para se conectar ao Azure e executar comandos administrativos em recursos do Azure. Ela permite a execução de comandos por meio de um terminal usando prompts interativos de linha de comando ou um script.

Para uso interativo, primeiro inicie um shell como cmd.exe no Windows ou Bash no Linux ou macOS, e então emita um comando no prompt do shell. Para automatizar tarefas repetitivas, você reúne os comandos da CLI em um script de shell usando a sintaxe de script do shell escolhido e, em seguida, executa o script.

instalar -Windows

No Windows, o Azure CLI é instalado por meio de um MSI, que dá acesso à CLI pelo Windows Command Prompt (CMD) ou PowerShell. Ao instalar para o Windows Subsystem for Linux (WSL), pacotes ficam disponíveis para a sua distribuição Linux.

A versão atual do Azure CLI é 2.37.0. Para informações sobre a versão mais recente, consulte as notas de versão. Para descobrir a versão instalada e ver se é necessário atualizá-la, execute az version.

Você também pode instalar o Azure CLI usando o PowerShell. Inicie o PowerShell como administrador e execute o seguinte comando:

nota

O PowerShell deve ser executado como administrador.

Inicie o PowerShell como administrador e execute o seguinte comando:

$ProgressPreference = 'SilentlyContinue'; Invoke-WebRequest -Uri https://aka.ms/installazurecliwindows -OutFile .\AzureCLI.msi; Start-Process msiexec.exe -Wait -ArgumentList '/I AzureCLI.msi /quiet'; rm .\AzureCLI.msi

Isso fará o download e instalará a versão mais recente do Azure CLI para Windows. Se você já tiver uma versão instalada, o instalador atualizará a versão existente.

Para instalar uma versão específica, substitua o argumento -Uri por https://azcliprod.blob.core.windows.net/msi/azure-cli-<version>.msi, alterando o segmento de versão. As versões disponíveis podem ser encontradas nas notas de versão do Azure CLI.

nota

Após a conclusão da instalação, você precisará reabrir o PowerShell para usar o Azure CLI.

Agora você pode executar o Azure CLI com o comando az tanto no Windows Command Prompt quanto no PowerShell.

instalar -MacOS

Na plataforma macOS, você pode instalar o Azure CLI com o gerenciador de pacotes homebrew. O Homebrew facilita manter sua instalação da CLI sempre atualizada. O pacote da CLI foi testado em versões do macOS 10.9 e posteriores.

A versão atual do Azure CLI é 2.34.1. Para informações sobre a versão mais recente, consulte as notas de versão. Para descobrir a versão instalada e ver se é necessário atualizá-la, execute az version.

Você pode instalar o Azure CLI no macOS atualizando as informações do repositório brew e então executando o comando install:

brew update && brew install azure-cli

nota

O Azure CLI tem uma dependência no pacote Homebrew [email protected], e irá instalá-lo.

Na primeira vez que você usar o Microsoft Azure CLI em seu computador, será necessário fazer login nos IoT hubs e digitar az login na janela de comando para abrir a janela de login. Neste momento, conclua a operação de login.

Se a CLI conseguir abrir o seu navegador padrão, ela iniciará o fluxo de código de autorização e abrirá o navegador padrão para carregar uma página de entrada do Azure.

Caso contrário, ela iniciará o fluxo de código de dispositivo e informará que você deve abrir uma página de navegador em https://aka.ms/devicelogin e inserir o código exibido em seu terminal.

Faça login com as credenciais da sua conta no navegador.

Conectando o Microsoft Azure CLI ao Microsoft Azure IoT Hub

Os grupos de consumidor fornecem visualizações independentes do fluxo de eventos que permitem que aplicativos e serviços do Azure consumam dados de forma independente do mesmo endpoint do Event Hub. Nesta seção, você adiciona um grupo de consumidor ao endpoint interno do seu IoT hub que o Web APP usará para ler dados.

Os IoT hubs 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 que um serviço leia e escreva nos endpoints do IoT hub. Execute o seguinte comando para obter uma cadeia de conexão para o seu IoT hub que siga a política de serviço:

az iot hub connection-string show --hub-name ${YourIotHub} --policy-name service

Onde a variável de ambiente ${YourIotHub} indica o nome do seu Azure IoT Hub, como mostrado abaixo.

A cadeia de conexão deve ser semelhante à seguinte:

"HostName={YourIotHubName}.azure-devices.net;SharedAccessKeyName=service;SharedAccessKey={YourSharedAccessKey}"

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

nota

Se por algum motivo você não conseguir instalar o Azure CLI em seu computador, pode considerar executar o bash com o ambiente Azure CLI diretamente a partir do painel dos IoT hubs para ajudá-lo nas próximas etapas.

Você pode inserir diretamente aqui o comando az acima para obter a cadeia de conexão.

Baixar o Framework de Serviço do Web APP

Faça o download da biblioteca correspondente de acordo com o tipo de sensor que você deseja usar.

Tipo de Sensor	Endereço para Download
Sensor de luz integrado do Wio Terminal	Download
Sensor IMU integrado do Wio Terminal	Download
Sensor de Umidade do Solo	Download
Sensor de Gás VOC e eCO2 (SGP30)	Download
Sensor de Temperatura e Umidade (SHT40)	Download
Módulo Vision AI	Download

Abra a biblioteca do Web APP no seu editor favorito. A seguir é mostrada a estrutura de arquivos visualizada no VS Code:

Reserve um momento para examinar os seguintes arquivos:

Chart-device-data.js é um script do lado do cliente que escuta o web socket, mantém o controle de cada DeviceId e armazena os últimos 50 pontos de dados recebidos para cada dispositivo. Em seguida, ele associa os dados do dispositivo selecionado ao objeto de gráfico.
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.
Event-hub-reader.js é um script do lado do serviço que se conecta ao endpoint interno do IoT hub usando a cadeia de conexão e o grupo de consumidor especificados. Ele extrai o DeviceId e o EnqueuedTimeUtc dos metadados das mensagens recebidas e então retransmite a mensagem usando o método de retorno de chamada registrado por server.js.
Server.js é um script do lado do serviço que inicializa o web socket e a classe wrapper do Event Hub. Ele fornece um retorno de chamada para a classe wrapper do Event Hub que a classe usa para transmitir mensagens recebidas para o web socket.

Configurar variáveis de ambiente para o Web APP

Para ler dados do seu IoT hub, o Web APP precisa da cadeia de conexão do seu IoT hub e do nome do grupo de consumidor por meio do qual deve ler. Ele obtém essas strings do ambiente de processo nas seguintes linhas em server.js:

const iotHubConnectionString = process.env.IotHubConnectionString;
const eventHubConsumerGroup = process.env.EventHubConsumerGroup;

Haverá dois métodos para esta etapa, então vamos começar pelo mais comum.

O primeiro método. Defina as variáveis de ambiente na sua janela de comando com os seguintes comandos. Substitua os valores de espaço reservado pela cadeia de conexão de serviço do seu hub IoT e pelo nome do grupo de consumidores que você criou anteriormente. Não coloque aspas nas strings.

set IotHubConnectionString = YourIoTHubConnectionString
set EventHubConsumerGroup = YourConsumerGroupName

No segundo método, podemos fazer alterações diretamente no código. Ele é adequado para casos em que, por exemplo, adicionar variáveis de ambiente é tedioso no MacOS.

Abra o arquivo server.js com um editor e modifique o código de acordo com o nome do grupo de consumidores que você criou e a cadeia de conexão que obtivemos no passo2. Consulte a figura a seguir para a modificação.

Executar o Web APP

Envie o código de acordo com o conteúdo da wiki anterior. Certifique-se de que seu dispositivo esteja em execução e enviando dados.

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

npm install
npm start

Você deverá ver uma saída no console indicando que o Web APP foi conectado com sucesso ao seu hub IoT e está escutando na porta 3000:

Abra uma página web para ver dados do Azure IoT hub

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

Na caixa de seleção de lista no canto superior esquerdo, selecione o número de ID do seu dispositivo. Aguarde até que o próximo conjunto de dados enviados chegue e você poderá observar o gráfico de linhas das mudanças de dados.