[Partie 2] Création d’une extension pour VSTS

Cet article fait suite à un précédent post sur la présentation du Visual Studio Marketplace et des extensions, dans celui-ci nous allons voir comment créer une extension pour VSTS.

Les prérequis

• Languages : TypeScript ou Javascript, Html, Css
• Visual Studio (toute version) ou Visual Studio Code : pour développer l’extension
• NodeJs, disponible ici et mettre à jour npm avec la commande npm update -g npm : pour créer le package et le publier
• Un compte VSTS : pour tester et utiliser l’extension
• Optionnel : une souscription Azure pour créer une site web Azure : pour héberger les pages de l’extension

Création du projet dans Visual Studio

Télécharger le template de projet ici, il permet d’avoir un projet avec tous les fichiers qui sont nécessaires pour votre extension et prêt à être publié.

Après avoir installé le template de projet, créer un nouveau projet basé sur celui-ci (il se trouve dans la catégorie TypeScript).

On obtient une solution avec tous les fichiers minimum pour l’extension.

Regardons en détails la structure du projet

1. Fichiers css pour la mise en forme de l’extension
2. Le répertoire img contient toutes les images tel que le logo ou les screenshoots nécessaires à la fiche sur le marketplace
3. Le répertoire scripts contient tous les scripts TypeScripts (ou javascripts), plugins Jquery ou tout autre scripts
4. Page html qui affiche l’extension
5. Le fichier vss-extension.json est le manifest de l’extension, il contient toute sa configuration

Tous les autres fichiers ne font pas partie de l’extension, ils sont optionnels, ils servent à packager et publier l’extension directement à partir de Visual Studio ou à faire des tests javascripts (avec jasmin).

Le fichier manifest

Le fichier vss-extension.json est le manifest, il contient toute les propriétés de notre extension comme par exemple :

• Son nom
• Sa description
• Son numéro de version
• Son scope, c’est-à-dire ses droits d’intéraction avec VSTS
• Son mode de packaging : soit l’extension est hébérgée dans un web site tiers comme un web site Azure ou soit tous les fichiers sont intégrés au package qui sera uploadé.
• Sa visibilité : privé ou public
• Sa configuration d’emplacement dans VSTS : soit une page entière (appellé hub) ou alors une action dans un menu (ou menu contextuel)

Dans l’exemple de projet qui est créé à partir du template, le fichier manifest contient une configuration de base.

Pour la partie propriétés

Quelques explications sur ces propriétés

• Id : identifiant unique de l’extension
• Version : version
• Name : son nom
• Scopes : indique les droits qu’aura l’extension dans VSTS, le détail avec la liste des scopes se trouve ici
• Description : sa description
• baseUri : l’url en https ou est hébergé l’extension (exemple web site Azure)
• publisher : id du publisher
• public : indique si l’extension est public par defaut false
• icon : chemin de l’icone
• files : liste des répertoires et fichiers à packager dans le package vsix, si pas de baseUri

Pour la configuration d’emplacement dans VSTS

Dans l’exemple l’extension rajoute une nouvelle page (hub) “Sample Contribution” dans la section work (travail) de VSTS, et la page de l’extension qui est affichée est index.html.

Tous les détails de ce fichier manifest sont disponible ici.

Les fichiers index.html et app.ts

Ce sont les fichiers exécutés par l’extension.

Le fichier index.html

Il s’agit d’un simple fichier html avec dans l’ordre :

1. Appel aux références aux fichiers css, javascripts, et au fichier SDK (VSS.SDK.js) des APIs à VSTS.
2. Initialisation du SDK
3. Appel au script app.js de facon asynchrone
4. Le bloc html qui va contenir le contenu à afficher.

Le fichier app.ts

Ce fichier contient le code TypeScript qui permet de faire le traitement désiré pour l’extension.

Pour rappel le TypeScript est un langage qui a une syntaxe qui se rapproche du C# et qui une fois compilé génère un fichier JavaScript. C’est ce fichier JavaScript qui est appelé par la page html.

Il est donc tout à fait possible d’écrire son code directement dans un fichier JavaScript.

Voici le code TypeScript de notre exemple fourni avec le template, qui affiche l’heure courante.

Dans toute cette partie on travaille sur une solution créée avec Visual Studio, pour Visual Studio Code il suffit de créer un projet avec cette même arborescence de fichiers.

L’API Rest client et composants UI

L’intérêt d’utiliser ces extensions est la mise à disposition d’ API client afin d’utiliser les données de VSTS. Ces données peuvent provenir du contrôleur de sources, des work items, des builds et des tests.

De plus des composants UI comme la grid ou la combo permettent d’utiliser les meme composants que VSTS.

La documentation sur l’API et les composants sont ici, et un exemple d’implémentation de la grid.

Conclusion

Le développement d’une extension pour VSTS n’est donc pas très compliqué, avec un éditeur de code même gratuit (VsCode), un peu de html et de javascript, il est possible d’étendre Visual Studio Team Services avec des fonctionnalités afin d’enrichir ses fonctionnalités.

Une fois le développement de l’extension fait, il reste cependant une dernière étape qui est sa publication pour son partage et son utilisation dans VSTS.

Découvrez la suite de cet article :

[Partie 3] Publication d’une extension pour VSTS