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:

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

Hardware Requirements

Software Requirements

Required Knowledge

Android app development basics

Before developing a quick app, you must complete the following preparations:

For details, please refer to Preparations for Quick Start.
  1. Open Huawei Quick App IDE. Go to New Project > Quick App, select Phone/Tablet, and then click Next.
  2. Click the Common tab, select Hello World, and click Next.
  3. Configure project information and click Ok.

Now, you have successfully created a quick app project.
  1. 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.
  2. After the connection is successful, select the file to be compiled and debugged, and click Run.
  3. Select the device on the Selecting Running Device page and click Confirm.
  4. 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.
  5. View the compilation effect on the simulator.

Editing the Template

  1. Open the hello.ux file under src/Hello/ and edit the template.
  2. 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"}
],
  1. After your test device is connected to the PC, click Run.
  2. On the Inspector page, click take photo.
  3. Take a photo with your phone and load the photo into the photo frame.
  4. Click edit photo to edit the photo.
  5. Return to the photo page and click share photo to share the photo.
  1. Select the file to be debugged. Click Debug to start debugging.

  2. Check output logs.

  3. After the debugging process has started, the system opens the debugging window.

  4. Click Debug again to stop the debugging process. Log information records Debug service has been closed.
  1. Go to Build > Run Release from the main menu to package the release version RPK.
  2. 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.
  3. On the Create Signature page for confirming the creation of a signature file, click Create.
  4. 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.

Well done. You have successfully completed this codelab and learned how to:

For more information, please refer to the following documents:

Quick App Guides

Quick App References

 Code copied