Tuesday, November 25, 2014

My First Mobile Application

It is time to write my first mobile application. The inspiration comes from a free online course on cross platform mobile development. The course uses PhoneGap for development. This post is about configuring the environment on Windows and creating an empty "Hello World" application. Step one was to gather and install the required software. The list includes
  • AndroidSDK
  • ApacheAnt
  • Eclipse
  • JDK
  • NodeJS
It is important to download the correct version of your operating system (Windows 64 or 32 bit in my case), and also where the software is copied to or installed to, because it will be necessary to add these locations to environment variables. Now, the installation - Node.js and JDK are installed, and Eclipse and Ant are just extracted to your preferred location. I, personally, tried to make the path to this location as simple as I could, i.e. C:\Development\ant. Next, install PhoneGap. After you installed Node.js, you have Node.js command prompt in your Start menu. Run it and execute
npm install -g phonegap Now some path modifications are required. Here are brief instructions to locate where it is done:
  • Right-click My Computer and click Properties
  • Click Advanced System Settings link in the left column
  • In the System Properties window click the Environment Variables button
  • Select the variable you want to edit (i.e. PATH)
  • Select the edit button.
Here is what was necessary for me:
Create ANT_HOME (my value is C:\Development\ant)

Create JAVA_HOME (my value is C:\Program Files\Java\jdk1.8.0_25)
Add the following to the PATH variable at the end:
;C:\Development\adt\sdk\platform-tools;C:\Development\adt\sdk\tools;%ANT_HOME%\bin;%JAVA_HOME%;%JAVA_HOME%\bin.

As you can see, that includes Java, Ant and ADT. And to check that everything is set up properly, you need to run the following commands one by one from the command prompt:
  • java
  • javac
  • android
  • adb
  • ant

If any of those return the error '<name>' is not recognized as an internal or external command, operable program or batch file, there is probably an issue with the PATH - something is not included, or points to the wrong location. Note: when you run "ant", you will likely get the following message:

Buildfile: build.xml does not exist!
Build failed

This is expected and no need to worry about. Now the prerequisites are installed. Time to create the actual PhoneGap project. In Node.js command prompt, navigate to the place where you would like your project to be created and execute
phonegap create . "com.yourname.app" "yourappname"

The project should be created. Just to make it a little different from the empty Hello World application, I went into the www folder and modified the text in the header in index.html. Index.html can be viewed in the browser at this point.

Now the command to build the project.
phonegap install android
At this point I got the following error

As you can see, the Android-19 target is missing. The solution is to launch Eclipse, start Android SDK manager, and, to put it simple, install everything that has 19 in it. In my case it looks like this:

This will take some time. When it is done, run the command again.
phonegap install android
And in my case I received the following error:
No emulator images (avds) found ...
I solved it by running
android avd
This started the visual wizard where I could choose the desired parameters for the Android emulator and create it.

And finally, again
phonegap install android
This time it started the emulator, on which the application ran.

So this sounds fairly straightforward at the moment, but I had instructions when I started and still I spent probably about 4-6 hours on two PCs over the course of two days to figure out how to get to this point of running an empty application. In my defence, I can say that I had exactly zero prior experience in mobile development.
by . Also posted on my website