Membuat aplikasi Angular dengan API Azure Cosmos DB untuk MongoDB - Gunakan Mongoose untuk menyambungkan ke Azure Cosmos DB

  • Artikel

BERLAKU UNTUK: MongoDB

Tutorial multi-bagian ini menunjukkan cara membuat aplikasi Node.js dengan Express dan Angular, dan menghubungkannya ke akun Azure Cosmos DB Anda yang dikonfigurasi dengan API Azure Cosmos DB untuk MongoDB. Artikel ini menjelaskan Bagian 5 dari tutorial dan build pada Bagian 4.

Di bagian tutorial ini, Anda akan:

  • Gunakan Mongoose untuk menyambungkan ke Azure Cosmos DB.
  • Dapatkan string koneksi Azure Cosmos DB Anda.
  • Membuat model Hero.
  • Membuat layanan Hero untuk mendapatkan data Hero.
  • Menjalankan aplikasi secara lokal.

Jika Anda tidak memiliki langganan Azure, buat akun gratis sebelum memulai.

Prasyarat

  • Sebelum Anda memulai tutorial ini, selesaikan langkah-langkah di Bagian 4.

  • Tutorial ini mengharuskan Anda menjalankan CLI Azure secara lokal. Anda harus memasang CLI Azure versi 2.0 atau yang lebih baru. Jalankan az --version untuk menemukan versinya. Jika Anda perlu memasang atau meningkatkan, lihat Memasang CLI Azure 2.0.

  • 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 repo angular-cosmosdb di GitHub.

Menggunakan Mongoose untuk menyambungkan

Mongoose adalah pustaka pemodelan data objek (ODM) untuk MongoDB dan Node.js. Anda dapat menggunakan Mongoose untuk menyambungkan ke akun Azure Cosmos DB Anda. Gunakan langkah-langkah berikut untuk memasang Mongoose dan menyambungkan ke Azure Cosmos DB:

  1. Pasang modul mongoose npm, yang merupakan API yang digunakan untuk berbicara dengan MongoDB.

    npm install mongoose@5.13.15 --save

    Penting

    Azure Cosmos DB untuk MongoDB kompatibel dengan hingga versi 5.13.15 Mongoose. Untuk informasi selengkapnya, silakan lihat diskusi masalah di repositori Mongoose GitHub.

  2. Di folder server, buat file bernama mongo.js. Anda akan menambahkan detail sambungan akun Azure Cosmos DB Anda ke file ini.

  3. Salin kode berikut ke dalam file mongo.js. Kode ini menyediakan fungsionalitas berikut:

    • Membutuhkan Mongoose.

    • Mengesampingkan janji Mongo untuk menggunakan janji dasar yang dibangun ke dalam ES6/ES2015 dan versi yang lebih baru.

    • Panggilan pada file env yang memungkinkan Anda mengatur hal-hal tertentu berdasarkan apakah Anda berada dalam pementasan, produksi, atau pengembangan. Anda akan membuat file tersebut di bagian berikutnya.

    • Menyertakan string koneksi MongoDB, yang diatur dalam file env.

    • Membuat fungsi penghubung yang memanggil Mongoose.

      const mongoose = require('mongoose');
/**
* Set to Node.js native promises
* Per https://mongoosejs.com/docs/promises.html
*/
mongoose.Promise = global.Promise;

const env = require('./env/environment');

// eslint-disable-next-line max-len
const mongoUri = `mongodb://${env.accountName}:${env.key}@${env.accountName}.documents.azure.com:${env.port}/${env.databaseName}?ssl=true`;

function connect() {
mongoose.set('debug', true);
return mongoose.connect(mongoUri, { useMongoClient: true });
}

module.exports = {
connect,
mongoose
};

  4. Di panel Explorer, di bawah server, buat folder bernama lingkungan. Di folder lingkungan, buat file bernama environment.js.

  5. Dari mongo.js file, kita harus memasukkan nilai untuk parameter dbName, key, dan cosmosPort. Salin kode berikut ke dalam file environment.js:

    // TODO: replace if yours are different
module.exports = {
  accountName: 'your-cosmosdb-account-name-goes-here',
  databaseName: 'admin', 
  key: 'your-key-goes-here',
  port: 10255
};

Mendapatkan string koneksi

Untuk menyambungkan aplikasi Anda ke Azure Cosmos DB, Anda perlu memperbarui pengaturan konfigurasi untuk aplikasi. Gunakan langkah-langkah berikut untuk memperbarui pengaturan:

  1. Di portal Microsoft Azure, dapatkan nomor port, nama akun Azure Cosmos DB, dan nilai kunci primer untuk akun Azure Cosmos DB Anda.

  2. Dalam file environment.js, ubah nilai port menjadi 10255.

    const port = 10255;

  3. Dalam file environment.js, ubah nilai accountName ke nama akun Azure Cosmos DB yang Anda buat di Bagian 4 tutorial.

  4. Ambil kunci primer untuk akun Azure Cosmos DB dengan menggunakan perintah CLI berikut di jendela terminal:

    az cosmosdb list-keys --name <cosmosdb-name> -g myResourceGroup

    <cosmosdb-name> adalah nama akun Azure Cosmos DB yang Anda buat di Bagian 4 tutorial.

  5. Salin kunci primer ke file environment.js sebagai nilai key.

Sekarang aplikasi Anda memiliki semua informasi yang diperlukan untuk tersambung ke Azure Cosmos DB.

Membuat model Hero

Selanjutnya, Anda perlu menentukan skema data untuk disimpan di Azure Cosmos DB dengan menentukan file model. Gunakan langkah-langkah berikut untuk membuat model Hero yang menentukan skema data:

  1. Di panel Explorer, di bawah folder server, buat file bernama hero.model.js.

  2. Salin kode berikut ke dalam file hero.model.js. Kode ini menyediakan fungsionalitas berikut:

    • Membutuhkan Mongoose.
    • Membuat skema baru dengan ID, nama, dan ucapan.
    • Membuat model dengan menggunakan skema.
    • Mengekspor model.
    • Beri nama koleksi Heroes (bukan Heros, yang merupakan nama default koleksi berdasarkan aturan penamaan jamak Mongoose).
    const mongoose = require('mongoose');

const Schema = mongoose.Schema;

const heroSchema = new Schema(
  {
    id: { type: Number, required: true, unique: true },
    name: String,
    saying: String
  },
  {
    collection: 'Heroes'
  }
);

const Hero = mongoose.model('Hero', heroSchema);

module.exports = Hero;

Membuat model Hero

Setelah membuat model hero, Anda perlu menentukan layanan untuk membaca data, dan melakukan list, membuat, menghapus, dan memperbarui operasi. Gunakan langkah-langkah berikut untuk membuat layanan Hero yang meminta data dari Azure Cosmos DB:

  1. Di panel Explorer, di bawah folder server, buat file bernama hero.model.js.

  2. Salin kode berikut ke dalam file hero.model.js. Kode ini menyediakan fungsionalitas berikut:

    • Mendapatkan model yang Anda buat.
    • Menyambungkan ke database.
    • Membuat docqueryvariabel yang menggunakan metode hero.find untuk menentukan kueri yang mengembalikan semua hero.
    • Menjalankan kueri dengan fungsi docquery.exec dengan janji untuk mendapatkan daftar semua hero, di mana status respons adalah 200.
    • Mengirim kembali pesan kesalahan jika statusnya adalah 500.
    • Mendapatkan hero karena kita menggunakan modul.
    const Hero = require('./hero.model');

require('./mongo').connect();

function getHeroes() {
  const docquery = Hero.find({});
  docquery
    .exec()
    .then(heroes => {
      res.status(200).json(heroes);
    })
    .catch(error => {
      res.status(500).send(error);
      return;
    });
}

module.exports = {
  getHeroes
};

Mengonfigurasi rute

Selanjutnya, Anda perlu menyiapkan rute untuk menangani URL untuk mendapatkan, membuat, membaca, dan menghapus permintaan. Metode perutean menentukan fungsi panggilan balik (juga disebut fungsi handler). Fungsi-fungsi ini dipanggil ketika aplikasi menerima permintaan ke titik akhir dan metode HTTP yang ditentukan. Gunakan langkah-langkah berikut untuk menambahkan layanan Hero dan untuk menentukan rute Anda:

  1. Di Visual Studio Code, di file routes.js, komentari fungsi res.send yang mengirimkan data hero sampel. Tambahkan baris untuk memanggil fungsi heroService.getHeroes sebagai gantinya.

    router.get('/heroes', (req, res) => {
  heroService.getHeroes(req, res);
//  res.send(200, [
//      {"id": 10, "name": "Starlord", "saying": "oh yeah"}
//  ])
});

  2. Dalam file fileroutes.js, require layanan hero:

    const heroService = require('./hero.service');

  3. Dalam file hero.service.js, perbarui fungsi getHeroes untuk mengambil req dan parameter res sebagai berikut:

    function getHeroes(req, res) {

Mari kita luangkan waktu satu menit untuk meninjau dan berjalan melalui kode sebelumnya. Pertama, kita masuk ke index.js file, yang menyiapkan server simpul. Perhatikan bahwa file ini mengatur dan mendefinisikan rute Anda. Selanjutnya, file routes.js Anda berbicara dengan layanan hero dan memberitahunya untuk mendapatkan fungsi Anda, seperti getHeroes, dan meneruskan permintaan dan respons. File hero.service.js mendapatkan model dan tersambung ke Mongo. Kemudian file menjalankan getHeroes ketika kita memanggilnya, dan mengembalikan respons 200.

Menjalankan aplikasi

Selanjutnya, jalankan aplikasi dengan menggunakan langkah-langkah berikut:

  1. Di Visual Studio Code, simpan semua perubahan Anda. Di sebelah kiri, pilih tombol Debug , lalu pilih tombol Mulai Penelusuran Kesalahan.

  2. Sekarang beralih ke browser. Buka alat Pengembang dan tab Jaringan. . Buka http://localhost:3000, dan di sana Anda melihat aplikasi kami.

    Akun Azure Cosmos DB baru di portal Microsoft Azure

Belum ada hero yang tersimpan di aplikasi. Di bagian berikutnya dari tutorial ini, kita akan menambahkan fungsionalitas letakkan, pendorongan, dan hapus. Kemudian kita dapat menambahkan, memperbarui, dan menghapus hero dari UI dengan menggunakan koneksi Mongoose ke database Azure Cosmos DB kita.

Membersihkan sumber daya

Saat sumber daya tidak lagi diperlukan, Anda dapat menghapus grup sumber daya, akun Azure Cosmos DB, dan semua sumber daya terkait. Gunakan langkah-langkah berikut untuk menghapus grup sumber daya:

  1. Buka grup sumber daya tempat Anda membuat akun Azure Cosmos DB.
  2. Pilih Hapus grup sumber daya.
  3. Konfirmasi nama grup sumber daya untuk dihapus, dan pilih Hapus.

Langkah berikutnya

Lanjutkan ke Bagian 6 tutorial untuk menambahkan fungsi Posting, Letakkan, dan Hapus ke aplikasi:

Bagian 6: Menambahkan fungsi Posting, Letakkan, dan Hapus ke aplikasi

Apakah Anda sedang mencoba membuat perencanaan kapasitas untuk migrasi ke Azure Cosmos DB? Anda dapat menggunakan informasi tentang kluster database Anda yang ada saat ini untuk perencanaan kapasitas.