FORUMS

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

46 posts
Thanks Meter: 2
 
By Freemind R, Official Huawei Rep on 18th May 2020, 02:45 PM
Post Reply Email Thread
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

https://img.xda-cdn.com/BnKS7aCyTjET0zGx99JidUP-9NI=/https%3A%2F%2Fcommunityfile-dre.op.hicloud.com%2FFileServer%2FgetFile%2Fcmtybbs%2F023%2F106%2F255%2F0890090000023106255.20200505061557.85645038160168908352760811360040%3A50510518132808%3A2800%3A953788FDC02E6AAEA4615FCBFB47AB6BB31DA756BEA1CC6A353A390C2A203AF8.png

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.

https://img.xda-cdn.com/Zvn-cMPNxiqW2BbhhG74Sh6Fk9s=/https%3A%2F%2Fcommunityfile-dre.op.hicloud.com%2FFileServer%2FgetFile%2Fcmtybbs%2F023%2F106%2F255%2F0890090000023106255.20200505065730.60034206889063252280428792831809%3A50510518132808%3A2800%3AAF6F2E2F210DB4C65A89D2165787D38F6529613E4B769A5027E8081FBAB5EF15.png

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

https://img.xda-cdn.com/MAP0QtWR8jtKKB0C7AZvUwCf2fs=/https%3A%2F%2Fcommunityfile-dre.op.hicloud.com%2FFileServer%2FgetFile%2Fcmtybbs%2F023%2F106%2F255%2F0890090000023106255.20200505070559.90795017588186224074245013343022%3A50510518132808%3A2800%3A3EA6CCD1D6F9418E4B443DC9AF16EE153D1868561B8515E3CABE45BAA7EC1C97.png

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.

https://img.xda-cdn.com/4CIHwLnU8rYgLVdNyxc8NfhP6p4=/https%3A%2F%2Fcommunityfile-dre.op.hicloud.com%2FFileServer%2FgetFile%2Fcmtybbs%2F023%2F106%2F255%2F0890090000023106255.20200505070556.85897492701614107984898055084156%3A50510518132808%3A2800%3A070C3B6BE10CF1EDCA98A811EF9906D71688BD94743863C05D30538CFA5570B0.png

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.

https://img.xda-cdn.com/eRUJexb_nG1OrLfKHtGtNvFmZ3o=/https%3A%2F%2Fcommunityfile-dre.op.hicloud.com%2FFileServer%2FgetFile%2Fcmtybbs%2F023%2F106%2F255%2F0890090000023106255.20200505070556.23630938627255556157527858935999%3A50510518132808%3A2800%3A09B13716D9E0E9D17D6E4717172D8CBB7FDA475EF47C29020C545DBAB55CC0C4.png

-After click this button open under page and fill related area.

https://img.xda-cdn.com/jAkY5ZHKm2n_M2MeJM5SujIFop8=/https%3A%2F%2Fcommunityfile-dre.op.hicloud.com%2FFileServer%2FgetFile%2Fcmtybbs%2F023%2F106%2F255%2F0890090000023106255.20200505070556.94270690937845796638068346766326%3A50510518132808%3A2800%3A51778C66672AD411BE47EAF2E95800125300AC3369D7544F738992A9C603FCA4.png

Finally Download RPK file from download link.

https://img.xda-cdn.com/Q1BjB_KXoztLkRepsfoPvStn7nI=/https%3A%2F%2Fcommunityfile-dre.op.hicloud.com%2FFileServer%2FgetFile%2Fcmtybbs%2F023%2F106%2F255%2F0890090000023106255.20200505070556.24247769314834526507801840223447%3A50510518132808%3A2800%3A6C0F1E1C999FD4D5607B335E936840B7578C7489E851445F42F903D8284B8606.png

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.
https://img.xda-cdn.com/AOhRXUHyH27qghVAInlkutjGkzs=/https%3A%2F%2Fcommunityfile-dre.op.hicloud.com%2FFileServer%2FgetFile%2Fcmtybbs%2F023%2F106%2F255%2F0890090000023106255.20200505071814.17131317994642575139967874279634%3A50510518132808%3A2800%3AE1861490AA404184064595FB7AB0A6DADF6251756B5FFAFEC11F491CF3CB8EFD.gif
The Following User Says Thank You to Freemind R For This Useful Post: [ View ] Gift Freemind R Ad-Free
20th May 2020, 03:06 PM |#2  
Junior Member
Thanks Meter: 2
 
More
Now that's really usefull. Thank you!
Post Reply Subscribe to Thread

Tags
huawei quick app

Guest Quick Reply (no urls or BBcode)
Message:
Previous Thread Next Thread
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes