1 Building the First ArkTs Application - HelloWorld

1.1 Creating a Project with DevEco Studio

  1. Double-click the DevEco Studio shortcut icon on the desktop.

  2. Then you will enter the interface as shown in the figure below. Create a project and enter the project interface.

APPENVIRONMENT
  1. Select Application App Development (this article takes app development as an example. Atomic Service corresponds to atomic service development), select the template "Empty Ability", and click Next for further configuration.
APPENVIRONMENT
  1. Enter the project configuration interface, modify the project storage path, project name, and compatible SDK version. Other parameters can keep the default settings. Click Finish to create the project. Note: The board-side API version of M4-R1 development board is API 12, so select 5.0.0(12) for Compatible SDK.
APPENVIRONMENT
  1. The project initialization interface is as follows. Wait until the Build status bar outputs the statement within the red box at the bottom, indicating initialization is complete:
APPENVIRONMENT

1.2 Configuring SDK in DevEco Studio

  1. Select File -> Settings in the menu bar.
APPENVIRONMENT
  1. Enter the Settings window, select OpenHarmony SDK, select the SDK installation location, then check API Version 12, download all related content about API Version 12, and click [Apply] to download.
APPENVIRONMENT

Because we have already downloaded API Version 12, we use API Version 11 as an example.

Note:

If you have already downloaded API 12 as shown in the interface above, you can skip the SDK configuration step.

APPENVIRONMENT
  1. After clicking [Apply], a Confirm Change pop-up window will appear. Click [OK].
APPENVIRONMENT
  1. Wait for the SDK download to complete.
APPENVIRONMENT
  1. When [Finish] becomes bright, the download is complete. Click [Finish].
APPENVIRONMENT

1.3 Flashing the Program to the Board

1.3.1 Default Program Function Introduction

After the project synchronization is complete, in the "Project" window, click "entry > src > main > ets > pages", open the "Index.ets" file. You can see that the default program page of the app project consists of Text components.

The function implemented by this application is: Click the Hello World text component to switch to Welcome.

The example of "Index.ets" file is as follows:

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

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('HelloWorld')
        .fontSize($r('app.float.page_text_font_size'))
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(() => {
          this.message = 'Welcome';
        })
    }
    .height('100%')
    .width('100%')
  }
}

1.3.2 Signing File Configuration

  1. Connect the real device M4-R1 equipped with the OpenHarmony system to the computer via USB to Type-C cable and OTG port (the device is in debugging mode by default). The tool interface will display the serial number of the connected device M4-R1, as shown in the following figure:
APPENVIRONMENT
  1. Open the project-level build-profile.json5 and modify the products to the following code:
"products": [
  {
    "name": "default",
    "signingConfig": "default",
    "compileSdkVersion": 12,
    "compatibleSdkVersion": 12,
    "targetSdkVersion": 12,
    "runtimeOS": "OpenHarmony",
    "buildOption": {
      "strictMode": {
        "caseSensitiveCheck": true,
        "useNormalizedOHMUrl": true
      }
    }
  }
]

After modification, a blue prompt bar appears at the bottom. Click "Sync Now" in the prompt bar to synchronize the project.

APPENVIRONMENT

If a Sync Check pop-up prompt appears as shown in the following figure, click Yes.

APPENVIRONMENT

When Sync Now is complete, the Build status bar at the bottom displays the information as shown in the following figure.

APPENVIRONMENT

Select File > Project Structure in the menu bar, and select Signing Configs in the pop-up window for signing.

APPENVIRONMENT

As shown in the figure, because the M4-R1 development board is an OpenHarmony system, check "Automatically generate signature", do not check "Support HarmonyOS", and proceed with automatic signing.

APPENVIRONMENT

After the signing information appears as shown in the following figure, click OK. The signing content signingConfigs will be written into the project-level build-profile.json5.

APPENVIRONMENTAPPENVIRONMENT

Wait for synchronization to complete.

APPENVIRONMENT

1.3.3 Running the Application

Return to the DevEco Studio project engineering interface and click Run 'entry' in the toolbar to run the application on the development board.

APPENVIRONMENT

The M-K1HSE real device effect is as shown in the figure:

APPENVIRONMENT

After clicking the Hello World text, the switching effect is as shown in the figure:

APPENVIRONMENT