In this tutorial I will show you how to add plugins to phonegap build apps. When it come to building apps with the phonegap build service in the cloud everything is configured by the config.xml file.
As we are moving further into my phongap build beginner course now you should be comfortable with using the phongap build interface by now.In the previous tutorial I covered how to create a basic config.xml file form scratch here. We will be working with the same config.xml file which we created in the previous tutorial.
Plugins in phonegap build apps can be added either form a git repo or as a npm package. All we need to do is to add
<plugin> tag to our config.xml file with
<plugin name="cordova-plugin-admobpro" source="npm"/>
name of the plugin can be obtained by searching the cordova plugin repo here. More on how to select a plugin in the tutorial video below.
To add form a git repo you need to add the git url as the value of the
<plugin spce="https://github.com/floatinghotpot/cordova-admob-pro" source="git"/>
Adding plugin this way will get the master branch of the repo.
A few things to note before we move ahead the order in which you add the plugins does not matter. Also you can add plugins that are form both git as well as npm but remember not to add the same plugin twice.
Full documentation for adding plugins can be found here.
Installing a specific version of phonegap plugin
There will come a time when you will need to install a specific version of a plugin for some reason.
This can be easily achieved by adding the
spec attribute to the plugin tag when you are using npm to get your plugins along with the
<plugin name="cordova-plugin-admobpro" source="npm" spec="1.1"/>
here the plugin with the verison 1.11 will be fetched.
You can use the
~ tilde symbol in front of the version number to get fussy matched versions. For example the following will get plugin with major version 1.x and will get the highest minor version
<plugin name="cordova-plugin-admobpro" source="npm" spec="~1"/>
So if the highest minor version is 1.5 it will fetch that version of the plugin.
We can take the fussy match one level deeper as well to match for [major].[minor] versions and get the highest patch as follows
<plugin name="cordova-plugin-admobpro" source="npm" spec="~1.5"/>
This will get the highest patch version of the plugin 1.5.x
If you wish to add a specific branch or commit form a git repo you can add the name of the branch with the url of the repo separated by a hash(#)
<plugin spce="https://github.com/floatinghotpot/cordova-admob-pro#sub-branch" source="git"/>
As show above the
#sub-branch should be the name of the branch / commit that you want to use form the git repo. Read more about it here.
Checking available plugin versions
It is easy to get the plugin branch / commit when you are adding plugins for a git repo as github gives a list of all the available branches, but if you are adding plugins for NPM you can check which versions of a plugin are available you can do that as show here.
Adding plugins to config.xml file
Now it’s time to actually add a few plugins to the config.xml file that we created in the previous tutorial. So after adding the plugins we get the following code in config.xml file.
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.pointdeveloper.myapp"
versionCode = "1"
version = "1.0.0" >
<!-- versionCode is Android only -->
<!-- version is in major.minor.patch format -->
<name>PhoneGap Example App</name>
An example for phonegap build app which wont show up in the playstore.
<author href="https://YourWebsite.com" email="yourEmail@goesHere.com">
Name Of The Author
<plugin name="cordova-plugin-x-socialsharing" source="npm" />
<plugin name="cordova-plugin-inappbrowser" source="npm"/>
<plugin spec="https://github.com/floatinghotpot/cordova-admob-pro" source="git" />
<plugin name="cordova-plugin-network-information" source="npm" />
<plugin name="cordova-universal-clipboard" source="npm"/>
<plugin name="phonegap-plugin-barcodescanner" source="npm"/>
Once you know what values to use adding plugins for phonegap build is literally as easy as just adding a tag to the config file. As mentioned in the video the phonegap build repository is depricated so make sure you are using npm or github as you plugin source.
Watch Video Tutorial Here: