Apache Cordova: Powerful Framework for Hybrid Mobile App Development

• Download FirstHybridApp.zip - 47.1 KB

Objective 

The Objective of this article is to provide hybrid mobile application development approach for mobile platforms using one of the most powerful open source framework : "Apache Cordova". It will give us a readymade cooked platform for creating and hosting mobile applications on major platforms like android, ios,windows, blackberry etc. 

Apache Cordova – History 

Brief history: PhoneGap was an open source project started by a company called Nitobi. After sometime Adobe had purchased Nitobi because the ongoing PhoneGap project had many major contributors from top companies like IBM, Salesforce etc., hence after sometime Adobe donated the PhoneGap codebase to the Apache Software Foundation (ASF) for incubation purpose. At Apache Software Foundation (ASF) it re-branded as Apache Cordova. So at present Apache Cordova is the core open-source project where development and contribution happens. Apache Cordova is now the destination for those developer who is interested in contributing to this open source project. Below diagrams explains its history.

What are Hybrid Apps?

Hybrid mobile apps are typically built with a combination of core web technologies like HTML5, CSS3, and JavaScript. Hybrid apps are always hosted inside a native app which utilizes a mobile platform’s WebView (**WebView can be assumed as a chromeless browser window that’s configured to run fullscreen view**.). Hybrid apps make it possible to embed HTML5 apps inside a thin native container, combining the best (and worst) elements of native and HTML5 apps. Apache Cordova helps web and mobile developers to build world class hybrid mobile application for multiple platforms.

Top Hybrid Apps : Amazon Appstore, Twitter, Apple App store, Instagram, Gmail, Uber, Linked-In etc.

What are Native Apps?

A native app is a smartphone application developed specifically for a targetted mobile operating system

• Using Objective-C or Swift for iOS Platform
• Using Java for Android Platform
• Using .NET for Windows Platform

Top Native Apps : Facebook, Angry Birds etc. 

Hybrid Apps "OR" Native Apps?

We can compare hybrid and native apps based on below standard features. This comparision sheet will help web/mobile developers to take quick decisions wheather native app or hybrid app for their clients.

Gartner view about Hybrid Mobile Apps

According to Gartner, Inc.

• Gartner Says by 2016, More Than 50 Percent of Mobile Apps Deployed Will be Hybrid.
• By 2017, 25 percent of Enterprises will have an enterprise app store for managing corporate-sanctioned apps on PCs and mobile devices.

Gartner's Magic Quadrant 2013

As per Gartner's Magic Quadrant 2013 for mobile application development platforms below Adobe's PhoneGap API "OR" Apache Cordova is one of the Market Leaders in this space.

Gartner's Magic Quadrant 2013 for mobile application development platforms is shown below

Source :

• http://www.gartner.com/newsroom/id/2324917<o:p>
• http://blog.mobiversal.com/latest-trends-in-enterprise-mobile-app-development.html

What is Apache Cordova? 

Apache Cordova can be conceptulaized from below workflow diagram.

As we know apache cordova apps uses same web view used by the native operating system. Below is the web view class mapping with the respective platforms

• Platform iOS>> Objective-C UIWebView class
• Platform Android>> android.webkit.WebView
• Platform WP7>> WebBrowser
• Platform WP8>> WebBrowser control (Internet Explorer 10)
• Platform BlackBerry>> WebWorks framework

Apache Cordova Architecture  

Apache Cordova Directory Structure Template 

+ HelloWorld

|      +-- HelloWorld       (The directory that contains the Cordova project)

|      |      +-- ...       (Cordova directories and files                    )

|      |      +-- www       (The directory of our application.                )

|      |                    (It's a classical web directory.                  )

|      +-- node_modules     (The Nodejs directory for modules                 )

|      +-- src              (The directory for our source code                )

|      |    +-- html        (HTML files                                       )

|      |    +-- js          (Javascript program                               )

|      +-- Gruntfile.js     (The build file for Grunt                         )

|      +-- packages.json    (The file that allow NodeJS to install all we need)

How to Create First Hybrid Mobile Application ? 

below are the steps provided to create our first hybrid mobile application for android and ios platforms.

Create the Hybrid App

    Go to the directory where you want to create your project, and run this command :
    $ cordova create myApp com.test.app.myApp HelloWorld

Add the required Platforms ( **Android/iOS/Windows etc.**)

    $ cd myApp
    $ cordova platform add ios ( to add ios platform)
    $ cordova platform add android ( to add android platform)

Compile and Build the hybrid App

     $ cordova build ( default option, it will build all available platforms)
     $ cordova build ios/android (choose any specific platform to build)
     $ cordova prepare ios/android (choose any specific platform to prepare 
     $ cordova compile ios/android (choose any specific platform to compile)

Test or Run the App on an Emulator or Device

    $ cordova emulate android (to emulate on android default emulator)
    $ cordova emulate ios (to emulate on ios default emulator)

    $ cordova run android (to run on default connected android device)
    $ cordova run ios (to run on ios default connected ios device)

How does Apache Cordova work?

Step#1 : Include web code in a native app project:

         - assets/www/js/, css/, images/, etc.

Step#2: Native code loads a URL to the web code through the device’s internal browser:

          - Extend a CordovaWebViewClient

          super.loadUrl( "file:///android_asset/www/LoginPage.html" );

Step#3: Apache Cordova exposes native device APIs through JavaScript:

         - navigator.device.<a href="http://docs.phonegap.com/en/2.8.0/cordova_media_capture_capture.md.html">capture.captureImage</a>( captureSuccess(), captureError(), [options] );

Getting Started with Hybrid Mobile App development

We need the tools below to start hybrid application development using apache cordova for mobile platforms.

Integrated Development Environment (IDE)

• Java IDE like IntelliJ for Android OR  Jboss Developer Studio or Eclipse Mars
• Xcode for iOS

Mobile Platform SDK

•  Android SDK 23
•  iOS SDK

Apache Cordova: Cordova modules and Plugins are available over here https://cordova.apache.org/plugins/

Mobile Devices

• Recommended for deployment/testing
• Emulators are alternative but not a 100% true test

Getting Started Guide

Guide is available over here    https://cordova.apache.org/docs/en/5.4.0/index.html

References

• https://cordova.apache.org/
• http://www.gartner.com/newsroom/id/2324917
• http://blog.mobiversal.com/latest-trends-in-enterprise-mobile-app-development.html