Bagikan melalui

Tambah hub

Layanan Azure DevOps

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

Cuplikan layar memperlihatkan lokasi hub baru di 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.js SDK Klien dan tambahkan ke aplikasi web Anda. Tempatkan di folder home/sdk/scripts.

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

npm install azure-devops-extension-sdk

Nota

Untuk informasi selengkapnya, lihat Azure DevOps Web Extension SDK.

Halaman hub Anda: hello-world.html

  • Setiap hub menampilkan halaman web
  • Lihat grup hub yang dapat ditargetkan di referensi titik ekstensi

Buat file hello-world.html di direktori home ekstensi Anda. Rujuk SDK dan panggil init() dan 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>

File manifes ekstensi Anda: vss-extension.json

  • Setiap ekstensi harus memiliki file manifes ekstensi
  • Baca referensi manifes Ekstensi
  • Cari tahu selengkapnya tentang titik kontribusi di Titik ekstensibilitas

Buat file json (vss-extension.json, misalnya) di direktori home 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
			}
		]
	}

Nota

Ganti penerbit dengan nama penerbit Anda. Untuk membuat penerbit, lihat Paket , terbitkan, dan instal.

Ikon

Stanza ikon menentukan jalur ke ikon dari ekstensi Anda dalam manifes.

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

Kontribusi

Stanza kontribusi menambahkan kontribusi Anda - hub Hello - 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 ,
  • Sifat-sifat khusus untuk setiap jenis kontribusi. Hub memiliki properti berikut.
Harta benda Deskripsi
Nama Nama pusat
pesanan Penempatan hub di grup hub.
URI Jalur (relatif terhadap URI dasar ekstensi) halaman yang ditampilkan sebagai hub.

Cakupan

Sertakan ruang lingkup yang dibutuhkan oleh ekstensi Anda.

Dalam hal ini, kita memerlukan vso.work untuk mengakses item kerja.

Files

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

Tetapkan addressable ke true kecuali Anda menyertakan file lain yang tidak perlu dialamatkan dengan URL.

Nota

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

Langkah berikutnya

Mengemas, menerbitkan, dan menginstal ekstensi

Konten terkait

  • Last updated on