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.

Bahşiş

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

Önkoşullar

Aşağıdaki izinlere ve yüklemelere sahip olun.

  • Kuruluş sahibi olmanız gerekir. Kuruluşunuz yoksa, ücretsiz bir kuruluş oluşturabilirsiniz.
  • Node.jsyükleyin.
  • Uzantı paketleme aracını (TFX) yükleyin. Uzantınızı daha sonra paketlemek için kullandığınız bir komut isteminden çalıştırın.

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. Uzantı dizininizin kökünde aşağıdaki içeriğe sahip vss-extension.json adlı 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

    public özelliği, 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 aşağıdaki içeriğe sahip uzantı dizininizin kökünde my-hub.html adlı 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üzerinden sorularınızı gönderin.

Sonraki adımlar

Uzantınızı Paketleme ve Yayımlama