DOCS Home → Dịch vụ ứng dụng Atlas → Atlas App Services
Các tài nguyên trên trang này được thiết kế để giúp bạn bắt đầu sử dụng Dịch vụ ứng dụng Atlas. Để khám phá cơ sở mã hoạt động hiển thị các tính năng của Dịch vụ ứng dụng, hãy xem một ứng dụng mẫu. Để có trải nghiệm có hướng dẫn hơn trong việc học cách phát triển với các dịch vụ ứng dụng và vương quốc, hãy bắt đầu với một hướng dẫn.
Dịch vụ ứng dụng Bootstrap với một ứng dụng mẫu. Các ứng dụng mẫu tập hợp nhiều khối xây dựng có sẵn trong các dịch vụ ứng dụng Atlas và bắt đầu bạn với một ứng dụng được xây dựng sẵn mà bạn có thể tùy chỉnh. Các ứng dụng mẫu sau có sẵn:
TODO Liệt kê các ứng dụng di động được viết bằng SDK của Realm, đồng bộ hóa dữ liệu với các dịch vụ ứng dụng bằng cách sử dụng đồng bộ hóa thiết bị
Ứng dụng web danh sách việc cần sử dụng API GraphQL và SDK Web Realm
Một mẫu kích hoạt cơ sở dữ liệu dựa trên sự kiện cập nhật chế độ xem trong một bộ sưu tập riêng biệt.
Kiểm tra các ứng dụng mẫu hoặc truy cập phần Hướng dẫn để biết hướng dẫn của một ứng dụng mẫu.
Kiểm tra các ứng dụng mẫu
Hướng dẫn cung cấp một hướng dẫn từng bước chi tiết để phát triển các ứng dụng sử dụng các tính năng dịch vụ ứng dụng.
Ứng dụng mẫu iOS với Swiftui
Phát triển một ứng dụng danh sách việc cần làm iOS đồng bộ hóa dữ liệu bằng SDK SDK và Đồng bộ hóa thiết bị Swift.
Ứng dụng mẫu Android với Kotlin
Phát triển một ứng dụng danh sách việc cần làm Android đồng bộ hóa dữ liệu bằng SDK và thiết bị Kotlin.
Ứng dụng mẫu Xamarin với C#
Phát triển một ứng dụng danh sách việc cần làm đa nền tảng đồng bộ hóa dữ liệu bằng cách sử dụng .NET SDK và đồng bộ hóa thiết bị.
Phản ứng ứng dụng mẫu gốc với javascript
Phát triển một ứng dụng danh sách việc cần làm đa nền tảng đồng bộ hóa dữ liệu bằng SDK tự nhiên phản ứng và đồng bộ hóa thiết bị.
Ứng dụng Mẫu Flutter với Dart
Phát triển một ứng dụng danh sách việc cần làm đa nền tảng đồng bộ hóa dữ liệu bằng cách sử dụng SDK và đồng bộ hóa thiết bị Flutter.
GitHub vấn đề theo dõi
Xây dựng một ứng dụng không có máy chủ để theo dõi hoạt động GitHub.
DOCS Home → Dịch vụ ứng dụng Atlas → Atlas App Services
Trên trang này
- Tổng quan
- Trước khi bắt đầu
- Bắt đầu với ứng dụng mẫu
- Tạo ứng dụng mẫu
- Cài đặt phụ thuộc
- Xây dựng ứng dụng
- Kiểm tra ứng dụng
- Làm quen với ứng dụng mẫu
- Ứ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
- Cập nhật mô hình dữ liệu mục việc cần làm
- Thêm một trình chọn ưu tiên
- Chạy và kiểm tra ứng dụng
- Cập nhật đăng ký đồng bộ hóa
- Thêm chế độ chuyển đổi vào UI
- Cập nhật đăng ký đồng bộ hóa
- Kiểm tra ứng dụng
- Làm quen với ứng dụng mẫu
- Ứ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
Cập nhật mô hình dữ liệu mục việc cần làm
Ghi chú
Đưa ra phản hồi
Nó đã đi như thế nào? Sử dụng tab Đưa ra phản hồi ở phía dưới bên phải của trang để cho chúng tôi biết nếu hướng dẫn này là hữu ích hoặc nếu bạn có bất kỳ vấn đề nào.React Native Quick Start. It includes copyable code examples and the essential information that you need to set up a React Native app with Atlas Device Sync.
DOCS Home → Dịch vụ ứng dụng AtlasSetting up the development environment in the React Native docs.
Trên trang này
Tổng quan
Trước khi bắt đầu
Bắt đầu với ứng dụng mẫu
Tạo ứng dụng mẫu
Cài đặt phụ thuộc
Xây dựng ứng dụngnpx 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 } }]
1.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 } }]
2, bạn có thể xem dữ liệu của ứng dụng. Dữ liệu mới và thay đổi từ ứng dụng gốc React tự động đồng bộ hóa với bộ sưu tập này.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 } }]
3. Nó có giá trị db.Item.updateOne[ { "_id": "630665dba3f53b578b75bd7e" }, { "$set": { "isComplete": true } }]
4 duy nhất trong db.Item.updateOne[ { "_id": "630665dba3f53b578b75bd7e" }, { "$set": { "isComplete": true } }]
5 mà các ứng dụng máy khách sử dụng để kết nối.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
2 phù hợp với lớpdb.Item.updateOne[ { "_id": "630665dba3f53b578b75bd7e" }, { "$set": { "isComplete": true } }]
9 trong ứng dụng gốc React.cd realm-sync-tutorial/frontend/react-native.todo.flex npm install 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 } }]
8.Ứ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 } }]
9:
| Lớp | ||||||||||||||||||||||||||||
| Các móc nối và các nhà cung cấp mà chúng tôi tạo và xuất để làm việc với Realm trong suốt ứng dụng. | ||||||||||||||||||||||||||||
| Thành phần gốc của ứng dụng, mà chúng tôi kết thúc với các nhà cung cấp hook realm từ | ||||||||||||||||||||||||||||
| Đăng ký người dùng và biểu mẫu đăng nhập mà người dùng nhìn thấy khi lần đầu tiên mở ứng dụng. | ||||||||||||||||||||||||||||
| Ứng dụng "Danh sách việc cần làm" chính mà người dùng tương tác sau khi họ đăng nhập. Nó truy vấn các đối tượng | ||||||||||||||||||||||||||||
| Một biểu mẫu UI cho phép chúng tôi nhập dữ liệu cho các đối tượng | ||||||||||||||||||||||||||||
| Một nút có thể tái sử dụng để đăng xuất một người dùng được xác thực. |
Bây giờ bạn đã quen thuộc hơn với những gì đã được cung cấp trong ứng dụng mẫu, hãy viết một số mã để thực hiện một tính năng mới.
Đố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
9. Điều này sẽ cho phép chúng tôi tổ chức việc làm bằng cách họ quan trọng như thế nào và cho phép chúng tôi chỉ tập trung vào những người quan trọng nhất.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
5:// 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, }
6, đến ít quan trọng nhất, // Priority.High === 1 // Priority[Priority.High] === "High" export enum Priority { Severe = 0, High = 1, Medium = 2, Low = 3, }
7. Điều này có nghĩa là mức độ ưu tiên "cao hơn" [nghĩa là một mức quan trọng hơn] có giá trị chỉ số thấp hơn.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, }
8 xác định các giá trị có thể có của trường // Priority.High === 1 // Priority[Priority.High] === "High" export enum Priority { Severe = 0, High = 1, Medium = 2, Low = 3, }
9. Tuy nhiên, chúng tôi vẫn phải xác định trường // Priority.High === 1 // Priority[Priority.High] === "High" export enum Priority { Severe = 0, High = 1, Medium = 2, Low = 3, }
9 trong lớp cd realm-sync-tutorial/frontend/react-native.todo.flex npm install
9.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, }
5 để thêm // Priority.High === 1 // Priority[Priority.High] === "High" export enum Priority { Severe = 0, High = 1, Medium = 2, Low = 3, }
9 vào mô hình: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
9 tự nhiên của bạn và lược đồ tương ứng của nó trong ứng dụng Atlas của bạn không còn đồng ý. Không sao đâu!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, }
9 cho mỗi đối tượng cd realm-sync-tutorial/frontend/react-native.todo.flex npm install
9. Hãy cập nhật giao diện người dùng ứng dụng để bạn có thể chọn giá trị ưu tiên khi bạn thêm việc cần làm mới vào danh sách.Đầ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', }; }
7: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', }; }
8:Theo dõi
9 trong một cái móc trạng thái// Priority.High === 1 // Priority[Priority.High] === "High" export enum Priority { Severe = 0, High = 1, Medium = 2, Low = 3, } Kết nối trạng thái với thành phần
0 mà bạn đã nhậpnpm install @react-native-picker/picker
chuyển
9 cho người xử lý// Priority.High === 1 // Priority[Priority.High] === "High" export enum Priority { Severe = 0, High = 1, Medium = 2, Low = 3, }
2npm install @react-native-picker/picker
export function CreateToDoPrompt[props] { const {onSubmit} = props; const [summary, setSummary] = useState[null]; const [priority, setPriority] = useState[Priority.High]; return [ Add Item setPriority[value]}> {Priority.map[priority => [ ]]} onSubmit[{summary, priority}]} /> ]; }
Trong
npm install @react-native-picker/picker
3, sửa đổi hàm npm install @react-native-picker/picker
4 để chấp nhận và sử dụng // Priority.High === 1 // Priority[Priority.High] === "High" export enum Priority { Severe = 0, High = 1, Medium = 2, Low = 3, }
9: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, }
9 và chuyển nó sang npm install @react-native-picker/picker
4:cd realm-sync-tutorial/frontend/react-native.todo.flex npm install
0Cuố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, }
9 trước npm install @react-native-picker/picker
9:cd realm-sync-tutorial/frontend/react-native.todo.flex npm install
1Ứ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.
Giao thức SYNC thiết bị sử dụng mô hình linh hoạt trong đó mỗi máy khách đồng bộ hóa sử dụng truy vấn RQL tiêu chuẩn để chọn một tập hợp dữ liệu ứng dụng và sau đó đăng ký vào tập hợp con. Điều này tự động kéo phiên bản mới nhất của tất cả dữ liệu trong tập hợp con với thiết bị và đồng bộ hóa thay đổi dữ liệu giữa các thiết bị.
Ví dụ: ứng dụng mẫu bạn đang sử dụng có đăng ký tích hợp sau đây cho các mục mà người dùng hiện tại sở hữu:
cd realm-sync-tutorial/frontend/react-native.todo.flex npm install
2Bạn có thể tùy chỉnh đăng ký trên con ruồi để chỉ đồng bộ hóa dữ liệu mà ứng dụng của bạn cần. Hãy thêm một tính năng để chứng minh cách làm thế nào.
Đối với hướng dẫn này, chúng tôi sẽ thêm một nút cho phép chúng tôi chuyển đổi giữa hai "chế độ": một trong đó ứng dụng đồng bộ hóa tất cả các mục cần làm và một trong đó nó chỉ đồng bộ hóa các mục "quan trọng" với
// Priority.High === 1 // Priority[Priority.High] === "High" export enum Priority { Severe = 0, High = 1, Medium = 2, Low = 3, }
9 cao hoặc nghiêm trọng.Đầu tiên, thêm một móc
1 vào thành phần import {Picker} from '@react-native-picker/picker'; import {Priority} from './ItemSchema';
2 để theo dõi chế độ hiện tại:import {Picker} from '@react-native-picker/picker'; import {Priority} from './ItemSchema';
cd realm-sync-tutorial/frontend/react-native.todo.flex npm install
3Sau đó, 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
4Tạ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';
3 đầu tiên của thành phần import {Picker} from '@react-native-picker/picker'; import {Priority} from './ItemSchema';
2, hãy thêm mã kiểm tra chế độ hiện tại và nối thêm bộ lọc // Priority.High === 1 // Priority[Priority.High] === "High" export enum Priority { Severe = 0, High = 1, Medium = 2, Low = 3, }
9 vào truy vấn nếu chế độ "Chỉ quan trọng" được hoạt động:cd realm-sync-tutorial/frontend/react-native.todo.flex npm install
5Quan trọng
Đừng quên thêm
import {Picker} from '@react-native-picker/picker'; import {Priority} from './ItemSchema';
6 vào danh sách các phụ thuộc trong đối số thứ hai của import {Picker} from '@react-native-picker/picker'; import {Priority} from './ItemSchema';
3.Ứ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
6Chú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, }
9 làm trường có thể truy vấn trong cấu hình đồng bộ hóa của ứng dụng Atlas.Đầu tiên, hãy tìm thư mục
db.Item.updateOne[ { "_id": "630665dba3f53b578b75bd7e" }, { "$set": { "isComplete": true } }]
3 của ứng dụng mẫu và sửa đổi export function CreateToDoPrompt[props] { const {onSubmit} = props; const [summary, setSummary] = useState[null]; const [priority, setPriority] = useState[Priority.High]; return [ Add Item setPriority[value]}> {Priority.map[priority => [ ]]} onSubmit[{summary, priority}]} /> ]; }
0:cd realm-sync-tutorial/frontend/react-native.todo.flex npm install
7Sau đó, chạy lệnh đầu cuối sau trong thư mục
db.Item.updateOne[ { "_id": "630665dba3f53b578b75bd7e" }, { "$set": { "isComplete": true } }]
3 để triển khai cấu hình đồng bộ hóa được cập nhật:cd realm-sync-tutorial/frontend/react-native.todo.flex npm install
8Khi 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".
Đọc tài liệu SDK bản địa của chúng tôi.React Native SDK documentation.
Tìm các bài đăng trên blog định hướng cho nhà phát triển và hướng dẫn tích hợp trên trung tâm nhà phát triển MongoDB.MongoDB Developer Hub.
Tham gia Diễn đàn Cộng đồng MongoDB để học hỏi từ các nhà phát triển và chuyên gia kỹ thuật MongoDB khác.MongoDB Community forum to learn from other MongoDB developers and technical experts.
Ghi chú
Đưa ra phản hồi
Nó đã đi như thế nào?Sử dụng tab Đưa ra phản hồi ở phía dưới bên phải của trang để cho chúng tôi biết nếu hướng dẫn này là hữu ích hoặc nếu bạn có bất kỳ vấn đề nào.