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.
Step1: Install PhoneGap:
- 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
- On OS X and Linux:
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
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.