API Design in Node.js (using Express & Mongo) Exercise 2 Solution

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Speaker 1: So this stuff was already here for you. I talked a little bit about body parts and how we need it to be able to post things and put things to our server. Lodash is just a utility library, very similar to under score. Don't need it, it's just nice to have this stuff.

[00:00:18] I also talked about this syntax share the app.use we're gonna talk a little bit more about it after lunch when we get into middleware. But it's just a way for us to register middleware on an application level. Because this object right here, app, is our web application. When we say .use, what's really happening in the background is this.

[00:00:38] There's like an array somewhere, appMiddleware. It's a stack and every time we say app.use, it pushes in the function that we're passing into this array. So express.static is a function that actually returns another function. So it's returning a function that looks like this. We're gonna get into middleware as well, I just want to give you some context.

[00:01:04] It's just returning a function that has a request, a response, and this next function right here. I'm not gonna talk about the next, but that's all it's doing. And eventually there's just tons of these functions inside of here. It's a stack of middleware and it runs them in order of registration whenever a request comes in.

[00:01:21] So that means when we do a get request like /Lions, the first thing that request does is it runs through this middleware, then it runs through this middleware, then it runs through this middleware and then finally it comes here. So that's what's happening when I say app.use. So every request that comes to application will run through all these functions first before they actually go to where they ended up being registered.

[00:01:46] So that's global middleware. Again, I have a whole section that's talking about this so we'll get into it. So you can save your questions until then, but I just wanna give you some context. So and then we just have our database here, which is just an array. And I put this ID right here.

[00:02:00] If you notice when you start creating stuff you actually need an ID, because you looked at our notes for our blueprint all lines have an id.
>> Speaker 1: So I put that ID there so you can increment it every time you create a new line. It starts off as zero every time you make a new increment.

[00:02:23]
>> Speaker 1: So as far as the get, or the get all is what I like to say. Because we're getting all the lines. It's just simple as saying res.JSON lines. That one was pretty easy, you just send back all the lines. Just send back the array. Again if you look at the blue print, that's what it says.

[00:02:39] It says send back an array of objects. That's it those objects are the lines. That may or may not be in there, when we call it. But it's definitely an array and that's where the lines will be. So the next one is the get one by ID. So the way we did that, I'm just using low dash here it's a quick utility method to find any object in the lions array that has an ID property who's ID matches this ID.

[00:03:08] So req.params. Params is an object on the request that I talked about earlier that gives us access to the actual parameters on the URL by the name we define them as. Because I put ID here, the way I reference it on the request object is with the same name.

[00:03:24] So if I change this from ID to like, thing then it will be thing here, too. Yes?
>> Speaker 2: So for mine, ID came in as a string.
>> Speaker 1: Yes.
>> Speaker 2: With low dash, does it automatically parse the int? Or.
>> Speaker 1: Nope, it does not.
>> Speaker 2: Okay.
>> Speaker 1: So there's two ways around that.

[00:03:43] One, you have to parse int on find. So you'd have to put parse int right here.
>> Speaker 2: Yeah.
>> Speaker 1: Or you would only set the ID as a string. You would increment it first and then set it as a string, which is what I did.
>> Speaker 2: You would increment it first and then set it as a string.

[00:03:58]
>> Speaker 1: So like right here, so I first increment the ID which takes it from whatever number it is to one more, right? And then I set lion.id equal to ID plus the string. So I'm coercing the number to a string by adding it to a different string.
>> Speaker 2: So how does that work in the route above?

[00:04:19]
>> Speaker 1: This, so this is a get request. So when this comes back in, this ID's already a string, because I set it as a string on the post. All right so, let me walk you through it.
>> Speaker 2: You're saving all your lions as strings now.
>> Speaker 1: Yes, yeah they're all strings.

[00:04:35]
>> Speaker 2: Gotcha.
>> Speaker 1: They're never saved as a number.
>> Speaker 2: They're never saved as a number.
>> Speaker 1: I use a number for the ID, but then I immediately coerce it to a string.
>> Speaker 2: Okay, that makes sense.
>> Speaker 1: So yeah, so then I just say res.json lion, or an empty object.

[00:04:48] You don't have to put the empty object here. Whatever you want for your API. You could just put undefined or whatever.
>> Speaker 1: But, empty object is probably not the best thing to put there. Because then you have to check to see if the object is empty on the front end.

[00:05:03] So it's probably not the best thing. And then post. If you look at the blueprint that we made. Go back to it. It should create and return a new line, using the posted object as a line. So first thing that we need to do is get the reference to the new line that we're trying to create that we posted.

[00:05:25] And that's going to be on req.body and that's because I left some notes on the body part that says anything that we post or put to the server will be available via req.body and that's what the line is. It's whatever we post to the server using AJAX. Whatever that object is that's req.body.

[00:05:44] Yes.
>> Speaker 2: So my req.body came in as JSON, is that some magic that express is doing for me.
>> Speaker 1: It's a couple things, so one, I'm using on the front end I'm using the window.fetch polyfill which is a new thing inside the browser. So the browser's are getting rid of XHR requests or AJAX.

[00:06:04] They're get rid of or is it HX, they're getting rid of that, XHTML HTTP requests and are doing fetch instead. So window.fetch is the new HX.
>> Speaker 2: So it's just a different method name.
>> Speaker 1: It actually uses HX on the inside but it has a promise API.
>> Speaker 2: Okay.

[00:06:25]
>> Speaker 1: So you did like .fetch .then, it is that stuff. So that's what I'm using and that one will take an object, convert it to JSON and send it. And then request our Express does the opposite. It will take the JSON and convert it back to an object by the time it gets back to you.

[00:06:40] So by the time you access req.body, it's a JavaScript object It was created as, actually I'll show you the source code so you can see the full stuff. And app.js is just a crazy file. Look, where is it at? Where is it at?
>> Speaker 2: So its sent is type JSON.

[00:07:03]
>> Speaker 1: Yeah, here's the object. Yeah. This is the object that gets sent. It's an object, it's got a name, a prior age, a gender property on it that I got from the form and then when I send it.
>> Speaker 1: Right here I say object is JSON and I'm like stringifying it just in case even though I think window.fetch does it for you either way.

[00:07:24] It's a new standard so I didn't really know how to stringified it anyway. Yeah, I stringified it, and then express it the opposite, it parsed it, and attached it to req.body.
>> Speaker 2: If we didn't have that header, it would have been text.
>> Speaker 1: This header?
>> Speaker 2: Yeah.
>> Speaker 1: I'm not too sure how window.fetch works.

[00:07:45] It might assume that it's already JSON. It's probably smart enough to do that, I imagine. But if not, it doesn't hurt. But, yeah.
>> Speaker 1: Where was I? Yeah, here we go.
>> Speaker 1: Yeah, so we did the line on req.body because that's whatever we attach to the body. I increment the ID by one and then I set the lions ID equal to that ID but of course it's a string as we talked about earlier because as you could imagine you have a problem.

[00:08:16] If this was a number but it's actually req.params.id would actually be a string even though we set this as a number down here. Because we convert it to JSON and take it back, it's still a number. And then lodash would fail because it's like there is no thing with a ID of number one.

[00:08:35] There's something with the ID of string one, so it would break. So that's why I coerce it to a string. And then I just add the lion to our database, push it in there. And then I send the lion back because we're expecting it to come back, right because if I don't get that back, I'll show you what happens.

[00:09:01]
>> Speaker 1: So if I don't get that back we're going to have some problems. So say I come in here and I make a lion, Simba, Lion King, I give him an age, he's male, and I hit submit. You see how it posted on the page here. That's because the service sent me that back.

[00:09:23] But if it didn't send me that back, it's was like okay. Thanks. I created it. Then I would have never have been able to post this new thing on a page on create. Then I would have to ask for it. I would be like okay, dot then on side of the client, then give me the lion back.

[00:09:35] It would be an additional request, you see what I mean, I would have to do another request just to get it back. I can just get it back on the same request. That's why it's important to send back the resources you created on post, right? So, to illustrate that again.

[00:09:49] If I go in, and I got. If I was just like, res.end. Which I think we can still do in Express. If I just did that, which restarted the server. Now I come in here and I do this again,
>> Speaker 1: And I submit and, nothing. I actually got an error, unexpected end of input.

[00:10:16] So it's important to send back that resource, because if you created it, you're probably going to need it, so just send it back.