Tips for Developing the Image Storage and Sharing Functions for Your App
Introduction
Hi everyone,
In this post, I will show you a hands-on example of how to store and edit images online, as well as share images using Cloud Functions, Cloud Storage, and App Linking provided by AppGallery Connect.
Implementation Overview
- If a user uploads an image in your app, your app needs to call the upload API of the Cloud Storage SDK (for Android or iOS) to implement it.
- Create a function for processing the image, and select a CLOUDSTORAGE trigger for the function. In this case, once a new image is uploaded to Cloud Storage, the function will be triggered to process the image, for example, change it to a thumbnail image.
- The function calls the download API of the Node.js SDK of Cloud Storage to download the image to the device memory, processes the image as required, and then calls the upload API of the Node.js SDK of Cloud Storage to upload the processed image back to Cloud Storage.
- Your app then downloads the thumbnail image from Cloud Storage using the Cloud Storage SDK for Android/iOS. With App Linking, the user can generate an image link and share it with friends, who will be redirected to the deep linked-app content once the link is tapped.
Uploading an Image to Cloud Storage
Sign in to AppGallery Connect, and do as follows:
- Enable Cloud Storage.
- Create a storage instance.
- Set security rules for Cloud Storage.
- Create a folder in Cloud Storage.
Perform the following operations if your app is an Android app:
- Call getStorageReference to create a reference to the on-cloud path for storing files.
- Call the upload API to upload an image to the storage instance.
Resizing the Image Using a Cloud Function
To do so, you need to perform the following procedure:
- Call the Node.js SDK of Cloud Storage to specify the instance and bucket to be downloaded, and a local IP address.
- Call the following method to download the image:
- Resize the image.
- Upload the processed image back to Cloud Storage.
Creating and Triggering a Function
You can complete the following steps in AppGallery Connect:
- Enable Cloud Functions.
- On the Cloud Functions page, create a function and configure its information, including the name and deployment settings.
- In the Code File area, upload the function deployment package for resizing the image.
- Create a CLOUDSTORAGE trigger, enter the created instance name, and set Event name to Completed. In this way, the function will be triggered to resize the uploaded image.
Sharing a Link of App Linking
Sign in to AppGallery Connect and do the following:
- Enable App Linking. (Please find reference in the platform)
- On the App Linking page, click the URL prefixes tab and create a globally unique URL prefix.
- Configure your SHA-256 certificate fingerprint. (Please find reference in the platform)
You need to perform the following operations in your app:
- Call the API of Cloud Storage to obtain the download URL of the image.
- Generate a sharing link that includes the download URL and ID of the image.
- Configure an intent filter in AndroidManifest, which is used to receive the link of App Linking and launch your app once the link is tapped.
- In the OnCreate method of your app’s startup page, implement the following to receive and process the link of App Linking.
Testing the Function
You can check whether the target image can be shared normally as follows:
- Open your app, take a photo, and save it to your device.
- View the resized image.
- Find the image in your app, go to the image details page, and tap the sharing icon in the upper right corner. Then check whether a link can be generated and sent to your friend.
- Sign in to your app with your friend’s account, receive and tap the shared link, and check whether you can access the image.
Summary
In this article, we have learnt how to store and edit images by Huawei AppGallery Connect cloud services. You can refer to the related function code on GitHub.
References
You can contact with me for your questions. See you next!
