【PBL项目实战】户外智慧农场项目实战系列——5.天气预报API接口对接

【PBL项目实战】户外智慧农场项目实战系列——5.天气预报API接口对接

原文链接  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接口】的首页。

【PBL项目实战】户外智慧农场项目实战系列——5.天气预报API接口对接_第1张图片

图1 天气预报API接口首页

点击右上角的【网页插件】,即红色箭头所指向的红色框。

【PBL项目实战】户外智慧农场项目实战系列——5.天气预报API接口对接_第2张图片

图2 点击【网页插件

在【网页插件】页面会有多种天气预报的样式,选择合适的样式后,点击该天气预报样式卡片的【查看代码】,本例使用如图3所示的样式。

【PBL项目实战】户外智慧农场项目实战系列——5.天气预报API接口对接_第3张图片

【PBL项目实战】户外智慧农场项目实战系列——5.天气预报API接口对接_第4张图片

图3 选择天气预报样式

在弹窗中可以看到天气预报API接口的链接。如图4所示,在【插件代码】下方,选中并复制【src字段】后的链接,如图5所示红色箭头指向的红色框的内容。

【PBL项目实战】户外智慧农场项目实战系列——5.天气预报API接口对接_第5张图片

图4 获取API接口

2.阿里云对接天气预报

可从https://studio.iot.aliyun.com/projects 选择您需要绑定的项目进入Web应用

进入Web应用编辑页面,从左侧的【组件】中找到【基础组件】下的【iframe】,将其拖拽放置在画布中,如图5所示。

【PBL项目实战】户外智慧农场项目实战系列——5.天气预报API接口对接_第6张图片

图5 拖拽【iframe】组件

如图6所示,选中【iframe】组件,可以看到右侧配置栏中可以选择【关联链接】的【配置】。

【PBL项目实战】户外智慧农场项目实战系列——5.天气预报API接口对接_第7张图片

图6 配置【iframe】组件

在弹出的【配置链接】对话栏中将图复制的天气预报API接口粘贴至【链接内容】输入框中。

【PBL项目实战】户外智慧农场项目实战系列——5.天气预报API接口对接_第8张图片

图7【配置链接】弹窗

如图8所示,输入完毕后点击对话框左下角【确认】。

【PBL项目实战】户外智慧农场项目实战系列——5.天气预报API接口对接_第9张图片

图8 输入API链接

确认后可以看到【iframe】组件已经配置完毕,已显示这两天的天气情况,证明阿里云成功对接天气预报API接口。

【PBL项目实战】户外智慧农场项目实战系列——5.天气预报API接口对接_第10张图片

图9 成功显示天气预报内容

调整【iframe】组件的大小,放置在适当位置,修改布局后的Web应用界面如图10所示。配置完组件后及时点击右上角圆形✔状的按钮保存。

【PBL项目实战】户外智慧农场项目实战系列——5.天气预报API接口对接_第11张图片

图10 保存配置

以上就完成了阿里云与天气预报API接口对接的过程。

通过API将天气预报接口对接到阿里云组件,实现实时天气预报的可视化展示,是不是很简单呢?如果您期待更多的网页组件的使用以及配置,别走开!敬请期待下一篇!

THE   END

关注我们

       更多精彩内容请关注我们的微信公众号:  人工智能素养教育共同体,欢迎添加我们的企业微信,加入智慧农场项目学习群。 

        更多PBL开源项目请前往微信公众号查看。

本文原创,转载请注明出处!

觉得内容还不错的话,欢迎一键三连支持原创。 

你可能感兴趣的:(阿里云,物联网,大数据,人工智能,百度云)