Huawei AGC React-Native Cloud Functions

---

Contents

- 1. Introduction
- 2. Installation Guide
- Creating a Project in App Gallery Connect
- Applying for the Cloud Functions Service
- Enabling Cloud Functions Service
- Creating a Cloud Function
- Creating a Trigger
- Integrating the React Native Cloud Functions Plugin
- Android App Development
- Integrating the React-Native AGC Cloud Functions into the Android Studio
- iOS App Development
- Integrating the React-Native AGC Cloud Functions into the Xcode Project
- 3. API Reference
- AGCCloudFunctions
- AGCFunctionOptions
- AGCTimeUnit
- 4. Configuration and Description
- 5. Sample Project
- 6. Licensing and Terms

---

1. Introduction

This module enables communication between HUAWEI Cloud Functions Kit and React Native platform. It exposes all functionality provided by HUAWEI Cloud Functions Kit . For more details, please refer to Getting Started with React Native

---

2. Installation Guide

Before you get started, you must register as a HUAWEI Developer and complete identity verification on the HUAWEI Developer website. For details, please refer to Register a HUAWEI ID.

$3

Creating an app in AppGallery Connect is required in order to communicate with the Huawei services. To create an app, perform the following steps:

Step 1. Sign in to AppGallery Connect and select My projects.

Step 2. Select your project from the project list or create a new one by clicking the Add Project button.

Step 3. Go to Project Setting > General information, and click Add app.
If an app exists in the project and you need to add a new one, expand the app selection area on the top of the page and click Add app.

Step 4. On the Add app page, enter the app information, and click OK.

$3

Cloud Functions is still in Beta state. To use Cloud Functions, send an application email to agconnect@huawei.com to apply for the service.

Set your email title in the following format: [Cloud Functions]-[Company name]-[Developer account ID]-[Project ID]. For details about how to query the developer account ID and project ID, please refer to Querying the Developer Account ID and Project ID.

Huawei operation personnel will reply within 1 to 3 working days.

> This email address is used only to process AppGallery Connect service provisioning applications. Do not send other consultations to this email address.

$3

Step 1. In AppGallery Connect, find your project, and click the app for which you want to use cloud functions.

Step 2. Select Build and Cloud functions on the left menu and click Enable Cloud Functions service.

$3

To create a cloud function, please refer Create a Function.

$3

To call a function in an app, you must create an HTTP trigger. For details, please refer to Create an HTTP Trigger. When calling a function in an app, you must transfer the identifier of an HTTP trigger. For details, please refer to Querying the Trigger Identifier

$3

Before using @hw-agconnect/react-native-cloudfunctions, ensure that the ReactNative development environment has been installed.

#### Install via NPM

``
npm i @hw-agconnect/react-native-cloudfunctions
`

#### Android App Development

##### Integrating the React-Native AGC Cloud Functions into the Android Studio

- Add the AppGallery Connect configuration file of the app to your Android Studio project.

Step 1: Sign in to AppGallery Connect and click My projects.

Step 2: Find your app project and click the app.

Step 3: Go to Project Setting > App information. In the App information area, download the agconnect-services.json file.

Step 4: Copy the agconnect-services.json file to the app's root directory of your project.

- Open the build.gradle file in the android directory of your React Native project. Navigate into buildscript, configure the Maven repository address and agconnect plugin.

`groovy
buildscript {
repositories {
google()
jcenter()
maven { url 'https://developer.huawei.com/repo/' }
}

dependencies {
/*
*
*/
classpath 'com.huawei.agconnect:agcp:1.9.1.301'
}
}
`

- Go to allprojects then configure the Maven repository address.

`groovy
allprojects {
repositories {
/*
*
*/
maven { url 'https://developer.huawei.com/repo/' }
}
}
`

- Open the build.gradle file in the android/app directory of your React Native project.

Set your package name in defaultConfig > applicationId and set minSdkVersion to 19 or higher.

`groovy
defaultConfig {
applicationId ""
minSdkVersion {{your_min version}}
/*
*
*/
}
`

Package name must match with the _package_name_ entry in _agconnect-services.json_ file.

- Configure the signature file.

`gradle
android {
/*
*
*/

signingConfigs {
config {
storeFile file('.jks')
storePassword ''
keyAlias ''
keyPassword ''
}
}

buildTypes {
debug {
signingConfig signingConfigs.config
}
release {
signingConfig signingConfigs.config
}
}
}
`

#### iOS App Development

##### Integrating the React-Native AGC Cloud Functions into the Xcode Project

- Navigate into your project directory and run below command.

`
[project_path]> cd ios/ && pod install
`

- Add the AppGallery Connect configuration file of the app to your Xcode project.

Step 1: Sign in to AppGallery Connect and click My projects.

Step 2: Find your app project and click the app.

Step 3: Go to Project Setting > App information. In the App information area, download the agconnect-services.plist file.

Step 4: Copy the agconnect-services.plist file to the app's root directory of your Xcode project.

Before obtaining the agconnect-services.plist file, ensure that you have enabled HUAWEI Cloud Functions. For details, please refer to Enabling HUAWEI Cloud Functions.

If you have made any changes on the Project Setting page, such as setting the data storage location and enabling or managing APIs, you need to download the latest agconnect-services.plist file and replace the existing file in the app's root directory.

- Initialize the AGConnect Core Sdk.

After the agconnect-services.plist file is imported successfully, initialize the AGConnect Core SDK using the config API in AppDelegate.

Swift sample code for initialization in AppDelegate.swift:

`swift
import AGConnectCore

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
...
func Application(_ Application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
// Override point for customization after Application launch.
AGCInstance.startUp();//Initialization
return true
}
...
}
`

Objective-C sample code for initialization in AppDelegate.m:

`objc
#import

@implementation AppDelegate

- (BOOL)application:(UIApplication )application didFinishLaunchingWithOptions:(NSDictionary )launchOptions
{
...
[AGCInstance startUp];
return YES;
}
...
@end
`

- All the React-Native AGC Cloud Functions plugin implementations are written in swift.

Make sure your Xcode target -> Swift Compiler - General tab includes Objective-C Bridging Header and Objective-C Generated Interface Header Name like below:

---

3. API Reference

$3

| Module | Description|
| ------------- | -------------------------------------------- |
| AGCCloudFunctions | Initializes an FunctionCallable instance and calls the cloud function. |
| AGCFunctionOptions | Cloud function configurations and parameters. |
| AGCTimeUnit | Enum of TimeUnits. |

$3

#### Method Summary

| Method |Return Type |Description |
|:------------------------------------------|-------------------|:---------------------------------------------|
| call(triggerIdentifier, options) | object | Configures and calls the cloud function. |

#### Methods

##### AGCCloudFunctions.call(triggerIdentifier, options)

Configures and calls the cloud function.

###### Parameters

| Name | Type | Description |
| ------- | --------------------- | ---------------------- |
| triggerIdentifier | string | HTTP trigger identifier of the cloud function to be called. For details about how to query the HTTP trigger identifier, see Querying the Trigger Identifier. |
| options | AGCFunctionOptions | Cloud function configurations and parameters. This parameter is optional. |
###### Return Type

|Return Type | Description |
|:---------------|:------------------------------------------------|
| object | The return value after the function is executed |

###### Call Example

`js
import AGCCloudFunctions, {
AGCTimeUnit,
} from "@hw-agconnect/react-native-cloudfunctions";

const triggerIdentifier = "";

const options = {
timeout: 1000,
timeUnit: AGCTimeUnit.SECONDS,
params: {
key1: "testString",
key2: 123
}
}

AGCCloudFunctions.call(triggerIdentifier, options)
.then(response => {
console.log(response);
})
.catch((error) => {
console.log("Error", error.toString());
});
`

$3

Cloud function configurations and parameters.

| Name | Type | Description |
| ------- | --------------------- | ---------------------- |
| timeout | number | Timeout interval of a function. For Android the unit is defined by the timeUnit parameter and the default time unit is seconds. For iOS time unit is seconds |
| timeUnit | AGCTimeUnit | Defines the time unit. Android Only |
| params | object | Custom object that contains input parameter values of the function, which can be of any type. |

$3

Enum of TimeUnits

#### Constants

| Value | Type | Field | Description |
| ------ | -------- | -------------------------------- | ---------------- |
| 0 | number | AGCTimeUnit.NANOSECONDS | Nanoseconds. |
| 1 | number | AGCTimeUnit.MICROSECONDS | Microsecons. |
| 2 | number | AGCTimeUnit.MILLISECONDS | Milliseconds. |
| 3 | number | AGCTimeUnit.SECONDS | Secons. |
| 4 | number | AGCTimeUnit.MINUTES | Minutes. |
| 5 | number | AGCTimeUnit.HOURS | Hours. |
| 6 | number | AGCTimeUnit.DAYS | Days. |

---

4. Configuration and Description

- Using the Debug Mode for Android and iOS platforms

$3

Before building the APK, configure obfuscation scripts to prevent the AppGallery Connect SDK from being obfuscated. If obfuscation arises, the AppGallery Connect SDK may not function properly.

`
-ignorewarnings
-keepattributes Annotation
-keepattributes Exceptions
-keepattributes InnerClasses
-keepattributes Signature
-keep class com.hianalytics.android.*{;}
-keep class com.huawei.updatesdk.*{;}
-keep class com.huawei.hms.*{;}
-keep class com.huawei.agc.*{;}
-keep class com.huawei.agconnect.*{;}
-repackageclasses
``

---

5. Sample Project

This plugin includes a demo project in the example folder, there you can find more usage examples.

---

6. Licensing and Terms

AGC React-Native Plugin is licensed under Apache 2.0 license