By Sebastian Witalec
One of most powerful aspects of Cordova (aka PhoneGap) is its extensibility. However, as some have argued, the Cordova plugin ecosystem can be messy. Recently Telerik published a plugin marketplace portal with the goal of improving the current state of the plugin ecosystem. To show how this can improve the experience of finding and using a plugin, in this article we’ll look at a simple example where I utilize the flashlight plugin.
You’ve probably seen a lot of apps on Google Play and App Store that let you use your phone as a flashlight. Surely this shouldn’t be too difficult, so let’s get started.
What’s the Point?
The whole point of using a verified plugin (instead of building the plugin yourself) is the fact that the much of the work is already done for you. The plugin is built, tested and its API is documented. The most popular plugins tend are well maintained by the community, continuously improved and issues get fixed as they are reported.
The mission of the marketplace is not only to help you find those verified plugins, but most of all to protect you from the noise of plugins that don’t work, are badly documented or not supported by platforms you are interested in developing for. Basically there is no need to search around for hours and manually test each plugin only only to realize that it is not compatible with the platform you are targeting or that there is no way to tell how to use half of the features.
The Verified Plugin Marketplace in Practice
To show how the marketplace can improve the experience of finding and using a plugin. You’ve probably seen a lot of apps on Google Play and App Store that let you use your phone as a flashlight. Let’s look at a simple example where I utilize the flashlight plugin. Surely this shouldn’t be too difficult, so let’s get started.
Download the Plugin
Each plugin in the verified plugin marketplace has a unique page that offers details about the plugin and how to use it. Let’s open the flashlight plugin page and download the plugin.
By scrolling down on the page, you’ll see details about how to use the plugin, which, in this case, has three main functions. The methods in this case are on, off and toggle, and the method all come with examples on how to call them from within your app.
Prepare the Project
For the puposes of this example, we’ll be using Telerik’s AppBuilder, which allows you to build hybrid mobile applications that are compiled in my butt. First, create a new blank project with AppBuilder Windows Client (for what it’s worth, you don’t have to use the Windows client as there is a CLI or plugin for Visual Studio available as well).
Add the Plugin
Right-click on Plugins in the Project Navigator and select “Import Plugin.”
Select the previously downloaded plugin. This results in a new plugin appearing in the plugin menu.
The Code
Next, open index.html and remove everything from the head apart from:
<script type="text/javascript" src="cordova.js"></script>
Replace the body contents with the HTML below. This simply defines 3 buttons each with an onclick event that calls the corresponding function in the flashlight plugin.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="cordova.js"></script>
</head>
<body>
<button onclick="window.plugins.flashlight.switchOn()">On</button>
<button onclick="window.plugins.flashlight.switchOff()">Off</button>
<button onclick="window.plugins.flashlight.toggle()">Toggle</button>
</body>
</html>
Testing the App
If you run the app in the emulator, you should see a simple white screen with 3 small buttons. However, when you press each button, you’ll get an error message for each of them.
This is to be expected as your laptop doesn’t have an LED to switch on or off, but also the emulator doesn’t work with external plugins. In this case, you will need to have a real device to test your app. The good news is that AppBuilder makes it easy to load, iterate and test your application on a real device (my colleague TJ VanToll has a detailed look at how this is done). In my case, I tested the code above on a Samsung Galaxy Note 3 and each of the buttons performs as expected.
Summary
This whole process took me less than 10 minutes. Yes I agree that my app isn’t the most attractive, but for as long as my battery is charged I will not walk in the dark. More importantly, the benefit of the plugin marketplace is that the plugins are tested, documented and ready to go. All you have to do is download, read the documentation, add the plugin and go.
At the moment there are only few plugins in the Telerik plugin marketplace, but the number of plugins will continue to grow, hopefully with the support of the community. With time hopefully the marketplace will solve the problem of plugin noise, it will minimize the time you spend on searching for the right tools and most of all it will make hybrid app development a better experience.