Creating a cordova plugin and using it with ionic

In this article I will show how you can create a cordova plugin and use it in an ionic project.

Prerequisites

Before you can start you need to install the following tools.

• Node 6 LTS
• NPM 3+

Creating a cordova plugin

Initialising the plugin

To create the project files for the cordova plugin you can use use plugman which is a nice cli. I was using version 2.0.0.

> npm install -g plugman

...

> plugman --version

2.0.0

> plugman create ^
    --name PingPong ^
    --plugin_id cordova-plugin-pingpong ^
    --plugin_version 0.0.1

> cd .\PingPong

`plugman create` will create the following file/folder structure.

PingPong
  src                             <- Folder for native code
  www                          <- Folder for JavaScript API which calls native code
    PingPong.js                          <- Public API 
  plugin.xml                 <- Plugin configuration file

The next step is to add the platforms you want to support. I'll show android as an example.

> plugman platform add --platform_name android

This command will add the platform to the plugin.xml file and change the folder structure to the following.

PingPong
  src                             <- Folder for native code
    android                               <- Folder for android native code
      PingPong.java                               <- Native code for PingPong.js
  www                          <- Folder for JavaScript API which calls native code
    PingPong.js                          <- Public API
  plugin.xml                 <- Plugin configuration file

Then you need to create a `package.json` file.

> plugman createpackagejson .

This is the final file/folder structure.

PingPong
  src                             <- Folder for native code
    android                               <- Folder for android native code
      PingPong.java                               <- Native code for PingPong.js
  www                          <- Folder for JavaScript API which calls native code
    PingPong.js                          <- Public API
  plugin.xml                 <- Plugin configuration file
  package.json             <- Project and NPM configuration

As `-` is an invalid character in package names in java you must change two files.
In PingPong\src\android\PingPong.java change the package name from:

package cordova-plugin-pingpong;

To:

package cordova.plugin.pingpong;

In PingPong\plugin.xml change the package name from:

<platform name="android">

  <config-file parent="/*" target="res/xml/config.xml">

    <feature name="PingPong">

      <param name="android-package" value="cordova-plugin-pingpong.PingPong" />

    </feature>

  </config-file>

  <config-file parent="/*" target="AndroidManifest.xml" />

  <source-file src="src/android/PingPong.java" target-dir="src/cordova-plugin-pingpong/PingPong" />

</platform>

To:

<platform name="android">

  <config-file parent="/*" target="res/xml/config.xml">

    <feature name="PingPong">

      <param name="android-package" value="cordova.plugin.pingpong.PingPong" />

    </feature>

  </config-file>

  <config-file parent="/*" target="AndroidManifest.xml" />

  <source-file src="src/android/PingPong.java" target-dir="src/cordova-plugin-pingpong/PingPong" />

</platform>

Writing the plugin

[Maybe there is something following]

Using the cordova plugin

Creating the ionic project and referencing the plugin

I'm going to use the cordova plugin in an simple ionic app. Therefore ionic must be installed. You should have the version 3.20.0 or greater.

> npm install -g ionic@latest

> ionic --version

3.20.0

Creating a new blank project via the cli is quickly done. You will be asked two questions while the tool creates the project.

> ionic start ionic-ping-pong blank

You can answer the following question with "Yes".

? Would you like to integrate your new app with Cordova to target native iOS and Android? (y/N)

And the next question you can answer with "No".

? Install the free Ionic Pro SDK and connect your app? (Y/n)

Set the current location to the newly created project.

> cd .\ionic-ping-pong 

The next step is to add the plugin.

> ionic cordova plugin add "{pathToCordovaPlugin}"

Then we can add the android platform to the ionic app.

> ionic cordova platform add android

Calling into native code

Now that the plugin is referenced calling it is easily done.

var success = function(result) {

  console.log("SUCCESS - " + JSON.stringify(result, undefined, 2));

}

var failure = function(result) {

  console.log("FAILURE - " + JSON.stringify(result, undefined, 2));

}

cordova.plugins.PingPong.coolMethod("Hello World", success, failure);

[Maybe there is stuff following about ionic native and angular providers]
[Maybe there is stuff following about device debugging]