 Hello and welcome. This is Christian Hurt. In this video series, we're going to create a really simple app to perform some AJAX operations. So this first episode, we're going to set up our ExpressJS application using Node.js. And then we'll use this to build some REST APIs, very simple code operations. And then we're going to move to the front-end and create a very simple application as well to perform AJAX to consume these APIs. So first, let's take a look at what this assignment is requiring us to do. So you can see we're going to build two parts. The first part is this Express app. The second part is we're going to use some AJAX calls. And I'm going to do two separate kinds. I mean, they're both AJAX, but one is using the traditional vanilla JavaScript XML HTTP request objects. And then we use the jQuery method as well, which is kind of very similar in a sense. This is a subtle difference between the two. And you can pick and choose which one is more likeable. Okay, so let's go down here to the, I'm going to show you the part two here, not this one, the types. All right, so here is things that we're going to build. So on the back-end, we're going to build these APIs, about one, two, three, four, five, six functions to process these information here based on the type that we receive and also at the particular endpoint or your endpoint here. And then these just show you what they are. You receive a get. This is usually for reading or making queries. A post is the insert. What add, put is update, delete, or just delete, right? Okay, so let's go ahead and let's go to Visual Studio Code and set up our application. So I'm going to create a new folder in here. I'll call this the unit four, or you can call it whatever you want. Unit four is good enough for me. I'm going to go to the terminal. And then here I'm going to initialize my application using node environment. So let me give some space here. You just do MPM init. And just accept the default here. If you don't, I'm not requiring you to do anything here. Maybe just put your name for the author. That's good enough. And just hit enter all the way. So we are good here. So we get that done. Next, we're going to install some packages. So MPM install, the express package, we need that. Also need the cores for the cross origin resource sharing. That allows us to use Ajax calls to this backend server. If you don't do that, it's not going to work using Ajax. And they also need the body dash parser. This is in a package that allows us to use to parse data from websites to the server. So you can parse XML data, HTML data, text, or in this case, we're using JSON. And then finally, I also want you to use this package called NodeMon for NodeMonitor. And what that does is when you see, when you run the app, if you don't have that up and running, then every changes you make to your source code, you have to, you know, stop the server and then rerun it again to see the new changes take effect. With the NodeMonitor, it will do that automatically for you. So you don't have to stop the program. So it's kind of handy. Okay, so let's install all those. And hopefully they run without any issues. It may take a minute or two. It depends how fast your connection is. But it shouldn't take very long. All right, so there are no problems. Just continue on. If there are any issues, usually they give some instructions and you're just going to follow that. All right, so I got everything here. The next part is just to create my application file. So the first thing is, again, if you look at package.json, it tells you that your main program starts at the main attribute or main property starting with this index.js. So this is kind of important. So whatever you call here, usually your main application starts at that point. So you want to have the same name. If you want to change it to something else like app.js, then make sure your main app is called app.js. So just call it index.js. So inside the Uniform folder, make sure I'm in there. Create a new file called index.js. And this is our main application. So I can close this over here. All right, so I'm going to close this for now. To create your application, you need to import the express package. So const express require the express package. We got that. Good to go. Next is instigate an app to use the express server. And they also want to import the course for the cross origin. And then finally the body parser. These are just variable names you can call whatever you want. I just call that because it just makes sense. But the packages are, yeah, that's important. It's body parser. These are the ones that we just installed. Now I need to create a port number. So port I'll use 8080. I'll have a server URL. I'll just call this, maybe I call it server. Add the, I used the back tick. HTTP localhost add port number port. Okay, whatever that is. In this case, it's 8080. All right. So those are pretty much just standard setups. And you can run the server right now. You can say app.listen and listen to port number. And then the second part is just anonymous function that you can put some information here. You can put the curly braces like this. Or if it's just one single line, you can just put right here in the console here. Console log or log the message saying server is running at. And then we'll put here the URL, which is the server variable. All right. So that is it for this part here. So the rest will be just API and other code. Rest of code put that here. And the first thing I want to do just is to make sure that we actually able to access the server and the URL. So we use a very simple here. This is like just to test server. I'm not doing any unit testing here. I'm just saying the test on the web page. So app.get, the root directory. And we'll just show you a very simple message, request, response. I'm using error function here. And I'm just going to send a message. So you can use like END to send a message, or you can use the write. And make sure if you do write, just make sure you end it. Or you can use the send, right, message. Or if you want to send a file, use the send file. There's a lot of options. And the last option I want to use here is called JSON. And we use that because actually I'm going to go up here and do a little more settings here. So I'm just going to put a message saying it's working. Well, okay. So right up here I should do one more setting. So we want to use that course and stuff. So I'll just say app.use. And just call the course in here, function here. What that does is it allows us to access this site, this server from any domain. This one here, it opens all your ports to every connection that it comes to. It doesn't really matter where the origin of that site comes from. And this is not a secure way to do it. We're just doing examples. So that's okay, but really you don't want to open that to the world. You want to block it. You only give access to a certain domain with certain IP address. So this is for a course, again for cross origin resource sharing. And then I also want to use the, I want to encode any of the, you know, document. So app.use and this is the body parser.url encoded and I'm going to say extended to false. Again, this is just some settings that you just have to memorize. And of course I don't remember this all the time. You just have to kind of like practice on it. And the more you use, the more it will come to your mind. If not, just put it somewhere and then separate document and then just reuse it. And then finally you want to parse the JSON data. Okay. So this is just for parsing JSON and app.use. It's also part of the body parser.json. And it just means all data coming and going will be in JSON format. Okay. That's why I'm going to use the JSON here to send this out. Even though I put that just a single string, you could put something like in JSON format like this. So it would be like, for example, message and then key value pair in JSON format or be like that. Right. And it will send out a message JSON format. And you'll see that on the browser. So let's see if this is working correctly. All right. So let's go to the terminal control J. And then down here, let's clear my console. And we're going to run the program using the node that let me know and then index.js. So you run that. Hopefully there are no errors and then you see that it's working. I'm just going to do it in control click to load the browser. And it's on a separate screen over here. I'm going to grab it. Okay. So you see that it's running. And this is the message that we receive in JSON. Right. So that's working. Okay. Again, just a little quick review on the no monitor or the no mon. Okay. Notice that if I make some changes in my code, my source code, if I put here is working. Wow. Right. So I'm going to do that. And if I go to my browser and refresh it, you see that nothing changes here. Okay. I don't see the new effect, new changes take effect until you go back to your server here and then terminate that and then run it one more time. So each changes you make, each change you make to your source code, you're not going to see the changes until you run or restart the server. And now if I go back and refresh it, you see that there it is. All right. So again, this is from happening. So save you a lot of time is to go back here and run it using the no mon. So cancel that and then type in node mon hit enter. And you should see it's running in the background. Hopefully. Yeah. I have a few issues here. So if it's just an issue, I have to fix it. But usually when you click on it, when it runs, then it's going to run your terminal, your program manager terminal. And the any changes you make here, you don't have to rerun restart the server again. It will just work. I have to fix it once I turn this video off here. Hopefully. But so far so good. We are good to go. Our server is created running. And then for the next part, we're going to come back in here and create our APIs for our server.