Disposer de cet environnement est très utile pour accéder à l’émulateur de mobile, ainsi qu’à un vrai mobile pour y exécuter une application Ionic en cours de développement.
Installer Cordova
Cordova permet d’ajouter, à une application Ionic, une couche native Android pour qu’elle puisse s’exécuter sur un émulateur ou un vrai mobile (Android ou iOS).
Son installation est très simple, il suffit de lancer la ligne de commande :
npm i -g cordova
Installer Android Studio
Installer Android Studio permet d’accéder à l’émulateur ou à un vrai mobile. C’est un fait un IDE pour développer du code natif (et non du code Ionic), mais il apporte tous les outils (dont le SDK) pour créer des images de mobile, et gérer la connexion avec un vrai mobile Android.
Télécharger Android Studio sur le site officiel, et l’installer.
Intel HAXM peut être également installé pour accélerer l’émulateur.
Dans Android Studio, les options du SDK se règlent dans Appearance & Behavior > System Settings > Android SDK.
Les options utiles pour démarrer sont les suivantes :
Pour exécution sur « vrai » mobile
Configurer le mobile
Afin de pouvoir faire communiquer le PC avec le mobile, il faut :
- Activer sur le mobile le mode « Développeur ».
- Aller dans les Paramètres, puis A propos du téléphone, tout en bas de la liste.
- Sur l’élément Numéro de build, tapper 7 fois.
- Revenir dans les Paramètres, puis aller dans Options développeur.
- Activer le Déboggage USB.
- Bien sûr, relier au PC avec un câble USB
- Si besoin, installer sur le PC le driver spécifique à votre mobile (ex. « Motorola Device Manager »)
Vérifier dans Android Studio
Pour s’assurer que PC et mobile communiquent bien, et avant de faire intervenir Cordova, on peut faire un test en créant rapidement une application dans Android Studio :
- Créer un Nouveau Projet Android Studio.
Laisser toutes les options par défaut, sauf la dernière où vous choisirez Basic Activity. - Mobile branché, lancer l’exécution avec le bouton « flèche verte ».
- Confirmer l’alerte de sécurité sur le mobile.
C’est tout, l’application doit s’afficher sur le mobile.
Si l’application ne s’affiche pas sur le mobile :
Dans votre-dossier-utilisateur\AppData\Local\Android\Sdk\platform-tools, lancer : adb devices -l
- Si votre mobile n’apparaît pas dans la liste, débrancher / rebrancher le câble.
- S’il apparaît, mais avec la mention “unauthorized”, et qu’il n’y a pas eu d’alerte sécurité sur le mobile, lancer : adb kill-server
Lancer l’application Ionic
Nous allons enfin pouvoir exécuter l’application Ionic sur le mobile, en lançant :
ionic cordova run android --device
Houra !
Pour exécution sur l’émulateur
Configurer l’émulateur
L’émulateur Android utilise des « images » correspondant au modèle du mobile émulé. Leur nom de code est AVD (Android Virtual Device). Il faut donc utiliser un AVD existant, ou en créer un nouveau, avant de pouvoir lancer l’émulateur.
- Dans Android Studio, dans la barre d’outils en haut, cliquer sur le bouton AVD Manager :
- Dans la fenêtre qui s’ouvre, cliquer en bas Create Virtual Device :
- Choisir un modèle de mobile :
- Sur la première entrée « recommandée », télécharger l’image système :
- Lancer l’émulateur :
Enfin, l’émulateur s’ouvre, sur lequel vous allez pouvoir exécuter votre application Ionic !
Vous pouvez faire un premier test rapide, comme dans la section Pour exécution sur « vrai » mobile > Vérifier dans Android Studio, en lançant une application vierge créée dans Android Studio.
Pour plus de détails voir la documentation sur les AVD dans Android Studio.
Lancer l’application Ionic
Pour exécuter l’application Ionic sur l’émulateur, lancer :
ionic cordova emulate android --livereload --consolelogs