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

  • Makale

ŞUNLAR IÇIN GEÇERLIDIR: MongoDB

Bu çok parçalı videolu öğretici, React ön ucuyla hero izleme uygulaması oluşturmayı gösterir. Sunucu için Node ve Express kullanan 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ıklayarak ölçeklendirilme ve uygulamayı İnternet'e dağıtarak herkesin sık kullanılan hero'larını izlemesini sağlama konuları gösterilmiştir.

Azure Cosmos DB MongoDB ile kablo protokolü uyumluluğunu destekleyerek istemcilerin MongoDB yerine Azure Cosmos DB kullanmasına olanak tanır.

Bu çok bölümlü öğretici 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 Yanıt Verme, Güncelleştirme ve Silme işlemleri ekleme

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

Önkoşullar

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.

Proje ayarları

Bu videoda aynı projede Express ve React’in nasıl ayarlanacağı gösterilmiştir. Burke, daha sonra da projedeki kodları açıklar.

Kullanıcı Arabirimini oluşturma

Bu videoda React ile uygulamanın kullanıcı arabirimini (UI) nasıl oluşturacağınız gösterilmiştir.

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.

Uygulamada hero'ları okuma ve oluşturma

Bu videoda, Azure Cosmos DB veritabanında kahramanları okuma ve kahraman oluşturmanın yanı sıra Postman ve React kullanıcı arabirimini kullanarak bu yöntemleri test etme adımları gösterilmektedir.

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

Bu video, uygulamada hero'ları silmeyi ve güncelleştirmeyi, ardından güncelleştirmeleri kullanıcı arabiriminde görüntülemeyi gösterir.

Uygulamayı tamamlayın

Bu video, uygulamayı tamamlamayı ve kullanıcı arabirimini arka uç API'siyle bağlamayı gösterir.

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
  • Uygulamayı Postman kullanarak 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.