PhoneGap Beginners Guide (third edition): Create, develop, debug, and deploy your very own mobile applications with PhoneGap

PhoneGap, also called Apache Cordova, is an open source hybrid mobile application development framework. It uses standard and well-known web technologies such as HTML, Cascading Style Sheets (CSS), and JavaScript to create cross-platform mobile applications without using native development languages.

If you want to develop a native Android application, you should know APIs related to Java and Android SDK. For an iPhone app, you need to know Objective-C or Apple's new Swift language. Similarly, for all other mobile platforms, you need to know their respective programming languages. The code you write for one platform does not work for another platform. To overcome these difficulties, we now have a hybrid mobile development framework called PhoneGap. The applications that you develop using PhoneGap can be deployed on several other platforms. It's a write-once-deploy-everywhere kind of framework.

The following is the list of mobile platforms currently supported by PhoneGap:

The framework enables developers to access all the hardware-dependent features using simple JavaScript. Developers will be able to access device contacts, location, files, device information, and much more, with simple functions. Note that a new platform called "browser" is now supported. Sound interesting? It is left up to you to increase your curiosity.

PhoneGap was originally developed by Nitobi and the company was later acquired by Adobe in 2011. After it was acquired, Adobe donated the PhoneGap code base to the Apache Software Foundation (ASF) under the project name Cordova, which is the name of the street in Vancouver where Nitobi's offices were located and where the company created the first version of PhoneGap.

One of the biggest advantages of moving the code base to the ASF is that anyone can easily contribute to the project. Many companies are not only comfortable with the Apache-flavored licenses but already have a Contributor License Agreement with Apache. For developers who are interested in contributing to a vibrant open source project, Apache Cordova is a great opportunity.

PhoneGap is a free and open licensed distribution of Apache Cordova. Picture Cordova as the engine on which PhoneGap and its related services (debug, emulate, and build services) are built. Adobe provides an integrated platform to build applications for multiple platforms with a single click. If you don't want to use Adobe's build features, you have to manually build applications for each mobile platform. Apart from these, for both PhoneGap and Cordova developers, nothing has changed.

Adobe continues to play a major role in the project, investing in its ongoing development, and the company decided to keep the PhoneGap name to describe its own distribution of the Cordova project. Other contributors to the Apache Cordova project include Google, RIM, Microsoft, IBM, Nokia, Intel, and Hewlett-Packard. For more details about Cordova and PhoneGap, refer to the following online resources. They have several useful bits of information and tutorials for a beginner to start with development:

PhoneGap plays by the rules. If a vendor releases an SDK for a single operating system only, then you will have to use that OS to build and deploy your applications.

In detail, for each PhoneGap platform:

Practically speaking, your best bet for mobile development is to get a Mac and install Windows on a separate partition that you can boot into, or run it in a virtual environment using Parallels or VMWare Fusion. According to Apple's legal terms, you cannot run Mac OS X on non-Apple hardware; if you stick with a Windows PC, you will be able to build for every platform except iOS. However, you can still use OS X by using VirtualBox and running OS X from a Windows PC.

Anyway, with the new CLI utilities, it is getting to be pretty easy to build an app for all major mobile platforms. Mobile developers are well aware of the problems involved in building cross-platform apps; not surprisingly, the http://build.phonegap.com service is starting to become pretty popular due to the fact that it lets the developer use his/her favorite operating system. After registering with this service, it's possible to build a cross-platform app starting from a common code base. You can upload the code base or pull it from a GitHub repository. At the end of this book, I have included a section dealing with the distribution process for mobile applications.

There are lots of discussions that are centered around deciding what kind of development should be done: mobile-responsive websites or a native app. Some popular websites, such as Gmail, have mobile-friendly websites, as well as native apps. To understand this better, let's see what these are:

For more information about RWD and the design principles behind it, please read the fundamentals at https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/.

To summarize, both RWD and mobile apps have advantages and disadvantages. It's the goal of your business or requirement that decides which one you are going to develop. If you are going to develop mobile applications, you should be targeting multiple mobile platforms and it's not quite possible to code for all platforms within a short time frame. Here comes the power of hybrid mobile applications developed using PhoneGap.

In order to be ready to build a PhoneGap app, it's mandatory to download and install the latest SDKs for each target platform of the app from the respective official websites:

Each of the preceding platform SDKs have their own setup configuration and it's advised to refer to the respective websites for updated information. To use several IDEs, such as NetBeans, Eclipse, or JBoss Developer Studio, we need Java to be available.

android list sdk
javac –version
ant –version
node -v

npm install –g ios-sim

Starting from Apache Cordova 2.0, the installation process and the setting up of your development environment has become much easier. Before the era of 2.0, the installation process of PhoneGap had been confusing because there were a lot of dependencies. These dependencies were due to the fact that, in order to compile an app for different platforms, you not only had to have the platform-specific SDKs but also the platform-specific tools; for example, in order to build for Android, Eclipse, IntelliJ, or Android Studio were required; to build for iOS, Xcode was required; and so on.

You can now use a set of command-line tools shipped with Cordova, which makes it easier to develop cross-platform applications. Installing Cordova and PhoneGap is now as easy as issuing a few commands. Please note that we can use CLI commands related to Cordova or PhoneGap. The PhoneGap CLI offers more added features than its Cordova counterpart such as support for PhoneGap Desktop and Mobile app.

To kick-start the development, let's create a new project. We will use the npm utility Node.js to automatically download the latest framework code.

In the Windows environment, issue the following command:

C:\>npm install -g phonegap

On Linux and OS X, issue the following command:

$ sudo npm install -g phonegap

By using the -g flag in the preceding command, we instruct npm to install PhoneGap globally; otherwise, it will be installed in the current directory. Once the installation process is done, verify the installation by issuing the following command in the command-line terminal. This should return the latest version number of PhoneGap.

phonegap --version

Once we have verified the Cordova installation, we can create a new app project by using the following command:

phonegap create hello

It may take some time for this command to complete. This is the minimal syntax required to create a project where hello is the project name. A new folder named hello will be created in the current working directory. The directory content will be as shown here:

├── hooks
├── merges
├── platforms
├── plugins
├── www
|   └── css
|   └── img
|   └── js
|   └── index.html
├── config.xml

In the www folder, you'll find the HTML/JS/CSS files needed to run the sample PhoneGap app bundled with the binary of the distribution.

This section provides a detailed guide to setting up the Android, iOS, and Windows Phone development environments. In order to set up a development environment based on a simple text editor, it suffices to run a few commands using the command-line tool.

Get ready to set up the Android development environment and create a PhoneGap app using Android as the target platform. In the previous section, we saw how to create a new project. Now it's time to add the desired platform to the project. As usual, use Terminal on OS X or DOS Prompt on Windows to run these commands.

The command tells Cordova to add support for the Android platform. After the successful execution of the command, you can see a new directory named android created inside the platform directory. This contains all the platform-dependent files.

Now it's time to run the project in the emulator. The following command will take some time to complete:

$ phonegap emulate android

The tool will check whether some virtual devices are already defined and prompt the user to define one if not. If there is more than one device already defined, the tool will ask which one to use.

C:\hello> phonegap platform add wp7
C:\hello> phonegap platform add wp8
C:\hello> phonegap platform add windows8
C:\hello> phonegap platform add amazon-fireos
C:\hello> phonegap platform add android
C:\hello> phonegap platform add blackberry10
C:\hello> phonegap platform add firefoxos

$ phonegap platform add ios
$ phonegap platform add amazon-fireos
$ phonegap platform add android
$ phonegap platform add blackberry10
$ phonegap platform add firefoxos

There are several IDEs for Java and a few of them are IntelliJ IDEA, Eclipse, NetBeans, and JBoss Developer Studio. Android Studio is the most recommended and commonly used IDE for Android development. However, it does not provide support for Cordova/PhoneGap development. When compared to others, JBoss Developer Studio provides a very easy and convenient way of creating and working with the PhoneGap project. You can download the latest version from the JBoss website at https://www.jboss.org/products/devstudio/download/. In order to run a sample application based on Apache Cordova/PhoneGap, you need to install the Android SDK, and add the JBoss Hybrid Mobile Tools plugin to your JBoss install. This tool extends the capabilities of JBoss to let you quickly set up new Cordova projects, add Cordova plugins, debug applications, and even export signed (or unsigned) APK files in order to distribute the application.

In order to install Hybrid Mobile Tools into JBoss, it's enough to perform the following steps:

Once the JBoss Hybrid Mobile Tools installation is properly configured, it's possible to create a new project using the appropriate wizard.

Go to JBoss Hybrid Mobile Tools | New | Other. Next, select Hybrid Mobile (Cordova) Application Project in the Mobile section. Click on Next:

Enter the values for Project name, Name, and ID. We will use example for Name and org.example for ID, as shown in the following screenshot:

Click on Next to see the options to select which Cordova version to use. Let's always go with the latest version:

Clicking on Next again will present the option to install some plugins. For this tutorial, we don't need any plugins to be installed. So we don't select anything.

Click on Finish to exit the wizard.

At the end of the wizard, a default application will be created for you. Now let's build the created application and see how it looks on the emulator. Click on the Run As toolbar icon and select the Run with CordovaSim option to open the simulator:

What just happened?

Once the build process is done, you will see an emulator on the screen. With this, we are now able to create a new project and emulate it successfully:

In order to start developing apps for iOS devices, it's mandatory to have a Mac and download the iOS SDK (Xcode), available on the Apple Developer Center at http://developer.apple.com. Complete the following steps to install Xcode:

Now, let's create an iOS project using the command-line tools, as shown here:

$ phonegap create hello
$ cd hello
$ phonegap platform add ios
$ phonegap build

Once the preceding commands are executed, you will have the Xcode project created. You can see the hello/platforms/ios/hello.xcodeproj file and you can double-click on it to open it. With this, our project is already set up and ready to be debugged and deployed.

In order to deploy the app, change Target in the Scheme drop-down menu on the toolbar to Hello (or the current project name) and change Active SDK in the Scheme drop-down menu on the toolbar to iOS [version] Simulator. Once you have done this, click on the Run button.

Microsoft Visual Studio now has plugins for multi-device hybrid apps, including Cordova, which allows you to run and debug apps on an Android/Windows Phone. If you want to debug the app on a real device, you have to create a developer account at https://dev.windowsphone.com/en-us/account in order to unlock the option to debug a real device.

In this chapter, you learned how to set up your development environment using the CLI tools included in Apache Cordova and working with several platforms. The next chapter will help you choose a development environment and show you how to debug your first app on multiple platforms.