1 00:00:00,150 --> 00:00:05,220 All right so now let's dive back into our actual application now that we talked a little bit about how 2 00:00:05,220 --> 00:00:07,030 the API works. 3 00:00:07,350 --> 00:00:09,020 Go back here. 4 00:00:09,360 --> 00:00:11,890 We installed all those those three packages. 5 00:00:12,030 --> 00:00:13,790 Let's set up our basic app. 6 00:00:13,920 --> 00:00:17,240 So there should be review but touch. 7 00:00:17,420 --> 00:00:21,730 Yes let's open it up. 8 00:00:21,810 --> 00:00:23,910 What does it C9. 9 00:00:25,080 --> 00:00:25,850 OK. 10 00:00:26,270 --> 00:00:31,100 Do our basic So we need var express equals. 11 00:00:31,320 --> 00:00:36,060 And like I said this is going to be barebones we're not going to style it and make it pretty at a real 12 00:00:36,070 --> 00:00:37,170 fun functionality. 13 00:00:37,170 --> 00:00:45,510 But it will be something you can use sort of as a template for other apps that use API and will do app 14 00:00:45,750 --> 00:00:48,590 equals Express. 15 00:00:49,560 --> 00:00:52,720 While we're here so it's going to open up a previous app. 16 00:00:52,800 --> 00:00:55,240 Let's do this one. 17 00:00:55,560 --> 00:00:58,080 Copy this line. 18 00:00:58,080 --> 00:01:00,150 I always forget this one. 19 00:01:00,150 --> 00:01:06,460 The process that the infield up port but I'll just put this here and I'll change it to say movie app 20 00:01:08,280 --> 00:01:10,550 has started OK. 21 00:01:10,560 --> 00:01:18,510 And then will also require request just like I'd save it to a variable. 22 00:01:19,260 --> 00:01:29,090 Ok so this express app like I said will have two routes one slash search and another one slash results 23 00:01:29,090 --> 00:01:29,610 . 24 00:01:29,910 --> 00:01:32,440 So you'll see a form on one page. 25 00:01:32,520 --> 00:01:38,680 Fill it out and then that submission of that form will then trigger or send a request to our results 26 00:01:38,680 --> 00:01:44,990 route which will then actually work with the API send a request the API that will come back and then 27 00:01:44,990 --> 00:01:46,580 will display the results. 28 00:01:46,980 --> 00:01:54,060 Let's start simple by taking apt get will just do slash results 29 00:01:57,690 --> 00:02:05,550 request response or standard route in then in here is when we'll actually do an API call. 30 00:02:05,790 --> 00:02:10,540 So when a user triggers slash results we'll actually do a search of the API. 31 00:02:10,710 --> 00:02:12,930 And we're going to start by hard coding it in. 32 00:02:12,960 --> 00:02:17,810 So LEDs hard code in a search like we have here. 33 00:02:18,100 --> 00:02:20,580 I'm sure it will do it for California. 34 00:02:20,580 --> 00:02:25,160 So this is the API call we're just going to start off by making every time. 35 00:02:25,260 --> 00:02:30,320 So just to jog your memory here this is what we're looking for. 36 00:02:30,480 --> 00:02:38,970 Request this giant you R-AL and then call back with error wups error response and body. 37 00:02:38,970 --> 00:02:43,080 So let's try that now let's just start by just making sure our route works. 38 00:02:43,110 --> 00:02:48,500 So we'll do let's do that send it low. 39 00:02:48,540 --> 00:02:54,460 It works just like that at startup per server. 40 00:02:56,140 --> 00:02:57,840 Ok movie epos started. 41 00:02:58,170 --> 00:03:02,210 Let's now go visit preview. 42 00:03:03,210 --> 00:03:11,750 So we don't have our route route set up but we should have Slash results and we get hello. 43 00:03:11,880 --> 00:03:12,930 It works. 44 00:03:13,350 --> 00:03:18,160 And I'll just open that up in a new tab and get rid of this here. 45 00:03:18,540 --> 00:03:18,780 OK. 46 00:03:18,780 --> 00:03:24,870 So rather than seeing that we want to see our movie data and we'll start by just seeing all of it. 47 00:03:24,870 --> 00:03:30,690 So I want to see this but when I go to slash results so we're not dealing with HDMI yet that will be 48 00:03:30,690 --> 00:03:31,310 next. 49 00:03:31,410 --> 00:03:36,060 But we just want to make sure our API is connecting and that's what I usually do is start with the API 50 00:03:36,090 --> 00:03:38,550 and then worry about presentation. 51 00:03:38,700 --> 00:03:44,050 So request that you are well that we need. 52 00:03:44,640 --> 00:03:46,210 Of course I copied something else. 53 00:03:46,350 --> 00:03:47,770 So let's go back. 54 00:03:47,790 --> 00:03:49,310 Copy that you are. 55 00:03:49,410 --> 00:03:54,240 This is where we're requesting feel free to make this whatever search term you want whatever state you 56 00:03:54,240 --> 00:03:55,850 live in. 57 00:03:56,100 --> 00:03:58,430 And then we need a callback. 58 00:03:58,440 --> 00:04:07,650 So it's error response and then body and then we add in that if statement. 59 00:04:08,040 --> 00:04:09,650 Technically we don't have to have that. 60 00:04:09,660 --> 00:04:11,250 It's just good to have. 61 00:04:11,250 --> 00:04:16,060 Just so that we're not you know working with broken data and we can handle the error if we need to. 62 00:04:16,350 --> 00:04:30,510 So if there's not an error and response that status code equals 200 if that's the case then we're going 63 00:04:30,510 --> 00:04:31,930 to work with body. 64 00:04:31,950 --> 00:04:39,090 So before we even parse it let's just send the PADI's so does send a body which will be a string at 65 00:04:39,090 --> 00:04:39,870 that point. 66 00:04:39,870 --> 00:04:44,060 And let's see what we get. 67 00:04:44,130 --> 00:04:47,790 Refresh and there we go. 68 00:04:47,790 --> 00:04:51,820 Now when I refresh you can see it starts off. 69 00:04:51,990 --> 00:04:54,750 It's really hard to see because this Chrome extension is kicking in. 70 00:04:54,750 --> 00:04:58,720 But you can see it's this chase on here. 71 00:04:58,740 --> 00:05:00,940 It's actually a string of Jaison. 72 00:05:01,110 --> 00:05:04,590 What we need to do now is turn it into an object. 73 00:05:04,620 --> 00:05:08,140 So if I wanted just to get the first title. 74 00:05:08,540 --> 00:05:11,330 Let's go back here. 75 00:05:11,330 --> 00:05:14,750 I just want King of California or whatever the first title is. 76 00:05:14,750 --> 00:05:19,290 I need to access search and then it's an array. 77 00:05:19,290 --> 00:05:23,430 So I want the zero with element but if I do that here 78 00:05:28,950 --> 00:05:29,550 and save 79 00:05:36,840 --> 00:05:41,540 we get an error which is cannot read properly zero of undefined. 80 00:05:41,670 --> 00:05:48,690 So this is undefined here because body is still a string just like we saw on the last video or two videos 81 00:05:48,690 --> 00:05:49,160 ago. 82 00:05:49,320 --> 00:05:51,210 We need to convert it to an object. 83 00:05:51,510 --> 00:05:59,350 So that's where we get our Jason parce body I'll save it to let's just call it results or. 84 00:05:59,550 --> 00:06:00,770 Results is fine. 85 00:06:00,780 --> 00:06:02,120 Jaisalmer up parch body. 86 00:06:02,160 --> 00:06:08,060 And then we just replace body here with results. 87 00:06:08,370 --> 00:06:14,400 So that gives us the object form of that string that's been parsed and converted then we can access 88 00:06:14,400 --> 00:06:17,890 it just like any other object. 89 00:06:18,330 --> 00:06:23,310 And now we get this single element and then if we just want the title 90 00:06:26,290 --> 00:06:31,400 restart at one more time and we get King of California. 91 00:06:31,800 --> 00:06:32,580 Excellent. 92 00:06:32,640 --> 00:06:36,060 So so pretty straightforward really. 93 00:06:36,060 --> 00:06:40,980 We're not done of course but all that we did was basically take our request code that we had earlier 94 00:06:41,400 --> 00:06:43,360 and just put it inside of a wrap. 95 00:06:43,380 --> 00:06:50,130 So next up we'll be taking the response and actually creating a template that uses it and displays all 96 00:06:50,130 --> 00:06:53,250 of the movie titles in just a simple list. 97 00:06:53,580 --> 00:06:58,040 And it's a speech to a mouse rather than just plain text that we see now. 98 00:06:58,050 --> 00:06:58,450 All right