Ok, I’ve got a little time on my hand before I start with a wordpress project I am doing (creating wordpress plugins are fun 🙂 – yipee ).
Let’s try to make a simple Android application using the phonegap cross-development framework calling a php script that uses my spelldial class to return a spelldial uri. Part one will describe steps on how to make your very first native webapplication in android (simply a hello world android web application).
I assume that you know how to install eclipse, the android sdk and the phonegap framework on your system (I’ll cover this in small detail, to help you get started).
There are many ways to program in android, ios, symbian, blackberry or winmo phones. There are cross-development frameworks which give you an abstract way to program in these mobile devices without dealing with the underlying phone hardware.
Two different technologies come to mind (these are the most popular that I’ve seen):
1. Appcelerator Titanium – this cross development tool allows web developers to quickly go into the mobile application department using what they know. HTML5, CSS, and a host of web programming languages such as php and ruby are supported. What is unique about this SDK is that these technologies are then compiled into their native counterparts – the end result is a native application. Impressive, actually. Supports both iOS and Android environments.
Which is more appropriate? If you’re a web developer and would like to make your application as close as possible to a native application, your best bet would be Appcelerator.
Why am I using phonegap in this case? If you just like to quickly develop applications and do not care if they look different from native applications, use phonegap. By the way, because of how phonegap works, it is available to more mobile environments than Appcelerator. Symbian, WinMo, Blackberry, iOS and Android mobile environments are supported by phonegap. No matter what the environment, your application would look the same because it is just practically your html application enclosed in the native phone’s browser class.
Also, phonegap is supported by the Dreamweaver CS 5.5 release, which means if you can afford it, mobile development will be quite simple to do (without using Eclipse as your environment to develop phonegap applications).
Now, lets begin. Let’s create a new project in eclipse by selecting File->New->Other
We now include our details for the application (Since Froyo or Eclair, the android version before 2.2, runs in 86% of android phones, I choose the lowest common denominator, Eclair), below:
We will have to add the phonegap jar file to the libs folder (which you will have to create) and also create the /assets/www folder where you will place the html files for your application. In this www folder, you will have also to place the phonegap.js file in there. This js file contains the functions that you will call to access native mobile phone functions such as accessing your camera, contacts, etc.
In order for Eclipse not to spurt out an error message (having a java class not available for use), we have to add phonegap.jar to the Build Path (Right click on the libs folder, select Build Path->Configure Build Path):
We will now edit the spelldial.java source code which was created using the New Project Wizard to look like this:
Let’s look at it line by line:
The code above imports the phonegap class for use in our application.
public class spelldial extends DroidGap
Our spelldial class (which was created by the Wizard), extends upon the DroidGap class, which is in fact an extension of the WebView class.
This line below is what runs the web application (sort of like the main() function in your c program):
You can change the url to whatever you have placed in the assets/www folder as your starting point. index.html can simply be text saying “hello world” at this point.
One more thing, since phonegap uses certain native phone functions which require explicit permissions for the app to run, we’ll have to edit our AndroidManifest.xml to allow our app to use these:
These tags are placed below the android:versionName section:
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
And there you have it, some basic steps on how to set up the phonegap framework in eclipse. Part 2 will be the actual js code and php code that this web application uses to call a person using the spelldial api php class hosted on a server.
To end this, let’s take a look at phonegap support in Dreamweaver CS 5.5: