web-dev-qa-db-fra.com

Comment utiliser Ripple Emulator pour Windows pour tester l'application PhoneGap?

L'émulateur Ripple peut-il être utilisé pour tester l'application PhoneGap sous Windows?

Soit je fais quelque chose de vraiment mauvais, soit Ripple ne fonctionne pas du tout dans un tel environnement.

J'ai installé l'extension Ripple Emulator pour Chrome de Chrome Store. J'ai navigué Chrome vers mon application mobile (servie localement via XAMPP). J'ai cliqué sur l'icône Ripple à côté de Chrome omnibar et cliqué sur Enable dans la fenêtre ouverte. J'ai sélectionné la plate-forme appropriée (Cordova 2.0).

Mon application a été rechargée en apparence mobile, simulant un appareil mobile. Ripple n'a pas pu lire ma configuration depuis config.xml fichier, mais c'est un bogue bien connu (signalé ici et ici ). J'espère que ce n'est pas un problème qui m'empêche d'utiliser Ripple du tout?

J'ai sélectionné mon appareil (Samsung Nexus) et commencer à tester mon appareil mobile. Même le premier appel à PhoneGap API a échoué. J'ai essayé la boussole, mais je n'ai eu que Cannot call method 'watchHeading' of undefined.

Comment un objet PhoneGap de base peut-il être indéfini? Qu'est-ce que je rate? Puis-je tester l'application PhoneGap sous Windows dans Chrome avec Ripple Emulator ou amy me manque-t-il l'idée complète de ce qu'est Ripple?

J'ai essayé de m'aider avec la documentation de Ripple, mais le chapitre " Activer l'émulateur Ripple " est une ordure complète. Je n'ai même pas le moindre signe de Start Ripple Services option dans l'icône Ripple (uniquement Enable et Disable) et lorsque je clique sur Enable il n'y a aucun signe de l'accord de licence, que je pourrais revoir et accepter. J'ai l'impression que ce document parle de quelque chose de complètement différent de celui que j'utilise.

Comment utiliser Ripple dans Chrome pour tester l'application PhoneGap? Qu'est-ce qui me manque?

cordovaripple
22
trejder

tl; dr: Contrairement à ce qui est dit dans les documents de PGB, vous devez conservez une copie du fichier cordova.js dans le répertoire racine de votre application et ce fichier doit provenir exactement de la version 2.0 de PhoneGap, car la dernière version de Ripple Emulator ne fonctionne ni avec une autre version ni sans ce fichier.

Solution

Je développe mes applications PhoneGap à l'aide de PhoneGap Build, et non de l'environnement PhoneGap local. Ainsi - comme cela m'a été demandé - j'ai supprimé le fichier phonegap.js De la racine Web de mon application et n'ai laissé que la référence dans index.html. C'est très bien pour PhoneGap Build, mais absolument pas bien pour Ripple Emulator.

Depuis que j'ai remis ce fichier (en fait cordova.js À partir du dossier lib\Android\example\assets\www\ À partir de phonegap-2.0.0.Zip J'ai réussi à voir la licence, à démarrer Ripple Services et à tester l'application PhoneGap locale.

Remarque pour les personnes aux prises avec un problème similaire: la version actuelle de Ripple Emulator utilise Cordova 2.0. Assurez-vous que vous téléchargez la bonne version de PhoneGap et que vous en prenez cordova.js! N'essayez pas d'utiliser cordova.js À partir d'une version plus récente (actuellement 3.0.0), Car vous pourriez rencontrer des situations indétectables, notamment en voyant de nombreuses étranges alert() et même raccrocher Chrome surchargé.

Assurez-vous toujours que vous utilisez la version du fichier JS de PhoneGap, qui correspond à celle derrière Ripple.

Pas à pas

Étapes clés pour pouvoir tester l'application PhoneGap sous Windows, en utilisant Chrome et Ripple Emulator:

  1. Remettez le fichier cordova.js À la racine de votre dossier et vérifiez sa référence. Vous pouvez le récupérer à partir du dossier lib\Android\example\assets\www\ De n'importe quelle version téléchargeable de PhoneGap (vous devez cependant utiliser phonegap-2.0.0.Zip, Voir ci-dessus).

  2. Installez l'extension Ripple Emulator Pour votre navigateur Chrome, en utilisant Chrome Store. Activez-le.

  3. Démarrez votre serveur Web local et exécutez-y le code HTML de votre application mobile (le test par accès direct aux fichiers est principalement possible dans Ripple Emulator, mais il est fortement déconseillé et peut produire des résultats imprévisibles).

  4. Cliquez sur l'icône Émulateur d'ondulation, à droite de votre Chrome omnibar, puis cliquez sur Enable (ou sélectionnez l'option appropriée dans le menu contextuel, page de clic droit).

  5. Acceptez le contrat de licence et sélectionnez la plate-forme appropriée (Cordova 2.0.0).

  6. Cliquez à nouveau sur l'icône d'émulation d'ondulation et cliquez sur Start Ripple Services S'ils ne sont pas démarrés automatiquement.

  7. Définissez la plate-forme de destination (appareil) et profitez de l'application PhoneGap qui fonctionne localement.

Différences de version et d'API

Vous devez également garder un œil sur PhoneGap API et vérifier attentivement ce qui était disponible et comment il était accessible dans PhoneGap 2.0.0. Par exemple, la simple vérification du type de connexion a changé depuis. Dans 2.9.0 API cela se fait via navigator.connection, Tandis que dans 2.0.0 API il était accessible sous l'interface navigator.network.

Étant donné que Ripple Emulator utilise PhoneGap 2.0.0, méthode actuellement prise en charge pour appeler cet objet:

var networkState = navigator.connection.type;

échouera. Vous devrez l'utiliser de cette façon:

var networkState = navigator.network.connection.type;

Bien que vous puissiez sélectionner la version de PhoneGap, lors de la compilation dans PhoneGap Build (et vous pouvez le forcer à utiliser la version 2.0.0, bien que vous compiliez ce code de manière inchangée), vous voudrez surtout développer votre application en utilisant la dernière version de PhoneGap.

Dans ce cas, vous devez utiliser une approche "sécurisée", qui fonctionnera à la fois dans Ripple et PhoneGap:

var networkState = ((navigator.connection) ? navigator.connection.type : ((navigator.network && navigator.network.connection) ? navigator.network.connection.type : 'unknown'));

Ou vous pouvez déclarer une variable spéciale:

var debugMode = typeof(window.tinyHippos) !== 'undefined';

Et utilisez-le comme interrupteur:

var networkState = (debugMode) ? navigator.network.connection.type : navigator.connection.type;

Espérons que Ripple sera bientôt mis à jour vers le plus récent PhoneGap afin que nous puissions supprimer de telles choses.

29
trejder

Ripple devrait fonctionner avec les dernières versions de Phonegap, bien que vous puissiez obtenir quelques messages d'erreur parasites qui apparaissent pendant le chargement de la page, car Ripple n'est pas tout à fait à jour avec les dernières versions de Phonegap. Assurez-vous d'avoir inclus le Phonegap JS dans votre page. Essayez l'exemple suivant - cela fonctionne bien pour moi dans Ripple:

<html>
    <head>
        <script type="text/javascript" charset="utf-8" src="cordova-2.8.0.js"></script>
        <script type="text/javascript">
        function deviceready() {
            console.log("Device ready");
            navigator.compass.watchHeading(function(heading){
                document.getElementById("heading").innerHTML = heading.trueHeading;
            },function(error){
                var errorType;
                switch(error.code){
                    case CompassError.COMPASS_NOT_SUPPORTED:
                        errorType = "Compass not supported";
                        break;
                    case CompassError.COMPASS_INTERNAL_ERR:
                        errorType = "Compass internal error";
                        break;
                    default:
                        errorType = "Unknown compass error";
                }
                document.getElementById("heading").innerHTML = errorType;
            });
        }
        document.addEventListener("deviceready", deviceready, true);
        </script>
    </head>
    <body>
        <h1>Test</h1>
        <p>Heading: <span id="heading"></span></p>
    </body>
</html>
1
DaveAlden