Sample App: Stitch + Atlas Search¶
Author: MongoDB Documentation Team
In this guide, you will create a movie search engine with Stitch and Atlas Search.
Time required: 20 minutes
What You’ll Need¶
Check Your Environment¶
This tutorial consists of five stages:
Load the sample dataset.¶
To load the sample dataset into your cluster, navigate to the Atlas UI and click the ellipse (…) button in your cluster’s panel. Select Load Sample Dataset from the dropdown menu.
You can examine documents in your cluster’s collections with the Atlas Data Explorer.
- Click the Collections button in your cluster’s panel in the Atlas UI.
- Select sample_mflix from the Namespaces panel on the left side.
- Select the movies collection.
- The first 20 documents appear in the panel on the right. The
fullplotfield contains text which we will make searchable for our application.
Create an Atlas Search index.¶
Next we’ll create an Atlas Search index on the
- Select Search in the right-side panel.
- Click the Create Search Index button.
- The Configure Search Index modal window is where you can create a custom index definition. For now we’ll use the default index definition, which indexes all available fields. Click the Create Index button.
- The index takes a few minutes to build. When it’s done, move on to the next step.
Write an aggregation pipeline query. (Optional)¶
Full-text search queries use the $search aggregation pipeline stage. If you’d like to learn more about constructing a full-text search query, proceed with the following steps. If you’d rather get right to the Stitch part of the tutorial, you can skip to the next step.
Open Compass and connect to your Atlas cluster. For detailed connection instructions, see the Compass documentation.
Navigate to the
Select the Aggregations tab in the top navigation.
Select $search in the dropdown menu for the first aggregation stage.
Enter the following text in the
$searchstage of your pipeline:
Click the Add Stage button.
In our next stage we’ll use a $project stage to narrow down our return output to just a few of the fields in the
moviescollection documents. Select
$projectfrom the dropdown menu of the second stage.
We’ll return the fields
fullplot. We’ll suppress the
_idfield and add two new fields,
Enter the following text the
$projectstage of your pipeline:
Lastly, we’ll add a $limit stage to limit our results to 10 documents. Select
$limitfrom the dropdown menu of the third stage and enter
10in the text box.
In the output preview to the right you should see a few movies dealing with vampires and werewolves. If you don’t, go back and check that all your pipeline stages have valid syntax.
Create a Stitch application.¶
Now we have a dataset and an aggregation pipeline to query it. Next, we’ll use Stitch to create a RESTful API backend to accept incoming data requests.
Go back to the Atlas web UI and select Stitch from the left-side navigation.
Click the Create New Application button.
AtlasSearchDemoin the Application Name text box.
Select the cluster with your
sample_mflixdatabase in the Link to Cluster dropdown menu.
Leave the other modal window settings where they are and click Create.
After Atlas finishes linking your cluster to your new Stitch app, you’ll see the Stitch app configuration UI. Select 3rd Party Services from the left-side navigation.
Click the Add a Service button.
Select HTTP and enter
getMoviesin the Service Name text box, then click the Add Service button.
Click the Add Incoming Webhook button.
Scroll down to the HTTP Method dropdown menu and select
Leave the other webhook settings as they are and click the Save button in the lower right corner.
Replace all the text in the Function Editor panel with the following:
Test your function.¶
Use the Console in the Stitch UI to test your function.
Select the Console tab just below the Function Editor.
exportsline and replace it with the following:
Click the Run button.
You should see data results in the Result panel. If not, go back and check your function in the Function Editor and make sure your
exportsline reads correctly.
If your function runs correctly and retrieves the expected data, click Save in the upper right corner and then Review and Deploy at the top.
Click the Deploy button at the bottom of the screen.
Create an HTML front end for your application.¶
The last step is to create a web-based UI for your application.
Download this HTML file by right-clicking the link and selecting
Save Link As...
Open the HTML file in a text editor.
Go to line 82 and replace the webhook URL with the webhook URL from your Stitch app. To find your webhook URL:
- Click 3rd Party Services in the left-side navigation of the Stitch UI.
- Click the
- Click your webhook.
- Click the Settings tab.
- Copy your webhook URL from the Webhook Settings section of the screen.
Save your file.
Open the HTML file in a web browser.
Try it out!
Congratulations! You have deployed a sample application with Atlas, Stitch, and an Atlas Search index.