MongoDB.local Atlanta: MongoDB Stitch Tutorial

Editor's Notes

• #3: Welcome to this hands on session here in Atlanta. Has everyone been having a good time today and learning a lot about MongoDB? What about 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.
• #4: My name is Blaine Mincey and I am a Sr. Solutions Architect with MongoDB. In a nutshell, I work with our customers and prospects on how to build scalable applications and be successful with MongoDB.
• #5: My name is Blaine Mincey and I am a Sr. Solutions Architect with MongoDB. In a nutshell, I work with our customers and prospects on how to build scalable applications and be successful with MongoDB.
• #6: 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.
• #7: 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.
• #8: 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.
• #9: 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
• #10: 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.
• #11: 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.
• #12: 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.
• #13: 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?
• #14: 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.
• #15: 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.
• #16: 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.
• #17: 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.
• #18: 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.
• #19: 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…
• #20: 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.
• #21: He built a vehicle telematics application that he was able to take and show to his boss.
• #22: 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.
• #23: 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.
• #24: 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.
• #25: 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.
• #26: 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.
• #27: 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.
• #28: 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.
• #29: 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.
• #30: 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.
• #31: 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.
• #32: To start with, you’ll need to create an Atlas Cluster if you don’t have one already, and a Stitch Application.
• #33: Head to these URLs to get started and I have a few colleagues here today that will be around to help as well.
• #34: What questions have we had most frequently? What’s next? I mentioned homework before.
• #35: 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.
• #36: 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.
• #37: 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.