【阿里云生活物联网架构师专题 ④】如何在天猫精灵IOT开放平台二次开发智能设备的 H5控制面板;


  • 本系列博客学习由非官方人员 半颗心脏 潜心所力所写,仅仅做个人技术交流分享,不做任何商业用途。如有不对之处,请留言,本人及时更改。

1、esp32接入阿里云物联网平台,实现天猫精灵语音控制;
2、esp8266直连接入阿里云物联网平台,实现天猫精灵找队友零配网功能和语音控制;
3、esp32 sdk 直连接入天猫精灵IOT开放平台,实现天猫精灵找队友零配网功能和语音控制;
4、如何在天猫精灵IOT开放平台二次开发智能设备的 H5控制面板;
5、分享可商用的ESP8266 SDK连接阿里云物联网生活平台的在线远程升级OTA笔记。

一、博主寄言


       我写过很多物联网控制的博文系列,包括微信公众号、微信小程序控制硬件,私有云对接天猫精灵服务器,抑或是硬件端 esp8266/esp32 等系列博文,这是一个一个专题是写下我们如何在阿里云物联网上全栈开发我们的应用专题,让我们无须企业账号也可以体验设备-云端-App” 的过程;让我们变得更强,一个人担任一个公司的全部职责,全栈开发物联网攻城狮前进;

       我会带领大家轻轻松松地把自己的设备接入天猫精灵,告别 “单机时代”,走进语音控制物联网时代。 有疑问请留言区留言,或者加群大伙们讨论;写总结,写博文不容易,望大家多多体谅!

  • 自带资料:
    • git 分布式管理软件的基本使用;
    • 硬件开发:乐鑫 esp8266、esp32模块一个;具备 c 语言基础 ,不需要很熟练;
    • 移动端开发:android 端具备 javavue.js 开发语言,AndroidStudio 环境;
    • 服务器端开发:php 开发,熟悉 服务器运行、部署等原理操作;

二、前言


      上个篇章已经为大家介绍了如何接入 天猫精灵IOT平台,实现了 零配网以及控制,天猫精灵IOT平台还有一个 app面板开发,其作用就是可以在 设备详情中打开实现手动控制;如第一图所示;

      官网的app开发面板教程 链接 ,很详细地阐述了全部流程,而且还有组件的提供,只需要简单的 vue语法和css样式,就可以开发了;


三、流程


       请务必先安装 node.js 环境;

3.1 安装cnpm(阿里外网环境)
npm install -g cnpm --registry=https://registry.npm.taobao.org
3.2 安装genie脚手架

window系统: cnpm install ai-genie-cli -g

MAC系统: sudo cnpm install ai-genie-cli -g

3.3 登录天猫精灵APP

       用淘宝授权登录,主要是为了和开发者账号一致;

3.4 本机的本地电脑配置

       因为未上架,只能在本地调试,这时候把我们的电脑作为一个服务器调试,端口是 8080 ,因此,我们要在自己的主机 host 文件定义如下,作用是把域名 test.open-iot.tmall.com 解析到本地服务器即可!

在这里插入图片描述

127.0.0.1 test.open-iot.tmall.com
  • window host 路径:C:\Windows\System32\drivers\etc
  • mac host 路径:直接用快捷键 command+shift+g,弹出框,输入 /etc/hosts
3.5 创建项目、安装开发环境

       过程中,会需要你的账号名字,就是 天猫精灵IOT平台的用户昵称;还有邮箱,要一一核对;后面是根据这个信息获取用户设备列表的哈!

genie init projectName // 创建项目
cd projectName // 进入项目
npm install // 安装依赖
  • 注意:以下品类要初始‘品类模版’需要填写平台注册用户名 和 Product Id
品类
空气净化器
蒸脸器
加湿器
除湿器
空调

在这里插入图片描述

3.6

       运行项目,自己切换到项目的根目录,然后运行下面指令,就看看到有打开一个链接了!

npm run dev
3.7

       建议在本地电脑调试,可以如下方式,打开手机效果如下:

在这里插入图片描述

3.8 如何真机调试?

       首先你的真机手机要和你的电脑在同一个局域网,然后在手机设置代理,地址是电脑的局域网ip地址,如下所示,开发电脑ip是:30.5.133.197 ,端口:8080 ;这时候,你是访问不了外网的哈!!

在这里插入图片描述

       这时候,我们把上面在浏览器打开的url做成一个二维码,建议在草料二维码中生成:然后,在天猫精灵APP上扫描二维码即可看到界面了!注意,一般的浏览器扫描即使出了界面,也是无法发送控制的哈!!

在这里插入图片描述

3.9 其他

       打包上线等文档请查询官网;

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
阿里云物联网平台是一个开放、安全、稳定、易用、灵活的云端一体物联网平台,它提供了丰富的技术能力,包括设备连接、设备管理、数据采集、数据计算和数据应用,以及强大的云端一体能力、多场景AIoT智能调度和边云协同能力。同时,该平台还实现了与原有系统的无缝衔接,能够为不同行业提供定制化解决方案。 该平台主要具备以下特点: 1. 开放性:支持多种设备协议,可以快速拓展IoT领域。 2. 稳定性:具有强大的稳定性和高可靠性,可以满足企业大规模应用需求。 3. 安全性:提供了完善的安全机制,包括数据加密、身份认证等,保护用户数据安全。 4. 易用性:提供了一站式服务,用户可以轻松完成设备的接入、调试和发布,无需具备高级技术能力。 5. 灵活扩展:平台支持按需收费,用户可以根据实际需求选择不同规格的服务,同时平台还提供了丰富的API和SDK,方便用户进行二次开发。 在阿里云物联网平台上,用户可以轻松实现设备的互联互通、数据采集和处理、应用场景构建以及智能化升级等任务。它能够助力企业实现数字化转型,提升生产效率和降低运营成本,为企业带来更多的商业机会和价值。同时,该平台还具备完善的客户服务体系,用户可以享受到贴心的咨询、安装、维护等服务,为企业的物联网应用提供坚实的保障。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

半颗心脏

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值