Configurando Visualización de Aplicación Web

Ahora que tenemos un dispositivo conectado a la Red Helium así como datos fluyendo desde el dispositivo a la Red Helium hacia Microsoft Azure IoT Hubs, comencemos a explorar cómo analizar y visualizar estos datos.

Preparación del entorno

Para usar esta rutina, por favor descarga y configura Git y la CLI de Azure para tu computadora con anticipación.

No entraremos en la instalación y configuración de Git aquí, sino que nos enfocaremos en la instalación de la CLI de Azure para sistemas Windows y MacOS.

La Interfaz de Línea de Comandos (CLI) de Azure es una herramienta de línea de comandos multiplataforma para conectarse a Azure y ejecutar comandos administrativos en recursos de Azure. Permite la ejecución de comandos a través de una terminal usando indicaciones interactivas de línea de comandos o un script.

Para uso interactivo, primero inicias un shell como cmd.exe en Windows, o Bash en Linux o macOS, y luego emites un comando en el indicador del shell. Para automatizar tareas repetitivas, ensamblas los comandos de CLI en un script de shell usando la sintaxis de script de tu shell elegido, y luego ejecutas el script.

instalación -Windows

Para Windows, la CLI de Azure se instala a través de un MSI, que te da acceso a la CLI a través del Símbolo del sistema de Windows (CMD) o PowerShell. Al instalar para el Subsistema de Windows para Linux (WSL), hay paquetes disponibles para tu distribución de Linux.

La versión actual de la CLI de Azure es 2.37.0. Para información sobre la versión más reciente, consulta las notas de versión. Para encontrar tu versión instalada y ver si necesitas actualizar, ejecuta az version.

También puedes instalar la CLI de Azure usando PowerShell. Inicia PowerShell como administrador y ejecuta el siguiente comando:

note

PowerShell debe ejecutarse como administrador.

Inicia PowerShell como administrador y ejecuta el siguiente 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

Esto descargará e instalará la última versión de la CLI de Azure para Windows. Si ya tienes una versión instalada, el instalador actualizará la versión existente.

Para instalar una versión específica, reemplaza el argumento -Uri con https://azcliprod.blob.core.windows.net/msi/azure-cli-<version>.msi cambiando el segmento de versión. Las versiones disponibles se pueden encontrar en las notas de lanzamiento de la CLI de Azure.

note

Después de que la instalación esté completa, necesitarás reabrir PowerShell para usar la CLI de Azure.

Ahora puedes ejecutar la CLI de Azure con el comando az desde el Símbolo del sistema de Windows o PowerShell.

install -MacOS

Para la plataforma macOS, puedes instalar la CLI de Azure con el gestor de paquetes homebrew. Homebrew facilita mantener tu instalación de la CLI actualizada. El paquete de la CLI ha sido probado en versiones de macOS 10.9 y posteriores.

La versión actual de la CLI de Azure es 2.34.1. Para información sobre el último lanzamiento, consulta las notas de lanzamiento. Para encontrar tu versión instalada y ver si necesitas actualizar, ejecuta az version.

Puedes instalar la CLI de Azure en macOS actualizando la información de tu repositorio brew, y luego ejecutando el comando install:

brew update && brew install azure-cli

note

La CLI de Azure tiene una dependencia del paquete [email protected] de Homebrew, y lo instalará.

Iniciar sesión en la CLI de Microsoft Azure

Cuando uses por primera vez la CLI de Microsoft Azure en tu computadora, primero necesitarás iniciar sesión en los centros de IoT y escribir az login en la ventana de comandos para abrir la ventana de inicio de sesión. En este punto, por favor completa la operación de inicio de sesión.

Si la CLI puede abrir tu navegador predeterminado, iniciará el flujo de código de autorización y abrirá el navegador predeterminado para cargar una página de inicio de sesión de Azure.

De lo contrario, iniciará el flujo de código de dispositivo y te indicará que abras una página del navegador en https://aka.ms/devicelogin e ingreses el código mostrado en tu terminal.

Inicia sesión con las credenciales de tu cuenta en el navegador.

Conectar la CLI de Microsoft Azure al Centro de IoT de Microsoft Azure

Los grupos de consumidores proporcionan vistas independientes del flujo de eventos que permiten a las aplicaciones y servicios de Azure consumir datos de forma independiente desde el mismo punto final del Centro de Eventos. En esta sección, agregas un grupo de consumidores al punto final integrado de tu centro de IoT que la aplicación web utilizará para leer datos.

Los centros de IoT se crean con varias políticas de acceso predeterminadas. Una de estas políticas es la política de servicio, que proporciona permisos suficientes para que un servicio lea y escriba en los puntos finales del centro de IoT. Ejecuta el siguiente comando para obtener una cadena de conexión para tu centro de IoT que se adhiera a la política de servicio:

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

Donde la variable de entorno ${YourIotHub} indica el nombre de tu Azure IoT Hub, como se muestra a continuación.

La cadena de conexión debería verse similar a la siguiente:

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

Anota la cadena de conexión del servicio, la necesitarás más adelante en este tutorial.

note

Si por alguna razón no puedes instalar la CLI de Azure en tu computadora, puedes considerar ejecutar bash con el entorno de CLI de Azure directamente desde el panel de IoT hubs para ayudarte con los siguientes pasos.

Puedes ingresar el comando az anterior directamente aquí para obtener la cadena de conexión.

Descargar el Framework del Servicio de Aplicación Web

Por favor descarga la biblioteca correspondiente según el tipo de sensor que desees usar.

Tipo de Sensor	Dirección de Descarga
Sensor de luz integrado de Wio Terminal	Descargar
Sensor IMU integrado de Wio Terminal	Descargar
Sensor de Humedad del Suelo	Descargar
Sensor de Gas VOC y eCO2 (SGP30)	Descargar
Sensor de Temp&Humedad (SHT40)	Descargar
Módulo Vision AI	Descargar

Abre la biblioteca de la aplicación web en tu editor favorito. Lo siguiente muestra la estructura de archivos vista en VS Code:

Tómate un momento para examinar los siguientes archivos:

Chart-device-data.js es un script del lado del cliente que escucha en el socket web, realiza un seguimiento de cada DeviceId y almacena los últimos 50 puntos de datos entrantes para cada dispositivo. Luego vincula los datos del dispositivo seleccionado al objeto del gráfico.
Index.html maneja el diseño de la interfaz de usuario para la página web y hace referencia a los scripts necesarios para la lógica del lado del cliente.
Event-hub-reader.js es un script del lado del servicio que se conecta al punto final integrado del hub de IoT utilizando la cadena de conexión especificada y el grupo de consumidores. Extrae el DeviceId y EnqueuedTimeUtc de los metadatos en los mensajes entrantes y luego retransmite el mensaje utilizando el método de callback registrado por server.js.
Server.js es un script del lado del servicio que inicializa el socket web y la clase wrapper del Event Hub. Proporciona un callback a la clase wrapper del Event Hub que la clase utiliza para difundir mensajes entrantes al socket web.

Configurar variables de entorno para la aplicación web

Para leer datos de tu hub de IoT, la aplicación web necesita la cadena de conexión de tu hub de IoT y el nombre del grupo de consumidores a través del cual debe leer. Obtiene estas cadenas del entorno del proceso en las siguientes líneas en server.js:

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

Habrá dos métodos para este paso, así que comencemos con el más común.

El primer método. Establece las variables de entorno en tu ventana de comandos con los siguientes comandos. Reemplaza los valores de marcador de posición con la cadena de conexión del servicio para tu hub de IoT y el nombre del grupo de consumidores que creaste anteriormente. No pongas las cadenas entre comillas.

set IotHubConnectionString = YourIoTHubConnectionString
set EventHubConsumerGroup = YourConsumerGroupName

En el segundo método, podemos hacer cambios directamente en el código. Sería adecuado para casos donde, por ejemplo, añadir variables de entorno es tedioso bajo MacOS.

Por favor, abre el archivo server.js con un editor y modifica el código según el nombre del grupo de consumidores que creaste y la cadena de conexión que obtuvimos en el paso2. Consulta la siguiente figura para la modificación.

Ejecutar la Aplicación Web

Por favor, sube el código según el contenido del wiki anterior. Asegúrate de que tu dispositivo esté funcionando y enviando datos.

En la ventana de comandos, ejecuta las siguientes líneas para descargar e instalar los paquetes referenciados e iniciar el sitio web:

npm install
npm start

Deberías ver una salida en la consola que indica que la aplicación web se ha conectado exitosamente a tu hub de IoT y está escuchando en el puerto 3000:

Abrir una página web para ver datos del hub de IoT de Azure

Abre un navegador en http://localhost:3000.

En el cuadro de selección de lista en la esquina superior izquierda, selecciona el número de ID de tu dispositivo. Espera hasta que llegue el siguiente conjunto de datos enviados y podrás observar el gráfico de líneas de los cambios de datos.