Bagikan melalui

Mengembangkan ekstensi web

Layanan Azure DevOps | Azure DevOps Server | Azure DevOps Server 2022

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

Kategori Persyaratan
Izin Pemilik organisasi.
Alat - Node.js
- Alat pengemasan ekstensi: Jalankan npm install -g tfx-cli dari prompt perintah, yang 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.

  1. Buat direktori untuk menyimpan file yang diperlukan untuk ekstensi Anda:

    mkdir my-first-extension

  2. Inisialisasi manifes paket npm baru dari direktori ini:

    npm init -y

    File ini menjelaskan pustaka yang diperlukan oleh ekstensi Anda.

  3. Instal paket SDK Ekstensi Azure DevOps 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.

  1. 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"
        }
    ]
}

    Penting

    Properti public mengontrol apakah ekstensi terlihat oleh semua orang di Visual Studio Marketplace. Pastikan ekstensi Anda tetap rahasia selama pengembangan.

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

  3. Direktori ekstensi Anda akan terlihat seperti contoh berikut.

    |-- my-hub.html
|-- node_modules
    |-- @types
    |-- azure-devops-extension-sdk
|-- package.json
|-- vss-extension.json
    Butuh bantuan? Ajukan pertanyaan ke Komunitas Pengembang Azure DevOps Services .

Langkah berikutnya

Kemasi dan terbitkan ekstensi Anda

Konten terkait

  • Last updated on