端云一體化開發-計算十二生肖-云數據庫

作者：狼哥Army 2023-03-15 16:24:43

由于調用云側云數據庫是異步的，不能馬上返回結果，這里添加LoadingProgress組件，讓用戶知道在運行中，效果看得不是很明顯，可能錄制時，網速很快，LoadingProgress組件閃一下就不見了，如果遇到網絡慢時，LoadingProgress就會一直轉，直到云數據庫返回響應時，再消失LoadingProgress。

??想了解更多關于開源的內容，請訪問：??

??51CTO 開源基礎軟件社區??

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

1、前言

上帖子使用云函數端云一體化開發計算十二生肖，此貼使用云數據庫端云一體化開發計算十二生肖，在DevEco Studio可以完成端側代碼開發和云側代碼開發，一鍵部署云數據庫，效果與之前使用云函數一樣，計算獲取方式不同。

2、真機效果

端云一體化開發-計算十二生肖-云數據庫-開源基礎軟件社區

3、講解

開發云數據庫端云一體化項目結構和之前不一樣，多了CloudProgram模塊, 下面介紹項目開發，先從云側開發開始，再到端側開發。

4、云側開發

（1）介紹云數據庫目錄結構

展開CloudProgram模塊，展開clouddb目錄，dataentry目錄是存儲數據條目文件，objecttype目錄是存儲對象類型文件，db-config.json自動生成，內容包含云數據庫配置，目錄結構如下圖：

端云一體化開發-計算十二生肖-云數據庫-開源基礎軟件社區

（2）定義對象類型

右擊objecttype目錄，創建對象類型。

端云一體化開發-計算十二生肖-云數據庫-開源基礎軟件社區

{
  "fields": [
    {
      "belongPrimaryKey": true,
      "fieldName": "idx",
      "fieldType": "Integer",
      "isNeedEncrypt": false,
      "notNull": true
    },
    {
      "belongPrimaryKey": false,
      "fieldName": "zodiacName",
      "fieldType": "String",
      "isNeedEncrypt": false,
      "notNull": false
    }
  ],
  "indexes": [
    {
      "indexName": "idxIndex",
      "indexList": [
        {
          "fieldName": "idx",
          "sortType": "ASC"
        }
      ]
    },
    {
      "indexName": "zodiacIndex",
      "indexList": [
        {
          "fieldName": "zodiacName",
          "sortType": "DESC"
        }
      ]
    }
  ],
  "objectTypeName": "ZodiacObject",
  "permissions": [
    {
      "rights": [
        "Read"
      ],
      "role": "World"
    },
    {
      "rights": [
        "Read",
        "Upsert"
      ],
      "role": "Authenticated"
    },
    {
      "rights": [
        "Read",
        "Upsert",
        "Delete"
      ],
      "role": "Creator"
    },
    {
      "rights": [
        "Read",
        "Upsert",
        "Delete"
      ],
      "role": "Administrator"
    }
  ]
}

（3）定義數據條目

右擊dataentry目錄，創建數據條目。

端云一體化開發-計算十二生肖-云數據庫-開源基礎軟件社區

{
  "cloudDBZoneName": "cloudDBZoneZodiac",
  "objectTypeName": "ZodiacObject",
  "objects": [
    {
      "idx": 0,
      "zodiacName": "猴"
    },
    {
      "idx": 1,
      "zodiacName": "雞"
    },
    {
      "idx": 2,
      "zodiacName": "狗"
    },
    {
      "idx": 3,
      "zodiacName": "豬"
    },
    {
      "idx": 4,
      "zodiacName": "鼠"
    },
    {
      "idx": 5,
      "zodiacName": "牛"
    },
    {
      "idx": 6,
      "zodiacName": "虎"
    },
    {
      "idx": 7,
      "zodiacName": "兔"
    },
    {
      "idx": 8,
      "zodiacName": "龍"
    },
    {
      "idx": 9,
      "zodiacName": "蛇"
    },
    {
      "idx": 10,
      "zodiacName": "馬"
    },
    {
      "idx": 11,
      "zodiacName": "羊"
    }
  ]
}

（4）部署云數據庫

部署云側代碼到AGC上，右擊clouddb目錄，選擇Deploy Cloud DB，自動部署到AGC上，如果提示沒有登錄，登錄成功后，再操作一次部署。

端云一體化開發-計算十二生肖-云數據庫-開源基礎軟件社區

（5）導出文件格式

登錄到AGC->云數據庫，進入當前項目的云數據庫服務菜單，可分別在“對象類型”、“存儲區”與“數據”頁簽查看到您剛剛部署的云數據庫資源。

端云一體化開發-計算十二生肖-云數據庫-開源基礎軟件社區

導出json格式文件。

端云一體化開發-計算十二生肖-云數據庫-開源基礎軟件社區

導出js格式文件。

端云一體化開發-計算十二生肖-云數據庫-開源基礎軟件社區

導出json文件和js文件，端側使用到。

5、端側開發

（1）端側模塊結構

先看一下端側模塊結構：

端云一體化開發-計算十二生肖-云數據庫-開源基礎軟件社區

（2）common目錄

common目錄放一些公共的封裝類，比如Log類； components目錄放自定義組件；entryability是自動生成的，里面有一個EntryAbility類，包含生命周期；pages目錄放UI布局頁面；services目錄放業務邏輯類，比如調用云側接口。

（3）services目錄

這里只介紹services目錄的工作，先介紹如何和AGC連接上的，這里使用一個單獨的文件來處理:

services目錄下AgcConfig.ts。

import agconnect from '@hw-agconnect/api-ohos';
import "@hw-agconnect/core-ohos";
import "@hw-agconnect/auth-ohos";
import '@hw-agconnect/auth-types-ohos';

import { Log } from '../common/Log';

const TAG = "[AGCConfig]";

export function getAGConnect(context) {
    try {
        agconnect.instance().init(context);
        Log.info(TAG, "xx init AGC SDK success");
        return agconnect;
    }
    catch (err) {
        Log.error(TAG, "xx initAgcSDK failed" + err);
    }
}

在services目錄下創建app-schema.json文件，復制上面在AGC下載的json格式文件內容到app-schema.json里。

{
  "schemaVersion": 1,
  "permissions": [{
    "permissions": [{
      "role": "World",
      "rights": ["Read"]
    }, {
      "role": "Authenticated",
      "rights": ["Read", "Upsert"]
    }, {
      "role": "Creator",
      "rights": ["Read", "Upsert", "Delete"]
    }, {
      "role": "Administrator",
      "rights": ["Read", "Upsert", "Delete"]
    }],
    "objectTypeName": "ZodiacObject"
  }],
  "objectTypes": [{
    "indexes": [{
      "indexName": "zodiacIndex",
      "indexList": [{
        "fieldName": "zodiacName",
        "sortType": "DESC"
      }]
    }, {
      "indexName": "idxIndex",
      "indexList": [{
        "fieldName": "idx",
        "sortType": "ASC"
      }]
    }],
    "objectTypeName": "ZodiacObject",
    "fields": [{
      "isNeedEncrypt": false,
      "fieldName": "idx",
      "notNull": true,
      "isSensitive": false,
      "belongPrimaryKey": true,
      "fieldType": "Integer"
    }, {
      "isNeedEncrypt": false,
      "fieldName": "zodiacName",
      "notNull": false,
      "isSensitive": false,
      "belongPrimaryKey": false,
      "fieldType": "String"
    }]
  }]
}

在services目錄下創建ZodiacObject.js文件，復制上面在AGC下載的js格式文件內容到ZodiacObject.js里。

/*
 * Copyright (c) Huawei Technologies Co., Ltd. 2020-2020. All rights reserved.
 * Generated by the CloudDB ObjectType compiler. DO NOT EDIT!
 */

class ZodiacObject {
    constructor() {
        this.idx = undefined;
        this.zodiacName = undefined;
    }

    setIdx(idx) {
        this.idx = idx;
    }

    getIdx() {
        return this.idx;
    }

    setZodiacName(zodiacName) {
        this.zodiacName = zodiacName;
    }

    getZodiacName() {
        return this.zodiacName;
    }
}

ZodiacObject.className = 'ZodiacObject';

export {ZodiacObject}

services目錄下創建CloudDB.ts。

import * as schema from './app-schema.json';
import { ZodiacObject } from './ZodiacObject'
import { AGConnectCloudDB, CloudDBZone, CloudDBZoneQuery } from '@hw-agconnect/database-ohos';
import { AGCRoutePolicy } from '@hw-agconnect/core-ohos';
import { getAGConnect } from './AgcConfig';
export class CloudDBService {
  private static ZONE_NAME: string = "cloudDBZoneZodiac"
  private static init(context: any): Promise<CloudDBZone> {
    return new Promise((resolve, reject) => {
      // 獲取AGC連接
      getAGConnect(context);
      AGConnectCloudDB.initialize(context);

      AGConnectCloudDB.getInstance({
        context: context,
        agcRoutePolicy: AGCRoutePolicy.CHINA,
        objectTypeInfo: schema
      }).then((ret) => {
        return resolve(ret.openCloudDBZone(this.ZONE_NAME));
      }).catch((err) => {
        return reject(err);
      });
    })
  }

  public static query(context: any, year: number): Promise<ZodiacObject> {
    let idx = year%12;

    return new Promise((resolve, reject) => {
      const query = CloudDBZoneQuery.where(ZodiacObject).equalTo("idx", idx);
      this.init(context).then((ret) => {
        ret.executeQuery(query).then((ret) => {
          resolve(ret.getSnapshotObjects()[0]);
        })
      }).catch((err) => {
        reject(err);
      });
    })
  }
}

（4）pages目錄

pages目錄 Index.ts 這里是頁面布局，上面看到的效果，就是這里實現的。

import { CloudDBService } from '../services/CloudDB';

@Entry
@Component
struct Index {
  // 存儲選擇年份
  @State year: number = 2022
  // 計算出來生肖
  @State born: string = "?"
  // 是否在計算中
  @State flag: boolean = false

  // 計算生肖
  getBorn() {
    // 標識為計算中
    this.flag = true;
    console.info('xx Page year: ' + this.year)
    // 封裝參數
    let params = {
      "year": this.year
    }
    // 調用云數據庫
    CloudDBService.query(getContext(this), this.year).then((res) => {
      console.info('xx cloud db result: ' + JSON.stringify(res));
      // 計算完成
      this.flag = false;
      // 結果賦值給生肖變量
      this.born = res.zodiacName;

    }).catch((err) => {
      // 計算完成
      this.flag = false;
      console.error('xx error: ', err && err.message);
    });
  }

  build() {
    Stack() {
      if (!this.flag) {
        Column({space: 20}) {
          Text('請選擇年份')
            .fontSize(20)
            .fontWeight(FontWeight.Bold)

          // 選擇年份
          Column() {
            Text(this.year + '')
              .fontSize(20)
              .fontWeight(FontWeight.Bold)
              .padding(10)
              .width(100)
              .border({ width: 1, radius: 8 })
          }
          .bindMenu([
            { value: '2006', action: () => {this.year = 2006; this.born = '?'} },
            { value: '2007', action: () => {this.year = 2007; this.born = '?'} },
            { value: '2008', action: () => {this.year = 2008; this.born = '?'} },
            { value: '2009', action: () => {this.year = 2009; this.born = '?'} },
            { value: '2010', action: () => {this.year = 2010; this.born = '?'} },
            { value: '2011', action: () => {this.year = 2011; this.born = '?'} },
            { value: '2012', action: () => {this.year = 2012; this.born = '?'} },
            { value: '2013', action: () => {this.year = 2013; this.born = '?'} },
            { value: '2014', action: () => {this.year = 2014; this.born = '?'} },
            { value: '2015', action: () => {this.year = 2015; this.born = '?'} },
            { value: '2016', action: () => {this.year = 2016; this.born = '?'} },
            { value: '2017', action: () => {this.year = 2017; this.born = '?'} },
            { value: '2018', action: () => {this.year = 2018; this.born = '?'} },
            { value: '2019', action: () => {this.year = 2019; this.born = '?'} },
            { value: '2020', action: () => {this.year = 2020; this.born = '?'} },
            { value: '2021', action: () => {this.year = 2021; this.born = '?'} },
            { value: '2022', action: () => {this.year = 2022; this.born = '?'} },
            { value: '2023', action: () => {this.year = 2023; this.born = '?'} },
            { value: '2024', action: () => {this.year = 2024; this.born = '?'} },
            { value: '2025', action: () => {this.year = 2025; this.born = '?'} }
          ])

          // 計算按鈕操作
          Button('計算', {type: ButtonType.Normal, stateEffect: true})
            .fontSize(18)
            .borderRadius(8)
            .width(100)
            .margin({bottom: 20})
            .onClick(() => {
              // 根據年份計算生肖
              this.getBorn()
            })

            // 顯示計算結果
            Text(`${this.year} 年生肖是  ${this.born}`)
              .fontSize(20)
              .fontWeight(FontWeight.Bold)
        }
        .width('100%')
        .height('100%')
        .padding({top: '33%'})
      } else {
        // 計算中
        LoadingProgress().color(Color.Blue)
          .backgroundColor(Color.Transparent)
      }
    }
  }
}

6、總結

??想了解更多關于開源的內容，請訪問：??

??51CTO 開源基礎軟件社區??

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

責任編輯：jianghua 來源： 51CTO 開源基礎軟件社區

云數據庫代碼開發