table of Contents
One, create a new web application
1. Add "equipment operation map" page
2. Add "Device Management" page
5. Add "Device Properties" page
Fourth, the menu and page binding
1. Bind a single page to a single menu
Six, view the effect of web applications
Preface
In the previous article, we introduced how to use existing applications for editing to edit and obtain single-device web applications on the Alibaba Cloud IoT platform . However, if we want to learn how to develop web applications suitable for actual business needs, we need to learn how to develop web applications with multiple products and multiple devices.
This article describes how to use IoT Studio to develop your own web applications on the Alibaba Cloud IoT platform, so that there can be multiple points in the same control, and each point displays its own information. Users do not need to know how many devices there are in advance.
The specific steps are described as follows.
One, create a new web application
The prerequisite for creating a new web application is that a project has been created.
For how to create a project on Alibaba Cloud, please refer to the previous article How to use the existing IoT Studio project template to create a project on the Alibaba Cloud Internet of Things platform .
Here, we will no longer introduce how to create a project, but on the basis of the original project, add a new web application.
Figure 1 Create your own web application on the Alibaba Cloud IoT platform
The method of creating a new web application is shown in Figure 1. The "application name" can be determined by yourself, the "belonging project" can be selected from the previously created project "environmental awareness solution", and the "description" can be written about the application. Explain, lest there are too many applications and can't remember what an application is used for.
Second, create a menu
This step is used to create the menu of the user interface.
It should be noted that the sub-menus included in the menu here should correspond to the pages added in the next step one-to-one.
As shown in Figure 2, select the navigation layout and click "Add Main Menu".
Figure 2 Adding a main menu to the solution on the Alibaba Cloud IoT platform
On the interface shown in Figure 2, click on "Add Main Menu" to add 4 menus, "General View of Equipment Operation", "Equipment Management", "Equipment Properties", and "RAK Product Display".
Three, add pages
1. Add "equipment operation map" page
As shown in Figure 3, click "+" on the interface shown in Figure 3 to create a new page. When creating a new page, you can select a template, for example, select the "General Equipment Operation and Maintenance Large Screen" template under "Large Screen".
You can also modify the name of the above-mentioned newly added page, for example, modify the page name to "equipment operation general map".
Figure 3 The page of adding device operation overview to the solution on the Alibaba Cloud IoT platform
2. Add "Device Management" page
Create a new page, as shown in Figure 4, and select the "Device Management" template. Modify the page name to "device management" to get the device management page.
Figure 4 Alibaba Cloud Internet of Things platform selects the device management template of the web application
3. Set access permissions
On the interface shown in Figure 5, check "Access Permissions".
Available options include "Login-free Access" and "Access Restriction". Among them, you need to set the authentication in the "application settings" first, and then follow the prompts to operate.
In the interface shown in Figure 5, you can also set a background image.
Figure 5 Setting access permissions for web applications on the Alibaba Cloud IoT platform
4. Choose a product
In the interface shown in Figure 6, you can click "Select Product". At this time, all the products you created before can be selected. You can select one product at a time, or you can select multiple products at once.
As shown in Figure 6, after clicking "Select Product", a window will pop up in which there is a product list (currently only RAK5205 is available for selection), and product RAK5205 can be selected.
Click "Product Management", you can also associate more products, or create products. For details on how to associate products or create products on the Alibaba Cloud IoT platform , you can check the previous article How to add your own LoRa node device on the Alibaba Cloud IoT platform .
It should be noted that only by clicking in the middle of the "Device Management" page, the "Select Product" page as shown on the right side of Figure 4 will appear.
Figure 6 Selecting products for web applications on the Alibaba Cloud IoT platform
5. Add "Device Properties" page
Click the "+" shown in Figure 7 to create a new page, and select the "Device Properties" template. The page name can be modified, for example, to "Device Properties".
Similarly, you can also set permissions, such as checking "Login-free access", and you can also set a background image.
Figure 7 Add device property page for web application on Alibaba Cloud IoT platform
By clicking the middle position of the interface as shown in Figure 7, the "Select Product" column can appear on the right side, and you can also select an existing product, or newly create or newly associate other products.
In this way, we have created all the pages. Next, we will bind the pages to the main menu.
Fourth, the menu and page binding
1. Bind a single page to a single menu
Click the page icon on the left to switch to the page interface, as shown in Figure 8.
On the interface shown in Figure 8, click "Configuration".
At this time, at the bottom of the right column, "Menu Configuration" appears, which will display the menu you created according to the method described in the second part above. When you hover the mouse on the name of a certain menu, as shown in Figure 8, when hovering on the menu "equipment running map", three small buttons will appear on the right, the first one (that is, the red square circled Circled, this is added to this article, the Alibaba Cloud platform does not have the red square) button is used to bind the page for this menu.
Figure 8 Schematic diagram of the page and menu of the web application bound to the Alibaba Cloud IoT platform
Click the first button and a small window as shown in Figure 9 will appear.
As shown in Figure 9, all current application pages will be automatically listed at the "target link", which is the page you created according to the method described in the third part.
Click in the circle in front of one of the pages to select the page, and click "OK", the page is bound to the menu "General view of equipment operation".
Figure 9 Schematic diagram of binding method of page and menu of Alibaba Cloud Internet of Things platform web application
According to the above method, you can bind the remaining pages and menus in turn.
2. Set the home page
We need to set the first page that the user sees after logging in, which is the home page.
As shown in Figure 10, here we set the "equipment operation map" as the "home page", and check the "login-free access".
Figure 10 Alibaba Cloud Internet of Things platform sets the homepage of the web application
Check "Access Permissions" on the "Device Management" page, and check "Login-free access" on other pages. The application is now developed, and the application can be released below.
Five, release the application
As shown in Figure 11, after binding the page and menu, click the "Save" button in the upper right corner of IoT Studio, and then click "Preview". If there is no problem, click "Publish" and fill in the release information.
Figure 11 Publish a web application on the Alibaba Cloud IoT platform
Click "OK" to bind the domain name, and you can view the display effect through the domain name.
Six, view the effect of web applications
The web application can be opened by entering the bound domain name in the browser.
The home page display is shown in Figure 12.
Click on the names of other pages shown in the left column of Figure 12 to display the status of other pages.
At this point, a basic multi-device display and management application has been built.
Figure 12 Schematic diagram of the homepage of the web application built with the IoT Studio of the Alibaba Cloud Internet of Things platform
Conclusion
This article describes how to build a basic multi-device display and management web application based on personal business needs on the Alibaba Cloud IoT platform.