开发者社区> 智能计算灵骏> 正文

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
如何用SystemView分析AliOS Things
SystemView 是一个用于分析嵌入式系统性能的工具。SystemView可以分析系统中有哪些中断、任务执行了,以及它们的先后关系。 可以完整的深入观察一个应用程序运行时的行为,它揭示了在任务运行中发生了什么,哪个中断触发了任务切换,中断和任务调用了哪个底层系统的API函数。
147 0
一文轻松入门HaaS100诊断调试系统_AliOS Things 3.3
AliOS Things 自带了调试诊断功能,提供了常见的CLI调试命令(可输入help查看)。
86 0
结合AliOS Things谈嵌入式系统通用问题定位方法(2):内核相关基础
内核提供的任务创建接口,会存在参数指定当前任务创建完立即运行还是需要显示调用start运行,需要注意。如果在创建任务时指定了立即执行,而在创建任务后去设置任务参数,可能是不生效的。(尤其posix的pthread接口经常遇到这种问题)
180 0
HaaS100开发调试系列 之 使用AliOS Things诊断调试组件定位Bug
一个更方便定位系统异常死机的方法——AliOS Things的诊断调试组件
652 0
使用线上的开发板做开发调试 |《AliOS Things快速开发指南》
当您手上没有现成可用的开发板时,也可以使用线上的开发板来调试验证您的程序。本文主要介绍线上开发板的使用流程。
2124 0
使用线下开发板进行开发调试 |《AliOS Things快速开发指南》
本文主要介绍如何使用VSCode进行项目编译、固件烧录及串口监控。
2393 0
iOS使用社会化分享集成详解哈~
 前言最近项目需要加入第三方分享功能,看了网上的一些第三方SDK的介绍,觉得ShareSDK是一个很强大方便的第三方工具,所以选择了ShareSDK来完成。这里记录一下完整的集成与使用流程。1.申请ShareSDK的AppKey以及第三方平台的AppKeyShareSDK的AppKey直接到Mob.
1854 0
AliOS Things网络适配框架 - SAL
很多物联网应用场景中,都需要使用主控MCU外接连接芯片(如WiFi、NB-IoT)的解决方案。为方便这类场景的开发,AliOS Things提供了Socket Adapter Layer(SAL)框架和组件方案
6005 0
手把手教你深度定制tiny4412安卓5.0系统(一)---开发板如何预置文件到android系统
想要预置文件,首先要了解Android源码中device这个目,打开这个目录我们看到,这个目录厂家会针对不同的开发板做一些修改: 在这个目录中,我们看到有不同的厂家定制的信息,我们这款开发板是友善之壁提供的,那么我们只要进入friend-arm这个目录下就可以了,进到这个目录,看到tiny4412,我们切换进入看到: 要预置相关的文件,前面有一篇文章专门讲过怎么预置,一般是在device.mk中进行,但是平台不同,供应商会整合到其它地方: 文章如下,下面我们将参考这篇文章进行预置。
1471 0
文章
问答
来源圈子
更多
致力于实现万物互联的美好世界,为生态合作伙伴提供基于云计算、大数据、人工智能、云端一体化、安全的物联网基础平台和内容服务平台。
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
AliOS Things集成开发环境 降低开发门槛
立即下载
AliOS Things集成开发环境降低开发门槛
立即下载
AliOS Things 电源管理框架
立即下载