How can we convert an H5 app into a Quick App with Online Conversion - Huawei Developers

This article is originally from HUAWEI Developer Foum
Forum link: https://forums.developer.huawei.com/forumPortal/en/home
What is the Quick APP ?
Quick apps are different from HTML5 apps. A quick app has its own development standards and runs based on the Quick App Center. However, quick apps support HTML5 web page loading through the web component. In this way, HTML5 apps 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 H5 apps, all H5 games, 90% of app categories, and 90% of game categories.
Note : This article shows that how can HTML5 apps 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
{
"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"
}
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.
Huawei Quick App Pc Assistant
Huawei Quick App PC Assistant supports loading quick apps to multiple terminals and testing cards and hap links. After the PC Assistant is installed on the PC, you can test the functions of the quick app without using the IDE
You can download all Installation Package link
Example : Convert an H5 app 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 HTML5 app 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 H5 app into a Quick App.
Online conversion
First of All we have to create quick app project whose template is HTML5 App.
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
After created Application we set app information that includes introduction, brief Introduction, app icon etc. and save all definition.
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
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.
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.
-After click this button open under page and fill related area.
Finally Download RPK file from download link.
e can test using Huawei Quick App. You can visit to learn details this link
As you see after conversion operation , our conversion was occured successfully. Short video show us it.