鸿蒙海报编辑器APP，分享端云一体化开发的经验！

mjp004

前言

在我工作的日常中，经常会用一些画图编辑器，简单设计一些页面原型。而在去年低代码很火的时候，我在公司就开发了一款大屏可视化编辑器，可以通过拖拉拽生成网页的一个工具。后面也想着自己也开发一个画图的编辑器，可以用来自己平时做图或者设计海报之类的。而这次我将使用鸿蒙 ArkTs 来开发这款海报编辑器 APP，顺便分享一下我这次的开发经验。
项目架构与开发流程

我这次项目功能架构以及整体开发流程如下：
项目功能结构

整体开发流程

这次开发我使用了鸿蒙的端云一体化的开发模式进行整个项目的构建。说实话：之前我都是自己写后端代码，开发流程确实比较繁琐。而云开发模式就很方便了，端侧与云侧同时开发，无需搭建服务器，工具成本低。这点我还是很喜欢的。
端云一体化工程讲解

端云一体化的工程我也是第一次开发，相信很多伙伴也没开发过。我这次用的是官方提供的云模板工程，我大概给大家讲解一下：

整体结构很简单，使用起来也比较方便。所有的操作 DevEco Studio 开发工具都集成了。
而在讲解之前，使用云模板创建项目之前需要在华为开发平台创建项目，具体创建流程可以到官方文档查看，地址我也放在下面：https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/agc-harmonyos-clouddev-agcapp-0000001439436876-V3#section397317130308
注意：记得是创建项目哦，不是应用。我一开始就搞错了
创建表与方法

比如你要新建一张数据库表，只需在 clouddb云数据库入口文件点击右键，点击 new，然后你选择需要创建什么。

而我比较喜欢在开发平台创建，比较方便，傻瓜式操作。大家也可以看看官方文档：https://developer.huawei.com/consumer/cn/doc/AppGallery-connect-Guides/agc-clouddb-createfirstclouddb-0000001569588629

2.比如你要创建一个云函数方法，也是只需在 cloudfuntion云函数入口文件点击右键，点击 new，然后你直接创建一个对应的云函数即可。

开发函数与数据库的使用

由于第一次使用云函数与云数据库，一路上磕磕碰碰。所以我打算将自己经验都分享给大家，希望能帮助大家。

开发云函数

在创建云函数之后，代码结构如下：

其中有一个 ts 文件，这个就是我们的函数入口了，其他的我们都暂时不用动。这里我默认的是 nodejs 开发模式以及 http 请求模式。如果你们需要修改配置可以看一下官方文档：https://developer.huawei.com/consumer/cn/doc/AppGallery-connect-Guides/agc-cloud-function-start-from-here-0000001512489692
ts 文件里面默认有一个主入口方法：

1. let myHandler = async function (event, context, callback, logger) {
2.   // 获取你的参数
3.   const body = event.body ? JSON.parse(event.body) : event
6.   // 写你的业务代码
9.   callback({
10.       code: 200,
11.       data: [],
12.       msg: '提示内容'
13.   });
14. };
17. export { myHandler };

复制代码

复制代码

myHandler：入口方法名称。event：调用方传递的事件对象，JSON 格式。具体内容请参见event对象。context：函数运行时上下文对象，封装了日志接口、回调接口、环境变量 env 对象等。callback：事件处理结果。logger：记录日志。

这里需要注意的是：获取参数的方式，我在本地调试的时候，event 就是参数对象了，但是发布到云服务器之后，端侧传递的参数需要通过 event.body 来判断是否存在，然后将数据 JSON 化。也不知道是不是我用的不对，但是目前我是遇到这个问题了。

接下来我讲解一下云函数调用云数据库与云存储的相关步骤。详细步骤如下：
云函数使用云数据库

1. 云数据库注册认证

在使用云数据库的所有方法时，都需要先注册认证哈

1. const path = require('path');
2. const clouddb = require('@hw-agconnect/database-server/dist/index.js')
3. const { AGCClient, CredentialParser } = require("@hw-agconnect/common-server");
4. const db_demo = require('./db/bd_demo') // 从开发者平台下载对应的js配置文件，放在对应的函数目录根目录下
7. // 加载凭证文件，凭证文件也是在开发者平台下载，具体看我的截图
8. let client_name = "./db/agc-apiclient-chen.json";
9. let client_path = path.join(__dirname, client_name);
10. let credential = CredentialParser.toCredential(client_path);
11. AGCClient.initialize(credential, "clientCN", "CN");
14. let myHandler = async function (event, context, callback, logger) {
15.   // xxxx
16. };
19. export { myHandler };

复制代码

复制代码
1.1 下载加载对象类型文件

1.2 将上面下载的文件引入到云函数目录中

1.3 下载凭证文件

2. 初始化云数据库实例以及打开存储区

1. // 接着加载凭证文件的相关代码下
2. const agcClient = AGCClient.getInstance("clientCN");
3. clouddb.AGConnectCloudDB.initialize(agcClient);
4. const agconnectCloudDB = clouddb.AGConnectCloudDB.getInstance(agcClient);
5. //云数据库区块，获取方法看以下截图
6. const zoneName = '区块名称';
7. const cloudDBZoneConfig = new clouddb.CloudDBZoneConfig(zoneName);
8. const mCloudDBZone = agconnectCloudDB.openCloudDBZone(cloudDBZoneConfig);

复制代码

复制代码
2.1 获取区块名称

3. 使用云数据库的方法
3.1 云数据库-新增数据

需要注意的是：表名称，直接写对应的字符串名称就好

1. // 上面是注册、加载凭证、打开存储区的代码
4. let myHandler = async function (event, context, callback, logger) {
5.   // 获取你的参数
6.   const body = event.body ? JSON.parse(event.body) : event
9.   //表名称也是通过开发者平台获取即可，字符串模式
10.   const bookInfo = clouddb.CloudDBZoneGenericObject.build('表名称')
11.   // 添加属性对应的数据，按照自己定义的字段格式去赋值
12.   bookInfo.addFieldValue('字段名称1', '数据')
13.   bookInfo.addFieldValue('字段名称2', '数据')
14.   // 同步插入表里
15.   const resp = await mCloudDBZone.executeUpsert(bookInfo)
16.   callback({
17.       code: 200,
18.       data: [],
19.       msg: '提示内容'
20.   });
21. };
24. export { myHandler };

复制代码

复制代码
3.2 云数据库-更新数据

需要注意的是：要先获取表实例以及定位唯一键

1. const db_demo = require('./db/bd_demo')
2. // 上面是注册、加载凭证、打开存储区的代码
5. let myHandler = async function (event, context, callback, logger) {
6.   // 获取你的参数
7.   const body = event.body ? JSON.parse(event.body) : event
9.   // 引入表实例
10.   const bookInfo = new db_demo.db_demo();
11.   // 定位唯一键，目的找到对应的数据
12.   bookInfo.setId('主键数据值') // 主键字段，自己在创建数据库的时候需要自定义主键
13.   // 注册
14.   const operator = clouddb.CloudDBZoneObjectOperator.build(bookInfo)
15.   operator.update('字段名称1', 数据) // 更新对应字段数据
16.   operator.update('字段名称2', 数据) // 更新对应字段数据
17.   operator.update('字段名称3', 数据) // 更新对应字段数据
18.   // ....
19.   // 更新表里数据
20.   const resp = await mCloudDBZone.executeUpdate(operator)
21.   callback({
22.       code: 200,
23.       data: [],
24.       msg: '提示内容'
25.   });
26. };
29. export { myHandler };

复制代码

复制代码
3.2 云数据库-查询数据

这里需要注意的是：查询方式有很多，我这边只用到很基础的。想要更多操作可以看一下官网：https://developer.huawei.com/consumer/cn/doc/AppGallery-connect-Guides/agc-clouddb-otheroperations-servernodejs-0000001569466329#section171182910246

1. const db_demo = require('./db/bd_demo')
2. // 上面是注册、加载凭证、打开存储区的代码
5. let myHandler = async function (event, context, callback, logger) {
6.   // 获取你的参数
7.   const body = event.body ? JSON.parse(event.body) : event
9.   // 初始化表
10.   let cloudDBZoneQuery = clouddb.CloudDBZoneQuery.where(db_demo.db_demo)
11.   // 查询字段名称等于xxx的数据
12.   const userCloudDBZoneQuery = cloudDBZoneQuery.equalTo('字段名称', 'xxx');
13.   const respUser = await mCloudDBZone.executeQuery(userCloudDBZoneQuery);
14.   const data = respUser.getSnapshotObjects()[0] // 获取对应数据
15.   callback({
16.       code: 200,
17.       data: [],
18.       msg: '提示内容'
19.   });
20. };
23. export { myHandler };

复制代码

复制代码
3.3 云数据库-删除数据

删除相关的操作我还没使用过，等我使用之后再补充给大家

云函数使用云存储

1. 云存储注册认证

在使用云存储的所有方法时，也是都需要先注册认证哈

1. import {AGCClient, CredentialParser} from "@agconnect/common-server"
2. import {StorageManagement, Bucket, File, AGCCloudStorage} from "@agconnect/cloudstorage-server"
5. // 加载凭证文件
6. let client_name = "./db/agc-apiclient-chen.json";
7. let client_path = path.join(__dirname, client_name);
8. let credential = CredentialParser.toCredential(client_path);
9. AGCClient.initialize(credential, "clientDW");
12. let storage = AGCCloudStorage.getInstance("clientDW");
13. // name: 存储实例名称，获取方式从开发者平台获取
14. let bucket = storage.bucket('xxxx');
17. let myHandler = async function (event, context, callback, logger) {
18.   // xxxx
19. };
22. export { myHandler };

复制代码

复制代码
1.1 获取存储实例名称

2. 使用云存储的方法
2.1 上传文件

需要注意的是：上传文件需要注意 destination 的文件路径规则。需要上传的文件对应的路径则是本地路径，文件在云函数的根目录下，。后续我也会将怎么通过端侧上传图片到云函数再上传到云存储的相关操作。

1. // 以上是认证的相关代码
4. let myHandler = async function (event, context, callback, logger) {
5.     const options = {
6.       destination:  'demo/demo.png', // 对应云存储中的文件路径，demo文件夹需要自己在开发者平台创建，文件名称自定义，存在则覆盖不存在则新增
7.       onUploadProgress: (event) => {}
8.     };
9.     bucket.upload('需要上传的文件路径，例如：./static/demo.png', options);
10. };
13. export { myHandler };

复制代码

复制代码
2.2 下载文件

1. // 以上是认证的相关代码
4. let myHandler = async function (event, context, callback, logger) {
5.     const remoteFile = bucket.file(‘云存储下的文件具体路径’);
6.     const localFile = '需要上传的文件路径，例如：./static/demo.png'
7.     const directory = path.dirname(localFile);
8.     // 判断本地是否有当前文件，有则创建
9.     if (!fs.existsSync(directory)) {
10.       fs.mkdirSync(directory, { recursive: true });
11.     }
13.     // 下载云存储的文件内容到对应的本地文件
14.     await remoteFile.createReadStream()
15.       .on('error', (err) => {})
16.       .on('end', () => {
17.         // 业务代码
18.       })
19.       .pipe(fs.createWriteStream(localFile));
20. };
23. export { myHandler };

复制代码

复制代码
总结

这次的鸿蒙端云一体化的开发经验就讲解到这里，可能我讲的不是很细，因为也是第一次使用，希望可以帮助大家。如果上面描述的有问题，欢迎大家在评论区指出来，谢谢。后面我们也会分享端侧的开发经验，以及会将对应 app 上线，到时候有相关技术讨论的都可以找我们