Youku Hongmeng Development Practice | Hongmeng Card Development

Author: Ramie

" As mentioned in the title, we will continue to update the "Youku Hongmeng Development Practice" series of articles. This is the first technical article in the series. Follow-up articles include: Hongmeng/Android hybrid packaging technology practice, multi-screen interactive technology practice, etc., welcome to continue Pay attention to [Alibaba Mobile Technology]."

background

With the release of Huawei's Harmony OS2.0, major manufacturers have been the first to cooperate with Huawei. As a leading domestic long video online audio-visual platform, Youku has maintained close cooperation with Huawei for a long time to jointly bring consumers a high-quality audio-visual entertainment experience. Therefore, Youku's technical team also invested the first time in the research on the Hongmeng system and the Hongmeng developer SDK. After multiple rounds of brainstorming, the Youku technical team used some of Hongmeng's new features to start an attempt to develop Hongmeng applications.

Hongmeng OS supports applications to be deployed in units of Ability. Ability is divided into two types: FA (Feature Ability) and PA (Particle Ability). FA/PA is the basic component of the application, which can realize specific business functions. FA has a UI interface, while PA has no UI interface.

Each type provides different templates for developers to implement different business functions.

The application package of Harmony OS is released in the form of APP Pack (Application Package), which is composed of one or more HAP (HarmonyOS Ability Package) and pack.info describing the attributes of each HAP. HAP is the deployment package of Ability, and the HarmonyOS application code is developed around Ability components.

After Hongmeng Engineering is packaged through the Hongmeng packaging tool chain, its product format is HAP.

Currently, the Youku Hongmeng version that includes Hongmeng FA/PA has been put on the shelves of Huawei Hongmeng application market, and Hongmeng hybrid package will be displayed as "with HarmonyOS service" in the application market. If the App is 100% Pure Hongmeng App, there will be HMOS in the lower right corner of its Icon.

Swipe up on the Youku Icon on the phone desktop, and a Hongmeng card will pop up, recommending recent hot dramas to users. Clicking on the card can quickly pull up a half-screen landing page to display more information, and clicking the landing page will jump to Youku customers The corresponding drop page at the end.

Click the pushpin button on the card, you can also fix the FA card on the desktop.

This FA is written 100% using Hongmeng API, and can be run independently from Youku's host and guest. Since FA cards have extremely strict volume restrictions, the volume of the native library will be too large. Finally, through a Webview, our Widget loads the JS version of the front-end network library to request the internal network interface of Youku, and then uses Hongmeng's Native graphics API to draw the Native interface after obtaining the data.

The difference between this Desktop Widget and iOS Desktop Widget is that it does not depend on Youku's host and guest to operate. Even if Youku's host and guest are not activated, the card data can be updated.

The development model of Hongmeng Card

On the Hongmeng system, touch the application icon of Youku host and guest and swipe up to evoke Youku's Hongmeng card. To achieve this, the implementation code of the card needs to be mixed and packaged with the host and guest of Youku, and submitted to the application market together.

However, if the service center is to be used without installation, the total size of the card's independent package is required to be less than 10M. This volume limitation makes it impossible to introduce many Native libraries, otherwise the volume cannot be controlled within the red line.

In the end, the code of Youku Hongmeng Card is put in one project, which is convenient for mixing and packaging with Youku host and guest. At the same time, the code of Youku Hongmeng Card only relies on a few second and third party libraries (such as JSON parsing, image caching, etc.) to reduce the size.

Card style

Hongmeng system provides 4 cards of different sizes, which are 1x2, 2x2, 2x4, 4x4 according to the number of icons on the desktop. Youku cards implement two of them: 2x2 and 2x4, of which the 2x2 card is a must.

The following figure shows two different styles of cards and different appearance scenarios.

desktop	Service Center	discover

Declaration card

Similar to Android application widgets, Hongmeng's cards also need to be declared in a configuration file. In a Hongmeng application, each module has its own configuration file, located in the main directory of the module's code, and the name is config.json.

In the configuration file, each module has a abilities attribute whose value is an array, and each object in the array defines an Ability. The card is defined in one of the Ability:

{
  ...
        "formsEnabled": true,
        "forms": [
          {
            "landscapeLayouts": [
              "$layout:youku_widget_2_2",
              "$layout:youku_widget_2_4"
            ],
            "isDefault": true,
            "defaultDimension": "2*2",
            "name": "youku_widget",
            "description": "$string:yk_widget_description",
            "colorMode": "auto",
            "type": "Java",
            "supportDimensions": [
              "2*2",
              "2*4"
            ],
            "portraitLayouts": [
              "$layout:youku_widget_2_2",
              "$layout:youku_widget_2_4"
            ],
            "updateEnabled": true,
            "updateDuration": 1
          }
        ],
  ...
}

In Hongmeng system, the card is represented by Form. In the above statement, formsEnabled is used to indicate that this Ability is used to define the card. The forms array is used to define a series of cards. Usually multiple cards can be defined in an array element. Among them, landscapeLayouts, portraitLayouts, supportDimensions are used to define the layout file and size of the card, updateEnabled and updateDuration are used to control the data update of the card, and the unit of updateDuration is half an hour.

The life cycle

On the Hongmeng system, the life cycle of a card is much simpler than ordinary Page Ability, with only three related callbacks:

/**
 * 创建卡片时的回调。
 * 在intent中，存有创建卡片的一些重要参数，可以通过Intent.getXXXParam()方法获取。
 * AbilitySlice.PARAM_FORM_IDENTITY_KEY: long类型，用于唯一标识一个卡片
 * AbilitySlice.PARAM_FORM_NAME_KEY: String类型，卡片名称，即在config.json中定义的name属性
 * AbilitySlice.PARAM_FORM_DIMENSION_KEY: int类型，卡片大小标识，
 * 取值范围是1-4，分别表示1x2、2x2、2x4、4x4
 */
protected ProviderFormInfo onCreateForm(Intent intent)

/**
 * 更新卡片时的回调。
 * 这里的formId就是onCreateForm中的AbilitySlice.PARAM_FORM_IDENTITY_KEY参数。
 */
protected void onUpdateForm(long formId)

/**
 * 删除卡片时的回调。
 * 这里的formId就是onCreateForm中的AbilitySlice.PARAM_FORM_IDENTITY_KEY参数。
 */
protected void onDeleteForm(long formId)

Transfer card content

The creation and display of cards are usually initiated by the desktop (or service center, search), and the Youku card module determines the content to be displayed. The content provider and the displayer are not in the same process, and they are even developed by different developers. The same is true on Android.

In this case, the content provider generally renders the content to the content displayer through remote View. The cross-process data transmission behavior on the Hongmeng system is implemented by the ComponentProvider.

There are two ways to create ComponentProvider:

// 第一种: 在onCreateForm()时，先创建一个卡片对应的ProviderFormInfo实例。
// 再通过ProviderFormInfo的实例拿到向它传输数据的ComponentProvider。
ProviderFormInfo form = new ProviderFormInfo(layoutId, context);
ComponentProvider cp = form.getComponentProvider();

// 第二种: 在onUpdateForm()时，直接创建出一个ComponentProvider。
ComponentProvider cp = new ComponentProvider(layoutId, context);

need attention 1

Note that when setting IntentAgent, there are usually multiple Views in a layout to cover the rectangular area of the root layout. If the View with the IntentAgent set does not cover the root layout, when the uncovered area is clicked, the system will respond to the click. By default, the Ability to which this card belongs will be called up, and the incoming Intent only contains the formId.

There are generally two ways to solve this default Ability: one is to ensure that the View with IntentAgent is set to cover the root layout; the other is that Ability provides a solution, such as making the page transparent and automatically exiting.

need attention 2

When creating an IntentAgent, you need to provide an IntentAgentInfo instance. The first parameter when the IntentAgentInfo is created is an int type request code, which must keep the different click areas of each card different. Otherwise, the IntentAgent set later will override the IntentAgent set previously for the same request code.

need attention 3

If it is mixed with Youku's host and guest, the ID of the View in the layout file of the card must be different from all ids in the host and guest, otherwise the system will not be able to update the corresponding View in the layout file correctly.

Open transfer page

Due to system limitations, the page opened by clicking the card must be a page in the pure Hongmeng application, and the Android application page cannot be opened directly. The purpose of clicking on Youku card is to open the playback page of Youku host and guest.

Here we have made a classification:

• When the user has not installed the Youku host and guest, a transfer page is displayed, providing a download button for the user to jump to the Huawei application market to download the Youku host and guest. When the user comes back after installing the Youku host and guest, the download button becomes a selection list. For single episode videos Become a play button;
• When the user has installed the Youku host and guest, the transfer page automatically opens the Youku host and guest play page and exits.

Data request

In Youku host and guest, all requests for network data are accessed through a unified network library. Since Youku Hongmeng Card does not integrate a network library, Youku Hongmeng Card must use other methods to request network interfaces.

To initiate a data request on Hongmeng, there are two solutions:

• One is to encapsulate a new HTTP Open API interface for each data request interface, and the client can directly access it through HTTP(S);
• The second is that the client initiates a data request through the JS version of the Network library in the H5 page.

Considering that it is possible to achieve more other requirements on the Hongmeng system in the future, and the first solution has security risks, we finally adopted the second solution.

The JS version of the network library used by the front-end business is used to implement asynchronous callbacks through the Promise mechanism in JS, but this method is not easy to implement the corresponding call structure in Java. So there needs to be a layer of encapsulation to notify the requester of the network request result through a simple callback. Correspondingly, the global JS object needs to be registered to WebView on the Java side, the callback method of the JS object is implemented, and the call path of JS -> Java is opened.

This solution looks good on paper, but in actual use, serious performance bottlenecks will be found. WebView itself is a very heavy control, it will be time-consuming when it is first created in the process, there are a lot of so loading, initialization and other work. Loading HTML is a network request, which takes hundreds of milliseconds. After the HTML is loaded and parsed, the JS version of the network library must be loaded again, which is another network visit. After the JS network library is loaded and interpreted and executed, the caller can be served normally.

To optimize in this process, the initiative here is to load the two files of HTML and JS web library. In the Hongmeng system, WebView can hijack a specific URL by setting WebAgent, and convert it into reading HTML and JS files in local resources.

public class LoadAgent extends WebAgent {
    // ...

    @Override
    public ResourceResponse processResourceRequest(WebView webView, ResourceRequest request) {
        // mInterceptor用于识别HTML和JS网络库的URL，并返回本地资源中的HTML和JS。
        ResourceResponse response = mInterceptor.intercept(request);
        if (response != null) {
            return response;
        }
        return super.processResourceRequest(webView, request);
    }
}

This can reduce two hundred-millisecond serial operations to milliseconds, greatly reducing the initialization time of the JS version of the network library.

Data cache

The card data returned from the network request, in addition to being used for instant rendering of the card, will also be saved in the local storage. If the next time a network request is initiated, the network cannot be accessed normally (for example, the phone cannot be connected to the network for a while after the phone restarts), you can use the card data in the cache to render first, so that the user will not lose sight of the content at all. This requires a set of card data cache management capabilities.

In view of the characteristics of the card data, we use two database tables to store the cached data of the card. Depending on the size of the card, different parameters will be provided to the server in the request. Conversely, the parameters of the request sent by the card of the same size are the same, that is to say, the data obtained by the request of the card of the same size is the same. So there is a table used to store card data of different sizes, and each card size corresponds to a record, including unique identification, card size, data returned by request, timestamp, etc.

The system does not limit the number of cards that users can add to the desktop, and there can also be cards that have been added to the desktop in the service center. So the same card data can be displayed on multiple cards. The database needs a table to record the information of each card, including the unique identification of the card, the size of the card, and the corresponding record in the data table.

If you have implemented ContentProvider in Android, you will generally be familiar with SQLite databases. Usually ContentProvider needs to manage a large number of different types and related data, this kind of demand is most suitable to achieve with SQLite. The cache for managing card data here also has the same characteristics, and Hongmeng system also provides an interface for using SQLite database. The typical database initialization operation is as follows:

// StoreConfig最常见的作用是配置数据库名字。也可以配置存储模式、加密等高级需求。
StoreConfig config = StoreConfig.newDefaultConfig(DB_NAME_FORM_STORE);

// RdbOpenCallback用于定义创建数据库、升级数据库结构版本等时机的回调。
RdbOpenCallback callback = new FormStoreOpenCallback(context);

DatabaseHelper helper = new DatabaseHelper(context);

// RdbStore是数据库的封装类，最终的增删改查操作都通过它来进行。
RdbStore store = helper.getRdbStore(config, CURRENT_VERSION, callback);

The specific addition, deletion, modification, and checking operations are not listed one by one.

Data Update

In the previous section declaring cards mentioned in config.json, updateEnabled and updateDuration define the data update mechanism of the card.

Among them, updateEnabled is used to specify whether to automatically update the card data through the system. If you want to trigger the data update by the application itself, this can be set to false. In the scene of Youku card, it is hoped that the system can update the card data automatically, so it is set to true.

When updateEnabled is set to true, updateDuration is meaningful. updateDuration is used to specify the update interval. Hongmeng system also supports fixed time update, and set the update time by specifying scheduledUpateTime. Only one method can be selected for updateDuration and scheduledUpateTime.

Youku card chose to use updateDuration to specify the update interval. In order to avoid more users using the card in the future, which will put too much pressure on the server, the update interval is controlled at 4 hours, so that when users look at the card at different times in the morning, afternoon, and evening, the content will be updated.

However, in some cases, the logic of the Youku card itself will also update the card data, so in order to avoid the conflict between the two update strategies and lead to more intensive updates, or if it is not updated for a long time, updateDuration is specified as 1, that is, the system will update every half an hour. Call onUpdateForm() once. In onUpdateForm(), the time when the last update actually occurred will be judged, and the update interval will be kept at about 4 hours.

Fault-tolerant processing

Taking into account some extreme situations, for example, after users install Youku, they add a desktop card when there is no network. At this time, the card's data request is not returned. At the same time, because it has just been installed and there is no cached data, the card does not display any data, only the gray background image is used as the background. At this time, if you click on the card and there is no video information, you cannot jump to the playback page of a particular video, but only a notification of loading failure is displayed. After the user's network is restored, the valid data can be obtained by refreshing.

Blank card	Blank page after clicking the card

Outlook

Now youku Hongmeng version of the desktop card has been officially launched with the release of the Hongmeng system. On Hongmeng system mobile phones, Youku host and guest installed from the Huawei App Market already have the ability for Youku cards.

Since this is a brand-new development technology stack, there will definitely be some room for improvement in applications released early. From now on, there are mainly the following aspects:

1. performance \
   Because the data request and burying point use the JS library and run in WebView, this makes the runtime efficiency lower than that of Java, and also handles the interaction between WebView and the outside world, which has a greater impact on performance. Although there have been some measures to reduce the impact in this regard, we still need to continue to tap the potential in the future
2. monitor \
   The ability to collect information such as JS side crashes will also need to be supplemented in the future.
3. Online configuration capability \
   Youku host and guest can issue various configuration information through various remote configuration platforms. However, Hongmeng cannot bring its own related libraries due to volume limitations. In the future, we need to consider using other methods to achieve remote configuration capabilities.

Finally, on October 20th, the second part of the "Youku Hongmeng Development Practice" series of technical articles will be launched to introduce how to implement the Android/Hongmeng hybrid packaging process. Thanks for your attention, and see you in the next technical practice.

, 3 mobile technology practices & dry goods for you to think about every week!