Saturday, 16 November 2013

Getting data from db and show in listview in Android Apache Cordova

Hello everyone,

In this article I am trying to insert some data in sqlite table and get the same data from table and want to show in list-view of android in cordova (formality name PhoneGap).

You know all, Sqlite is the database that android device provide optional for us. We can store  a lot of data inside the sqlite database.
PhoneGap makes it pretty darn easy to create and work with a database in your application. For this we have to create the database name and version and in phonegap it stored inside the data/data/package name/files_01/000000001.db.
For the UI design jquery mobile provide the outstanding UI as for drag and drop. 

CordovaListview.java

package com.sunil.listview;

import android.os.Bundle;
import org.apache.cordova.*;

public class CordovaListview extends CordovaActivity 
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        super.init();
        // Set by  in config.xml
        super.loadUrl(Config.getStartUrl());
        //super.loadUrl("file:///android_asset/www/index.html")
    }
}

databasehelper.js

    function dbConnect(){
     var db = window.openDatabase("MyFriends", "1.0", "myfriends", 200000); 
        db.transaction(populateDB, errorCB, successCB);
    }
 
    //create table and insert some record
    function populateDB(tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS MyFriends (id INTEGER PRIMARY KEY AUTOINCREMENT, Name TEXT NOT NULL, Nickname TEXT NOT NULL)');
        tx.executeSql('INSERT INTO MyFriends(Name,Nickname) VALUES ("Sunil Gupta", "android")');
        tx.executeSql('INSERT INTO MyFriends(Name,Nickname) VALUES ("Abhishek Tripathi", "Champoo")');
  tx.executeSql('INSERT INTO MyFriends(Name,Nickname) VALUES ("Sandeep Pal", "kaliya sandy")');
  tx.executeSql('INSERT INTO MyFriends(Name,Nickname) VALUES ("AmitVerma", "Budhiya")');
    }
 
    //function will be called when an error occurred
    function errorCB(err) {
        alert("Error processing SQL: "+err.code);
    }
 
    //function will be called when process succeed
    function successCB() {
        alert("success!");
  var db = window.openDatabase("MyFriends", "1.0", "myfriends", 200000); 
        db.transaction(queryDB,errorCB);
    }
 
    //select all from MyFriends
    function queryDB(tx){
        tx.executeSql('SELECT * FROM MyFriends',[],querySuccess,errorCB);
    }
 
    function querySuccess(tx,result){
        $('#MyFriendsList').empty();
        $.each(result.rows,function(index){
            var row = result.rows.item(index);
            $('#MyFriendsList').append('
< li>< a href=" #">< h3 class="ui-li-heading">'+row['Name']+'< /h3>< div class="ui-li-desc">Club '+row['Nickname']+'< /div>< /a>< /li>
');
        });
 
        $('#MyFriendsList').listview();
    }

listview.html

< !DOCTYPE html>
< html>
< head>
< title>Page Title< /title>


< link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
< script type="text/javascript" src="cordova.js">< /script>
< script type="text/javascript" src="js/databasehelper.js">< /script>
< script type="text/javascript" src="js/jquery.js">< /script>
< script type="text/javascript" src="js/jquery.mobile-1.3.2.min.js">< /script>
< /head>
< body onload="dbConnect();";>
 
< div data-role="page">
  < div data-role="header" data-position="fixed" data-theme="b">
    < h1>My friends< /h1>
  < /div>
  < div data-role="content">
     < ul id="MyFriendsList">
    < /ul>
  < /div>
< /div>

< /body>
< /html>


 You can download the source code ListviewCordova

Friday, 15 November 2013

Install The Cordova Plugin through CLI & how to run on android device

Hi Guys,

In Apache Cordova the role of plugin is very important to build the cordova for any platform like android, ios, blackbary, window7 or window8. For each platform we need the plugin for the basic component of the native like Accelerometer, Device, Compass, Notification, Networking, Camera etc.

In the older version of the phone-gap it already build in the jar file but Apache Cordova3.1 version it provide you have to create your own plugin if you need for native each.

A plugin is a bit of add-on code that provides an interface to native components. You can design your own plugin interface. For the app to communicate closely with various device-level features, you need to add plugins that provide access to core Cordova APIs. There are many plugin the Apache Cordova provide so the thing how to install all those plugin in out cordova project with command line Interface(CLI).

First you need to create the cordova project in your any directory. but make sure cordova cmd have to installed in your machine. For create the cordova project use this commond.
cordova create CordovaDemo
Microsoft Windows [Version 6.1.7600]
Copyright (c) 2009 Microsoft Corporation.  All rights reserved.

C:\Users\sunil>D:

D:\>cd cordovaproject

D:\cordovaproject>cordova create CordovaDemo com.sunil.demo CordovaDemo
Creating a new cordova project with name "CordovaDemo" and id "com.sunil.demo" a
t location "D:\cordovaproject\CordovaDemo"

D:\cordovaproject>

Now you done to create the project and in the next step you need to add the platform in your cordova project but make whatever platform you going to add in the Cordova project it SDK already should be installed in your machine.

	
D:\cordovaproject>cd CordovaDemo

D:\cordovaproject\CordovaDemo>cordova platform add android
Checking Android requirements...
Creating android project...
Preparing android project

D:\cordovaproject\CordovaDemo>

You can see in your cprdovaDemo project inside there platforms folder inside one android project created.
Now you add the plugin what you need.
For  ex you need to add the plugin for device add this way

	
D:\cordovaproject\CordovaDemo>cordova plugin add org.apache.cordova.device
Fetching plugin from "org.apache.cordova.device"...
Starting installation of "org.apache.cordova.device" for android
Preparing android project
org.apache.cordova.device installed on android.

D:\cordovaproject\CordovaDemo>


Similarly you can add all plugin as per your requirement. Here are list of the plugins

     cordova plugin add org.apache.cordova.device
     cordova plugin add org.apache.cordova.network-information
     cordova plugin add org.apache.cordova.battery-status
     cordova plugin add org.apache.cordova.device-motion
     cordova plugin add org.apache.cordova.device-orientation
     cordova plugin add org.apache.cordova.geolocation
     cordova plugin add org.apache.cordova.camera
     cordova plugin add org.apache.cordova.media-capture
     cordova plugin add org.apache.cordova.media
     cordova plugin add org.apache.cordova.file
     cordova plugin add org.apache.cordova.file-transfer
     cordova plugin add org.apache.cordova.dialogs
     cordova plugin add org.apache.cordova.vibration
     cordova plugin add org.apache.cordova.contacts
     cordova plugin add org.apache.cordova.globalization
     cordova plugin add org.apache.cordova.splashscreen
     cordova plugin add org.apache.cordova.inappbrowser
     cordova plugin add org.apache.cordova.console

Now you can run your android project, but before run the android project inside your CordovaDemo Project you should know these things.
1. If you are making any changes in the CordovaDemo Project then first you need to prepare the coodova. use the commond

D:\cordovaproject\CordovaDemo>cordova prepare
Generating config.xml from defaults for platform "android"
Preparing android project

D:\cordovaproject\CordovaDemo>

Then it made changed in your config.xml automatic as you added the plugin ealiear or any changes you made. Do not make any change in your android project which are exist inside your CordovaDemo project. You can only make change inside the www folder of your CordovaDemo project. And after made changed you need to make cordova prepare every time.

After prepare the cordova you can run the android project on device or emulator. For this you make sure you have made the path for platforms-tools and tools in your environment system. If you not configure this path and add this two path in system environment .
Now run the android project on device use command

D:\cordovaproject\CordovaDemo>cordova run android

 and run on emulator use this command

D:\cordovaproject\CordovaDemo>cordova emulate android

 See the Screen shot

 Cheers Guys!!

Saturday, 2 November 2013

Insert form data into db and validate login Phonegap

Hi guys!!

First of all my friends and fans Happy Diwali to all.

Today we are learning to how to insert the form data into sqlite in PhoneGap and successful registration then check the authorization in login page.
 Sqlite is the database that android device provide is the optional for us. We can store the a lot of data inside the sqlite database.
PhoneGap makes it pretty darn easy to create and work with a database in your application. For this we have to create the database name and version and in phonegap it stored inside the data/data/package name/files_01/000000001.db. So your table data will be stored inside the 000000001.db file. In your dbname your table have no data.
The most stuff I feel that to create the UI design, And jquerymobile provide the pretty ui design. So in this tutorial we will integrate with jquery mobile UI and cordova with sqlite. I hope this tutorial might be helpfull to all my friends.
Now lets start the create the android project to build this feature. And build structure looks like that.



MainActivity.java

package com.sunil.phonegapregisindb;

import org.apache.cordova.DroidGap;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

public class MainActivity extends DroidGap {

 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  super.loadUrl("file:///android_asset/www/index.html");
 }
}

index.html

< html>
< head>
< meta charset="utf-8">
< meta name="viewport" content="initial-scale=1.0, user-scalable=no">
< meta name="apple-mobile-web-app-capable" content="yes">
< meta name="apple-mobile-web-app-status-bar-style" content="black">
< title>< /title>
 
     < link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
     < script type="text/javascript" src="cordova.js">< /script>
  < script type="text/javascript" src="jquery.js">< /script>
  < script type="text/javascript" src="jquery.mobile-1.3.2.min.js">< /script> 
  < script type="text/javascript" src="register.js">< /script>  
  < script type="text/javascript" src="iscroll.js">< /script> 
< /head>
< body>

 < div data-role="page" id="page1">
  < div class="header" id="header" data-theme="a" data-role="header">
   < h3>Registration< /h3>
  < /div>
  
   < div id="wrapper">
 < form action="" name="myForm">
  < div data-role="content">
   < div class="fname" data-role="fieldcontain">
    < label for="fname"> First Name < /label> < input name="fname"
     id="fname" placeholder="enter first name" value="" data-mini="true" type="text">
   < /div>
   < div class="lname" data-role="fieldcontain">
    < label for="lname"> Last Name < /label> < input name="lname"
     id="lname" placeholder="enter last name" value="" type="text">
   < /div>
   < div class="age" data-role="fieldcontain">
    < label for="age"> Age < /label> < input name="age" id="age"
     placeholder="enter age" value="" type="number">
   < /div>
   < div class="username" data-role="fieldcontain">
    < label for="username"> User Name < /label> < input name="username"
     id="username" placeholder="enter username" value="" type="text">
   < /div>
   < div class="psw" data-role="fieldcontain">
    < label for="psw"> Password < /label> < input name="password" id="psw"
     placeholder="enter password" value="" type="text">
   < /div>
   < input id="register" value="Register" type="button" name="Register" onclick="validationcheck();">
  < /div>
  < /form>
  < /div>
 < /div>

 < script type="text/javascript">
  function validationcheck() {
   
   if (document.myForm.fname.value == "") {
    alert("Please Enter fname.");
    document.myForm.fname.focus(); 
   } else if (document.myForm.lname.value == "") {
    alert("Please Enter lname.");
    document.myForm.lname.focus();
   } else if (document.myForm.age.value == "") {
    alert("Please Enter age.");
    document.myForm.age.focus();
   } else if (document.myForm.username.value == "") {
    alert("Please Enter username.");
    document.myForm.username.focus();
   }
   else if (document.myForm.psw.value == "") {
    alert("Please Enter password");
    document.myForm.psw.focus();
   }
   else
    {
      success();
    }
  }
  
  function success(){
   onDeviceReady();
  }
 < /script>

< /body>
< /html>

register.js

var db;
var dbCreated = false;

var scroll = new iScroll('wrapper', {
 vScrollbar : false,
 hScrollbar : false,
 hScroll : false
});
document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {

 var fname = document.getElementById("fname").value;
 var lname = document.getElementById("lname").value;
 var age = document.getElementById("age").value;
 var username = document.getElementById("username").value;
 var password = document.getElementById("psw").value;

 db = window.openDatabase("RegistrationDB", "1.0", "Registration", 200000);
 if (dbCreated)
 else
  db.transaction(populateDB, transaction_error, populateDB_success);
}

function populateDB(tx) {
 tx.executeSql('DROP TABLE IF EXISTS Registration');
 var sql = "CREATE TABLE IF NOT EXISTS Registration ( "
   + "firstName VARCHAR(50), " + "lastName VARCHAR(50), "
   + "age INTEGER, " + "username VARCHAR(50), "
   + "password VARCHAR(200))";
 tx.executeSql(sql);
 var fname = document.getElementById("fname").value;
 var lname =  document.getElementById("lname").value;
 var age = document.getElementById("age").value;
 var uname =document.getElementById("username").value;
 var pwrd = document.getElementById("psw").value;
 tx.executeSql("INSERT INTO Registration (firstname,lastname,age,username,password) VALUES ('"+ fname +"','"+ lname +"' , "+ age+", '"+ uname +"','"+ pwrd +"' )");
 
}

function transaction_error(tx, error) {
 alert("Database Error: " + error);
}
  
function populateDB_success() {
 dbCreated = true;
 
 // where you want to move
 alert("Successfully inserted");
  window.location="file:///android_asset/www/login.html";
}

login.html

< html>
< head>
< meta charset="utf-8">
< meta name="viewport" content="initial-scale=1.0, user-scalable=no">
< meta name="apple-mobile-web-app-capable" content="yes">
< meta name="apple-mobile-web-app-status-bar-style" content="black">
< title>< /title>

< link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css">
< script type="text/javascript" src="cordova.js">< /script>
< script type="text/javascript" src="jquery.js">< /script>
< script type="text/javascript" src="iscroll.js">< /script>
< script type="text/javascript" src="jquery.mobile-1.3.2.min.js">< /script>
< script type="text/javascript" src="login.js">< /script>
< /head>

< body>

 
 < div data-role="page" id="page1">
  < div id="header" data-theme="b" data-role="header">
   < h3>Login< /h3>
  < /div>
   < div id="wrapper">
   < form action="" name="mylogin">
  < div data-role="content">
   < div class="username" data-role="fieldcontain">
    < label for="username"> Username < /label> < input name="username"
     id="username" placeholder="enter username" value="" type="text">
   < /div>
   < div class="psw" data-role="fieldcontain">
    < label for="psw"> Password < /label> < input name="password" id="psw"
     placeholder="enter password" value="" type="text">
   < /div>
    < input id="login" value="Login" type="button" name="Login" onclick="validationcheck();">
  < /div>
  < /form>
  < /div>
 < /div>

< script type="text/javascript">
 function validationcheck(){

  if (document.mylogin.username.value == "") {
   alert("Please Enter Username.");
   document.mylogin.username.focus(); 
  } else if (document.mylogin.psw.value == "") {
   alert("Please Enter Password.");
   document.mylogin.psw.focus();
  }
  else
   {
     success();
   }
 }
 
 function success(){
  onDeviceReady();
 }
< /script>
< /body>
< /html>

login.js

var db;
var dbCreated = false;

var scroll = new iScroll('wrapper', {
 vScrollbar : false,
 hScrollbar : false,
 hScroll : false
});
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady(){
 db = window.openDatabase("RegistrationDB", "1.0", "Registration", 200000);
 if (dbCreated)
  {
      // created
  }
 
 else{
 db.transaction(getregistdata, transaction_error);
 }
}

function getregistdata(tx){
 
  var sql = "select username, password from Registration";
  tx.executeSql(sql, [], getlogin_success);
}

function transaction_error(tx, error) {
 alert("Database Error: " + error);
}

function getlogin_success(tx, results){
   var len = results.rows.length;
   for (var i=0; i< len; i++) {  
    var employee = results.rows.item(i);
    var username=document. getElementById("username").value;
    var password=document. getElementById("psw").value;
    var uname=employee.username;
    var pasw=employee.password;
    alert(username);
    alert(password);
    if(username==uname && password==pasw){
     alert("Login Success");
     break;
    }
    else{
        var status=1;
     }
   }
   
   if(status==1)
    {
       alert("login failed");
    }
}

manifest.xml



    
  
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
        
            
                

                
            
        
        
            
            
        
    





You can download the source code PhoneGapReginDb

Cheers Guys!!!

Get Current Location and load on GoogleMap

Hi guys!

This tutorial might be helpful to all developer to get the current location and show the current location on GoogleMap.
To access the current location we need to use the Geo location. So what is the GeoLocation?
"The geolocation object provides access to location data based on the device's GPS sensor or inferred from network signals."
Geolocation provides information about the device's location, such as latitude and longitude. Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs. There is no guarantee that the API returns the device's actual location.
With the help of this
navigator.geolocation.getCurrentPosition(onSuccess, onError, { enableHighAccuracy:true });
getCurrentPosition is the method for get the current latitude and longitude.Here we see enableHighAccurary:ture it means if the network provider is not enable then device try to get the current location via GPS.

Google Map version 3 are using here to load the current location in Map. For this java script supported there is no need to get the API key .

index.html

 
< html> 
    < head> 
        < title>Map Example Multiple Pages< /title> 
        
        < title>jQuery mobile with Google maps< /title>
        
        < link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        < script src="http://code.jquery.com/jquery-1.8.2.min.js">< /script>
        < script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">< /script>
        < script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en">< /script>
          < script type="text/javascript" src="cordova.js">< /script>
        < script>
            

            $(document).on("pageinit", "#map-page", function() {
            	getcurrentlatlong();
           
            });
            
            function getcurrentlatlong(){
            	
                if (navigator.geolocation)
                {              
                  alert("navigator.geolocation is supported");
                  navigator.geolocation.getCurrentPosition(onSuccess, onError, { enableHighAccuracy:true });
                                                //enableHighAccuracy:true means if network not enable then it ask for GPS
                }
                else{
                	alert("navigator.geolocation not supported");
                }
            }
            
            function onSuccess(position) {   // enable ur gps, it takes sometime to call till now wait   
            	alert("onSuccess called");
            	var lat=position.coords.latitude;
            	var longi=position.coords.longitude;
            	alert("latitude is: "+ lat+ " longitude is: "+ longi);
        
            	 mapCenter = new google.maps.LatLng(lat, longi),
                 myOptions = {
                     zoom:10,
                     mapTypeId: google.maps.MapTypeId.ROADMAP,
                     center: mapCenter,
                 },
                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions),
            	 
                 marker = new google.maps.Marker({
                     position: new google.maps.LatLng(lat, longi),
                     map: map,
                     title:"Current Location!"
                     })
            }
            
            function onError(error){
            	alert("Getting the error"+error.code + "\nerror mesg :" +error.message);
            }
         
  
        < /script>
    < /head>

    < body>
        

< div data-role="header"> < h1> Maps< /h1> < /div>
< div data-role="content"> < a data-role="button" data-transition="fade" href="http://www.blogger.com/blogger.g?blogID=5642871235599658673#map-page">Click to see the Map< /div> < /div> < /div> < div data-role="page" id="map-page">
< div data-role="header"> < h1> Map< /h1> < a data-icon="home" href="http://www.blogger.com/blogger.g?blogID=5642871235599658673#home-page">Home
< div class="ui-bar-c ui-corner-all ui-shadow" data-role="content" style="padding: 1em;"> < div id="map_canvas" style="height: 400px;"> < /div> < /div> < /div> < /body> < /html>

Friday, 1 November 2013

A Splash Screen for Android using Phonegap


Hi Guys,

In this tutorial we have added the article to show the splash screen for a short time and then after load the index.html file.
Adobe Cordova includes a Splashscreen API so you can add a splash screen to your app, which consists of a still graphic image displaying before your app starts.

I have recently begun a lot of experiment to build the application in hybrid to make for android and ios creating native mobile apps with HTML5/CSS3/JS. I found that Titanium Appcelerator and PhoneGap have two option to create the mobile application hybrid. Both products are great, but their approaches (and capabilities) are very different. To work in both I have personally feel that PhoneGap is much easy to build the mobile application rather than Titanium.

If you create your Android splash screen as a 9-patch image, then the image will resize proportionally when displayed in either portrait or landscape mode.

In order to have a splash screen in a PhoneGap Android application you need to put your splash.png file into res/drawable-ldpi, res/drawable-mdpi, res/drawable-hdpi, res/drawable-xhdpi. Where those directories represent low, medium, high and extra large dots per inch. You'll need to resize you slash.png for each directory or Android will stretch it for you.
The sizes of each image should be:
  • xlarge (xhdpi): at least 960 x 720
  • large (hdpi): at least 640 x 480
  • medium (mdpi): at least 470 x 320
  • small (ldpi): at least 426 x 320
Then in your main Java class, the one that extends DroidGap, you'll need to add one line and modify another. First add:
super.setIntegerProperty("splashscreen", R.drawable.splash);

this line should show up under super.onCreate but before super.loadUrl. Then you'll need to modify your loadUrl method to pause for 5 seconds before loading up the main page. It would look like this:

super.loadUrl("file:///android_asset/www/index.html", 5000);

A Second argument to load the loadURL method define the lenght of time the splash screen should be displayed. The value is given in millisecond:

MainActivity.java

package com.sunil.splacescreen;

import org.apache.cordova.DroidGap;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

public class MainActivity extends DroidGap {

 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  super.setIntegerProperty("splashscreen", R.drawable.splash);
  super.loadUrl("file:///android_asset/www/index.html", 5000);
 }
}

index.html

< html>
< html>
< head>
< title>PhoneGap< /title>
< script type="text/javascript" charset="utf-8" src="cordova.js">< /script> 
< /head> 
<  body>
< h1> Hello PhoneGap< /h1>
< script> document.addEventListener("deviceready", onDeviceReady, false);
 function onDeviceReady() {
 navigator.splashscreen.show();
 //navigator.splashscreen.hide(); //if u want to hide the splacescreen
 }
 < /script>
<  /body>
< /html> 

Sunday, 27 October 2013

PgoneGap Installation with Eclipse

Hi Guys,

This tutorial might be helpful to all developer who just started the PhoneGap build technologies. In this tutorial we are going to learn how to configure the PhoneGap with eclipse for android application.

Step -1: You have already android sdk configure with eclipse. If not have then configure the android sdk   or    ADT with eclipse.
Step-2 :  You have to download the new PhoneGap build from Here.
Step-3 :  Now Extract the rar file of PhoneGap in any of your directory in your computer. And go to to extract directory of PhoneGap\phonegap-2.9.0\phonegap-2.9.0\lib\android. Here you have all files that are need to configure with eclipse.


Step 4. Open Eclipse and create the Android Project name PhoneGapDemo.



Now the create the folder www name inside the assets folder and copy the cordova.js file inside the www folder. And copy the cordova2.9.0.jar file from the extaxting folder of phonegap and paste inside the libs folder and copy the xml folder of PhoneGap extract directory and paste inside the res folder of you project.
See the llok of screen.


Now make the java build path and add this cordova.jar file with external directory. See the screen

Step-5: Now create the index.html file inside the www folder. And open the MainActivity.java file and edit Change the base class from Activity to DroidGap. And load the html file like that.


index.html

< html>
< head>
PhoneGap

< /head>

Hello PhoneGap

< /html>

MainActivity.java

package com.sunil.phonegapdemo;

import org.apache.cordova.DroidGap;

import android.os.Bundle;

public class MainActivity extends DroidGap {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.loadUrl("file:///android_asset/www/index.html");
    }
    
}

Manifest.xml



    

    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    
        
            
                

                
            
        
        
            
            
        
    


Run the project.
Cheers Guys!!

Saturday, 26 October 2013

PhoneGap Architeture

PhoneGap is an application container technology allows us to create natively installed applications for mobile devices using HTML, CSS, and JavaScript. We create mobile application across platform with a single code base and the app runs on the "webview" of the mobile platform. Building applications for each device - iPhone, Android, Windows Mobile amd more requires different frameworks and languages. PhoneGap solves this by using standards based web technologies to bridge web applications and mobile devices.
 
PhoneGap applications are developed using HTML, CSS, and JavaScript, however the final product of a PhoneGap application is a binary application archive that can be distributed through standard application ecosystems.

 


For iOS applications the output is an IPA file) (iOS Application Archive), for Android applications the output is an APK file) (Android Package), for Window Phone the output is a XAP file (Application Package), etc.. These are the same application packaging formats used by "native" applications, and can be distributed through the appropriate ecosystems (iTunes Store, Google Play, Amazon Market, BlackBerry App World, Windows Phone Marketplace, etc...).