Click here to Skip to main content
13,248,107 members (35,202 online)
Click here to Skip to main content
Add your own
alternative version

Stats

13K views
155 downloads
11 bookmarked
Posted 14 Jan 2016

Apache Cordova: Powerful Framework for Hybrid Mobile App Development

, 14 Jan 2016
Rate this:
Please Sign up or sign in to vote.
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.

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 :

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

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
United States United States
13 Years of rich experience as a Technical Lead and Enterprise Architect on Java-J2EE Enterprise Applications & Product Development in Solution Architecture, Analysis, Coding, Design, Development, Documentation and Testing of applications.

Extensive experience in estimation, analysis, design, development, testing, maintenance and deployment of internet and client-server applications using multiple J2EE technology, platforms/language: Core Java, JSP, Servlet, JDBC, JMS, JNDI, Spring MVC, Struts,
JAX-WS Web Services, JAX-RS Restful Web Services, Apache Axis2, Enterprise Java Beans (Session and Message Driven) and Hibernate.

Major specialization on UX/UI Application design using JQuery, Kendo UI, JQWidgets, JS Frameworks, Google Web Toolkit (GWT), Ext GWT, Java Script, jQuery, Ajax, XML, XSLT, HTML and CSS.
Strong familiarity of deploying large-scale web applications on Weblogic, WebSphere & JBoss Application Server, Sun Java Application Server. Highly proficient in Core Java, JSP, Servlets, Struts, XML, XSLT, XSL-FO, Databases, GWT, Maven2, OOD and OOA. Sound exposure to Web 2.0 RIA Technologies like: GWT, GXT, Ajax, JQuery, JQWidgets, RGraph, HTML5, CSS3, GWT EXT etc. Fair Knowledge of J2EE Design Patterns, EJB, JMS, UML & Java Web Services (SOAP/REST)

Rich Exposure of Enterprise and UI Web based Application development using GWT, GXT, EXT JS3.0, Spring 3.0, IBM RAD, IBM Clear-case, IBM Clear Quest

Expertise in Investment Banking, Finance, E-Learning, IDM (Intelligent Device Management) domain. Rich Exposure to Agile Methodology as a Scrum Master
Project Management Experience (Estimations, Project Plans, Project Execution, Risk Management, Staffing)

Specialties: Client Interaction, Framework Designing, Project Management,
Latest Technologies Adaptation, Web Technologies Development,

Sound Leading Experience for Product & Application Development.
Certified Corporate Trainer GWT, Sencha GXT, HTML5, Jquery, CSS3, EJB, Spring, Web Services, Hibernate

You may also be interested in...

Pro
Pro

Comments and Discussions

 
GeneralMy vote of 5 Pin
Santhakumar M5-Feb-16 23:32
professionalSanthakumar M5-Feb-16 23:32 
QuestionMessage Closed Pin
14-Jan-16 0:26
memberMember 1089184814-Jan-16 0:26 

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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.171114.1 | Last Updated 14 Jan 2016
Article Copyright 2016 by Jitendra_Jain04
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid