First Application - Hello World

1 Create a Project

  1. If you are opening DevEco Studio for the first time, click Create Project to create a project. If a project is already open, select File > New > Create Project from the menu bar to create a new project.
HelloWorld
  1. Select Application for application development (this article takes application development as an example; Atomic Service corresponds to atomic service development). Select the "Empty Ability" template and click Next to proceed to the next configuration step.
HelloWorld
  1. Enter the project configuration interface. Modify the project storage path, project name, and compatible SDK version. Keep the other parameters as default and click Finish to create the project.
HelloWorld

Note

The board-side API version of the M-K1 development board is API 12, so select 5.0.0(12) for Compatible SDK

  1. The project initialization interface is shown below. Wait until the statement in the red box is output in the Build status bar at the bottom, which means initialization is complete.
HelloWorld

2 Launch the First Application

2.1 Default Program Introduction

After the project is synchronized, in the "Project" window, click "entry > src > main > ets > pages" and open the "Index.ets" file. You can see that the default program page of the application project consists of Text components. The function implemented by this application is: clicking the Hello World text component switches it to Welcome. An example of the "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%')
  }
}

2.2 Signature File Configuration

  1. Connect the OpenHarmony real device M-K1HSE to the computer via a USB-to-Type-C cable through the OTG port (the device defaults to debug mode). The tool interface will display the serial number of the connected device M-K1HSE, as shown in the figure below:
HelloWorld
  1. Open the project-level build-profile.json5 and modify the products inside to the following code:
"products": [
	{
		"name": "default",
		"signingConfig": "default",
		"compileSdkVersion": 12,
		"compatibleSdkVersion": 12,
		"targetSdkVersion": 12,
		"runtimeOS": "OpenHarmony",
		"buildOption": {
			"strictMode": {
				"caseSensitiveCheck": true,
				"useNormalizedOHMUrl": true
			}
		}
	}
]

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

HelloWorld

If a Sync Check popup appears during synchronization as shown below, click Yes.

HelloWorld

When Sync Now completes, the Build status bar at the bottom displays the following information.

HelloWorld

Select File > Project Structure from the menu bar, and in the popup window select Signing Configs to perform signing

HelloWorld

As shown in the figure, because the M-K1HSE development board runs the OpenHarmony system, check Automatically generate signature and leave Support HarmonyOS unchecked to perform automatic signing.

HelloWorld

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

HelloWorldHelloWorld

Wait for synchronization to complete.

HelloWorld

2.3 SysCap Property Adjustment

Tips

Because the current M-K1HSE firmware does not yet support the SystemCapability.ArkUi.Graphics3D service, the SysCap property needs to be adjusted

  1. Select File -> Settings from the menu bar and find the OpenHarmony SDK path.
HelloWorld
  1. Open module.json5 in the DevEco Studio project and check the deviceTypes inside.
HelloWorldHelloWorld
  1. Go to the 12/ets/api/device-define directory under the OpenHarmony SDK path. The directory contents are as follows:
HelloWorld
  1. In the 12/ets/api/device-define directory, comment out the information about SystemCapability.ArkUi.Graphics3D in the json files of the devices included in deviceTypes. Based on the image above, the current application deviceTypes are default and tablet, so modify default.json and tablet.json.
HelloWorldHelloWorld

After the modification, save and exit.

2.4 Run the Application

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

HelloWorld

The M-K1HSE real device effect is as shown:

HelloWorld

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

HelloWorld