【阿里云IoT+YF3300】13.阿里云IoT Studio WEB监控界面构建

简介: Web可视化开发是阿里云IoT Studio中比较重要的一个功能,通过可视化拖拽的方式,方便地将各种图表组件与设备相关的数据源关联,无需编程,即可将物联网平台上接入的设备数据可视化展现。

  Web可视化开发是阿里云IoT Studio中比较重要的一个功能,通过可视化拖拽的方式,方便地将各种图表组件与设备相关的数据源关联,无需编程,即可将物联网平台上接入的设备数据可视化展现。
  目前支持的组件如下图所示:
图片1.png
工业组件.PNG
组件开发.PNG
(还支持组件开发,目前处在内测之中)
  通过可视化拖拽的方式,方便地将各种图表组件与设备相关的数据源关联,无需编程,即可将物联网平台上接入的设备数据可视化展现。
  我们的对接的硬件平台依然是YF3300,相关的配置如下:
图片2.png
  当前物联网平台已经直接集成了IoT Studio,如下图所示:
图片3.png
  首先我们在阿里云上构建YF3300的物模型,并在此基础上,我们添加温度和湿度这两个属性。
图片4.png
  阿里云IoT Studio中的设备管理和物联网平台中的设备管理有些不同,针对IoT Studio来说,是以项目为单位的。产品和设备在同一个项目内是共享的,在不同项目之间是隔离的。因此,为使得IoT Studio中具有访问产品/设备的权限,必须将物联网平台中的设备管理中的产品关联到项目中,或者直接在项目下创建产品和设备(在项目下创建的产品和设备,将直接显示在物联网平台的设备管理模块中)。
  在阿里云IoT Studio页面可以新建产品和设备,也可以绑定阿里云物联网平台中的产品和设备。并且在阿里云IoT Studio页面创建的设备,自动会出现在阿里云物联网平台中。
图片5.png
图片6.png
  我们拖拉两个仪表盘,和I1和I2还有继电器Q1输出相关的组件。
图片7.png
  相关的组件要和产品和物模型进行绑定,如下图所示:
图片8.png
  相关配置完成后,直接发布即可。
  在浏览器中,我们会直接看到对应的数据和状态发生变化,并且可以直接操作开关,控制实际的物联网设备。
图片9.png
  想体验阿里云IoT平台的网友,可以单击如下链接:https://dev.iot.aliyun.com/sale?source=deveco_partner_yefan

相关实践学习
钉钉群中如何接收IoT温控器数据告警通知
本实验主要介绍如何将温控器设备以MQTT协议接入IoT物联网平台,通过云产品流转到函数计算FC,调用钉钉群机器人API,实时推送温湿度消息到钉钉群。
阿里云AIoT物联网开发实战
本课程将由物联网专家带你熟悉阿里云AIoT物联网领域全套云产品,7天轻松搭建基于Arduino的端到端物联网场景应用。 开始学习前,请先开通下方两个云产品,让学习更流畅: IoT物联网平台:https://iot.console.aliyun.com/ LinkWAN物联网络管理平台:https://linkwan.console.aliyun.com/service-open
相关文章
|
9天前
|
安全 Linux 开发工具
零基础构建开源项目OpenIM桌面应用和pc web- Electron篇
OpenIM 为开发者提供开源即时通讯 SDK,作为 Twilio、Sendbird 等云服务的替代方案。借助 OpenIM,开发者可以构建安全可靠的即时通讯应用,如 WeChat、Zoom、Slack 等。 本仓库基于开源版 OpenIM SDK 开发,提供了一款基于 Electron 的即时通讯应用。您可以使用此应用程序作为 OpenIM SDK 的参考实现。本项目同时引用了 @openim/electron-client-sdk 和 @openim/wasm-client-sdk,分别为 Electron 版本和 Web 版本的 SDK,可以同时构建 PC Web 程序和桌面应用(Wi
27 2
|
2月前
|
缓存 安全 搜索推荐
阿里云先知安全沙龙(北京站) ——浅谈Web快速打点
信息收集是网络安全中的重要环节,常用工具如Hunter、Fofa和扫描工具可帮助全面了解目标系统的网络结构与潜在漏洞。遇到默认Nginx或Tomcat 404页面时,可通过扫路径、域名模糊测试、搜索引擎缓存等手段获取更多信息。AllIN工具(GitHub: P1-Team/AllIN)能高效扫描网站路径,发现敏感信息。漏洞利用则需充分准备,以应对突发情况,确保快速拿下目标站点。 简介:信息收集与漏洞利用是网络安全的两大关键步骤。通过多种工具和技术手段,安全人员可以全面了解目标系统,发现潜在漏洞,并制定有效的防御和攻击策略。
|
2月前
|
安全 应用服务中间件 网络安全
实战经验分享:利用免费SSL证书构建安全可靠的Web应用
本文分享了利用免费SSL证书构建安全Web应用的实战经验,涵盖选择合适的证书颁发机构、申请与获取证书、配置Web服务器、优化安全性及实际案例。帮助开发者提升应用安全性,增强用户信任。
|
3月前
|
监控 前端开发 JavaScript
使用 MERN 堆栈构建可扩展 Web 应用程序的最佳实践
使用 MERN 堆栈构建可扩展 Web 应用程序的最佳实践
58 6
|
3月前
|
存储 消息中间件 缓存
构建互联网高性能WEB系统经验总结
如何构建一个优秀的高性能、高可靠的应用系统对每一个开发者至关重要
43 2
|
3月前
|
JSON 前端开发 API
使用Python和Flask构建简易Web API
使用Python和Flask构建简易Web API
170 3
|
3月前
|
机器学习/深度学习 数据采集 Docker
Docker容器化实战:构建并部署一个简单的Web应用
Docker容器化实战:构建并部署一个简单的Web应用
|
3月前
|
SQL 安全 前端开发
PHP与现代Web开发:构建高效的网络应用
【10月更文挑战第37天】在数字化时代,PHP作为一门强大的服务器端脚本语言,持续影响着Web开发的面貌。本文将深入探讨PHP在现代Web开发中的角色,包括其核心优势、面临的挑战以及如何利用PHP构建高效、安全的网络应用。通过具体代码示例和最佳实践的分享,旨在为开发者提供实用指南,帮助他们在不断变化的技术环境中保持竞争力。
|
3月前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
3月前
|
PHP 开发者
深入浅出PHP:构建你的第一个Web应用
【10月更文挑战第35天】在数字时代的浪潮中,掌握编程技能已成为通往未来的钥匙。本文将带你从零开始,一步步走进PHP的世界,解锁创建动态网页的魔法。通过浅显易懂的语言和实际代码示例,我们将共同打造一个简单但功能强大的Web应用。无论你是编程新手还是希望扩展技能的老手,这篇文章都将是你的理想选择。让我们一起探索PHP的魅力,开启你的编程之旅!