HarmonyOS and App Gallery Connect Development

Engin Karatas
6 min readMay 22, 2023

--

Abstract

In this article, we will explore the process of developing HarmonyOS applications with ArkUI and discuss the features and functionality we created using this framework. Additionally, we will touch upon the struggle faced when developing with DevEco Studio and provide useful links for further information and resources.

Contents:

HarmonyOS, Deveco Studio, ArkUI, Developing HarmonyOS with ArkUI, What We`re Doing with HarmonyOS, Code Examples Part Of Our Developing Process, Understanding Provider and Consumer Patterns in Ark TS, Struggled topic when developing with DevEco Studio

HarmonyOS:

HarmonyOS is an operating system developed by Huawei. It is designed to be a lightweight, modular, and versatile operating system that can run on a wide range of devices, including smartphones, tablets, smart TVs, wearables, and IoT devices. HarmonyOS aims to provide a unified user experience across different devices and enable seamless collaboration between them. It emphasizes distributed architecture, high performance, and enhanced security. HarmonyOS is open source, which allows developers to contribute to its development and build applications for the platform.

Deveco Studio:

Deveco Studio is a development environment provided by Huawei for building applications for HarmonyOS. It is an integrated development environment (IDE) that offers a comprehensive set of tools and features to streamline the process of developing HarmonyOS applications. Deveco Studio provides code editing, debugging, testing, and packaging capabilities, making it easier for developers to create applications for HarmonyOS devices. It also includes templates, examples, and documentation to assist developers in getting started with HarmonyOS app development.

ArkUI:

ArkUI is a user interface framework specifically designed for HarmonyOS. It provides a set of UI components and styles that follow the design principles of HarmonyOS, allowing developers to create visually appealing and consistent user interfaces for their HarmonyOS applications. ArkUI simplifies the process of building UI elements by providing ready-to-use components, such as buttons, lists, dialogs, and navigation elements. It also offers features like internationalization support, theme customization, and accessibility options, enabling developers to create inclusive and user-friendly applications.

Developing HarmonyOS with ArkUI:

To develop HarmonyOS applications with ArkUI, you can follow these general steps:

Step 1: Set up the development environment:

Install Deveco Studio, the IDE provided by Huawei for HarmonyOS development.

Ensure you have the necessary SDKs and tools installed for HarmonyOS development.

Step 2: Create a HarmonyOS project:

Use Deveco Studio to create a new HarmonyOS project.

Select the project template and configure the project settings.

Step 3: Add ArkUI to your project:

In your project configuration, include the ArkUI library as a dependency.

This allows you to access the UI components and styles provided by ArkUI.

Step 4: Design the user interface:

Use the ArkUI components to build the user interface of your HarmonyOS application.

Customize the UI elements according to your application’s requirements.

Step 5: Implement the application logic:

Write the necessary code to implement the functionality of your application.

This may include handling user interactions, data processing, and integration with other services or APIs.

Step 6: Test and debug:

Use the debugging and testing capabilities of Deveco Studio to ensure your application works as intended.

Fix any issues or bugs that arise during testing.

Step 7: Build and package the application:

Use Deveco Studio to build the final package of your HarmonyOS application.

Generate the necessary installation files, such as an installation package or an installation image.

Step 8: Deploy and distribute the application:

Deploy your HarmonyOS application to the target devices, such as smartphones or tablets.

Distribute the application through app stores or other distribution channels, if desired.

These are the general steps involved in developing HarmonyOS applications with ArkUI. It’s important to refer to the official documentation and resources provided by Huawei for detailed instructions, guidelines, and best practices specific to HarmonyOS development.

What We`re Doing with HarmonyOS

We Develop an application for 4 side of the App Gallery Connect(Huawei Cloud Service) usage with ArkTS (.ets) for demonstrate how to use the Huawei Cloud application could use with HarmonyOS project. Also, our application covers full-stack development

· Experience Authentication Service

· Experience Cloud Functions

· Experience Cloud Database

· Experience Cloud Storage

We Created:

You can reach our developed application with latest version of the DevEco Studio.

Here is what we created with some images:

Figure 1 reach our developed application
Figure 2 Auth Service
Figure 3 Mobile verification code login
Figure 4 Cloud Development Home
Figure 5 Cloud Storage
Figure 6 Cloud Functions
Figure 7 Cloud Database
Figure 8 Add new record with new button
Figure 9 Cloud Database
Figure 10 Cloud Storage
Figure 11 Cloud Database

Code Examples Part of Our Developing Process

An example of our created Login UI template. Developers could use the login process easily

UI Templates

We Developed templates for ArkTS UI usage. Some functions we developed, includes specific reasons like login for with cloud connections. And generally, we developed codes for make better commonly usage experience for developers.

Developing with the ArkTS:

We developed Cross Platform app for all devices where Harmony OS can work

An example explains ArkTS Development

Understanding Provider and Consumer Patterns in Ark TS

Provider

The provider pattern in Ark TS allows you to create a listenable object. Whenever this object is updated, the consumers that are subscribed to it will be notified.

Usage

class User {

username: string

}

When using the provider pattern, it is important to provide an initial value to the object.

@Provide(‘user’) currentUser: User = new User(‘joe’)

// You can update the object state for listeners

changeUser() {

this.currentUser = new User(‘hannah’)

}

Consumer

The consumer pattern in Ark TS enables components to listen for changes via a provider object.

Usage

@Consume(‘user’) currentUser: User

build() {

Column() {

Text(this.currentUser.username)

}

}

// Update also works with the consume annotation

changeUser() {

this.currentUser = new User(‘jesse’)

}

Struggled topic when developing with DevEco Studio

· Installing the proper version of DevEco Studio for your project

· .npmrc configuration

· Proxy configuration

· Unlogged User

· Logged-in Logged-out users

· Registering with Huawei ID

· Integrating SDKs

Useful Links

Cloud Development Feature for DevEco Studio

https://www.huaweicentral.com/huawei-deveco-studio-launched-cloud-development-feature/

What is ARK UI: https://developer.harmonyos.com/en/docs/documentation/doc-guides/arkui-overview-0000001281480754

About announcement article link: https://www.techgoing.com/huawei-deveco-studio-goes-live-supports-efficient-development-of-harmonyos-applications/

HarmonyOS images for your in-app usage: https://developer.harmonyos.com/en/design/harmonyos-icon/

How Cloud Function Works:

https://developer.huawei.com/consumer/en/doc/development/AppGallery-connect-Guides/agc-cloudfunction-introduction-0000001059279544

A nice introduce for ArkUI: https://developer.harmonyos.com/en/develop/arkUI/

--

--