Rapid mobile application development with Android OS

Mobile application development has quickly become one of the hottest areas of software development.   In a relatively short amount of time the mobile device has become a significant medium for web browsing and online applications, with Apple’s iPhone and Google’s Android OS-based devices leading the charge.  It’s possible that mobile web users may even surpass desktop computer web use in the near future as more and more people start using the devices for general web access [1].

The trend towards mobile application development is very exciting right now and I was happy to be given the opportunity to develop for a mobile platform recently.  The project objective was to prototype a current web mapping application for the Android OS-based mobile device.  With a limited budget of time to put towards the project I needed to build a mobile solution as fast as possible, and this includes starting from the ground up with no background experience in Android development.  Initial research into this development area revealed I had at least two paths I could take;   build a native Android OS application with Java development tools or build a mobile friendly web application for the device to consume.

After doing some more research and consulting my coworkers with experience in this area it was obvious the direction to take was to build a mobile friendly web application.  This would literally be just a webpage, but built with the mobile client in mind.  Taking this direction allowed me to minimize the time spent learning new technologies associated with native Android development and take advantage of my current web development skills with HTML, CSS, and JavaScript.

Android setup

So, the first thing I needed to do was to setup my Android development environment.  Even though the core of my application was going to be a web page I still needed to have a complete Android development environment running.  I will need this to build a small native Android application to view the mobile friendly webpage.  Of course, the mobile client could just manually browse to the web app, but using the Android application wrapper allows the developer to have greater control over the user experience than the built-in web browser would allow.  I will also need the Android development tools for application testing and to build an installer package (.apk) to distribute to other Android users.

Luckily, setting up my environment for Android development was very easy.  I chose to use the recommended IDE, Eclipse for Java Developers, and I used the official Android Developers setup guide (http://developer.android.com/guide/developing/eclipse-adt.html).  In a Windows environment, here’s what you’ll need to download and install to start building Android applications:

Once my Android development environment was setup I then reviewed and completed a few of the Android developer samples to become familiar with the framework.  The most important of these samples was on the topic of the WebView control class (http://developer.android.com/resources/tutorials/views/hello-webview.html).  This is essentially a stripped down mobile web browser, which is just what this project required.

Building a mobile accessible web application

When building a mobile friendly web application many things have to be considered; the size of the client interface, the specialized browser, device hardware specific functionality, etc.  Building a mobile friendly client from scratch seemed like it would exhaust the budget of the project alone, but luckily that would not be needed.  Thanks to the pioneers in this emerging field several mobile development frameworks and templates already existed for me to consume.

PhoneGap is one such framework.  PhoneGap provides a ready-to-use template for most all current mobile smart phone platforms, including Android.  PhoneGap is the easiest solution available right now for quickly setting up a mobile web application for your device.  Besides a template for the Eclipse IDE, PhoneGap also provided JavaScript utilities for accessing the hardware of the mobile device.  PhoneGap will give me access to important device features such as GPS/geo-location information and ring/vibrate commands.  So, now my web application can access the Android hardware without any custom programming.

Another indispensable tool for mobile web development was the jQTouch library.  This is a jQuery plug-in for mobile browsers offering JavaScript utilities and stylesheets.  The main features provided by jQTouch included styles and animations for the mobile web layout and AJAX support.  Between PhoneGap and jQTouch all of the difficult issues of mobile web development were essentially solved.  All there was left to do was build the web app around these libraries with my existing expertise in HTML, CSS, and JavaScript.

The prototype website

Our example website is not just a static HTML page with a few JavaScript functions for navigation.  It is a fully functioning web mapping application that uses Google Maps API v3 and consumes a .NET WCF web service to calculate polygon footprints of geographic features.   Basically, some input is collected from the user through the GUI, a request is made to the web service, and footprint geometries are returned to the client app as a JSON formatted string.  The return object then needs to be post processed and added to the map as an overlay graphic.

Initially, I was concerned that the mobile browser would not be able to process the JavaScript and render the mapping components with the simple mobile browser engine.  These concerns were quickly put to rest when I learned the mobile browser is actually one of the most advanced browser engines available today.  The Android browser and WebView control used here implement the WebKit rendering engine so that means this browser can handle a lot of the latest HTML5 and CSS3 specifications.  In fact, mobile web development is actually helping push the momentum towards HTML5 since it is an early adopter and growing so rapidly [2] [3].

Using the tools previously discussed, I was able to build the prototype web app with general ease.  Most of the time spent in the coding phase was put towards building the GUI elements, such as the input form and various event handlers, which would be required in any web application.  Only a fraction of this time was spent on mobile specific features, like accessing the mobile device hardware.

Once the web app was completed I just needed to add the Url to the Android project in Eclipse that is using the WebView control.  The PhoneGap template offers so many features that it is far outside the scope of this blog, but if you were to create a very basic project from scratch without PhoneGap, the following snippet is all the Java code you really need to display your internet accessible web application.  See the complete code sample and tutorial here.

public class HelloWeb extends Activity {

WebView mWebView;

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

mWebView = (WebView) findViewById(R.id.webview);

mWebView.getSettings().setJavaScriptEnabled(true);

mWebView.loadUrl(“http://www.myWebApp.com”);

}

}

The key property here is the parameter passed into the loadUrl() method on the last line.  That is your web application Url.  And that’s it.  This code will essentially open an Android application window that loads your Url into the WebView.  I didn’t have to learn Eclipse or really any Android specific development.  Simply follow a “Hello World” type of tutorial from the Android documentation that uses the WebView control class, build your web app with the simple plug-in libraries, and then build your Android .apk for distribution.  From my perspective, it hardly seemed like it could get much easier than this to rapidly build mobile web applications from scratch while avoiding a learning curve for yet another daunting, new development framework.

Conclusions

The main point to take away from this blog is that if you already have the basic web development skills (HTML, JavaScript, CSS) then you can be developing Android applications in the time it takes to setup the Android development tools (approx. 15-30 minutes).  An added bonus of developing mobile friendly web apps is that you also have a cross-platform web application; accessible to both the desktop browser and mobile client.  You could take the application to the next level by rendering specific style themes tailored for each of the different client platforms (which you can easily detect with a few lines of JavaScript).  Integrate mapping, live data feeds, Ajax web services, and other types of Web 2.0 content and you can have an extremely rich web application that is now accessible to the rapidly growing mobile client base.

Of course, this is just one approach to take when building Android-based apps and I’m sure each approach has its pros and cons.  Feel free to discuss this topic in the comments or contact me at tbramble@gisinc.com.

Web Resources

[1] Pew Internet & American Life Project. 2010. Mobile Access 2010.  Retrieved from http://www.pewinternet.org/Reports/2010/Mobile-Access-2010.aspx on 10 July 2010.

[2] Goolge Code Blog. 2010. Google APIs + HTML5 = A New Era of Mobile Apps.  Retrieved from http://googlecode.blogspot.com/2010/04/google-apis-html5-new-era-of-mobile.html on 10 July 2010.

[3] Read Write Web. 2010. HTML5 is great for Mobile, Developers Say.  Retrieved from http://www.readwriteweb.com/start/2010/01/html5-is-great-for-mobile.php on 10 July 2010.

Advertisements

One Response to Rapid mobile application development with Android OS

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s

%d bloggers like this: