Bir hub ekle

Azure DevOps Hizmetleri

Tip

En son uzantı geliştirme kılavuzu için, tema oluşturma ve VSS.SDK'den geçiş dahil, Azure DevOps Uzantısı SDK geliştirici portalına bakın.

Bu makalede, Sprint'ler ve Sorgular hub'larından sonra Azure Boards içerisinde görünen bir hub oluşturacaksınız.

Azure Boards'ta yeni hub'ın konumunu gösteren ekran görüntüsü.

Önkoşullar

  • Node.js
  • Uzantı paketleme aracı: çalıştır npm install -g tfx-cli

Uzantı yapısını oluşturma

  1. Uzantınız için bir dizin oluşturun ve başlatın:

    mkdir my-hub-extension
cd my-hub-extension
npm init -y
npm install azure-devops-extension-sdk --save

  2. Dizininiz şu şekilde görünmelidir:

    |--- my-hub-extension
    |--- node_modules
        |--- azure-devops-extension-sdk
    |--- images
        |--- icon.png
    |--- hello-world.html
    |--- package.json
    |--- vss-extension.json

Hub sayfasını oluşturma

Uzantı dizininizin kökünde hello-world.html oluşturun. Bu sayfa SDK'yı yükler, başlatır ve geçerli kullanıcının adını görüntüler.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Hello World</title>
    <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) {
            SDK.init();
            SDK.ready().then(() => {
                document.getElementById("name").innerText = SDK.getUser().displayName;
            });
        });
    </script>
</head>
<body>
    <h1>Hello, <span id="name"></span></h1>
</body>
</html>

Hedefleyebileceğiniz hub gruplarının tam listesi için bkz Genişletilebilirlik noktaları referansı.

Uzantı bildirimini oluşturma

Uzantı dizininizin kökünde vss-extension.json oluşturun.

{
    "manifestVersion": 1,
    "id": "sample-extension",
    "version": "0.1.0",
    "name": "My first sample extension",
    "description": "A sample Azure DevOps extension.",
    "publisher": "fabrikamdev",
    "public": false,
    "categories": ["Azure Boards"],
    "targets": [
        {
            "id": "Microsoft.VisualStudio.Services"
        }
    ],
    "icons": {
        "default": "images/icon.png"
    },
    "contributions": [
        {
            "id": "hello-world-hub",
            "type": "ms.vss-web.hub",
            "description": "Adds a 'Hello' hub to the Work hub group.",
            "targets": [
                "ms.vss-work-web.work-hub-group"
            ],
            "properties": {
                "name": "Hello",
                "order": 99,
                "uri": "hello-world.html"
            }
        }
    ],
    "scopes": [
        "vso.work"
    ],
    "files": [
        {
            "path": "hello-world.html", "addressable": true
        },
        {
            "path": "node_modules/azure-devops-extension-sdk",
            "addressable": true,
            "packagePath": "lib"
        },
        {
            "path": "images/icon.png", "addressable": true
        }
    ]
}

Önemli

Yayımcıyı yayıncı adınıza değiştirin. Yayımcı oluşturmak için bkz. Paketleme, yayımlama ve yükleme. public geliştirme sırasında false olarak tutun.

Anahtar manifesto özellikleri

Mülkiyet Açıklama
Katkı Bağlantı noktasını tanımlar. type, ms.vss-web.hubve targets hangi hub grubuna ekleneceğini belirtir. Bkz. Tüm hedeflenebilir hub grupları için genişletilebilirlik noktaları .
contributions.properties.name Hub'ın görünen adı.
contributions.properties.order Hub'ın merkez grubu içindeki konumu.
contributions.properties.uri Merkez olarak görüntülenecek sayfanın yolu (uzantı tabanı URI'sine göre).
Kapsamlar Uzantının gerektirdiği izinler. vso.work iş öğelerine okuma erişimi verir. Bkz. Kapsamlar.
Dosyalar Pakete eklenecek dosyalar. URL gerektiren dosyalar için addressable: true ayarlayın.

Manifest hakkında daha fazla bilgi için bkz. Uzantı bildirimi referansı.

Özel hub grubu ekleme

İş veya Kod gibi yerleşik bir hub grubuna hub eklemek yerine kendi hub grubunuzu oluşturun ve hub'lar ekleyin. Hem bir ms.vss-web.hub-group katkı hem de onu hedefleyen bir ms.vss-web.hub katkı ekleyin.

"contributions": [
    {
        "id": "sample-hub-group",
        "type": "ms.vss-web.hub-group",
        "description": "Adds a 'Samples' hub group at the project level.",
        "targets": [
            "ms.vss-web.project-hub-groups-collection"
        ],
        "properties": {
            "name": "Samples",
            "order": 100
        }
    },
    {
        "id": "hello-hub",
        "type": "ms.vss-web.hub",
        "description": "Adds a 'Hello' hub to the Samples hub group.",
        "targets": [
            ".sample-hub-group"
        ],
        "properties": {
            "name": "Hello",
            "order": 99,
            "uri": "hello-world.html"
        }
    }
]

Yerleşik bir gruba hub ekleme arasındaki önemli farklar:

  • Merkez grup katkı hedefleri proje düzeyi ms.vss-web.project-hub-groups-collection veya kuruluş düzeyi ms.vss-web.collection-hub-groups-collection için.
  • Hub'ın targets dizisi, aynı uzantıda tanımlanan hub grubuna işaret etmek için göreli bir başvuru (.sample-hub-group) kullanır.
  • order Hub grubundaki özelliği, grubun gezintide nerede görüneceğini denetler.

Sonraki adım

Uzantıları paketleme, yayımlama ve yükleme

İlgili içerik

  • Last updated on