Aracılığıyla paylaş

Web uzantısı geliştirme

Azure DevOps Services | Azure DevOps Server | Azure DevOps Server 2022

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

Kategori Gereksinimler
İzinler Kuruluşun sahibi.
Araçlar - Node.js
- Uzantı paketleme aracı: Daha sonra uzantınızı npm install -g tfx-cli için kullanacağı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. Azure DevOps 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.

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

    Önemli

    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.

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

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

İlgili içerik

  • Last updated on