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

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

目录

应用演示

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

点击观看视频演示

架构图

|480x480|center

技术栈拆解

  • 小程序服务端(源码)。
  • 支付宝小程序端(源码)。
  • 设备端,基于AliOS Things 3.0(源码)。

设备端

设备端运行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天前
|
小程序 数据挖掘 UED
餐饮店小程序开发定制桌边二维码点餐系统
随着技术不断进步,各行各业都在使用新工具来提高效率和服务质量。餐饮业也不例外。餐饮点餐小程序系统是基于微信公众平台开发的在线点餐方式。顾客可以通过手机微信扫描餐桌上的二维码,进入餐厅的点餐小程序,选择菜品、数量和口味,直接完成点餐。点餐系统会自动保存并发送给厨房,避免了传统手工点餐容易出错的问题。
|
12天前
|
小程序 JavaScript Java
基于微信小程序便捷记账系统设计与实现(源码+lw+部署文档+讲解等)
基于微信小程序便捷记账系统设计与实现(源码+lw+部署文档+讲解等)
36 8
|
5天前
|
小程序 安全 搜索推荐
【微信小程序开发实战项目】——个人中心页面的制作
本文介绍了如何设计和实现一个网上花店的微信小程序,包括个人中心、我的订单和我的地址等功能模块。个人中心让用户能够查看订单历史、管理地址和与客服互动。代码示例展示了`own.wxml`、`own.wxss`和`own.js`文件,用于构建个人中心界面,包括用户信息、订单链接、收藏、地址、客服和版本信息。我的订单部分展示了订单详情,包括商品图片、名称、销量、价格和订单状态,用户可以查看和管理订单。我的地址功能允许用户输入和编辑收货信息,包括联系人、性别、电话、城市和详细地址。每个功能模块都附有相应的WXML和WXSS代码,以及简洁的样式设计。
31 0
【微信小程序开发实战项目】——个人中心页面的制作
|
5天前
|
小程序 安全 搜索推荐
【微信小程序开发实战项目】——如何制作一个属于自己的花店微信小程序(3)
这是一篇关于微信小程序开发的文章摘要,作者介绍了如何创建一个网上花店小程序,旨在提供便捷的购花体验。小程序包含鲜花分类功能,允许用户按品种、颜色和用途筛选,确保快速找到合适的鲜花。它还提供了配送服务,保证鲜花的新鲜度。文章展示了`cash.wxml`、`cash.wxss`和`cash.js`的部分代码,用于实现分类和商品展示,以及`qin.wxml`、`qin.wxss`和`qin.js`,涉及商品详情和购买付款流程。代码示例展示了商品列表渲染和交互逻辑,包括页面跳转、数据传递和点击事件处理。文章最后提到了购买付款界面,强调了安全和便捷的支付体验。
31 0
【微信小程序开发实战项目】——如何制作一个属于自己的花店微信小程序(3)
|
8天前
|
小程序 BI
水滴筹小程序设计开发:打造公正透明的社会援助体系
随着互联网的快速发展,移动支付和线上服务逐渐成为人们日常生活的一部分。在这种背景下,医疗众筹平台应运而生,为大众提供了筹款、互助、公益的新渠道。水滴筹小程序的诞生,与中国的互联网环境紧密相连。
|
12天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
27 7
|
12天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
20 7
|
12天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
27 7
|
12天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
26 7
|
8天前
|
小程序 安全 数据挖掘
陪玩语聊APP小程序定制开发模块功能
随着电竞行业的规范化,游戏陪玩软件兴起,提供专业陪玩服务。核心功能包括:多样化注册登录、用户资料展示、智能匹配筛选陪玩、语音互动(多人/私聊)、订单交易管理、陪玩入驻审核、数据分析、客服系统及社交功能。旨在融合游戏、语音聊天与社交,构建综合娱乐平台。