1 00:00:00,260 --> 00:00:06,620 All right, so now we're going to look at Postman and just get that set up so we can make Http requests 2 00:00:06,620 --> 00:00:08,480 to our back end API. 3 00:00:08,510 --> 00:00:10,430 But I just want to mention something first. 4 00:00:10,430 --> 00:00:16,370 If you run your servers with NPM run dev, you're going to see the home screen looks fine. 5 00:00:16,370 --> 00:00:17,180 Everything is here. 6 00:00:17,180 --> 00:00:19,730 We have our products being fetched right now. 7 00:00:19,730 --> 00:00:22,850 They're being fetched from this data products. 8 00:00:22,850 --> 00:00:30,290 JS Because we haven't integrated the database with our front end yet or our back end, we've just basically 9 00:00:30,290 --> 00:00:32,390 created it and added data to it. 10 00:00:32,420 --> 00:00:38,210 Now if you go to one of the single product pages, it's not going to work because we don't have an ID. 11 00:00:38,240 --> 00:00:45,290 You can see right here, this is undefined because it's looking for the underscore ID field in the products 12 00:00:45,290 --> 00:00:46,250 file. 13 00:00:46,250 --> 00:00:48,170 So that's absolutely fine. 14 00:00:48,170 --> 00:00:51,020 I just didn't want you to get worried that something was broken. 15 00:00:51,020 --> 00:00:53,060 We just haven't gotten there yet. 16 00:00:53,330 --> 00:00:53,720 All right. 17 00:00:53,750 --> 00:00:59,000 Now, as far as Postman goes, this is a really, really great Http client. 18 00:00:59,270 --> 00:01:00,510 It's completely free. 19 00:01:00,510 --> 00:01:05,160 Well, I guess there are pricing options, but you can do pretty much everything for free or everything 20 00:01:05,160 --> 00:01:06,150 we're going to need. 21 00:01:06,150 --> 00:01:11,520 So there's a browser version and you can also download it. 22 00:01:11,520 --> 00:01:13,770 I would suggest downloading and installing it. 23 00:01:13,770 --> 00:01:15,210 That's what I've always done. 24 00:01:15,210 --> 00:01:24,330 So I'm going to open up the desktop app and you can certainly just, you know, create request tabs 25 00:01:24,330 --> 00:01:26,760 and just make make requests all willy nilly. 26 00:01:26,760 --> 00:01:33,150 But I like to categorize everything and save all my requests and have a workspace and have an environment. 27 00:01:33,150 --> 00:01:35,250 So I'm going to show you how to set all that up. 28 00:01:35,250 --> 00:01:38,400 So first thing we're going to do is create a new workspace. 29 00:01:38,400 --> 00:01:40,980 So right here we say create workspace. 30 00:01:40,980 --> 00:01:47,550 I'm going to call this pro shop and I'll just call it pro Shop V two, you can call it whatever. 31 00:01:47,550 --> 00:01:51,780 And I'm going to select personal just because I'm the only one that's going to access this. 32 00:01:51,780 --> 00:01:55,710 I think the paid options are more for if you're collaborating with a team. 33 00:01:55,710 --> 00:02:04,230 But let's click Create, and then I'm going to let's see, I want to create an environment because an 34 00:02:04,230 --> 00:02:10,289 environment allows us to have environment variables within postman such as our URL. 35 00:02:10,289 --> 00:02:17,160 So our URL would change once we go into production and we have a domain name and instead of changing 36 00:02:17,160 --> 00:02:20,580 it in every single request, you can just change the variable. 37 00:02:20,580 --> 00:02:23,970 So let's say create environment and we can name it. 38 00:02:23,970 --> 00:02:26,310 So I'm going to call this pro shop. 39 00:02:27,150 --> 00:02:29,100 Pro Shop v two. 40 00:02:29,860 --> 00:02:31,330 Environment. 41 00:02:33,230 --> 00:02:35,930 Actually, I'll just say pro shop environment. 42 00:02:37,980 --> 00:02:38,400 All right. 43 00:02:38,400 --> 00:02:41,940 And then here is where we can add variables. 44 00:02:41,940 --> 00:02:45,990 So the variable I want to add, I'm going to call base URL. 45 00:02:46,170 --> 00:02:49,400 And what I want that to be is our API. 46 00:02:49,410 --> 00:02:55,560 So Http and localhost port 5000. 47 00:02:55,560 --> 00:03:00,270 And I'm also going to add on slash API because all of our routes have that. 48 00:03:00,270 --> 00:03:02,400 So that way we don't have to type it out. 49 00:03:02,400 --> 00:03:08,640 We can just say base URL slash products, users, whatever, and then it'll also get added to the current 50 00:03:08,640 --> 00:03:09,420 value. 51 00:03:09,420 --> 00:03:10,800 So make sure you save. 52 00:03:10,800 --> 00:03:13,500 It's easy to miss this, but the save button is right here. 53 00:03:13,500 --> 00:03:14,610 Let's click that. 54 00:03:14,640 --> 00:03:20,130 Now up here in the dropdown, we can say that we want to use our pro shop environment. 55 00:03:20,520 --> 00:03:30,630 Okay, so the next thing we want to do is go to API's and create an API, say Pro shop API. 56 00:03:32,240 --> 00:03:33,650 Create actually version. 57 00:03:33,650 --> 00:03:36,110 I'm going to say 2.00. 58 00:03:39,060 --> 00:03:40,740 And now we'll create an API. 59 00:03:40,770 --> 00:03:48,480 Now when we want to make a request, I want them to be in in a collection. 60 00:03:48,480 --> 00:03:54,630 So we're going to have basically three collections, products, orders and users. 61 00:03:54,630 --> 00:03:56,460 So we're starting with products. 62 00:03:56,460 --> 00:03:58,410 So let's create a collection. 63 00:03:58,410 --> 00:04:00,150 I'm going to call it products. 64 00:04:02,000 --> 00:04:02,570 Okay. 65 00:04:02,570 --> 00:04:03,740 And then. 66 00:04:04,940 --> 00:04:06,250 Yeah, that should do it. 67 00:04:06,260 --> 00:04:13,400 So in products I'm going to have and you can create subfolders if you want, but this is where we want 68 00:04:13,400 --> 00:04:15,110 to add all of our requests. 69 00:04:15,110 --> 00:04:17,720 So let's click add requests and we can name it. 70 00:04:17,720 --> 00:04:20,240 So let's say get all. 71 00:04:21,019 --> 00:04:23,760 Products and then the URL. 72 00:04:23,780 --> 00:04:27,750 So to use your variable, you just use double curly braces. 73 00:04:27,770 --> 00:04:31,490 If we start to type base, you'll see the option base URL. 74 00:04:31,790 --> 00:04:35,600 So we're going to use that and then just say slash products. 75 00:04:36,560 --> 00:04:36,860 Okay. 76 00:04:36,860 --> 00:04:40,880 And if I click send, it's going to go ahead and show me the products. 77 00:04:40,880 --> 00:04:46,730 There's no ID because remember, we're still fetching from the file, not the database, but this is 78 00:04:46,730 --> 00:04:48,620 going to stay the same regardless. 79 00:04:48,620 --> 00:04:51,020 So what I'm going to do is click save. 80 00:04:51,110 --> 00:04:57,890 That way, whenever we need to fetch products, we can just simply come over here into our collections 81 00:04:57,890 --> 00:05:00,410 and select get all products. 82 00:05:01,160 --> 00:05:06,170 Okay, we can close the rest of this stuff up so that at least gets us set up. 83 00:05:06,170 --> 00:05:14,030 I like to have everything organized, so as we create routes in our API and test them, we'll save them 84 00:05:14,030 --> 00:05:15,590 to Postman as well. 85 00:05:16,630 --> 00:05:17,020 Okay. 86 00:05:17,020 --> 00:05:25,060 So now in the next video, we're going to start on actually fetching our products from the database, 87 00:05:25,060 --> 00:05:26,980 from our Express API. 88 00:05:27,190 --> 00:05:32,860 We're going to do that before we get into like Redux and get back into our front end.