Huawei Ability Gallery — Card Ability

Serkan Mutlu
Huawei Developers
Published in
7 min readDec 1, 2020

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.

Devices for Ability Distribution(1-8-N)

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.
Subscribe Page

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.

Card ability example for Banks

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.

Types of Event Trigger

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 agservice@huawei.com 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.
Card templates from Huawei Quick App IDE
  • 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
Card ability for reference bank app
  • We need to create objects and variables to store data which comes from API .In our Card has on
  • 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.
Fetch API
  • 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.
Router

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.
  • Our card ability is a kind of resident intent. It includes intent name, type and fulfillment.
  • 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.
  • Links must be written these sections for Go to Service.

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.

Developers just need to generate a QR code and then scan it with Huawei ability test tool.

Note : Generated QR can be used in 7 days.

Card Review

--

--