DocsICP FilingConsole
Documentation

Custom panel development tutorial

Updated at:
Copy as MD
Product
My Favorites

Developers can use the platform to create and upload custom control panels for IoT devices. This topic describes the development process, upload steps, and file specifications for custom panels.

Prerequisites

You have created a product in the console. For more information, see Create a product.

Upload and preview a device panel

Note

This feature is currently in beta testing. To use this feature, contact your business representative or customer service.

File specifications

  • Place the code build output in a folder named `dist`. Create a new project folder, place the `dist` folder inside it, and compress the project folder into a ZIP file for upload. The `dist` folder must contain an `index.html` file.

  • The name of the compressed file must not exceed 20 characters and can only contain letters, numbers, and underscores (_).

  • The size of the compressed file must not exceed 1 MB.

Upload process

  1. Log on to the IoT Platform console.

  2. On the Interaction > Device Panel page, click Select Panel.

  3. On the Select Panel page, click Upload Custom Panel.

    Important

    Before you can upload a custom panel, you must develop and package it. For more information about the development process, see Develop and debug a custom panel.

    image.png

  4. In the pop-up window, click Upload Custom Dashboard and select the custom dashboard from the folder.image.png

  5. After the panel is uploaded, you can preview it.

    1. Cloud Intelligence App Preview

      In the Cloud Intelligence App, enter developer mode and then scan the QR code in the dialog box to preview the panel.

      Note

      Unreviewed custom panels can only be previewed in developer mode in the Cloud Intelligence App. For more information about how to enter developer mode, see How to enter developer mode in the Cloud Intelligence App.

    2. Tmall Genie App: Preview

      Use the Tmall Genie App to scan the QR code below to open the list of test devices. Then, click the corresponding device to preview it.image.png

Panel review

To ensure a standard experience on the IoT Platform, products with custom panels must pass a review before they can be released for mass production.

  1. After you upload the panel, click Submit For Review on the Batch Production page to start the review process. You cannot publish the product until the panel review is complete.

    Note

    If you upload a new panel after a review has been submitted, the review status resets to "Not Submitted".

    image.png

  2. If the review fails, a reason is provided. You must fix the issue based on the feedback, upload the panel again, and then resubmit it for review.

Develop and debug a custom panel

Panel development scaffolding

Install the scaffolding

npm i aliyun-livinglink-panel-cli -g

Initialize the project

device-panel init

  1. Enter the project information.

    image.png

  2. Select a template category.image.png

  3. Select a development framework.image.png

  4. Install dependencies.image.png

  5. Change to the project directory and run npm start to start the project.

Package the project

device-panel pack
Note

Although the packaging command automatically runs a build if one does not already exist, it is recommended that you run npm run build to build the project locally before packaging. This helps prevent build errors.

image.png

Debug a custom panel

If you want to debug the panel before uploading it, you can generate a QR code and scan it with the app to preview the panel. The steps are as follows:

  1. Obtain the device parameters.

    Use the Cloud Intelligence App or Tmall Genie App to scan the QR code below, which opens the debugging page. Copy the productKey and iotId from the page.

    1. Cloud Intelligence Appimage.png

    2. Tmall Genie Appimage.pngThe following figure shows the content of the debug page:

  2. Construct the parameters.

    Append the device parameters that you copied in the previous step to the following URL.

    https://xx/index.html?_ali_status_bar_transparent_=true&_ali_disable_nav_=true&pk=productKey_from_the_previous_step&devId=iotId_from_the_previous_step

    Note

    1. `xx` represents the local area network (LAN) IP address of the service that is running your local application. Replace `xx` with your actual LAN IP address.

    2. For the Tmall Genie App, you must add the `skillId` parameter to the URL.

  3. Generate the preview URL.

    1. Encode the URL that you constructed in the previous step.image.png

    2. Append the encoded URL to the following preview URL to generate the final preview URL.

      • Cloud Intelligence App

        ilop://hybrid?manifest=false&page=https%3A%2F%2Fxx%2Findex.html%3F_ali_status_bar_transparent_%3Dtrue%26_ali_disable_nav_%3Dtrue%26pk%3DThe_productKey_you_copied_in_the_previous_step%26devId%3DThe_iotId_you_copied_in_the_previous_step

      • Tmall Genie App

        assistant://hybrid?manifest=false&page=https%3A%2F%2Fxx%2Findex.html%3F_ali_status_bar_transparent_%3Dtrue%26_ali_disable_nav_%3Dtrue%26pk%3DThe_productKey_you_copied_in_the_previous_step%26devId%3DThe_iotId_you_copied_in_the_previous_step

  4. Generate the preview QR code.

    Use a third-party tool to convert the preview URL into a QR code.

  5. You can scan the QR code with the Cloud Intelligence App or Tmall Genie App to preview and test the panel.