Abstract: If you want to make an IoT control APP without too much code workload, then the "framework" idea is better. That is, through some form, a web page that can control IoT devices is generated, and then this web page is "packaged" into an APP, or a browser APP, so that the browser can only display this website. This article takes the "mobile visualization" of the Alibaba Cloud IoT platform as an example to explain the specific method of making this APP.
The achieved effect is shown in the following figure: To achieve this effect, more technical knowledge is required. Today, the "webpage" part of the "frame" will be explained clearly, and the "framework" will be discussed in the next article.
Development environment: hardware (haas100 development board), software: Alibaba Cloud Internet of Things platform IoT Studio .
table of Contents
1. Register the product on the Alibaba Cloud IoT platform
2. Get device "triple" information
3. Burn the triplet information into the device
4. Use IoT Studio to create a new mobile visualization project
5. Configuration page and control components
7. Publish the mobile visualization page
Specific steps are as follows:
1. Register the product on the Alibaba Cloud IoT platform
I won’t go into details here. For details, please refer to How to add a new device to the Alibaba Cloud IoT platform
2. Get device "triple" information
These three parameters (in fact, there is also the fourth parameter Product Secret, which is commonly used under the Alibaba Cloud Life IoT platform)
3. Burn the triplet information into the device
Taking Alibaba Cloud haas100 as an example, the method to burn the triplet information into the device is to write the triplet information directly into the firmware code. There are also some hardware, such as ESP32, which supports burning the triplet into a file to a specified partition. The purpose of these two operations is the same, both are to allow the device to have an ID card, one password for one device.
The method of operation is to replace the information inside the single quotes with the triple information of the current device at the corresponding position in the code.
Different devices have different methods for burning firmware code into the device. For specific operation methods, please refer to the manual of the corresponding device.
The burning method of haas100 is "Push", because haas100 has built-in js engine, so you don't need to compile and write, but use the serial port to "transmit" the code to the device. After the device is reset, the js program is automatically executed. It is very convenient to adopt the method of parsing and execution.
4. Use IoT Studio to create a new mobile visualization project
IoT Application Development (IoT Studio) is a productivity tool provided by Alibaba Cloud for IoT scenarios and is part of the Alibaba Cloud IoT platform. It can cover the core application scenarios of various IoT industries, help you complete IoT data analysis, equipment, service and application development efficiently and economically, and accelerate the construction of IoT SaaS.
Internet of Things application development provides a series of convenient Internet of Things development tools such as Web visualization development, mobile visualization development, business logic development and Internet of Things data analysis, to solve the problem of long development links, complex technology stacks, and high coordination costs in the Internet of Things development field. The problem of difficulty in program transplantation.
The IoT Studio mobile visual development function initially provided online generation of APK files, which was very convenient. It didn't take long for this function to be cancelled.
After the revised mobile visualization function was launched on November 11, 2020, it no longer supports APK file generation. Instead, it generates a web page suitable for mobile devices.
The specific method is as follows:
Enter the console https://studio.iot.aliyun.com/
Enter mobile visualization development
Create a new visualization application, enter the application name, and select the project it belongs to.
5. Configuration page and control components
The visual setting page has three main functions. The "page" page is used for visual editing, what you see is what you get. The "Components" page is used to add required components on the page, such as text, pictures, buttons, lists, etc. Can make a very beautiful interface.
For example, as shown in the figure below, you can add elements such as text, pointers, and curves. If you work hard, you can design a very beautiful and generous interface. As an example, there is a button on this interface to control the LED lights on the haas100 development board.
By configuring the data source of the button, the button can be bound to the LED lights on the development board. The method is to select the product --- equipment --- data item. In this example, the switch attribute is selected. This attribute is defined when new products and devices are created on the IoT platform. If there is no defined attribute, it cannot be set here. After the setting is over, if you click to verify the data format and a prompt message of successful verification appears, it proves that the setting is successful.
The design concept of Alibaba Cloud's IoT platform IoT Studio is online codeless programming. Realize mobile applications through simple drag and drop operations.
6. Settings before release
As mentioned at the beginning of this article, this method is the easiest, just make a web page. But everything has its pros and cons: it's easy to make a page, but publishing it is very troublesome.
This interface is a web page, you can preview it. If you want an ordinary mobile phone to be able to run and control real devices, you must have the function of Internet communication. To put it bluntly, you must have a domain name and a public IP. .
That's right! It is equivalent to having a dedicated website.
Then you need money to buy a server, and you also need money to buy a domain name. All of these can be purchased on Alibaba Cloud.
If you are doing a simple experiment, you can buy a one-year domain name, which is usually thirty or fifty yuan a year.
The server does not need to be purchased, and the charge is a bit expensive. If you are making an IoT application, it is recommended to purchase the package package of the Alibaba Cloud IoT platform. You do not need to configure MQTT and other services on the server side by yourself. Alibaba Cloud completes the operation with one click and charges according to the amount. The price is very cheap. For example, the trial version is only 12 yuan a year. The lightweight version costs only 60 yuan a year and 120 yuan for two years. However, if you purchase a package of 90 yuan or more, you will get a filing service number. This number can be used to file a domain name.
After purchasing the small package of IoT platform, you will have a public IP address.
Once you have the domain name and the public IP address, you need to file with the Ministry of Industry and Information Technology. When you file, you need the service number for the file. The filing process is relatively slow, including phone verification, information modification, and SMS verification.
After the filing is successful, you can return to the IoT Studio of the Alibaba Cloud IoT platform and set the domain name address of the page you designed (and of course the CNAME resolution operation). Publish your own mobile visualization page.
7. Publish the mobile visualization page
Click the small airplane-shaped icon on the IoT Studio mobile visualization operation page to publish.
Publish a successful page.
8. Verification
Enter the set domain name through the browser, and you can see a huge "mobile" page. It doesn't matter, if you can access it via the Internet, you can access it via the mobile phone.
For example, access via Mi 8 browser
9. The next step
With a page that can be accessed through the Internet, you can't always submit a URL to the customer, right?
The customer hopes to have an application that can be controlled through a mobile phone by clicking an APP icon.
The next article will introduce how to make an APP. You can see this page with one click.