Application Development for Mobile Web

Application Development for Mobile Web

Application Development for Mobile Web

Published July 12, 2010 by GISi George

As a recipient of the Spring 2010 GIS inc Research and Development award, I had the privilege to work on a solo project incorporating cutting edge technologies. Duringcfricke1 my brain storming process, I settled on probably the coolest segment of the development market at the moment: Mobile Applications.

My first goal setting out was to develop a cross-platform and location aware application for mobile devices. The mobile market is so small at the moment; I felt it would be wise to broaden the application to more than solely iPhone users or solely Android users. This was the greatest challenge.  The iPhone and Android SDKs are in very different languages and do not lend themselves to interpolarity.

cfricke2The owner of a MacBook at home, a Linux server and a Windows workstation I fully understand the constraints of programming for multiple platforms. With the rise of Web 2.0, these constraints are starting to slip away.  It is now possible to write a single web application that will operate on a handful of platforms with very little change to the code base.  With this in mind, I decided that the only viable solution for cross-platform mobile development was with a web application.

Unfortunately, like web applications on the desktop world, web applications in the mobile world suffer some severe limitations.  Namely, web applications cannot easily access local hardware.  In addition, web applications are excruciatingly slow on shoddy mobile internet connections.  To alleviate these issues I also set out to find an easy method of porting my web application as native packages for select mobile devices.

With my first two goals in place, I decided to push the envelope a little further and develop the entire application with the technologies forming the next generation web development.  The proposed CSS 3 and HTML 5 specifications incorporate functionality specifically for mobile devices not available in the current specifications.  These new specifications introduce a shift away from plug-in dependent design towards beautiful.

cfricke3

Application Background

In order to finish my research and development project within the allotted time, I stuck with a subject matter with which I was familiar. I was a Park Ranger for Rocks State Park in Northern Harford County, Maryland before I started my employment with GISi.  While hiking the trail system one day, I realized how few visitors adventured outside of the picnic areas.  After speaking with a few visitors, I realized they did not leave the picnic areas due to a lack of knowledge of the trail system and a fear of getting lost.

I knew the best way to assuage these issues was with a web mapping application for mobile devices. To increase knowledge of the park, the application would display the trail system, points of interest and informational dialog boxes.  To ease the visitors’ anxiety of ending up lost in the park, the web application would utilize the mobile devices GPS unit to display the visitors’ position in relation to the trail system.

To see the application in action, navigate here on your smart phone or download and install the package for Android.

Writing the Code

I spent roughly 40 hours writing the web application portion of this project. I was able to complete this project in this short amount of time with assistance from the following JavaScript libraries:

  • jQTouch/jQuery – Clones the interface and animations of iOS in pure JavaScript and CSS.
  • Google Maps V3 – Google rebuilt this latest version of their Maps API for better performance on mobile devices. It also includes web services for driving directions, elevation and geocoding.
  • Geo-Location-JavaScript library – This library includes better support for GPS calls on devices that do not meet the HTML5 geolocation specification yet.
  • Proj4js – A projection library written in JavaScript. I utilized this library to accurately measure distances and to display the user’s location in various coordinate systems.

I spent the remainder of my time on the project porting my web application to both the iPhone and the Android platforms. You are probably asking, “How does one port their web application to the iPhone or Android?”

The quickest answer is PhoneGap. PhoneGap is an open source templating engine built by Nitobi for Android, Blackberry iPhone, Maemo, Palm OS and Windows Mobile.  The template includes a JavaScript API bridge between your web application and the devices native Object C or Java code.  This JavaScript API allows you to utilize the hardware of any mobile device without changing the underlying code of your application.  The entire process, from web application to native application, can be completed in is less than ten minutes!

Building an application with PhoneGap still requires you to install the platform’s SDK.  This means that the directions for each platform are totally different. Whereas the iPhone requires xCode, the iPhone SDK and a Mac, the Android requires Eclipse, Java and the Android SDK. Your best bet is to read over these tutorials on the PhoneGap FAQ:

Limitations

This method of development for mobile development still has a few caveats. First, HTML 5 is still a draft.  Safari, Chrome, and Mozilla partially incorporated the HTML 5 specification into their production browsers. Internet Explorer is currently the laggard and only supports a finite segment of the specification.  Fortunately, the iPhone and the Android use the webkit rendering engine and have incredibly advanced HTML5 support.

PhoneGap, introduced at the Web 2.0 Expo in April 2009, is a very new piece of software.  It is undergoing intense development and is currently running a four month release cycle.  With all of this change they are still working through some glitches and bugs in the code.  In addition, as an open source project, the lesser used platforms often lack in depth documentation.  Finally, some users of PhoneGap have experienced issues with the Apple’s App Store, but to be honest who has not?

Advantages

The primary advantage of this method is the ability to build a single application that is accessible from multiple mobile platforms.  HTML 5, CSS 3 and JavaScript are the lingua franca of the mobile environment.  Every mobile device will be able to use the application.  Furthermore, you can embed your application into a native application for most devices using PhoneGap.

In addition, with the same methodologies currently used for desktop web development you can create mobile applications. You can use the same IDE you are comfortable with and the same workflow to develop your mobile application.  You can use the same APIs to display data from the cloud or other web service on your mobile web application.

Finally, the Apple App Store review process will not necessarily inhibit your application’s success.  After a month long wait, the App Store never responded with an approval for my developer license request.  If I were developing a traditional native application, this would be time and money down the drain.  With this method, I could easily advertise the product with a web-hosted application until the approval came through.

Conclusions

If you do not need to develop a cross-platform application, native is your best option for developing mobile applications.  First, the native API for the iOS and Android platforms are much more mature.  Also, for the time being, native applications are quite a bit faster than their web application counterparts are. Finally, the mobile web is the wild wild west. Applications written with draft HTML5 specifications today may not work in six months.

On the other hand, HTML 5/CSS 3/JavaScript is your only option for developing cross-platform applications. It was much easier as a web programmer to build a web application than to learn and write an application in Objective C. Also, programming for the web removes many of the boundaries put up by the mobile device manufactures in order to keep you within their ecosystem. However, I would recommend developing your own GUI, rather than relying on the jQTouch framework.  jQTouch is really cool, but it looks is a little too much like the iOS.

In conclusion, Web development for the mobile web is an excellent market to enter in to. Learning how to design and build mobile web applications embraces our core value of intellectual relentlessness.  It gives us the opportunity to break through walls and try something new.  Also, with such a new field, we can really make an innovative impact on the market. Most importantly, the knowledge learned developing cutting edge web applications for mobile devices now will give us a leg up for developing next generation web applications in the desktop environment in the future.

Share this:

Leave a Reply