I am a developer and I know how hard it is to solve difficult issues while programming in case you did not get any help. I have faced this so many times. That's why I started this blog so that I can share problems and solutions with developer community. In case if you face any issue in programming do check my blog once, it will surely save your time.

Friday, January 31, 2014

Do you have a Magento store and you want to reach to maximum number customers? Then read this blog.

As we know that mobile revolution has changed the world. Number of people are using smart phones and tablets now a days for day to day work. They use mobile internet for almost everything. So your customers may browse your magento store from mobile devices and if your store is not optimized for mobile, it may not load on mobile, or have some issue. Hence users may not be able to buy products on your store and eventually you lost your customer. Now lets see in details, why you need separate mobile web app for your store.

1) Limited Screen Size

On mobile devices screen size is limited so we don't get much space like desktop computers to show data. In very small space you have to effectively show the content to user so user can easily read it and see it. Many magento stores have this issues. As the site is optimized for desktop only, so the content is not visible properly.

2) Limited BandWidth
Generally mobile networks are slow you your magento store may take time to load. As we know that for each magento page there are some CSS some JS files. There are plenty of images, banners etc. Every time when user navigate on your magento store there is considerable delay in loading resources of the page. This may slow down performance on the mobile devices. Some of the users don't like slow websites. If we use responsive mobile theme, we can improve the layout performance but still we have delay in page refresh

3) Different Resolutions

As we know that there are mobile devices with different screen resolutions. For example iPhone has high resolution retina display. Some of the android phones also support HD graphics. While some mobiles does not support HD graphics. In this scenario your assets like images, CSS should support high resolution and normal resolution. So if you don't support high graphics, your website does not look good on high resolution devices.

So how to solve all above problems and optimize your magento store for all the mobile devices? We have a solution for that. We have built an JavaScript/HTML 5 /CSS 3 based application for magento stores. This application has following features. With our solution your magento store is easily converted to Magento Mobile Store.

1) Responsive layout to fit all the devices.
2) Support all types of touch gestures
3) Show resources based on resolution
4) Rendering engine to support landscape and portrait orientation
5) Have services to load data instead of page refreshes.
6) Supports private browsing
7) Slide navigation for menus
8) Support for local storage of data
9) Supports all types of magento products
10) Customized from same magento admin
11) Optimized for best speed and performance.
12) Rich user interface

Our solution is completely build in HTML and JavaScript. So once the application is loaded. There is no page refresh. All the navigation is local navigation. Data is coming via Ajax request with JSON format. It drastically reduces the network usage. It uses space such a way that you will see the clear information about products and content.

Don't believe it? See the difference
This is our recent implementation in one of the biggest magento store. Following is the regular desktop site in iPhone.

As you see that it looks bit cluttered in iPhone. None of the content is visible unless you zoom in. So to read the content properly, you have to zoom in and zoom out. After zoom in you have to scroll left and right to see the content properly.Now lets how our mobile web app for magento looks in mobile browser.

Pretty cool right? With our application your magento store look like mobile web application in mobile phones and users have easy to use navigation, clear content, rich media, high resolution graphics, high performance. When you implement our solution, your users will still see the desktop site when they view it on desktop browsers. But they will see above mobile app when they visit your store from mobile browser.

Above mentioned content is essentials for restaurant to attract a customer. As most of the customer will search for a restaurant on Google or other search engines and they will get a link of website. When they visit the website they want to see all the details and make a decision to visit the restaurant. So if the details are missing customer may not visit the restaurant. Now a days most of the users use smartphones and tablets. A customer can search for the restaurant from mobile and comes to a restaurant site. Now lets see what issues customer may face if the the website is not mobile compatible.

1) They will see information in very small size that is not clear to read and see. For example see the screenshot below.

As you can see above content is hard to read unless you zoom it. Sometimes customer may not like to zoom in or zoom out. If you zoom in, you have to scroll left and right to read the content. Some customer may not like it.

2) They can not see the phone number and dial it directly from the site. This is not good as user may have to remember the phone number and dial it. Instead of this it will be good if user can click on phone number on site and it dials itself.

3) Many restaurant websites are build in flash for having nice animations and good looking content but this may not work on all the mobile devices so customer can not see the site.

4) There is no way to order food online on website. Some customer may want to carry out food from restaurant but they don't want to wait. If restaurant website does not allow online ordering, customer have to come to restaurant, order a food and wait till it gets complete. Instead of this if there is a facility to submit order, they can place the order and come at their connivence so they don't have to wait.

So in short an restaurant now a days need a mobile website with features like online ordering, booking a table, view menu, location maps etc. If a restaurant does not have it, they may be loosing the potential customers.

Contact me if you want to have a mobile websites for a restaurant with all the features. This will surely help to increase your business.

Strings can be compared with == operator and it returns true if string content and all the character cases match.

Boolean

Boolean variables can be defined true or false literals.

var a = true;

Arrays in JavaScript

Array object is used to store multiple values indexed by integer keys in a single variable.

var arr = []; //defines an empty array

var arr = [1,2,3,4]; //defines an array with four elements.

Values inside an array can be accessed using index.

var arr = [1,2,3,4];

var b= arr[0];

Here variable b will have value 1. Array constructor can also be used to declare an array.

var arr = new Array(10); //defines array with 10 elements.

length property can be used to know number of elements in an array.

var arr = [1,2,3,4,5];

var b=arr.length;

push method can be used to add an element in an array. push method will insert element at next empty index.

var arr = [];

arr.push(1);

sort method can be used to sort an array. Default sort order is alphabetic and ascending.

var arr = [];

arr.sort();

pop method can be used to remove last element from an array.

var arr = [1,2,3,4,5];

arr.pop();

reverse method can be used to reverse order of elements in an array.

var arr = [1,2,3,4,5];

arr.reverse(); //Now arr elements will be [5,4,3,2,1]

JavaScript also supports an associative array. An associative array is set of key value pairs. Values are stored in association with a key and when we provide a key, array will return its associative value.

var arr = {key1: 'value1',key2: 'value2'};

var a = arr['key1']; //variable a has value 'value1'

Functions in JavaScript

Functions contain set of reusable statements. Every function in JavaScript is instance of Native Function object of JavaScript. Function can be defined using function literal.

function add(a,b){

var c= a + b;

return c;

}

Also we can define a variable as a function.

var add = function(a,b){

var c= a + b;

return c;

}

Function can be invoked by name of the function and passing necessary arguments to it.

add(1,2);

A function which returns value can be assigned to any variable.

var c = add(1,2);

Objects in JavaScript

In JavaScript string, number, Boolean, null and undefined are primitive data types. All other values are objects. Class definition is not required to create objects in JavaScript. JavaScript objects are mutable keyed collection. JavaScript object contains methods and properties. Property is key value pair and methods are instance of Function object. Generally objects are used to store and organize data. Objects can contain other objects, to represent tree structure. Object literal can be specified by pair of curly braces with zero or more than one properties or methods. Objects are always passed by reference.

var obj = {}; //represent an empty object.

var obj = {

name: 'John Smith',

phone: '123456789'

}; //represent object with two properties.

Specific property value can be accessed by using name of property.

var name = obj.name; //name will have value 'John Smith'

Any attempt of accessing non existing member will return value undefined.

Friday, January 3, 2014

In this series I am going to explain JavaScript. This series will be good for beginners who want to learn about JavaScript.

JavaScript - Birth

JavaScript was originally invented at Netscape. They introduced it as a light weight scripting language to interact with web pages and providing dynamic content to web pages. Original name of the language developed by Netscape was Livescript but later it was changed to JavaScript when Netscape added support for Java in their Netscape Navigator web browser. After its introduction, JavaScript was quickly adopted as client side scripting language for web pages. Later Microsoft introduced JavaScript support to its web browser. Soon after releasing JavaScript as a client side script language Netscape introduced it as a server side scripting language. Today JavaScript is the most popular programming language among the web developers. JavaScript standards are defined by ECMA script.

Introduction to JavaScript

As the name suggest JavaScript is not a programming language but it's a scripting language. However it's C like syntax makes it look like a traditional procedural language. JavaScript supports functions, dynamic objects, loosely typed variables, associative arrays, regular expressions, prototype inheritance and DOM support. With features like this one can hardly call it “Just a Scripting Language”.
JavaScript is object oriented language. But here objects are dynamic. You can create objects at run time and add properties and methods to it. Also you can remove properties and methods from object at run time. This makes JavaScript objects completely dynamic in nature. In traditional object oriented programming language, classes are defined and objects are created from template of the class. JavaScript allows you to create object directly without a class. Objects can be created simply by adding their components like properties and methods. JavaScript is also a prototype based language. New objects can be created from existing objects. JavaScript implements prototype inheritance in slightly different manner and this is the point where most of the programmers fail to understand object orientation in JavaScript.

JavaScript Syntax

Like other languages, JavaScript also have syntax that makes it completely structured language. JavaScript is case sensitive language.

Whitespaces

Whitespaces are generally referred to tabs, spaces and newlines used outside the string constant. In JavaScript whitespaces are normally used to separate tokens.

var foo = 'Hello World';
Here spaces between var and foo can’t be removed. Other spaces like space between foo and = and space between = and ‘Hello World’ can be removed. JavaScript uses semicolons as statement terminators. That is optional. If you don't insert semicolon but add new line between statements and if those statements are well formed, there will not be any error.

a = b + c
(d*e)

These statements are parsed as

a = b+c(d*e)
But only well formatted statements are parsed. So for a good practice it's recommended to use semicolon as statement terminators.

Comments

JavaScript support single line and multi-line comments.

//This is single line comment
/*This is
multi-line comment*/

Variables

Variables are declared with a var statement. In JavaScript variables does not have type attached to it so any value can be stored in variables. Variable name must start with a letter or underscore (_) followed by any number of letters and digits. As mentioned earlier, JavaScript is a case sensitive language so var a and var A both are different variables. Variables name should not be one of the reserved keywords of JavaScript. Like other languages JavaScript variables also have scope.

var a=1;
function test(){var b =2;var c = a+b;
}
Scope of b variable inside a function is limited to its body while variable a declared outside the function has a global scope and it also can be accessed in a function.

Any uninitialized variable will have undefined value.

var a; //undefined
Null is used to define a variable with empty value.

Thursday, January 2, 2014

Recently we faced a strange issue with our Corodva Application. We built Sencha Touch application and used Cordova as native wrapper. When we uploaded APK to Google Play store, there was a notification that, application does not support tablets.

We were not sure what could be the issue, as we did not specify anything like this in application. First we thought it's a issue related to layouts, as some tablets may have high definition resolution. So we added all the layout files like ldpi, mdpi, hdpi and xhdpi. But still issue was the same. Later on we figured out that, this issue was actually related to permissions mentioned in Android manifest file. Normally when we create phoengap application for android, we specify following permissions.

If you see the above permission, we specified permission like RECEIVE_SMS, WRITE_EXTERNAL_STORAGE, RECORD_AUDIO etc. IT may be possible that the tablet only allows Wifi connection and it does not have any sim card or external storage so it may not receive the SMS or record audio or write to external storage. But we requested the permission in manifest file and which was not possible to grant so the application can not work on tablets.

If you face the same issue try and remove the permissions which are not necessary and may not be available in some tablets. After removing permissions, upload APK to Play store and it will work.