Partilhar via

Adicionar um hub

Serviços de DevOps do Azure

Sugestão

Para as mais recentes orientações de desenvolvimento de extensões, incluindo tema e migração do VSS. SDK, consulte o portal para programadores do Azure DevOps Extension SDK.

Neste artigo, crias um hub que aparece no Azure Boards depois dos hubs de Sprints e Queries .

Captura de ecrã a mostrar a localização do novo hub no Azure Boards.

Pré-requisitos

  • Node.js
  • Ferramenta de empacotamento de extensões: executar npm install -g tfx-cli

Criar a estrutura de extensão

  1. Crie um diretório para a sua extensão e inicialize-o:

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

  2. O seu diretório deve ser assim:

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

Criar a página central

Cria hello-world.html na raiz do teu diretório de extensões. Esta página carrega o SDK, inicializa-o e mostra o nome do utilizador atual.

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

Para a lista completa de grupos de hub que pode direcionar, consulte a referência de pontos de extensibilidade.

Criar o manifesto da extensão

Crie vss-extension.json na raiz do seu diretório de extensões:

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

Importante

Altere o editor para o seu nome de editor. Para criar um editor, consulte Empacotar, publicar e instalar. Mantenha public definido como false durante o desenvolvimento.

Principais propriedades do manifesto

Propriedade Descrição
Contribuições Declara o centro de operações. O type é ms.vss-web.hub, e targets especifica a que grupo hub deve ser adicionado. Veja Pontos de Extensibilidade para todos os grupos de hubs alvoáveis.
contributions.properties.name Nome de exibição do hub
contributions.properties.order Posição do hub dentro do grupo de hubs.
contributions.properties.uri Caminho (relativo à URI base da extensão) da página a ser exibida como hub.
Âmbitos de aplicação Permissões que a extensão exige. vso.work concede acesso de leitura a itens de trabalho. Veja Âmbitos.
ficheiros Ficheiros a incluir no pacote. Define addressable: true para ficheiros que precisam de uma URL.

Para mais informações sobre o manifesto, consulte Referência ao manifesto de extensão.

Adicionar um grupo de hub personalizado

Em vez de adicionar um hub a um grupo de hub incorporado, como Work ou Code, crie o seu próprio grupo de hub e adicione hubs a ele. Adicione tanto uma ms.vss-web.hub-group contribuição como uma ms.vss-web.hub contribuição que a tenha como alvo:

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

Principais diferenças em relação a adicionar um hub a um grupo incorporado:

  • As contribuições do grupo hub destinam-se ms.vss-web.project-hub-groups-collection ao nível do projeto ou ms.vss-web.collection-hub-groups-collection ao nível da organização.
  • O array do hub targets usa uma referência relativa (.sample-hub-group) para apontar para o grupo de hubs definido na mesma extensão.
  • A order propriedade no grupo do hub controla onde o grupo aparece na navegação.

Próximo passo

Empacotar, publicar e instalar extensões

Conteúdo relacionado

  • Last updated on