Tester son application mobile

Depuis votre navigateur

C'est la manière la plus simple pour tester votre application et comme nous l'avons il suffit de saisir la commande "serve" pour lancer votre application mobile dans un navigateur :

$ ionic serve -lc

Pour information :

  • l : ce paramètre permet d'afficher votre application dans le mode lab, avec la possibilité de switcher entre les vues Android, iOS ou d'avoir les deux en même temps
  • c : permet d'afficher les logs depuis la console (terminal)

Depuis Ionic Dev App

C'est sûrement l'une de mes méthodes préférées. Grâce à cette application vous allez pouvoir tester votre application en temps réel. En effet, en lançant simplement la commande ionic serve -c, l'application Ionic Dev App vous permet ensuite de visualiser votre propre application, et tester ainsi tout un ensemble de composants natifs.

Seule condition, il faut que votre ordinateur soit connecté au même réseau que votre smartphone.

L'avantage de cette application par rapport à Ionic view est que vous n'avez pas besoin de pusher vos développement sur Ionic PRO. Il vous suffit simplement de redémarrer votre instance en local pour voir les changements s'appliquer sur Ionic Dev app.
Ionic Dev App au chargement Une fois l'application détectée

Depuis l'émulateur

Pour lancer votre application depuis un émulateur, il suffit de lancer la commande suivante

$ ionic cordova run android # ou 'ios' si vous ciblez cette plateforme et êtes sous Mac

La commande va d'abord vérifier si un appareil mobile est connecté à l'ordinateur (voir partie suivante), avant de lancer l'émulateur par défaut.

Depuis votre appareil mobile

Commencez par brancher votre appareil mobile à l'aide d'un câble usb. Il faut ensuite modifier un peu la configuration de votre smartphone pour qu'il puisse communiquer avec votre ordinateur.

Android

Sur Android, il faut tout d'abord passer votre appareil en mode développeur. Pour ce faire, rien de plus simple il suffit d'aller dans :

Paramètres > A propos du téléphone > Informations sur le logiciel

Appuyez ensuite plusieurs fois sur le Numéro de version jusqu'à ce qu'un message vous indique que vous êtes désormais en mode développeur.

Une fois le mode développeur activé, il vous suffit d'aller dans :

Paramètres > Options de développement > Débogage USB

Puis, activez le débogage USB.

Un message s'affichera pour vous demander de valider cette autorisation. Appuyez sur OK pour confirmer cette action.

J'ai effectué ces modifications depuis un Samsung Galaxy A5, mais les noms de menus restent à peu près les mêmes.

Il vous suffit ensuite de lancer la commande suivante et d'attendre bien patiemment le lancement (quelques secondes) :

$ ionic cordova run android


Built the following apk(s):
    ./platforms/android/app/build/outputs/apk/debug/app-debug.apk

ANDROID_HOME=/opt/android-sdk
JAVA_HOME=/usr/lib/jvm/default-java
No target specified, deploying to device '330045dab57053bf'.

none
Skipping build...

Built the following apk(s):
    ./platforms/android/app/build/outputs/apk/debug/app-debug.apk

Using apk: ./platforms/android/app/build/outputs/apk/debug/app-debug.apk

Package name: fr.duckcoin.mobile

LAUNCH SUCCESS

[OK] Your app has been deployed.
     Did you know you can live-reload changes from your app with --livereload?

Une fois que vous avez démarré votre, il est possible de la visualiser en même temps depuis votre navigateur Google Chrome. Pratique lorsque l'on se rend compte qu'un bug, qui n'apparaissait pas durant les tests sur le web, apparait subitement lorsque l'on passe sur mobile. On est pas toujours à l'abri de ce genre d'écart en les tests en local et ceux effectués sur une machine réelle.

Dans Chrome, ouvrez l'inspecteur (F12), puis cliquez sur le menu avec les trois petits point verticaux en haut à droite (voir image ci-dessous) et allez dans More tools > Remote devices

Sélectionnez votre appareil mobile et cliquez sur Inspect pour visualiser votre application

iOS

Il est également possible de tester votre application depuis votre smarphone iOS.

Il vous suffit de lancer votre projet depuis Xcode de la manière suivante :

$ open platforms/ios/Votre_Appli.xcodeproj

Si vous n'avez pas encore ajouté iOS comme plateforme cible, il n y aura pas de dossier platform/ios. Il vous suffira, pour l'avoir , de lancer la commane suivante :

$ ionic cordova platform add ios

Une fois votre projet ouvert dabs Xcode, connectez votre iPhone à votre Mac et acceptez de faire confiance à votre ordinateur si demandé. Puis à droite du bouton play, choissiez à partir de quelle appareil votre application sera lancée.

Par défaut, ce sont les emulateurs qui s'affichent, mais en cliquant sur la liste des devices, vous pourrez sélectionner votre appareil mobile fraichement connecté en USB.

Une fois la connection effectuée, il ne vous restera plus qu'à cliquer sur le bouton play pour démarrer vos tests ou alors de lancer la commande suivante :

$ ionic cordova run ios --device