Skip to content

Commit 52700f5

Browse files
takameyerelle-j
takameyer
and
elle-j
authored
Add Airbnb Demo (#6725)
* Add Airbnb Demo This demo was created to demonstrate how Realm can be used as a cache for search results. It also shows various statistics in terms of disk usage and how much space the cache is using. --------- Co-authored-by: LJ <81748770+elle-j@users.noreply.github.com>
1 parent b473415 commit 52700f5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+14964
-0
lines changed

‎examples/rn-mbnb/.gitignore‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
2+
3+
# dependencies
4+
node_modules/
5+
6+
# Expo
7+
.expo/
8+
dist/
9+
web-build/
10+
11+
# Native
12+
*.orig.*
13+
*.jks
14+
*.p8
15+
*.p12
16+
*.key
17+
*.mobileprovision
18+
19+
# Metro
20+
.metro-health-check*
21+
22+
# debug
23+
npm-debug.*
24+
yarn-debug.*
25+
yarn-error.*
26+
27+
# macOS
28+
.DS_Store
29+
*.pem
30+
31+
# local env files
32+
.env*.local
33+
34+
# typescript
35+
*.tsbuildinfo
36+
37+
ios/
38+
android/

‎examples/rn-mbnb/.prettierrc‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"tabWidth": 2,
3+
"useTabs": false
4+
}

‎examples/rn-mbnb/App.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import "expo-dev-client";
2+
import "react-native-get-random-values";
3+
import React from "react";
4+
import { registerRootComponent } from "expo";
5+
import { SYNC_CONFIG } from "./sync.config";
6+
7+
import { AppWrapper } from "./app/AppWrapper";
8+
9+
export const App = () => <AppWrapper appId={SYNC_CONFIG.appId} />;
10+
11+
registerRootComponent(App);
12+
13+
export default App;

‎examples/rn-mbnb/README.md‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
# An MBnB Listing Search Demo with Searchable Results when Offline Using Atlas Device SDK for React Native
2+
3+
A demo application showcasing how to use [MongoDB's Atlas Device SDK for React Native](https://www.mongodb.com/docs/realm/sdk/react-native/) in order to cache viewed collection items and view them offline. It uses [anonymous authentication](https://www.mongodb.com/docs/atlas/app-services/authentication/anonymous/) to create a session which allows the demo user to search for MBnB listings from the [Sample AirBnB Listings dataset](https://www.mongodb.com/docs/atlas/sample-data/sample-airbnb/).
4+
5+
## Demo Video
6+
7+
<div style="display: flex">
8+
<img src="assets/Demo.gif" width="350" alt="Demo Video">
9+
</div>
10+
11+
## Project Structure
12+
13+
The following shows the project structure and the most relevant files.
14+
15+
> To learn more about the backend file structure, see [App Configuration](https://www.mongodb.com/docs/atlas/app-services/reference/config/).
16+
17+
```
18+
├── backend - App Services App
19+
│ └── (see link above)
20+
│
21+
├── app
22+
│ ├── AirbnbList.tsx - Main application screen
23+
│ ├── AnonAuth.tsx - Anonymous authentication component
24+
│ ├── AppWrapper.ts - Main wrapper with Realm Providers
25+
│ ├── localModels.ts - Local only realm model schema
26+
│ ├── localRealm.ts - Local realm context and hooks
27+
│ ├── syncedModels.tsx - Synced realm model schema
28+
│ └── syncedRealm.tsx - Synced realm context and hooks
29+
│
30+
├── App.js - Entry point
31+
├── sync.config.js - Add App ID
32+
├── package.json - Dependencies
33+
└── README.md - Instructions and info
34+
```
35+
36+
## Use Cases
37+
38+
This app focuses on showing how to cache viewed collection items and view them offline.
39+
40+
### Note: Using Multiple Realms at the Same Time
41+
42+
This app uses multiple Realms, which have been configured using `createRealmContext`. This creates separate providers and hooks to access either the local-only Realm or the synced Realm.
43+
44+
#### Realm Configuration
45+
46+
When [opening a Realm](https://www.mongodb.com/docs/realm/sdk/react-native/sync-data/configure-a-synced-realm/), we can specify the behavior in the Realm configuration when opening it for the first time (via `newRealmFileBehavior`) and for subsequent ones (via `existingRealmFileBehavior`). We can either:
47+
* `OpenRealmBehaviorType.OpenImmediately`
48+
* Opens the Realm file immediately if it exists, otherwise it first creates a new empty Realm file then opens it.
49+
* This lets users use the app with the existing data, while syncing any changes to the device in the background.
50+
* `OpenRealmBehaviorType.DownloadBeforeOpen`
51+
* If there is data to be downloaded, this waits for the data to be fully synced before opening the Realm.
52+
53+
This app opens a Realm via `RealmProvider` (see [AppWrapper.tsx](./app/AppWrapper.tsx)) and passes the configuration as props. We use `OpenImmediately` for existing Realm files in order to use the app while offline.
54+
55+
> See [OpenRealmBehaviorConfiguration](https://www.mongodb.com/docs/realm-sdks/js/latest/types/OpenRealmBehaviorConfiguration.html) for possible configurations of new and existing Realm file behaviors.
56+
57+
## Getting Started
58+
59+
### Prerequisites
60+
61+
* [Node.js](https://nodejs.org/)
62+
* [React Native development environment](https://reactnative.dev/docs/environment-setup?guide=native)
63+
* Refer to the Expo section.
64+
65+
### Set up an Atlas Database with a Sample Dataset
66+
67+
1. [Deploy a free Atlas cluster](https://www.mongodb.com/docs/atlas/getting-started/#get-started-with-atlas) and create an Atlas database.
68+
2. [Load the Sample Airbnb Dataset](https://www.mongodb.com/docs/atlas/sample-data/) into your Atlas database.
69+
* Several databases and collections exist in the sample dataset, but we will only be using the `sample_airbnb` database and its `listingsAndReviews` collection.
70+
3. [Create a Search Index](https://www.mongodb.com/docs/atlas/atlas-search/tutorial/create-index/) with an Index Name of `mbnb`. This will be used for Atlas Search within the application.
71+
72+
### Set up an Atlas App Services App via CLI
73+
74+
To import and deploy changes from your local directory to App Services you can use the command line interface:
75+
76+
1. [Set up App Services CLI](https://www.mongodb.com/docs/atlas/app-services/cli/).
77+
2. In the provided [backend directory](./backend/) (the App Services App), update the following:
78+
* Cluster Name
79+
* Update the `"clusterName"` in [data_sources/mongodb-atlas/config.json](./backend/data_sources/mongodb-atlas/config.json) to the name of your cluster.
80+
* (The default name is `Cluster0`.)
81+
* App ID
82+
* There is no `"app_id"` defined in [mdb/meta.json](./backend/mdb/meta.json) since we will create a brand new App. **If** you for some reason are updating an existing app, add an `"app_id"` field and its value.
83+
3. [Create and deploy](https://www.mongodb.com/docs/atlas/app-services/cli/appservices-push/) the local directory to App Services:
84+
```sh
85+
appservices push --local ./backend
86+
```
87+
4. Once pushed, verify that your App shows up in the App Services UI.
88+
5. 🥳 You can now go ahead and [install dependencies and run the React Native app](#install-dependencies).
89+
90+
### Install Dependencies
91+
92+
From the project root directory, run:
93+
94+
```sh
95+
npm install
96+
```
97+
98+
### Run the App
99+
100+
1. [Copy your Atlas App ID](https://www.mongodb.com/docs/atlas/app-services/reference/find-your-project-or-app-id/#std-label-find-your-app-id) from the App Services UI or from [./backend/meta.json](./backend/meta.json).
101+
2. Paste the copied ID as the value of the existing variable `appId` in [./sync.config.js](./sync.config.js):
102+
```js
103+
export const SYNC_CONFIG = {
104+
// Add your App ID here
105+
appId: "<YOUR APP ID>",
106+
};
107+
```
108+
3. Start Metro (the JavaScript bundler) in its own terminal:
109+
```sh
110+
npm start
111+
```
112+
4. In another terminal, start the app:
113+
```sh
114+
# Open the app on an iOS simulator.
115+
npm run ios
116+
117+
# Open the app on an Android emulator.
118+
npm run android
119+
```
120+
121+
> To run the app on an actual device, see React Native's [Running on Device](https://reactnative.dev/docs/running-on-device).
122+
123+
## Troubleshooting
124+
125+
A great help when troubleshooting is to look at the [Application Logs](https://www.mongodb.com/docs/atlas/app-services/activity/view-logs/) in the App Services UI.
126+
127+
### Permissions
128+
129+
If permission is denied:
130+
* Make sure your IP address is on the [IP Access List](https://www.mongodb.com/docs/atlas/app-services/security/network/#ip-access-list) for your App.
131+
* Make sure you have the correct [data access permissions](https://www.mongodb.com/docs/atlas/app-services/rules/roles/#define-roles---permissions) for the collections.
132+
133+
### Removing the Local Realm Database
134+
135+
Removing the local database can be useful for certain errors.
136+
137+
On an iOS simulator:
138+
1. Press and hold the app icon on the Home Screen.
139+
2. Choose to remove the app and its data.
140+
141+
On an Android emulator via Android Studio:
142+
1. Quit the emulator if it is running.
143+
2. Open `Device Manager`.
144+
3. Select `Wipe Data` for the relevant emulator.

‎examples/rn-mbnb/app.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"expo": {
3+
"name": "MBnB",
4+
"slug": "MBnB",
5+
"version": "1.0.0",
6+
"orientation": "portrait",
7+
"icon": "./assets/icon.png",
8+
"userInterfaceStyle": "light",
9+
"splash": {
10+
"image": "./assets/splash.png",
11+
"resizeMode": "contain",
12+
"backgroundColor": "#ffffff"
13+
},
14+
"assetBundlePatterns": [
15+
"**/*"
16+
]
17+
}
18+
}

0 commit comments

Comments
 (0)