다음을 통해 공유

허브 추가

  • 아티클

Azure DevOps Services

이 문서에서는 Sprints 허브와 쿼리 허브 후에 Azure Boards에 표시되는 새 허브를 만듭니다.

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

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

npm install azure-devops-extension-sdk

비고

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

허브 페이지: hello-world.html

  • 모든 허브가 웹 페이지를 표시합니다.
  • 대상 허브 그룹을 확장 지점 참조에서 확인하십시오.

확장의 home 디렉터리에 hello-world.html 파일을 만듭니다. 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

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

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

비고

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

아이콘

아이콘 절은 매니페스트에서 확장 기능 아이콘의 경로를 지정합니다.

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

기여

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

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

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

범위

확장에 필요한 범위를 포함하십시오.

이 경우 작업 항목에 액세스하려면 vso.work 필요합니다.

파일

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

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

비고

속성 및 함수와 같은 확장명 매니페스트 파일대한 자세한 내용은 확장 매니페스트 참조확인하세요.

다음 단계

확장 기능을 패키지화, 게시, 및 설치하기