Submit device fault reports in steps-IoT Studio(IoT Studio)-阿里云帮助中心

Prerequisites

You have a project, for example, project_space. For more information, see Projects.

Step 1: Create a database table

Log on to the ApsaraDB RDS console.
On the ApsaraDB RDS management page, click Create Instance to create a MySQL database instance.
In the instance list, find your instance and click Manage.
In the left-side navigation pane, click Account Management to create a database user account (for example, test_save) and password.
In the left-side navigation pane, click Database Management. Create a database (for example, test_db) and grant permissions to the test_save account.
In the left-side navigation pane, click Data Security and add a database IP address whitelist. For more information, see Set IP Address Whitelist.
In the left-side navigation pane, click Basic Information to view the database's basic information and request a public endpoint. For more information, see Apply for a public endpoint.
In the upper-right corner of the page, click Log On to Database. Enter the username (test_save) and password to log on to the database.
On the DMS page, create a database table named device_server to store submitted ticket data.

Set id and time to auto-increment and auto-update, respectively.

The device_server table contains the following four columns: id (type: int, length: 11, primary key, auto-incrementing), user (type: text, contact person's mobile number), msg (type: text, issue description), and time (type: datetime, ticket submission time, default value: CURRENT_TIMESTAMP, with ON UPDATE CURRENT_TIMESTAMP selected).

Step 2: Develop business services

Log on to the IoT Application Development console. In the left-side navigation pane, choose IoT Studio > Project Management and click the card of the project_space project.

Create a public API service named Update Step to refresh the current step displayed in the Steps component. Configure the service as follows. For more information, see Public APIs.

The service orchestration flow connects the following nodes in sequence: HTTP Request → Node.js script → HTTP Response. The Node.js script updates the steps. The script gets the request parameters stepNum (current step number) and butOper (operation type). If the value of butOper is "Next", the step number is increased by 1. If the value of butOper is "Previous", the step number is decreased by 1. The script returns the updated step value.

Node	Description
HTTP Request	You can customize the Action and must configure the following request parameters: stepNum: the current step number. butOper: the operation to update the step.
Node.js script	Edit the script to update the step value.
HTTP Response	Select From Node and choose Node.js script to return the updated step value.

Node

Description

HTTP Request

You can customize the Action and must configure the following request parameters:

stepNum: the current step number.
butOper: the operation to update the step.

Node.js script

Edit the script to update the step value.

HTTP Response

Select From Node and choose Node.js script to return the updated step value.

Create a public API service named Mobile Number Validation to validate the entered mobile number. Configure the service as follows.

Node	Description
HTTP Request	You can customize the Action. Configure the iphone request parameter for the mobile number and set it to Optional.
Node.js script	Edit the script to validate the mobile number. `module.exports = async function(payload, node, query, context, global) { const iphone = payload.iphone; let warn = 'The mobile number cannot be empty.'; if (iphone && iphone.length > 0) { warn = 'Validation passed.'; // Check whether the mobile number is valid. if (!(/^1[3456789]\d{9}$/.test(iphone))) { warn = 'The mobile number format is invalid.'; } } return warn; };`
HTTP Response	Select From Node and choose Node.js script to return the validation result.

Node

Description

HTTP Request

You can customize the Action. Configure the iphone request parameter for the mobile number and set it to Optional.

Node.js script

Edit the script to validate the mobile number.

module.exports = async function(payload, node, query, context, global) {
  const iphone = payload.iphone;
  let warn = 'The mobile number cannot be empty.';
  if (iphone && iphone.length > 0) {
      warn = 'Validation passed.';
      // Check whether the mobile number is valid.
      if (!(/^1[3456789]\d{9}$/.test(iphone))) {
        warn = 'The mobile number format is invalid.';
      }
  }
  return warn;
};

HTTP Response

Select From Node and choose Node.js script to return the validation result.

Create an HTTP service named Store Data to store ticket data in the device_server table. Configure the service as follows.

The service orchestration flow connects the following nodes in sequence: HTTP Request → ApsaraDB for MySQL → HTTP Response. For the ApsaraDB for MySQL node, configure the following parameters: for Username, enter the created database account, such as test_save; enter the database password; for Connection Address, enter the public endpoint of the ApsaraDB RDS instance; for Database Name, enter test_db; for Port, enter 3306; for Operation Type, select Insert.

Node	Description
HTTP Request	You can customize the Action and must configure the following request parameters: user: the mobile number of the contact person. msg: the issue description.
ApsaraDB for MySQL	Set the parameters for inserting data. For more information, see ApsaraDB for MySQL. `{ "table": "device_server", "rows": [{ "user": "{{payload.user}}", "msg": "{{payload.msg}}" }] }`
HTTP Response	Select From Node and choose ApsaraDB for MySQL to return the data insertion result.

Node

Description

HTTP Request

You can customize the Action and must configure the following request parameters:

user: the mobile number of the contact person.
msg: the issue description.

ApsaraDB for MySQL

Set the parameters for inserting data. For more information, see ApsaraDB for MySQL.

{
    "table": "device_server",
    "rows": [{
        "user": "{{payload.user}}",
        "msg": "{{payload.msg}}"
    }]
}

HTTP Response

Select From Node and choose ApsaraDB for MySQL to return the data insertion result.

Create an HTTP service named Submission Result to return the ticket submission outcome. Configure the service as follows.

Node	Description
HTTP Request	You can customize the Action and must configure the following request parameters: user: the mobile number of the contact person. msg: the issue description.
Node.js script	Edit the script to check whether the request parameters are empty. `module.exports = async function(payload, node, query, context) { const user = payload.user; const msg = payload.msg; let result='Ticket submitted. Please keep your phone available for contact.' if(user.length ==0 \|\| msg.length == 0){ result='Failed to submit the ticket. Please refresh the page and fill in the required information.'; } return result; }`
HTTP Response	Select From Node and choose Node.js script to return the check result.

Node

Description

HTTP Request

You can customize the Action and must configure the following request parameters:

user: the mobile number of the contact person.
msg: the issue description.

Node.js script

Edit the script to check whether the request parameters are empty.

module.exports = async function(payload, node, query, context) {
  
  const user = payload.user;
  const msg = payload.msg;
  let result='Ticket submitted. Please keep your phone available for contact.'
  if(user.length ==0 || msg.length == 0){
      result='Failed to submit the ticket. Please refresh the page and fill in the required information.';
  }
  
  return result;
}

HTTP Response

Select From Node and choose Node.js script to return the check result.

Debug and publish each business service.

Step 3: Develop a visual application

Create a web application. For more information, see Create a web application.

In the web application editor, perform the following steps to complete the configuration.

For more information about how to add components, see Add components. For detailed configuration of each component, see the component's documentation.

You can select a component on the canvas and drag it to change its position.

After configuration, the application layout contains the following components: a Submit Ticket title at the top; a green, arrow-style Steps component below the title, which includes the Describe Issue, Enter Mobile Number, and Submit steps; two text boxes in the middle for Please enter the contact's mobile number and Please enter the issue details; a red Validation Prompt on the right; Submission Result text, a Submit/Back Radio Button component, and Next and Previous buttons at the bottom.

Add components and configure their names and styles according to the following table.

Component	Name	Description
Rectangle	Background	Customize width (W) and height (H). Fill color: #FFFFFF. Border color: #CEEBC2.
Text	Title	Text Content: Submit Ticket.
Steps	Steps	Data Source: Select API and then select Update Step to switch between steps. Set the dynamic parameters stepNum and butOper to Variable: step and Variable: butTXT, respectively. Set the refresh frequency to 2 seconds. Create the variables step and butTXT and set their default values to 0 and Next, respectively. Step Settings: Configure three steps in the following order: Describe Issue, Enter Mobile Number, and Submit. By default, the first step, Describe Issue, is selected. Step Style: Set the type to Arrow and the component background color to #CEEBC2.
Text Box	Mobile Number Field	Placeholder text: Please enter the contact's mobile number.
Text Box	Issue Description Field	Placeholder text: Please enter the issue details.
Text	Validation Prompt	Text Style: Font size 16, color #FF0000. Set the Text Content data source to the Mobile Number Validation API. Set the dynamic parameter iphone to Component Value: Mobile Number Field and set the refresh frequency to 2 seconds.
Text	Submit	Set the Text Content data source to the Submission Result API. Set the dynamic parameter user to Component Value: Mobile Number Field and msg to Component Value: Issue Description Field. Set the refresh frequency to 2 seconds.
Radio Button	Radio	Data Source: Use the following static data to display the Submit and Back options. `[ { "label": "Submit", "value": "Submit now, save data" }, { "label": "Back", "value": "Confirm that the entered data is correct" } ]` Default selection: Back. Changing the component's value submits a ticket.
Button	Button 4	Button text: Previous.
	Button 3	Button text: Previous.
	Button 2	Button text: Next.
	Button 1	Button text: Next.

For each button component, configure the Click event interaction to control its visibility for each step.

The following describes the interaction configurations for Button 1 to Button 4.

Assign the fixed values 1, 2, 3, and 2 to the step variable. Assign the button text text to the butTXT variable. This allows you to switch between steps by clicking the buttons.

For more information about interaction configuration, see Configure interactions.

The component visibility mapping for each button is as follows: Button 1 shows the Mobile Number Field, Validation Prompt, and Button 2 components, and hides the Issue Description Field and Button 1 components. Button 2 shows the Radio Button and Button 3 components, and hides the Mobile Number Field, Validation Prompt, and Button 2 components. Button 3 shows the Mobile Number Field, Validation Prompt, and Button 4 components, and hides the Radio Button and Button 3 components. Button 4 shows the Issue Description Field and Button 1 components, and hides the Mobile Number Field, Validation Prompt, and Button 4 components.
Select the Radio Button component and configure the interaction action for the Value Change event. This allows you to validate and store the submitted information and display the result.

For Interaction 1, set the action to Call Other Service. The API source is Service Development Workbench. Select the Store Data service. For request parameters, select dynamic parameter. Set the value of user to Component Value: Mobile Number Field and the value of msg to Component Value: Issue Description Field. For Interaction 2, set the action to Show/Hide. The action shows the Submit component and hides the Button 3, Radio Button, Steps, and Title components.

Hide the Mobile Number Field, Validation Prompt, Submit, Radio Button, Button 2, Button 3, and Button 4 components.
Resize the Rectangle component to 700 × 250 pixels. Use the alignment feature in the component's general styles to position each component. For more information, see Configure styles.
In the upper-right corner, click Preview to debug the application.

When you preview the application, the initial page shows the first step, Describe Issue, which contains the Please enter the issue details text box and a Next button. Users can click Next to proceed to the Enter Mobile Number and Submit steps to submit the fault report.
On the DMS page for the test_db database, query the table to view the stored data.

In the SQL Console, run the SELECT * FROM device_server; query. The submitted ticket data is displayed in the Execution Result pane, including the id, user (contact person's mobile number), msg (issue description), and time (ticket submission time) fields.
Return to the web application editor page and click the Publish button in the upper-right corner to publish the application.