3. #MDBlocal
Agenda for this Workshop:
Intro to Stitch
+ Atlas
What we’ll
work on today
Creating a
simple API
Building a D3
Dashboard
Adding
Authentication
Next steps
with Stitch
01 02 03 04 05 06
4. #MDBlocal
Today’s Pre-Reqs
For today’s workshop you’ll need the following:
● Computer
● NodeJS 6.0+
● Important:
○ Files: https://github.com/mongodb/stitch-examples
■ Under ‘Dashboard’
○ Documentation: https://docs.mongodb.com/stitch/getting-started/dashboard/
6. #MDBlocal
MongoDB Query Language + Native DriversIntegrated Rules
Functions 3rd Party Services
Native SDKs (iOS, Android, JS)
Rest-like API
https://docs.mongodb.com/stitch/getting-started/dashboard/
7. #MDBlocal
Stitch let’s you control the flow of data:
Integrated services and
functions for complex,
multi-stage workflows
Native SDKs for Android,
JS, and iOS clients
Direct Database Access
https://docs.mongodb.com/stitch/getting-started/dashboard/
13. #MDBlocal
Our Data
*Point-of-sale data from a Pizza shop
(But Similar to Point-of-Sale, Log, Telemetry, etc. data you
would see elsewhere)
* Our Goal
https://docs.mongodb.com/stitch/getting-started/dashboard/
14. #MDBlocal
1. Data enters through Stitch, flows into Atlas
2. Stitch can augment data loading:
a) Grabbing extra data from an external API
b) Taking an action on load (e-mail receipt)
3. Can expose data through API, Web/mobile
app, or Atlas
(Remember: You can also use Stitch with
an existing database too)
Behind the scenes, Stitch connects Everything
Dash +
Auth
MongoDB
Stitch
MongoDB
Atlas
Sales
Data
API Access
https://docs.mongodb.com/stitch/getting-started/dashboard/
22. #MDBlocal
In Stitch, you opt-in each namespace in your
database separately for access.
1. Go to SalesReporting.Receipts
namespace
2. Delete the default Filter under ‘Filters’
3. Delete the default rules (including Owner
Id field rules)
4. Set the Top-level Document Read/Write
rules to {}
5. This enables Public read/write to this
namespace only
Next, set-up simple Access Rules:
https://docs.mongodb.com/stitch/getting-started/dashboard/
23. #MDBlocal
Now let’s load data:
1. Open the data_generator.js file
2. Add your App ID (line 10)
3. Run data_generator.js
4. Watch data load into Stitch!
https://docs.mongodb.com/stitch/getting-started/dashboard/
25. #MDBlocal
In Stitch, you can add a number of predefined services
to your app.
Services have predefined actions to ease integration.
We’ll use the HTTP Service to create an API to our data
1. Click ‘Services’
2. Click ‘Add a Service’
3. Click ‘HTTP’ and name your service ‘SalesAPI’
Create a HTTP Service:
26. #MDBlocal
Create a Webhook:
For the HTTP service, you can create an
incoming webhook that will execute a
function in response to a request.
1. Within AggregateToppings, click ‘New
Webhook’
2. Name your new webhook ‘GetSales’
3. Switch ‘Respond with Result’ ON
4. Click ‘Require Secret as Query Param’
5. Set Secret to ‘SECRET’
27. #MDBlocal
Get the distribution of toppings for the last 100
pizzas.
1. Function that uses aggregation to:
a) Sort the orders in descending time order
b) Limit the number of orders to 100
c) Group the orders by topping
Add a Function to the Webhook:
https://docs.mongodb.com/stitch/getting-started/dashboard/
28. #MDBlocal
Now you can access your data via HTTP!
curl -X POST -H [WEBHOOK_URL]?secret=[SECRET] | python -m json.tool
30. #MDBlocal
Add a Function:
SalesTimeline – Get the sales for a given time
interval
1. Find all the sales in a certain timeframe
a) Projects fields down to just timestamp/total
b) Sorts by timestamp
c) Limits to 100 documents
2. Make sure function is named ‘SalesTimeline’
3. Set ‘Can Evaluate’ to {}
32. #MDBlocal
1. Open the index.html file
2. Add your App ID (line 18)
3. Go to your app directory
4. Run your app with npm start or
‘http-server &’
a) Note: You may need to install http-
server via npm (install with –g flag)
b) You can also use any other method of
opening the dashboard
Now let’s start the Dashboard:
https://docs.mongodb.com/stitch/getting-started/dashboard/
35. #MDBlocal
1. Go to ‘Authentication’ in the Stitch UI
2. Edit Email/Password configuration
a) Click the slider to enable
b) Set Email Confirmation URL and
Email Reset URL
c) Click ‘Save’
3. Add our first e-mail/password user
a) Click the ‘Users’ tab
b) Click ‘+ Add User’
c) Enter an email address and
password of your choosing and
click ‘Create’
Add E-mail Auth:
36. #MDBlocal
1. Next go back to ‘Providers’, find ‘API
Key’ authentication and click ‘edit’
a) Click the slider to enable e-
mail/password authentication
b) Click ‘Create API Key,’ assign your
API Key a name, and click ‘Save’
2. Click ‘Show Key...’ and then copy key
Add an API Key:
https://docs.mongodb.com/stitch/getting-started/dashboard/
37. #MDBlocal
1. Open the data_generator.js file
2. Comment out line 40, Uncomment line 43
3. Add your API Key (line 43)
4. Re-run data_generator.js
Add Auth to the Loader:
https://docs.mongodb.com/stitch/getting-started/dashboard/
38. #MDBlocal
CheckAuth – Check the authentication type of a
user for a security rule
1. Take an auth type and see if the given suer
matches it.
2. Name function ‘CheckAuth’
3. Set ‘Can Evalutate’ to {}
Add a Function:
https://docs.mongodb.com/stitch/getting-started/dashboard/
39. #MDBlocal
1. Go to rules under the rules tab of
‘mongodb-atlas’ in Stitch UI
2. In the ‘SalesReporting.Receipts’, edit the
Top-level Document Read and Write rules
(see README)
3. Add the timestamp/total fields into the
namespace
4. In both of these fields, add a read rule to
check a user’s authentication (see
README)
Set-up secure Access
Rules:
40. #MDBlocal
1. Open the index.html file
2. Comment out line 10, uncomment line 11
3. Re-run data_generator.js
Add Auth to the Dashboard:
https://docs.mongodb.com/stitch/getting-started/dashboard/
43. #MDBlocal
• Build out a more robust public API to access your data by adding
more functions and webhooks
• Add functions and use the data to create more graphs in your
realtime dashboard
• Use one of our integrations to build extra features like e-mail receipts
for customers or a slackbot for placing an order.
• Take the ideas here and building an API or dashboard with your own
data
Have more time?
45. #MDBlocal
• Try out Stitch – stitch.mongodb.com
• Check out SDKs and examples
• Code at github.com/MongodbStitch
• Docs at docs.mongodb.com/stitch
• Build the Dashboard or Weather IoT apps in our Tutorials section
• Ask Questions or let us know what you’re building through Intercom
What Now?