Événements
Créer des applications intelligentes
17 mars, 23 h - 21 mars, 23 h
Rejoignez la série de rencontres pour créer des solutions IA évolutives basées sur des cas d’usage réels avec d’autres développeurs et experts.
S’inscrire maintenantCe navigateur n’est plus pris en charge.
Effectuez une mise à niveau vers Microsoft Edge pour tirer parti des dernières fonctionnalités, des mises à jour de sécurité et du support technique.
Azure DevOps Services | Azure DevOps Server 2022 - Azure DevOps Server 2019
Utilisez des extensions pour améliorer Azure DevOps avec de nouvelles expériences web, des widgets de tableau de bord, des tâches de génération, etc. Vous pouvez développer des extensions à l’aide de technologies standard telles que HTML, JavaScript et CSS. Ce tutoriel vous guide tout au long de la création d’une extension web pour Azure DevOps.
Conseil
Disposez de l’autorisation et des installations suivantes.
npm install -g tfx-cli
à partir d'une ligne de commande que vous utiliserez ultérieurement pour empaqueter votre extension.Une extension est composée d’un ensemble de fichiers qui inclut un fichier manifeste requis. Vous l’empaquetez dans un fichier .vsix et publiez-le sur Visual Studio Marketplace.
Créez un répertoire pour contenir les fichiers nécessaires à votre extension :
mkdir my-first-extension
À partir de ce répertoire, initialisez un nouveau manifeste de package npm :
npm init -y
Ce fichier décrit les bibliothèques requises par votre extension.
Installez le package sdk d’extension web Microsoft VSS et enregistrez-le dans votre manifeste de package npm :
npm install azure-devops-extension-sdk --save
Ce Kit de développement logiciel (SDK) inclut une bibliothèque JavaScript qui fournit des API requises pour communiquer avec la page dans laquelle votre extension est incorporée.
Créez un fichier manifeste d’extension nommé vss-extension.json
à la racine de votre répertoire d’extension avec le contenu suivant :
{
"manifestVersion": 1,
"id": "my-first-extension",
"publisher": "",
"version": "1.0.0",
"name": "My First Extension",
"description": "A sample Visual Studio Services extension",
"public": false,
"categories": ["Azure Repos"],
"targets": [
{
"id": "Microsoft.VisualStudio.Services"
}
],
"contributions": [
{
"id": "my-hub",
"type": "ms.vss-web.hub",
"targets": [
"ms.vss-code-web.code-hub-group"
],
"properties": {
"name": "My Hub",
"uri": "my-hub.html"
}
}
],
"files": [
{
"path": "my-hub.html",
"addressable": true
},
{
"path": "node_modules/azure-devops-extension-sdk",
"addressable": true,
"packagePath": "lib"
}
]
}
Notes
La propriété public
contrôle si l’extension est visible par tout le monde sur Visual Studio Marketplace. Gardez vos extensions privées pendant le développement.
Créez un fichier nommé my-hub.html
à la racine de votre répertoire d’extension avec le contenu suivant, conçu pour la vue (également appelée hub) ajoutée à l'expérience web.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
<script>
window.requirejs.config({
enforceDefine: true,
paths: {
'SDK': './lib/SDK.min'
}
});
window.requirejs(['SDK'], function (SDK) {
if (typeof SDK !== 'undefined') {
console.log("SDK is defined. Trying to initialize...");
SDK.init();
SDK.ready().then(() => {
console.log("SDK is ready");
document.getElementById("name").innerText = SDK.getUser().displayName;
});
} else {
console.log('SDK is not defined');
}
});
</script>
<style>
body {
background-color: rgb(0, 67, 117);
color: white;
margin: 10px;
font-family: "Segoe UI VSS (Regular)","-apple-system",BlinkMacSystemFont,"Segoe UI",sans-serif;
}
</style>
</head>
<body>
<h1>Hello, <span id="name"></span></h1>
</body>
</html>
Votre répertoire d’extension doit ressembler à l’exemple suivant.
|-- my-hub.html
|-- node_modules
|-- @types
|-- azure-devops-extension-sdk
|-- package.json
|-- vss-extension.json
Événements
Créer des applications intelligentes
17 mars, 23 h - 21 mars, 23 h
Rejoignez la série de rencontres pour créer des solutions IA évolutives basées sur des cas d’usage réels avec d’autres développeurs et experts.
S’inscrire maintenantEntrainement
Module
Étendre les connexions Microsoft Viva avec des extensions de carte adaptative - Training
Découvrez comment étendre Viva Connections avec des extensions de carte adaptative personnalisées à l’aide de vos compétences existantes en développement web. Vous découvrirez les scénarios où ils conviennent le mieux et comment les créer.
Certification
Microsoft Certified : Power Platform Developer Associate - Certifications
Démontrez comment simplifier, automatiser et transformer les processus et les tâches métier à l’aide de Développeur Microsoft Power Platform.
Documentation
Référence du manifeste d’extension - Azure DevOps
Comment créer un manifeste pour votre extension dans Azure DevOps
Points d’extensibilité - Azure DevOps
Parcourez les emplacements où votre extension peut étendre Azure DevOps.
Package, publier des extensions - Azure DevOps
Vue d’ensemble de la façon de empaqueter, publier, annuler la publication, publiciser et partager une extension pour Azure DevOps.