Appgallery connect scenario development practice - image storage and sharing

brief introduction

In the last article Scene development practice in , We use AppGallery Connect（ hereinafter referred to as AGC） Certification service of 、 Cloud functions 、 Short message service and other services realize the function of user registration notification . This time , We use AGC Cloud functions provided 、 Cloud storage and App Linking The three services realize the storage of pictures 、 Online editing and sharing , The relevant code has been synchronized to Github.

Implementation Overview

1. The user selects the picture to be uploaded on the client , Call cloud storage Android/iOS The upload interface uploads pictures to cloud storage .
2. Create a cloud function that handles images , Select cloud storage trigger , Whenever a new picture is uploaded in the cloud storage, the cloud function will be triggered for thumbnail processing .
3. Calling cloud storage in cloud function Node.js SDK Download file interface to download pictures to memory , Process pictures in a specific way , And then call cloud storage. Node.js SDK The upload interface in uploads the processed pictures back to cloud storage .
4. End side cloud storage Android/iOS SDK After downloading the thumbnail on cloud storage , adopt AppLinking Generate sharing links to share with friends , After friends click the link, they can directly open to the specified page of the application .

Upload pictures from the end side to cloud storage

Please log in AppGallery Connect Official website , And operate in the console ：

1. Enable Cloud storage services
2. Create a new storage instance
3. Set cloud storage security policy
4. Set cloud storage folder structure

Actions in your app ：

1、 Using cloud storage Android SDK Medium getStorageReference Method to create a reference for the cloud address where the uploaded file is stored ：

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

2、 call SDK The upload interface in uploads local files to the storage instance ：

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 storage triggers cloud functions

stay AppGallery Connect Operations in the console ：

1. Sign in AppGallery Connect, Locate the cloud function and enable it .
2. Create a new function and set the function name , Deployment information and other related settings .
3. stay “ Code file ” Configuration item , Upload the function deployment package for processing the image size to the cloud function .
4. Create cloud storage trigger , Enter the name of the previously created storage instance and select the event name as Complete（ After uploading the picture successfully, it starts to trigger the cloud function to cut the picture ）.

Cloud function processing picture size

Actions in your app ：

1、 Call cloud storage Node.js SDK 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”;

2、 Call the method to download the 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);    }

3、 After downloading the file, process the image resolution .

4、 After the image processing is completed, upload 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);        });

App Linking Link sharing

Please log in AppGallery Connect Official website , And operate in the console ：

1. Enable App Linking service .
2. After the service is enabled , On the link prefix tab , Create a unique link prefix in the whole network .
3. Configure your application signature SHA256 file , Please refer to Configure signature fingerprint Certificate .

Actions in your app ：

1、 Use the cloud storage interface to obtain the download link of the corresponding 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) {            }        });    }

2、 The link and the corresponding picture will be downloaded ID Generate shared Links .

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、 stay AndroidManifest Middle configuration Intent-Filter, Used to receive App Linking Link and directly pull up the application .

<activity android:name=".MainActivity">	<intent-filter>		<action android:name="android.intent.action.MAIN" />		<category android:name="android.intent.category.LAUNCHER" />	</intent-filter>	<intent-filter android:autoVerify="true">		<action android:name="android.intent.action.VIEW"/>		<category android:name="android.intent.category.DEFAULT"/>		<category android:name="android.intent.category.BROWSABLE"/>		<data android:host=" DomainUriPrefix.drcn.agconnect.link" android:scheme="http"/>		<data android:host=" DomainUriPrefix.drcn.agconnect.link" android:scheme="https"/>	</intent-filter></activity>

4、 On the application launch page OnCreate In the method , Receive and process App Linking The method of linking .

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 });

Testing capabilities

You can do the following to test whether pictures or videos can be shared normally ：

1. Open your app , Take a random picture and store it in your phone .
2. View the processing effect after image upload .
3. Enter the picture details interface , Click the share link in the upper right corner , See if a link is generated and sent to friends .
4. Log in to the app with a friend account , Check and click the link , Test whether the shared picture page can be opened normally .

More reference , please download Demo.

For more details , Please see the ：
Huawei official website ：
https://developer.huawei.com/consumer/cn/forum/topic/0203726140997690403?fid=0101271690375130218?ha_source=zzh

Reference documents ：

Upload pictures using cloud storage ：

https://developer.huawei.com/consumer/cn/doc/development/AppGallery-connect-Guides/agc-cloudstorage-upload-android-0000001055326211

Use Applinking Share links ：

https://developer.huawei.com/consumer/cn/doc/development/AppGallery-connect-Guides/agc-applinking-createlinks-bysdk-android-0000001055674692

Create cloud functions ：

https://developer.huawei.com/consumer/cn/doc/development/AppGallery-connect-Guides/agc-cloudfunction-config-0000001058511532