Entwickeln einer Weberweiterung

  • Artikel

Azure DevOps Services | Azure DevOps Server 2022 | Azure DevOps Server 2019

Verwenden Sie Erweiterungen, um Azure DevOps mit neuen Weboberflächen, Dashboard-Widgets, Aufgaben zu erstellen und vieles mehr zu verbessern. Sie können Erweiterungen mit Standardtechnologien wie HTML, JavaScript und CSS entwickeln. Dieses Lernprogramm führt Sie durch das Erstellen einer Weberweiterung für Azure DevOps.

Tipp

Erkunden Sie die Erweiterungsbeispiele und die neueste Dokumentation zur Erweiterungsentwicklung mithilfe des Azure DevOps Extension SDK.

Voraussetzungen

Sie müssen über die folgenden Berechtigungen und Installationen verfügen.

  • Sie müssen ein Organisationsbesitzer sein. Wenn Sie nicht über eine Organisation verfügen, können Sie eine Organisation kostenlos erstellen.
  • Installieren Sie Node.js.
  • Installieren Sie das Erweiterungspakettool (TFX). Führen Sie npm install -g tfx-cli an einer Eingabeaufforderung aus, mit der Sie Die Erweiterung später verpacken können.

Erstellen eines Verzeichnisses und manifests

Eine Erweiterung besteht aus einer Reihe von Dateien, die eine erforderliche Manifestdatei enthalten. Sie packen sie in eine VSIX-Datei und veröffentlichen sie im Visual Studio Marketplace.

  1. Erstellen Sie ein Verzeichnis, um die dateien zu speichern, die für Ihre Erweiterung erforderlich sind:

    mkdir my-first-extension

  2. Initialisieren Sie in diesem Verzeichnis ein neues npm-Paketmanifest:

    npm init -y

    In dieser Datei werden die bibliotheken beschrieben, die von der Erweiterung benötigt werden.

  3. Installieren Sie das Microsoft VSS Web Extension SDK-Paket, und speichern Sie es im npm-Paketmanifest:

    npm install azure-devops-extension-sdk --save

    Dieses SDK enthält eine JavaScript-Bibliothek, die APIs bereitstellt, die für die Kommunikation mit der Seite erforderlich sind, in die Ihre Erweiterung eingebettet ist.

  4. Erstellen Sie eine Erweiterungsmanifestdatei, die im Stammverzeichnis Ihres Erweiterungsverzeichnisses mit dem folgenden Inhalt benannt vss-extension.json ist:

    {
    "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"
        }
    ]
}

    Hinweis

    Die public Eigenschaft steuert, ob die Erweiterung für alle Benutzer auf dem Visual Studio Marketplace sichtbar ist. Halten Sie Ihre Erweiterungen während der Entwicklung privat.

  5. Erstellen Sie eine Datei my-hub.html mit dem Namen im Stammverzeichnis Ihres Erweiterungsverzeichnisses mit dem folgenden Inhalt, der für die Ansicht (auch als Hub bezeichnet) für die Weboberfläche beigetragen wurde.

    <!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>

  6. Ihr Erweiterungsverzeichnis sollte wie im folgenden Beispiel aussehen.

    |-- my-hub.html
|-- node_modules
    |-- @types
    |-- azure-devops-extension-sdk
|-- package.json
|-- vss-extension.json
Sie brauchen Hilfe? Stellen Sie Fragen an die azure DevOps Services-Entwicklercommunity.

Nächste Schritte

Packen und Veröffentlichen Ihrer Erweiterung