草庐IT

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

华为开发者论坛 2023-03-28 原文

简介

在上一篇​​场景开发实战​​中,我们使用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方法为存放上传文件的云端地址创建引用:


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

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

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

云函数处理图片尺寸

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

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


const storage = new StorageManagement();
const bucket = storage.bucket("photo-7iawi");
const remoteFile = bucket.file(fileAddr);
localAddr = “\ImageProcess\picture”;
2、调用方法下载文件:

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、下载文件完成后进行处理图片分辨率的操作。

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


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

云存储触发云函数

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

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

App Linking链接分享

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

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

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


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、将下载链接和对应的图片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、在AndroidManifest中配置Intent-Filter,用于接收App Linking链接并且直接拉起应用。

<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、在应用启动页的OnCreate方法中, 接收并且处理App 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
});

测试功能

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

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

参考文档:

使用云存储上传图片:

​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​




有关AppGallery Connect场景化开发实战—图片存储分享的更多相关文章

  1. ruby - 解析 RDFa、微数据等的最佳方式是什么,使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作,但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式,例如使用这个yaml文件,它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  2. ruby - 使用 C 扩展开发 ruby​​gem 时,如何使用 Rspec 在本地进行测试? - 2

    我正在编写一个包含C扩展的gem。通常当我写一个gem时,我会遵循TDD的过程,我会写一个失败的规范,然后处理代码直到它通过,等等......在“ext/mygem/mygem.c”中我的C扩展和在gemspec的“扩展”中配置的有效extconf.rb,如何运行我的规范并仍然加载我的C扩展?当我更改C代码时,我需要采取哪些步骤来重新编译代码?这可能是个愚蠢的问题,但是从我的gem的开发源代码树中输入“bundleinstall”不会构建任何native扩展。当我手动运行rubyext/mygem/extconf.rb时,我确实得到了一个Makefile(在整个项目的根目录中),然后当

  3. Ruby Sinatra 配置用于生产和开发 - 2

    我已经在Sinatra上创建了应用程序,它代表了一个简单的API。我想在生产和开发上进行部署。我想在部署时选择,是开发还是生产,一些方法的逻辑应该改变,这取决于部署类型。是否有任何想法,如何完成以及解决此问题的一些示例。例子:我有代码get'/api/test'doreturn"Itisdev"end但是在部署到生产环境之后我想在运行/api/test之后看到ItisPROD如何实现? 最佳答案 根据SinatraDocumentation:EnvironmentscanbesetthroughtheRACK_ENVenvironm

  4. ruby - 是否可以覆盖 gemfile 进行本地开发? - 2

    我们的git存储库中目前有一个Gemfile。但是,有一个gem我只在我的环境中本地使用(我的团队不使用它)。为了使用它,我必须将它添加到我们的Gemfile中,但每次我checkout到我们的master/dev主分支时,由于与跟踪的gemfile冲突,我必须删除它。我想要的是类似Gemfile.local的东西,它将继承从Gemfile导入的gems,但也允许在那里导入新的gems以供使用只有我的机器。此文件将在.gitignore中被忽略。这可能吗? 最佳答案 设置BUNDLE_GEMFILE环境变量:BUNDLE_GEMFI

  5. ruby-on-rails - Ruby on Rails - 为文本区域和图片生成列 - 2

    我是Rails的新手,所以请原谅简单的问题。我正在为一家公司创建一个网站。那家公司想在网站上展示它的客户。我想让客户自己管理这个。我正在为“客户”生成一个表格,我想要的三列是:公司名称、公司描述和Logo。对于名称,我使用的是name:string但不确定如何在脚本/生成脚手架终端命令中最好地创建描述列(因为我打算将其设置为文本区域)和图片。我怀疑描述(我想成为一个文本区域)应该仍然是描述:字符串,然后以实际形式进行调整。不确定如何处理图片字段。那么……说来话长:我在脚手架命令中输入什么来生成描述和图片列? 最佳答案 对于“文本”数

  6. ruby - 在 Windows 机器上使用 Ruby 进行开发是否会适得其反? - 2

    这似乎非常适得其反,因为太多的gem会在window上破裂。我一直在处理很多mysql和ruby​​-mysqlgem问题(gem本身发生段错误,一个名为UnixSocket的类显然在Windows机器上不能正常工作,等等)。我只是在浪费时间吗?我应该转向不同的脚本语言吗? 最佳答案 我在Windows上使用Ruby的经验很少,但是当我开始使用Ruby时,我是在Windows上,我的总体印象是它不是Windows原生系统。因此,在主要使用Windows多年之后,开始使用Ruby促使我切换回原来的系统Unix,这次是Linux。Rub

  7. ruby-on-rails - 在 Rails 开发环境中为 .ogv 文件设置 Mime 类型 - 2

    我正在玩HTML5视频并且在ERB中有以下片段:mp4视频从在我的开发环境中运行的服务器很好地流式传输到chrome。然而firefox显示带有海报图像的视频播放器,但带有一个大X。问题似乎是mongrel不确定ogv扩展的mime类型,并且只返回text/plain,如curl所示:$curl-Ihttp://0.0.0.0:3000/pr6.ogvHTTP/1.1200OKConnection:closeDate:Mon,19Apr201012:33:50GMTLast-Modified:Sun,18Apr201012:46:07GMTContent-Type:text/plain

  8. 世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2

    无论您是想搭建桌面端、WEB端或者移动端APP应用,HOOPSPlatform组件都可以为您提供弹性的3D集成架构,同时,由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台(桌面/WEB/APP,而且某些客户端是“瘦”客户端)快速、方便地将数据接入到3D应用系统的解决方案,并且当访问数据时,在各个平台上的性能和用户体验保持一致,HOOPSPlatform将帮助您完成。利用HOOPSPlatform,您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品,HOOPSSDK包含的技术有:快速且准确的CAD

  9. ruby - Rack:如何将 URL 存储为变量? - 2

    我正在编写一个简单的静态Rack应用程序。查看下面的config.ru代码:useRack::Static,:urls=>["/elements","/img","/pages","/users","/css","/js"],:root=>"archive"map'/'dorunProc.new{|env|[200,{'Content-Type'=>'text/html','Cache-Control'=>'public,max-age=6400'},File.open('archive/splash.html',File::RDONLY)]}endmap'/pages/search.

  10. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中,有时候我们需要获取系统的设备信息,用于数据上报和行为分析。那在鸿蒙系统中,我们应该怎么去获取设备的系统信息呢,比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况,一种是设备信息的获取,一种是系统信息的获取。1.1、获取设备信息获取设备信息,鸿蒙的SDK包为我们提供了DeviceInfo类,通过该类的一些静态方法,可以获取设备信息,DeviceInfo类的包路径为:ohos.system.DeviceInfo.具体的方法如下:ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

随机推荐