Buat aplikasi Angular dengan Azure Cosmos DB API untuk MongoDB - Tambahkan fungsi CRUD ke aplikasi

  • Artikel

BERLAKU UNTUK: MongoDB

Tutorial multi-bagian ini menunjukkan cara membuat aplikasi baru yang ditulis dalam Node.js dengan Express dan Angular lalu menyambungkannya ke akun Azure Cosmos DB Anda yang dikonfigurasi dengan API Azure Cosmos DB untuk MongoDB. Bagian 6 dari tutorial dibuat pada Bagian 5 dan mencakup tugas-tugas berikut:

  • Membuat fungsi Posting, Letakkan, dan Hapus untuk layanan hero
  • Menjalankan aplikasi

Prasyarat

Sebelum memulai bagian tutorial ini, pastikan Anda telah menyelesaikan langkah-langkah di Bagian 5 tutorial.

Tip

Tutorial ini memandu Anda melalui langkah-langkah untuk membangun aplikasi selangkah demi selangkah. Jika Anda ingin mengunduh proyek yang sudah selesai, Anda bisa mendapatkan aplikasi yang diselesaikan dari repositori angular-cosmosdb di GitHub.

Menambahkan fungsi Posting ke layanan hero

  1. Di Visual Studio Code, buka routes.js dan hero.service.js berdampingan dengan menekan tombol Pisahkan Editor .

    Lihat bahwa routes.js baris 7 memanggil getHeroes fungsi pada baris 5 di hero.service.js. Kita perlu membuat pasangan yang sama ini untuk fungsi posting, letakkan, dan hapus.

    routes.js and hero.service.js di Visual Studio Code

    Mari kita mulai dengan mengodekan layanan hero.

  2. Salin kode berikut ke hero.service.js setelah fungsi getHeroes dan sebelum module.exports. Kode ini:

    • Menggunakan model hero untuk memposting hero baru.
    • Memeriksa respons untuk melihat apakah ada kesalahan dan mengembalikan nilai status 500.
    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. Di hero.service.js, perbarui module.exports untuk menyertakan fungsi baru postHero.

    module.exports = {
  getHeroes,
  postHero
};

  4. Di routes.js, tambahkan router untuk postfungsi setelah get router. Router ini memposting satu hero pada satu waktu. Penyusunan file router dengan cara ini jelas menunjukkan kepada Anda semua titik akhir API yang tersedia dan meninggalkan pekerjaan nyata ke file hero.service.js.

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

  5. Periksa apakah semuanya berfungsi dengan menjalankan aplikasi. Di Visual Studio Code, simpan semua perubahan Anda, pilih tombol Debug di sisi kiri, lalu pilih tombol Mulai Penelusuran Kesalahan .

  6. Sekarang kembali ke browser internet Anda dan buka tab Jaringan alat Pengembang dengan menekan F12 di sebagian besar mesin. Navigasikan ke http://localhost:3000 untuk melihat panggilan yang dilakukan melalui jaringan.

    Tab Jaringan di Chrome yang menampilkan aktivitas jaringan

  7. Tambahkan hero baru dengan memilih tombol Tambah Hero Baru. Masukkan ID "999", nama "Fred", dan kata "Halo", lalu pilih Simpan. Anda akan melihat di tab Jaringan bahwa Anda telah mengirim permintaan POST untuk hero baru.

    Tab Jaringan di Chrome yang menampilkan aktivitas jaringan untuk fungsi Dapatkan dan Posting

    Sekarang mari kita kembali dan menambahkan fungsi Letakkan and Hapus ke aplikasi.

Tambahkan fungsi Letakkan and Hapus

  1. Di routes.js, tambahkan router put dan delete setelah post router.

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

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

  2. Salin kode berikut ke hero.service.js setelah fungsi checkServerError. Kode ini:

    • Membuat fungsi put dan delete
    • Melakukan pemeriksaan apakah hero ditemukan
    • Melakukan penanganan kesalahan
    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. Di hero.service.js, ekspor modul baru:

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

  4. Setelah memperbarui kode, pilih tombol Mulai Ulang di Visual Studio Code.

  5. Refresh halaman di browser internet Anda dan pilih tombol Tambahkan Hero Baru. Tambahkan hero baru dengan ID "9", nama "Starlord", dan kata "Hai". Pilih tombol Simpan untuk menyimpan hero baru.

  6. Sekarang pilih hero Starlord, dan ubah pernyataan dari "Hai" menjadi "Sampai Jumpa", lalu pilih tombol Simpan.

    Anda sekarang dapat memilih ID di dalam tab Jaringan untuk menampilkan payload. Anda dapat melihat di payload bahwa pernyataan sekarang diatur ke "Sampai Jumpa".

    Aplikasi Heroes dan tab Jaringan memperlihatkan payload

    Anda juga dapat menghapus salah satu hero di UI, dan melihat waktu yang diperlukan untuk menyelesaikan operasi penghapusan. Cobalah dengan memilih tombol "Hapus" untuk hero bernama "Fred".

    Aplikasi Heroes dan tab Jaringan memperlihatkan waktu untuk menyelesaikan fungsi

    Jika Anda melakukan refresh halaman, tab Jaringan akan menampilkan waktu yang diperlukan untuk mendapatkan hero. Meskipun waktunya cepat, hal ini terutama tergantung pada di mana data Anda berada di dunia dan kemampuan Anda untuk mereplikasinya secara geografis di area yang dekat dengan pengguna Anda. Anda dapat mengetahui lebih lanjut tentang geo-replikasi di tutorial berikutnya, yang akan segera dirilis.

Langkah berikutnya

Di bagian tutorial ini, Anda telah melakukan hal berikut:

  • Menambahkan fungsi Posting, Letakkan, dan Hapus ke aplikasi

Periksa kembali segera untuk video tambahan dalam rangkaian tutorial ini.

Mencoba melakukan perencanaan kapasitas untuk migrasi ke Azure Cosmos DB? Anda dapat menggunakan informasi tentang kluster database Anda yang ada saat ini untuk perencanaan kapasitas.