Entwickeln einer Weberweiterung

Azure DevOps Services | Azure DevOps Server 2020 | Azure DevOps Server 2019 | TFS 2018

Verwenden Sie Erweiterungen, um Azure DevOps mit neuen Weboberflächen, Dashboard-Widgets, Buildaufgaben und mehr zu verbessern. Sie können Erweiterungen mithilfe von Standardtechnologien wie HTML, JavaScript und CSS entwickeln. Sie werden in den Visual Studio Marketplace verpackt und veröffentlicht und können dann in einer Organisation installiert werden.

Tipp

Sehen Sie sich unsere neueste Dokumentation zur Erweiterungsentwicklung mithilfe des Azure DevOps Extension SDK an.

Dieses Lernprogramm führt Sie durch das Erstellen Ihrer ersten Weberweiterung, die die folgenden Aufgaben umfasst.

  • Installieren der erforderlichen Tools
  • Lesen eines lokalen Verzeichnisses für Ihre Erweiterung
  • Erstellen einer Erweiterungsmanifestdatei und eines Hubbeitrags
  • Verpacken und Veröffentlichen Ihrer Erweiterung auf dem Marketplace
  • Testen der Erweiterung in einer Organisation
Sie benötigen Hilfe? Posten Sie Fragen zum Azure DevOps Services Entwicklercommunity.

Voraussetzungen

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

  • Sie sind ein Organisationsbesitzer. Wenn Sie keine Organisation haben, können Sie eine Organisation kostenlos erstellen.
  • Installieren Sie Node.js.
  • Installieren Sie das Erweiterungspakettool (TFX), indem Sie aus einer Eingabeaufforderung ausgeführt werden npm install -g tfx-cli .

Erstellen eines Verzeichnisses und Manifests

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

  1. Erstellen Sie ein Verzeichnis, um die für Ihre Erweiterung erforderlichen Dateien zu halten:

    mkdir my-first-extension
    
  2. Initialisieren Sie in diesem Verzeichnis ein neues NPM-Paketmanifest:

    npm init -y
    

    Diese Datei beschreibt die von Ihrer Erweiterung erforderlichen Bibliotheken.

  3. Installieren Sie das Microsoft VSS Web Extension SDK-Paket und speichern Sie sie im NPM-Paketmanifest:

    npm install vss-web-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 mit dem Namen vss-extension.json "Stamm" Ihres Erweiterungsverzeichniss mit den folgenden Inhalten:

    {
        "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/vss-web-extension-sdk/lib",
                "addressable": true,
                "packagePath": "lib"
            }
        ]
    }
    

    Hinweis

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

  5. Erstellen Sie eine Datei mit my-hub.html dem Namen "Stamm" Ihres Erweiterungsverzeichniss mit dem folgenden Inhalt, der für die Ansicht (auch als Hub bezeichnet) zur Weberfahrung beigetragen hat.

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script src="lib/VSS.SDK.min.js"></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>
        <script type="text/javascript">
            VSS.init();
            VSS.ready(function() {
                document.getElementById("name").innerText = VSS.getWebContext().user.name;
            });
        </script>
    </head>
    <body>        
        <h1>Hello, <span id="name"></span></h1>
    </body>
    </html>
    
  6. Ihr Erweiterungsverzeichnis sollte wie das folgende Beispiel aussehen.

    |-- my-hub.html
    |-- node_modules
        |-- @types
        |-- vss-web-extension-sdk
    |-- package.json
    |-- vss-extension.json
    

Sie sind jetzt bereit, Ihre Erweiterung zu verpacken, zu veröffentlichen und zu testen.

Verpacken und Veröffentlichen Ihrer Erweiterung

Erstellen eines Herausgebers

Alle Erweiterungen, einschließlich Erweiterungen von Microsoft, befinden sich unter einem Herausgeber. Jeder kann einen Herausgeber erstellen und Erweiterungen unter diesem Veröffentlichen veröffentlichen. Sie können auch anderen Personen Zugriff auf Ihren Publisher gewähren, wenn ein Team die Erweiterung entwickelt.

  1. Melden Sie sich beim Visual Studio Marketplace-Verwaltungsportal an.

  2. Wenn Sie noch nicht über einen Herausgeber verfügen, werden Sie aufgefordert, eine zu erstellen.

  3. Geben Sie im Formular "Erstellen Publisher" Ihren Namen im Feld "Herausgebername" ein. Das ID-Feld sollte automatisch basierend auf Ihrem Namen festgelegt werden:

    Creat publisher

    Hinweis

    Beachten Sie die ID. Sie müssen ihn in der Manifestdatei Ihrer Erweiterung festlegen.

Sie sind jetzt bereit, Ihre Erweiterung zu verpacken und zu veröffentlichen (hochladen) auf den Marketplace. Halten Sie dieses Browserfenster geöffnet, da Sie hier zurückkehren, nachdem Sie Ihre Erweiterung paketieren.

Packen der Erweiterung

  1. Öffnen Sie Die Erweiterungsmanifestdatei (vss-extension.json) und legen Sie den Wert des publisher Felds auf die ID Ihres Herausgebers fest. Beispiel:

    {
        ...
        "id": "my-first-extension",
        "publisher": "AnnetteNielsen",
        ...
    }
    
  2. VSS Web Extensions SDK erfordert TFX. Wenn Sie es noch nicht installiert haben, öffnen Sie eine Eingabeaufforderung, und führen Sie den folgenden Befehl aus.

    npm install -g tfx-cli
    
  3. Führen Sie in einer Eingabeaufforderung den Paketbefehl des TFX-Tools aus Ihrem Erweiterungsverzeichnis aus.

    npx tfx-cli extension create
    

    Wenn sie abgeschlossen ist, wird eine Meldung angezeigt, die angibt, dass Ihre Erweiterung erfolgreich verpackt wurde:

    === Completed operation: create extension ===
    - VSIX: C:\my-first-extension\AnnetteNielsen.my-first-extension-1.0.0.vsix
    - Extension ID: my-first-extension
    - Extension Version: 1.0.0
    - Publisher: AnnetteNielsen
    

Hochladen Ihrer Erweiterung

  1. Wählen Sie im Verwaltungsportal ihren Herausgeber aus dem Dropdown oben auf der Seite aus.

  2. Wählen Sie "Neue Erweiterung" aus, und wählen Sie dann Azure DevOps aus.

    Visual Studio Marketplace new extension development
  3. Ziehen Sie ihre Datei, oder wählen Sie es aus, um Ihre VSIX-Datei zu finden, die Sie im vorherigen Verpackungsschritt erstellt haben, und wählen Sie dann Hochladen aus.

    Upload new extension for Azure DevOps

    Nach einigen Sekunden wird Ihre Erweiterung in der Liste der veröffentlichten Erweiterungen angezeigt. Sorgen Sie nicht, dass die Erweiterung nur für Sie sichtbar ist.

    Extension appears in the list of published extensions.

Installieren Der Erweiterung

Um eine Erweiterung zu testen, muss sie in einer Organisation in Azure DevOps installiert werden. Die Installation erfordert den Besitzer der Organisation (oder die erforderlichen Berechtigungen). Da ihre Erweiterung privat ist, muss sie zuerst für die Organisation freigegeben werden, in der Sie sie installieren möchten.

  1. Wählen Sie im Verwaltungsportal Ihre Erweiterung aus der Liste aus, klicken Sie mit der rechten Maustaste, und wählen Sie "Freigeben/ Freigeben /Veröffentlichen/Veröffentlichen", je nach Erweiterung, aus. Share = Veröffentlichen und Aufheben der Freigabe = Nicht veröffentlichen.

    Select extension and choose Share.
  2. Wählen Sie "Organisation" aus, und geben Sie dann den Namen Ihrer Organisation ein. Drücken Sie die EINGABETASTE.

    Share with organization
  3. Schließen Sie den Bereich.

    Ihre Erweiterung kann jetzt in dieser Organisation installiert werden.

  4. Wählen Sie im Marketplace Ihre Erweiterung aus, um die Übersichtsseite zu öffnen.

Overview page
Overview page

Hinweis

Da Ihre Erweiterung privat ist, können nur Sie und jedes Mitglied der Organisation, mit der sie geteilt wird, diese Seite anzeigen.

  1. Wählen Sie " Frei abrufen", um den Installationsvorgang zu starten. Wählen Sie die Organisation aus, mit der Sie die Erweiterung im Dropdownmenü freigegeben haben.

    Instal extension panel
  2. Wählen Sie Installieren aus.

Herzlichen Glückwunsch! Ihre Erweiterung ist jetzt in einer Organisation installiert und ist bereit, getestet zu werden.

Versuchen Sie Ihre Erweiterung

Ihre Erweiterung hat zur Projektebene codebereich eine Ansicht mit dem Namen "My Hub" beigetragen. Navigieren wir dazu.

  1. Wählen Sie " Weiter zur Organisation " am Ende des Installations-Assistenten aus, um zur Startseite der Organisation zu navigieren, auf der die Erweiterung installiert wurde (https://dev.azure.com/{organization}).
  1. Wählen Sie eine der aufgeführten Projekte aus, um darin zu navigieren:

    select project

    Wenn in Ihrer Organisation keine Projekte vorhanden sind, werden Sie aufgefordert, eine zu erstellen.

  2. Navigieren Sie zum Codebereich und dann zum Hub, der von Ihrer Erweiterung (My Hub) beigetragen hat:

    My hub

  1. Wählen Sie "Organisationseinstellungen" und dann "Erweiterungen " aus, um die neu installierte Erweiterung anzuzeigen.

    Organization settings, extensions page

Tipp

Stellen Sie sicher, dass Sie Ihren Browser nach der Installation der Erweiterung aktualisieren. Sie sollten den neuen Erweiterungshub im linken Bereich unter dem Haupthub sehen, dem Sie die Erweiterung hinzugefügt haben. Wenn der neue Erweiterungshub nicht angezeigt wird, veröffentlichen Sie dieses Problem in den Azure DevOps Services Entwicklercommunity.

Debuggen ihrer Erweiterung

Um die Erweiterung mithilfe von Visual Studio oder Browserentwicklertools zu debuggen und die Entwicklung zu beschleunigen, ohne die Erweiterung bei jeder Änderung des Quellcodes erneut bereitzustellen, müssen Sie die Manifesterweiterungseigenschaft baseUri ändern:

{
    ...
    "baseUri": "https://localhost:44300",
    ...
}

Das Ändern des Manifests lädt die Erweiterung aus Ihrer lokalen Webserverinstanz. IisExpress beispielsweise in Visual Studio. Nachdem Sie das Manifest geändert haben, stellen Sie diese Debugerweiterung nur einmal bereit und installieren Sie diese Debugerweiterung.

Hinweis

Führen Sie Ihren lokalen Webserver im SSL-Modus aus, da Azure DevOps fordert, dass die Webseite aus einer sicheren Quelle bereitgestellt wird, andernfalls erhalten Sie während des Ladens der Erweiterung IFRAME einen Fehler in der Browserkonsole.

Nächste Schritte