Cross-platform applications are the holy grail of mobile application development. The goal is to write code once and have it deployed everywhere but it's easier said than done. Diversity in native mobile applications exist because each provider intends to differentiate itself in hopes of becoming the dominant player in the market. Today, the mobile devices list is growing and this means it's becoming a lot more difficult to make a truly cross-platform application. One solution to this obstacle is the growth of PhoneGap development and HTML5 development. These technologies combine to bring the power of the web browser to native applications. Web browsers which follow a world wide standard across devices.
In this blog post, we'll look at PhoneGap and how it enables the cross-platform development of mobile apps.
Building PhoneGap Helloworld
To get started with PhoneGap, it first needs to be installed. This is done by using the command-line
'npm install -g phone gap' with NodeJS already installed. Once installed you can create an empty helloworld project by typing
'phonegap create helloworld'. Building this helloworld app as an Android app simply requires typing
'cd helloworld && phonegap run android'. If you have the android SDK installed then this will create the android project, compile the project into an app, and run the compiled app on a device or in a simulator.
To create the iOS app you simply type
'phonegap run iOS'. If the iOS SDK is installed then this will create the ios project, compile the application, and run the app on a device or in the simulator. After these few short steps, you've now created a cross-platform helloworld application in a matter of minutes.
An App which Accesses the Device Camera
Within the project structure is a folder labelled
'www'. In this folder you'll find the HTML5 markup inside the index.html file. Editing this file with new markup and repeating the run commands show above will enable iterative developer turn around until you've created whatever app you desire.
Let's look at an example application that accesses the camera. Type
'cordova plugin add org.apache.cordova.camera' in the terminal window to add the camera plugin to your phonegap application. Next we will modify the index.html file to include a button which accesses the camera API.
You can see from the code above that we've created an application that is cross-platform and complex enough to access the camera to display a picture but does not require complex code or strong knowledge of the underlying hardware. Compiling the project into iOS development and Android development projects will allow testing and debugging on the device.