Aracılığıyla paylaş

Web uzantısı geliştirme

  • Makale

Azure DevOps Services | Azure DevOps Server 2022 - Azure DevOps Server 2019

Azure DevOps'yi yeni web deneyimleri, pano pencere öğeleri, derleme görevleri ve daha fazlası ile geliştirmek için uzantıları kullanın. HTML, JavaScript ve CSS gibi standart teknolojileri kullanarak uzantılar geliştirebilirsiniz. Bu öğretici, Azure DevOps için bir web uzantısı oluşturma işleminde size yol gösterir.

İpucu

Azure DevOps Uzantı SDK'sını kullanarak uzantı örneklerini ve uzantı geliştirmeyle ilgili en yeni belgeleri keşfedin.

Önkoşullar

Aşağıdaki izinlere ve yüklemelere sahip olmanız gerekir.

Dizin ve bildirim oluşturma

Uzantı, gerekli bildirim dosyasını içeren bir dosya kümesinden oluşur. Bunu bir .vsix dosyasına paketleyip Visual Studio Market'te yayımlarsınız.

  1. Uzantınız için gereken dosyaları tutmak için bir dizin oluşturun:

    mkdir my-first-extension

  2. Bu dizinden yeni bir npm paket bildirimi başlatın:

    npm init -y

    Bu dosya, uzantınız için gereken kitaplıkları açıklar.

  3. Microsoft VSS Web Uzantısı SDK paketini yükleyin ve npm paket bildiriminize kaydedin:

    npm install azure-devops-extension-sdk --save

    Bu SDK, uzantınızın ekli olduğu sayfayla iletişim kurmak için gereken API'leri sağlayan bir JavaScript kitaplığı içerir.

  4. Aşağıdaki içeriğe sahip uzantı dizininizin kökünde adlı vss-extension.json bir uzantı bildirim dosyası oluşturun:

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

    Not

    özelliği, public uzantının Visual Studio Market'te herkes tarafından görünür olup olmadığını denetler. Geliştirme sırasında uzantılarınızı gizli tutun.

  5. Web deneyimine katkıda bulunan görünüme (hub olarak da bilinir) yönelik olan aşağıdaki içeriğe sahip uzantı dizininizin kökünde adlı my-hub.html bir dosya oluşturun.

    <!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. Uzantı dizininiz aşağıdaki örnekteki gibi görünmelidir.

    |-- my-hub.html
|-- node_modules
    |-- @types
    |-- azure-devops-extension-sdk
|-- package.json
|-- vss-extension.json
Yardıma mı ihtiyacınız var? Azure DevOps Services Geliştirici Topluluğu sorular gönderin.

Sonraki adımlar

Uzantınızı paketleme ve yayımlama