使用 Azure 应用服务的 Web 应用功能可视化 Azure IoT 中心的实时传感器数据

端到端关系图

Note

开始本教程前,请设置设备。 在本文中,将设置 Azure IoT 设备和 IoT 中心,并部署一个在设备上运行的示例应用程序。 该应用程序会将收集的传感器数据发送到 IoT 中心。

学习内容

本教程讲解如何通过运行一个托管在 Web 应用上的 Web 应用程序来可视化 IoT 中心接收的实时传感器数据。

准备工作

  • 在 Azure 门户中创建 Web 应用。
  • 添加一个使用者组,让 IoT 中心做好数据访问准备。
  • 将 Web 应用配置为从 IoT 中心读取传感器数据。
  • 上传要在 Web 应用中托管的 Web 应用程序。
  • 打开该 Web 应用,查看 IoT 中心的实时温度和湿度数据。

需要什么

  • 设置设备,其中涵盖以下要求:
    • 一个有效的 Azure 订阅。
    • 已在订阅中创建一个 IoT 中心
    • 一个可向 IoT 中心发送消息的客户端应用程序
  • 下载 Git

创建 Web 应用

  1. Azure 门户中,单击“创建资源” > “Web + 移动” > “Web 应用”。
  2. 输入唯一的作业名称,验证订阅,指定资源组和位置,选择“固定到仪表板”,并单击“创建”。

    建议选择与资源组相同的位置。 这有助于加快处理速度,并降低数据传输的费用。

    创建 Web 应用

将使用者组添加到 IoT 中心

应用程序使用使用者组从 Azure IoT 中心提取数据。 在本教程中,将创建一个使用者组,供即将推出的 Azure 服务用来从 IoT 中心读取数据。

要将使用者组添加到 IoT 中心,请执行以下步骤:

  1. Azure 门户中打开 IoT 中心。
  2. 在左窗格中单击“终结点”,在中间窗格中选择“事件”,在右窗格的“使用者组”下面输入名称,并单击“保存”。

    在 IoT 中心创建使用者组

将 Web 应用配置为从 IoT 中心读取数据

  1. 打开刚刚预配的 Web 应用。
  2. 单击“应用程序设置”,并在“应用设置”下面添加以下键/值对:

    Azure.IoT.IoTHub.ConnectionString 从 iothub-explorer 获取
    Azure.IoT.IoTHub.ConsumerGroup 添加到 IoT 中心的使用者组的名称

    将包含键/值对的设置添加到 Web 应用

  3. 单击“常规设置”下的“应用程序设置”,切换“Web 套接字”选项,并单击“保存”。

    切换 Web 套接字选项

上传要在 Web 应用中托管的 Web 应用程序

我们在 GitHub 上提供了一个 Web 应用程序,它可以显示 IoT 中心的实时传感器数据。 只需将 Web 应用配置为使用 Git 存储库,从 GitHub 下载该 Web 应用程序,并将其上传到 Azure,以便在 Web 应用中托管。

  1. 在 Web 应用中,单击“部署选项” > “选择源” > “本地 Git 存储库”,并单击“确定”。

    将 Web 应用部署配置为使用本地 Git 存储库

  2. 单击“部署凭据”,创建用于连接到 Azure 中 Git 存储库的用户名和密码,并单击“保存”。

  3. 单击“概述”并记下“Git clone URL”的值。

    获取 Web 应用的“Git clone URL”

  4. 在本地计算机上打开命令提示符或终端窗口。

  5. 从 GitHub 下载 Web 应用并将它上传到 Azure,以便在 Web 应用中托管。 要执行此项操作,请运行以下命令:

    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
    

    Note

    “Git 克隆 URL”是 Web 应用的“概述”页中显示的 Git 存储库的 URL。<>

打开该 Web 应用,查看 IoT 中心的实时温度和湿度数据

在 Web 应用的“概述”页上,单击 URL 打开 Web 应用。

获取 Web 应用的 URL

此时应会看到 IoT 中心的实时温度和湿度数据。

显示实时温度和湿度的 Web 应用页

Note

确保示例应用程序正在设备上运行。 如果没有,将会得到空白图表,可参考设置设备中的教程。

后续步骤

现已成功使用 Web 应用可视化 IoT 中心的实时传感器数据。

若要继续了解 Azure IoT 中心入门知识并浏览其他 IoT 方案,请参阅以下文章: