Visualizar datos del sensor en tiempo real desde Azure IoT Hub mediante la característica Web Apps de Azure App ServiceVisualize real-time sensor data from your Azure IoT hub by using the Web Apps feature of Azure App Service

Diagrama integral

Nota

Antes de comenzar a usar este tutorial, configure el dispositivo.Before you start this tutorial, set up your device. En este artículo, se configura el dispositivo de Azure IoT y el centro de IoT Hub, y se implementa una aplicación de ejemplo para ejecutarse en su dispositivo.In the article, you set up your Azure IoT device and IoT hub, and you deploy a sample application to run on your device. La aplicación envía los datos recopilados del sensor a su centro de IoT.The application sends collected sensor data to your IoT hub.

Conocimientos que adquiriráWhat you learn

En este tutorial, obtendrá más información sobre cómo visualizar los datos del sensor en tiempo real que recibe su IoT Hub mediante la ejecución de una aplicación web hospedada en una aplicación web.In this tutorial, you learn how to visualize real-time sensor data that your IoT hub receives by running a web application that is hosted on a web app. Si quiere intentar visualizar los datos en su IoT Hub con Power BI, vea Visualización de datos del sensor en tiempo real desde Azure IoT Hub mediante Power BI.If you want to try to visualize the data in your IoT hub by using Power BI, see Use Power BI to visualize real-time sensor data from Azure IoT Hub.

Qué debe hacerWhat you do

  • Crear una aplicación web en Azure Portal.Create a web app in the Azure portal.
  • Prepare el IoT Hub para el acceso a datos mediante la adición de un grupo de consumidores.Get your IoT hub ready for data access by adding a consumer group.
  • Configurar la aplicación web para leer datos del sensor desde su IoT Hub.Configure the web app to read sensor data from your IoT hub.
  • Cargar una aplicación web para que se hospede en la aplicación web.Upload a web application to be hosted by the web app.
  • Abrir la aplicación web para ver datos de temperatura y humedad en tiempo real desde su IoT Hub.Open the web app to see real-time temperature and humidity data from your IoT hub.

Lo que necesitaWhat you need

  • Instalar el dispositivo, que incluye los siguientes requisitos:Set up your device, which covers the following requirements:

    • Una suscripción de Azure activa.An active Azure subscription
    • Un IoT Hub en su suscripción.An Iot hub under your subscription
    • Una aplicación cliente que envíe mensajes a su IoT Hub.A client application that sends messages to your Iot hub
  • Descargar GitDownload Git

Creación de una aplicación webCreate a web app

  1. En Azure Portal, haga clic en Crear un recurso > Web y móvil > Aplicación web.In the Azure portal, click Create a resource > Web + Mobile > Web App.

  2. Escriba un nombre de trabajo único, compruebe la suscripción, especifique un grupo de recursos y una ubicación, seleccione Anclar al panel y luego haga clic en Crear.Enter a unique job name, verify the subscription, specify a resource group and a location, select Pin to dashboard, and then click Create.

    Se recomienda seleccionar la misma ubicación donde se encuentra el grupo de recursos.We recommend that you select the same location as your resource group.

    Creación de una aplicación web

Adición de un grupo de consumidores a IoT HubAdd a consumer group to your IoT hub

Las aplicaciones usan grupos de consumidores para extraer datos de Azure IoT Hub.Consumer groups are used by applications to pull data from Azure IoT Hub. En este tutorial, se va a crear un grupo de consumidores que un próximo servicio de Azure utilizará para leer los datos de IoT Hub.In this tutorial, you create a consumer group to be used by a coming Azure service to read data from your IoT hub.

Para agregar un grupo de consumidores a su centro de IoT, siga estos pasos:To add a consumer group to your IoT hub, follow these steps:

  1. En el portal de Azure, abra su centro de IoT.In the Azure portal, open your IoT hub.

  2. En el panel izquierdo, haga clic en Puntos de conexión, seleccione Eventos en el panel central, escriba un nombre en Grupos de consumidores en el panel derecho y, a continuación, haga clic en Guardar.In the left pane, click Endpoints, select Events on the middle pane, enter a name under Consumer groups on the right pane, and then click Save.

    Creación de un grupo de consumidores para el IoT Hub

Configuración de la aplicación web para leer datos del IoT HubConfigure the web app to read data from your IoT hub

  1. Abra la aplicación web que acaba de aprovisionar.Open the web app you’ve just provisioned.

  2. Haga clic en Configuración de la aplicación y luego, en Configuración de la aplicación, agregue los siguientes pares clave-valor:Click Application settings, and then, under App settings, add the following key/value pairs:

    ClaveKey ValorValue
    Azure.IoT.IoTHub.ConnectionStringAzure.IoT.IoTHub.ConnectionString Obtenido de la CLI de AzureObtained from Azure CLI
    Azure.IoT.IoTHub.ConsumerGroupAzure.IoT.IoTHub.ConsumerGroup El nombre del grupo de consumidores que agrega a su IoT Hub.The name of the consumer group that you add to your IoT hub
    WEBSITE_NODE_DEFAULT_VERSIONWEBSITE_NODE_DEFAULT_VERSION 8.9.48.9.4

    Agregar la configuración a una aplicación web con pares clave-valor

  3. Haga clic en Configuración de la aplicación, en Configuración General, active o desactive la opción Web sockets y, después, haga clic en Guardar.Click Application settings, under General settings, toggle the Web sockets option, and then click Save.

    Activar o desactivar la opción Web sockets

Carga de una aplicación web para que se hospede en la aplicación webUpload a web application to be hosted by the web app

Hemos facilitado el acceso a una aplicación web en GitHub que muestra datos del sensor en tiempo real desde su IoT Hub.On GitHub, we've made available a web application that displays real-time sensor data from your IoT hub. Todo lo que tiene que hacer es configurar la aplicación web para que funcione con un repositorio de Git, descargarla de GitHub y cargarla en Azure para que la hospede la aplicación web.All you need to do is configure the web app to work with a Git repository, download the web application from GitHub, and then upload it to Azure for the web app to host.

  1. En la aplicación web, haga clic en Opciones de implementación > Elegir origen > Repositorio de Git local y después pulse Aceptar.In the web app, click Deployment Options > Choose Source > Local Git Repository, and then click OK.

    Configuración de la implementación de la aplicación web para usar el repositorio de Git local

  2. Haga clic en Credenciales de implementación, cree un nombre de usuario y una contraseña que se usarán para conectarse al repositorio de Git de Azure y haga clic en Guardar.Click Deployment Credentials, create a user name and password to use to connect to the Git repository in Azure, and then click Save.

  3. Haga clic en Información general y anote el valor de la URL de clonación de Git.Click Overview, and note the value of Git clone url.

    Obtener la dirección URL de clonación de Git de la aplicación web

  4. Abra una ventana de comando o de terminal en el equipo local.Open a command or terminal window on your local computer.

  5. Descargue la aplicación web de GitHub y cárguela en Azure para que se hospede en la aplicación web.Download the web app from GitHub, and upload it to Azure for the web app to host. Para ello, ejecute los siguientes comandos:To do so, run the following commands:

    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 <Git clone URL>
    git push webapp master:master
    

    Nota

    La <dirección URL de clonación de GIT> es la dirección URL del repositorio de Git que se encuentra en la página Overview (Información general) de la aplicación web.<Git clone URL> is the URL of the Git repository found on the Overview page of the web app.

Abra la aplicación web para ver los datos de temperatura y humedad en tiempo real desde su IoT Hub.Open the web app to see real-time temperature and humidity data from your IoT hub

En la página Overview (Información general) de la aplicación web, haga clic en la dirección URL para abrir la aplicación web.On the Overview page of your web app, click the URL to open the web app.

Obtención de la dirección URL de la aplicación web

Verá los datos de temperatura y humedad en tiempo real desde su IoT Hub.You should see the real-time temperature and humidity data from your IoT hub.

Página de aplicación web que muestra la temperatura y humedad en tiempo real

Nota

Asegúrese de que la aplicación de ejemplo se ejecuta en el dispositivo.Ensure the sample application is running on your device. Si no es así, obtendrá un gráfico en blanco; puede consultar los tutoriales de configuración del dispositivo.If not, you will get a blank chart, you can refer to the tutorials under Setup your device.

Pasos siguientesNext steps

Ha usado correctamente una aplicación web para visualizar datos del sensor en tiempo real desde su IoT Hub.You've successfully used your web app to visualize real-time sensor data from your IoT hub.

Para obtener una forma alternativa de visualizar los datos desde Azure IoT Hub, vea Visualización de datos del sensor en tiempo real desde Azure IoT Hub mediante Power BI.For an alternative way to visualize data from Azure IoT Hub, see Use Power BI to visualize real-time sensor data from your IoT hub.

Para continuar la introducción a Azure IoT Hub y explorar otros escenarios de IoT, consulte lo siguiente:To continue to get started with Azure IoT Hub and to explore other IoT scenarios, see the following: