Anatomy of Mobile
Web Application
Technical Education: Mobile Apps
A Ilittle over a year ago, when Common issued
it’s call for presentations for the 2011 Spring
Conference, I had been thinking that mobile
application development was becoming a hot
topic in the tech industry and even in the IBM i
community. As is typical for me, I responded with
a proposal to present on a topic that I had great
interest in and wanted to learn about, but had little
knowledge in at the moment. When my topic for
“Developing Mobile Applications for i Using Open
Source Tools” was accepted, it was time to get to
work! I had already played with the Android SDK
because of my interest in Java but when dealing
with the larger IBM i programming world, asking the
audience to learn another language like Java was
not the best approach for an i-centric conference
like the Common Spring Conference. After kicking
tires on several approaches, I settled on PhoneGap,
an open source cross platform, Javascript library
and framework that allows a developer to develop a
single application but deploy to multiple platforms.
PhoneGap was originally developed by Nitobi with
a great deal of assistance from IBM and Nitobi was
recently acquired by Adobe but the project has
been donated to the Apache Software Foundation
so it’s Open Source status is secure.
2011 conference. It was further tweaked and
improved for the Fall 2011 conference and a
PhoneGap native application was made available
at that conference. There are plans to improve it
further for the Spring 2012 conference to be held in
Anaheim. So it is a work in progress as most of my
projects are...
The basic building blocks are these:
1. An HTML5 client side web application that uses
the following:
a) jQuery Mobile
b) AJAX – Asynchronous Javascript and XML
c) JSON – JavaScript Object Notation
2. A Java servlet that pulls data from the Common
Conference Schedule web site and provides
methods that can be called by client side AJAX. It
uses the following open source components:
a) Freemarker – Open source templating framework.
b) FlexJSON – Open source JSON serializer that takes
a POJO (Plain Old Java Object) and returns a JSON
formatted string.
c) Jsoup – An open source HTML parser
“Developing Mobile Applications for i” is a bit of a
misnomer because as much as we love the Power
platform there isn’t a current mobile device running
Power and certainly IBM i is not a mobile OS. So
when I say “Developing Mobile Applications for
i” I really mean that I am targeting either the i as a
web serving platform or I am targeting the i as a
DB or just using existing backend RPG programs
served to a mobile device or all of the above. In my
presentation at the Spring Conference I did deliver
an example that used all of the above features of
IBM i on Power: Web serving, DB and backed RPG
programs but I was also intrigued with creating
more than just a “Hello World” abstract example
of a mobile app and thus the “Common Schedule
Organizer” (CSO) was born. This article will quickly
walk through the basic building blocks of that
application. But I also recommend that you sign
up for the Common Webinar I will be delivering
beginning on Jan 24th <shameless plug/>. Also
in the works is an article to be published (soon) in
SystemiNEWS and there is also my blog at www.
petesworkshop.com/wp_blog where I post up ideas
and code on mobile application development as
well as other open source projects that specifically
target IBM i.
(Note: There are RPG ILE equivalents of all these Java
components so I could write the server side code in
RPG )
So let’s take a quick look at the application. It is
pretty simple:
The CSO started as a simple mobile *web*
application and was made available at the Spring