【PBL项目实战】户外智慧农场项目实战系列—

【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接口】的首页。

图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将天气预报接口对接到阿里云组件，实现实时天气预报的可视化展示，是不是很简单呢？如果您期待更多的网页组件的使用以及配置，别走开！敬请期待下一篇!

THE END

关注我们

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

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

本文原创，转载请注明出处！

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