Mengembangkan ekstensi web
Layanan Azure DevOps | Azure DevOps Server 2022 - Azure DevOps Server 2019
Gunakan ekstensi untuk meningkatkan Azure DevOps dengan pengalaman web baru, widget dasbor, tugas build, dan banyak lagi. Anda dapat mengembangkan ekstensi menggunakan teknologi standar seperti HTML, JavaScript, dan CSS. Tutorial ini memandu Anda membuat ekstensi web untuk Azure DevOps.
Tips
Jelajahi sampel ekstensi dan dokumentasi terbaru tentang pengembangan ekstensi menggunakan Azure DevOps Extension SDK.
Prasyarat
Miliki izin dan instalasi berikut.
- Anda harus menjadi pemilik organisasi. Jika Anda tidak memiliki organisasi, Anda dapat membuat organisasi secara gratis.
- Instal Node.js.
- Instal alat pengemasan ekstensi (TFX). Jalankan
npm install -g tfx-cli
dari prompt perintah, yang akan Anda gunakan untuk mengemas ekstensi Anda nanti.
Buat direktori dan daftar
Ekstensi terdiri dari sekumpulan file yang menyertakan file manifes yang diperlukan. Anda mengemasnya ke dalam file .vsix dan menerbitkannya ke Visual Studio Marketplace.
Buat direktori untuk menyimpan file yang diperlukan untuk ekstensi Anda:
mkdir my-first-extension
Dari direktori ini, inisialisasi manifes paket npm baru:
npm init -y
File ini menjelaskan pustaka yang diperlukan oleh ekstensi Anda.
Instal paket Microsoft VSS Web Extension SDK dan simpan ke manifes paket npm Anda:
npm install azure-devops-extension-sdk --save
SDK ini menyertakan pustaka JavaScript yang menyediakan API yang diperlukan untuk berkomunikasi dengan halaman tempat ekstensi Anda disematkan.
Buat file manifes ekstensi bernama
vss-extension.json
di akar direktori ekstensi Anda dengan konten berikut:{ "manifestVersion": 1, "id": "my-first-extension", "publisher": "", "version": "1.0.0", "name": "My First Extension", "description": "A sample Visual Studio Services extension", "public": false, "categories": ["Azure Repos"], "targets": [ { "id": "Microsoft.VisualStudio.Services" } ], "contributions": [ { "id": "my-hub", "type": "ms.vss-web.hub", "targets": [ "ms.vss-code-web.code-hub-group" ], "properties": { "name": "My Hub", "uri": "my-hub.html" } } ], "files": [ { "path": "my-hub.html", "addressable": true }, { "path": "node_modules/azure-devops-extension-sdk", "addressable": true, "packagePath": "lib" } ] }
Nota
Properti
public
mengontrol apakah ekstensi terlihat oleh semua orang di Visual Studio Marketplace. Pastikan ekstensi Anda tetap rahasia selama pengembangan.Buat file bernama
my-hub.html
di akar direktori ekstensi Anda dengan konten berikut, yaitu untuk tampilan (juga dikenal sebagai hub) yang dikontribusikan ke dalam pengalaman web.<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script> <script> window.requirejs.config({ enforceDefine: true, paths: { 'SDK': './lib/SDK.min' } }); window.requirejs(['SDK'], function (SDK) { if (typeof SDK !== 'undefined') { console.log("SDK is defined. Trying to initialize..."); SDK.init(); SDK.ready().then(() => { console.log("SDK is ready"); document.getElementById("name").innerText = SDK.getUser().displayName; }); } else { console.log('SDK is not defined'); } }); </script> <style> body { background-color: rgb(0, 67, 117); color: white; margin: 10px; font-family: "Segoe UI VSS (Regular)","-apple-system",BlinkMacSystemFont,"Segoe UI",sans-serif; } </style> </head> <body> <h1>Hello, <span id="name"></span></h1> </body> </html>
Direktori ekstensi Anda akan terlihat seperti contoh berikut.
|-- my-hub.html |-- node_modules |-- @types |-- azure-devops-extension-sdk |-- package.json |-- vss-extension.json
Langkah berikutnya
Kemasi dan terbitkan ekstensi Anda
Artikel terkait
- Sistem Desain Rumus Pengembang
- Model Kontribusi