Pour lancer une application Ionic en cours de développement, et tester les modifications, plusieurs méthodes sont possibles. La plus simple utilise le navigateur, une autre un émulateur, et deux autres le vrai mobile.
Depuis l’application Ionic, il suffit d’appeler le serveur avec l’adresse IP du PC (ex.
192.168.x.x
).Méthode 1 : navigateur
C’est instantané, il suffit de lancer ionic serve.
L’application s’ouvre alors dans le navigateur par défaut. Dans Chrome, il suffit de :
- ouvrir DevTools (touche F12, ou ctrl-shift-i)
- sélectionner l’icône mobile
- sélectionner le modèle du mobile
Voilà, l’appli s’affiche avec un comportement proche du mobile, et le live-reload activé par défaut.
- Aucune configuration
- Débogage direct dans le navigateur, ex. Chrome DevTools
- Pas de fonctions natives du mobile
- Nécessite de temps un temps un vrai test sur mobile
Méthode 2 : mobile, avec DevApp
C’est la méthode la plus facile pour tester sur mobile : il suffit d’installer l’appli Ionic DevApp sur le mobile, et d’être sur le même réseau WiFi que le PC.
Lancer ionic serve, DevApp détecte l’exécution de l’appli Ionic et l’affiche, avec le live-reload activé :
- Exécution sur le mobile
- Jusqu’à 6 appareils connectés
- Aucun SDK Android ou iOS à installer
- Exécution dans la surcouche DevApp, donc :
– pas accès à toutes les fonctions natives
– pas de débogage (depuis Chrome DevTools > Remote devices par ex.) - Nécessite de temps un temps un vrai test sur mobile, hors de DevApp
Méthode 3 : émulateur, avec Cordova / SDK Android
Cette méthode, tout comme la 4e, sont un peu plus complexes à mettre en œuvre.
Voir l’article dédié à l’installation de l’environnement Cordova, Android Studio et SDK Android.
Une fois un AVD lancé avec Android Studio, taper la commande :
ionic cordova emulate android --livereload --consolelogs
- Se rapproche d’un vrai mobile (émulation des fonctions natives, et de l’environnement d’un mobile)
- Débogage possible avec Chrome > DevTools > Remote devices
- Sur certains PCs, peut être lent et instable
- Nécessite de temps un temps un vrai test sur mobile
Méthode 4 : mobile, avec Cordova / SDK Android
Également assez complexe à mettre en œuvre, elle nécessite aussi de configurer une plate-forme Cordova, Android Studio et SDK Android.
Une fois votre mobile relié au PC, lancer :
ionic cordova run android --device --livereload --consolelogs
- Accès à toutes les fonctions natives, et à l’environnement d’un vrai mobile
- Débogage possible avec Chrome > DevTools > Remote devices
- A part l’installation à mettre en place, peu d’inconvénients