Web uzantısı geliştirme

Makale
11/30/2021
Okumak için 5 dakika

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

yeni web deneyimleri, pano pencere öğeleri, derleme görevleri ve daha fazlasını içeren Azure DevOps geliştirmek için uzantıları kullanın. HTML, JavaScript ve CSS gibi standart teknolojileri kullanarak uzantılar geliştirebilirsiniz. bunlar, Visual Studio marketi 'nde paketlenir ve yayımlanır ve daha sonra bir kuruluşa yüklenebilir.

İpucu

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

Bu öğreticide, aşağıdaki görevler de dahil olmak üzere ilk Web uzantınızı oluşturma adımları kılavuzluk eder.

Gerekli araçları yükler
Uzantınızın yerel bir dizinini okuyun
Uzantı bildirim dosyası ve hub katkısı oluşturma
Uzantınızı Market 'Te paketleyin ve yayımlayın
Uzantınızı bir kuruluşta test etme

Yardıma mı ihtiyacınız var? Azure DevOps Services geliştirici Communitysorularınızı gönderin.

Önkoşullar

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

Bir kuruluş sahibisiniz. Kuruluşunuz yoksa, ücretsiz olarak bir kuruluş oluşturabilirsiniz.
Node.js'i yükler.
Bir komut isteminden çalıştırarak uzantı paketleme aracı 'nı (TFX) yükler npm install -g tfx-cli .

Dizin ve bildirim oluşturma

Uzantı, gerekli bir bildirim dosyasını içeren bir dosya kümesinden oluşur. bunu bir. vsix dosyasına paketleyip Visual Studio market 'te yayımlayabilirsiniz.

Uzantınız için gereken dosyaları tutacak bir dizin oluşturun:
```
mkdir my-first-extension
```
Bu dizinden yeni NPM paket bildirimini başlatın:
```
npm init -y
```
Bu dosya, uzantınızın gerektirdiği kitaplıkları açıklar.
Microsoft VSS web uzantısı SDK paketini yükleyip NPM paket bildiriminiz için kaydedin:
```
npm install vss-web-extension-sdk --save
```
Bu SDK, uzantınızın katıştırıldığı sayfayla iletişim kurmak için gerekli API 'Leri sağlayan bir JavaScript kitaplığı içerir.

Uzantı dizininizin kökünde adlı bir uzantı bildirim dosyası oluşturun vss-extension.json ve aşağıdaki içeriği 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

publicözelliği, uzantının Visual Studio marketi üzerinde herkes tarafından görülüp görülemeyeceğini denetler. Geliştirme sırasında uzantılarınızın özel kalmasını sağlayın.

my-hub.htmlWeb deneyimine katkıda bulunulan görünüm (hub olarak da bilinir) için aşağıdaki içerikle uzantı dizininizin kökünde adlı bir 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>

Uzantı dizininiz aşağıdaki örnekteki gibi görünmelidir.

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

Şimdi uzantınızı paketlemenize, yayımlamaya ve test etmeye hazırsınız.

Uzantınızı paketleme ve yayımlama

Yayımcı oluşturma

Microsoft 'un uzantıları da dahil olmak üzere tüm uzantılar bir yayımcının altındadır. Herkes bir yayımcı oluşturabilir ve bunun altında uzantıları yayımlayabilir. Ayrıca, bir takım uzantıyı geliştirmekte olduğu takdirde, başka kişilere yayımcıya erişim izni verebilirsiniz.

Visual Studio market yönetim portalındaoturum açın.
Zaten bir yayımcı yoksa, bir tane oluşturmanız istenir.
Publisher oluştur formunda, yayımcı adı alanına adınızı girin. KIMLIK alanı, adınız temelinde otomatik olarak ayarlanmalıdır:

Not

KIMLIĞI unutmayın. Uzantınızın bildirim dosyasında ayarlamanız gerekir.

Şimdi uzantınızı paketleyip Market 'e yayımlamayı (karşıya yüklemeyi) hazırsınız. Uzantınızı paketledikten sonra buraya döndürütireceğiz, bu tarayıcı penceresini açık tutun.

Uzantınızı paketleyin

Uzantı bildirim dosyanızı () açın vss-extension.json ve publisher alanın DEĞERINI yayımcının kimliği olarak ayarlayın. Örnek:
```
{
    ...
    "id": "my-first-extension",
    "publisher": "AnnetteNielsen",
    ...
}
```
VSS Web uzantıları SDK 'Sı için TFX gerekir. Henüz yüklemediyseniz, bir komut istemi açın ve aşağıdaki komutu çalıştırın.
```
npm install -g tfx-cli
```

Bir komut isteminden, uzantı dizininizden TFX aracının paketleme komutunu çalıştırın.

npx tfx-cli extension create

Bu tamamlandığında, uzantınızın başarıyla paketlenmediğini belirten bir ileti görü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

uzantınızı Upload

Yönetim portalından, sayfanın en üstündeki açılan listeden yayımcısını seçin.
Yeni uzantı' ı seçin ve ardından Azure DevOps' yi seçin.
Dosyanızı Sürükleyip Bırakın veya bir önceki paketleme adımında oluşturduğunuz VSıX dosyanızı bulmak için seçin ve ardından upload' yi seçin.

Birkaç saniye sonra, uzantınız yayımlanmış Uzantılar listesinde görünür. Endişelenmeyin, uzantı yalnızca sizin için görülebilir.

Uzantınızı yükler

Bir uzantıyı test etmek için, Azure DevOps bir kuruluşa yüklenmelidir. Yüklemenin, kuruluşun sahibi olması (veya gerekli izinlere sahip olması) gerekir. Uzantınız özel olduğundan, önce yüklemek istediğiniz kuruluşla paylaşılmalıdır.

Yönetim portalından, listeden uzantınızı seçin, sağ tıklayın ve uzantıya bağlı olarak Share/paylaşımı veya Yayımla/yayımdanKaldır ' ı seçin; Share = Yayımla ve paylaşımını kaldır = Yayımdan Kaldır.
Kuruluş' ı seçin ve ardından kuruluşunuzun adını girin. Enter tuşunu seçin.
Paneli kapatın.

Uzantınızın artık bu kuruluşa yüklenebilirler.
Market 'te, genel bakış sayfasını açmak için uzantınızı seçin.

Not

Uzantınızın özel olması nedeniyle, bu sayfayı yalnızca siz ve paylaşılan kuruluşun herhangi bir üyesi görebilir.

Yükleme işlemini başlatmak için ücretsiz olarak al ' ı seçin. Uzantıyı, açılan menüden paylaştığınız organizasyonu seçin.
Yükle'yi seçin.

Tebrikler! Uzantınız artık bir kuruluşa yüklenmiş ve test edilmeye hazır.

Uzantınızı deneyin

Uzantınız, proje düzeyi kod alanına "hub My" adlı bir görünüme katkıda bulundunuz. Şimdi bu sayfaya gidelim.

Yükleme sihirbazının sonunda kuruluşa git ' i seçerek, uzantının yüklendiği kuruluşun giriş sayfasına gidin ( ).

Üzerinde gezinmek için listelenen projelerden birini seçin:

Kuruluşunuzda hiç proje yoksa, bir tane oluşturmanız istenir.
Kod alanına ve ardından uzantınızın (hub 'Um) katkıda bulunduğu hub 'a gidin:

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

İ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

Uzantı örneklerini keşfetme