Entity view (Content)

Building Cross-Platform Mobile Apps with PhoneGap

By plaoha
Feb. 3, 2015

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.

HTML5 and Javascript are unique because they allow web applications to be built without a lot of complex code. The reason for this is it hides a lot of the underlying knowledge normally required by other application languages to create a basic app. Application development will likely continue down this path of hiding more of the underlying layers which will enable better cross-platform development in the future.

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.

 

 <html>  
   <head>  
     <title>Hello World</title>  
     <script type="text/javascript" src="cordova.js"></script>  
     <script type="text/javascript">  
     // a function to capture a photo from the camera  
     function capturePhoto() {  
       if (!navigator.camera) {  
         alert("Camera API not supported", "Error");  
         return;  
       }  
       var options = {  
         quality: 50,  
         destinationType: Camera.DestinationType.DATA_URL,  
         sourceType: 1,   // 0:Photo Library, 1=Camera, 2=Saved Album  
         encodingType: 0   // 0=JPG 1=PNG  
       };  
       navigator.camera.getPicture(  
         function(imageData) {  
           var image = document.createElement("img");  
           image.setAttribute("src", "data:image/jpeg;base64," + imageData);  
           document.getElementById("photoImg").appendChild(image);  
         },  
         function() {  
           alert('Error taking picture', 'Error');  
         },  
         options);  
     </script>  
   </head>  
   <body>  
     <div id="photoImg"></div>  
     <div class="app">  
       <button onclick"capturePhoto()">Open Camera</button>  
     </div>  
   </body>  
 </html>  

 

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.

Post Tags: