Mobile Development with Cordova (Phonegap): Chapter 2

Chapter 2: Setting up Your Build Environment

Overview of Components

The Android SDK works well with the Eclipse IDE. This doesn't mean that you need to use Eclipse to type out your code, but if you run into trouble you may be glad you have installed, since other peoples' documentation and procedures will refer to Eclipse and the Android SDK.

The Xcode IDE for OSX is required to "compile" your Cordova project. You won't use the GUI much, but you will definitely use the command-line tools. You will use the GUI a little bit, though, for example making edits to the app settings to hide the status bar.

As such, we will be installing both of these tools in addition to the Cordova software itself.

Installation and upgrading of Cordova, is best done through NodeJS, so we will install that as well so that we can install the Cordova library.

Cordova is built on Java, and therefore the build process depends on having the JDK installed and not simply the JRE.

Lastly, the build process for Android requires Apache Ant, so we'll install that too.

A final note: Much of what we do here will be command-line-based within the Terminal application on your Mac. As such, you should just get used to it, and may find it useful to drag Terminal into your Dock.

Installation: Eclipse and Xcode

Eclipse can be downloaded here http://www.eclipse.org/downloads/
It simply unzips, then you run Eclipse from the resulting folder. I like to move the Eclipse folder into my Applications folder, then drag the executable into my Dock so the folder is out of the way but the application is readily accessible.

Use the App Store to install Xcode
Then, install the Xcode command-line tools:
    - open Xcode, go into Xcode / Preferences / Components
    -  Select the CLI Tools, and appropriate iOS simulators as far back as you want to go (7.1 is out, I went back to 6)

Xcode has one more step: Acknowledging the license. This is done via CLI.
    sudo xcodebuild -license

Installation: Java

In the Terminal type:
    javac

If you have the JDK installed this gives some instructions on how to use javac, and your JDK is already installed.

If not, then it will fail but OSX will recognize the command as belonging to the JDK package, and you'll be prompted to install the JDK/JRE. Neat, huh? Go for it.

After it has installed, there's still a step. The build tools will need the JAVA_HOME environment variable set.
    Edit the file ~/.bash_profile   (it may not exist yet, create it)
    Add this one line:
        export JAVA_HOME=$(/usr/libexec/java_home)

Installation: NodeJS

The npm utility is part of NodeJS, and is effectively your package manager as far as Cordova is concerned.

Visit http://nodejs.org/download/ and download the DMG file for OSX. Run it, and follow the installer. Simple.

Then let's install the Cordova library, as well as an Android debugging tool:

    sudo npm install -g cordova
    sudo npm install -g adb

Installation: Android SDK and Android Development Tools (ADT) and the Eclipse Plugin

Fire up Eclipse, and install the Android Development Tools (ADT) plugin.
Go to Help / Install New Software
Enter this for the repository:  https://dl-ssl.google.com/android/eclipse/

Eclipse will restart, and will ask for the location of the Android SDK -- but will also allow you to let it download one. (Note that older documentation has you download the SDK separately, but this is no longer necessary.) It will download the SDK tools (including the "android" configuration program which you'll use a lot) into /users/YOURNAME/android-sdks

After it comes back up, add the ADT tools to your PATH so you can use them in the terminal:
    sudo nano /etc/paths
Add these three lines:
    /users/YOURNAME/android-sdks/tools
    /users/YOURNAME/android-sdks/build-tools
    /users/YOURNAME/android-sdks/platform-tools

You should now be able to start a new Terminal window, and run the command android and get the ADT configuration tool.
You'll be seeing a lot of this later on, as you install more Android SDK components.

Your first task will be to install a bunch of SDKs for various versions of Android, as well as the HAXM.
Go ahead and run android, then install the following:
    Android SDK Tools
    Android SDK Platform Tools
    Android SDK Build Tools
    Android 4.4 SDK Platform and Intel Atom System Image
    Android 4.2 SDK Platform and Intel Atom System Image
    Android 4.1 SDK Platform and Intel Atom System Image
    Android 2.3 SDK Platform and System Image
    Extras: Intel x86 Emulator Accelerator (HAXM)

A Brief Word on Android Emulators and HAXM

If you want to test on a plethora of Android devices, you'll usually want to use the Android emulators and Android Virtual Devices (AVDs). These are exactly what they sound like: virtual machines running Android, so you can test your apps without buying the real devices.

Android emulators are painfully slow, but Intel Hardware Accelerated Execution Manager (HAXM) helps. You downloaded the HAXM earlier, but it didn't in fact install it. Installation of HAXM is done via Finder and not via CLI (it's an OSX installer, and not a command-line tool you'll use again). Use Finder and browse to your home folder, the android-sdks subfolder, then extras, and the Intel  Hardware Accelerated Execution Manager (HAXM) and open up IntelHAXM.dmg  This is a regular installer, a few click and you're done.

Tip: Some older android emulators will not run on an Intel CPU, but ARM. These will be even slower than the Intel ones because they cannot use HAXM. Even the Intel ones are painfully slow, and have trouble with actually installing the APK. For myself, I prefer to just buy the $60 tablet at Rite Aid, and a $100 Nexus tablet via Groupon, rather than wait several minutes at a time for an emulator that may or may not start successfully.

If you do choose to use emulators, they are called Android Virtual Devices (AVDs). These are managed in the android manager, under Manage AVDs. The options should be self-explanatory, such as the screen size and the storage, and there are a bunch of presets for some popular devices.

Installation: iOS simulators

Pretty simple, really:

    sudo npm install -g ios-sim
    sudo npm install -g ios-deploy

Tip: As with the Android emulators, the iOS emulators are quite slow and don't always load your package anyway. Since we need to test on real hardware anyway, I prefer to just test it there.

Ready?

By this time you should be able to execute the following commands in the Terminal, and at least have them show some help messages, or at least error messages indicating that they are installed.
    ant
    javac
    echo $JAVA_HOME
    adb
    cordova
    ios-sim

At this point, you're ready to begin creating your first project!