Click here to Skip to main content
14,330,218 members

Apache Cordova: Powerful Framework for Hybrid Mobile App Development

Rate this:
4.14 (8 votes)
Please Sign up or sign in to vote.
4.14 (8 votes)
13 Jan 2016CPOL
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.

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.

Apache Cordova 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.

Image 2

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

Image 3

Source :

What is Apache Cordova? 

Apache Cordova can be conceptulaized from below workflow diagram.

Image 4

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  

 

Image 5

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Jitendra_Jain04
Architect
India India
Summary:

14 Years of rich IT experience with multiple roles e.g. (Technical Architect, Technical SME/Consultant, Solution Architect, UX practitioner)on Java-J2EE Enterprise Applications & Product Development.

Provide best-fit architectural solutions for one or more customer engagements; provide technology consultation; anchor POC developments and support opportunity identification and pursuit processes.

An UX Enthusiast, User experience practitioner with proven track record of designing and leading development of user interfaces that are central to the success of software and Internet products.

Evangelize Organization brand WITH the objective of ensuring best-fit and high quality technical solutions and creating thought leadership within the area of technology specialization and in compliance with guidelines.

Propose roadmaps for migration and Digital Transformation to to-be state including quick wins, large initiatives and identify potential risks.

Identify opportunities in accounts or new technologies and help client services team win customer confidence through technology thought leadership.

Participate in discussions with customer as technology SME and articulate the value delivered by proposed optimal technical solution and negotiate NFRs for medium/high complexity projects.

Lead technical discussions with client architects and other stakeholders at all stages of project to articulate solution, design, performance engineering results and obtain sign-off on key technical deliverables.

Support in competency enhancement strategy in technical area, ensures capability development of the team through effective knowledge management and certifications.

Comments and Discussions

 
GeneralMy vote of 5 Pin
Santhakumar M5-Feb-16 22:32
professionalSanthakumar M5-Feb-16 22:32 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Article
Posted 13 Jan 2016

Stats

18.9K views
187 downloads
11 bookmarked