Solution Practice - Building the Photo Editing App

Meitu APP example

Download address of the mobile Meitu sample APP:

After downloading and installing the APP, you can directly interact with BOS via the application server address to perform image processing. The application server address corresponds to the backend server used for mobile applications, with port 8080 enabled by default. You need to configure BOS regions and bucket settings on the application server.

APP operation methods

The APP provides three core functions: uploading, downloading, and downloading scaled images.

• Upload: After entering the application server address, users can select the local image they wish to upload. The image will appear at the bottom of the operation API screen; click on Upload. Upon a successful upload, “File Uploaded” will be displayed.
• Download: Users can enter the name of the file they wish to download and click the download button. Upon a successful download, “File Downloaded” will be displayed.
• Download Scaled Image: To download a scaled image, specify a clear file suffix (https://bce.bdstatic.com/p3m/bce-doc-en/images/BOS/BOS/Typical Practices/Mobile Photo Editing App Practice/e.g-1762161336961., jpg), set the desired width, height, and rotation angle, then click Download Scaled Image. Once processed, the image can be downloaded successfully, and “File Downloaded” will appear. Images downloaded in the Demo version will not be stored locally.

How to build the Meitu APP

Building the Meitu APP includes the following steps:

1. Enable the BOS service and create a bucket for storing images. For detailed operations on enabling and creating a bucket, please refer to [Create Bucket](BOS/Console Operation Guide/Managing Bucket/Create bucket.md). If you want to download scaled images, ensure that the specified bucket has the image processing service enabled.
2. Enable the STS service to ensure the secure upload and download of images.
3. Deploy the application server to realize interaction with BOS and the client. For the Meitu APP code, please refer to: BOS Meitu APP Code.
4. Download and install the Meitu APP.

How to deploy the application server

1. Download the code package of sample code from github. The code package mainly includes two parts: “bos_meitu_app” and “bos_meitu_app_server”. Among them, “bos_meitu_app” is mainly used to define the APP interface and related actions, and “bos_meitu_app_server” is the relevant configuration of the application server.

2. Modify the “MeituAppServerHandler.java” file in the “bos_meitu_app_server” directory, which includes settings such as the ak/sk credentials, the endpoint corresponding to the BOS server, and the bucket name.

   Plain Text Copy

   1     public String getBosInfo(String bosRequestType) {
   2 // Configure ak and sk
   3 String bosAk = "Developer’s ak";
   4 String bosSk = "Developer’s SK";
   5 // The stsendpoint provided by Baidu AI Cloud
   6          String stsEndpoint = "http://sts.bj.baidubce.com";
   7          BceCredentials credentials = new DefaultBceCredentials(bosAk, bosSk);
   8          BceClientConfiguration clientConfig = new BceClientConfiguration();
   9          clientConfig.setCredentials(credentials);
   10          clientConfig.setEndpoint(stsEndpoint);
   11          StsClient stsClient = new StsClient(clientConfig);
   12          GetSessionTokenRequest stsReq = new GetSessionTokenRequest();
   13          // request expiration time
   14          stsReq.setDurationSeconds(1800);
   15          GetSessionTokenResponse stsToken = stsClient.getSessionToken(stsReq);
   16          String stsTokenAk = stsToken.getCredentials().getAccessKeyId();
   17          String stsTokenSk = stsToken.getCredentials().getSecretAccessKey();
   18          String stsTokenSessionToken = stsToken.getCredentials().getSessionToken();
   19 // The endpoint address of the BOS service and the bucket name.
   20          String bosEndpoint = "http://bj.bcebos.com";
   21 String bucketName = "Bucket name";
   22          if (bosRequestType.equalsIgnoreCase("download-processed")) {
   23              // the binded image processing domain set by App developer on bce console
   24              bosEndpoint = "http://" + bucketName + ".bj.bcebos.com";
   25          }
   26          // prefix is the bucket name, and does not specify the object name
   27          BosInfo bosInfo = new BosInfo(stsTokenAk, stsTokenSk, stsTokenSessionToken, bosEndpoint,
   28                  bucketName, "", bucketName);
   29          String res = "";
   30          ObjectMapper mapper = new ObjectMapper();
   31          try {
   32              res = mapper.writerWithDefaultPrettyPrinter().writeValueAsString(bosInfo);
   33          } catch (JsonProcessingException e) {
   34              // TODO Auto-generated catch block
   35              e.printStackTrace();
   36              res = "";
   37          }
   38          System.out.println(res);
   39          try {
   40              res = new String(res.getBytes(), "utf8");
   41          } catch (UnsupportedEncodingException e) {
   42              // TODO Auto-generated catch block
   43              e.printStackTrace();
   44              res = "";
   45          }
   46          return res;
   47      }

3. Recompile and package the modified server code into bos_meitu_app_server.jar, upload the jar package to the application server, and execute the command java -jar bos_meitu_app_server.jar.