Bagikan melalui

Menambahkan hub

  • Artikel

Azure DevOps

Dalam artikel ini, kita akan membuat hub baru yang ditampilkan di Azure Boards setelah hub Sprint danKueri .

Screen shot showing location of new hub in Azure Boards.

Struktur ekstensi

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

Dapatkan SDK klien: SDK.js

Skrip SDK inti, SDK.js, memungkinkan ekstensi web untuk berkomunikasi dengan host, Azure DevOps Services, bingkai. Skrip ini juga menginisialisasi, memberi tahu bahwa ekstensi dimuat, atau mendapatkan konteks tentang halaman saat ini. Dapatkan file SDK SDK.js Klien dan tambahkan ke aplikasi web Anda. Tempatkan di home/sdk/scripts folder .

Gunakan perintah 'npm install' melalui baris perintah (memerlukan Node) untuk mengambil SDK:

npm install azure-devops-extension-sdk

Catatan

Untuk informasi selengkapnya, lihat Azure DevOps Web Extension SDK.

Halaman hub Anda: hello-world.html

Buat hello-world.html file di home direktori ekstensi Anda. Referensikan SDK dan panggil init() dan beri tahuLoadSucceeded().

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

File manifes ekstensi Anda: vss-extension.json

Buat file json (vss-extension.json, misalnya) di home direktori dengan konten berikut:

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

Catatan

Ubah penerbit ke nama penerbit Anda. Untuk membuat penerbit, lihat Mengemas, menerbitkan, dan menginstal.

Ikon

Ikon stanza menentukan jalur ke ikon ekstensi Anda dalam manifes Anda.

Tambahkan gambar persegi berjudul logo.png, seperti yang ditunjukkan dalam manifes ekstensi.

Kontribusi

Stanza kontribusi menambahkan kontribusi Anda - hub Halo - ke manifes ekstensi Anda.

Untuk setiap kontribusi dalam ekstensi Anda, manifes menentukan hal berikut:

  • jenis kontribusi, hub
  • target kontribusi, grup hub kerja (lihat semua grup hub yang dapat ditargetkan,
  • properti khusus untuk setiap jenis kontribusi. Hub memiliki properti berikut.
Properti Deskripsi
nama Nama hub.
urutan Penempatan hub di grup hub.
uri Jalur (relatif terhadap URI dasar ekstensi) halaman untuk muncul sebagai hub.

Cakupan

Sertakan cakupan yang diperlukan ekstensi Anda.

Dalam hal ini, kita perlu vso.work mengakses item kerja.

File

Stanza file menyatakan file yang ingin Anda sertakan dalam paket Anda - halaman HTML Anda, skrip Anda, skrip SDK, dan logo Anda.

Atur addressable ke true kecuali Anda menyertakan file lain yang tidak perlu dapat diatasi URL.

Catatan

Untuk informasi selengkapnya tentang file manifes ekstensi, seperti properti dan fungsi, lihat referensi manifes ekstensi.

Langkah berikutnya

Mengemas, menerbitkan, dan menginstal ekstensi