Implementing Your Full Stack App with MongoDB Stitch (Tutorial)
Download as PPTX, PDF1 like1,240 views
The document provides an agenda and prerequisites for a MongoDB Stitch workshop. The agenda includes an introduction to Stitch and Atlas, creating a simple API, building a dashboard, and adding authentication. The prerequisites are a computer, Node.js 6.0+, and links to example files and documentation. Various aspects of the workshop will cover connecting data sources through Stitch, building functions to access and manipulate data, creating a real-time dashboard, and securing access with authentication.
![#MDBlocal
Now you can access your data via HTTP!
curl -X POST -H [WEBHOOK_URL]?secret=[SECRET] | python -m json.tool](https://image.slidesharecdn.com/stitchtutorialsea-180222230954/85/Implementing-Your-Full-Stack-App-with-MongoDB-Stitch-Tutorial-28-320.jpg)
Implementing Your Full Stack App with MongoDB Stitch (Tutorial)
- 1. #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/
- 2. #MDBlocal
- 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/
- 9. #MDBlocal https://mongodb.com/atlas – Sign up, free. https://docs.mongodb.com/stitch/getting-started/dashboard/
- 10. #MDBlocal Launch the cluster (Remember your password!)
- 12. #MDBlocal What we’ll work on today
- 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/
- 16. #MDBlocal Click ‘Stitch Apps’ in Atlas https://docs.mongodb.com/stitch/getting-started/dashboard/
- 17. #MDBlocal Create a new App
- 19. #MDBlocal Let’s start by adding Auth
- 20. #MDBlocal Next, let’s add the Receipts Collection
- 21. #MDBlocal Finally, copy your App ID
- 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 {}
- 31. #MDBlocal Again, copy your App ID
- 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/
- 33. #MDBlocal Check out your 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/
- 41. #MDBlocal Check out your Dashboard (Again)!
- 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?
- 44. #MDBlocal xx Everywhere Expand Regional footprint Available on-premise Bring any MongoDB Realtime Change Streams driven Event-based Functions Improve Dev App Import/Export Tools User/Log Management Rules Usability What’s Next?
- 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?