Share via

Adicionar um hub

  • Artigo

Azure DevOps Services

Neste artigo, criaremos um novo hub que é exibido nos Quadros do Azure após os hubs Sprints e Consultas.

Screen shot showing location of new hub in Azure Boards.

Estrutura de uma extensão

|--- README.md
|--- sdk    
	|--- node_modules           
	|--- scripts
		|--- SDK.js       
|--- images                        
	|--- icon.png                           
|--- scripts                        	// not used in this tutorial
|--- hello-world.html				// html page to be used for your hub  
|--- vss-extension.json				// extension's manifest

Obtenha o SDK do cliente: SDK.js

O script principal do SDK, SDK.js, permite que as extensões da Web se comuniquem com o host, o quadro Serviços de DevOps do Azure. Esse script também inicializa, notifica que a extensão foi carregada ou obtém contexto sobre a página atual. Obtenha o arquivo SDK SDK.js do cliente e adicione-o ao seu aplicativo Web. Coloque-o na home/sdk/scripts pasta .

Use o comando 'npm install' através da linha de comando (requer Node) para recuperar o SDK:

npm install azure-devops-extension-sdk

Observação

Para obter mais informações, consulte SDK de extensão da Web de DevOps do Azure.

Sua página de hub: hello-world.html

  • Cada hub exibe uma página da Web
  • Confira os grupos de hub segmentáveis na referência de pontos de extensão

Crie um hello-world.html arquivo no home diretório de sua extensão. Faça referência ao SDK e chame init() e notifyLoadSucceeded().

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Hello World</title>
	<script src="sdk/scripts/SDK.js"></script>
</head>
<body>
	<script type="text/javascript">SDK.init();</script>
	<h1>Hello World</h1>
	<script type="text/javascript">SDK.notifyLoadSucceeded();</script>
</body>
</html>

Arquivo de manifesto da sua extensão: vss-extension.json

  • Cada extensão deve ter um arquivo de manifesto de extensão
  • Leia a referência do manifesto de extensão
  • Saiba mais sobre os pontos de contribuição em pontos de extensibilidade

Crie um arquivo json (vss-extension.jsonpor exemplo) no home diretório com o seguinte conteúdo:

	{
		"manifestVersion": 1,
		"id": "sample-extension",
		"version": "0.1.0",
		"name": "My first sample extension",
		"description": "A sample Visual Studio Services extension.",
		"publisher": "fabrikamdev",
		"categories": ["Azure Boards"],
		"targets": [
			{
				"id": "Microsoft.VisualStudio.Services"
				}
			],
		"icons": {
			"default": "images/logo.png"
		 },
		"contributions": [
			{
				"id": "Fabrikam.HelloWorld",
				"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": "sdk/scripts", "addressable": true
			},
			{
				"path": "images/logo.png", "addressable": true
			}
		]
	}

Observação

Altere o editor para o nome do editor . Para criar um editor, consulte Empacotar, publicar e instalar.

Ícones

A estrofe de ícones especifica o caminho para o ícone da extensão em seu manifesto.

Adicione uma imagem quadrada intitulada logo.png, conforme mostrado no manifesto de extensão.

Contribuições

A estrofe de contribuições adiciona sua contribuição - o hub Hello - ao seu manifesto de extensão.

Para cada contribuição em sua extensão, o manifesto define o seguinte:

  • tipo de contribuição, hub
  • meta de contribuição, o grupo de hub de trabalho (confira todos os grupos de hub segmentáveis,
  • os imóveis específicos para cada tipo de contribuição. Um hub tem as seguintes propriedades.
Propriedade Descrição
name Nome do hub.
ordem Posicionamento do hub no grupo de hubs.
uri Caminho (relativo ao URI base da extensão) da página para a superfície como o hub.

Escopos

Inclua os escopos necessários para sua extensão.

Nesse caso, precisamos vso.work acessar itens de trabalho.

Arquivos

A estrofe de arquivos declara os arquivos que você deseja incluir em seu pacote – sua página HTML, seus scripts, o script do SDK e seu logotipo.

Defina addressable como, true a menos que você inclua outros arquivos que não precisam ser endereçáveis por URL.

Observação

Para obter mais informações sobre o arquivo de manifesto de extensão, como propriedades e função, confira a referência de manifesto de extensão.

Próximas etapas

Empacotar, publicar e instalar extensões