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
相关文章
|
30天前
|
小程序 数据安全/隐私保护
跑腿小程序系统源码
这是一款跑腿小程序,带有智能派单、系统派单、同城配送、校园跑腿、预约取件、用户端+骑手端 基于FastAdmin+thinkphp和uniapp开发的优创同城跑腿系统,支持帮取、帮送模式,包含用户端、骑手端、运营后台。
77 32
|
28天前
|
JSON 小程序 UED
微信小程序 app.json 配置文件解析与应用
本文介绍了微信小程序中 `app.json` 配置文件的详细
132 12
|
24天前
|
小程序 前端开发 关系型数据库
uniapp跨平台框架,陪玩系统并发性能测试,小程序源码搭建开发解析
多功能一体游戏陪练、语音陪玩系统的开发涉及前期准备、技术选型、系统设计与开发及测试优化。首先,通过目标用户分析和竞品分析明确功能需求,如注册登录、预约匹配、实时语音等。技术选型上,前端采用Uni-app支持多端开发,后端选用PHP框架确保稳定性能,数据库使用MySQL保证数据一致性。系统设计阶段注重UI/UX设计和前后端开发,集成WebSocket实现语音聊天。最后,通过功能、性能和用户体验测试,确保系统的稳定性和用户满意度。
|
1月前
|
移动开发 开发框架 小程序
轻松搭建婚恋交友系统源码,H5/小程序/APP自动适配,智能匹配恋爱交友平台快速落地
婚恋交友系统涵盖在线交友、线下活动、专业服务、社交娱乐等,满足用户多样化需求。系统设计简洁易用,提供实名认证、多注册方式及安全保护,确保用户隐私和数据安全。功能丰富,支持图文展示、筛选匹配、聊天互动、虚拟礼物等,提升互动趣味性。平台可分类管理用户、审核信息、智能推荐,优化用户体验。基于TP6+Uni-app框架,实现跨平台同步,支持二次开发,适应不同市场需求。 [了解更多](https://gitee.com/multi-customer-software/jy)
|
28天前
|
JSON 小程序 JavaScript
原生微信小程序笔记完整总结
原生微信小程序笔记完整总结
42 1
|
30天前
|
小程序 IDE PHP
圈子源码如何打包生成App小程序/开发一个圈子系统软件所需要的费用体现在哪里?
将PHP源码打包成App的过程涉及多个步骤和技术选择。以圈子源码为例,首先明确需求,确定App功能和目标用户群体,并根据需求开发小程序页面,如用户注册、圈子列表等。源码准备阶段确保源码适用于小程序开发,环境配置需安装IDE(如微信开发者工具)及依赖库。最后在IDE中打包小程序并上传至管理平台,通过审核后发布。费用方面,模板开发成本较低,定制开发则更高,具体取决于需求复杂度和第三方服务费用。
73 0
|
2月前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
|
28天前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
26 0
|
2月前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十七、如何识别用户上传视频中的人体、运动、动作、姿态?
【云智AI运动识别小程序插件】提供人体、运动、姿态检测的AI能力,支持本地原生识别,无需后台服务,具有速度快、体验好、易集成等优点。本文介绍如何使用该插件实现用户上传视频的运动识别,包括视频解码抽帧和人体识别的实现方法。
|
2月前
|
小程序 安全 网络安全
清晰易懂!陪玩系统源码搭建的核心功能,陪玩小程序、陪玩app的搭建步骤!
陪玩系统源码包含多种约单方式、实时语音互动、直播间与聊天室、大神申请与抢单、动态互动与社交及在线支付与评价等核心功能。搭建步骤包括环境准备、源码上传与解压、数据库配置、域名与SSL证书绑定、伪静态配置及后台管理。注意事项涵盖源码安全性、二次开发、合规性和技术支持。确保平台安全、合规并提供良好用户体验是关键。