Hướng dẫn mongodb stored javascript tutorial - hướng dẫn javascript được lưu trữ mongodb

Xây dựng ứng dụng

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

Kiểm tra ứng dụng

Làm quen với ứng dụng mẫu

Ứng dụng Atlas

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

Phản ứng ứng dụng gốcCocoaPods.

Kiểm tra ứng dụng

Làm quen với ứng dụng mẫu

Ứng dụng Atlas

Kiểm tra ứng dụng

Làm quen với ứng dụng mẫudevelopment environment setup guide and ensure that you've followed all the steps for your Development OS and Target OS.

Ứng dụng Atlas

• Phản ứng ứng dụng gốc

• Thêm trường Cấp độ ưu tiên

• Xác định mức độ ưu tiên

Nếu bạn kết nối với cụm Atlas 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

Bây giờ bạn có ứng dụng mẫu chạy, hãy đi sâu vào mã để xem những gì chúng tôi đang làm việc.

Ứ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 }
  })

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

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

  8 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.

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

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",
])

Đối với hướng dẫn này, chúng tôi sẽ thêm một thuộc tính "ưu tiên" mới vào mỗi đối tượng

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

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.

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",
])

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,
}

Mẹo

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,
}

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

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:

Bây giờ chúng tôi 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

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',
  };
}

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,}4 để thêm // Priority.High === 1// Priority[Priority.High] === "High"export enum Priority { Severe = 0, High = 1, Medium = 2, Low = 3,}8 vào mô hình:

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.

Đầ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,
  }

  8 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

  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',
    };
  }

  9 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,
  }

  8 cho trình xử lý

  npm install @react-native-picker/picker

  1

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,
}

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

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

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

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

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

Ứ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';

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

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:

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

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,
}

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

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:

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

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 }
})

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

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

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

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

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

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".