Huawei Quick Apps: Introduction & H5 Conversion CLI - Huawei Developers

{
"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"
}
Hi Everyone!
Command-line interfaces (CLIs) built in Node.js allow you to automate repetitive tasks while leveraging the vast Node.js ecosystem. And thanks to package managers like npm and yarn, these can be easily distributed and consumed across multiple platforms.
In this post I will introduce Quick Apps and a Command-line interface that i developed and published to generate Quick Apps from H5 in a different way.
What is Quick Apps?
Quick apps are a new type of installation-free app and are supported by more than 12 major Chinese mobile phone manufacturers.
Strengths of Quick Apps
Low Cost: A quick app requires only 20% of the code of an Android app and can be developed within as little as 3 days.
Native Experience: Quick apps are installation-free and can update automatically. They can offer an excellent native experience.
High Retention: Installation-free quick apps can be added to the home screen and directly used with a single touch, which helps to attract and retain more users.
Easy Access: After being seamlessly integrated into HUAWEI Ability Gallery, quick apps can be easily accessed through HUAWEI Assistant, Global Search, and more.
How to develop your quick app?
Sign in to AppGallery Connect and create a quick app.
Apply for services that you are ready to integrate into the quick app.
Download and install Huawei Quick App IDE.
Develop your quick app according to relevant requirements.
Submit the RPK and wait for review.
Converting an H5 App into a 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. After a quick app generation and release in HUAWEI AppGallery, users can directly open the app and have the same experience as using the original HTML5 app.
Conversion can be handled in Huawei Quick App IDE or online.
To learn more about online conversion, check out this article.
To learn more about conversion by IDE, check out this article.
H5 to QuickApp CLI
Prerequisites: npx which comes with npm 5.2+ and higher.
To create a single QuickApp:
Code:
npm install -g @onurkenis/create-quick-app # install globally once
create-quick-app # run from anywhere
npx @onurkenis/create-quick-app # run via npx without installing
Batch application creation from JSON:
Code:
npm install -g @onurkenis/create-quick-app # install globally once
create-quick-app --fromJson=path_of_json # run from anywhere
npx @onurkenis/create-quick-app --fromJson=path_of_json # run via npx without installing
JSON format for Batch Creation:
Code:
{
"projects": [
{
"appName": "TestApp1",
"packageName": "com.onurkenis.one",
"url": "https://github.com/onurkenis/create-quick-app",
"icon": "C:/Pictures/optional_icon.jpg"
},
{
"appName": "TestApp2",
"packageName": "com.onurkenis.two",
"url": "https://github.com/onurkenis/create-quick-app"
},
{
"appName": "TestApp3",
"packageName": "com.onurkenis.three",
"url": "https://github.com/onurkenis/create-quick-app"
}
]
}
Options:
All options can be empty when running the create-quick-app. Missing fields will be asked respectively. Batch creation is only available in-line.
Code:
const args = {
'--appName': String, // name of your application
'--packageName': String, // package name of your application
'--url': String, // url to render in app
'--icon': String, // path of app icon. default icon will be used if this field is empty
'--fromJson': String, // Path of JSON file for batch creation
};
Code:
npx @onurkenis/create-quick-app
--appName="My App"
--packageName=com.onurkenis.myApp
--url=https://github.com/onurkenis/create-quick-app
--icon=./icon.png
RPK Generation:
To get rpk file, do followings and check
Code:
PROJECT_PATH/dist
folder.
Code:
cd PROJECT_PATH
npm install
npm run release
References
You can check out the source code and npm package from following links:
https://github.com/onurkenis/create-quick-app
https://www.npmjs.com/package/@onurkenis/create-quick-app
Quick Apps Official Page:
https://developer.huawei.com/consumer/en/huawei-quickApp
Scenarios:
https://developer.huawei.com/consumer/en/doc/development/quickApp-Guides/quickapp-scenario
Converting an H5 App into a Quick App:
https://developer.huawei.com/consumer/en/doc/development/quickApp-Guides/quickapp-h5-to-quickapp
Related Links
Thanks to Onur Kenis for this article.
Original post: https://medium.com/huawei-developers/h5-to-quickapp-cli-create-projects-with-one-line-28c94bf5bcae