Flutter + Azure DevOps = 💙

Comme vous le savez sûrement, Flutter est un Framework de Google permettant de créer de superbes applications compilées de manière native pour mobile, web et desktop à partir d’un unique code de base.

Si vous ne maîtrisez pas encore Flutter, je vous invite à retrouver l’article de Mathias “Démarrer un projet Flutter en venant de Xamarin” qui vous donne quelques infos si vous êtes développeur Xamarin et que vous souhaitez passer à Flutter.

Pourquoi utiliser Azure DevOps ?

C’est une excellente question à laquelle je vais tenter de répondre. Chez Cellenza nous avons pleinement adopté cet outil qui permet de gérer tous les aspects du cycle de vie d’un projet agile, comme : la gestion du code source, la gestion de projet, le DevOps, les tests, la connexion avec les services tiers, etc.

Avant de commencer, j’aimerais préciser que dans cet article je vais créer des yaml-pipelines, si ça vous ne parle pas, je vous invite à lire l’article « Introduction à Yaml pipeline ».

Il existe une extension Azure DevOps pour Flutter que je n’utiliserai pas mais que vous pourrez retrouver sur la Market Place Visual Studio. Nous utiliserons uniquement les lignes de commandes, en mode hardcore 🤘.

Get started !

Pour commencer, il vous faut créer un fichier qui va contenir le code du pipeline. Vous pouvez en créer un directement au moment de la création d’un pipeline ou en l’ajoutant à la main.

Passons sur Azure DevOps à présent, on va ajouter un nouveau pipeline, pour cela direction la section « Pipelines ». Créez un pipeline en suivant les 4 étapes pour obtenir le code source à partir du repository approprié. Azure DevOps créera automatiquement un nouveau fichier « azure-pipelines.yml » à la racine du dossier de votre projet ou proposera de sélectionner un fichier . yml déjà existant.

Dans cet article nous compilerons uniquement pour les plateformes Android et iOS. Pour atteindre notre objectif nous utiliserons donc des agents fournis par Azure DevOps. Je vais commencer par créer 2 jobs : l’un pour build iOS, l’autre pour Android. L’avantage d’avoir un job par plateforme est que pour chacun d’entre eux il est possible de choisir un agent dédié par OS. Donc pour Android on utilisera un agent ubuntu, et pour iOS – macOS.

Configuration du SDK

La prochaine étape est la configuration du SDK. Bonne nouvelle, l’installation du SDK Flutter est possible depuis n’importe quels types d’OS. Il nous suffit simplement de récupérer le repo Flutter qui se trouve sur GitHub. Commençons par ajouter une commande « bash » dans chaque job, que nous avons créé précédemment.

Génération du pack d’application iOs

Après avoir récupéré le code source de Flutter, il faut remettre à jour le PATH variable pour ensuite utiliser le mot clef « flutter ».

Pour iOS, deux étapes supplémentaires seront nécessaires. La première consiste à installer le provisioning profile, la seconde à installer un certificat de distribution. Ces deux étapes vous permettront de générer un package d’application iOS. Ces deux éléments doivent être ajoutés dans le Secure File de telle sorte que le pipeline puisse y avoir accès lors de la build.

Maintenant que la préparation est faite on peut procéder à la génération des packages. Je vais lancer la build en exécutant des commande bash pour iOS :

Et pour Android :

Vous pouvez constater que j’ai remis à jour la variable PATH, la raison est qu’à chaque nouvelle étape, une nouvelle instance du terminal est créé, nous obligeant à redéfinir le PATH.

Signature du package

Maintenant, côte Android il faut signer le package. La documentation de Google explique plus en détails comment en générer un. Le fichier keystore est lui aussi à placer dans le Secure Files library, tout comme nous avons pu le faire pour iOS. Enfin, il ne faut pas oublier d’ajouter et de renseigner les variables suivantes : Keystore password, Key alias, and Key password.

La tâche suivante nous permettra de récupérer les packages générés et de les publier dans les build artifact de telle sorte à pouvoir les utiliser plus tard. 

iOS :

Android:

Le déploiement

Maintenant que nos packages sont générés et publiés, nous allons poursuivre pour atteindre l’étape de déploiement. Je vais utiliser App Center comme un outil de diffusion des packages en considérant des besoins internes. Grace à lui, vous pouvez partager votre application à différents groupes de testeurs en prévision d’une publication prochaine sur un store.

Le déploiement d’une application iOS et Android sur App Center est identique pour les deux plateformes.

iOS :

Android :

Et voilà, les packages sont disponibles sur l’App Center. Vous pouvez maintenant le télécharger et l’installer sur votre appareil !

Vous trouverez un exemple de fichier .yaml complet sur mon Github.

Pour aller plus loin, voici les sources qui m’ont permis d’écrire cet article :

• Comment builder et signer votre application iOS avec d’Azure DevOps
• How to build, sign and distribute your Flutter Android application using Azure DevOps and AppCenter

Enfin, retrouvez la suite du August Mobile Fest, avec l’article de Maëlle; “Comment synchroniser Core Data avec Azure”.