 Let's take a look at the application you are going to create in this course. So this is what the interface looks like. When it is completed, you'll be able to send messages and communicate with your friends and family just by sending them the link to the app that will allow you to communicate. So basically just type in a name here and put whatever message you want and click send. And the messages will appear here and the messages are persistent. So even when you refresh the browser, they'll still be there. However, you can delete the messages if they become too crowded in this area here. You can delete them from the back end MongoDB database. Hello, in this video, we are going to create the project folder and the package.json file. What is the package.json file? The package.json file is like a manifest file that keeps a list of the packages that your project depends on. So the package.json also helps manage all the NPM packages installed locally. With the package.json, you can specify the versions of a package. You can also create the package.json file manually or interactively using the NPM dash in it. So let's create a project directory or folder. I'm going to just right click on my desktop and do new folder. And I'm going to call this let's chat, but feel free to call yours anything you want. But I'm calling mine let's chat. Next thing I want to do is open up this folder inside my text editor. I am using Visual Studio Code for this project, but feel free to use whatever text editor you are comfortable with. So I'm going to click to launch Visual Studio Code. Once Visual Studio Code loads up, I'm going to just exit the welcome screen and go file, open and then browse to the location of the folder I've just created. So this is a folder I've just created. So I've just browsed to it and I'll click on the icon here. You can see here the folder has shown up. So I'm just going to X out of this welcome screen so we can see the folder properly. So that's my directory there. The next thing I want to do is create the package.json file. You can do this in your terminal or your command line. If you are using Visual Studio Code, you should have an integrated terminal inside Visual Studio Code. I'm going to use the integrated terminal by clicking on view and clicking integrated terminal. And the advantage of using the integrated terminal is that it points directly to the folder. You can see here it's already inserted the path. So with a package.json file, you can create it manually. That can be a bit time consuming, or you can do it interactively. When you do it interactively, you type in npm dash in it. So you do a space as npm dash in it. If you do it this way, it will interactively prompt you for answers to questions. But if you don't want to be prompted for the answers to the questions, if you want to accept the default, then you can do dash dash yes, and it will automatically accept answers for the default. It wouldn't prompt you. So I'm going to use the yes, which it will just accept all the default answers. So I'm going to press enter and that will generate a package.json file. You can see here it's created package.json file here. This is what it's created. Normally, if you did not use the dash dash yes switch, it will ask me interactively. For example, when it says description, I will have to type in the description before it prompts to the next one. But these I can go in and manually insert whatever information. For example, I can insert a description here later. There's an option for keywords. I can put in some keywords in between this array brackets here for author. I can insert my name there later if I want to do that. So when you use the dash dash switch with the MPM in it, it will just provide the default. But if you don't use the switch, then it gives you the option to interactively enter the values that it prompts you for. So that's it for this video. We've created the project folder. We've also created the package.json file. Thanks for watching. Bye for now. Hello and welcome in this video. I'll be showing you how to install Express.js. What is Express? Express.js basically is a minimal and flexible node.js web application framework. Basically it provides a robust set of features for web and mobile applications. What is a framework? A framework generally provides some base functionality which you can extend your applications to make it more complex. So you can look at a framework as a scaffolding that you can build your applications around. So there are different types of frameworks for all sorts of things. A framework also is an environment where you are giving a set of tools which could include libraries, configuration files and so on to work with. So a lot of the tools are already in the framework. You just have to utilize them. So let's go back to the Express.js website at this link here which is Express.js.com. So we can take a look at the description they have on the website. So this is the Express.js website Express.js.com tells you a lot about the Express.js tells you it's fast, unopinionated, minimalist. So read through. This is what I had already described. I took the description from the website here and it also enables you to create robust APIs. APIs basically are intermediary software that allows two applications to talk to each other. So there's also some performance benefits of using Express. And here there are some many popular frameworks based on Express. So if you click on that, it tells you give you a list of frameworks based on Express. The way you install Express.js, you have to use node.js. So this basically is the syntax or the way you install it. If you use the dash dash save or that does it saves Express to your package.json dependency. So let's go ahead and install that for our install Express. I want us to take a look at the content of the package.json file. So if I click on that, if you notice here, there is nothing listed here on that dependencies. That would happen once I've installed the Express. It will now create a dependency section here and inside that it will list all the dependencies that the application will rely on. Install Express, you need to do that in the terminal. If you are not using visual studio code like me, you can do that in your command line. If you're using a Mac, use it on a terminal. If you're on a Windows, you can do that in your command prompt. So I'm going to use the inbuilt terminal for this visual studio code by clicking on review, clicking on integrated terminal. One advantage of using this visual studio code, it automatically maps to the path that I need. So to create or to install Express, I just type in npm space install space dash dash save this dash dash save will create a dependency file and then list all the dependencies under there. So I just type in Express. What that means is that it will now save Express. As a dependency in the package.json file. So I'll press enter and that should go ahead and install Express. So it's going to go off to the Express repository and pull down all the relevant files. So you can see he's doing that now. So I give it a few minutes to finish that installation. So the installation has finished. You can see here says added 49 packages from 47 contributors. So now if I close this terminal and go to my package, it also inserted this file here called package.lock.json. Okay, so that's inserted automatically. And if I look into my package.json file, you can see on that dependencies, it's created a file called dependency and it's added Express under that dependency. And this is the latest version of Express. All right. So anytime you install an npm package with a dash dash save, that means it will save that package as a dependency in package.json file. So it also created this node module. So if you look inside this node modules, basically shows all the dependencies that is bundled with the Express. If you scroll down, you can see all the dependencies bundled with Express. So when you install Express, this is all that comes with the module. So that's it for this video. We have successfully installed Express.js. Thanks for watching. Bye for now. the installer. The installer also includes the Postgres SQL server and the PG admin, which is a graphical tool for managing and developing your databases and also managing your server. So we're going to do that. So the latest version of the installer is 13. So the latest version of Postgres is 13. So I'm on a 64 bit. So I'm okay. I'm going to run the latest version. So I'll click to begin the download of the installer. So to begin, I select my operating system. Current version is 13.1. I am running a Windows 64 bit. So I'm going to click to download. So the download has started. So that's the download here. I'll give it a few minutes to complete. The download has completed. That's the download here. So I'm going to double click to begin the installation. You may get this user account control come up. Just say yes to that. Click next and just accept the default. Click next, accept all the default. Click next, click next. And then this is very important. You need to set a password and also retype the password. This is going to be the password you'll be using to log into the Postgres SQL database server. So make sure you remember this password. Once you've entered your password and confirmed it, click next and accept the default. This is the default port for Postgres SQL. Click next, click next and click next. Next again and wait for the installation to complete. The installation is now complete. You can uncheck this box. That says start builder may be used to download and install additional tools. You can always come back to that later. So click finish to check. You definitely have Postgres installed. You go to your start menu here and then the start menu. You can see the Postgres SQL 13 folder. So expand that and we can click on the PG Admin 4, which is the administrative tool. We'll wait for it to launch and then we can use that to test that Postgres is definitely on the computer. You can see it is trying to start the PG Admin 4 server, which is the administrative server. So once that gets started, we should be able to see the administrative interface. When you launch the PG Admin tool, it may ask you to set a master password. This password is different from the password you set for the database server during the installation. So if you want to do one, you can just set it here. You don't have to do it now. You can always come back to do that later. So I'm going to click to cancel. When you see the red cross here, it means you have not logged in to the server. You can see here it says you've got one server. So to log in, if you click on this here, it will give you this interface again to set a master password. So I'm going to set one. And I'm going to set one to be the same as the password I set for the server during the installation. But you can set yours differently if you want. So I've entered the password. I'll click OK. I have now set a master password. So now I can log into the server. So he's now asking for the password to connect to the server. This password is going to be the password you set during the installation of Postgres SQL. So enter that password in here. So I've entered the password. I'll click OK. And you can see now that I've now logged into the database server. You can see I've now logged into the database server. So this is the main dashboard where you have an overview of what's going on in the server. So if you've got any databases, there will be a list here. So you've got the default database, which Postgres give you. It's called Postgres. And you've got properties here. SQL, statistics, dependencies, dependence. So the dashboard is a good place to have an overview of what's going on in your database. So that's it for this video. In this video, I showed you how to install Postgres SQL database server on a Windows 10 computer. To disconnect from the server, just right click. And there's an option to disconnect. So disconnect. It will ask if you want to do that. Say OK. And you can see the red cross again, which indicates you are not logged in. So once you're done, you can exit out of the browser. It will ask you, do you want to leave the site? Say leave. Hello and welcome to this video. When creating a web application, you either have to serve dynamic or static content. Static content includes things like HTML files that you use for websites or images. Also videos and so on. Dynamic content usually served through a web API or sometimes is used to serve dynamic web pages where the content or the view is composed on the server itself. In this video, we are going to serve a simple HTML file. And we are going to be using Express.js to do that. So let's begin by creating a server.js file. So in here in the folder directory, I'm just going to click on this plus sign to create a new file. And I'm going to call it server.js. So let's begin by requiring it into a variable. We're going to call Express inside the server.js file. So we do VAR to create a variable. I'm going to type in Express. I'm going to bring it in with the require. And inside the parentheses, I'm going to specify Express. So I've created a variable called Express. The next thing I want to do is set a reference to a variable called app from an instance of Express. So to do that, I create another variable called app. And I'll set that to be close to an instance of Express. Next thing I want to do is to get the Express server to start and also to listen for request. So to do that, I use the app.listen app.listen. And inside the parentheses, I need to pass in the port. It takes in a port as the first parameter. So you need to type in the port you want it to listen to. I've got all sorts of things on my computer. So I need to type in a port that I know will be free. So I know definitely that port 3010 is free on my computer. If you haven't got lots of stuff on your computer, you can use port 3000. If not, you can use 3010 like me. If you want to test to see that the app is listening to the port, you can console log a message. So I can just type in console.log. And I can just pass in a message that will display in the console that will enable me to know that it's listening for a port. So I'll just say I am listening. All right. So I'll save that, click file, save, I'll open my console, view, integrated terminal. And what I'll do, I'll start the node server. I'll just do node, space, server.js, which is this server.js file. And it should display, if everything goes well, it should display this message. I'm listening. So I'll press enter. You can see here it says I'm listening, which means it's definitely listening to this port. All right. So we know that works. So now that we know that the server is listening for a request on the port, we can see if we can access the application with our browser. So if you type in localhost colon 3010 or whatever port you specified, you should get a cannot get response. So what that means basically is that we, to see this properly, right click here and click inspect. We'll go into the developer console, click on network. And within the network, let's just wait for, you can see that we're getting a response with a status of four or four. That basically means that nothing is being hosted or served yet. So to get this to serve a static content, we have to serve some static content with express. So we have to go back into our server.js file and also we'll need to create a HTML file with a sample text inside. And then we'll get that served through the app.use. So let's go ahead and do that. So let's quickly create an HTML file first. So in the directory here, click plus and I just type in index dot HTML. So this is what will serve, will have the static content in there. And in this index.html file, I'm just going to say hello world. And I'll save that, click save. And then I'll go into my server.js file. And before I do that, I want to stop the server. So I'll do a control C in my console, in my terminal here, and that has stopped the server anytime you're making changes. So it's good to stop and restart the server when you're done. So I've created the index.html file. So inside this server.js, I am going to create at the app.use. So we're going to use the app.use to prep the HTML file to read the content of the HTML file. So we'll do app.use. And inside the parentheses, we'll pass in express dot static. And we'll include the entire directory. So we'll do underscore underscore directory name. So here in the app.use, I'm telling express that we will be serving a static file inside our app dot use. So that's what I've specified here. So hence I've used the express dot static. And I'm also passing I have passed in the entire directory using the underscore underscore directory name. So let's save that click file and click save. Now if I go back to my browser and refresh before I do that, let me start the server. So I do node space server dot js. Okay, I have got an error. You want to see why I've got the error? I've typed in the name of the server wrong. I've typed in serve dot js. It should be node space server dot js presenter. Okay, so the port is open. You can see the console log. I'm listening. So now if I go back to the website, refresh, I should get this content display that says hello world. So here I am on the website. So if I just refresh on that localhost, you can see here is now displaying the static content. Hello world. So we've been able to serve static content using express. Thanks for watching and bye for now. You can see the status has changed as well, which means it's now receiving some content. That's why it's saying okay. Thanks for watching. Hello there. In this video, I'm going to create a callback on the app dot lesson. So this is what our app dot lesson looks like at the moment. It's listening for requests on this port I have specified. I've specified port 3010. So you could specify any port you like, but it's always best to go for a port that is likely to be free. So the first thing I need to do is get a reference to this actual port in case it changes once I decide to deploy the application to a server. So obviously when you deploy to a server, the port that it listens to on that server will be different from the port in your development local environment. So to do that, I need to create a variable and set that variable to equals to this app dot listen. So here I'm just going to create a variable by typing in VAR. I'm going to set that to I'm going to call the variable give the variable a name first. I'll call the variable give the variable a name called server. And I'll set that to equals to this app dot listen. And then I'm going to pass in a callback that takes in no parameters. So inside this parenthesis for the app dot listen, I'll put a comma and then I'll pass in a callback function that takes in no parameters. So it's an empty parameter for the callback. So I'll just add the arrow function. So right. So this is a callback that takes in no parameters. And what I can do next is that inside this, bring this console to log up inside this console dot log, I can change the I'm going to change the text. I'm just going to say server is listening on port because this is a callback function. I'm going to wrap this around a function. So I'll put curly braces there and I'll separate the curly braces. And I'll just copy this console dot log and put that inside the in between the parenthesis there and then inside our callback as a second parameter to our console log, we can call the server dot address dot port. So here after this text, I just do a comma and I'll type in the server variable dot the address dot the port. So I'll just bring this up a bit. So if I save this now and try and run, if I run my server dot JS, it should tell me in the console what port it's listening to. So I'll go to my view. I'll go to integrated terminal. And here I'm just going to type in node. space server dot JS press enter and tells me that my server server is listening on port 3010. So everything works fine. So now we've got the back end server running and also we've been able to test it by running or serving a static file. So what we're going to do next, we're going to look or look for a way to set up a front end part of the application so that it interfaces with the hello there. In this video, I'm going to introduce you to arrow function. What is an arrow function? An arrow function expression has a shorter syntax than a normal function. And also with an arrow function, the expression does not have its own argument. You can usually identify an arrow function with this symbol. And this symbol basically is used to substitute the return expression in a normal function. So if you were writing a normal function after the parentheses, you will have these curly braces. And in between the curly braces, you will have a return expression with an arrow function. You just use this symbol and that will be equivalent to this return expression. It always makes more sense to show you an illustration. So I'm going to show you an illustration of how the arrow function works. To illustrate how the arrow function works, I'm going to use the console within the developer tools inside your web browser. So I'm going to go to a blank page. So if you type in inside your address bar of your web browser, type in about colon blank, press enter, and that will give you this blank page. So right click and go inspect and then click on console. If the console also allows you to write multiple lines of code to do that, you hold down the shift key, press enter on your keyboard to create multiple lines that will allow you to write multiple lines of code. So I'm going to start by creating a variable. And I'm going to call these variable animals. And I'm going to set this to equals to an array. So with an array, you always have to place an array in between square brackets. So I'm going to put my mouse in between, hold down the shift key, press enter to create some space. In between the square brackets, I'm going to add the various elements of the array. So I'm going to add various animals I want listed. So I'll start with an elephant. You always have to put a comma in the elements of an array. The only way you don't put a comma is the last element. So you do just put your mouse over the next line. And the next animal I'm going to say a lion. So I put a comma after the lion and move my mouse here. And the next I will go for a giraffe. And then the next I will go for a crocodile. I think that's how you spell it. Crocodile. Yeah. And I'll go for one more. I'll go for a bear. And in this last one, I don't need to put a comma. All right. But I need to put a semicolon, semicolon. After that, put a semicolon there. Okay. And then next, now that I have defined this variable, set it to equals to an array, I'm just going to hold down shift, create some space here. Next thing I want to do is console.log some information. I want to use the console to log some information. And I'm going to use the length property so that in the console, it will display each of the length of the characters of each element in an array. So to do that, I'll type in console.log console.log. And inside the parentheses, I'm going to pass in the variable name animals dot map. The map is a method that creates a new array with the results of calling a function for every array element. So what this map method will do, it calls the provided function or variable once for each element in the array. Okay. So that would the map will enable me to call each of this element. So once it's done that, then I can now use the arrow function. I use the arrow function to reference the length property of the array. So I'll do animals dot length. The length property of an array basically returns the length of an array. That is the number of array elements. All right. So do so. That's it. So if I press enter, okay. I have got an error on expected token. Let me see what I've done wrong here. Okay. I can see I left out another reference of the variable. So to go back to your previous code, you just use the up arrow and that will give you the code again. So what I needed to do here after the animals dot map, I need to put parentheses there and then enter animals, animals, then the arrow function, then the animals dot length. That should work now. If I press enter, you can see here it has given me this output here. So this is the result. So five, it tells me there are five elements in the array. One, two, three, four, five. The length of the first one is five. Length of yep. Sorry. The length of the five elements in the array, length of the elements in the array. First one is eight. Second one is four. Next one is seven and so on. So if you want to see just click on this button here and that will give more information. Tell you these are the indexes in the array. So the array are zero base, which means the first element is a zero. Followed by one, two, three, and so on. So the first element is the elephant, which has a character length of eight. The first one is the lion, character length of four. And two, second index seven and three is nine and so on. So that's basically how you use an arrow function. Thanks for watching and bye for now. Hello and welcome. In this video, we're going to start creating the user interface. So let's start by creating a proper structure for our HTML file. So I'll click on the index dot HTML. I'll get rid of this text here and then I'll create a proper structure. So I'll start with the doc type. A lot of this is basic HTML. So I'm not going to go through the different tags that I'm using. So I'll start with a doc type, doc type space HTML. And then we do the HTML tag. That's the opening tag. That's the closing. We do the head section and that's the closing head. We do the body and then tap to separate the body. And then inside the body, I'm going to create a script tag where we'll add some JavaScript inside the HTML. All right. So let me just indent that a bit. So in between the script tag is where I'll add my internal JavaScript for this HTML document. To make the layout look good, I'm going to use a library called bootstrap. So we're going to head over to get bootstrap.com. So if you go to get bootstrap.com, we're going to use the style sheet from here. Click on get started and scroll down. And then where it's got the CSS, we're going to copy the CSS. So click on copy and then open your text editor. And inside the head section here, we just right click and paste that in. Just going to yep. So that's it there. I'm going to go back to bootstrap. If we scroll down to the bootstrap page here, there's a section for JavaScript, which is JS here. So it contains, we're going to copy this code, which also contains some JavaScript links to this content delivery network, also known as CDN. So it's going to include jQuery. That's jQuery here. jQuery is also a JavaScript library. So just click on this copy option and that will copy these three links and go back into your text editor. Just underneath the the head section underneath the previous link. Just right click and click paste. And that will paste those three links in there. So we should have those three links in there now. So I just need to go back one and make sure just tap down so that make sure they are pasted in the right place. They all have to be inside the head section. Okay. You can add JavaScript either in the head section or in the body section. When you add JavaScript in the head section, it does not have to wait for the page to load before it executes or utilizes the JavaScript. So these are all links to the various links. This is a link to jQuery. So it gives us access to the jQuery library, which is a JavaScript library. And we've got reference here to Ajax and then we've got the bootstrap as well. So this just gives us access to these libraries. It prevents us from actually installing them. We're going to be using the jQuery library, which is this library here. We're going to be using the jQuery library to inject our data into the HTML and also bind bind it to certain events, since we're not going to use another framework. For example, we're not going to use Angular or React. So we're going to use the jQuery to inject data. Into the HTML from the back end. So I'm going to end this video here and we will continue in part two. Thanks for watching. Bye. Hello and welcome. In this video, we are going to continue creating the user interface. So let's go back into our text editor and we'll begin by placing a bootstrap container element. A container element is going to create a fixed width container that centers our content inside. So under the body element, I'm going to add a bootstrap container. So I add the div and I'll give the div a class because we've already added a reference to bootstrap here. It gives us ability to access the bootstrap classes. So I'm creating a container element. The div is going to be set to equals to container. So I type in container and I'll close the div and then tap to separate the div. So all the elements of the UI will be nested inside this container class. Next, I want to add a break to create some space before I add another element. And the next element I'm going to add is called a jumbo tron. The jumbo tron is a bootstrap component that allows us to focus or showcase specific elements on our site. So we'll do that by adding another div. So type in div and I give it a class and I'll set that class to equals to jumbo tron. So jumbo jumbo tron. So that's going to be another bootstrap class. So I'm going to tap in between the opening and closing div just to separate them. Next thing I'm going to do is add an h1 element inside this jumbo tron. So this is going to contain a text that will say send message. So to do that, I'll just do add a h1 element and I'm going to give it a bootstrap class. So it will style it for me. So the class I'm adding is called display-4 and that will style the h1 header element. And in between the opening and closing h1 element, I'm going to add this text that will say send message. So now we've got a header for our component. I'm just going to add another break element to create some space. So next thing I'm going to do is create an input inside the jumbo tron. So I type in input and I'm going to give it a class. Again, I'm going to use another bootstrap class. So it's going to be form dash control. And I'm going to add a placeholder and I'm going to give it a value of name. I'm going to tap down and add another break tag just to create some space. Next thing I'm going to do is add a button that the user can press once they've entered the message. So I'm going to add a button element by typing in button. I'm going to give this an ID. I'm going to give the ID a value of send and I'm going to attach a bootstrap class to it to style it, which is going to set it to it's going to be BTN space BTN dash success. There are different classes for buttons. This BTN dash success will give the button a background color of green. And in between the opening and closing button, I need to add a text. I'm going to type in send, I'll just save that as I go along. The next thing I want to do is add a div where the message history is going to be displayed. So I'm going to do that just under the jumbotron div. So I'm going to tap down and create another div. So I'll do div and I'll call the div. I'll give it an ID and I'll set the value of the ID to messages so that the ID property can be used by jQuery to inject messages into the component. So I'm just going to tap down to separate it. So all the history will be inside this div here called messages. And we're going to use jQuery to access this div using its ID property. So let's save what we've done so far and let's test it to see what the interface looks like. So you need to start the server by going into your terminal and then just typing in the name of the server.js file. So you type in node space server.js and press enter. We'll wait for the server to be running. It says servers listening on port 3010, which means we've got access. So we're now go to our web browser and type in 3010. If you type in localhost colon 3010, you should get something like this. If you get something like this, that means your interface is being set up correctly. If there's any issues and you're not seeing this, please let me know or look through your code and compare it with mine and just see where you've gone wrong. If you've still got any issues, please feel free to contact me. I'll be more than happy to assist. So this concludes the interface setup. Thanks for watching. Bye for now. Hello and welcome. In this video, we're going to add some jQuery to our HTML document. Before we begin, I just want to go about what the document already method is or function. Before you can load a page jQuery is basically used to manipulate web pages. Before a page can be manipulated safely, the page must be loaded first. So the document already function basically is used to detect the state of the readiness of the page. So you use that to check to make sure that the page is loaded before any jQuery is loaded. So what that means is that using the document.ready method only runs once. It runs once the page object is ready and that means your page can be manipulated. So inside our script tag here, I'm going to add the document.ready function, the jQuery run, but I'm going to add a shorthand version. And the way you add the shorthand version is just to the dollar sign. And then you do the empty parentheses. And inside the parentheses, I'm going to use an arrow function. So I'll do another parentheses and then we do the arrow function. And we do the curly braces and tap to separate the curly braces. I've separated too many parentheses. So this is how it should be structured. So to test this, that the pages loaded, I'm going to add a simple console.log message. I'm going to do console.log and inside the message for the console.log, I'm just going to pass in a text that says page loaded. I'm going to save that. I'm going to start the server. I go to my terminal and I am going to type in node space. server.js and press enter. Wait, okay. That means it's listening. I'll go to my document, my web page and refresh. Okay. And you should see page loaded. So if you can see page loaded, that means that the page has loaded and the jQuery side of things is actually working. The next thing I'm going to do is create a function that will allow us to add messages to our message history. So let's add a function. So I'm just going to tap down here and create a new function. I'm going to start with the function keyword space followed by the name. I want to call the function. I'm going to call it add messages. So this is going to be the name of my function. And I'm going to pass in a message object and then I'll add my curly braces and then tap to separate the curly braces. So the next thing I'm going to do is that I am going to inside this between these curly braces here, we're going to add some references that will access the message div through its ID property. We're also going to append it to some HTML. So to save a bit of time, I've added this line on line 32 here. I've added this. So here we've got reference to the message ID, which is this div here. That's what I'm accessing here using the hash symbol. And then I'm appending the messages. And for the message name, I'm using a H4 tag heading tag to give it a title. So here I've used the jQuery shortcut and then I'm passing the ID with these messages. And that will match this message ID here on line 20. Then I've used the append to add some HTML. So this H4 here will be the header for the title. In this case, it's going to be the message name. And I've used the JavaScript template literals. You can see that I've used that with the back tick here. That's the JavaScript template literal. So instead of using a single quote, I've used the back tick instead. And then I have surrounded. I've closed the H4 heading tag there. I've done a space and added a paragraph tag. Okay. And then inside the paragraph tag, I've placed in the message using the jQuery shortcut sign message dot message inside. And then I've closed the paragraph tag and also closed the back tick here, which is the JavaScript template literal. If you're not used to the JavaScript template literal, it basically allows us to inject variables, for example, into strings. We could use other formatting methods, but I find using this literal JavaScript literal, the cleanest method, as I've used it in this example. So the next thing I want to do now is to this new function we have created, I want to be able to call it inside this document dot ready. So to do that, I'm going to have to amend this console dot log and then incorporate this function in this area here. So online 28, I've replaced the console dot log message. And I have added this call this function I created here, which is the add messages. And then I've passed in an object that has a property of name. I've given this a value of John. And then also I've attached another property called message and given it a value of hello world. So this John here is going to act then the John here is going to act as a placeholder. And then the property here message, which I've set to hello world. So I'll save this and reload the page. And then we can check to see if our function is working. Since we now have an example object. So I'm just going to click save. And if I go back to my application page here and just refresh, you can see here now is now saying John or going back to our page. Now you can see that the function is working properly. Since we can see the example object here. The next thing I want to do is to make this send button do something. So we're going to give the same but we're going to use the ID property of the send button. And I'm going to attach a click callback for this button's click event. To save some time, I've already modified the code here. So this area here is what I have modified. So basically what I've done here inside the document dot ready function. I've attached this ID here. This is the ID for the button, the send button, which is this ID here. That's what I'm referencing here. I've attached this click event to it so that it will listen out for any click event. So when you click on the send button, it will trigger this object here. It will display this text John and it also will display this message. So I'm going to save that. And make sure you restart the server anytime you make changes. So if I go back now and refresh each time I click on this because I've attached a click and like to a click event, it will show the placeholder and also the message object is this time I click on it. And that's because of this here, this click. So I've activated the button. So each time I click, it will execute this code inside here. So that's it for this video. Thanks for watching and bye for now. Hello and welcome. In this video, we are going to create a get messages service. The get messages service endpoint is going to allow us to get actual messages from our back end to our front end user interface. So let's open up the server.js file. I inside the server.js file, we're going to add a route for our endpoint. The endpoint is going to be the messages. So we're going to create a route for that. And we'll be using the app dot get to specify to specify that endpoint. So after this after use, I'm just going to tap down and I'll write app dot get. And then parentheses. And inside that parentheses, the first parameter, we're going to specify the route. So to specify the route, it was slash then typing messages. And then we're going to need a callback to handle the request. So that will take in a request. And then it will also give us a reference to the response. So to do that, we'll need to specify inside the parentheses, we'll do a comma. And then we'll do another parentheses. We do the request. And then the response. And we'll attach a callback using the arrow function. And we'll add the curly braces and then tap to separate. So what we can do, we can provide a test response to a string. So to do that, we are going to add the rest dot send. And inside parentheses, we'll just attach a string. Okay, let me just say hello world. So quickly save that and then we can test it to see what we get in our app. So I've saved that I'm going to go into my terminal and just start the server. I'll do node space server.js and press enter. Wait for the server is up and running. So go to our app and just refresh. And if I do to test the endpoint, I need to navigate to it. So in the address bar, I'm going to do slash messages and press enter. And you can see here our hello world is now being displayed. This hello world here that we've entered is now displayed because of the rest dot send. So we are responding to using this text. So the app dot get is used to specify that we will be handling get request. Okay, and inside that, we've got the parameter. We've got the first parameter, which is the route. Okay, since we are supplying a list of messages and so I've done it this way. And then I've also attached a call back to handle the request that will take the request and then give it also a reference to the response so that we can respond to it. So for now, I've just set it to rest dot send. And I've attached a text string here to say hello world. Next, let's create a placeholder messages, messages list as an array at the top here. And we can call it messages. And then we'll create two message objects with the name mess with with a name and also a message. So let's do that. So here at the top, we'll start by creating a variable VR. And we'll call it messages. And I'll set that to equals to an array and I'll tap to separate the array. And then inside the array, I will attach two message objects. So we do the curly braces and then we'll type in the name and give it give it a value. I'll say John. Okay, poor comma space. And then the message, I'll just say hello. All right. And do a comma attach. I'll just copy this save me writing it again and paste and just change the name of the object. I'll change this one to make this Jane and say I'll say hi. Okay. And I'll save that and then start the server going to view going to my terminal start my server node space server dot JS, press enter. Wait for the servers. The listening to the port is up. So I'll go back to my application, refresh. So the messages should have reflected here. It hasn't. So I need to go back into the code. Ah, okay. So what I forgot here where I've got the message dot send instead of passing in the hello world, I'll just I can just pass in the actual messages here. So I just remove that. I'm just passing the name of this variable called messages. I'm just typing messages. I'll save that. Restart my server. Do node server dot JS. Okay. I've got my node space server dot JS. Okay. The port is up and running. I refresh. You can now see the objects here in this in this area here. So this is how I expect it to look. So you can see here the actual messages array is showing up inside the browser view here. In the next video, I'm going to update the index dot HTML file so that the user interface is going to get the actual messages from the backend. Hello and welcome in this part of the video. We're going to update our front end user interface so that we get the actual messages from the backend. I'm going to do this using an HTTP Ajax request. So go back into your index dot HTML file. We're going to create another function. Just below the first function here. So I'm going to start with a function keyword. So type in function. I'm going to give this function a name of get messages. Okay. That's the name of the function get messages. Next thing I'm going to do is create a jQuery HTTP get request. So to do that, we use the dollar get. So type in dollar dot get and inside the parentheses inside the dot get we're passing the actual URL from our browser. So let's go into our browser and pick up the URL address. So we're into our app. This is the front end. I just copy this URL address. Right click copy and go back into my editor and paste it inside the get. So make sure you paste the URL inside the get like this. We will need a callback that provides us with our data. So to do that, we just type in comma after the. So inside here, we need to include that in quotes. It can be single quotes or double quotes, but you can't mix them. So if you're using single, use single all the way. If you're using double then use double all the way. So make sure you include the path in quotes and then a comma. So going to attach a callback that will provide us with our data. So you do your comma and then we'll inside the we attach another parentheses inside there. We're typing data and we'll add an arrow function. Okay. And curly braces. So it's a good idea to test your processes as you're going along. So to test that, this aspect works. I'm going to console.log the data here. So I'll type in console.log and inside the parentheses are passing data. I'll click save. I'll restart my server in the terminal. I'll type in node. My port is up and running. I go back into my application, refresh, okay, something wrong. It's not working. So let's go back into my code. Okay. I forgot to do something before I can actually get the messages function to work. I need to actually include it inside our document.ready function. So this is our document.ready function here. So just underneath this bind here, I'm just going to come here and add it. So just below the click binding, I just do a tab. And reference the get messages function that I created here. So I'm now referencing it there. So I'll save that. Restart my server. Just type in node server.js. Press enter. I'll go back to my application and refresh. So let's navigate to the root. Let's take out the messages endpoints and just hit enter. So if you notice here that we have got an error here. This is because the jQuery.get function is not recognized. This is probably because of the link, the jQuery link we've copied. We've probably got a slim version. So let's go back into our text editor and go to, if you look at our jQuery link here, we've got this option called slim. So let's remove that. We remove that. So it just says dot main. Because we've changed that, we don't need this integrity part. So we just get rid of all that as well. Get rid of all that up till that point. So get rid of everything inside that jQuery. So your jQuery should now be modified to this to say that. Okay, so make sure your jQuery is like that. I'll just expand that so that you can see. Okay, once you've got your jQuery set up that way, you click on save. And then I'm just going to restart my server. I'll do node server.js. Then I'll go back into my front end, refresh. Okay, I'm still getting an error here. So if you refresh your browser, you should now see the messages displayed. So if I click on this here, you can see the messages actual inside the console. So that's it for this video. In the next video, I'm going to modify the index so that the actual messages will be displayed in this area here. Hello and welcome. In this video, we are going to start creating a post messages service. So open up your server.js file. We're going to begin by creating a new message post and point in node. So to do that, I'm going to quickly copy this code here, the app.get code from line 10 to 12. I'm just going to copy that and just paste that underneath there. And I'm going to change the app.get here to app.post. Also here, since we're not responding with a message list instead of using the rest.send here, I'm going to change that to rest.send status. So I'm just going to change that to status. And for the status, I'm going to pass in 200. 200 basically is a status request that informs the client, which is a web browser, that everything is okay or everything went well with the data request and received. So it just tells the client that everything was received okay. In order for us to test this, we will need to console.log to display the request body. So just above, I'm going to just tap and add a console.log message console.log. And I'm going to pass in the request body, which will be request.body. This will enable the body of the request to be displayed inside the console. So start your server inside the terminal. And the way we're going to test this, we are going to use a tool called postman. So this is postman, I've launched it. I'm going to just, so within the postman here, you can. So this is where you have your various requests. I'm going to change this to a post request. And I'm going to click on the, first of all, you need to specify the URL. So we need to post the URL. So I'm going to use these, the messages endpoint. So I'll copy that and go back into postman. I entered the URL there inside postman. So once you go postman open, type in localhost colon 3010. If you're using 3010 as your port slash messages. And then click on this body option and click on raw. And then under this dropdown, select JSON application, JSON, select that. And here we're going to enter some JSON objects. So you start with the curly braces. And you must use, with postman, you always have to use double quotes. So we'll start with the first object name. And the value I'll set that to John. Okay. The comma, the second object will be message and the value. I'll just set to, I'll say test message from postman. So once that's done, I'll click on send. And we'll scroll down and see if we get, you can see here we've got, we're getting a status of 200. Okay. Which means the client should have received it. Okay. So if we go back into my terminal, you see because I've used the console.log request body should have displayed the body of the request inside my console. As you can see, it's showing as undefined. So the reason we've got undefined here, that's because express has no built-in support to pass the body. So to make that happen, we're going to install a package that will do what is called the passing. So the package you're going to install is called body-passer. That will enable express to pass the request body for us and displayed inside the console. So to install the body pass, I'm going to open up a new terminal. I'll click on this plus sign here. And inside the terminal, I'm going to just type in npm, space, install dash dash save. You could use S for short if you want. And then space body dash person. So we just press enter and wait for the body person to install. So that's it doing it there. The dash that save enables it to be saved into the package.json as a dependency. So you can see here it's updated one package. So now that we've installed the body passer, we need to require it at the top of our server.js file. So right at the top here after the express, we just tap down and we type in var variable. We type in body person and we set that to equals to require. And inside the parentheses, we pass in body dash person. Next thing we need to do is that we need to set the body passer up as middle way using the app.use. So we just need to tap down after this app.use express. And inside there, we type in app.use. And inside the parentheses, we pass in body person body passer.json. So here on line six, in the middle way, we type in app.use bodyparser.json. Don't forget to put the parentheses for the dot json. And basically what that does, it lets body person know that we will expect or we are expecting json to be coming in with our HTTP request. So once we've done that, just click file, save, and we'll start the terminal again. I'll just do control C to restart my server. So I type in node space server.js. Okay, my terminal is up and running. I go back into postman and you can always click on the last post and that would display this area here. If you click on send and that should give you a response. So once you get 200 okay, it says okay there. If you now go back into your terminal, as you can see, you can see the message object with the name and also the message property displayed in the console. It's appeared twice because in postman, I clicked on the send post twice and it's appeared twice. So that's it for this video. We will continue in the next video. Thanks for watching. Bye for now. Hello and welcome. In this video, we're going to carry on from part one. In part one, we were able to get our messages and got the message body to display in the console. What we're going to try and achieve now is we want to get the actual messages that is posted from postman. We want it to appear here inside this inside the app. So to do that, we're going to have to change this console.log on line 18. We're going to replace that with a push message. Okay, so it will push any messages we sent and displayed in the app. So on line 18 here, I'm going to replace the console.log with messages.push. Okay, so I replace console.log with messages.push and do the file save. I'll restart my server, control C to restart the server. I do node space server.js, press enter, wait for the port. Okay, the port is active. So on line 18 here, we're using the messages and we've attached push to it to push the message. And inside the request body, the request body contains the message object. So we're using the messages.push with the request body. So I've saved it. I've restarted my server. So let's go back into postman. In postman, I had this message object set to messages. If you could just remove the S and just make sure it just says message. So you should say name should be the this object here and the value is John. And this object here should be just be message. And this is a value. So we click on the send and wait for it 200. Okay, excellent. We've got 200. Okay, response. So we if we go back into our app, we should refresh, we should see that message saying test message from postman. So that's exactly what I wanted to achieve. So we've got the message now popping up inside this message area. So that's great. Hello and welcome. So far we have been able to send post messages from postman. And we have received them inside our app. But what we're going, what I want to try and do in this video is to try and send the post request from inside the user interface of our application front end. So I'm going to your HTML file, the index.html and right at the bottom where the script tag is, we've got a function called get messages. If you just copy everything in the get messages, say from line 37 all the way to 41, copy that and just paste that underneath, right click and paste. And we're going to change some bits and pieces. So we're going to give the function a name. We're going to call it post mess or going to be lowercase post message. I'll make it singular, take out the S. So we're going to make that post message. And in this dot get going to change that to dot post. We're going to replace this with the, we're going to pass in a message object as a parameter to the function. So we type in message. I'm going to use that message object as the second argument here. So I'm going to remove this. Also, we don't need this arrow function anymore. So I'm going to type in message. So this message object here is going to be the second parameter. We don't need this curly braces anymore. Just wrap it around. Okay. So get rid of this. We will need this for each animal and also don't need that extra braces. Just tab up. Okay. So we've got a new function now called post message. And taking in the URL and then the message object as the second parameter. The next thing we have to do is modify our click event, which is located inside the send button. So we want to modify it so that it calls the post message instead of just adding a place order message. So if we go up here, you can see we have inside the click event here, we see we've got all these place order messages. So I'm going to replace the place order messages and try and make things more dynamic so that you can type messages directly into the UI, click on the send button, and then the messages will just pop up below. Okay. So I am going to modify this click event so that the send button calls the post messages instead of just adding a place order message here. So I'm going to get rid of line 28, get rid of this place order message, delete that. And in its place, I'm going to create a variable. So I type in VR and I'm going to call the variable message. Okay. And I'm going to set the value to an empty object for now. Okay. And the next thing I want to do on the next line is to call the post message function. So I type in post message and then I will pass in our message object. So type in message. So the message object I'm talking about is this one here. Okay. So at the moment, it is currently empty. So we will need to populate it. So what that means is that we'll need to access the name and the message inputs in our HTML. In order to have access to those inputs, we need to create IDs just like we did before. So if we go up here, notice we created IDs for the button ID for the message. So we need to create an ID for the input. And then we also need to create another area, another input or text. We may change it from input to a text area, change the text area for the message input. So to begin, let's give our input on line 16. We're going to give it an ID. So inside the input here, I'm going to type in ID. And I'm going to set it to equals to name. So the ID is going to be name, not type in name. So that's going to be the ID for that input. And then I'm going to copy this, copy that line, paste it in there. And I want to add a break tag in between. So I tap down and just do add a break tag. What I want to do, I want to change this input here from input. I'm going to change that to a text area, text area. Okay. And I'm going to change the ID value to message. I'm typing message and the placeholder will change that to message. And then I'll close the tag for the text area. So make sure you've got the text area closed. I'll save that. The text area here for the message allows you to enter multiple line input in comparison to the input, which you can just enter a single line with the text area. You can enter multiple line inputs. So now we've got IDs for both our name and message. So we can then set that inside our message object. So we'll begin by trying to populate the message object. So now let's begin populating our message object. So inside the message object, the first thing we need to do there is we need to start with the name property. So we'll type in name and we'll set it to the value of our input, which we're going to access with jQuery. All right. So we'll set that to the dollar sign for jQuery. And parentheses would do quotes and then the hash and then name. So we'll access it with the val property. So we'll type in dot val and we'll do the same for the message property. So put a comma and then type in message colon. And then the value we're bringing jQuery again. And inside the parentheses, put your quotes and then we access the message ID. And then after the parentheses, we use the dot val to access the value. So let's save the work we've done. Restart the server. Control C to restart. And then node server.js. Wait for the port to come up. Excellent. So now let's go into our UI. Just refresh and let's type a message. So I'll say rick. I'll say hello and click send. As you can see, both the name and the message is displaying as undefined. So this is not the result I was expecting. But I just wanted to point out the reason why this has happened. This is basically because the browser, the URL of the browser is encoded. So when you something called in is encoded. So what we have to do is set up the body parser to support that encoding. So let's go back into our code and we go into let's go right into our server.js. Let's go right to the top. You see where we've got the app.useBodyParser. So in here, we are going to type in going to use the middle way again. I'm going to type in app.use and then in parentheses, we're going to say bodyParser.urlEncoded and then inside the parentheses, we're going to put an object and the property will be extended. And we're going to set the value to false. So just click file and save. So save and restart your server. So I've already restarted my server. So I'll go back into the app. I'll just refresh and type in my name again. And I'll say hello and I hit send. And then refresh. When you hit send, refresh, you can see there now it's showing. That's my name and that's the message I posted. Excellent. Hopefully yours is working for you. If there's any issues, please let me know. You can look through the code and just refresh after you've entered your name and see if your name pops up in there. So we can see that our message app now works both on the front end and the back end. If we were to host this now on a hosting site, we would be able to have chats with a friend and also simulate a chat between two clients. So that's it for this video. Thank you for watching. Hello and welcome to this video. We are going to install socket.io. What is socket.io? Socket.io enables real-time bi-directional event-based communication. For example, express allows client to send a request to the server, but the server cannot send a request to the client. Okay. So does not have bi-directional communication. socket.io solves this problem because we can push notification from the server to the server to the client when an event happens, as well as other related data. Socket.io has two parts, a client-side library that runs inside the web browser and a server-side library that runs from Node.js. Both components of the socket.io have an API that's nearly almost identical. And just like Node.js, it is event-driven. The way our application is set up at the moment, we can send requests from the client or the browser to Node, but there's no way to do the reverse. There's no way for Node to do the reverse. So the only way we can tell Node to, the only way Node can tell one or more clients that there's a new message is by using an HTTP request to do something that is called polling. So you use HTTP requests to keep polling the server. That means you keep asking questions every few seconds. You send an HTTP request asking the server, hey, are there any updates? Are there any messages for me? Should I display any message? So you have to keep checking over and over just to see if there's any new messages for you to display. You can avoid this by using socket.io because socket.io has a bi-directional event-based communication. Socket.io is a web socket library that works for both the browser and for Node. With socket.io, it will be able to notify the clients or the app running inside the browser when another user has sent a chat message. That way the app will update their message list instantly. You may have heard of push notifications where a server pushes an update or a message to a client or multiple clients. This works the same way. The nice thing about socket.io library is that if a browser is older, if you've got an old browser which does not support web sockets, it will default back to the polling. And it also has that built-in functionality to always work even if it hasn't got, even if the web browser is old and doesn't necessarily have web socket. So we're going to use Node's package manager to install WebSocket. So I'm going to open up a new terminal, click on the plus and inside the terminal, I'm going to type in npm, space, install, space, dash, dash, save, because I want it to be saved in my, as a dependency, space, socket.io, press enter, and we wait for the installation to begin. So you can see the installation has started. So it's contacted the site. It's trying to fetch the socket.io module. So give it a few minutes to complete the installation. So you can see here it says 35 packages added. So if I go to my package.json, I should see socket.io listed under my dependencies. So that's it for this video on the installation of socket.io. In the next video, we're going to integrate socket.io into our app. Thanks for watching. Bye for now. Hello and welcome. In this video, we are going to be setting up the socket.io. Setting up socket.io is a little bit trickier than most of the other packages. That is because it needs to tie in with express. So the plan here in this video basically is that we're going to create a regular HTTP server with node that will share with express and socket.io. So let's open up our server.js file. So this is a server.js file. And the first thing we're going to do just below the express here below this variable, just tap down. We are going to add a variable. I'm going to call it HTTP, var for variable, we'll call it HTTP. And we're going to set the value to require. So typing require, and we're going to pass in HTTP. So we are using the HTTP library from node. So we do dot server and then passing up. So we've used the HTTP library from node and we'll call the dot server, which is this one here on the require itself and pass that into our express app. Then let's create an IO and set it to require socket. So we're typing create another variable and we'll call it IO. We set that to require socket dot IO and we will pass in the reference to the HTTP. So we'll do require and we're passing socket dot IO and we're passing HTTP. So now that the socket.io is set up on the back end, let's set it up for the front end. So we go over to let's save that save your work and go over to the index dot HTML file. So let's create a new script tag. So here just going to tap down and we'll add a new script tag script. And we will add a source for the opening script tag typing SROC for source and we'll set that to equals to socket dot IO forward slash socket dot IO dot JS. So that's going to be our script reference to the socket.io. If we refresh and try to run the app at the moment, we are going to get an error and that's because the socket.io the app is not going to be able to detect the socket.io JavaScript file. So the problem is is that we can't directly serve our backend. We just express any longer. We will use node HTTP server. So that way both express and socket dot IO will be running. So let's go to our server dot JS file and we'll scroll down to where we've got the app dot listen. So we're going to replace the existing listening code with HTTP dot listen instead. So where we've got variable server instead of app dot listen, we are going to change that to HTTP dot listen file and save that. So the next thing we're going to do is that we are going to initialize socket dot IO inside our html file. But before we do that, on line four in the server dot JS, make sure you've got the dot server make sure the s is capitalized on line four. Make sure the s for the server is capitalized. Then go into the index dot html. So let's initialize socket IO here by creating a variable. So we go right down to the beginning of the script tag just here. We'll just tap down and we'll create a variable var and we'll call it socket. We'll set that to equals to IO. And then save file save. So now that we've created the variable socket and we've set it to equals to IO, this initialization will also try to make a connection to the socket dot IO server at the same URL that the current page is being hosted on. So what we're going to do now, we're going to set up a callback for the socket connection event that will let us know whenever a new user connects. So to do that, let's go into our server dot JS file, make sure your index dot html is saved and then click on the server dot JS file. So below our post message here below the post message, I'm just going to tap down, we're going to add an IO dot on and we will check for the connection event and we will supply a function that takes in a socket. So let's do it type in IO dot on and we'll take in a connection and then we'll supply a function that takes in a socket. So we'll do a comma and after the comma, we will use an arrow function. So we put in socket parentheses and type in socket and then we've got the arrow function, the curly braces tab down to separate the curly braces. And for now, just to test this, we are going to do a console dot log. So we're going to do a console dot log user, user connected. Okay. And we'll close that we'll save that. I'm going to restart my server control C to restart and then node server dot JS. Okay. So let's go to our app and just refresh the page and go back inside the monitor. You can see here the message is displayed saying user connected. So we can see that a socket IO connection has successfully been made from the browser since we are getting a message in the connection event, which is this message here. And we can see a user connected inside the console. In the next video, we are going to create the message event to update all of the client at once. Thanks for watching. Hello, and welcome. In this video, we are going to emit messages to all clients. So we're going to submit an event from the server to all the clients, not to find them of a new message. So we can do this inside our post message endpoint function. So let's open up that file. So open up our server dot JS file and we look, we'll scroll down to all the way to this post end point here. Let's add an IO dot emit. So I'm just going to tap down and online 22, I'm going to add an IO dot emit. And inside the parentheses, I'm going to pass in message and then a comma and also the request dot body. So online 22, I've added the IO dot emit. And I'm calling the event message. And I've also passed in the request dot body, which will contain the message. So make sure you save that. And then we need to go to our front end. And we also need to modify that file. So let's go into our front end, which is the index dot HTML file, we need to add an event listener. So going to scroll down inside the script area. And here, just after the get messages, we're just going to tap down. And we are going to I'm going to add the event listener there. So just below this. So below this document, don't get ready. We are going to add a socket dot on. So typing socket dot on and inside the parentheses, we're passing message comma and then add message. So line 36, I've now added the socket dot on and inside the parentheses, I'm checking for a message. And I've also supplied the name of the add message function. So save your work and restart the server. And let's now test it out. So I've opened up two instances of my web browser with the same localhost 30 10 localhost 30 10. So we're going to test it. So here, I'm going to say blue lime. I'm just going to say yo, I click send. And refresh. You can see I'll refresh this one. I can see here, the messages have been admitted to all the connected clients. So it's this message here, you see here, you see here. So now let me send one from here. I will just say, what should I say? I'll just say BLS, which stands for blue lime learning solution. And I will just say, hi, I'll click send, refresh. If I go down, you can see the message here, if I refresh here, you can see the message here. So the messages are being admitted to all the clients from the server. So because of the bi-directional communication with socket dot IO is fairly straightforward. You can see the what you the communication straight away instantly, it shows up. And that's basically due to the bi-directional communication with socket dot IO. However, every time you restart the server, you will lose all of the messages in the history. So later on, we're going to implement a database solution that will store the messages. So even when you restart the browser, the messages can still be retrieved and will still show up in the app console. So that's it for this video. If you have successfully got this far as well, if you got it in working, congratulations. If you have any issues, please do not hesitate to let me know. I'll be more than happy to help. Thank you and bye for now. Hello and welcome. In this video, we are going to set up a MongoDB environment using mLab. You can also run MongoDB locally. But the disadvantage of that is that when it comes to publishing your application, you then have to look for a hosting company. However, if you set up MongoDB using mLab, which is a cloud based environment, you already have the database set up so you make it database portable to any application you want to serve. What is mLab? mLab is a free MongoDB hosting service. mLab is a cloud based MongoDB database service. You can run MongoDB in the cloud in mLab using various cloud providers like Amazon, Google and Microsoft Azure. mLab is very popular and has powered over half a million deployments worldwide. The website for mLab is mLab.com. You need to register before you can create a database on mLab. mLab also have different packages, but there's also a free package as well. This is the mLab website. First thing to do, you can look at the price plans. For the free plan, you allowed half a gig, 500 gig for free. You allowed 0.5 gigabyte storage for a sandbox, which is the free sandbox plan. This is the one we're going to go for. Before we do that, we need to sign up. We click on sign up. If you haven't got an account, just follow the on-screen instructions. It's fairly straightforward. Once you've created an account and verified your account, then you should be ready to create a new database. Click on this tab that says create new. Click on that and we wait for it to load. We're going to leave Amazon selected as the cloud provider. Next you need to do is select a plan. Click on this free option here, the sandbox. Click on that and click continue. There's a tab. Just click on that to continue. Next, you select your region. I am in Europe, so I'll select that. Click continue. You need to give the database a name. So you can call your database anything you like. I'm going to call my Mongo dash node. Once you've entered your database name, click continue and just check everything. Make sure you've got free setup. You've got free storage, 0.5 gig. If you're happy with that, click submit order. Within a few seconds, you've got your database created. That's the database there. So click on the database. Click double click to open it up. Okay. The first thing we're going to do, we're going to have to create a new user for the database. So this is the user we will use to access the database from our application. So select the users tab, then click the add database user button. Since this is a test, you can enter any name you like. So for me, I'm just going to enter BLS and just give the database a password and then confirm the password. But if you're using this for a production, obviously, you need to have more secure credentials entered in. So once you've done just click on this create button. So let's click on that. And we just wait for the date the account user. There you go says name. So it's created the account. So this concludes the setup of the MongoDB environment. Thank you for watching. Bye for now. Hello and welcome to this video. In this video, I'll be creating a new account on MLab. I will also be creating a new cluster on MLab, which is going to act as our MongoDB database. The link to the MLab website is displayed on the screen. This is the MLab website. So to sign up, just click on the sign up button and then just complete the sign up form. If you have a company name, you can pop the name in there. This is optional. And then you have this option that says how are you using MongoDB? So you can select any option you like. I'm going to select I'm building a new app. And then you can enter your work email and then complete the other relevant details. Make sure the password you set has a minimum of eight characters. And once you've done that, just check this box that says I agree to the terms of service. Notice that you will get started with a 512 megabyte of free database storage. So this is what it gives you by default. Once you've entered all the form details, just click on the get started. You're then presented with this screen. You can skip this process if you want to. There is a link here to say skip. I'm going to skip this for now. I'll click skip. The next thing you need to do is to choose a path. So we have some paying options here, the dedicated multi cloud. This is a price plan. We are going to go for the shared clusters, which is completely free. So this is the option we're going to go for. So I'm going to click to create a cluster. We are going to be creating a shared cluster. A cluster basically in MongoDB basically allows you to horizontally scale so that the data is distributed across many servers. There are many providers here for the shared clusters. The default option here is AWS Amazon Web Services. So I'm going to leave that option checked. The other options are Google Cloud and Azure. So you have to select the region you're in. The default region here selected is US. You can leave that if you want to or just select the region closest to you. I can choose either Frankfurt or Ireland because I am in Europe. So these are the closest to me. So I'm going to select Ireland and then scroll down the bottom here. This is going to be the sandbox for the free storage that MLab gives you a 512 megabyte storage. Under the additional settings here, you've got this option to turn on backup. However, this option here is not available for this free tier option. So you won't be able to do that anyway. And then here on that cluster name, you give your cluster a name. The default name is cluster zero. I'm going to give mine a name. I've called my cluster mongodash node, but you can call yours anything you like, but make sure that the name of the cluster only contains AXI letters, numbers and hyphens. So once you've given your cluster a name, just click on this button to create a cluster. The provisioning of the cluster can take a while. So be patient. If we take a look on the left here, there are some steps to connect to Atlas. So these are the different things you can set up for your shared cluster. The cluster has now been created. You can see the name of the cluster here. Mine is called mongodash node. So that's it for this video. In this video, we set up a new account on MLab and also created a new cluster, which is going to act as our MongoDB database. Thanks for watching. Bye for now. Hello and welcome to this video. In this video, I'm going to be creating a new database in MLab. Before creating the new database in MLab, I just want to introduce you to some basic database terminology in MongoDB. MongoDB is a document database. In MongoDB, each record represents a collection and the documents within a collection can have different fields. The document structure are composed of a file and value pairs similar to JSON objects or other mapping data types. What is a collection? A collection is a grouping of MongoDB documents. A collection is basically an equivalent of a database table in a relational database system. So a collection must exist within a single database. So every database you create must also have a collection. I've logged into my MLab account and under my cluster here, this is my cluster. I'm going to click on the collections button. As you can see, I don't have any collections. So if I scroll down, there's an option here to load a sample dataset or to add my own data. So I'm going to click to add my own data. So here I need to give my database a name and I also need to give a collection. So before MongoDB can save your new database, a collection must be specified at the time of creation. So remember that a collection is equivalent of a table in a relational database management system. I've given my database a name. I've called it BLS. I've also given the collection a name. I've called my collection node app. So I'm going to click on the create button. As you can see, the database has been created. The name of my database is called BLS and the name of the collection is called node app. Any data that's been inserted into the database can be viewed from the collections tab here. So if you are inserting data from your application into the database, if you click on collections, you'll be able to view the data that has been inserted from your application. In this video, I created a new database and also added a collection to the database. Thanks for watching. Bye for now. Hello and welcome to this video. In this video, I'm going to create a new database cluster user account. This is going to be the account that's going to be used to connect to the MongoDB cluster database. I've logged into my MongoDB account and this is my cluster page. So on the left, we have database access. So click on database access. This is where you add a new database user. So on the button here, there's add new database user. So click on that. On this page, you have to specify the user name for the account and then you enter a password. I've entered a username of admin and I've also entered my password. And then here on the database user privileges on the dropdown here, gives you the types of privileges you can give to this account. So you can have the built-in roles which are admin, atlas, read and write to any database. So I'm just going to click read and write to any database. You can always come back here and amend the built-in role. So I'm going to select this read and write to any database. Once the user account has been added, you can see the username here. It says admin and then tells you the authentication method and tells you the roles that the user can perform on the database. So you can read and you can write to any database and then you can edit. So if you want to edit the details, you can click on this edit. If you want to delete the user, you can click on this delete button and that will delete the user. And you can always add more users by using this add new database user. And when you add more users, you can give them a variety of roles that you want them to have on the database. So that's it for this video. In this video, we created a new database user for our MongoDB cluster database. Thanks for watching. Bye for now. Hello and welcome. In this video, we are going to install Mongoose. What is Mongoose? Mongoose is a MongoDB object modeling for node.js. Mongoose allows us to elegantly work with our MongoDB database with object schemers. Object schemers are JavaScript objects we create that will represent the type of data we will be putting in our database. Even though MongoDB is a no SQL database, it does not have a proper structure. However, with Mongoose, it allows you to create a bit of structure. And this gives us some benefits to enable us easily interact with our data through objects and other things such as validation. We're going to install Mongoose using the nodes package manager from your project. So open up your terminal in the directory of your project. I'm using Visual Studio Code. So I'm going to call View and go to my integrated terminal. And that should map straight to the path that I want. That's my path here for my app. So to install Mongoose, you type in npm space, install space, dash dash save, the dash dash save enables you to save Mongoose as a dependency into the package.json file. Space, then you type in Mongoose. And then press enter and wait for the installation to start. So it's going to try to contact the package repository and then pull down the Mongoose package. So sometimes that may take a little while. So give it a few minutes. Okay, so it looks like it's made some contact. So it's pulling the package down. So we just wait for it to fetch it and then install it. So the package has been installed. You can see here it's added 18 packages from 12 contributors. So we now have Mongoose installed. If we open up our package.json file, you should see listed as a dependency. So this is a package.json file and you can see Mongoose listed there. Hello and welcome. In this video, we are going to connect our node application to the mLab database. In a previous video, we installed Mongoose. So what we need to do now is require Mongoose into our app. So open up your server.js and just underneath the socket.io where all the variables are listed, just tap down and we create a variable and we'll call the variable Mongoose and then we'll require that in to type in require and inside inside the parentheses for the require, we pass in the value of Mongoose. So next thing we need to do is to try to connect to our mLab database and connect mLab to our application. We need some connection details from mLab. So log into your mLab and then double click on your database name. Just wait for it to come up. Actually, before you do that, I want to create a new user account. So I'll click on the users tab. I want to create a new user that's going to have a username of admin. I'm going to use that. So click on add database user and just type in admin and then give it a password and confirm the password. Once you've confirmed the password, just click create and we'll wait for it to create that account. So that's, we've got two accounts now, but the one I'm going to use is the admin account. So now that we've created the second account, let's scroll back up and get some information. So what we need, we need the connection string. Okay, so this is the connection string. This is what we need to just copy this, this line of code here, copy all that, maybe paste that into a blank text editor, a blank note. So make sure you have the link copied in there. So once you've copied the link, open up your server.js file. And what we're going to do here, we are going to create a variable for that. So just on the above the messages array, just tap down here, and just create a variable. So I'm going to create a variable. And I'm going to call it database URL. So it's going to be db url. And I'm going to set that to equals to the link that I have copied across from Mlap. So set that equals to this link here. You have to actually put your actual database username there. And also you need to put your actual password. Okay, this is because this is a demo, but in a typical production environment, you would not do it this way, because it's not safe, you would have to put it in a special configuration file that is encrypted or something. But because this is just a test, we're going to include it in the document. So here, I'm just going to reference it. So make sure you enclose it in quotes. Because it's a string connection string and click paste. Okay, so just paste that in there. And that will paste the full part. Okay. So you need to actually change where it's got db user, you need to replace this and put your actual account name. So you remove like the angle brackets, remove all that and just type in admin. I'm going to use my admin account. And then where it's got db password. Get rid of that and put the actual password that you have used. So once you've entered your details, your actual username, your actual password, just click on save file save, make sure you've saved it. So to connect Mongoose, if you scroll down to the bottom of your server.js file, just underneath the IO dot on. So I'm just going to tap and just tap down here. So the first I'm going to do is use the Mongoose connect. So you type in Mongoose dot connect. And inside the parentheses, we're going to pass in the variable, this variable called database URL, we're going to pass that in as the parameter that's going to be the first parameter. So we type in db URL comma. And then for the second parameter, we need to pass in an error object just in case something goes wrong and there's an error. We want the error to come up. We're going to use an arrow function for that. So you do an arrow function and then the curly braces and tab in between the curly braces to separate the curly braces. We're going to log a console message. So we're going to type in console dot log. And inside the parentheses, I'm going to pass in a message that says MongoDB connection successful, but you can put in whatever message you like. It doesn't really matter. So let me quickly explain what I've done here. So I've used the Mongoose dot connect and I've passed in, oh, I got that wrong. It should be db. I passed in the connection string, which is this db URL here as the first parameter. And then I've supplied a callback that will take an error as the second parameter. All right. And then I put in a console dot log. So if the connection to the Mongoose, Mongoose connection, which is a connection to mLab, if that is successful, this text message will display. If not, we'll get an error. So I'll save that and we'll quickly test that in the terminal. I'll click save. And I open up my integrated terminal. I'll go view, integrated terminal. So if you're not using Visual Studio, you can do that on whatever terminal you're using. So just type in node, space, server, server dot js and press enter. And we see what happens. If everything works okay, we should get a message display. Excellent. So everything is okay. Servers listening on port 3010, MongoDB connection successful. Now that we are connecting to our mLab database, we now have to try to see how we can start saving data into Mongoose. So we'll try and do that in the next video. Thanks for watching and bye for now. Hello, and welcome to this video. In this video, I'm going to set up connectivity to the MongoDB database on mLab. I've logged into mLab. And inside this cluster page, you have this connect option. This is where you set up connectivity to this MongoDB cluster database. So click on the connect button. And this is where you have to set up the connection settings. So there are different steps. So you can add a connection IP address. So if you want a specific IP address, then you can add that, you can add a different IP address, or you can click to allow access from anywhere. So I'm going to click on this option because I want people to be able to access from wherever they are. So I click, allow that. And then you click this button to add IP address. And that will automatically set that up. So that has now set up the connection settings for connectivity to my MongoDB cluster database. So once you've done that, you can click on this choose connection method. And these are the different ways you can connect to the database. So you can connect with the MongoDB shell, you can connect to your application. So this is the option I want, or you could connect using MongoDB Compat. So I want to connect my application to my MongoDB database cluster. So I'm going to click on this option here. So what you need to do here is click on this option here and that will copy this link. Now this contains information to connect to the database. So here you have to replace where it's got password with the actual password for the admin account or whatever user account you set up to connect to the database. And then you have to replace this string or text that says my first database with the actual name of the database that you're connecting to. So it's very important you keep this information safe. This is the information you're going to require to connect to the MongoDB database server from your application. So for your application to be able to interact with this MongoDB database server, you need to add these connection strings to your application. In this video, I set up connectivity to the MongoDB database cluster server. Thanks for watching. Bye for now. Hello and welcome. In this video, we are going to start saving data to MongoDB using Mongoose. In order to start saving data with Mongoose, we need to set up some kind of structure, which is going to be a model and also a schema for a message object. So let's do that inside our server.js file. So we're going to create a new variable just above the messages array here, just above this message array here, we're going to create a new variable. So to create a variable, you type in var. And I'm going to give the variable a name, I'm going to call it message. Notice that the name I've got a capital M, the capital M basically is to indicate that it is a model. Okay, and then we're going to set the value to the Mongoose model. So we'll type in Mongoose dot model. And for the first parameter, we are going to specify what we are going to call it. So I'm going to open up the parenthesis. And the first parameter, I'm going to call it message uppercase M. And then we will pass in our schema definition, which will be an object with the properties. So we're going to give greater an object and also give it a property. So we'll do a comma and then curly braces tab down. And in between the curly braces, we will specify the properties for the objects. So the first object is going to be a name. So we'll type in name and the value is going to be a string data type is going to be a string. So put a comma and tap down. And then we'll enter our message property. We'll type in message. This will be lowercase this time. And the type will also be a string. That means the type of data we expect in there is going to be a string data type. So make sure you save the changes you've just made, click save. Now that we have a model, let's create an object based on that model. So we're going to do that inside the post message function. So if you go down, scroll down into your post message function. So this is the post message function online 29. So let's add a variable at the top. So just going to tap and create a space and we'll add a variable here. So to add a variable, type in VAR space, give it a name and we'll call it message. And we'll set that to equals to new message, which is the M is uppercase. And we'll pass in a request dot body. So what I've done here online 20 online 30, I've created a new variable called message. And I've set that to equals to new message. And also I have passed in the request body, request a body since it contains our message definition. Next, let's save it into MongoDB. So let's tap, tap down after the variable. And we will use the message dot save. And we can pass in a callback that takes an error in case it fails. So we'll type in message dot save. And we'll pass in an error in case it fails. We're doing this using an arrow function. So you do the symbol for an arrow function. And after the error function, we need the curly braces. So just tap to separate the curly braces. Make sure you wrap an extra parenthesis around the message dot save. So you should have a parenthesis and inside that parenthesis is where you enclose the error. Okay, so make sure the structure is this way the way I put mine. And in between these curly braces here, I'm going to specify so that if there's an error, it will send a status of 500, which is a server error. So we'll say if error send wanting to send a status, we'll say send status. And then in parentheses, we'll pass in the value of 500. So if there's an error, it will send the status of 500. The error of 500, the status 500 is basically a server error. If there is no error, let's move the rest of the functionality into the save success block. So this functionality here, let's grab that and just cut. And let's move it, just tap down and we'll move it into the same block here. So let's save our changes and then open up the front end of our application. Before you open up the front end, you need to start the node server. So click on Integrated Terminal. If you're using Visual Studio Code, if not use your terminal and type in node space server dot js to start the server. Start your application front end by typing localhost colon 3010. If you're using 3010 as your port or whatever port you've used, and that should give you your front end interface, you can resize it if you want. And then just type in a random message and see if we can see that appear in MLAB MongoDB. So I'm going to type in, I'll just say put a new user, I'll just say this guy is James. And James says, Hello, guys. We'll send that. If the new message you've typed in does not show up here, there may be something wrong with your connection string. So you need to go back and check in your DB URL variable, make sure that the connection string is set up properly. Once you've done that save, and then restart the server, make sure your server port is listening to a port, and make sure your MongoDB connection is successful. You can see here says one user connected. So let's go back into the front end. So I've typed in a message, I'll click send, and just wait for it to show up. So the new message I've just typed in, you can see that it has showed up here. It says Hello, guys. So if now I need to go into MongoDB now via MLAB, and check in the collection. So just refresh once you're back at MLAB, and just click on collection. You can see here, we've got one message here. So if I double click on it, you can see the actual message. That's a message here. You can see the display it says name, James, message, Hello, guys. All right, so we are successfully saving data into the MongoDB via MLAB. All right, so that process has been successful. So we have proved that we can now save data directly to MongoDB in MLAB. So next thing we want to do is we want to remove this message array here so that you can dynamically just enter details into the front end, and post your messages, and it will appear in MLAB. So we'll do that in the next video. Thanks very much. Thanks. Bye for now. Hello and welcome. In this video, we are going to update our app so that it no longer uses the message array. So let's open up our server.js file. We're going to make some modifications. So online 34 here of my code. I'm going to take out this line here that says messages dot push, we're not going to be pushing the messages anymore because we've hooked up to MLAB. So they're going to go directly. So take out that line of code that says messages dot push, request dot body, take that out. And then let's go to our app dot get function. So instead of sending our messages, we buy a post. So we're no longer going to be sending the messages array, we're going to be sending our messages from MongoDB. So above that, I'm just going to tap down. I'm going to add a message dot find just online 26. So we type in message in uppercase dot find and it's and then includes the parentheses and inside the parentheses, you had the curly braces. So let me explain the code I've added here on line 26 to line 29. So here I've added a message dot find. And basically what I'm doing here more so setting it to an empty object so that all the messages that will get from the database will be passed in. Hence, I'm not passing in any requirements into the parameters. And then I've also set up a callback that takes an error and also all the messages it finds. Okay, so that's basically what this block of code is doing. What I can do here, this response or send, I can now move that and put that in here as well. Okay. And then I'll save, click file and save. So once you've got that saved, you can get rid of the messages array, which is this one here, just highlight and delete. Since we're going to be entering dynamic messages into our application from the end. So just click file and just save your work. Before we test our app, let's make a slight change in our index dot html file. So go back to the index dot html file. And I'm going to rename one of the function. So this function here called add messages, it was add messages, take out the s, make sure it just says function add message. So remove the s and also here online 44 for the data dot for each, make sure that you remove the s as well. So it must say add message. And also the name of the function must also say add message. So once you've done that, click file, save. And let's test. Let's run the server dot js inside our console. So I'm going to use my integrated console inside your studio code. I'll go view integrated terminal. And I'm going to type node space server dot js, press enter. And we just wait. All right, the server is listening on port 30 10 Mongo connection successful. So I've hooked up to M lab. And the same one user connected. So I've already caught my app, I'll just refresh that. Okay, so this was the last message that I saved on MongoDB in M lab. I would always recommend sometimes when you're running your application or testing things, it's good to have the console open so that if there's any errors, you can catch the errors in the console. Because it's quite a good place to catch errors. All right, so let's add someone else. Let's come here and type in Lucy. And Lucy says, Hi, and I'll click send. And you can see here it showed up immediately. If I click on the network tab here, the network tab basically shows you everything that's been loaded for the app, we can see here where the message is loaded. We've got socket IO got bootstrap jQuery. So this just tells you everything you can see here we've got a lot of status 200, which means all the data have loaded. Okay, so let's go back into M lab. So we can see this new entry we've just entered. So I'll go to my M lab. And if I refresh, you can see my document count should now say to you can see a document is to and you can see the collection here got collection here is called message. And the document is to all right, so if I if you want to see the structure again, just double click on it, double click. And you can see the actual structure of the records. So if you want to delete any records, there's an option here to delete. If you want to edit, there's an option here to edit the document. So you can see now now have two records inside my MongoDB, which are these two records I have specified. So if your if your app front end gets too clustered with messages, you can come back to the backend inside M lab and just delete it by these options. Okay, so if you want to return to the main interface, just click on home. And once you're in the home, if you want to go into your database, just double click and keep an eye on the size as well, because you only allowed half a gig. So if it gets too big, then you may have to be requested to make some payments. So if you just want to click your database, just double click. And then you can see what's going on inside your database. So at the moment, we've got the one collection, and we've got two documents. So this concludes the implementation of the collection of the node.js app to MongoDB. So we have removed the messages array. So we're now able to enter dynamic messages into the front end of our app, and then send it. And it goes directly to MongoDB in M lab. And even though if we refresh our tab, our web browser, the message is still persistent. So the only way you can get rid of it is through the backend in MongoDB via M lab. Thanks so much for watching. Bye for now. Hello, and welcome. We have created a working chat application for you to be able to communicate with friends and family. You need to be able to host the application on the internet. So I'll go through the steps that you will need to follow in order to make this possible. So there are several things you need to do before you finally deploy and host your app. And there are several hosting sites that you can use. But one of the most popular ones, which also allows you to host applications for free is called Heroku. So we're going to be hosting the application on Heroku. So I'll walk you through how to create an Heroku account and also how to install the Heroku command line tool. You will need that in order to deploy the app to Heroku. We're also going to need to push the application to Heroku using Git. Git basically is a distributed version control system, very, very popular version control that helps you track different versions or iterations in your code. So we're going to install Git and initialize a Git repository before we can deploy our application to Heroku. We're also going to need to create a file just a blank file. This file is going to be called a proc file. It hasn't got any file extensions. Inside this file, we're going to create just one line of code. And the line of code that we'll create in this proc file is basically going to tell Heroku where to start your application from. Also, we're going to have to make some modification and edit to the index.html and the server.js. Since we're not going to be running the application locally, we're going to be hosting it, we need to make some changes in the index.html and server.js file. Thanks for watching. Bye for now. Hello and welcome in this video. We are going to download and install Git. Git is a distributed version control system and is free to download and use. You can download Git from this link here. So let's head over to the download page. So this is the download page for Git. So depending on your operating system, so choose the operating system relevant to you and just follow the on screen instructions. I'm using a Windows computer. So I'm just going to click on the Windows option and click download. And I'll just wait for the download to begin. So that's my download there. It has started. So I'll just give it a few minutes to complete. So the download has completed. So I'm just going to double click to run the executable file. So I'll click run. I'll just wait for the setup files to get ready. And just click next and just accept all the defaults and click next. And the same here just same here is going to use them as the default editor. So you can click on the drop down and select your text editor if it's listed. I've got Visual Studio code. I'm going to use that as my default editor. So I'll click next. And here's gives you different options here based on the adjustment of your environmental path. It's suggested that you use Git from the Git Bash only. So this is the safest choice as your path will not be modified. So I'm going to go for that. Click next. I'm just going to accept the default. Click next. Again, accept the default. Click next. And click next. And just click you don't want to enable Git credential manager. You can uncheck that and click install. He says give credential managers for Windows provide secure Git credential storage. So if you want that you can check that but I'm not going to use that. So I'll click install to begin the installation. So it might take a little while depending on how fast your computer processor is. So once the installation has completed, you get this option. So you can uncheck that. I'm going to launch Git Bash. So I'll leave it checked. I'll click finish. And I wait for Git Bash to launch. So Git Bash has launched. The first thing you should do when you install Git is to set your username and email address. This is important because every Git commit uses this information. Okay, so let's start by setting that up. So you do to set up let's set up the username first. So you type in Git GIT space config that space dash dash global space user dot name space. And then you can close your name in quotes. Okay, so I'm going to say blue lime. I'm going to type in 247 learning. So that's going to be my username. So I press enter. So I've got that set. Next thing I want to do is set up my email address. So it's the same format. GIT space config space dash dash global space user dot email space. And then you specify your email address, you don't need to enclose your email address in quotes. So I just type in my email address. Okay, gmail.com and press enter. So I've now set up my identity on the Git. So anytime I set up a repository or push something, it will have those details on there. If you want to check your settings for your Git setup, you just type in GIT. And you type in config, you do a space dash dash list. And that one press enter. And that will list all the configuration details what you've set up to give you your username tells me about my username and give me my email address there. So it's quite a useful command to type if you forgotten your username. And you just want to check things out. So that's it for this video. So we have installed Git. We've also configured our identity on Git. Thanks for watching. Bye for now. Hello and welcome to this lecture. In this lecture, I'm going to walk you through some basic Git configuration. There are three places that Git stores configuration information. And depending on how widely we want those configurations to apply, we can choose which option you want. The first and largest place is the system. So we've got the system level configuration. This is configuration that ought to apply to every user on the computer. So any changes you make towards system configuration, we will apply on a system based level. So regardless of who uses a computer, the configuration will apply. Obviously, these configurations will be default at the system level. But whoever logs on, if a new user logs on, it will assume it will impact their own configurations on the default. The next place where configuration information is stored is at the user level. So this is based on individual users. Now the user base configuration is the most useful place to store configuration because it's set at the user level. And the setting doesn't apply to anyone who logs on to the computer, it applies just to the single user. And the final place where configuration settings can be stored is at the project level. So if you are doing a project and you want these configurations to be unique, you can store the configurations on a project by project basis. So what that will happen that in a single project, we can have configurations that apply only to that project. The most common of this is the user configuration. This is where most configuration changes are done. Git has a special command that you can use to make configuration changes. So if you're making configuration changes on the system, the command you need to use is git config dash dash system. If you are making changes or configuration changes to the user, the command you need is git config dash dash global global global indicates is global to the user. It doesn't mean the entire system. If you're making configuration changes to at the project level, all you need is just git and then config. So we're going to make changes to the user configuration level. So to make changes, I'm going to open up git batch. I'm going to my program files and look for the git folder. This is a git folder. And I'll click on the git batch to launch git batch. So to make changes, what I need to do is type in git space config, and then space dash dash global, which indicates I'm making a making changes to the user user level. So dash dash global, and then space, and then I need to specify what changes I'm making. I'm making changes to the name, user names. I'll type in user dot name, and then in quotes, in double quotes, I need to put my name in between the quotes. So I will type in blue line, space learning. In your case, you need to use your own name, and then press enter. All right. So by doing this, git then adds that to the configuration file. So let's make another configuration change. This time I'm going to add an email. So the process is the same. So type in git space config, space dash dash global, space user dot user dot email. And then in quotes, I will place my email address in between the quotes. So once you've typed in your email address, press enter. And that will be added to the configuration files. If you want to see the configuration, the changes you've just made, you can type in git space config, space dash dash list. And if you give you a list of the configuration. All right, so that should give you a list of your configuration settings. Hello and welcome to this lecture. In this lecture, I'm going to walk you through how you can retrieve specific information from the configuration files. Say for example, I want to check the name in the configuration file. So the command I will use to do that will be git space config space user dot name. And then I press enter. And that will display the name entered or stored in the configuration file. If you wanted to check for the specific email in the configuration file of the user, you do the same thing. You type in git space config, space user dot email. And then you press enter. And it will show you the email that they have stored in the configuration file of the user. You can also use a specific UNIX command to get all the details of your configuration files. So the command you will use in UNIX is called a cat command. So you type in cat space dot g i t forget and then config any file with a dot beside it is a hidden file. So you will not see it. For example, if you go to the directory, you won't see it. Anything with dot on it is actually hidden. You can only see it from the command line console. So if I press enter, this will give me the same details. It gives me all the settings for the user configuration files. The minimum configuration you need to start working with git is basically a name and an email address. As time goes on, you can add to the user configuration file. Hello and welcome. In this video, I'm going to guide you through creating a Heroku account. I've already got an account, but I'll just try and walk you through the process as much as possible. The link to the Heroku website is displayed on the screen. Heroku dot com. So let's head over there. Heroku is a cloud hosting services that enables you to host your applications remotely on the cloud. And you can also do it for free. If you're doing it for free, the personal plan allows you five applications. So you can't have more than five applications for free. If not, you're going to have to delete one in order to create more. If you want, if you have several applications you want to deploy. All right, so to use Heroku, you need to have an account. So just click sign up for free and just enter your details. I'm just going to try and walk you through because I've already got an account. So enter your details in this area here. The fields that I've got asterisks on it, they are required fields. You must provide information for them. So do that as possible with the details you've got. And then when you're done, you click I am not a robot and just follow any on-screen instruction. Once you've done, click the create free account. That will then give you another screen to tell you you're almost done. It will send you an email. You need to look for that email. And you need to click on the link that Heroku sends you. Within that link is going to be a confirmation because you need to confirm that you've set up the account. Once you've clicked on that link to confirm the account, Heroku then presents you with another page that you can set your password. So once you've set your password, and then that allows you to log into the actual application. Once you have created a password for your Heroku account and logged in, you'll be presented with this interface. And here listed are different programming languages that you can create applications for and deploy to Heroku. So that concludes the creation of the account on Heroku. Thanks for watching and bye for now. Hello and welcome. In this video, I'm going to guide you through installing Heroku CLI. The Heroku CLI is a command line utility that allows you to interact with Heroku from the terminal or the command line. You can download the Heroku CLI from this link displayed on the screen. I have already got it installed. So I'm just going to guide you as to how you can go about it. So this is a download page. So depending on the operating system you're on, just download the relevant installer and just follow the on-screen instructions. If you are on a window, you can download the relevant. If you're on a 64-bit or 32-bit, just click to download the relevant one and just follow the on-screen instructions. I'm just going to download this. I've already got it. So I'll click on it again so I can show you how I installed it. So just double click on it and click yes to run. Just accept all the default. Click next. Just accept all the default location. So once the installation is complete, you get a notification saying installation complete. So you can click on this closed tab. So that concludes the installation of the Heroku CLI tool. Thanks for watching. Bye for now. Hello and welcome. In this video, we are going to initialize our Git repository. Before you can deploy your app to Heroku, you need to initialize a local Git repository and commit your application code to it. Before we initialize the Git repository, I want to create a proc file. A proc file is a file that contains some code that will tell Heroku where to start your application from. So inside Visual Studio Code, I'm just going to click on this icon to create a new file and give it a name of proc file. It's very important. The P has to be in uppercase. Very, very important. If not, it will not work. So make sure that the P is uppercase and just say proc file and press enter. You don't, it does not have any file extension. There's only one line of code you need to enter into the proc file. So you type in web, which tells Heroku that the type of application is a web. And then you type in node, and then it's a node application. And then I want it to start from the server.js file. So that's it. Just one line of code. That's all you need inside your proc file. Just click file and save that. So you've got your proc file sorted. Next, we are going to use the command line tool to initialize our Git repository. And I'm going to be using git bash. So click on the git folder. If you installed git, it would have installed git bash. So click on git bash, which is also a command line utility, which is what I'm going to use. Just going to drag that to expand it. So the first thing you need to do is go to the directory where your node application is. So you don't see the mine is on my desktop. So I do cd desktop. And then cd to the name of the app. Mine is called let's chat. That's the name. Press Enter. So if you can see that, that means you are in the right directory. So I'm now in the directory where my application is, which is this directory here. Let's chat. So I'm now there. So to initialize an empty git repository, you just type in GIT space init and press Enter. And that will initialize the repository. So now we can copy all our files to the repository. But before we do that, I want to make some changes to our index and server files so that the changes will be reflected when we deploy the application. Since we're not longer going to run the application locally, we need to make some changes. So open the server.js file. You can see all these files you have done green because I've initialized the git repository. So I'll click on the server.js file and go up to where you've got the variables listed. I want to create a variable and set that to a port. This is because when you deploy your app to Heroku, it dynamically allocates a port for your application. So we don't want to fix a port in case Heroku gives us a different port and that way we'll get stuck. So to do that, you type in VR, create a new variable. I'm going to set that to port. The variable name is going to be called port. I'm going to set that to process.env.port in upper case. And then you do the pipe symbol and 5000. So what I'm saying here is that Heroku can assign any port. But if Heroku doesn't assign a port and I'm using this locally, then I want it to run on 5000. When your node application, when the process puts up, it automatically provides access to all existing environment variables. Hence I've got this dot env environment by creating an environment object. So this is an environment object as the property of the process, which is a global object. This process a global object. So basically, what I'm saying here is that I want Heroku to automatically assign a port for my application to use. And I've also said or we can use 5000. So if Heroku doesn't assign a port, it will default to 5000. Next thing we need to do since we've set up the port variable on top here. On line seven, we need to change that at the bottom here. On line 46, we need to change the parameters. So here instead of passing in my port 3010, I'm going to pass in the name of that variable I've just created called port. I'm going to pass that value in there. And on line 47 here, I'm going to amend here as well. I'm going to get rid of this server address and just leave the port. And inside this text here, I'm just going to say server listening on port, whatever port is listening to, it will display that port. Okay. So that's it. That's the amendment I want to do for this server.js, I'll save that, click file and save. For the HTML index, we're going to make some changes later, but we'll do that after we've modified after we've created the Heroku app, we're going to change this location because at the moment, he's going to get the messages from this local host. So we'll change that after we've deployed, once we've get an address for our application, we'll come back here and change that. So we want to do that now. So that's all the changes for now, we'll come back to the index later. If you're using Visual Studio Code, you can see here, this here that's got two K plus, this is the git repository that we initialized. So now what I want to do is add all the files from my application to the git repository. So to do that, you type in GIT git space, add space dot and press enter. And that will add all the files to the repository. So give it a few minutes for it to do that. So once all your files have been added to the git repository, the next thing we need to do now is commit them to the repository. If you are using Visual Studio Code as your editor, you may be surprised why all these files here are showing as green. This is because we've added them to the git repository, but we've not committed them yet. So it's just showing telling us here, because this here is a symbol, this here is git, it's connected to git. So it's telling us we've got files that we've not committed. So let's go ahead and do that. So to commit the files, you just type in git git space, commit space, minus M, the minus M basically allows you to specify a message for your commit. So you go to enclose it in quotes, because it's a string or a text. So you say, you can say anything you want. I'm just going to say for mine, I'll say my first commit. And I'll enclose that in quotes. So that's it. And just press enter. And that should commit the files that we've added to the git repository. So once you've committed it, you can see here, all these files now is now says create, create, create. So if I go back into my text editor, you see, you see that they've not, never changed, they're no longer green, because the files have been committed to the git repository. So that's it. We have added our files for our app to the git repository. So now we can track any changes we'll make to the application. Thanks for watching and bye for now. Hello and welcome. In this video, we are going to create an Heroku app. Before you can deploy your own application to Heroku for hosting, you need to have an app on Heroku that will house the application you're trying to deploy there. So we're going to use the Heroku CLI tool, which is a command line tool that allows you to interact with Heroku. We're going to use that to create a new empty application on Heroku along with an associated git repository. To begin, let's open up the command line. I'm going to be using the git bash utility. So I'm going to click in some my git folder and click on git bash. When I installed git, I chose this option to use this git bash for my interaction with git. First thing I need to do is change to the directory that contains my application. So I type in cd to desktop because the application is located in my desktop. And once I'm in my desktop, I do cd again to change to the actual application. So my application is called let's chat. So I've now changed to the directory that contains my application. Next thing I want to do is login to Heroku. If you're using the git bash to access Heroku from the git bash, you need to type in W I N P T Y space Heroku space login and press enter. This is only if you're using the git bash to if you're using normal terminal, we should be able to just type in Heroku login and that will give you your credentials. So pop your email in there and also enter your password. Once you've logged in, it will say logged in as whatever name you are logged in at. So now that we've logged into Heroku, we can interact with it now. So I'm going to create an empty application on Heroku. When you create an application on Heroku, Heroku would automatically create it for you and randomly generate a name. So you type in Heroku, space create, and then you press enter. We'll wait for Heroku to generate. So it's creating the app. So Heroku has created a app called boiling dash wave and then this number. This is unique. So even when you are doing yours, yours cannot be the same as mine because it has to be unique. So this is what Heroku has created. So we now have an empty application on Heroku. Now it's time to push it to Heroku using Git. So to do that, we type in GIT, Git, Push, Heroku, Space Master. Then press enter. And this should push everything we've got on the Git repository up to this application. Yeah, this empty application that's been created for us by Heroku. So I'll just give it a few minutes to complete. So if the build is successful, you have this message here, same build succeeded. And then what Heroku does, Heroku creates this link for you here. So this is the link that you wouldn't use to access your app. And if you share this link with any of your friends and family, they will be able to interact with you on this link using the app. So I'm going to copy this. I'm going to open up my web browser and paste that link in. So as you can see, this is a link to my Heroku app, which is hosting my node application. You can see now I'm connected to the interface. So I'm just going to do a quick test. I will call this say Anna. Hello, I click send. All right, so you can see in here that the messages that we've already got on our database are not showing up here. Also, what we've just sent here also is not listed. So if I click I'm going to inspect, so let's go to check the console. The console is a good place. So it's telling you here that something has failed to load, say connection refuse. So means there is some issues here. So I'm going to go, I think I know what the problem is, I'm going to go into index.html file. So if you go into the index, you can see that this link here where it gets the messages from is pointing to the local host. And this post message also is pointing to the local host. So what we need to do is grab the link address for your Heroku app. Yours will be different from mine. So just copy your link address. And then you just replace this bit, replace it with leave. Just take that out and just paste. Right click paste. Yours will be different from mine. So don't use my link. And then do the same here in the get message messages function. Get rid of the local host. And just right click and click paste. All right. So yours should reflect your own link. And then I'll click file safe. Anytime you make a change in your files, you need to update that and push it out to get you can see here inside my editor is in M, which means I've modified this file. So I need to commit that to the git repository and then push it back to Heroku. Because I've made a change, I need to check the status of my git repository. So I type in GIT space status and press enter. It's telling me that I've modified this file called index.html. So what I need to do now is type in git space commit dash am and then add a commit message. I'll just say index modified. Now press enter. It tells you one file change to insertion. So now I need to push that back to Heroku. So I type in git push Heroku space master and press enter. And that will push the changes back to Heroku. Okay. So the deployment has been completed. The build is succeeded. And again, it pushes whatever update to the same location here. So this is the URL. So I'm just going to open it back in my web. So once you refresh your app, you should see your messages that were stored in the database listed. If you've got any error, you should see it in the console. So it's a good idea to have the developer console open if things are not going well so that you can see where the error comes in. So I can see my console is clear. If I go into my network, there's no issues here as well. So I'm just going to add one more message here. I'll just type in Andy. And Andy is going to say hello as well. I'll click send. And you can see that has shown up straight away. So the application is ready. So all I need to do to communicate with my friends and family is to send them this link here. And we can start communicating. If you find out that the message area here is getting a bit crowded, you could go back into the Heroku into the mLab database and just delete some messages from mLab. So if you go back to your mLab here, you can see here the collections, which is the messages shows that you have three documents. So if you want to delete any, just click on the messages and then you can just click on the delete option. If you are experiencing any issues where your messages are not showing up here, look out for any errors that may occur inside the console. Also in your index.html file, make sure that your path is set up correctly and make sure you have just one slash, rather than double slash next to the messages. So as long as your setup is okay, if the links to your Heroku application is set up correctly, everything should work. If not, look in the console and also feel free to contact me. So this concludes the deployment of our application. Anytime you make changes to your files, you always need to commit the changes and push it back to the Heroku application using git push. Thanks for watching. Bye for now. Hello and welcome. In this video, I'm going to show you how to check your Heroku logs from Heroku. So you need to log into your Heroku account. Once you log into your Heroku account, you will see all your applications listed. So this is the app that Heroku created for me. So this is the app that I'm using to host my node application. So you can see here it says Node.js Heroku. And you can also create a new app using this option here. So double click on this app on your app. If you have more than five apps on Heroku, you'll be required to pay unless you delete one. So you can delete, you can deploy up to five applications for free. If you decide you don't want to pay, then you can delete one. As long as you keep the applications under five, you should be okay. So double click on the app. And then if you look at Deploy and that will end and click on Activities. And this will show you all the deployment activities. If you want to check the logs, you can click on this option here. That says View Logs. You see it tells you all the build that you've done so far. Click on View Logs. And that will give you a log. So if there's anything that goes wrong with your deployment, you can always look in the arrow logs to see what has gone wrong. So it's a very good resource to check if your application does not build or does not load correctly.