Partilhar via

Adicionar um hub

Serviços de DevOps do Azure

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

Captura de ecrã a mostrar a localização do novo hub nos Painéis do Azure.

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 SDK principal, SDK.js, permite que as extensões da Web se comuniquem com o host, Azure DevOps Services, frame. 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 Azure DevOps Web Extension SDK.

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

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

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

Crie um arquivo json (vss-extension.json, por 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 seu nome de editor. Para criar um editor, consulte Empacotar, publicar e instalar.

Ícones

A secção icons especifica o caminho para o ícone da sua extensão no manifesto.

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

Contribuições

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

Para cada contribuição na 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,
  • as propriedades específicas de cada tipo de contribuição. Um hub tem as seguintes propriedades.
Propriedade Descrição
nome Nome do hub.
Ordem / Encomenda Posicionamento do hub no grupo de hubs.
URI Caminho (relativo ao URI de base da extensão) da página para aparecer como o hub.

Alcances

Inclua os escopos que a sua extensão exige.

Neste caso, precisamos aceder aos itens de vso.work trabalho.

Ficheiros

A secção de ficheiros indica os ficheiros que pretenda incluir no seu pacote - a sua página HTML, os seus scripts, o script SDK e o seu logótipo.

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

Observação

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

Próximos passos

Empacotar, publicar e instalar extensões

Conteúdo relacionado

  • Last updated on