1. Introduction
Overview
Quick apps are a new form of installation-free apps developed based on industry standards formulated by Quick App Alliance, which consists of mainstream mobile phone manufacturers in China. A quick app can be distributed to all mobile phones that support industry standards without adaptation.
Benefits for you:
- Lower cost: JavaScript and CSS are used for development, and quick apps have only 1⁄5 code of their Android native apps.
- Traffic blue ocean: Redirection across platforms becomes much easier in diverse scenarios, without the need to depend on a specific app.
- Business improvement: User acquisition, activation, and retention can be achieved with ease as quick apps provide instant access to services and content for users, offering much better user experience.
- Support and resources: A broad array of Huawei's promotional resources are available to promote apps.
Benefits for users: - Installation-free: Quick apps can be opened with a single tap and added as home screen icons for instant access.
- Space-saving: Quick apps require little storage space and consume less memory resources when running, ensuring smooth use experience.
- Easy-to-find entries: Quick apps can be accessed from the home screen, HUAWEI Assistant∙TODAY, Huawei Quick App Center, HUAWEI AppGallery, and more.
What You Will Create
In this codelab, you will create an image processing quick app by utilizing Huawei Quick App IDE and calling the image processing API. The quick app allows users to crop and share photos.
What You Will Learn
- Set up the development environment.
- Call the image processing API.
- Debug your app on a Huawei device.
2. What You Will Need
Hardware Requirements
- A computer (desktop or laptop) running Windows or Mac
- A Huawei phone, which is used to run and debug the developed app
Software Requirements
- Node 6.X or later (except for 8.0.X)
- Huawei Quick App IDE installation package
- Huawei Quick App Loader installation package
Required Knowledge
Android app development basics
3. Integration Preparations
Before developing a quick app, you must complete the following preparations:
- Register as a developer.
- Create a quick app.
- Install required development tools.
4. Creating a Project
- Open Huawei Quick App IDE. Go to New Project > Quick App, select Phone/Tablet, and then click Next.
- Click the Common tab, select Hello World, and click Next.
- Configure project information and click Ok.
- App Name: Set it to quickappcodelabdemo.
- Package Name: Set it to com.huawei.quickappdemo.
- WorkSpace: Select the hard disk path where the code is stored.
Now, you have successfully created a quick app project.
5. Preview Effect on a Test Device
- Use a USB cable to connect the test device to a computer where Huawei Quick App IDE is installed. Enable the Developer options on the test device.
- After the connection is successful, select the file to be compiled and debugged, and click Run.
- Select the device on the Selecting Running Device page and click Confirm.
- If your test device has not installed Huawei Quick App Loader, click Install in the dialog box displayed in the lower right corner. Otherwise, skip this step.
- View the compilation effect on the simulator.
6. Developing a Quick App Running on Mobile Phones
Editing the Template
- Open the hello.ux file under src/Hello/ and edit the template.
- Add one image component and three buttons to your template. Set the src and class attributes of the image component. Set the class, value, and onclick attributes of the buttons.
<template> <div class="container"> <image src="{{imgPath}}" class="img"></image> <div> <input type="button" class="btn" value="take photo" onclick="takePhoto" /> <input type="button" class="btn" value="edit photo" onclick="editPhoto" /> <input type="button" class="btn" value="share photo" onclick="sharePhoto"/> </div> </div> </template>
Editing the Style
Replace the information in the style element of the hello.ux file to implement the CSS style of images and buttons.
<style>
.container {
flex-direction: column;
justify-content: center;
align-items: center;
}
.img {
width: 90%;
height: 700px;
border: 1px solid #000000;
}
.btn {
height: 80px;
width: 200px;
margin: 20px;
background-color: #1e90ff;
color: #ffffff;
}
</style>
Editing the Script
Define all required service logic in the script element, to implement functions such as taking, saving, editing, and sharing photos.
<script>
import media from '@system.media';
import image from '@system.image';
import share from '@system.share';
module.exports = {
data: {
imgPath: ''
},
takePhoto() {
let that = this;
media.takePhoto({
success: function (data) {
console.log('handling success: ' + data.uri);
that.imgPath = data.uri;
},
fail: function (data, code) {
console.log('handling fail, code = ' + code + ", msg : " + data);
}
});
},
editPhoto() {
let that = this;
image.editImage({
uri: this.imgPath,
success: function (data) {
console.log(data.uri);
that.imgPath = data.uri;
},
fail: function (data, code) {
console.log('handling fail, code = ' + code + ", msg : " + data);
}
})
},
sharePhoto() {
share.share({
type: "image/jpeg",
data: this.imgPath,
success: function (data) {
console.log("handling success");
},
fail: function (data, code) {
console.log("handling fail, code = " + code + ", msg : " + data);
}
})
}
}
</script>
Editing the Manifest
Open the manifest.json file and declare the usage performance.
"features": [
{"name": "system.media"},
{"name": "system.image"},
{"name": "system.share"}
],
7. Running the App
- After your test device is connected to the PC, click Run.
- On the Inspector page, click take photo.
- Take a photo with your phone and load the photo into the photo frame.
- Click edit photo to edit the photo.
- Return to the photo page and click share photo to share the photo.
8. Debugging the App
- Select the file to be debugged. Click Debug to start debugging.
Check output logs.
After the debugging process has started, the system opens the debugging window.
Click Debug again to stop the debugging process. Log information records Debug service has been closed.
9. Packaging the Formal Version
- Go to Build > Run Release from the main menu to package the release version RPK.
- If there is no signature file, in the dialog box that is displayed in the lower right corner, click Create to create a signature file.
- On the Create Signature page for confirming the creation of a signature file, click Create.
- If a signature file is available, click Run Release. The Packaging Formal Versions page is displayed. You can edit the version name and version code. After the packaging is complete, the dist directory of the project automatically opens. The RPK package generated in this directory can be submitted to AppGallery Connect for review. Once the package is approved, the app will be available on AppGallery.
10. Congratulations
Well done. You have successfully completed this codelab and learned how to:
- Set up the development environment.
- Call the image processing API.
- Debug your app on a Huawei device.
11. Reference
For more information, please refer to the following documents: