1 00:00:04,380 --> 00:00:05,490 In this video. 2 00:00:05,490 --> 00:00:10,230 Let's see how we can implement routine inside our server. 3 00:00:10,320 --> 00:00:12,200 So this where we left. 4 00:00:12,210 --> 00:00:18,060 So the first thing is we need to find a way to run this particular server. 5 00:00:18,240 --> 00:00:23,520 So to be able to run express server, let's follow these steps. 6 00:00:23,520 --> 00:00:32,549 So step number one is let's go to the package dot JSON file and here we have a property code script. 7 00:00:32,670 --> 00:00:36,360 So we are going to configure this one to use our own script. 8 00:00:36,360 --> 00:00:45,210 So let's provide start here and then the value we are going to use Node to start our server. 9 00:00:45,240 --> 00:00:52,770 The next segment is a file that we want to run and that is the server file because that is what we provided. 10 00:00:52,770 --> 00:00:55,320 So we are going to run this server file. 11 00:00:55,320 --> 00:01:03,150 So inside my package or JSON file here, I'll provide server towards JS because this is what we specified 12 00:01:03,150 --> 00:01:03,570 here. 13 00:01:03,570 --> 00:01:09,600 So now after that, let's save the file and now let's get back to our terminal. 14 00:01:09,840 --> 00:01:13,170 So let's see how we are going to run the server. 15 00:01:13,170 --> 00:01:20,340 We are going to make use of NPM run and now the property name here is called START. 16 00:01:20,340 --> 00:01:24,240 So let's provide NPM Run Start. 17 00:01:24,240 --> 00:01:29,100 So let's hit enter and you can see that server is running. 18 00:01:29,430 --> 00:01:32,130 So now how can we implement routing? 19 00:01:32,130 --> 00:01:36,360 So let's close this one and now back to the server file. 20 00:01:36,570 --> 00:01:38,250 So here we go. 21 00:01:38,340 --> 00:01:46,530 We are going to follow the same format as this one now going to provide the HTTP method with this endpoint. 22 00:01:46,530 --> 00:01:47,910 So here we go. 23 00:01:48,210 --> 00:01:56,820 Let's provide a comment here and call it as routing on the app that you got from the express function 24 00:01:56,820 --> 00:01:57,510 call. 25 00:01:57,540 --> 00:02:06,450 We have all the HTTP method, so let's see on the app, if you make use of dot gate, this is the HTTP 26 00:02:06,450 --> 00:02:07,170 method. 27 00:02:07,200 --> 00:02:11,610 If you want post, make use of post and then delete. 28 00:02:11,610 --> 00:02:16,620 We have it as that and then put we have all the HTTP method. 29 00:02:16,620 --> 00:02:18,750 So now let's start with the first one. 30 00:02:18,750 --> 00:02:20,610 Call fetch all posts. 31 00:02:20,610 --> 00:02:21,840 So here we go. 32 00:02:21,870 --> 00:02:28,590 You provide gates and this gate is a function that you provide to a command. 33 00:02:28,590 --> 00:02:33,300 One is a path of the URL which is post. 34 00:02:33,390 --> 00:02:37,620 So it goes like this code and then forward slash. 35 00:02:37,620 --> 00:02:45,900 So first slash represents the main you are URL and then slash this going to be the resource. 36 00:02:45,900 --> 00:02:51,750 Then you provide the callback function inside this gate at HTTP method. 37 00:02:51,750 --> 00:02:54,150 So let's use normal function call. 38 00:02:54,180 --> 00:02:55,260 I'll start. 39 00:02:55,620 --> 00:03:01,350 And inside the callback function we have access to requests and then the response. 40 00:03:01,470 --> 00:03:07,050 So now inside the callback function here we can implement our logic. 41 00:03:07,230 --> 00:03:12,210 So for the meantime, let's just send a static text to the user. 42 00:03:12,300 --> 00:03:13,560 So here we go. 43 00:03:13,560 --> 00:03:15,450 So make use of rest. 44 00:03:15,450 --> 00:03:23,700 And if we want to send a data or a resource or response, a user uses what is called ST and not JS. 45 00:03:23,700 --> 00:03:25,650 We use what is called right. 46 00:03:25,650 --> 00:03:29,640 So here let's provide and says that fetch. 47 00:03:34,090 --> 00:03:35,320 Our post. 48 00:03:36,540 --> 00:03:37,530 Drought. 49 00:03:37,740 --> 00:03:38,250 All right. 50 00:03:38,250 --> 00:03:40,860 So the next question is, how can we test it? 51 00:03:41,100 --> 00:03:45,120 Because if they change it to the server, let's try to restart it. 52 00:03:45,120 --> 00:03:49,230 So let me clear my terminal here and then run the server again. 53 00:03:49,380 --> 00:03:57,000 Now let's open in the browser and make use of looker host Let's look at the port number we use, which 54 00:03:57,000 --> 00:04:03,270 is 9000 localhost, 9000 then four slash posts. 55 00:04:03,270 --> 00:04:11,310 When I hit send you can see that I get back fetch all posts so you can see with express is pretty easy 56 00:04:11,310 --> 00:04:12,600 to get this done. 57 00:04:12,840 --> 00:04:14,040 Do you remember? 58 00:04:14,040 --> 00:04:18,000 And that Node.js to get this done we need to write a lot of code. 59 00:04:18,000 --> 00:04:23,030 So let me show you from previous video and that is core module four for HTTP. 60 00:04:23,190 --> 00:04:30,480 You can say that to be able to send a simple text to the user unless we write these bunch of code so 61 00:04:30,480 --> 00:04:37,050 it accelerates, it takes away all this abstraction from ISE for us to focus on our business logic. 62 00:04:37,050 --> 00:04:39,120 How awesome express is. 63 00:04:39,120 --> 00:04:41,820 So this is what we call the fetch or route. 64 00:04:41,820 --> 00:04:45,060 So here are going to be fetch or post. 65 00:04:45,940 --> 00:04:49,150 So let's also provide the home route, right? 66 00:04:49,150 --> 00:04:52,270 So home roots going to be like this one. 67 00:04:52,270 --> 00:04:57,670 So app, dot gate and then forward slash, that's the home route. 68 00:04:57,670 --> 00:05:04,480 Then you provide a callback function, access to request and then response and here you go. 69 00:05:04,480 --> 00:05:12,880 So for this one, let's send a simple text and let's say that welcome home, let me see home route. 70 00:05:13,390 --> 00:05:17,860 So let's see if you're going to get this message called home route. 71 00:05:17,890 --> 00:05:23,680 So let's go ahead and then restart our server if we see how difficult it is any time make changes to 72 00:05:23,680 --> 00:05:27,790 the file unless we come back here and then restart the server manually. 73 00:05:28,090 --> 00:05:29,950 But we have a solution for it. 74 00:05:29,950 --> 00:05:32,110 So I will show you in just a second. 75 00:05:32,110 --> 00:05:35,110 So let me shut the server and then do the restart. 76 00:05:35,110 --> 00:05:38,710 So let's remove the post here and now hit send. 77 00:05:38,710 --> 00:05:42,250 And indeed I have what is called the home route. 78 00:05:42,250 --> 00:05:44,500 So now we are done with the two route. 79 00:05:44,620 --> 00:05:48,640 So what about this one about posts here. 80 00:05:49,440 --> 00:05:53,460 The difference here is the HTTP method and that is it. 81 00:05:53,460 --> 00:05:56,670 So we can even copy this one. 82 00:05:57,060 --> 00:06:00,210 All right, so and down here, let's paste. 83 00:06:00,210 --> 00:06:03,930 It's going to be as creates post. 84 00:06:07,420 --> 00:06:11,920 I see that the difference here is the HTTP method as post. 85 00:06:12,220 --> 00:06:15,880 We cannot make post requests here because there is no form. 86 00:06:16,000 --> 00:06:22,690 That's why we need a tool called Postman, but let's try it out inside Visual City Code and Node.js. 87 00:06:22,720 --> 00:06:28,600 We installed extension core tender and this one is almost same as Postman. 88 00:06:28,630 --> 00:06:32,630 It helps us to make HTTP requests to the back end. 89 00:06:32,650 --> 00:06:38,820 So here, try to make sure that you have the extension called tender clients. 90 00:06:38,830 --> 00:06:41,710 So if you search for ten dot client. 91 00:06:45,180 --> 00:06:48,960 Now go ahead and install it because I have it already. 92 00:06:48,960 --> 00:06:52,650 And then after that you have this icon here. 93 00:06:52,680 --> 00:06:55,280 Click on that and click on new requests. 94 00:06:55,290 --> 00:07:04,530 So here you provide the HTTP method here, which is post the URL is going to be HTTP colon. 95 00:07:04,530 --> 00:07:08,460 So going to be something like this for s large forest slash looker. 96 00:07:09,510 --> 00:07:14,760 Host Cullen 9000 slash post. 97 00:07:14,790 --> 00:07:19,560 Now, when I hit send, you can see that I get something error here. 98 00:07:19,560 --> 00:07:22,690 Meaning that this post is not found. 99 00:07:22,710 --> 00:07:25,200 I have a status code 404. 100 00:07:25,200 --> 00:07:28,560 Meaning this root is not found. 101 00:07:28,560 --> 00:07:32,100 Meaning that I need to restart the server again. 102 00:07:32,130 --> 00:07:33,240 So here we go. 103 00:07:33,270 --> 00:07:36,720 Shut down the server and let's get going. 104 00:07:36,750 --> 00:07:38,480 So now let's try again. 105 00:07:38,670 --> 00:07:40,650 Hit send again here. 106 00:07:40,650 --> 00:07:42,030 And indeed I have. 107 00:07:42,030 --> 00:07:42,480 What? 108 00:07:42,480 --> 00:07:44,010 Fetch or post? 109 00:07:44,010 --> 00:07:46,800 I think I need to change the text here. 110 00:07:46,830 --> 00:07:56,370 So back to my file here instead of fetch all I'll make use of create post routes as that so let's save 111 00:07:56,370 --> 00:07:56,490 it. 112 00:07:56,490 --> 00:07:59,550 And again we need to restart the server again. 113 00:07:59,560 --> 00:08:03,120 So now don't worry, we will avoid that very soon. 114 00:08:03,120 --> 00:08:11,040 So let's hit send and now see that I have the post route and I can also make the get requests when I 115 00:08:11,040 --> 00:08:18,600 hit send to see that I get the response giving me status code 200 meaning that everything is okay and 116 00:08:18,600 --> 00:08:22,050 this one determines the time I got the response. 117 00:08:22,050 --> 00:08:25,140 So now we have these three endpoints. 118 00:08:25,350 --> 00:08:29,940 The next endpoints are the route is going to be put request. 119 00:08:29,940 --> 00:08:32,159 So let's see how we are going to do it. 120 00:08:32,159 --> 00:08:36,090 So I'm going to copy this same route here and down here. 121 00:08:36,120 --> 00:08:37,679 Let me paste it down here. 122 00:08:37,919 --> 00:08:44,400 The difference here is the HTTP method this time around is put, but you are different. 123 00:08:44,400 --> 00:08:48,990 So here unless you provide a dynamic ID here. 124 00:08:49,200 --> 00:08:51,690 So here is semicolon id. 125 00:08:52,140 --> 00:08:56,640 So we call this one params meaning dynamic id. 126 00:08:56,670 --> 00:09:01,290 So let's see how we can get an id from the request. 127 00:09:01,470 --> 00:09:04,770 Now let me change this one to put again. 128 00:09:04,770 --> 00:09:08,160 Let me save the file and restart the server. 129 00:09:09,170 --> 00:09:14,360 Restart the server and start and next is let's make the request. 130 00:09:14,360 --> 00:09:22,790 When I hit send where we see that I get HTML meaning that the route I'm trying to request is not found 131 00:09:23,060 --> 00:09:28,970 because the route says that for put it says that post and there is some ID. 132 00:09:28,970 --> 00:09:32,780 So here we can provide any ID, any ID here. 133 00:09:33,020 --> 00:09:36,980 So when I hit send you see that I get the post route. 134 00:09:36,980 --> 00:09:39,140 So let me change the text also. 135 00:09:39,140 --> 00:09:43,790 So here I'm going to be as update post route. 136 00:09:43,790 --> 00:09:46,640 So here I'm going to be update. 137 00:09:46,670 --> 00:09:53,900 Now let me save it and again let me restart the server, click the console and now let me restart it. 138 00:09:54,050 --> 00:09:58,580 So again, let me make the request and see that update route. 139 00:09:58,670 --> 00:10:04,130 So again, this is really crucial how to get an ID from your route. 140 00:10:04,130 --> 00:10:10,520 And lucky for us on the request we have what is called rect params. 141 00:10:10,520 --> 00:10:21,380 So let's say that we want to get the get the dynamic ID, which is equal to the params. 142 00:10:21,440 --> 00:10:21,860 All right. 143 00:10:21,860 --> 00:10:22,850 So here we go. 144 00:10:22,850 --> 00:10:28,460 So const ID is equal to req dot params. 145 00:10:28,640 --> 00:10:35,120 So if I console.log the ID here, let's see the ID we pass in here. 146 00:10:35,120 --> 00:10:42,710 I want to have access to this ID inside my route so that I can use the ID to fetch a record inside my 147 00:10:42,710 --> 00:10:44,600 database or my file. 148 00:10:44,600 --> 00:10:48,260 So now again, unless I restart the server. 149 00:10:48,260 --> 00:10:49,580 So here we go. 150 00:10:49,610 --> 00:10:52,940 Let's make the request and now let's check the terminal. 151 00:10:52,940 --> 00:10:55,370 And indeed I have the ID. 152 00:10:55,400 --> 00:11:03,770 This ID represent what I use inside my route, which is this, and it's equal to what I provided here. 153 00:11:03,920 --> 00:11:09,530 So here, if I provide, let's say anything here, so let's save it. 154 00:11:09,530 --> 00:11:15,140 And now let me restart the server, click the console and now let's see. 155 00:11:15,140 --> 00:11:18,560 Now let me make the request and hit send. 156 00:11:18,590 --> 00:11:22,550 Now back to my terminal and see that I have anything here. 157 00:11:22,760 --> 00:11:29,900 But by convention you normally use ID, so let's change this one to ID. 158 00:11:30,110 --> 00:11:37,400 So here to get an id, all I need to do is to make use of dot ID, because that's what we got from here. 159 00:11:37,730 --> 00:11:38,330 All right? 160 00:11:38,330 --> 00:11:41,360 So now that's how we able to get the ID. 161 00:11:41,360 --> 00:11:46,580 So as you move on to build the final project, we may need this params. 162 00:11:46,580 --> 00:11:48,230 So take note about this. 163 00:11:48,380 --> 00:11:52,190 And lastly, we need to provide the delete. 164 00:11:52,460 --> 00:11:54,170 All right, so here we go. 165 00:11:54,170 --> 00:11:56,240 So let me copy this one. 166 00:11:56,360 --> 00:12:04,070 And now down here, the difference here also is the HTTP method is around is delete. 167 00:12:04,580 --> 00:12:11,180 And now for delete we need to provide dynamic ID as same as the update. 168 00:12:11,180 --> 00:12:14,570 So here slash semicolon id. 169 00:12:14,660 --> 00:12:16,040 So let me save it. 170 00:12:16,040 --> 00:12:19,340 Now let me change this one to delete post root. 171 00:12:19,490 --> 00:12:26,150 So now let me restart the server, play the console and here we go. 172 00:12:26,330 --> 00:12:27,800 So let's make the request. 173 00:12:27,800 --> 00:12:32,660 Let me change the HTTP method to get and now it follows the same id. 174 00:12:32,660 --> 00:12:35,030 Let me say the sum around the id is 20. 175 00:12:35,390 --> 00:12:36,500 Let me hit send. 176 00:12:36,500 --> 00:12:41,000 Now I get an error because this root is not found. 177 00:12:41,240 --> 00:12:43,970 So instead is deletes requests. 178 00:12:43,970 --> 00:12:48,320 I forgot to provide the HTTP method, so let me hit send. 179 00:12:48,320 --> 00:12:55,310 And if you see that I have the delete root even though the delete and update are the same. 180 00:12:55,790 --> 00:12:56,210 Right. 181 00:12:56,210 --> 00:13:02,030 The endpoint you can see we have post slash column ID, which is the same as this. 182 00:13:02,240 --> 00:13:06,770 So these two root are different because of the HTTP method. 183 00:13:06,800 --> 00:13:08,210 Take note about this. 184 00:13:08,480 --> 00:13:12,530 And lastly, we forgot to implement fetch a single post. 185 00:13:12,530 --> 00:13:16,220 So here we go so I can copy this one. 186 00:13:16,220 --> 00:13:22,520 And then down here I will paste it and change this one to single post. 187 00:13:22,730 --> 00:13:25,520 And here it followed the same root. 188 00:13:25,520 --> 00:13:28,610 The difference here is going to be the HTTP method. 189 00:13:28,700 --> 00:13:31,340 Now you're going to be a single. 190 00:13:32,210 --> 00:13:34,520 Single post roots. 191 00:13:34,520 --> 00:13:36,040 And here we go. 192 00:13:36,050 --> 00:13:41,240 So now let me make the requests again unless I restart the server, don't worry. 193 00:13:41,270 --> 00:13:46,760 In this video you will see how to avoid this using a package called Nordman. 194 00:13:47,180 --> 00:13:48,830 All right, so let me restart it. 195 00:13:48,830 --> 00:13:51,530 And now check it out to make the requests. 196 00:13:51,680 --> 00:13:54,520 Let me change this one to get. 197 00:13:54,800 --> 00:13:56,390 And now let me hit send. 198 00:13:56,390 --> 00:13:59,630 If you see that, I get the single route. 199 00:13:59,900 --> 00:14:00,620 All right. 200 00:14:00,620 --> 00:14:04,430 So these are the operation route delete update. 201 00:14:04,430 --> 00:14:10,070 But there is no resource, but instead it's just returning a static text like this. 202 00:14:10,400 --> 00:14:17,840 The next video we are going to avoid how we are doing the manual restarting and then avoid using this 203 00:14:17,840 --> 00:14:23,660 tool and use a tool called Postman How to use post one to test our endpoints. 204 00:14:23,690 --> 00:14:26,150 Let's get into that in the next video.