- Overview
- Transcript
4.1 Handling Requests in Express
At this point, you now have a functional, though basic, database with a data access layer. But so far, it isn't being used anywhere. We want to expose this data to the outside world via an API. But before we do that, we need to set up Express to handle requests coming from the internet.
1.Introduction2 lessons, 07:21
1.1Introduction01:02
1.2Prerequisites06:19
2.Getting Started3 lessons, 30:48
2.1Creating the App Structure11:46
2.2Creating the Server-Side Entry Point10:14
2.3Starting the Angular and Express Apps08:48
3.Setting Up the Mongo Database4 lessons, 27:53
3.1Getting MongoDB Up and Running06:08
3.2Connecting to MongoDB06:47
3.3Creating the Database Schema07:49
3.4Creating a Simple Data Access Layer07:09
4.Creating an API With Express6 lessons, 29:16
4.1Handling Requests in Express09:57
4.2Taking Advantage of the Express Router05:52
4.3Adding the `GET` Handler to the API05:34
4.4Adding the `POST` Handler to the API03:18
4.5Adding the `PUT` Handler to the API02:17
4.6Adding the `DELETE` Handler to the API02:18
5.Building the Front-End Angular App6 lessons, 45:52
5.1Creating the Front-End Models06:57
5.2Creating an Angular Service07:31
5.3Making HTTP Requests From the Service08:33
5.4Setting Up the User Interface09:05
5.5Creating All the Components05:28
5.6Adding Routing to the App08:18
6.Creating the App Components12 lessons, 1:00:02
6.1Adding the View Lawn Markup05:55
6.2Adding the View Lawn Code06:51
6.3Adding the Add Lawn Markup04:34
6.4Adding the Add Lawn Code07:41
6.5Adding the Edit Lawn Markup03:06
6.6Adding the Edit Lawn Code04:11
6.7Adding the View Application Markup02:54
6.8Adding the View Application Code07:46
6.9Adding the Add Application Markup02:16
6.10Adding the Add Application Code04:49
6.11Adding the Edit Application Markup04:20
6.12Adding the Edit Application Code05:39
7.Conclusion1 lesson, 03:18
7.1Conclusion03:18
4.1 Handling Requests in Express
Now it's time for us to start to extend our application a little bit, and start to expose the data access layer and the information behind it to the outside world. And actually more specifically, to the front-end of our application once we get there. So, how do we do that? Well, using Express, we are able to create an API, which is nothing more than an entry point into our application where we can send HTTP requests. So we're talking about things like gets, puts, posts, deletes, etc, etc. And we can send data in and get data out. And all throughout there, we're processing these requests and doing things with them, and then providing a response. So, what does that look like in the world of Express? Well, there's a couple of different ways that you can do this, I'm gonna show you the basic fundamentals. And then we'll extend it and we'll get a little bit more elegant with it in the upcoming lessons. But here's the absolute basics, we are in our server.js file right now. And we have created an instance of Express and we have a port that we're gonna be listening on. We've registered our middleware, so everything is good there. So now what we wanna do is we wanna start to create handlers for requests that are coming into specific paths within our application, and it's actually quite simple. So we use our Express application, or our instance of Express, in this case, app. And then we can specify what type of request we wanna deal with. So once again we're talking about gets, puts, posts, and all that sort of good stuff. So let's start with the basics and let's work on a get right now. So, what is that look like? Well, the first thing that we're gonna specify is what is the path that we wanna handle this get for? So let's start with the simple example of, let's go to the root. So when we go to our application at the roots of this application. So, what would that look like? That would be localhost, because we're running locally on localhost on port 3000. If we were to go to that URL within our application, it would be handled by this request handler. So now that we've specified the path, we can specify how we wanna handle this. And we get a couple different parameters. And we then we need to specify a body or a function that we want to process this request. So, what are the parameters that we get access to? Well, there's a couple of them. We get the request, which is gonna contain all of the information passed into this handler. We get the response, which means we get the object that is created that is ultimately kind of augmented along the pipeline, so that we can do something with that response. We can add data to it, we can send a response back, so on and so forth. And then we also get a kind of a function pointer to the next handler in the pipeline, which basically means I could create a number of these handlers and when the request comes in, that request is gonna be processed sequentially by all the different handlers in the pipeline. We're not gonna use it a lot, I'm gonna show you an instance where we are going to use it. But It's just kind of a nice to have if you wanna do that sort of processing or you could simply all of the processing in one handler and then send the response back which is what we're gonna do right now. So, what does this look like? What do we wanna do? Well, the first most basic example is I just wanna respond with some information, with just a string. So we can see that it's actually up and running. So to do that, I'm simply going to use that response object and I can use the send function to send the response back. And I can say hello from my application like that. So let's go ahead and save that. So then, nodemon is gonna pick that up. It's gonna save it, it's gonna recompile all of our code and then it's gonna make it available to us. So, how do we do this? Well, the most simple way to actually send a get request to, well, anywhere on the Internet is by using a web browser. So let's go ahead and fire up our web browser and then let's go that URL. Let's go to localhost port 3000. And you can see that I get a response back, Hello from my application! So now we can see that by sending a get request to the root of our application, and I could put the / on the end here too and it will still work the same way. That once we send that request to the root of our application, and once again it's a get request, then I'm sending back this response. So that's gonna be basically how we're gonna handle most of the requests. Now you can work with, once again, puts and posts and all the different types of HTTP requests. And they're all gonna be functions that are hanging off of this app object. But there is one other thing that I wanna show you briefly here before we get too far is that when we're dealing with APIs, typically, the way that you structure them, especially for gets but it is applicable to puts and deletes and things like that. Is a lot of times you wanna be dealing with a specific object or a specific reference to an object somewhere in your application. So, when you do a global kind of get like this where you're not specifying anything, you're typically asking for everything. Give me everything that is related to whatever my application is working with. So in this case, it could be lawns, give me all the lawns that's what I'm looking for. So I would send back an object, or a collection of objects that are currently within my database, but what if I wanted to get back a single object, so how would we normally handle that? Well typically, you would specify which one you want by a some sort of unique identifier. So what we could do is we could create another get, and now we wanna create the rout that contains this specific identifier and how do we do that? Well, we're gonna do the same thing. We're gonna go to the slash that route, and then I wanna specify the ID for the object that I want. And the way that we do that is we specify parameters in here with a colon and then a name. So in this case, we're gonna call it ID. So now we can do the same thing that we've done before. We have the request, we have a response, and we have next, and then we have the body of our handler function. So in this case, I could respond back with something, but I wanna show you how that data is coming in. So now typically when you're dealing with APIs, you're dealing with data that's coming into them in two different ways. You can be dealing with data this way which is a request parameter. So that's gonna be in your URL, so you're gonna see it here as ID or whatever the value of that ID is, or you could be getting it in the request body. And in the request body, that's typically where you're gonna be processing information that's coming from, say, a put or a post where we're trying to either modify an object in the system, or create an object in the system. And so you're gonna pass in all that data in the body. But in this case, we're dealing with the parameters. So I'm gonna say response.send, and this time, I'm gonna send back request.parameters. So there's a parameters property on this request object that I can then send back. So let's go ahead and save this, then we'll go back to our web browser. And as you can see, if I refresh this page, we're still gonna get hello from my application, but if I augment this router and say, I wanna get object number 5 and send this back. I'm gonna get back a JSON object. So you can see here that because I made a slash and I put a value after this, the Express route interpreted that as the ID that I was sending in based on the route that we have defined here. And it says, okay, in the request.parameters as you see here we have a named value ID and then it's gonna send back the entire object. As you can see it creates an object here, so I could start to create more parameters in here if I needed to. And if I wanted to say that it was lawn with ID5/Applications and I wanted to get back the application of app ID or something like that. So I can continue to put more and more parameters into this URL. So let's go ahead and say that, now we'll come back in here and we'll say, /applications/10. And if I were to send that in, and I spelled this wrong, it's applications. You're gonna get back an object with an id of 5. So that's gonna be the lawn ID and then application ID of 10. So as you can see, you can start to create very long and sophisticated URLs that contain multiple parameters. Now, just because you can do things doesn't necessarily mean you should do them, and I would kind of advise you against creating too long of parameter strings and all of these different parameters. I would create things a little bit more pointed, two parameters are fine, but anything beyond that, I think you're gonna start to get too far and you should think about breaking this up into a separate handler. So, that's the basic process of how you're going to create these handlers in your Express application, and expose data to your API. Now, in the next lesson I'm gonna show you a little bit of a way to change this around. And, so,what is the problem, why would we wanna change this? Well, depending on the size of your application, if you're dealing with something simplistic, this'll probably work fine. But what happens if you're creating multiple APIs, and multiple ways to expose data? Let's say I wanted to create APIs that handled all the requests that had to do with lawns and all the gets and puts and posts and all the different flavors that way. But then I also wanted to be able to do the same thing for all of the applications and I want that to be all on its own API. So then I need to create all the gets, puts, posts for all of the applications, and you can see if I were to put everything in here, it would get rather large and unwieldy rather quickly. So I'm gonna delete this, and in the next lesson, I'm going to show you how we can use routing to be a little bit more sophisticated about this to create separate files to handle several different types of routes.