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.
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
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
type android the android sdk window will pop up check api17 and install
sudo apt-get remove nodejs nodejs-dev npm
npm install -g ripple-emulator
cd /home/brian/Development/
Important: uninstall ripple Chrome-Addon first!!
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.
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);
./configure
jake
bin/riddle
lg
fastrde
Icenium has a free trial and it's pretty awesome: http://www.icenium.com/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With