1 00:00:01,140 --> 00:00:04,670 ‫Let's now create a more advanced Postman setup, 2 00:00:04,670 --> 00:00:06,900 ‫in order to make our lives a bit easier 3 00:00:06,900 --> 00:00:08,483 ‫when working with this tool. 4 00:00:10,080 --> 00:00:11,580 ‫So, back here in Postman, 5 00:00:11,580 --> 00:00:13,640 ‫the first concept that I want to show you 6 00:00:13,640 --> 00:00:16,080 ‫is the concept of environment. 7 00:00:16,080 --> 00:00:19,000 ‫So, maybe you've noticed that up here it says 8 00:00:19,000 --> 00:00:21,200 ‫no environment, right? 9 00:00:21,200 --> 00:00:22,630 ‫And, so that's because, well, 10 00:00:22,630 --> 00:00:25,510 ‫at this point we haven't created any environment. 11 00:00:25,510 --> 00:00:26,343 ‫All right. 12 00:00:26,343 --> 00:00:29,610 ‫And, so, basically, an environment is like a context 13 00:00:29,610 --> 00:00:30,920 ‫where our app is running. 14 00:00:30,920 --> 00:00:33,810 ‫And, we can then specify a couple of variables 15 00:00:33,810 --> 00:00:35,563 ‫for each of these environments. 16 00:00:35,563 --> 00:00:38,230 ‫And, the two ones that make the most sense is, 17 00:00:38,230 --> 00:00:40,740 ‫just as we have in our express application, 18 00:00:40,740 --> 00:00:43,760 ‫the development and the production environment. 19 00:00:43,760 --> 00:00:46,983 ‫So, let's start by adding our first, our environment here. 20 00:00:47,840 --> 00:00:48,673 ‫OK. 21 00:00:48,673 --> 00:00:53,303 ‫And, I'm gonna call this one depth and then for naters, 22 00:00:54,770 --> 00:00:56,790 ‫so the name of our application. 23 00:00:56,790 --> 00:00:58,019 ‫OK. 24 00:00:58,019 --> 00:01:01,569 ‫And, so the variable that I'm gonna create here is called 25 00:01:01,569 --> 00:01:02,600 ‫URL. 26 00:01:02,600 --> 00:01:04,440 ‫Because that's the most important thing 27 00:01:04,440 --> 00:01:08,180 ‫that I want to change from one environment to the other. 28 00:01:08,180 --> 00:01:10,730 ‫So, in development, we will have one URL, 29 00:01:10,730 --> 00:01:13,240 ‫and then in production, we will have another one. 30 00:01:13,240 --> 00:01:14,210 ‫Right. 31 00:01:14,210 --> 00:01:18,644 ‫And, so, let's now set the URL here to 32 00:01:18,644 --> 00:01:23,157 ‫http 33 00:01:23,157 --> 00:01:24,990 ‫127001, 34 00:01:24,990 --> 00:01:26,870 ‫which stands for localhost. 35 00:01:26,870 --> 00:01:28,970 ‫Then, port 3000 36 00:01:29,810 --> 00:01:32,210 ‫and, I think that's actually it. 37 00:01:32,210 --> 00:01:36,630 ‫So, that's the initial value of our URL variable. 38 00:01:36,630 --> 00:01:37,600 ‫OK. 39 00:01:37,600 --> 00:01:39,090 ‫So, let's now add 40 00:01:40,180 --> 00:01:44,560 ‫And, so just like this, we have our new depth environment. 41 00:01:44,560 --> 00:01:46,963 ‫We can then add one for production as well. 42 00:01:50,250 --> 00:01:53,930 ‫But, right here we don't really have a URL 43 00:01:53,930 --> 00:01:55,120 ‫just yet. 44 00:01:55,120 --> 00:01:58,080 ‫So, that simply said Naters dot io, 45 00:01:58,080 --> 00:01:59,390 ‫which does not exist. 46 00:01:59,390 --> 00:02:00,223 ‫OK. 47 00:02:00,223 --> 00:02:02,850 ‫But, this is simply, let's say, a placeholder. 48 00:02:02,850 --> 00:02:03,683 ‫All right? 49 00:02:05,330 --> 00:02:06,163 ‫OK. 50 00:02:06,163 --> 00:02:08,480 ‫So, let's now actually go ahead and use 51 00:02:08,480 --> 00:02:11,780 ‫this environment variable that we just created. 52 00:02:11,780 --> 00:02:13,383 ‫So, remember, it's called URL. 53 00:02:14,670 --> 00:02:16,260 ‫And, so now, what I want to do 54 00:02:16,260 --> 00:02:19,880 ‫is to go ahead and replace this URL here 55 00:02:21,430 --> 00:02:24,880 ‫so, this here, with the variable that we just created. 56 00:02:24,880 --> 00:02:27,490 ‫And, we do that by using curly braces, 57 00:02:27,490 --> 00:02:28,900 ‫the name of the variable, 58 00:02:28,900 --> 00:02:30,513 ‫and then curly braces again. 59 00:02:31,390 --> 00:02:32,223 ‫All right. 60 00:02:32,223 --> 00:02:34,760 ‫And, so this will basically now be replaced 61 00:02:34,760 --> 00:02:37,870 ‫with the variable coming from our environment. 62 00:02:37,870 --> 00:02:39,700 ‫Now, when we hover this, we can see that it is 63 00:02:39,700 --> 00:02:42,060 ‫unresolved, but that's because we didn't choose 64 00:02:42,060 --> 00:02:43,810 ‫our environment yet. 65 00:02:43,810 --> 00:02:45,870 ‫So, we need to come to this menu here 66 00:02:45,870 --> 00:02:49,240 ‫and then we select depth to Naters. 67 00:02:49,240 --> 00:02:51,400 ‫And, so if we hover it now, you will see 68 00:02:51,400 --> 00:02:54,543 ‫that it's actually the variable that we just defined before. 69 00:02:55,619 --> 00:02:56,452 ‫OK. 70 00:02:56,452 --> 00:02:59,010 ‫So, if we try to send a request now, then, of course, 71 00:02:59,010 --> 00:03:02,940 ‫we get the correct response just like we did before. 72 00:03:02,940 --> 00:03:03,773 ‫OK. 73 00:03:03,773 --> 00:03:06,520 ‫And, so I hope you can see how useful this will be 74 00:03:06,520 --> 00:03:08,340 ‫later when we're in production. 75 00:03:08,340 --> 00:03:11,150 ‫Because, if we didn't have these environment variables, 76 00:03:11,150 --> 00:03:13,800 ‫then later on, when we want to switch to testing 77 00:03:13,800 --> 00:03:15,273 ‫this API in production, 78 00:03:15,273 --> 00:03:16,750 ‫then we would have to go ahead and 79 00:03:16,750 --> 00:03:20,950 ‫manually change all of these URLs in all of the requests. 80 00:03:20,950 --> 00:03:22,850 ‫And, for now, we don't have that many. 81 00:03:22,850 --> 00:03:25,950 ‫But, imagine we have 30 or 50 or 100 requests, 82 00:03:25,950 --> 00:03:29,010 ‫and we would then manually have to change these URLs 83 00:03:29,010 --> 00:03:30,360 ‫in all of them. 84 00:03:30,360 --> 00:03:32,670 ‫And, that would not be fun at all. 85 00:03:32,670 --> 00:03:34,870 ‫And, so now we will do that once 86 00:03:34,870 --> 00:03:36,850 ‫and then it's done for the rest of 87 00:03:36,850 --> 00:03:38,580 ‫the project development. 88 00:03:38,580 --> 00:03:39,540 ‫Right? 89 00:03:39,540 --> 00:03:42,290 ‫So, if we change now to production, for example, 90 00:03:42,290 --> 00:03:45,280 ‫then, well, here we would have Naters dot io 91 00:03:45,280 --> 00:03:47,733 ‫and then API v1 and tours. 92 00:03:48,580 --> 00:03:49,540 ‫All right. 93 00:03:49,540 --> 00:03:52,530 ‫So, let's now go ahead and copy this 94 00:03:52,530 --> 00:03:55,293 ‫and actually paste it into all of these. 95 00:03:56,710 --> 00:04:00,590 ‫So, of course we have to do it once now. 96 00:04:00,590 --> 00:04:02,700 ‫But again, it's better to do it now that we don't 97 00:04:02,700 --> 00:04:05,370 ‫have that many endpoints here yet, 98 00:04:05,370 --> 00:04:06,573 ‫than to do it later. 99 00:04:07,470 --> 00:04:09,170 ‫So, save this one. 100 00:04:09,170 --> 00:04:10,950 ‫Save this one again. 101 00:04:10,950 --> 00:04:14,590 ‫Actually, let's get rid of this property. 102 00:04:14,590 --> 00:04:15,663 ‫So, save. 103 00:04:16,530 --> 00:04:17,363 ‫Save. 104 00:04:19,514 --> 00:04:21,640 ‫And, save this one as well. 105 00:04:21,640 --> 00:04:23,340 ‫So, I'll do it in all of them now. 106 00:04:24,670 --> 00:04:26,523 ‫OK, just very quickly. 107 00:04:30,270 --> 00:04:31,893 ‫And, these two already have it. 108 00:04:32,960 --> 00:04:33,793 ‫All right. 109 00:04:36,540 --> 00:04:38,750 ‫Then, get all tours. 110 00:04:38,750 --> 00:04:40,243 ‫Get tour does not. 111 00:04:47,980 --> 00:04:49,400 ‫All right, save. 112 00:04:49,400 --> 00:04:51,130 ‫And, actually, we can hit Command-S, 113 00:04:51,130 --> 00:04:52,680 ‫just like in any other app. 114 00:04:52,680 --> 00:04:56,540 ‫And, then Command-W to close the tab. 115 00:04:56,540 --> 00:04:57,373 ‫OK. 116 00:04:57,373 --> 00:04:58,640 ‫So, just like in Google Chrome, 117 00:04:58,640 --> 00:04:59,473 ‫for example. 118 00:05:00,440 --> 00:05:02,500 ‫So, Command-Save, Command-S, 119 00:05:02,500 --> 00:05:03,683 ‫and then Command-W. 120 00:05:05,340 --> 00:05:07,223 ‫So, just to make it a bit faster, 121 00:05:23,760 --> 00:05:25,773 ‫And, now we're almost done here. 122 00:05:26,870 --> 00:05:27,983 ‫And, that's it. 123 00:05:29,200 --> 00:05:30,033 ‫OK. 124 00:05:30,033 --> 00:05:31,730 ‫And, so just like this we have basically 125 00:05:31,730 --> 00:05:35,700 ‫future-proofed our API development here with Postman. 126 00:05:35,700 --> 00:05:38,010 ‫Next up, remember how in the last lecture, 127 00:05:38,010 --> 00:05:40,450 ‫I said that I was gonna automate basically 128 00:05:40,450 --> 00:05:43,030 ‫the process of copying this token here. 129 00:05:43,030 --> 00:05:47,500 ‫And, then pasting it right here into this bare header. 130 00:05:47,500 --> 00:05:48,333 ‫All right. 131 00:05:48,333 --> 00:05:50,060 ‫And, so let's now actually do that. 132 00:05:50,060 --> 00:05:51,660 ‫And, for that, we will actually have to 133 00:05:51,660 --> 00:05:53,150 ‫write a little bit of code. 134 00:05:53,150 --> 00:05:54,650 ‫But, that's no problem at all. 135 00:05:55,620 --> 00:05:56,804 ‫So, let's do that. 136 00:05:56,804 --> 00:05:58,180 ‫And, sign up and then login. 137 00:05:58,180 --> 00:05:59,710 ‫Cause these are the two places, 138 00:05:59,710 --> 00:06:01,340 ‫so the two endpoints 139 00:06:01,340 --> 00:06:05,420 ‫from which we will receive a json web token, right? 140 00:06:05,420 --> 00:06:07,290 ‫So, we come here to the test tab, 141 00:06:07,290 --> 00:06:09,250 ‫which we haven't used yet. 142 00:06:09,250 --> 00:06:11,570 ‫And, so here we will programmatically set 143 00:06:11,570 --> 00:06:13,280 ‫an environment variable. 144 00:06:13,280 --> 00:06:14,113 ‫OK. 145 00:06:14,113 --> 00:06:16,650 ‫So, we created environment variables before 146 00:06:16,650 --> 00:06:19,350 ‫using this dialogue here, OK? 147 00:06:19,350 --> 00:06:21,760 ‫But, now here with code, we will basically 148 00:06:21,760 --> 00:06:25,200 ‫programmatically create an environment variable as well. 149 00:06:25,200 --> 00:06:27,830 ‫And, we will create one for the json web token 150 00:06:27,830 --> 00:06:30,190 ‫that we receive in the request. 151 00:06:30,190 --> 00:06:31,023 ‫OK. 152 00:06:31,023 --> 00:06:33,570 ‫And, so basically all we need to do is to use 153 00:06:33,570 --> 00:06:36,030 ‫the snippets that we have here. 154 00:06:36,030 --> 00:06:37,300 ‫All right. 155 00:06:37,300 --> 00:06:39,930 ‫So, in this case, we want to set an environment variable 156 00:06:39,930 --> 00:06:41,950 ‫and, so let's just click here. 157 00:06:41,950 --> 00:06:45,570 ‫And, indeed, we get this pre-written code for us here. 158 00:06:45,570 --> 00:06:46,403 ‫OK. 159 00:06:46,403 --> 00:06:48,340 ‫This is basically just some JavaScript 160 00:06:48,340 --> 00:06:51,360 ‫that we can access here in Postman. 161 00:06:51,360 --> 00:06:54,280 ‫So, PM, which probably stands for Postman, 162 00:06:54,280 --> 00:06:56,783 ‫dot environment, which is the current environment. 163 00:06:56,783 --> 00:06:58,310 ‫And, then, set. 164 00:06:58,310 --> 00:07:01,303 ‫So, set the variable called JWT. 165 00:07:02,140 --> 00:07:05,280 ‫And, then, of course, the value of that. 166 00:07:05,280 --> 00:07:07,120 ‫And, where is that value? 167 00:07:07,120 --> 00:07:10,780 ‫Well, it is in PM dot response 168 00:07:12,080 --> 00:07:13,020 ‫dot json. 169 00:07:13,020 --> 00:07:15,283 ‫So, basically, to convert it to json. 170 00:07:17,760 --> 00:07:19,450 ‫And, then dot token. 171 00:07:19,450 --> 00:07:21,320 ‫And, it's dot token here, of course, 172 00:07:21,320 --> 00:07:23,920 ‫because that's the name of our property 173 00:07:23,920 --> 00:07:25,710 ‫in the response object. 174 00:07:25,710 --> 00:07:26,543 ‫OK. 175 00:07:26,543 --> 00:07:29,420 ‫So, basically, this code here gets the response for us 176 00:07:29,420 --> 00:07:33,370 ‫and, then, on there we can write the dot token property, 177 00:07:33,370 --> 00:07:36,663 ‫and then assign to the JWT environment variable. 178 00:07:37,990 --> 00:07:38,823 ‫OK. 179 00:07:38,823 --> 00:07:40,050 ‫And, so now we have an active test here, 180 00:07:40,050 --> 00:07:42,810 ‫which is why we get this blue dot 181 00:07:42,810 --> 00:07:44,500 ‫or a green one, maybe, (laughing) 182 00:07:44,500 --> 00:07:46,750 ‫and so let's now test it out. 183 00:07:46,750 --> 00:07:50,460 ‫So, let's sign up with a new user. 184 00:07:50,460 --> 00:07:51,973 ‫I'm calling it test user. 185 00:07:53,400 --> 00:07:55,400 ‫We need to get rid of this comma. 186 00:07:55,400 --> 00:07:57,113 ‫And, now let's send it. 187 00:07:57,950 --> 00:07:59,580 ‫And, we could not get any response. 188 00:07:59,580 --> 00:08:02,620 ‫And, that's because I have naters dot io here. 189 00:08:02,620 --> 00:08:05,100 ‫So, I'm in the wrong environment. 190 00:08:05,100 --> 00:08:08,340 ‫So, of course, we want to be in development. 191 00:08:08,340 --> 00:08:10,180 ‫So, send it again. 192 00:08:10,180 --> 00:08:12,900 ‫And, so here indeed, we get our token. 193 00:08:12,900 --> 00:08:16,010 ‫And, so let's now check if it is in our 194 00:08:16,010 --> 00:08:17,090 ‫environment as well. 195 00:08:17,090 --> 00:08:18,800 ‫So, for that, we come here. 196 00:08:18,800 --> 00:08:23,290 ‫Def, naters, and indeed, here we now get JWT 197 00:08:23,290 --> 00:08:27,370 ‫and then this token that we have also down here. 198 00:08:27,370 --> 00:08:28,203 ‫OK. 199 00:08:28,203 --> 00:08:29,700 ‫That token variable that we have here 200 00:08:29,700 --> 00:08:33,040 ‫should be the exact same as the one down here. 201 00:08:33,040 --> 00:08:35,070 ‫So, Postman got it from here, 202 00:08:35,070 --> 00:08:38,563 ‫and then posted it as this new environment variable. 203 00:08:40,050 --> 00:08:40,910 ‫OK. 204 00:08:40,910 --> 00:08:43,710 ‫So, that's the first step and the second step 205 00:08:43,710 --> 00:08:46,900 ‫is to now go to one of our protected routes, 206 00:08:46,900 --> 00:08:49,610 ‫which, in this case, is only this one. 207 00:08:49,610 --> 00:08:52,490 ‫And, then here we can actually delete 208 00:08:54,270 --> 00:08:55,103 ‫this at all. 209 00:08:56,260 --> 00:08:57,660 ‫So, right over on this side, 210 00:08:59,210 --> 00:09:00,043 ‫OK. 211 00:09:00,043 --> 00:09:01,780 ‫So, get rid of all of that. 212 00:09:01,780 --> 00:09:03,080 ‫And, then here we have, 213 00:09:03,080 --> 00:09:04,400 ‫as you maybe have seen, 214 00:09:04,400 --> 00:09:06,320 ‫an authorization tab. 215 00:09:06,320 --> 00:09:07,153 ‫OK. 216 00:09:07,153 --> 00:09:08,890 ‫So, here we can now specify the type 217 00:09:08,890 --> 00:09:10,450 ‫of authorization. 218 00:09:10,450 --> 00:09:12,690 ‫And, you see all of these differents here, 219 00:09:12,690 --> 00:09:15,383 ‫but we are going to choose the Bearer Token. 220 00:09:16,491 --> 00:09:17,455 ‫OK. 221 00:09:17,455 --> 00:09:18,670 ‫So, just like we have specified Bearer 222 00:09:18,670 --> 00:09:20,320 ‫in our token, 223 00:09:20,320 --> 00:09:22,960 ‫we also have to name Bearer here. 224 00:09:22,960 --> 00:09:23,793 ‫OK. 225 00:09:23,793 --> 00:09:24,626 ‫So, Bearer Token. 226 00:09:24,626 --> 00:09:27,560 ‫And, now all we need to do is to specify the token. 227 00:09:27,560 --> 00:09:29,510 ‫And, remember how we do that? 228 00:09:29,510 --> 00:09:33,363 ‫Well, actually the exact same way as we did up here. 229 00:09:34,320 --> 00:09:36,620 ‫So, curly braces, curly braces, 230 00:09:36,620 --> 00:09:39,077 ‫JWT, and then close it. 231 00:09:39,077 --> 00:09:40,840 ‫So, it turns orange 232 00:09:40,840 --> 00:09:43,430 ‫and that means that it should now work. 233 00:09:43,430 --> 00:09:45,253 ‫And, let's now test this. 234 00:09:46,560 --> 00:09:48,620 ‫And, bam, here we go. 235 00:09:48,620 --> 00:09:51,510 ‫So, we really got access to the data, 236 00:09:51,510 --> 00:09:54,193 ‫which means that the token was successfully sent. 237 00:09:55,070 --> 00:09:55,940 ‫All right. 238 00:09:55,940 --> 00:09:57,470 ‫And, we can actually see that here 239 00:09:57,470 --> 00:09:58,760 ‫in the headers. 240 00:09:58,760 --> 00:10:01,100 ‫So, it automatically pre-filled this header 241 00:10:01,100 --> 00:10:02,310 ‫now for us. 242 00:10:02,310 --> 00:10:05,040 ‫So, we have authorization where we have Bearer 243 00:10:05,040 --> 00:10:06,890 ‫and all of this good stuff here. 244 00:10:06,890 --> 00:10:08,250 ‫And, actually, it also now 245 00:10:08,250 --> 00:10:10,263 ‫put all of this stuff here for us. 246 00:10:11,190 --> 00:10:12,023 ‫OK. 247 00:10:12,023 --> 00:10:14,530 ‫So, actually, this is exactly what we saw before 248 00:10:14,530 --> 00:10:17,710 ‫when we previewed the request dot headers object 249 00:10:17,710 --> 00:10:18,950 ‫in express. 250 00:10:18,950 --> 00:10:20,440 ‫Remember that? 251 00:10:20,440 --> 00:10:21,273 ‫OK. 252 00:10:21,273 --> 00:10:23,640 ‫You see here that it's actually just 253 00:10:23,640 --> 00:10:25,500 ‫temporary generated. 254 00:10:25,500 --> 00:10:27,053 ‫So just so we get a preview. 255 00:10:27,990 --> 00:10:28,823 ‫All right. 256 00:10:28,823 --> 00:10:30,460 ‫And, so, that's actually it. 257 00:10:30,460 --> 00:10:32,480 ‫This makes our life so much easier 258 00:10:32,480 --> 00:10:34,900 ‫when we're working here with authentication. 259 00:10:34,900 --> 00:10:36,770 ‫Because, each time we want to add a new 260 00:10:36,770 --> 00:10:37,840 ‫protected route, 261 00:10:37,840 --> 00:10:39,810 ‫all we need to do is to come here 262 00:10:39,810 --> 00:10:42,430 ‫to the authorization tab and then add 263 00:10:42,430 --> 00:10:44,140 ‫this variable here 264 00:10:44,140 --> 00:10:45,630 ‫and specify that we're working 265 00:10:45,630 --> 00:10:47,550 ‫with a Bearer token. 266 00:10:47,550 --> 00:10:48,790 ‫All right. 267 00:10:48,790 --> 00:10:50,340 ‫And, actually, I just realized that 268 00:10:50,340 --> 00:10:51,600 ‫we're not just yet. 269 00:10:51,600 --> 00:10:54,510 ‫Because, we have this here in sign up, 270 00:10:54,510 --> 00:10:55,600 ‫so, this test. 271 00:10:55,600 --> 00:10:58,060 ‫But, of course, we also need it in login. 272 00:10:58,060 --> 00:10:59,270 ‫So, that's the other place 273 00:10:59,270 --> 00:11:02,090 ‫from which we can get a new, fresh token. 274 00:11:02,090 --> 00:11:03,250 ‫Right? 275 00:11:03,250 --> 00:11:05,340 ‫So, let's copy this, 276 00:11:05,340 --> 00:11:06,503 ‫give this one a save, 277 00:11:07,570 --> 00:11:09,270 ‫also save this one, 278 00:11:09,270 --> 00:11:11,320 ‫and, then here at login, 279 00:11:11,320 --> 00:11:12,620 ‫post it here. 280 00:11:12,620 --> 00:11:13,770 ‫Save it. 281 00:11:13,770 --> 00:11:15,210 ‫And, I don't even need to test it 282 00:11:15,210 --> 00:11:17,980 ‫because, well it should work just the same 283 00:11:17,980 --> 00:11:19,670 ‫as with sign up. 284 00:11:19,670 --> 00:11:21,040 ‫All right. 285 00:11:21,040 --> 00:11:21,873 ‫OK. 286 00:11:21,873 --> 00:11:22,910 ‫This was very important 287 00:11:22,910 --> 00:11:24,530 ‫for us in order to move on 288 00:11:24,530 --> 00:11:27,100 ‫and to make our lives a bit easier 289 00:11:27,100 --> 00:11:28,500 ‫when you're working with Postman 290 00:11:28,500 --> 00:11:30,293 ‫for your API development.