#XX|# Hello World Application and Deployment

#KM|

#HP|# 1. Building the First ArkTS Application (Stage Model)

#RW|

#RB|1) If you open DevEco Studio for the first time, please click Create Project to create a project. If you have already opened a project, please select File > New > Create Project from the menu bar to create a new project.

#SY|

#YN|

#XW|

#VZ|2) Select Application (this article takes application development as an example, Atomic Service corresponds to atomic service development), select the template "[OpenHarmony] Empty Ability", click Next for further configuration

#SK|

#HT|

#TX|

#XN|3) Enter the project configuration interface, modify the project storage location. Other parameters can keep default settings. Click [\ finish\ ].

#BY|

#BQ|Where Node is used to configure the Node.js version for the current project. You can choose to use an existing Node.js or download a new Node.js version

#VP|

#QJ|

#KS|

#QV|4) The project initialization interface is as follows:

#YQ|

#XH|

#ZP|

#SK|5) Wait here for a moment. When the red running prompt ends, that's the final state after running is complete.

#KW|

#PX|

#HK|

#BN|# 2. Building the First Page

#HQ|

#RQ|1) Using Text Components

#ZM|

#PX|After 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 "Index.ets" file is as follows:

#JQ|

#KX|// Index.ets

#WV|

#SH|```typescript #MB| @Entry #PW| @Component #JN| struct Index { #VH| @State message: string = 'Hello World'; #ZK|

#MV| build() { #RZ| Row() { #RB| Column() { #KQ| Text(this.message) #VY| .fontSize(50) #QN| .fontWeight(FontWeight.Bold) #PJ| } #KW| .width('100%') #KQ| } #XT| .height('100%') #ZM| } #SJ| } #KT|``` #YJ|

#KY|2) Adding Buttons

#KP|Based on 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 "Index.ets" file is as follows:

#WH|

#KX|// Index.ets

#QH|

#SH|```typescript #MB| @Entry #PW| @Component #JN| struct Index { #VH| @State message: string = 'Hello World'; #PZ|

#MV| build() { #RZ| Row() { #RB| Column() { #KQ| Text(this.message) #VY| .fontSize(50) #QN| .fontWeight(FontWeight.Bold) #VY| // Add button to respond to user clicks #JQ| Button() { #QQ| Text('Next') #BT| .fontSize(30) #QN| .fontWeight(FontWeight.Bold) #BZ| } #HY| .type(ButtonType.Capsule) #MJ| .margin({ #QM| top: 20 #HZ| }) #SN| .backgroundColor('#0D9FFB') #ZQ| .width('40%') #JY| .height('5%') #MS| } #KW| .width('100%') #VN| } #XT| .height('100%') #KX| } #NX| } #TB|``` #JZ|

#BB|3) Running HarmonyOS applications can use remote emulators and physical real devices. The difference is that using remote emulators to run applications does not require signing the application. Next, taking physical real device as an example, I will introduce how to run HarmonyOS applications:

#MS|

#WX|①Connect the M4-R1 running HarmonyOS system to the computer via a dual-head USB cable and OTG port (device is in debug mode by default)

#ZT|

#NN|②Check the tool interface, it will display the serial number of the connected M4-R1 device, as follows:

#BP|

#QT|

#SR|

#NY|③System signing: Click File > Project Structure… > Project > SigningConfigs interface, check "Support HarmonyOS" and "Automatically generate signature". Click "Sign In" prompted by the interface and log in with your Huawei account. Wait for automatic signing to complete, then click "OK". As shown in the figure below:

#PJ|

#MX|

#NJ|

#BS|

#HT|

#WM|

#YQ|

#YY|

#WY|

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

#QJ|

#VP|

#BJ|

#BJ|⑤After waiting for the run to finish, the tool interface is as follows:

#BK|

#KT|

#RM|

#BV|The M4-R1 real device interface effect is as follows:

#XM|

#QQ|

#JQ|

#VJ|::: warning Note: #BR|Congratulations! You have completed your first HarmonyOS application using ArkTS language (Stage model). Come explore more HarmonyOS features

#YB|

#XB|::: #XB|

#ZS|---