In this project, we'll go through the steps necessary to install a Cordova/PhoneGap distribution, and we'll then create your very first project.
Cordova/PhoneGap 3.x has grown up; it's a mature tool with a suggested workflow that is largely command-line based. While PhoneGap 1.x is largely focused on providing templates that could be used within each platform's IDE, it was quickly becoming apparent that this didn't provide a great experience when building cross-platform apps. (One usually ended up having multiple copies of their code in various places.) PhoneGap 2.x introduced a new way of creating these projects using the command line, but it was still largely platform-specific, and each project created was initialized with all the available core plugins. This sometimes created difficulty when releasing to app stores since these plugins required permissions the app may never have used. In 3.x, the command-line method has been greatly refined and provides a simpler method for cross-platform management. What once was a template created from within Xcode or Eclipse is now a cross-platform tool that can create and compile the entire project without ever entering the IDE while also creating lightweight projects that only use the plugins and permissions they need.
The project we create in this chapter is nothing amazing; consider it your Hello World app. However, it will ensure that you've got everything set up in a way that will enable you to create cross-platform apps.
Once you've created this first project, you'll be able to continue with the projects in this book as well as create your own projects. You'll know that your development machine is properly configured, and you'll be able to compile and test your projects.
One thing the old 1.x versions had going for them is that they were nearly painless to install. You just had to download the template and create a project from within the IDE and you were ready to go. But for cross-platform development, it was far from simple, and when the time came to upgrade from one version to the next, it was even worse.
The new command-line method requires a little more work to set up and install, but in the long run, it's worth it. I promise!
Here's what we'll do:
Install node.js and configure SDKs
Install Cordova/PhoneGap
Create your first project
Manage your project's platforms
Manage your project's plugins
Build your project
Deploy your project to the simulator/device
Before you continue, it's worth noting that iOS app development (and Windows Phone app development) will not work on just any OS. For iOS, you'll need a Mac with a recent version of Mac OS X 10.8.4 or higher (and Xcode 5 or higher), and for Windows Phone development, you'll need a Windows PC with Windows 8 (and the Visual Studio IDE). Android development is largely platform agnostic—that is, it can be done on Mac, Windows, and Linux.
If you use PhoneGap Build, some of the hardships can be avoided since you don't have to rely on your local development environment to build the app. But a Mac is required to generate the certificates necessary for iOS app signing (even with PhoneGap Build) and is definitely required for deployment to the App Store. The same is true for Windows; you need to deploy to the App Store from Windows only.
This book will focus solely on those platforms that use WebKit (and related browsers) to power their built-in web views. This includes iOS and Android (and though it isn't supported, it should extend to BlackBerry 10). This does not include Windows Phone (the web view is based on Trident), nor does it include the Firefox mobile OS (which is based on Gecko). Most of the code will translate easily, but not all of it (especially where vendor prefixes are used or where the event mechanisms are different). If you want to build apps for those platforms, you will need to feel free to adapt the code as necessary, but that isn't the focus of this book.
You'll need to ensure that you have installed the following before you continue:
The platform SDK for each platform you want to support, as follows:
For iOS:Xcode 5 or higher on OS X 10.8.4 or higher; for OS X 9, Ant 1.8 or higher on Mac OS X
For Android: Eclipse or Android Studio on Mac OS X / Windows / Linux, the Android SDK, and Ant (if not already installed)
For Windows Phone: Visual Studio Express on Windows 8
A fantastic code editor that understands HTML, JavaScript, and CSS. You might want to consider one of the following:
Sublime Text Editor (commercial)
JetBrains WebStorm (commercial)
Eclipse or Android Studio
Pico/Vim/Emacs