All language subtitles for 007 Handling POST Requests_Downloadly.ir_en

Let's now implement a route handler

for post requests so that we can actually add a Natour

to our data set.

So just like with the doGET() request handler,

let's start by adding a new route.

So app.post this time, and remember

now we use post so the post method here,

because that's the kind of request that we want to handle.

So requests that are made with the http post verb right?

V1

and tours.

Just as we talked about in the REST API lecture,

the URL is actually exactly the same.

No matter if we want to get all the tours,

or if we want to create a new tour,

the URL is exactly the same.

Then only thing that changes is the http method

that we used for doing these requests.

To get all the tours and post to create a new tour,

then in here, our typical call-back function

where we get access to the request

and to the respond object so that we can get some data

from the request and send back an appropriate response.

Now remember that with a post request,

we can send data from the client to the server, right?

This data is then ideally available on the request.

The request object again is what holds all the data,

all the information, about the request that was done.

If that request contains some data that was sent,

that data should be on the request, right?

Now out of the box, Express does not put that body data

on the request, and in order to have that data available,

we have to use something called middleware.

We are gonna talk in great detail about middleware

in a couple of lectures, but for now,

in order to make this work, we need to include

a simple middleware here at the top of the file.

So actually, right here.

What we need to do, is to say app.use

then express

.json

Okay, and that's it.

So again, this [express.json] here is middleware.

And middleware is basically a function that can modify

the incoming request data.

It's called middleware because it stands between,

so in the middle of the request and the response.

It's just a step that the request goes through

while it's being processed.

And the step the requests go through, in this example

is simply that the data from the body is added to it.

So it's added to the request object

by using this middleware.

We use app.use in order to use middleware like this.

And again, we will talk a lot more about middleware

a bit later in this section.

For now, just know that this is how we use middleware.

All the details will then follow later.

So for now, just to start, I want to actually show you

the data from the body in the console,

just to verify that it actually works, so req.body.

Again, body is the property that is gonna be available

on the request, because we used that middleware

a couple of moments ago.

So we want to log[req.body] to the console

and then we also need to send back a response.

So res.send and for now just some place holder here.

Just 'Done' okay.

So we always need to send back something

in order to finish the so-called request/response cycle,

which again we're gonna learn a bit more about later

in this section.

So let's now test this out, and create a new request

for the post.

Now here in postman, we can do something really nice

which is to save all of these requests.

I'm gonna start by creating a new collection,

which I will call Natours.

New collection.

Now I will save this request inside that collection.

So this one is Get all the Tours.

Put it into Natours, and save.

So now we have our Get requests right here.

Well let's now copy this one right here,

create a new one.

So this one is a post request.

Before doing it, I will actually also save it right

to this collection.

So Create New Tour.

Here on the left side, we now have both of our requests.

Let's now actually specify our body here,

so the data that we basically want to send to the server.

We come here to Body, and there are different ways

of doing it now, but the easiest one is to simply say,

Raw, and then Application JSON.

All we have to do here is to basically specify some JSON,

and that will then get transmitted to the server.

So the first thing we want to specify

is the name of the Tour, and you remember that in JSON,

everything has to be in quotes and actually double quotes,

not just any quotes.

Let me just call this one a Test Tour, and let's take a look

at what else we have in the tour data.

So we have the name, we have the duration,

and let's just put also the difficulty.

So I'm not going to specify all of these

because that takes way too much time.

Let's just say the duration is 10 days,

and the difficulty

is easy.

That as our body will be transmitted to the server.

So that's tested out now, hitting send

and here we get back our response, which is done, remember.

Here is the response that we sent, so done.

And you see that down here in our console,

we now have an object which is basically the JSON

that we sent in our body, right?

So perfect, it works!

It is no longer JSON, as you can see.

It is truly a JavaScript object.

Just to show you that we really needed middleware,

let's comment this one out.

Send it again.

Now no longer have the request.body, right?

That's why it's undefined now, 'cause it no longer exists.

Give it a save, send our request again,

and so now it's back.

We have our post route all set up, it's working now

and we also get access to the body,

and so what we want to do now is to actually persist

that data into this tour simple JSON file.

We're actually gonna modify this file, so that the data

is saved to our fictional database here.

This JSON file right now kind of works

as our fictional database.

So let's now take care of that.

I'm gonna go ahead and comment this one out.

So let's get started.

The first thing we need to do is to figure out the id

of the new object.

Remember, again in the lecture about REST API's,

is that when we create a new object,

we never specify the id of the object.

The database usually takes care of that.

A new object usually automatically gets it's new id.

Well in this case, we do not have any database,

and so what we're gonna do is to simply take the id

of the last object and then add +1 to that.

Let's do that very quickly,

and that's just basic JavaScript.

So newId it is tours, right?

Remember that tours, we already have the data

in this tours variable.

So that's an array of all the tour objects,

and so we want to get the last one,

which is tours.length - 1,

then the id property of that and we add + 1.

So that is the new id.

Next up, we create a new tour,

and that tour will basically be the body that we send

plus the new id that we just created.

So we can use object.assign, which basically allows us

to create a new object by merging two existing objects

together.

So the first object is gonna be

id=newId,

and then we want

request.body.

We could also had done req.body.id=newId,

but I did not want to mutate the original body object.

I just left it like this.

That is the new tour, and now what we want to do

is to push this tour into the tour array, right?

So tours, is the array of the nine tours that we have

at this point.

We say push and push the new tour in there.

That is the array which now has the new tour in it,

but of course now we have to persist that into the file.

That again is quite easy for you at this point,

so use fs.write file.

So which one should we use?

writeFile or writeFileSync?

The answer for that is very simple.

We are inside of a call-back function,

that is gonna run in the event loop.

We can never, ever block the event loop.

What we're gonna do is to use writeFile

and not to Sync in this one.

We want to pass in a call-back function

that is gonna be processed in the background

and as soon as it's ready,

it's gonna put its event in one of the event loop queue,

which is then gonna be handled

as soon as the event loop passes that phase.

Remember that from the Event Loop lecture?

Anyway, let's get the file name from up here,

because we will really override this file

so that when we restart this server,

it's then gonna be there.

So where-

right here.

So that is the file that where we want to write to.

The data that we want to write, which is tours,

and then our call-back function,

which in this case only has the error.

Here I just noticed that we need to also stringify

this object, right?

We want json in this JSON file,

and this right now is just a plain, normal JavaScript object

and so we need to convert that.

But that's again simple, already did that.

JSON.stringify

of the object.

What do we want to do as soon as the file is written?

Well, what we usually do is

to send the newly created object as the response.

Let's do that.

So response, and then as always, we start by

specifying the status code.

In this case, it's not gonna be a 200, but a 201.

So 201 which means created.

200 stands for okay, 201 stands for created,

which is exactly what happened here.

We created a new resource on a server.

So JSON, and it keeps adding this message here.

Status is again, success.

I'm not using the results property here, that we had before,

because now I'm only sending back one result.

Data is our envelope here.

Tour is new tour.

That's it!

Give it a save here, and so that format it,

or code a little bit.

Let's add some more space here.

I think we're ready to now give it a try.

We can actually create a new tour, using this data here.

So adjust this Test Tour,

and with this data, and let's wait for it.

What happened here?

Let's see, ah okay.

We have a problem that we sent a response twice basically.

So we sent a response with JSON,

and then again with .send.

That's not allowed.

That's actually why we get this error here.

So it's actually nice that it happened here,

so that you know what this standard error here means.

HTTP_HEADERS_SENT cannot set headers after they are sent

to the client.

That happens when you try to send two responses.

We need to get rid of that.

Yeah, that was the only error that we had.

That should now fix it.

Give it a try.

And indeed, here we go.

So we have our id of 10, which our code created for us,

and then the entire tour which is exactly the data

that we sent as a body in our request.

Now the thing is, that when we do get all tours here,

it will not yet show up.

If we go down here,

actually it is already here.

We have the one from before, so when we had that error,

it actually also created this tour here.

Then of course, the tour that we created with the id of 10.

So this tour here is exactly this one

that was created right now.

If we do now, Test Tour 2, with the duration of just 5.

Let's give this one a try,

and if I do get all tours, then that shows up here as well.

I said in the beginning that it wouldn't work,

so that it wouldn't show up right away,

because this only works if we restart the server.

This file,

the tour-simple.json file

where our tours are coming from,

is only read at the beginning when we start the server.

Now the thing is that each time we save something

to this JSON file, it will also reload the server.

Let me prove that to you, so if I hit now save,

then look what happens down here.

So I save it, and so you see that down here

it restarted the server.

It also formatted the code, because of prettier.

But what matters here, is that this code updated.

That's why each time we save something here

with our API, it will then immediately reload the server

and will reload the content from the file into the tours,

and we can then read that right away.

That's why we have access immediately

to all the newly created tours.

Make sense?

Well if not, please feel free to just ask your questions,

and of course Q&A section, right?