Introduction to the

In the last scene development practice, we use AppGallery Connect (hereinafter referred to as AGC) authentication service, cloud function, SMS service and other services to realize the function of user registration notification. This time, we use the cloud function, cloud storage and App Linking services provided by AGC to realize the image storage, online editing and sharing functions, and relevant codes have been synchronized to Github.

To realize the overview

1. The user selects the image to be uploaded on the client and invokes the Android/iOS uploading interface of the cloud storage system to upload the image to the cloud storage system.

2. Create a cloud function to process images. Select the cloud storage trigger.

3. Call the file download interface of the Node.js SDK of the cloud storage in the cloud function to download the image to the memory, process the image through specific methods, and then call the upload interface of the Node.js SDK of the cloud storage to send the processed image back to the cloud storage.

4. After downloading the thumbnail image from the cloud storage through the Android/iOS SDK, AppLinking generates a share link and shares it with your friends. After clicking the link, your friends can directly open the specified page of the application.

Upload an image to the cloud storage system

Please log in AppGallery Connect official website and perform operations in the console:

1. Enable the cloud storage service

2. Create a storage instance

3. Configure the cloud storage security policy

4. Set the cloud storage folder structure

Actions in your application:

1. Use the getStorageReference method in the Cloud storage Android SDK to create a reference to the cloud address where the uploaded file is stored:

AGCStorageManagement storageManagement = AGCStorageManagement.getInstance();
StorageReference reference = storageManagement.getStorageReference("images/demo.jpg");
Copy the code

··· UploadTask task = reference.putfile (new File(“path/images/test.jpg”)); task.addOnFailureListener(new OnFailureListener(){ @Override public void onFailure(@NonNull Exception exception) { } }).addOnSuccessListener(new OnSuccessListener<UploadTask.UploadResult>(){ @Override public void onSuccess(UploadTask.UploadResult uploadResult) { } }); …

Cloud functions handle image dimensions

Actions in your application:

1. Call the cloud storage node. js SDK to specify the instance and bucket to be downloaded and specify the local address:

const storage = new StorageManagement(); const bucket = storage.bucket("photo-7iawi"); const remoteFile = bucket.file(fileAddr); LocalAddr = "\ ImageProcess \ picture";Copy the code

2. Call method to download file:

try {
        remoteFile.createReadStream()
        .on('error', err => {
          result = {"message":"download file error, " + err.message};
          callback(result);
        })
        .on('end', () => {
            result = {"message":"download file success"};
            // callback(result);
        })
        .pipe(fs.createWriteStream(localFile));
    } catch (error) {
        result = {"message":"download file error, " + error.message};
        callback(result);
    }
Copy the code

3. Handle the image resolution after downloading the file.

4. After the image processing is completed, send the new image back to cloud storage.

const options = {
        destination: 'thumbnail/' + fileName,
        onUploadProgress: (event) => {
        }
    };

    bucket.upload(imageAddr, options)
        .then(res => {
            result = {"message":"All Success"};
            callback(result);
        }).catch(err => {
            result = {"message":"upload failed"};
            callback(result);
        });
Copy the code

The cloud storage system triggers the cloud function

Actions in the AppGallery Connect console:

1. Log in AppGallery Connect, find the cloud function and enable it.

2. Create a function and set the function name, deployment information and other related Settings.

3. In the “Code File” configuration, upload the function deployment package that handles image size to the cloud function.

4. Create a cloud storage trigger, enter the name of the previously created storage instance and select Complete as the event name.

Sharing by App Linking

Please log in AppGallery Connect official website and perform operations in the console:

1. Enable App Linking service.

2. After the service is enabled, create a unique link prefix on the link Prefix TAB page.

3. Configure the SHA256 file to which you want to apply the signature. For details, see Configuring the Signature Fingerprint Certificate.

Actions in your application:

1. Use the cloud storage port to obtain the download link of the image.

private String downloadUrl;
private void getDownLoadUrl() {
    AGCStorageManagement storageManagement = AGCStorageManagement.getInstance();
        StorageReference reference = storageManagement.getStorageReference("images/demo.jpg");
        Task<Uri> task = reference.getDownloadUrl();
        task.addOnSuccessListener(new OnSuccessListener<Uri>() {
            @Override
            public void onSuccess(Uri uri) { 
                String downloadUrl = uri.toString();
            }
        });
        task.addOnFailureListener(new OnFailureListener() {
            @Override
            public void onFailure(Exception e) {
            }
        });
    }
Copy the code

2. Generate the sharing link with the download link and the corresponding picture ID.

private String shortLink; private static final String DOMAIN_URI_PREFIX = "https:// DomainUriPrefix.drcn.agconnect.link"; private static final String SHARE_DEEP_LINK = "share://photo.share.com"; private void createShareLinking(String UserName, String PhotoID, String ImageUrl) { String newDeep_Link = SHARE_DEEP_LINK + "? PhotoID=" + PhotoID; AppLinking.Builder builder = AppLinking.newBuilder() .setUriPrefix(DOMAIN_URI_PREFIX) .setDeepLink(Uri.parse(ImageUrl)) .setAndroidLinkInfo(AppLinking.AndroidLinkInfo.newBuilder() .setAndroidDeepLink(newDeep_Link) .build()) .setSocialCardInfo(AppLinking.SocialCardInfo.newBuilder() .setTitle("It is a beautiful Photo") .setImageUrl(ImageUrl) .setDescription(UserName + " share a Photo to you") .build()) .setCampaignInfo(AppLinking.CampaignInfo.newBuilder() .setName("UserSharePhoto") .setSource("ShareInApp") .setMedium("MediumExample") .build()); builder.buildShortAppLinking().addOnSuccessListener(shortAppLinking -> { shortLink = shortAppLinking.getShortUrl().toString(); }).addOnFailureListener(e -> { }); } "" 3. Configure intent-filter in AndroidManifest to receive App Linking link and directly pull the AppCopy the code

4. Receive and process the App Linking link method in the OnCreate method of the App launch page.

AGConnectAppLinking.getInstance().getAppLinking(LoginActivity.this).addOnSuccessListener(resolvedLinkData -> { Log.i(TAG,"StartUp From AppLinking"); if (resolvedLinkData! = null) { String deepLink = resolvedLinkData.getDeepLink().toString(); // your action of StartUp From AppLinking } }).addOnFailureListener(e-> { Log.i(TAG,"Normal StartUp"); // your action of Normal StartUp });Copy the code

Testing capabilities

You can perform the following operations to test whether an image or video can be shared properly:

1. Open your app, take a random picture and store it in your mobile phone.

2. Check the processing effect after uploading the picture.

3. Enter the picture details interface and click the share link in the upper right corner to check whether the link is generated and sent to your friends.

4. Log in to the application using your friend account, check and click the link to test whether the page of shared pictures can be opened normally.

For more information, please download Demo.

Reference Documents:

Uploading pictures using cloud storage:

Developer.huawei.com/consumer/cn…

Share links using Applinking:

Developer.huawei.com/consumer/cn…

Create a cloud function:

Developer.huawei.com/consumer/cn…

More wonderful content, please see the official BBS huawei developers – developer.huawei.com/consumer/cn…