What is Cordova?
Cordova is an open-source app development software used for the creation of hybrid mobile and web applications. It runs on a single codebase and helps create feature-rich applications with highly user-friendly UI/UX that help drive business scalability.
One of the most prominent features of Cordova is its huge plugin directory. With the use of Cordova Plugins, it becomes easier for you to add native functionalities to your applications in a simple and easy manner.
However, many times you might not find an existing plugin to meet your requirement for a specific native functionality even after browsing the entire Cordova Plugin Directory.
Such situations warrant for more technical and out of the box approach. You surely cannot sit back and not have the native functionality you need, placating yourself on the fact that the plugin is not available as yet. A wise approach will be writing your own plugin.
But with the range of technicalities and coding involved, Cordova Plugin Development is surely an art, a tricky and dark art for that matter. So, how can you have custom Cordova plugins?
Here is a Tutorial on How You Can Develop Your Own Cordova Plugins!
Plugin Development from Scratch on Cordova
Cordova App Development is a brilliant way to have feature-rich and high-functioning business applications and with the ability to create your own plugins over it, you can easily have any native functionality you need in your applications.
So, without getting into any further details or discussions, let’s begin with the steps for developing and writing your own plugin on Cordova.
Step 1: Create a Project in Cordova
The working in Cordova goes with the creation of Cordova Project. Since you are aiming to develop an entirely new plugin, you shall have to create a new project. You can create this project using a command line interface (CLI) or your preferred integrated development environment (IDE) for plugin creation.
To create this required Cordova Project, run the below command.
$ cordova create LogicLinkApp com.endare.logiclinkplugin
Step 2: Add Your Desired Platform(s)
Since Cordova supports cross-platform and hybrid applications, you need to choose the platform for which you are targeting the native app functionality. For the purpose of this tutorial, we shall be adding Android platform.
Run the below command to add the Android Platform to your Cordova Project.
$ cordova platform add android
When you add the platform, you also need to ensure that it is getting saved to config.xml and package.json.
Step 3: Install Plugman
This tool will help you create the Cordova Plugin. It’s available globally and you can easily install it by running the following command.
$ npm install -g plugman
In case you find any difficulty with the installation, there is a documentation and help file about plugman that can assist you. You can run plugman help command to access the said documentation.
Step 4: Create a Plugin Folder
Run the below command:
$ plugman create --name <pluginName> --plugin_id <pluginID> --plugin_version <version> [--path <directory>] [--variable NAME=VALUE]
When you will run this command, it will create a folder in your Cordova Project along with the plugin name you intend to create.
Step 5: Generate a Plugin Template
Once you have your plugin folder created, you need to generate a plugin template. For this, you need to add your desired platform to your plugin folder by running the below command:
$ plugman platform add --platform_name android
Step 6: Add Plugin Information by Adding Package.JSON File
Once your plugin template is generated, you are almost done with the creation of plugin. Now it’s time to define your plugin by adding information about it. For adding the desired plugin information, you need to add a package.json file to your plugin.
Run the below command for the same:
$ plugman createpackagejson <directory>
Step 7: Install the Plugin
Your plugin is ready for installation and you can add it to your Cordova Project for enjoying the desired Native functionalities.
Run the below command for installing and adding the created plugin to your Cordova Project.
$ plugman install --platform android --project platforms/android --plugin ../LogicLinkPlugin/
As you run this command, your plugin will get copied to the src folder for your desired program. So, in case you want to make any changes to this plugin in future, you cannot edit it in your Cordova Project. You shall have to uninstall it first, set up a new Cordova Project, make the changes, and then reinstall the plugin.
With such plugin creation, it becomes very convenient to work with native functionalities even in webview and create a highly feature-rich, functional, and advanced application.
Cordova Plugin Development is definitely a tricky process with a highly technical approach. But with the right knowledge, you can easily go by it and excel at it too. Happy Developing!