从零开始打造基于阿里IoT云平台的LoRa解决方案(4)_在IoT Studio上创建web可视化界面

本篇是 《从零开始，打造基于阿里IoT云平台的LoRa解决方案》系列教程的第4篇，也是最后一篇，将为大家讲解：在IoT Studio上创建web可视化界面。

IoT Studio(原 Link Develop)是阿里云针对物联网场景提供的生产力工具，可覆盖各个 物联网行业核心应用场景，解决物联网开发领域开发链路长、技术栈复杂、协同成本高、 方案移植困难的问题。入口在物联网平台的“开发服务”项。 我们首先需要建立一个项目，以项目维度管理我们的 RAK5205 数据显示 Demo。

进入 IoT Studio:

1-创建项目

点击右侧“项目列表”旁的<新建项目>按钮，创建一个“RAK5205”项目。

2-导入产品

可以看到当前项目，“关联产品”为 0，点击右上角<导入产品>按钮，导入RAK5205产 品:

导入成功后可以看到，“关联出产品”和“关联设备”都变成了 1，下面我们来创建一个 “Web 应用”。

3-创建 web 应用

在左侧栏点击“推荐”下的“Web 可视化开发”，点击“新建应用”进入 Web 可视化开发工作 台，然后选择空白模板进行新建。

进入编辑中，可以改变背景色，添加标题文字，拖动左侧可视化控件里“文字”的控件到 中间工作区，然后再右侧区域修改文字内容。

拖动左侧“卡片”到中间区域，并再右侧修改标题名:

卡片处于选中状态时，右上角有“样式”和“数据”两个标签，“样式”标签如上图，可 以根据需要修改卡片样式，“数据”标签可以绑定数据源，如下图可以绑定设备和设备属性:

配置数据源时，选择产品，关联的设备和属性。点击<验证数据格式>获得通过，之后点击 <确定>完成配置。此时卡片显示的数据就会根据 RAK5205 lora 节点上报的温度数据变化 而变化。按照上面的方法依次绑定 RAK5205 设备的其他属性，效果如下:

点击“保存”，最终效果图如图。点击“预览”就可以看到 Web 应用实际显示效果。点 击“发布”，就可以通过提供的链接来访问该应用了，如果想远程访问需要绑定域名，具 体绑定方法请查看阿里云相关资料。

注:IoT Studio 需和 LinkWAN 在同一账户才能实现数据流转，所以 IoT Studio 的页面布局
和设计，需要根据各自的喜好，在自己的阿里账户中参考上述实践示例自行完成。

OK，到这里，我们就实现了基于LoRa 产品和阿里云 IoT 平台的全套解决方案。

---

搭建一个基于阿里IoT云平台的LoRa解决方案，可以分为四个步骤：
1-配置LoRaWAN网关
2-在阿里物联网平台创建产品和设备
3-配置产品功能，数据解析
4-创建web可视化界面

---