Start HaaS applet development in 30 minutes

1. Introduction to Mini Program

Mini Program is an application that can be used without downloading and installing. It realizes the dream of application "at your fingertips". Users can open the application by scanning or searching. It also embodies the "use and go" concept, users don't need to worry about whether to install too many applications. Applications will be everywhere and available at any time, but there is no need to install or uninstall.

For developers, the threshold for small program development is relatively low, and it is not as difficult as APP. It can meet simple basic applications and is suitable for the conversion of life service offline shops and non-rigid low-frequency applications. For users, it can save the time cost and mobile phone memory space; for developers, it can also save development and promotion costs.

Therefore, we choose small programs as the client application of the HaaS ecosystem to help users quickly get through the cloud link with the lowest development cost.

2. Mini Program Developer Tool (IDE)

Users can go to  https://opendocs.alipay.com/mini/ide/overview to download the Mini Program Developer Tool ( the version used in this article is 1.17.4 ). In addition to Alipay applet and DingTalk applet, the tool also supports the development of various software versions of applets such as Taobao, Tmall Elf, and AutoNavi applet.

Create blank project

The interface after creation is as follows:

We open the sidebar, edit the code in pages/index/index.axml and save the file, you can see HelloWorld in the simulator

<view>
  HelloWorld！
</view>

But it's not over yet. We try to click on the real machine debugging or preview or upload in the upper right corner, and a prompt will appear to "associate apps".

It turns out that before the development of the applet, we need to go to the corresponding platform to apply for the AppID of the applet. It is the unique identifier of each applet. Only with it can the applet be run on the real machine.

3. Alipay Mini Program Application

Click the small triangle in the "Associated Applications" window, click Create Mini Program, and enter the Alipay open platform. Click "Control Panel" in the title bar.

In the console, click "Create Application"-"Small Program"

Fill in the necessary information to complete the creation.

After the creation is complete, you can associate the newly created application in the upper left corner of the applet developer tool, and then click "debug on real device", the applet will be automatically displayed on the Alipay App page of the mobile phone.

3.1, real machine running results

4. Dingding Mini Program Application

In order to use Dingding Mini Program for development, we first need to switch the IDE development mode to Dingding Mini Program. Click on the upper left corner and select "Manage".

Select the "Dingding" applet and click OK.

Click the upper left corner again, you can see that there are Dingding application options in the to-be-selected list. Here we choose internal enterprise applications.

In "Select Associated Enterprise Internal Application", select "Create Internal Enterprise Application".

Click "Registered Enterprise" in the upper right corner (this is actually a virtual small program development group created here, there will be an additional chat group with the same name in the Dingding application, you can join other members in this group), and complete the registration according to the prompts .

Go to the "Application Development" page, select "Internal Development" and "Mini Program", and click "Create Application".

Fill in the corresponding applet information.

Complete the creation of the DingTalk applet.

At this time, in the IDE, you can see the small program you just created, and you can debug it on the real machine.

5. HaaS cloud nail integrated development

This chapter introduces how to use the SDK to develop the DingTalk applet. The first is to download HaaS applet development SDK on github.

5.1. Get the SDK

git clone -b dev_3.1.0_haas https://github.com/alibaba/AliOS-Things.git

SDK related code and operation readme are in the application/miniapp/ directory.

5.2, SDK directory structure

/
├─ lib (存放依赖库的文件夹，用户无需关心)
│    ├─ @alicloud/pop-core     （https://github.com/aliyun/openapi-core-nodejs-sdk）
│    ├─ kitx
│    └─ iot-packet.js              （封装给用户的文件）
├─ pages                              （页面文件夹，用户在这里自定义页面，示例持续更新中）
│    └─ index                        （首页 选择进入不同示例） 
│             ├─ index.axml         
│             ├─ index.js           
│             ├─ index.acss 
│             └─ index.json 
│    └─ HaasCar                    （示例1 HaaS小小蛮驴）
│             ├─ HaasCar.axml    （页面布局文件）
│             ├─ HaasCar.js        （控制逻辑，用户在这里定义交互行为）
│             ├─ HaasCar.acss    （页面样式）
│             ├─ HaasCar.json      （页面配置，用于配置页面标题等）
│             └─ HaasCar.TSL.json （示例对应的TSL文件，用户可以在物联网平台上导入该文件生成物模型）
│    └─ HaasFlower              （示例2 HaaS养花，目录结构同 HaasCar）
├─ app.js                            （注册小程序，在这里进行全局参数配置，如 AccessKey）
├─ app.acss                         （小程序全局样式）
├─ app.json                         （小程序全局配置，可以在这里设置小程序打开的默认页面）
└─ others

5.3, SDK use

Use the small program development tool to open the miniapp project.

• step1 Fill in AccessKeyID and AccessKeySecret in app.js to obtain cloud API call permissions
• step2 Fill in the DeviceName and ProductKey of the target device, here is the device to be controlled

// app.js
let accessKey = {
  accessKeyId: '<- accessKeyId ->', 	// 填入阿里云物联网平台生成的 assessKeyId 以及 Secret
  accessKeySecret: '<- accessKeySecret ->',
}

// HaasCar.js
let device = {
  DeviceName: '<- DeviceName ->',   // 填入目标设备 DeviceName 以及 ProductKey
  ProductKey: '<- ProductKey ->'
}

Several key parameters mentioned in the code:

• AccessKeyID AccessKeySecret

Cloud account AccessKey is the key for the user to access the Alibaba Cloud API. ( Https://usercenter.console.aliyun.com/#/manage/ak )

For security, we can take the form of creating RAM sub-accounts to separate permissions.

After creation, you need to manually assign permissions, click on the right to add permissions. I directly chose AdministratorAccess here  . After adding it is as follows.

• DeviceName ProducKey

These two parameters are generated when the device is created.

5.4, ​​compilation verification

Click the "Real Device Debugging" button in the upper right corner of the Mini Program IDE, and after the QR code is generated, use the Dingding APP to scan the code to launch the Mini Program.

  

At this point, the complete small program is completely running and can interact with the Alibaba Cloud IoT platform. There will be a series of step-by-step sharing of HaaS instance applets, so stay tuned. Thank you

 

6. Developer technical support

If you need more technical support, you can join the Dingding Developer Group

For more technology and solution introduction, please visit the Aliyun AIoT homepage https://iot.aliyun.com/