pavanarya – Pavan Kumar Aryasomayajulu <br> My New Blog http://xyzcoder.com

Contact Email : pavan.aryasomayajulu@gmail.com

Want To Build A Mobile App With The Motto “Write Once Deploy On Any Device??”

with 2 comments

Hi Everyone,
After long time i am coming with a post.

Please go through below questions and if you are having same questions in your mind then you are supposed to go through my post

Problem Statement
1.In order to develop Iphone app am i supposed to learn “Objective c” ??

2.In order to develop Android app am i supposed to learn “Java\Anroid SDK” and for Windows phone(Xaml and .Net technologies)??

3.The above 2 questions can be answered with this question.Can i develop a website using Jquery mobile and make it compatible with mobile devices. The answer is absolutely “Yes”.

4. So what are the drawbacks of 3rd question. Mobile websites using Jquery Mobile is really a great option but what if our mobile website wants to communicate with the Camera or want to access the internal memory of phone. Can we achieve that with website. As per my knowledge it is not possible.

5.Also another point to note is if we develop a mobile website then in order to work on that website then we are supposed to have internet connectivity.

What is Phone Gap

Phone Gap is nothing but a software which answers all my questions mentioned above.
It allows us 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.

Getting Started With Apps that support multiple platforms

It is easy and straight forward to start with Mobile app development that can be deployed onto multiple mobile devices.

Technologies I am making use of: Jquery, JqueryMobile,PhoneGap js file,HTML5,CSS,Javascript

You can download PhoneGap js files from
After downloading the zip file we will find number of folders like Anroid,Ios, BlackBerry, windows phone but dont get panic by seeing all those files.
Find the file Cordovo-2.4.0.js this can be found in any of the folders. Sample path (phonegap-2.4.0\phonegap-2.4.0\lib\android\Cordovo-2.4.0.js)
Please ignore all the other files for now. This Cordovo.js file is the core file that gives our app the feature of an Native mobile app.

Now we can create html files and include Cordovo.js and Juery Mobile.js and style the app as per your need.
You can see the architecture that i am following for my dummy app

phonegap

There you can find number of files related to Jquery and Jquery Mobile and PhoneGap js and also you can find index.html which is my main html file.

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=4, maximum-scale=4, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Hello World</title>
    </head>
    <head>
    <title>Index Page</title>
    
    <!-- Adding viewport -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no">
    
    <!-- Adding jQuery scripts -->
    <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
    
    <!-- Since jQuery Mobile relies on jQuery core's $.ajax() functionality,
     $.support.cors & $.mobile.allowCrossDomainPages must be set to true to tell
     $.ajax to load cross-domain pages. -->
    <script type="text/javascript">
        $(document).bind("mobileinit", function () {
            $.support.cors = true;
            $.mobile.allowCrossDomainPages = true;
        });
    </script>
    
    <!-- Adding Phonegap scripts -->
    <script type="text/javascript" charset="utf-8"
    	src="cordova-2.4.0.js"></script>
    
    <!-- Adding jQuery mobile scripts & CSS -->
    <link rel="stylesheet" href="jquery.mobile-1.0.css" />
    <script type="text/javascript"
    	src="js/jquery.mobile-1.0.min.js"></script>

    <script type="text/javascript" src="Database.js"></script> 
    
    </head>
 
    <body>
    <div data-role="page" id="something" data-ajax="false">
    		<script type="text/javascript">
    		    $("#something").on("pageinit", function (e) {

    		    });

    		    $("#something").on("pageshow", function (e) {

    		    });

    		    $("#something").on("pagebeforeshow", function (e) {

    		    });
    		</script>
    		
    		<div data-role="header">		
            Welcome to SmartCrick.com
            <input type=button id="pavan"	/>
    		</div>
    
    		<div data-role="content">	
            Hai how are you		
            <ul data-role="listview" data-theme="a">
                <li><a href="index.html">item1</a></li>
                <li><a href="index.html">item1</a></li>
                <li><a href="http://www.google.com">item1</a></li>
            </ul>
            <br /><br /><br />
            <input id="txFirstName" type="text"> 
            <input id="txLastName" type="text"> 
            <input type="button" value="Add record" onclick="AddValueToDB()">  
            <span id="lbUsers">aa</span>
            <br>
    		</div>	
 
            <div data-role="footer" style="position:absolute;bottom:0px">		
            <input type=button id="Button1" value="Pavan" name="Pavan"/>
    		</div>	
    	</div>
    </body>  
</html>

In my Index.html file i am having 2 textboxes and a button. So when we enter some value in that text box and click on add we will store the data in the phones native database and we can retrieve that data at any time.

Another important file is Index.js


var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // `load`, `deviceready`, `offline`, and `online`.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of `this` is the event. In order to call the `receivedEvent`
    // function, we must explicity call `app.receivedEvent(...);`
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};

This file takes care of events related to Mobile devices loading and other stuff.

Databse.js: this is another important js file that deals with database present on the phone

        // Listener that will invoke the onDeviceReady() function as soon as phonegap has loaded properly
        document.addEventListener("deviceready", onDeviceReady, false);
        function onDeviceReady() {
            navigator.splashscreen.hide();

            document.addEventListener("backbutton", onBackClickEvent, false); // Adding the back button listener	

        }


       

$(document).ready(function () {
    onBodyLoad();
});

var db; 
var shortName = 'WebSqlDB'; 
var version = '1.0'; 
var displayName = 'WebSqlDB'; 
var maxSize = 65535; 

// this is called when an error happens in a transaction 
function errorHandler(transaction, error) { 
   alert('Error: ' + error.message + ' code: ' + error.code); 

} 

// this is called when a successful transaction happens 
function successCallBack() { 
   alert("DEBUGGING: success"); 
} 


function nullHandler(){}; 


function onBodyLoad(){ 
alert("DEBUGGING: we are in the onBodyLoad() function"); 

 if (!window.openDatabase) { 
   alert('Databases are not supported in this browser.'); 
   return; 
 } 
 db = openDatabase(shortName, version, displayName,maxSize); 

// this line will try to create the table User in the database just created/openned 
 db.transaction(function(tx){ 

  // you can uncomment this next line if you want the User table to be empty each time the application runs 
  // tx.executeSql( 'DROP TABLE User',nullHandler,nullHandler); 

  // this line actually creates the table User if it does not exist and sets up the three columns and their types 
  // note the UserId column is an auto incrementing column which is seful if you want to pull back distinct rows 
  // easily from the table. 
   tx.executeSql("CREATE TABLE IF NOT EXISTS User(UserId INTEGER NOT NULL PRIMARY KEY, FirstName TEXT NOT NULL, LastName TEXT NOT NULL)", [],nullHandler,errorHandler); 
   },errorHandler,successCallBack); 
} 


// list the values in the database to the screen using jquery to update the #lbUsers element 
function ListDBValues() { 

 if (!window.openDatabase) { 
  alert('Databases are not supported in this browser.'); 
  return; 
 } 

 $('#lbUsers').html(''); 

 db.transaction(function(transaction) { 
   transaction.executeSql('SELECT * FROM User;', [], 
     function(transaction, result) { 
      if (result != null &amp;&amp; result.rows != null) { 
        for (var i = 0; i &lt; result.rows.length; i++) { 
          var row = result.rows.item(i); 
          $('#lbUsers').append('<br>' + row.UserId + '. ' + 
row.FirstName+ ' ' + row.LastName); 
        } 
      } 
     },errorHandler); 
 },errorHandler,nullHandler); 
 return; 
} 


// this is the function that puts values into the database using the values from the text boxes on the screen 
function AddValueToDB() { 

 if (!window.openDatabase) { 
   alert('Databases are not supported in this browser.'); 
   return; 
 }

// this is the section that actually inserts the values into the User table
var input1 = $('#txFirstName').val();
var input2 = $('#txLastName').val();
if (typeof (input1) == 'undefined' || input1=="") {
    input1 = "Pavan";
    input2 = "Arya";
}
 db.transaction(function(transaction) {
     transaction.executeSql("INSERT INTO User(FirstName, LastName) VALUES (?,?)", [input1, input2], 
     nullHandler,errorHandler); 
   }); 

 ListDBValues(); 

 return false; 
} 

So we are done with major thing that is app development(:)). I am naming it as an app but this is just a form🙂

How do we test our app on desktop

In order to test our app we can make use of mobile simulators. But i am making use of google chrome(which is not a great option but can be managed).

Image of my sample app in chrome
1

What next?? How do we deploy it onto Mobile devices

1. We can zip all our files(css,jquery,js,cordovo.js) files to a zip file.

2. Go to There you can register with GitHub account or create an account with Adobe and login.

3. There it will ask us to upload the zip file we created previously and click on build app. Now it will take care of everything and it will output us with files that support almost all major platforms.

4. Now we can simply dowmload the file we want like apk file for android mobiles etc. We can install that apk file onto our device and test our first app on the mobile.

How does PhoneGap actually works
There is a webview present in all native apps and that will take care of our app created using html,css and js.
It is opensource and it can be verified by downloading the code from Github.

Files i am uploading to get started
1. A zip file that contains all my js,html and css files
2. Apk file that was built using PhoneGap build service. You can install it and give it a try.

Zip file address : https://skydrive.live.com/redir?resid=635C1D8ACF74572E!107
Apk File : https://skydrive.live.com/redir?resid=635C1D8ACF74572E!107

I’ll come up with in depth details of phonegap in my coming post

Thanks,
Pavan Kumar Aryasomayajulu
https://www.facebook.com/paryasomayajulu,
pavan.aryasomayajulu@gmail.com

Written by pavanarya

March 4, 2013 at 9:41 pm

2 Responses

Subscribe to comments with RSS.

  1. […] My Previous Post On PhoneGap : Want To Build A Mobile App With The Motto “Write Once Deploy On Any Device?? In my previous post we saw how to create a sample application using Html5,css and […]

  2. Excellent goods from you, man. I’ve understand your stuff previous to and you’re just too excellent. I actually like what you’ve acquired here, certainly like what you are saying and the way in which you say it. You make it entertaining and you still care for to keep it wise. I cant wait to read much more from you. This is actually a tremendous web site.

    Nauru wczasy

    March 9, 2013 at 1:19 pm


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: