Using Ripple Emulator with jQWidgets Mobile PhoneGap Apps

In this tutorial you will learn how to use the Ripple Emulator to run the jQWidgets eStore example as a mobile application and emulate it for different devices.. You may also be interested in how to port the same application for Android, BlackBerry 10, iOS or Windows Phone 8.

1. Install Ripple Emulator

Before we proceed further with this tutorial, you need to install Ripple. It is available as a Google Chrome app, which you may find in the Chrome Web Store here.

2. Prepare the Mobile Application

The next step is to prepare a mobile application for testing. For the purpose of this tutorial, we will be using the jQWidgets eStore example, which was prepared for deployment on a device with PhoneGap/Apache Cordova. You can download the source code we will be using here. Exract the files and then run the application locally in Google Chrome.

3. Emulate the Application

At first, the application will not load correctly, because PhoneGap/Cordova's API cannot run in a standard web browser without emulation. To start the emulator, click on the Ripple icon in the top right corner:

Ripple Emulation Step 1

Choose Enable in the popup dialog:

Ripple Emulation Step 2

In the next screen, choose Apache Cordova / PhoneGap (1.0.0):

Ripple Emulation Step 3

The application is now correctly displayed and emulated for a generic mobile device:

Ripple Emulation Step 4

4. Options

To the left and right of the emulated application, there is a variety of emulation options. Here are some highlights:

4.1. Left-side Options

Ripple Emulation Options 1

4.2. Right-side options

Ripple Emulation Options 2 Ripple Emulation Options 3 Ripple Emulation Options 4
Ripple Emulation App