How can we convert an HTML 5 web page into a Quick App with Online Conversion

Serkan Mutlu

Published in

Huawei Developers

5 min readJun 6, 2020

Hi everyone , I will try to describe How can we convert an app into Quick App using Online Conversion .

What is the Quick APP ?

Quick apps are different from HTML 5 web page. A quick app has its own development standards and runs based on the Quick App Center. However, quick apps support HTML 5 web page loading through the web component. In this way, HTML 5 web page can be converted into quick apps quickly.

Quick apps are installation-free apps. At least four major Chinese manufacturers are set to deploy quick apps globally within 6 months. Quick apps support all HTML 5 web page, all HTML 5 games, 90% of app categories, and 90% of game categories.

Note : This article shows that how can HTML 5 web page be converted into quick app.

Advantages of Quick App

Low development costs: JS/CSS: 20% of the code for an Android app
Native experience: Native GUI, and ability to access device functions
High retention: Easily added to the home screen and found

End-to-end experience

Find: Quick apps can be found from AppGallery, HiBoard, and HiSearch.
Open: Quick apps open instantly and can be used without being installed. They can update automatically and take up minimum storage.
Use: Quick apps run smoothly on user devices, provide friendly GUIs and excellent functionalities.
Leave: Once closed, they can be -easily from the home screen icon, recently used apps, and Push notifications

Quick App Project Structure

Quick App project structure is basic like other frontend technologies. We can develop Quick app with Javascript,html and css .If you want to look details of Structure, you can visit this page: Details

Manifest.json specifies the project configuration information, like name, package name, version, pages etc.
App.ux specifies public resource scripts.
UX files describe pages and components.

Huawei Quick App Ide

Huawei quick app IDE provides a complete set of capabilities that span from app development, building, debugging and testing to release. It also provides templates for different services, such as news and media, reading, food delivery, e-commerce, and early childhood education.

For details of User Guide, click here

How can we install Quick App?

We have to install Node JS
After İnstalling Node JS, we can download and install quick App IDE that Huawei provides for Windows and Mac.

Huawei Quick App Loader

We need to Quick App loader to start and debug on our mobile phone.For this reason we need to install Huawei Quick App Loader and install it manually.

If you want to learn details of installation or download all package, you can follow this link

Example : Convert an HTML 5 web page into a Quick App

There are two conversion methods in Huawei Quick App.

Online Conversion : You only need to perform related configurations in AppGallery Connect. Then AppGallery Connect will automatically convert your HTML 5 web page into a quick app and submit it for review
Offline Conversion : You need to perform the conversion using Huawei Quick App IDE. The generated quick app package will be submitted for review.

In this article’s topic online conversion and example shows that how can we convert an HTML 5 web page into a Quick App.

Online conversion

First of All we have to create quick app project whose template is HTML 5 App.

2. Create or select an app inside AppGallery. Console > Huawei AppGallery followed this way.If there is no project, click Add project. In the displayed dialog box, enter the project name to create a project. Alternatively, click the project card to which you want to add an app.

Add app on the top of the Project Setting page

Note: We must Quick App as platform.

App and Package name is related our project.

App category includes two section

— App : non-game apps (Our example is non game apps )
— Game : game apps

3 .After created Application we set app information that includes introduction, brief Introduction, app icon etc. and save all definition.

4 . SHA-256 certificate fingerprint must be created and enter related area inside developer tab.
Note:We can follow Tools >Certificate path to generate certificate fingerprint in Quick App ide

5. Next step we have to specify link that is converted into a Quick App. For this reason we follow myApps > Project > Distribute > Version Information >Draft path.

6.We create RPK file in Software Version Area then click Generate RPK based on HTML5 page URL button. RPK file must be created to use in Huawei Quick App Pc Assistant.