OS X, Cordova, Code, iOS, Android

Some notes on how to get Cordova installed & running on OSX in build iOS and Android Apps

This guide assumes you have the latest version of Xcode install and the associated Command Line Tools.

Install Homebrew

First we need a decent package manager installed, my preference is HomeBrew and the rest of this guide assumes that you have it installed.  

If you don't here's how to get it installed:

Open a terminal and run the following command :

ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"

Note, the command above maybe have changed since writing, jump over to the HomeBrew site and double check. 

Follow the promtps, and make sure you run the doctor command before continuing : 

brew doctor

Install node.js

Now we have brew installed we can use it to install node.js, which is what we'll use to install Cordova and the rest of the deps for it. 

brew install node

Install Cordova 

Now we can use node.js to install the Cordova package

sudo npm install -g cordova

Android SDK 

You need the android SDK installed to develop Android applications, so use brew to install that : 

brew install android-sdk

The android SDK depends on the Java Runtime.  If you not used any Java applications on your Mac then none of the cordova android commands will work. 

The easiest way to get the JRE setup is to execute the android command from the terminal : 

android

You'll see the following image 


Just click the Install button and let the installer do it thing.

Another package that's required, by cordova, is ant.  This can be install via brew using : 

brew install ant

Please Note - At time of writing either brew / Mavericks has an issue installing the ant package, it's reference is incorrect use the following command if it fails :

brew install https://raw.github.com/Homebrew/homebrew-dupes/master/ant.rb  

Setup the Android SDK

Once the JRE in installed we need to setup an android device, which means we need to download the images for the version of android you want to dev against. 

Re-run the android command; this loads the Android SDK Manager which looks something similar to this :


By default the latest versions of the Android API, tools etc. are selected - I go with these normally.  Click Install X Packages and follow the prompts.   

Depending on your connection & selections you made, this might take some time.  

Please Note - At the time of writing Cordova needed to have API v17 installed

Emulator Speed Issues (HAXM)

Please Note - Mavericks (10.9.x) isn't supported by the Intel HAXM.  I've oped to use GenyMotion instead, if you're using Mavericks jump to the next section 

The android emulator is painfully slow, the ARM emulation is the cause.  In order to gain the best performance there are a few options, but I'm going to go through installing and using the Intel x86 Hardware Emulation (HAXM).

You could have selected the option from the SDK manager before now, but I wanted to keep it separate so I could walk through the setup.  Select the HAXM package from the SDK Manager :


Despite having selected this option I find that the HAXM isn't available so additionally I installed the Intel Package from here and follow the installers prompts. 

Create an Android Virtual Device (AVD)

Now we can create a new AVD to test our application on.  Select Tools > Manage ADVs...

It's quite simple to create one from scratch but it's even simpler to use the Pre Defined Definitions.  So that's what I'm going to do here.

Open the Device Definitions Tab and select one of the definitions listed, I selected Nexus 10, and click the Create AVD.. button.  You should see something like this :


Set the target, I selected Android over the Google API as this exposes the Intel x86 Option :


Click OK to create the AVD and now you're ready to start the device.


Setting up GenyMotion/VirtualBox Emulation

In order to use GenyMotion you need to register, it's free so get over to GenyMotion and create an account.

Additionally, you need to have VirtualBox Installed.

Once these are installed, open GenyMotion and signin with your details. You will see a screen like this : 


Please Note - You won't have any items in the top pane, I have already created the Galaxy S4 Device.

Select the type of device you'd like to emulate and click Add.  GenyMotion will then automatically download and configure your selected device. 

Once it's completed you can select your device from the main window and start it by clicking Play. 


Note - there's no UI feedback but in a few ticks you'll see your Virtual device starting. 

Create a simple HelloWorld App

Lets create and setup a HelloWorld app that we can use to test.  Open a terminal, cd into a directory for your dev work and issue the following commands :

cordova create HelloWorld uk.co.net4orce.helloworld HelloWold
cd HelloWorld
cordova platform add android
cordova platform add iso

If you followed the steps above you shouldn't see any errors from the above commands. 

Prepare, Compile & Run - Android

To run the app on Android you first need to prepare & compile the Application.  

Prepare - This is where cordova moves the nessasary files for the platform into place, ready for compliation

cordova prepate android

Compile - Will compile a prepared application

cordova compile android 

These separate commands can be actioned via the build command :

cordova build android

Why have the seperate prepare & compile commands? - Sometimes it's nessasary to alter the content of the prepared project before the compilation.

I'll touch on this in a follow up post where I reduce the size of the packages the mobile have to download when you publish to the different app stores.

Which ever of the methods you've used you should now be in a position to run the app for the first time.  Issue the following command :

cordova emulate android

That's it! you should now see the default cordova app running in the emulator! Whoop!