DevEco Studio端云協(xié)同開發(fā)之云數(shù)據(jù)庫體驗(yàn)

作者：Tuer白曉明 2023-02-23 19:45:23

本節(jié)將結(jié)合端云協(xié)同開發(fā)，將啟動(dòng)頁需要的參數(shù)保存到云數(shù)據(jù)庫中，實(shí)現(xiàn)根據(jù)特定節(jié)氣顯示不同的啟動(dòng)頁背景圖。

??https://ost.51cto.com??

在??自定義HamronyOS啟動(dòng)頁組件??一文中封裝了啟動(dòng)頁組件，本節(jié)將結(jié)合端云協(xié)同開發(fā)，將啟動(dòng)頁需要的參數(shù)保存到云數(shù)據(jù)庫中，實(shí)現(xiàn)根據(jù)特定節(jié)氣顯示不同的啟動(dòng)頁背景圖。

一、環(huán)境

??DevEco Studio 3.1 Beta1(V3.1.0.200)??
??觸覺智能IDO-EVB3568-V1開發(fā)板??
??自定義teui組件庫??
??端云協(xié)同開發(fā)應(yīng)用創(chuàng)建??——??視頻演示【HarmonyOS端云協(xié)同開發(fā)云函數(shù)體驗(yàn)】??

二、云數(shù)據(jù)庫

云數(shù)據(jù)庫(Cloud DB)是Serverless服務(wù)提供的能力之一，是AppGallery Connect平臺(tái)解決方案的一部分，是端云協(xié)同的數(shù)據(jù)庫產(chǎn)品，支持?jǐn)?shù)據(jù)在端云、多端之間無縫同步，并為應(yīng)用提供離線支持，以幫助開發(fā)者快速構(gòu)建端云、多端協(xié)同應(yīng)用，開發(fā)者可以聚集于應(yīng)用本身業(yè)務(wù)，極大提升開發(fā)者開發(fā)效率，更多請(qǐng)至??華為App Gallery Connect云數(shù)據(jù)庫??了解。

三、端云協(xié)同開發(fā)云數(shù)據(jù)庫

DevEco Studio 3.1 Beta1提供了端云協(xié)同開發(fā)，可以通過云側(cè)CloudProgram項(xiàng)目創(chuàng)建云數(shù)據(jù)庫對(duì)象類型、存儲(chǔ)區(qū)、配置權(quán)限，端側(cè)引入相關(guān)的云數(shù)據(jù)庫文件即可進(jìn)行云數(shù)據(jù)庫數(shù)據(jù)操作，應(yīng)用開發(fā)流程如下圖所示：

DevEco Studio端云協(xié)同開發(fā)之云數(shù)據(jù)庫體驗(yàn)-開源基礎(chǔ)軟件社區(qū)

1、云側(cè)CloudProgram工程云數(shù)據(jù)庫配置

（1）創(chuàng)建對(duì)象類型

云數(shù)據(jù)庫采用存儲(chǔ)區(qū)、對(duì)象類型和對(duì)象三級(jí)結(jié)構(gòu)基于對(duì)象模型的數(shù)據(jù)庫。對(duì)象類型是用于定義存儲(chǔ)對(duì)象的集合，不同對(duì)象類型對(duì)應(yīng)的不同數(shù)據(jù)結(jié)構(gòu)。

在云側(cè)CloudProgram工程clouddb目錄下clouddb目錄右鍵??New > Cloud DB Object Type??創(chuàng)建對(duì)象類型，輸入對(duì)象類型名稱，DevEco Studio會(huì)自動(dòng)創(chuàng)建初始對(duì)象類型JSON文件。

在對(duì)象類型JSON文件中，可以配置字段、索引以及角色于權(quán)限，表3-1為數(shù)據(jù)類型JSON文件屬性簡單介紹。

表3-1 數(shù)據(jù)類型JSON文件屬性(更多描述參見官方文檔)

參數(shù)	說明
fields	數(shù)據(jù)表字段集，配置屬性參見表3-2
indexes	數(shù)據(jù)表索引，配置屬性參見表3-3
permissions	操作數(shù)據(jù)表角色及對(duì)應(yīng)權(quán)限，配置屬性參見表3-4
objectTypeName	數(shù)據(jù)表名稱

DevEco Studio端云協(xié)同開發(fā)之云數(shù)據(jù)庫體驗(yàn)-開源基礎(chǔ)軟件社區(qū)

表3-2 數(shù)據(jù)表字段(更多描述參見官方文檔)

參數(shù)	說明
fieldName	字段名稱
fieldType	字段數(shù)據(jù)類型當(dāng)前支持:String, Boolean, Byte, Shor, Integer, Long, Float, Double, ByteArray, Text, Date, IntAutoIncrement, LongAutoIncrement
belongPrimaryKey	字段是否為主鍵
notNull	字段值是否為空
isNeedEncrypt	字段是否需要加密

"fields": [
    {
      "belongPrimaryKey": true,
      "fieldName": "id",
      "fieldType": "Integer",
      "isNeedEncrypt": false,
      "notNull": true
    },
    {
      "belongPrimaryKey": false,
      "fieldName": "timer",
      "fieldType": "Integer",
      "isNeedEncrypt": false,
      "notNull": false
    },
    {
      "belongPrimaryKey": false,
      "fieldName": "isLogo",
      "fieldType": "Boolean",
      "isNeedEncrypt": false,
      "notNull": false
    },
    {
      "belongPrimaryKey": false,
      "fieldName": "backgroundImg",
      "fieldType": "String",
      "isNeedEncrypt": false,
      "notNull": false
    },
    {
      "belongPrimaryKey": false,
      "fieldName": "companyName",
      "fieldType": "String",
      "isNeedEncrypt": false,
      "notNull": false
    },
    {
      "belongPrimaryKey": false,
      "fieldName": "mFontColor",
      "fieldType": "String",
      "isNeedEncrypt": false,
      "notNull": false
    },
    {
      "belongPrimaryKey": false,
      "fieldName": "status",
      "fieldType": "Integer",
      "isNeedEncrypt": false,
      "notNull": false
    },
    {
      "belongPrimaryKey": false,
      "fieldName": "createUser",
      "fieldType": "Integer",
      "isNeedEncrypt": false,
      "notNull": false
    },
    {
      "belongPrimaryKey": false,
      "fieldName": "createTime",
      "fieldType": "Date",
      "isNeedEncrypt": false,
      "notNull": false
    }
  ],

表3-3 數(shù)據(jù)表索引(更多描述參見官方文檔)。

參數(shù)	說明
indexName	索引名稱
indexList	索引包含的字段

"indexes": [
    {
      "indexName": "IDX_202302221057",
      "indexList": [
        {
          "fieldName": "id",
          "sortType": "DESC"
        }
      ]
    }
  ],

表3-4 操作數(shù)據(jù)表角色及權(quán)限(更多描述參見官方文檔)。

參數(shù)	說明
World	所有用戶，默認(rèn)最多僅可擁有Read權(quán)限
Authenticated	AppGallery Connect登錄的認(rèn)證用戶
Creator	數(shù)據(jù)創(chuàng)建用戶
Administrator	應(yīng)用開發(fā)者

"permissions": [
    {
      "rights": [
        "Read"
      ],
      "role": "World"
    },
    {
      "rights": [
        "Read",
        "Upsert"
      ],
      "role": "Authenticated"
    },
    {
      "rights": [
        "Read",
        "Upsert",
        "Delete"
      ],
      "role": "Creator"
    },
    {
      "rights": [
        "Read",
        "Upsert",
        "Delete"
      ],
      "role": "Administrator"
    }
  ]

（2）創(chuàng)建數(shù)據(jù)條目

創(chuàng)建完對(duì)象類型，可以通過為對(duì)象類型添加數(shù)據(jù)條目，來預(yù)置數(shù)據(jù)庫內(nèi)容，支持手動(dòng)創(chuàng)建和自動(dòng)生成數(shù)據(jù)條目JSON文件。

手動(dòng)創(chuàng)建數(shù)據(jù)條目文件：在clouddb目錄下dataentry目錄右鍵New > Cloud DB Data Entry創(chuàng)建數(shù)據(jù)條目JSON文件，輸入數(shù)據(jù)條目名稱。
自動(dòng)生成數(shù)據(jù)條目文件：在對(duì)象類型JSON文件右鍵Generate Data Entry輸入數(shù)據(jù)條目自定義名稱。

無論選擇哪種創(chuàng)建數(shù)據(jù)條目的方法，DevEco Studio會(huì)自動(dòng)初始化已配置的對(duì)象類型，并賦初始值，同時(shí)配置數(shù)據(jù)條目所在存儲(chǔ)區(qū)名稱，如代碼中的cloudDBZoneName，可自定義。

{
  "cloudDBZoneName": "cloudDBZoneSplash",
  "objectTypeName": "splash",
  "objects": [
    {
      "id": 1,
      "timer": 3,
      "isLogo": false,
      "backgroundImg": "https://img1.baidu.com/it/u=1884825806,3687074543&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889",
      "companyName": "xxxx有限公司",
      "mFontColor": "#F2F2F2",
      "status": 0,
      "createUser": 1,
      "createTime": 1677035025264
    },
    {
      "id": 2,
      "timer": 3,
      "isLogo": true,
      "backgroundImg": "https://img1.baidu.com/it/u=1884825806,3687074543&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889",
      "companyName": "xxxx有限公司",
      "mFontColor": "#F2F2F",
      "status": 1,
      "createUser": 1,
      "createTime": 1677035025264
    }
  ]
}

（3）部署云數(shù)據(jù)庫

在DevEco Studio還未實(shí)現(xiàn)端云協(xié)同開發(fā)之前，要實(shí)現(xiàn)云側(cè)數(shù)據(jù)庫需要在網(wǎng)頁端配置。當(dāng)前開發(fā)者只需要在DevEco Studio云側(cè)工程中配置好云數(shù)據(jù)庫信息后，右鍵clouddb目錄選擇Deploy Cloud DB將云數(shù)據(jù)庫需要的資源統(tǒng)一部署到AGC控制臺(tái)，Event Log會(huì)顯示同步進(jìn)度信息。部署完成后，可在AGC控制臺(tái)查看部署的云數(shù)據(jù)庫信息。

DevEco Studio端云協(xié)同開發(fā)之云數(shù)據(jù)庫體驗(yàn)-開源基礎(chǔ)軟件社區(qū)

2、端側(cè)Application訪問云側(cè)數(shù)據(jù)庫業(yè)務(wù)實(shí)現(xiàn)

使用端云協(xié)同開發(fā)，將較于之前的操作會(huì)減少如配置開發(fā)環(huán)境agconnect-services.json文件引入，該文件在創(chuàng)建端云協(xié)同工程時(shí)會(huì)自動(dòng)初始化到工程中，在entry/src/main/resources/rawfile中；同時(shí)會(huì)自動(dòng)引入相關(guān)依賴文件，如database-ohos等。

除配置文件和依賴文件之外，還需要和之前的操作相同，導(dǎo)出JSON格式文件和JS格式文件并添加至本地開發(fā)環(huán)境中。

（1）添加對(duì)象類型文件

將導(dǎo)出的數(shù)據(jù)類型JSON文件內(nèi)容拷貝到entry/src/main/ets/services/app-schema.json中，若無該文件則創(chuàng)建即可。
將導(dǎo)出的JS格式文件拷貝到entry/src/main/ets/services/目錄下。

（2）云數(shù)據(jù)庫操作

該文件僅作為示例應(yīng)用獲取云數(shù)據(jù)庫數(shù)據(jù)，若需要更詳細(xì)的開發(fā)者可自定義封裝，其中異常并未作處理，開發(fā)者可根據(jù)自身業(yè)務(wù)做響應(yīng)的處理。

// entry/src/main/ets/services/CloudDBService.ts
// @ts-ignore
import * as schema from './app-schema.json';
import { splash } from './splash';
import {
    AGConnectCloudDB,
    CloudDBZoneConfig,
    CloudDBZone,
    CloudDBZoneQuery
} from '@hw-agconnect/database-ohos';

import { AGCRoutePolicy } from '@hw-agconnect/core-ohos';

import { getAGConnect } from './AgcConfig';

export class CloudDBService {

    private static readonly ZONE_NAME = "cloudDBZoneSplash";

    private static init(context: any): Promise<CloudDBZone> {
        return new Promise((resolve, reject) => {
            getAGConnect(context);
            AGConnectCloudDB.initialize(context);
            AGConnectCloudDB.getInstance({
                context: context,
                agcRoutePolicy: AGCRoutePolicy.CHINA,
                objectTypeInfo: schema
            }).then((ret) => {
                return resolve(ret.openCloudDBZone(this.ZONE_NAME));
            });
        })
    }
    // 查詢狀態(tài)為'1'的啟動(dòng)頁信息
    public static query(context: any): Promise<splash> {
        return new Promise((resolve, reject) => {
            const query = CloudDBZoneQuery.where(splash).equalTo("status", 1);
            this.init(context).then((ret) => {
                ret.executeQuery(query).then((ret) => {
                    resolve(ret.getSnapshotObjects()[0]);
                })
            });
        })
    }
}

（3）將云數(shù)據(jù)庫數(shù)據(jù)渲染到頁面

利用aboutToAppear()方法獲取云數(shù)據(jù)庫中的啟動(dòng)頁信息。

import { CloudDBService as CloudDB } from '../services/CloudDBService';
import { SplashPage } from '@tetcl/teui';
@Entry
@Component
struct Splash {

  @State result: SplashObj = new SplashObj(5);
  @State isSkip: boolean = false;
  
  onSkipt() {
    // 跳轉(zhuǎn)頁面
  }
  
  build() {
    Column() {
      if (this.isSkip) {
        SplashPage({ mSplash: {
          timer: this.result.timer,
          isLogo: this.result.isLogo,
          backgroundImg: this.result.backgroundImg,
          companyName: this.result.companyName,
          mFontColor: this.result.mFontColor
        }, skip: this.onSkip })
      }
    }
    .width('100%')
    .height('100%')
  }
  
  aboutToAppear() {
    // 若受網(wǎng)絡(luò)印象獲取數(shù)據(jù)時(shí)間過長，此處可以自定義一個(gè)數(shù)據(jù)加載動(dòng)畫
    CloudDB.query(getContext(this)).then(ret => {
      this.isSkip = true;
      this.result = ret;
    })
  }
}