Installing Plugman and creating Cordova plugin (iOS) using Swift — Part One

Hello Readers, Welcome back again

Today after a short break i am writing this article again on how to install Plugman and create a cordova plugin for iOS . In this article i shall be covering the topics which includes Plugman installation to how to add the plugin which we made plus how to remove that plugin too from our project

I will be trying to explain you very much clearly as it is little bit difficult to find any detailed articles which will be helpful for Cordova beginners like me. After much research and referring lots of articles finally i am consolidating all these in Medium which will be helpful for developers like you in coming years.

What is Plugman?

Plugman is a handy tool provide by Apache that sets up the plugin project, with support for iOS and Android. So it is basically used to create and manage plugins for different platform like iOS, Android or Web.

What is a plugin and what is the need for it?

While using the cross platform technologies like Cordova, ReactNative, Ionic or even Xamarin there are some scenarios where we would like to get the native APIs of the particular OS platform.

For example : if in iOS if we want to use the LocalAuthentication framework , WKWebkit framework through Cordova project we will needing a plugin which will be written in the native codes like Objective C or Swift and that plugin will be communicating with the .js codes of the Cordova, Ionic or ReactNative

In short, A plugin is a bridge for building native apps for the app stores that allows the javascript app to communicate with the native platform. Plugins provide access to device and platform functionality that is ordinarily unavailable to web-based apps.

Let’s Begin
First of all we must be requiring to install the Plugman through terminal . For that we will be using the npm commands for it. NPM stands for the Node Package manager and it must be installed before we start installing the Plugman. The steps for installing the npm can be found through the link by hovering and clicking over it : NPM INSTALLATION

After installing the npm through installer or HomeBrew or any specific way that you wish we can move to the first step of the Plugman installation.

STEP ONE: Installing Plugman

Open Terminal and Install plugman globally on your machine using the command as shown below:

npm install -g plugman

Sometimes while doing this the Terminal can show error “The operation was rejected by your operating system. It is likely you do not have the permissions to access this file as the current user”

Don’t worry incase of this you can just add “sudo” in front of the command and you will be resolving the above issue. The command will look something like:

sudo npm install -g plugman

On hitting enter the terminal will execute the command and it will be like this:

After installing Plugman

Finally the Plugman module is installed on your computer

STEP TWO: Creating a Plugin project

Now we need to create a folder where we are planning to store our plugins. It can be either in Desktop or Documents or Anywhere as per your wish. As of now if created a folder named “Plugman Plugins” in Downloads location and went into the folder using the “cd” command. After going to we will use the command template like below:

plugman create –name <plugin_name> –plugin_id <cordova-plugin-id> –plugin_version <plugin_version>

The above command template will be used as the following way to create the plugin project and it will look as:

plugman create --name DemoPlugin --plugin_id cordova-plugin-demoplugin --plugin_version 1.0

The command above after execution will create a folder with the name “DemoPlugin” and the plugin ID will be “cordova-plugin-demoplugin” with version “1.0” inside our “Plugman Plugins” folder . If we go to the folder we can see some thing like this

1. DemoPlugin folder is created inside “Plugman Plugins”

DemoPlugin folder

2. Inside DemoPlugin we have folders like this

Inside DemoPlugin

You will notice that src, www (.js) and plugin.xml files are already created for you by plugman. As we see it has the template for web that is “www” but nothing related to iOS or Android. So for that we need to move to the STEP 3

STEP 3: Adding the native iOS platform inside plugin

First we need to migrate to the DemoPlugin folder using cd command and need to run the plugman command template shown below :

plugman platform add –platform_name <android or ios>

So for adding the iOS platform which we require in this article we will use the the command shown below:

plugman platform add --platform_name ios

Command execution

On executing it in terminal pressing enter it will create a folder named ios under the “src” folder which will have a DemoPlugin.m with some demo code.

Folder structure

So we can see the DemoPlugin.m file is generated by default inside the folder. For creating the Swift file we need to delete this .m file and replace it with a DemoPlugin.swift file.

Next we have to configure the .swift file and the plugin files for the communication with the JS codes . Since this tutorial is already long we will be covering it in Part Two . So i hope the initial plugin setups are clear for the beginners using plugman.

Thanks for reading and Part Two can be read at : Part two