‫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?