Intermediate: How to Integrate Cloud DB in Cordova
Introduction
Hi, today I will talk about Cloud DB which is a service of AppGallery Connect, can keep your client-cloud data in sync, and provide you with unified data models, and various data management APIs. The service offers the corresponding offline support for your app.
Integration Steps
Configure Your Development Environment
1. Sign in to AppGallery Connect, click My projects, and click your project card. Select an app from the app drop-down list at the top, and go to Build > Cloud DB. If it is your first time using Cloud DB, click Enable now.
2. Go to Project settings > General information. Download the app configuration file under App information.
- File for Android: agconnect-services.json
- File for iOS: agconnect-services.plist
3. Add the configuration file to your Cordova project.
- Android: Add the agconnect-services.json file to the android/app directory of the Cordova project.
- iOS: Open the iOS module of the Cordova project in Xcode, and add the agconnect-services.plist file to the project.
4. Go to your project directory, and use the following command to install the Cloud DB and Auth Service plugins.
cd cordova-agc-clouddb-demo
cordova plugin add @cordova-plugin-agconnect/clouddb
cordova plugin add @cordova-plugin-agconnect/auth
The result is as follows:
Designing the UI
You can create a layout in the Cordova project, and design the UI as displayed in the following figure, with several buttons for controlling the functions.
Prerequisites
Before using the service, you need to enable the anonymous account authentication mode for your app, where the anonymous sign-in function is required.
1. Sign in to AppGallery Connect and click My projects.
2. Find and click your project.
3. Go to Build > Auth Service.
4. If it is the first time that you use Auth Service, click Enable now in the upper right corner.
5. On the Authentication mode tab page, enable Anonymous account in the Operation column.
6. Add code to your project to call anonymous account authentication of Auth Service, before you use Cloud DB functions. Sample code:
Adding and Exporting Object Types
1. In AppGallery Connect, go to Build > Cloud DB.
2. Click Add to add an object type.
3. Set Object Type Name to BookInfo, and click Next.
4. Click + Add Field to add the following fields, and click Next.
5. Click + Add Index, set Index Name to bookName, select bookName for Indexed Field1, and click Next.
6. Set the following role permissions, and click OK.
7. Then you can find the created object type on the ObjectTypes tab page.
8. Click Export.
9. Export the record to the Objective-C and JAVA files.
10. Click OK. The exported local files contain all the object type information of this version.
11. Save these files for later use.
Adding a Cloud DB Zone
- On the Cloud DB page, click the Cloud DB Zones tab.
2. Click Add to add a Cloud DB zone, and set its name to QuickStartDemo.
3. Click OK.
Adding the Object Type File
Add the exported Objective-C file (for iOS) or Java file (for Android) to your Cordova project. If the file already exists, replace it with the exported one. To ensure successful integration, do not modify the exported Objective-C file or Java file.
Initializing Cloud DB
Before developing your app, you need to first initialize AGCCloudDBPlugin, and create a Cloud DB zone and an object type using APIs. Sample code:
1. Call AGCCloudDBPlugin.initialize to initialize Cloud DB.
2. Call AGCCloudDBPlugin.createObjectType to create an object type.
3. Create the Cloud DB zone configuration object, and call AGCCloudDBPlugin.openCloudDBZone2 to open the Cloud DB zone.
4. You also need to call AGCCloudDBPlugin.enableNetwork to check the network connection.
Writing Data
I added the executeUpsert button for calling executeUpsert to write user-created data when the button is tapped. Sample code:
Querying Data
I added the executeQuery button to query all data when the button is tapped. In AGCCloudDBQuery, set the first parameter to where(‘BookInfo’), and the second parameter to lessThan(“price”, 145). In this way, when calling executeQuery, query the BookInfo records with a price lower than 145. Sample code:
Listening for Data Changes
The added data in your app will be saved on the cloud. So you need to register a client-side listener to observe and act on changes to data on the cloud. Specify an object to be listened using executeQuery and subscribeSnapshot. When the data in the object is changed, your app will be notified and later obtain cloud data changes based on snapshots, and update the app data accordingly. Sample code:
Deleting Data
You can call agcCloudDBZone.executeDelete to delete a single object or a group of objects. Cloud DB will delete the corresponding data based on the primary key of the input object. Sample code:
Compiling and Testing Your App
1. Open your project in Android Studio or Xcode, and run your app on a mobile phone or simulator. You can also execute the following command on your device to run your app.
cordova run android
cordova run ios
2. Tap createObjectType. A modal dialog is displayed, indicating that the object type is created.
3. Tap openCloudDBZone2. A modal dialog is displayed, indicating that the Cloud DB zone is opened.
4. Tap enableNetwork to connect to the network.
5. Tap executeUpsert. A modal dialog is displayed, indicating that four data records are written.
In AppGallery Connect, go to Build > Cloud DB > Data Entries, select the target Cloud DB zone and object type, and check whether four data records are displayed.
6. Tap executeQuery to query the Bookinfo records with a price lower than 145, which are then listed in descending order by price.
7. Tap executeDelete to delete records with IDs that are 1, 2, and 3. A modal dialog is displayed, indicating that these records have been deleted. In AppGallery Connect, check whether these records are deleted.
Conclusion
In this article we have seen how to implement Huawei Cloud DB service into Cordova project that service ensures available, reliable, consistent, and secure app data, which can be seamlessly synced between the client and cloud, or across all clients.
Reference
You can find more details on Huawei Developer portal and get in touch with us if you have any questions. See you next!
