Hướng dẫn mongodb realm vs atlas - mongodb Real vs atlas

Xây dựng ứng dụng

npx mongodb-realm-cli apps create \
  --template react-native.todo.flex \
  --name realm-sync-tutorial

Mẹo

Lệnh tạo một thư mục mới trong thư mục hiện tại của bạn có cùng tên với giá trị của cờ

db.Item.updateOne(
  { "_id": "630665dba3f53b578b75bd7e" },
  { "$set": { "isComplete": true }
})

Trong thiết bị đầu cuối của bạn, hãy chạy các lệnh sau để điều hướng đến ứng dụng gốc React và cài đặt các phụ thuộc của nó:

cd realm-sync-tutorial/frontend/react-native.todo.flex
npm install

Để xây dựng và chạy ứng dụng trên thiết bị iOS hoặc giả lập, hãy cài đặt các phụ thuộc iOS bổ sung bằng ca cao.CocoaPods.

Mẹo

Đảm bảo quay lại thư mục gốc của Frontend Project sau khi bạn cài đặt PODS.

Tại thời điểm này, bạn nên có một ứng dụng gốc phản ứng đầy đủ chức năng có thể chạy trên cả iOS và Android.

Mẹo

Nếu bạn gặp phải lỗi hoặc có vấn đề, thì đó có thể là vấn đề với cách thức môi trường địa phương của bạn được thiết lập. Kiểm tra Hướng dẫn thiết lập môi trường phát triển bản địa chính thức của React và đảm bảo rằng bạn đã làm theo tất cả các bước cho HĐH phát triển và HĐH Target.development environment setup guide and ensure that you've followed all the steps for your Development OS and Target OS.

Khi bản dựng hoàn thành, bạn nên có một ứng dụng chức năng chạy trên trình giả lập của mình. Trong ứng dụng, đăng ký một tài khoản mới và chơi xung quanh với ứng dụng trong vài phút:

• Thêm một vài mục cần làm vào danh sách.

• Nhấn hộp kiểm trên một hoặc hai mục để đánh dấu chúng là hoàn thành.

• Nhấn X trên một mục để xóa nó khỏi danh sách.

Nếu bạn kết nối với cụm Atlas của mình và truy vấn bộ sưu tập

db.Item.updateOne(
  { "_id": "630665dba3f53b578b75bd7e" },
  { "$set": { "isComplete": true }
})

Mẹo

Tương tự, mọi thay đổi trong bộ sưu tập sẽ tự động đồng bộ hóa với ứng dụng gốc React. Hãy thử thay đổi trạng thái hoàn thành của một mục trong cụm của bạn - ứng dụng gốc React sẽ tự động cập nhật với giá trị mới bất cứ khi nào có kết nối mạng.

db.Item.updateOne(
  { "_id": "630665dba3f53b578b75bd7e" },
  { "$set": { "isComplete": true }
})

Mẹo

Ứng dụng mẫu bao gồm một ứng dụng Atlas được cấu hình đầy đủ trong thư mục

db.Item.updateOne(
  { "_id": "630665dba3f53b578b75bd7e" },
  { "$set": { "isComplete": true }
})

db.Item.updateOne(
  { "_id": "630665dba3f53b578b75bd7e" },
  { "$set": { "isComplete": true }
})

db.Item.updateOne(
  { "_id": "630665dba3f53b578b75bd7e" },
  { "$set": { "isComplete": true }
})

Nó cũng bao gồm các cấu hình được xác định trước sau:

• Một nguồn dữ liệu được liên kết với cụm Atlas của bạn.

• Một lược đồ cho bộ sưu tập

  db.Item.updateOne(
    { "_id": "630665dba3f53b578b75bd7e" },
    { "$set": { "isComplete": true }
  })

  2 phù hợp với lớp

  cd realm-sync-tutorial/frontend/react-native.todo.flex
  npm install

  9 trong ứng dụng gốc React.

• Nhà cung cấp xác thực cho phép người dùng đăng ký và đăng nhập vào ứng dụng của bạn bằng email và mật khẩu.

• Cấu hình đồng bộ linh hoạt với một vai trò phiên duy nhất cho phép người dùng đọc và chỉ viết dữ liệu của riêng họ.

Ứng dụng React Native là một máy khách di động được cấu hình đầy đủ có thể chạy trên các thiết bị iOS và Android. Nó nằm trong thư mục

db.Item.updateOne(
  { "_id": "630665dba3f53b578b75bd7e" },
  { "$set": { "isComplete": true }
})

Ứng dụng sử dụng thư viện chính thức @realm/React. Thư viện bao gồm các móc nối và các thành phần cho phép bạn kết nối với ứng dụng Atlas của mình, đọc và ghi dữ liệu và tự động đồng bộ hóa các thay đổi từ các thiết bị khác.@realm/react library. The library includes React hooks and components that let you connect to your Atlas App, read and write data, and automatically sync changes from other devices.

Ứng dụng chứa một số tệp cấu hình và thư mục, nhưng bạn có thể bỏ qua chúng trừ khi bạn muốn tùy chỉnh ứng dụng. Đối với hướng dẫn này, bạn sẽ muốn làm quen với các thành phần React trong thư mục

db.Item.updateOne(
  { "_id": "630665dba3f53b578b75bd7e" },
  { "$set": { "isComplete": true }
})

function createEnum(arr) {
  arr.forEach((p, i) => arr[p] = i);
  return arr;
}
// Priority.High === 1
// Priority[Priority.High] === "High"
export const Priority = createEnum([
  "Severe",
  "High",
  "Medium",
  "Low",
])

cd realm-sync-tutorial/frontend/react-native.todo.flex
npm install

function createEnum(arr) {
  arr.forEach((p, i) => arr[p] = i);
  return arr;
}
// Priority.High === 1
// Priority[Priority.High] === "High"
export const Priority = createEnum([
  "Severe",
  "High",
  "Medium",
  "Low",
])

function createEnum(arr) {
  arr.forEach((p, i) => arr[p] = i);
  return arr;
}
// Priority.High === 1
// Priority[Priority.High] === "High"
export const Priority = createEnum([
  "Severe",
  "High",
  "Medium",
  "Low",
])

function createEnum(arr) {
  arr.forEach((p, i) => arr[p] = i);
  return arr;
}
// Priority.High === 1
// Priority[Priority.High] === "High"
export const Priority = createEnum([
  "Severe",
  "High",
  "Medium",
  "Low",
])

function createEnum(arr) {
  arr.forEach((p, i) => arr[p] = i);
  return arr;
}
// Priority.High === 1
// Priority[Priority.High] === "High"
export const Priority = createEnum([
  "Severe",
  "High",
  "Medium",
  "Low",
])

function createEnum(arr) {
  arr.forEach((p, i) => arr[p] = i);
  return arr;
}
// Priority.High === 1
// Priority[Priority.High] === "High"
export const Priority = createEnum([
  "Severe",
  "High",
  "Medium",
  "Low",
])

function createEnum(arr) {
  arr.forEach((p, i) => arr[p] = i);
  return arr;
}
// Priority.High === 1
// Priority[Priority.High] === "High"
export const Priority = createEnum([
  "Severe",
  "High",
  "Medium",
  "Low",
])

cd realm-sync-tutorial/frontend/react-native.todo.flex
npm install

cd realm-sync-tutorial/frontend/react-native.todo.flex
npm install

// Priority.High === 1
// Priority[Priority.High] === "High"
export enum Priority {
  Severe = 0,
  High = 1,
  Medium = 2,
  Low = 3,
}

cd realm-sync-tutorial/frontend/react-native.todo.flex
npm install

function createEnum(arr) {
  arr.forEach((p, i) => arr[p] = i);
  return arr;
}
// Priority.High === 1
// Priority[Priority.High] === "High"
export const Priority = createEnum([
  "Severe",
  "High",
  "Medium",
  "Low",
])

// Priority.High === 1
// Priority[Priority.High] === "High"
export enum Priority {
  Severe = 0,
  High = 1,
  Medium = 2,
  Low = 3,
}

Chúng tôi muốn cho phép một số lượng nhỏ các cấp độ ưu tiên được đặt tên và chúng tôi muốn dễ dàng sắp xếp các cấp độ. Để làm điều này, chúng tôi sẽ sử dụng hàm trợ giúp để xác định một đối tượng "enum" ánh xạ một tập hợp các tên cấp được đặt hàng đến và từ một số nguyên đại diện cho mức độ ưu tiên của chúng.

Thêm mã sau trực tiếp trong các câu lệnh nhập trong

// Priority.High === 1
// Priority[Priority.High] === "High"
export enum Priority {
  Severe = 0,
  High = 1,
  Medium = 2,
  Low = 3,
}

function createEnum(arr) {
  arr.forEach((p, i) => arr[p] = i);
  return arr;
}
// Priority.High === 1
// Priority[Priority.High] === "High"
export const Priority = createEnum([
  "Severe",
  "High",
  "Medium",
  "Low",
])

Các mức độ ưu tiên trong enum được đặt hàng từ quan trọng nhất đến ít nhất. Giá trị chỉ số tương ứng cho mỗi cấp độ tăng từ quan trọng nhất,

// Priority.High === 1
// Priority[Priority.High] === "High"
export enum Priority {
  Severe = 0,
  High = 1,
  Medium = 2,
  Low = 3,
}

// Priority.High === 1
// Priority[Priority.High] === "High"
export enum Priority {
  Severe = 0,
  High = 1,
  Medium = 2,
  Low = 3,
}

Mẹo

Trong một ứng dụng TypeScript, bạn có thể xác định enum để mô hình hóa điều này thay vì sử dụng hàm trợ giúp:enum to model this instead of using the helper function:

// Priority.High === 1
// Priority[Priority.High] === "High"
export enum Priority {
  Severe = 0,
  High = 1,
  Medium = 2,
  Low = 3,
}

Bây giờ chúng ta có một

// Priority.High === 1
// Priority[Priority.High] === "High"
export enum Priority {
  Severe = 0,
  High = 1,
  Medium = 2,
  Low = 3,
}

// Priority.High === 1
// Priority[Priority.High] === "High"
export enum Priority {
  Severe = 0,
  High = 1,
  Medium = 2,
  Low = 3,
}

// Priority.High === 1
// Priority[Priority.High] === "High"
export enum Priority {
  Severe = 0,
  High = 1,
  Medium = 2,
  Low = 3,
}

cd realm-sync-tutorial/frontend/react-native.todo.flex
npm install

Thêm các dòng sau vào mã của bạn trong

// Priority.High === 1
// Priority[Priority.High] === "High"
export enum Priority {
  Severe = 0,
  High = 1,
  Medium = 2,
  Low = 3,
}

// Priority.High === 1
// Priority[Priority.High] === "High"
export enum Priority {
  Severe = 0,
  High = 1,
  Medium = 2,
  Low = 3,
}

export class Item {
  constructor({
    _id = new BSON.ObjectId(),
    isComplete = false,
    owner_id,
    priority = Priority.High, // Default to High priority if none is specified
  }) {
    this.isComplete = isComplete;
    this._id = _id;
    this.owner_id = owner_id
    this.priority = priority
  }
  static schema = {
    name: 'Item',
    properties: {
      _id: 'objectId',
      isComplete: {type: 'bool', default: false},
      summary: 'string',
      owner_id: 'string',
      priority: {
        // Store the index value of the Priority enum rather than the name
        type: 'int',
        default: Priority.High
      },
    },
    primaryKey: '_id',
  };
}

Ghi chú

Tại sao điều này không đồng bộ

Tại thời điểm này, mô hình

cd realm-sync-tutorial/frontend/react-native.todo.flex
npm install

Thêm một thuộc tính vào một đối tượng Realm không phải là một thay đổi phá vỡ và do đó không yêu cầu đặt lại máy khách. Ứng dụng mẫu có chế độ phát triển được bật, do đó, các thay đổi đối với đối tượng Realm Client được phản ánh trong lược đồ phía máy chủ. Để biết thêm thông tin, hãy xem bật hoặc vô hiệu hóa chế độ phát triển và cập nhật lược đồ của bạn.

Mô hình dữ liệu của ứng dụng của bạn hiện bao gồm

// Priority.High === 1
// Priority[Priority.High] === "High"
export enum Priority {
  Severe = 0,
  High = 1,
  Medium = 2,
  Low = 3,
}

cd realm-sync-tutorial/frontend/react-native.todo.flex
npm install

Đầu tiên, chúng tôi sẽ cài đặt một thư viện bên ngoài để thực hiện thành phần PROFITY PICKER. Chạy những điều sau đây trong thiết bị đầu cuối của bạn bên trong root dự án của bạn:

npm install @react-native-picker/picker

Nếu bạn đang xây dựng cho iOS, hãy đảm bảo liên kết các ca cao liên quan sau khi bạn đã cài đặt gói:

Mẹo

Bạn có thể cần xây dựng lại ứng dụng của mình sau khi cài đặt. Để làm như vậy, hãy dừng Bundler cho dự án của bạn và sau đó chạy lệnh Build:

Bây giờ gói đã được cài đặt đầy đủ, hãy cập nhật thành phần nhắc nhở mới để sử dụng trình chọn.

Thêm các nhập khẩu sau vào đầu

export class Item {
  constructor({
    _id = new BSON.ObjectId(),
    isComplete = false,
    owner_id,
    priority = Priority.High, // Default to High priority if none is specified
  }) {
    this.isComplete = isComplete;
    this._id = _id;
    this.owner_id = owner_id
    this.priority = priority
  }
  static schema = {
    name: 'Item',
    properties: {
      _id: 'objectId',
      isComplete: {type: 'bool', default: false},
      summary: 'string',
      owner_id: 'string',
      priority: {
        // Store the index value of the Priority enum rather than the name
        type: 'int',
        default: Priority.High
      },
    },
    primaryKey: '_id',
  };
}

import {Picker} from '@react-native-picker/picker';
import {Priority} from './ItemSchema';

Sau đó, sửa đổi thành phần

export class Item {
  constructor({
    _id = new BSON.ObjectId(),
    isComplete = false,
    owner_id,
    priority = Priority.High, // Default to High priority if none is specified
  }) {
    this.isComplete = isComplete;
    this._id = _id;
    this.owner_id = owner_id
    this.priority = priority
  }
  static schema = {
    name: 'Item',
    properties: {
      _id: 'objectId',
      isComplete: {type: 'bool', default: false},
      summary: 'string',
      owner_id: 'string',
      priority: {
        // Store the index value of the Priority enum rather than the name
        type: 'int',
        default: Priority.High
      },
    },
    primaryKey: '_id',
  };
}

• Theo dõi

  // Priority.High === 1
  // Priority[Priority.High] === "High"
  export enum Priority {
    Severe = 0,
    High = 1,
    Medium = 2,
    Low = 3,
  }

  9 trong một cái móc trạng thái

• Kết nối trạng thái với thành phần

  npm install @react-native-picker/picker
  
  
  
  

  0 mà bạn đã nhập

• chuyển

  // Priority.High === 1
  // Priority[Priority.High] === "High"
  export enum Priority {
    Severe = 0,
    High = 1,
    Medium = 2,
    Low = 3,
  }

  9 cho người xử lý

  npm install @react-native-picker/picker

  2

export function CreateToDoPrompt(props) {
  const {onSubmit} = props;
  const [summary, setSummary] = useState(null);
  const [priority, setPriority] = useState(Priority.High);
  return (
    <View style={styles.modalWrapper}>
      <Text h4 style={styles.addItemTitle}>
        Add Item
      Text>
      <Input placeholder="What do you want to do?" onChangeText={setSummary} />
      <Picker
        style={{width: '80%'}}
        selectedValue={priority}
        onValueChange={value => setPriority(value)}>
        {Priority.map(priority => (
          <Picker.Item
            key={priority}
            label={priority}
            value={Priority[priority]}
           />
        ))}
      Picker>
      <Button
        title="Save"
        buttonStyle={styles.saveButton}
        onPress={() => onSubmit({summary, priority})}
      />
    View>
  );
}

Trong

npm install @react-native-picker/picker

npm install @react-native-picker/picker

// Priority.High === 1
// Priority[Priority.High] === "High"
export enum Priority {
  Severe = 0,
  High = 1,
  Medium = 2,
  Low = 3,
}

const createItem = ({summary, priority}) => {
  // if the realm exists, create a to-do item
  if (realm) {
    realm.write(() => {
      realm.create('Item', {
        _id: new BSON.ObjectID(),
        owner_id: user.id,
        summary,
        priority,
      });
    });
  }
};

Sau đó, sửa đổi trình xử lý gửi mới để chấp nhận mức

// Priority.High === 1
// Priority[Priority.High] === "High"
export enum Priority {
  Severe = 0,
  High = 1,
  Medium = 2,
  Low = 3,
}

npm install @react-native-picker/picker

cd realm-sync-tutorial/frontend/react-native.todo.flex
npm install

Cuối cùng, sửa đổi từng mục danh sách việc cần làm để bao gồm

// Priority.High === 1
// Priority[Priority.High] === "High"
export enum Priority {
  Severe = 0,
  High = 1,
  Medium = 2,
  Low = 3,
}

npm install @react-native-picker/picker

cd realm-sync-tutorial/frontend/react-native.todo.flex
npm install

Ứng dụng của bạn bây giờ sẽ cho phép người dùng đặt mức độ ưu tiên cho mỗi mục việc cần làm mới.

Xây dựng lại ứng dụng và mở nó. Thêm một số mục việc cần làm mới để xác nhận rằng bạn có thể chọn mức độ ưu tiên và danh sách hiển thị mức độ ưu tiên của từng việc cần làm.

Đầu tiên, thêm một móc

import {Picker} from '@react-native-picker/picker';
import {Priority} from './ItemSchema';

import {Picker} from '@react-native-picker/picker';
import {Priority} from './ItemSchema';

cd realm-sync-tutorial/frontend/react-native.todo.flex
npm install

Sau đó, thêm một nút mới để chuyển chế độ vào cuối danh sách việc cần làm:

cd realm-sync-tutorial/frontend/react-native.todo.flex
npm install

Tại thời điểm này, ứng dụng có thể chuyển đổi các chế độ trong giao diện người dùng, nhưng chúng tôi không làm bất cứ điều gì khác để các chế độ giống hệt nhau về mặt chức năng. Hãy cập nhật đăng ký SYNC để chỉ đồng bộ hóa dữ liệu liên quan đến chế độ hiện tại.

Trong

import {Picker} from '@react-native-picker/picker';
import {Priority} from './ItemSchema';

import {Picker} from '@react-native-picker/picker';
import {Priority} from './ItemSchema';

// Priority.High === 1
// Priority[Priority.High] === "High"
export enum Priority {
  Severe = 0,
  High = 1,
  Medium = 2,
  Low = 3,
}

cd realm-sync-tutorial/frontend/react-native.todo.flex
npm install

Quan trọng

Đừng quên thêm

import {Picker} from '@react-native-picker/picker';
import {Priority} from './ItemSchema';

import {Picker} from '@react-native-picker/picker';
import {Priority} from './ItemSchema';

Ứng dụng của bạn hiện được thiết lập để sửa đổi đăng ký đồng bộ hóa dựa trên chế độ hiện tại. Tuy nhiên, nếu bạn chạy ứng dụng và chuyển sang chế độ "Chỉ quan trọng", bạn sẽ thấy rằng danh sách không thay đổi và cảnh báo xuất hiện trong bảng điều khiển:

cd realm-sync-tutorial/frontend/react-native.todo.flex
npm install

Chúng tôi đang nhận được cảnh báo vì máy khách đồng bộ hóa chỉ có thể lọc đăng ký dựa trên trường đã cho nếu trường đó được liệt kê cụ thể là "trường có thể truy vấn" trong cấu hình đồng bộ hóa thiết bị của ứng dụng ATLAS của bạn.

Để làm cho mọi thứ hoạt động, chúng tôi cần thêm

// Priority.High === 1
// Priority[Priority.High] === "High"
export enum Priority {
  Severe = 0,
  High = 1,
  Medium = 2,
  Low = 3,
}

Đầu tiên, hãy tìm thư mục

db.Item.updateOne(
  { "_id": "630665dba3f53b578b75bd7e" },
  { "$set": { "isComplete": true }
})

export function CreateToDoPrompt(props) {
  const {onSubmit} = props;
  const [summary, setSummary] = useState(null);
  const [priority, setPriority] = useState(Priority.High);
  return (
    <View style={styles.modalWrapper}>
      <Text h4 style={styles.addItemTitle}>
        Add Item
      Text>
      <Input placeholder="What do you want to do?" onChangeText={setSummary} />
      <Picker
        style={{width: '80%'}}
        selectedValue={priority}
        onValueChange={value => setPriority(value)}>
        {Priority.map(priority => (
          <Picker.Item
            key={priority}
            label={priority}
            value={Priority[priority]}
           />
        ))}
      Picker>
      <Button
        title="Save"
        buttonStyle={styles.saveButton}
        onPress={() => onSubmit({summary, priority})}
      />
    View>
  );
}

cd realm-sync-tutorial/frontend/react-native.todo.flex
npm install

Sau đó, chạy lệnh đầu cuối sau trong thư mục

db.Item.updateOne(
  { "_id": "630665dba3f53b578b75bd7e" },
  { "$set": { "isComplete": true }
})

cd realm-sync-tutorial/frontend/react-native.todo.flex
npm install

Khi cấu hình đồng bộ hóa được cập nhật của bạn được triển khai, ứng dụng của bạn đã hoàn tất và đầy đủ chức năng.Xin chúc mừng!

Xây dựng lại và chạy ứng dụng để đảm bảo mọi thứ hoạt động.Bạn sẽ có thể tạo, hoàn thành và xóa các mục việc cần làm cũng như chuyển sang và từ chế độ "chỉ quan trọng".