Apache Cordova and PhoneGap: Develop applications for all environments

4 min reading
UX / 02 November 2015
Apache Cordova and PhoneGap: Develop applications for all environments
Apache Cordova and PhoneGap: Develop applications for all environments

BBVA API Market

Mobile app development has become a must for companies and businesses. Users (and customers) are found on mobile devices. But the huge variety of environments poses a real challenge for managing resources. Various platforms, several operating systems, different needs. There are solutions available today that enable the unification of application development and design efforts.

When developers are considering creating a mobile app, the first thing they should ask themselves is for which platform. Is it an app for iOS, for Android, for Windows Phone or for other operating systems like Blackberry, Tizen or Firefox OS? For iOS we need a programmer in Objective-C or Swift that uses the integrated Xcode development environment; for Android, the programming is done in Java and Eclipse can be used as an IDE; and for Windows Phone, development is done in C# or HTML5 in Visual Studio (Microsoft).

Faced with such a diversity of operating systems, there are two alternatives for not having to use different languages and IDEs for each application:

– Use a development framework such as Xamarin to program in C# language the code that will be shared by all the applications and develop the user interface for iOS, Android and Windows Phone separately. At Xamarin they believe that C# is the best syntax for developing mobile apps, better than Objective-C, Swift or Java.

– Resort to tools like Apache Cordova or PhoneGap, that enable applications to be developed in HTML, CSS and JavaScript. 

What Apache Cordova provides

Apache Cordova is an open source development framework for programming multiplatform mobile apps in the three standard web project creation languages: HTML5, CSS3 and JavaScript. It is therefore not necessary to use native solutions or languages for each platform. How? It uses standard APIs to access the components and functions of each device.

1. Apache Cordova use cases:

– Make a single application that can be uploaded in all possible app stores: for example, App Store or Google Play.

– If a programmer wants to code an interface using native components for each device and WebView, Android provides a built-in browser for their apps.

2. Development components in Apache Cordova:

– All applications designed in Apache Cordova are based on a global configuration file, config.xml. This XML file conforms to the standard specifications of W3C's Web Application Packaging (widgets), irrespective of the type of platform. For projects created using the Cordova CLI (command line interface), this XML file can be found in the path app/config.xml.

– The applications in Apache Cordova are implemented as a web page, within a local testing host in the file index.html. And the app is run on a WebView within the native structure of the application itself. This browser provides the app with all the features and functionality offered by the user interface.

– Proprietary or third-party plugins can be added with Apache Cordova to enhance the application's functionality. There is a third-party plugin registry on this list and, if an own development is preferred instead, it must always be programmed according to the specifications of this Cordova Plugin Development Guide

3. How to get started:

– Install Apache Cordova: The Cordova command line runs in Node.js, so first we need to install this multiplatform execution environment on the server side. It is possible to add all kinds of dependencies needed for developing the application, here is a specific tutorial for doing so. The Apache Cordova installation command: npm install -g cordova

– Create a new project using the command line: In the directory, choose where the project should start and run the cordova create <path> command.

– Add the platform for which the app will be developed: Use the command line cordova platform add <platform name>. These are the different SDKs (application development kits): Android SDK, iOS SDK, Windows Phone SDK, Amazon Fire OS SDK and BlackBerry SDK.

– Launch the application for the platform already installed in Apache Cordova: Run the cordova run <platform name> command.

What PhoneGap provides

The first thing we have to say is that technically speaking, PhoneGap and Apache Cordova are the same tool. There are no major differences between them: They are open source solutions for developing multiplatform applications in HTML, CSS and JavaScript, without the need for using different languages and development frameworks for each OS.

The company that created PhoneGap, Nitobi, transferred the tool's source code to Apache Foundation in 2011, which gave rise to the Apache Cordova project in 2012. With Nitobi's acquisition by Adobe in October 2011, this solution kept the name PhoneGap, in open source but with the possibility of enriching it with added functionality. They are therefore two identical tools with two different names.

Is there any interesting difference between them? Yes. Adobe enables the integration of PhoneGap with its compilation services (Adobe PhoneGap Build), which saves you having to download and install the SDKs for each environment, as happens with Apache Cordova. This is not necessary because the compilation is done by the tool. This is an advantage.

PhoneGap enables the development of applications with standard APIs that provide access to all the functionality offered by most devices. This table shows how this tool works with the different terminals.

1. How to get started with PhoneGap

– Install PhoneGap: You can implement it on your desktop for both Mac OS X and Windows. The app's interface is created using a simple 'drag and drop' function, without installing the PhoneGap CLI.

– Install PhoneGap Developer App: This application installed on the mobile device helps programmers run tests with the product they are developing. It automatically provides access to the basic APIs of PhoneGap to work with the native functions of each device without installing SDKs, plugins or compiling anything locally. It enables easy development testing.

– Create the application: A new project is opened (it usually creates a Hello World project by default) and the local path where the future application will be hosted is chosen. It is also possible to create applications with PhoneGap using a combination of native components both for products in iOS and Android and using WebView.  

Follow us on @BBVAAPIMarket

It may interest you