Chapter 3 Application Compilation and Deployment

1. Build the First ArkTS Application (Stage Model) and Deploy

1. If this is your first time opening DevEco Studio, click Create Project to create a project. If you already have a project open, select File > New > Create Project from the menu bar to create a new project.

2. Select Application app development (this article uses app development as an example; Atomic Service corresponds to atomic service development), select the template "[OpenHarmony]Empty Ability", and click Next to proceed with the next configuration

3. Enter the project configuration interface, modify the project storage location, other parameters can keep the default settings, click 【finish】. Node is used to configure the Node.js version for the current project to run. You can choose to use an existing Node.js or download a new Node.js version

4. The project initialization interface is as follows:

5. Wait here for a moment. When the red running prompt ends, the final state is after the run is complete

2. Build the First Page

1. Using Text Component

After the project synchronization is complete, in the "Project" window, click "entry > src > main > ets > pages", open the "Index.ets" file. You can see the page consists of Text components. The example of the "Index.ets" file is as follows:

// 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. Add Button

On the basis of the default page, we add a Button component as a button to respond to user clicks, thereby implementing navigation to another page. The example of the "Index.ets" file is as follows:

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

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        // Add button to respond to user click
        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. Running HarmonyOS Applications

HarmonyOS applications can use remote emulators and physical real devices. The difference is that running applications on a remote emulator does not require signing the application. Next, we will take physical real device as an example to introduce the method of running HarmonyOS applications:

①Connect the real device A with HarmonyOS system to the computer using a dual-head USB cable through the OTG port. You need to confirm that after the system boots, USB OTG mode and HDC debugging mode are enabled in OsTools -- Development Entry:

②Check the tool interface, it will display the serial number of the connected device 3568A, as follows:

③System Signature: Click File > Project Structure... > Project > SigningConfigs, check "Support HarmonyOS" and "Automatically generate signature", click "Sign In" as prompted on the interface, and log in with your Huawei account. Wait for the automatic signature to complete, then click "OK". As shown in the following figures:

④In the toolbar at the top right of the editing window, click the button to run. The effect is as shown in the figure:

⑤After waiting for the run to end, the tool interface is as follows:

The real device interface effect is as follows:

Note:

Congratulations on using ArkTS language to develop (Stage model) your first HarmonyOS application. Go explore more HarmonyOS features!

---