Webes bővítmény fejlesztése

  • Cikk

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

Bővítmények használatával továbbfejleszti az Azure DevOps-t új webes felületekkel, irányítópult-widgetekkel, buildelési feladatokkal és egyebekkel. A bővítmények olyan szabványos technológiák használatával fejleszthetők, mint a HTML, a JavaScript és a CSS. Ez az oktatóanyag végigvezeti az Azure DevOps webes bővítményének létrehozásán.

Tipp.

Megismerheti a bővítménymintákat és a bővítményfejlesztés legújabb dokumentációját az Azure DevOps Extension SDK használatával.

Előfeltételek

A következő engedélyekkel és telepítésekkel kell rendelkeznie.

Címtár és jegyzék létrehozása

A bővítmények olyan fájlokból állnak, amelyek tartalmazzák a szükséges jegyzékfájlt. Csomagolja egy .vsix-fájlba, és tegye közzé a Visual Studio Marketplace-en.

  1. Hozzon létre egy könyvtárat a bővítményhez szükséges fájlok tárolásához:

    mkdir my-first-extension

  2. Ebből a könyvtárból inicializáljon egy új npm-csomagjegyzéket:

    npm init -y

    Ez a fájl a bővítmény által igényelt kódtárakat ismerteti.

  3. Telepítse a Microsoft VSS Web Extension SDK-csomagot, és mentse az npm-csomagjegyzékbe:

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

    Ez az SDK tartalmaz egy JavaScript-kódtárat, amely api-kat biztosít a bővítmény beágyazott oldalával való kommunikációhoz.

  4. Hozzon létre egy bővítményjegyzékfájlt vss-extension.json a bővítménykönyvtár gyökerénél a következő tartalommal:

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

    Feljegyzés

    A public tulajdonság szabályozza, hogy a bővítmény látható-e mindenki számára a Visual Studio Marketplace-en. A fejlesztés során tartsa magánjellegűnek a bővítményeket.

  5. Hozzon létre egy fájlt my-hub.html a bővítménykönyvtár gyökerénél a következő tartalommal, amely a webes felülethez használt nézethez (más néven központhoz) tartozik.

    <!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. A bővítménykönyvtárnak az alábbi példához hasonlóan kell kinéznie.

    |-- my-hub.html
|-- node_modules
    |-- @types
    |-- azure-devops-extension-sdk
|-- package.json
|-- vss-extension.json
Segítségre van szüksége? Kérdéseket tehet fel az Azure DevOps Services fejlesztői közösségének.

Következő lépések

A bővítmény csomagolása és közzététele