Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Testing phonegap apps in the browser with Ripple

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.

like image 526
Matt Hampel Avatar asked Nov 01 '13 15:11

Matt Hampel


4 Answers

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

like image 91
DaveAlden Avatar answered Nov 13 '22 04:11

DaveAlden


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

  1. Download android sdk - http://developer.android.com/sdk/index.html
  2. Unzip folder
  3. Rename folder to adt-bundle
  4. change directories to your home folder. example. cd /home/brian
  5. create a folder named Development
  6. Move adt-bundle to Development example. /home/brian/Development/adt-bundle
  7. export PATH=${PATH}:/home/brian/Development/adt-bundle/sdk/platform-tools:/home/brian/Development/adt-bundle/sdk/tools
  8. sudo apt-get install ant
  9. type android the android sdk window will pop up check api17 and install

  10. sudo apt-get remove nodejs nodejs-dev npm

  11. sudo apt-get install python-software-properties python g++ make
  12. sudo apt-get install software-properties-common
  13. sudo add-apt-repository ppa:chris-lea/node.js
  14. sudo apt-get update
  15. sudo apt-get install nodejs
  16. nodejs -v
  17. npm -v
  18. npm install -g cordova
  19. npm install -g ripple-emulator

  20. cd /home/brian/Development/

  21. cordova create hello "HelloWorld"
  22. cd hello
  23. cordova platform add android
  24. cordova build
  25. cd /home/brian/Development/hello/platforms/android/assets/www
  26. ripple emulate -port 1234
  27. open chrome
  28. navigate to localhost:1234/index.html?enableripple=cordova-2.0.0-Nexus4
  29. Back at the terminal you can press Ctrl+c to kill the server
like image 30
Brian Boyd Avatar answered Nov 13 '22 06:11

Brian Boyd


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

like image 30
fastr.de Avatar answered Nov 13 '22 05:11

fastr.de


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

like image 27
Nathan Prather Avatar answered Nov 13 '22 06:11

Nathan Prather