Compartilhar via

Adicionar um hub

Serviços do Azure DevOps

Dica

Para obter as diretrizes mais recentes de desenvolvimento de extensão, incluindo temas e migração do VSS. SDK, consulte o portal do desenvolvedor do SDK de Extensão do Azure DevOps.

Neste artigo, você criará um hub que aparece no Azure Boards após os hubs Sprints e Queries.

Captura de tela mostrando o local do novo hub no Azure Boards.

Pré-requisitos

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

Criar a estrutura de extensão

  1. Crie um diretório para 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. Seu diretório deve ter esta aparência:

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

Criar a página do hub

Crie hello-world.html na raiz do diretório de extensão. Esta página carrega o SDK, inicializa-o e exibe o nome do usuário 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 obter a lista completa de grupos de hubs que você pode atingir, consulte a referência de pontos de extensibilidade.

Criar o manifesto da extensão

Crie vss-extension.json na raiz do diretório de extensão:

{
    "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 publicador para o nome do publicador. Para criar um publicador, consulte Pacote, publicar e instalar. Mantenha public definido como false durante o desenvolvimento.

Propriedades principais do manifesto

Propriedade Descrição
Contribuições Declara o hub. O type é ms.vss-web.hub e targets especifica a qual grupo de hubs adicioná-lo. Consulte os pontos de extensibilidade para todos os grupos de hubs alvo.
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.
escopos Permissões necessárias para a extensão. vso.work fornece acesso de leitura a itens de trabalho. Consulte Escopos.
arquivos Arquivos a serem incluídos no pacote. Defina addressable: true para arquivos que precisam de uma URL.

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

Adicionar um grupo de hubs personalizado

Em vez de adicionar um hub a um grupo de hub interno, como Trabalho ou Código, crie seu próprio grupo de hubs e adicione hubs a ele. Adicione uma ms.vss-web.hub-group contribuição e uma ms.vss-web.hub contribuição direcionada a ela:

"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 da adição de um hub a um grupo interno:

  • As metas de contribuição do grupo de hubs ms.vss-web.project-hub-groups-collection para o nível do projeto ou ms.vss-web.collection-hub-groups-collection para o nível da organização.
  • A matriz 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 de hub controla onde o grupo aparece na navegação.

Próxima etapa

Empacotar, publicar e instalar extensões

Conteúdo relacionado

  • Last updated on