Original subtitles

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?