Creating A Mobile JavaScript Chat – Part 3: Going Mobile

Android Loves PhoneGap

Introducing PhoneGap

In the former parts of the series, we’ve created a JavaScript chat server, and a JavaScript chat client. Now it’s time for converting our client into a native mobile application. To achieve this, we will be using PhoneGap as an intermediate layer between our HTML5 / JavaScript client and the mobile phone’s (i.e. Android, in our example) operating system.

The beauty of PhoneGap is that it supports the most popular 6 mobile platforms (by the time of this writing: iPhone, iPad, Blackberry, Palm, Windows Mobile and Symbian).

Moreover, with PhoneGap’s cloud build service (currently in beta), you can say goodbye to SDKs, compilers and hardware. Simply write your app using HTML, CSS and JavaScript, upload it to the PhoneGap Build Service and get back app-store ready apps for Apple iOS, Google Android, Palm, Symbian, BlackBerry and more .

In this tutorial, we will build and launch PhoneGap API‘s demo application in an Android emulator. In the next tutorial, we will then slightly modify this demo to use the HTML5 / JavaScript chat web application that we’ve created before.

So let’s make our development environment up and running first:

Prerequisites

First of all we need to make sure that we have recent versions of Java SDK, Eclipse, PhoneGap SDK, and Android SDK.

• Download and install Java SDK.
• Download PhoneGap SDK and save it to a convenient location (mine is /home/volkan/phonegap-0.9.5).
• Download Android SDK and put it to a convenient location (mine is /home/volkan/android-sdk).
• Download and install Eclipse.

Installation

In order to develop our application, we need to follow these steps:

• To install ADT click on “Install New Software” in Eclipse’s Help main tab and enter the following site to work with: https://dl-ssl.google.com/android/eclipse/.

  Eclipse Repository Selection

  
  

• After installing ADT, restart Eclipse.
• Under window / preferences / Android, specify your SDK location and click OK.
  

  Android Preferences

  
  

• Then open window / Android SDK and AVD Manager.
• Click Add Addon Site and add https://dl-ssl.google.com/android/eclipse/.
• Select Android DDMS and Android Development Tools.

  Install Development Tools

  
  then click Next.

• In this process, you may receive the following error:

  Certificate Exception

  
  

• If so, you’ll need to run Android Configuration from the SDK folder:

  Android SDK Settings Runnable

  Run

  
  

• Then check “force https sources to be fetched using http“.

  Force Http

  
  

• Then go to Eclipse and re-open window / Android SDK and AVD Manager / Available Packages.

  Available Packages

  
  

• Check the latest versions of Android SDK, Android SDK Tools, Android SDK Platform Tools and Android SDK Api Documentation. Then click “Install Selected” to install your selections.
• Then create a new Virtual Device using the Virtual Devices tab.

  Virtual Device

  Virtual Device Properties

  
  

• Then from the eclipse main menu, choose File / New / Project.
• Chose Android Project from the wizard.

  New Android Project

  
  Click Next.

• Select “Create Project From Existing Source”. Then choose Android Sample Directory from the SDK.

  Select SDK Sample Location

  
  After the selection, choose the latest API version for the build path, write a name for the project and click Finish.

• If you’ve followed the steps without problems, you should have a project with the following directory structure:

  
  

  Project Directory Structure

  
  

• If you try to build and run the project in Eclipse you may get a build error. This is because you have not added the external library (phonegap.jar) which is created in the libs folder of your workspace.
  
  .
  To add that external library, right click on the project an select Build Path / Add External Archive and then select the phonegap.jar in your libs folder.
• After having added the jar, right Click on the project and choose Run As / Android Application.
• After waiting for (a very) long amount of time, you’ll see the following screen, which means that we’ve set up our demo application correcly, and we’re successfully running it in an Android emulator.

  PhoneGap Emulator

  
  

Conclusion

To create a PhoneGap app on Android, a lot of different parts have to work together. This could mean that you could have trouble setting up the complete environment on the way . However, once everything is set up, you can easily create PhoneGap apps using open web standards, i.e. HTML, JavaScript, and CSS, and using PhoneGap‘s API to perform device-specific processing.

This saves you the trouble of learning the native language, still giving the power of custom, native-built Android apps.

…

That’s all for now
In the following tutorial, we will try to run our chat client under this emulator.

As I’ve mentioned, setting up the working environment is a little challenging.
And it’s possible that I may have missed tiny little pieces since I cannot test all development environments and API versions. This demo works okay in my Ubuntu Natty / Eclipse Galileo / PhoneGap 0.9.5 environment.

Have I missed anything?
Would you like to add further steps and clarifications?
Have you experienced any troubles when setting up your environment?
How can we improve this tutorial further?

Feel free to share your comments and ideas