MongoDB için Azure Cosmos DB API'siyle Angular uygulaması oluşturma - Uygulamaya CRUD işlevleri ekleme

  • Makale

ŞUNLAR IÇIN GEÇERLIDIR: MongoDB

Bu çok bölümlü öğreticide Express ve Angular ile Node.js yazılmış yeni bir uygulamanın nasıl oluşturulacağı ve ardından MongoDB için Azure Cosmos DB API'siyle yapılandırılan Azure Cosmos DB hesabınıza nasıl bağlanacağı gösterilmektedir. Öğreticinin 6. bölümünde 5. bölümdeki konular genişletilir ve aşağıdaki görevler yer alır:

  • Hero hizmeti için Post, Put ve Delete işlevleri oluşturma
  • Uygulamayı çalıştırma

Önkoşullar

Öğreticinin bu bölümüne başlamadan önce öğreticinin 5. bölümündeki adımları tamamladığınızdan emin olun.

İpucu

Bu öğretici, uygulamanızı adım adım oluşturmanızı sağlayacak adımlarla size yol gösterir. Tamamlanmış projeyi indirmek isterseniz, tamamlanmış uygulamayı github'daki angular-cosmosdb deposundan alabilirsiniz.

Hero hizmetine bir Post işlevi ekleme

  1. Visual Studio Code'da, Bölme Düzenleyicisi düğmesine basarak routes.js açın ve yan yana hero.service.js.

    Routes.js’de 7. satırda, hero.service.js’nin 5. satırındaki getHeroes işlevinin çağrıldığına dikkat edin. Post, put ve delete işlevleri için de aynı eşleşmeyi oluşturmamız gerekiyor.

    Visual Studio Code’da routes.js ve hero.service.js

    Hero hizmetini kodlayarak başlayalım.

  2. hero.service.js’de getHeroes işlevinden sonra, module.exports bölümünden önce aşağıdaki kodu kopyalayın. Bu kod:

    • Yeni bir hero göndermek için hero modelini kullanır.
    • Bir hata olup olmadığını görmek için yanıtları denetler ve 500 durum değeri döndürür.
    function postHero(req, res) {
  const originalHero = { uid: req.body.uid, name: req.body.name, saying: req.body.saying };
  const hero = new Hero(originalHero);
  hero.save(error => {
    if (checkServerError(res, error)) return;
    res.status(201).json(hero);
    console.log('Hero created successfully!');
  });
}

function checkServerError(res, error) {
  if (error) {
    res.status(500).send(error);
    return error;
  }
}

  3. hero.service.js’de, module.exports değerini yeni postHero işlevini içerecek şekilde güncelleştirin.

    module.exports = {
  getHeroes,
  postHero
};

  4. routes.js’de get yönlendiricisinden sonra post işlevi için bir yönlendirici ekleyin. Bu yönlendirici aynı anda bir hero gönderir. Yönlendirici dosyasını böyle yapılandırdığınızda tüm kullanılabilir API uç noktalarını rahatça görebilirsiniz ve asıl iş hero.service.js dosyası tarafından yapılır.

    router.post('/hero', (req, res) => {
  heroService.postHero(req, res);
});

  5. Uygulamayı çalıştırarak her şeyin çalıştığından emin olun. Visual Studio Code tüm değişikliklerinizi kaydedin, sol taraftaki Hata Ayıkla düğmesini ve ardından Hata Ayıklamayı Başlat düğmesini seçin.

  6. Şimdi İnternet tarayıcınıza dönün ve çoğu makinede F12 tuşuna basarak açılan Geliştirici Araçları Ağı sekmesini açın. Ağ üzerinden yapılan çağrıları izlemek için http://localhost:3000 adresine gidin.

    Chrome’da ağ etkinliğini gösteren ağ sekmesi

  7. Yeni Hero Ekle düğmesini seçerek yeni bir hero ekleyin. "999" kimliğini, "Fred" adını ve "Hello" ifadesini girin, ardından Kaydet’i seçin. Ağ sekmesinde yeni bir hero için POST isteği gönderdiğinizi görmeniz gerekir.

    Get ve Post işlevleri için ağ etkinliğini gösteren Chrome ağ sekmesi

    Şimdi geri dönüp uygulamaya Put ve Delete işlevlerini ekleyelim.

Put ve Delete işlevlerini ekleme

  1. routes.js’de gönderme yönlendiricisinden sonra put ve delete yönlendiricilerini ekleyin.

    router.put('/hero/:uid', (req, res) => {
  heroService.putHero(req, res);
});

router.delete('/hero/:uid', (req, res) => {
  heroService.deleteHero(req, res);
});

  2. hero.service.js’de checkServerError işlevinden sonra aşağıdaki kodu kopyalayın. Bu kod:

    • put ve delete işlevlerini oluşturur
    • Heronun bulunup bulunmadığını denetler
    • Hata işlemeyi gerçekleştirir
    function putHero(req, res) {
  const originalHero = {
    uid: parseInt(req.params.uid, 10),
    name: req.body.name,
    saying: req.body.saying
  };
  Hero.findOne({ uid: originalHero.uid }, (error, hero) => {
    if (checkServerError(res, error)) return;
    if (!checkFound(res, hero)) return;

   hero.name = originalHero.name;
    hero.saying = originalHero.saying;
    hero.save(error => {
      if (checkServerError(res, error)) return;
      res.status(200).json(hero);
      console.log('Hero updated successfully!');
    });
  });
}

function deleteHero(req, res) {
  const uid = parseInt(req.params.uid, 10);
  Hero.findOneAndRemove({ uid: uid })
    .then(hero => {
      if (!checkFound(res, hero)) return;
      res.status(200).json(hero);
      console.log('Hero deleted successfully!');
    })
    .catch(error => {
      if (checkServerError(res, error)) return;
    });
}

function checkFound(res, hero) {
  if (!hero) {
    res.status(404).send('Hero not found.');
    return;
  }
  return hero;
}

  3. hero.service.js’de yeni modülleri dışarı aktarın:

    module.exports = {
  getHeroes,
  postHero,
  putHero,
  deleteHero
};

  4. Kodu güncelleştirdiğimize göre, Visual Studio Code'da Yeniden Başlat düğmesini seçin.

  5. İnternet tarayıcınızda sayfayı yenileyin ve Yeni Hero Ekle düğmesini seçin. "9" kimliğine, "Starlord" adına ve "Hi" metnine sahip bir hero ekleyin. Yeni heroyu kaydetmek için Kaydet düğmesini seçin.

  6. Şimdi Starlord adlı heroyu seçin ve "Hi" ifadesini "Bye" ifadesiyle değiştirip Kaydet düğmesini seçin.

    Artık yükü görmek için ağ sekmesinde kimliği seçebilirsiniz. Yükte ifadenin "Bye" olarak ayarlandığını görebilirsiniz.

    Heroes uygulaması ve yükü gösteren Ağ sekmesi

    Kullanıcı arabiriminde herolardan birini silin ve silme işlemini tamamlamak için gereken süreye bakın. Bunu "Fred" adlı hero için "Sil" düğmesini seçerek deneyebilirsiniz.

    Heroes uygulaması ve işlevleri tamamlamak için gereken zamanı gösteren Ağ sekmesi

    Sayfayı yenilerseniz Ağ sekmesi heroları almak için gereken zamanı gösterir. Bu süreler kısa olsa da, büyük ölçüde verilerinizin dünyanın neresinde olduğuna ve kullanıcılarınıza yakın bir konuma coğrafi çoğaltma olanağınıza bağlıdır. Coğrafi çoğaltma hakkında daha fazla bilgiyi, yakında yayınlanacak bir sonraki öğreticide bulabilirsiniz.

Sonraki adımlar

Öğreticinin bu bölümünde aşağıdakileri yaptınız:

  • Uygulamaya Post, Put ve Delete işlevleri ekleme

Bu öğretici serisine eklenecek videolar için burayı daha sonra tekrar ziyaret edin.

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.