原文链接 https://mp.weixin.qq.com/s/jditkIEd-UK6cSQyCC_-Eg
本系列以户外智慧农场项目实战为项目式学习PBL案例,主要讲解ESP32主控板与阿里云物联网平台的通讯过程。当然,本文的使用方法理论上通用于所有ESP32主控,我们也开源了Mind+和米思齐Mixly双平台的阿里云物联网平台图形化库,以及工业级485变送器图形化库。大家可以在如下仓库找到:
Mixly阿里云物联网平台MQTT图形化库:
https://gitee.com/LNSFAIoT/Mixly-Alibaba-Cloud-IoT-Platform-MQTT-graphical-library.git
Mind+阿里云物联网平台JSON解析图形化库:
https://gitee.com/LNSFAIoT/Mindplus-Alibaba-Cloud-IoT-Platform-JSON-parsing-graphical-library.git
Mind+多合一空气质量传感器(RS485)图形化库:
https://gitee.com/LNSFAIoT/mindplus-all-in-one-air-quality-sensor.git
Mind+多合一土壤传感器(RS485)图形化库:
https://gitee.com/LNSFAIoT/mindplus-all-in-one-soil-sensor.git
Mind+多合一气象传感器(RS485)图形化库:
https://gitee.com/LNSFAIoT/mindplus-all-in-one-weather-sensor.git
Mind+Mixly双平台ESP32 LED点阵大屏图形化库:
https://gitee.com/LNSFAIoT/Mindplus-Mixly-ESP32-LED-matrix-large-screen-graphical-library.git
其他开源系列请见
https://gitee.com/LNSFAIoT
本系列将会有:
1、【PBL项目实战】户外智慧农场项目实战系列——阿里云物联网平台的开通与云端可视化应用的新建
2、【PBL项目实战】户外智慧农场项目实战系列——产品与设备的新建及与云端可视化应用的关联
3、【PBL项目实战】户外智慧农场项目实战系列——云端应用可视化页面开发及设备数据源的配置与调试
4、【PBL项目实战】户外智慧农场项目实战系列——Mind+Mixly双平台ESP32数据上云及云端可视化实时展示
5、【PBL项目实战】户外智慧农场项目实战系列——天气预报API接口对接https://mp.weixin.qq.com/s/jditkIEd-UK6cSQyCC_-Eg
6、【PBL项目实战】户外智慧农场项目实战系列——文本与图片、背景云端响应
7、【PBL项目实战】户外智慧农场项目实战系列——Mind+Mixly双平台RS485工业级多合一空气质量传感器数据上云及云端可视化实时展示
8、【PBL项目实战】户外智慧农场项目实战系列——Mind+Mixly双平台RS485工业级多合一土质检测传感器数据上云及云端可视化实时展示
9、【PBL项目实战】户外智慧农场项目实战系列——Mind+Mixly双平台RS485工业级多合一气象传感器数据上云及云端可视化实时展示
10、【PBL项目实战】户外智慧农场项目实战系列——植物园花果识别与云端实时同步
11、【PBL项目实战】户外智慧农场项目实战系列——云端视频流直播
12、【PBL项目实战】户外智慧农场项目实战系列——图表、二维数据表等可视化应用
13、【PBL项目实战】户外智慧农场项目实战系列——Mind+Mixly双平台LED屏本地大屏显示
户外智慧农场项目中天气预报也是其中不可或缺的一部分,天气预报可以在阿里云IoT Studio中进行快速配置,本文主要讲解阿里云通过API接口对接天气预报的过程。
1.获取天气预报API接口
从网址https://tianqiapi.com直接进入【天气预报API接口】的首页。
图1 天气预报API接口首页
点击右上角的【网页插件】,即红色箭头所指向的红色框。
图2 点击【网页插件】
在【网页插件】页面会有多种天气预报的样式,选择合适的样式后,点击该天气预报样式卡片的【查看代码】,本例使用如图3所示的样式。
图3 选择天气预报样式
在弹窗中可以看到天气预报API接口的链接。如图4所示,在【插件代码】下方,选中并复制【src字段】后的链接,如图5所示红色箭头指向的红色框的内容。
图4 获取API接口
2.阿里云对接天气预报
可从https://studio.iot.aliyun.com/projects 选择您需要绑定的项目进入Web应用。
进入Web应用编辑页面,从左侧的【组件】中找到【基础组件】下的【iframe】,将其拖拽放置在画布中,如图5所示。
图5 拖拽【iframe】组件
如图6所示,选中【iframe】组件,可以看到右侧配置栏中可以选择【关联链接】的【配置】。
图6 配置【iframe】组件
在弹出的【配置链接】对话栏中将图复制的天气预报API接口粘贴至【链接内容】输入框中。
图7【配置链接】弹窗
如图8所示,输入完毕后点击对话框左下角【确认】。
图8 输入API链接
确认后可以看到【iframe】组件已经配置完毕,已显示这两天的天气情况,证明阿里云成功对接天气预报API接口。
图9 成功显示天气预报内容
调整【iframe】组件的大小,放置在适当位置,修改布局后的Web应用界面如图10所示。配置完组件后及时点击右上角圆形✔状的按钮保存。
图10 保存配置
以上就完成了阿里云与天气预报API接口对接的过程。
通过API将天气预报接口对接到阿里云组件,实现实时天气预报的可视化展示,是不是很简单呢?如果您期待更多的网页组件的使用以及配置,别走开!敬请期待下一篇!
更多精彩内容请关注我们的微信公众号: 人工智能素养教育共同体,欢迎添加我们的企业微信,加入智慧农场项目学习群。
更多PBL开源项目请前往微信公众号查看。
本文原创,转载请注明出处!
觉得内容还不错的话,欢迎一键三连支持原创。