Master HarmonyOS App Development: From Zero to Your First Hello World

HarmonyOS Core Concepts

HarmonyOS uses a layered architecture consisting of the kernel layer, system service layer, framework layer, and application layer. Its key distributed features—soft bus, data management, and task scheduling—enable seamless collaboration across phones, tablets, wearables, smart screens, and car devices.

Developers should focus on three core components:

ArkTS language : An extension of TypeScript with static typing and declarative UI capabilities for concise cross‑device development.

ArkUI framework : A declarative UI framework that uses a minimal UI syntax and rich component library, boosting UI development efficiency by roughly 30%.

Ability : The fundamental functional unit of a HarmonyOS app; the Stage model introduces AbilityStage and WindowStage to clarify lifecycle management.

Development Environment Setup

DevEco Studio Installation and Configuration

DevEco Studio, built on IntelliJ IDEA Community, supports ArkTS, JavaScript, and C/C++. System requirements include Windows 10 64‑bit (build > 18363) or macOS, at least 16 GB RAM, and 10 GB disk space.

Installation steps : Download the installer from the Huawei Developer Alliance, run the wizard, and let the IDE automatically download the HarmonyOS SDK, Node.js, Hvigor, and OHPM. The latest version bundles these components for a streamlined setup.

Project Structure Overview

Creating a new project generates a standard HarmonyOS structure:

myapplication/
├── AppScope/
│   ├── resources/
│   └── app.json5          # Global app configuration
├── entry/                 # Main module (Entry)
│   ├── src/
│   │   ├── main/
│   │   │   ├── ets/       # ArkTS source code
│   │   │   ├── resources/ # Images, strings, etc.
│   │   │   └── module.json5 # Module config (Ability, permissions)
│   └── build-profile.json5
├── hvigor/
│   └── hvigor-config.json5
└── build-profile.json5   # Project build configuration

The ets folder holds ArkTS code, resources contains assets, and module.json5 defines Ability declarations and permission requests.

First Hello World Application

Creating the Project

In DevEco Studio choose File → New → Create Project , select the “Empty Ability” template, specify the project name, package name, ArkTS language, and Stage model, then click Finish.

Writing Page Code

Open entry/src/main/ets/pages/Index.ets and add the following ArkTS component:

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

    build() {
        Column() {
            Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)
            Button('Click Me').onClick(() => { this.message = 'Hello HarmonyOS!' })
        }.width('100%').height('100%').justifyContent(FlexAlign.Center)
    }
}

This code demonstrates key ArkTS features: @Entry marks the page entry, @Component defines a custom component, @State creates a reactive variable, and the build() method uses declarative syntax to compose UI.

Running and Debugging

DevEco Studio provides both emulator and real‑device debugging. Use Tools → Device Manager to create or connect devices. The emulator can simulate phones, tablets, and wearables, allowing testing without physical hardware. Click the Run button to deploy the app.

Core Development Skills

UI Layout and Components

ArkUI offers layout containers such as Column (vertical), Row (horizontal), Stack (layered), Flex (flexible), and RelativeContainer (relative positioning). Common components include Text, Button, Image, TextInput, Slider, List, and Canvas for custom 2D drawing.

State Management

ArkTS provides several decorators for managing data flow: @State: Component‑internal state. @Prop: One‑way data from parent to child. @Link: Two‑way binding between parent and child. @Observed and @ObjectLink: Manage nested object state.

Using these decorators enables clear data flow and efficient UI updates.

Page Routing and Navigation

Routing is defined in main_pages.json. Example code to navigate:

import { router } from '@kit.ArkUI';
// Navigate to a new page
router.pushUrl({ url: 'pages/Second', params: { data: 'Hello' } });
// Return to previous page
router.back();

Network and Data Management

HarmonyOS provides an HTTP module for network requests, relational databases, and Preferences for local storage. For cloud‑enabled apps, integrate AppGallery Connect services such as cloud databases and cloud functions to achieve end‑to‑end development.

Application Packaging and Publishing

Signature Certificate Configuration

Generate a .p12 keystore and .csr file via Build → Generate Key and CSR in DevEco Studio, then upload the CSR to AppGallery Connect to obtain a .cer certificate and .p7b profile.

Configure signing in build-profile.json5:

"signingConfigs": [{
    "name": "release",
    "storePath": "mykeystore.p12",
    "storePassword": "****",
    "keyAlias": "release_key",
    "keyPassword": "****",
    "profilePath": "release_profile.p7b",
    "certPath": "release_cert.cer"
}]

Build and Package

After signing, use Build → Build Hap(s) for single‑module HAP packages or Build → Build APP(s) for multi‑module APP packages. The resulting .app file is required for market distribution.

Publishing Process

Log in to AppGallery Connect, create a new app under “APP & Meta Services,” fill in name, description, category, upload screenshots and the .app package, and provide required documentation (software copyright, ICP filing, privacy policy). After submission, Huawei conducts security and content reviews; approved apps appear in the Huawei AppGallery.

Best Practices and Outlook

Development Recommendations

Leverage ArkUI’s declarative features to simplify UI code, modularize reusable functionality into Feature HAPs, use DevEco Studio’s preview to accelerate iteration, and prioritize multi‑device adaptation to maximize “write once, run everywhere” benefits.

Ecosystem Outlook

With HarmonyOS NEXT replacing the AOSP base, the ecosystem is rapidly maturing. Market data shows HarmonyOS reaching a 17% share in China by Q1 2025, surpassing iOS. Over 30,000 HarmonyOS apps and services are under active development, and Huawei continues to enhance tooling and developer incentive programs.