Le framework Ionic vous permet de construire des applications mobiles cross-platformes avec les technologies du WEB (bien que tout le monde le sait, cela est voué à disparaitre #troll). La mise en place de l'environnement de travail est très bien documenté et nous verrons dans cet article comment mettre en place une build automatisée avec VSTS dans un agent Hosted.

J'ai pour habitude, lorsque je travaille sur une technologie fiable, éprouvée performante et robuste telle que Xamarin (mais cela serait vrai aussi avec du ReactNative comme Jérôme) de faire mes builds directement avec AppCenter (qui a des fonctionnalités vraiment sympa pour pousser vos packages sur les Stores directement). Cela se fait en 2 / 3 clics directement mais ce n'est pas (encore ?) possible pour des applications Cordova (basées sur Ionic ou pas). La solution est donc de faire faire la build par VSTS et de pousser les packages sur AppCenter.

TL;DR;

1. Installer l'extension VSTS Cordova,
2. Lancer un npm install,
3. Utiliser les commandes Ionic pour générer le projet natif,
4. Bien configurer les options de signature ios...,
5. Builder le projet Cordova avec l'extension susnommée,
6. [Android] Copier les APK dans le répertoire de staging
7. Utiliser l'agent de build MAC !

Installer la tâche de build Cordova

Il existe déjà une tâche VSTS complétement fonctionnelle et développée par Microsoft : https://marketplace.visualstudio.com/items?itemName=ms-vsclient.cordova-extension. Si cela vous intéresse le code-source est disponible avec sa documentation : https://github.com/Microsoft/vsts-cordova-tasks.

Je vous invite donc à l'installer sur votre souscription VSTS en cliquant sur le joli bouton "get it free".

Dans la suite de l'article nous ferons une build ios.

Lancer npm install

La toute première étape est de s'assurer d'avoir installé tous le scripts nodes js correctement en ajoutant une tâche npm install au tout début de votre process. 

Utiliser les commandes Ionic 

L'extension Corodova permet donc de compiler un projet Cordova mais surtout elle ajoute la possibilité d'exécuter des commandes de la CLI Ionic. 

C'est donc ce que nous allons faire en 2 étapes : ajouter la plateforme ciblée par notre build au projet et préparer le projet pour générer le projet "natif" à partir du code source ionic.

Ajoutons donc une tâche "Ionic Command" pour exécuter l'équivalent "ionic cordova platform add ios" sur le code source. Assez évidemment, cela ajoute une version "ios" de votre application à votre application ionic. Cela peut prendre quelques minutes à s'éxecuter.

On ne renseigne pas la version de Cordova ni la version de Ionic (il s'agit des versions des CLI dans ce formulaire) pour prendre les dernières versions compatibles. 

Ensuite on demandera à ionic de générer un projet Cordova ionic pour embarquer l'application avec la commande "ionic cordova prepare ios".

Builder le projet Cordova avec l'extension

On va maintenant configurer la compilation de la version cordova de votre application native.

Il s'agit ici de spécifier :

• Que l'on souhaite builder pour ios dans le champ platform. On aurait pu mettre android ou même, soyons foufous, windows et wp8.
• Le mode de build souhaité : on peut renseigner release ou debug (valeur par défaut). J'ai choisi ici de mettre une variable $(BuildConfiguration) pour pouvoir modifier la configuration si je le souhaite au moment de lancer une build.
• Je force la version de Cordova en 7.1.0 car je n'ai pas réussi à faire fonctionner la build sur la dernière release...
• Dans la zone "advanced", renseigner le répertoire de sortie. Dans mon cas, je spécifie "$(Build.ArtifactStagingDirectory)" pour les mettre dans le dossier de staging.

Signer le package ios correctement

Une des fonctionnalités super, super, vraiment super, cool de l'extension est la possibilité d'installer un certificat et un provisionning profile sur la machine de build. Je ne vais pas rentrer dans les explications de ces 2 objets mais ils sont obligatoire pour une application ios et c'est souvent la partie la plus fastidieuse du développement ios :)

La configuration se passe depuis la zone "iOS" de la tâche de build Cordova. On va fournir un certificat au format p12 (passer depuis le keychain access sur un MAC et click-droit > exporter pour l'obtenir) et un provisionning profile (associé à ce même certificat). Ces 2 objets doivent être disponibles dans votre controleur de code-source. Une option permet de désinstaller ces 2 objets de votre agent dans le cas ou vous en utilisez un "on-premise" ce qui n'est pas nécessaire dans notre cas. Il faudra bien sûr fournir le mot-de-passe du certificat et vous pouvez le faire via une variable de build correctement protégée des yeux indiscrets :)

Utiliser l'agent de build MAC

Théoriquement cela devrait marcher sans soucis sur un agent de build Windows mais j'ai perdu 2 jours à essayer de faire fonctionner : problème de versions, certains outils manquants, obliger de modifier la variable d'environnement PATH à l'aide de scripts, etc... La solution de la dernière chance (ce qu'on fait en dernier recours sans vraiment y croire comme manger des légumes pour perdre du poids) est celle qui a fonctionné : utiliser l'agent de build MacOS (encore en preview) pour éxecuter votre build. La valeur par défaut de votre build est configurable en sélectionnant le "Process" sur l'écran de configuration des tâches de la build.

Et Android ?

Vous allez me dire : pourquoi se préoccuper d'une plateforme qui ne représente que 80% du marché des smartphones ? Mais bon soyons puristes et poussons notre article jusqu'au bout.  

La configuration de base pour Android est calquée sur celle d'ios : remplacez simplement les notions d'ios par "android" dans les différentes commandes ionic. Pour la signature du package, il suffit de fournir le fichier keystore au lieu de certificats mais le principe est le même.

Une fois cela fait, vos builds vont se faire sans aucun problème. Seul hic : il n'y aura aucun APK en sortie... Je pense que l'extension Cordova se mélange les pinceaux et ne vas pas chercher les éléments aux bons endroits. La solution consiste à rajouter une tâche "Copy files" pour aller mettre tous les petits APK générés dans le dossier de staging final.

Il ne faut donc pas oublier 

Petit rappel des choses à ne pas oublier :

• Forcer la version 7.1.0 de Cordova dans la tâche de compilation.
• Utiliser l'agent de build MacOS.
• De bien aller faire du sport et manger des légumes.

Happy coding !