Skip to content

Cleanup for tutorial phase 2 #516

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

Merged
merged 1 commit into from
Oct 6, 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
4 changes: 3 additions & 1 deletion source/includes/steps-tutorial-ios-swift.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,9 @@ ref: define-the-object-models
content: |
Navigate to the Models.swift file to implement the Realm Object Models used in
this app. First, implement the User model, which contains information about
the user's membership in different projects:
the user's membership in different projects. Notice that the Realm object
models derive from ``Object`` from the ``RealmSwift`` library, which allows
Realm to store them in the Realm Database:

.. literalinclude:: /tutorial/generated/code/final/Models.codeblock.user-model.swift
:language: swift
Expand Down
35 changes: 27 additions & 8 deletions source/tutorial.txt
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,31 @@ Create a Task Tracker App
:class: singlecol

In this tutorial, you will build a collaborative task tracker app with
{+service+}. After :doc:`setting up the backend for the tutorial
</tutorial/realm-app>` in {+service+}, you can build clients for:
{+service+}. With the app client, users can:

- Register themselves with email and password.
- Sign in to their account with their email and password and sign out later.
- 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.

To get started, first:

- :doc:`Set up the backend for the tutorial </tutorial/realm-app>`

Next, complete any of the following clients to work with your new backend:

- :doc:`iOS with Swift </tutorial/ios-swift>`
- :doc:`Android with Kotlin </tutorial/android-kotlin>`
- :doc:`React Native (iOS and Android) with JavaScript </tutorial/react-native>`
- :doc:`The browser with GraphQL, TypeScript, and React </tutorial/web-graphql>`
- :doc:`The browser with GraphQL, JavaScript, and React </tutorial/web-graphql>`
- :doc:`A Node.js Command Line Interface (CLI) </tutorial/nodejs-cli>`

Additionally, you can create a headless :doc:`backend app
</tutorial/backend>` that uses webhooks, functions, and triggers to
integrate with GitHub and MongoDB.
Additionally, you can create a headless backend app that uses webhooks,
functions, and triggers to integrate with GitHub and MongoDB:

- :doc:`Write a GitHub Issue Tracker with MongoDB Realm </tutorial/backend>`

.. toctree::
:titlesonly:
Expand All @@ -41,7 +54,13 @@ integrate with GitHub and MongoDB.
iOS with Swift </tutorial/ios-swift>
Android with Kotlin </tutorial/android-kotlin>
React Native with JavaScript </tutorial/react-native>
Web app with React, TypeScript, and GraphQL </tutorial/web-graphql>
Serverless with GitHub Integration </tutorial/backend>
Web app with React, JavaScript, and GraphQL </tutorial/web-graphql>
A Node.js Command Line Interface (CLI) </tutorial/nodejs-cli>

.. toctree::
:titlesonly:
:caption: Additional Tutorial
:hidden:

GitHub Issue Tracker with MongoDB Realm </tutorial/backend>

22 changes: 1 addition & 21 deletions source/tutorial/android-kotlin.txt
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,7 @@ Android Kotlin Tutorial
Overview
--------

In this first phase of the tutorial, you will create a task
tracker app that allows users to:
In this tutorial, you will create a task tracker app that allows users to:

- Register themselves with email and password.
- Sign in to their account with their email and password and sign out later.
Expand Down Expand Up @@ -44,28 +43,9 @@ Before you begin, ensure you have:
- An Android emulator for testing.
- :ref:`Set up the backend <tutorial-task-tracker-create-realm-app>`.

Define Data Access Permissions and Enable Sync
----------------------------------------------

The backend app is set up with an email/password authentication provider that we
can use to let users sign up and log in. Now, we need to define sync rules and
enable sync so that sync clients can read and write objects.


.. include:: /includes/steps/task-tracker-enable-sync.rst

Set Up the Mobile App
---------------------

.. admonition:: Download the Complete Source Code
:class: note

We host this tutorial application's :github:`complete and ready-to-compile
source code <mongodb-university/realm-tutorial-android-kotlin>` on
GitHub. Just follow the instructions in ``README.md`` to get started. Don't
forget to update the ``build.gradle`` file with your App ID, which you can
find in the {+ui+}.
Copy link
Contributor

Choose a reason for hiding this comment

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

Wait, should this note still be here? Or has it been superseded by something else?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

It's in the steps now


.. include:: /includes/steps/tutorial-android-kotlin.rst

What's Next?
Expand Down
26 changes: 5 additions & 21 deletions source/tutorial/ios-swift.txt
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,14 @@ iOS Swift Tutorial
Overview
--------

In this first phase of the tutorial, you will create a task
tracker app that allows users to:
In this tutorial, you will create a task tracker app that allows users to:

- Register themselves with email and password.
- 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 All @@ -42,27 +44,9 @@ Before you begin, ensure you have:
- `CocoaPods <https://guides.cocoapods.org/using/getting-started.html>`__ 1.6.0 or later.
- :ref:`Set up the backend <tutorial-task-tracker-create-realm-app>`.

Define Data Access Permissions and Enable Sync
----------------------------------------------

The backend app is set up with an email/password authentication provider that we
can use to let users sign up and log in. Now, we need to define sync rules and
enable sync so that sync clients can read and write objects.

.. include:: /includes/steps/task-tracker-enable-sync.rst

Set Up the Mobile App
---------------------

.. admonition:: Download the Complete Source Code
:class: note

We host this tutorial application's :github:`complete and ready-to-compile
source code <mongodb-university/realm-tutorial/tree/main/swift-ios>` on GitHub.
Just follow the instructions in ``README.md`` to get started. Don't forget to
update the ``SceneDelegate.swift`` file with your App ID, which you can find in
the {+ui+}.

.. include:: /includes/steps/tutorial-ios-swift.rst

What's Next?
Expand Down
29 changes: 6 additions & 23 deletions source/tutorial/nodejs-cli.txt
Original file line number Diff line number Diff line change
Expand Up @@ -47,14 +47,6 @@ This tutorial should take around 30 minutes to complete.
includes copyable code examples and the essential information that you need
to set up a MongoDB Realm application.

.. admonition:: Download the Complete Source Code
:class: note

We host this tutorial application's :github:`complete and ready-to-compile
source code <mongodb-university/realm-tutorial/tree/main/node-cli>` on
GitHub. You will need to update the ``config.js`` file with your App ID,
which you can find in the {+ui+}.

Prerequisites
-------------

Expand All @@ -65,16 +57,7 @@ Before you begin, ensure you have:

Once you're set up with these prerequisites, you're ready to start the tutorial.

A. Define Data Access Permissions and Enable Sync
-------------------------------------------------

The backend app is set up with an email/password authentication provider that we
can use to let users sign up and log in. Now, we need to define sync rules and
enable sync so that sync clients can read and write objects.

.. include:: /includes/steps/task-tracker-enable-sync.rst

B. Clone the Client App Repository
A. Clone the Client App Repository
----------------------------------

We've already put together a task tracker CLI application that has most of
Expand All @@ -101,7 +84,7 @@ In your terminal, run the following command to install its dependencies:

npm install

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

This application has a flat project structure: all of the files are in the root
Expand Down Expand Up @@ -152,7 +135,7 @@ following table describes the role of important files in this project:
* - projects.js
- Handles project retrieval and listing.

D. Connect to Your MongoDB Realm App
C. Connect to Your MongoDB Realm App
------------------------------------

To get the app working with your backend, you first need to add your Realm App ID
Expand Down Expand Up @@ -188,7 +171,7 @@ At this point, your app is pointing to your backend and opens a connection
to it when you start the app. However, users cannot log in yet, so let's update
that code next.

E. Enable authentication
D. Enable authentication
------------------------

In the ``users.js`` file, we have a ``logIn`` function that prompts the user for
Expand All @@ -203,7 +186,7 @@ Find the the ``logIn`` function and add the following code to create a
.. literalinclude:: /tutorial/generated/code/final/users.codeblock.userLogin.js
:emphasize-lines: 17, 18, 19, 22

F. Implement the CRUD methods
E. Implement the CRUD methods
-----------------------------

In the ``tasks.js`` and ``projects.js`` files, there are a number of functions to handle typical
Expand Down Expand Up @@ -294,7 +277,7 @@ In ``projects.js``:
.. literalinclude:: /tutorial/generated/code/final/projects.codeblock.getProjects.js
:emphasize-lines: 4, 5

G. Use Realm Functions
F. Use Realm Functions
----------------------

In the ``team.js`` file, there are functions that rely on :ref:`{+service-short+}
Expand Down
18 changes: 0 additions & 18 deletions source/tutorial/react-native.txt
Original file line number Diff line number Diff line change
Expand Up @@ -51,27 +51,9 @@ Ensure that you have the following:

- :ref:`Set up the backend <tutorial-task-tracker-create-realm-app>`.

Define Data Access Permissions and Enable Sync
----------------------------------------------

The backend app is set up with an email/password authentication provider that we
can use to let users sign up and log in. Now, we need to define sync rules and
enable sync so that sync clients can read and write objects.

.. include:: /includes/steps/task-tracker-enable-sync.rst

Set Up the Mobile App
---------------------

.. admonition:: Download the Complete Source Code
:class: note

We host this tutorial application's :github:`complete and ready-to-compile
source code <mongodb-university/realm-tutorial/tree/main/rn>` on GitHub.
Just follow the instructions in ``README.md`` to get started. Don't forget to
update the ``getRealmApp.js`` file with your App ID, which you can find in
the {+ui+}.

.. include:: /includes/steps/tutorial-react-native.rst

What's Next?
Expand Down
56 changes: 7 additions & 49 deletions source/tutorial/web-graphql.txt
Original file line number Diff line number Diff line change
Expand Up @@ -73,49 +73,7 @@ Before you get started, you'll need the following:

Once you're set up with these prerequisites, you're ready to start the tutorial.

.. admonition:: Download the Complete Source Code
:class: note

We host this tutorial application's :github:`complete and ready-to-run source
code <mongodb-university/realm-tutorial/tree/main/web>` on GitHub. You can
use it to check your work or download it to run the app locally.

To get started, follow the instructions in ``README.md``. Don't forget to
update the ``/src/realm/RealmApp.tsx`` file with your App ID, which you can
find in the {+ui+}.

A. Define Data Access Permissions
---------------------------------

.. admonition:: Non-Sync Permissions
:class: important

The permissions in this step only apply if you do not enable sync for the
application. Sync permissions use a different rules system and override any
non-sync permissions when sync is enabled. If you plan to or have already
used the task tracker backend from one of the frontend apps that support
sync, then you can skip this section in favor of the sync permissions
described on the sync app's tutorial page.

The Realm Web SDK and GraphQL API do not use sync, so if you only intend to
build a web client then use these rules.

The backend app is set up with an email/password authentication provider that we
can use to let users sign up and log in and an automatically generated GraphQL
API that we can use work with data.

By default, however, all GraphQL queries from a client application will fail.

To allow users to read and write data, you must first define data access rules
that determine whether a given user has read or write permissions for a given
document.

You define non-sync data access rules for your GraphQL API on the
:guilabel:`Rules` screen of the Realm UI.

.. include:: /includes/steps/task-tracker-server-rules.rst

B. Clone the Client App Repository
A. Clone the Client App Repository
----------------------------------

We've already put together a task tracker browser application that has most of
Expand Down Expand Up @@ -143,7 +101,7 @@ tutorial, please check out the ``start`` branch:

git checkout

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

The web client is a standard React web application written in
Expand Down Expand Up @@ -187,7 +145,7 @@ components and hooks use the code that you write.
`official React website <https://reactjs.org>`_, which has excellent
documentation and tutorials.

D. Connect to Your MongoDB Realm App
C. Connect to Your MongoDB Realm App
------------------------------------

The client app needs to connect to your Realm app so that users can register and
Expand Down Expand Up @@ -230,7 +188,7 @@ authentication.
:emphasize-lines: 6


E. Define the GraphQL Schema & Operations
D. Define the GraphQL Schema & Operations
-----------------------------------------

A GraphQL schema defines all of the types, enums, and scalars that a GraphQL
Expand Down Expand Up @@ -279,7 +237,7 @@ following functions and call the appropriate mutations:
.. literalinclude:: useTaskMutations.codeblock.useAddTask.js
:emphasize-lines: 3-8

F. Connect Apollo to the GraphQL API
E. Connect Apollo to the GraphQL API
------------------------------------

We've defined GraphQL CRUD operations and created custom query and mutation hooks
Expand All @@ -293,7 +251,7 @@ connect to your app's GraphQL API.

.. include:: /includes/steps/task-tracker-web-apollo.rst

G. Implement the Projects List
F. Implement the Projects List
------------------------------

As defined by our data model, ``projects`` are an embedded object of the ``users`` object.
Expand All @@ -306,7 +264,7 @@ current user's projects. We'll need to add the following code:
.. literalinclude:: useProjects.codeblock.useProjects.js
:emphasize-lines: 6

H. Use Realm functions
G. Use Realm functions
----------------------

In the ``EditPermissionsModal.js`` file, there are functions that rely on :ref:`{+service-short+}
Expand Down