Monitor warehouse inventory alerts

Updated at:
Copy as MD

In this tutorial, you create two business services and a web application. The application displays inventory alerts for warehouses in different regions and allows you to manually trigger new alerts.

Prerequisites

You have created a project, such as project_space. For more information, see Projects.

Step 1: Create a collector device

  1. In the project list, find the project_space project and click the project card.
  2. On the project details page, click Products in the left-side navigation pane. Click Create Product, configure the parameters, and then click Save.

    In this tutorial, name the product Collector, select a custom category, and use the default values for the other parameters.

    For more information about the parameters, see the Parameter description table.

  3. In the product list, find Collector and click View in the Actions column. Click the Feature Definition tab and define a custom property (Message Set) to record triggered alert messages.

    Configure the custom property with the following parameters: set Feature Name to Message Set, Identifier to MessageR, Data Type to array, Element Type to text, Element Count to 100, and Read/write type to Read/write.

  4. On the product details page, click Go to Manage to the right of Device Count. On the Devices page, click Add Device to add a collector device named collector. For more information, see Devices.

    After the device is added, the Devices page shows the collector device. Its associated product is Collector, and its status is online.

  5. To provide data for developing the business services and web application, this tutorial uses the device simulator to debug properties in the default module and simulate data reporting.

Step 2: Develop business services

  1. Create an HTTP service named Get Alarm Information. For more information, see Public APIs.

    Use the Collector product node to select the collector device. Then, query the snapshot value of the Message Set property to use as the response data for the HTTP service. For more information, see Public APIs. The service flow connects three nodes in sequence: HTTP Request, Collector, and HTTP Response. For the HTTP Response node, set the output mode to From Node and set the output value to data.value.

  2. In the upper-right corner of the page, click Save, Deploy & Debug, and then Publish to release the service.

  3. Create a device-triggered service named Warehouse Alarm to send alert messages by using a DingTalk chatbot.

    The node configuration is as follows. The service flow connects three nodes in sequence: Device Trigger, Node.js script, and Conditional. If the condition is met, the flow connects to a DingTalk chatbot node to send an alert notification. Otherwise, the flow ends at an HTTP Response node. The Node.js script retrieves the MessageR property value from the Device Trigger node (node_f2572c70) and uses the join method to merge the array into a newline-separated string before returning it.

    Node

    Configuration

    Device Trigger

    Select the collector device under the Collector product. Configure the service to trigger when the Message Set property is reported.

    Node.js script

    Process the array data from the Message Set property into a string.

    Here, node_f2572c70 is the node ID of the Device Trigger node.

    Conditional

    If the output value of the Node.js script is not empty, the service sends an alert message. Otherwise, the service flow ends at the HTTP Response node.

    For more information about how to create a business service, see Create a business service.

  4. In the upper-right corner of the page, click Save, Deploy & Debug, and then Publish to release the service.

Step 3: Develop a web application for alert monitoring

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

  2. In the web application editor, add one transfer component, four text components, and four indicator components. For more information, see Add components.

  3. Select each component to configure its style and data source.

    • Transfer component: For this tutorial, use the following static data for the pending alerts. This data is displayed in the left list of the transfer component.

      [
        {
          "label": "Beijing Warehouse Alert",
          "value": "Beijing warehouse is empty. Please restock immediately!"
        },
        {
          "label": "Nanjing Warehouse Alert",
          "value": "Nanjing warehouse is full. Please clear stock immediately!"
        },
        {
          "label": "Hangzhou Warehouse Alert",
          "value": "Hangzhou warehouse is full. Please clear stock immediately!"
        },
        {
          "label": "Tianjin Warehouse Alert",
          "value": "Tianjin warehouse is empty. Please restock immediately!"
        }
      ]

      The corresponding alert messages for the left list are as follows. Moving a data item to the right list triggers the corresponding alert.

      [
        "Beijing warehouse is empty. Please restock immediately!",
        "Nanjing warehouse is full. Please clear stock immediately!",
        "Hangzhou warehouse is full. Please clear stock immediately!",
        "Tianjin warehouse is empty. Please restock immediately!"
      ]

      Send the triggered alert data to the collector device. For more information, see Configure interactions.

      Configure two interaction events for the transfer component: Interaction 1 assigns the changed value to a variable (variable name rightM, parameter rightValue) when the value changes. Interaction 2 sets a device property when the value changes. Set Product to Collector, Device to collector, Property to Message Set, and the property value to a dynamic source.

    • Text components: Enter the content Beijing, Nanjing, Hangzhou, and Tianjin for each of the four components.

    • Indicator components: Bind the components to the Get Alarm Information API. The returned alert information determines the indicator's state.

      You must use a data filter script to check which region's alert has been triggered and then activate the corresponding indicator.

      function _filter(data) {
        // Returns true to turn on the indicator if the content is found, otherwise returns false.
        return data.includes('Beijing warehouse is empty. Please restock immediately!') === true;
      }

      In the data source configuration for the indicator light component, set the data source to API and the API source to Service Development Workbench. Select Get Alarm Information as the API. For the request parameters, select Dynamic Parameters. Select the Data Filtering Script checkbox and enter the filter function described above. Enable auto-refresh and set the refresh interval to 2 seconds.

      When an alert is triggered, the indicator turns orange for an empty warehouse and red for a full warehouse.

      In the application editor, the transfer component on the left contains the Alert List and Triggered Alerts lists. The center area displays the four city names (Beijing, Nanjing, Hangzhou, and Tianjin) and their corresponding indicators. In the properties panel on the right, set the indicator's display style to Color mode. Set the off-state color to blue (#3B81FF) and the on-state color to orange (#FFBF00).

  4. Click OK.

  5. In the upper-right corner, click Preview to debug the application.

    In the application preview, you can select an alert from the Alert List on the left and move it to the Triggered Alerts list on the right. The indicator for the corresponding city changes color from blue to orange or red, indicating that an alert notification was sent.

    The DingTalk chatbot sends a message.

    image..png

  6. In the upper-right corner, click the Publish icon 发布 to publish the application to the cloud.