Hybrid App Development

Html 5 Technologies provide a convenient way for developing apps in less time. The advantage of using HTML5 is that there would be only one piece of code that would run on any of the mobile platforms, however there are also some limitations when it comes to support some complicated features. Well, Nevertheless it is time efficient and a great approach for app development.

If you have good knowledge of javascript, html and css then be ready to become an hybrid app developer.

There are various frameworks and plugins available in market today for Hybrid App development. Phonegap, Titanium and Mosync are widely used out of them.

As far as User Interface is considered, I personally prefer AngularJS, Ionic, Jquery Mobile or ExtJs. It would be great if you have knowledge of any of them because that would really cut down a lot of UI part of work in the development process.

Hybrid Application Development using Java

So are you a Java developer or Native Android / Blackberry developer and want to create cross platform applications that can run on Android or iOS or Windows? Well, there is a solution for core java developers to create cross platform apps without knowing much about Javascript or HTML at deeper level.
The frameworks like GWT (Google webkit tool) and MGWT (Mobile-gwt) allows the programmer to code in core java and deploy application on various operating systems. How it works? Well, just like any other frameworks, GWT and MGWT provide their own APIs and UIs to be used in the project. These frameworks have their own life cycle much similar to Android life cycle. The java classes which you have used in your project get converted into .class and later they are packaged and get converted into JS, HTML and CSS during compilation phase, then cordova perform its actions. How? When you create a mgwt base project then it downloads certain dependencies and out of them there is a phonegap wrapped with gwt package, i.e. gwt-phonegap which allows you to use phonegap's APIs and to create executables for different OS. It is very obvious that you need particular SDKs for the creation of executables. Here is the link that provides you complete setup of Mgwt based project using CLI and Eclipse IDE : Click Here !

Apache Cordova : New way of Implementation : Changes from 2.9 to 9.X version

Apache Cordova has changed its way of implementation from 3.0 version and onwards. Until 2.9 version, you need to download a jar file of cordova, js of cordova and config.xml from the repository or in other words, you need to download whole cordova package and include it in your project with many manual modifications. For example in Android project, you need to add xml folder to res folder, www folder in assets and have to add jar file as project dependency to make the project as cordova based project. From 3.0 version, a lot of manual work is cut down by simply running few commands on command line. The CLI approach is considered to be less time consuming and effective in distributing app over multiple platforms. However, sometimes it looks quite encapsulated as you don't get the deeper level information about what's happening behind the scene. So how it works? well, first of all there is certain requirement of tools that are need to install in the system in order to have hassle free cordova based development. The list of initial requirements are as follows :

Node.js
Cordova
Git
SDKs of the OSs like Android SDK or Xcode for iOS etc

Do not forget to configure Environment variables of your system with above installations else nothing would work! You may navigate to MyComputer>RightClick>Properties>Advanced system settings>Environment variables for configuration.

Unlike previous versions, before 3.0, you have an already created jar file or cordova library but now, cordova library is generated on runtime and according to the requirements of the project. For example, you use cordova plugins in your project then cordova library would have the information of only those plugins which are being used in the project and not of any other plugins. I personally use Eclipse IDE to explore and work on any cordova based project as well as CLI as per convenience. If I may give you an advice then it would be explore more in Eclipse IDE, try to understand the cordova library, read its classes and implementation that would make you much clear about the 'hows' and 'whys'.

So through CLI, you can create your project, add platform to it, add plugins to it, compile or run your project and many other operations by just execution few commands. A list of commonly used operations are described below :

Purpose	Command
To Create the project	Cordova create ‘directory name’ <space> ‘packageName’ <space> ‘app display title’
To add a platform	Cordova platform add <platform name>
To add a plugin	Cordova plugin add <plugin name>
To update the platform	Cordova platform update <platform name>
To remove platform	Cordova platform rm <platform name>
To remove plugin	Cordova plugin rm <plugin name>
To update platform to a particular version	Cordova platform update <platform@version>
To add platform of a particular version	Cordova platform add <platform@version>
To add plugin of a particular version	Cordova plugin add <pluginName@version>
To build application	Cordova build
To create debug android apk	Cordova build android --debug

Apache Cordova Support for Windows 10 : Steps to build Apps for Windows 10 Desktop, Windows 10 Surface and Windows 10 Phone using Apache Cordova

Excited! Yes, Apache Cordova has support for developing apps for Windows 10 Desktop, Windows 10 Surface and Windows 10 phone. In this article, we would discuss about the development environment, Initial setup, tools and other requirements for developing Windows 10 universal apps using Apache Cordova. Till now, I have tried the two ways of developing Hybrid Apps for Windows 10, first one is simply using Microsoft Visual Studio 2015 Community along with Microsoft Windows 10 SDK and the other one is using Microsoft Visual studio 2015 Express along with Command line and Microsoft Windows 10 SDK. So I would discuss the second approach first and later I would add the first solution for developing universal Windows 10 Apps. The reason why I am discussing the second solution first is just because it has command line approach so that most of the developers who use Cordova command line tool can connect very easily. So lets start! Here are the steps to create Cordova based Universal Windows 10 Applications :

Approach One - Using MS Visual Studio Express 2015 with CMD and Windows 10 SDK:

-You ought to have Windows 10 OS in your system.

-You ought to have NodeJS installed in your system, if not then you may get it from here.

-Download MS Visual Studio 2015 Express from here.

-Download MS Windows 10 SDK from here

-Enable Developers mode on Windows 10 machine by navigating to Settings>Update and Security>Developers>Developer mode.

-If Cordova is not installed in your system then execute the command <npm install -g cordova> on command line to get the latest version of Cordova installed in the system.

-Go to the location through command line where you want create your Cordova project.

-Create the project by executing the command: cordova create 'folderName'<space>'packageName'<space>'AppTitle. For example, <cordova create HelloWorld com.example.helloworld HelloWorld>

-Add platform to the project by executing the command : <cordova platform add windows>.

-Cordova based Windows project is created. Now you can see your www folder in the project directory. By default, the project is Windows 8 and Windows 8.1 based. However, the app can be installed and run on Windows 10 Desktop or Windows 8 or Windows 8.1 but to create the app specifically for Windows 10, perform the below steps.

For Windows 10 Desktop - Change the target preference in config.xml to <preference name="windows-target-version" value="10.0"/>

For Windows 10 Phone - Change the target preference in config.xml to <preference name="windows-phone-target-version" value="10.0"/>

-To build the project execute the command <cordova build>

-Cordova will build the project and place the executable (.appx) under the App Packages folder inside the windows directory.

-To emulate the App on Desktop, execute the command <cordova emulate> and the App will open on your desktop. You can also use Visual Studio 2015 Express to emulate or run the app on Local Machine or Windows 10 Phone Emulator or Windows 10 Phone connected device. However, to run the app on Windows 10 phone, either the app's certificates are required or the app must be in developers mode. You would get the information about enabling the developer's mode from here.

-To perform external configurations, open project in Visual Studio 2015 Express. In the Studio, you would get many option to perform external configurations and you may also see the logs and warnings of your application.

-To deploy the app on Windows 10 connected device (Windows 10 Surface or Windows 10 Phone) through command line, you would need Windows 10 application deployment tool, i.e. WinAppDeployCmd. To run the app on connected device, perform the following steps :

Add the path of the WinAppDeployCmd tool to the Path Variable in Environment Variables of the system.

Through command line, navigate to the directory where .appx file is generated.

Connect Windows 10 phone to Windows 10 Desktop.

Execute the command <WinAppDeployCmd devices> to verify the device is connected and particular IP Address is assigned to it.

Execute the command WinAppDeployCmd install -file "filename.appx" -ip <IP Address>. For example, WinAppDeployCmd install -file "MyApp.appx" -ip 127.0.0.1.

Windows 10 Application will be installed into the connected Windows 10 Device.

Approach Two - Using MS Visual Studio Community 2015 with Windows 10 SDK: Coming Soon . .

Securing Hybrid Application Using Good Dynamics

Good Dynamics is a utility that provides its own tools for secure app containerization and communication between application and server through Good proxy server. Good Dynamics comes up with its own SDKs for Android, iOS, Xamarin and Windows along with plugin for Phonegap for hybrid applications. The link to the SDKs is: https://community.good.com/community/gdn/downloads. To download any of the Good Dynamics’ tool, you need to sign up with your email ID.

Good Dynamics for Hybrid Application on iOS

To setup Good Dynamics environment for Hybrid Application development using phonegap on iOS, following are the prerequisites:

Xcode
NodeJS
Apache Cordova

Following are the steps to setup Good Dynamics environment and enabling Good Dynamics in cordova based application for iOS:

1. Download and install the latest GD SDK for IOS and Phonegap Plugin from the Good Dynamics official website, https://community.good.com/community/gdn/downloads

2. Go to the directory where phonegap plugin is located and navigate to IOS and execute the command 'sudo bash install_gdcordova.sh'.

3. After successful Installation, create a cordova based project.

4. Add IOS platform to the project by executing the command <cordova platform add ios>

5. Now we have a cordova project in running condition on IOS.

6. Go to the directory where phonegap plugin is located and navigate to IOS>SampleApplications>UpdateApp-Cordova through command line tool.

7. Execute the command gdEnableApp.sh, this will show you the required parameters needed for enabling GD in any of the cordova application.

8. The parameters would be –c <company identifier> -g <organisation name> -i <application id> -p <path to project>.

9. Now execute the command ‘bash gdEnableApp.sh –c <your company identifier> -g < your organisation name> -i <application id> -p <path to project>. E.g. bash gdEnableApp.sh –c com.gdorg.myapp –g gdorg –i com.example.myapp –p desktop\myproject\platforms\ios.

10. Now, the cordova based project is enabled with Good Dynamics and the Good Dynamics plugins are ready to use in the project.

11. If there is any requirement of cordova plugins then they can also be added by executing the command ‘cordova plugin add <plugin name>’. The cordova plugins can be used along with GD Plugins for different tasks.

12. Build the project by execution the command ‘cordova build ios’ and open the .xcode project in xcode.

13. Now there are two modes available to run the application : Enterprise Mode and Enterprise Simulation Mode.

14. In Enterprise Mode, you must have a good account and have access to good control server where you can generate the access keys needed for accessing the application. In this mode, application communicates with the Good Control server and the user of the application can see the information related to app, device, logging time etc and take actions on the app through his/her Good Control Console. Good Control Console is just like an Administrative panel for the application. To run the application on device, connect the device and make sure the provisioning certificates selected are correct. Hit the run button on xcode and the application will be launched with Good Dynamics splash screen. On the next screen, enter the registered email address and access keys generated on your Good Control Console. GD would now show its feature in slide up animation. Subsequently, a screen would appear where you need to set your password for accessing the application.

15. In Enterprise Simulation mode, application can only be run on simulator. To run the application in enterprise mode add the following key and values to info.plist file of the xcode project:

GDLibraryMode : GDEnterpriseSimulation

16. Save and hit run.

17. In case the following error occurs ''GDCordova.framework is not installed in /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDK/System/Library/Frameworks/GDCordova.framework" then go to the directory /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDK/System/Library/Frameworks/ and manually paste GDCordova

Database Security using Good Dynamics Plugin

Once the Good Dynamics is enabled in the cordova based project, we can use the plugins provided by Good Dynamics. To securely store data in the app, we can use Secure SQLite Storage plugin. The plugin is based on web SQL and overwrites phonegap’s Sqlite plugin. The implementation would be similar to the phonegap’s Sqlite Plugin as described here. For the example project, you may refer to the downloaded GD phonegap plugin and navigate to sample Applications > com.good.gd.example.pg.SQLite. The data stored using the GD Sqlite plugin would be in an encrypted format and completely unreadable.

Good Dynamics for Hybrid Application on Android

To setup Good Dynamics environment for Hybrid Application development using phonegap on Android, Following are the prerequisites:

· Android Environment ( Sdk and ADT)
· NodeJS
· Apache Cordova

Following are the steps to setup Good Dynamics environment and enabling Good Dynamics in cordova based application for Android:

1. Open Android SDK manager and perform the following steps to install GD SDK for Android: Select Tools > Options from the Android SDK Manager menu bar (on macOS, select Tools > Manage Add-on Sites) and make sure Force https://… is disabled.

2. From the Tools menu, select Manage Add-on Sites…

3. Click the User-Defined Sites tab, then click New…, and, as prompted, specify the following URL to load the GD SDK: https://community.good.com/sdk/android/addon.xml

4. Next, from the Android SDK Manager menu bar, select Packages > Reload.

5. Android SDK Manager now polls the add-on site—specifically, GDN—for changes and then updates the package list. When prompted, enter your GDN member credentials.

6. When package reloading is complete, scroll to Extras and click the Good Dynamics Sdk check box, then click Install 1 package…

7. If you do not see "Good Dynamics SDK" in the Extras package, click Tool > Options > Clear Cache, then reload again to ensure the GD SDK is pulled into the Extras package list.

8. Read and accept your Developer License Terms and Conditions, then click Install.

9. Installation progress is indicated in the status bar. When installation is complete, the Good Dynamics Sdk status in the last column changes to Installed.

10. GD SDK for Android is installed in the system.

11. Download the GD phonegap plugin from the official Good Dynamics website, https://community.good.com/community/gdn/downloads.

12. Now create a cordova project.

13. Add Android platform to the project by executing the command <cordova platform add android> inside the project directory.

14. Try building the project by executing the command <cordova build android>.

15. If the build process is successful, the project is now in running condition.

16. Now go to the folder where Good Dynamics Sdk is installed, Androidsdk\extras\good\dynamics_sdk\libs\handheld and copy the ‘gd’ folder to the Android subdirectory of Good Dynamics phonegap plugin.

17. Go to the directory where phonegap plugin is placed, navigate down to Android subdirectory and execute the command ‘install_gdcordova.sh’.

18. Now to enable your project with Good Dynamics execute the command gdEnableApp.sh –g <organisation name> -n <application name> - p <path to the project till android folder>.

19. After execution of the command, the project is enabled with Good Dynamics.

20. You may add cordova plugins to the project by executing the command <cordova plugin add ‘cordova-plugin name’>.

21. Try rebuilding the project by executing the cordova build command and if it is successful then you would be able to have working GD Enabled apk of your application.

22. To run the application on Emulator, you must provide GDLibraryMode as GDEnterpriseSimulation in settings.json in the directory Project>platforms>Android>assets.

23. To run the application on Device, you must provide GDApplicationID in settings.json that is registered in Good Control Server.

Troubleshoot

1. Error: Build process failed: Error in process Debug Resources – Error in parsing AndroidManifest.xml: Package name is missing – You may not have the required Environment or OS for building this project.
Solution: After executing the command for enabling good dynamics, check out config.xml of your cordova project and if it miss the id like (<widget id=" " version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">), then try rebuilding the project after providing it with proper ID.

2. Error: Build process failed: Package name is missing in MainActivity.java.
Solution: Navigate to the project folder>platforms>android>src and open MainActivity.java and add the missing package name. Try rebuilding the project and should be successful.

Working with Blackberry Dynamics - Newer way of Good Dynamics

BlackBerry Cordova architecture changes

Removed GD-enable script

With new BlackBerry Cordova plugins, you do not need gdEnableApp.sh script anymore. It has been removed. The BlackBerry Cordova base plugin is responsible for BlackBerry Dynamics-enabling your application.

Added support for Cordova plugins

All the features that were available in GoodDynamics.js in the previous release now are available as Cordova plugins.

BlackBerry Dynamics Cordova plugins structure

The BlackBerry Dynamics Cordova software has following structure: Good_Dynamics_for_PhoneGap_ <version>
Documentation/
plugins/

Migrating from previous releases:

No code changes required If you developed your applications using the previously released version of BlackBerry Dynamics Cordova plugin, you can easily migrate your application to use new plugins.

Steps:

1. Create an empty Cordova application.
2. Add platform.
3. Add and plugins you need.
4. Copy your assets (HTML, CSS, JS) from your old application to new one.
5. Run the cordova prepare command.
6. Build your application in IDE or with the cordova build command.

Cordova Library support

BlackBerry Dynamics Cordova plugins support Cordova versions 5.x and 6.x. This is full list of supported Cordova versions: 5.0.0, 5.1.1, 5.2.0, 5.3.1, 5.3.3, 5.4.0, 5.4.1, 6.0.0, 6.1.0, 6.1.1, 6.2.0, 6.3.0, 6.3.1
Cordova version 4.x is removed.

Steps to embed Blackberry Dynamics in Cordova project for IOS

Development Environment:

-macOS version 10.9.4 or later
-Xcode 7.0 or later
-iOS SDK 9.0 or later
-Deployment target: iOS 8 or later

Steps:

1. Download Blackberry SDK for iOS from here.

2. Downlaod Blackberry plugin for cordova from here.

3. Navigate to the Blackberry plugin for cordova folder, i.e. Good_Dynamics_for_PhoneGap_<version> Documentation/ plugins/cordova-plugin-bbdbase.

4. For the BlackBerry Dynamics Cordova Base plugin to work correctly on iOS platform , check the path to the BlackBerry Dynamics SDK for iOS in the file cordova-plugin-bbd-base/plugin.xml. If the path to your BlackBerry Dynamics SDK for iOS is different, set the correct path and reinstall the plugin.

5. Now create a cordova project.

6. Add platform to it by executing the command <cordova platform add ios>

7. Now you can add the Blackberry Dynamics Cordova plugin by executing the command <cordova plugin add 'Path to the plugin'>. Example, cordova plugin add Good_Dynamics_for_PhoneGap_<version> Documentation/ plugins/cordova-plugin-bbdbase.

8. To add all specified plugins in Blackberry Dynamics add the 'super' plugin, that is, cordova-plugin-bbd-all.

9. Now the Blackberry Dynamics is embedded in your cordova project and you can build the project by executing the command <cordova build ios>.

If you face any problem, you can comment below or drop your query on Blackberry Dynamics Community here. Happy Coding :)

Blackberry Dynamics Push Notification Service for Cordova Apps

Blackberry dynamics formerly known as Good Dynamics provide a secure way of anytime and anywhere communication through its own Push Notification Service. Here I am going to explain how to enable BB Push Notification Service in Hybrid Apps built on Apache Cordova. To understand the overall architecture on how BBD push notification works, lets have a look onto the below figure:

How does it really work?
Cordova application uses BBD push notification plugin to request Push channel token to Good proxy infrastructure. Once the channel is created, GD proxy will send the response token back to the Cordova application that simply means the app is registered in Good proxy infrastructure for receiving push notifications. Now the application server needs to store that token to communicate with the Cordova application via Good proxy infrastructure. So, the Cordova app must send the response token to the application server. Once the token is stored in application server, the server would able to send push messages securely to the Cordova application by using the Good proxy infrastructure. In this way, secure push communication is maintained between application and server.

Lets go code, yippee!
Before going to the code implementation you must be assured that you have installed the BB Push Notification plugin in your Cordova project. Installation of BB Plugins in Cordova project is explained above, please have a look. After successful installation of project all you need to add a piece of JS code in your Cordova project. So lets have a look how beautiful that piece of code looks:

function registerNotification() {

var myConnection;

var channel = null;

var savedChannelID = null;

//--GDPushConnection

myConnection = window.plugins.GDPushConnection;

try {

myConnection = window.plugins.GDPushConnection;

} catch (e) {

console.log("Unable to initialize the GD Connection (myConnection).");

}

//-- GDPushChannelResponse

function pushChannelResponse(response) {

try {

console.log(response);

var channelResponse = myConnection.parseChannelResponse(response);

console.log("Got response channelID: " + channelResponse.channelID);

console.log("Got response responseType: " + channelResponse.responseType);

console.log("Got response responseData: " + channelResponse.responseData);

switch (channelResponse.responseType) {

case "open":

savedChannelID = channelResponse.channelID;

console.log("Channel connection opened with ID :" + savedChannelID);

console.log(channelResponse.responseData);

// send application server the savedChannelID (token) here

break;

case "message":

// handle pushed message from the server

console.log(channelResponse.responseData);

alert(channelResponse.responseData);

break;

case "error":

console.log("Received an error status from the channel connection.");

break;

case "close":

console.log("Channel connection closed successfully.");

case "pingFail":

break;

default:

break;

}

} catch (e) {

console.log("Invalid response object sent to channel response callback handler.");

}

};

function pushConnectionOk() {

//-- GDPushChannel

channel = myConnection.createPushChannel(pushChannelResponse);

channel.open();

};

if (myConnection !== "undefined") {

myConnection.isConnected(

function(result) {

console.log("Push connection is established.");

pushConnectionOk();

},

function(result) {

console.log("An error occurred while checking the status of the push connection: " + result);

});

};

}

Calling the function registerNotification() will request to the Good proxy infrastructure to create the channel and once the channel is created the Good proxy infrastructure will send the response token which will be received in channelResponse that is written under switch case:open in the code. On receiving the response token, it should be sent to the application server that is authorized to send push notifications to the applications but for testing purpose you can use Good Dynamics global notification URL in Advance Rest Client tool available in Google Chrome as extension to send the push messages. You many install advance rest client from here. In the Advance REST client you will need to make a POST request with the following parameters:

HeaderName: X-Good-GNP-Token

HeaderValue: < response token >

Content-Type: text / plain

Good Dynamics global request URL to be used: https://gdmdc.good.com/GNP1.0?method=notify

For server side configuration you can consult the documentation available on official BBD community.

Incase of any issue please drop a comment or you can contact Blackberry Dynamics official communtiy, here.

Securing Hybrid Cordova Apps with Dexguard: Step by step guide

DexGuard is a specialized tool for the protection of Android applications. ProGuard is a versatile optimizer for Java bytecode. It enables you to shrink, optimize and obfuscate desktop applications, embedded applications and mobile applications (Android).

Dexguard provides exclusive security to android applications from hacking and reverse engineering. This is achieved by extreme obfuscation of arithmetic operations, control flow, native code, library names and encryption of classes, resources, scripts and native libraries.

Dexguard is paid source of utility and you need to buy the resources for your project from its official website. Once you subscribe to it, you would be able to get your own dashboard on the website from where you can download SDKs, license and other required stuff.

Once you get your dashboard, you may follow the below mentioned steps to enable Dexguard protection on your cordova application:

-Download the Dexguard package and license file from your dashboard in the website.
-Place the license file in some particular location on your system.
-Navigate to Control Panel>System and Security>System>Advanced system settings>Environment variables.
-Add a new variable 'DEXGUARD_LICENSE' and set its value as the path of the location where the license file is kept. (As mentioned in step 2).
-Now, navigate to your cordova project directory, platforms>android>app and make a new folder dexguard.
-Add the libraries -- dexguard.jar, dexguard-annotations.jar, dexguard-api.jar dexguard-nativeloader.aar, dexguard-runtime.aar, dexguard-tools.jar and retrace.jar.
-Add library dexguard-runtime.aar in platforms>android>app>libs

Alright, we are half way done! Now lets edit app>build.gradle file to make some dexguard related configurations as follows:
1. Add the following highlighted lines in the screenshot to the file:

4. Make sure sourceSets looks like below. If not then add/edit like the screenshot:

Now a very important step, copy dexguard-project.txt file from the downloaded package to android>app.
Add the components of the project that you wish to encrypt or keep from obfuscation preceded by the respective keywords. For example, -encryptassetfiles, -keep, -encryptclasses, -encryptstrings. Refer to the below screenshot for more clarified picture:

phewww!!!! We are done with the configurations buddy! Now you can just hit the command <cordova clean android> and then <cordova build android --release> to make dexguard protected android executable file.

"Always wear protection! thanks for reading, go on with the code."