Understanding PhoneGap

Further in this chapter, I will often mention Apache Cordova instead of PhoneGap, and we will use the Cordova command-line interface. This is considered to be more appropriate in the context of the mission of the library.

Let's add some clarity to the difference between these two technologies: Cordova and PhoneGap.

In a few words, PhoneGap is a distribution of Apache Cordova. PhoneGap can be considered as a shell for Cordova technology and provides great infrastructure for maintenance and distribution.

Cordova/PhoneGap includes native implementation for different mobile platforms. For example, on Android it is implemented with Java, and on iOS it is implemented with Objective-C.

In order to set up the PhoneGap project well, we should examine the basic concepts and principles of the application structure in detail.

Basic components

The app itself is an index.html web page by default, which connects a necessary CSS, JavaScript, images, media files, and other resources needed to run the application. The application runs in the native WebView wrapper, which can be spread through app stores.

The web view used by PhoneGap is the same web view used by the native operating system. On iOS, this is the Objective-C UIWebView class; on Android, this is android.webkit.WebView. There are differences in the web view rendering engines between operating systems, so we should account for this in our UI implementation.

The application can be fully or partially wrapped by WebView. For example, only some parts of the application may be made with HTML, and the remaining elements will be implemented with native components. In this book, we will consider that the applications are fully wrapped with WebView.

For interaction between our web page and the native components in Cordova, there is implemented plugins interface. This allows the JavaScript function to call the native components, and the native components transfer data in JavaScript. It might access the camera with JavaScript, accelerometer, or other device feature. Third-party plugins provide access to native features that are not necessarily present on every mobile platform. You can view all available plugins in the plugins repository (http://plugins.cordova.io/). You can also develop your own plugins. We will discuss this later.

Development methods

PhoneGap offers two approaches in the development of PhoneGap applications. These are cross-platform workflow and platform-centered workflow.

Cross-platform workflow: I recommend you to use this workflow if you intend to develop a mobile application under several platforms and you have no differences in the programs for various platforms. With this approach, Cordova CLI (The command-line interface) is primarily used. The Cordova CLI allows you to compile applications for different platforms, manage plugins, and so on.

Platform-centered workflow: I recommend you to use this workflow if you plan to focus on developing applications for a single platform and plan to quite deeply integrate with native components. This approach implies a certain development for a specific platform. For example, for iOS native development, you will use the Objective-C language, and for Android development, you will use the Java language.

PhoneGap allows you to move from a cross-platform workflow to a platform-centered workflow, but you cannot do it in the reverse order. The folder's structure is different and includes a different set of shell tools. Therefore, we start with the use of cross-platform workflow.

In this book, we will mostly use cross-platform workflow, but there will be times when you have to switch to platform-centered workflow. The difference will be in using platform-specific shell tools. For example, for iOS, we will run iOS-specific SDK shell commands. For example, for release, we will run this command:

$ /path/to/my_new_project/cordova/build –release

Cordova installation

In this section, we will discuss how to create an application and install it on different mobile platforms using the Apache Cordova command-line interface.

You will likely be surprised and ask about the difference between the PhoneGap command line and the Cordova command line, because we have already established PhoneGap. PhoneGap is a command-line utility that encapsulates Cordova. PhoneGap is built on Apache Cordova, and nothing else. You can think of Apache Cordova as the engine that powers PhoneGap. Over time, the PhoneGap distribution may contain additional tools, and that's why they differ in command, but they do the same thing. For the local build, PhoneGap uses the local library Cordova, but on the PhoneGap Build service, it uses it's own infrastructure. The official documentation for PhoneGap uses Cordova CLI.

Tip

PhoneGap Build is an online service where we can build PhoneGap/Cordova application for distribution. In this case, we do not need to set up a build process locally. We will review this service in detail in Chapter 10, Releasing and Maintaining the Application.

We will also adhere to the official documentation necessary to carry out commands using Cordova CLI. Further, if necessary, we will use the PhoneGap CLI as well.

Before using the command-line tools, we needed to install the SDKs for each mobile platform we are targeting.

Cordova CLI supports the following combinations of platforms and operating systems:

Mobile OS	Windows terminal	Mac terminal	Linux terminal
iOS	-	+	-
Amazon Fire OS	+	+	+
Android	+	+	+
BlackBerry 10	+	+	+
Windows Phone 8	+	-	-
Windows	+	-	-
Firefox OS	+	+	+

On Mac, the command line is available via Terminal Application. On Windows PC, it's available as Command Prompt under Accessories.

We have already installed a PhoneGap library, but Cordova CLI also requires the installation.

For proper working of Cordova CLI, you must install a Git client, as the Cordova CLI refers to Git repositories to retrieve the necessary information. For more information on installing a Git client, you can refer to http://git-scm.com/. We should be able to run the Git command from the console. Once we have verified that the Git client is installed and running, let's install the Cordova CLI using NPM:

$ sudo npm install -g cordova

The preceding -g flag tells npm to install Cordova globally. Otherwise, it will be installed in the node_modules subfolder in the current folder.