Web uzantısı geliştirme

Azure DevOps Services | Azure DevOps Server 2020 | Azure DevOps Server 2019 | TFS 2018 | TFS 2017

Uzantıları kullanarak yeni web Azure DevOps, pano pencere öğeleri, derleme görevleri ve daha fazlası ile verileri geliştirin. HTML, JavaScript ve CSS gibi standart teknolojileri kullanarak uzantılar geliştirebilirsiniz. Bunlar Visual Studio Market'te paket haline Visual Studio kuruluşa yüklensin.

İpucu

Azure DevOps uzantısı SDK 'sınıkullanarak uzantı geliştirmede en yeni belgelerimize göz atın.

Bu öğretici, aşağıdaki görevleri içeren ilk web uzantınızı oluşturma konusunda size yol gösterir.

  • Gerekli araçları yükleme
  • Uzantınız için yerel dizini okuma
  • Uzantı bildirim dosyası ve hub katkısı oluşturma
  • Uzantınızı markette paketle ve yayımla
  • Kuruluşta uzantınızı test etmek
Yardıma mı ihtiyacınız var? Azure DevOps Services geliştirici Communitysorularınızı gönderin.

Önkoşullar

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

  • Bir kuruluşun Sahibisiniz. Bir kuruluşa sahip değilsanız ücretsiz bir kuruluş oluşturabilirsiniz.
  • yükleme Node.js.
  • Bir komut isteminden komutunu çalıştırarak uzantı paketleme aracını (TFX) npm install -g tfx-cli yükleyin.

Dizin ve bildirim oluşturma

Uzantı, gerekli bildirim dosyasını içeren bir dizi dosyadan oluşur. Bunu bir .vsix dosyasına paketler ve markette Visual Studio yayımlar.

  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 bildirimini başlatabilirsiniz:

    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 vss-web-extension-sdk --save
    

    Bu SDK, uzantını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 vss-extension.json aşağıdaki içeriğe sahip 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/vss-web-extension-sdk/lib",
                "addressable": true,
                "packagePath": "lib"
            }
        ]
    }
    

    Not

    özelliği, public uzantının Market'te herkes tarafından görülip Visual Studio kontrol eder. Geliştirme sırasında uzantılarınızı özel olarak tutma.

  5. Uzantı dizininizin kökünde, web deneyimine katkıda bulunan görünümün (hub olarak da bilinir) içeriğiyle adlı bir my-hub.html dosya oluşturun.

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script src="lib/VSS.SDK.min.js"></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>
        <script type="text/javascript">
            VSS.init();
            VSS.ready(function() {
                document.getElementById("name").innerText = VSS.getWebContext().user.name;
            });
        </script>
    </head>
    <body>        
        <h1>Hello, <span id="name"></span></h1>
    </body>
    </html>
    
  6. Uzantı dizininiz aşağıdaki örnekteki gibi olmalıdır.

    |-- my-hub.html
    |-- node_modules
        |-- @types
        |-- vss-web-extension-sdk
    |-- package.json
    |-- vss-extension.json
    

Artık uzantınızı paket etmeye, yayımlamaya ve test etmeye hazır olursanız.

Uzantınızı paketle ve yayımla

Yayımcı oluşturma

Microsoft'un uzantıları dahil olmak üzere tüm uzantılar bir yayımcı altında yer almaktadır. Herkes bir yayımcı oluşturabilir ve bunun altında uzantılar yayımlar. Uzantıyı geliştiren bir ekip varsa diğer kişilerin yayımcınıza erişmesi için de izin veabilirsiniz.

  1. Visual Studio Market yönetim portalında oturum açın.

  2. Henüz bir yayımcınız yoksa, bir yayımcı oluşturmanız istenir.

  3. Bir Publisher oluştur formunda, yayımcı adı alanına kendi adını girin. Kimlik alanı, adınıza göre otomatik olarak ayarlanacaktır:

    Creat publisher

    Not

    Kimliği not etmek. Uzantının bildirim dosyasında bunu ayarlayabilirsiniz.

Artık uzantınızı pakete alma ve Market'te yayımlamaya (karşıya yükleme) hazır hale geldi. Uzantınızı paketledikten sonra buraya geri döneceğiniz için bu tarayıcı penceresini açık durumda tutabilirsiniz.

Uzantınızı paketle

  1. Uzantı bildirim dosyanızı ( vss-extension.json ) açın ve alanın değerini publisher yayımcının kimliğine ayarlayın. Örnek:

    {
        ...
        "id": "my-first-extension",
        "publisher": "AnnetteNielsen",
        ...
    }
    
  2. VSS Web Uzantıları SDK'sı için TFX gerekir. Henüz yüklememişsinizdir, bir komut istemi açın ve aşağıdaki komutu çalıştırın.

    npm install -g tfx-cli
    
  3. Bir komut isteminden, uzantı dizininize TFX aracının paketleme komutunu çalıştırın.

    npx tfx-cli extension create
    

    Tamamlandığında, uzantının başarıyla paketlendi olduğunu belirten bir ileti alırsınız:

    === Completed operation: create extension ===
    - VSIX: C:\my-first-extension\AnnetteNielsen.my-first-extension-1.0.0.vsix
    - Extension ID: my-first-extension
    - Extension Version: 1.0.0
    - Publisher: AnnetteNielsen
    

Upload uzantınızı genişletme

  1. Yönetim portalında,sayfanın üst kısmında açılan listeden yayımcınızı seçin.

  2. Yeni uzantı'ya ve ardından yeni uzantı'Azure DevOps.

    Visual Studio Marketplace new extension development
  3. Önceki paketleme adımında oluşturduğunuz VSIX dosyanızı bulmak için dosyanızı sürükleyip bırakın veya seçin ve ardından dosyanızı Upload.

    Upload için yeni bir uzantı Azure DevOps

    Birkaç saniye sonra uzantınız yayımlanan uzantılar listesinde görünür. Endişelenmeyin, uzantı yalnızca size görünür.

    Extension appears in the list of published extensions.

Uzantınızı yükleme

Bir uzantıyı test etmek için uzantının Azure DevOps. Yükleme, kuruluşun sahibi olmayı (veya gerekli izinlere sahip olmayı) gerektirir. Uzantınız özel olduğundan, önce bunu yüklemek istediğiniz kuruluşla paylaşılacaktır.

  1. Yönetim portalında, listeden uzantınızı seçin, sağ tıklayın ve uzantıya bağlı olarak Paylaş/Paylaşımı Kaldır veya Yayımla/Yayımdan Kaldır'ı seçin; Paylaş = Yayımla ve Paylaşımı Kaldır = Yayımdan kaldır.

    Select extension and choose Share.
  2. Kuruluş'ı seçin ve ardından kuruluş adını girin. Enter tuşunu seçin.

    Share with organization
  3. Paneli kapatın.

    Uzantınız artık bu kuruluşa yükleyebilir.

  4. Market'te uzantınızı seçerek genel bakış sayfasını açın.

Overview page
Overview page

Not

Uzantınız özel olduğundan, bu sayfayı yalnızca siz ve paylaşılan kuruluş üyelerinden herhangi biri görebilir.

  1. Yükleme işlemini başlatmak için Ücretsiz al'ı seçin. Açılan menüden uzantıyı paylaştığınız kuruluşu seçin.

    Instal extension panel
  2. Yükle'yi seçin.

Tebrikler! Uzantınız artık bir kuruluşa yüklenmiştir ve test için hazırdır.

Uzantınızı deneyin

Uzantınız, proje düzeyi Kod alanına "My Hub" adlı bir görünüm katkıda bulundu. Şimdi bu sayfaya gidelim.

  1. Yükleme sihirbazının sonunda Kuruluşa devam edin'i seçerek uzantının yüklandığı kuruluşun giriş sayfasına gidin ( https://dev.azure.com/{organization} ).
  1. Listelenen projelerden birini seçerek bu projeye gidin:

    select project

    Kuruluşta herhangi bir proje yoksa, bir tane oluşturmanız istenir.

  2. Kod alanına gidin ve uzantınız tarafından katkıda bulunan hub'a (Hub'ımım) gidin:

    Hub'im

  1. Kuruluş ayarları'ı seçin ve sonra yeni yüklenen uzantınızı görmek için Uzantılar'ı seçin.

    Organization settings, extensions page

İpucu

Uzantıyı yükledikten sonra tarayıcınızı yeniledikten emin olun. Yeni uzantı hub'ın sol bölmede, uzantıyı ekleyeni ana hub'ın altında olduğunu görüyorsanız. Yeni uzantı hub'larını görmüyorsanız, bu sorunu Azure DevOps Services Developer Community.

Uzantınız için hata ayıklama

Visual Studio veya Browser Geliştirici Araçları kullanarak uzantının hatasını ayıklamak ve kaynak kodunu her değiştirerek uzantıyı yeniden vermeden geliştirmeyi hızlandırmak için değişiklik bildirimi ekleme özelliğine ihtiyacınız baseUri vardır:

{
    ...
    "baseUri": "https://localhost:44300",
    ...
}

Bildirimi değiştirmek, yerel web sunucusu örneğinizin uzantısını yükler. Örneğin, Visual Studio'de IISExpress. Bildirimi değiştirdikten sonra bu hata ayıklama uzantısını yalnızca bir kez dağıtın ve yükleyin.

Not

Web sayfasının güvenli bir kaynaktan Azure DevOps için yerel web sunucuyu SSL modunda çalıştırın; aksi takdirde uzantı IFRAME yüklemesi sırasında tarayıcı konsolunda bir hata alırsınız.

Sonraki adımlar