MongoDB.local Seattle 2019: MongoDB Stitch Tutorial
â˘Als PPTX, PDF herunterladenâ˘
1 gefällt mirâ˘416 views
Turbocharge your development efforts your with a "hands on" introduction to quickly building apps using the MongoDB database as a service offering known as Atlas and the serverless / REST based application development environment known as Stitch. We'll begin with a brief introduction to MongoDB, Atlas, and Stitch. You will learn about 3 real world examples of two day prototypes and rapid production cycles. You will then create your own free MongoDB Atlas database as a service cluster. Then you will write your first Stitch application to put data into your database and query data out of it. You will learn how to enhance your application with serverless stitch functions and triggers. At the end of the 90 minute session you will have a hands on experience and good grasp of how to write custom serverless applications with MongoDB.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ăhnlich wie MongoDB.local Seattle 2019: MongoDB Stitch Tutorial
Ăhnlich wie MongoDB.local Seattle 2019: MongoDB Stitch Tutorial (20)
Mehr von MongoDB
Mehr von MongoDB (20)
KĂźrzlich hochgeladen
KĂźrzlich hochgeladen (20)
MongoDB.local Seattle 2019: MongoDB Stitch Tutorial
- 2. MongoDB âHands Onâ Stitch Tutorial Ken W. Alger, Developer Advocate, MongoDB Enabling the Developer!
- 3. Ken W. Alger Developer Advocate, MongoDB @kenwalger
- 4. Agenda ⢠Atlas & Stitch Overview ⢠The Power of the Stitch Tutorial ⢠Major Airlines Hackathon ⢠Investment Company Enablement ⢠Auto Manufacturer Enablement ⢠Let's do this! Hands on tutorial ⢠MongoDB Stitch Deep Dive ⢠What Happened at the Auto Manufacturer
- 5. Stitch and Atlas Overview
- 6. Stitch & Atlas Accelerate Everything Cloud Infrastructure Services and APIs Application Logic MongoDB Atlas Rapidly deploy, dynamically scale, and distribute databases across regions and cloud providers MongoDB Stitch Serverless platform that allows developers to focus on innovation rather than plumbing, services orchestration, and boilerplate code 2-5x increase in productivity Client Application or Service Application Logic Data Data generated from your application is sent and retrieved through the Stitch Client SDK
- 7. Focus Your Energy Where You Can Make a Difference App Backend Infrastructure Core Database Functionality Storage Service integrations, data access control Code that moves the business forward Managing OS, Scale, Security, Backups, etc. MongoDB Atlas MongoDB Stitch Fully managed Elastic scale Highly Available Secure Customer can focus here Time 40% 40% 20%
- 8. Focus Your Energy Where You Can Make a Difference App Backend Infrastructure Core Database Functionality Storage Service integrations, data access control Code that moves the business forward Managing OS, Scale, Security, Backups, etc. MongoDB Atlas MongoDB Stitch Fully managed Elastic scale Highly Available Secure Customer can focus here Time 10% 10% 80%
- 9. Developer Options: On Prem, Self-managed or DBaaS Developer Options With MongoDB Self-Managed Aka âLift and Shiftâ Database as a service Slow and complicated No elasticity Highly manual Reduces agility Self-service (Quick and Easy) Fully elastic Consumption based Accelerates time to value & Reduces Complexity Dependent on OPS team Requires Hardware and Networking Long Turnaround Time Reduces agility On Prem Traditional Operations
- 10. Stitch Server Client Applications Client and Server side Stitch Code JavaScript Browser SDK JavaScript NodeJS SDK Android SDK iOS SDK React Native SDK Electric Imp Library (IoT) https://s3.amazonaws.com/stitch-sdks/js-server/docs/4/index.html https://docs.mongodb.com/stitch/wire- protocol/#id1 Wire Protocol HTTPS REST https://docs.mongodb.com/stitch/procedures/init-stitchclient/ mongodb://<credentials>@stitch.mongodb.com:27020/?<parameters> MDB Driver Mongo Shell Python C++11 Perl Stitch Triggers Stitch Functions Application Logic Atlas Application Logic Service Integrations https://docs.mongodb.com/stitch/service s/ Authentication Providers
- 11. MongoDB Stitch & the Power of the Tutorial! Power of Simplicity!
- 12. Major Airlines Hackwars April 20th -21st 2018 - 2 Day Hackathon ⢠1,200 Developers ⢠100 Teams (12 developers each) ⢠37 Teams used MongoDB ⢠4 Teams of the top 5 finalists used MongoDB ⢠3 of the 4 finalists used Stitch Two SAs Triaged 370 Developers with MongoDB Questions ⢠90% of the problems were related to connecting to Atlas ⢠10% of the problems related to the Development Environment ⢠MongoDB Stitch Tutorial - Blog Comments (Provided Solution) Developers effective in less than 30 minutes. 5 Winning Teams by Percentage The Blog Tutorial enabling developers with Stitch directly resulted in 60% of the winning teams!
- 13. MongoDB Stitch Tutorials Utilizing the Basic Blog Tutorial Major Airline Hackathon developers were productive within 15 to 30 minutes. Required: Text Editor & Browser
- 14. From Tutorial to Prototype! Power of Simplicity!
- 15. Financial Investment Company Multiple Meetings with 3 different groups ⢠Solution Architects ⢠Developers ⢠DBAs Challenge: Employee Compliance Project ⢠Questions around the document model, and tracking history of changes. ⢠Hackathon (Port 27017 Blocked) ⢠Trouble installing Operations Manager ⢠Delays in getting test environment for Hackathon
- 16. Financial Investment Company Demonstrated how the Blog tutorial could rapidly become an employee compliance application. Did not require port 27017 to be opened, No need for on prem test environment or OPS Manager
- 17. From Prototype to Production! Power of Simplicity!
- 18. Car Manufacturer All of them complete the blog tutorial and see how to extend the tutorial with stitch functions and triggers.August 30th 2018 - 35 Developers representing 8 cross functional teams inside the Auto Manufacturer attend hands on training with Atlas and Stitch.
- 19. Car Manufacturer - Wow Factor! Rock Star Developer, Scrum Product Owner at a auto manufacturer, took the blog tutorial and turned it into a fully functional prototype for a cloud based vehicle telematics application in one weekend! Rock Star Developer / Scrum Product Owner
- 20. Car Manufacturer - Wow Factor! August 2018 - Development September 2018 - Staging December 2018 - Production Concept to Production in 4 months!
- 21. Blog Tutorial Introduction Here we go!
- 22. Developer Enablement Toggle between 5 windows: 1. Atlas Browser 2. Stitch Console 3. Compass 4. Text Editor 5. HTML Application We go over every line in the Basic Blog tutorial and explain what it means. Make sure everyone is on the same step, answer questions and be patient. Show each step in each window. Do it together. Even with missteps and questions the entire process will take about 30 minutes...
- 23. Basic Blog Tutorial <html> <head> </head> <body> <h3>This is a great blog post</h3> <div id="content"> I like to write about technology because I want to get on the front page of hacker news. (In a good way) </div> <hr> <div id="comments"></div> </body> </html> Nothing Special with the first step. Its basic HTML. Save the file as BasicBlogDemo.html and double click the file, it will open in your browser. You can see the header, the content and the hard rule at the bottom
- 24. Basic Blog Tutorial <html> <head> <script src="https://s3.amazonaws.com/stitch-sdks/js/bundles/4.0.0/stitch.js"></script> </head> <body> <h3>This is a great blog post</h3> <div id="content"> I like to write about technology because I want to get on the front page of hacker news. (In a good way) </div> <hr> <div id="comments"></div> </body> </html> Ok, we just now included the stitch client browser SDK!
- 25. Basic Blog Tutorial <html> <head> <script src="https://s3.amazonaws.com/stitch- sdks/js/bundles/4.0.0/stitch.js"></script> <script> // Initialize the App Client const client = stitch.Stitch.initializeDefaultAppClient("<your-app-id>"); // Get a MongoDB Service Client const mongodb = client.getServiceClient(stitch.RemoteMongoClient.factory,"mongodb-atlas"); // Get a reference to the blog database const db = mongodb.db("blog"); </script> </head> <body> <h3>This is a great blog post</h3> <div id="content"> I like to write about technology because I want to get on the front page of hacker news. (In a good way) </div> <hr> <div id="comments"></div> </body> </html> Stitch client browser SDK Stitch APP ID Stitch Client Connection Stitch Database We now have everything we need to connect to the Atlas database instance for our Application!
- 26. Basic Blog Tutorial <html> <head> <script src="https://s3.amazonaws.com/stitch-sdks/js/bundles/4.0.0/stitch.js"></script> <script> // Initialize the App Client const client = stitch.Stitch.initializeDefaultAppClient("<your-app-id>"); // Get a MongoDB Service Client const mongodb = client.getServiceClient(stitch.RemoteMongoClient.factory,"mongodb-atlas"); // Get a reference to the blog database const db = mongodb.db("blog"); function displayComments() { db.collection('comments').find({}, {limit: 1000}).asArray() .then(docs => { const html = docs.map(c => "<div>" + c.comment + "</div>").join(""); document.getElementById("comments").innerHTML = html; }); } </script> </head> <body> <h3>This is a great blog post</h3> <div id="content"> I like to write about technology because I want to get on the front page of hacker news. (In a good way) </div> <hr> <div id="comments"></div> </body> </html> Our first real function! Then we display them in the comments div as html for the user to view We specify the comments collection We find the documents, and specify a limit of 1,000 We Loop through the array of documents and store them in a variable called html.
- 27. Basic Blog Tutorial<html> <head> <script src="https://s3.amazonaws.com/stitch-sdks/js/bundles/4.0.0/stitch.js"></script> <script> // Initialize the App Client const client = stitch.Stitch.initializeDefaultAppClient("<your-app-id>"); // Get a MongoDB Service Client const mongodb = client.getServiceClient(stitch.RemoteMongoClient.factory,"mongodb-atlas"); // Get a reference to the blog database const db = mongodb.db("blog"); function displayComments() { db.collection('comments').find({}, {limit: 1000}).asArray() .then(docs => { const html = docs.map(c => "<div>" + c.comment + "</div>").join(""); document.getElementById("comments").innerHTML = html; }); } function displayCommentsOnLoad() { client.auth .loginWithCredential(new stitch.AnonymousCredential()) .then(displayComments) .catch(console.error); } </script> </head> <body> <h3>This is a great blog post</h3> <div id="content"> I like to write about technology because I want to get on the front page of hacker news. (In a good way) </div> <hr> <div id="comments"></div> </body onload="displayCommentsOnLoad()> </html> Our next function logs us into our database We have connected to the database and run our first query! Check the stitch console logs. It calls the display comments function after logging in. The function to connect to the database is called in the body onload... Save the changes and refresh the browser.
- 28. Basic Blog Tutorial ... function addComment() { const newComment = document.getElementById("new_comment"); console.log("add comment", client.auth.user.id) db.collection("comments") .insertOne({ owner_id : client.auth.user.id, comment: newComment.value }) .then(displayComments); newComment.value = ""; } function displayComments() { db.collection('comments').find({}, {limit: 1000}).asArray() .then(docs => { const html = docs.map(c => "<div>" + c.comment + "</div>").join(""); document.getElementById("comments").innerHTML = html; }); } ... </script> </head> <body> <h3>This is a great blog post</h3> <div id="content"> I like to write about technology because I want to get on the front page of hacker news. (In a good way) </div> <hr> Add comment: <input id="new_comment"><BR> <input type="submit" onClick="addComment()"> <hr> <div id="comments"></div> </body onload="displayCommentsOnLoad()> </html> Now we insert a comment into our Atlas database through the stitch API, and then retrieve it for display The value we insert is obtained from an input field added here. The add comment function is called from the submit button Our first stitch App is complete!
- 29. Basic Blog Tutorial Play with it, add more comments. Add new fields, see what happens. You are well on your way to being able to start writing a new application. You now have a basic understanding and are ready for more.
- 30. Hands on! Letâs Create an Atlas Cluster & Stitch Application Here we go!
- 32. Follow up
- 33. Car Manufacturer Do we have to use the Stitch GUI? Answer 1: You can, but you are not required to use it. Answer 2: You can integrate stitch apps into your existing CICD infrastructure. Git clone and a command line stitch import example is defined in the âToDo App - Webâ tutorial. Stitch code can be fully automated with CICD scripts. Simply check code in to your GitHub repository, add script calls to import code from your development environment into stitch for build and deployment.
- 34. Car Manufacturer Sept 13th 2018 Over 30 developers from cross functional teams inside the car manufacturing company attend a second hands on training with Atlas and Stitch. This time we cover the Todo Web app and integrate authentication services with Facebook and Google to Atlas through stitch. We cover making service calls through Twilio.
- 35. Thank You!
Hinweis der Redaktion
- Welcome to this hands on session here in Seattle. Has everyone been having a good time today and learning a lot about MongoDB? What about Grigori and the keynote? Pretty exciting things happening with MongoDB. Iâm excited to work with you today on an application with MongoDB Stitch, our Software as a Service product.
- My name is Ken Alger and Iâm a developer advocate with MongoDB. In a nutshell, that means that I work with and teach developers about the features and products within the MongoDB ecosystem. I do that through blog posts, webinars, sample applications, and in-person talks such as this.
- To start with, Iâm going to assume that youâre here today because you are not very familiar, or familiar at all, with MongoDB Atlas and MongoDB Stitch. Perhaps youâve heard about it a bit today at .local Seattle, but thatâs about it. Therefore, Iâm going to take you through a pretty ground zero overview of both products and weâll work together on building a blog application with Atlas and Stitch. Iâll talk about some of the successes weâve had with this tutorial and how it will provide you with immediate productivity gains for you and your development team By the end of this session, youâll have the start of a blog application, but youâll also have some excellent knowledge about MongoDB Atlas and Stitch and how you could use the blog application concept and put it to use in your organization.
- Iâve mentioned these products, MongoDB Atlas and MongoDB Stitch a couple of times already, letâs talk for a little bit about them and how they make our lives easier.
- To start with, MongoDB Atlas is our Database as a Service. It's a hosted MongoDB Database that we manage. Itâs maintained by the people that build the database and is available across all three major cloud providers, AWS, Azure, GCP. Moving up this slide we next come to MongoDB Stitch, our Software as a Service. Itâs basically a service platform, much like AWS Lambda. Whoâs familiar with that? Great! MongoDB Stitch allows you to write code but not have to worry about where the code physically resides and can scale up and down. You can put a lot of your application logic in here. For example, you could have Customer Service Representatives have a different set of data presented to them in an application versus accounting. All based on the user ID of whoâs logged into the system. Again moving up the slide, we have the application layer and application logic. Hereâs where the Stitch Client SDK resides which will be talking to MongoDB Stitch within your application. I mentioned that MongoDB Atlas saves time. As developers we like to spend our time writing our application, not configuring databases and writing boilerplate middleware code. Letâs see where some of that time savings can come from with MongoDB Atlas.
- Traditionally 80% of development time is spent on things that DONâT move your business forward. <<ADVANCE>> 40% is working with databases and storage. With MongoDB Atlas, we manage that for you. Scaling and security is easier, backups can become automated, etc. <<ADVANCE>> Another 40% of time is spent on service integrations and infrastructure. While these are all important tasks, and if youâve been watching the news for the last several years, security and user access is very important. However, spending time in this area of development doesnât typically differentiate your application from your competitor. Very little innovation occurs here. <<ADVANCE>> By moving your application and database to the cloud, MongoDB takes care of this for you. <<ADVANCE>> Leaving you with time to move your business forward
- Which allows you to spend your time on code that can make you and your company <<ADVANCE>> money. But wait, Ken. Iâve heard that I can use MongoDB on my own hardware. Iâm still not ready to move to the cloud⌠Letâs think about some of the advantages of moving to the cloud.
- MongoDB was started with the goal of making the data layer easy for developers. As developers our team, company, clients expect, and many times demand that we be agile in our development cycles. By choosing MongoDB and our document data model youâve already made a great step forward in development agility. But thereâs more to being agile in a development team than just in the code, right? If you want to download and install MongoDB on prem, in your own environment, how fast does that typically happen? If your application grows you need to go spec out and purchase hardware, get it installed on the network, install MongoDB, get the security all setup, etc. And if the DevOps team is on vacation for a week, well, you know how that goes. Similarly, if you want to take the self-managed, or âlift and shiftâ approach, you still need to have someone who knows how to setup and install, configure a MongoDB replica set, etc. Still not ideal from an agile workflow perspective. Your third option is to move to the cloud and utilize a Database-as-a-Service solution with MongoDB Atlas. You can literally be up and running with MongoDB in under ten minutes. Weâll see that here in just a bit when youâll be creating your own Atlas cluster and start putting data into it.
- What does this look like from an architecture standpoint? On the left side here, we have client applications. On the right hand side we have the Stitch server. Client applications are going to include things such as the various SDKs, such as the JavaScript Browser SDK which allows you to actually use your browser as a client to communicate with MongoDB Stitch and put data into and get data out of MongoDB Atlas. This is what weâll be doing here today in just a little bit. Weâll be using the JavaScript browser SDK which uses HTTPS and REST API like calls going to the Stitch Server. You can make a REST API call directly through an HTTP endpoint that you define here in the Service Integrations-API area, and you can access data that way. Weâre actually going to be using the SDK to do not just a REST call but to actually do an insert, find, and upsert operations. Another option is to use the wire protocol with a native driver to access the data layer as well.
- Iâve talked a bit about the overview of MongoDB Stitch and how it can work, but who is using this? Why are you here for a tutorial? Weâve found that by keeping this tutorial simple, you can see the power of MongoDB Stitch and how quickly you can start using it. Where have we done this?
- We participated in an internal hackathon at a major airline over two days. There were 1200 developers there, 100 teams and 37 of those teams used MongoDB. Four out of the top five teams in the finals used MongoDB. 80% of the top teams used MongoDB, thatâs super cool. Then three of those four used MongoDB and Stitch. Why? Because it accelerates development time. You can get up and running in less than 30 minutes.
- Thereâs a Stitch tutorial page, you can Google Stitch Tutorial to find it and it has several options. Weâll be working through the Basic Blog tutorial today here in just a bit, but your homework is to do the ToDo App which shows how to do authentication and service integrations. For the basic blog you donât need anything fancy, just a text editor and browser.
- Tutorials are great, but are they actually useful? Weâve found that developers are able to quickly use the information weâll be going through today and put it to use.
- We took this tutorial into a financial company. As you might imagine their networks can be a little strict, with ports being blocked and other security concerns around installing software for a hackathon environment. They came from a legacy tabular database background and were pretty unfamiliar with the MongoDB document model.
- We used the same Blog Tutorial weâre going to do today, and guess what? It worked. You donât need a dedicated test environment, or need to adjust your network settings. Why am I mentioning this? Well, after you complete this tutorial today, you can feel confident that you can go back to your company, and produce an application prototype with MongoDB Atlas and Stitch without test environment considerations. The financial investment company had a compliance project they needed to complete, and after doing this tutorial, they were able to make some relatively small tweaks to the code weâll see today, and build a prototype.
- Prototypes are great, but can you use MongoDB Stitch in a production situation? Again, we took this tutorial into a major company and they did just thatâŚ
- We did this tutorial at a car manufacturer last August. Walked them through the blog tutorial and when they were done, one of the their developers took the knowledge from the tutorial and spent a weekend hacking a new application.
- He built a vehicle telematics application that he was able to take and show to his boss.
- His boss then gave him a green light to purchase a development environment, then a staging environment, then a production environment all in four or five month span.
- Okay, before we jump into the actual tutorial, Iâd like to walk everyone through what weâre about to do. Iâd like to do this for a couple of reasons, but mostly just to make sure weâre all on the same level. There may be folks here with lots of development experience, which is great. Others in here may still be learning what HTML is, so Iâll walk through everything at a pretty granular level to make sure weâre all on the same page.
- The tutorial requires five windows that weâll be using: A couple of browser windows or tabs to access Atlas, Stitch, and the blog page itself, MongoDB Compass, and a text editor. The tutorial site states that this should take 15 minutes. Iâm always uneasy about publishing times on things like this as it really depends on experience level and whatnot, but even with hiccups, we should be able to get through all the steps in 30 minutes. Alright, after a lot of ramp up and intro, letâs look at what weâll be building.
- Weâll start with a small HTML file which weâll save as BasicBlogDemo.html Inside the HTML file to start with thereâs a header, and a body. The body has an h3 title for the post, and some content. Then we have a horizontal rule and a comments section which, to start with is blank. With MongoDB Atlas & Stitch setup from the tutorial steps, we can add in some additional âmagicâ to our basic page here.
- In the head section of the HTML we add in the JavaScript Browser SDK call in a script tag, which will pull in the Stitch SDK.
- Then we add a few more âhousekeepingâ lines of code here in another script section. Weâll grab the Stitch App-Id to connect our application to the proper Stitch app. Create a client connection, and connect to the MongoDB Atlas database we want to use. With all of our connection information in place in our HTML, we can start to use the power of Stitch to interact with the data stored in MongoDB Atlas and include it on the page.
- Recall that we had a div at the bottom of our page for comments, which was empty. We can write a function that finds data from the comments collection, loops through the comments and, in this case, limits it to 1000 comments, and displays them.
- Our second function displays the comments when the page loads. It logs us into the database, we'll just have anonymous authentication on right now, and calls the displayComments function. If we had data in the comments collection, we'd be able to see it now. Since we haven't added any in there yet, let's add that.
- Letâs add another function in our application, the ability to add comments from the page. Weâll add a new section to the HTML to add comments, this input section with the new_comment id. And we can reference that in an addComment function. Inside there we make an insert call to the database and once the data is inserted we display the comments.
- And thatâs it! Iâd encourage you to add new fields to your application beyond comments to see what you can do as well. So, without further ado, letâs finally dive into our project.
- To start with, youâll need to create an Atlas Cluster if you donât have one already, and a Stitch Application.
- Head to these URLs to get started and I have a few colleagues here today that will be around to help as well.
- What questions have we had most frequently? Whatâs next? I mentioned homework before.
- GUIs are great overall right? But sometimes what is great for one user isnât the best for another. A question that weâve gotten several times is about the Stitch GUI and if itâs the only way to access the features. The answer is no, you do not. A great example of this is the homework I mentioned, the ToDo App â Web, where youâll see how you can integrate code with GitHub. You can also configure your CICD scripts into MongoDB Stitch as well.
- The ToDo App-web âhomeworkâ assignment will walk you through how to integrate authentication services, such as Facebook and Google into your MongoDB Stitch application. It also covers using third-party services. In this instance Twilio. Itâs a great tutorial that Iâd highly encourage you to work on.
- A couple of other things before we wrap up is that Iâd like to encourage everyone to come to MongoDB World in June in NYC. You can register online today for that and itâs a great way to connect with the fastest-growing database community, explore new features, and learn how to deploy mission-critical applications at scale. In conjunction with that, and now that you all are MongoDB Stitch experts, we are hosting a virtual hackathon leading up to MongoDB World. The top three teams get an all expenses paid trip to MongoDB World in NYC and the first place team gets a $10,000 prize. Thereâs more information about both of these events on our website. Iâd like to thank my colleagues that helped out today, Karen and Joe. Donât forget to fill out the feedback form that will be sent out later on. We love to get feedback on how best to serve the developer community and make these sessions as valuable as possible for you. With that, thank you for your time this afternoon, I hope you enjoy the rest of .local Seattle and that your travels home are safe.