Hızlı Başlangıç: Tarayıcıda JavaScript v12 SDK'sı ile blobları yönetme

Azure Blob depolama, büyük miktarlarda yapılandırılmamış verileri depolamak için iyileştirilmiştir. Bloblar; görüntüler, belgeler, akış medyası ve arşiv verileri gibi metin veya ikili verileri tutabilirsiniz. Bu hızlı başlangıçta, tarayıcıda JavaScript kullanarak blobları yönetmeyi öğrenirsiniz. Blobları karşıya yükp listeledikten sonra kapsayıcıları oluştur ve silebilirsiniz.

Ek kaynaklar:

• API başvuru belgeleri
• Kitaplık kaynak kodu
• Paket (npm)
• Örnekler

Önkoşullar

• Etkin aboneliği olan bir Azure hesabı
• Azure Depolama hesabı
• Node.js
• Microsoft Visual Studio Code
• Tarayıcı Visual Studio Code için bir uzantı, örneğin:
  • Microsoft Edge için hata ayıklayıcı
  • Chrome için hata ayıklayıcısı
  • Firefox için Hata Ayıklayıcı

Nesne modeli

Blob depolama üç tür kaynak sunar:

• Depolama hesabı
• Depolama hesabı içinde bir kapsayıcı
• Kapsayıcıda bir blob

Aşağıdaki diyagramda bu kaynaklar arasındaki ilişki gösterilmektedir.

Bu hızlı başlangıçta, bu kaynaklarla etkileşim kurmak için aşağıdaki JavaScript sınıflarını kullanacağız:

• BlobServiceClient: BlobServiceClient sınıfı, Azure kaynak ve blob Depolama işlemeye olanak sağlar.
• ContainerClient: ContainerClient sınıfı, Azure kapsayıcılarını ve bloblarını Depolama olanak sağlar.
• BlockBlobClient: BlockBlobClient sınıfı, Azure bloblarını işleme Depolama sağlar.

Ayarlama

Bu bölümde, JavaScript için Azure Blob depolama istemci kitaplığı v12 ile çalışmak için bir proje hazırlamada size yol göstermektedir.

CORS kuralı oluşturma

Web uygulamanın istemciden blob depolamaya erişemeden önce, çıkış noktası arası kaynak paylaşımını veya CORS'yi etkinleştirmek içinhesabınız yapılandırmanız gerekir.

Depolama Azure portal depolama hesabını seçin. Yeni bir CORS kuralı tanımlamak için, Ayarlar bölümüne gidin ve CORS'yi seçin. Bu hızlı başlangıçta bir açık CORS kuralı oluşturacaksınız:

Aşağıdaki tabloda her bir CORS ayarı açıklanmakta ve kuralı tanımlamak için kullanılan değerler anlatılmaktadır.

Alanları bu tablodaki değerlerle doldurarak Kaydet düğmesine tıklayın.

Paylaşılan erişim imzası oluşturma

Paylaşılan erişim imzası (SAS), Azure Blob depolama isteklerini yetkilendirmek için tarayıcıda çalışan kod tarafından kullanılır. İstemci, SAS kullanarak hesap erişim anahtarı veya bağlantı dizesi kullanmadan depolama kaynaklarına erişimi yetkilendirebilir. SAS hakkında daha fazla bilgi edinmek için bkz. Paylaşılan erişim imzaları (SAS) kullanma.

Blob hizmeti SAS URL'sini almak için şu adımları izleyin:

1. Depolama Azure portal depolama hesabını seçin.
2. Güvenlik + ağ bölümüne gidin ve Paylaşılan erişim imzası'ı seçin.
3. Ekranı aşağı kaydırın ve SAS ve bağlantı dizesi oluştur düğmesine tıklayın.
4. Ekranı daha da aşağı kaydırın ve Blob hizmeti SAS URL'si alanını bulun
5. Blob hizmeti SAS URL'si alanını en sağ uçta yer alan Panoya kopyala düğmesine tıklayın.
6. Kopyalanan URL'yi gelecek bir adımda kullanmak üzere bir yere kaydedin.

Azure Blob depolama istemci kitaplığını ekleme

Yerel bilgisayarınızda azure-blobs-js-browser adlı yeni bir klasör oluşturun ve bu klasörü Visual Studio Code.

Terminalde >'ı seçerek terminalde bir konsol Visual Studio Code. Terminal penceresinde Node.js Paket Yöneticisi (npm) komutunu çalıştırarak package.json dosyası oluşturun.

npm init -y

Azure SDK birçok ayrı paketlerden oluşur. Kullanmak istediğiniz hizmetlere göre hangi paketlere ihtiyacınız olduğunu seçebilirsiniz. Paketi yüklemek npm için terminal penceresinde aşağıdaki komutu @azure/storage-blob çalıştırın.

npm install --save @azure/storage-blob

Azure Blob depolama istemci kitaplığını paketle

Bir web sitesinde Azure SDK kitaplıklarını kullanmak için kodunuzu tarayıcıda çalışacak şekilde dönüştürebilirsiniz. Bunu, paketleyici adlı bir araç kullanarak yaparsiniz. Bundling,Node.jskullanılarak yazılmış JavaScript kodunu alır ve tarayıcılar tarafından anlaşılan bir biçime dönüştürür. Bu hızlı başlangıç makalesi, Paket paketleyiciyi kullanır.

Terminal penceresinde aşağıdaki komutu npm çalıştırarak Bilgisayar'ı Yükleyin:

npm install -g parcel-bundler

Bu Visual Studio Code package.json dosyasını açın ve ve browserlist girişlerinin arasına bir license dependencies ekleyin. Bu, browserlist üç popüler tarayıcının en son sürümünü hedefler. Package.json dosyasının tam dosyası şu şekilde görünüyor:

{
  "name": "azure-blobs-javascript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "browserslist": [
    "last 1 Edge version",
    "last 1 Chrome version",
    "last 1 Firefox version"
  ],
  "dependencies": {
    "@azure/storage-blob": "^12.1.1"
  }
}

package.json dosyasını kaydedin.

Azure Blob depolama istemci kitaplığını içeri aktarma

JavaScript içinde Azure SDK kitaplıklarını kullanmak için paketi içeri @azure/storage-blob aktarın. Aşağıdaki JavaScript kodunu içeren Visual Studio Code yeni bir dosya oluşturun.

// index.js
const { BlobServiceClient } = require("@azure/storage-blob");
// Now do something interesting with BlobServiceClient

Dosyayı azure-blobs-js-browser dizinindeindex.jsolarak kaydedin.

HTML sayfasını uygulama

Visual Studio Code yeni bir dosya oluşturun ve aşağıdaki HTML kodunu ekleyin.

<!-- index.html -->
<!DOCTYPE html>
<html>

<body>
    <button id="create-container-button">Create container</button>
    <button id="delete-container-button">Delete container</button>
    <button id="select-button">Select and upload files</button>
    <input type="file" id="file-input" multiple style="display: none;" />
    <button id="list-button">List files</button>
    <button id="delete-button">Delete selected files</button>
    <p><b>Status:</b></p>
    <p id="status" style="height:160px; width: 593px; overflow: scroll;" />
    <p><b>Files:</b></p>
    <select id="file-list" multiple style="height:222px; width: 593px; overflow: scroll;" />
</body>

<script src="./index.js"></script>

</html>

Dosyayı Azure-Blobları-js-Browser klasörüne index.html olarak kaydedin.

Kod örnekleri

Örnek kod, JavaScript için Azure Blob depolama istemci kitaplığı ile aşağıdaki görevlerin nasıl gerçekleştirileceğini gösterir:

• UI öğeleri için alanları bildirin
• Depolama hesabı bilgilerinizi ekleyin
• İstemci nesneleri oluşturma
• Depolama kapsayıcısı oluşturma ve silme
• Blobları listeleme
• Upload blob 'lar
• Blob’ları silme

Tüm kod parçacıklarını index.js dosyasına ekledikten sonra kodu çalıştırırsınız.

UI öğeleri için alanları bildirin

index.js dosyasının sonuna aşağıdaki kodu ekleyin.

const createContainerButton = document.getElementById("create-container-button");
const deleteContainerButton = document.getElementById("delete-container-button");
const selectButton = document.getElementById("select-button");
const fileInput = document.getElementById("file-input");
const listButton = document.getElementById("list-button");
const deleteButton = document.getElementById("delete-button");
const status = document.getElementById("status");
const fileList = document.getElementById("file-list");

const reportStatus = message => {
    status.innerHTML += `${message}<br/>`;
    status.scrollTop = status.scrollHeight;
}

index.js dosyasını kaydedin.

Bu kod, her HTML öğesi için alanları bildirir ve reportStatus çıktıyı göstermek için bir işlev uygular.

Aşağıdaki bölümlerde, bir önceki bloğundan sonra her bir JavaScript kodu bloğunu ekleyin.

Depolama hesabı bilgilerinizi ekleyin

Depolama hesabınıza erişmek için kod ekleyin. Yer tutucusunu, daha önce oluşturduğunuz blob hizmeti SAS URL 'niz ile değiştirin. index.js dosyasının sonuna aşağıdaki kodu ekleyin.

// Update <placeholder> with your Blob service SAS URL string
const blobSasUrl = "<placeholder>";

index.js dosyasını kaydedin.

İstemci nesneleri oluşturma

Azure Blob depolama hizmetiyle etkileşim kurmak için BlobServiceClient ve containerclient nesneleri oluşturun. index.js dosyasının sonuna aşağıdaki kodu ekleyin.

// Create a new BlobServiceClient
const blobServiceClient = new BlobServiceClient(blobSasUrl);

// Create a unique name for the container by 
// appending the current time to the file name
const containerName = "container" + new Date().getTime();

// Get a container client from the BlobServiceClient
const containerClient = blobServiceClient.getContainerClient(containerName);

index.js dosyasını kaydedin.

Depolama kapsayıcısı oluşturma ve silme

Web sayfasındaki ilgili düğmeye tıkladığınızda depolama kapsayıcısını oluşturun ve silin. index.js dosyasının sonuna aşağıdaki kodu ekleyin.

const createContainer = async () => {
    try {
        reportStatus(`Creating container "${containerName}"...`);
        await containerClient.create();
        reportStatus(`Done.`);
    } catch (error) {
        reportStatus(error.message);
    }
};

const deleteContainer = async () => {
    try {
        reportStatus(`Deleting container "${containerName}"...`);
        await containerClient.delete();
        reportStatus(`Done.`);
    } catch (error) {
        reportStatus(error.message);
    }
};

createContainerButton.addEventListener("click", createContainer);
deleteContainerButton.addEventListener("click", deleteContainer);

index.js dosyasını kaydedin.

Blobları listeleme

Dosyaları Listele düğmesine tıkladığınızda depolama kapsayıcısının içeriğini listeleyin. index.js dosyasının sonuna aşağıdaki kodu ekleyin.

const listFiles = async () => {
    fileList.size = 0;
    fileList.innerHTML = "";
    try {
        reportStatus("Retrieving file list...");
        let iter = containerClient.listBlobsFlat();
        let blobItem = await iter.next();
        while (!blobItem.done) {
            fileList.size += 1;
            fileList.innerHTML += `<option>${blobItem.value.name}</option>`;
            blobItem = await iter.next();
        }
        if (fileList.size > 0) {
            reportStatus("Done.");
        } else {
            reportStatus("The container does not contain any files.");
        }
    } catch (error) {
        reportStatus(error.message);
    }
};

listButton.addEventListener("click", listFiles);

index.js dosyasını kaydedin.

Bu kod, Containerclient. listBlobsFlat işlevini çağırır ve döndürülen her blobitem adını almak için bir yineleyici kullanır. Her biri için BlobItem , dosyalar listesini Name özelliği değeri ile güncelleştirir.

Upload blob 'lar

dosyaları seçin ve karşıya yükle düğmesine tıkladığınızda dosyaları depolama kapsayıcısına Upload. index.js dosyasının sonuna aşağıdaki kodu ekleyin.

const uploadFiles = async () => {
    try {
        reportStatus("Uploading files...");
        const promises = [];
        for (const file of fileInput.files) {
            const blockBlobClient = containerClient.getBlockBlobClient(file.name);
            promises.push(blockBlobClient.uploadBrowserData(file));
        }
        await Promise.all(promises);
        reportStatus("Done.");
        listFiles();
    }
    catch (error) {
            reportStatus(error.message);
    }
}

selectButton.addEventListener("click", () => fileInput.click());
fileInput.addEventListener("change", uploadFiles);

index.js dosyasını kaydedin.

Bu kod, dosyaları seç ve karşıya yükle düğmesini gizli öğesine bağlar file-input . Düğme click olayı, dosya girişi olayını tetikler click ve dosya seçiciyi görüntüler. Dosyaları seçtikten ve iletişim kutusunu kapattıktan sonra, input olay oluşur ve uploadFiles işlev çağrılır. Bu işlev bir Blockblobclient nesnesi oluşturur, ardından seçtiğiniz her dosya için yalnızca tarayıcı uploadbrowserdata işlevini çağırır. Her çağrı bir döndürür Promise . Her biri Promise bir listeye eklenir, böylece dosyalar paralel olarak karşıya yüklenebilmesini sağlar.

Blob’ları silme

Seçili dosyaları sil düğmesine tıkladığınızda depolama kapsayıcısından dosyaları silin. index.js dosyasının sonuna aşağıdaki kodu ekleyin.

const deleteFiles = async () => {
    try {
        if (fileList.selectedOptions.length > 0) {
            reportStatus("Deleting files...");
            for (const option of fileList.selectedOptions) {
                await containerClient.deleteBlob(option.text);
            }
            reportStatus("Done.");
            listFiles();
        } else {
            reportStatus("No files selected.");
        }
    } catch (error) {
        reportStatus(error.message);
    }
};

deleteButton.addEventListener("click", deleteFiles);

index.js dosyasını kaydedin.

Bu kod, listede seçilen her dosyayı kaldırmak için Containerclient. deleteBlob işlevini çağırır. Daha sonra listFiles Dosya listesinin içeriğini yenilemek için daha önce gösterilen işlevi çağırır.

Kodu çalıştırma

kodu Visual Studio Code hata ayıklayıcı içinde çalıştırmak için tarayıcınıza yönelik launch. json dosyasını yapılandırın.

Hata ayıklayıcıyı yapılandırma

Visual Studio Code hata ayıklayıcı uzantısını ayarlamak için:

1. Çalıştır > yapılandırma Ekle ' yi seçin
2. Daha önce Önkoşullar bölümünde yüklediğiniz uzantıya bağlı olarak Edge, Chrome veya Firefox' u seçin.

Yeni bir yapılandırma eklendiğinde, bir Launch. JSON dosyası oluşturulur ve düzenleyicide açılır. Launch. JSON dosyasını, url değeri http://localhost:1234/index.html aşağıda gösterildiği gibi olacak şekilde değiştirin:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "edge",
            "request": "launch",
            "name": "Launch Edge against localhost",
            "url": "http://localhost:1234/index.html",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

Güncelleştirme sonrasında, Launch. JSON dosyasını kaydedin. bu yapılandırma hangi tarayıcının açılacağını ve hangi URL 'nin yükleneceğini Visual Studio Code söyler.

Web sunucusunu Başlat

yerel geliştirme web sunucusunu başlatmak için, Visual Studio Code içinde bir konsol penceresi açmak üzere > terminali görüntüle ' yi seçin ve sonra aşağıdaki komutu girin.

parcel index.html

Paket, kodunuzu paketler ve sayfanız için yerel bir geliştirme sunucusu başlatır http://localhost:1234/index.html . index.js yaptığınız değişiklikler, dosyayı her kaydettiğinizde geliştirme sunucusuna otomatik olarak oluşturulup yansıyacaktır.

Yapılandırılmış bağlantı noktası 1234' nin kullanılamayacağını belirten bir ileti alırsanız, komutunu çalıştırarak bağlantı noktasını değiştirebilirsiniz parcel -p <port#> index.html . Launch. JSON dosyasında, URL yolundaki bağlantı noktasını eşleşecek şekilde güncelleştirin.

Hata ayıklamayı Başlat

Hata ayıklayıcıda sayfayı çalıştırın ve BLOB depolamanın nasıl çalıştığına ilişkin bir fikir alın. Herhangi bir hata oluşursa, Web sayfasındaki durum bölmesinde alınan hata iletisi görüntülenir.

Visual Studio Code hata ayıklayıcı eklenmiş bir tarayıcıda index.html açmak için çalıştır ' ı seçin > hata ayıklamayı başlatın veya Visual Studio Code ' de F5 tuşuna basın.

Web uygulamasını kullanma

Azure Portal, aşağıdaki ADıMLARı izleyerek API çağrılarının sonuçlarını doğrulayabilirsiniz.

1. adım-kapsayıcı oluşturma

1. Web uygulamasında kapsayıcı oluştur' u seçin. Durum, bir kapsayıcının oluşturulduğunu gösterir.
2. Azure portal doğrulamak için depolama hesabınızı seçin. Blob hizmeti bölümünden Kapsayıcılar’ı seçin. Yeni kapsayıcının göründüğünü doğrulayın. ( Yenile' yi seçmeniz gerekebilir.)

2. adım-kapsayıcıya blob Upload

1. Yerel bilgisayarınızda, test.txt gibi bir test dosyası oluşturun ve kaydedin.
2. Web uygulamasında, Seç ve dosyaları karşıya yükle' ye tıklayın.
3. Test dosyanıza gidin ve Aç' ı seçin. Durum, dosyanın karşıya yüklendiğini ve dosya listesinin alındığını gösterir.
4. Azure portal, daha önce oluşturduğunuz yeni kapsayıcının adını seçin. Test dosyasının göründüğünü doğrulayın.

3. adım-blobu silme

1. Web uygulamasında, dosyalar altında, test dosyasını seçin.
2. Seçili dosyaları sil' i seçin. Durum, dosyanın silindiğini ve kapsayıcının dosya içermediğini belirtir.
3. Azure portal Yenile' yi seçin. BLOB bulunamadığını doğrulayın.

4. adım-kapsayıcıyı silme

1. Web uygulamasında kapsayıcıyı sil' i seçin. Durum, kapsayıcının silindiğini gösterir.
2. Azure portal, <account-name> | Kapsayıcılar bağlantısı portalı bölmesinin sol üst kısmında.
3. Yenile' yi seçin. Yeni kapsayıcı kaybolur.
4. Web uygulamasını kapatın.

Kaynakları temizleme

Web sunucusunu durdurmak için Visual Studio Code terminal konsoluna tıklayın ve CTRL+C tuşlarına basın.

Bu hızlı başlangıçta oluşturulan kaynakları temizlemek için Azure portal bölümüne gidin ve Önkoşullar bölümünde oluşturduğunuz kaynak grubunu silin.

Sonraki adımlar

Bu hızlı başlangıçta JavaScript kullanarak blobları karşıya yükleme, listele ve silme hakkında bilgi öğrendiniz. Ayrıca blob depolama kapsayıcısı oluşturma ve silme hakkında da bilgi edinebilirsiniz.

Öğreticiler, örnekler, hızlı başlangıçlar ve diğer belgeler için şu ziyaretleri ziyaret edin:

• Daha fazla bilgi için bkz. JavaScript için Azure Blob depolama istemci kitaplığı.
• Blob depolama örnek uygulamalarını görmek için Azure Blob depolama istemci kitaplığı v12 JavaScript örnekleri'ne gidin.