[BELL RINGING]
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.
So I'm going to do response.json,
and then I would say--
I could say like status.
I'm just making this up.
Success.
And then maybe I'll just repeat back what was said to me.
This is the therapy server, it listens and then
it just repeats it back to you.
So I'll say latitude, lat, longitude, lon.
So this is what I want to send back now as JavaScript.
OK.
So then in the client I need to do something to receive this.
So if I go back to index.html, what I have here
calling the fetch function is where I'm sending the data,
and Fetch returns a promise.
So I can just say dot then, and then handle the response.
Response console.log.response.
All right.
So let's take a look at this in the browser now.
I'm going to hit refresh.
It's retrieving my latitude and longitude,
it's going to send this to the server,
and then here we are, the response.
Oh, boy.
Look at this.
Lat is not defined.
Let's look at my code back on the server-- oh, yes.
These aren't a thing.
Remember, everything is in request.body.
So what I could do is say data equals--
I could put this in another variable.
And then I could just say data dot--
I could just say request.body.lat, data.lon.
OK.
There we go.
Let's try this again.
So the server should be restarting now
any time I make changes because I'm running Node Mon,
then I could just go back to the client and hit Refresh.
And there is, the response.
Now, this isn't what I was looking for.
And if you recall from when I first looked at the Fetch
function in this whole series, when Response comes back
after a Fetch call, it comes in as a data stream.
So it's up to you to specify how you want to read that, is it
text, is it a blob, is it json, and I
want to read this as JSON.
So I've got a handle that in the client.
And I could use another dot then,
but it might be nice to make this an async function, right?
This callback inside of get current position can actually
be an async function with the async keyword,
and then I can use--
wait, so I'm going to say const response equals await Fetch API
options, then const json.
I'll just maybe call it data.
There's a wait response.json, and then console log that data.
OK.
Now I didn't change anything in the server,
even if I did, Node Mon going to rerun it for me.
Now I should be able to refresh here.
Data has already been declared.
I'm reusing-- I already use data up here,
so let's just call this json.
One of the nice things about using or let
is it's going to enforce these kind of things to not by action
use the same variable.
And there it is.
Status success and latitude and longitude.
[BELL RINGING]
We have completed this feature to review.
We have now a server that hosts a static file.
So when I go and load the server into my browser,
I see index.html.
The JavaScript HTML locates the latitude and longitude,
sends that with a POST to the server, the server receives it,
console logs it out, and sends it back saying, I got it.
That handshake is complete, the data is exchanged.
Usually when I finish these videos
I like to give you a little exercise to do, so here's one.
The goal, what I'm going to do with the next video
is actually save the latitude and longitude
along with a timestamp to a database
so that I can keep this history of all of my latitude
and longitudes over time.
Two steps along the way to using a database is, number one,
just make a variable, a variable like an array.
Every time you get that latitude and longitude
save that latitude and longitude into an array.
That is persistence.
Of course, once you quit the server and restart the server,
it's lost.
So another thing you could try to do,
and this requires some detective work,
is look up the Node file system package.
Maybe you could use the node file system package
to save all of the stuff in that array to a text file.
And you can always load that text file, maybe it's JSON
format, maybe it's plain text, maybe it's even CSV.
Also, while you're doing this, whether you're
saving the latitude longitude to an array or a text file,
you might want to add a button to your HTML page
so that every time you click that button that's
when you send the latitude and longitude to the server itself.
So this is something that you can really start with,
and I will actually implement this and have two examples that
show it just storing it an array and then saving it
to a local JSON file.
But what I'm going to come back to in the next video
is a bit more direct.
I'm going to use a database node package called NeDB to actually
save to a database, and I'll talk about what a database is
and what some of the advantages are in the next video.
So see you there.
[BELL RINGING]
[MUSIC PLAYING]