Getting Started with Emulate PhoneGap

Emulate PhoneGap
http://phonegap.com
http://localhost:3000
Emulate a Specific Platform
http://phonegap.com?platform=cordova
http://phonegap.com?platform=phonegap
Emulate a Specific Platform Version
http://phonegap.com?platform=cordova-2.0.0
http://phonegap.com?platform=phonegap-1.0.0
About
PhoneGap Emulator
The PhoneGap Emulator allows you to test your PhoneGap application from your desktop browser.
PhoneGap's JavaScript APIs are avaialble using Ripple, so you can subscribe to deviceready and even stub
responses for your custom plugins.
Requirements
The PhoneGap Emulator requires two free, third-party tools.
1. Google Chrome Browser by Google.
2. Ripple Emulation Environment by the BlackBerry HTML Team.
API
Overview
The PhoneGap emulator can be invoked with a web request. The request options are provided as query string
parameters and the response will check for all dependencies before opening the Ripple emulator.
Request
http://emulate.phonegap.com?url=<url>&platform=<platform>
Parameters
URL
The url is the address of your local or public web app.
The url is a required parameter.
Examples:
http://emulate.phonegap.com?url=phonegap.com
http://emulate.phonegap.com?url=http://phonegap.com
http://emulate.phonegap.com?url=http://phonegap.com/images
Platform
The platform is the environment to emulate.
The platform is an optional parameter.
Emulates latest version:
http://emulate.phonegap.com?url=phonegap.com&platform=cordova
http://emulate.phonegap.com?url=phonegap.com&platform=phonegap
Emulates specific version:
http://emulate.phonegap.com?url=phonegap.com&platform=cordova-2.0.0
http://emulate.phonegap.com?url=phonegap.com&platform=phonegap-1.0.0

Using ripple mobile browser emulator for testing PhoneGap
One of the biggest pain point for testing PhoneGap application is deploying it on emulator and testing
it, that process takes long time. So i started using the Ripple which is Google Chrome extension and it
makes testing PhoneGap application really easy.
1. Install Ripple extension in Chrome
2. Start the Google Chrome browser with its access to local file system by
executing chrome.exe -allow-file-access-from-files
3. Then Right click on the Ripple symbol and say Manage Google Extensions, on the next
screen check Allow access to file URLs check box

4. Now open index.html from the phoneGap application using file URL and enable Ripple
for it

5. Now you can test the geolocation application like this. With Ripple advantage is you
can directly open the HTML in browser and then set geolocation directly using Ripple


Use Ripple Emulator for Windows to test PhoneGap
application

I'm developing my PhoneGap apps using PhoneGap Build, not local PhoneGap environment. So -- as I
was instructed -- I have deleted phonegap.js file from my application's webroot and only left reference to
it in index.html. This is fine for PhoneGap Build, but absolutely not fine for Ripple Emulator.
Ever since I put that file back (actually cordova.js from lib\android\example\assets\www\ folder
from phonegap-2.0.0.zip I managed to see license, start Ripple Services and test working PhoneGap
application locally.
Notice for people struggling with similar problem: Current version of Ripple Emulator uses Cordova 2.0.
Make sure, that you download right version of PhoneGap and take cordova.js from it! Do not
attempt to use cordova.js from newer version (currently 3.0.0) as you may run into undetectable
situations, including seeing many strange alert()'s and even hanging up overloaded Chrome.
Always make sure, that you're using PhoneGap's JS file version, that maches the one behind Ripple.
Step by step
Key steps to be able to test PhoneGap application under Windows, using Chrome and Ripple Emulator:
1. Put cordova.js file back to your folder root and check the reference to it. You can grab it
from lib\android\example\assets\www\ folder from any downloadable version of PhoneGap
(you should use phonegap-2.0.0.zip though, see above).
2. Install Ripple Emulator extension for your Chrome browser, using Chrome Store. Enable it.
3. Start your local webserver and run your HTML code of your mobile application through it (testing
through direct file access is mainly possible in Ripple Emulator, but highly not advisable and may
produce unpredictable results).
4. Click Ripple Emulator icon, right to your Chrome omnibar and then click Enable (or select proper
option from context menu, right-clicking page).
5. Accept license agreement and select proper platform (Cordova 2.0.0).
6. Click Ripple Emulator icon again and click Start Ripple Services if they're not started
automatically.
7. Set destination platform (device) and enjoy working PhoneGap application locally.
Version and API differences
You also have to keep your eye for PhoneGap API and carefully check, what was available and how it
was accessible in PhoneGap 2.0.0? For example, simple connection type checking has changed ever
since that. In2.9.0 API it is done via navigator.connection, while in 2.0.0 API it was accessed under
the navigator.network interface.
Since Ripple Emulator uses PhoneGap 2.0.0, currently supported way of calling this object:
var networkState = navigator.connection.type;
will fail. You'll have to use it this way:
var networkState = navigator.network.connection.type;
Though you can select PhoneGap version, when compiling in PhoneGap Build (and you can force it to
use version 2.0.0, though compile this code in an unchanged way), you will most likey want to develop
your application using newest version of PhoneGap.
In this case, you have to use a "secured" approach, that will work in both Ripple and PhoneGap:
var networkState = ((navigator.connection) ? navigator.connection.type :
((navigator.network && navigator.network.connection) ?
navigator.network.connection.type : 'unknown'));
Or you can declare some special variable:
var debugMode = typeof(window.tinyHippos) !== 'undefined';
And use it as a switch:
var networkState = (debugMode) ? navigator.network.connection.type :
navigator.connection.type;
Hopefully, Ripple will be updated soon to newest PhoneGap so we could drop such things away.

Emulating PhoneGap/Cordova Apps in the Desktop Browser
Earlier this month the PhoneGap team held the first PhoneGap day. This was in part to celebrate
the release of PhoneGap 2.0, but more importantly to bring together members of the PhoneGap
community to share and learn from each other. There are great recaps of PhoneGap Day
fromRedMonk, as well as on the PhoneGap blog. One of the new services announced on PhoneGap
Day was emulate.phonegap.com. Emulate.phonegap.com enables an in-browser simulator for
developing and debugging PhoneGap/Cordova applications, complete with Cordova API emulation.
It is built off of the Ripple Emulator, which itself is open source and may even be contributed to the
Apache Cordova project.
Emulate.phonegap.com is built as a Google Chrome Extension, so it requires the Chrome browser.
It also uses the Ripple Operating Environment (another Chrome Extension). Once you have the
dependencies installed you can emulate any site as a PhoneGap/Cordova application by either
going to emulate.phonegap.com and entering the target URL, by launching the emulator from
aright-click -> Emulator -> Enable, or by clicking on the Ripple icon in the Chrome toobar, and
selecting the Enable option.
Once launched, the URL that you want to simulate will be displayed within the Ripple operating
environment view.
Note: This only works with assets that are on a live URL. You can use a local http server with
references to localhost, however the emulator will fail if you try to access your application directly
from the local file system using a file:// URI.
Update: You can enable access to local files by changing a few settings on the Ripple emulator.
See the first comment on this post for additional detail.


(click for full-size image)
The emulator environment gives you the ability to emulate PhoneGap events and API calls, without
having to deploy to a device or run inside of the iOS, Android, Blackberry, or other emulator. Not
only can you simulate the PhoneGap/Cordova API, but you can also use Chromes debugging tools
to test & debug your code complete with breakpoints, memory inspection, and resource
monitoring. This is a handy development configuration. It enables app development within a rich
debugging environment that is familiar, fast & easy to use. This does not replace on-device
debugging however nothing will replace that. On-device debugging is extremely important; this
helps increase your productivity as a developer.
So how do you use this environment? The environment will handle Cordova API requests, and you
can also simulate device events.
First, the Devices panel In this panel you can select a device configuration Everything from
iOS, to Android, to BlackBerry. Changing the device configuration will not only change the physical
dimensions, but will also change Device/OS/user agent settings reported by the application. Here
you can also select the device orientation, which will change the visual area within the simulator.

Within the Platforms panel you can choose the platform you wish to emulate. With respect to
PhoneGap applications, you will want to choose Apache Cordova, and then select the API version
that you are using. By default, it uses PhoneGap 1.0.0, however you can chose Apache Cordova
2.0.0 to get the most recent version. The Ripple emulator also simulates BlackBerry WebWorks
and mobile web configurations as well.

The Information panel shows you information about your current simulator configuration. It shows
the platform, device, simulated OS, user agent etc

The Accelerometer panel can be used to simulate device orientation/accelerometer events. Just
click and drag on the device icon (the gray and black boxes), and the icon will rotate in 3D. As you
drag, accelerometer events will be dispatched and handled within your application. From here, you
can even trigger a shake event.

The Settings panel lets you turn on/off the cross domain policy, adjust the UI color theme, and view
additional data about the Ripple emulator.

The Device & Network Settings panel enables you to simulate and throttle the network connection
type: Ethernet, WIFI, CELL_3G, etc

The Geolocation panel enables you to simulate your geographic position within your
PhoneGap/Cordova application. You can specify a latitude, longitude, altitude, speed, etc You
can even drag the map and use it to specify your geographic position. The position that you set
within the geolocation panel will be reported when using navigator.geolocation.getCurrentLocation().

The Config panel is a graphical representation of your PhoneGap Build Config.xml file. You can
use this to easily view/analyze whats in your application configuration.

The Events panel can be used to simulate PhoneGap specific events, including deviceready,
backbutton, menubutton, online, and offline (among others). Just select the event type, and
click on the Fire Event button.

As I mentioned earlier, this wont replace on-device debugging. It also wont handle execution of
native code for PhoneGap native plugins, however you can test/develop against the JavaScript
interfaces for those native plugins. Emulate.phonegap.com will definitely help with development of
PhoneGap applications in many scenarios, and is a nice complement to the Chrome Developer
Tools.

https://www.youtube.com/watch?v=COWn5O87cC4
http://wpcertification.blogspot.in/2012/05/using-ripple-mobile-browser-emulator.html
http://localhost:3000/liverewardzcustomer/index.html
http://stackoverflow.com/questions/17695875/how-to-use-ripple-emulator-for-windows-to-test-
phonegap-application