Combining web skills with PhoneGap to build mobile apps
whole new market: the mobile device. Web standards are technologies for creating web content that
are accepted across the industry, such as specifications,
languages, and conventions.
can use those same technologies to
create apps that run on mobile devices
bridge to mobile development
PhoneGap is an open
like a mobile app. How
the code could be wrapped
depends on your platform. As of version 1.3,
PhoneGap runs on Android, BlackBerry Tablet OS, iOS, Windows Phone, WebOS, and Symbian. Each
latform has its own particular setup and installation routine, but the end result is an HTML page that
This is not all what Phonegap can do.
your mobile browser to view websites, and there are
techniques to make that content readable on small devices. Where PhoneGap shines is in how it extends
nterface) to your device and allows you to do much more than a standard mobile website. These
features include the following:
Getting started with PhoneGap
The process essentially involves downloading the PhoneGap source, setting up a project in the IDE
for the target platform (such as Eclipse for Android or Xcode for iOS), and setting up a few configuration
Conversely, users of Adobe Dreamweaver CS5.5 software will be happy to discover that PhoneGap
support is baked right in. Sites can be
configured to build to Android or iOS devices via PhoneGap.
specific and provides the API hook for all the features
The following HTML file shows a simple application:
<meta name="viewport" content="width=320; user
type" content="text/html; charset=utf
<h1>Welcome to Mobile!</h1>
Mmmmm, I love me some mobile goodness!
Building an application
Example of an application with some actions:
To begin, we need to create a special event that your PhoneGap applications can listen for. It's called
deviceready, and it is an event that signifies your app can use the special PhoneG
ap features described
earlier to start talking to the device hardware. The following is an update to our earlier code. Note the
use of the init() call in our body tag as well as the event listener:
name="viewport" content="width=320; user
type" content="text/html; charset=utf
input type="text" id="name"><br/>
<input type="button" id="searchButton" value="Search">
Debugging Phonegap apps on desktop:
"PhoneGap is an open source solution for building cross
platform mobile apps with modern, standards
based Web technologies. Based on HTML5, PhoneGap leverages web technologies which we the
developers of UWS already know best
The idea is that, suppose we have a web application that we would want to deploy on a mobile
platform. In order to have them on a mobile platform, we need to develop them in the native languages
of the mobile platforms like Android, iPhone, e
tc. PhoneGap provides ways to develop such apps for
platform and using the web technologies.
For example, we have come across many web applications such as one that lets us invite friends
to a movie as soon as we book a movie ticket. The app lets us
select which friends to invite directly from
a list of email addresses linked to the gmail account or Facebook. To do a similar thing on a mobile
platform through web technologies is a challenge. That means, if you're the developer of such an app,
ost probably have to deal with consuming the platform's contact book using, for doing which,
each platform would obviously have its own different ways. So there are 2 problems here:
1) How can you query the platform's contact book from within your web app
lication which is being
2) How can you do so in a platform agnostic way, so that your web app works not just on Android but
also on iPhone, notwithstanding the different ways of using the c
ontacts book in both.
PhoneGap aspires to be the answer to both of the above questions. How? It provides APIs which
abstract the platform's contact book for you, so that you only deal with the PhoneGap API and let
PhoneGap do the rest of the magic for you
Its not easy!!!
Phonegap requires a bunch of things to be installed on the machine before getting started. I found this
document about installing phonegap
. And that too, doesn't somehow work as stated. :(
can be directly installed on Eclipse as a plugin. All you need to do is go to Help>Install new
software>Add and use the download site
. Then making sure "contact all available update sites"
is checked, install the phonegap plugin.
A good introduction to the API components of PhoneGap leverages
the programming skills of
PhoneGap doesn’t allow “code once, deploy multiple times”. The application needs to be tested
and tweaked on all the platforms needed.
If working with different devices, we need separate environments fo
r each wrapper. So
basically, a desktop application cannot be directly ported to and Android device. It needs to be
tweaked on every platform and customize as per the phoneGap wrapper. For example, there
are three buttons on Android device: back, home and
menu buttons. So the app will need the
phoneGap wrapper using the three buttons unlike just one in iPhone. The elementary code for
the app would be the same on HTML. But the wrapper would be different for each platform.
PhoneGap application isn’t just abou
t the PhoneGap API, it is all about HTML, CSS and JS. It’ll be
a dynamic application on a device.
Eclipse could be launched and Android based PhoneGap apps can be tested on it. BUT if the
project is created on PhoneGap HTML, CSS and JS, it is easier to use
various command line tools.
This site has good resources to work on through jQuery Mobile