【PBL项目实战】户外智慧农场项目实战系列——5.天气预...
本帖最后由 岭师人工智能素养教育共同体 于 2022-10-4 13:14 编辑【PBL项目实战】户外智慧农场项目实战系列——5.天气预报API接口对接
https://mp.weixin.qq.com/s/jditkIEd-UK6cSQyCC_-Eg本系列以户外智慧农场项目实战为项目式学习PBL案例，主要讲解ESP32主控板与阿里云物联网平台的通讯过程。当然，本文的使用方法理论上通用于所有ESP32主控，我们也开源了Mind+和米思齐Mixly双平台的阿里云物联网平台图形化库。大家可以在如下仓库找到：
Mixly阿里云物联网平台MQTT图形化库：https://gitee.com/LNSFAIoT/Mixly-Alibaba-Cloud-IoT-Platform-MQTT-graphical-library.gitMind+阿里云物联网平台JSON解析图形化库：https://gitee.com/LNSFAIoT/Mindplus-Alibaba-Cloud-IoT-Platform-JSON-parsing-graphical-library.gitMind+多合一空气质量传感器（RS485）图形化库：https://gitee.com/LNSFAIoT/mindplus-all-in-one-air-quality-sensor.gitMind+多合一土壤传感器（RS485）图形化库：https://gitee.com/LNSFAIoT/mindplus-all-in-one-soil-sensor.gitMind+多合一气象传感器（RS485）图形化库：https://gitee.com/LNSFAIoT/mindplus-all-in-one-weather-sensor.gitMind+Mixly双平台ESP32 LED点阵大屏图形化库： https://gitee.com/LNSFAIoT/Mindplus-Mixly-ESP32-LED-matrix-large-screen-graphical-library.git其他开源系列请见https://gitee.com/LNSFAIoT
本系列将会有： 1、【PBL项目实战】户外智慧农场项目实战系列——阿里云物联网平台的开通与云端可视化应用的新建
https://mp.weixin.qq.com/s/avKWJHNvnPeFsdEXUBByjw
2、【PBL项目实战】户外智慧农场项目实战系列——产品与设备的新建及与云端可视化应用的关联
https://mp.weixin.qq.com/s/mH4bRSf93QC4Jhhd5ci2mQ
3、【PBL项目实战】户外智慧农场项目实战系列——云端应用可视化页面开发及设备数据源的配置与调试 https://mp.weixin.qq.com/s/5OT57-_QlN7lwRMWvey4lw
4、【PBL项目实战】户外智慧农场项目实战系列——Mind+Mixly双平台ESP32数据上云及云端可视化实时展示 https://mp.weixin.qq.com/s/r_NeJdPoio9IVselx6Ru1Q
5、【PBL项目实战】户外智慧农场项目实战系列——天气预报API接口对接 https://mp.weixin.qq.com/s/jditkIEd-UK6cSQyCC_-Eg 6、【PBL项目实战】户外智慧农场项目实战系列——文本与图片、背景云端响应 https://mp.weixin.qq.com/s/eIozKfmCBo8Afp5QoorqWQ
7、【PBL项目实战】户外智慧农场项目实战系列——Mind+Mixly双平台RS485工业级多合一空气质量传感器数据上云及云端可视化实时展示 https://mp.weixin.qq.com/s/ZEUEEo91pBoxjRlhjGzrjA
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将天气预报接口对接到阿里云组件，实现实时天气预报的可视化展示，是不是很简单呢？如果您期待更多的网页组件的使用以及配置，别走开！敬请期待下一篇!THEEND
关注我们
更多精彩内容请关注我们的微信公众号：人工智能素养教育共同体，欢迎添加我们的企业微信，加入智慧农场项目学习群。
https://mc.dfrobot.com.cn/forum.php?mod=attachment&aid=MTQ2NTY5fDRhODc1YjE0fDE2NjQ2MjYyOTJ8ODUxOTU5fDMxNDAyOQ%3D%3D&noupdate=yes 微信公众号：人工智能素养教育共同体
https://mc.dfrobot.com.cn/forum.php?mod=attachment&aid=MTQ2NTcwfDRiNzY4ZDljfDE2NjQ2MjYyOTJ8ODUxOTU5fDMxNDAyOQ%3D%3D&noupdate=yes本文原创，转载请注明出处！
页:
[1]