Udostępnij przez

Dodaj koncentrator

Azure DevOps Services

W tym artykule utworzymy nowe centrum, które będzie się wyświetlać w Azure Boards po centrach Sprints i Queries.

Zrzut ekranu przedstawiający lokalizację nowego centrum w usłudze Azure Boards.

Struktura rozszerzenia

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

Pobierz zestaw SDK klienta: SDK.js

Podstawowy skrypt zestawu SDK, SDK.js, umożliwia rozszerzenia sieci Web komunikowanie się z hostem, usługą Azure DevOps Services, ramką. Ten skrypt inicjuje również, powiadamia o załadowaniu rozszerzenia lub pobiera kontekst dotyczący bieżącej strony. Pobierz plik SDK.js zestawu SDK klienta i dodaj go do aplikacji internetowej. Umieść go w folderze home/sdk/scripts.

Użyj polecenia "npm install" za pośrednictwem wiersza polecenia (wymaga Node), aby pobrać zestaw SDK:

npm install azure-devops-extension-sdk

Uwaga

Aby uzyskać więcej informacji, zobacz Zestaw SDK rozszerzenia internetowego Azure DevOps.

Strona główna centrum: hello-world.html

  • Każde centrum wyświetla stronę internetową
  • Zapoznaj się z grupami koncentratorów możliwymi do rozpoznania w odniesieniu do punktów rozszerzeń

Utwórz plik hello-world.html w katalogu home rozszerzenia. Odwołaj się do zestawu SDK i wywołaj init() i 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>

Plik manifestu rozszerzenia: vss-extension.json

  • każde rozszerzenie musi mieć plik manifestu rozszerzenia
  • Przeczytaj odniesienie do manifestu rozszerzenia
  • Dowiedz się więcej o punktach udziału w punktach rozszerzalności

Utwórz plik json (na przykładvss-extension.json, w katalogu home z następującą zawartością:

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

Uwaga

Zmień wydawcę na nazwę swojego wydawcy. Aby utworzyć wydawcę oprogramowania, zobacz Pakietuj, publikuj i instaluj.

Ikony

Ikony stanza określają ścieżkę do ikony rozszerzenia w manifeście.

Dodaj obraz kwadratowy o nazwie logo.png, jak pokazano w manifeście rozszerzenia.

Składki

Część wkładu dodaje Hello hub do manifestu rozszerzenia.

Dla każdego udziału w rozszerzeniu manifest definiuje następujące elementy:

  • typ współtworzenia, koncentrator
  • cel kontrybucji, grupa centrum pracy (sprawdź wszystkie docelowe grupy centrów)
  • właściwości specyficzne dla każdego typu wkładu. Centrum ma następujące właściwości.
Nieruchomość Opis
nazwa Nazwa węzła.
porządek Umieszczanie koncentratora w grupie koncentratorów.
URI Ścieżka strony (względem podstawowego identyfikatora URI rozszerzenia), która ma być wyświetlana jako centrum.

Zakresy

Uwzględnij zakresy wymagane przez rozszerzenie.

W tym przypadku potrzebujemy vso.work, aby uzyskać dostęp do elementów roboczych.

Files

Pliki stanza zawierają pliki, które chcesz uwzględnić w pakiecie — stronę HTML, skrypty, skrypty zestawu SDK i logo.

Ustaw addressable na true, chyba że dołączysz inne pliki, które nie muszą być adresowalne pod adresem URL.

Uwaga

Aby uzyskać więcej informacji na temat pliku manifestu rozszerzenia , takich jak właściwości i funkcje, zapoznaj się z dokumentacją referencyjną manifestu rozszerzenia .

Następne kroki

Pakowanie, publikowanie i instalowanie rozszerzeń

Treści powiązane

  • Last updated on