前言
在我工作的日常中,經常會用一些畫圖編輯器,簡單設計一些頁面原型。而在去年低代碼很火的時候,我在公司就開發了一款大屏可視化編輯器,可以通過拖拉拽生成網頁的一個工具。后面也想著自己也開發一個畫圖的編輯器,可以用來自己平時做圖或者設計海報之類的。而這次我將使用鴻蒙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文件里面默認有一個主入口方法:
let myHandler = async function (event, context, callback, logger) {
// 獲取你的參數
const body = event.body ? JSON.parse(event.body) : event
// 寫你的業務代碼
callback({
code: 200,
data: [],
msg: '提示內容'
});
};
export { myHandler };
- myHandler:入口方法名稱。
- event:調用方傳遞的事件對象,JSON格式。具體內容請參見event對象。
- context:函數運行時上下文對象,封裝了日志接口、回調接口、環境變量env對象等。
- callback:事件處理結果。
- logger:記錄日志。
這里需要注意的是:獲取參數的方式,我在本地調試的時候,event就是參數對象了,但是發布到云服務器之后,端側傳遞的參數需要通過event.body來判斷是否存在,然后將數據JSON化。也不知道是不是我用的不對,但是目前我是遇到這個問題了。
接下來我講解一下云函數調用云數據庫與云存儲的相關步驟。詳細步驟如下:
云函數使用云數據庫
1. 云數據庫注冊認證
在使用云數據庫的所有方法時,都需要先注冊認證哈
const path = require('path');
const clouddb = require('@hw-agconnect/database-server/dist/index.js')
const { AGCClient, CredentialParser } = require("@hw-agconnect/common-server");
const db_demo = require('./db/bd_demo') // 從開發者平臺下載對應的js配置文件,放在對應的函數目錄根目錄下
// 加載憑證文件,憑證文件也是在開發者平臺下載,具體看我的截圖
let client_name = "./db/agc-apiclient-chen.json";
let client_path = path.join(__dirname, client_name);
let credential = CredentialParser.toCredential(client_path);
AGCClient.initialize(credential, "clientCN", "CN");
let myHandler = async function (event, context, callback, logger) {
// xxxx
};
export { myHandler };
1.1 下載加載對象類型文件
1.2 將上面下載的文件引入到云函數目錄中
1.3 下載憑證文件
2. 初始化云數據庫實例以及打開存儲區
// 接著加載憑證文件的相關代碼下
const agcClient = AGCClient.getInstance("clientCN");
clouddb.AGConnectCloudDB.initialize(agcClient);
const agconnectCloudDB = clouddb.AGConnectCloudDB.getInstance(agcClient);
//云數據庫區塊,獲取方法看以下截圖
const zoneName = '區塊名稱';
const cloudDBZoneConfig = new clouddb.CloudDBZoneConfig(zoneName);
const mCloudDBZone = agconnectCloudDB.openCloudDBZone(cloudDBZoneConfig);
2.1 獲取區塊名稱
3. 使用云數據庫的方法
3.1 云數據庫-新增數據
需要注意的是:表名稱,直接寫對應的字符串名稱就好
// 上面是注冊、加載憑證、打開存儲區的代碼
let myHandler = async function (event, context, callback, logger) {
// 獲取你的參數
const body = event.body ? JSON.parse(event.body) : event
//表名稱也是通過開發者平臺獲取即可,字符串模式
const bookInfo = clouddb.CloudDBZoneGenericObject.build('表名稱')
// 添加屬性對應的數據,按照自己定義的字段格式去賦值
bookInfo.addFieldValue('字段名稱1', '數據')
bookInfo.addFieldValue('字段名稱2', '數據')
// 同步插入表里
const resp = await mCloudDBZone.executeUpsert(bookInfo)
callback({
code: 200,
data: [],
msg: '提示內容'
});
};
export { myHandler };
3.2 云數據庫-更新數據
需要注意的是:要先獲取表實例以及定位唯一鍵
const db_demo = require('./db/bd_demo')
// 上面是注冊、加載憑證、打開存儲區的代碼
let myHandler = async function (event, context, callback, logger) {
// 獲取你的參數
const body = event.body ? JSON.parse(event.body) : event
// 引入表實例
const bookInfo = new db_demo.db_demo();
// 定位唯一鍵,目的找到對應的數據
bookInfo.setId('主鍵數據值') // 主鍵字段,自己在創建數據庫的時候需要自定義主鍵
// 注冊
const operator = clouddb.CloudDBZoneObjectOperator.build(bookInfo)
operator.update('字段名稱1', 數據) // 更新對應字段數據
operator.update('字段名稱2', 數據) // 更新對應字段數據
operator.update('字段名稱3', 數據) // 更新對應字段數據
// ....
// 更新表里數據
const resp = await mCloudDBZone.executeUpdate(operator)
callback({
code: 200,
data: [],
msg: '提示內容'
});
};
export { myHandler };
3.2 云數據庫-查詢數據
這里需要注意的是:查詢方式有很多,我這邊只用到很基礎的。想要更多操作可以看一下官網:https://developer.huawei.com/consumer/cn/doc/AppGallery-connect-Guides/agc-clouddb-otheroperations-servernodejs-0000001569466329#section171182910246
const db_demo = require('./db/bd_demo')
// 上面是注冊、加載憑證、打開存儲區的代碼
let myHandler = async function (event, context, callback, logger) {
// 獲取你的參數
const body = event.body ? JSON.parse(event.body) : event
// 初始化表
let cloudDBZoneQuery = clouddb.CloudDBZoneQuery.where(db_demo.db_demo)
// 查詢字段名稱等于xxx的數據
const userCloudDBZoneQuery = cloudDBZoneQuery.equalTo('字段名稱', 'xxx');
const respUser = await mCloudDBZone.executeQuery(userCloudDBZoneQuery);
const data = respUser.getSnapshotObjects()[0] // 獲取對應數據
callback({
code: 200,
data: [],
msg: '提示內容'
});
};
export { myHandler };
3.3 云數據庫-刪除數據
刪除相關的操作我還沒使用過,等我使用之后再補充給大家
云函數使用云存儲
1. 云存儲注冊認證
在使用云存儲的所有方法時,也是都需要先注冊認證哈
import {AGCClient, CredentialParser} from "@agconnect/common-server"
import {StorageManagement, Bucket, File, AGCCloudStorage} from "@agconnect/cloudstorage-server"
// 加載憑證文件
let client_name = "./db/agc-apiclient-chen.json";
let client_path = path.join(__dirname, client_name);
let credential = CredentialParser.toCredential(client_path);
AGCClient.initialize(credential, "clientDW");
let storage = AGCCloudStorage.getInstance("clientDW");
// name: 存儲實例名稱,獲取方式從開發者平臺獲取
let bucket = storage.bucket('xxxx');
let myHandler = async function (event, context, callback, logger) {
// xxxx
};
export { myHandler };
1.1 獲取存儲實例名稱
2. 使用云存儲的方法
2.1 上傳文件
需要注意的是:上傳文件需要注意destination的文件路徑規則。需要上傳的文件對應的路徑則是本地路徑,文件在云函數的根目錄下,。后續我也會將怎么通過端側上傳圖片到云函數再上傳到云存儲的相關操作。
// 以上是認證的相關代碼
let myHandler = async function (event, context, callback, logger) {
const options = {
destination: 'demo/demo.png', // 對應云存儲中的文件路徑,demo文件夾需要自己在開發者平臺創建,文件名稱自定義,存在則覆蓋不存在則新增
onUploadProgress: (event) = > {}
};
bucket.upload('需要上傳的文件路徑,例如:./static/demo.png', options);
};
export { myHandler };
2.2 下載文件
// 以上是認證的相關代碼
let myHandler = async function (event, context, callback, logger) {
const remoteFile = bucket.file(‘云存儲下的文件具體路徑’);
const localFile = '需要上傳的文件路徑,例如:./static/demo.png'
const directory = path.dirname(localFile);
// 判斷本地是否有當前文件,有則創建
if (!fs.existsSync(directory)) {
fs.mkdirSync(directory, { recursive: true });
}
// 下載云存儲的文件內容到對應的本地文件
await remoteFile.createReadStream()
.on('error', (err) = > {})
.on('end', () = > {
// 業務代碼
})
.pipe(fs.createWriteStream(localFile));
};
export { myHandler };
總結
這次的鴻蒙端云一體化的開發經驗就講解到這里,可能我講的不是很細,因為也是第一次使用,希望可以幫助大家。如果上面描述的有問題,歡迎大家在評論區指出來,謝謝。后面我們也會分享端側的開發經驗,以及會將對應app上線,到時候有相關技術討論的都可以找我們
審核編輯 黃宇
-
鴻蒙
+關注
關注
59文章
2573瀏覽量
43900
發布評論請先 登錄
一體化解決方案Jama Software,如何支持醫療設備開發中的需求管理、風險管理與驗證?

Linux下Vim編輯器的使用技巧

華為發布云網端一體化網絡安全解決方案
【McCharts】基于鴻蒙ArkTS語法開發的圖表組件--折線圖
如祺出行入選智能網聯車路云一體化典型案例
華為入選中國云網安一體化能力領導者
華礪智行亮相2024車路云一體化融合發展論壇
德晟達助力解決車路云一體化發展難題
Vivado編輯器亂碼問題

評論