Welcome back.

I don't know what you did since the last video,

but I went and got a haircut.

Thank you.

In this video, I am going to do something important,

a key feature here.

What I want to do is take data from the client, the latitude

and longitude, and send it to the server

and have the server receive it.

Ultimately, the point of this is for the server

to eventually save that to a database.

But I'm not there yet.

I just want to say, the client executes its own client side

JavaScript, gets the latitude and longitude,

and sends that data to the server and the server

can just console log it.

I'm going to need to look at three things

in order to do this, I'm going to need

to look at a concept known as a routing,

how do I set up a route in express.

This is the place, the end point for the API, the address

at which I will send the data to and later also make

a request to receive some data.

I need to look at adding JSON parsing to express.

I need the route when it receives

data to understand that data as JSON

and make it readable in my code.

And then I also need to look at adapting the fetch function

to specify a POST request, a request that is posting data

or sending data to the server.

Let's start with the route.

So I want to set up a route on my server.

So the way that I do that is by specifying

this particular route, will either be a Get or a POST.

In this case I expect a POST request,

so I am going to go and say app.post.

Now, once I have a post, I want to specify both the address

where I want to receive that POST, as well as a callback

function where I'm going to look at the information coming in

and send a response back.

So let's set up that address, let's

set up the endpoint for this particular route.

Where I want to receive the post.

And I could call it anything I want, like Unicorn, Cupcake,

Rainbow.

Let's call it Rainbow.

All right, I'll give it a name that's maybe more appropriate.

I'm going to call it API.

API because what I'm really doing here

is setting up an application programming interface.

This is my API for clients to send data to me.

Next, I'm going to set up a callback, request response,

and I'm using the ES6, JavaScript ES6 arrow syntax.

Just sort of a nice, clean way of putting this in here.

So the function is here and it has two arguments, request

and response.

The request variable hold everything

that's contained within that request, all the data that's

being sent, any information I need

to know about that particular client that's

sending the information.

The response is a variable that I can use to send things back

to the client.

So I'm going to need ultimately to do stuff there,

but for right now, I'm just going

to say console.log request, and I'm just

going to leave it like that because let's at least see

if we can get this working and see if we can see

something console log there.

The next step is to have my client send something

to this particular endpoint with a post.

I can now move over to the client code

and setup the post itself using Fetch.

So I want to fetch my post over to slash API endpoint.

So the client code, remember, this

is confusing, server and index.js, client

and index.html.

I'm going to move over here.

This, what I'll do is I'll choose

to send this latitude and longitude as soon as I've

received it.

This is what I did in the previous video.

And so now, what I can do is I'll setup--

I'm just going to make up an object called Data,

and what I want to send is the latitude and longitude

inside of an object.

So that's what I want to send.

So you might think all I need to do if I were just

doing a regular Fetch, right?

I just wanted to fetch something, that's

a Get, regular Get request like I did in previous videos,

I would then just say this.

Hey, fetch me the stuff from slash API,

and I might actually do that a little later when I just

do a Get request and get the data that's in the database.

But right now, what I want to do is send a POST.

In order to send a POST, I need a second argument here,

which is just a JavaScript object.

I'm going to call it options, and that way I

can set it up separately as a variable and kind

of examine it more closely.

The first property that I need to put in options

is the method that I'm using.

And that method is a POST.

Now, there's a lot of information

that you can put here under Options.

And if you want to look at all the possibilities,

I refer you back to the MDN web docs.

There's a nice page here about fetch

and we can kind of see all the stuff.

OK, what mode and cash and credentials,

but really what I need, what I want, the key thing that I want

is body.

So the body of the POST request is where I'm

packaging up all of my data.

And you can see here, even though there

are different ways to send the data, what I want to do

is send it as a string text.

I want to stringify, take the JavaScript object data

and make it into a JSON string.

So I want exactly this right here.

And there's one other piece that's important.

I am specifically sending data in JSON format.

So it's useful to specify that in something called a header.

A header is something that can be packaged along with any POST

or Get request that's moving between client and server,

and it's a way of adding some additional meta information.

You can read more about this also on the Mozilla docs.

Headers have a name, a colon, and a value.

And so the one that I want to use here,

I can actually just go and grab it

from here, which is this content type application JSON.

I'm going to grab this and I'm also

going to put this here in my code.

So even though there's more that I could put,

I the basic pieces that I need are,

hey, I want this data to get sent as JSON.

I want to tell you that it's going to be JSON

and I want to post it to the API.

So now we're good, right?

So I get the location data, I put it

into a JavaScript object, I package it as a POST,

and I send it to my endpoint.

And in the server, I receive a console log.

Let's see what happens.

So I'm going to say node index.js to run the server.

I'm going to go back to the browser,

I'm going to refresh my page, I probably

should put some console logging in the client to see--

but presumably now, it's sensing the server.

I don't see an error here, I go back to the server--

whoa, so this is good news.

It console-logged something.

Oh, as you might have noticed, there's a ton of information

as I scroll through this, crazily.

While there might be points at which I

need to examine certain aspects of all of the metadata that's

part of the request, all I really want to look at

is the body.

So let me now say console log request.body.

Now, one thing I should mention, by the way,

is notice how I have to re-run the server

every single time I change it, there is a utility

that I could use called Node Mon or node monitor,

and I could install it as a global node module.

[MUSIC PLAYING]

And if I choose to use it, I can say now, Node Mon for node

monitor index.js.

And anytime I change the code it's going to rewrite the--

sorry, anytime I change the code,

it's going to rerun the server.

So, for example, I'm going to go here

and say, console.log, I got a request.

And over here, you'll notice it restarted the server.

Sometimes you could run into trouble with this

if you're doing a lot of things at once

and I often prefer to manually stop and start the server.

But for right now, this might be useful.

So let me leave that there for right now.

Then I'm going to go over here and hit refresh.

And presumably it sent the data--

oh, it must have sent the data.

Presumably it sent the data.

I'll go back to the server.

I got a request.

Undefined, undefined.

Why is it undefined?

I forgot one of the steps that I told you about.

So I did two of them, right?

I set up my route called API to receive the request.

I also modified the fetch function

to send data as a POST.

What I did not do was add to my server

the ability to parse any incoming data as JSON.

The way to do that is with the express function express.json.

So, similarly to how I used express.static to say,

I want to host--

I want this server to host static files,

I'm going to say express.json because I

want this server to be able to understand

incoming data as JSON.

So In the code I want to do just like I did up

here, app.use express.static, I'm going

to say app.use express.json.

And then I can actually put some options in here

to control or limit what is possible in terms

of receiving data.

So all of that is documented here on the Express website.

Let's add just as an example this limit.

So Limit allows me to specify the maximum size of anybody

that's coming in.

So I'll say a limit.

Let's just say one megabyte as a kind of starting point.

So this protects against flooding my server

with huge amounts of data, potentially.

There's more to protecting your server than just that,

but we're seeing an inkling of this here.

All right.

So now we can see Node Mon has restarted

my server a bunch of times and I should

be able to go back to the webpage and hit Refresh.

And it's going to get the latitude and longitude,

and now I should see the server--

ha-ha, I got a request and I got the latitude and longitude.

So the server has successfully received the data.

This is what I wanted to do in this video.

So in a way, I'm done.

Oh, that's exciting.

What I've actually done here is pretty

terrible in that it is required that you complete a request.

So if a Get request or a POST request

is coming into the server, I need

to do something to complete it.

The nicest thing to do if I'm trying to be polite here,

which it's good for your server to be polite and send

a response back.

But at a minimum, I can just say response.end.

So this is required to do something.

What I think that I would like to do which makes more sense

is say response.json, which is a function that will send data.

I can also say response.send for just a short message

as a string, but I want to send maybe

an object back with some data in it.