Huawei Ability Gallery — Card Ability - Huawei Developers

{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Hi everyone, I will explain Card Ability in this article. Article also includes general information for Huawei Ability Gallery. You can find and download a sample Card ability project at the end of Article.(If you want to test it, read requirements section before test).
What is Huawei Ability Gallery ?​HUAWEI Ability Gallery is Huawei’s unified platform for ability integration and distribution. It aggregates traffic from a wide range of devices in all scenarios and provides developers with a one-time integration and all-scenario distribution solution.
Note I : If you want to develop an Huawei ability, you need to have an Enterprise account otherwise Smart Service section on AGC cannot be seen. To learn How to register Enterprise account, visit link: Link
Note II : Developers in Team list cannot create ability even if They have enterprise account.
Note III :All Abilities can be seen in Huawei Assistant page. You can open or close page following steps : Settings -> Home Screen & Wallpaper ->Home screen settings -> Huawei Assistant today.
Devices for Ability Distribution​Services integrated with HUAWEI Ability Gallery can be distributed to 1+8+N devices in almost all scenarios and provide users with natural interactive services.
“1” : Smartphone.
“8” : tablet, smart TV, speakers, AR/VR, watch, head unit, earphones, and PC.
“N”: devices used in scenarios such as mobile office, smart home, sports and health, entertainment, and smart travel.
For example, the weather service integrated with HUAWEI Ability Gallery can be distributed to devices such as smartphones, tablets, smart TVs, head units, and watches through AI Voice.
Huawei Ability Integration Modes​Huawei Ability Gallery include 3 types of ability :
App Ability: Instant Access can access HUAWEI Ability Gallery via app abilities, which are presented by icon. Links for redirecting to an APK, RPK, or HTML5 page are provided by Developer.
Content Ability: HUAWEI Ability Gallery obtains data from developers’ servers through APIs and provides content abilities for Huawei products. Huawei products then present the abilities as defined.
Card Ability : Developers use quick app development technology to develop ability cards (including data processing and display logic), and abilities are displayed as cards.
Card Ability​Card ability presented by card has the following features:
The name and content of the ability are presented to users.
A user who taps the card will be redirected to the native app, quick app or HTML5 page.
More content is displayed to attract users, contributing to higher conversion rate.
Each users must subscribe Card ability to display Card ability in Huawei Assistant Page. Cards can be use without any app. Users just need to subscribe it to use.
Note : Each card has an widget id attribute which cannot be edited or deleted. Otherwise, the widget dragging and simulated preview functions will be unavailable.
Interaction Types of Card Ability​HAG includes three intents type. These are user ,event and resident events. Developers must configure at least one of them .
User Intents : A user intent is represented by one or more intents in the interaction model. Card ability can be triggered by Keywords , Voice and Images.
Event Triggers : An ability is triggered when event conditions (such as time and location) that you have set are met. When an event occurs, HUAWEI Ability Gallery pushes the ability card to users to display event-related information. To add an event, select an event category (Custom event or Preset event), set the event type, name, description, specify whether to push an event to a specified user, set the duration when the event card will stay visible on the screen, and finally set the display mode.
Resident Event Card : If you need a permanent intent card, just create it, with no need to push events. The card will be always available in HUAWEI Assistant.
For Detail Information About Interaction models of Card Ability , visit this page Link
Card Ability Design​HUAWEI Ability Gallery contains common template components and basic parameters, which must be used together with the UX specifications.
Developers use Huawei Quick App ide to design Card ability templates.
Note I : Unless You want to use predefined template, you can select empty template and then design it easily. You just need to look at this document to learn How to use ide.
There are many restriction to design card ability so Before start to design, Huawei Card design page must be checked. Link
Note II : Before you start card development, contact [email protected] for assistance and fill in the Service information registration table to ensure that your card complies with Huawei specifications.
Requirements to develop Card Ability​Before Developers start integration of HAG , They need to load some tools to design and test.
Huawei Quick App ide Packages
Huawei Quick App ide which is strong development tool is used to develop card ability. You can download here :
Note : Before load Huawei Quick App ide , You must install Node.js. Link
Huawei Quick App ide for Win64 : Link
Huawei Quick App ide for Mac : Link .
Installation Guide for Mac link
Huawei Quick App Loader
It is used to start and debug quick app and HAG development. Link
Card Ability Development​Card ability can be developed with Huawei Quick App ide. Developers use JavaScript, HTML and CSS to develop card ability. Quick app ide has many different template. If Developers want to use one of them , They can use and integrate their features. For instance they can get data from server and show these on Card ability to users like we did.
Note : Card development takes 12 days.
First step design or select card ability template. In our example I choose a template. To select a card template ,you can follow File > New Project > New Widget Project.
After create a card , developers can modify card ability appearance . In Our example, we change number of element list , images and content of card ability. In addition If users click “More Currencies button” , They will be redirected to related page of app. If you want to learn detail of design , visit following link
We need to create objects and variables to store data which comes from API .In our Card has on
JavaScript:
data: {
currencies:[
//Our models consist of 3 properties.name,currency rate and image.
//Images is stored base64 format in objects.
{"name":"GBP","rate":"0.00","imgUrl":"data:image/png;base64,..."},
{"name":"EUR","rate":"0.00","imgUrl":"data:image/png;base64,..."}
],
//It show that when Data was obtained
UpdatedTime:null,
//Our card title
currencyCardTitle:"Currencies",
//Our Button name
currencyCardButton:"More Currencies",
/*
these items will be displayed on card ability, Our design includes only two items.
If you want to add more items, you need to insert into here
*/
'dividings': ['newsandinformationtype_dividing', 'newsandinformationtype_dividing']
}
We need to send request to obtain data from service , We can use Fetch for this operation. Under line you can see how to use fetch .You can download all project to look at code scope from My GitHub repo which can be found at the end of page.
JavaScript:
import fetch from '@system.fetch'
...
module.exports = {
data:{ ... },
getDataFromAPI:function(e){
var that = this
fetch.fetch({
url: 'API url',
success: function (data) {
},
fail: function (data, code) {
}
})
}
}
Card ability includes a button which is called More Currencies. When users click it, they will be redirected to Currency Page which is in App. If developers want to create this feature, they need to use Router API and create a deep link.
JavaScript:
import router from "@system.router"
...
const currencyPageUri ="referenceapp://bank/currencies"//DeepLink of Currency Page
redirectToApp:function(){
//deeplink must be called to jump app page
router.push({uri:currencyPageUri});
}
Card Ability Configuration Steps​When Developers finish card development, they need to start an card ability in Smart service page. I said before If you want to create an ability, you need to have an Enterprise account.
This part includes only important section for Ability configuration.
When Start to configure ability , need to select a Site like Europe, Russia and Asia-Africa-Latin America(AALA).If you want to publish you ability all regions , You need to create same ability 3 times for different regions.
All ability includes a fulfillment which describes important settings. Fulfilment includes App URLs which users click to open app, qucikApp or H5 page.
Go to service button is important for card and content abilities. After Users click this, They will be redirected to service which may be app, quickApp or HTML 5 page.
Card Ability Test​After Finish Card development and configuration , Cards can be tested using Huawei Ability Test tool which can be downloaded from Huawei App Gallery or real device .
Developers just need to generate a QR code and then scan it with Huawei ability test tool.
If Real device test tool is wanted to use, user test list should be created on HAG configuration.
References​Card Ability : Link
Configuration Guide : Link
Test Guide : Link
Repo includes card ability example.
GitHub - SerkanMUTLU/Card-Ability-Example at dev
Contribute to SerkanMUTLU/Card-Ability-Example development by creating an account on GitHub.
github.com