HarmonyOS Case Practice: Concurrent Tasks and UI Interaction Design of the Smart Home Control Panel

This article aims to deeply explore the technical details of the Huawei HarmonyOS Next system (up to API 12 as of now), and is summarized based on actual development practices. It mainly serves as a vehicle for technical sharing and communication. Mistakes and omissions are inevitable. Colleagues are welcome to put forward valuable opinions and questions so that we can make progress together. This article is original content, and any form of reprint must indicate the source and the original author.

1. Project Overview and Requirement Analysis

Background:
With the development of the Internet of Things (IoT), smart home systems are becoming more and more popular. Users can control various devices in their homes, such as lights, air conditioners, and curtains, through devices like mobile phones or tablets. To enable users to control these devices more conveniently, it is required to develop a smart home control panel application that can control multiple devices asynchronously and feed back the device status to the user interface in real time.
Requirements:

• Users can control smart lights, air conditioners, and curtains through the buttons on the control panel.
• The control of devices is asynchronous to avoid blocking the main thread and affecting the user experience.
• The status (on or off) of each device should be fed back to the UI interface in a timely manner.
• The interface interaction should be simple and smooth, with a good user experience.
• It is necessary to handle situations where devices do not respond or errors occur and prompt the user through the UI. ### 2. Technical Analysis Key Technologies:
• Declarative UI Programming of ArkUI: Declarative programming can simplify the development of the UI. Changes in the state can automatically trigger the refresh of the interface, reducing manual operations and logical coupling.
• @Concurrent Decorator: Used to execute tasks for controlling devices asynchronously, avoiding blocking during device control and ensuring the smoothness of the user interface.
• TaskPool Concurrent Task Scheduling: Through TaskPool, tasks can be managed and scheduled to support efficient multi-threaded task execution.
• Promise Asynchronous Processing: Deals with the execution results of asynchronous tasks and captures possible exceptions to ensure correct handling when operations fail.
• State Management: The state management mechanism of ArkUI is used to track the status of devices and automatically update the UI. Design Considerations:
• Performance: The control and status feedback of devices are asynchronous to avoid blocking the UI thread and improve performance.
• Fault Tolerance: Ensure that when controlling devices, situations where devices fail to respond can be handled to avoid affecting the user experience.
• Modularity: The control tasks of each device should be independent and can be extended to more devices. ### 3. Overall Architecture Design #### Architecture Layers
• UI Layer:     - Responsible for interface display and user interaction, including button clicks and status display.     - The declarative UI programming of ArkUI is used to achieve real-time feedback of device status.
• Logic Layer:     - Responsible for the business logic of controlling devices, implementing the on/off control of devices.     - The @Concurrent decorator is used to execute device control asynchronously, and tasks are scheduled by TaskPool.
• Data Layer:     - Simulates the status information of devices (such as "on" or "off") and informs whether the device operation is successful through the return value of Promise. #### Module Division
• Device Control Module:     - Each device (light, air conditioner, curtain) has an independent control logic module to ensure decoupling between modules and facilitate the expansion of new devices.
• State Management Module:     - Through the state management function of ArkUI, the current status of devices is tracked and the UI is automatically updated according to status changes.
• Exception Handling Module:     - Exceptions that may occur during device control, such as device disconnection and operation failure, will be captured and fed back to the UI layer so that users can clearly understand the operation status of devices. #### Architecture Diagram Illustration

--------------------------------------
|           UI Layer (ArkUI)          |
|------------------------------------|
| Device Control Buttons | Status Display | Error Prompt |
--------------------------------------
|         Logic Layer (Concurrent Control) |
|------------------------------------|
| @Concurrent Concurrent Task Execution |
| TaskPool Task Scheduling and Execution |
--------------------------------------
|         Data Layer (Device Simulation) |
|------------------------------------|
| Promise Asynchronous Processing and Status Feedback |
--------------------------------------

4. Software Design

In the software design, we divide the project into several independent modules to handle different functional requirements.

4.1 UI Design and State Management

The UI part uses the declarative programming of ArkUI to modularize the device control buttons and status display. Each button triggers a device control task, and the status is automatically bound to the UI through ArkUI's @State.

@State lightStatus: string = '关闭'
@State acStatus: string = '关闭'
@State curtainStatus: string = '关闭'

4.2 Asynchronous Concurrent Task Design

Each device control task is declared as a concurrent task through the @Concurrent decorator, which ensures that the operation will not block the main thread. The actual execution of tasks is managed by TaskPool, which enables the concurrent execution of operations on multiple devices and improves the response speed.

@Concurrent
async function executeConcurrentTask(device: string): Promise<string> {
    // Simulate device operation
}

4.3 State Feedback and UI Update

The update of device status is returned asynchronously through Promise, and the return value is updated to the bound status variable. The UI automatically refreshes according to the status change without manual UI update.

executeConcurrentTask('light').then(status => {
    this.lightStatus = status;
}).catch(error => {
    console.error('灯控制失败: ' + error.message);
});

4.4 Exception Handling and Fault Tolerance Design

During device control, devices may not respond or other errors may occur. These exceptions are captured in Promise and the error is fed back to the user interface through the catch callback.

try {
    // Control device
} catch (error) {
    return `操作失败: ${error.message}`;
}

4.5 Modular Design

The system adopts a modular design. The control logic of each device is independent, which is convenient for expansion. When a new device needs to be added, only the corresponding device control function needs to be added, and a button and status binding need to be added in the UI layer.

5. Task Execution and State Feedback Example

The following is a code example of executing concurrent tasks in TaskPool and updating the UI status:

async function controlLight() {
    let task: taskpool.Task = new taskpool.Task(executeConcurrentTask, 'light');
    taskpool.execute(task).then(result => {
        this.lightStatus = result as string;
    }).catch(error => {
        console.error("任务执行失败: " + error);
    });
}

6. Comprehensive Example Code

The complete implementation of the smart home control panel application, including the UI layer, asynchronous task layer, and error handling mechanism.

@Entry
@Component
struct ControlPanel {
    @State lightStatus: string = '关闭'
    @State acStatus: string = '关闭'
    @State curtainStatus: string = '关闭'
    build() {
        Column() {
            Row() {
                Button('控制灯')
                 .onClick(() => {
                        controlLight();
                    })
                Text('灯状态: ' + this.lightStatus)
            }
            Row() {
                Button('控制空调')
                 .onClick(() => {
                        controlAC();
                    })
                Text('空调状态: ' + this.acStatus)
            }
            Row() {
                Button('控制窗帘')
                 .onClick(() => {
                        controlCurtain();
                    })
                Text('窗帘状态: ' + this.curtainStatus)
            }
        }
    }
    controlLight() {
        executeConcurrentTask('light').then(status => {
            this.lightStatus = status;
        }).catch(error => {
            console.error('灯控制失败: ' + error.message);
        });
    }
    controlAC() {
        executeConcurrentTask('ac').then(status => {
            this.acStatus = status;
        }).catch(error => {
            console.error('空调控制失败: ' + error.message);
        });
    }
    controlCurtain() {
        executeConcurrentTask('curtain').then(status => {
            this.curtainStatus = status;
        }).catch(error => {
            console.error('窗帘控制失败: ' + error.message);
        });
    }
}
@Concurrent
async function executeConcurrentTask(device: string): Promise<string> {
    try {
        switch (device) {
            case 'light':
                await delay(1000);
                return '已打开';
            case 'ac':
                await delay(2000);
                return '已打开';
            case 'curtain':
                await delay(1500);
                return '已打开';
            default:
                throw new Error('未知设备');
        }
    } catch (error) {
        return `操作失败: ${error.message}`;
    }
}
function delay(ms: number) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

7. Summary

In this article, an attempt was made to design and implement a smart home control panel application, demonstrating the powerful functions of ArkTS combined with ArkUI. Through the use of concurrent tasks, the system can control multiple devices simultaneously and feed back the status in real time. Meanwhile, with good state management and fault tolerance design, the user experience and system stability are improved. This lays the foundation for the development of more smart home applications in the future.