Chapter 3: Application Compilation and Deployment

1. Building and Deploying Your First ArkTS Application (Stage Model)

1. If you are opening DevEco Studio for the first time, click Create Project to start a new project. Alternatively, if a project is already open, navigate to the menu bar and select File > New > Create Project to initiate a new project setup.

2）Select Application Development (this guide uses Application Development as an example; Atomic Service corresponds to Atomic Service development), choose the [OpenHarmony] Empty Ability template, and click Next to proceed to the next configuration step.

3）Navigate to the Project Configuration screen, adjust the project storage location as needed, leave other parameters as default, and click [Finish]. The Node section here is used to configure the Node.js version for the current project, allowing selection between existing Node.js installations or downloading a new version.

4）The Project Initialization Interface appears as shown below:

5）Wait here for a moment until the red running indicator disappears. The final state will be displayed once the process completes.

2. Building the First Page

1）Using Text Components

After project synchronization is complete, navigate to the Project window, expand entry > src > main > ets > pages, and open the Index.ets file. You will see that the page structure is composed of Text components. A sample snippet of the Index.ets file is shown below:

// Index.ets
@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

2）Adding a Button

Building upon the default page, we add a Button component to handle user clicks, enabling navigation to another page. A sample snippet of the 'Index.ets' file is shown below:

// Index.ets
@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        // 添加按钮，以响应用户点击
        Button() {
          Text('Next')
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
        }
        .type(ButtonType.Capsule)
        .margin({
          top: 20
        })
        .backgroundColor('#0D9FFB')
        .width('40%')
        .height('5%')
      }
      .width('100%')
    }
    .height('100%')
  }
}

3）HarmonyOS applications can be run using either a Remote Simulator or a Physical Device. The key distinction lies in the fact that running applications via the Remote Simulator does not require application signing. The following section will demonstrate the operation method using a Physical Device as an example:

① Connect the physical device A running HarmonyOS to the computer using a dual-headed USB cable connected to the OTG port. After the system boots up, verify in OsTools → Development Entry that both USB OTG Mode and HDC Debugging Mode are enabled:

② The tool interface will display the serial number of the connected device 3568A, as shown below:

③ System Signing: Navigate to File > Project Structure… > Project > SigningConfigs, then check the options 'Support HarmonyOS' and 'Automatically generate signature'. Click the prompted 'Sign In' button and log in using your Huawei account. After automatic signing completes, click 'OK'. The configuration interface is shown below:

④ In the toolbar at the top right corner of the editor window, click the button to execute the application. The operation result is shown in the figure below:

⑤ After the execution completes, the tool interface will appear as follows:

The interface display on the physical device is as shown below:

Note:

Congratulations! You have successfully developed your first HarmonyOS application using the ArkTS language (Stage model). Now, explore more capabilities of HarmonyOS!

---