1+ title : Spin up an Atlas Free Tier cluster.
2+ ref : atlas-cluster-setup
3+ content : |
4+ If you haven't already, sign up for an Atlas account and spin up a
5+ Free Tier cluster. For detailed instructions, see the :doc:`Atlas
6+ Guide </cloud/atlas>`.
7+
8+ title : Load the sample dataset.
9+ ref : load-sample-dataset
10+ content : |
11+ To load the sample dataset into your cluster, navigate to the Atlas UI
12+ and click the ellipse (...) button in your cluster's panel. Select
13+ :guilabel:`Load Sample Dataset` from the dropdown menu.
14+
15+ .. figure:: /images/load-sample-dataset.png
16+ :alt: Load a sample dataset
17+ :figwidth: 650
18+
19+ title : Examine the ``movies`` collection.
20+ ref : movies-collection
21+ content : |
22+ You can examine documents in your cluster's collections with the
23+ Atlas Data Explorer.
24+
25+ #. Click the :guilabel:`Collections` button in your cluster's
26+ panel in the Atlas UI.
27+
28+ #. Select :guilabel:`sample_mflix` from the :guilabel:`Namespaces`
29+ panel on the left side.
30+
31+ #. Select the :guilabel:`movies` collection.
32+
33+ #. The first 20 documents appear in the panel on the right. The
34+ ``fullplot`` field contains text which we will make searchable
35+ for our application.
36+
37+ title : Create a full-text index.
38+ ref : create-fts-index
39+ content : |
40+ Next we'll create a Full Text index on the ``movies`` collection.
41+
42+ #. Select :guilabel:`Full Text Search` in the right-side panel.
43+
44+ #. Click the :guilabel:`Create a FTS Index` button.
45+
46+ #. The :guilabel:`Create Full Text Search Index` modal window is where
47+ you can create a custom :atlas:`index definition
48+ </reference/full-text-search/index-definitions/>`.
49+ For now we'll use the default index definition, which indexes
50+ all available fields. Click the :guilabel:`Create Index` button.
51+
52+ #. The index takes a few minutes to build. When it's done, move on
53+ to the next step.
54+
55+ title : Write an aggregation pipeline query. (Optional)
56+ ref : write-agg
57+ content : |
58+ Full-text search queries use the :atlas:`$searchBeta
59+ </reference/full-text-search/query-syntax>` aggregation pipeline
60+ stage. If you'd like to learn more about constructing a full-text
61+ search query, proceed with the following steps. If you'd rather get
62+ right to the Stitch part of the tutorial, you can skip to the next step.
63+
64+ #. The :manual:`Aggregation Pipeline Builder </compass/beta/aggregation-pipeline-builder/>`
65+ feature of :manual:`MongoDB Compass </compass/current/>` is a helpful
66+ tool for creating aggregation pipeline queries. We'll use it for this
67+ portion of the tutorial.
68+
69+ #. Open Compass and connect to your Atlas cluster. For detailed connection
70+ instructions, see the :manual:`Compass documentation
71+ </compass/current/connect/>`.
72+
73+ #. Navigate to the ``sample_mflix.movies`` collection.
74+
75+ #. Select the :guilabel:`Aggregations` tab in the top navigation.
76+
77+ #. Select :guilabel:`$searchBeta` in the dropdown menu for the first
78+ aggregation stage.
79+
80+ #. We'll use the :atlas:`search </reference/full-text-search/search/>`
81+ and :atlas:`highlight </reference/full-text-search/highlighting/>`
82+ operators to look for the search terms ``vampires and werewolves``
83+ in the ``fullplot`` field of our ``movies`` collection.
84+
85+ Enter the following text in the ``$searchBeta`` stage of your
86+ pipeline:
87+
88+ .. code-block:: none
89+
90+ {
91+ search: {
92+ query: 'vampires and werewolves',
93+ path: 'fullplot'
94+ },
95+ highlight: {
96+ path: 'fullplot'
97+ }
98+ }
99+
100+ #. Click the :guilabel:`Add Stage` button.
101+
102+ #. In our next stage we'll use a :manual:`$project
103+ </reference/operator/aggregation/project/>` stage to narrow down
104+ our return output to just a few of the fields in the ``movies``
105+ collection documents. Select ``$project`` from the dropdown menu of
106+ the second stage.
107+
108+ #. We'll return the fields ``title``, ``year``, and ``fullplot``.
109+ We'll suppress the ``_id`` field and add two new fields,
110+ ``searchScore`` and ``searchHighlights``.
111+
112+ Enter the following text the ``$project`` stage of your pipeline:
113+
114+ .. code-block:: none
115+
116+ {
117+ title: 1,
118+ year: 1,
119+ fullplot: 1,
120+ _id: 0,
121+ score: {
122+ $meta: 'searchScore'
123+ },
124+ hightlight: {
125+ $meta: 'searchHighlights'
126+ }
127+ }
128+
129+ #. Lastly, we'll add a :manual:`$limit
130+ </reference/operator/aggregation/limit/>` stage to limit our results
131+ to 10 documents. Select ``$limit`` from the dropdown menu of the third
132+ stage and enter ``10`` in the text box.
133+
134+ #. In the output preview to the right you should see a few movies
135+ dealing with vampires and werewolves. If you don't, go back and
136+ check that all your pipeline stages have valid syntax.
137+
138+
139+ title : Create a Stitch application.
140+ ref : create-stitch
141+ content : |
142+ Now we have a dataset and an aggregation pipeline to query it. Next,
143+ we'll use Stitch to create a RESTful API backend to accept incoming
144+ data requests.
145+
146+ #. Go back to the Atlas web UI and select :guilabel:`Stitch` from the
147+ left-side navigation.
148+
149+ #. Click the :guilabel:`Create New Application` button.
150+
151+ #. Enter ``FTSDemo`` in the :guilabel:`Application Name` text box.
152+
153+ #. Select the cluster with your ``sample_mflix`` database in the
154+ :guilabel:`Link to Cluster` dropdown menu.
155+
156+ #. Leave the other modal window settings where they are and click
157+ :guilabel:`Create`.
158+
159+ #. After Atlas finishes linking your cluster to your new Stitch app,
160+ you'll see the Stitch app configuration UI. Select :guilabel:`3rd
161+ Party Services` from the left-side navigation.
162+
163+ #. Click the :guilabel:`Add a Service` button.
164+
165+ #. Select :guilabel:`HTTP` and enter ``getMovies`` in the
166+ :guilabel:`Service Name` text box, then click the :guilabel:`Add
167+ Service` button.
168+
169+ #. Click the :guilabel:`Add Incoming Webhook` button.
170+
171+ #. Scroll down to the :guilabel:`HTTP Method` dropdown menu and select
172+ ``GET``.
173+
174+ #. Leave the other webhook settings as they are and click the
175+ :guilabel:`Save` button in the lower right corner.
176+
177+ #. Next we'll create a Javascript function for our webhook to invoke
178+ when it receives a data request. This function contains our aggregation
179+ pipeline query, which the function executes with search terms entered by the
180+ user.
181+
182+ Replace all the text in the :guilabel:`Function Editor` panel with
183+ the following:
184+
185+ .. code-block:: javascript
186+
187+ exports = function(payload) {
188+ const collection = context.services
189+ .get("mongodb-atlas")
190+ .db("sample_mflix")
191+ .collection("movies");
192+ let arg = payload.query.arg;
193+ return collection.aggregate([
194+ {
195+ $searchBeta: {
196+ search: {
197+ query: arg,
198+ path:'fullplot',
199+ },
200+ highlight: { path: 'fullplot' }
201+ }
202+ },
203+ {
204+ $project: {
205+ title: 1,
206+ _id:0,
207+ year:1,
208+ fullplot:1,
209+ score: { $meta: 'searchScore'},
210+ highlight: {$meta: 'searchHighlights'}
211+ }
212+ },
213+ {
214+ $limit: 10
215+ }
216+ ]).toArray();
217+ };
218+
219+
220+ title : Test your function.
221+ ref : test function
222+ content : |
223+ Use the Console in the Stitch UI to test your function.
224+
225+ #. Select the :guilabel:`Console` tab just below the Function Editor.
226+
227+ #. Find the ``exports`` line and replace it with the following:
228+
229+ .. code-block:: none
230+
231+ exports({query: {arg: 'vampires and werewolves'}})
232+
233+ #. Click the :guilabel:`Run` button.
234+
235+ #. You should see data results in the :guilabel:`Result` panel. If not,
236+ go back and check your function in the Function Editor and make
237+ sure your ``exports`` line reads correctly.
238+
239+ If your function runs correctly and retrieves the expected data,
240+ click :guilabel:`Save` in the upper right
241+ corner and then :guilabel:`Review and Deploy` at the top.
242+
243+ #. Click the :guilabel:`Deploy` button at the bottom of the screen.
244+
245+ title : Create an HTML front end for your application.
246+ ref : create-html
247+ content : |
248+ The last step is to create a web-based UI for your application.
249+
250+ #. Download this `HTML file
251+ <https://developer-advocacy-public.s3-eu-west-1.amazonaws.com/full-text-search-demo/index.html>`__
252+ by right-clicking the link and selecting ``Save Link As...``
253+
254+ #. Open the HTML file in a text editor.
255+
256+ #. Go to line 82 and replace the webhook URL with the webhook URL from
257+ your Stitch app. To find your webhook URL:
258+
259+ #. Click :guilabel:`3rd Party Services` in the left-side navigation
260+ of the Stitch UI.
261+
262+ #. Click the ``getMovies`` service.
263+
264+ #. Click your webhook.
265+
266+ #. Click the :guilabel:`Settings` tab.
267+
268+ #. Copy your webhook URL from the :guilabel:`Webhook Settings`
269+ section of the screen.
270+
271+ #. Save your file.
272+
273+ #. Open the HTML file in a web browser.
274+
275+ #. Try it out!
276+
277+ .. figure:: /images/fts-sample-results.gif
278+
279+
0 commit comments