Build Hybrid Apps using Jquery Mobile and Cordova

Apache Cordova is a set of device APIs that allow a mobile app developer to access native device function such as the camera or accelerometer from JavaScript. Combined with a UI framework such as jQuery Mobile or Sencha Touch, this allows a smartphone app to be developed with just HTML, CSS, and JavaScript. When using the Cordova APIs, an app can be built without any native code (Java, Objective-C, etc) from the app developer. Instead, web technologies are used, and they are hosted in the app itself locally (generally not on a remote http server).

jQuery Mobile framework takes the “write less, do more” mantra to the next level: Instead of writing unique applications for each mobile device or OS, the jQuery mobile framework allows you to design a single highly-branded responsive web site or application that will work on all popular smartphone, tablet, and desktop platforms. jQuery Mobile is a HTML5-based user interface system.

Steps to build Cordova App

1. Install Cordova

on OS X and Linux:

$ sudo npm install -g cordova

on Windows:

C:\>npm install -g cordova

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

$ cordova create hello com.example.hello HelloWorld

First argument hello specifies a directory to be generated for your project which Cordova will create. Its www subdirectory houses your application’s home page, along with various resources under css, js, and img, which follow common web development file-naming conventions.
The config.xml file contains important metadata needed to generate and distribute the application.
The second argument com.example.hello provides your project with a reverse domain-style identifier.
The third argument HelloWorld provides the application’s display title.

3. Add Platforms

All subsequent commands need to be run within the project’s directory, or any subdirectories within its scope:

$ cd hello

Your ability to run these commands depends on whether your machine supports each SDK, and whether you have already installed each SDK. Run any of these from a Mac:

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

Run any of these from a Windows machine, where wp refers to different versions of the Windows Phone operating system:

$ cordova platform add wp8
$ cordova platform add windows
$ cordova platform add android
$ cordova platform add blackberry10

Run this to check your current set of platforms:

$ cordova platforms ls

Run either of the following synonymous commands to remove a platform:

$ cordova platform remove blackberry10
$ cordova platform rm android

Running commands to add or remove platforms affects the contents of the project’s platforms directory, where each specified platform appears as a subdirectory. The www source directory is reproduced within each platform’s subdirectory, appearing for example in platforms/ios/www or platforms/android/assets/www.

4. Build the App

By default, the cordova create script generates a skeletal web-based application whose home page is the project’s www/index.html file. Edit the this file and add all necessary JS files like Jquery mobile,Jquery and all CSS files. Build a proper Jquery mobile application refering to the documentation in
http://api.jquerymobile.com/category/all/
http://demos.jquerymobile.com/1.3.2/#&ui-state=dialog.
Keep all files with in www folder itself.Run the following command to iteratively build the project:

$ cordova build
$ cordova build ios // platform-specific

When the cordova build command is run, the www source directory is reproduced within each platform’s subdirectory, appearing for example in platforms/ios/www or platforms/android/assets/www. Because the Cordova constantly copies over files from the source www folder, you should only edit these files and not the ones located under the platforms subdirectories.

5. Add Plugin Features

A plugin is a bit of add-on code that provides an interface to native components. More commonly, you would add a plugin to enable one of Cordova’s basic device-level features detailed in the API Reference. The cordova plugin add command requires you to specify the repository for the plugin code. Here are examples of how you might use the Command Line Interface to add features to the app:Basic device information (Device API):

$ cordova plugin add org.apache.cordova.device

Use plugin ls (or plugin list, or plugin by itself) to view currently installed plugins.

$ cordova plugin ls # or ‘plugin list’

To remove a plugin, refer to it by the same identifier that appears in the listing

$ cordova plugin remove org.apache.cordova.device

6. Test the App on an Emulator or Device

Load the platforms/android folder into Eclipse and make sure all dependencies are correct and run the App in either emulator or you can plug the handset into your computer and test the app directly. In case of Ios load the platforms/ios app into Xcode and run the application.

7. Production Release

Now that we have a working app, we are ready to push it live to the world. Before we deploy, we should take care to adjust plugins needed during development that should not be in production mode For example, we probably don’t want the debug console plugin enabled, so we should remove it before generating the release builds:

$ cordova plugin rm org.apache.cordova.console

To generate a release build for Android, we can use the following cordova command:

$ cordova build – - release android

To generate a release build for Ios, we can use the following cordova command:

$ cordova build ios – - release – - device

For Reference please check http://cordova.apache.org/docs/en/4.0.0/guide_overview_index.md.html#Overview

2 thoughts on “Build Hybrid Apps using Jquery Mobile and Cordova”

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>