Effective way to develop mobile app : Save time and money

If you want to develop mobile App for your target users, an important decision is to decide between developing a native app or hybrid one. Native mobile app are platform specific, run only on the platforms for which they are built. The cost of building and maintaining a native app is usually higher compared to the hybrid because apps have to be developed and maintained separately for each mobile OS. Hybrid app offer cross-platform support and we can modify the platforms anytime in a short time with a limited budget.

Challanges and limitation of Current System

One of our client had a product information about the steel bar measurements in notebook manual. They faced many challenges in the manual of the product specification.

It was very difficult to search product information from notebook even with the Rolodex indexing.
There was a limitation of carrying the manual everywhere.
It was very difficult to bookmark specific product information for every user for future reference.
Very difficult to map detailed product information in table format for every product. Also, it’s very difficult to maintain a large number of product tables.
It was difficult to show sample product information table to every user.

Proposed Mobile app solution and benefits:

We gathered the client requirements and did our analysis. After analyzing the client requirements, we recommended our client to use the jQuery Mobile, Phonegap and Cordova. We have turned their manual notebook into mobile application that runs on multiple platforms like iOSAndroid which allows a user to:

Automate product information about the steel bar measurements.
Search and view the measurement specification by swiping the cards or directly opening the specific section.
Bookmark the specific product for future reference quite easily.
Map and Maintain the product measurement in table format quite easily.
Take screenshot of product measurement tables for sample.

In this article we demonstrate how to develop a cross platform mobile application using Phonegap and jQuery Mobile.

Step1: Install PhoneGap:

PhoneGap is an open source framework for developing mobile application for multiple platforms (android, iOS and windows, etc.) using HTML5, Javascript and CSS.

Install Git
```
$ sudo apt-get install git
```
Install NodeJS
```
$ sudo apt-get install node
```
Install PhoneGap
```
npm install -g phonegap
```
Install Ant
```
sudo apt-get install ant
```
Get the Android SDK

Get Java (JRE & JDK)

sudo apt-get install openjdk-7-jre
sudo apt-get install openjdk-7-jdk

Step2: Installing Cordova using Command Line Interface(CLI)

This tool allows you to create new projects, build them on different platforms, and run on real devices or within emulators.There are three way to install Cordova:

Download and install Node.js* .
Download and install a git client* .
Installthecordova moduleusingnpm utility of Node.js.
- On OS X and Linux:
```
$ sudo npm install -g cordova
```
- On Windows:
```
C:>npm install -g cordova
```

Step3: Create the application

Go to the directory where you maintain your source code, and run a command such as the following:

$ cordova create Pragmaapps com.example.pragmaapps iPapplication

The first argument Pragmaapps specifies a directory to be generated for your project. The second and third argument is optional. This command will created the project with all required libraries with the name Pragmaapps.

Step4: Add Platforms

Go on the project directory. Run the following query to add platform like Android, iOS , blackberry etc:

```
$ cordova platform add ios
```
```
$ cordova platform add android
```
```
$ cordova platform add blackberry10
```

Step5: Create HTML file for application

We can create our own html file under the www subdirectory of the project. But Now we edit the index.html file with the following content which already exist in the www subdirectory of the project.

<html>
<head>
 <!-- Include meta tag to ensure proper rendering and touch zooming -->
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- Include jQuery Mobile stylesheets -->
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
 <!-- Include the jQuery library -->
 <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
 <!-- Include the jQuery Mobile library -->
 <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
   <div data-role="header">
      <h1>Rolodex Card View</h1>
   </div>

  <div data-role="main" class="ui-content">
      <div data-role="main" class="ui-content custom_main_div">
     <div class="container">
	 <div>
	   <div class="mainHeader" >
	     <h2 class="CustomHeader">Rolodex Card View</h2>  
	   </div>
	   <div id="sb-container" class="sb-container" >
		<div class="rolodex" id="item-1" style="top:10px">
		  <p class = "card_title" >Roldex Card 1</p>
		  <img class = "card_image"  src="/home/ajay/1.jpg" />
		</div>
		<div class="rolodex" id="item-2" style="top:50px">
		  <p class = "card_title" >Roldex Card 2</p>
		  <img class = "card_image"  src="/home/ajay/2.jpg" />
		</div>
		<div class="rolodex" id="item-3" style="top:90px">
		  <p class = "card_title" >Roldex Card 3</p>
		  <img class = "card_image"  src="/home/ajay/3.jpg" />
		</div>
		<div class="rolodex" id="item-4" style="top:130px">
		  <p class = "card_title" >Roldex Card 4</p>
		  <img class = "card_image"  src="/home/ajay/4.jpg" />
		</div>
	   </div>
	  </div>
      </div>
  </div>
</div>

  <div data-role="footer">
    <h1>pragmaapps solutions 2015</h1>
  </div>
</div> 
</body>
</html>

Step6: Build the Application

Run the following command to iteratively build the project:

$ cordova build

This generates platform-specific code within the project’s platforms subdirectory. Using the below command we can build the specific platform:

$ cordova build ios

Step7: Test the application on an Emulator or Device

Run the following command to run the application on the virtual Emulator device:

$ cordova emulate android

Run the following command to run the application on the specific device:

$ cordova run android

Conclusion

Hence by using this we have developed a sample mobile application on phonegap and Jquey mobile which offers the cross platform support in short time and limited budget. This mobile app enables user to search, bookmark and view the product information quite easily. Feel free to contact us if you have any further queries.