30 minutes to start HaaS applet development

1. Introduction to applet

Applet is an application that can be used without downloading and installing. It realizes the dream of "within reach" of the application. Users can open the application by scanning or searching. It also embodies the concept of "run out and go", and users do not need to care 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 of small program development is relatively low and less difficult than 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 use time, cost and mobile phone memory space; For developers, it can also save development and promotion costs.

Therefore, we choose applet as the client application of HaaS ecosystem to help users quickly open the cloud link at the lowest development cost.

2. Applet developer tool (IDE)

Users can go to https://opendocs.alipay.com/mini/ide/overview Download the applet developer tool (the version used in this article is 1.17.4). In addition to Alipay applet and nailing applet, the tool also supports the development of various software version applets, such as mobile Taobao, tmall elf, and Gaode applet.

Create a blank item

The interface after creation is as follows:

We open the sidebar in pages / index / index Edit the code in AXML and save the file, and you can see HelloWorld in the simulator


But this is not the end. We try to click the real machine debugging or preview or upload in the upper right corner, and we will be prompted to "associate application".

It turned out that before developing the applet, we need to apply for the AppID of the applet on the corresponding platform. It is the unique identification of each applet. With it, we can run the applet on the real machine.

3. Alipay applet application

In the "associated application" window, click the small triangle, click create small program, and enter the Alipay open platform. Click "console" in the title bar.

In the console, click "create application" - "applet"

Fill in the necessary information to complete the creation.

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

3.1 real machine operation results

4. Nailing applet application

In order to use nailing applet for development, we first need to switch the development mode of IDE to nailing applet. Click the top left corner and select "management".

Select the "nail" applet and click OK.

Click the upper left corner again to see that there are nail application options in the list to be selected. Here we choose enterprise internal application.

In select associated enterprise internal application, select create enterprise internal application.

Click "registered enterprise" in the upper right corner (a virtual applet development team is actually created here. There will be another chat group with the same name in the nailing application, and other members can be added to this group), and complete the registration according to the prompt.

Enter the "application development" page, select "enterprise internal development" and "applet", and click "create application".

Fill in the corresponding applet information.

Finish nailing applet creation.

At this point, in the IDE, you can see the applet just created and debug the real machine.

5. HaaS cloud nail integrated development

This chapter describes how to use SDK to develop nailing applet. First, download the HaaS applet development SDK on github.

5.1. Get the cloud nailing applet SDK

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

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

5.2 SDK directory structure

├─ lib (The folder where the dependent library is stored. Users do not need to care)
│    ├─ @alicloud/pop-core     (https://github.com/aliyun/openapi-core-nodejs-sdk)
│    ├─ kitx
│    └─ iot-packet.js              ((files encapsulated to users)
├─ pages                              (Page folder, where users can customize the page, and the example is continuously updated)
│    └─ index                        (Home page (select to enter different examples) 
│             ├─ index.axml         
│             ├─ index.js           
│             ├─ index.acss 
│             └─ index.json 
│    └─ HaasCar                    (Example 1 HaaS Little donkey)
│             ├─ HaasCar.axml    (Page layout file)
│             ├─ HaasCar.js        (Control logic, where users define interaction behavior)
│             ├─ HaasCar.acss    (Page style)
│             ├─ HaasCar.json      (Page configuration (used to configure page title, etc.)
│             └─ HaasCar.TSL.json (Corresponding to the example TSL File, users can import the file on the Internet of things platform to generate an object model)
│    └─ HaasFlower              (Example 2 HaaS For flower cultivation, the directory structure is the same as that of HaasCar)
├─ app.js                            (Register applet and configure global parameters here, such as AccessKey)
├─ app.acss                         (Applet (global style)
├─ app.json                         (Applet global configuration, where you can set the default page opened by the applet)
└─ others

Using SDK

Use the applet development tool to open the miniapp project.

  • step1 is in app JS fill in the AccessKeyID and {AccessKeySecret to obtain the cloud API call permission
  • Step 2: fill in the target device, DeviceName and ProductKey. Here is the device to be controlled
// app.js
let accessKey = {
  accessKeyId: '<- accessKeyId ->', 	// Fill in the assessKeyId and Secret generated by Alibaba cloud Internet of things platform
  accessKeySecret: '<- accessKeySecret ->',

// HaasCar.js
let device = {
  DeviceName: '<- DeviceName ->',   // Fill in the DeviceName and ProductKey of the target device
  ProductKey: '<- ProductKey ->'

Several key parameters mentioned in the code:

  • AccessKeyID AccessKeySecret

The cloud account AccessKey is the key that users use to access Alibaba cloud API s. ( https://usercenter.console.aliyun.com/#/manage/ak)

For safety, we can take to create RAM sub account To separate permissions.

After creation, you need to assign permissions manually. Click on the right to add permissions. I have directly selected "administrator access" 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 machine debugging" button in the upper right corner of the applet IDE, wait for the QR code to be generated, and use the nail APP to scan the code to launch the applet.


At this point, the complete applet runs completely and can interact with Alibaba cloud Internet of things platform. There will be a series of sharing HaaS instance applet step by step in the follow-up. Please continue to pay attention. thank you


6. Developer technical support

If you need more technical support, you can join the nail developer group

For more information on technologies and solutions, please visit Alibaba cloud AIoT homepage https://iot.aliyun.com/

Tags: Javascript Embedded system Mini Program IoT HaaS

Posted by ranam on Tue, 03 May 2022 09:14:06 +0300