다음을 통해 공유

허브 추가

  • 아티클

Azure DevOps Services

이 문서에서는 스프린트 및 쿼리 허브 다음에 Azure Boards에 표시되는 새 허브를 만듭니다.

Screen shot showing location of new hub in Azure Boards.

확장의 구조

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

클라이언트 SDK를 가져옵니다. SDK.js

핵심 SDK 스크립트인 SDK.js를 사용하면 웹 확장이 호스트, Azure DevOps Services, 프레임과 통신할 수 있습니다. 또한 이 스크립트는 확장을 초기화하거나, 확장이 로드되었음을 알리거나, 현재 페이지에 대한 컨텍스트를 가져옵니다. 클라이언트 SDK SDK.js 파일을 가져와서 웹앱에 추가합니다. 폴더에 배치합니다 home/sdk/scripts .

명령줄(노드 필요)을 통해 'npm install' 명령을 사용하여 SDK를 검색합니다.

npm install azure-devops-extension-sdk

참고 항목

자세한 내용은 Azure DevOps 웹 확장 SDK를 참조 하세요.

허브 페이지: hello-world.html

확장의 hello-world.html 디렉터리에 파일을 home 만듭니다. SDK를 참조하고 init() 및 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>

확장의 매니페스트 파일: vss-extension.json

다음 내용을 사용하여 디렉터리에 json 파일(vss-extension.json예: home )을 만듭니다.

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

참고 항목

게시자를 게시자 이름으로 변경합니다. 게시자를 만들려면 패키지, 게시 및 설치를 참조 하세요.

아이콘

아이콘 stanza는 매니페스트에서 확장 아이콘의 경로를 지정합니다.

확장 매니페스트에 표시된 것처럼 제목이 지정된 logo.png사각형 이미지를 추가합니다.

참여

기여 stanza는 사용자의 기여(Hello 허브)를 확장 매니페스트에 추가합니다.

확장의 각 기여에 대해 매니페스트는 다음을 정의합니다.

  • 기여 유형, 허브
  • 기여 대상, 작업 허브 그룹(검사 모든 대상 허브 그룹,
  • 각 기여 유형과 관련된 속성입니다. 허브에는 다음과 같은 속성이 있습니다.
속성 설명
name 허브의 이름입니다.
order 허브 그룹에 허브를 배치합니다.
uri 허브로 표시할 페이지의 경로(확장 기본 URI를 기준으로)입니다.

범위

확장에 필요한 범위를 포함합니다.

이 경우 작업 항목에 액세스해야 합니다 vso.work .

Files

파일은 HTML 페이지, 스크립트, SDK 스크립트 및 로고 등 패키지에 포함하려는 파일을 표시합니다.

true URL 주소를 지정할 필요가 없는 다른 파일을 포함하지 않는 한 설정 addressable 됩니다.

참고 항목

확장명 매니페스트 파일(예: 속성 및 함수)에 대한 자세한 내용은 확장 매니페스트 참조를 검사.

다음 단계

확장 패키지, 게시 및 설치