Vimos  en  un post anterior  cómo es  posible usar Power BI de Azure  para visualizar datos de los sensores en tiempo real desde Azure IoT, pues bien,  existe otra posibilidad para  visualizar datos de los sensores en tiempo real que el hub de IoT recibe , que es  ejecutando una aplicación web que está alojada en la nube de Azure .

Para  cumplir con nuestro propósito de ver los datos de telemetría de nuestro dispositivo de Iot conectado a la nube de Iot Azure Edge ,    veremos como crear una aplicación web en el portal de  Azure preparando su hub de IoT para acceso a datos mediante la adición de un grupo de consumidores. Hecho esto configuraremos una aplicación web para leer datos del sensor de su hub de IoT y subiremos  esta aplicación web  a la nube de Azure ,la cual  nos permitirá  ver desde un navegador los datos de telemetría enviados  desde su hub de IoT ¿le interesa el tema? pues si es así empezemos.

Antes de empezar   deberíamos   tener configurado  un dispositivo Iot de Azure como por ejemplo  algunos que hemos visto como puede ser una Raspberry Pi 3  , un ESP8266  o incluso un dispositivo simulado.  Como hemos comentado en otros  posts todos esos  dispositivos de Azure IoT  hub  deben implementar una aplicación de ejemplo la cual  enviará  datos que  los sensores recogen del mundo físico ( humedad , temperatura, presencia, etc  ) a su hub de IoT.

Asimismo  teniendo dispositivos IoT enviando mensajes  de telemetría a la nube de Azure Iot Edge, para lograr persistencia en la nube de Azure  necesitamos una cuenta de Azure storage  así como  una aplicación Azure  para poder almacenar los mensajes de hub de IoT en el almacenamiento blob  como hemos visto en otros posts

Crear una aplicación web

1. En el portal de Azure, haga clic en Crear un recurso > Web y móvil > Aplicación Web > Aplicación web
2. Escriba un nombre único para la aplicacion  y anotar pues nos sera util para acceder a esta
3. Verificar la suscripción  que para este ejmeplo pude ser «Evaluacion gratuita» si no dispone de otro recurso de este tipo
4. Especifique un grupo de recursos  pinchando en Usar existente y  pinchando en el disponible
5. Finalmente  seleccione Anclar al  panel y a continuación, haga clic en Crear.
6. Este proceso puede tardar varios minutos dada la complejidad de  su realización ( localizar una máquina virtual disponible , obtener permisos , crear la instancia web ,etc)
7. En este momento  , copie vaya nuevamente al servidor web –>introducción y copie el valor del campo URL ( sera del tipo   https://xxxx.azurewebsites.net/)    de modo que como debería estar  corriendo  su web se obtendrá una respuesta  parecida  la siguiente si copiamos dicha url en un navegador:

 

Añadir un grupo de consumidores a su hub de IoT

Los grupos de consumidores son utilizados por las aplicaciones para extraer datos desde Azure IoT, por ello necesitamos crear un grupo de consumidores para ser utilizado por un servicio de Azure para  leer los  datos de su centro de IoT.

Para agregar un grupo de consumidores a su hub de IoT, siga estos pasos:

1. En el portal de Azure, abra su hub de IoT.
2. En el panel izquierdo  casi en la parte más inferior en el apartado Mensajería , seleccione Puntos de conexión y  haga clic en este.
3. Seleccione en el panel central  events  , introduzca un nombre en grupos de consumidores en el panel derecho y haga clic en Guardar.

Configurar la aplicación web para leer datos de su centro de IoT

1. Abra en Azure la aplicación web que ha aprovisionado.
2. Haga clic en el marco izquierdo casi  al final en CONFIGURACION->Configuración de la aplicación, y luego en configuración de la aplicación, agregue los siguientes pares clave/valor:

   Clave	Valor
   Azure.IoT.IoTHub.ConnectionString	Obtenidos desde el explorador de iothub  en  Azure IOT HUB >xx – Explorador de dispositivos–>OD del Dispositivo xxx –>cadena de conexion clave principal
   Azure.IoT.IoTHub.ConsumerGroup	El nombre del grupo de consumidores que se agrega a su hub de IoT cumplimentado en el  apartado anterior

   

3. Haga clic en configuración de la aplicación, debajo de configuración General, activar la opción de  Web  Sockets  ( esta desactivado por defecto ) y a continuación, haga clic en Guardar.

Subir una aplicación web

En GitHub, Microsoft ha puesto a nuestra disposición muchas aplicaciones web de ejemplo para desplegar en Azure . Nos interesa  el código en node.js  de una aplicación  web completa que puede mostrar los  datos de telemetría  en tiempo real desde su hub de IoT .

Todo lo que se  necesita hacer es configurar la aplicación web para trabajar con un repositorio Git, descargar la aplicación web de GitHub y luego subir a Azure de la aplicación web al host.

El repositorio web-apps-node-iot-hub-data-visualization contiene el código en node para desplegar una aplicación web en la nube de Azure, que puede leer los datos de temperatura y humedad del IoT hub y mostrar los datos en tiempo real en un gráfico de líneas en una página web.

Los navegadores compatibles son

Navegador	La menor versión
Internet Explorer	10
Borde	14
Firefox	50
Cromo	49
Safari	10
Ópera	43
iOS Safari	9.3
mini Opera	TODAS
Navegador de Android	4.3
Chrome para Android	56

Los pasos  a seguir para desplegar esta aplicación son los siguientes:

1. En la aplicación web, haga clic en IMPLEMENTACION ->Opciones de implementación > Elegir origen > Repositorio de Git Local y haga clic en Aceptar.
2. Tenga en cuenta que para modificar o eliminar  el origen de implementación  que acaba de crear is fuera el caso , primero necesitara desconectar este origen   por lo si lo hace tendrá  que volver a  ir a  IMPLEMENTACION ->Opciones de implementación   y volver a empezar con el proceso
3. Haga clic en Credenciales de implementación, crear un nombre de usuario y contraseña para conectarse con el repositorio de Git en Azure y a continuación, haga clic en Guardar.
4. Haga clic en Introducción y anote el valor de Git clone url (a la izquierda justo debajo de Git/nombre de usuario de implementación).
5. Abra una ventana de terminal en el equipo local o un comando.
6. Descargar la aplicación web de GitHub y subirlo a Azure de la aplicación web al host. Para ello, ejecute los siguientes comandos:

• git clone https://github.com/Azure-Samples/web-apps-node-iot-hub-data-visualization.git

• cd web-apps-node-iot-hub-data-visualization
• git remote add webapp uri  (uri es la url del repositorio Git obtenida  en la página de Resumen de la aplicación web que se obtiene al pulsar Introducción).
• git push webapp master:master  (se pedirán las credenciales  de Git que introdujo en en el apartado anterior en  la página de Overview , tenga en cuenta la Git clone url .)
• En resumen  estos son todos los comandos desde el interfaz  delñinea de comandos (cmd)    lanzados asi como la salida de esta:

C:\Users\Carlos>git clone https://github.com/Azure-Samples/web-apps-node-iot-hub-data-visualization.git
Cloning into ‘web-apps-node-iot-hub-data-visualization’…
remote: Counting objects: 35, done.
remote: Total 35 (delta 0), reused 0 (delta 0), pack-reused 35
Unpacking objects: 100% (35/35), done.

C:\Users\Carlos>cd web-apps-node-iot-hub-data-visualization

C:\Users\Carlos\web-apps-node-iot-hub-data-visualization>git remote add webapp https://[email protected]:443/Webestia.git

C:\Users\Carlos\web-apps-node-iot-hub-data-visualization>git push webapp master:master
Counting objects: 35, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (30/30), done.
Writing objects: 100% (35/35), 77.64 KiB | 3.23 MiB/s, done.
Total 35 (delta 6), reused 0 (delta 0)
remote: Updating branch ‘master’.
remote: Updating submodules.
remote: Preparing deployment for commit id ‘4b9c09be9b’.
remote: Generating deployment script.
remote: Generating deployment script for node.js Web Site
remote: Generated deployment script files
remote: Running deployment command…
remote: Handling node.js deployment.
remote: KuduSync.NET from: ‘D:\home\site\repository’ to: ‘D:\home\site\wwwroot’
remote: Deleting file: ‘hostingstart.html’
remote: Copying file: ‘.eslintignore’
remote: Copying file: ‘.eslintrc’
remote: Copying file: ‘.gitignore’
remote: Copying file: ‘.travis.yml’
remote: Copying file: ‘LICENSE’
remote: Copying file: ‘package.json’
remote: Copying file: ‘README.md’
remote: Copying file: ‘server.js’
remote: Copying file: ‘IoThub\iot-hub.js’
remote: Copying file: ‘public\index.html’
remote: Copying file: ‘public\javascripts\Chart.min.js’
remote: Copying file: ‘public\javascripts\index.js’
remote: Copying file: ‘public\javascripts\jquery-2.1.4.min.js’
remote: Copying file: ‘public\stylesheets\style.css’
remote: Using start-up script server.js from package.json.
remote: Generated web.config.
remote: The package.json file does not specify node.js engine version constraints.
remote: The node.js application will run with the default node.js version 6.9.1.
remote: Selected npm version 3.10.8
remote: ….
remote: npm WARN deprecated [email protected]: This package is no longer supported. It’s now a built-in Node module. If you’ve depended on crypto, you should switch to the one that’s built-in.
remote: …………………………………………..
remote: [email protected] D:\home\site\wwwroot
remote: +– [email protected]
remote: | +– [email protected]
remote: | | +– [email protected]
remote: | | | +– [email protected]
remote: | | | | +– [email protected]
remote: | | | | +– [email protected]
remote: | | | | +– [email protected]
remote: | | | | +– [email protected]
remote: | | | | `– [email protected]
remote: | | | `– [email protected]
remote: | | +– [email protected]
remote: | | +– [email protected]
remote: | | | `– [email protected]
remote: | | +– [email protected]
remote: | | +– [email protected]
remote: | | `– [email protected]
remote: | +– [email protected]
remote: | | `– [email protected]
remote: | +– [email protected]
remote: | `– [email protected]
remote: +– [email protected]
remote: | +– [email protected]
remote: | | +– [email protected]
remote: | | | `– [email protected]
remote: | | `– [email protected]
remote: | +– [email protected]
remote: | +– [email protected]
remote: | +– [email protected]
remote: | +– [email protected]
remote: | +– [email protected]
remote: | +– [email protected]
remote: | | `– [email protected]
remote: | +– [email protected]
remote: | +– [email protected]
remote: | +– [email protected]
remote: | +– [email protected]
remote: | +– [email protected]
remote: | | +– [email protected]
remote: | | | `– [email protected]
remote: | | +– [email protected]
remote: | | `– [email protected]
remote: | +– [email protected]
remote: | +– [email protected]
remote: | +– [email protected]
remote: | +– [email protected]
remote: | | `– [email protected]
remote: | +– [email protected]
remote: | +– [email protected]
remote: | +– [email protected]
remote: | | +– [email protected]
remote: | | `– [email protected]
remote: | +– [email protected]
remote: | +– [email protected]
remote: | +– [email protected]
remote: | | +– [email protected]
remote: | | | `– [email protected]
remote: | | +– [email protected]
remote: | | +– [email protected]
remote: | | | +– [email protected]
remote: | | | `– [email protected]
remote: | | +– [email protected]
remote: | | `– [email protected]
remote: | +– [email protected]
remote: | +– [email protected]
remote: | | `– [email protected]
remote: | +– [email protected]
remote: | `– [email protected]
remote: +– [email protected]
remote: `– [email protected]
remote: +– [email protected]
remote: `– [email protected]
remote:
remote: Finished successfully.
remote: Running post deployment command(s)…
remote: Deployment successful.
To https://webestia.scm.azurewebsites.net:443/Webestia.git
* [new branch] master -> master

C:\Users\Carlos\web-apps-node-iot-hub-data-visualization>

• Ahora  ya puede abrir la aplicación web para ver los datos de temperatura y humedad en tiempo real desde su hub de IoT. En este momento  ,  vaya nuevamente al servidor web –>introducción y copie el valor del campo URL ( sera del tipo   https://xxxx.azurewebsites.net/)    de modo que como debería estar  corriendo  su web se obtendrá una respuesta  parecida  la siguiente si copiamos dicha url en un navegador:

 

En la página de su aplicación web, haga clic en la URL para abrir la aplicación web.

Debería ver los datos de temperatura y humedad en tiempo real desde su hub de IoT.

 

.

 

Fuente :  https://docs.microsoft.com/en-gb/azure/iot-hub/iot-hub-live-data-visualization-in-web-apps