Compartilhar via

Adicionar um hub

Serviços do Azure DevOps

Neste artigo, criaremos um novo hub que será exibido no Azure Boards após os hubs Sprints e Queries.

Captura de tela mostrando a localização do novo hub no 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, habilita as extensões da Web a se comunicarem com o host, Azure DevOps Services, quadro. Esse script também inicializa, notifica que a extensão foi carregada ou obtém o 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' por meio da linha de comando (requer Node) para recuperar o SDK:

npm install azure-devops-extension-sdk

Observação

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

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

Crie um hello-world.html arquivo no home diretório da 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>

O arquivo de manifesto de sua extensão: vss-extension.json

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 publicador para o nome do publicador. Para criar um publicador, consulte Pacote, 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 da extensão.

Contribuições

A seção de contribuições adiciona sua contribuição - o hub Hello - ao manifesto da 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 do hub de trabalho (confira todos os grupos de hubs que podem ser direcionados,
  • as propriedades específicas de cada tipo de contribuição. Um hub tem as seguintes propriedades.
Propriedade Descrição
nome Nome do hub.
ordem Posicionamento do hub no grupo de hubs.
uri Caminho (relativo ao URI de base da extensão) da página a ser exibida como o hub.

Escopos

Inclua os escopos que sua extensão requer.

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

Arquivos

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

Defina addressable como true a menos que você inclua outros arquivos que não precisam ser passíveis de endereçamento por URL.

Observação

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

Próximas etapas

Empacotar, publicar e instalar extensões

Conteúdo relacionado

  • Last updated on