Udostępnij za pośrednictwem

Dodawanie koncentratora

  • Artykuł

Azure DevOps Services

W tym artykule utworzymy nowe centrum, które będzie wyświetlane w usłudze Azure Boards po centrach Przebiegi i zapytania .

Screen shot showing location of new hub in 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 zestawu SDK SDK.js 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 węzła), aby pobrać zestaw SDK:

npm install azure-devops-extension-sdk

Uwaga

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

Strona centrum: hello-world.html

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

Utwórz plik json (vss-extension.jsonna przykład) w home katalogu 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ę wydawcy. Aby utworzyć wydawcę, zobacz Pakiet, publikowanie i instalowanie.

Ikony

Stanza ikon określa ścieżkę do ikony rozszerzenia w manifeście.

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

Udziały

Stanza kontrybucji dodaje swój wkład — centrum Hello — do manifestu rozszerzenia.

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

Właściwości Opis
name Nazwa centrum.
order Umieszczanie koncentratora w grupie piasty.
uri Ścieżka (względem podstawowego identyfikatora URI rozszerzenia) strony, która ma być widoczna jako centrum.

Zakresy

Uwzględnij zakresy wymagane przez rozszerzenie.

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

Files

Stanza plików określa pliki, które chcesz dołączyć do pakietu — stronę HTML, skrypty, skrypty zestawu SDK i logo.

Ustaw addressable wartość 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, takiego jak właściwości i funkcja, zapoznaj się z dokumentacją manifestu rozszerzenia.

Następne kroki

Pakowanie, publikowanie i instalowanie rozszerzeń