Blog

03
March 2014

Gavin Pickin

Setting up my MBP For Mobile Development - IOS Android Cordova Node Ionic

Android, Cordova / Phonegap, Ionic, IOS, Node.js, Tools and IDEs

After months of playing with this, and playing with that, I have a few apps I have to actually get built, wrapped in cordova / phonegap and out to the app store and the many customers, waiting to download them. As usual, I want to document the silly little stuff you do to get things all setup, just in case Android destroys my Mac, I need to set it all up again. I have installed and played with some of these tools before, but I decided to start fresh, so follow along.

First, you have to make sure Node.js is installed, because everything is easier with node and npm… and its the cool thing to use these days. I said that with a little jest, but Node is really cool, and the more I read about it, the more I want to really dive into it, and if you only use it for Package Management with NPM, it is well worth the install. 

Visit http://nodejs.org/ and install Node. 
It is a pretty simple pain free process.

Next, we want to install Cordova, because this is what we are going to use to package our apps together.

$ sudo npm install -g cordova

 

Once we have Cordova installed, lets create our first cordova project, I'm following along with the Ionic instructions, so I'm going to path to /mobileapps/ and then run this command.

$ cordova create hello com.ionic.todo Todo

 

At this point, if you're using a framework, like Ionic, you can copy the WWW files in, and you'll want to initialize git in the folder too, you can setup the remote later.

$ cd hello
$ git init
$ git add .
$ git commit -m "Initial Commit"

 

Now, we want to add IOS and Android Platforms to our projects, before we can do that, we have to make sure the SDKs are setup and ready to go. If you haven't got Xcode yet, go to the App Store, and download it. While that 2gb+ file is downloading, we'll setup Android.

 

Android SDK Setup

The Android SDK Bundle comes with a lot of tools. 

  • Eclipse + ADT plugin
  • Android SDK Tools
  • Android Platform-tools
  • The latest Android platform
  • The latest Android system image for the emulator

You can download it here

 

For the Mac, I download it, unzip it, and then place the whole directory structure where I want it.
Since it's portable ish, I'm going to place it in a top level directory, with my other mobile stuff… at /apps/_tools/

This allows me easy command line access to those items, which I do similarly with /www/_servers etc
So all my apps will be in /apps/ all my websites are in /www/

Once you extract it and move it to the location you want to have it running, open Eclipse, and it will ask you for your Workspace and will detect the SDK based on that location. If you move the whole folder later, you'll have to specify the SDK path again, but it warns you, and allows you easy access to do so, so not a big deal.

Next, we need to make sure our $PATH includes the platform-tools and the tools directory.

On the mac, an easy way to change your $PATH variable is

$ sudo nano /etc/paths

 

Each line has a different path, add more and save, and the system will make sure your $PATH variable has all of the paths. So I append the following.

/apps/_tools/adt-bundle-mac-x86_64-20131030/sdk/platform-tools
/apps/_tools/adt-bundle-mac-x86_64-20131030/sdk/tools

 

CTRL X to exit, press Y to save

Type echo $PATH and you'll they were not added. Do not worry, CMD N for a new Terminal / Console and you'll see they have been added. The system updates the $PATH variable every time a new console is created.

Now, we can run

$ cordova platform add android

 

And we see the following output.

Creating android project...
Creating Cordova project for the Android platform:
Path: platforms/android
Package: com.ionic.todo
Name: Todo
Android target: android-19
Copying template files...
Running: android update project --subprojects --path "platforms/android" --target android-19 --library "CordovaLib"
Resolved location of library project to: /mobileapps/hello/platforms/android/CordovaLib
Updated and renamed default.properties to project.properties
Updated local.properties
No project name specified, using Activity name 'Todo'.
If you wish to change it, edit the first line of build.xml.
Added file platforms/android/build.xml
Added file platforms/android/proguard-project.txt
Updated project.properties
Updated local.properties
No project name specified, using project folder name 'CordovaLib'.
If you wish to change it, edit the first line of build.xml.
Added file platforms/android/CordovaLib/build.xml
Added file platforms/android/CordovaLib/proguard-project.txt

Project successfully created.
Generating config.xml from defaults for platform "android"
Preparing android project

 

Success, ok, now we need to get back and get IOS ready.

Setting up the iOS Platform - Xcode

Its been a while, so hopefully the 2gb Xcode beast has downloaded, search for Xcode and launch it… to begin the Installation Process.

Agree to the Xcode and IOS Sdk Agreement, you'll be prompted for Administrative Access, and you'll have to close down other Apple apps like iTunes etc. Click quit all, and it will install. Quickly and painlessly, you'll see it has installed, and the floating welcome screen should look something like this

Once you have installed Xcode, you can run this command in the project to add the IOS platform to the project.

$cordova platform add ios

 

and you will see this output.

Creating ios project...
Generating config.xml from defaults for platform "ios"
Preparing ios project

 

Great.

  • We have installed Node / nom
  • We installed Cordova
  • Installed Android SDK
  • Installed Xcode for IOS 
  • Created our first Cordova Project
  • Added IOS platform to the project
  • Added Android platform to the project

Busy blog post… but a couple more things, and lets get this app BUILT.
Lets add a couple of plugins - the Device API to query the Device

$ cordova plugin add org.apache.cordova.device

 

and you see this output

Fetching plugin "org.apache.cordova.device" via plugin registry
Starting installation of "org.apache.cordova.device" for android
Preparing android project
org.apache.cordova.device installed on android.
Starting installation of "org.apache.cordova.device" for ios
Preparing ios project
org.apache.cordova.device installed on ios.

 

To access the console.log features in our IDEs, lets add the Console plugin.

$ cordova plugin add org.apache.cordova.console

 

and you see this output

Fetching plugin "org.apache.cordova.console" via plugin registry
Starting installation of "org.apache.cordova.console" for android
Preparing android project
org.apache.cordova.console installed on android.
Starting installation of "org.apache.cordova.console" for ios
Preparing ios project
org.apache.cordova.console installed on ios.

 

All going well, we should be ready, lets try and emulate the project on the android emulator.

$ cordova build android

 

And you will see loads and loads of output. 
The short of it is the last few lines.

BUILD SUCCESSFUL
Total time: 27 seconds

 

Lets run it in the emulator

$ cordova emulate android

 

Of course, if you forgot to setup the Android Virtual Device, you'll get an error. 
Lets do that now.

The easiest way to do it is open Eclipse, and select Window > Android Virtual Device ManagerFrom there, you can click NEW. I selected Nexus7 gave it a name, target, and left the rest as is.

Now, I go back to the command line, type cordova emulate android again, and it launches. 

It doesn't take too long to see the emulator pop up, but it takes a long time for it to load everything, so rest the restroom, grab a drink and something to nibble, and come back to see what magic has happened.

Ok, I'm back… still waiting… but it looks promising, I'm excited.

The Emulator is up, but after a LONG LONG time, its still not launching the app. I can unlock it, click around some, but its busy, and I don't think it's going to ever finish.

Eventually, I kill it.
I do a little research, and realize that too much RAM for your AVD is a common problem.
Go into Eclipse, edit the AVD, and reduce the ram to 512.

Go back and rerun the command again, and hey presto, we have a winner. 
The emulator is up, it launched into the basic app, but we're in business.

Now, I have to get some real apps running it.
Check back for more mobile fun soon.

by Paul
03/04/2014 05:32:08 AM

Cool, thanks! Been thinking about dabbling in Android. If you don't mind, can you share details about your MBP? After adding an SSD to my MBP 2,1, I am convinced it is all I ever need, haha. But this year I am going to make the leap to an x64 MBP. Thanks again for the post!

Blog Search