MongoDB Realm Phản ứng

Hôm nay, chúng ta sẽ tìm hiểu cách triển khai Xác thực mật khẩu email đầy đủ trong React bằng cách tận dụng MongoDB Realm bằng cách nhập một dòng mã phía máy chủ

Thiết lập ứng dụng React của bạn

1. Hãy tạo một ứng dụng React hoàn toàn mới. Khởi chạy thiết bị đầu cuối của bạn và thực hiện lệnh sau, trong đó “expengo” sẽ là tên của ứng dụng của chúng tôi

npx create-react-app expengo

Hãy chắc chắn rằng bạn có nút. js & npm được cài đặt trên máy của bạn

1. Hãy cài đặt Realm-web vào ứng dụng React của chúng ta

MongoDB Realm Web SDK cho phép các ứng dụng dựa trên trình duyệt truy cập dữ liệu được lưu trữ trong MongoDB Atlas và tương tác với các dịch vụ MongoDB Realm như Chức năng, xác thực & GraphQL

npm install realm-web

Hãy cài đặt một vài gói npm khác để làm cho cuộc sống của chúng ta dễ dàng hơn

1. React-router-dom để quản lý các yêu cầu liên quan đến điều hướng trong ứng dụng của chúng tôi, hãy chạy

npm install react-router-dom

2. UI UI để giúp chúng tôi xây dựng các thành phần đẹp mà không cần viết nhiều CSS, hãy chạy

npm install @mui/material @emotion/styled @emotion/react

Bây giờ, hãy tạo 3 thư mục mới với các tệp sau như bên dưới

1. /src/trang
2. /src/trang/Trang chủ. trang. js
3. /src/pages/PrivateRoute. trang. js
4. /src/trang/Đăng nhập. trang. js
5. /src/pages/Đăng ký. trang. js
6. /src/bối cảnh
7. /src/bối cảnh/người dùng. định nghĩa bài văn. js
8. /src/vương quốc
9. /src/vương quốc/hằng số. js

Hãy mở thư mục expengo này trong trình chỉnh sửa mã của chúng tôi, nếu mọi thứ hoạt động tốt, thư mục của chúng tôi sẽ có cấu trúc sau

├── README.md
└──node_modules/
├── …
├── package-lock.json
├── package.json
└── public/
 ├── …
└──src/
 └──contexts/
  ├──user.context.js
 └──pages/
  ├──Home.page.js
  ├──PrivateRoute.page.js
  ├──Login.page.js
  ├──Signup.page.js
 └── realm/
  ├──constants.js
 ├── App.css
 ├── App.js
 ├── App.test.js
 ├── index.css
 ├── index.js
 ├── logo.svg
 ├── reportWebVitals.js
 └── setupTests.js

Kết nối Ứng dụng React của bạn với Realm và xử lý việc quản lý người dùng

Trong phần này, chúng tôi sẽ tạo các chức năng & thành phần React trong ứng dụng của mình để cung cấp cho người dùng khả năng Đăng nhập, Đăng ký và Đăng xuất

• Sao chép ID ứng dụng Realm của bạn

Thiết lập MongoDB

Để bắt đầu, chúng tôi cần đăng nhập hoặc đăng ký vào tài khoản MongoDB của mình và làm theo tùy chọn áp dụng cho chúng tôi

Đối với một tài khoản mới (Đăng ký)
Trước tiên, chúng tôi cần trả lời một số câu hỏi để giúp MongoDB trợ giúp thiết lập tài khoản của chúng tôi. Sau đó bấm vào Kết thúc

Chọn Chia sẻ làm loại cơ sở dữ liệu

Nhấp vào Tạo để thiết lập một cụm. Điều này đôi khi có thể mất thời gian để thiết lập

Tiếp theo, chúng ta cần tạo một người dùng để truy cập cơ sở dữ liệu bên ngoài bằng cách nhập Tên người dùng, Mật khẩu rồi nhấp vào Tạo người dùng. Chúng tôi cũng cần thêm địa chỉ IP của mình để kết nối an toàn với cơ sở dữ liệu bằng cách nhấp vào nút Thêm địa chỉ IP hiện tại của tôi. Sau đó bấm vào Kết thúc và Đóng để lưu thay đổi

Khi lưu các thay đổi, chúng ta sẽ thấy màn hình Triển khai cơ sở dữ liệu, như hình bên dưới

Đối với tài khoản hiện tại (Đăng nhập)
Nhấp vào menu thả xuống dự án và nhấp vào nút Dự án mới

Nhập

{
"name": "daniel mark"
"location": "new york"
"title": "software engineer"
}
{
"name": "clara patrick"
"location": "lisbon"
"title": "data engineer"
}

2 làm tên dự án, nhấp vào Tiếp theo rồi nhấp vào Tạo dự án

Nhấp vào Xây dựng cơ sở dữ liệu

Chọn Chia sẻ làm loại cơ sở dữ liệu

Nhấp vào Tạo để thiết lập một cụm. Điều này đôi khi có thể mất thời gian để thiết lập

Tiếp theo, chúng ta cần tạo một người dùng để truy cập cơ sở dữ liệu bên ngoài bằng cách nhập Tên người dùng, Mật khẩu rồi nhấp vào Tạo người dùng. Chúng tôi cũng cần thêm địa chỉ IP của mình để kết nối an toàn với cơ sở dữ liệu bằng cách nhấp vào nút Thêm địa chỉ IP hiện tại của tôi. Sau đó bấm vào Kết thúc và Đóng để lưu thay đổi

Khi lưu các thay đổi, chúng ta sẽ thấy màn hình Triển khai cơ sở dữ liệu, như hình bên dưới

Đang tải dữ liệu mẫu

Tiếp theo, chúng ta cần điền dữ liệu mẫu của người dùng vào cơ sở dữ liệu của mình. Để thực hiện việc này, hãy nhấp vào nút Duyệt bộ sưu tập

Bấm vào Thêm dữ liệu của riêng tôi, nhập

{
"name": "daniel mark"
"location": "new york"
"title": "software engineer"
}
{
"name": "clara patrick"
"location": "lisbon"
"title": "data engineer"
}

3 và

{
"name": "daniel mark"
"location": "new york"
"title": "software engineer"
}
{
"name": "clara patrick"
"location": "lisbon"
"title": "data engineer"
}

4 làm cơ sở dữ liệu và tên bộ sưu tập, rồi bấm vào Tạo

Tiếp theo, chúng ta cần chèn những dữ liệu mẫu này

{
"name": "daniel mark"
"location": "new york"
"title": "software engineer"
}
{
"name": "clara patrick"
"location": "lisbon"
"title": "data engineer"
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Để thực hiện việc này, nhấp vào nút Chèn Tài liệu, điền các thông tin chi tiết ở trên và nhấp vào Chèn để lưu

Tạo và cấu hình ứng dụng MongoDB Realm

Với cơ sở dữ liệu của chúng tôi được điền, chúng tôi cần tạo các chức năng không có máy chủ để thực hiện Tạo, Đọc, Cập nhật và Xóa (CRUD) trên cơ sở dữ liệu của chúng tôi. Để thực hiện việc này, hãy chọn tab Vương quốc, nhấp vào Xây dựng ứng dụng của riêng bạn. Sau đó bấm vào Tạo ứng dụng Realm để thiết lập ứng dụng của chúng tôi

MongoDB Realm cũng cung cấp các mẫu mà chúng ta có thể sử dụng để xây dựng ứng dụng của mình một cách nhanh chóng. Đối với hướng dẫn này, chúng tôi sẽ xây dựng từ đầu

Tiếp theo, chúng ta cần thiết lập quyền và quy tắc cho các chức năng của mình. Để thực hiện việc này, hãy đóng hướng dẫn bật lên, nhấp vào Quy tắc, chọn ReacRealmCol và nhấp vào Cấu hình bộ sưu tập

MongoDB Realm lưu và triển khai
Khi đã xong, MongoDB Realm sẽ hiển thị cho chúng ta một tiện ích minh họa khái niệm Lưu và Triển khai

Khi viết một chức năng không có máy chủ, nhấp vào Lưu sẽ tạo một bản nháp phát triển mà chúng tôi có thể kiểm tra và sử dụng xung quanh. Đồng thời, Deploy công khai các thay đổi của chúng ta để ứng dụng khác sử dụng (React. js trong trường hợp của chúng tôi)

Nhấn Next rồi Got it để tiếp tục

Tiếp theo, chúng ta cần cấp quyền Đọc và Viết cho chức năng của mình rồi Lưu

Tiếp theo, điều hướng đến tab Xác thực, nhấp vào Cho phép người dùng đăng nhập ẩn danh, bật tính năng này và Lưu bản nháp

MongoDB Realm cũng cung cấp một số tùy chọn xác thực mà chúng ta có thể khám phá. Đối với hướng dẫn này, chúng tôi sẽ sử dụng tùy chọn ẩn danh

Tạo các hàm serverless trên MongoDB Realm

Nhận tất cả người dùng Chức năng không có máy chủ
Với việc cấu hình xong, bây giờ chúng ta có thể tạo một hàm serverless trả về danh sách người dùng. Để thực hiện việc này, hãy điều hướng đến tab Chức năng, nhấp vào Tạo chức năng mới và nhập

{
"name": "daniel mark"
"location": "new york"
"title": "software engineer"
}
{
"name": "clara patrick"
"location": "lisbon"
"title": "data engineer"
}

5 làm tên hàm

Tiếp theo, chọn tab Trình chỉnh sửa chức năng và sửa đổi chức năng thành như sau

exports = function(arg){
    let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");

    return collection.find({});
};

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Đoạn mã trên thực hiện như sau

• Tạo biến bộ sưu tập để truy cập cơ sở dữ liệu

  {
  "name": "daniel mark"
  "location": "new york"
  "title": "software engineer"
  }
  {
  "name": "clara patrick"
  "location": "lisbon"
  "title": "data engineer"
  }
  

  3 và bộ sưu tập

  {
  "name": "daniel mark"
  "location": "new york"
  "title": "software engineer"
  }
  {
  "name": "clara patrick"
  "location": "lisbon"
  "title": "data engineer"
  }
  

  4
• Trả về danh sách các tài liệu trong bộ sưu tập

Tiếp theo, chúng ta có thể kiểm tra chức năng của mình bằng cách nhấp vào nút Run để xem danh sách người dùng

Cuối cùng, chúng ta cần sao chép

{
"name": "daniel mark"
"location": "new york"
"title": "software engineer"
}
{
"name": "clara patrick"
"location": "lisbon"
"title": "data engineer"
}

8 của bất kỳ người dùng nào đã trả lại và lưu nó ở đâu đó; . Sau đó nhấp vào Lưu bản nháp để tạo bản nháp triển khai cho chức năng của chúng tôi

Nhận chức năng không có máy chủ của người dùng
Để thực hiện việc này, hãy nhấp vào tab Chức năng, nhấp vào Tạo chức năng mới và nhập

{
"name": "daniel mark"
"location": "new york"
"title": "software engineer"
}
{
"name": "clara patrick"
"location": "lisbon"
"title": "data engineer"
}

9 làm tên hàm

Tiếp theo, chọn tab Trình chỉnh sửa chức năng và sửa đổi chức năng thành như sau

exports = function(arg){
    let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");

    return collection.findOne({_id: BSON.ObjectId(arg)});
};

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Đoạn mã trên thực hiện như sau

• Tạo biến bộ sưu tập để truy cập cơ sở dữ liệu

  {
  "name": "daniel mark"
  "location": "new york"
  "title": "software engineer"
  }
  {
  "name": "clara patrick"
  "location": "lisbon"
  "title": "data engineer"
  }
  

  3 và bộ sưu tập

  {
  "name": "daniel mark"
  "location": "new york"
  "title": "software engineer"
  }
  {
  "name": "clara patrick"
  "location": "lisbon"
  "title": "data engineer"
  }
  

  4
• Trả về một người dùng duy nhất bằng cách tìm nó bằng

  {
  "name": "daniel mark"
  "location": "new york"
  "title": "software engineer"
  }
  {
  "name": "clara patrick"
  "location": "lisbon"
  "title": "data engineer"
  }
  

  8 của nó. Vì MongoDB lưu tài liệu trong BSON, chúng tôi cần phân tích cú pháp

  exports = function(arg){
      let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");
  
      return collection.find({});
  };
  

  3 dưới dạng BSON bằng cách sử dụng

  exports = function(arg){
      let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");
  
      return collection.find({});
  };
  

  4

Để kiểm tra chức năng của chúng tôi, hãy điều hướng đến tab Bảng điều khiển, thay thế

exports = function(arg){
    let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");

    return collection.find({});
};

5 trong chức năng xuất bằng

{
"name": "daniel mark"
"location": "new york"
"title": "software engineer"
}
{
"name": "clara patrick"
"location": "lisbon"
"title": "data engineer"
}

8 của người dùng mà chúng tôi đã sao chép trước đó và sau đó nhấp vào Chạy

Cuối cùng, chúng ta cần lưu chức năng của mình bằng cách nhấp vào nút Lưu bản nháp

Chỉnh sửa chức năng không có máy chủ của người dùng
Để làm điều này, chúng ta cần làm theo các bước tương tự như trên

Đầu tiên, nhấp vào tab Chức năng, nhấp vào Tạo chức năng mới và nhập ____14_______7 làm tên hàm

Tiếp theo, chọn tab Trình chỉnh sửa chức năng và sửa đổi chức năng thành như sau

exports = function(id, name, location, title){
    let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");
    let updated = collection.findOneAndUpdate(
        {_id: BSON.ObjectId(id)},
        { $set: { "name": name, "location": location, "title": title } },
        { returnNewDocument: true }
      )

    return updated;
};

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Đoạn mã trên thực hiện như sau

• Sửa đổi hàm để chấp nhận các đối số

  exports = function(arg){
      let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");
  
      return collection.find({});
  };
  

  8,

  exports = function(arg){
      let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");
  
      return collection.find({});
  };
  

  9,

  exports = function(arg){
      let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");
  
      return collection.findOne({_id: BSON.ObjectId(arg)});
  };
  

  0 và

  exports = function(arg){
      let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");
  
      return collection.findOne({_id: BSON.ObjectId(arg)});
  };
  

  1
• Tạo biến bộ sưu tập để truy cập cơ sở dữ liệu

  {
  "name": "daniel mark"
  "location": "new york"
  "title": "software engineer"
  }
  {
  "name": "clara patrick"
  "location": "lisbon"
  "title": "data engineer"
  }
  

  3 và bộ sưu tập

  {
  "name": "daniel mark"
  "location": "new york"
  "title": "software engineer"
  }
  {
  "name": "clara patrick"
  "location": "lisbon"
  "title": "data engineer"
  }
  

  4
• Tạo một biến

  exports = function(arg){
      let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");
  
      return collection.findOne({_id: BSON.ObjectId(arg)});
  };
  

  4 để tìm tài liệu trước ngày

  {
  "name": "daniel mark"
  "location": "new york"
  "title": "software engineer"
  }
  {
  "name": "clara patrick"
  "location": "lisbon"
  "title": "data engineer"
  }
  

  8, cập nhật các trường bộ sưu tập và đặt cờ

  exports = function(arg){
      let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");
  
      return collection.findOne({_id: BSON.ObjectId(arg)});
  };
  

  6 để trả về tài liệu đã cập nhật

Tiếp theo, chúng ta có thể kiểm tra chức năng của mình bằng cách điều hướng đến tab Bảng điều khiển, thay thế

exports = function(arg){
    let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");

    return collection.find({});
};

5 trong hàm xuất bằng các đối số được yêu cầu (_id, tên, vị trí và tiêu đề), nhấp vào Chạy, sau đó Lưu bản nháp

Tạo chức năng Serverless người dùng
Để làm điều này, chúng ta cần làm theo các bước tương tự như trước

Đầu tiên, nhấp vào tab Chức năng, nhấp vào Tạo chức năng mới và nhập ____19_______8 làm tên hàm

Tiếp theo, chọn tab Trình chỉnh sửa chức năng và sửa đổi chức năng thành như sau

exports = function(name, location, title){
    let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");

    let newUser = collection.insertOne({"name": name, "location": location, "title": title})

    return newUser;
};

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Đoạn mã trên thực hiện như sau

• Sửa đổi hàm để chấp nhận các đối số

  exports = function(arg){
      let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");
  
      return collection.find({});
  };
  

  9,

  exports = function(arg){
      let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");
  
      return collection.findOne({_id: BSON.ObjectId(arg)});
  };
  

  0 và

  exports = function(arg){
      let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");
  
      return collection.findOne({_id: BSON.ObjectId(arg)});
  };
  

  1
• Tạo biến bộ sưu tập để truy cập cơ sở dữ liệu

  {
  "name": "daniel mark"
  "location": "new york"
  "title": "software engineer"
  }
  {
  "name": "clara patrick"
  "location": "lisbon"
  "title": "data engineer"
  }
  

  3 và bộ sưu tập

  {
  "name": "daniel mark"
  "location": "new york"
  "title": "software engineer"
  }
  {
  "name": "clara patrick"
  "location": "lisbon"
  "title": "data engineer"
  }
  

  4
• Tạo người dùng mới bằng cách chèn đối số và trả về người dùng

Tiếp theo, chúng ta có thể kiểm tra chức năng của mình bằng cách điều hướng đến tab Bảng điều khiển, thay thế

exports = function(arg){
    let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");

    return collection.find({});
};

5 trong hàm xuất bằng các đối số được yêu cầu (tên, vị trí và tiêu đề), nhấp vào Chạy, sau đó Lưu bản nháp

Xóa chức năng không có máy chủ của người dùng
Để làm điều này, chúng ta cần làm theo các bước tương tự như trước

Đầu tiên, nhấp vào tab Chức năng, nhấp vào Tạo chức năng mới và nhập ____28_______5 làm tên hàm

Tiếp theo, chọn tab Trình chỉnh sửa chức năng và sửa đổi chức năng thành như sau

exports = function(id){
    let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");

    let deleteUser = collection.deleteOne({_id: BSON.ObjectId(id)})

    return deleteUser;
};

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Đoạn mã trên thực hiện như sau

• Sửa đổi chức năng để chấp nhận một đối số
• Tạo biến bộ sưu tập để truy cập cơ sở dữ liệu

  {
  "name": "daniel mark"
  "location": "new york"
  "title": "software engineer"
  }
  {
  "name": "clara patrick"
  "location": "lisbon"
  "title": "data engineer"
  }
  

  3 và bộ sưu tập

  {
  "name": "daniel mark"
  "location": "new york"
  "title": "software engineer"
  }
  {
  "name": "clara patrick"
  "location": "lisbon"
  "title": "data engineer"
  }
  

  4
• Tạo một biến

  exports = function(id, name, location, title){
      let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");
      let updated = collection.findOneAndUpdate(
          {_id: BSON.ObjectId(id)},
          { $set: { "name": name, "location": location, "title": title } },
          { returnNewDocument: true }
        )
  
      return updated;
  };
  

  5 để xóa bởi

  {
  "name": "daniel mark"
  "location": "new york"
  "title": "software engineer"
  }
  {
  "name": "clara patrick"
  "location": "lisbon"
  "title": "data engineer"
  }
  

  8

Tiếp theo, chúng ta có thể kiểm tra chức năng của mình bằng cách điều hướng đến tab Bảng điều khiển, thay thế

exports = function(arg){
    let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");

    return collection.find({});
};

5 trong hàm xuất bằng đối số được yêu cầu, nhấp vào Chạy, sau đó Lưu bản nháp

Triển khai các chức năng serverless

Để bắt đầu sử dụng các chức năng serverless trong ứng dụng của mình, chúng ta cần triển khai chúng. Để thực hiện việc này, nhấp vào nút Xem lại bản nháp & triển khai, cuộn xuống và sau đó nhấp vào Triển khai

Chúng tôi sẽ nhận được lời nhắc hiển thị trạng thái triển khai của chúng tôi

Cuối cùng. Tích hợp với React. js

Để tích hợp MongoDB Realm trong ứng dụng của chúng tôi, chúng tôi cần cài đặt các phụ thuộc với

npm i realm-web

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

exports = function(name, location, title){
    let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");

    let newUser = collection.insertOne({"name": name, "location": location, "title": title})

    return newUser;
};

1 là để truy cập MongoDB Realm từ trình duyệt web

Thiết lập biến môi trường
Trước tiên, chúng ta cần tạo một tệp

exports = function(name, location, title){
    let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");

    let newUser = collection.insertOne({"name": name, "location": location, "title": title})

    return newUser;
};

2 trong thư mục gốc của dự án và trong tệp này, hãy thêm đoạn mã bên dưới

REACT_APP_REALM_APP_ID=

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Để lấy ID ứng dụng Realm của chúng tôi, chúng tôi cần nhấp vào biểu tượng sao chép như hình bên dưới

Thiết lập Vương quốc MongoDB
Tiếp theo, chúng ta cần tạo một thư mục

exports = function(name, location, title){
    let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");

    let newUser = collection.insertOne({"name": name, "location": location, "title": title})

    return newUser;
};

3 trong thư mục

exports = function(name, location, title){
    let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");

    let newUser = collection.insertOne({"name": name, "location": location, "title": title})

    return newUser;
};

4, và trong thư mục này, tạo tệp

exports = function(name, location, title){
    let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");

    let newUser = collection.insertOne({"name": name, "location": location, "title": title})

    return newUser;
};

5 và thêm đoạn mã bên dưới

npm start

0

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Đoạn mã trên thực hiện như sau

• Nhập các phụ thuộc cần thiết
• Tạo một biến để lưu trữ Realm App ID
• Tạo và xuất một phiên bản của MongoDB Realm và chuyển ID ứng dụng. Bang

  exports = function(name, location, title){
      let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");
  
      let newUser = collection.insertOne({"name": name, "location": location, "title": title})
  
      return newUser;
  };
  

  6 ở phía trước của

  exports = function(name, location, title){
      let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");
  
      let newUser = collection.insertOne({"name": name, "location": location, "title": title})
  
      return newUser;
  };
  

  7 yêu cầu trình biên dịch loại bỏ lỗi ràng buộc không null (Có nghĩa là tham số không được rỗng hoặc không xác định)
• Tạo và xuất loại thông tin xác thực mà chúng tôi sẽ sử dụng cho ứng dụng này. Chúng tôi định cấu hình tùy chọn xác thực này trước đó

Nhận tất cả người dùng
Để có được tất cả người dùng, chúng ta cần tạo một giao diện để mô tả các thuộc tính phản hồi. Để làm điều này, chúng ta cần tạo một thư mục

exports = function(name, location, title){
    let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");

    let newUser = collection.insertOne({"name": name, "location": location, "title": title})

    return newUser;
};

8 trong thư mục

exports = function(name, location, title){
    let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");

    let newUser = collection.insertOne({"name": name, "location": location, "title": title})

    return newUser;
};

4, và trong thư mục này, tạo tệp

exports = function(id){
    let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");

    let deleteUser = collection.deleteOne({_id: BSON.ObjectId(id)})

    return deleteUser;
};

0 và thêm đoạn mã bên dưới

npm start

1

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Tái bút. Dấu hỏi phía trước _id cho TypeScript biết rằng thuộc tính này là tùy chọn vì MongoDB tự động tạo nó

Tiếp theo, chúng ta cần sửa đổi

exports = function(id){
    let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");

    let deleteUser = collection.deleteOne({_id: BSON.ObjectId(id)})

    return deleteUser;
};

1 bằng cách cập nhật nó với đoạn trích bên dưới

npm start

2

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Đoạn mã trên thực hiện như sau

• Nhập giao diện

  exports = function(id){
      let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");
  
      let deleteUser = collection.deleteOne({_id: BSON.ObjectId(id)})
  
      return deleteUser;
  };
  

  2,

  exports = function(id){
      let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");
  
      let deleteUser = collection.deleteOne({_id: BSON.ObjectId(id)})
  
      return deleteUser;
  };
  

  3 và

  exports = function(id){
      let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");
  
      let deleteUser = collection.deleteOne({_id: BSON.ObjectId(id)})
  
      return deleteUser;
  };
  

  4
• Tạo các biến trạng thái để quản lý danh sách người dùng
• Tạo một hàm

  exports = function(id){
      let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");
  
      let deleteUser = collection.deleteOne({_id: BSON.ObjectId(id)})
  
      return deleteUser;
  };
  

  5 bên trong hook

  exports = function(id){
      let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");
  
      let deleteUser = collection.deleteOne({_id: BSON.ObjectId(id)})
  
      return deleteUser;
  };
  

  6 để xác thực ứng dụng của chúng ta bằng cách sử dụng

  exports = function(id){
      let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");
  
      let deleteUser = collection.deleteOne({_id: BSON.ObjectId(id)})
  
      return deleteUser;
  };
  

  4 đã nhập, lấy danh sách người dùng bằng cách truy cập hàm serverless

  {
  "name": "daniel mark"
  "location": "new york"
  "title": "software engineer"
  }
  {
  "name": "clara patrick"
  "location": "lisbon"
  "title": "data engineer"
  }
  

  5 mà chúng ta đã tạo trước đó, sau đó cập nhật trạng thái

  exports = function(id){
      let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");
  
      let deleteUser = collection.deleteOne({_id: BSON.ObjectId(id)})
  
      return deleteUser;
  };
  

  9. Tái bút. Chức năng không có máy chủ (getAllUsers trong trường hợp của chúng tôi) được gọi phải giống với chức năng được xác định trên MongoDB Realm
• Cập nhật đánh dấu để hiển thị danh sách người dùng

Ứng dụng hoàn chỉnh. tsx

npm start

3

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Tạo người dùng
Để tạo người dùng, trước tiên chúng ta phải sửa đổi

exports = function(id){
    let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");

    let deleteUser = collection.deleteOne({_id: BSON.ObjectId(id)})

    return deleteUser;
};

1 bằng cách tạo biến trạng thái để quản lý giá trị trả về khi người dùng được tạo. Chúng ta cũng cần thêm trạng thái dưới dạng phụ thuộc vào móc

exports = function(id){
    let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");

    let deleteUser = collection.deleteOne({_id: BSON.ObjectId(id)})

    return deleteUser;
};

6; . Cuối cùng, chúng ta cần cập nhật thành phần

npm i realm-web

2 bằng hàm trạng thái để cập nhật giá trị

npm start

4

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Tái bút. TypeScript sẽ phàn nàn về thành phần

npm i realm-web

3 không có thuộc tính setUserValue. Chúng tôi sẽ khắc phục điều này

Tiếp theo, điều hướng đến tệp

npm i realm-web

4 bên trong thư mục

npm i realm-web

5, cập nhật giao diện và tạo người dùng

npm start

5

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Đoạn mã trên thực hiện như sau

• Nhập các phụ thuộc cần thiết
• Sửa đổi chức năng

  npm i realm-web
  

  6 để xác thực ứng dụng của chúng tôi bằng cách sử dụng

  exports = function(id){
      let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");
  
      let deleteUser = collection.deleteOne({_id: BSON.ObjectId(id)})
  
      return deleteUser;
  };
  

  4 đã nhập. Tạo người dùng bằng cách truy cập chức năng serverless

  exports = function(arg){
      let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");
  
      return collection.findOne({_id: BSON.ObjectId(arg)});
  };
  

  8 mà chúng tôi đã tạo trước đó, chuyển các đối số bắt buộc (tên, vị trí và tiêu đề), sau đó cập nhật trạng thái biểu mẫu và

  npm i realm-web
  

  9

Chỉnh sửa người dùng
Để chỉnh sửa người dùng, trước tiên chúng tôi phải sửa đổi

exports = function(id){
    let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");

    let deleteUser = collection.deleteOne({_id: BSON.ObjectId(id)})

    return deleteUser;
};

1 bằng cách tạo một biến trạng thái để quản lý

{
"name": "daniel mark"
"location": "new york"
"title": "software engineer"
}
{
"name": "clara patrick"
"location": "lisbon"
"title": "data engineer"
}

8 của người dùng mà chúng tôi muốn chỉnh sửa. Chúng tôi cũng đã cập nhật sự kiện

REACT_APP_REALM_APP_ID=

2 để cập nhật biến trạng thái và chuyển nó dưới dạng đạo cụ cho thành phần

npm i realm-web

2

npm start

6

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Tiếp theo, chúng ta cần điền vào biểu mẫu của mình khi nhấp vào nút Chỉnh sửa. Để làm điều này, hãy mở

npm i realm-web

4 và cập nhật như hình bên dưới

npm start

7

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Đoạn mã trên thực hiện như sau

• Nhập các phụ thuộc cần thiết
• Sửa đổi giao diện và đạo cụ để bao gồm

  REACT_APP_REALM_APP_ID=
  

  5
• Sử dụng

  exports = function(id){
      let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");
  
      let deleteUser = collection.deleteOne({_id: BSON.ObjectId(id)})
  
      return deleteUser;
  };
  

  6 để kiểm tra có điều kiện xem nó có đang chỉnh sửa hay tạo hay không, lấy thông tin chi tiết về người dùng đã chọn bằng cách sử dụng chức năng không có máy chủ của

  {
  "name": "daniel mark"
  "location": "new york"
  "title": "software engineer"
  }
  {
  "name": "clara patrick"
  "location": "lisbon"
  "title": "data engineer"
  }
  

  9, sau đó cập nhật các giá trị của biểu mẫu. Hàm

  {
  "name": "daniel mark"
  "location": "new york"
  "title": "software engineer"
  }
  {
  "name": "clara patrick"
  "location": "lisbon"
  "title": "data engineer"
  }
  

  9 cũng yêu cầu chúng tôi chuyển đổi

  REACT_APP_REALM_APP_ID=
  

  5 thành chuỗi bằng hàm

  npm start
  

  00
• Dọn dẹp hiệu ứng bằng cách cập nhật trạng thái biểu mẫu thành một chuỗi trống

Tiếp theo, chúng ta cần cập nhật chức năng

npm i realm-web

6 để bao gồm cập nhật thông tin chi tiết của người dùng bằng cách kiểm tra có điều kiện xem đó có phải là hành động cập nhật hay không. Tiếp theo, chúng ta cần gọi hàm

exports = function(arg){
    let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");

    return collection.find({});
};

7 serverless và truyền vào các tham số cần thiết. Cuối cùng, cập nhật

npm i realm-web

9, khôi phục biểu mẫu về mặc định và đóng thành phần

npm i realm-web

2

npm start

8

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Phương thức hoàn chỉnh. tsx

npm start

9

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Xóa người dùng
Để xóa user ta cần sửa lại

exports = function(id){
    let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");

    let deleteUser = collection.deleteOne({_id: BSON.ObjectId(id)})

    return deleteUser;
};

1 bằng cách tạo hàm

npm start

06 như hình bên dưới

{
"name": "daniel mark"
"location": "new york"
"title": "software engineer"
}
{
"name": "clara patrick"
"location": "lisbon"
"title": "data engineer"
}

0

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Đoạn mã trên thực hiện như sau

• Nhập các phụ thuộc cần thiết
• Tạo một hàm

  npm start
  

  06 lấy một đối số là

  exports = function(arg){
      let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");
  
      return collection.find({});
  };
  

  8, xác thực ứng dụng của chúng ta bằng cách sử dụng

  exports = function(id){
      let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");
  
      let deleteUser = collection.deleteOne({_id: BSON.ObjectId(id)})
  
      return deleteUser;
  };
  

  4. Xóa người dùng đã chọn bằng hàm

  exports = function(id, name, location, title){
      let collection = context.services.get("mongodb-atlas").db("reactRealmDB").collection("reactRealmCol");
      let updated = collection.findOneAndUpdate(
          {_id: BSON.ObjectId(id)},
          { $set: { "name": name, "location": location, "title": title } },
          { returnNewDocument: true }
        )
  
      return updated;
  };
  

  5 serverless và cập nhật trạng thái

  npm i realm-web
  

  9

Ứng dụng hoàn chỉnh. tsx

{
"name": "daniel mark"
"location": "new york"
"title": "software engineer"
}
{
"name": "clara patrick"
"location": "lisbon"
"title": "data engineer"
}

1

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Cuối cùng, chúng ta có thể kiểm tra ứng dụng của mình bằng cách khởi động máy chủ phát triển và thực hiện các thao tác CRUD

Phần kết luận

Bài đăng này đã thảo luận về cách tạo cơ sở dữ liệu trên MongoDB, tạo và triển khai các chức năng không có máy chủ bằng MongoDB Realm và sử dụng các điểm cuối trong React. ứng dụng js

Tôi có thể kết nối MongoDB với phản ứng không?

Vương quốc trong MongoDB là gì?

MongoDB và lĩnh vực có giống nhau không?

MongoDB Realm có miễn phí không?