Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add RN example app (Multiple Realms) #6136

Merged
merged 34 commits into from
Sep 23, 2023
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
a57dab4
Setup RN project.
elle-j Sep 4, 2023
75e6df0
Add initial navigation.
elle-j Sep 5, 2023
92f509a
Integrate Realm and sync dataset.
elle-j Sep 6, 2023
988f1a2
Show loading screen at startup.
elle-j Sep 6, 2023
a8f1ea6
Implement 'AccountScreen'.
elle-j Sep 8, 2023
42a3ba3
Add types to the navigation.
elle-j Sep 8, 2023
ffd915d
Refactor top 'App' into two components.
elle-j Sep 8, 2023
e7a6fe3
Refactor 'MovieProvider' with a helper query function.
elle-j Sep 8, 2023
a68fbf2
Refactor lists of movies to own memoized components.
elle-j Sep 8, 2023
fbde559
Minor style updates.
elle-j Sep 8, 2023
5ad0781
Update model.
elle-j Sep 13, 2023
b261831
Implement 'MovieInfoScreen'.
elle-j Sep 13, 2023
cc6df7b
Rename 'HomeScreen' to 'MoviesScreen'.
elle-j Sep 13, 2023
86a60c0
Rename 'AnonymousLogin' to 'PublicLogin'.
elle-j Sep 17, 2023
5a4d29c
Add 'PrivateContent' model.
elle-j Sep 17, 2023
24d6a33
Open different Realm if public account.
elle-j Sep 17, 2023
80e6a6b
Provide 'My List' and 'add/remove' db operations.
elle-j Sep 17, 2023
c58ba68
Handle adding/removing from 'My List' on 'MovieInfoScreen'.
elle-j Sep 17, 2023
4cd1a94
Update comments.
elle-j Sep 17, 2023
5cba9ba
Improve accessibility.
elle-j Sep 17, 2023
2bed6cb
Upgrade Realm minor version.
elle-j Sep 17, 2023
03012cb
Update comments.
elle-j Sep 17, 2023
35b94bd
Remove generic type from models.
elle-j Sep 17, 2023
330afdd
Add 'AppInfoScreen'.
elle-j Sep 18, 2023
462c21a
Add separate frontend and backend directories.
elle-j Sep 18, 2023
0caa4c6
Add README.
elle-j Sep 18, 2023
590e127
Update README.
elle-j Sep 18, 2023
1afe90b
Add placeholder App ID.
elle-j Sep 18, 2023
ad5723f
Update comments.
elle-j Sep 18, 2023
4a69a4b
Move inline icons out of parent component.
elle-j Sep 18, 2023
264896d
Update README.
elle-j Sep 19, 2023
696d83c
Change the schema name to 'movies' for the sample dataset.
elle-j Sep 19, 2023
92831b1
Open MDB links in host's browser instead of simulator.
elle-j Sep 23, 2023
c91f225
Update README.
elle-j Sep 23, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Change the schema name to 'movies' for the sample dataset.
This is to make it easier for users who set up App Services manually rather than via the Realm CLI.
  • Loading branch information
elle-j committed Sep 23, 2023
commit 696d83c7d85fe354d6e46207b878a1c229392efd
22 changes: 12 additions & 10 deletions examples/rn-multiple-realms/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ The following shows the project structure and the most relevant files.

```
├── backend
│ └── ... - See link above
│ └── (see link above) - App Services App
├── frontend
│ ├── app
│ │ ├── atlas-app-services
Expand Down Expand Up @@ -116,14 +116,13 @@ Each movie poster is loaded from a remote source and is not cached on the client

1. [Deploy a free Atlas cluster](https://www.mongodb.com/docs/atlas/getting-started/#get-started-with-atlas) and create an Atlas database.
2. [Load the Sample Mflix Dataset](https://www.mongodb.com/docs/atlas/sample-data/) into your Atlas database.
* Several collections exist in that dataset, but we will only be using the `movies` collection.
* Do note that the name of its schema is lowercase and singular (`movie`).
* Several databases and collections exist in the sample dataset, but we will only be using the `sample_mflix` database and its `movies` collection.

### Set up an Atlas App Services App

You can either choose to set up your App via a CLI (where the configurations are already provided in the [backend directory](./backend/)), or via the App Services UI (steps provided below).
You can either choose to set up your App via a CLI (this has fewer steps and is much faster since all configurations are already provided in the [backend directory](./backend/)), or via the App Services UI (steps provided below).

#### Via a CLI
#### Via a CLI (recommended)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Amazing. This works wonderfully. We should probably adopt this strategy for all our examples. JS people love the terminal ;)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I definitely think so too. Was talking to Kenneth about it today. Much better DX, less hassle, and less error prone 👍


To import and deploy changes from your local directory to App Services you can use the command line interface:

Expand All @@ -138,7 +137,7 @@ To import and deploy changes from your local directory to App Services you can u
```sh
realm-cli push --local <path to backend directory>
```
4. Once pushed, double check in the App Services UI that both triggers are enabled.
4. Once pushed, verify that your App shows up in the App Services UI and that both triggers have the status `Enabled`.
5. You can now go ahead and [run the React Native app](#run-the-app).

#### Via the App Services UI
Expand All @@ -147,17 +146,20 @@ To sync data used in this app you must first:

1. [Create an App Services App](https://www.mongodb.com/docs/atlas/app-services/manage-apps/create/create-with-ui/).
2. [Enable Email/Password Authentication](https://www.mongodb.com/docs/atlas/app-services/authentication/email-password/) and [Anonymous Authentication](https://www.mongodb.com/docs/atlas/app-services/authentication/anonymous/).
* For this example app, we automatically confirm users' emails.
3. [Enable Flexible Sync](https://www.mongodb.com/docs/atlas/app-services/sync/configure/enable-sync/) with **Development Mode** enabled.
* When Development Mode is enabled, [queryable fields](https://www.mongodb.com/docs/atlas/app-services/sync/configure/sync-settings/#queryable-fields) will be added automatically, and schemas will be inferred based on the client Realm data models.
* Queryable fields used in this app include:
* Select `sample_mflix` as the database to store new collections in.
* When Development Mode is enabled, [queryable fields](https://www.mongodb.com/docs/atlas/app-services/sync/configure/sync-settings/#queryable-fields) will be added **automatically**, and schemas will be inferred based on the client Realm data models.
* For information, queryable fields used in this app include:
* Global (all collections): `_id`
* `movies` collection: `title`, `fullplot`, `type`, `year`, `genres`, `poster`
* `PrivateContent` collection: `userId`
* (Development Mode should be turned off in production.)
4. Don't forget to click `Review Draft and Deploy`.

### Add Atlas Triggers and Functions

> If you set up your App Services App [via a CLI](#via-a-cli), you can **skip this step** as the triggers and functions should already be defined for you.
> If you set up your App Services App [via a CLI](#via-a-cli-recommended), you can **skip this step** as the triggers and functions should already be defined for you.

We will add a trigger that is automatically triggered when users register with email and password. This trigger in turn calls a function to create a `PrivateContent` document containing the `myList` field. When a user is deleted (e.g. by manually deleting them via the App Services UI) we also add a trigger and function for deleting the `PrivateContent` document.

Expand Down Expand Up @@ -226,7 +228,7 @@ npm run android

### Set Data Access Permissions

> If you set up your App Services App [via a CLI](#via-a-cli), you can **skip this step** as the permissions should already be defined for you.
> If you set up your App Services App [via a CLI](#via-a-cli-recommended), you can **skip this step** as the permissions should already be defined for you.

After running the client app for the first time and seeing the available collections in Atlas, [modify the rules](https://www.mongodb.com/docs/atlas/app-services/rules/roles/#define-roles---permissions) for the collections in the App Services UI for increased security.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -180,6 +180,6 @@
"type",
"year"
],
"title": "movie",
"title": "movies",
"type": "object"
}
2 changes: 1 addition & 1 deletion examples/rn-multiple-realms/backend/sync/config.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"PrivateContent": [
"userId"
],
"movie": [
"movies": [
"poster",
"year",
"fullplot",
Expand Down
4 changes: 2 additions & 2 deletions examples/rn-multiple-realms/frontend/app/models/Movie.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,8 @@ export class Movie extends Realm.Object {
type!: string;

static schema: ObjectSchema = {
// Use lowercase 'movie' since the Mflix sample dataset uses that name.
name: 'movie',
// Using same name (lowercase 'movies') as the Mflix sample dataset.
name: 'movies',
primaryKey: '_id',
properties: {
_id: 'objectId',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@ export class PrivateContent extends Realm.Object {
properties: {
_id: 'objectId',
userId: 'string',
// Make sure to use lowercase `movie` as defined in `Movie.schema.name`.
myList: 'movie[]',
// Make sure to use lowercase `movies` as defined in `Movie.schema.name`.
myList: 'movies[]',
},
};
}