PhoneGap or Cordova? Don’t confuse and tell me the differences!

I am an App developer. And I confess that I am big advocate of Hybrid Apps paradigm. Long back I wrote a blog post

As a Developer why should I worry about Hybrid Application Development?

Simply to create an App, I used to follow below steps,

image

As you see PhoneGap was something very essential and my best friend to create Cross-Platform apps. But suddenly I found one day PhoneGap.js has been changed to something Coredova.js. What the heck is this?

Did my best friend change name? Or do I need to make friendship with someone new? I was confused and decided to get rid of this confusion.

I found a blog posts on Adobe site which clarifies many of my doubt PhoneGap, Cordova, and what’s in a name? So essentially in this blog post author’s view can be expressed in below steps,

image

PhoneGap and Cordova is a framework (They are same with different name). They provide you set of API to work with devices on different platforms. Using them you can access native device functions such as camera or contact using JavaScript functions.

PhoneGap build is a Build Service allows you to build and package you app in cloud. You do not need to install any SDK locally to build app.

image

PhoneGap get distributed using Apache Cordova. Now let us get it straight,

image

You can summarize that current open source code base (both known as PhoneGap or Cordova) will be free always and distributed by Apachae. In future Adobe may add more values to current codebase and will be branded as PhoneGap. One may have to pay for that. One of the example is PhoneGap Build Service.

PhoneGap Build is service provided by Adobe which allows you to build your app in the cloud. You do not need to install any SDK locally.

image

Apache Cordova is free open source. It allows you to create mobile apps native to platforms using web technologies.

PhoneGap mobile application development framework is same as Apache Cordova or rather two names of same framework.

image

However PhoneGap Services will be own by Adobe and may not be open source. But Apache cordova will be always opensource and free.

I hope now you have some clarification on PhoneGap and Cordova myth. Thanks for reading.

Capturing Photos in Cordova or PhoneGap

In this post we will take a look on capturing photos using PhoneGap or CorDova. To start with make sure to add reference of coredova .


<script src="cordova.js"></script>

I have put one button and an image control. On click of button camera will be launched and then we will bind (display) captured photo in image control.


<button onclick="takePhoto();">Take Photo</button> <br>
<img style="display:none;width:60px;height:60px;" id="img" src="" />

takePhoto() function will be called on click event of the button . You can capture photo as following

function takePhoto() {

navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
 quality: 50,
 destinationType: destinationType.DATA_URL
 }
 );

We are using navigation.camera.getPicture function to capture photo. There are many optional parameters can be passed to this function. Those parameters are as follows,

Quality of image: quality

This is a number in range of 0 to 100 to define quality of image

Destination type: destinationType

This chooses the format of the return value. It could return image as base64 encoded string or return image file URI.

image

Source Type: sourceType

It sets the source of the picture. Source type could be PhotoLibrary , Camera , SavedPhotoAlbum. You can choose either of them.

image

Other options are as follows,

  • targetWidth a number value
  • targetHeight a number value
  • EncodingType. This could be jpeg(0) or png(1)
  • allowEdit : Boolean value to allow edit before image selection

In above scenario we have set parameters like quality and destination type. After successful selection of image onPhotoDataSuccess function will be called. In this function we will bind selected image to image control.


function onPhotoDataSuccess(imageData) {
 var imgControl = document.getElementById('img');
 imgControl.style.display = 'block';
 imgControl.src = "data:image/jpeg;base64," + imageData;
 }

If there is error selecting photo then onFail() function will be called. We can simply display an error message in this function.


function onFail(message) {
 alert('Failed because: ' + message);
 }

In this way you can work with pictures in CorDova. I hope you find this post useful. Thanks for reading.