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]

Comments

Post a Comment

Popular posts from this blog

Components of Tasks & Threading in .NET

Image
I recommend understanding the basics of async and await before you read this article. This is a good introduction from Stephen Cleary. As you might know simply using async and await doesn't mean your code is executed on different threads. To achieve this you must use Task.Run , TaskFactory.StartNew or the Task Parallel Library . This is an introduction in the different components at play when you want to schedule tasks on different threads. TaskFactory The TaskFactory is a simple container where you can configure options for the creation and continuation of Tasks. Furthermore you can specify an canncelation Token which will be used by all Tasks created through this factory. And lastly you can define your own TaskScheduler. It's your choise if you want to use a TaskFactory to start a new task or if you want to start a task directly trough Task.Run. MSDN TaskFactory TaskScheduler The TaskScheduler is responsible to run the next task on the correct ...
Read more

Debugging information and visual studio

Image
Without debugging information there is no debugging. By default debugging information is included when you build your project with the Debug configuration. Configuring debug information When you create a new project with .NET , Visual Studio provides two default build configurations in your project. Debug and Release . A solution build configration defines which projects are built and deployed for which target platform ( x86 , x64 or Any CPU ) although the platform can be overwritten by the project build configuration. The solution file ( .sln ) holds the values you configured. A project build configuration can define anything you can configure in the project file ( .csproj ). But they are mainly used to configure the target platform, if the output should include debugging information and if the complier should optimize the code. When debugging information is included the default ( Portable for .NET Core and Pdb-only for .NET ) is that a seperate symbol file is beeing create...
Read more

Gluing things together

Gluing things together One of the most important things in coding is how to hold it together. In this short article I will share some thoughts on callbacks, events, observables, promises and tasks. This is what I have experienced in my time programming and I would be glad if you could share if you don't agree with me on something. Why callbacks are bad When I started programming some years ago I started with C# and Javascript. While .NET already had the Event in Javascript callbacks were everywhere. Then the word "callback hell" was coined. In short callbacks and also Events for that matter are bad because they defere the code execution to some other place which can be hard to find especially when you are following from one callback to the next for multiple steps. Therefore it pollutes the code and can separate concern which should not be separated. Why callbacks can be good Defered execution is not always bad. To create modulation and structure callbacks an...
Read more