Instructor: Welcome back.
So I hope that you're enjoying this section so far,
and enjoying working with Node.js.
So let's now move on in our project
and build an extremely simple web API.
Now, to start, what actually is an API?
Well, the long answer, you're gonna learn
in one of the next sections, but for now, the short answer,
at least in this context of web APIs, basically,
an API is a service from which we can request some data,
so in this case, the data that the user wants to request
is data about the products that we are offering
in this node farm, so in this project.
So I have here this dev-data folder, and in there,
I have a JSON file, and JSON, in case you don't know,
is a very simple text format
that looks a lot like JavaScript object,
so it looks like this, and we can have arrays,
which we actually have, so we have one big array,
which then contains these five objects,
and each object then has the ID, product name, image,
and so on and so forth.
Now each of these has to be a string to each of the keys,
and then we have the value.
So basically, this data here is what our API
will send to the client when requested.
So we will have yet another route here.
So right here, else if the path name equals /api.
And for now, as a placeholder, we will simply send back
API just like this.
So what we want to do now is to actually read the data
from this file here, then parse JSON into JavaScript,
and then send back that result to the client.
So something very simple and so let's get to work.
So the first approach of doing this
is to come into this route and then read the file in here
using the file read function, right?
So let's start by doing that.
So fs., and it's actually readFile, not fileRead,
so readFile, and then the name of the file.
Now, remember how I told you earlier
that this is not the only way of locating
our file in the file system.
Let's for now actually use it still,
but after we have it written here,
I will show you another way.
So, a note, this dot here actually refers to the directory
from which we run the node command in the terminal.
So, again, this dot here right now
represents this current folder here
because that is where we actually run the node command,
so in this 1-node-farm folder,
which is our current working directory anyway in this case,
but we could have run the node command somewhere else,
and then the dot would mean something else.
So, for example, we could perfectly find, go to the desktop
and run node there, and then specify the whole path
to index.js, but we could do that, but then in this case,
the dot would mean the desktop, so if we started the script
from the desktop, then this here,
this dot, would mean the desktop,
and so that is not always ideal, and therefore,
there is a better way.
So all Node.js scripts, they get access
to a variable called dirname, and that variable
always translates to the directory in which the script
that we're currently executing is located.
So in this case, it's actually the same place
because index.js is also in this node farm folder,
but again, for the reasons that I mentioned before,
it is many times a better practice
to use the dirname variable, so let's do that,
and for that, we create a template string,
and then we use the variable,
so it is __dirname, so which stands for directory name.
And so usually, we do it like this.
Now there is an exception to this rule,
which is the require function.
So when requiring modules,
we can actually require our own modules,
and we're going to do that a bit later, like in the next,
or one of the two next videos, and in there,
the dot actually also means the current working directory
and not the place we're executing the script from.
So just keep in mind that the require function
is an exception to this rule, but usually,
the dot is where the script is running,
and __dirname is where the current file is located.
Right, now moving on let's specify the utf-8 file encoding,
and then our callback function, which is error first,
remember, and so we now have access to this data.
Now the data is in JSON, and so in JavaScript,
we have something built in which is called JSON.parse.
And so this will take the JSON code,
which is actually a string,
and will then automatically turn it into JavaScript,
so a JavaScript object or array in this case.
Let's call this one productData,
and then also quickly take a look at it.
So in the console in this case.
So, restarting the server, and now, don't forget
to hit the /api route, and oh, what's happening here?
Oh, we did actually restart the server.
And so now we get a response API,
and let's now take a look here, actually,
at the product data object.
So this is just a nice object,
with all the data that we had in this data.json file.
All right, now the next step is to then actually send back
this data as the response.
Now this response.end method here
actually needs to send back a string and not an object here.
And so in fact, what we want to send back
is the data directly, so data is a string
that we then transformed into an object using JSON.parse,
but for now, we actually would not have need to do that,
but I did it anyway because we will need this later
when we start to build our HTML templates.
So that is when we're gonna need this data
in a JavaScript format.
For now, we just want to send back the actual string
that we receive.
Now before we can do that, we actually need to specify
so we need to tell the browser
that we're sending back JSON, so just like before,
where we set the Content-type to text/html,
we now need to tell a browser that we're sending JSON.
So we say res.writeHead just like before,
and now we're using the status code 200,
which stands for okay, and then the object of the headers.
In this case, it's just gonna be one, so Content-type,
and when we send JSON, we need to say application/json.
So for HTML, it's text/html,
for JSON, it's application/json,
and let's now take a look at that.
Reload server here very quick, and indeed,
here we have our API sending back all the data
about our five products.
So awesome, that's great, and it's great,
but it's actually not perfect,
because it's not really 100% efficient,
and that is because each time that someone now hits
this /api route, the file will have to be read
and then sent back.
Instead, what we can do is to just read the file once
in the beginning, and then each time someone hits
this route, simply send back the data
without having to read it each time that a user requested.
Does that make sense?
Well, what I'm gonna do is to put this out here.
Okay, and of course, I don't need all of this,
so this is not here, and this is not here,
and actually, it will be kind of different,
and that is because we will now actually use
the synchronous version, and I know what you're thinking,
which is that the synchronous version
blocks the code execution, right?
And while that is true, in this case,
it is not a problem at all,
and that's because the top level code
actually only gets executed once right in the beginning.
Only this callback function, for example, here,
the createServer one, so this function here,
this is what gets executed each time
that there is a new request, but not a code that's out here.
The code that is outside the callback functions,
so the so-called top level code, is only ever executed
once we start the program, and so in that situation,
it doesn't matter at all if it blocks the execution,
because again, it happens only once
and only when the code actually starts, right?
Makes sense?
And so we're gonna use the sync version now
because it's actually easier to then handle that data,
because that simply puts the data into a variable
that we cannot use right away.
So don't worry about the fact that this function is blocking
because, again, it is in the top level code
and is only executed once.
The secret here is simply to know which code
is only executed once and only at the beginning,
and which code gets executed over and over again,
and is therefore problematic when blocking the event loop.
And of course, throughout the rest
of this big, big course, you will learn that.
So you will learn everything about the event loop,
and which code is blocking and which one not, and why,
and so this is just the first time I'm mentioning it,
but it's not gonna be the last time.
You will hear me saying the same stuff over and over again.
So, just calling this one data, and then of course,
we don't need any of this.
Let's just move this here out, and that's it.
So before anything happens, it will read the data
from the JSON file into data.
It will then also parse that into an object.
Let's call it dataObject here,
and so what we're gonna do here is to not read this file
each time that there is a request, and instead,
simply send back the data that we have now
in our top-level code.
So this data here now comes from here because, of course,
this code in the callback function has access
to the top-level code because of the scope chain, right?
Canceling, running again, and just to prove you
that it still works, and it does.
So perfect, and that's better, that's more efficient,
oh, and why did I close this?
All right, let's just open it up again very quick.
So here we go.
So that is our very simple API, which now allows the user
to simply request all the data about our application
with one single API call, basically.
So we added another route here, /api,
then we read the file synchronously,
put it into this object, and then simply sent back
that object as a response, but before that,
specifying that we're sending back application/json,
so that the browser knows exactly what to expect,
and in the next couple of videos,
we will actually start building the user interface,
so that's the most exciting part, right?