Multi-Device Hybrid Apps… Custom Plugins

Abstract

If you are starting a project and ready to add a few Cordova API plugins, you have many choices to choose from. If you’ve tried to add a custom plugin to your Multi-Device Hybrid app, you might have noticed there is no easy way to do that. In this post I will show you how that can be done.

Background

Cordova has moved into a modular design starting with version 3. For example, to call the device.version API, you need to include the Device plugin into your project. It also supports two different ways to add and remove plugins, depending on your choice of workflow. The result is the same. The first is to use the Cordova CLI to specify which plugin you want to install such as:

$ cordova plugin add org.apache.cordova.device

The second is to use a lower-level command line interface called Plugman. You can use Plugman the same way you use Cordova CLI such as:

$ plugman install --platform android --project C:\MyHybridApp --plugin https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git**

The main difference between the two is that with Plugman you can install plugins for one platform at a time unlike Cordova CLI which installs the plugins for all platforms. Therefore, you would use Plugman whenever you are targeting one platform at a time, a workflow referred to as “Native Platform Development”.

So What about Visual Studio?

Multi-Device Hybrid apps in Visual Studio provide you with a comprehensive list of plugins that you can use as shown in the figure below:

Plugins

To add those plugins to your project, all you have to do is open up your Config.xml file in Visual Studio and select the ones that you want to include. When you build your project, Visual Studio will call the underlying command line and add those to the Build. Unfortunately, there is no way for you to add a custom plugin to the list.

I Still Want a Custom Plugin

If you absolutely want to add your custom plugin and you’re not satiated with the built-in list, you have to first find a reliable repository for those plugins. There is a myriad of those on the web. Recently, Telerik added a great repository of verified plugins for PhoneGap and Cordova here. For this demo, i was keen to try the Local Notification plugin.

To add the plugin to our Visual Studio project, we would have to go out of Visual Studio and edit the Config.xml file in any text editor. Under features, add a new line with the URL of the plugin.

  <vs:features>
    <vs:feature>https://github.com/Telerik-Verified-Plugins/LocalNotification</vs:feature>
  </vs:features>

The final Config.xml with our built-in and custom plugins will look like:

<?xml version="1.0" encoding="utf-8"?>
<widget xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:vs="http://schemas.microsoft.com/appx/2014/htmlapps" id="io.cordova.MultiDeviceCustomPlugin" version="1.0.0.0" xmlns="http://www.w3.org/ns/widgets">
  <name>MultiDeviceCustomPlugin</name>
  <description>
    A blank project that uses Apache Cordova to help you build an app that targets multiple mobile platforms: Android, iOS, Windows, and Windows Phone.
  </description>
  <author href="http://cordova.io" email="dev@cordova.apache.org">
    Apache Cordova Team
  </author>
  <content src="index.html" />
  <access origin="*" />
  <preference name="SplashScreen" value="screen" />
  <vs:features>
    <vs:feature>org.apache.cordova.splashscreen@0.3.1</vs:feature>
    <vs:feature>org.apache.cordova.file@1.2.0</vs:feature>
    <vs:feature>https://github.com/Telerik-Verified-Plugins/LocalNotification</vs:feature>
  </vs:features>
  <vs:platformSpecificValues />
</widget>

Once you build the project, you will see the cream of the crop. Visual Studio uses Plugman to install those plugins to our project. That makes sense since it targets one platform at a time.

Capture3

You can have Plugman download those plugins from the web, or you can eventually have a Plugins folder in your project where you keep all your custom plugins. You can have Plugman install those plugins from your local directory.

Now we can call the Local Notification API

    function callCustomPlugin() {

        window.plugin.notification.local.add({
            id: 'myID',
            title: 'I will bother you every minute',
            message: '.. until you cancel all notifications',
            sound: null,
            autoCancel: true,
            date: new Date(new Date().getTime() + 10 * 1000)
        });
        
    };

 

Conclusion

Although it’s still in Preview, you can start learning and experimenting with Multi-Device Hybrid Apps in Visual Studio. Now you have the option to add your custom plugins and create real mobile applications (not for production use yet). Visual Studio uses all the great Cordova interfaces and does all the heavy lifting for us so we can completely focus on development and enjoy the best IDE. A word of appreciation also goes to the Telerik team and their fantastic Telerik Platform as it makes it a joy to develop Hybrid Mobile Apps that are production ready. They offer a nice GUI to add your custom plugins to the project whether you are using the In-browser IDE, Desktop IDE or Visual Studio.

 

6 Comments
  • Laura Leonard
    September 6, 2014

    Thank you for the post. I have just started using VS to build a phoneGap app. Do you know of any tutorials for adding a splashscreen that will work on all devices. I have placed all of my png files in the res folder. I used a site: http://ticons.fokkezb.nl to create all of the various sizes. I selected the Splashscreen plugin in the properties pane as described in your blog. I am using jquery and created a script as follows:

    $(document).on(‘pageinit’, ‘#splash’, function () {
    setTimeout(function () {
    $.mobile.changePage(“#home”, “fade”);
    }, 5000);
    });

    And the current html is:

    Obviously it is pointing to the images folder at present but do you know how to point to the res folders depending on the device being loaded? Forgive my ignorance, I’m a newbie! 🙂

  • George Saadeh
    September 6, 2014

    Hi Laura,

    I suggest that you take a look at this documentation article http://docs.phonegap.com/en/3.5.0/config_ref_images.md.html as it has the information that you need. You will be relying heavily on the config.xml file to deliver platform specific images and icons. There is also this article that has a lot of info on the subject http://tech.pro/blog/1704/2-ways-to-get-started-with-phonegapapache-cordova.

    I hope this helps.

    George

  • Badrudeen
    September 10, 2014

    Great Article.

  • Laura Leonard
    September 12, 2014

    Thanks George. I will take a look at those articles.

  • A.
    March 16, 2015

    i tired the same thing in vs2013 u4 & cpt3 but after window.plugin the notification doesn’t show up, before you example i tried other notification plugin and I faced the same problem. could you please help me to solve this problem.
    by the way I’m trying to show notification in the notification center.

  • Sahar Pournasseh
    April 2, 2016

    Thank you so much, but when I try this, it gives me an error

    Error 30 The command “”C:UsersSahariAppDataRoamingnpmnode_modulesvs-mdavs-cli” build –platform “Android” –configuration “Debug” –projectDir . –projectName “Jasjar” –language “en-US” –buildServerUrl “” –buildTarget “AndroidDevice”” exited with code 8. C:UsersSahariAppDataRoamingnpmnode_modulesvs-mda-targetsMicrosoft.MDA.targets 99 5 Jasjar
    if you could answer this, it would be great

Leave a Reply

Your email address will not be published. Required fields are marked *