Types of Mobile Applications: Difference between Native, Hybrid and Web applications

There are many contradictory views on the various types of mobile applications that can be developed for mobile devices

Mainly most mobile applications can be-

1) Native Mobile Applications :
Completely coded using the sdk of the various platforms (like Android and iOS).
The language is used to implement both UI and functionality.
Native applications can use device functionality like camera,contacts et cetera.


2)Hybrid Mobile Applications:
Such applications use a skeleton native application and load web content in it
This web content may be static(where the served html,js,css etc are packaged with the application and reside on a users device) or dynamic (where the content is served from a server)
You can use the various HTML5 technologies and come up with an amazing user interface.
Hybrid applications can use device functionality like camera , contacts et cetera,thanks to the skeleton native application.

3)Mobile Web Application::
This is your traditional  web application loaded on a device browser (Eg : WebKit,Chrome,Firfox on Android)
This may be (or may not be) different from the application that loads in your desktop browser.
For example-m.facebook.com is the mobile web application of facebook.com
Application developers can customize their websites to load content more efficiently ,given the limited resources of a mobile device.
Mobile web applications cannot use device functionality


Check out this really cool video by Intel differentiating between how content is served in a mobile web application and in a hybrid mobile application.

Simple plugins with PhoneGap1.7 Android

Recently I had a major run in with PhoneGap 1.7 and since I had a lot of java just begging to be called I ended up using plugins in PhoneGap.

Though there is a decent example on the PhoneGap website , I found it a little off base for a first plugin example , to explain just the basic functioning of plugins.The example I post here is a beginner level example which will help you understand the basic mechanism of plugins without any fancy stuff.

Steps :
1)Create an PhoneGap powered Android Project using phonegap docs
2)This is where we write our business logic . Create a java file MyPluginClass . This class will return some standard string to a html. You need to override the execute method of Plugin class and send back your result in a PluginResult object

package org.firstplugin;



public class 
MyPluginClass extends Plugin{



@Override

public PluginResult execute(String action, JSONArray data, String callbackID) {

       try{

       PluginResult rs=null;

      /* Create the JSONObject which will be sent in PluginResult */

      JSONObject jsonobj=new JSONObject();

    /* Add whatever you want to send back to PhoneGap in the JSONObject */

       jsonobj.put("myname","whats in a name");

   /*  Put your JSONObject in a PluginResult object */

       rs=new PluginResult(Status.OK,jsonobj);

}
catch(JSONException e){ LOG.d("DEBUG",e.getmessage())}

/* Send your PluginResult object back to PhoneGap */

return rs;
}

}

3)Now we shall write the plugin javascript which will call MyPluginClass.This "myplugin.js" JS file will call PhoneGap.exec which in turn will call the execute method of MyPluginClass.

var CallPlugin=function(){};

CallPlugin.prototype.get=function(successCallback,failureCallback){

  return PhoneGap.exec(successCallback,failureCallback,'  MyPluginClass ','show',[ ]);

};

PhoneGap.addConstructor(function() {

//Register the javascript plugin with PhoneGap
PhoneGap.addPlugin('callplugin', new CallPlugin());



});

In detail :
successCallback : This method will be called after the plugin gets executed
failureCallback : This method will be called in case of error
We can also pass arguments to the Java class through the array

4)Register the plugin in plugins.xml with :

<plugin name="
MyPluginClass" value="
org.firstplugin.MyPluginClass"></plugin>

5)Now write the html which will execute this plugin.Click the button " Click Me To Return Name" to run the plugin

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <title>

        </title>

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />

        <link rel="stylesheet" href="my.css" />

        <link rel="stylesheet" href="photoswipe.css" type="text/css"/>

        <style>

           /* App custom styles */

        </style>

        <script type="text/javascript" src="klass.min.js"></script>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">

        </script>

        <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">

        </script>

        <script src="cordova-1.7.0.js">

        </script>

        <script src="
myplugin.js">

        </script>

      </head>

    <body>

      

         <div data-role="page" id="home">

              <div data-theme="a" data-role="header">

                <h3>

                    Plugin Example

                </h3>

               </div>

               <div data-role="content">

                <div>

                        <a data-role="button" data-transition="fade"  id="runplugin">

                            Click Me To Return Name

                        </a>

                        </div>

                </div>

               <div data-role="footer"></div>

         </div>

<script type="text/javascript">





$("#
runplugin").click(function(e){

     window.plugins.callcamplugin.get(

function(r){alert(JSON.stringify(r);},

function(e){console.log(e)}

);

});





</script>

   </body>

</html>


 

Using this code you will be able to run a simple plugin using PhoneGap