Quand un bug existe uniquement sur le téléphone

Lorsqu’on développe une application mobile en Cordova, on rencontre souvent des problèmes que l’on ne peut reproduire que sur le téléphone.

Ce qui veut dire que vous allez devoir corriger à l’aveugle un problème puis créer et installer à nouveau l’application et ceci indéfiniment jusqu’à ce que vous ayez corrigé le problème.

Ne supportant pas cette perte de temps, nous avons créé un système qui nous permet de développer sur notre ordinateur, pendant que l’application que nous utilisons sur notre téléphone se recharge instantanément à chaque changement de fichier.

Nous allons vous décrire le système que nous utilisons.

Nous avons créé nos propres scripts de Build Phonegap qui incluent directement ces changements pour tous nos projets.

Mais l’objet de ce post sera de vous expliquer les changements que vous pouvez réaliser, à la main, pour obtenir le même résultat.

Dans cet exemple nous travaillerons sur Cordova avec le Framework Ionic.

Disposer d’une build Wifi

Nous appelons ce système une « build wifi » car l’idée maîtresse est d’avoir une application sur son téléphone, qui va, via le wifi,  contacter le serveur Ionic/Cordova pour lui demander ce qu’elle doit afficher.

Information : En utilisant ce système on peut ainsi bénéficier du livereload.

Etape 1 : Le serveur Web

Pour travailler sur une application hybride, une façon de le démarrer est (par exemple pour Ionic) :

ionic serve --nobrowser --all -c -s

Toutefois, via notre navigateur, nous n’avons pas accès aux plugins cordova. C’est normal car un plugin cordova fait souvent appel a des éléments du téléphone (ex : appareil photo, gyroscope, etc.).

Si notre application mobile contacte ce serveur, il n’y a aucune raison qu’elle puisse, elle aussi, y avoir accès et nous avons bien constaté ce problème.

La solution, c’est d’amener cordova.js et plugins afin que la couche Javascript soit disponible.

Donc dans une premier temps il faut, dans le projet cordova, récupérer les plugins via :

ionic prepare ios
ionic prepare android

Ensuite, il faut rendre ces fichiers disponibles directement dans le www du projet. Ainsi l’application mobile pourra y avoir accès. Voici les commandes pour récupérer les fichiers afin de tester sous IOS :

cp /platforms/ios/platform_www/cordova.js www
cp /platforms/ios/platform_www/cordova_plugins.js www
cp -rf /platforms/ios/platform_www/cordova-js-src www
cp -rf /platforms/ios/platform_www/plugins www

Pour tester avec Android, il suffit de remplacer « ios » par « android » dans les commandes ci-dessus.

A ce stade, nous avons un www qui pourra être accéder par une application.

Il faut maintenant lancer le serveur Ionic/Cordova :

ionic serve -a -b -s -c -l --platform android --nocordovamock

ou

ionic serve -a -b -s -c -l --platform ios --nocordovamock

 

Etape 2 : Préparer l’application mobile

Modification du fichier config.xml
Il faut permettre à l’application mobile de pouvoir accéder, par Wifi, à l’IP de votre serveur Ionic/Cordova.

Pour cela, vous devrez avoir dans votre fichier « config.xml » les lignes suivantes :

<access origin="*" />
<allow-navigation href="*" />

Modification du fichier index.html

Dans votre fichier index.html à la base de votre application mobile (dans www), ajoutez, avant la fermeture de la balise body :

<div id="plici_white_cover" style="position: fixed;    top: 0px;    right: 0px;    z-index: 99999; height:100vh; width:100vw;background-color:white;text-align:center;">
    <br/><br/><br/><br/><br/><br/>
    <input id="plici_button_local" style="display:none;" type="text" value="IP_DU_SERVEUR"/><br/>
    <a id="plici_my_wifi_button"   style="display:none;"data-mybase="http://TOREPLACE:PORT_DU_SERVEUR/index.html?filepath=" href="">Partir en mode Wifi</a><br/>
    <button id="plici_dist_button" style="position: fixed; bottom: 0; right: 0; z-index: 99999;">DIST</button>
    <script>
		document.addEventListener("deviceready", function(){
			jQuery("#plici_my_wifi_button").show();
			jQuery("#plici_button_local").show();
		}, false);
		jQuery("document").ready(function(){
			jQuery("#plici_my_wifi_button").click(function(){
				jQuery("#plici_my_wifi_button").attr("href", jQuery("#plici_my_wifi_button").attr("data-mybase").replace("TOREPLACE", jQuery("#plici_button_local").val())+document.location.href);
				console.log(jQuery("#plici_my_wifi_button").attr("href"));
			});
			jQuery("#plici_dist_button").click(function(){
				jQuery("#plici_white_cover").hide();
			});
		});
	</script>
</div>

Attention, ce code est très très moche et il s’agissait de notre version 0 qui n’avait que pour but de prouver le concept. Il pourrait être écrit de façon beaucoup plus sexy.

En plus, ce code nécessite que vous disposiez de JQuery dans votre application mobile.

Sinon, son utilité est assez simple, il a pour objectif de vous permettre de saisir une adresse IP. Puis, il va rediriger l’application mobile vers ce nouveau serveur.

Si vous voulez utiliser le code ci-dessus, pensez a modifier IP_DU_SERVEUR et PORT_DU_SERVEUR par vos valeurs.

Nous avons aussi positionné un bouton « DIST » permettant de retrouver le fonctionnement « normal » de la build (il enverra vers l’application native).

Maintenant que tout est prêt

Vous devez donc démarrer votre serveur comme expliqué ce-dessus puis créer une build avec le code HTML mentionné.

Si tout se passe bien, l’application démarre et présente un formulaire pour saisir l’IP de votre serveur local.

Une fois l’IP saisie et validé, si tout va bien, vous allez voir votre serveur indiquer qu’il est contacté et qu’il renvoi des pages.

Maintenant, si vous modifiez du code dans votre « www », il sera directement modifié sur votre application mobile car le serveur Ionic inclus directement du LiveReload.

Sans oublier que vous avez accès à toute la couche cordova.

Attention : Si vous installez un nouveau plugin, vous devrez refaire une build. Car un plugin est composé d’une partie JS et d’une partie Native. Ce système amènera bien la partie JS mais pas la partie Native (car elle est incluse ou non au moment de votre build).