[Huawei Developers] Freemind R:
More articles like this, you can visit HUAWEI Developer Forum​

In this article I’m going to show you how to integrate Cordova application with HMS bindings. But first let’s talk about what is Cordova and how to settings up an application using CLI.

What is Cordova?

Cordova is an open-source mobile development framework. It allows you to use standard web technologies such as HTML5, CSS3, and JavaScript for cross-platform development, avoiding each mobile platforms’ native development language. Applications execute within wrappers targeted to each platform, and rely on standards-compliant API bindings to access each device’s sensors, data, and network status.

There are several components to a Cordova application. The following diagram shows a high-level view of the Cordova application architecture.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/023/105/698/0890090000023105698.20200709165330.37405902878862626329422457141668:50510716030200:2800:B4B5F307EE32EBC9138E1EF78129EF7CADE63A8613377C416ED7503B69CBE8AE.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/023/105/698/0890090000023105698.20200709165330.37405902878862626329422457141668:50510716030200:2800:B4B5F307EE32EBC9138E1EF78129EF7CADE63A8613377C416ED7503B69CBE8AE.png[/IMG]​

Use Cordova if you are:

a mobile developer and want to extend an application across more than one platform, without having to re-implement it with each platform’s language and tool set.

a web developer and want to deploy a web app that’s packaged for distribution in various app store portals.

a mobile developer interested in mixing native application components with a WebView (browser window) that can access device-level APIs, or if you want to develop a plugin interface between native and WebView components.

Setting Up Environments

Cordova command-line runs on Node.js and is available on NPM.

To ensure your machine has these environments;

Open a command prompt or Terminal, and type npm -v and node -v

I assume that, you’ve already installed these environments.

Open a command prompt or Terminal, and type npm install -g cordova

Once you finished installation, we’re ready to create cordova project.

Create a blank Cordova project using the command-line tool. Navigate to the directory where you wish to create your project and type cordova create <path> NAME_OF_APP.

For a complete set of options, type cordova help create.

After creating a Cordova project, navigate to the project directory. From the project directory, you need to add a platform for which you want to build your app.

To add android platform, type cordova platform add android.

[IMG="https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/023/105/698/0890090000023105698.20200709165604.27299994012475733779456702366034:50510716030200:2800:CDD3EDF0EEB063027A2C0BF1C56BF06C0589ED7599BCA175620FB238666CC21D.png"]https://communityfile-dre.op.hicloud.com/FileServer/getFile/cmtybbs/023/105/698/0890090000023105698.20200709165604.27299994012475733779456702366034:50510716030200:2800:CDD3EDF0EEB063027A2C0BF1C56BF06C0589ED7599BCA175620FB238666CC21D.png[/IMG]​

Connect your phone to Machine and command line, run cordova run android. Application will be deploy on your phone.

Plugins.xml

Plugins are an integral part of the Cordova ecosystem. They provide an interface for Cordova and native components to communicate with each other and bindings to standard device APIs. This enables you to invoke native code from JavaScript.We will implement our plugin for execute scripts,

customized gradle file and modify manifest file.

<hook src="scripts/lib/moveAgconnectServices.js" type="before_plugin_install" />
<!-- hook for add maven repositories and agc plugin-->
<hook src="scripts/android/after_plugin_install.js" type="after_plugin_install" />
<hook src="scripts/android/before_plugin_uninstall.js" type="before_plugin_uninstall" />
<framework custom="true" src="src/android/build.gradle" type="gradleReference" />
<!-- Push Kit dependency-->
<framework src="com.huawei.hms:push:4.0.0.300" />
<framework src="com.huawei.agconnect:agconnect-core:1.3.1.300" />
<config-file target="res/xml/config.xml" parent="/*">
<feature name="PushPlugin">
<param name="android-package" value="com.hms.cordova.plugin.PushPlugin"/>
</feature>
</config-file>
<config-file parent="/manifest/application" target="AndroidManifest.xml">
<service android:exported="false" android:name="com.hms.cordova.plugin.PushService">
<intent-filter>
<action android:name="com.huawei.push.action.MESSAGING_EVENT" />
</intent-filter>
</service>
</config-file>
<source-file src="src/android/PushPlugin.java" target-dir="src/com/hms/cordova/plugin" />
<source-file src="src/android/PushService.java" target-dir="src/com/hms/cordova/plugin" />

Let’s focus on it step by step;

<hook src=”scripts/lib/moveAgconnectServices.js” type=”before_plugin_install” />

This hook parameter provide us to execute our custom script before plugin install. Therefore if we need to custom configuration, hook parameter provide us to handle it. As well as it provides after install, after uninstall and before uninstall.

<framework custom=”true” src=”src/android/build.gradle” type=”gradleReference” />

framework parameter identifies a framework (usually part of the OS/platform) on which the plugin depends. We’re using it for customized build.gradle file to add dependencies.

<config-file target=”res/xml/config.xml” parent=”/*”> <feature name=”PushPlugin”> <param name=”android-package” value=”com.hms.cordova.plugin.PushPlugin”/> </feature> </config-file>

config-file parameter identifies an XML-based configuration file to be modified. We’re using it for used to specify the push plugin. Also used for customized AndroidManifest.xml to add permissions.

<source-file src=”src/android/PushPlugin.java” target-dir=”src/com/hms/cordova/plugin” />

source-file parameter identifies executable source code that should be installed into a project. We’re using for our plugins which are PushPlugin and AnalyticsPlugin.

Writing Android Java Plugin

Writing a plugin requires an understanding of the architecture of Cordova-Android. Cordova-Android consists of an Android WebView with hooks attached to it. These plugins are represented as class mappings in the config.xml file.

A plugin will consist of at least a single Java class that extends the CordovaPlugin class. A plugin must override one of the execute methods from CordovaPlugin.

public class PushPlugin extends CordovaPlugin {
private static final String TAG = PushPlugin.class.getSimpleName();
@Override
public boolean execute(String action, JSONArray args, final CallbackContext callbackContext) {
if (action.equals("getToken")) {
getToken(callbackContext);
}
return true;
}
private void getToken(CallbackContext callbackContext) {
Log.i(TAG, "get token: begin");
try {
String appId = AGConnectServicesConfig.fromContext(cordova.getContext()).getString("client/app_id");
String pushToken = HmsInstanceId.getInstance(cordova.getContext()).getToken(appId, "HCM");
if (!TextUtils.isEmpty(pushToken)) {
Log.i(TAG, "******TOKEN******:" + pushToken);
PluginResult pluginResult = new PluginResult(PluginResult.Status.OK, pushToken);
callbackContext.sendPluginResult(pluginResult);
}
} catch (Exception e) {
Log.e(TAG, "getToken Failed, " + e);
PluginResult pluginResult = new PluginResult(PluginResult.Status.ERROR, e.getMessage());
callbackContext.sendPluginResult(pluginResult);
}
}
}

We compare the value of the action parameter, and dispatch the request off to a (private) method in the class, optionally passing some of the parameters to the method. We’re getting parameter from JavaScript’s exec function gets passed into the Plugin class's execute method than called getToken() metod.

Inside getToken() metod, we’re using HMS java code to provide us token depends on our appId, than we received token, return to callback with tokenId with PluginResult object. It will be pass data from java to JavaScript UI layer of our android application.

getToken: function() {
window.plugins.PushPlugin.getToken(function(res) {
alert( res);
}, function(err) {
alert(err);
});
},

In UI layer of android, we’re implement a button and add on_click trigger. As retun from PluginResult in CordovaActivity, show and alert of token which received from HmsInstanceId.