Serverless Functions Explained | MongoDB Realm Backend-as-a-Service | Jumpstart

do you want to quickly and easily build out a back end for your application including api routes user authentication graphql and much more and do all of that without hosting your own server stick around we're going to take a look at mongodb realm our backend as a service platform hi i'm jesse i'm a senior developer advocate at mongodb welcome back to the mongodb jumpstart series in the previous videos we got a high level overview of mongodb we looked a little closer at mongodb atlas we created our first atlas cluster connected to our cluster with the mongodb vs code extension and the mongodb compass gui we also imported some data into our cluster for use in the e-commerce project that we'll be building throughout this video series if you missed those videos feel free to go back and watch them the link to the playlist is in the description below but if you're already familiar with mongodb and mongodb atlas and you want to learn more about mongodb realm then you're in the right place in this video we'll explore mongodb realm our backend as a service and mobile platform today we're going to focus on exploring the backend as a service part of realm we'll set up some serverless functions that will allow us to use mongodb realm as our backend api connecting us to our mongodb atlas database and supplying data to our application front-end so what is mongodb realm well it's a serverless platform that makes it easy to bring your data into the front end of your application without having to worry about hosting your own backend server the mongodb realm backend as a service platform provides functions you can execute serverless javascript functions to perform database operations and build out apis for your application user authentication you can use realms built-in authentication providers or integrate an existing provider and allow realm to manage user authentication for you it also has triggers with triggers you can automatically execute functions in real time based on changes in the database user authentication events or a preset schedule there's also data access control you can define user-based data access in your application and even field level permissions for app users mongodb realm has integrations with third-party services as well like twilio and aws services it also supports graphql you can automatically generate a json schema for your mongodb collections and enable graphql with a single click and that's just scratching the surface of what mongodb realm is capable of there's also realm sync which syncs data between mobile devices in real time and we'll cover realm sync in more detail in another video in the series on top of all of that mongodb realm has sdks for node.js client-side javascript react native android and ios allowing for cross-platform support alright so now let's set up realm like i said in the previous videos we created our first database in mongodb atlas so now let's go over to the realm tab so the first thing that we'll do is we'll name our realm application i'm going to call mine products and then link our database we're going to link that to our cluster that we created in the previous videos and then create realm application the first thing that you'll see is several guides that are walkthroughs that can help you get started with realm sync triggers web hooks graphql and the web sdk you can use these to get up and running very quickly i'm going to close this and at any time if you want to access the guides again the button is right here so the next thing that we'll need to do is add a collection so we'll click this get started and then add a collection so in here we need to select our database so we have all of these sample databases but we're going to pick our store database that we created in the previous videos and then for the collection is going to be our products collection we're going to leave all of the defaults here and add collection and now we have another pop-up that is understanding the save and deploy so when you click save that creates a development draft and then deploying is what makes your changes public so here under rules we're going to set read and write permissions and then save that next let's go over to authentication and we're going to allow users to log in anonymously so we're going to edit that turn that on and save draft so if we go back to authentication we can see that there are several other options we can allow users to log in using an email password facebook google apple api keys custom jwt authentication and custom function authentication so there are a lot of authentication options here so that is all the setup that we need to access our mongodb atlas database next let's build out some functions all right so on the left side under build we're going to go to functions and then create a new function i'm going to name the first one get all products and we're going to leave the default on everything else here and go to function editor this is where we can actually write our function code so we have this comment here that gives us some examples of things that we can do we can get our collection and we can use a find one and then do something with that document all right so we're going to use some of this i'm going to change this from var to let so we're going to let connection equal context.services.getmongodb atlas and then the db name so our database name is store and the collection that we want to connect to is products and so what we want to do here is we're getting all of our products right so instead of returning arguments so arguments can be passed to any api but for this one we're not going to use any arguments we're just going to send back all of the products so in our return we're going to return collection dot find and then everything so this is going to be a very basic serverless function that provides an api route which returns all of our products so we can test this if we go down here to the bottom we can click run and then we should have all of our products nice so this says an array of each product i'm going to copy one of these ids which we're going to use in our next function for testing so let's go ahead and save this draft and we're going to create another function so back in functions let's add or create another new function this one is going to be get one product and then go back to the function editor this one's going to be very similar so we'll change var to let collection and the same thing we're going to get our database which is store and our collection name which is products and this time we only want to get a single product and we're going to use an argument that is passed to it the argument is going to be the product's id so this time we're going to return collection dot find one and in here we're going to find by id so it's underscore id and then because this is a bson object we're going to say bson dot object id and then pass into that our argument all right so let's test this out we go down here this time we're going to open up our console let me expand this up in our export here we're going to change hello world to the object id that i copied earlier and then click run now in our result we should only have one item which is the id that we were looking for so let's save this as draft as well and back to functions we can now see that we have two functions get all products and get one product so we have our api routes set up so now let's go ahead and review draft and deploy this so this is what it's going to deploy i'm not going to go through all of this just trust that it's going to do everything that we need so we're going to deploy that and deployment was successful so now let's look at how we can actually utilize this serverless function on our client side so under build let's go to sdks and we can see all of these sdks that are available to us we have the node.js sdk web we have an android java android kotlin ios swift and ios objective c and then there's a dot net in beta so depending on your tech stack if you're using node.js on the back end of course you'd want node.js or if you're accessing this from a website just using plain old javascript or maybe react you can use the web version so very simple to get started npm install realm dash web and then just a few lines of code to get it connected so let's go ahead and go through these steps and get it connected to our front-end application all right so i've got a blank project folder open here and we're going to start out by getting a next.js application up and running we're going to use npx create dash next dash app we're going to use an example so dash e and we're going to start out with tailwind so this will get tailwind css all set up and going for us so we're going to put this into this directory so we'll put a dot at the end and then hit enter and i'll speed up this process for time awesome so we have that installed next we're going to npm i realm dash web so now let's connect and use our realm function to bring in some data so under pages we're going to go to index.js let me close all of the sidebars in the terminal so this is a very basic next.js application of course this is built on react so we have our home component so in the main let's just get rid of everything in here so that we have a blank slate to start with we also don't need this footer so we'll get rid of that all right so inside the main eventually we're going to list out our products here so we'll just say products here for now let's work on the function that brings in the products so we're going to use use effect so we'll need to import that so import use effect and that is going to be from react so in our function let's use the use effect i want to make sure that this is an async function the first thing we're going to do is get our realm app id so let's label that realm app id and that is going to equal a string so back in realm if we go up here to products there's a little copy app id button so let's copy that and then back in vs code we'll paste that right here now ideally we should put this in an environmental variable but for testing we're just going to leave it right here so we'll create another constant this is going to be app which is going to equal a new realm dot app and then in here we're going to pass in our id which is our realm app id now we do need to import realm as well so back up here let's import star as realm from realm web all right so now we have our app the next thing that we need to do is get some login credentials so for this we're going to say const credentials is going to equal realm dot credentials dot anonymous and that is a method so we're going to run that because we enabled anonymous authentication this will now give every user anonymous access so next let's go through a try catch in our try we're going to create a const of user which is going to equal await app login and then pass in our credentials once we have that we're going to create a const of all products and that's going to equal await user dot functions and then we'll call our serverless function and we called it get all products so this is the actual serverless function that we created in the realm dashboard so all products is going to return to us all products okay so now that we have all products we need to store that somewhere probably in a state so let's also import use state and above the use effect let's create our state so we'll say const and we'll say products and set products that's going to equal use state and initially it's going to be a blank array so now at this point we can set our products so we can call set products and we'll pass in all products now in our catch let's console.error the error if there is one okay so now we should have products that we can use down here so in here we can say products so we're going to check to see if product if we have products so products and so if there are products then we're going to do something with them so we'll say products dot and that should be products products dot map so we'll have each product so let's just list out each product for now we'll just create a paragraph so inside the paragraph we'll say product dot name and let's just list out each one we also need to add a key so it will say key is going to equal product dot id oh and we need to return this so be sure to return save and then let's go to our console and let's see what we get let's do npm run dev this is running on localhost 3000 so let's go ahead and open that up and we have an error here let's go back and check that out get all get all products i think that is a misspelling there so it should be get all products with an s at the end and i have another typo here get all products [Music] how about that let's give that another try and there we go now we have a list of all of our product names mongodb realm is an amazing resource and we've only scratched the surface we built out our back end api using mongodb realm functions connected to it from a next.js application and successfully read data from our mongodb atlas database using mongodb realm in the next video we'll finish the front-end build for our ecommerce project we're going to build out all of the components product pages and style everything using tailwind css so be sure to keep watching for that the link to the series playlist is in the description below if you have any questions or feedback visit our community forums at community.mongodb.com our community and employees are there ready to answer your questions and if this video was helpful be sure to like and subscribe [Music] [Music] you

Channel: MongoDB

Views: 45,487

Keywords: MongoDB

Id: Evp3xTzWCu4

Length: 16min 27sec (987 seconds)

Published: Wed Aug 11 2021