React ve Azure Cosmos DB ile bir MongoDB uygulaması oluşturma

Aşağıdakiler için geçerlidir: MongoDB

Önemli

Mevcut bir MongoDB uygulamasını geçirmek mi yoksa MongoDB Sorgu Dili (MQL) özelliklerini kullanmak mı istiyorsunuz? Azure DocumentDB'ye göz atın.

99,999% kullanılabilirlik hizmet düzeyi sözleşmesi (SLA), anında otomatik ölçeklendirme ve birden çok bölgede otomatik yük devretme ile yüksek ölçekli senaryolar için bir veritabanı çözümü mü arıyorsunuz? NoSQL için Azure Cosmos DB'ye göz önünde bulundurun.

Bu çok parçalı videolu öğretici, React ön yüzü kullanarak bir kahraman takip uygulaması oluşturmayı gösterir. Sunucu için Node ve Express kullanılan uygulama, MongoDB için Azure Cosmos DB API'siyle yapılandırılmış Azure Cosmos DB veritabanına bağlanır ve ardından React ön ucunu uygulamanın sunucu bölümüne bağlar. Öğreticide ayrıca Azure Portal'da Azure Cosmos DB'nin tıklama ve seçme yöntemiyle nasıl ölçeklendirileceği ve uygulamanın İnternet'e dağıtılarak herkesin favori kahramanlarını izlemesinin nasıl sağlanacağı gösterilmiştir.

Azure Cosmos DB , MongoDB ile kablo protokolü uyumluluğunu destekleyerek istemcilerin MongoDB yerine Azure Cosmos DB kullanmasını sağlar.

Bu çok parçalı kılavuz aşağıdaki görevleri içerir:

• Giriş
• Projeyi ayarlama
• React ile kullanıcı arabirimini oluşturma
• Azure Portal’ı kullanarak Azure Cosmos DB hesabı oluşturma
• Azure Cosmos DB’ye bağlanmak için Mongoose kullanma
• Uygulamaya React, Oluşturma, Güncelleştirme ve Silme işlemleri ekleyin

Aynı uygulamayı Angular ile oluşturmak ister misiniz? Bkz. Angular öğretici video serisi.

Önkoşullar

• Node.js: v14.x veya üzeri (LTS önerilir). node --version ile doğrulayın.
• HTTP test aracı: Uykusuzluk, curl, Visual Studio veya PowerShell Invoke-RestMethod. Aracı bir kez çalıştırarak kullanılabilirliği doğrulayın (örneğin, curl --version).

Tamamlanmış Proje

Tamamlanmış uygulamayı github'dan alabilirsiniz.

Giriş

Bu videoda, Burke Holland Azure Cosmos DB’yi tanıtır ve bu video serisindeki uygulamayı oluşturma konusunda size yol gösterir.
Başarı denetimi: Genel uygulama mimarisini (React UI, Node/Express API, MongoDB için Azure Cosmos DB) anlarsınız.

Proje kurulumu

Bu videoda aynı projede Express ve React’in nasıl ayarlanacağı gösterilmiştir. Burke, daha sonra da projedeki kodları açıklar.
Başarı denetimi: Proje, kullanarak npm start (veya eşdeğer başlangıç betiğiyle) hatasız olarak yerel olarak çalışır.

Kullanıcı Arabirimini oluştur

Bu videoda React ile uygulamanın kullanıcı arabirimini (UI) nasıl oluşturacağınız gösterilmiştir.
Başarı denetimi: React kullanıcı arabirimi tarayıcıda görüntülenir ve kahramanlar listesi düzenini gösterir.

Not

Bu videoda başvurulan CSS react-cosmosdb GitHub deposunda bulunabilir.

Azure Cosmos DB’ye bağlanma

Bu videoda, Azure portalında bir Azure Cosmos DB hesabı oluşturma, MongoDB ve Mongoose paketlerini yükleme ve ardından uygulamayı Azure Cosmos DB bağlantı dizesini kullanarak yeni oluşturulan hesapla bağlama gösterilmiştir.

Örnek: Mongoose ile bağlanma

const mongoose = require("mongoose");

mongoose.connect(process.env.MONGODB_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

mongoose.connection.on("connected", () => {
  console.log("Connected to Azure Cosmos DB for MongoDB");
});

Doğrulama: Uygulamayı başlatın ve konsol çıktısının Connected to Azure Cosmos DB for MongoDB olduğunu onaylayın.

Uygulamada kahramanları okuma ve oluşturma

Bu videoda, Azure Cosmos DB veritabanında kahramanları okuma ve kahraman oluşturmanın yanı sıra bir HTTP test yardımcı programı ve React kullanıcı arabirimi kullanarak bu yöntemleri test etme adımları gösterilmektedir.
Başarı denetimi: Hero oluşturmak HTTP 201 (veya 200) döndürür ve yeni hero kullanıcı arabirimi listesinde görünür.

Uygulamada hero'ları silme ve güncelleştirme

Bu video, uygulamada kahramanları silmeyi ve güncellemeyi, ardından güncellemeleri kullanıcı arayüzünde görüntülemeyi gösterir.
Başarı denetimi: Güncelleştirmeler ve silme işlemleri kullanıcı arabirimine hemen yansıtılır ve veritabanında kalıcı hale gelir.

Uygulamayı tamamlayın

Bu video, uygulamayı tamamlamayı ve kullanıcı arabirimini arka uç API'siyle bağlamayı gösterir.
Başarı denetimi: Tam oluşturma, okuma, güncelleştirme ve silme iş akışı uçtan uca çalışır.

Kaynakları temizleme

Bu uygulamayı kullanmaya devam etmeyecekseniz aşağıdaki adımları kullanarak Azure portalında bu öğretici tarafından oluşturulan tüm kaynakları silin:

1. Azure portalında sol taraftaki menüden, Kaynak grupları'na ve ardından oluşturduğunuz kaynağın adına tıklayın.
2. Kaynak grubu sayfanızda, Sil'e tıklayın, metin kutusuna silinecek kaynağın adını yazın ve ardından Sil'e tıklayın.

Sonraki adımlar

Bu öğreticide, şunların nasıl yapıldığını öğrendiniz:

• React, Node, Express ve Azure Cosmos DB ile uygulama oluşturma
• Azure Cosmos DB hesabı oluşturma
• Uygulamayı Azure Cosmos DB hesabına bağlama
• HTTP test yardımcı programı kullanarak uygulamayı test etme
• Uygulamayı çalıştırma ve veritabanına hero'ları ekleme

Bir sonraki öğreticiye geçip MongoDB verilerini Azure Cosmos DB’de içeri aktarmayı öğrenin.

Azure Cosmos DB’ye MongoDB verileri aktarma

Azure Cosmos DB'ye geçiş için kapasite planlaması yapmaya mı çalışıyorsunuz? Kapasite planlaması için mevcut veritabanı kümeniz hakkındaki bilgileri kullanabilirsiniz.

• Tek bildiğiniz mevcut veritabanı kümenizdeki sanal çekirdek ve sunucu sayısıysa, sanal çekirdek veya vCPU kullanarak istek birimlerini tahmin etme hakkında bilgi edinin
• Geçerli veritabanı iş yükünüz için tipik istek oranlarını biliyorsanız Azure Cosmos DB kapasite planlayıcısı kullanarak istek birimlerini tahmin etme hakkında bilgi edinin