/ ionic

Bitrise - Son projet Ionic en intégration continue en 5 min... top !

Bonjour à toutes et tous :) Cela fait pas mal de fois que j'entends parler d'Ionic ces derniers temps, aussi bien chez @PagesJaunes que dans mes échanges avec d'autres entreprises.

Je n'ai jamais développé sur cette techno c'est pourquoi je ne rentrerai pas dans le détail sur le développement d'un projet Ionic, mais plutôt sur comment industrialiser votre projet avec Bitrise.

Le chrono est lancé du coup je ne m'attarde pas voici les éléments indispensables pour que cela marche bien :

  • Un projet sur un repository accessible depuis le net via Github, Bitbucket, Gitlab etc.
  • Un abonnement à Bitrise

Chargement du projet dans Bitrise

Se rendre dans l'interface de Bitrise et dans le dashboard principal cliquez sur + Add new app. Vous arrivez à l'écran de configuration principal.

Indiquez le repository sur lequel se trouve votre projet Ionic.

bitrise-load-from-repo

Le projet se trouve ici

Ensuite vous avez la possibilité de demander une SSH public key si vous avez a accéder à d'autres repos dans votre projet. Ce qui n'est pas mon cas ici.

Le projet passe alors au scanner :

--+---------------------------------------------------------------+----------+
| ✓ | Running project scanner                                       | 11 sec   |
+---+---------------------------------------------------------------+----------+


+------------------------------------------------------------------------------+
|                               bitrise summary                                |
+---+---------------------------------------------------------------+----------+
|   | title                                                         | time (s) |
+---+---------------------------------------------------------------+----------+
| ✓ | Activate App SSH key                                          | 3.18 sec |
+---+---------------------------------------------------------------+----------+
| ✓ | Git Clone Repository                                          | 8.22 sec |
+---+---------------------------------------------------------------+----------+
| Update available: 3.4.3 -> 4.0.8                                             |
+---+---------------------------------------------------------------+----------+
| ✓ | Running project scanner                                       | 11 sec   |
+---+---------------------------------------------------------------+----------+
| Total runtime: 22 sec                                                        |
+------------------------------------------------------------------------------+

bitrise-ionic-detected

Bitrise a bien détecté qu'il s'agissait d'un projet Ionic, jusqu'ici tout va bien.

Choix de la stack

bitrise-ionic-stack

A priori on peut choisir une stack soit dédiée iOS soit Android. Mais avec ce genre de techno j'ai plutôt tendance à croire que ce que l'on souhaite c'est pouvoir générer les deux types d'application. Du coup j'ai choisi un environnement hybrid.

Mise en place d'un webhook

Une chaine d'IC digne de ce nom doit être cablée sur un repository et doit réagir à l'activité du développeur. Pour cela nous allons mettre en place un webhook qui réagira à chaque push de code sur {master}.

bitrise-ionic-webhook

Le webhook va se mettre automatiquement dans Github. Je reviendrais plus tard dans le détail pour expliquer ce qui se passe.

Voila le projet terminé et cablé. Remontez en haut de la page et cliquez sur le bouton Finish en haut à droite (pas très intuitif...).

First run

A l'issue de l'initialisation du projet, un workflow Primary est créé et lancé automatiquement. Ce workflow de base est propre à la nature de votre projet. Il différera selon que l'on ait une application iOS, Android, Ionic ou encore ReactNative. Les outils pour produire un build étant différents.

bitrise-ionic-build-run

Le workflow Ionic

bitrise-ionic-workflow

Activate SSH key (RSA private key)

Git Clone Repository : Clone le projet GIT depuis Github en ce qui nous concerne

Certificate and profile installer : Télécharge et installe le certificat et le provisionning profile

Run npm command : Step pour lancer une commande npm. Par défaut elle va lancer install qui va installer les dépendances du projet.

Generate cordova build configuration : Génère un "build.json" avec les paramètres de signature

Ionic archive : Va préparer les builds pour les plateformes demandées.

Deploy to Bitrise.io - Apps, Logs, Artifacts : Cette step est vraiment sympa, elle propose de récupérer les artifacts (builds et logs) depuis une page chez Bitrise sans déployer sur une store interne ou un store officiel.

Webhook

Rendez vous dans la section code {} de votre projet. Nous allons voir de plus prêt comment se configure le webhook entre Bitrise et Github.

bitrise-code-menu

Deux informations sont importantes ici : APP SLUG et API TOKEN avec l'url déjà construite qui permet de faire notre lien entre le repository et Bitrise.

bitrise-webhook-param-1

Coté Github, il suffit de renseigner l'url

bitrise-webook-github

Et d'indiquer le type d'évènement... Il est possible de faire réagir notre chaine d'IC à preque tous les évènements sur le repository. Par défaut nous allons activer le webhook sur du push de code et la proposition de PR.

bitrise-ionic-webhook-events-1

Je vous entends déjà... Mais comment stipule t-on quel workflow lancer pour tel ou tel évènement... Et là nous retournons sur l'interface de Bitrise dans le dashboard. Cliquez sur "Workflow"

bitrise-ionic-workflow-1

Et aller dans Triggers... C'est ici que vous ferez le lien entre les évènements Github et le déclenchement de vos workflow Bitrise.

bitrise-ionic-triggers

End

J'ai apporté quelques précisions mais clairement la procédure d'importation automatique du projet fonctionne très bien et réalise tous les branchements nécessaires pour travailler en mode IC très rapidement :)

Après c'est comme tout, rentrer dans le détail prendra plus de temps.