Using extra Cordova plugins with Evothings Studio

Hammad TariqBlogs, Tutorials

Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+
The app that utilizes the Cordova SMS plugin.

The app that utilizes the Cordova SMS plugin.

Evothings Client is essentially an app made using Apache Cordova; it works by making use of a number of selected Cordova plugins that mostly cover the needs of today’s IoT developer. These plugins come prepackaged with the Evothings Client that can be downloaded from the app stores. However, there can be a scenario where you need to integrate your own custom Cordova plugin or use extra plugins from the Cordova plugin registry. In such cases, you can build your own Evothings Client by making use of the Evothings repositories already available on GitHub.

In this tutorial, we will build a custom Evothings Client app from the source code and in the mean time we will integrate an extra Cordova SMS Plugin from the Cordova Plugins Registry.

Downloading the dependency packages

First, we need to install the following packages on our computer:

  • Node.js with npm module (latest version)
  • Ruby with redcarpet gem (latest version)
  • Cordova (version 5.0)
  • Git

On Windows, choose the option of using Git from the Windows Command Prompt during Git installation, because this makes things easier.

For building the app for Android also the following are needed:

For building the app for iOS also the following are needed:

  • OS X
  • Xcode

Next, clone the following Evothings Client repositories in a same-level directory:

Clone these repositories using Git commands or use a Git GUI Client, downloading them as zip files will lead to git errors at build time. For example, in the command line write the following commands:


git clone https://github.com/evothings/evothings-client
git clone https://github.com/evothings/evothings-examples
Both repositories should be placed in a same-level directory.

Both repositories should be placed in a same-level directory.

Creating a Local Configuration file

Next, create a new file called localConfig.rb inside the evothings-client directory and paste the below ruby script in the file:


@extraPlugins = [ {
:name => 'com.cordova.plugins.sms',
:remote => 'https://github.com/cordova-sms/cordova-sms-plugin'
} ]

In the name attribute, provide the ID of the new plugin and give URL of plugin’s git repository in remote attribute.

The optional localConfig.rb allows you to specify some other options as well. You can also download or clone the plugin locally and specify its path like below:


{:name => 'com.cordova.plugins.sms', :location => '../cordova-sms-plugin'}

If a plugin is available in Cordova plugin registry, simply specifying it’s ID in name attribute will do all the work:


{:name=>'com.cordova.plugins.sms'}

If you want the script to first try fetching the plugin from local directory and if not found then go to a remote location and clone the plugin, and also want to document it just like other plugins included in Evothings Client, specify the options like below:


{
:name => 'com.cordova.plugins.sms', :doc => MarkdownDocumenter.new('readme.md'), :location => '../cordova-sms-plugin', :remote => 'https://github.com/cordova-sms/cordova-sms-plugin'
}

Running the Build Script

Now, find a ruby script called “workfile.rb” in the evothings-client directory. Running this file does all the magic, i.e. it fetches all the required plugins and does all the necessary configurations to get Evothings Client in ship-shape.

To run workfile.rb, open your favorite command line console and run the following command:

ruby workfile.rb

This will build the Evothings Client app for you, by default the command will build the app for Android.

Note that on Windows you should either run the command from within the Git Bash shell, or in the Git installation choose the option of using Git from the Windows Command Prompt, otherwise Git won’t be found by the script.

Build Script Options

You may want to build the client app for iOS or Windows Phone 8 or may want to clean the target platform and build again. Conveniently, the workfile.rb script can handle all these requirements; following is the list of build switches that you can use:

c – clean target platform before building
ca – clean everything before building (removes platforms, plugins and documentation)
i – install after building
android – build Android
wp8 – build Windows Phone 8
ios – build iOS
doc – build documentation instead of Cordova app

Examples will be:

ruby workfile.rb
ruby workfile.rb i
ruby workfile.rb c i
ruby workfile.rb ios
ruby workfile.rb c ios

Please note that you can only build for one platform during one run, in order to build for another platform, try running the command again with a platform specific switch.

The build command can take a few minutes to create a successful build, however, the good thing is that you can see continuous progress in your command line console.

Once done, you can find the build package for your phone in the evothings/client/platform directory or can use the ‘i’ switch again (if you haven’t already) to install the client directly to your test phone or simulator/emulator.

Testing the SMS Plugin

As our custom Evothings Client is ready now, it’s time to test the SMS plugin we just installed.

Follow these steps:

  • Download and install Evothings Workbench on your computer.
  • Use the newly installed custom Evothings Client to connect to the Workbench.
  • Download the example Vanilla SMS app from its Github repository and save it to your preferred location.
  • Drag the example’s index.html file into the Evothings Workbench projects list and press the Run button. The Vanilla SMS example app will start within Evothings Client.
  • Enter a mobile number, text message and press the Send SMS button; the app will open the native SMS app with the number and message already passed into it.
  • Now open the index.html in your favorite code editor and analyze the sendSms function, this function is responsible for sending the SMS.

Note that SMS messages can be sent directly on Android by passing an empty intent in the configuration options, but for iOS and WP8, SMS has to go through the native operating system apps.

Similarly, if you need any other plugin, you can add that to Evothings Client as well. This will allow you to complete your IoT app utilizing all kinds of functionality offered by extra plugins while still making full use of live reload feature of Evothings Studio.