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

Edits to Node.js and React Native Tutorial Text #513

Merged
merged 1 commit into from
Oct 5, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
22 changes: 11 additions & 11 deletions source/includes/steps-tutorial-react-native.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ ref: connect-to-your-mongodb-realm-app
content: |
To get the app working with your backend, you first need to instantiate the
Realm app. The Realm app is the interface to the MongoDB Realm backend.
Navigate to the getRealmApp.js file and complete the ``getRealmApp()``
Navigate to the ``getRealmApp.js`` file and complete the ``getRealmApp()``
function implementation:

.. literalinclude:: /tutorial/generated/code/final/getRealmApp.codeblock.get-realm-app.js
Expand All @@ -134,8 +134,8 @@ content: |
title: Implement the AuthProvider
ref: implement-the-auth-provider
content: |
Navigate to providers/AuthProvider.js. In this file, and in the
providers/TasksProvider.js file that we will complete a bit later, we use
Navigate to ``providers/AuthProvider.js``. In this file, and in the
``providers/TasksProvider.js`` file that we will complete a bit later, we use
React :reactjs:`Context <docs/context.html>` and :reactjs:`hooks
<docs/hooks-overview.html>` to implement a data provider pattern. Don't worry
if you aren't too familiar with these constructs yet. The basic idea is as
Expand Down Expand Up @@ -179,7 +179,7 @@ content: |
realm may be empty when first opened. Add an observer to the collection of
users in that realm in order to watch for the user object first appearing as
well as any changes to the its Project memberships. When a user object is
available, read its memberOf field to populate the available Project data for
available, read its ``memberOf`` field to populate the available Project data for
any descendant of the provider:

.. literalinclude:: /tutorial/generated/code/final/AuthProvider.codeblock.open-user-realm.js
Expand All @@ -192,7 +192,7 @@ content: |
.. literalinclude:: /tutorial/generated/code/final/AuthProvider.codeblock.user-realm-cleanup.js
:language: javascript

Check out the App.js, view/WelcomeView.js, and view/ProjectView.js files to
Check out the ``App.js``, ``view/WelcomeView.js``, and ``view/ProjectView.js`` files to
see how they use the AuthProvider's signIn, signUp, and signOut functions and
user data via the ``useAuth()`` hook function. The ProjectView also uses the
Project data to populate the list of Projects available to the logged-in user.
Expand All @@ -203,7 +203,7 @@ title: Define the Task Schema
ref: define-the-task-schema
content: |
In order to work with Task objects in the Realm Database, we need to define
their schema. Navigate to the schemas.js file to complete the Task class's
their schema. Navigate to the ``schemas.js`` file to complete the Task class's
schema definition:

.. literalinclude:: /tutorial/generated/code/final/schemas.codeblock.react-native-task-schema.js
Expand Down Expand Up @@ -253,31 +253,31 @@ content: |
.. literalinclude:: /tutorial/generated/code/final/TasksProvider.codeblock.delete-task.js
:language: javascript

Check out the views/TasksView.js and components/TaskItem.js files to see how
Check out the ``views/TasksView.js`` and ``components/TaskItem.js`` files to see how
they use the provider's task data and functionality via the ``useTasks()``
hook function.
---
title: Implement Team Management
ref: implement-team-management
content: |
A user can add other users to their team, which allows them to view, edit, and
delete Tasks on the user's Project. The ManageTeam component implements this
delete Tasks on the user's Project. The ``ManageTeam`` component implements this
functionality by calling a few Realm functions on the backend that we defined
earlier.

Navigate to components/ManageTeam.js. First, we need to fetch the list of
Navigate to ``components/ManageTeam.js``. First, we need to fetch the list of
current team members:

.. literalinclude:: /tutorial/generated/code/final/ManageTeam.codeblock.get-team.js
:language: javascript

Next, call the addTeamMember function on the backend to implement add team
Next, call the ``addTeamMember`` function on the backend to implement add team
member functionality:

.. literalinclude:: /tutorial/generated/code/final/ManageTeam.codeblock.add-team-member.js
:language: javascript

Finally, call the removeTeamMember function on the backend to implement remove
Finally, call the ``removeTeamMember`` function on the backend to implement remove
team member functionality:

.. literalinclude:: /tutorial/generated/code/final/ManageTeam.codeblock.remove-team-member.js
Expand Down
25 changes: 9 additions & 16 deletions source/tutorial/nodejs-cli.txt
Original file line number Diff line number Diff line change
Expand Up @@ -83,39 +83,32 @@ directly from GitHub:

.. code-block:: console

git clone git@github.com:mongodb-university/realm-tutorial.git
git clone git@github.com:mongodb-university/realm-tutorial-node-js.git

.. important::

The ``main`` branch is a finished version of the app as it should look *after*
The ``final`` branch is a finished version of the app as it should look *after*
you complete this tutorial. To walk through this tutorial, please check
out the ``todo`` branch:
out the ``start`` branch:

.. code-block:: console

git checkout todo
git checkout start

In your terminal, run the following commands to navigate to the task tracker
client application and install its dependencies:
In your terminal, run the following command to install its dependencies:

.. code-block:: console

cd realm-tutorial/node-cli
npm install

C. Explore the App Structure & Components
-----------------------------------------

The ``realm-tutorial`` repo contains task tracker client applications for
multiple platforms. The project root for this tutorial is located in the
``node-cli`` subdirectory. Open a text editor to explore the directory and
files.

This application has a flat project structure: all of the files are in the root
directory. In this tutorial, we'll be focusing on 5 files: ``config.js``,
``users.js``, ``tasks.js``, ``team.js``, ``projects.js``. The other files provide the
underlying structure for the CLI. The following table describes the role of
important files in this project:
directory. Open a text editor to explore the directory and files. In this tutorial,
we'll be focusing on 5 files: ``config.js``, ``users.js``, ``tasks.js``, ``team.js``,
``projects.js``. The other files provide the underlying structure for the CLI. The
following table describes the role of important files in this project:

.. cssclass:: config-table
.. list-table::
Expand Down
5 changes: 4 additions & 1 deletion source/tutorial/react-native.txt
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,10 @@ React Native. This tutorial illustrates the creation of a "Task Tracker" React N
application that allows users to:

- Sign in to their account with their email and password and sign out later.
- View, create, modify, and delete tasks.
- View a list of projects they are a member of.
- View, create, modify, and delete tasks in projects.
- View a list of team members in their project.
- Add and remove team members to their project.

This tutorial should take around 30 minutes.

Expand Down