Counter App in Open Harmony

If you have been following our articles for a quite some time we have worked and introduced HarmonyOS and the importance of the library development. In this article the context would be expressed more in terms of Open Harmony, as the vision always align in delivering a unique user experience across different consumer devices and scenarios.

Let me introduce what Open Harmony is all about, let me describe Open Harmony in Simple terms "Open Harmony – the open-source project of the HarmonyOS operating system".

Open Harmony downloadable source code can be found here.

In order to explain how application development really works, let's start with a simple counter application. In this article we will be walking you through how to create, run and showcase the counter application. The complete code can be found here.

Once we understand the skeleton of the project structure, the set of basic files then creating any applications would be easy and will tend to avoid the initial common errors.

Just a quick heads-up, in this article we are using Open Harmony API version 8, IDE version that I have followed while creating the below demo example in this article is DevEco Studio 3.0 Beta3(Build Version 3.0.0.900).

Now let's move on to the setup process.

1. DevEco Studio

Here we would be using DevEco studio IDE which is designed exclusively to run HarmonyOS applications, if you haven’t installed one then you can get it from the official link with the SDK. Also, we have a step by step instructions for the environment setup available here.

2. Project Creation

Once you have the DevEco Studio up running you can create a select a ”File” -> New -> New Project Option, then you are presented with multiple templates to choose from, select the template as shown below which is Empty Ability.

As a next step, you will have to “Configure the Project” with the project details as shown below.

• Provide the Application of your choice.
• Choose the Project type as "Application"
• Compile API needs to be 8
• UI syntax is Js

The above details are good to go for now and click "Finish".

Below is the project structure created by default when you create an application.

Now moving onto the design aspects of the application since we have considered a simple counter app. The counter contains a very basic components like increment, decrement, and display, we can have few more features like reset etc. As mentioned previously the goal of this article is not to focus on the design aspects rather see how to build applications using Open Harmony and its details.

By the end of this article you will have successfully built a counter app application as shown below and the entire code is available here.

We just have 3 buttons "Increment", "Decrement" and the "Reset" button.

For the front end we use the HarmonyOS Markup Language (HML). The HarmonyOS Markup Language (HML) is an HTML-like language that allows you to build pages based on components and events. Pages built using HML have advanced capabilities such as logic control, data binding, event binding, loop rendering, and conditional rendering.

More info about HarmonyOS Markup Language (HML) can be found here.

Now let's start crafting the buttons and we will use the below code in index.htm and this can be found in the path
..//MainAbility/pages/index.htm

  <div style="justify-content: center;">
        <button class="signs" type="circle" icon="/common/images/plus.png" on:click="add"></button>
        <text class="text">{{count}}</text>
        <button class="signs" type="circle" icon="/common/images/minus.png" on:click="subtract"></button>
    </div>

    <div>
        <button type="capsule" value="Reset Counter" style="margin: 20px;" on:click="reset"></button>
    </div>

If you would like to add some styling factors then you can find the index.css in the same path as in index.htm

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}
.signs{
    margin: 10px;
}

.text{
    font-size: 50px;
    padding-left: 100px;
    padding-right: 100px;
    margin: 30px;
    border: dimgray;
    border-radius: 5px;
    border-width: 5;
}

@media screen and (device-type: phone) and (orientation: landscape) {
    .title {
        font-size: 60px;
    }
}

@media screen and (device-type: tablet) and (orientation: landscape) {
    .title {
        font-size: 100px;
    }
}

Now moving to the js part which is actual functionality part giving some life to increment and decrement buttons. We need to add the event handlers here.

export default {
    data: {
        count: 0
    },
    onInit() {

    },
    add(){
        this.count = this.count + 1;
    },
    subtract(){
        if(this.count > 0){
            this.count = this.count - 1;
        }
        else{
            this.count = 0;
        }
    },
    reset(){
        this.count = 0;
    }
}

The complete code can be found here. This is a simple example to demonstrate how to start with Open harmony in DevEco Studio and develop a counter application here.

Since now you know the basic drill, I think it's time to expand your horizon in building a bit complex applications. Please feel leave your comments below if you have tried building any applications with the repo details, we would love to see it.

For more exciting libraries to develop your app, peep into third-party-components at OpenHarmony-TPC.

If you still want to explore on the HarmonyOS then do check out the articles about HarmonyOS here.

To know more about the development work happening on harmony application layer, and even be part of the exciting stuff, watch this space of Application Library Engineering Group