《AliOS Things快速開發指南》來了！

點選免費下載下傳

>>《AliOS Things快速開發指南》<<

或者複制該連結到浏覽器完成下載下傳或分享： https://developer.aliyun.com/topic/download?id=812

使用AliOS Things快速建構RGB燈應用

本文将基于AliOS Things 3.1系統搭建應用，此應用通過支付寶小程式控制RGB燈的顔色。

背景資訊

整體流程圖如下：

• 支付寶小程式服務端主要功能是為支付寶小程式提供API SaaS服務，同時通過OpenAPI SDK對接阿裡雲物聯網（IoT）平台。
• 支付寶小程式用戶端主要功能是顯示前端控制界面，通過https API發送指令控制裝置屬性。
• 裝置端程式主要功能是基于AliOS Things 3.1系統适配D1 WiFi裝置開發。
• 阿裡雲物聯網平台主要功能是提供安全可靠的裝置連接配接通信能力，支援裝置資料采集上雲，規則引擎流轉資料和雲端資料下發裝置端。此外，也提供友善快捷的裝置管理能力，支援物模型定義，資料結構化存儲，和遠端調試、監控、運維。
• 硬體裝置主要功能是通過D1 WiFi裝置連接配接網絡，接收支付寶小程式的指令控制RGB燈的顔色。D1 WiFi裝置的晶片型号是ESP 8266。

步驟一：管理阿裡雲物聯網平台裝置

支付寶小程式和裝置端是通過阿裡雲IoT平台進行通信的，具體是通過裝置四元組資訊進行連接配接的。是以要先在阿裡雲物聯網平台建立産品，在産品下添加對應型号的裝置，産生該裝置四元組資訊。要有阿裡雲賬号并開通阿裡雲物聯網平台服務。

1.登入

阿裡雲物聯網平台

。

2.建立産品。

• 單擊左側菜單欄的裝置管理>産品，打開産品清單頁。

  

• 單擊建立産品進入建立産品頁面。
• 參考說明配置産品資訊，然後單擊儲存。

  

• 産品名稱：輸入産品名稱，例如：xw智能燈。
• 所屬品類：此處選擇标準品類下的智能生活/電工照明/燈。
  • 單擊請選擇标準品類選擇框。

    

  • 在搜尋框裡輸入

    燈

    ，然後單擊搜尋圖示。

    

  • 單擊下圖所示選擇，選擇品類。

    

• 聯網方式：此處選擇Wi-Fi。
• 資料格式：此處選擇ICA 标準資料格式（Alink JSON）。

3.添加裝置。

• 單擊圖示中前往添加進入産品所屬裝置清單頁面。

  

• 單擊添加裝置。

  

• 參考說明配置裝置資訊，然後單擊确認。

  

• DeviceName：輸入DeviceName，例如：xwRGBLamp。
• 備注名稱：輸入備注名稱，例如：xw智能燈裝置。
  • 單擊下圖所示前往檢視。

    

  • 單擊

    DeviceSecret

    旁邊的檢視。

    

  • 單擊一鍵複制複制裝置三元組。

    

裝置三元組資訊如下：

{
  "ProductKey": "a1****kJ",
  "DeviceName": "xwRGBLamp",
  "DeviceSecret": "be8f*********b45297fc"
}           

4.添加功能。

• 單擊左側菜單欄産品進入産品清單頁。然後單擊操作列的檢視按鈕。

  

• 單擊功能定義，然後單擊編輯草稿。

  

• 單擊添加标準功能。

  

• 選擇RGB調色，然後單擊确定。

  

• 單擊釋出上線。

  

• 勾選确認已檢視目前版本與線上版本的 比對結果，然後單擊确定。

  

• ProductSecret

  

• ProductSecret

  欄的複制。

  

ProductSecret和上面的三元組資訊組成裝置的四元組資訊。

裝置四元組資訊用于後續支付寶用戶端，物聯網裝置端開發，此處可以儲存一下。

裝置四元組資訊如下：

{
  "ProductKey": "a1******EB",
  "ProductSecret": "Sj********YX",
  "DeviceName": "xwRGBLamp",
  "DeviceSecret": "c7*******************4c1c"
}           

5.釋出産品。

• 在産品詳情頁，單擊右上角的釋出，彈出确認釋出産品框。

  

• 依次單擊請确認後面的圖示，然後單擊釋出。

  

步驟二：開發支付寶小程式服務端應用

支付寶小程式服務端接收支付寶小程式用戶端的指令傳送到阿裡雲IoT平台。使用Visual Studio Code開發工具，Node.js腳本語言。如果需要部署到線上或者上線小程式，還需要準備：

• ECS或者公網可通路的伺服器。
• 有效域名（已備案）。
• SSL證書。

申請加入

阿裡巴巴小程式繁星計劃

，可以免費試用ECS和其他的小程式服務。

1.下載下傳安裝

Node.js

2.下載下傳支付寶小程式

服務端源碼

3.使用Visual Studio Code打開支付寶小程式服務端源碼。

4.修改配置資訊。

修改app/service/aliyunIoT.js檔案中的config屬性。

const config = {
  accessKey: '<access-key>',
  accessSecret: '<access-secret>',
  endPoint: 'https://iot.<regionId>.aliyuncs.com',
  apiVersion: '2018-01-20',
  regionId: '<regionId>',
};           

access-key

和

access-secret

是阿裡雲頒發給使用者通路服務所用的密鑰。

• 登入 阿裡雲控制台
• 滑鼠移至右上角頭像，然後單擊AccessKey 管理。

  

• 在AccessKey管理頁面擷取

  accessKey

  accessSecret

  

• • regionId

    是阿裡雲物聯網平台所屬地域， 檢視地域詳情 ，例如：cn-shanghai。

  • endPoint

    是地域所屬的資料中心。阿裡雲物聯網平台有多個地域，不同地域有不同的資料中心，例如： https://iot.cn-shanghai.aliyuncs.com

5.依次單擊上面菜單欄的Terminal>New Terminal打開Terminal視窗。

6.在Terminal視窗執行以下指令。

$ npm i
$ npm run dev           

7.使用浏覽器通路

http://127.0.0.1:7001/

說明：支付寶小程式服務端源碼适用于AliOS Things 3.1版本。

步驟三：開發支付寶小程式用戶端應用

支付寶小程式用戶端向支付寶小程式服務端發送RGB燈顔色指令。使用小程式用戶端開發工具打開支付寶小程式用戶端程式，并修改配置資訊進行運作。了解支付寶小程式開發流程：

支付寶小程式快速開始

1.下載下傳安裝支付寶小程式

用戶端開發工具 用戶端源碼

3.用小程式開發工具打開支付寶小程式用戶端源碼。

• 打開小程式開發者工具用戶端。然後單擊用戶端右上角打開項目。

  

• 選擇用戶端源碼檔案，然後單擊選擇檔案夾。

  

• 單擊打開。

  

• 首次打開源碼時提示安裝依賴，單擊确認安裝依賴。

  

如果首次沒有安裝依賴，可以按下圖操作手動安裝所需依賴。

4.修改配置。

打開utils/device_api.js檔案，修改以下三個屬性：

const defaultServerURL = '<your-domain>';
const defaultProductKey = '<product-key>';
const defaultDeviceName = '<device-name>';           

• your-domain為支付寶小程式服務端API位址，例如： http://localhost:7001/api/device
• product-key為裝置四元組資訊中

  ProductKey

  值。
• device-name為裝置四元組資訊中

  DeviceName

步驟四：開發裝置端應用

要先安裝好裝置對應的驅動，本例中D1 WiFi裝置對應的驅動為

CH340

1.修改AliOS Things3.1源碼。

由于裝置端應用需要依賴pwm庫，是以要在AliOS Things系統中加入pwm庫。

打開platform/mcu/esp8266/aos.mk檔案，在第

54

行下面加入以下代碼。

$(NAME)_PREBUILT_LIBRARY += bsp/lib/libpwm.a           

2.下載下傳

裝置端源碼

3.用開發工具Visual Studio Code打開裝置端源碼。

4.修改裝置端配置。

• 打開app_entry.c檔案，修改以下屬性。

裝置認證資訊：

#define PRODUCT_KEY "<ProductKey>"
#define PRODUCT_SECRET "<ProductSecret>"
#define DEVICE_NAME "<DeviceName>"
#define DEVICE_SECRET "<DeviceSecret>"           

• ProductKey為裝置四元組資訊ProductKey的值。
• ProductSecret為裝置四元組資訊ProductSecret的值。
• DeviceName為裝置四元組資訊DeviceName的值。
• DeviceSecret為裝置四元組資訊DeviceSecret的值。

WiFi資訊：

#define WIFI_SSID "<WIFI_SSID>"
#define WIFI_PASSWD "<WIFI_PASSWD>"           

• WIFI_SSID為手機熱點的裝置名稱，例如：aiotesp8266。
• WIFI_PASSWD為手機熱點的密碼，例如：12345678abc。

5.編譯。

單擊上面導航欄的Terminal>New Terminal，在下面的Terminal視窗輸入

aos make

進行編譯。

輸出類似下圖資訊表示編譯成功。

6.燒錄。

• 通過USB接口連接配接D1 WiFi裝置。

  

• 在Terminal視窗輸入

  aos upload

  進行燒錄。
• 輸入

  1

  ，然後按enter鍵。

  

輸出類似下圖資訊表示燒錄成功。

步驟五：通過手機熱點進行裝置配網

前面的開發工作已經完成，現在是最關鍵的一步。手機熱點資訊已經通過步驟四燒錄到裝置中，這裡打開手機熱點，裝置會自動進行配網連接配接，通過序列槽監控可以檢視配網日志資訊。配網成功支付寶小程式用戶端裝置狀态變為線上，阿裡雲IoT平台裝置狀态變為線上。

1.打開手機熱點進行網絡适配。

2.單擊裝置端的

圖示進行序列槽監控，檢視裝置日志。

3.選擇波特率為961200，然後單擊打開。

• Web Serial視窗輸出連接配接資訊。

• 支付寶小程式用戶端重新編譯後，裝置狀态為線上。

• 在阿裡雲物聯網平台檢視裝置狀态為線上。

步驟六：通過支付寶小程式控制RGB燈顔色

D1 WiFi裝置連上RGB燈，就可以通過支付寶小程式控制RGB燈的顔色。

1.D1 WiFi裝置連接配接RGB燈。

接線方式如下：

D1 WiFi引腳	RGB燈引腳
GPIO12	Blue（藍色燈引腳）
GPIO13	Red（紅色燈引腳）
GPIO15	Green（綠色燈引腳）
GND	GND（負極）

2.在支付寶小程式用戶端選擇綠色，RGB燈顔色變為綠色。

3.在支付寶小程式用戶端選擇藍色，RGB燈顔色變為藍色。

4.在支付寶小程式用戶端選擇紅色，RGB燈顔色變為紅色。

上一篇：使用AliOS Things快速建構溫度計應用