👨🏼💻 Huawei Ability Gallery — Showing Nearby Places on the Card (Part 1)
Hi everyone,
As we all know, lately, when people go about their day-to-day chores, it has become more important for them to make the timing right. Therefore, when planning to go to places like ATMs, cafes, museums, etc., they try to choose the ones closest to where they are. They can find nearby places by searching them on the web, or by installing the mobile applications which are developed to do this job for users. In phones which include Huawei Mobile Services, we can show nearby places to users in the Huawei Assistant Page thanks to Huawei Ability Gallery. And in this article, we are going to talk about how we can do that. We will develop a card to show nearby places to the user.
Note: Before you start reading this article, you can take a look at the article below to understand the Huawei Ability Gallery and the Card Ability concepts.
Showing Nearby Places on the Card Topic is divided into two parts. The first part which will be explained in this article, includes card design/development in Quick App IDE and Huawei Console Configuration for the card. The second part which will be explained in the other part of this article (Huawei Ability Gallery — Showing Nearby Places on the Card (Part 2)), includes getting user location from the app and sending it to the card using Event Push .
Here are the things we need for this part:
- Quick App IDE (latest version)
- An enterprise account registered in Huawei Developer Official Site
First, we will look at card design/development in Quick App IDE
Card Design/Development
First of all, we need to create a new project for card. So, after you open Quick App IDE, please go to New Project -> Widget then select “Phone — Android” option. And then click “Next” button.
In the “Select Template” section, you can choose any template appropriate for your project and click “Next” again. In this process, we will select Vertical Template ->News_and_information template.
Note: If you want to design your own template, you can select Empty template in Universal Template.
But note that, if you are going to design the card yourself, you must follow the UX design guidelines outlined in this document.
After selecting a template, please fill App Name, Package name fields and select a Workspace. Then click “OK”.
After creating the project, you will see a screen like the following:
On this screen, you can see the “Explorer” panel on the left. Go to Explorer Panel and extend COM.GEOLOCATION.DEMO (your package name) , src , news_and_information_type folders respectively.
Note: In common->component folder you can see card_bottom and card_title items. These can be explained in the following.
- card_bottom : It contains properties of items at bottom of the card, which can be button or array of buttons
- card_title : It contains properties of title at the top of the card, which is name of the service application providing the card items.
In this article, we will focus on news_and_information_type.ux which contains properties of main items which are placed in the middle of the card. If you want to customize the card title and card bottom you can update the codes in UX files of them.
In news_and_information_type.ux, there are three parts which are divided with tags. These are :
- <template>
- <style>
- <script>
We will focus on <script> part to develop our card and <template> part to set our card items’ feature.
Note: Due to UX design rules, Quick App IDE doesn’t allow you to update any tag in <template> part manually . You can add/delete components only by the methods described in this guide.
In the next part of the article, we will proceed by assuming that we have a bank application as an example and that nearby ATM information is kept in the backend in this bank application. Now, let’s assume that the information in this backend comes to us in a JSON object called sites.
First of all, in order to pull the data in this object one by one, we will replace <block for=”{{$t(‘message.items’)}}”> phase with <block for=”{{sites}}”>, which is in the <template> section of our code.
We need to determine which data on the card will be got from the backend of the app providing data . The names of the data must be same as the name of items in our backend. After determining we named these data defined with the same name in API, we define them by creating a scope called “props”. So, we create a props array that will hold the sites object under the module.export in the <script> section of our code.
Additionally, we need to define one more object named “sites” in “data” scope to hold data coming from the backend through the sites object. And also within this sites object, we need to define variables which we will be able to assign the information we will pull from the . For this case, we will replace the “items” object name with “sites” , “msgOne” variable name with “bankName” and “msgTwo” variable name with “distance”.
Note: All variable names in the data object must be exactly the same as all the variable names you will send from your backend to the card.
And we pull the data from the backend with “parameters” keyword.
Note: The variable which will keep the parameters must have same name in the backend and parameter required by onInit() function in Quick App IDE.
Console Configuration
Now time to card configuration on the console. You need an enterprise account for using HAG. Please sign in console with your enterprise account and select the Smart Services for HAG as in the following screenshot. In this example, we used Europe. If your region is different from Europe please select the part that suits your region and continue.
Then we need to create a new ability. You can find details in screenshot.
When we select create ability, we encounter the screen in the screenshot below. Then we select Custom ability model and fill the ‘Ability Name’, ‘Category’ and ‘Default Language’ part.
After clicking the ‘Create’ button, we have to fill in some necessary information. As in the screenshot, the Basic information, Country/Region and Display information section ask for some information on the detail pages. We must fill in this information completely and save it.
On the ‘Display Information’ page, you can add Short and Full Description with icons. If you wonder ‘What are the short and full descriptions?’ You can use a question mark in the screenshot or you can check this document for a detailed explanation. You can also find the size that should be used for the icons and images you will add to this page. For example, you have to use 72 x 72px for ‘Small Icon’.
And in the Display Information, you can add other languages. For example, you will release a card in different countries, so the display information of the card should also change. From here, you can add a new language by clicking the Manage Language section. Then you can switch between these languages and use new images suitable for the language you added.
After completing to fill ‘Ability Information’ part, we can start ‘Confıgure’ part. In the Configure part, we need to add an intent for our card. For the Geolocation demo, we used Event Push so we have to add Event Intent. If you want to examine Event Push in detail, you can check this document.
Then we fill in the necessary information for event intent. We need a ‘Fulfillment’ for intent. We click ‘Configure’ for creating a new fulfillment.
We uploaded the card RPK file that we have completed in QuickApp IDE to the Upload card package section. And then we select the service links part. In this demo user will be directed to the app, so we selected Link to the app. If you open the Quick App or HTML5 page instead of an app, you should select the appropriate one from the other options.
Then you should fill in the required information according to the service link you chose. Here are the parts we need to fill in
- Link URL
- App package
- Min. app version supported
And another feature we need is Account Binding but it is not this article subject so please check this document for details. For the geolocation demo you can add Account Binding via the Account linking part.
After adding the ‘Account Binding’ part, time to test. For testing, you can use ‘Test’ part on console. Please click ‘Prepare Test’ button. For card test details, please check this document.
Note: If you change any part of the card configuration part, please do not forget to click the Prepare Test again button.
For the second part of the development, please refer to the following article.
