Pages

Friday, September 5, 2014

Spirituality: Similarity between our brain and Android/iOS

Our brain works more like an operating system of today’s mobile devices like Android or iOS. As you all know that our brain is capable of doing much more than for what we use it. So where does all that power goes and why don’t we be able to use it? Most of us will question the same. Isn’t it? Well the answer is simple, it is locked! As the OS of our mobile device is locked for safe use, similarly nature has locked our brain for our safe. But their is way to unlock it just like we can Jailbreak an iPhone and Root an Android device, similarly via Kundalini Jagran we can unlock the hidden potential of our brain.

Friday, July 25, 2014

Cordova: Android Log Viewer

This particular blog is devoted to the Android Log Viewer. It is a very useful tool when you are working with Cordova/Phonegap via command-line interface (CLI). 

When a developers like you are working on CLI which is recommended by even Cordova team then the most important thing that you are going to face is that how to debug an application. Now you have an option to use eclipse, but then question arise that why the hell you are using CLI. 

So the easiest choice would be to use a separate log viewer like this. Of course, the CLI would be very light weight and could work on less powerful machine as well. If you have bought a machine few years back then it might not handle currently available processing intensive applications very well. Thus the only choice left was to use CLI. But you will feel the power and beauty of this once you'll get used to it.  

Friday, June 20, 2014

Streamlining the mobile-app development process in the large team scenario

Every time a file gets added to the project, it adds-up an extra latency in the file loading. So minimizing the number of files in the release-build would definitely enhance the performance of the app. Considering this fact, we should have only one stylesheet containing all the styles related to the app.

Though putting everything (style class) in single file would definitely have the following effects
  • Pros: It would make it 
    • compact, 
    • easy to load, 
    • one-time loading 
  • Cons: It would make it 
    • lengthy for manual readability;

Thus we need to make it modular, that means, a separate stylesheet need to be made for each module; which is easy to modify & debug for developers. Each stylesheet should follow the standard guidelines like
  • adding a module-name prior to the style class name, 
  • avoiding id based style class, etc.

To enforce the developers to follow the standard guidelines, we can also use a css generator system. Where developers have to fill up the cells in the sheet/form after which the standard css file gets generated out of it. In our system it would be the css for particular module.

Prior publishing the release-build,
  • we can run a script that can concatenate all the stylesheets into single stylesheet; 
  • this script can compress the file as well if required;
  • the index.html file will be having the link of this single stylesheet only.

Similarly, since we have a definite set of unique screens, so there should be only one html file in the project (aka single-page app). Thus, we can have following benefits:
  • It would reduce the transition time to zero during html page change. 
  • Developers can work on this html file along with that single css file on their desktop browsers like chrome. 
  • Since the Chrome browser comes up with advance debugging tools for developers, so the design and alignment related issues can be resolved in very less time in comparison to using Android IDE. 
  • We can further reduce the JavaScript’s part of html code creation/rendering by adding the html templates in the index.html page only. 
  • The JavaScript only have to deal with logic, control and flow.

This would separate the markup, style and script into separate files without hindering in each other’s zone. So by this we have separated the layout, design and logic into separate divisions. Though the script (logic division) can be further handled with standard MVC frameworks. That would make the project much more simplified and manageable.

Wednesday, June 18, 2014

JS: Minimalist Templator

This is an evolved version of the previous CTemplator classes that you can refer at Templator, Advanced Templator.

Basically in this, the rarely used methods have been chopped-off and the tagging method with '@' has been deprecated because it is limited to only 10 items array. You can say, it's a loop hole earlier due to which if array items exceeds this limit then while replacing the tag initial tags overwrites the exceeded tags. So this new version came into picture; that have only 2 methods where 'fitIn' uses serial-number or index value while the other one 'fixIn' uses key value of the hash-map array.
/* 
@file CTemplator.js
@author Abhishek Kumar
@email akbittu@gmail.com
*/
window.CTemplator = {
    fitIn: function (template, arglist) {
        var tag, output = template;
        for (var i = 0, len = arglist.length; i < len; i++) {
            tag = new RegExp("\\[" + i + "\\]", 'g')
            output = output.replace(tag, arglist[i]);
        }
        return output;
    },
    fixIn: function (template, hashtable) {
        var tag, output = template;
        for (var key in hashtable) {
            tag = new RegExp("\\[" + key + "\\]", 'g')
            output = output.replace(tag, hashtable[key]);
        }
        return output;
    }
};
/*
// Usage
CTemplator.fixIn('<a href="#[Link]" title="[Content]">[Content]</a>', {
    Link: 'test1.html',
    Content: 'Test1'
});
CTemplator.fitIn('<a href="#[0]" title="[1]">[1]</a>', ['test1.html', 'Test1']);
*/

Wednesday, June 4, 2014

How to configure Android Developer Tools for Cordova/Phonegap use?

If you are reading this blog then you might be be searching for an IDE (Integrated Development Environment) to develop Cordova or Phonegap applications on Android platform. So you have come at the right place.

So, how do we acheive that? Well, you need to follow these steps:
  1. Download latest ADT from this link: Get the Android SDK
  2. Install it of your development machine
  3. Open it up
  4. In menu bar go to the Help Install New Software...
  5. A popup window appears, in which you need to click the Add... button
  6. A small sub-popup form appears, that you need to fill as:
    • Name: WTP 
    • Location: http://download.eclipse.org/webtools/repository/juno/
  7. Click on the Ok button after filling up the form
  8. After closing the sub-popup form, a list appears in the table, where user is suppose to check the items that they need to install. To configure it for Cordova you would require editor for HTML, JS, CSS, XML, so first select the Web Tools Plaform (WTP) 3.4.2 
  9. Now check these items:
    • Eclipse Web Developer Tools
    • Eclipse XML Editors and Tools
    • Exlipse XSL Developer Tools
    • JavaScript Development Tools
    • Web Page Editor
  10. Since the Next button would have been enabled until now, so click on the Next button to proceed
  11. After it would download the selected items, you need to click on the Next button on Install Details screen
  12. Then on Review Licenses screen, you need to select the 'I accept the terms of the license agreement' radio button
  13. Click on the Finish button to complete the process
  14. A small Installing Software popup window appears to show you the progress of installation.
Now, try to open any web based file with extension as .html, .htm, .js, .css, .xml to verify if the WTP installed successfully or not. You might have to select a proper editor from the right-click context menu of the selected file.

Thursday, March 6, 2014

JS: Advanced Templator

Here is the advanced version of template manipulating class CTemplator in javascript. The basic version can replace just one key-tag in the provided template per item in hastable. While this advanced class having the method CTemplator.fitIn4() can update any occurrence of the key-tags in the provided template and replaces them with the related item in the hashtable. That means, say a template have multiple tag of name then all of them will get replaced by single item in the hashtable.
/* 
@file CTemplator.js
@author Abhishek Kumar
@email akbittu@gmail.com
*/
var CTemplator = {
    fitIn1: function (template, hashtable) {
        var key, tag, output = template;
        for (key in hashtable) {
            tag = "[" + key + "]";
            output = output.replace(tag, hashtable[key]);
        }
        return output;
    },
    fitIn2: function (template, arglist) {
        var output = template;
         for (var i = 0; i < arglist.length; i++) {
            output = output.replace(new RegExp('@' + i, 'g'), arglist[i]);
        }
        return output;
    },
    fitIn3: function (template, hashtable) {
        var key, tag, output = template;
        for (key in hashtable) {
            output = output.replace(key, hashtable[key]);
        }
        return output;
    },
    fitIn4: function (template, hashtable) {
        var key, tag, output = template;
        for (key in hashtable) {
            tag = "\\[" + key + "\\]";
            tagx = new RegExp(tag, 'g')
            output = output.replace(tagx, hashtable[key]);
        }
        return output;
    }
};

/*
// Usage
CTemplator.fitIn1('<a href="#[Link]" title="[Title]">[Content]</a>', {
    Link: 'test1.html',
    Title: 'Test1',
    Content: 'Test1'
});
CTemplator.fitIn4('<a href="#[Link]" title="[Content]">[Content]</a>', {
    Link: 'test1.html',
    Content: 'Test1'
});
CTemplator.fitIn2('<a href="#@0" title="@1">@1</a>', ['test1.html', 'Test1']);
CTemplator.fitIn2('<a href="#@0" title="@2">@1</a>', ['test1.html', 'Test1', 'Test1']);
CTemplator.fitIn3('<a href="#Link" title="Title">Content</a>', {
    Link: 'test1.html',
    Title: 'Test1',
    Content: 'Test1'
});
*/

JS: Javascript Class/File Dependency Handler

Here is the dependency class based on singleton design pattern in javascript. This class can handle all the javascript file dependencies from inside the script. That means you don't need to include the file in the script tag under html head. In fact, you can use it just like import/include/require statements in other language.

It's usage is very simple. You just have to declare the class object which would be global since it is a singleton class, then call the import method to include the javascript file on which current file or method is dependent; then listen for the success event on which you can use that imported class/file method as specified.

/* 
@file CDependency.js
@author Abhishek Kumar
@email abhishek.kumar@intigate.com
*/

function CDependency() {
    if (arguments.callee._singletonInstance) {
        return arguments.callee._singletonInstance;
    }
    arguments.callee._singletonInstance = this;

    var list = [];

    // jquery based method
    var jqload = function (filepath, callback) {
        if (list.indexOf(filepath) < 0) {
            list.push(filepath);
            $.getScript(filepath, callback);
        } else {
            callback();
        }
    };

    this.require = function (filepath, callback) {
        jqload(filepath, callback);
    };

    this.requires = function (filepaths, callback) {
        var counter = 0;
        var loadJs = function () {
            if (counter < filepaths.length) {
                jqload(filepaths[counter++], loadJs);
            } else {
                callback();
            }
        };
        loadJs();
    }

    // basic javascript method
    this.load = function (filepath, callback) {
        if (list.indexOf(filepath) < 0) {
            list.push(filepath);
            var head = document.getElementsByTagName('head')[0];
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = filepath;
            script.onreadystatechange = callback;
            script.onload = callback;
            head.appendChild(script);
        }
    }
}
/*
// Usage
oDependency = new CDependency();
oDependency.import('scripts/cache.js', function () {
    console.log('yuppie');
});
*/

Tuesday, February 25, 2014

JS: Phonegap/Cordova integration with JqueryMobile

Here is the standard way of loading and detecting Cordova & JqueryMobile framework.
/*
 @author Abhishek Kumar
 @email akbittu@gmail.com
*/

var app = {
 deviceReadyDeferred,
 jqmReadyDeferred,
 initialize: function() {
  this.deviceReadyDeferred = $.Deferred();
  this.jqmReadyDeferred = $.Deferred();
  this.bindEvents();
 },
 bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
        $(document).one("mobileinit", this.onJQMReady);
        $.when(this.deviceReadyDeferred, this.jqmReadyDeferred).then(this.onCompleteReady);
    },
    onDeviceReady: function() {
     app.deviceReadyDeferred.resolve();
    },
    onJQMReady: function() {
     app.jqmReadyDeferred.resolve();
 },
 onCompleteReady: function() {
  main();  
 }
};

Tuesday, February 18, 2014

JS: Singleton based Cache

Here is the cache class based on singleton design pattern in javascript. There are 2 alternatives present in here.
/* 
@file CCache.js
@author Abhishek Kumar
@email akbittu@gmail.com
*/

// Singleton Class - Alternate#1
var CCache = (function () {
    var instance;    
    function init() {
        var cache = {};
        return {
            getCacheItem: function (itemId) {
                return cache[itemId];
            },
            setCacheItem: function (itemId, itemVal) {
                cache[itemId] = itemVal;
            }
        };
    };
    return {
        getInstance: function () {
            if (!instance) {
                instance = init();
            }
            return instance;
        }
    };
})();

// Usage
var oCache = CCache.getInstance();
oCache.setCacheItem('dataHolder', 'a new item value');
config.log(oCache.getCacheItem('dataHolder'));

// Singleton Class - Alternate#2
function CCache() {
    if (arguments.callee._singletonInstance) {
        return arguments.callee._singletonInstance;
    }
    arguments.callee._singletonInstance = this;

    var cache = {};        
    this.getCacheItem = function (itemId) {
        return cache[itemId];
    };
    this.setCacheItem = function (itemId, itemVal) {
        cache[itemId] = itemVal;
    };
}

// Usage
var oCache = new CCache();
oCache.setCacheItem('dataHolder', 'a new item value');
config.log(oCache.getCacheItem('dataHolder'));

Tuesday, January 14, 2014

JS: Templator

Here is the template manipulating class in javascript. There are 2 methods present in this class for doing the same thing but in 2 different ways. Based on requirement or comfort-level, the particular method can be chosen.
/* 
@file CTemplator.js
@author Abhishek Kumar
@email akbittu@gmail.com
*/

// Class
var CTemplator = {
    fitIn1: function (template, hashtable) {
        var key, tag, output = template;
        for (key in hashtable) {
            tag = "[" + key + "]";
            output = output.replace(tag, hashtable[key]);
        }
        return output
    },
    fitIn2: function (template, arglist) {
        var output = template;
        for (var i = 0; i < arglist.length; i++) {
            output = output.replace(new RegExp('@' + i, 'g'), arglist[i]);
        }
        return output;
    }
}

// Usage
CTemplator.fitIn1('<a href="#[Link]" title="[Title]">[Content]</a>', {
    Link:'test1.html', 
    Title:'Test1', 
    Content:'Test1'
});
CTemplator.fitIn1('<a href="#[Link]" title="[Content]">[Content]</a>', {
    Link:'test1.html', 
    Content:'Test1'
});

CTemplator.fitIn2('<a href="#@0" title="@1">@1</a>', ['test1.html', 'Test1']);
CTemplator.fitIn2('<a href="#@0" title="@2">@1</a>', ['test1.html', 'Test1', 'Test1']);
There are 4 examples provided above to describe different scenarios:
  • The first example shows that the hash-array-map like object has been used for mapping each keyword present in the template. 
  • The second example shows that there could be multiple occurrence of particular keyword that would get replaced by same value which is mapped in the object.
  • The third example shows that instead of using hash-map, we can also use simple array like list where the keyword is mapped with index of the provided argument array. 
  • The fourth example shows the multiple occurrence of particular keyword and their mapped values in the list.

Saturday, January 4, 2014

JS: Communication Gateway

There is always a need of a single point of contact in every communication matter in real life. In the same way, in coding also when this technique is applied, it makes the communication easier to handle and to track the information flow. So here is an implementation of the same real life scenario in javascript. This technique can be extended or implemented in any language wherever there is a need of controlled communication.

It's working is very straight forward. All the request calls are pushed into the queue. Queue works on First-In-First-Out (FIFO) logic. So as the requests get processed, it would be removed from the queue and the next request would be sent fro processing. This works automatically until the request queue become empty.
/* 
@file communicator.js
@author Abhishek Kumar
@email akbittu@gmail.com
*/

// Basic

function Communicator() {

    var requests = [];

    this.request = function (url, data, listener) {
        var package = {
            url: url,
            data: data,
            listener: listener
        };
        requests.push(package);
        if (requests.length == 1) {
            this.call();
        }
    }

    this.call = function () {
        var package = requests.shift();
        $.ajax({
            type: "POST",
            url: package.url,
            data: package.data,
        }).done(function (response) {
            console.log("Success: " + response);
            if (requests.length > 0) {
                this.call();
            }
            package.listener(response);
        }).fail(function (jqXHR, textStatus) {
            console.log("Failed: " + textStatus);
        });
    }

}

// Advanced

function Communicator() {

    var requests = [];
    
    var serialize = function(obj) {
        var str = [];
        for (var p in obj) {
            if (obj.hasOwnProperty(p)) {
                str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
            }
        }
        return str.join("&");
    }

    this.request = function (url, data, listener) {
        if (typeof (data) == 'object') {
            data = serialize(data);
        }
        var package = {
            url: url,
            data: data,
            listener: listener
        };
        requests.push(package);
        if (requests.length == 1) {
            this.call();
        }
    }

    this.call = function () {
        var package = requests.shift();        
        $.ajax({
            type: "POST",
            url: package.url,
            data: package.data,
            cache: false,
            success: function(response) {
                console.log("Success: " + response);
                if (requests.length > 0) {
                    this.call();
                }
                package.listener(response);
            },
            error: function(jqXHR, textStatus){
                console.log("Failed: " + textStatus);
            }
        });
    }
}

// Usage

var oCommunicator = new Communicator();
oCommunicator.request('services.php', {
    cmd: 'login',
    arg: '["user1","pass1"]'
}, function (response) {
    console.log("Success: " + response);
});