Node Tutorial Text Edits

source/includes/steps-task-tracker-web-apollo.yaml

@@ -2,65 +2,30 @@ title: Instantiate an ApolloClient
 ref: instantiate-an-apolloclient
 level: 4
 content: |
-  The ``RealmApolloProvider`` component calls ``createApolloClient()`` to
-  instantiate the client. Update the function with the following code to create
-  an ``ApolloClient`` object that connects to your app:
+  The ``RealmApolloProvider`` component should call 
+  ``createRealmApolloClient()`` to instantiate the client. Update the 
+  component with the following code to create an ``ApolloClient`` object that 
+  connects to your app:
 
-  .. code-block:: typescript
-     :caption: ``src/realm/RealmApolloProvider.tsx``
-
-     function createApolloClient(realmAppId: string, user: Realm.User): ApolloClient<NormalizedCacheObject> {
-       const graphql_url = `https://realm.mongodb.com/api/client/v2.0/app/${realmAppId}/graphql`;
-
-       return new ApolloClient({
-         link: new HttpLink({
-           uri: graphql_url
-          }),
-         cache: new InMemoryCache(),
-       });
-     }
+  .. literalinclude:: RealmApolloProvider.codeblock.realmApolloProvider.js
+     :caption: ``src/graphql/RealmApolloProvider.js``
+     :emphasize-lines: 2-6
 ---
 title: Authenticate GraphQL Requests
 ref: authenticate-graph-ql-requests
 level: 4
 content: |
-  The ``createApolloClient()`` function now instantiates a client object, but
+  The ``createRealmApolloClient()`` function now instantiates a client object, but
   you won't be able to run any GraphQL queries or mutations just yet. Every
   GraphQL request must include an Authorization header that specifies a valid
   user access token. The current client does not include any Authorization
   headers, so all requests it makes will fail.
 
-  To fix this, update the ``createApolloClient()`` function to include the
+  To fix this, update the ``createRealmApolloClient()`` function to include the
   current user's access token in an Authorization header with every request:
 
-  .. code-block:: typescript
-     :caption: ``src/realm/RealmApolloProvider.tsx``
-     :emphasize-lines: 17
+  .. literalinclude:: RealmApolloProvider.codeblock.createRealmApolloClient.js
+     :caption: ``src/graphql/RealmApolloProvider.js``
+     :emphasize-lines: 4, 13
 
-     function createApolloClient(realmAppId: string, user: Realm.User): ApolloClient<NormalizedCacheObject> {
-       const graphql_url = `https://realm.mongodb.com/api/client/v2.0/app/${realmAppId}/graphql`;
-
-       return new ApolloClient({
-         link: new HttpLink({
-           uri: graphql_url,
-           fetch: async (uri: RequestInfo, options: RequestInit) => {
-             if (!options.headers) {
-               options.headers = {} as Record<string, string>;
-             }
-             // Refreshing custom data also ensures a valid access token
-             await user.refreshCustomData();
-             const authenticatedOptions: RequestInit = {
-               ...options,
-               headers: {
-                 ...options.headers,
-                 Authorization: `Bearer ${user.accessToken}`
-               }
-             }
-             return fetch(uri, authenticatedOptions);
-           },
-          }),
-         cache: new InMemoryCache(),
-       });
-     }
-     }
 ...

source/includes/steps-task-tracker-web-realmapp.yaml

@@ -3,19 +3,15 @@ ref: create-a-realm-app-client
 level: 4
 content: |
   The app client is the primary interface to your Realm app from the SDK. In
-  ``src/realm/RealmApp.tsx``, add the following code immediately below the
-  imports at the top of the file to create the app client:
+  ``src/App.js``, replace ``"TODO"`` with your Realm App ID:
 
-  .. code-block:: typescript
-     :caption: ``src/realm/RealmApp.tsx``
-
-     const REALM_APP_ID = "<Your App ID>"
-     const app = new Realm.App({ id: REALM_APP_ID });
+  .. literalinclude:: App.codeblock.appID.js
+     :caption: ``src/App.js``
 
   .. admonition:: Use Your App ID
      :class: note
 
-     Make sure to replace ``<Your App ID>`` with your app's unique
+     Make sure to replace ``"TODO"`` with your app's unique
      :guilabel:`App ID`. You can find your :guilabel:`App ID` by clicking the
      copy button next to the name of your app in the lefthand navigation of the
      Realm UI.
@@ -29,31 +25,14 @@ level: 4
 content: |
   The app client provides methods that allow you to authenticate and register
   users through the email/password authentication provider. In
-  ``src/realm/RealmApp.tsx``, the ``RealmApp`` component wraps these functions
+  ``src/RealmApp.js``, the ``RealmAppProvider`` component wraps these functions
   and keeps the app client in sync with local React state.
 
   These wrapping functions already have the state update calls but don't
   currently use the app client you created. You need to update the functions to
   actually call the SDK authentication and registration methods.
 
-  .. code-block:: typescript
-     :caption: ``src/realm/RealmApp.tsx``
-     :emphasize-lines: 3, 8-9, 15
-
-     // Let new users register an account
-     const registerUser = async (email: string, password: string) => {
-       return await app.emailPasswordAuth.registerUser(email, password);
-     }
-
-     // Let registered users log in
-     const logIn = async (email: string, password: string) => {
-       const credentials = Realm.Credentials.emailPassword(email, password);
-       await app.logIn(credentials);
-       setUser(app.currentUser);
-     }
-
-     // Let logged in users log out
-     const logOut = async () => {
-       await app.logOut();
-       setUser(app.currentUser);
-     }
+  .. literalinclude:: final/realmAppProvider.js
+     :caption: ``src/RealmApp.tsx``
+     :emphasize-lines: 10, 16, 19
+

source/includes/task-tracker-web-client-base-file-structure.rst

@@ -2,22 +2,22 @@
     :copyable: False
 
     src/
-    ├── index.tsx
-    ├── realm/
-    │   ├── RealmApp.tsx
-    │   ├── RealmApolloProvider.tsx
-    │   ├── schema.graphql
-    │   └── operations.graphql
+    ├── index.js
+    ├── App.js
+    ├── RealmApp.js
+    ├── TaskApp.js
     ├── components/
-    │   ├── App.tsx
-    │   ├── Board.tsx
-    │   ├── LoginScreen.tsx
-    │   ├── Navbar.tsx
-    │   ├── TaskCard.tsx
-    │   ├── TaskDetail.tsx
-    │   ├── TaskLists.tsx
-    │   └── TaskView.tsx
-    └── hooks/
-       ├── useDraftTask.tsx
-       ├── useTaskLists.tsx
-       └── useTasks.tsx
+    │   ├── EditPermissionsModal.js
+    │   ├── Loading.js
+    │   ├── LoginScreen.js
+    │   ├── ProjectScreen.js
+    │   ├── SideBar.js
+    │   ├── StatusChange.js
+    │   ├── TaskContent.js
+    │   ├── TaskDetailModal.js
+    │   └── useChangeTaskStatusButton.js
+    └── graphql/
+       ├── RealmApolloProvider.js
+       ├── useProjects.js
+       ├── useTaskMutations.js
+       └── useTasks.js

source/tutorial/nodejs-cli.txt

@@ -357,10 +357,19 @@ Once you have completed the code, you should run the app and check functionality
    .. image:: /images/node-cli-start-screen.png
       :alt:  Initial menu
 
-#. If you do not yet have a user account, enter an email and password, and the 
-   system will create a new account and log you in. At this point, you should see 
-   the main "menu" of choices. All of the options should now work for you except 
-   the "watch" functionality, which we'll enable in the next section.
+If the app builds successfully, here are some things you can try in the app:
+
+- Create a user with email *[email protected]*
+- Explore the app, then log out.
+- Start up the app again and register as another user with email *[email protected]*	  
+- Select *[email protected]*'s project
+- Add, update, and remove some tasks	  
+- Select the "Manage Team" menu option
+- Add *[email protected]* to your team
+- Log out and log in as *[email protected]*
+- See two projects in the projects list
+- Navigate to *[email protected]*'s project
+- Collaborate by adding, updating, and removing some new tasks
 
 .. admonition:: Reminder
 
@@ -370,7 +379,47 @@ Once you have completed the code, you should run the app and check functionality
 What's Next?
 ------------
 
-- Read our :ref:`Node.js SDK <node-intro>` documentation.
-- Try the :ref:`{+service+} Backend tutorial <backend-tutorial>`.
-- Find developer-oriented blog posts and integration tutorials on the `MongoDB Developer Hub <https://developer.mongodb.com>`__.
-- Join the `MongoDB Community forum <https://developer.mongodb.com/community/forums/c/realm/9>`__ to learn from other MongoDB developers and technical experts.
+You just built a functional task tracker web application built with MongoDB
+Realm. Great job!
+
+Now that you have some hands-on experience with MongoDB Realm, consider these
+options to keep practicing and learn more:
+
+- Extend the task tracker app with additional features. For example, you could:
+
+  - allow users to log in using another authentication provider
+
+- Follow another tutorial to build a mobile app for the task tracker. We have
+  task tracker tutorials for the following platforms:
+
+  - :doc:`iOS (Swift) </tutorial/ios-swift>`
+  - :doc:`Android (Kotlin) </tutorial/android-kotlin>`
+  - :doc:`React Native (JavaScript) </tutorial/react-native>`
+  - :doc:`Web with React and GraphQL (Javascript) </tutorial/web-graphql>`
+
+- Dive deeper into the docs to learn more about MongoDB Realm. You'll find
+  information and guides on features like:
+
+  - Serverless :doc:`functions </functions>` that handle backend logic and
+    connect your app to external services. You can call functions from a
+    client app, either directly or as a :doc:`custom GraphQL resolver
+    </graphql/custom-resolvers>`.
+
+  - :doc:`Triggers </triggers>` and :ref:`incoming webhooks <service-webhooks>`,
+    which automatically call functions in response to events as they occur. You
+    can define :doc:`database triggers </triggers/database-triggers>` which
+    respond to changes in your data, :doc:`authentication triggers
+    </triggers/authentication-triggers>` which respond to user management and
+    authentication events, and :doc:`scheduled triggers
+    </triggers/scheduled-triggers>` which run on a fixed schedule.
+
+  - Built-in :doc:`authentication providers </authentication/providers>` and
+    and user management tools. You can allow users to log in through multiple
+    methods, like API keys and Google OAuth, and associate :doc:`custom data
+    </users/enable-custom-user-data>` with every user.
+
+.. admonition:: Leave Feedback
+   :class: note
+
+   How did it go? Please let us know if this tutorial was helpful or if you had
+   any issues by using the feedback widget on the bottom right of the page.