注意:以下文档只适用于TOP接口,请谨慎使用!

文档中心 > 天猫精灵IoT开放平台

一、环境配置

安装cnpm(阿里外网环境)

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装tnpm(阿里内网环境)


tnpm是阿里定制的npm,内部私有的模块都会发布到这里(官网:http://web.npm.alibaba-inc.com/ )

npm i -g npminstall --registry=http://registry.npm.alibaba-inc.com
npminstall -g tnpm --registry=http://registry.npm.alibaba-inc.com

安装genie脚手架

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

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

二、项目开发(iot业务)

第1步、登录天猫精灵APP

1、调试设备时请保持APP的登录状态

2、天猫精灵APP的账号要和阿里精灵开放平台保持一致


第2步、本机的本地电脑配置

1、 window host 路径:C:\Windows\System32\drivers\etc
2、 mac host 路径:直接用快捷键 command+shift+g,弹出框,输入 /etc/hosts

// 在host中添加
127.0.0.1 test.open-iot.tmall.com

第3步、创建项目、安装开发环境

genie init projectName // 创建项目
cd projectName // 进入项目
cnpm install // 安装依赖
注:安装依赖可以用tnpm/cnpm 会比 npm install 快一些

注:‘请输入用户账号’ 可回车直接跳过

以下品类要初始‘品类模版’需要填写平台注册用户名 和 Product Id

  • 风扇
  • 空气净化器
  • 蒸脸器
  • 加湿器
  • 除湿器
  • 空调

第4步、开发调试

1、启动项目,会打开web端调试:

  • 当前登录态,显示我的设备列表
  • 当前非登录态,显示淘宝登录页
npm run dev // 运行项目

注:项目内不支持引用本地图片,请前往图片空间上传,如果打不开页面,请先支付宝认证


开发中相关的工具文档:
1、定位问题 & 工具 & 反馈问题
2、面板组件常见问题 FAQ


2、点击设备进入面板(提示:点击进入页面后productKey和devId 会带在Url 上面)

注:如图、默认会有一个Demo页面


3、使用天猫精灵APP代理的方式去调试

注意点:
1、可以更好的查看面板、建议在PC调完以后调试该方式
2、需要在 webpack.dev.conf.js 文件的 devServer  加上  inline: false  关闭项目热更新(关闭代码修改实时更新)
不然会导致Native导航条展示不正常,如果不需要看Native导航条则不需要设置   inline: false
并重新 npm run dev 才能生效

4、其它相关

1、通用接口文档 API
2、UI组件库文档


第5步、打包、压缩、发布

1、本地代码打包


npm run build

2、安装lzip压缩包工具

// 全局安装 lzip
cnpm install -g lzip

3、生成压缩包

// 在 my-project 处使用
lzip

// 在my-project 平级目录 生成压缩包 成功
my-project.zip

// 上传压缩包的格式说明
my-project    ( 打包格式的一级目录为 my-project -> dist -> ... )
    dist
        index.html
        app.css
        app.js
        ... 等等资源

4、上传压缩包

open 平台地址 https://open-iot.tmall.com/home
按创建产品流程走 
在 人机交互 -> 控制面板 中上传压缩包

5、在天猫精灵中测试设备

(1)使用天猫精灵扫码二唯码

(2)显示设备列表页面 然后点击要测试的设备

(3)显示设备面板 然后测试


三、项目配置说明

目录结构:

dist 打包后的文件
    app.css
    app.js
    index.html 
src 本地文件(代码编辑)
    assets 静态资源
        less 脚手架公用 css
        images 静态图片
    page 页面
    router 路由
    store vuex状态管理
    App.vue 根组件
    main.js 项目启动js
    device-config.js 项目配置

device-config api全量举例说明:(src 下的 device-config.js 文件配置)

export default {
  base: {
    platform: 'genie', // 平台信息
    controlType: 'rightAway', // 蓝牙设备和WIFI设备该参数为'rightAway'时,控制设备立即下发指令
    // 注 在 WIFI设备中,该值为 '' 时,控制设备会延时0.5秒下发,0.5秒内连续控制时,会继续延时0.5秒并把下发的这时间内的控制指令合起来一块下发
    env: 'dev', // 
    icon: [], // 引入 iconfont.cn Symbol 下的链接 扩展 icon
    debugVConsole: false, //  true/ false  使用天猫精灵打开面板 是否显示 vConsole 
    setDeviceStatusInterval: 1000, // 调用setDeviceStatus时等待间隔
  },
  debug: {
    stagingMap: 'release', // 'pre2' 预发环境  'release' 线上环境
  }
}

MOCK数据:(src 下的 device-config.js 文件配置)

export default {
  base: {},
  debug: {
    isMock: true, // 是否开启mock, 开启mock后,默认getDeviceStatus和setDeviceStatus 将不会发起请求,其他api接口在mockConfig中自行设置mockApi,以重写sdk中的接口请求
    mockConfig: { // mock 配置
      mockApi: {}, // mock sdk中的其他接口
      mockStatus: { // mock设备信息
        attr: {
          onlinestate: 'online', // mock设备状态 offline online
        }, // mock设备属性
        errorInfo: {}, // mock设备上报的错误信息
        scheduleInfo: {} // mock定时信息
      },
      mockGetType: 'success', // 模拟get类型 success: 返回mock的成功数据; fail: 返回失败的mock数据
      mockSetType: 'success', // 模拟set类型 同上
      mockGetSuccessData: null, // 获取设备状态成功的数据模拟
      mockGetFailureData: null, // 获取设备状态失败的数据模拟
      mockSetSuccessData: null, // 设置设备状态成功的数据模拟
      mockSetFailureData: null // 设置设备状态失败的数据模拟
    }
  }
}



四、参考资料

FAQ

关于此文档暂时还没有FAQ
返回
顶部