Comments 0

Document transcript

Combining web skills with PhoneGap to build mobile apps

Designers can now use web standards they already understand, such as HTML, JavaScript, and CSS, in awhole new market: the mobile device. Web standards are technologies for creating web content thatare accepted across the industry, such as specifications,

languages, and conventions.We have

beenusing HTML, CSS, and JavaScript to create websites, and nowwe

can use those same technologies tocreate apps that run on mobile devices.

PhoneGap:Our

bridge to mobile development

PhoneGap is an open-source.PhoneGap enables you to wrap your HTML and JavaScript code to functionlike a mobile app. Howthe 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. Eachplatform has its own particular setup and installation routine, but the end result is an HTML page thatruns ona

mobile device. HTML, CSS, and JavaScript are packaged by PhoneGap to run as a mobileapplication.

This is not all what Phonegap can do.

We use

your mobile browser to view websites, and there aretechniques to make that content readable on small devices. Where PhoneGap shines is in how it extendsyour HTML and JavaScript features to work with the device. PhoneGap provides a basic JavaScript API(interface) to your device and allows you to do much more than a standard mobile website. Thesefeatures include the following:

Getting started with PhoneGap

The process essentially involves downloading the PhoneGap source, setting up a project in the IDEusedfor the target platform (such as Eclipse for Android or Xcode for iOS), and setting up a few configurationsettings.

Conversely, users of Adobe Dreamweaver CS5.5 software will be happy to discover that PhoneGapsupport is baked right in. Sites can beconfigured to build to Android or iOS devices via PhoneGap.

No matter what tool you use, the end result will be an HTML file and a JavaScript file called phonegap.js.This JavaScript file is platform-specific and provides the API hook for all the featuresdescribed earlier.The following HTML file shows a simple application:

To begin, we need to create a special event that your PhoneGap applications can listen for. It's calleddeviceready, and it is an event that signifies your app can use the special PhoneGap features describedearlier to start talking to the device hardware. The following is an update to our earlier code. Note theuse of the init() call in our body tag as well as the event listener:

"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 thedevelopers of UWS already know best-

HTML and JavaScript."

Main Idea

The idea is that, suppose we have a web application that we would want to deploy on a mobileplatform. In order to have them on a mobile platform, we need to develop them in the native languagesof the mobile platforms like Android, iPhone, etc. PhoneGap provides ways to develop such apps formulti-platform and using the web technologies.

For example, we have come across many web applications such as one that lets us invite friendsto a movie as soon as we book a movie ticket. The app lets usselect which friends to invite directly froma list of email addresses linked to the gmail account or Facebook. To do a similar thing on a mobileplatform through web technologies is a challenge. That means, if you're the developer of such an app,you'll most 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 application which is beingwritten in JavaScript and has no knowledge of the platform's APIs.

2) How can you do so in a platform agnostic way, so that your web app works not just on Android butalso on iPhone, notwithstanding the different ways of using the contacts book in both.

PhoneGap aspires to be the answer to both of the above questions. How? It provides APIs whichabstract the platform's contact book for you, so that you only deal with the PhoneGap API and letPhoneGap do the rest of the magic for you.

Getting started..

Its not easy!!!

Phonegap requires a bunch of things to be installed on the machine before getting started. I found thisdocument about installing phonegap-

http://wiki.phonegap.com/w/page/16494774/Getting-started-with-Android-PhoneGap-in-Eclipse. And that too, doesn't somehow work as stated. :(

Phonegap

can be directly installed on Eclipse as a plugin. All you need to do is go to Help>Install newsoftware>Add and use the download site-

https://svn.codespot.com/a/eclipselabs.org/mobile-web-development-with-phonegap/tags/r1.2/download. 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 ofHTML, CSS and JavaScript.



PhoneGap doesn’t allow “code once, deploy multiple times”. The application needs to be testedand tweaked on all the platforms needed.



If working with different devices, we need separate environments for each wrapper. Sobasically, a desktop application cannot be directly ported to and Android device. It needs to betweaked on every platform and customize as per the phoneGap wrapper. For example, thereare three buttons on Android device: back, home andmenu buttons. So the app will need thephoneGap wrapper using the three buttons unlike just one in iPhone. The elementary code forthe app would be the same on HTML. But the wrapper would be different for each platform.



PhoneGap application isn’t just about the PhoneGap API, it is all about HTML, CSS and JS. It’ll bea dynamic application on a device.



Eclipse could be launched and Android based PhoneGap apps can be tested on it. BUT if theproject is created on PhoneGap HTML, CSS and JS, it is easier to use