智能冰箱控制 H5 开发接入指南 - jd-smart-fe/alpha-docs GitHub Wiki

1. 前端开发准备

请仔细阅读 Alpha 前端开发准备，而除 “前端开发准备” 外，文档中其余部分不需要看。

冰箱控制 H5 会接入【京东微联】和【京东新鲜Go】两款 APP。

冰箱控制各种参数请在 【京东微联·开发者中心】>【产品管理】>【参数设置】中查看。

2. 数据流

PAD 端有任何数据更新，都会通过长连接上报给云端，云端再推送给 APP。

APP 端下发数据后，会从 JSSDK 回调函数和长连接这两处获取到最新的设备快照。

fridge dataflow

通常情况下，APP 端应当只作为 UI 展示的终端，不应当参与任何控制的逻辑判断。举个例子:

开启智能模式时，将会同时引起冷藏室和冷冻室的温度变化。用户在 APP 端点击了开启智能模式，APP 端应当只下发智能模式开启的指令，PAD 端收到智能模式开启的指令后，再连带的处理冷藏室和冷冻室的温度变化，同时上报云端当前的冰控状态快照。然后 APP 收到推送的快照后再来更新全部的界面 UI。

3. 快速开发（推荐）

京东提供了功能逻辑完善的冰箱控制模板，建议通过修改模板来快速完成冰控页面的开发。

3.1 安装冰控模板

依赖环境：git, nodejs

下面通过 welink-cli 来安装冰控模板。

$ npm install -g welink-cli             # 全局安装 welink-cli 工具，如果之前安装过了则不需要执行这一步
$ welink init fridge-template fridge   # 创建“冰箱控制模板”到本地 fridge 目录下
$ cd fridge                            # 进入 fridge 目录
$ npm install --registry=https://registry.npm.taobao.org  # 安装项目依赖
$ npm run dev                           # 在本地运行项目

安装完成后，通过修改 /src/App.vue 文件来修改冰控主要逻辑。模板中已经引入了 jssdk，不需要在额外引入 jssdk 了。

4. 全新开发

如果不使用 welink-cli 来快速生成项目模板，下面这些内容会将会给你一定的帮助。

4.1 引入 JSSDK

请将 jdsmart-fridge-sdk.js 文件放在其他 js 文件之前引入。

<body>
  <div>Example</div>
</body>
<!-- jssdk 文件首先引入 -->
<script src="//static.360buyimg.com/nsng/common/fridge/js/jdsmart-fridge-sdk.min.js" charset="utf-8"></script>
<!-- 业务 js 文件放在后面 -->
<script src="assets/app.js" charset="utf-8"></script>

4.2 调用 JSSDK

4.2.1 JSSDK初始化 JDSMART.ready

jssdk 初始化完毕后会调用 ready 方法。

ready 方法会接受一个回调函数作为参数。

<script src="//static.360buyimg.com/nsng/common/fridge/js/jdsmart-fridge-sdk.min.js" charset="utf-8"></script>
<script type="text/javascript">
  window.JDSMART.ready(function() {
    alert('inited');
  });
</script>

4.2.2 获取设备快照 JDSMART.getSnapshot

getSnapshot 方法可以获取到设备保存在云端的最新快照。

<script src="//static.360buyimg.com/nsng/common/fridge/js/jdsmart-fridge-sdk.min.js" charset="utf-8"></script>
<script type="text/javascript">
  window.JDSMART.ready(function() {
    /**
    * @param id 设备id（feed_id/guid），对于冰箱控制项目来说，改参数直接填 null 即可。
    * @param callback 成功后的回调
    *
    * 因为【京东微联】和【京东新鲜Go】两款 APP 返回的 data 类型有所不同
    * 因此必须要加上下述代码进行字符串转换。
    */
    window.JDSMART.getSnapshot(null, function(rowData) {
      var data = typeof rowData === 'string'
        ? JSON.parse(rowData)
        : rowData;
      });
      data.result = typeof data.result === 'string'
        ? JSON.parse(data.result)
        : data.result;

      console.log(data);
  });
</script>

返回结果参考:

Success:

{"status":0, "error":null, "result":{
  "streams": [     // 请求返回的设备快照
    {
      "stream_id": "smartmode",
          "current_value": "0"
    },{
      "stream_id": "fritemp",
          "current_value": "3"
    }
]}}

Error:

{"status": !0, "error": {"errorCode":10000, "errorInfo":""}, "result" :{}}

4.2.3 下发控制命令 JDSMART.controlDevice

<body>
  <button type="button" id="smartmode" >开启智能模式</button>
</body>
<script src="//static.360buyimg.com/nsng/common/fridge/js/jdsmart-fridge-sdk.min.js" charset="utf-8"></script>
<script type="text/javascript">
  var command = getCommand({ smartmode: 1 });   // 开启智能模式

  window.JDSMART.ready(function() {
    document.getElementById('smartmode').addEventListener('click', function() {
      window.JDSMART.controlDevice(command, function(rowData) {
        var data = typeof rowData === 'string'
          ? JSON.parse(rowData)
          : rowData;
        });
        data.result = typeof data.result === 'string'
          ? JSON.parse(data.result)
          : data.result;

        console.log(data);
      });
    });
  });

  function getCommand(obj) {
    var command = [];
    for (var item in obj) {
      if (obj.hasOwnProperty(item)) {
        var stream = {};
        stream.stream_id = item;
        stream.current_value = obj[item];
        command.push(stream);
      } else {
        return null;
      }
    }
    return command;
  }
</script>

返回结果： 请参考 JDSMART.getSnapshot 的返回结果

4.2.3 APP 原生抬头副标题 JDSMART.setNavigationConfig;

注：此设置只会在【京东微联】APP 中生效

<script src="//static.360buyimg.com/nsng/common/fridge/js/jdsmart-fridge-sdk.min.js" charset="utf-8"></script>
<script type="text/javascript">
  window.JDSMART.ready(function() {
    /**
     * 参数 config 配置:
     *{
     *  showBack: false,  // 返回按钮，false 是隐藏，true 是显示
     *  showShare: false,
     *  showMore: false,  // 更多按钮
     *  color: “#998877”, // title 栏颜色
     *  showOnline:false  // 在线提示 true-不在线，false-在线
     * }
     */
    var config  = { showOnline: true }  // 注意: true-不在线
    window.smartSDK.setNavigationConfig(config);  // 设置副标题为设备不在线
  });
</script>

4.3 从长连接获取数据推送

APP 客户端会跟云端建立长连接，而每次云端通过长连接向客户端推送数据的时候，APP 客户端便会调用 H5 的 window.onRecive 方法，并将长连接数据作为参数传入。

<script type="text/javascript">
  window.onReceive = function(rowData) {
    var data = typeof rowData === 'string'
      ? JSON.parse(rowData)
      : rowData;
    if (!data) return;

    data.body.data.result = typeof data.body.data.result === 'string'
      ? JSON.parse(data.body.data.result)
      : data.body.data.result;

    console.log(data);
  };
</script>

返回结果参考:

{
  "header": {
    "code": "snapshot",
    "seq": 58556,
    "session_id": "14c560db-02fe-46f3-b18d-985c88888888",
    "version": "1.0"
  },
  "body": {
    "feed_id": 150588719588888888,
    "data": {
      "result": {
        "streams": [
          {
            "stream_id": "fastfrimode",
            "current_value": "0"
          },
          {
            "stream_id": "smartmode",
            "current_value": "0"
          }
        ],
        "status": "1",
        "digest": "724462958"
      },
      "status": 0
    },
    "time": 1506073611142
  }
}
⚠️ **GitHub.com Fallback** ⚠️