Actacenter Blog

Ionic debug avec Virtualbox

Lorsque l’on réalise une application mobile Ionic on est très vite confronté au débogage de l’application. Il existe plusieurs façons de faire selon les besoins.

Utiliser le navigateur web. C’est la façon la plus simple de lancer votre application ionic serve -lc. Cette méthode a le gros inconvéniant de ne pas pouvoir tester les fonctionnalités particulières de l’appareil sur lequel on l’installe. On ne peut par exemple pas tester la caméra, l’accéléromètre, les fonctions liées au chargement de la batterie etc.. Bref tout ce que l’on trouve sur un téléphone ou une tablette faisant tourner un Android ou un iOs.

Installer la plateforme browser qui permet de tester les plugins cordova (donc les fonctionnalités particulières aux mobiles). On lance l’installation par ionic platform add browser et on exécute l’émulation par ionic run browser. Simplement ionic run si on n’a qu’une seule plateforme installée. Mais là aussi on a deux inconvéniants. D’une part tous les plugins cordova/phonegaps ne sont pas gérés (la plupart le sont). On peut voir la liste des plugins compatibles sur le Dépot des plugins cordova en faisant un tri sur Browser. D’autre part on n’a pas de livereload. À savoir si on modifie le code source, l’application ne se met pas à jour automatiquement. (En fait c’est possible mais cela fait l’objet d’un nouveau tutoriel)

Tester votre application mobile sur un terminal réel (tablette, téléphone…). Je ne détaillerais pas ici l’installation qui est décrite par ailleurs sur la toile. On lance l’application sur l’appareil connecté simplement par ionic run platform ou platform est le système (android, ios, windows phone…). Premier inconvéniant en utilisant votre téléphone si on vous appelle ce n’est pas pratique. De plus pas de livereload possilble. Il faut relancer la procédure de construction de l’application (build)et d’installation sur le terminal à chaque modification.

Enfin vous pouvez utiliser un émulateur que ce soit pour android ou iOs. On crée l’application avec ionic build platform et on exécute l’émulation par ionic emulate platform Là aussi je vous laisse vous informer sur la procédure d’installation.

Après avoir passé en revue ces différentes méthodes nous allons améliorer la technique d’émulation et apprendre à déboguer une application. Cette méthode ne fonctionne que pour Android car je ne me suis pas penché sur les autres plateformes. Pourquoi améliorer ? Tout simplement parceque l’émulation Android est très lente en utilisant le sdk android. Il vaut donc mieux utiliser une image Virtualbox d’un système Android et l’ensemble fonctionnera bien plus rapidement.
Téléchargez et installez le Android sdk. Attention le sdk fourni avec Android Studio ne fonctionne pas. Il faut installer la version originale du sdk ici par exemple : Android Sdk
Téléchargez et installez Virtualbox si ce n’est déjà fait. Allez sur le site osbox.org et téléchargez le système Android de votre choix (vous avez à peu près toutes les versions). Dézippez le et vous aurez une image disque pour Virtualbox. (Bien sélectionner Virtualbox et pas Vmware au téléchargement.)
Dans Virtualbox vous créez une nouvelle machine virtuelle Type Linux/ Version Other linux 32 bits ou 64bits. Selon ce qui est spécifié dans le nom du disque téléchargé. Pour la mémoire en version Nougat j’ai mis 2Go. Ensuite pour le disque vous sélectionnez l’option ‘Utiliser un disque virtuel’ et vous allez chercher le disque que vous venez de dézipper. (1) et (2)

Une fois votre machine virtuelle créée vous pouvez la démarrer et si tout s’est bien passé vous obtenez un système Android opérationnel.

Pour la souris si elle n’est pas accessible il faut l’activer en cliquant sur Entrée > Intégration de la souris. Aller aussi dans Settings > Display > Sleep > et choisissez “Never time out”. Sinon à la mise en veille de l’écran le système ne redémarrera pas. On peut utiliser la commande Machine > Extinction par Apci mais la commande est capricieuse.

Il nous faut maintenant éteindre la machine virtuelle pour pouvoir configurer le réseau en mode bridge. C’est un point important pour la suite de l’installation. Clic droit sur la machine virtuelle Configuration > Réseau > Mode d’accés réseau et choisir Accés par pont. J’en ai profité pour passer les cpu au nombre de deux (faites de même si votre ordinateur posséde un processeur qui supporte la virtualisation matérielle). Mais 1Go de ram et 1 cpu devrais aussi fonctionner.

Nous y sommes tout est installé. On démarre notre machine virtuelle android. Il nous faut récupérer son adresse réseau. Pour cela on ouvre apps > Terminal Emulator et on tape la commande ifconfig) on regarde sous eth0 et on voit l’adresse ip ici inet addr : 192.168.0.33 (Adresse ip Virtualbox.

On ouvre un terminal de commandes (cmd) et on lance les commandes suivantes :
adb kill-server
adb connect 192.168.0.33:5555

et nous recevons quelque chose comme ça

            * daemon not running. starting it now *
            * daemon started successfully *
            connected to <Virtualbox IP address>:5555

Dans votre application Ionic il ne vous reste plus qu’à lancer ionic run Vous remarquez qu’elle s’installe sur la machine virtuelle et qu’elle a bien démarée sur notre adresse ip Virtualbox.