Testing phonegap apps in the browser with Ripple

Question

What's the proper way to test a PhoneGap app in the browser using Ripple? Is there any configuration I need to do?

I've got a "hello world" app made with PhoneGap and I'd like to test it in the browser instead of firing up a phone emulator for every change. I'm running it on a local webserver. I used http://emulate.phonegap.com to head to the address (eg, localhost:8888/sites/hello/www). The app starts to load, but I get a 404 for phonegap.js. The path it's checking is localhost:8888/sites/hello/www/phonegap.js -- should this be provided by the emulator? Do I need to dig up the file? I'm using the stock hello world app, so I expected the pieces to be in place.

Maybe this helps : http://stackoverflow.com/questions/17695875/how-to-use-ripple-emulator-for-windows-to-test-phonegap-application — Ankit Tyagi, Nov 08 '13 at 05:48
Also some detail about ripple : http://www.raymondcamden.com/index.cfm/2013/2/6/Using-Ripple-for-PhoneGap-Development — Ankit Tyagi, Nov 08 '13 at 05:51

score 14 · Accepted Answer · edited Mar 10 '14 at 14:47

You need to provide phonegap.js for Ripple to work - just insert a script tag in the <head> of your index.html to point at it. Note Ripple will not work properly with Phonegap 3.x, so use the JS from a Phonegap 2.x release - I'm using cordova-2.9.0.js from the Android package. Ripple will only work in Google Chrome.

Incidentally, you can open the index.html file directly in Chrome from the filesystem, without needing a local webserver, if you use the --allow-file-access-from-files option when you start chrome - just add it to the shortcut, e.g. "C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

score 11 · Answer 2 · answered Nov 10 '13 at 15:56

Here's how I setup a machine for development with Cordova. These steps show what needs to be downloaded as well as creating a simple hello world app with the last couple steps launching the ripple emulator to test the app.

Linux Mint 15: How to setup nodejs, npm, Apache Cordova, Ripple, Android SDK for Android Development

References:

Cordova Android Guide: http://cordova.apache.org/docs/en/3.1.0/guide_platforms_android_index.md.html#Android%20Platform%20Guide

NodeJS Guide: https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager

NPM Cordova Guide: https://npmjs.org/package/cordova

Prereqs - folder names and locations are all variables meaning they can be whatever you want

-Must use chrome for ripple emulator

Download android sdk - http://developer.android.com/sdk/index.html
Unzip folder
Rename folder to adt-bundle
change directories to your home folder. example. cd /home/brian
create a folder named Development
Move adt-bundle to Development example. /home/brian/Development/adt-bundle
export PATH=${PATH}:/home/brian/Development/adt-bundle/sdk/platform-tools:/home/brian/Development/adt-bundle/sdk/tools
sudo apt-get install ant
type android the android sdk window will pop up check api17 and install
sudo apt-get remove nodejs nodejs-dev npm
sudo apt-get install python-software-properties python g++ make
sudo apt-get install software-properties-common
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs
nodejs -v
npm -v
npm install -g cordova
npm install -g ripple-emulator
cd /home/brian/Development/
cordova create hello "HelloWorld"
cd hello
cordova platform add android
cordova build
cd /home/brian/Development/hello/platforms/android/assets/www
ripple emulate -port 1234
open chrome
navigate to localhost:1234/index.html?enableripple=cordova-2.0.0-Nexus4
Back at the terminal you can press Ctrl+c to kill the server

To run ripple, you should be in root folder of your project. In my root folder of project, I have hooks, merges, platforms, plugins, .cordova and www folders. And then run command `ripple emulate -port 12345`. It will open your application in your browser (in my case it is chrome:suggestion, make chrome as default browser) — Ramsharan, Mar 09 '14 at 15:56

score 8 · Answer 3 · edited Mar 20 '14 at 20:47

Important: uninstall ripple Chrome-Addon first!!

Solution 1: 'patch it!'

To test your phonegap3 applications in ripple you have to use the latest version (0.9.19) from the apache git repository and patch it with the ripple_phonegap3.patch located at this git-repo. Follow the instructions in the README.md file located in the same repository.

The new version of ripple is not longer a chrome extension. It's now a nodejs/expressjs webserver to support other browsers as well.

Solution 2: 'step-by-step' (only when you use phonegap3 exclusively)

Download ripple

git clone https://git-wip-us.apache.org/repos/asf/incubator-ripple.git

Edit lib/server/emulate/hosted.js

Add lines

    var PG3_SCRIPTTAG_OLD= /<script type="text\/javascript" src="phonegap.js"><\/script>/;
    var PG3_SCRIPTTAG_NEW= '<script type="text/javascript" src="cordova.js"></script>';
    doc = doc.replace(PG3_SCRIPTTAG_OLD, PG3_SCRIPTTAG_NEW);

in function localInjection() between

        var doc = data.replace(HEAD_TAG,
                  '<head>' +
                    '<script>' +
                        BOOTSTRAP_FROM_IFRAME +
                    '</script>');

and

        res.send(doc);

run ./configure
run jake
use bin/riddle

lg

fastrde

The first solution helped. Thanks! – mjaskowski Apr 11 '14 at 15:22 — mjaskowski, Apr 11 '14 at 15:22

score 1 · Answer 4 · answered Nov 10 '13 at 05:53

1

Icenium has a free trial and it's pretty awesome: http://www.icenium.com/

answered Nov 10 '13 at 05:53

Nathan Prather

2,098
1
18
15

Testing phonegap apps in the browser with Ripple

4 Answers4

Solution 1: 'patch it!'

Solution 2: 'step-by-step' (only when you use phonegap3 exclusively)