[Huawei Developers] serkanmtl:
View attachment 5278701

Hello everyone, In this article, we will be exploring how to develop content ability . Also I will share an example We developed before.

Note I: If you want to develop any ability, you need to have an enterprise account otherwise You can reach relevant panel on Huawei console.

Note II: Everyone in team account can’t use same enterprise account to develop ability.

What is Content Ability ?

Content ability looks like card but There are a few differences between card ability and content ability. Following image shows us How it looks like. Main differences will be explained next steps.

View attachment 5278703
​

What are the differences between Content and Card Ability ?​

Content Ability

Developers only provide an API which includes information about design and data which will be displayed on Content body. This API is used to be generated content view by HAG server.

Developers can’t design card template using HTML,CSS and JS for content ability because Content ability design information consists of JSON format. They just select an predefined design template and use it in API response message.

Developers should use schema definition provided by Huawei.

Nowadays HAG provides a few types of card templates but These are enough to meet for CP requirements.

Developers can deploy content ability in short time with only developing an API.

When Users click some thing on Content ability , They can be redirected to Native App, Quick App or Web Page using deeplink

Card Ability

For Card ability There many way to develop card. Developers can design as they wish or they can use predefined template Also They can modify predefined card template. I think that last option is good alternative for designing from beginning to end. Because Card ability has many design restrictions for much information you can visit following page: Link.

They can develop special card design using HTML,CSS and JS.

Developers have to use Huawei Quick App IDE to design card ability and They need to use a few application to display card ability. You can find all required app for Card and Quick App solution : Link.

Card abilities are developed using HTML,CSS and JavaScript so These platforms provide us many feature to use with Card ability.

Many of JavaScript features can be used with Quick App like Fetch API.

Developers can obtain data from server and show data on body of card.

When Users click some thing on Card ability , They can be redirected to Native App, Quick App or Web Page using deeplink.

Content Ability’s Working Principle​

HUAWEI Ability Gallery gets service data from developers’ server and generates smart card to end users.

Users can reach content ability via touch points Which Huawei provides us. Nowadays There are 4 touch point AI Voice, AI Lens, AI Search, Smart Services.

After Users send intent using any one of touch point , HAG server gets following request and send data request to Developers’ server via API which was provided by developers to obtain content ability design. When HAG obtains response message from developers’ server with successfully, It generate a content and then present it to users with data.

Following image describes Working principle of Content Ability.

View attachment 5278705

Let start to develop a content ability step by step​

I will explain how to develop content ability using general content template but There are many content templates.

First of All we need to create an Ability and determine its category and then you should fill following page for Ability Basic information, Country/ Region and Display information.

Basic information page includes ability information.

Select release countries / regions. Select countries or regions where the ability is to be released.

Display information consist of ability display information like icon, name, description, etc.

After that We can set content ability design , service and API which was provided by developers to generate content .

View attachment 5278707

I want to explain important sections of fulfillment page as shortly.

Type : describes ability type. There are three ability type Web Service, Custom Card and RPK/APK and H5 link. We need to select Web service type for content ability.

Distributable ability capabilities : Developers should select capabilities which will provide in Content ability. For example Content ability will include image and text on body, they need to select Provide texts and images option.

Personal data authorization: Section can provide us user specials information like user location, Voice texts or photos of a user.

Service Links : The links (required only for mobile phones/tablets) are configured for the Go to service function (tap the three-dot icon button on the top of the card and then tap Go to service), which are different from those to be redirected when a card is tapped.

Web service card instance: After a card instance is configured, it will be displayed as the GUI effect when the user triggers the service intent. HAG only supports API data source to generate content ability design.

Before develop API, Developers need to prepare Content ability design template using this template. After click set button, content ability’s design page will be opened and developers can choose best design option for their project.

View attachment 5278709

General Templates shows that Content ability predefined templates. Developers just select one of the template from there.

Attribute Panel, After select a content template, Developers can change something on content ability body item like text, button, Image size from this section.

After any item’s modification is finished on content ability, JSON file is generated automatically. JSON file is important because Developers use it in response message of API so When design operation is finished, It should be saved and downloaded. Following image shows us content design as JSON format. This is called Schema Definition. You can visit following link for detail information : Link

{
"version": "1.0",
"errorCode": "",
"errorMessage": "",
"sessionAttributes": "",
"reply": {
"isEndSession": true,
"displayText": "",
"speech": {
"type": "",
"text": "",
"ssml": ""
},
"commands": [
{
"head": {
"name": "DisplayTemplate",
"namespace": "Render"
},
"body": {
"templateType": "BasicImageDetailTemplate",
"generalCardInstance": "contentAbilityDesign",
"templateContent": {
"items": {
"type": "BasicImageDetailTemplate",
"content": {
"primaryInfo": {
"primaryText": {
"text": "Product Name",
"highlightText": [
"",
""
],
"highlightColor": ""
}
},
"imageInfo": {
"imageInfoList": [
{
"scale": "OneToOne",
"url": "Image URL "
}
]
},
"detailUrl": {
"webURL": "",
"deepLink": {
"url": "",
"appPackage": "",
"minVersion": 1
},
"quickApp": {
"url": "",
"minPlatformVersion": 1,
"minVersion": 1
},
"silentLink": {
"url": "",
"appName": "",
"appPackage": "",
"appBrief": "",
"appIconUrl": "",
"channelPackageId": ""
}
},
"auxiliaryInfo": [
{
"auxiliaryText": [
{
"text": "Product Price",
"bulletsUrl": "",
"highlightColor": ""
}
]
}
]
}
},
"buttonLinkArray": [
{
"buttonText": "More Products",
"webURL": "",
"deepLink": {
"url": "",
"appPackage": "",
"minVersion": 1
},
"quickApp": {
"url": "",
"minPlatformVersion": 1,
"minVersion": 1
},
"silentLink": {
"url": "",
"appName": "",
"appPackage": "",
"appBrief": "",
"appIconUrl": "",
"channelPackageId": ""
}
}
]
}
}
}
]
}
}

In JSON file Template content section describe all item in content ability’s body. As you see our example consists of 2 texts, an image and a button. In addition You can set URL to redirect users to specific Native , Quick APP and Web page. If you want to redirect users to App, you should use deeplink. For Web page, You just need to write an URL of Web Page.

View attachment 5278715
​

After Download JSON file We can come back to fulfillment page.

Service Deployment : Developers set there with API which was developed before. You can find Backend code at the end of the page for our application.

Following Image figures out Request & Response message also It shows us how we can use content JSON in response message. As you know request and response messages have to be developed on Backend side. You can find example of it following lines.

Note : There are many Schema definitions for different category and develops have to follow their structure to generate content ability.

View attachment 5278717

Intent Declaration for Content Ability​

Intents of content abilities are classified into user intents, event intents, and resident intents. At least one of them must be configured.

User Intents : Goals or tasks that users want to achieve, such as taking a taxi and querying the weather. If your user’s intent matches the intent you configure here, HUAWEI Ability Gallery will provide the user with the required ability.

Event intents : Event notifications that you sent to HUAWEI Ability Gallery. When receiving an event, HUAWEI Ability Gallery checks whether the event matches that already configured.

Resident intents : Resident intent cards can be used only in HUAWEI Assistant TODAY. If you need a resident intent card, just create it, with no need to push events. The card will be always available in HUAWEI Assistant TODAY. It is able to redirect users to your ability or recommend content to users, such as popular recipes, Products and hotels.

How can we test Content Ability ?​

Developed app can be tested with Huawei Ability test tool ,device test and Interface test options.

If Developers want to test content ability using Huawei Ability test tool, Firstly They need to download it from Huawei App Gallery then they need to generate QR code to test content ability. After generate QR code, Developers can scan it with Huawei Ability Test tool to check if it works or not.

View attachment 5278719
​

Also They can test content ability on Real device after create user test list in HAG test page. Following image shows us HAG Test page. Finally Users in the Real-Device Test List can see content on Huawei Assistant Page.

View attachment 5278721
​

If Developers don’t have Huawei Device to test, They can use Interface test section and select relevant intent type of content ability to see its view.

View attachment 5278723

Note : Before the test, ensure that the configured intent has been associated with a fulfillment. Otherwise, the test cannot be performed.

View attachment 5278725
​

References​

Enterprise Account Information : Link

Content Ability Configuration Web Page : Link

Content Ability Design Guide : Link

Fulfillment API :Link

Content Ability Schema Definitions for different Categories : Link

Content Ability Test Guide : Link