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.

How to detect Device is connected to Internet using Cordova

 

Recently, I have been working on some of the Hybrid Application . I come across a requirement to detect that whether device is connected to Internet or not? Since I were developing Hybrid Application so I had an option to detect Internet using HTML5 . However this approach had a problem in the browsers do not support HTML5. Better approach to detect Internet connectivity of device is through Cordova (PhoneGap).

You can detect device is online or offline in if condition as following,

 

image

 

If device is connected to internet then you can check type of the connection in device using Cordova as well. You can do that as following

 

image

Make sure you have added the reference of cordova to work with this.

 

image

Best practice is to create a function to detect device connectivity status and call that function when the device is ready. I hope you find this post useful. Thanks for reading.

 

Build your application using PhoneGap:Build

In this walkthrough I will show you the way to build your application in PhoneGap build. Very first create your application using any of the technology choices like jQuery mobile or KendoUI Mobile. PhoneGap allows you to create hybrid application.

Navigate to Phonegap Build and register yourself by clicking on the Register button

image

You can either login using Adobe account or Github account.

image

I am login using Github. You will be prompted to authorize the Application. Click on the Allow button to authorize the application

image

Check both the check box and click on Complete My Registration.

image

After completing registeration you need to upload the application to complie. There are three option you can submit your application

  1. Create new Repisotry in GIT for your application
  2. Pull application from GIT. In this case you are already having your application in GIT repository.
  3. Uplaod the application as zip file

image

I am pulling application from GIT repository here. After that you need to click on the Create button to create the build for the application. On next screen you can see that build for the entire platform is available for download.

image

Point worth saying here is that for build for ios you need to register your application and need a signing key for the same. In this way you can build your application for different platform. I hope you find this post useful. Thanks for reading

 

Creating First Windows Phone Application using Kendo UI mobile and PhoneGap or Cordova

In this post we will discuss the way we can harness power of Kendo UI in creating Windows Phone application. Before you go ahead along with this blog post please read “Hello World “Windows Phone Application using PhoneGap or Cordova to setup environment for develop Windows Phone application using Cordova. Once you are done with steps of “Hello World “Windows Phone Application using PhoneGap or Cordova , You need to download Kendo UI mobile from here. After downloading you need to put JS, Styles files in the WWW folder.

image

After copying Kendo UI files open index.html and modify CSS reference and include below JS file. Make sure you have commented default CSS reference of Cordova.

image

Now we are all set to go ahead and modify the body of the index.html to work with Kendo UI . Let us make a view

image

After making view, let us put header and footer in the view.

image

Before running you need to put script before closing body tag

image

Complete code for Hello World will look like following,

Index.html


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>

<title>Cordova WP7</title>
<!-- <link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8"/>-->
<link rel="stylesheet" href="styles/kendo.mobile.all.min.css" type="text/css"/>
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/kendo.mobile.min.js"></script>
<script type="text/javascript">

document.addEventListener("deviceready",onDeviceReady,false);

// once the device ready event fires, you can safely do your thing! -jm
function onDeviceReady()
{
//document.getElementById("welcomeMsg").innerHTML +=
"This is my first cordova/PhoneGap Application"
console.log("onDeviceReady. You should see this message in Visual Studio's output window.");
}
</script>
</head>
<body>
<div data-role="view">
<div data-role="header">Header</div>
Hello World
<div data-role="footer">Footer</div>
</div>
<script type="text/javascript">
var app = new new kendo.mobile.Application();
</script>
</body>
</html>

When you run you should be getting following output on Windows Phone emulator.

image

Mobile applications are having one HTML pages and multiple views on the same. We can navigate between the views. Let us say there are two views are following,


<div id="firstview" data-role="view" data-transition="slide">
<div data-role="header">First View Header</div>
Hello World First View <br />
<a href="#secondview" data-role="button" style="background-color: green">Go to Second View</a>
<div data-role="footer">First View Footer</div>
</div>

Points need explanation in above DIV is as following,

Any div can be turned as VIEW id data-role is set to view. Data-transition is set to slide. There are many other values of data-slide as well.

image

A view can contain header, footer and body. Header can be set as below

image

And a View Footer can be set as below,

image

On body of the view we set a button. On click event of the button we will go to Second View. We can convert anchor tag to mobile button by setting data-role to button. We can set background color of the button also. In href , we need to provide mobile view name appended with hash to navigate. On click event of button we will be navigated to mobile view with id secondview.

image

Complete code for two views and navigation between views is as following,

Index.html


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>

<title>Cordova WP7</title>
<!-- <link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8"/>-->
<link rel="stylesheet" href="styles/kendo.mobile.all.min.css" type="text/css"/>
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/kendo.mobile.min.js"></script>
<script type="text/javascript">

document.addEventListener("deviceready",onDeviceReady,false);

// once the device ready event fires, you can safely do your thing! -jm
function onDeviceReady()
{
//document.getElementById("welcomeMsg").innerHTML +=
"This is my first cordova/PhoneGap Application"
console.log("onDeviceReady. You should see this message in Visual Studio's output window.");
}
</script>
</head>
<body>
<div id="firstview" data-role="view" data-transition="slide">
<div data-role="header">First View Header</div>
Hello World First View <br />
<a href="#secondview" data-role="button"
style="background-color: green">
Go to Second  View
</a>
<div data-role="footer">First View Footer</div>
</div>
<div id="secondview" data-role="view" data-transition="slide">
<div data-role="header">Second View Header</div>
Hello World Second View <br />
<a href="#firstview" data-role="button" style="background-color:red">Go to First View</a>
<div data-role="footer">Second View Footer</div>
</div>
<script type="text/javascript">
var app = new new kendo.mobile.Application();
</script>
</body>
</html>

On running the application in Windows Phone emulator you should have the following output

image

In this way you can get started with Kendo UI and Cordova to create apps targetting multiple platforms. We will get into details of different Kendo UI mobile widgets in further post . Thanks for reading !

“Hello World “Windows Phone Application using PhoneGap or Cordova

In this post, we will setup environment for development of Windows Phone Application using PhoneGap .

Start with Downloading PhoneGap from github . After downloading of file extract its content and open lib folder

image

In the Lib folder open Window folder

image

From Windows Folder copy zipped file CoroDovaStarter and copy to folder

C:\Users\username\Documents\Visual Studio 2010\Templates\ProjectTemplates\Visual C#\Silverlight for Windows Phone

Note: If you do not have Silverlight for Windows Phone folder creates it inside Visual C# folder.

Now open visual studio and create new project, you should be having a new project template named CordovaStarter

image

If you want to create Windows Phone Application using PhoneGap and other web technologies then you need to select CorodovaStarter template. Let us start with selecting this template and creating a Hello World Application. After creation of project examine solution explorer, you will find a folder created named www

image

www folder contains HTML,CSS, and JavaScript file. Index.html file is the startup file gets rendered. Index.html is normal HTML file with a div tag, h1 tag , and references to javascript and css file. We need to write required HTML for our application in this file. Let us modify HTML here

image

All the scripts on the page get executed when device is ready. Readiness of device can be

image

All the scripts should be written in deviceready function.

image

If you run the application after making above changes, you should be getting below output.

image

Eventually index.html should be having codes as below,


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>

<title>Cordova WP7</title>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<script type="text/javascript">

document.addEventListener("deviceready",onDeviceReady,false);

// once the device ready event fires, you can safely do your thing! -jm
function onDeviceReady()
{
document.getElementById("welcomeMsg").innerHTML +=
"This is my first cordova/PhoneGap Application"
console.log("onDeviceReady. You should see this message in Visual Studio's output window.");
}
</script>
</head>
<body>
<h2>DebugMode</h2>
<div id="welcomeMsg">
</div>
</body>
</html>

As of now we have set the environment to develop Windows Phone application using PhoneGap or Cordova. In further post we will explore other capabilities and features of PhoneGap or Cordova.

Setting up Android Environment for development using PhoneGap or Cordova

Objective

I have started this series to help you in creating Windows Phone and Android applications using PhoneGap and Kendo UI. In this post I will be showing you setting environment on Windows machine for Android development. In last of the post we will create a Hello World Android application.

Background

PhoneGap and Kendo UI helps to create applications that can be deployed on any devicesApplications created using PhoneGap are having single code base and can be deployed to different types of devices. PhoneGap is HTML5 and CSS3.0 based open source framework. PhoneGap uses HTML5 and javaScript.

image

  • PhoneGap uses Web standards like HTML5 and CSS 3 to create native mobile apps
  • PhoneGap uses Javascript to write codes.
  • Using PhoneGap native features of devices can be accessed.
  • PhoneGap allows deploying applications to multiple platforms.
  • PhoneGap supports 7 different platforms.

In further posts we will do more theoretical discussions of PhoneGap and kendo UI. Let us get started with steps to setup Android development environment.

Step 1 : Download and Install JDK

Very first you need to download and install Java Development Kit (JDK) from here . You will get windows installer. Click on Exe to install and follow the dialog boxes by clicking next buttons.

Step 2: Download and Install Eclipse

Download Eclipse Classic from here . After downloading and unzip the file. After unzipping click on eclipse application (Blue one). Once Eclipse is open you need to set the workspace.

image

Step 3: Download and Install ADT

Now you need to download and install ADT. To do this click on Help ->Install New Software from the menu.

image

You will be getting Available Software dialog box. Click on Add at right corner.

image

You will get Add Repository dialog box. In that give name as ADT Plugin and Location as https://dl-ssl.google.com/android/eclipse/

image

Click on OK then check all the check boxes in Developer Tool check box and all the four check boxes in bottom. After selecting all the check boxes click on Next.

image

You will get review dialog to review all the items to be installed. Review and click on Next.

image

Accept term and conditions and click on finish.

image

After installation you need to click on Restart Now. While installation if you get nay message related to unsigned document then just click on Ok to continue

image

After Restarting Eclipse you will get Welcome to Android Development dialog box. Here select Install new SDK and click on Next.

image

Select option Send usage Statistics to Google and click on Finish.

image

Open Eclipse and open Windows and Android SDK Manager. And Select Android version to install. I recommend you to install all the documents.

image

image

After installation you will get done message at bottom.

Step 4: Create Android Virtual Device

Now we are done with all installation and now we need to create Android Virtual Device [AVD]. To create AVD from Menu select Windows and then AVD Manager. You will get AVD manager dialog box. Click on New.

image

You will be getting below dialog box. Give some name like My_avd and select Target to Android 2.1 and set other parameter as your requirement and click on Create AVD.

image

Step 5: Create Hello World Project

After creating AVD you are all set to create your first Android app. To create app click on File->New->Project->Android->Android Project

image

Give name of the project and choose the location. In this case project will be created in default location.

image

Now choose the target type exactly the same as of AVD.

image

Next give namespace name. I am giving namespace as Debugmode.Android.Firstapp and click on Finish.

image

Now time to write some codes. Open MyFirstActivity.java file.

image

Next write below code. In code I am creating a TextView and setting the text.

image 

From the menu click on Run->Run to run the application in Android emulator.

image

As of now we have setup the android environment. We have created Hello World application as well. In next part of this article we will download, install and setup PhoneGap and KendoUI to create native mobile applications to be deployed on multiple platforms.