Wanna jump right into creating amazing scalable mobile applications?
Need a good and concise walk through on how to get started with phonegap?
Should I stop asking questions and get to the post already?!!
Yes * 3.
The first thing you should know about phonegap is that it isn’t only used to create “iPhone apps” or “Android apps”, it’s designed for mobile device development. PhoneGap was created for devices that use a modern web browser and if they’re not, they should be thrown in a pit of fire. WebKit is the most up to date web browser engine among its peers; it follows the latest standards by the W3C including HTML5 and CSS3.
Software used to develop apps
The software used to create PhoneGap applications varies depending on which platform you are writing for. For instance when developing for BlackBerry, you need to be using a specific version of Windows with an Integrated Development Environment (IDE) called Eclipse. I was interested in developing for iPhone, so I used an application called Xcode that is freely available through Apple and is exclusively used on Macs. In addition to Xcode, Apple also offers a free piece of software called Dashcode. Dashcode can be used to develop iPhone web applications, which can then be imported into Xcode and complied as a PhoneGap application. An advantage of using Dashcode is that it includes a library of icons and scripts that are common to most iPhone apps.
XUI strives to be a framework for first class mobile device browsers such as WebKit, Fennec and Opera with future support under consideration for IE Mobile and BlackBerry.
Writing an app with PhoneGap
PhoneGap has a strict directory structure that when followed correctly, makes developing with it a breeze. When opening a PhoneGap project through your IDE (Xcode, Aptana, etc), PhoneGap has a directory titled www. The files for your project are stored in this directory. There is phonegap.js file (where the magic happens) included that is required for your app to run; it acts as the interface between the device and the web browser. In addition to that, it is also helpful to manually include the XUI or jQuery mobile library for optimal DOM manipulation.
Unlike most common web sites, efficient mobile web development only needs one page: index.htm. This saves multiple trips to the server (or local files) when making a web app (or native application). Each page (represented by a
section tag) that is visited in your app is accessed through multiple div tags in the index file. This means that an entire mobile application can be built using only one HTML file.
Xcode provides an emulator that simulates the iPhone interface and interactions. This is extremely helpful when testing aesthetics and functionality. The IDE also offers the ability to test the app straight from the device you are developing for. When connected, there is an option to build the app to the device for testing. This is important when working with such functions as the Accelerometer (for X, Y, and Z axis) and vibrating functions.
In addition to the built in simulator, the developers also created their own testing environment called PhoneGap Simulator. This simulator is built with Adobe Air and is freely available for download. The advantage of using the Phonegap Simulator is that it has multiple skins to test your app on. For instance, if you are creating an application that you intend on distributing on multiple devices, using their simulator will help debug and catch any errors across devices. Phones currently supported for simulation include iPhone, Android G1, BlackBerry Storm/Bold, Palm Pre, Nokia N97, and Samsung Epix. To make things even more awesome, they’ve also included FireBug lite (FireBug is a extension for the Firefox web browser that helps web developers debug code on the fly).
Are you ready to create your very own multi-platform application using phonegap?!
Wanna find out even more about how it works? Check this out: http://bit.ly/3Fwc8L
Is this post over?!
Yes. Yes it is. Thank you.