DEV Community: marxu

🌐 Build and Run Your First Distributed HarmonyOS App in 15 Minutes (HarmonyOS 5.0.0 or high)

marxu — Fri, 23 May 2025 09:11:20 +0000

🌐 Build and Run Your First Distributed HarmonyOS App in 15 Minutes

Imagine controlling a TV from your phone with just one codebase. With HarmonyOS's distributed capabilities, that future is now. Let’s build a cross-device clipboard app today.

🎯 What You'll Build

A distributed clipboard app:

Runs on both phone and tablet
Shares text instantly across devices
Uses HarmonyOS’s distributedData APIs

🧰 Step 1: Project Setup

Create new project in DevEco Studio

Template: Empty Feature Ability (Stage Model)
Language: ArkTS
1. Add permissions to config.json:

"reqPermissions": [
  { "name": "ohos.permission.DISTRIBUTED_DATASYNC" },
  { "name": "ohos.permission.DISTRIBUTED_DEVICE_MANAGER" }
]

🛠️ Step 2: Create Clipboard Logic

File: entry/src/main/ets/common/clipboard.ets

import distributedData from '@ohos.data.distributedData';

export class ClipboardService {
  private kvManager;
  private kvStore;

  async init() {
    this.kvManager = distributedData.createKVManager({
      bundleName: 'com.example.clipboard',
      context: getContext(this)
    });
    this.kvStore = await this.kvManager.getKVStore({
      storeId: 'clipboard_store',
      type: distributedData.StoreType.SINGLE_VERSION
    });
  }

  async setText(value: string) {
    await this.kvStore.put('shared_text', value);
  }

  async getText(): Promise<string> {
    return await this.kvStore.get('shared_text');
  }
}

🧱 Step 3: Build UI with ArkTS

File: pages/Index.ets

import { ClipboardService } from '../common/clipboard';

@Component
struct IndexPage {
  @State text: string = '';
  clipboard: ClipboardService = new ClipboardService();

  async aboutToAppear() {
    await this.clipboard.init();
    this.text = await this.clipboard.getText();
  }

  build() {
    Column() {
      TextInput({ placeholder: 'Enter text', text: this.text })
        .onChange(value => this.text = value)
        .margin(10)

      Button('Share Across Devices')
        .onClick(async () => {
          await this.clipboard.setText(this.text);
        })
        .margin(10)

      Text(`Shared: ${this.text}`)
        .fontSize(18)
        .margin(10)
    }
  }
}

📱 How to Test Cross-Device Sync

Connect two HarmonyOS virtual devices or real devices (same Wi-Fi)
Enable "Distributed Networking" on both
Input text on one device → check update on the other (manually trigger getText() or bind listener)

⚠️ Common Errors & Fixes

Issue	Cause	Solution
`kvStore is undefined`	`init()` not awaited properly	Ensure `await this.clipboard.init()` is called
Text not syncing	Devices not paired / Wi-Fi not enabled	Enable distributed networking
Error: permission denied	Missing `reqPermissions` or not granted at runtime	Check config + prompt user to allow permissions
Duplicate storeId error	Running same app on multiple emulators w/o cleanup	Use unique `storeId` or clear app cache

📌 Summary

You’ve just built a distributed app that:

Shares data across devices
Uses HarmonyOS distributedData API
Leverages ArkTS for modern UI

🔮 Next Up…

We’ll explore HarmonyOS permission system in depth — understand how to handle camera, location, network, and more with fine-grained control.

👉 Stay tuned and star this guide if you liked it!

🌟 ArkTS Demystified: Build Modern UI with HarmonyOS Declarative Syntax(HarmonyOS 5.0.0 or high)

marxu — Fri, 23 May 2025 09:07:34 +0000

🌟 ArkTS Demystified: Build Modern UI with HarmonyOS Declarative Syntax

ArkTS is the beating heart of HarmonyOS 5.0+. It's concise, reactive, and tailor-made for multi-device development. Let’s build a modern UI and understand how it works.

📖 What is ArkTS?

ArkTS is a TypeScript-inspired declarative UI language in HarmonyOS. Think of it as the best of SwiftUI + React Native — but for distributed apps.

🎯 Our Goal

We’ll build a reusable Counter component with:

State management
Event handling
Component composition

🧱 Step 1: Create a Counter Component

File: entry/src/main/ets/components/Counter.ets

@Component
export struct Counter {
  @State count: number = 0;

  build() {
    Column() {
      Text(`Count: ${this.count}`)
        .fontSize(24)
        .margin(12)

      Row() {
        Button('-')
          .onClick(() => this.count--)
          .margin(8)

        Button('+')
          .onClick(() => this.count++)
          .margin(8)
      }
    }
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height('100%')
  }
}

🛠️ Step 2: Use the Counter in Index Page

File: pages/Index.ets

import { Counter } from '../components/Counter';

@Component
struct IndexPage {
  build() {
    Column() {
      Text('Welcome to ArkTS Counter')
        .fontSize(28)
        .fontWeight(FontWeight.Bold)
        .margin(16)

      Counter()
    }
    .width('100%')
    .height('100%')
  }
}

🎮 Run Result

Shows title + counter value
Click + / - to increment/decrement
Full reactive re-rendering on state update

🖼️ UI Preview:

[ Welcome to ArkTS Counter ]
[       Count: 0           ]
[     [-]     [+]          ]

⚠️ Easy Mistakes to Avoid

Mistake	Cause	Fix
`count` doesn't update UI	Forgot `@State`	Add `@State` before the variable
Buttons unresponsive	Wrong method syntax	Use arrow functions: `() => this.count++`
Error: ‘Counter not found’	Wrong path or forgot `export`	Ensure `export` is used + import path correct
Layout not centered	No `.alignItems()` or `.justifyContent()`	Add them to the layout container

📌 Summary

You now know how to:

Define reusable UI components
Use ArkTS stateful logic
Build layouts using Column, Row, Text, and Button

🔮 Coming Next...

In the next post, we’ll explore distributed app development with HarmonyOS — build once, run on multiple devices!

👉 Subscribe for more hands-on HarmonyOS guides. Let’s master ArkTS together.

🔥 Getting Started with HarmonyOS 5.0+: Build Your First Cross-Device App(HarmonyOS 5.0.0 or high)

marxu — Fri, 23 May 2025 09:05:06 +0000

🔥 Getting Started with HarmonyOS 5.0+: Build Your First Cross-Device App

Want to build next-gen apps that run across phones, tablets, TVs, and more? HarmonyOS 5.0+ offers a powerful, distributed app model — and you can build your first app in minutes.

🚀 Why HarmonyOS?

HarmonyOS (鸿蒙) is Huawei’s next-gen OS designed for seamless device collaboration — from phones to wearables. With HarmonyOS 5.0+, you get:

ArkTS (modern TypeScript-based dev language)
Cross-device interaction
Lightning-fast startup & UI performance

🧰 Step 1: Environment Setup

Download & install DevEco Studio 4.0+
Create a new project:

App Template: Empty Feature Ability (Stage Model)
Language: ArkTS
1. Select device: Phone

🛠️ Step 2: Hello HarmonyOS Code

File: entry/src/main/ets/pages/Index.ets

@Component
struct IndexPage {
  @State message: string = 'Welcome to HarmonyOS 5.0+!';

  build() {
    Column() {
      Text(this.message)
        .fontSize(26)
        .fontWeight(FontWeight.Bold)
        .margin(20)

      Button('Click Me')
        .onClick(() => {
          this.message = 'Hello, cross-device future!';
        })
        .margin(20)
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
  }
}

📱 Step 3: Run and See

Click “Run” → choose an emulator or connected device
Initial screen shows: Welcome to HarmonyOS 5.0+!
Click the button → message updates to: Hello, cross-device future!

🖼️ Preview Result:

[ Welcome to HarmonyOS 5.0+! ]
[      Click Me Button       ] → [ Hello, cross-device future! ]

❗ Common Pitfalls

Problem	Reason	Solution
App does not run	Wrong SDK or build target	Set build target to HarmonyOS 5.0.0+
Component doesn’t render	Missing `@Component` decorator	Add `@Component` before your struct
Button click has no effect	Wrong event name (`onTap`, `onClick`)	Use `onClick` only in ArkTS
Layout broken on device	Column width/height not set	Add `.width('100%')` and `.height('100%')`

📌 Summary

In under 10 minutes, you’ve:

Built your first HarmonyOS 5.0+ app
Understood ArkTS layout structure
Interacted with state via button click

🔮 What’s Next?

In the next post, we’ll explore ArkTS UI system in-depth and build a reusable counter component from scratch.

👉 Follow for more HarmonyOS magic. Comments welcome!