Bagikan melalui

Mengembangkan ekstensi web

  • Artikel

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.

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. Dari direktori ini, inisialisasi manifes paket npm baru:

    npm init -y

    File ini menjelaskan pustaka yang diperlukan oleh ekstensi Anda.

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

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

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

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