Frequently asked PhoneGap/Cordova interview questions

When we talk about PhoneGap/Hybrid mobile app development, it is most probable that the interviewer may also ask about JavaScript, Dojo, jQuery, HTML5, CSS, Sencha, JSON and so on. Be prepared. Below are some questions which I came across -

1. What is PhoneGap and why ?
PhoneGap is a mobile application framework that allows developers to use HTML, JavaScript and CSS to create mobile apps that are present as first-class applications on the phone. That means the mobile apps have their own icons and operate similarly to native applications without a browser frame around them.

They have access to a set of native functions to further make them work like native apps.

Mobile developers use PhoneGap because it allows them to have a common codebase for all their application code. It doesn’t force developers to write code from scratch every time they move from platform to platform.

2. PhoneGap architecture.
PhoneGap has a plugin-based architecture. Each device-specific feature is a plugin, which consists of javascript and native sides. Js side should be as cross-platform as possible, whereas native side can be implemented only once, for 1 device. Nevertheless built-in plugins are developed for all of the most popular platforms, so no need to reinvent the wheel.
This architecture, together with open source code, not only allows a developer to fix their bugs, but also allows them to tweak their plugins for as per requirements. Also, a developer can build his own plugin, and support any platform of his choice.

3. What is the difference between PhoneGap and Cordova?
PhoneGap is a distribution of Apache Cordova. You can think of Apache Cordova as the engine that powers PhoneGap, similar to how WebKit is the engine that powers Chrome or Safari.

4. What is PhoneGap Build, and how is it different from PhoneGap framework?
PhoneGap is a mobile application development framework, based upon the open source Apache Cordova project. It allows you to write an app once with HTML, CSS and JavaScript, and then deploy it to a wide range of mobile devices without losing the features of a native app. PhoneGap Build is a cloud-based service built on top of the PhoneGap framework. It allows you to easily build those same mobile apps in the cloud.

5. What is a Plist file in iOS development ?
Yes, this is not related to phonegap, but interviewer expects the answer!

Property lists are a way of structuring arbitrary data and accessing it at run-time. An information property list is a specialized type of property list that contains configuration data for a bundle. The keys and values in the file describe the various behaviors and configuration options you want applied to your bundle. Xcode typically creates an information property list file for any bundle-based projects automatically and configures an initial set of keys and values with appropriate default values. You can edit the file to add any keys and values that are appropriate for your project or change the default values of existing keys.

For further details click here.

6. What is the difference between ChildBrowser and InAppBrowser in PhoneGap ?
As the name suggests, Child Browser Plugin is a plugin and can be integrated in any phonegap application.

Whereas, InAppBrowser is a phonegap API that provides the ability to spawn a browser instance from a Cordova(2.3.0) application. The API is based on standard browser capability. In a nutshell, this has the same functionality as the ChildBrowser, and has events support as well.
Example usage:
var ref = window.open('http://google.com', '_blank');
ref.addEventListener('loadstart', function(event) { alert(event.type + ' - ' + event.url); } );
ref.addEventListener('loadstop', function(event) { alert(event.type + ' - ' + event.url); } );
ref.addEventListener('exit', function(event) { alert(event.type); } );

// also, you can do ref.removeEventListener('loadstart', myfunc) .. etc

7. What are CDNs in jQuery? Why do we use it?
CDNs(Content Delivery Networks) can offer a performance benefit by hosting jQuery on servers spread across the globe.
There are three CDNs available that host the jQuery library free of charge:

1. Google’s Libraries API CDN (a.k.a. Google Ajax API CDN)
2. Microsoft’s Ajax CDN
3. Media Temple’s ProCDN (the official “jQuery CDN”)

Using jQuery's CDN provided by MediaTemple
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

There are several benefits to using CDNs:

• The file will normally load faster than it would if self hosted.
• Odds are better that the site visitor will have a cached copy of the file since other sites will also be linking to the same file.
• It saves the site owner some bandwidth since the file is externally hosted.

8. Name PhoneGap events

• deviceready
• pause
• resume
• online
• offline
• backbutton
• batterycritical
• batterylow
• batterystatus
• menubutton
• searchbutton
• startcallbutton
• endcallbutton
• volumedownbutton
• volumeupbutton

More details here

References:
http://docs.phonegap.com/
http://phonegap.com/about/faq/
https://cordova.apache.org/

Upload file from device to server using PhoneGap

I have implemented this in Android and it works really well. You may need to customize client side implementation little as per you requirement and it should work fine.

Since we dont have file structure in iPhone, I am not sure how to implement it in iPhone.

 1. Client(device) side implementation

PhoneGap provides file transfer API to transfer file to server, PHP is recommended for server implementation.

function uploadFile() {

   window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fs) {

   var directoryReader = fs.root.createReader();

   directoryReader.readEntries(function(entries) {

   imageURI=entries[0].toURI(); // Selected File path

   var options = new FileUploadOptions();

   options.chunkedMode = false;

   options.fileKey="file";

   options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);

   alert(options.fileName);

   options.mimeType="text/plain";

   var params = new Object();

   params.value1 = "test";

   params.value2 = "param";

   options.params = params;

   var ft = new FileTransfer();

   ft.upload(imageURI, "ServerIP/Upload.php", win, fail, options,true);

   }, function (error) {

      alert(error.code);

   })}, function (error) {

      alert(error.code);

   });

}

function win(r) {

   alert("success");

   alert("Sent = " + r.bytesSent);

}

function fail(error) {

   alert("error");

   switch (error.code) {

     case FileTransferError.FILE_NOT_FOUND_ERR:

        alert("Photo file not found");

        break;

     case FileTransferError.INVALID_URL_ERR:

       alert("Bad Photo URL");

       break;

     case FileTransferError.CONNECTION_ERR:

       alert("Connection error");

       break;

   }

   alert("An error has occurred: Code = " + error.code);

}

2. Server side implementation

Create a php page(Upload.php) and host it in IIS

<?php

if ($_FILES["file"]["error"] > 0) {

  echo "Return Code: " . $_FILES["file"]["error"] . "";

} else {

  echo "Upload: " . $_FILES["file"]["name"] . "";

  echo "Type: " . $_FILES["file"]["type"] . "";

  echo "Size: " . ($_FILES["file"]["size"] / 1024) . " Kb";

  echo "Temp file: " . $_FILES["file"]["tmp_name"] . "";

  if (file_exists("D:/PHPUPLOAD/" . $_FILES["file"]["name"])) {

    echo $_FILES["file"]["name"] . " already exists. ";

  } else {

    move_uploaded_file($_FILES["file"]["tmp_name"], "C:/PHPUPLOAD/" . $_FILES["file"]["name"]); //Save location

    echo "Stored in: " . "upload/" . $_FILES["file"]["name"];

  }

}

?>

For example: Create a php file(Upload.php) at – C:\inetpub\wwwroot

Read/Write files from SD Card – PhoneGap/HTML/Javascript

Javascript functions to list out the files in SD card and show it in html div tag
 
Read files
 function BrowseFile()
{

window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fs) {

var directoryReader = fs.root.createReader();

directoryReader.readEntries(function(entries) {

var i;

document.getElementById('dirList').innerhtml='';

var child="";

for (i=0; i<entries.length; i++) {

child=child+"<div>"+entries[i].toURI()+"</div>";

alert(entries[i].toURI());

}

document.getElementById('dirList').innerHTML = child;

}, function (error) {

alert(error.code);

})

}, function (error) {

alert(error.code);

});

} 
 
Create a file and write to it
function writeFile()

{

// root file system entry

var root = getFileSystemRoot();

// writes a file

write_file = function(writer)

{

var lineCount = 1;

// set the callbacks

writer.onwritestart = onFileEvent;

writer.onprogress = onFileEvent;

writer.onwrite = onFileWrite;

writer.onabort = onFileEvent;

writer.onerror = onFileError;

writer.onwriteend = function(event)

{

onFileEvent(event);

lineCount += 1;

if (lineCount <= 3)

{

// append a new line

writer.write('Line ' + lineCount + '.\r\n');

}

else {

alert(writer.fileName + ' length=' + writer.length + ', position=' + writer.position);

}

}

// append

writer.seek(writer.length);

// write to file

writer.write('Line ' + lineCount + '.\r\n');

},

// creates a FileWriter object

create_writer = function(fileEntry)

{

fileEntry.createWriter(write_file, onFileSystemError);

};

// create a file and write to it

root.getFile('bbgap2.txt', {create: true}, create_writer, onFileSystemError);

}

Reference links -
http://geekyfry.com/tech-it/smartphones/phonegap/reading-writing-files-from-sd-card-phonegaphtml5javascript/