Building Mobile Applications with PhoneGap!!

What is PhoneGap?

PhoneGap is an open source mobile development framework that enables you to build mobile applications for various platforms by using eminent web technologies such as HTML, CSS and JavaScript.

The main idea is to build one application using the architecture of PhoneGap and distribute across manifold platforms such as Android, iOS, Windows Phone 7, Blackberry, Symbian, webOS and Bada.

The following are some of the main reasons that you want to build PhoneGap applications:

•PhoneGap applications have the potential of running on various mobile platforms like iOS, Android and Windows Phone.
•You can use web development skills of already existing developers instead of learning and implementing device-specific languages such as Java or Objective-C.
•You can make your applications accessible to more than one native APIs such as camera, accelerometer, etc.
•The applications that you develop using PhoneGap will be available offline also.
•You can make your applications available in an app store or market and monetize it.
•You can make the icon of your application appear on the home screen of mobile devices.

If you want to build a native application for iOS, Android, Windows Phone and other devices, then use the PhoneGap that wraps your HTML, CSS and JavaScript into an application, which can be installed on mobile devices, and provides access to some of the device APIs like camera, location, permanent storage, and phone’s contact list.

However, WaveMaker is an open source software development platform that supports you to build native applications. It provides users with easy access to most common PhoneGap APIs, a build option for building a zip file that can be uploaded to a location where your project will be converted into native applications, and the tools that enable you to build PhoneGap applications locally on your system.

PhoneGap acquires the whole WaveMaker client-side runtime environment and your entire project files, and then provides access to them through iOS, Android and Windows WebView components.

PhoneGap APIs

The two tools that are used to access the PhoneGap APIs are as follows:

•PhoneGapService component
•A typical ServiceVariable

PhoneGapService component:

Insert PhoneGapService component from the Studio’s Inset menu, and you can able to set an operation to any of the below mentioned device APIs.

• geolocation_getCurrentPosition
• notification_beep
• notification_vibrate
• contacts_read
• contacts_delete
• contacts_save
• capture_picture
• capture_audio

A typical ServiceVariable:

• Calls a server
• Sends inputs and a method to the server
• Gets back a response
• Stores the response; allowing you to access it via., binding or calls to getData or getValue
• Calls onSuccess, onError and onResult

Local Storage

You can access LocalStorage by using your wm.Variable/ServiceVariable/LiveVariable’s saveInPhonegap property. Any data that is stored to your Variable/ServiceVariable will also be stored in permanent memory.

Other APIs

You can get an entire list of APIs that are provided by PhoneGap from the website http://phonegap.com.

PhoneGap Build Server vs. Local Build

PhoneGap Build Server:

This server requires no installation or configuration. You just need to register with their website and then upload the zip file that Studio generates. Instead of installing and configuring various development environments, you just let the build server do all of the work.

Local Builds using XCode or Eclipse:

There is installation, setup and if you have made any mistake in this, then definitely debugging involved. Once you set up the environments, the time that is taken between hitting Save in the studio, and viewing the updates to your project that is running in an emulator is not more than 20 seconds.

Register PhoneGap Build Server:

You can register Phonegap’s build server for free. To configure your build, go to Studio’s File menu -> Deploy Project submenu -> PhoneGap Build, and then hit the Ok button. This will generate a build for you. Then you can upload the generated build at http://build.phonegap.com.

It will take only few minutes to upload your project to the build server. Once it is done, it would have generated iOS, Android, Windows Phone and other applications.

Building using Local Development Environments

Generally, when you test your applications, your server runs on localhost. To do effective testing, you need to ensure that your test device can access your localhost server, or use Emulators that are running on the same machine.

You can do this by simply connecting them to the same wireless router, editing config.js, and then setting wm.xhrPath to have the IP address of your computer to the wireless router.

Debugging

You can able to install a debugger onto your computer. The debugger allows you to use an entire webkit debugger that helps you to debug your application when it is running on test device or an emulator.

Error Messages

1) When launching the application on an Android device.
Error message: The connection to the server was unsuccessful.
Solution: You have to move the loading of remote resources out of index.html and also into your application where it will fail gently.

2) http://build.phonegap.com, IOS build
Error message: You must provide a signing key first
Solution: Start reading https://build.phonegap.com/docs/ios-builds.

3) http://build.phoengap.com, Blackberry build
Error message: Too many files in www directory
Solution: Buy a phone from someone else

Resources/Links

•To use the PhoneGap API, use this link: http://docs.phonegap.com/
•To log into the PhoneGap build server, use this link: http://build.phonegap.com
•To configure your PhoneGap build server app, use this link: https://build.phonegap.com/docs/config-xml
•To use the PhoneGap API natively within a browser, without using a PhoneGap build, then use this link: http://phonegap.com/2012/07/09/phonegap-and-dolphin-browser-garage-api/