Lancer et tester une appli Ionic : les 4 méthodes

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.

Toutes les méthodes permettent d’accéder à un back-end, comme par exemple Spring Boot, durant le développement.
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 :

  1. ouvrir DevTools (touche F12, ou ctrl-shift-i)
  2. sélectionner l’icône mobile
  3. 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.

Avantages
  •  Aucune configuration
  •  Débogage direct dans le navigateur, ex. Chrome DevTools
Inconvénients
  •  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é :

Avantages
  •  Exécution sur le mobile
  •  Jusqu’à 6 appareils connectés
  •  Aucun SDK Android ou iOS à installer
Inconvénients
  •  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

Avantages
  •  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
Inconvénients
  •  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

Avantages
  •  Accès à toutes les fonctions natives, et à l’environnement d’un vrai mobile
  •  Débogage possible avec Chrome > DevTools > Remote devices
Inconvénients
  •  A part l’installation à mettre en place, peu d’inconvénients

 

Laisser un commentaire