Common Connect - 2012 Buyers Guide

Depending on what browser you have and what the capabilities of your phone are, you should seesomething like the image above. Want to try it?

Go to http://opensourceoni.com/schedule/ GetWeb?action=HTML5

There are really two areas where some “heavy lifting” occurs. On the backend the database on the i is built using the jsoup routines to go to the Common web site, read through the schedule pages and then extract the relevant data into the DB. That is done initially through a call to a separate web AJAX method and then on a regular, scheduled basis to update changes in the schedule.

The second area where there is quite a bit of code is on the client side in order to store the schedule locally. Local storage on mobile devices has gone through some agonizing turns. The original specification for a “mobile database” that was under development has been abandoned due to lack ofagreement on the specification. That left few alternatives. There is “local storage” which consists of text based name:value pairs. There is SQLite for some mobile devices and then there are several open source, javascript based attempts to solve the problem.

Originally I thought the lack of a local database would be a showstopper for the application. With noway to build, parse, and update a database, how could I have a truly disconnected mobile app so thatthe user could access their schedule even if there was no network connectivity? The solution was simpler than I thought and it centers around JSON. Remember that JSON is just a string representation of a Javascript object. The object can be quite complex (just take a look at the JSON examples at http://json.org/).

Local storage allows you to store any string data as a name:value pair so I simply used the “name” portion of the paring as the key to my record and the “value” portion was my JSON string (a “record” by any other name). The really cool and useful part of this approach is that I can retrieve JSON strings from my server based app and simply store them in local storage. When I retrieve the JSON I simple render it into an object. So I really end up with a very functional, object based database on the mobile device. JSON combined with local storage solved all of the problems.

I put together the complete application in just a few days
and have probably invested another 40-60 hours tweaking,
playing and improving the application since. It started as a
mobile web application which meant that connectivity to the
web was required in order to navigate the application. With
some revision and redesign, using local storage being the
key, I was able to get a more “mobile” application developed.
But it still was tied to the web. That is where PhoneGap came
into play. PhoneGap is really, in it’s simplest form, an engine
that allows the client side application to run without being
served from a web server. In the case of the CSO, we still need
an initial connection to the web server in order to populate
the database but after that point, no connection is necessary
except to check for updates. The “porting” was ridiculously
simple. I took all of my HTML (one page in jQuery mobile plus
the javascript files) and copied them to the PhoneGap project.
I only had to tweak the paths a bit to accommodate PhoneGap
conventions. Other than that I simply compiled the project
and I was ready to go. At this point in time, I only have the
android APK file available (you can find it here:
http://www.petesworkshop.com/downloads/cso.apk ).

I’d love to go deep into the code, particularly the Javascript on the client application because it really helps you to understand how the local storage mechanism works and that is essential to the mobile application function when “disconnected” from the server. However, there is only a limited amount of space available. Maybe that can be the source for another article in mobile application development.

If you are ready to roll up your sleeves to write a mobile application, start with getting familiar with HTML5, CSS3, and Javascript. Any application written using these client side tools should be “mobile friendly”. There are, of course, many things to consider in mobile design but again, start with the basics an build from there. Oh, and sign up for the “Developing Mobile Applications for i Using Open Source Tools” webinar which will start on January 24th.

ABOUT THE AUTHOR

Pete is Senior Consultant/ President of Value Added Software,Inc. Pete is an experienced programmerin the ILE RPG, PHP, Java, Ruby/Rails, C++ and C# languages with over 25 years of system 3X/AS400/ iSeries/IBM i experience.

He holds certifications as a GIAC certified Secure Software Programmer-Java and as an MCSE. He is currently Secretary of the COMMON Board and is active on several COMMON committees. His passion has always been in system integration and he focuses on Open Source applications and integration activities on IBM i. Pete is a speaker/trainer in RPG modernization, open source integration,mobile