AliOS Things 3.0应用笔记:支付宝小程序设备控制 - 全栈开发(附全部源码)

简介: 通过支付宝小程序即控制IoT设备

目录

应用演示

通过支付宝小程序即可控制设备端。

点击观看视频演示

架构图

|480x480|center

设备端

设备端运行AliOS Things 3.0,方便快速的就能接入到阿里云IoT平台。

支付宝小程序端

支付宝小程序主要功能是显示前端控制界面,通过https api控制设备属性。扫码体验小程序(小程序已上线,支付宝首页搜索 “xw智能灯” 也能打开小程序):

图片名称

服务端

小程序服务端主要是为小程序提供API SaaS服务,同时通过OpenAPI SDK对接阿里云IoT平台。

一、创建产品

首先需要在阿里云物联网平台创建产品创建设备,获取到设备的三元组(设备密钥)才能让设备端接入物联网平台上。

创建产品

登录到阿里云物联网平台,进入到产品管理页,点击创建产品,所属分类中选择智能生活 / 电工照明 / ,其他选项默认即可,点击确定创建产品:

图片名称

进入到产品详情页可以看到如下产品信息:

添加功能

本示例用到了RGB灯,所以需要在产品中添加RGB属性,进入到产品详情页 > 功能定义 > 添加功能

功能选择RGB调色属性,点击确认添加:

图片名称

添加设备

进入设备管理页,选择你的产品,然后点击添加设备即可添加测试设备,添加完成之后会显示该设备的三元组(密钥):

至此就完成本示例物联网平台上的产品创建。

二、设备端开发

准备工作

接线图

图片名称

接线方式如下:

nodemcu引脚 RGB灯引脚
GPIO12 Blue (蓝色灯引脚)
GPIO13 Green(绿色灯引脚)
GPIO15 Red (红色灯引脚)

使用vscode打开nodemcu_demo源码。

源码目录

.
├── Config.in
├── README.md
├── aos.mk
├── app_main.c                          # 功能逻辑代码
├── k_app_config.h
├── linkkit_client.c                    # Linkkit API封装
└── linkkit_client.h

配置

更改AOS_SDK_PATH路径

  • 编辑 .aos:
AOS_SDK_PATH=/Users/xxw/workspace/github/AliOS-Things
DEPENDENCIES=
MD5SUM_HEADER=a1a4b53ab917fb4a6cb08289b6007fe0

更改 /Users/xxw/workspace/github/AliOS-Things 为你的AliOS-Things源码路径。

  • 编辑 Config.in:
......
config AOS_SDK_PATH
    string
    default "/Users/xxw/workspace/github/AliOS-Things"
......

更改 /Users/xxw/workspace/github/AliOS-Things 为你的AliOS-Things源码路径。

windows用户的路径示例为: C:/workspace/github/AliOS-Things,注意路径中用的是斜杠 /,不是反斜杠 \

更改设备认证信息

更改源码app_main.c中的四元组:PRODUCT_KEYPRODUCT_SECRETDEVICE_NAMEDEVICE_SECRET为你的设备四元组:

#define PRODUCT_KEY "<product_key>"
#define PRODUCT_SECRET "<product_secret>"
#define DEVICE_NAME "<device_name>"
#define DEVICE_SECRET "<device_secret>"

更改wifi信息

更改源码app_main.c中的WIFI_SSIDWIFI_PASSWD为你的路由器(网关)信息:

#define WIFI_SSID "aiot"
#define WIFI_PASSWD "12345678"

运行

更改完成后,即可编译并烧录到nodemcu中。

启动nodeMCU后,nodeMCU会自动连接指定的wifi,三色灯显示蓝色代表连接wifi成功,显示红色代表连接阿里云IoT平台成功。

在阿里云物联网云端可以看到设备是否上线,也可以使用在线调试功能控制nudeMCU的颜色。

三、小程序端开发

小程序和服务端之间的交互API请参考本文档中的其他 > API接口说明

准备工作

源码目录

xwColorLight
├── README.md               # 使用说明
├── app.acss
├── app.js                  # 小程序入口
├── app.json                # 小程序整体配置
├── asset                   # 资源文件,包括使用的图片资源、字体资源
├── package.json
├── pages
│   ├── index               # 设备控制页面
│   └── lights              # 设备选择页面
└── utils
    └── device_api.js       # 服务端api操作接口

配置

安装依赖

打开源码的时候,IDE会提示安装依赖,点击确定安装依赖:

更改参数

更改utils/device_api.js中的defaultServerURL为你的服务器API地址(服务端本地调试时,地址为http://localhost:7001/api/device)、更改defaultProductKeydefaultDeviceName为你的设备product keydevice name

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

运行

图片名称

四、服务端开发

介绍

本示例通过openAPI接口对接阿里云物联网平台,阿里云物联网平台提供的云端API文档可以参考:云端开发指南 > API列表,也可以进入 OpenAPI Explorer 对openAPI接口进行可视化调试。

本服务端向小程序端提供的API接口说明请参考本文档中的其他 > API接口说明

需要了解egg.js请参考 eggjs官方文档。

准备工作

如果需要部署到线上或者上线小程序,还需要准备:

  • ECS或者公网可访问的服务器。
  • 有效域名(已备案)。
  • SSL证书。
申请加入 阿里巴巴小程序繁星计划,可以免费试用ECS和其他的小程序服务。

源码目录

xwColorLight-server
├── README.md                 # 说明文档
├── app
│   ├── controller
│   │   └── home.js           # API接口实现
│   ├── router.js             # API路由
│   └── service
│       └── aliyunIoT.js      # OpenAPI接口
├── config
│   ├── config.default.js     # 全局配置
│   └── plugin.js
├── package.json
└── test

配置

更改app/service/aliyunIoT.jsconfig变量的accessKeyaccessSecretendPointregionId

详细说明请参考 阿里云物联网平台 > 调用API
const config = {
  accessKey: '<access-key>',
  accessSecret: '<access-secret>',
  endPoint: 'https://iot.cn-shanghai.aliyuncs.com',
  apiVersion: '2018-01-20',
  regionId: 'cn-shanghai',
};

accessKeyaccessSecret

accessKeyaccessSecret是阿里云颁发给用户的访问服务所用的密钥,
登录阿里云控制台,将光标移至账号头像上,然后单击accesskeys,跳转至用户信息管理页,即可创建和查看AccessKey。阿里云控制台的访问控制机制具体请参考什么是访问控制阿里云物联网平台 > 子账号访问

endPointregionId

阿里云物联网平台有多个地域,不同地域有不同的数据中心,详情请查看:地域和可用区

运行

$ npm i
$ npm run dev
$ open http://localhost:7001

浏览器中打开http://localhost:7001 ,会出现如下介绍界面:

使用REST API测试工具可以测试API接口是否有效:

本示例用的REST api测试工具为 insomnia

部署

如果要把该服务端工程部署上线,使用如下命令:

$ npm start
$ npm stop

其他

API接口说明

本示例提供如下的API接口供小程序访问:

获取设备状态

定义

GET /api/device/status

参数
参数 类型 说明
product_key String 必填,设备pk
device_name String 必填,设备名称
返回
参数 类型 说明
msg String 描述请求结果的产生原因,success成功,其他为失败
status String 设备状态,可能值为:ONLINEOFFLINEINACTIVEDISABLED
示例

请求:

http://localhost:7001/api/device/status?product_key=xxxxxxxxxx&device_name=nodemcu_01

返回

code: 200
{
    "msg": "success",
    "status": "INACTIVE"
}

获取设备列表

定义

GET /api/device/list

参数
参数 类型 说明
product_key String 必填,设备pk
page_size Integer 必填,指定返回结果中每页显示的记录数量,最大值是50。默认值是10
current_page Integer 必填,指定显示返回结果中的第几页的内容。默认值是1
返回
参数 类型 说明
msg String 描述请求结果的产生原因,success成功,其他为失败
data Object 设备列表
示例

请求:

http://localhost:7001/api/device/list?product_key=xxxxxxxxxx&page_size=10&current_page=1

返回

code: 200
{
    "msg": "success",
    "data": {
        "DeviceInfo": [
            {
                ......
            },
            {
                ......
            }
        ]
    }
}

获取设备属性

定义

GET /api/device/props

参数
参数 类型 说明
product_key String 必填,设备pk
device_name String 必填,设备名称
返回
参数 类型 说明
msg String 描述请求结果的产生原因,success成功,其他为失败
props Object 设备属性
示例

请求:

http://localhost:7001/api/device/props?product_key=xxxxxxxxxx&device_name=nodemcu_01

返回

code: 200
{
    "msg": "success",
    "props": "{\"RGBColor\":{\"Red\":0,\"Green\":255,\"Blue\":0}}"
}

设置设备属性

定义

POST /api/device/props

参数
参数 类型 说明
product_key String 必填,设备pk
device_name String 必填,设备名称
items String 需要设置的属性,需要是JSON字符串
返回
参数 类型 说明
msg String 描述请求结果的产生原因,success成功,其他为失败
示例

请求:

http://localhost:7001/api/device/props

请求参数:

{
    "product_key": "xxxxxxxxxx",
    "device_name": "nodemcu_01",
    "items": "{\"RGBColor\":{\"Red\":0,\"Green\":255,\"Blue\":0}}"
}

返回

code: 200
{
    "msg": "success"
}

结语

GitHub加入钉钉群交流给AliOS Tings 3.0 一颗STAR获取整套阿里云AIoT技术/产品

AliOS Things 近期内容集锦(更新中···)


相关开发者交流钉钉群
AliOS Things 3.0
image.png

支付宝小程序
image.png

相关实践学习
钉钉群中如何接收IoT温控器数据告警通知
本实验主要介绍如何将温控器设备以MQTT协议接入IoT物联网平台,通过云产品流转到函数计算FC,调用钉钉群机器人API,实时推送温湿度消息到钉钉群。
阿里云AIoT物联网开发实战
本课程将由物联网专家带你熟悉阿里云AIoT物联网领域全套云产品,7天轻松搭建基于Arduino的端到端物联网场景应用。 开始学习前,请先开通下方两个云产品,让学习更流畅: IoT物联网平台:https://iot.console.aliyun.com/ LinkWAN物联网络管理平台:https://linkwan.console.aliyun.com/service-open
相关文章
|
3天前
|
小程序 Android开发
|
2天前
|
小程序 云计算 Android开发
发者社区 云计算 文章 正文 小程序开发与公众号用户关联推送消息(九)+ 10月更文挑战第24天
发者社区 云计算 文章 正文 小程序开发与公众号用户关联推送消息(九)+ 10月更文挑战第24天
16 5
|
2天前
|
小程序
小程序开发与公众号用户关联推送消息(八)+ 10月更文挑战第23天
小程序开发与公众号用户关联推送消息(八)+ 10月更文挑战第23天
25 3
|
2天前
|
小程序
小程序开发与公众号用户关联推送消息(七)+ 10月更文挑战第22天
小程序开发与公众号用户关联推送消息(七)+ 10月更文挑战第22天
18 3
|
2天前
|
小程序
小程序开发与公众号用户关联推送消息(六)+ 10月更文挑战第21天
小程序开发与公众号用户关联推送消息(六)+ 10月更文挑战第21天
18 2
|
2天前
|
小程序
小程序开发与公众号用户关联推送消息(五)+ 10月更文挑战第20天
小程序开发与公众号用户关联推送消息(五)+ 10月更文挑战第20天
20 2
|
4天前
|
小程序
|
4天前
|
人工智能 小程序
【一步步开发AI运动小程序】五、帧图像人体识别
随着AI技术的发展,阿里体育等公司推出的AI运动APP,如“乐动力”和“天天跳绳”,使云上运动会、线上健身等概念广受欢迎。本文将引导您从零开始开发一个AI运动小程序,使用“云智AI运动识别小程序插件”。文章分为四部分:初始化人体识别功能、调用人体识别功能、人体识别结果处理以及识别结果旋转矫正。下篇将继续介绍人体骨骼图绘制。
|
5天前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。
|
2天前
|
小程序