When we are thinking of a web application, the most important nonfunctional attributes which comes to our mind are Availability, Performance, Scalability, Extensibility, Usability, Reliability, Maintainability, Security, and Privacy.

But when you think of Mobile application there are certain additional parameters which you need to take care during your App design like Form factors, Device coverage, Portability, Cpu & Memory, Network conditions, Operability, Notifications, Screen resolutions, Font, Layout,compatibility,Response Time,Testability,  Fault Tolerance, Failure Management and so on. The correct specification and adherence of non-functional requirements similarly plays at least an equal, if not a greater, role in the success of mobile applications also.Non-functional requirements are often called qualities of a system.

This is due to the following reasons:

• Mobile devices are uniquely constrained in several dimensions such as the processor speed, memory, multi-tasking support, available network bandwidth, screen real estate, etc. These constraints translate into strict bounds being imposed on the operating characteristics of an application running on a mobile device.
• Mobile applications need to operate successfully (or degrade gracefully) within a wide spectrum of operating conditions, such as a range of supported screen resolutions and form factors, network bandwidth situations and network types (2G, 3G, Wi-Fi), etc.
• Mobile applications sometimes need to interact with the device’s sensors such as GPS, accelerometer, the ambient light sensor, camera, etc. The application must respect the sensor’s operating characteristics such as its operating range, sensitivity, accuracy, maximum polling interval, etc.
• Finally, users expect a different quality of user experience from an application running on the mobile device than they do from their desktop computer. For example, it is much less acceptable to have to reboot the phone when a mobile application hangs. Thus the latitude for error tends to be less for a mobile application than for the desktop version of the application in the same situation.

  Thus, it is critical to capture these requirements as accurately and exhaustively as possible, ensure that the application’s design addresses each requirement, develop the application to meet these requirements, and test the application against each requirement so as to verify compliance. It is worthwhile to highlight some design considerations while designing a mobile application. This document tries to cover some important considerations among these.

Key Design Constraints

CPU and memory

When an application is developed to run on a particular software platform such as Android, iOS, Windows etc., it can in theory be installed and run on any device that supports that platform. However for any given platform, the supported devices could have a very wide range of capabilities in terms of CPU speed and available memory. You can evaluate each feature in your application from the point of view of its CPU and memory consumption while running it, and accordingly arrive at a lower bound for the entire application from this analysis.

Here’s a list of the CPU and memory profiling tools you can use for some of the common smartphone platforms

• IPhone: The Instruments tool in the XCode development environment from Apple.
• Android: HPROF on Android (hprof output can be generated and analyzed in a variety of different ways.

(Refer References for more details)

Network conditions

There are four things to consider in this area.

• Support for different network channels: Mobile devices can communicate with the network on one or more channels such as SMS, USSD, Wi-Fi, GPRS (2G/3G/4G), WAP, etc. Certain functions in your application may not perform well (or at all) on certain channels and protocols. If you wish to support only the high capacity channels such as Wi-Fi, or GPRS on 3G, you will risk shutting out the vast majority of low-end devices which may not support these radios. On the other hand if you do not specify which are the required (or recommended) channels for your application, it may result in the users inadvertently trying your application’s high-bandwidth features on a low-bandwidth channel such as GPRS on 2G or WAP, thereby frustrating themselves out of the application.

For a networked application, it is crucial that you evaluate each network-enabled feature of the application from the point of view of determining the channels that it is most likely to satisfy the minimum latency requirements on.

• Signal drop or signal strength reduction: Be sure to evaluate each network-enabled feature in your application in the situation where the channel over which it is operating becomes unavailable or its signal strength reduces. Ensure that the feature is either network-fault tolerant or degrades or fails gracefully in such a situation.
• Network channel transition: This network condition deals with the mobile application’s behavior when the device transitions from one channel to another. A classic example is when a user walks out of their office building and the device transitions from Wi-Fi to 3G. If there is a transaction underway in the mobile application when this happens, how will the application react to such a transition? It is useful to evaluate the application’s functionality in such situations and design it for a seamless transition to the new channel or for a graceful degradation or failure.
• Support for multiple channels: This network condition relates to the mobile application’s behavior when there are multiple network channels active at a time. For example, Wi-Fi, 3G and SMS are all active – which is not at all an unusual situation on a mobile device. For networked features that can operate over multiple channels, it helps to designate a preferred channel(s) and design the feature for detecting the preferred channel (or the next preferred channel) and use that channel over others. For example, you may specify that the application will always prefer the Wi-Fi channel over all others.

The SDKs of most major mobile platforms provide a means to register for listening to one or more network related events or notifications when a channel becomes available or unavailable or when the signal strength changes. You should register for such notifications and perform network condition handling inside the network listeners. Also code all network calls defensively via extensive use of exception blocks and return value checking so as to ensure a graceful degradation or failure.

Interrupts, notifications and multi-tasking

When a phone call, SMS or some type of notification (such as a calendar notification) arrives, your mobile device will usually inform your application of this event. If the user chooses to respond to the event, the OS may either background your application or, in case of non-multi-tasking OSes, simply terminate your application. In each case, the OS will usually give your application a chance to respond to the pause, background or termination event by invoking a handler method that you should implement. It is important that your mobile application handles the interrupt in such a way that

• It does not come in the way of the OS’s processing the user’s decision to respond to the interrupt (such as accepting a call or reading an SMS)
• It does not result in any damage to your application’s ability to function normally after the OS ‘foregrounds’, or resumes your application after the user finishes handling the interrupt or after they choose to ignore the interrupt.

You should evaluate each feature in the application from the point of view of determining how it would/should function if the application gets background-ed or made dormant while that feature is executing.

Screen resolutions and screen form factors

An application that is designed for the 240 x 320 pixels resolution screen will look tiny on the high resolution 480 x 360 pixels display of smart phone. The text will likely be too small to read, the images may look too tiny to decipher and the widgets and controls will be too small to use. Overall the application will be mostly useless even though, technically it ‘functions correctly’. Similarly, an application designed for a high-resolution (high DPI) screen will have a major part of its UI go off screen on a low DPI screen phone, leading to quite an annoying experience at best. It’s important to keep a set of target screen resolutions in mind while designing the user interface of a mobile application. If it’s not practical to enumerate the complete set of supported screen resolutions, try to identify a reasonable range of values, for e.g. 400 to 500 pixels along the short dimension and 600 to 850 pixels along the long dimension. Then identify a small set of devices, which taken together, will constitute a representative set of screen resolutions lying this in range, and then design the UI of the application for these devices.

Font adjustment

The text font size may need to be adjusted up (for high resolution screens) or down (for low resolution screens) so as to keep the text readable

Layout tweaks

The layout may need to be adjusted to increase or decrease the spacing between and around labels and widgets shown on the screen so as to prevent them from getting clustered together on high-res screens or spaced apart too much on low-res screens.

Image changes

Background images or background art may have to be provided in two different versions: a large size/high resolution version and a small size/low resolution version so that it properly fills the amount of physical space available on the screen.

Portrait and Landscape modes

Avoid adding the complexity of supporting both portrait and landscape modes if your application does not need to work in both modes. However if you decide to add support for both modes, it’s generally a good idea to add this support for all screens in the application and not just some of the screens so as prevent a usability surprise

Reference

http://pcquest.ciol.com/content/Developer/2011/511042902.asp

http://android-developers.blogspot.com/2011/03/memory-analysis-for-android.html

https://developer.apple.com/library/mac/#documentation/DeveloperTools/Conceptual/InstrumentsUserGuide/Introduction/Introduction.html

This tutorial is a step-by-step guide
> To install Mac OS x 10.8 on Vmware.
> To install dmg files

Prerequisite:
- You need at least ~10 GB space.
- You need 7-zip
- You need Vmware Player
- You need an Apple ID. Go ahead and create one for development purpose.

Steps -

1. Download Vmware Mac image from here.

http://www.souldevteam.net/blog/downloads/

I used Mac OS 10.8.

2. Extract it using 7-zip which can be downloaded from Google search.
3. Download VMware workstation. I had VMware player 3 which I upgraded to VMware player 5.

4. Click on “Open a Virtual machine” link.

5.Keep the default settings. You can always edit these properties later.

6.Click “Play virtual machine”.

It will start installation. Click Next. It is easy to follow.
Fill in all the details.

7.

8. Login

If you are heavily into development on windows environment , You will feel little uncomfortable because of short cut keys.

Anyway you will get used to it.

Some windows equivalent in Apple

Windows Explorer -> Finder
Start Programs from keyboard -> LaunchPad
Browser IE/Mozilla/Chrome -> Safari
Outlook -> Mail
Control Panel -> System Preference
WM Player -> iTunes
Command Prompt -> Terminal
Recycle Bin – > Trash
Exe -> DMG
VisualStudio/Eclipse -> Xcode

App Store – You can buy Apps and lot of other Apple specific tools from app store. Also you can take a look at development tools.

I downloaded Xcode from AppStore. It is freely available now. XCode is very important IDE just like Visual Studio and Eclipse.

In my next tutorial I will show you how to create a Cordova (phonegap) project in XCode. I am comfortable using Chrome so I downloaded that also.

XCode/Chrome and Mac softwares come in DMG format

To install DMG in Mac you can follow below steps

1). Download the .dmg file; normally it should download to the Desktop or your Downloads folder.
2). Double-click the .dmg file that you have downloaded and a new icon with a similar name will appear.
3). A Finder window may open automatically, if it doesn’t double-click the new icon and it will open the Finder window.
4). Copy (or drag n drop) the new icon (the one that appeared when you opened the dmg) to your Applications directory.

References
http://www.souldevteam.net/blog/downloads/

http://www.sysprobs.com/download-lion-os-x-10-7-3-vmware-image-and-make-it-work-on-windows-7-computer

http://ubuntu4beginners.wordpress.com/2011/04/09/how-to-install-a-dmg-file/

Cheers, we are done installing Mac on Win7 using VMWare.

Installing the Prerequisite Software

Eclipse

Install the Eclipse IDE for Java Developers from http://www.eclipse.org/downloads/. This a ZIP archive file, extract the folder “eclipse”. Most other flavors of Eclipse (like Aptana or platform specific builds) will also work, provided that you install all the necessary Eclipse plug-ins.

Note: Tested on eclipse-jee-indigo-SR2-win32

Java JDK

If you do not already have the java JDK installed on you’re system, install the Java SE Development Kit – JDK 6 from here:
http://java.sun.com/javase/downloads/index.jsp

If you’re running Windows this is a standard installer file, just follow the on screen instructions for installation.

Note: Tested on JDK 6.

Android SDK

Install the Android SDK Package from here

http://developer.android.com/sdk/index.html

Extract the downloaded archive and place it somewhere you’ll remember and add the tools sub directory your PATH. Additional information and instructions for adding the Android SDK to your PATH can be found at:
http://developer.android.com/sdk/installing.html

Be sure to do the following (Windows):

1. If you install into a folder containing a space (c:\Program Files), you must refer to it by its truncated name in the command program.  In this case “c:\progra~1″.  The truncated name will be the first six characters + ~ + a sequential number starting with 1 for each instance of the same six characters.
2. Add android SDK to your Path
3. Add android sdk tools (\android-sdk-windows\tools) to your path. This is necessary for ruby to find the command ”android create project” later on.

Note: PhoneGap 1.0 no longer supports Android 1.x (API levels 3 and 4). Make sure you download and use API level 7 (Android 2.1-u1) or newer.

ADT Plug-in for Eclipse

Install the ADT Plug-in for Eclipse as described here:

http://developer.android.com/sdk/eclipse-adt.html

To verify your installation of Eclipse, Android SDK, ADT, and Java, you can build a sample “Hello World” application using the instructions located here:

http://developer.android.com/guide/tutorials/hello-world.html.

Note: Installed using Eclipse Marketplace.

Note: Make sure you have appropriate revisions installed. Android SDK manager which is installed above takes care of this. Update your API revisions frequently.

Phone Gap Plug-in for Eclipse

Install phonegap plug-in through Eclipse market place. It will take care of dependencies.

Once both plug-ins are installed respective icons with appear on eclipse workbench.

PhoneGap (Cordova)

Download the latest copy of Cordova and extract its contents. We will use this folder in configuring new project below.

Note: Tested on phonegap-1.8.1.0

Reference: http://wiki.phonegap.com/w/page/16494774/Getting%20started%20with%20Android%20PhoneGap%20in%20Eclipse

http://wiki.phonegap.com/w/page/34483744/PhoneGap%20Eclipse%20PlugIn%20for%20Android

Setup New Project

Depending on Android/eclipse version below window may appear little different.

Click on Phone Gap icon.

Include Sencha Touch library (optional) in the pop up window.

Select “Create Activity” checkbox. Click Finish.

Project gets created in workspace. Right click root folder and click on Run as -> Android Application

You will get a prompt to add Virtual Device. Click Yes.

Adding new Android Device

Click New. Enter below details and click “Create AVD”.

Again run the application. You will see Android Emulator.

You can edit index.html like below  snippet.

<body> Hi Apachebite </body>

This is a world famous “Hello World” program which is simulated on Android Emulator.

References

http://developer.android.com/sdk/installing/installing-adt.html

http://www.mkyong.com/android/android-hello-world-example/

http://www.vogella.com/articles/Android/article.html

Problem Statement

Convert ’2012-12-31T23:00:00.0Z’ to local time in javascript.

Solution

var iso=”2012-12-31T23:00:00.0Z’;

var utc = new Date(iso);
var local = new Date(utc.getTime() + utc.getTimezoneOffset());

But above solution works in Chrome/Safari/Firefox but fails in Android emulator. This is because of ISO string not recognized by ECMA 3 supported browser in android. So to fix this we used below fix which worked for us.

Pass your ISO string to below function and you can then retrieve the details from return object as shown below -

/////////////////////////////////////////////////////////////////////////////////

Code Snippet :

var d = new Date(parseISO8601(’2012-12-31T23:00:00.0Z’));
var hr=d.getHours(); ;
var min=d.getMinutes();
var sec=d.getSeconds();
var year=d.getFullYear();
var month=d.getMonth() +1;
var date=d.getDate();

function parseISO8601(str) {
// we assume str is a UTC date ending in ‘Z’

var parts = str.split(‘T’),
dateParts = parts[0].split(‘-’),
timeParts = parts[1].split(‘Z’),
timeSubParts = timeParts[0].split(‘:’),
timeSecParts = timeSubParts[2].split(‘.’),
timeHours = Number(timeSubParts[0]),
_date = new Date;

_date.setUTCFullYear(Number(dateParts[0]));
_date.setUTCMonth(Number(dateParts[1])-1);
_date.setUTCDate(Number(dateParts[2]));
_date.setUTCHours(Number(timeHours));
_date.setUTCMinutes(Number(timeSubParts[1]));
_date.setUTCSeconds(Number(timeSecParts[0]));
if (timeSecParts[1]) _date.setUTCMilliseconds(Number(timeSecParts[1]));

// by using setUTC methods the date has already been converted to local time(?)
return _date;

/////////////////////////////////////////////////////////////////////////////////////////

You can refer below url from where this script is picked up.

Reference

http://anentropic.wordpress.com/2009/06/25/javascript-iso8601-parser-and-pretty-dates/