Mobile Zone is brought to you in partnership with:

Troy Miles is a Southern California based software developer. He began by writing games for the Apple II, C64 and IBM PC in assembly language over 30 years ago. After burning out on games he switch to creating windows application software in C and C++. And now he develops applications for both web, mobile web and mobile devices in C#, Objective C, Java, and JavaScript. He is also a big fan of jQuery, jQuery Mobile and PhoneGap. Troy is a DZone MVB and is not an employee of DZone and has posted 20 posts at DZone. You can read more from them at their website. View Full User Profile

PhoneGap Explained in 5 Minutes

10.17.2013
| 5678 views |
  • submit to reddit


Even though PhoneGap has been around for nearly four years, it is the source of a great deal of confusion by many who have not worked with the framework. In order to clear up some of the confusion, I have written this short document.

What is PhoneGap?

Per PhoneGap.com, "PhoneGap is an open source solution for building cross-platform mobile apps with standards-based Web technologies like HTML, JavaScript, CSS." It is important to understand that a PhoneGap app runs on a device, not on the web. All of the components of the app, the HTML, CSS, and JavaScript files, are on the device. While it is possible for a PhoneGap app to pull user interface from the web, this is not the norm. In general, PhoneGap apps, like other types of mobile apps, use the web only to download and upload data. This is the most prevalent PhoneGap misconception. Many people think that a PhoneGap app is simply a canned website, it is not. While some websites can essentially be lifted from the web and placed into a PhoneGap app, most can't. In general, PhoneGap apps are purpose built.

PhoneGap and the App Store

No disrespect meant to Windows Phone or Blackberry, but mobile has become a two horse race between Apple and Android. Since the Google Play Store doesn't have any overly restrictive requirements, let's talk about Apple's App Store.

Since PhoneGap version 0.8, apps built with it have been accepted into the App Store. They must meet all the requirements that other iOS apps must meet. You should read all of the Apple Store Review Guidelines, but here are some important ones:
  • 2.1 Apps that crash will be rejected
  • 2.8 Apps that download code in any way or form will be rejected
  • 2.12 Apps that are not very useful, unique, are simply web sites bundled as Apps, or do not provide any lasting entertainment value may be rejected
  • 2.17 Apps that browse the web must use the iOS WebKit framework and WebKit Javascript
  • 10.3 Apps that do not use system-provided items, such as buttons and icons, correctly and as described in the Apple iOS Human Interface Guidelines, may be rejected
While PhoneGap apps are not able to use the system provided icons, its icons must have a similar look to Apple's. For example, you can't use a screwdriver to represent settings, since in standard iOS it is represented by a "gear."
The guidelines also clearly state that you can't download code in any form and that your app can't simply be a web site bundled as an app. So, if your plan is simply to create an app which is a link to a web site, you may have trouble passing review.

What Does PhoneGap Source Code Look Like?

A PhoneGap app's source code has four main sub-directories: www, merges, plugins, and platforms. "plugins" is for your PhoneGap plugins. "www" is where your core code goes. It contains the HTML, CSS, and JavaScript of your app. By default, PhoneGap will launch your app's index.html file, but you can make this any HTML file you would via configuration. "platforms" is where the "www" code goes after it is built for each platform you are supporting.

And finally, there is the "merges" folder. This is where all of the files that are platform specific go. For example, suppose you would like for your app to look iOS-ish on iOS devices and Android-ish on Android devices. You would create different CSS files for each platform with the same name, say "style.css". In "merges/ios" you would place the iOS version of styles.css and in "merges/android" you would place the Android version of styles.css. When PhoneGap builds your app, it will copy the platform specific version of styles.css to the platform directory. In this way, your app can achieve the device appropriate look and feel without resorting to inline device detection.
What does the build command build?
It is assumed by PhoneGap that you have already installed the development environment for each platform you wish to support. This means that for iOS development, you must be running on a Mac and have Xcode and iOS SDK installed. Similarly, for Windows Phone, you must be on a PC, have Visual Studio and the WP8 SDK installed. Android development can be done on just about any system, but you still need to have the Android SDK installed.
When the command line build command is executed, all it does is create the appropriate source code files for each platform. From there you complete the build process using the platform's development tools. Android is currently the lone exception. It also has the run command. Which, when used after the build command, will actually compile the code and deploy it to either the Android emulator or an attached device.

In Summary

PhoneGap allows you to create cross-platform mobile apps using web technologies. It is not a tool for converting websites into apps. While it is easier for web developers to build mobile apps with PhoneGap than to develop them using native tools, it is not turnkey or simple. PhoneGap apps require the same level of detail that all well-developed apps deserve.

Resources

PhoneGap

Apple App Store Review Guidelines
Apple Human Interface Guidelines
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/
Published at DZone with permission of Troy Miles, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Prashanthkumar ... replied on Thu, 2013/10/17 - 12:17pm

Nicely explained.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.