WEBVTT 0 00:00.420 --> 00:08.430 Now in the last lesson we tackled how our servers should respond when a client tries to make a GET request 1 00:08.610 --> 00:14.970 on our articles route when they want to fetch all of the articles and we've configured our server to 2 00:14.970 --> 00:20.540 be able to handle that to fetch all of the articles in our database. 3 00:20.550 --> 00:28.540 Now the next one to tackle is what happens when a client makes a POST request to our article's route 4 00:28.560 --> 00:35.850 that should create a new article and add it to our collection in our database. 5 00:35.850 --> 00:44.010 Now here's a tricky one because the client now is going to send data essentially to our server. And at 6 00:44.010 --> 00:46.360 the moment we don't really have a frontend. 7 00:46.380 --> 00:54.480 We don't have a web form, for example, hit submit and it sends the data by making a POST request to this 8 00:54.480 --> 01:00.870 route. Without creating all of that frontend and creating the HTML and designing it up 9 01:00.930 --> 01:07.370 how can we keep it pure and just build our API without the need for building the frontend? 10 01:07.380 --> 01:14.490 Well, we know we have our server that can speak to our database and we're exposing certain parts of our 11 01:14.490 --> 01:22.050 server through the APIs that we're building so that clients can be able to work with our server and with 12 01:22.050 --> 01:23.140 our database. 13 01:23.310 --> 01:25.750 Now the client can be a number of things. 14 01:25.860 --> 01:32.430 It could be a browser which is trying to load up a web page in which case it will make a GET request 15 01:32.490 --> 01:41.220 to our server via our API and our server will send over the relevant HTML, CSS and JavaScript files to be 16 01:41.210 --> 01:43.590 able to render that web page in the browser. 17 01:44.010 --> 01:51.030 But our client say a browser could also be making GET requests that is looking for a particular resource 18 01:51.120 --> 01:58.320 say some data or a file. And in the last lesson we've seen that we can simply make that request to our 19 01:58.320 --> 02:03.570 API by going to that /articles route. And when we hit enter 20 02:03.630 --> 02:11.270 this makes a GET request on that route and we'll get sent back the data that we requested in a JSON 21 02:11.280 --> 02:16.170 format. Now that's very well and good for GET requests, 22 02:16.300 --> 02:18.880 but how do we do that using POST requests? 23 02:19.210 --> 02:21.970 Well here comes a handy tool called Postman. 24 02:26.680 --> 02:34.690 And this is what's going to enable us to send data and test our API without having to worry about building 25 02:34.690 --> 02:37.720 an HTML form or building up the frontend at all. 26 02:37.720 --> 02:40.970 So let's go ahead and first install Postman. 27 02:40.960 --> 02:48.520 So if you head over to www.getpostman.com then you can go ahead and click to download the app. Choose 28 02:48.520 --> 02:52.780 your platform to download and go ahead and install that. 29 02:52.840 --> 02:58.120 Now the first time you open Postman you should get a welcome window like this. 30 02:58.270 --> 03:02.800 And this has a number of common things that you might want to do or create 31 03:02.890 --> 03:08.740 but we're actually going to close this window and we don't want it to launch every single time. 32 03:08.740 --> 03:12.670 So now here's our workspace inside Postman 33 03:12.760 --> 03:18.060 and our goal is to be at to make a POST request to our server. 34 03:18.220 --> 03:23.690 But before we can do that we first have to code it up so our server can actually make the correct response. 35 03:23.710 --> 03:31.330 So in order to use Express to address POST requests on our server, we use the app.post method and 36 03:31.330 --> 03:33.900 then we specify the route and we have a callback. 37 03:33.910 --> 03:34.840 You've seen this before 38 03:34.900 --> 03:41.500 whenever we've used our server to handle POST requests coming from a form. So inside here let's do 39 03:41.500 --> 03:48.160 that for real, let's do app.post and then we're going to specify the route which is exactly the same 40 03:48.160 --> 03:55.870 as before because RESTful conventions dictate that the POST request should go to the collection of resources 41 03:55.930 --> 03:58.310 rather than a specific resource. 42 03:58.330 --> 04:03.280 So if you had a whole bunch of articles it should go to /articles rather than a specific 43 04:03.370 --> 04:04.480 article. 44 04:04.480 --> 04:11.800 So let's go ahead and add that /articles and then we're going to add our callback request 45 04:11.860 --> 04:13.340 and response. 46 04:13.360 --> 04:19.360 So once the POST request comes through from the client, we're going to need to tap in to the request 47 04:19.780 --> 04:27.160 .body in order to grab some of the data that was sent through. And here if you remember from previous 48 04:27.160 --> 04:34.390 lessons when we created HTML forms we were able to tap into a variable name that we gave to 49 04:34.540 --> 04:39.460 each of the fields in the form by accessing the name attribute. 50 04:39.460 --> 04:47.110 So in our case we're going to have a field probably for title and another one for the content. 51 04:47.500 --> 04:50.920 So the names of all variables are title and content 52 04:50.920 --> 04:56.830 and if we had a form associated with this POST request the name attribute of one input might be title 53 04:57.160 --> 05:00.260 and the name attribute of the other one might be content. 54 05:00.280 --> 05:08.500 Now for now because we want to test this, let's go ahead and log this request.body.title and 55 05:08.500 --> 05:18.220 also log the request.body.content so that we can see when the requests gets passed by body-parser 56 05:18.610 --> 05:24.250 and we tap in to a variable called title and a variable called content we can actually confirm that the 57 05:24.250 --> 05:29.110 POST request is working and that we can see the data that's being sent through. 58 05:30.010 --> 05:36.660 So now we're ready to go into Postman and create a new request. 59 05:36.690 --> 05:42.390 So in this console here we're going to create on new request and the first thing we're going to do is 60 05:42.390 --> 05:50.970 we're gonna change that HTTP request from GET to POST. And then we're going to add that request URL which 61 05:50.970 --> 05:56.760 is going to be localhost:3000 and then we're going to specify the route where our 62 05:56.760 --> 06:02.160 POST request is handled which is going to be /articles and I'm just going to copy and paste 63 06:02.160 --> 06:02.670 that in there. 64 06:03.090 --> 06:08.730 So this should now read localhost:3000/articles and then we're going 65 06:08.730 --> 06:12.290 to send some data along with this POST request. 66 06:12.360 --> 06:14.520 There's no other reason for making POST requests right? 67 06:14.730 --> 06:22.380 So now if you go over to this body tab and change the encoding to form-urlencoded which is 68 06:22.380 --> 06:25.990 what our body-parser is designed to handle. 69 06:26.070 --> 06:34.230 Then we can add in those variable names that we define here, title and content, as the keys for our data. 70 06:34.230 --> 06:40.800 So one is gonna be title and the other one is going to be content. And then the value is the data that 71 06:40.800 --> 06:44.580 we're going to send over along with our POST. 72 06:44.580 --> 06:50.670 Now let's say that I wanted to create a new article on Jack Bauer. 73 06:50.670 --> 06:57.300 So my title might be Jack Bauer and the content I'm gonna copy from a website that has amused me for 74 06:57.300 --> 07:04.530 a long time anyways which is the "Top One Hundred Facts" about Jack Bauer and the one that ranks the most highly 75 07:04.590 --> 07:10.590 and the first one says Jack Bauer once stepped into quicksand, the quicksand couldn't escape and nearly 76 07:10.590 --> 07:11.470 drowned. 77 07:11.490 --> 07:18.840 So let's go ahead and copy this and paste it into Postman as the value for our content key. 78 07:20.160 --> 07:26.790 So now these values are the ones that we should now be able to tap into through request.body. 79 07:26.790 --> 07:30.190 title and request.body.content. 80 07:30.240 --> 07:35.430 And when that POST request gets triggered then it gets handled inside here 81 07:35.430 --> 07:41.100 and we should be able to log the things that we sent over and we should be able to see it inside our 82 07:41.100 --> 07:42.910 console over here. 83 07:43.350 --> 07:50.280 So let's just make sure that all app.js has been saved and that our server has restarted and 84 07:50.280 --> 07:52.290 it is running on port 3000. 85 07:52.290 --> 07:57.380 Now let's head into Postman and click on send to make that request. 86 07:57.510 --> 08:05.610 And now if we check inside our hyperterminal you can see that it's logged the values of both of those 87 08:05.610 --> 08:09.290 things that we sent over, the title and the content. 88 08:09.330 --> 08:16.530 So now that we've confirmed that we can make requests through Postman we can go ahead and add the rest 89 08:16.530 --> 08:25.500 of the code which saves this into our MongoDB. And just a quick reminder, in order to create data inside 90 08:25.560 --> 08:31.920 our MongoDB database using Mongoose we've seen this before but just a quick reminder, we create a new 91 08:31.920 --> 08:32.540 constant 92 08:32.580 --> 08:36.570 that's going to store a new article 93 08:36.570 --> 08:40.320 and then the article will have two fields, title and content. 94 08:40.400 --> 08:45.440 And we're going to set the data for that based on the data that we received through the POST request. 95 08:45.930 --> 08:51.180 And then finally we're going to save that new object into our database. 96 08:51.180 --> 08:52.760 So let's do it for real now. 97 08:53.130 --> 09:00.180 Let's create a constant that's going to be called newArticle and this is going to be created using 98 09:00.180 --> 09:01.680 the new keyword 99 09:01.680 --> 09:09.480 and the article model which we created up here. And then we're going to open a set of round brackets 100 09:09.480 --> 09:13.230 or parentheses and then some curly braces and hit enter. 101 09:13.290 --> 09:21.340 Now inside here we have to define the data that we want to create for our two fields, title and content. 102 09:21.390 --> 09:27.060 Now title is going to store the data that we received through the POST request through request.body. 103 09:27.150 --> 09:27.910 title. 104 09:27.960 --> 09:33.300 So I'm just gonna cut that and paste it in here. And then content is going to store the data that comes 105 09:33.300 --> 09:39.060 over through the POST requests through request.body.content. And make sure you have a comma that separates 106 09:39.060 --> 09:40.650 the two fields. 107 09:40.650 --> 09:46.910 Now let's close that off using a semicolon and we're ready to save on new article. 108 09:46.910 --> 09:50.160 So we're going to call newArticle.save. 109 09:51.180 --> 09:53.120 So now let's hit save 110 09:53.130 --> 10:01.530 so that our app.js has saved and then our server has restarted and we go back into Postman and we 111 10:01.530 --> 10:09.120 can go ahead and click send to make the exact same POST requests to the same route using the same content 112 10:09.120 --> 10:15.000 that we had before. But this time the only difference is that instead of console logging it inside the 113 10:15.000 --> 10:22.230 console it should be able to add it into our MongoDB database and we should be able to see it when 114 10:22.230 --> 10:24.900 we refresh our collections in Robo 3T. 115 10:26.220 --> 10:28.740 So let's go ahead and click send. 116 10:28.800 --> 10:36.320 And now if we go into Robo 3T and we refresh articles collection by clicking on view documents 117 10:36.740 --> 10:44.030 you can see we now have an extra entry. And entry number 5 has the title of Jack Bauer and the content 118 10:44.300 --> 10:48.970 that Jack Bauer once stepped into quicksand and the quicksand couldn't escape. 119 10:49.130 --> 10:52.880 That is a very very quick way of setting this up. 120 10:53.030 --> 10:56.750 Now there's just one thing that you might notice. Here 121 10:56.840 --> 11:03.890 our request is expecting something to come back right? Like that was successful or it wasn't successful. 122 11:03.920 --> 11:09.320 So in our server we should be sending something back just as we did over here. 123 11:09.320 --> 11:11.030 If there were errors we'll send the error, 124 11:11.030 --> 11:18.920 if there weren't any errors we'll just send that everything was a ok. And inside our save method we can 125 11:18.920 --> 11:24.820 actually add a callback function that will trigger if there were any errors. 126 11:24.830 --> 11:26.860 Now how do I know that we could do this? 127 11:26.870 --> 11:33.080 Well documentation documentation documentation. Reading through the documentation can make you an expert 128 11:33.380 --> 11:40.230 in any framework or module. So you can see over here in the model's part of the documentation 129 11:40.430 --> 11:46.400 it says that when we construct documents for example when we run something something .save we can 130 11:46.400 --> 11:52.510 actually add a callback and we'll receive any errors if that actually happened. 131 11:52.520 --> 12:01.910 So inside here if there were no errors then that is when we're going to res.send "Successfully 132 12:02.150 --> 12:05.100 added a new article." 133 12:05.330 --> 12:12.530 But if there were some errors, else we're just going to res.send the error that we got back from 134 12:12.530 --> 12:13.130 Mongoose. 135 12:13.700 --> 12:22.190 So now our POST request is complete. Our POST request targets the articles route and it creates a new 136 12:22.190 --> 12:28.270 article using the data that was submitted through the POST request and then we save that you article. 137 12:28.340 --> 12:32.540 If there were errors then we send an error back to the client, 138 12:32.600 --> 12:38.030 if there weren't any errors then we tell the client that everything went swimmingly. 139 12:38.060 --> 12:44.840 So now we have addressed what should happen when a client makes a POST request and sends over some data 140 12:45.080 --> 12:50.270 to our server via our API targeting the articles route.