Huawei Ability Gallery — Event Push

Begum Avci Kocaman
Huawei Developers
Published in
4 min readOct 27, 2021

Hello ! Today we will talking about Event Push with Card Ability. As you know, our mobile phones taking up more spaces in our lives day by day. Therefore we want to controlling everything from our phones easily. In this case Event Push provides the convenience of easily controlling the contents of the applications we want. We can see on our minus one screen after we subscribed ability that we want. Sending event push process has a three steps. These are backend side, configuration on the console and development card side. In this article I am going to explain how can we develop card and how can we configurate on the Huawei developer console in our Event Push notice. If you are ready , let`s get started !

We need to begin with card configuration in Huawei console. If you don`t know configuration process please refer to this link.

Note : You must have an enterprise account to view this page. If you have not enterprise account please click.

After the card configuration we need to card development in Huawei Quick App IDE. If you don`t have please download here.

To develop an card we need to select “Widget” in our IDE and click next.

After selecting the widget, some templates appear before us. We need to decide whether we will use specific templates or design from scratch and choose a template for the UI part of the card. If it is desired to design a card from scratch, the design rules specified in this link must be followed in order for the Card to be released. Otherwise, it can be continued by selecting the template according to the application content. I chose the card template named Image_and_text_1. Because we want to send event push notification for shopping app.

Note: Due to the workload and design rules, it is recommended to choose a ready-made template.

The .ux file is the place where the interface of the card is designed and data retrieval is provided. We can show data on the card in 3 ways;

1.We can define it as static.

2. We render the data from the API on the card with the fetch method of JavaScript.

3. We print the notification sent by Event Push.

First of all, I would like to introduce the card. I have two sections written in HTML and JavaScript. While we determine the design of the future data with HTML, we perform the data retrieval process with JavaScript.

There are 3 parts that we need to pay attention to here props, data and onInit parts. The data in the JSON parameters section in the notification sent to the Huawei Ability Gallery Server by the backend is sent to the onInit function. We define the product part in the card part as props. We need to add the variable that we define as props in the HTML part. Thus, we can capture and show the Event Push Notification.

In the data part, the default information that is requested to stop when Event Push Notification is not displayed can be entered.

After the finished this step you need to create a fulfillment for see a card in you minus one screen.

If you create an ability for the first time, upload the card package. The package size cannot exceed 2 MB. Under the same ability, only one card package can be uploaded for or associated with a device.

If an ability has been created on the platform and a card package has been uploaded to AppGallery:

a. You can upload a card package again from the local host. If you want to upload the card package later, you must upload it from the local host.

b. Select a card package associated with an app on AppGallery. Ensure that your card package is approved and released on AppGallery. Otherwise, the subsequent service test and release phases cannot be proceeded.

To test your ability, you can test it using the real test device. For details; please refer to link.

Important: Make sure you trigger the event from within the app so that it can send notifications during testing.

Tips : If you want to add more than one event for the same application, you can create different widgets within the same QuickApp project and add the fulfillment for the relevant intent.

For backend development please refer to this; link.

If you have anything on your mind, you can contact me without hesitation. Have a nice day ! :)

--

--