使用 Ruff 开发板+ Link Develop 快速开发 IoT 应用（环境预配置版）-白红宇

0. 成果

1. 前期准备

开通 Link Develop 账号：使用阿里云账号或者淘宝账号访问，填写开发者入驻表单完成入驻。（即申请即通过）

依赖安装：已预先配置完成。

项目文件创建与生成：已预先配置完成。

Ruff 硬件开发

一、上云

此步操作设备：电脑

登录阿里云账号，访问创建一个新项目：

从项目控制台左侧的设备菜单项里找到“产品开发”，点击进入并点击“立即创建产品”。

按下图填写表单，所属分类选择“智能生活/电工照明/灯”，节点类型选择“设备”，通讯网络选择“Wi-Fi”，数据格式选择“Alink”，然后点“提交”后点击“进入开发”按钮。

添加一个 RGB 调色的功能定义：点击标准功能一栏右
侧的“新增”按钮。在弹出的“新增可选功能”对话框左侧列表中，找到 RGB 调色功能并单击进行选择，然后点击“确定”。

15278175847739

申请测试设备的激活凭证：从“功能定义”的 Tab 切换到“设备开发”的 Tab，点击“设备列表”一栏右侧的“新增测试设备”按钮，点击确定，获得激活凭证三元组：ProductKey、DeviceName 和 DeviceSecret，不要关闭该页面！

二. 设备端开发

此步使用设备：电脑

打开电脑终端，进入项目目录：cd ruff-linkdevelop-rgblight

编辑项目文件 /src/index.js，将 productKey、deviceName、deviceSecret 替换成前一步申请的设备激活凭证：

'use strict';var aliyunIot = require('aliyun-iot-device-sdk');// 设备连接到云端var device = aliyunIot.device({// 替换为生成的激活凭证三元组  productKey: '
    
     ',  deviceName: '
     
      ',  deviceSecret: '
      
       '});// 连接成功device.on('connect', function() {  console.log('connect successfully!');  // 点亮  $('#KY-016').setRGB(0xffffff);  // 上报属性  device.postProps({    LightSwitch: 1,    RGBColor: {      Red: 255,      Green: 255,      Blue: 255    }  });});// ruff 初始化完毕$.ready(function(error) {  if (error) {    console.log(error);    return;  }  // 监听云端下行消息  device.serve('property/set', function(params) {    console.log('receive params:', params);    var LightSwitch = params.LightSwitch;    // 开灯    if (LightSwitch === 1) {      $('#KY-016').setRGB(0xffffff);    }    // 关灯    if (LightSwitch === 0) {      $('#KY-016').setRGB(0x000000);    }    // 调色    var RGBColor = params.RGBColor;    if (RGBColor) {      var hexArr = [RGBColor.Red, RGBColor.Green, RGBColor.Blue].map(function(        x      ) {        x = parseInt(x).toString(16);        return x.length === 1 ? '0' + x : x;      });      var color = Number('0x' + hexArr.join(''));      $('#KY-016').setRGB(color);    }    // 上报属性    device.postProps(params);  });});$.end(function() {  console.log('disconnect');  // 断开连接  device.end();});

保存退出，项目修改完成！

三、运行和调试

此步使用设备：开发板+电脑

将开发板通电，等待 1 分钟联网。

使用电脑打开刚刚的阿里云控制台页面，点击设备列表里的设备“调试”链接，在页面下方的调试功能里选择“RGB调色（RGBColor）”，方法选为“设置”，下方指令区输入
```
{"RGBColor":{"Red":255,"Blue":255,"Green":0}}
```

点击“发送指令”按钮:

小灯变紫——数据下发成功（动图）

Web 应用开发

全程使用设备：电脑

一、创建应用

从项目控制台左侧菜单进入“应用-Web 应用”，点击右上角的“新增应用”按钮。

如图所示填写表单，新建一个托管应用，点击提交进入下一步。

在应用“创建成功”的页面上点击“进入开发”按钮，获取 AppKey 和 AppSecret，用于之后应用开发。（不要关闭此页面！！！）

二、开通官方物的管理服务

点击左上角的项目下拉列表，打开项目控制台的首页。

点击项目控制台首页右上角的“资源管理”按钮。

切换到“可用服务” Tab，点击右侧的“添加官方”服务，在对话框中勾选“物的管理服务”，然后点击“确定”。

三、Web 应用编码

linkdevelop-webapp-rgblight

linkdevelop-webapp-rgblight

init

安装 @bone/iot-gateway 和 react-color 颜色选择组件：bnpm i --save @bone/iot-gateway react-color

修改 app/pages/home/index.js 代码，内容如下：

import React, { Component } from 'react';import { Button, Switch, Form, Grid, Input, Dialog } from '@bone/bone-web-ui';import IotGateway from '@bone/iot-gateway';import { HuePicker } from 'react-color';const Row = Grid.Row;const Col = Grid.Col;const FormItem = Form.Item;const formItemLayout = {  labelCol: {    fixedSpan: 12  },  wrapperCol: {    span: 12  }};const insetLayout = {  labelCol: { fixedSpan: 4 }};export default class App extends React.Component {  constructor(props) {    super(props);    this.state = {      switch: false,      color: '',      // 刷新页面不用重复输入      productKey: localStorage.getItem('productKey') || '',      deviceName: localStorage.getItem('deviceName') || ''    };    // 获取初始数据    this.getProps(props => {      this.setState({        switch: props.LightSwitch === 1,        color: rgbToHex(          props.RGBColor.Red,          props.RGBColor.Green,          props.RGBColor.Blue        )      });    });  }  getProps(cb) {    IotGateway.post({      url: 'https://api.link.aliyun.com/thing/device/status/query',      apiVer: '1.0.1',      params: {        ProductKey: this.state.productKey,        DeviceName: this.state.deviceName      }    }).then(res => {      if (res.code !== 200) {        throw new Error(res.localizedMsg || res.message);      }      let props = {};      res.data.forEach(item => {        props[item.attribute] = item.value;      });      if (cb) {        cb(props);      }      console.log('get props successfully:', props);    });  }  setProps(props) {    IotGateway.post({      url: 'https://api.link.aliyun.com/thing/device/properties/set',      apiVer: '1.0.1',      params: {        ThingId: {          productKey: this.state.productKey,          deviceName: this.state.deviceName        },        Items: props      }    }).then(res => {      if (res.code !== 200) {        throw new Error(res.localizedMsg || res.message);      }      console.log(res);    });  }  showValidationText() {    Dialog.alert({      title: '提示',      content: '请输入设备的 productKey 和 deviceName 才能控制设备哦'    });  }  onChange = checked => {    if (!this.state.productKey || !this.state.deviceName) {      this.showValidationText();      return;    }    this.setState({      switch: checked    });    this.setProps({      LightSwitch: checked ? 1 : 0    });  };  onInput = (field, value) => {    this.state[field] = value;    localStorage.setItem(field, value);    this.setState({      [field]: value    });  };  onColorChange = color => {    if (!this.state.productKey || !this.state.deviceName) {      this.showValidationText();      return;    }    this.setState({      color: color.hex    });    this.setProps({      RGBColor: hexToRgb(color.hex)    });  };  render() {    return (      
            
               
                  
                                     
                          
          this.onInput('productKey', value)}                  />                
                                                    
                          
          this.onInput('deviceName', value)}                  />                
                                  
                 
                
                  
                 
                
                  
                     
                    
       
          
              
     
      
    
    );  }}function rgbToHex(r, g, b) {  return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);}function hexToRgb(hex) {  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);  return result    ? {        Red: parseInt(result[1], 16),        Green: parseInt(result[2], 16),        Blue: parseInt(result[3], 16)      }    : null;}

四、运行调试

启动项目: bone start

使用 Chrome 浏览器访问：http://localhost:8000/

填入『本章节第一步』获取的应用 appKey 和 appSecret：

进入Web 控制页面

之后填入『第一章节上云』步骤中获取的测试设备激活凭证 productKey 以及 deviceName，点击“确认”按钮。

刷新页面，查看Chrome 浏览器控制台（按 F12 或者 Ctrl+Shift+i），正常情况下设备的属性已经能正常获取。

点击几下灯的开关，发现能够正常控制灯的开关了，再试一下颜色调色板，发现灯的颜色也可以正常控制了。

至此 RGB 全彩智能灯的 Web 应用已开发完毕。给自己一点掌声~

五、应用发布（附加）

回到 Link Develop 工作台，在 RGB 小灯的 Web 应用界面上点击“新增版本变更”按钮，完成项目版本创建。

点击“构建部署”按钮。

在 Web 项目下执行 bone pack 命令，进行打包。

在界面上点击“上传构建包”按钮，上传上一步生成的 zip 包文件。

等待构建完成后，就可以通过域名访问部署好的 Web 应用了。