How to create HMS Push Kit Cordova Plugin from scratch feat. Plugman - Huawei Developers

The original article is from HUAWEI Developer Forum
Forum link: https://forums.developer.huawei.com/forumPortal/en/home
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Applications built specifically for mobile have been with us for more than 10 Years. Within that period the mobile development market has changed a lot. The way developers are approaching towards creating apps are not limited, in fact they have created their own ways for shortening development time. And that’s how cross-platform development was born.
Cross-platform, such as Cordova, Ionic, React Native, Flutter etc., are gaining a lot of attention especially for web developers who has knowledge about HTML,CSS, JavaScript etc. These platforms are also offering better opportunities to build native like experiences for developers.
Today we are going to learn, how to create Apache Cordova Plugin from scratch using HMS Core Capabilities.
Prerequisite
We must have latest version of Node installed on our machine.
We must have latest version of Visual Studio Code installed on our machine.
Once we installed Node, we can run the following command using command prompt (cmd) from anywhere in our environment to install Plugman and Cordova globally, so that it is available from any directory:
Code:
$ npm install -g plugman
$ npm install -g cordova
-g here indicates that Plugman installation is globally supported.
Why Plugman?
Plugman is a useful command line tool for installing and uninstalling or managing Cordova plugins. It supports multiple platform such as Android, iOS etc.
Let’s do it
First we create a separate folder in our system, where we want to create plugin. After we find a separate space, we copy the location and open command prompt to go to the specific location using cd command:
Code:
$ cd your/specific/location
Creating Plugin
We create plugin using below command.
Code:
$ plugman create --name HMSPushPlugin --plugin_id com.huawei.hmspushplugin --plugin_version 1.0.0
In the above command we are providing
a) Name of the plugin
b) Plugin id
c) Plugin version.
After creation of plugin, we use cd command to go to plugin location.
Code:
$ cd HMSPushPlugin
Adding Platform
We will add Android platform using below command.
Code:
$ plugman platform add --platform_name android
Create package.json
We will create package.json file using below command.
Code:
$ plugman createpackagejson .
Answer the questions presented, and you will end up with a package.json that looks like this:
Code:
{
"name": "hmspushplugin",
"version": "1.0.0",
"description": "hms push kit",
"cordova": {
"id": "com.huawei.hmspushplugin",
"platforms": [
"android"
]
},
"keywords": [
"ecosystem:cordova",
"cordova-android"
],
"author": "sanghati",
"license": "ISC"
}
Folder Structure
After going through all the above command, the structure of the plugin creation will look like this:
Plugin.xml is one of the most important files here. It’s what Cordova parses to figure out what platforms your plugin supports, preferences it has that the user can configure, source files we’ll include in our final app build, and more. Now if you peek into src folder, you may end up seeing native codes of Android or iOS or both. Finally, www is where the JavaScript code for our plugin lives. This is what gets called first and then kicks off Cordova to call our native code.
Role Play of Visual Studio Code
Now we open VS code and open the folder of the plugin and start modifying the plugin.xml file it is where everything happens and it’s where we should start first.
Modify the plugin.xml as shown below:
Code:
<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"
xmlns:android="http://schemas.android.com/apk/res/android"
id="com.huawei.hmspushplugin"
version="1.0.0">
<name>HMSPushPlugin</name>
<!-- Js file -->
<js-module
name="HMSPushPlugin"
src="www/HMSPushPlugin.js">
<clobbers target="cordova.plugins.HMSPushPlugin" />
</js-module>
<!-- Platform is added here -->
<platform name="android">
<framework src="src/android/build.gradle" custom="true" type="gradleReference" />
<!-- Push kit dependency -->
<framework src="com.huawei.hms:push:4.0.0.300"/>
<config-file parent="/*" target="res/xml/config.xml">
<feature name="HMSPushPlugin">
<param
name="android-package"
value="com.huawei.hmspushplugin.HMSPushPlugin.HMSPushPlugin" />
</feature>
</config-file>
<config-file parent="/*" target="AndroidManifest.xml" />
<!-- Android source file is added here -->
<source-file src="src/android/HMSPushPlugin.java" target-dir="src/com/huawei/hmspushplugin/HMSPushPlugin" />
<source-file src="src/android/MessageService.java" target-dir="src/com/huawei/hmspushplugin/HMSPushPlugin"/>
</platform>
</plugin>
If we want to change the id or name then we need to give our plugin a unique name and id. As far as naming conventions go, the id is usually of the form this-is-my-plugin, like for example huawei-cordova-pushkit-plugin.
The js-module specifies the JavaScript code that will run, and <clobbers> sets what variable the plugin will be exported under. So, in this case, our script file is www/ HMSPushPlugin.js, and when our app runs, we’ll be able to access the plugin using cordova.plugins.HMSPushPlugin.
We specify the platforms we are going to support, along with references to the corresponding native code for each. Here we added Android as platform. Inside of <config-file> we specify our Android package name and also the symbol cordova will use to identify our plugin, in this case it’s HMSPushPlugin. Finally, we have a reference to our main Java code inside of <source-file> which is where our native code lives.
Adding HMS Push Kit
As we have mentioned two <source-file> in plugin.xml file. So, we need to create add two java file in our android directory.
This is not all. For more information about this, you can visit HUAWEI Developer Forum.

---

Interesting, thanks