Différenciez facilement les versions de vos applications avec Azure DevOps

Lorsque vous développez une application mobile, vous disposez toujours de versions différentes et chacune a un environnement spécifique. Pendant toute la durée de vie de votre projet, vous basculez entre chaque version pour essayer de nouvelles fonctionnalités ou corriger certains bugs.

Pour ce faire, vous avez souvent différentes versions de votre application sur le même appareil et vous avez un identifiant différent pour chaque version. Cela aboutira à ce genre de problématique:

Comme vous pouvez le voir ci-dessus, vous ne pouvez pas facilement savoir sur votre device quelle icône correspond à une version de votre application. Une autre solution serait de différencier le nom de chaque version de votre application mais s’il est trop long, il sera coupée à l’affichage. Alors pourquoi ne pas simplement ajouter une bannière par dessus l’icône de votre application?

Présentation de la task Launch Icon Badge

Pour résoudre ce problème, j’ai développé une nouvelle task Azure DevOps appelée Launch Icon Badge, facile à utiliser dans votre pipeline et gratuite. Cette task vous permet d’ajouter le nom de la version de l’environnement et le numéro de version directement sur l’icône de votre application. Cela ne fonctionne que pour les fichiers png.

Notez que cette task fonctionnera non seulement pour un projet d’application mobile mais aussi pour tous les projets qui utilisent des icônes quelle que soit la technologie que vous utilisez.

Utilisation de base

Tout d’abord, accédez à votre Azure DevOps et installez l’extension Launch Icon Badge dans votre organisation.

Pour l’utiliser dans votre azure-pipelines.yml il vous suffit de l’appeler comme ceci:

- task: LaunchIconBadge@1
  inputs:
    bannerVersionNamePosition: 'bottomRight'
    bannerVersionNameText: 'Prerelease'
    bannerVersionNumberPosition: 'top'
    bannerVersionNumberText: '1.2.3'

Par défaut, tous les fichiers png de vos projets seront édités, voici le résultat de l’exemple de code ci-dessus:

Options avancées

Vous trouverez ci-dessous toutes les options pour cette task:

- task: LaunchIconBadge@1
  inputs:
    sourceFolder: '$(Build.SourcesDirectory)' # Optional. Default is: $(Build.SourcesDirectory)
    contents: '**/*.png' # Optional. Default is:  '**/*.png'
    bannerVersionNamePosition: 'bottomRight' # Options: topLeft, topRight, bottomRight, bottomLeft. Default is: 'bottomRight'
    bannerVersionNameText: 'Prerelease'  # Optional. Default is: ''
    bannerVersionNameColor: '#C5000D' # Optional. Default is: '#C5000D'
    bannerVersionNameTextColor: '#FFFFFF' # Optional. Default is: '#FFFFFF'
    bannerVersionNumberPosition: 'top' # Optional. top, bottom, center, none. Default is: 'none'
    bannerVersionNumberText: '1.2.3' # Optional. Default is: ''
    bannerVersionNumberColor: '#34424F' # Optional. Default is: '#34424F'
    bannerVersionNumberTextColor: '#FFFFFF' # Optional. Default is: '#FFFFFF' 

• Le sourceFolder sera par défaut, le répertoire de build de votre pipeline Azure.
• Le contents qui par défaut modifiera tous les fichiers png de votre projet.
• Le bannerVersionNamePosition spécifiera le coin de votre choix pour dessiner la bannière. Options: topLeft, topRight, bottomRight, bottomLeft.
• Le bannerVersionNumberPosition spécifiera la position de la bannière du numéro de version. La bannière peut être simplement masqué. Options: top, bottom, center, none.
• Vous pouvez personnaliser la couleur d’arrière-plan et la couleur du texte de vos bannières en utilisant un code hexadécimal.

Voici quelques exemples de ce que vous pouvez faire:

Aller plus loin

Dans mon précédent tutoriel j’ai présenté une autre task Azure DevOps appelée ExtractVersionFromTag pour obtenir la version de votre application à partir de votre dernier tag Git. Vous pouvez combiner ces deux tasks et définir automatiquement le bannerVersionNumberText comme ceci:

- task: ExtractVersionFromTag@1

- task: LaunchIconBadge@1
  inputs:
    bannerVersionNamePosition: 'bottomRight'
    bannerVersionNameText: 'Prerelease'
    bannerVersionNumberPosition: 'top'
    bannerVersionNumberText: '$(MAJOR).$(MINOR).$(PATCH)-($(NUMBER_OF_COMMITS))'

Touche finale

Vous trouverez des exemples d’utilisation dans le répertoire du projet Github. N’hésitez pas à contribuer à ce projet si vous le souhaitez.

Happy coding !

N'hésitez pas à me suivre sur Twitter pour ne pas rater mon prochain tutoriel !