Dans cet article


Offres d'emploi

Tags

TUTO – Cordova Tools : Débugger en live un projet Ionic avec Visual Studio Code

TUTO – Cordova Tools : Débugger en live un projet Ionic avec Visual Studio Code

Le déboggage est une étape essentielle lors de la création d’une application mobile et même plus simplement quand on code. Avec Ionic, cela peut être compliqué à mettre en place. C’est pour cela qu’aujourd’hui, nous allons vous montrer comment installer Cordova Tools, un plugin pour l’un de mes IDE préféré : Visual Studio Code.

Dans cet article nous verrons :

  • Les pré-requis pour utiliser Cordova Tools
  • Installation du plugin Cordova Tools
  • La configuration de Cordova Tools pour iOS

Pré-requis pour utiliser Cordova Tools

Pour poursuivre ce tuto, je vais partir de ce projet. Je vous invite à le télécharger, à l’ouvrir avec Visual Studio Code ainsi qu’à supprimer le plugin mobilesdk (sinon, il posera problème par la suite) et ensuite installer les dépendances liées au projet :

npm remove mobilesdk
npm install

Nous allons juste apporter des petites modifications au projet : rajouter la plateforme iOS (c’est un peu long), installer un plugin pour le déploiement iOS et générer l’icône de l’application :

ionic cordova platform add ios --save
ionic cordova resources ios -i

Pour vérifier que tout s’est bien installé, lancer un serveur ionic :

ionic serve

Installation du plugin Cordova Tools

Une fois le projet initialisé, nous allons installer le plugin Cordova Tools pour Visual Studio Code. C’est ce plugin qui va nous permettre de débogguer en live.

Pour cela, rendez vous dans le menu d’extension de Visual Studio Code (1), chercher « Cordova Tools » (2) et installer le (3) :

Installation Cordova tools visual studio code

Ensuite, allez dans le menu « debug » de Visual Studio Code (1), cliquez sur l’écrou de configuration (2) et sélectionnez Cordova (3).

Ouvrir Cordova tools visual studio code

Cela va alors ouvrir le fichier de configuration de Cordova Tools .launch.json (ce fichier est un fichier JSON que vous pouvez retrouver dans le dossier .vs-code à la racine de votre projet).

Vous êtes maintenant en mesure de débogguer en live votre application via le traditionnel Ionic serve ! Pour cela, toujours dans le menu debug, sélectionnez via la liste déroulante « Serve to the browser (ionic serve) » :

Débugger en live un projet Ionic avec Visual Studio Code

Placez un point d’arrêt (par exemple dans la fonction itemTapped() du fichier /src/pages/ionic-native/ionic-native.ts). Cliquez ensuite sur l’icône « play » afin de lancer votre app. Une fois l’app Ionic lancée, allez dans la page « Ionic Native Features » et cliquez sur un élément de la liste. Votre app va alors marquer le point d’arrêt et vous pourrez exécuter des commandes dans la console, faire du pas à pas, etc… :

ionic point d'arret

Voilà ! Vous savez maintenant faire du déboggage avec Visual Studio Code sur votre projet Ionic mais uniquement via votre navigateur.

Malheureusement, de mon côté, le déboggage ne marche pas via un mobile avec l’app Ionic DevApp. Pour aller plus loin (et pour que ça fonctionne via un mobile), nous allons maintenant configurer Cordova Tools pour builder et débogguer directement une application native iOS !

Configurer Cordova Tools pour iOS

Afin de générer un projet iOS via Cordova Tools, un mac avec Xcode est nécéssaire.

Nous avons besoin d’installer les librairies suivantes :

  • usbmuxd
  • ideviceinstaller
  • ios-webkit-debug-proxy
  • libimobiledevice (normalement il est installer avec ideviceinstaller)

Utiliser Homebrew avec les commandes suivantes afin de les installer (si homebrew n’est pas installé, il faudra l’installer) :

brew install --HEAD usbmuxd
brew install --HEAD ideviceinstaller
brew install --HEAD ios-webkit-debug-proxy
brew install --HEAD libimobiledevice

configurer cordova tools ios

Une fois cela effectué, vous pouvez brancher un appareil iOS. Il faut alors aller dans les réglages de celui-ci, dans Safari > Avancé et activer Inspecteur web.

Pour builder votre projet, il faut également que modifier le bundle id de celui-ci. Dans le cas de notre projet, je vous invite à remplacer l’instance ‘com.braga.advancedionic2components.app’ par votre propre bundle id.

Ensuite, lancez le debug avec « Run iOS on device » (via le menu débug).

Et ça fonctionne ! Vous avez réussi à générer un projet iOS natif avec déboggage directement depuis Visual Studio Code !

  • Si vous avez une erreur de « Unable to mount developer disk image », réinstallez les librairies dans l’ordre.
  • Si vous avez une erreur concernant la signature du projet, il faut ouvrir le projet généré dans platforms/ios et rajouter une team pour signer l’application.

Conclusion

Ce plugin pour Visual Studio Code est, pour moi, indispensable avec un projet Ionic. Il permet de rapprocher Ionic du développement du développement Natif en apportant le déboggage , et c’est un bon point, même s’il n’est pas simple à configurer… D’ailleurs, un tuto pour la configuration Android native pourrait vous intéresser ?

L'équipe AXOPEN

Voir aussi les articles suivants

Material design, le pour et le contre…

Material design, le pour et le contre…

Le 15/05/2018 par Jordan Favray

Il y a quelques années, Google a dévoilé sa vision du design et de l’ergonomie. Petit à petit, le géant du web s’est efforcé de l’intégrer dans toutes ses applications grand public. Depuis cette date, il ne se passe pas une semaine sans que nos clients nous demandent d’intégrer cette vision dans leur projet, c’est presque devenu un pré-requis technique : « Mon projet doit être material design » (quoi que ça veuille dire).
Lire l'article

Nos 5 convictions pour le développement d’application mobile
Bonjour à tous ! Aujourd’hui, on s’est réveillé avec l’envie de vous partager nos 5 convictions concernant le développement d’applications mobile, que ce soit sur iOS ou sur Android. En réalisant plusieurs dizaines d’applications par an, on pense avoir acquis maintenant suffisamment d’expérience pour vous donner notre avis sur la question ! Attention, nos convictions sont celles de développeurs, alors il faut les lire telles quelles ! C’est parti 🙂
Lire l'article

Pourquoi avoir un ERP mobile ? Optimisation & Bénéfices
Parlons mobilité, parlons ERP ! Et si l’on rendait mobile une des applications web essentielles de votre entreprise ? Quelles optimisations sont nécessaires pour quels gains ? Les ERP : non adaptés à la mobilité Vous êtes nombreux à être déjà équipés d’ERP dans vos sociétés. Alors, bien que chaque ERP soit différent, ces logiciels regroupent souvent des fonctionnalités similaires, telles que la gestion RH, gestion comptable, gestion des facturations, gestion commerciale, etc.
Lire l'article