‫Welcome back, so now the time has come
‫to finally start building our API.
‫So this lecture is really gonna be the first step
‫in a long journey of building this main course project.
‫And let me actually start by showing you again
‫the project that we're talking about.
‫So this is the Natours project.
‫It's basically an application
‫where we can see tours and also book them.
‫We can create user accounts, we can log in,
‫and really do all kinds of different stuff.
‫So for example, we can take a look at the tour here.
‫It has all these details, this map,
‫it has reviews from other users that are using the platform,
‫and we can even book the tour then.
‫We would have to log in before we are able to book
‫and I'm not gonna do that now
‫because it's just a very simple demo here,
‫so I just wanted to show you this graphical interface,
‫basically, of the project that we are building.
‫Now this part that you're seeing here
‫is actually the part that we're gonna build
‫by the end of the course,
‫because this first part of the course
‫is to build an API using the exact same data
‫that you see here on this dynamic website.
‫So again, we start by building the API
‫and then the dynamically rendered website,
‫and I choose to do it like this
‫because this way, we don't have to mix
‫all this different content all together,
‫so in order to learn Express and Mongodb and Mongoose,
‫I find it much easier to just work with data
‫and not to worry about the graphical stuff,
‫even though that's maybe a bit more exciting
‫because you get to see the real results
‫in this beautiful interface.
‫But to learn, it's better to again,
‫simply just deal with the data itself
‫and worry about making it beautiful later.
‫Okay, so let me actually show you the API as well.
‫And for that, of course, I use Postman.
‫Create a new tab here.
‫And so the final API we accessed at
‫slash API, slash version one,
‫and then for example, we can take a look at tours.
‫So we use the get request
‫and then we get all of these different tours.
‫Right, so again, the exact same tours
‫that you saw on the graphical interface,
‫so on the rendered website before.
‫Okay, we can then also go ahead, take the ID,
‫and request only that ID, so on that tour for that ID,
‫and so you see that now we only have this one here
‫with even more data than we had before.
‫So we have start locations here,
‫we have tour guides which in turn has other ID's,
‫we have locations, we have reviews,
‫so all of that we have in a tour.
‫So you see, it's really advanced stuff
‫and so we actually have more than just tours.
‫We have users but we will not be able to access them
‫because we need to be authenticated.
‫So you're not logged in and so right now,
‫we would need to log into our app.
‫Now at this point, I'm gonna stop showing you
‫all the features because we will build this
‫throughout the course,
‫just to show you that there is really a lot going on here
‫and so there is a lot of material
‫and of stuff to learn ahead of you,
‫so I hope you're excited for that,
‫and that you want to take the first step with me right now.
‫So let's go back and implement the tours route
‫or starting to implement it, at least.
‫Okay, so this piece of code here, we no longer need,
‫and I'm not deleting it, just commenting it up.
‫So again, we use app.get
‫because in this lecture, we're gonna start
‫by just handling the get requests
‫and the URL will be slash API and tours.
‫So I'm not using v1,
‫well, I could use v1 right away,
‫so it's a good practice to specify the API version.
‫Okay, so that in case you want
‫to do some changes to your API,
‫you can do that but simply then on v2
‫without breaking everyone who is still using v1.
‫Okay, so basically, you can branch off,
‫create a new version of your API,
‫but all users can then still be using it.
‫If we did it just like this
‫and you did changes then to API slash tours,
‫then the users who started to use it
‫before you did the change would run into some problem.
‫Okay, so we always should specify the version of the API.
‫We could also do it in the subdomain,
‫but it's easier to just simply include it in the URL.
‫Okay, and then of course, our route handler.
‫So this is how we usually call this function.
‫We call it the route handler.
‫Okay, so just to get familiar with these Express terms.
‫Now what do we want to do when someone hits this route?
‫Well, we want to simply send back all the tours.
‫So that is similar to what we just learned
‫in the last lecture, right.
‫We have this URL or this endpoint, slash tours,
‫and that will usually send back all of the data
‫for that resource, right.
‫So, also tours is the resource now,
‫and I'm starting with tours here
‫because it's, I would say, the most obvious one
‫since we're building a website or a Web application
‫for selling tours, right.
‫Now where do we actually get these tours
‫that we wanna send back to the client?
‫Well, it's here in the dev-data folder,
‫then data, and then tours-simple.
‫So it's this JSON file, and it's very similar
‫to the one that we had for the note farm,
‫so again, it's an array of JSON objects
‫which then has a bunch of data about each of the tours.
‫And so yeah, that's the data
‫that we're gonna be sending to the client.
‫Now before we can send the data,
‫we actually need to first read it
‫and so again, we don't do it inside the route handler,
‫but we do it before.
‫Okay, and just like I explained in the previous project,
‫we can do that because the top-level code
‫is only executed once, which is right after
‫the application startup, right.
‫And now that you know all about the event loop,
‫it makes even more sense for you at this point, right.
‫So only this callback function, for example here,
‫will run inside the event loop
‫and so in here, we cannot have any block and code.
‫But outside, it is no problem at all.
‫So that simply reads the tours into a variable
‫outside of all of this in a synchronous way.
‫So fs, and for that, of course,
‫we need to require the module actually,
‫and so we do that here at the top.
‫And I like to always start with the core modules
‫and so I do that at the first one.
‫So require, fs,
‫so fs.readFileSync, it's already here.
‫And now, let's use the dirname.
‫And so again, at this point,
‫you already know why we actually have access
‫to this variable here, so dirname is the folder
‫where the current script is located,
‫and that is this main folder.
‫So from here, we need to move into dev-data,
‫then into data, and then in there,
‫we have tours-simple.json.
‫Okay, and now let's also, right in this step here,
‫parse the result of this.
‫So JSON, actually the uppercase one,
‫so JSON.parse, so that the JSON that we have in here
‫will automatically be converted to a Javascript object
‫or an array of Javascript objects, actually.
‫So saving it and so this will reformat it
‫and so now all we have to do
‫is to really send it back to the client,
‫so res.json,
‫and let me actually specify the status code here,
‫even if 200 is the standard,
‫I like to do it in each and every single response.
‫All right, so JSON, and what do we want to send back now?
‫Not message, that's for sure.
‫So what do we wanna send back?
‫Well, remember that we were gonna use
‫the Jsend JSON formatting standard.
‫Okay, and so in there, we specify a status,
‫and so status, and that can either be
‫success, fail, or error, okay.
‫So success is obvious.
‫It's when we have a 200 code or a 201
‫or really just any code that starts with 200.
‫Then we have the fail, which is an error at the client,
‫and then we also have error,
‫when there was an error at the server.
‫All right, but we are gonna use these a bit later.
‫Anyway, we also have then the data property
‫which is, as I mentioned,
‫the so-called envelope for our data.
‫So we specify the data property
‫and that data will then in turn have an object
‫which then contains the data,
‫so the response step we actually wanna send.
‫And in this case, that is tours.
‫So tours and then tours,
‫which is the same name in this case.
‫So with ES6, we actually do not need to specify
‫the key and the value if they have the same name,
‫so we could just write tours,
‫but I just wanted to specify it here
‫that I wrote tours here because, well,
‫that is the name of the resource and of the endpoint,
‫and so that's why, inside of data,
‫I then send back an object that has the tour property.
‫Okay, so if this was called x, for example,
‫then I would call this one here x,
‫but here, I would still need to say tours, okay.
‫I'm putting it back to tours because that makes more sense
‫and now I can delete this here and just leave it like this.
‫And that is actually all we have to do.
‫So we read our data and then we formatted our response
‫like this here, using the JSend data specification.
‫Okay, so very simple stuff.
‫Let's now just test it out
‫and we now have to change, of course, the URL,
‫so we have slash API, slash version one, and tours.
‫So that is our URL.
‫We still do a get request,
‫and so that's the one that we're responding to in code,
‫so remember, using this get method,
‫and so hit Send, and indeed, here we go.
‫So here, we have all our tours.
‫So, awesome, that's really cool.
‫Really, really nice work.
‫Now just to finish, something else that I like to do
‫usually when we are sending multiple responses
‫is to include a field called results
‫with the number of results that we are sending.
‫Okay, and this is not really part
‫of the JSend specification,
‫but I still really like to do it
‫because that makes it very easy for the client
‫to get very quick information
‫about the data it is receiving.
‫So we know that tours is an array
‫and so all we have to do is to say tours.length.
‫Okay, and this actually only makes sense
‫whenever we are sending an array, so multiple objects.
‫If we only were sending one tour,
‫then it wouldn't make sense to have results
‫such as one, right,
‫and so I only do this whenever we're sending an array
‫with multiple objects in there.
‫So let's do that again.
‫And indeed, we have nine results,
‫then we have the data property, then in there, tours,
‫to specify that we're sending tours,
‫and then an array with all the nine tours in there.
‫So you can see another object
‫and another one and another one,
‫and all the way to the end,
‫so that is the very first step to our API.
‫Of course, at this point, it's like a file-based API,
‫so we're reading this data from an API,
‫but later, of course, we're gonna store this data
‫in a database and then read it from there.
‫But anyway, this already looks kind of for real
‫and that for sure makes me feel really good,
‫and I hope it makes you feel good as well.
‫So that's it for the get request.
‫Next up, we're gonna take care of the post request
‫so that we can actually add a new tour to our data.