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.

Tip

Jelajahi sampel ekstensi dan dokumentasi terbaru tentang pengembangan ekstensi menggunakan SDK Ekstensi Azure DevOps.

Prasyarat

Anda harus memiliki izin dan penginstalan 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 Anda gunakan untuk mengemas ekstensi Anda nanti.

Membuat direktori dan manifes

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

    Catatan

    Properti public mengontrol apakah ekstensi terlihat oleh semua orang di Visual Studio Marketplace. Menjaga ekstensi Anda tetap privat 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? Posting pertanyaan ke Komunitas Pengembang Layanan Azure DevOps.

Langkah berikutnya

Mengemas dan menerbitkan ekstensi Anda