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地址、更改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
相关文章
|
15天前
|
人工智能 小程序
【一步步开发AI运动小程序】十五、AI运动识别中,如何判断人体站位的远近?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,无需后台支持,具有快速、体验好、易集成等特点。本文介绍如何利用插件判断人体与摄像头的远近,确保人体图像在帧内的比例适中,以优化识别效果。通过`whole`检测规则,分别实现人体过近和过远的判断,并给出相应示例代码。
|
3天前
|
移动开发 小程序 前端开发
几千怎么部署搭建校园服务平台,校园圈子论坛系统小程序搭建,校园系统源码,多种功能一体的综合性校园平台
校园圈子论坛是一款集交友、二手市场、聊天等多功能于一体的校园社交平台,支持App、小程序和H5三端交付。学生可处理闲置物品、结识新朋友,通过算法匹配兴趣相投的用户。平台提供分享邀请机制,支持自动绑定推荐关系,并设有奖励机制。开发过程中需注重数据安全与系统稳定性,确保功能兼容及性能优化。
30 5
|
3天前
|
移动开发 小程序 前端开发
使用php开发圈子系统特点,如何获取圈子系统源码,社交圈子运营以及圈子系统的功能特点,圈子系统,允许二开,免费源码,APP 小程序 H5
开发一个圈子系统(也称为社交网络或社群系统)可以是一个复杂但非常有趣的项目。以下是一些关键特点和步骤,帮助你理解如何开发、获取源码以及运营一个圈子系统。
39 3
|
9天前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十七、如何识别用户上传视频中的人体、运动、动作、姿态?
【云智AI运动识别小程序插件】提供人体、运动、姿态检测的AI能力,支持本地原生识别,无需后台服务,具有速度快、体验好、易集成等优点。本文介绍如何使用该插件实现用户上传视频的运动识别,包括视频解码抽帧和人体识别的实现方法。
|
14天前
|
人工智能 小程序 UED
【一步步开发AI运动小程序】十六、AI运动识别中,如何判断人体站位?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,本地引擎无需后台支持,具备快速、体验好、易集成等优势。本文介绍如何利用插件的`camera-view`功能,通过检测人体站位视角(前、后、左、右),确保运动时的最佳识别率和用户体验。代码示例展示了如何实现视角检查,确保用户正或背对摄像头,为后续运动检测打下基础。
|
20天前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十三、自定义一个运动分析器,实现计时计数02
本文介绍如何利用“云智AI运动识别小程序插件”开发AI运动小程序,详细解析了俯卧撑动作的检测规则构建与执行流程,涵盖卧撑和撑卧两个姿态的识别规则,以及如何通过继承`sports.SportBase`类实现运动分析器,适用于小程序开发者。
|
20天前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十二、自定义一个运动分析器,实现计时计数01
随着AI技术的发展,AI运动APP如雨后春笋般涌现,如“乐动力”、“天天跳绳”等,推动了云上运动会、线上健身等热潮。本文将指导你从零开始开发一个AI运动小程序,利用“云智AI运动识别小程序插件”,介绍运动识别原理、计量方式及运动分析器基类的使用,帮助你在小程序中实现运动计时和计数功能。下篇将继续探讨运动姿态检测规则的编写。
|
14天前
|
移动开发 小程序 PHP
校园圈子论坛系统采取的PHP语音和uni账号开发的小程序APP公众号H5是否只需要4800元?是的,就是只需要4800元
关于校园圈子论坛系统采用PHP语言和uni-app开发的小程序、APP、公众号和H5是否仅需4800元这个问题,实际上很难给出一个确定的答案。这个价格可能受到多种因素的影响
49 8
|
10天前
|
人工智能 小程序 数据处理
uni-app开发AI康复锻炼小程序,帮助肢体受伤患者康复!
近期,多家康复机构咨询AI运动识别插件是否适用于肢力运动受限患者的康复锻炼。本文介绍该插件在康复锻炼中的应用场景,包括康复运动指导、运动记录、恢复程度记录及过程监测。插件集成了人体检测、姿态识别等功能,支持微信小程序平台,使用便捷,安全可靠,帮助康复治疗更加高效精准。
|
16天前
|
人工智能 小程序 JavaScript
【一步步开发AI运动小程序】十四、主包超出2M大小限制,如何将插件分包发布?
本文介绍了如何从零开始开发一个AI运动小程序,重点讲解了通过分包技术解决程序包超过2M限制的问题。详细步骤包括在uni-app中创建分包、配置`manifest.json`和`pages.json`文件,并提供了分包前后代码大小对比,帮助开发者高效实现AI运动功能。

热门文章

最新文章