PhoneGap is a hybrid application framework that enables you to build native applications using HTML and JavaScript. Developers can write code once and deploy their application across multiple mobile operating systems. PhoneGap provides a JavaScript programming interface that allows you to access features related to the operating system with plain JavaScript. This chapter covers information about PhoneGap and setting up your development environment.
In this chapter, we will cover the following topics:
Understanding what PhoneGap is all about
Get an overview of the history of Apache Cordova/PhoneGap
The evolution of PhoneGap and Cordova
Learn the differences between the mobile web and mobile app
Learn how to configure your development environment and all the dependencies
Learn how to create a new project using JBoss, Xcode, and Visual Studio
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:
Android
iOS
Amazon FireOS
Blackberry 10
Firefox OS
Ubuntu
Windows Phone 8
Windows 8
Tizen
Windows 7
Browser
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:
Note
We will be using the terms PhoneGap and Cordova throughout this book and technically both are the same. You can replace Cordova and PhoneGap with each other.
PhoneGap has evolved very quickly since January 2012, with multiple releases every year. Apache Cordova uses Semantic Versioning specification (more information is available at http://semver.org). It's a very good practice that tells developers whether a release has major or minor improvements.
Since the 1.4 release, the project has been known as Apache Cordova. This release is generally considered the first stable release of the framework, with a fairly complete and up-to-date documentation. The 1.5 release fixed a long list of bugs, but the initial reaction of the community was not very favorable because the documentation was outdated and some changes to the main files caused broken build issues to apps developed with earlier releases.
The 1.6 release brought some improvements to the plugin architecture, the Camera and Compass APIs, and the project template files. As is often the case with a maturing community, the release was not perfect but there was a significant improvement in the overall quality compared to the previous release. The 1.7 and 1.8 releases were bug fixes and added support for Bada 2.0. The community reaction was also positive because of the speed of the releases. The 1.9 release addressed even more bug fixes and added support for the new features of the iOS and Android platforms.
Apache Cordova 2.x added the following features and support:
The definition of a unique JavaScript file to use across all platforms thanks to the unification of the JavaScript layer of the Cordova application framework
The introduction of a command-line tool (CLI) through which common operations, such as project creation, debug, and emulation, could be performed in a standard way (Android, iOS, and BlackBerry)
The capability to embed PhoneGap applications into larger native iOS and Android applications using Cordova WebView
Support for the Windows phone platform
The porting of the Web Inspector Remote (Weinre) to Node.js and the introduction of a node module that facilitates installation using Node package manager (npm)
Improved plugin documentation
Several improvements to the process of creating iOS apps
The standardization of the commands available for each platform (that is,
build,run, and so on)
With the 2.x release, Apache Cordova and PhoneGap has become a mature, stable, and powerful tool in the mobile developer's toolkit.
Since the introduction of version 3.0 in September 2013, PhoneGap has used a new plugin architecture to keep the application core small and fast performing. Plugins can be installed and uninstalled using the updated Cordova command line interface (CLI). PhoneGap 3.0 also introduced several new command-line tools; for instance, users can now install PhoneGap easily using npm without downloading ZIP files. Two new APIs, namely InAppBrowser (earlier known as ChildBrowser) and Globalization API were also released with the PhoneGap 3.0 release. They also started discussions about dropping support for webOS, Symbian, Blackberry (BB7 and earlier versions), and Windows Phone 7.
With PhoneGap 3.1.0, basic support for FirefoxOS and Windows 8 were provided along with other bug fixes and platform enhancements. PhoneGap 3.2.0, released in November 2013, was focused on stability and several bug fixes. In December 2013, PhoneGap 3.3.0 was released with support for Android KitKat (v4.4).
With the release of PhoneGap 3.4.0, advanced support for FirefoxOS was added. PhoneGap 3.5.0 is the last version supporting Windows 7. With PhoneGap 3.6.3, commands supported by Cordova were added. There are several new features deployed to PhoneGap with every new release. At the time of authoring this book, we have PhoneGap 5.1.1, which provides advanced support for the PhoneGap Desktop App and Mobile App.
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:
You can develop Android apps on any of the major desktop operating systems—Windows, Mac OS X, or Linux
You can develop Symbian Web Runtime apps on any OS but you can only run the simulator from Windows
You can develop apps for BlackBerry on any of the major desktop operating systems—the SDK can be installed on Windows or Mac OS X (to run the emulator, you need to install the virtual machine distributed with the SDK)
The iOS SDK requires OS X 10.7 or later (and, according to the OS X EULA, a Mac computer as well)
Note
You can emulate apps in the desktop browser with Ripple (a Chrome extension that is currently incubated in the Apache Software Foundation http://incubator.apache.org/projects/ripple.html) or with the online emulation service available at http://emulate.phonegap.com.
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:
|
Responsive websites |
Mobile app |
|---|---|
|
Responsive websites work across all kinds of devices, starting from mobile devices to desktop computers. This way of design is often called Responsive Web Design (RWD). |
Applications are designed for mobile devices. They are not meant for desktop computers. |
|
Responsive designs provide a better viewing experience to the users on all devices. |
A mobile application gives a typical mobile experience with the entire interface designed with mobile devices in mind. |
|
RWD involves some development concepts such as fluid grid, CSS media queries, responsive tables, and images. |
Mobile-related design patterns are used. |
|
Responsive sites adapt well to the device's screen size, which makes reading the content easier. |
Content is usually designed for mobile screen sizes. Readability is always better. |
|
Mobile web is a normal website, which adapts to mobile devices. |
Mobile apps have the power of doing more than a simple website. |
|
Responsive design is a cost-effective alternative to mobile applications. |
Dedicated development and time needs to be invested for application development. |
|
As with any other website, they are restricted to the features of browser. |
Provides rich user experience by using several device-related APIs such as Camera, Accelerometer, and so on. |
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:
BlackBerry 10: https://developer.blackberry.com/html5/downloads/#blackberry10
Firefox OS: No special SDKs are required
Windows 8 Phone: http://www.microsoft.com/en-in/download/details.aspx?id=35471
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.
You need to install the most recent Java JDK (not just the JRE). Next, create an environment variable for JAVA_HOME, pointing to the root folder where the Java JDK was installed. For example, if your installation path is C:\Program Files\Java\jdk7, set JAVA_HOME to be this path. After that, add the JDK's bin directory (C:\Program Files\Java\jdk7\bin) to the PATH variable as well.
We need
Apache Ant to be installed and configured. Update your PATH to include the bin folder in the installation folder. For advanced configuration details, visit http://ant.apache.org/manual/index.html.
Due to the latest changes in the PhoneGap framework, it's always suggested to use the command-line interface to create a new project, update the framework, or install plugins. To work with the command line, we will need the Node.js application. To start with, download and install Node.js from http://nodejs.org. Once you have done this, you should be able to verify the installation by invoking npm or node on your command line. You may need to add the npm directory to your system PATH in order to invoke globally-installed npm modules.
At the end of every installation, you should be able to verify the installations of each package with the following commands:
android list sdk javac –version ant –version node -v
If any of the preceding command lines don't work as required, you might need to revisit your system PATH settings. For example, PhoneGap and Cordova require the ANDROID_HOME environment variable to be set in PATH. This should point to the [ANDROID_SDK_DIR]\android-sdk directory (for example, c:\android\android-sdk).
Next, update your PATH to include the tools/ and platform-tools/ folders. So, using ANDROID_HOME, you would add both %ANDROID_HOME%\tools and %ANDROID_HOME%\platform-tools.
For OS X users, it is also important to install ios-sim. The ios-sim tool is a command-line utility that launches an iOS app on the simulator. To install the tool, you can again use npm, as shown here:
npm install –g ios-sim
Depending on your privileges, you may have to run the npm command as an administrator (that is, adding sudo before the npm command).
Once the SDKs are installed, it's recommended that you also install the client for GitHub. GitHub is a social coding platform where you can find most of the cool open source projects (such as Apache Cordova), including access to the latest patches, builds, and sources. You can easily build your project for multiple platforms using PhoneGap's free online build service from a public GitHub repository.
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.
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.
Launch a command-line tool (DOS or Terminal) and change the directory to the directory where we just downloaded the Cordova/PhoneGap distribution, as shown here:
$ cd helloIn order to create a PhoneGap project for Android, all you have to do is run the command to add a platform to the project:
$ phonegap platform add android
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.
You created a PhoneGap project and emulated the app in one of the testing devices configured within your Android SDK.
To work with different platforms such as iOS, Windows Phone, and others, you have to follow the same process that we did for Android. The list of platforms that you can add to your project depends on the platform name. Before you add the platforms, you should ensure that you have the required SDKs installed on your machine.
On a Windows machine, you can run any of the following commands provided you have the required SDKs installed for each platform. You will not see the iOS platform here as we need a Mac machine to work on iOS:
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
In the preceding commands, wp7 and wp8 denote Windows Phone 7 and 8, respectively.
On a Mac machine, you can develop on the following platforms after installing the corresponding platform SDKs. You will not see the Windows Phone platform here as we need the Windows operating system to install the Windows Phone SDK:
$ 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:
Start JBoss Developer Studio and then navigate to Help | JBoss Central.
Click on the Software/Update tab in JBoss Developer Central.
Type
JBoss Hybrid Mobile Toolsor scroll through the list to locate JBoss Hybrid Mobile Tools + CordovaSim.Select the corresponding checkbox and click on Install.
When prompted to restart the IDE after installation, click on Yes to restart JBoss Developer Studio.
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:
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.
Note
If you are searching for a tool for Objective-C with advanced refactoring features, better code completion, great support for unit tests, and powerful code inspection tools, you should consider buying AppCode from JetBrains. More information is available at http://www.jetbrains.com/objc/.
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.
