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

Search This thread

Freemind R

Official Huawei Rep
Apr 14, 2020
383
77
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

0890090000023106255.20200505061557.85645038160168908352760811360040:50510518132808:2800:953788FDC02E6AAEA4615FCBFB47AB6BB31DA756BEA1CC6A353A390C2A203AF8.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.

0890090000023106255.20200505065730.60034206889063252280428792831809:50510518132808:2800:AF6F2E2F210DB4C65A89D2165787D38F6529613E4B769A5027E8081FBAB5EF15.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

0890090000023106255.20200505065739.74590167086192293794980208732174:50510518132808:2800:7C166F2607AFF6FC395A8087A5230FC3B872DD821773E5446769F004E50499FC.png

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

0890090000023106255.20200505070559.90795017588186224074245013343022:50510518132808:2800:3EA6CCD1D6F9418E4B443DC9AF16EE153D1868561B8515E3CABE45BAA7EC1C97.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.

0890090000023106255.20200505070556.85897492701614107984898055084156:50510518132808:2800:070C3B6BE10CF1EDCA98A811EF9906D71688BD94743863C05D30538CFA5570B0.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.

0890090000023106255.20200505070556.23630938627255556157527858935999:50510518132808:2800:09B13716D9E0E9D17D6E4717172D8CBB7FDA475EF47C29020C545DBAB55CC0C4.png


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

0890090000023106255.20200505070556.94270690937845796638068346766326:50510518132808:2800:51778C66672AD411BE47EAF2E95800125300AC3369D7544F738992A9C603FCA4.png

Finally Download RPK file from download link.

0890090000023106255.20200505070556.24247769314834526507801840223447:50510518132808:2800:6C0F1E1C999FD4D5607B335E936840B7578C7489E851445F42F903D8284B8606.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.
0890090000023106255.20200505071814.17131317994642575139967874279634:50510518132808:2800:E1861490AA404184064595FB7AB0A6DADF6251756B5FFAFEC11F491CF3CB8EFD.gif
 
Last edited:
  • Like
Reactions: SheevPalpatine

Top Liked Posts

  • There are no posts matching your filters.
  • 1
    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

    0890090000023106255.20200505061557.85645038160168908352760811360040:50510518132808:2800:953788FDC02E6AAEA4615FCBFB47AB6BB31DA756BEA1CC6A353A390C2A203AF8.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.

    0890090000023106255.20200505065730.60034206889063252280428792831809:50510518132808:2800:AF6F2E2F210DB4C65A89D2165787D38F6529613E4B769A5027E8081FBAB5EF15.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

    0890090000023106255.20200505065739.74590167086192293794980208732174:50510518132808:2800:7C166F2607AFF6FC395A8087A5230FC3B872DD821773E5446769F004E50499FC.png

    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

    0890090000023106255.20200505070559.90795017588186224074245013343022:50510518132808:2800:3EA6CCD1D6F9418E4B443DC9AF16EE153D1868561B8515E3CABE45BAA7EC1C97.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.

    0890090000023106255.20200505070556.85897492701614107984898055084156:50510518132808:2800:070C3B6BE10CF1EDCA98A811EF9906D71688BD94743863C05D30538CFA5570B0.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.

    0890090000023106255.20200505070556.23630938627255556157527858935999:50510518132808:2800:09B13716D9E0E9D17D6E4717172D8CBB7FDA475EF47C29020C545DBAB55CC0C4.png


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

    0890090000023106255.20200505070556.94270690937845796638068346766326:50510518132808:2800:51778C66672AD411BE47EAF2E95800125300AC3369D7544F738992A9C603FCA4.png

    Finally Download RPK file from download link.

    0890090000023106255.20200505070556.24247769314834526507801840223447:50510518132808:2800:6C0F1E1C999FD4D5607B335E936840B7578C7489E851445F42F903D8284B8606.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.
    0890090000023106255.20200505071814.17131317994642575139967874279634:50510518132808:2800:E1861490AA404184064595FB7AB0A6DADF6251756B5FFAFEC11F491CF3CB8EFD.gif