• AppGallery Connect场景化开发实战—图片存储分享


    简介

    在上一篇场景开发实战中,我们使用AppGallery Connect(以下简称AGC)的认证服务、云函数、短信服务等服务实现了用户注册通知的功能。 本次,我们使用AGC提供的云函数、云存储和App Linking三大服务实现了图片的存储、在线剪辑和分享功能,相关代码已同步至Github

    实现概览

    1. 用户在客户端选择需要上传的图片,调用云存储Android/iOS的上传接口将图片上传至云存储。
    2. 创建处理图片的云函数,选择云存储触发器,每当云存储有新的图片上传都会触发云函数进行缩略图处理。
    3. 云函数中调用云存储Node.js SDK的下载文件接口将图片下载至内存,通过特定方法处理图片,而后调用云存储Node.js SDK中的上传接口将处理完的图片上传回云存储。
    4. 端侧通过云存储Android/iOS SDK下载云存储上的缩略图后,通过AppLinking生成分享链接分享给好友,好友点击链接后即可直接打开到应用的指定页面。

    端侧上传图片至云存储

    请登录AppGallery Connect官方网站,并在控制台中进行操作:

    1. 启用云存储服务
    2. 创建新的存储实例
    3. 设置云存储安全策略
    4. 设置云存储文件夹结构

    在您的应用中进行的操作:

    1、使用云存储Android SDK中的getStorageReference方法为存放上传文件的云端地址创建引用:

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

    2、调用SDK中的上传接口将本地的文件上传至存储实例中:

    1. UploadTask task = reference.putFile(new File("path/images/test.jpg"));
    2. task.addOnFailureListener(new OnFailureListener(){
    3. @Override
    4. public void onFailure(@NonNull Exception exception) {
    5. }
    6. }).addOnSuccessListener(new OnSuccessListener<UploadTask.UploadResult>(){
    7. @Override
    8. public void onSuccess(UploadTask.UploadResult uploadResult) {
    9. }
    10. });

    云存储触发云函数

    AppGallery Connect控制台中进行的操作:

    1. 登录AppGallery Connect,找到云函数并启用。
    2. 新建函数并设置函数名称,部署信息等相关设置。
    3. 在“代码文件”配置项处,上传处理图片尺寸的函数部署包至云函数。
    4. 创建云存储触发器,输入之前创建的存储实例名称并选择事件名称为Complete(意为上传图片成功后开始触发云函数剪裁图片)。

    云函数处理图片尺寸

    在您的应用中进行的操作:

    1、调用云存储Node.js SDK指定需要下载的实例与存储桶并指定本地地址:

    1. const storage = new StorageManagement();
    2. const bucket = storage.bucket("photo-7iawi");
    3. const remoteFile = bucket.file(fileAddr);
    4. localAddr = “\ImageProcess\picture”;

    2、调用方法下载文件:

    1. try {
    2. remoteFile.createReadStream()
    3. .on('error', err => {
    4. result = {"message":"download file error, " + err.message};
    5. callback(result);
    6. })
    7. .on('end', () => {
    8. result = {"message":"download file success"};
    9. // callback(result);
    10. })
    11. .pipe(fs.createWriteStream(localFile));
    12. } catch (error) {
    13. result = {"message":"download file error, " + error.message};
    14. callback(result);
    15. }

    3、下载文件完成后进行处理图片分辨率的操作。

    4、图片处理完成后将新的图片上传回云存储。

    1. const options = {
    2. destination: 'thumbnail/' + fileName,
    3. onUploadProgress: (event) => {
    4. }
    5. };
    6. bucket.upload(imageAddr, options)
    7. .then(res => {
    8. result = {"message":"All Success"};
    9. callback(result);
    10. }).catch(err => {
    11. result = {"message":"upload failed"};
    12. callback(result);
    13. });

    App Linking链接分享

    请登录AppGallery Connect官方网站,并在控制台中进行操作:

    1. 启用App Linking服务
    2. 启用服务以后,在链接前缀页签,创建一个全网唯一的链接前缀。
    3. 配置您应用签名的SHA256文件,具体的配置方法可参考 配置签名指纹证书

    在您的应用中进行的操作:

    1、使用云存储接口获取对应图片的下载链接。

    1. private String downloadUrl;
    2. private void getDownLoadUrl() {
    3. AGCStorageManagement storageManagement = AGCStorageManagement.getInstance();
    4. StorageReference reference = storageManagement.getStorageReference("images/demo.jpg");
    5. Task<Uri> task = reference.getDownloadUrl();
    6. task.addOnSuccessListener(new OnSuccessListener<Uri>() {
    7. @Override
    8. public void onSuccess(Uri uri) {
    9. String downloadUrl = uri.toString();
    10. }
    11. });
    12. task.addOnFailureListener(new OnFailureListener() {
    13. @Override
    14. public void onFailure(Exception e) {
    15. }
    16. });
    17. }

    2、将下载链接和对应的图片ID生成分享链接。

    1. private String shortLink;
    2. private static final String DOMAIN_URI_PREFIX = "https:// DomainUriPrefix.drcn.agconnect.link";
    3. private static final String SHARE_DEEP_LINK = "share://photo.share.com";
    4. private void createShareLinking(String UserName, String PhotoID, String ImageUrl) {
    5. String newDeep_Link = SHARE_DEEP_LINK + "?PhotoID=" + PhotoID;
    6. AppLinking.Builder builder = AppLinking.newBuilder()
    7. .setUriPrefix(DOMAIN_URI_PREFIX)
    8. .setDeepLink(Uri.parse(ImageUrl))
    9. .setAndroidLinkInfo(AppLinking.AndroidLinkInfo.newBuilder()
    10. .setAndroidDeepLink(newDeep_Link)
    11. .build())
    12. .setSocialCardInfo(AppLinking.SocialCardInfo.newBuilder()
    13. .setTitle("It is a beautiful Photo")
    14. .setImageUrl(ImageUrl)
    15. .setDescription(UserName + " share a Photo to you")
    16. .build())
    17. .setCampaignInfo(AppLinking.CampaignInfo.newBuilder()
    18. .setName("UserSharePhoto")
    19. .setSource("ShareInApp")
    20. .setMedium("MediumExample")
    21. .build());
    22. builder.buildShortAppLinking().addOnSuccessListener(shortAppLinking -> {
    23. shortLink = shortAppLinking.getShortUrl().toString();
    24. }).addOnFailureListener(e -> {
    25. });
    26. }

    3、在AndroidManifest中配置Intent-Filter,用于接收App Linking链接并且直接拉起应用。

    1. <activity android:name=".MainActivity">
    2. <intent-filter>
    3. <action android:name="android.intent.action.MAIN" />
    4. <category android:name="android.intent.category.LAUNCHER" />
    5. </intent-filter>
    6. <intent-filter android:autoVerify="true">
    7. <action android:name="android.intent.action.VIEW"/>
    8. <category android:name="android.intent.category.DEFAULT"/>
    9. <category android:name="android.intent.category.BROWSABLE"/>
    10. <data android:host=" DomainUriPrefix.drcn.agconnect.link" android:scheme="http"/>
    11. <data android:host=" DomainUriPrefix.drcn.agconnect.link" android:scheme="https"/>
    12. </intent-filter>
    13. </activity>

    4、在应用启动页的OnCreate方法中, 接收并且处理App Linking链接的方法。

    1. AGConnectAppLinking.getInstance().getAppLinking(LoginActivity.this).addOnSuccessListener(resolvedLinkData -> {
    2. Log.i(TAG,"StartUp From AppLinking");
    3. if (resolvedLinkData!= null) {
    4. String deepLink = resolvedLinkData.getDeepLink().toString();
    5. // your action of StartUp From AppLinking
    6. }
    7. }).addOnFailureListener(e-> {
    8. Log.i(TAG,"Normal StartUp");
    9. // your action of Normal StartUp
    10. });

    测试功能

    您可以执行以下操作来测试图片或视频是否可以正常分享:

    1. 打开您的应用,随机拍摄一张图片存储于手机中。
    2. 查看图片上传后的处理效果。
    3. 进入图片详情界面,点击右上角的分享链接,查看是否生成链接并发送给好友。
    4. 使用好友帐号登录应用,查收并点击链接,测试是否可正常打开分享的图片页面。

    更多参考,请下载Demo

    欲了解更多详情,请参见:
    华为官网:
    https://developer.huawei.com/consumer/cn/forum/topic/0203726140997690403?fid=0101271690375130218?ha_source=zzh

    参考文档:

    使用云存储上传图片:

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

    使用Applinking分享链接:

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

    创建云函数:

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

  • 相关阅读:
    TCP/IP网络江湖——数据链路层的协议与传承(数据链路层中篇:数据链路层的协议与帧)
    3. 使用PyTorch深度学习库训练第一个卷积神经网络CNN
    Redis:StringRedisTemplate简介
    Nacos使用JavaSDK,Nacos 动态监听配置,Nacos动态发布配置,Nacos动态获取实例
    在Vue中如何渲染使用Vue写法的HTML文件?
    代码随想录训练营二刷第四十四天 | 01背包问题 416. 分割等和子集
    如何将自己做好的服务进行容器化部署
    C++—— pass by value and use std::move
    ubuntu安装ch34x驱动,并安装串口调试助手
    Codeforces Round #813 (Div. 2) A. Wonderful Permutation
  • 原文地址:https://blog.csdn.net/weixin_44708240/article/details/125552090