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
What if we want to run this in a blackberry how do we do that…
Hi Cornelius,
You can run hybrid mobile applications in BlackBerry using PhoneGap as well.
Actually I have been creating a BlackBerry mobile app for GROU.PS for around 3 months.
You can find a more detailed introduction at the PhoneGap wiki.
Honestly though, Blackberry is a wild beast to play with. PhoneGap plays nicer with Android and iOS.
Hope that helps.
Hi,
May i know how fast we can give a reply to other user??? and is it apply for simultaneous user with chat??
Thanks for mentioning Brindha.
Please note that this is “tutorial” to demonstrate the concept, not a real-life example.
In a real life chat application I would probably use an XMPP server (such as eJabberd) and use websockets (and fallback shims) for real-time messaging.
These would solve both “instant messaging” and “multiple user” issues that you’ve mentioned.
Maybe I should write follow-up articles, creating a simple jabber, and doing chat over it.
The interested might want to explore ejabberd, and strophe.
It’s really easy to create a simple chat client that connects to a jabber server, after some RTFM.
(where before doing any coding, RTFM is of utmost importance, because jabber has its own terminology for many things such as “rosters” and “stanza”s “presence”s; which haven’t probably read about if you’re not into the subject)
Hope that helps.