1 00:00:00,270 --> 00:00:06,180 In order to start working with products in our application we're going to have to perform a CTP request 2 00:00:06,720 --> 00:00:11,410 and for that we're going to need to install axioms which by the way is already installed. 3 00:00:11,430 --> 00:00:13,600 I'm just going to go over the command line. 4 00:00:13,620 --> 00:00:18,480 We're gonna need to get the URL so where we have temporary product. 5 00:00:18,480 --> 00:00:23,430 And then lastly we're just going to take a look at our response must start by installing the exhales. 6 00:00:23,460 --> 00:00:25,240 So I'm going to stop there sir. 7 00:00:25,320 --> 00:00:29,190 Again you already have axes installed if you're using the Star project. 8 00:00:29,340 --> 00:00:36,330 I'm just gonna go over the command where I'm going to clear the console online ordering right NPM I 9 00:00:36,750 --> 00:00:41,230 and we have Pax CEOs and then we can add dash dash save. 10 00:00:41,250 --> 00:00:47,210 So that's going to install the initially TPL library that allows us to make a request. 11 00:00:47,280 --> 00:00:48,960 You could technically use fetch. 12 00:00:48,990 --> 00:00:55,050 The reason why I'm using axe here is because strappy the back end that we're gonna use in order to create 13 00:00:55,080 --> 00:00:58,500 our own API uses it in their documentation. 14 00:00:58,500 --> 00:01:03,070 So it's just gonna be less confusing for you just in case there are some errors. 15 00:01:03,070 --> 00:01:09,630 And I'm going to clear again everything in the console and before I start up the server I'm gonna get 16 00:01:09,630 --> 00:01:11,220 my new URL. 17 00:01:11,400 --> 00:01:17,110 Now the fastest way of getting the URL is by navigating through John Smith of the dot com. 18 00:01:17,410 --> 00:01:19,890 So dub dub dub John Small the dot com. 19 00:01:19,890 --> 00:01:25,050 Then go pass courses and then look for redirect text store version. 20 00:01:25,590 --> 00:01:31,860 And then look for the API so click on the API and you're gonna have John's small tutorials and forward 21 00:01:31,860 --> 00:01:36,510 slash and wherever you are Alice and I know that you're thinking Okay wait a minute why you're giving 22 00:01:36,510 --> 00:01:39,210 us the URL if I can clearly see that. 23 00:01:39,210 --> 00:01:41,460 Well we cannot get anything from that. 24 00:01:41,550 --> 00:01:44,760 Your URL and I'm going to show you in a second why we're doing that. 25 00:01:44,850 --> 00:01:49,800 And the simple answer is because that's how again the response comes back from stripping. 26 00:01:50,130 --> 00:01:57,420 So just copy and paste the URL like so that over back to the you are well within the utilize and just 27 00:01:57,420 --> 00:01:59,000 export it as a default. 28 00:01:59,050 --> 00:01:59,460 So right. 29 00:01:59,460 --> 00:02:06,450 Export default and then passing the string so set up the string and then passing the URL don't add the 30 00:02:06,450 --> 00:02:10,570 forward slash make sure that you just copy and paste it the way it is. 31 00:02:10,570 --> 00:02:11,050 OK. 32 00:02:11,190 --> 00:02:17,750 So once we set this up the product the actual response is gonna be on a forward slash products. 33 00:02:17,760 --> 00:02:23,820 And again the reason why we're doing that is because that's how strappy sends back the response. 34 00:02:23,820 --> 00:02:29,400 So once you in fact change it to your own API that we're going to create later on. 35 00:02:29,400 --> 00:02:34,110 Again you don't have to refactor your whole application because when we're gonna be setting up our own 36 00:02:34,340 --> 00:02:40,040 a sheet requests we're going to say we would want to get data from forward slash products. 37 00:02:40,050 --> 00:02:47,000 So if let's say we're going to say right now and if we're going to navigate back to the URL that I provided. 38 00:02:47,370 --> 00:02:52,500 If you're going to type in forward slash and then products then we're going to get back to products 39 00:02:52,860 --> 00:02:57,660 and products is just gonna be a giant array meaning giant 7. 40 00:02:57,780 --> 00:03:00,560 So I don't know some people that might be big. 41 00:03:00,600 --> 00:03:05,760 So for some it might be small but we're going to have seven products and each and every product is going 42 00:03:05,760 --> 00:03:13,410 to have a title as well as the idea price description some properties that strappy just adds by default. 43 00:03:13,440 --> 00:03:18,810 So it's not like we're going to use them and it's not like we are going to create them but strappy just 44 00:03:18,870 --> 00:03:19,380 as them. 45 00:03:19,380 --> 00:03:25,500 So since I wanted to have exact same response as you're going to have from your local project and that's 46 00:03:25,500 --> 00:03:30,750 the reason why you have these properties and then you have a giant image again not something that I 47 00:03:30,750 --> 00:03:36,210 created myself but that's how strappy returns the images and the property we're going to be looking 48 00:03:36,210 --> 00:03:37,540 for is the URL. 49 00:03:37,680 --> 00:03:43,440 So we're going to loop over disarray and then we're going to access specific data about our product 50 00:03:43,860 --> 00:03:51,300 and if we're going to head over back to our U RL file we did install the axe heroes we got the URL and 51 00:03:51,300 --> 00:03:53,300 finally we looked at our response. 52 00:03:53,340 --> 00:04:00,210 So once I do that I can just clear again the console and then we can type NPM start to start up our 53 00:04:00,210 --> 00:04:00,930 dev server.