Bagikan melalui

Membuat aplikasi MongoDB dengan React dan Azure Cosmos DB

  • Berlaku untuk: ✅ MongoDB

BERLAKU UNTUK: MongoDB

Tutorial video multi-bagian ini menunjukkan cara membuat aplikasi pelacakan hero dengan front-end React. Aplikasi ini menggunakan Node dan Express untuk server, terhubung ke database Azure Cosmos DB yang dikonfigurasi dengan API Azure Cosmos DB untuk MongoDB, lalu menghubungkan front-end React ke bagian server aplikasi. Tutorial ini juga menunjukkan cara melakukan penskalaan point-and-click Azure Cosmos DB di portal Azure dan cara menyebarkan aplikasi ke internet sehingga semua orang dapat melacak hero favorit mereka.

Azure Cosmos DB mendukung kompatibilitas protokol kawat dengan MongoDB, memungkinkan klien untuk menggunakan Azure Cosmos DB menggantikan MongoDB.

Tutorial multi-bagian ini mencakup tugas-tugas berikut:

  • Pendahuluan
  • Menyiapkan proyek
  • Membangun UI dengan React
  • Membuat akun Azure Cosmos DB menggunakan Azure CLI
  • Menggunakan Mongoose untuk menyambungkan ke Azure Cosmos DB
  • Menambahkan operasi React, Create, Update, dan Delete ke aplikasi

Ingin membangun aplikasi yang sama dengan Angular? Lihat seri video tutorial Sudut.

Prasyarat

  • Node.js
  • Alat pengujian HTTP
    • Kami merekomendasikan Insomnia, curl, Visual Studio, atau Invoke-RestMethod

Proyek Selesai

Dapatkan aplikasi lengkap dari GitHub.

Pendahuluan

Dalam video ini, Burke Holland memberikan pengantar Azure Cosmos DB dan memandu Anda melalui aplikasi yang dibuat dalam seri video ini.

Penyusunan proyek

Video ini memperlihatkan cara menyiapkan Express dan React dalam proyek yang sama. Burke kemudian menyediakan penelusuran kode dalam proyek.

Membangun UI

Video ini menunjukkan cara membuat antarmuka pengguna (UI) aplikasi dengan React.

Catatan

CSS yang dirujuk dalam video ini dapat ditemukan di repo react-cosmosdb GitHub.

Menyambungkan ke Azure Cosmos DB

Video ini menunjukkan cara membuat akun Azure Cosmos DB di portal Azure, memasang paket MongoDB dan Mongoose, lalu menghubungkan aplikasi ke akun yang baru dibuat menggunakan string koneksi Azure Cosmos DB.

Membaca dan membuat hero di aplikasi

Video ini menunjukkan cara membaca hero dan membuat hero di database Azure Cosmos DB, serta cara menguji metode tersebut menggunakan utilitas pengujian HTTP dan React UI.

Menghapus dan memperbarui hero di aplikasi

Video ini menunjukkan cara menghapus dan memperbarui hero dari aplikasi dan menampilkan pembaruan di UI.

Melengkapi aplikasi

Video ini menunjukkan cara menyelesaikan aplikasi dan menyelesaikan menghubungkan UI ke API backend.

Membersihkan sumber daya

Jika Anda tidak melanjutkan untuk menggunakan aplikasi ini, ikuti langkah-langkah berikut untuk menghapus semua sumber daya yang dibuat oleh tutorial ini di portal Microsoft Azure.

  1. Dari menu sebelah kiri di portal Azure, klik Grup sumber daya, lalu klik nama sumber daya yang Anda buat.
  2. Di halaman grup sumber daya, klik Hapus, ketik nama sumber daya yang akan dihapus dalam kotak teks, lalu klik Hapus.

Langkah berikutnya

Dalam tutorial ini, Anda telah belajar bagaimana cara:

  • Membuat aplikasi dengan React, Node, Express, and Azure Cosmos DB
  • Membuat akun Azure Cosmos DB
  • Menyambungkan aplikasi ke akun Azure Cosmos DB
  • Menguji aplikasi menggunakan utilitas pengujian HTTP
  • Menjalankan aplikasi dan menambahkan hero ke dalam database

Anda dapat melanjutkan tutorial berikutnya dan mempelajari cara mengimpor data MangoDB ke dalam Azure Cosmos DB

Mengimpor data MongoDB ke dalam Azure Cosmos DB

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

  • Last updated on