React Native如何快速集成华为AGC云数据库服务

​

 简介

AppGallery Connect（简称AGC）云数据库服务提供了端云数据的协同管理、统一的数据模型和丰富的数据管理API接口等能力。在保证数据的可用性、可靠性、一致性，以及安全等特性基础上，能够实现数据在客户端和云端之间的无缝同步，并为应用提供离线支持，以帮助开发者快速构建端云、多端协同的应用。

在本文中，您将建立一个基于AppGallery Connect云数据库的React Native应用程序，您的应用程序将具备数据的新增、查询和删除功能，具备数据的端云同步功能。

开通华为云数据库服务

  在AppGallery Connect页面点击"我的项目"，在项目的应用列表中选择需要开通云数据库的应用，导航选择"构建 > 云数据库"。如果是首次使用云数据库服务，请点击"立即开通"开通服务。

​

 

添加当前应用的配置文件

1、登录AppGallery Connect网站，点击“我的项目”。

2、在项目列表中找到您的项目，在项目下的应用列表中选择您需要集成SDK的应用。

3、选择常规页签下的“应用”区域，下载agconnect-services配置文件。

  • Android：下载agconnect-services.json文件。
  • iOS：下载agconnect-services.plist文件。

4、在React Native开发项目中添加配置文件。

  • Android：将配置文件agconnect-services.json添加到React Native项目的android/app目录下。
  • iOS：用Xcode打开React Native项目的iOS模块，将配置文件agconnect-services.plist添加进项目。

集成云数据库服务插件

进入项目工程目录下，使用如下命令安装云数据服务插件。

npm i @react-native-agconnect/clouddb

安装成功效果如下图：

​

界面设计

您可以在React Native项目中创建一个布局页面，参照下图进行设计，新增几个功能按钮：

​

前提条件

我的这次采用手机帐号登录模式，因此在工程配置前需要在AGC管理台启用AGC认证服务的手机号码，否则会登录失败。

1、登录AppGallery Connect网站，选择"我的项目"。

2、选择项目，单击“构建 > 认证服务”，如服务还未开通，请点击“立即开通”。

3、选择“认证方式”页签，单击“手机号码”对应"操作"列的"启用"。

​

4、在项目中完成认证服务相关方法的调用，手机号码认证的示例代码如下（在使用云数据库相关功能之前，请确保登录成功）：

const loginPhone = () => { 
   let credential = PhoneAuthProvider.credentialWithPassword(countryCode, phone, password); 
   AGCAuth.getInstance().signIn(credential).then(response => { 
      Alert.alert("Success", "Logged in  successfully.", 
         [ 
             { text: 'Okey.', onPress: () => props.navigate("CloudDBScreen") } 
         ]) 
   }).catch(error => { 
      Alert.alert("error: ", JSON.stringify(error.message)) 
   }) 
}

新增和导出对象类型

1、登录AppGallery Connect网站，选择"我的项目"。

2、在项目列表中选择您的项目。

3、在导航树上点击"构建 > 云数据库"。

4、单击"新增"，进入创建对象类型页面。

image.png​

5、输入"对象类型名"为"BookInfo"后，单击"下一步"。

6、单击“新增字段”，新增如下字段后，单击"下一步"。

image.png​

7、单击“新增索引”，设置"索引名"为"bookName"，"索引字段"为"bookName"后，单击"下一步"。

image.png​

8、按照如下要求设置各角色权限后，单击"下一步"。

image.png​

9、单击"确定"。创建完成后返回对象类型列表中，可以查看已创建的对象类型。

10、单击"导出"。

image.png​

11、选择导出文件格式，选择"Objective-C格式"和“java格式”。

12、单击"导出"。 文件将会导出至本地，其内包含该版本中所有的对象类型文件和对象类型信息文件。导出的Objective-C格式文件在后续步骤用于添加至本地iOS开发环境，导出的java格式文件则添加至本地Android开发环境。

新增存储区

1、登录AppGallery Connect网站，选择"我的项目"。

2、在项目列表中选择您的项目。

3、在导航树上点击"构建 > 云数据库"。

4、选择"存储区"页签。

5、单击"新增"，进入创建存储区页面。

image.png​

6、输入"存储区名称"为"QuickStartDemo"。

7、单击"确定"。

添加对象类型文件

在开发应用时，直接将AGC控制台上导出的Objective-C/java格式文件添加至本地iOS/Android开发环境，无需再次创建对象类型。如已存在，请覆盖原文件。为了保证顺利集成，请不要修改导出的Objective-C/java文件。

image.png​

初始化

在添加对象类型文件后，就可以使用云数据库进行应用开发。您在开发应用前，需要先执行初始化操作，初始化AGCCloudDB、创建对象类型和Cloud DB zone。初始化各步骤的关键代码如下：

在应用中初始化AGCCloudDB，获得AGCCloudDB单例，并创建对象类型。

const initCloudDB = () => { 
   AGCCloudDB.getInstance().createObjectType() 
      .then(res => showResult(res)) 
      .catch(err => showResult(err.message)) 
};

创建Cloud DB zone配置对象，打开该Cloud DB zone。

const zoneName = "QuickStartDemo"; 
const openCloudDBZone = () => { 
   let config = new AGCCloudDBZoneConfig( 
      zoneName, 
      AGCCloudDBZoneConfig.CloudDBZoneSyncProperty.CLOUDDBZONE_CLOUD_CACHE, 
      AGCCloudDBZoneConfig.CloudDBZoneAccessProperty.CLOUDDBZONE_PUBLIC 
   ); 
   AGCCloudDB.getInstance().openCloudDBZone2(config, true).then(response => { 
      setDbZone(response); 
   }).catch(error => { 
      Alert.alert("error: ", JSON.stringify(error.message)) 
   }) 
   AGCCloudDB.getInstance().addEventListener(listener) 
   AGCCloudDB.getInstance().addDataEncryptionKeyListener(listener) 
}

写入数据

我们在本节主要介绍如何在应用程序中进行数据写入操作，以便您了解如何使用Cloud DB SDK实现数据的写入。在应用界面中，我们增加了"writeData"按钮，用于用户新增数据，并通过executeUpsert实现数据的写入。关键代码如下：

const className = "BookInfo"; 
const book1 = { 
   id: 1, 
   bookName: "myBook", 
   author: "RDJ", 
   price: 123.99, 
   publisher: "Huawei", 
} 
const book2 = { 
   id: 2, 
   bookName: "myBook", 
   price: 12 
} 
const book3 = { 
   id: 3, 
   bookName: "myBook", 
   price: 125.32 
} 
 
const writeData = async () => { 
   let user = await AGCAuth.getInstance().currentUser(); 
   if (user) { 
      dbZone.executeUpsert(className, [book1, book2, book3]) 
         .then(res => showResult(res)) 
         .catch(err => showResult(err.message)) 
   } else { 
      Alert.alert("Error!", "Please sign in to use delete functionality") 
   } 
}

查看数据

点击“queryData”按钮，会弹框显示全部数据。调用executeQuery，AGCCloudDBQuery的第一个参数设置为where(className)，第二个参数设置为greaterThanOrEqualTo("price", 12)，会查询到的全部价格不低于12的数据。关键代码如下：

const queryData = () => { 
   let query = AGCCloudDBQuery.where(className) 
      .greaterThanOrEqualTo("price", 12) 
      .isNotNull("id") 
      .build() 
   dbZone.executeQuery(query, AGCCloudDBQuery.CloudDBZoneQueryPolicy.POLICY_QUERY_FROM_CLOUD_ONLY) 
      .then(res => showResult(res)) 
      .catch(err => showResult(err.message)) 
}

获取数据变化

在应用中新增的数据，将会被存储在云侧。在端侧注册数据变化侦听器，当云侧数据发生变化时，端侧能够感知数据变化，及时刷新本地应用数据。通过查询与dbZone.subscribeSnapshot 方法组合使用，可以指定侦听对象，当侦听对象的数据发生变化时，端侧会收到通知，根据数据快照获取变化的数据信息，从云侧同步数据至端侧应用。关键代码如下。

const subscribeSnapshot = () => { 
   let query = AGCCloudDBQuery.where(className).equalTo("publisher", "Huawei").build(); 
   dbZone.subscribeSnapshot(query, AGCCloudDBQuery.CloudDBZoneQueryPolicy.POLICY_QUERY_DEFAULT, listener) 
}

数据删除

您可以通过dbZone.executeDelete删除单个对象或一组对象。删除数据时，Cloud DB会根据传入对象的主键删除相应数据。关键对象如下：

const deleteData = async () => { 
   let user = await AGCAuth.getInstance().currentUser(); 
   if (user) { 
      dbZone.executeDelete(className, [book1, { id: 2 }, { id: 3 }]) 
         .then(res => showResult(res)) 
         .catch(err => showResult(err.message)) 
   } else { 
      Alert.alert("Error!", "Please sign in to use delete functionality") 
   } 
}

打包测试

1、重新编译后，使用Android Studio或者Xcode打开对应工程，点击运行按钮，在手机或模拟器上运行应用。您也可以打开终端，执行以下命令来运行应用。

yarn android

yarn ios

2、点击底部“Log In”按钮，页面跳转到注册登录页面。如果您未注册过手机帐号，需要先进行手机号码注册；如果您已注册过手机帐号，可以直接登录。登录成功后，会有提示弹框。

image.png​

image.png​

3、点击“init Cloud DB”按钮，弹出“Result null”提示框，表示初始化Cloud DB成功。

image.png​

4、点击“Open Cloud DB Zone”按钮，成功后页面会发生改变，显示出能进行数据库操作的功能按钮。

image.png​

image.png​

5、点击“Write Data”写入数据，看到成功写入3条数据的提示框。

image.png​

打开云侧，选中“数据”，选择对应的存储区和对象类型，就可以看到新增的数据了。

image.png​

6、点击“Query Data”按钮，与代码里查询条件一致，查询出价格不低于12的所有数据。

image.png​

7、点击“deleteData”按钮，删除id为1，2，3的三条数据，提示删除成功。

image.png​

您可以打开云侧，观察数据的变化，id为1，2，3的数据都已被删除。

image.png​

 

 

 


​

欲了解更多更全技术文章，欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh

posted @ 2022-07-12 14:03  华为开发者论坛  阅读(112)  评论(0)  编辑  收藏  举报