Getting Cordova to work on MacOSX for Android

After two days of struggling with it, I managed to successfully run cordova on my mac through the Terminal, and I want to share my experience, in an attempt to make things easier for the rest of you people. I should say here that I am no pro, and I spent hours browsing stack-exchange, stack overflow, step by step guides and blogs.

The most helpful blog post that I found is on the blog iPhone Dev Log by Steve Husting. As the subtitle of the blog notes, it is a blog for “Making iPhone and Android Apps with PhoneGap/Cordova. For the Non-tech Savvy.”

So, let us begin with the basics:

1. What is cordova?

Cordova is “a platform for building native mobile applications using HTML, CSS and JavaScript”. What does this mean, exactly? Than you can create an android (or ios, or blackberry, or any other mobile) application just like you would make a webpage. It compiles your webpage into an app. Are we ok there? Great.

Why should you use cordova, when you can do it with Java and the Android SDK? Because you already know HTLM/CSS/JavaScript, or for any other reason. However, the procedure described here contains some basic steps that need to be taken in order to compile ANY kind of android app, because you have to set the environmental variables that need to be set anyway.

2. PhoneGap

What I did first, that guided me to cordova, is that I installed PhoneGap, a “free and open source framework that allows you to create mobile apps using standardized web APIs for the platforms you care about.” I don’t know its wider extends, but at the moment, the way I use it is pretty straight-forward. It sets up a server and a port, to which you connect your phone, and then you can see in real time any changes you make to your “website” files (.html, .css, .js). Very convenient.

So, I installed Phonegap and then I created my first project which generated a folder which contained another folder in it named “www”, in which were all the usual files that accompany a webpage (index.html, .css files, img folder etc). I opened index.html with Dreamweaver and started playing with it, until I realized that I was “missing the cordova.js”.

3. Installing cordova

So, I went on to find out what cordova.js is and what it does, and then I went on to install it.
I was directed to the “command-line interface” for installation and then things started to slow down. I advise you to take a look at the steps before continuing with this blogpost.

3.1 Getting to work with the terminal

You can install cordova via the Terminal (Applications>Utilities>Terminal) once you install the node.js, as described in the cordova site and the iPhone Dev Log

First of all I had to install node.js and also download and install a git client. Everything ran smoothly.

For these steps you can either follow the instructions on the cordova site or on the iPhone Dev Log or just go about them yourself.
If things are not running when you are using the Terminal, try using the sudo command to run things as root, in order to access things “outside” my user account, that is. This required the administration password.

3.2 Cordova is successfully installed

Let us assume that you are now on step 16 of the tutorial at the iPhone Dev Log and you have installed cordova successfully.

To check if it is installed type in the Terminal

cordova --version

If cordova is installed correctly, the Terminal will print out the version number, mine read:

4.2.0

If yes, you are ready to run the step 16 as described in the iPhone Dev Log post.

The cordova ran almost ok for me in the beginning, creating a new folder like the PhoneGap did, with the “cordova create” command.

4. Installing all the missing Developer Kits (Xcode, JDK, JRE, Android SDK, Apache ANT)

This was until I needed the Homebrew package, described in steps 17-19 of the iPhone Dev Log. This required (as I should have guessed earlier) the Xcode developer tools to be installed. So, do go ahead and install these tools now (it might take some time, since it’s more than 2.5 GB.

At this point I realised that I should obviously also install the Android SDK, and it would be a good chance now to install also the Java DK and the Java JREHere is also the android studio, which you will need to access the Android SDK Manager, to install possible missing packages (this might come up later).

The homebrew is supposed to be useful in installing ant, however, I downloaded ant manually from here and set the path on my own as described in only the FIRST FOUR steps here.

The homebrew is also useful in installing the simulators for the mobile devices.a

5. Modifying the PATH and setting Environmental Variables

At this point it would be useful to modify our PATH to contain the position of the Android home, and set the Android home, the Java home and the Ant home.

At this point, I would suggest this order of doing things as opposed to the order described in iPhone Dev Log, so as to avoid unforeseen errors. My blogpost is an attempt to cover any errors that have not been resolved in iPhone Dev Log.

Ok, so in my opinion, the way that the changing of the paths described in iPhone Dev Log is not very helpful and also prone to mistakes.

Here, I am suggesting to keep the original PATH as is and putting any change to the PATH to a bash_profile file. This way, the change will be permanent (it will update at each login to your mac), but you will be able to modify it.


RESETING THE PATH

If your path gets too messy (as mine did at some point, I don’t know how) there are two ways to “clean” it.

If you modified it through a simple terminal command like this one:

PATH=“${PATH}:~/blabla/blabla/bla

export PATH

when you close the Terminal window the changes will be lost

to check it type

echo $PATH

to see what the PATH is set to.

You can also try to log out and log in again.

If it is not changed again, you can create a new .bash_login file to set the PATH again on each login. If you need more info on that, read here.
To create the .bach_login file navigate to the home directory by typing into the terminal:

cd ~/

and then

touch .bash_login

open -e .bash_login

A text file will open. Write in this file the initial PATH, or the part of the PATH that you think is correct and will not be needing many changes. This kind of PATH for me was something like: “/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/git/bin”. Now save and close the text file.

For this to take effect you then need to type

. .bash_login

This is the way to reset the PATH.


ADDING ENVIRONMENTAL VARIABLES AND DIRECTORIES TO THE PATH

If, at this point, you need to read more into environment variables and shell commands, I would suggest reading this, this and this.

Now, you would like to create a .bash_profile file, as described in iPhone Dev Log. This will add to the PATH any other directories that you type into it and will set environmental variables that you type into it. As opposed to iPhone Dev Log, we are going to type into the .bash_profile file all of the following: ANDROID_HOME, JAVA_HOME and ANT_HOME, and also add to the PATH what is needed.

Let’s see how we do this:

Navigate again to the home directory

cd ~/

And create a .bash_profile file as described in step 22 of iPhone Dev Log.

touch .bash_profile

open -e .bash_profile

These steps create and open a .bash_profile file, similarly to how we created and saved a .bash_login file in the previous part.

SETTING JAVA_HOME

Now, first you need to locate the Java DK position in you Mac:

Mine was in the Macintosh HD (or your main hard disk). To go there from the toolbar Go>Computer and then click on the name of your main hard disk. Then, in my Mac, it was here:  System>Library>Java>JavaVirtualMachines>jdk1.7.0_75.jdk>Contents>Home

So, for JAVA_HOME you type:

JAVA_HOME=/System/Library/Java/JavaVirtualMachines/1.6.0.jdk/Contents/Home

SETTING ANDROID_HOME

The Android is installed at yourusernamefolder>Library>Android>sdk

To make sure, go to the toolbar Go, press and hold the option key (or alt), and click on Library that will appear there.

So, you set as ANDROID_HOME the following:

ANDROID_HOME=~/Library/Android/sdk

the ~ sign indicates that we are looking into the active Users folder (yourusernamefolder).

SETTING ANT_HOME

When I downloaded apache ant I manually moved it into the Developer folder of my Library, so for ANT_HOME you set:

ANT_HOME=~/Library/Developer/apache-ant-1.9.4

ADDING THE PATH

and then you should add to your PATH the tools for android and the platform tools for android (I will explain why), and also the bin folder from the ant.

So, you type:

PATH=${PATH}:${ANDROID_HOME}/tools:${ANDROID_HOME}/platform-tools:${ANT_HOME}/bin

The “${SOMETHING}” means we keep the “something” path.
The “:” means we add another directory to it.
So, ${PATH}:${ANDROID_HOME}/tools means “add to the existing PATH the folder tools from the directory ANDROID_HOME”

ADDING PLATFORMS TO ANDROID
A path to the platform tools is needed because, when compiling an Android .apk, cordova will probably ask you for a specific platform to be installed (in my case it asked for platform android-19). So it will need to have access to the platform directory. 
If a platform is missing, you will need to install it from the Android SDK manager, which is launched like this:
you launch android studio (create a new project or whatever it does not matter, just press next-next-next-finish), you wait for the program to open completely, and then you go to Tools>Android>SDK Manager
From there you will be able to install any missing platform/version.

So, to wrap it up, a neat .bash_profile file would look something like this:

export ANDROID_HOME=~/Library/Android/sdk

export JAVA_HOME=/System/Library/Java/JavaVirtualMachines/1.6.0.jdk/Contents/Home

export ANT_HOME=~/Library/Developer/apache-ant-1.9.4

export PATH=${PATH}:${ANDROID_HOME}/tools:${ANDROID_HOME}/platform-tools:${ANT_HOME}/bin

Respecting of course the possibility of different folder names for the Java DK and the ant IDK.

When you are done and you save the file, type in the terminal

. .bash_profile

for the changes to take effect.

If you want to check your path, type “echo $PATH”

If you want to make sure Java is identified, type

java —version

if the terminal echoes the version, then java is identified.

6. Compiling the Android App

So, now, hopefully, you can add the platforms (ios, android, blackberry etc) that you want to make an app for. See step 24 of the iPhone Dev Log.

You must navigate, through the terminal, to the folder of your project, mine was on the desktop so I typed:

cd Desktop/MyProject

When you are in the folder of your project, type:

cordova platform add android

and now android should be added as a platfom. To check type

cordova platform list

and see if it is listed.

Now, you should be able to build the android .apk without any problem. In the Terminal, in the folder of your project, type:

cordova build android

If there are no errors, your .apk android package is positioned at:

YourProject>platforms>android>ant-build>CordovaApp-debug.apk

and it is ready to be installed on an Android device.

And you are done.

For further work, visit the iPhone Dev Log or ask me in the comments, I might have come across your error and forgot to list it.


BIBLIOGRAPHY:

https://spring.io/guides/gs/android/

https://iphonedevlog.wordpress.com/2013/08/16/using-phonegap-3-0-cli-on-mac-osx-10-to-build-ios-and-android-projects/

http://docs.phonegap.com/en/edge/guide_platforms_android_index.md.html#Android%20Platform%20Guide

and lots of other posts at stackexchange and stackoverflow that got lost in my history. Sorry for any credit NOT given.

Advertisements

About Katerina

Katerina Skroumpelou is an architectural engineer, and currently a PhD candidate at the School of Electrical and Computer Engineering at National Technical University of Athens, Greece. She holds an MRes title on Advanced Spatial Analysis and Visualisation, that she acquired from the Centre for Advanced Spatial Analysis of UCL. Her research interests revolve around the concepts of the Internet of Things, the future of cities and the technological and social aspects that arise. Katerina is a front-end developer at Upstream. In the past, she worked as a web developer at the National Centre for Scientific Research "Demokritos". Before diving into web development, she studied Architectural Engineering and she holds an MRes title on Advanced Spatial Analysis and Visualisation, that she acquired from the Centre for Advanced Spatial Analysis of UCL. She also took a number of post-graduate courses at the School of Electrical and Computer Engineering of NTUA. She is indigenous to the internet, and she loves web development. So much that she does not understand the distinction between work and life sometimes. Or so her friends say. She lives with her Maine Coon in Athens, Greece.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: