Transcripts
1. Intro: Hi, I'm Gene. And welcome to this course on how to build a backend with Mongo Devi Express in O. J. S. In this course, you learn what an A p I is and how to persist Data on the Web with it. Using one of the most popular JavaScript back in stacks available today Margot Devi Express and Js. You'll be cutting a real bag in which you'll deploy and be able to access live from anywhere in the world that has Internet. I'm really excited to get started today and excited to teach you about data on the Web. There are some set of instructions that you'll need. Teoh get started the coating portion of this course, the set of instructions that provided are geared towards Mac OS users. But if you are a Windows user or Lennox Caesar, feel free to reach out on the forms and ask for help, and I'll give you the best instructions that I can on how to get started on those platforms as well, because it's definitely possible. But if you are in any of the platforms and you help with us at a process, do reach out and get you started so they can start the coming portion if you have any troubles. I've also included some useful diagrams and code samples to help you along during each step step of the way in this tutorial, So let's get started.
2. What is an API?: hi again. Before we get started coating, I wanted to provide some useful definitions. So first of all, what do we mean by a back end? Well, front end is anything that the user interacts with. Maybe an application they click on or touch or a website. They visit and see information, whereas the back end is actually the layer of an application that deals with data access and business logic more broadly and a p I, which is what we're going to be building, is an application program interface. And what this really means is it's a way to receive and send data and also specifies how to interact with that data. And we're going to be building our a p I with manga, dp express and note. So who uses an A P I and where is it in the real world? Well, any time that you access data, whether that's visiting YouTube, looking at pictures of kittens, calling an uber, you're hitting an A P I somewhere, which is a huge store of data that accompany maintained so that the users can interact with it, and the purpose of that varies from website to website and from product to product. So let's quickly take a look at what's, um, riel. AP Eyes look like to ride a link to this huge get have repo that lists a ton of public AP eyes. So these air AP eyes that you're free two years, some of the required A V i p and the ones that don't will say no for off. You should feel free to explore this and check out all the different free data that's out there. Let's take a look at a few examples. So one very popular FBI is to get have a P I. And I guess this is an 80 I that's public that lists all get repose and users, and this is what it looks like. So if you go Teoh ap i dot get have dot com slash users. This is actually list in Jason, which means JavaScript object notation of all these. There's a get hub and so you can see each one of these JavaScript objects is get abuser with their log in name. You were also there get hub some of their starred repose and their type, and you can see that there's also some Boolean values like is site admin, which for this user is false. So you can see there's older for data types and lots of different properties. Here's another example of an A p I. This is, uh, financial news source and you can see again this is a ray of Jason or JavaScript. Object notation objects with different properties. And it looks here like each one is representing an article for a headline and you have a link to that ap I specific article as well as some text in a daytime. So these are two very simple once on example of a more complex won. This is pretty cool. Is the space six a p I. So this is actually Spaces. X is a p I, which is public, and you can see that their whole AP I at this end point for launches for the latest lunches is actually showing a huge object with some different information. So, like, this object has a flight number, the launch year, and you can see that it was the Falcon nine on and then within that you have some more nested data. R A p. I is not going to be this complicated but I wanted to show you an example of what some different AP eyes little like, um, so this is pretty cool. Feel free, Teoh, Explore and check it out. And let's get started on understanding some basics of the tools we're using and how to make requests and receive responses to build something like this.
3. HTTP Verbs and Actions: Hi. So I want Teoh go over a super useful diagram that you can reference throughout the duration of this tutorial. And that is the http request response cycle. So we take a look at this, you'll see that there is a drawing that I made that looks like a laptop over to the left labeled client. And the client is exactly that. It's a laptop or a phone or anything, where you actually viewing information or data and all the stuff that we're going to be building in this course is actually to the right of that client. So you'll see two more drawings. There's a server and a database. So what happens when you're accessing data on the Web or threw it up as you as the client make a request and that it could be something like going Teoh https colon slash slash ap i dot get have dot com slash users And when you do that, you're making a request to get him a p I. And you're saying, Hey, I want to see a list of all the get abusers. So that's the request. You make that to the server, which then looks up where to find that data, and it communicates in the database and says, Hey, database, give me a list of all the users. The database returns that data, and then the server gives it back to the client as a response. And that's where you see that big list of users. So we're going to be building something. Let's just do this with whatever kind of data that we want. Now the server is what allows us to actually visit a euro and the library that we're using to route, which is saying, Hey, when we visit this Ural, give us this information is called Express. The database for using is called MONGO DB, and there are lots of different kinds of databases. But this is a very popular, um, Java script compatible database that we will be a using for this course. And so you'll notice when we get started actually running our coat, you'll have to terminal windows open aside, and one of those terminal windows is to run the server, which is that box of three lines on it that lets us actually serve our application and visit you or else. And the other window will be Teoh run our database, which is Mongo. So this diagram will help you remember that. That's why we have to terminal Windows one for the server and one for the database. And the client, of course, is already open. That's you. That is your laptop. Basically, an http verb is a word that you can use to specify what kind of a request you want to make to your server. And we're going to deal with four different kinds of reap us that's get post put and delete a get request, gets a piece of data and displays it. A post request puts a new piece of data in your A P I. A put request updates a piece of data in your A P I and a delete request. Deletes a specific piece of data in your a p I. So those are your four verbs. Get post put and delete, and they actually correspond. Teoh an action and that action could be read, create update or destroy and the best acronym to remember that with is crowd. So we're going to be working on cutting throughout the duration of this tutorial
4. RESTful Routes: back to start coding. But before we dio, I'd like to go over the HD to be verbs and actions. We just talked about one more time, so we're building a rest ful ap I rest ful stands for representative state transfer. But what that really means is mapping http verbs to actions. So this chart, you'll see the four h g d p. Verbs that we talked about on the left hand column and the actions we talked about Crowd create, read, update and destroy on the right. The middle two columns Explain which route you would actually visit in your browser. You, Earl, to hit that action. So these are the five routes that were going to be working on The 1st 1 is a get request to the A P I, doc slash creatures. Now I think creatures because I'm going to build on a p I full of fun, mythical creatures. But you should build your a p I it with whatever you like. So if you go to a p I slash creatures, it will be an index of all the creatures so read and list all of them. You can also make requests in this a p I that we're building to a B i slash creature slash i d which specifies the i d for one creature and this will let us show just one creature. The next route will be a post request to a p I slash creatures which will create one new creature. So we'll send some data to our routes and we will create one creature to add to the Fiat. The fourth will be a put request Teoh a specific creature. So again, that's a p I slash creature slash i d Teoh update one creature, one specific creature by its i d. And then the last one is delete. So this will be again to a specific A p i slash creature slash i d and will delete that one creature or whatever you create. So this part will be fun because you get to decide what kind of a PR you want to build. That could be on a p I of animals like I'm doing. It could be an A p I of people of places of food ingredients feel free to get created with it. And I'm really excited to see what people builds
5. Starter Code and Tools: If you haven't already, please follow the detailed set up guide that I provided. For your reference, you'll be running most of those commands for the set up through terminal. And if you don't know of a good way to open terminal, my favorite is Do command space and insert for terminal and then look enter. It will open up your terminal window. So first you want to make sure that you also download the starter code, which is a compressed file, and go ahead and un compress that and make sure that you get into that directory. So to get into that directory, for example, if you say it to the started could on desktop, you have first go CD desktop and then you go CD, and then the name of the folder that you're going into CD is current directory changing your current directory, and then you would type my first back end to get to your current directory. Um, I saved my project in my root directory, which is Do you Weatherwax? That's my roof. And so all use the same command to get into their so seedy my first back end, and from now on, you always wanna make sure that when you're working in terminal, you're in the correct directory, and that will be in the directory. My first back end. Great. So if you've installed everything, you can go ahead and type LS, and you can see that there's a bunch of stuff there already. So the first thing you want to do is install our dependencies, which are mongo DB Express and Note. So what you want to do is go NPM install dash, dash save, and that's going to look at the information in our package dot Jason, too. Install now. Well, that's working. You can go ahead and open up a new tab, so to do that, you can do command T again. That's command T. I'm not. And open up your project even manually. Or if you have Adam, use the command dot that will open up the project for you. Adam. So here's our project, and you can see that there's a models holder that's we're going to be ready the coat for models. You can ignore the DS store and get ignore for now and the package dot Luck and then this package dot Jason. You'll see that There's three dependencies, which is what we're installing right now. With that NPM commands. There's also some reference materials that you can, um, ignore for now and then the server, which is where would to be working mostly. So let's go ahead and check to see if that installation's finished and it has awesome. So now if you remember, I said, they are always going to have to have two terminals windows open, right, So oneness for serving your application. And the other one is for Mongo. So in one of your terminal windows doesn't matter which one you can type in the command Long God. And if you've installed everything correctly, what will happen is all this stuff will print out. And basically what this is saying is we're serving a local database and it's almost always on port to 7017 So this is what she should have in one of your workers, and you can just leave this here. You don't have to touch it anymore for now, So just keep this running and then go to your other tab, and the next command we wanna type is the one that's actually serving that server So this is actually serving our application, and the command that we're gonna use is no Mon, which is using a tool called No Demon, which serves are no Js application. And you can see it says that it's watching and it's starting node server dot Js and you can see it your first A p I is running on local host 5000. So now, although this might look a little bit mysterious, we actually have our application running. So that's awesome. Let's actually start to code.
6. Express Routes Setup: So we're about to start coding our express routes. So expresses one of his dependencies we installed with NPM, and it allows us to set up really easy routes for r P. I So revisiting this chart, we're going to set up these five routes. So to get routes, one put route and one delete which correspond Teoh crowd, create, read, update and destroy actions. So we're going to actually build out thes five routes in our server dot Js file. So let's go ahead and take a look at that coat. So this is a server dot Js. I'm gonna walk through what's going on here, line by line. So first we require express, which is our routing library and body parts, sir, which is another library that we use to parse information from forms. So this is when you want Teoh create or update something. You have Teoh have some kind of way to get data from a form and parts that data. We're also going to require our models directory. But I've already created for you over here, and we'll set up our models and a little bit we make a new up and we call it up and we invoke Express, which is the library that we're going to use just saying that we're going to make Anapa using express and then we also make sure that we use body parts er on that the encoding is what we'd like. So now let's get to the fun part. Let's actually write out what our routes are going to be. So if you're right, the 1st 1 is our index out, which is going to display all of our creatures or whatever you decide. Teoh cried in your a p. I encourage you to be creative, so don't leave 80 i slash creatures. And so here you want to make this a P I slash whatever FBI you're going to build, So a p I slash cats a p i slash friends, FBI slash food Um, a p I slash vacations, whatever you would like it to be, the next one is going to be our get one. So this is going to be r a p i slash creatures slash colon i d. Which is saying we want to access just one of our creatures and then next we're going to do you are post route so you'll notice. Now we're using apt up posts. So the HDTV verb that we're using its change and we're going to go 80. I slash creatures because you want to add it to the list of all creatures. So the next thing is going to be delete. So for this again, we're gonna go 80 i slash creatures slash cool and I d And the reason we have that i d there is We want to make sure we delete just one specific creature. It won't work if we try to do a P I slash creatures because we need to know what want to and then update. You'll see. Now we're using the put verb for updating one, and you guessed it. That would be a V i slash creatures slash Poland i d to update one specific creature. These you need to know which one update. So now you'll notice this last part. Let us actually run our server. So we'll get to you this part what this means in a little bit when we deploy our application. But right here we specify the ports on your laptop that you want. Teoh serve on 5000 is a good one. Some people use 3000. There's lots of options, and this console log is just a little thing toe. Let us know that our A p I is running. So if you go back to your eternal window, you'll be able to see that that is what is actually printing out when we start up our server. So now we have our basic wraps it up with Express. He's five routes and it's time Teoh build out our models.
7. Persisting Data with MongoDB: So we just set up our server with some basic routes mapping or a CDP verbs to the routes that we are going to use the five frocks. Just a quick note. I'm using E s six and tax here, which is the latest version of job script. But if you're more comfortable doing yes five you could also have rewritten each one of these like function and then get rid of that arrow. So whichever syntax cheaper for I just want to make a note. Either one is fine. I'm just using a six because it's the most up to date. So now we get to set up our models. So our models are basically the thing that we're going. Teoh crowd, create, read, update and destroy for R A p I. So I'm going to be doing creatures. But you, of course, did you whatever you prefer. So let's go ahead. And in that models directory, let's check out the model dot Js So this you're gonna actually want to rename to be whatever your model is. So mine is going to be creature singular, So it should be singular for whatever yours, this and, um, you want to rename that file because this is the actual name of the model that we're going to be using. So I have one line here. You can see that I'm just requiring mongoose. Manga is the library that we're going to use to interact with their Mongo DB database, and you've already installed it when you did that NPM command. So the second thing we do is we declare what's called a schema, and the scheme is like a blueprint for the different properties that your model has. So next we get to the describe our specific scheme of for our model. So you're going to name that whatever your model is, and then schema and declare a new schema, And then within this block, we get to list all of our properties. So these air, whatever properties, you would like your model tohave. So for me, I'm going to have a name, and then you list the types, so that would be like string number or Boolean. I'd like to stick to those for now. So this is the three types that we can choose from for this ap I tutorial, Um, I want types like what kind of creature, is it? That's also a string for me. Habitat. Maybe. I want to know where it lives. Um, Then how about a number? Property? What about numb legs? How many legs does my creature have? So that's gonna be a number, because that's something we can count. Um, who it is dangerous. Always get to know. And that's going to be a bullion right? So bullying is true or false? Oh, yes or no. Is it dangerous? And then let's even do an image. Your that'll be fun. Um, so that would be a string because EU world's history. So go ahead and fill out this scheme up for whatever properties you want, your model of having the corresponding types. And then we want to export that. So you create a variable called creature and then you use Monagas thought model to create a model with your scheme in the syntax for back is the name of your model and quote single quotes and then the scheme other using. So it should look like this. And then last but not least, you want to export that and let the rest of our app use it. So it's module dot exports, bulls, creature greats and then one last thing. You'll notice that there's an index dot Js file on our models folder, so that actually exports all over model. So if you wanted to expand this AP I later to include more than one model, you would also use the index file to export that. So if we go ahead and look, you can see that I already have some set up here. So this Mongu stopped Connect is actually saying where we serve our database so you'll see that there's this environmental variable similar to what we saw in server dot Js will get to you that in a little bit, but you'll see right here this is the local place that we're serving our database. So that second terminal window, that's where this is connecting. And because we just declared our creature, Let's go ahead and make sure that we require it for the whole app. So we're going to you dio dot slash creature and that creature is with name of our file. So you'll see that file is named creature Dodgy s. That's why this is lower case creature and then one more thing we just want to export that to the rest of our app. So now the rest of our app can access it. So we have set up a schema to describe all the different properties of our model. And we created a model with that schema. And then we exported it. And we've exported that model to the whole app so that we can use it and start spreading with often.
8. CRUD Part 1 Read: so just finished creating our model and exporting it, which is created according to a schema with the different properties he won t is for a model and the reason that we need a model on the reason that we need a database is the model specifies what kind of properties each object, which is going to be a Jason object has. And the database provides a way for us to persist our data. Which means we can say that someplace and it won't go away. If we say close the Web page, it will be stored in our database right now, locally and later in the cloud. So let's work on the c r of Krug, so create and read. So if we go back to our server dot Js, you can see we've already required our models. So let's set up these 1st 3 routes using Mang Goose methods, which means a way for us to access our DB data. So and they get are out. The syntax we're gonna use is DP. So the reason using DBS because we called a TV up here dot creature, which is a model dot find and find, is the method you guessed it to find all of our cultures. So we're going to provide to arguments here. Air, which is like in case we haven't error, will toe lock something. And then all creatures which will be all of the creatures returned I'm going to use Yes, it's six Centex here, but again, feel freeze function if you prefer that syntax. And within this block we want to check if there's an error. And if there is, let's go ahead and consul dot log index air. And if not, that means we got back what we want it. So let's go ahead and read stock Jason creatures, all creatures. So rest up Jason just means we're sending back a Jason object with you guessed it. All of our pictures and creatures just specifies what we're calling that so similarly, we can flesh out our route to get just one feature. So we want to use Devi Doc creature again and then find one this time because we just want to find one. It's a handy monkeys method that we have available to us and we want Teoh check if the I d exists using wrecked up Haram's that I d and that Haram's just refers to whatever is after the slash New York you are. You are also our Perrin. The only only have available to us is I D. And that's all we need. So we're going to check it that exists. And again we're going to see if there's an error. And now, if there's an air, of course you want Teoh console that lag. There's a show error, goods. And if not, we know that we got what we wanted. So then we can rest on Jason again. The one creature that we got back. So that's awesome. Now this is the fun part. Let's create a new creature.
9. CRUD Part 2 Create: we just finished up the read of cried. I also want to mention that the solutions are available as the server jock Js file for just the section in the previous lesson. So now we're going to do create, which is our post HDTV ver. So this is exciting because this data will actually let us post data to R P I and creates and creatures. So the first thing you want to do is create a variable for any creature something. Call it New creature and you call it whatever your model is probably prefixed with new and I'm gonna say new db dot our model creature wreck dot body. Now, the reason urging wrecked up body is because we're using the form body Uh, the data we're getting from the request which is using that body parse er library that I talked about earlier. So this will let us get form input and create a creature from it. Now we want to save that one. So it's good new creature dot save again with our mongoose methods and let's pass an air or creature and now going to check if there's an error as usual. And if there is. Let's go ahead and console that log, say there and then are there. And then if there wasn't an error, which is awesome, because it means we actually created something. Let's go ahead and council that log that we saved a new feature and then I'm going to go ahead and log the creature dot name. Um, you can if given name property for whatever your model is. You can put that here. Otherwise you could just put saved if you wanted. Here. This is just kind of for us to see what's going on. And then finally, let's go ahead and rose dot Jason Just send back what we create. It is a Jason object. In the installation part of this tutorial, you will have downloaded a tool called Postman when postman is a really useful tool to be able to test out our a p. R. So if we had a postman right now and we go to get local host 5008 p I slash creatures, you'll notice that there's nothing there yet. So if I want to actually post a creature, I just change which HTV method that I'm using here and make sure that you're at this local host Colon 5000 slash AP I slash Whatever you're you're Ellis. And in this body, I have make sure that I selected www dot formed out. You're all encoded. This is the type of form and coded Dan R A p I x expects. And this is pretty standard to make sure you have this checked. And I filled out some information for my mythical creature, which is named Thumper. He's a jackalope. Um, he has four legs. His habitat is Texas. Maybe he's dangerous. He hasn't antlers and I've even provided Ah, you are all of an image for him. So you can go ahead and fill all the properties. And this corresponds with what you have in your semen. If I go send, you see that I get back one Jason object, which is thumper. So that's awesome. And if I then go Teoh, get for my get route for my creatures and I took again. I'll see that now I have one creature. So now we've officially started toe add data and you can actually visit this your URL in your browser and you will see this exact same thing. So That's awesome. And if you want, you can go ahead and post some other things like I'm going to make another creature. Might as well have Nessie. Um, she's a Loch Ness monster. She has zero legs. I'm pretty sure, uh, Scotland is traditionally where she's from. Dangerous. I'm gonna say Nessie is not dangerous. She's he's probably not dangerous. And I've gone ahead and found a picture for Anesi. So I'll put that here. And now if I go ahead and post, you'll see I get back another Jason object, which is Nessie. And now if I go to the get route for my creatures, I'll see I have two of them. So thumper in Nessie. So that's awesome. We've actually started a post data to our a P I
10. CRUD Part 3 Delete: I went ahead and used postman Teoh create some new pictures. Just so I had some more data and I'm actually visiting that you're all here in my chrome browser, COC. It's the same one that I'm using, and Postman and I have four creatures and I wanted to point out that this i d This you have to specify in your schema and you don't want to specify it when you're creating a creature because this is automatically generated for you from Mongo, DB and most other databases do this as well. This is some hash or maybe an integer to pin our kind of database you're using, and the idea is automatically generated and its unique. So you never have to specify that when you're creating schema or when you are creating a model instance. So let's move on, Teoh, delete an update. So we're going to use our delete http verb, and we do have to find which creature we want to delete. So let's go ahead and find the creature ready. So let's go ahead and let Creature I d again be wreck dot Haram's dot ideas. So request up for him. So I d and again. That's this I d here. And so I don't know which one to delete. So we go devi dot creature. And then the method we're going to use is find one and very useful method. So this lets us find one by the i. D. So again, you know that that mongo specify ideas the creature rd that we had in our rec and now we're going to use to other methods. So dot populate basically passes in whatever your models named lower case. So that says, populate the model using that I d that we get and then execute exact I know it's the little tricky, but just bear with me the delete methods, so we're going to pass in again error deleted creature. We can call it because that New Jersey milker here and now let's go ahead and just rest. Stop, Jason, Whatever. We deleted one last time just to make sure that we can see that we don't eat that. So let's go ahead and make sure that's all good. So the server is still running. Let's go ahead and open up, Postman. Here's my creatures say maybe I want to get rid of the jackalope. So we want to get rid of the creature with the sightings. So I'm gonna go ahead and copy that, and then we're going to use or delete method and pass in that specific idea to delete it. So now if I post this, we get back that jackal of one more time. But if we then get all of our creatures again Well, notice the jackalope is no longer there. So we've successfully deleted that creature. And if we refresh this in our browser, we will see that the jackalope is no longer here.
11. CRUD Part 4 Update: Oh, let's do our last route. This is pretty exciting. This is the update route, and this is going to be the longest one. Eso just very. So let's go ahead and again. Let's make sure we get that creature i d. You'll see there's a pattern emerging here. We're gonna do wrecked up Haram's Di di, so that lets us get which creature toe updates. Now we have to find it. So devi dot creature dot finds and again, um or rather it was just do DVD putrid. I'll find one that makes it even easier toe find our creature. So let's go ahead and pass in that i d. And now we're going Teoh consulate An air found creature. Make sure we can actually find it because if there's nothing update, that won't make sense, Right, So in here, let's go ahead and say it is an error. We can just say that, uh, console log. Maybe you could say could not find the creature. So now we know that there's an error in that case, and then if that is not the case, we know that we've actually found the creature, and in this case, we actually want to update, So bear with me. This part is a bit long, but it's pretty straightforward. So basically, we're going to use that body, parts her again, and we look at our form and see if name has been updated. And if it is, we use that. And if it's not, then we just keep whatever name the creature had before. But you guessed it. We have to do this for each property. So you know what to do here. See habitat and this. You're gonna have to do for your model, for whatever. Um, for however many properties that you had for your model. So this could be a little bit long, but you want to make sure that you can update every property so almost done here, your legs or go, it's dangerous. It's good and less than not least cool. So those are all of our properties, and then we also want to make sure that we save it. So let's go ahead and council that law that we're updating. And then let's go ahead and save it. So we want to found creature dot say that I'm not. And then again, we always want to check for an air almost on. I promise. And then here, let's go ahead and say, If Air, we want a council but log something and then if not, that's awesome, because we know that it actually worked. You can actually say that We updated our future and let's go ahead. And Red Star Jason, the updated creature as well. Well, so that was a lot of code. We should probably make sure this works. So let's go ahead and check out. Make sure servers still running it. ISS Let's open up, postman. So maybe grumpy the dragon is actually not so frumpy. So let's go ahead and pass in that idea. In the your own issues are put method and in the body. Let's change Grumpy to sleepy and maybe he's nodding dress anymore. So let's go ahead and send that and we can see the indeed we've updated that dragon. And if we get all of our features again, um, or you can even just get the one creature will see that sleepy has changed. And again, if we were to visit this euro are working to get all of our creatures, we'll see that we've successfully updated our dragon. So go ahead and try this and make sure that it works for you
12. Deploying to Heroku: So right now we've been running things locally. So when we visit our local host, your URL on our browser or through postman weaken see it? But if you have a friend on the other side of the world, they wouldn't be able to see the data and a true AP. I lives on the cloud where everyone can access it. So we're going to actually use her Roku, which is, Ah, tool that's built on AWS Amazon Web services. Teoh easily deploy Web applications. So if you haven't already, go ahead and sign up for a Roku Accounts and come back to this when you're ready, and then you're gonna wanna go ahead and walk in and you're going to go to Roku dot com slash new up, then give Europe the name. So that's pretty easy for me. I'm going to call it jeans. Creatures, A. P. I, um I'm in the United States. That's all we need for now. So we're gonna go ahead and create our that's here, and there's nothing on it yet, but it does exist. So now we're gonna go back to terminal. If you want to clear out your terminal to make a little cleaner. You can type clear. Um, great. So now we have to initialize get repository first. So go ahead and get a net and go get status. You don't know how to use gets go ahead and take a quick tutorial. There's lots of information on again that cheat cheat of set up. So I'm going to go and get at I thought get commit Dash and preparing for hero. Do we just need one simple message here gets status. So, um, that's great. Now make sure that you're logged into her Roku, Um, by doing hero Gu again and providing your potentials there again, the student we specified on the cheat cheat for set up. I'm already logged in, so I'm not going to do that. But once you're logged into her Roku and you can also check to make sure you have Caribbean stall beginning which Roku? There it is. That's great. We're going to go ahead and ad are pero que or a gen. So if we go here to the app that we just created, we'll see that it's actually walking through the steps. So, Roku, walk in. You've already initialized or get and we can go ahead and use this command to go ahead and add the remote branch for Haruka. This is just connecting your local code repository with this remote Haruka branch. So let's make sure this works might take a little bit awesome so we can see that it's a set to get remote harow goo to our Roku repository location. So that's awesome. And we can go ahead and get status we've already committed. That's awesome. Now the next thing we want to do is make a place for a data toe live. So right now, we've been using a local database, but we actually have to use the mongo db add on which is called a manga lab. Teoh, add to that to Hiroko so we can have a place for our data to live on the cloud SOS. Go Roku Add ons. Colon create longer lab Enter me Waits. Fingers crossed. Awesome. Now we've added on a place for our dated to live on the flat. And if you want to go back real quick to your text editor, remember how I talked about the process that in Stockport and what that means? Well, now that we actually have a remote port that our server will be running on. If we are running our application on the cloud, which you will be in a little bit on the remote, we will be using this environmental ports. We'll actually get to serve it on your Hiroko euro. Similarly, in the index dot Js for models, the processor end mongo db u r i well, correctly look for that you are associated with your remote mongo database when it's being served on the cloud or on her. Okay, so this is already set up for us, which is awesome. Everything should be ready, and we actually want Teoh deploy the command. Hopefully, everything works is get pushed wrote Do because that seemed or branch master. Go ahead and enter and just wait so you'll see her hope is building for you and it's launching. That's awesome. And it go and it already says, uh, you TBS colon slash slash James creatures AP. I heard you act dot com So if we actually go to the Sjahril and you remember, you have to do a t I slash creatures, we'll see that there's nothing there because we actually haven't added anything to a remote data. It's We've only been working on local, so that's easy to fix. You just copy this euro and go toe postman, and this is pretty exciting. So now, instead of posting toe local hosts, you can actually post your remote a p I. So I already have sleepy that dragon here, so I'll go ahead and send him over. And there it iss. And now if we actually go to our A P, I and refresh will see that we've successfully added Sleeping Dragon and you can go ahead and populate this with as many creatures as you want, just like before. And if you visit this euro from any browser in the world, you'll be able to see all of your data there. You've successfully created and deployed your first riel ap I using Hiroko. Congratulations.
13. Recap: So, congratulations. You're now back in Developer. You just deployed your first javascript back and with her. Riggio, you now know what a server is, what databases and how to create the classic Java script. Back end stack with Node Express. And we've also learned how to do it's sprouting Hudis, mongoose and how to test with postman. And I do encourage you now that you're up is live on heroic you to test all four of those credit actions using postman to your new riel Roku, your please feel free to message if you have any problems. I'm super excited to see what you guys have created. Moving forward. You can use this real life back in from anywhere. Teoh, get data and display it on a website with front end or maybe even on a mobile application later on in your career. I'm really happy that you've decided toe learn about how data works on the web. And I really hope that you continue your curiosity and explorer. All there is to dio with ap eyes in the back end using Mongo Express and thanks. Have a good day