1 00:00:00,270 --> 00:00:03,000 In this video you're gonna be wiring up the weather. 2 00:00:03,000 --> 00:00:03,890 End Point. 3 00:00:03,930 --> 00:00:09,660 We have the end point created and we already have the code written to geo code and address and get the 4 00:00:09,690 --> 00:00:12,830 forecast from the geo coding output. 5 00:00:12,870 --> 00:00:17,990 We're gonna put all of that together to actually finalize this end point. 6 00:00:18,030 --> 00:00:24,060 Now the first thing we're gonna do is copy some of the files from the weather app project over to the 7 00:00:24,060 --> 00:00:25,040 new folder. 8 00:00:25,050 --> 00:00:30,570 We already wrote great code for geo coding and for fetching a forecast and we're going to repurpose 9 00:00:30,570 --> 00:00:30,750 it. 10 00:00:31,080 --> 00:00:34,890 So right here I'm going to open up the finder on my machine. 11 00:00:34,950 --> 00:00:40,590 I'm going to go into the node course directory and from the weather app project we're going to grab 12 00:00:40,590 --> 00:00:42,840 the entire utilize folder. 13 00:00:42,930 --> 00:00:48,620 So I'm going to copy that to the clipboard that's going to be our two JavaScript files which we're gonna 14 00:00:48,660 --> 00:00:52,720 need and we're gonna bring those over to the web server project. 15 00:00:52,770 --> 00:00:57,480 I'm going to paste the Utilities folder right inside of the source directory. 16 00:00:57,480 --> 00:01:02,720 So in here I'll paste the item adding the utilize folder inside of there. 17 00:01:02,730 --> 00:01:06,000 So now we have the utilize directory in our project. 18 00:01:06,030 --> 00:01:11,270 The one we're working on and we can use both forecast and geo code inside of there. 19 00:01:11,280 --> 00:01:17,300 Now if you remember those two files they took advantage of the NPM request module. 20 00:01:17,370 --> 00:01:22,600 We're gonna have to make sure we have that installed and currently it is not installed in web server. 21 00:01:22,680 --> 00:01:28,630 So down below I can just shut down node on using control C and install it NPM. 22 00:01:28,650 --> 00:01:34,440 I request at two point eighty eight point zero. 23 00:01:34,440 --> 00:01:40,440 I'm gonna go ahead and fire that command off to install a request in the web server project and once 24 00:01:40,440 --> 00:01:46,380 it is installed I'll just cycle through the previous commands using the up arrow and then restart node 25 00:01:46,380 --> 00:01:48,790 man exactly like we had it before. 26 00:01:48,810 --> 00:01:55,800 Now we can use both geo code and forecast inside of our callback right here to get the correct forecast 27 00:01:55,800 --> 00:01:59,460 information sent back inside of the weather app. 28 00:01:59,460 --> 00:02:06,840 Project in app dot J asked we had an example of what this took and we used the nested callback pattern. 29 00:02:06,930 --> 00:02:09,050 So right here we used geo code. 30 00:02:09,090 --> 00:02:11,940 Then we went down to use forecast. 31 00:02:11,940 --> 00:02:16,040 Now the first thing we did is we actually checked if there was an address or not. 32 00:02:16,140 --> 00:02:19,190 And we already have code that gets that done in place. 33 00:02:19,230 --> 00:02:25,500 We already have an if statement up above that makes sure the address exists which means that down below 34 00:02:25,560 --> 00:02:32,850 right here we can start the process of calling geo code which is the first thing we do inside of else. 35 00:02:32,840 --> 00:02:38,010 Now obviously we can't console that log results to get them back to the requester. 36 00:02:38,010 --> 00:02:43,400 Instead we're going to be using response dot send to send those results back. 37 00:02:43,560 --> 00:02:50,160 In the case of an error for either geo code or forecast we'll send back an object with the error property 38 00:02:50,340 --> 00:02:53,720 providing the message as the value for that property. 39 00:02:53,850 --> 00:02:59,120 And if we get all the way to the end and things go well we'll send back an object like this one though 40 00:02:59,130 --> 00:03:05,490 instead of having location and forecast data dumped to the terminal they would be added on to the object 41 00:03:05,550 --> 00:03:07,290 we send as the response. 42 00:03:07,320 --> 00:03:14,790 So console dot log calls get replaced with calls to response dot send since we're working inside of 43 00:03:14,790 --> 00:03:16,310 our Express route. 44 00:03:16,320 --> 00:03:20,580 Handler actually getting this done is going to be your challenge for the video. 45 00:03:20,580 --> 00:03:21,600 You know how to do it. 46 00:03:21,600 --> 00:03:25,560 We've gone through all of the necessary steps before and down below. 47 00:03:25,560 --> 00:03:32,220 I have some challenge comments just to make sure we're all headed in the right direction so goal y are 48 00:03:32,220 --> 00:03:34,260 up forward slash weather. 49 00:03:34,350 --> 00:03:36,460 Right now it's sending back dummy data. 50 00:03:36,480 --> 00:03:42,450 We want to make sure it can send back real forecast data based off of the address it provided as part 51 00:03:42,450 --> 00:03:43,790 of the query string. 52 00:03:43,860 --> 00:03:49,710 Step one you're gonna have to load in both of those functions into this file and that's gonna be easy 53 00:03:49,710 --> 00:03:54,060 to do since that utilize folder has been copied into this project. 54 00:03:54,060 --> 00:03:59,190 Next up you're going to actually geo code the address to get the coordinates. 55 00:03:59,190 --> 00:04:01,430 If something goes wrong send back the error. 56 00:04:01,470 --> 00:04:06,110 If things go well you're going to use those coordinates to get the forecast. 57 00:04:06,150 --> 00:04:09,960 If something goes wrong when getting the forecast send back an error. 58 00:04:09,960 --> 00:04:16,320 If things go well you're going to send back an object that looks exactly like this but with a real forecast 59 00:04:16,320 --> 00:04:21,820 string the actual location that was used an address which will stay the same. 60 00:04:21,870 --> 00:04:27,930 Now when you're done you want to test things out visiting a u r l like this one or address equals. 61 00:04:27,930 --> 00:04:33,540 Boston should result in a real forecast string and a real location showing up. 62 00:04:33,540 --> 00:04:39,420 Then switch it up picking a different location maybe a location like your current one and make sure 63 00:04:39,420 --> 00:04:43,410 you see the forecast you're currently experiencing where you are. 64 00:04:43,410 --> 00:04:46,110 Take as much time as you need to knock this out. 65 00:04:46,110 --> 00:04:51,530 Feel free to refer back to the code we wrote before to change these two callbacks together. 66 00:04:51,630 --> 00:04:55,200 When you're done test your work then come back and click play 67 00:04:59,280 --> 00:05:00,030 how'd you do. 68 00:05:00,030 --> 00:05:02,760 Let's go ahead and kick things off with step number one. 69 00:05:02,760 --> 00:05:05,450 We're gonna load in the functions that we're going to need. 70 00:05:05,730 --> 00:05:11,790 So up above at the very top of the file I'm gonna use require a couple of times to grab those two functions 71 00:05:12,090 --> 00:05:15,090 and I'll go ahead and kick things off by grabbing geo code. 72 00:05:15,090 --> 00:05:17,490 First though the order isn't important. 73 00:05:17,490 --> 00:05:19,930 So geo code is the function I'm gonna grab. 74 00:05:20,220 --> 00:05:26,610 I'm gonna get it as the return value from require and I'm gonna load in my local file dot forward slash 75 00:05:26,640 --> 00:05:29,850 utilize forward slash geo code. 76 00:05:29,850 --> 00:05:32,670 Next up we have the forecast function. 77 00:05:32,670 --> 00:05:39,690 So right here I'll define that and I'll use require to load that file in dot forward slash utilize forward 78 00:05:39,690 --> 00:05:45,950 slash forecast now that we have both of those functions available we're ready to actually use them in 79 00:05:45,960 --> 00:05:47,070 the route handlers. 80 00:05:47,070 --> 00:05:49,430 Down below I said handlers plural. 81 00:05:49,440 --> 00:05:50,770 There's only just one. 82 00:05:50,880 --> 00:05:53,790 And it is the one right here for the moment. 83 00:05:53,820 --> 00:05:57,410 I'm going to comment out our old call to response dot send. 84 00:05:57,450 --> 00:06:01,970 I'm gonna leave it in place just so we can remember which properties were supposed to send back. 85 00:06:02,100 --> 00:06:06,160 Though I'll actually recreate it when I write my code four steps two and three. 86 00:06:06,210 --> 00:06:09,240 Step two is to use the address to geo code. 87 00:06:09,240 --> 00:06:15,330 So right here we are going to call the geo code function and I am going to pass the address in request 88 00:06:15,440 --> 00:06:17,910 dot query dot address. 89 00:06:17,910 --> 00:06:20,820 Now if you remember geo code takes in two arguments. 90 00:06:20,820 --> 00:06:23,180 The second is our callback function. 91 00:06:23,310 --> 00:06:28,260 And if you forgot exactly how anything worked you were allowed to crack open those files to jog your 92 00:06:28,260 --> 00:06:29,110 memory. 93 00:06:29,130 --> 00:06:31,890 In this case we get two potential arguments. 94 00:06:31,890 --> 00:06:37,080 We either have the error message as a string or we have our data as an object. 95 00:06:37,080 --> 00:06:43,470 Now when we had learned about dish structuring we actually dish structured that object creating individual 96 00:06:43,470 --> 00:06:45,480 variables for the properties. 97 00:06:45,480 --> 00:06:49,380 We did that in app dot J.S. inside of the weather app project. 98 00:06:49,380 --> 00:06:54,750 I'm gonna do that right here as well so I'm going to d structure latitude off of there. 99 00:06:54,750 --> 00:06:57,340 I'm also going to do the same for a longer dude. 100 00:06:57,390 --> 00:07:00,870 And finally I'll do the same for location now down below. 101 00:07:00,870 --> 00:07:03,790 The first thing we want to do is check if there was an error. 102 00:07:03,810 --> 00:07:09,930 If there was an error we don't want to go on to run the forecast function because it's not going to 103 00:07:09,930 --> 00:07:10,230 work. 104 00:07:10,230 --> 00:07:17,610 Instead I'll use return along with response dot send to wrap things up we're going to send back an object 105 00:07:17,610 --> 00:07:23,600 with an error property and the value for that is going to be a variable with the same name. 106 00:07:23,610 --> 00:07:26,710 So this is a great use case for the shorthand. 107 00:07:26,730 --> 00:07:27,640 Perfect. 108 00:07:27,690 --> 00:07:31,170 Now maybe you didn't use the shorthand or you didn't put it on one line. 109 00:07:31,170 --> 00:07:32,530 That's fine as well. 110 00:07:32,610 --> 00:07:38,020 At that point we're talking about differences in syntax preference down below. 111 00:07:38,040 --> 00:07:44,370 After that if statement We know that geo coding went well and it is time to actually call forecasts 112 00:07:44,390 --> 00:07:48,590 so I'm going to call the forecast function passing in these three arguments. 113 00:07:48,590 --> 00:07:51,800 It needs the first being the latitude. 114 00:07:51,990 --> 00:07:57,530 The second being the longitude and the third being a callback function. 115 00:07:57,600 --> 00:08:02,950 We're gonna have the error and if we don't have the error then we'll have our forecast data. 116 00:08:03,030 --> 00:08:05,850 I'm gonna setup variables for both of those. 117 00:08:05,880 --> 00:08:07,000 Excellent. 118 00:08:07,020 --> 00:08:10,410 Now we can actually set up an error handler for forecast. 119 00:08:10,410 --> 00:08:11,710 If there is an error. 120 00:08:11,820 --> 00:08:12,780 That's OK. 121 00:08:12,810 --> 00:08:15,570 We're going to stop the function and we'll use response. 122 00:08:15,570 --> 00:08:17,200 Dot send it to send it back. 123 00:08:17,910 --> 00:08:19,020 Excellent. 124 00:08:19,140 --> 00:08:19,450 Now. 125 00:08:19,470 --> 00:08:20,330 Right here. 126 00:08:20,370 --> 00:08:24,020 This code only runs if everything went well. 127 00:08:24,120 --> 00:08:29,010 And we're gonna work on sending back the object using the same structure we had below. 128 00:08:29,010 --> 00:08:30,840 So response dot send. 129 00:08:30,840 --> 00:08:38,250 I'm going to send back an object with a forecast property the value will come from the forecast data 130 00:08:38,490 --> 00:08:40,280 variable up above. 131 00:08:40,290 --> 00:08:42,560 Next up we have the location property. 132 00:08:42,660 --> 00:08:47,790 There's a variable with that name and that's where we're gonna get the value so we can use these shorthand 133 00:08:47,790 --> 00:08:49,750 right here for that. 134 00:08:49,770 --> 00:08:54,330 Next up the last property is address and that value comes from. 135 00:08:54,330 --> 00:08:57,370 Request duck query dot address. 136 00:08:57,390 --> 00:08:57,930 Perfect. 137 00:08:58,440 --> 00:09:03,690 Now that we have all of this in place I can remove the commented out call from before. 138 00:09:03,690 --> 00:09:08,740 I'm also going to remove the challenged comments as the only thing left to do is test our work. 139 00:09:08,820 --> 00:09:14,880 Then I'm actually going to test our work by saving the file and refreshing things in the browser. 140 00:09:14,940 --> 00:09:19,300 Over here I'm seeing my static output per forecast and location. 141 00:09:19,320 --> 00:09:20,940 Now I am searching for Boston. 142 00:09:20,940 --> 00:09:24,210 So let's refresh the page and see what happens right here. 143 00:09:24,210 --> 00:09:26,840 I'm getting the weather for the following location. 144 00:09:26,910 --> 00:09:29,150 Boston Mass in the United States. 145 00:09:29,190 --> 00:09:34,650 I have the input and I have my forecast partly cloudy starting in the evening it's currently twenty 146 00:09:34,650 --> 00:09:38,440 nine degrees out and there is a zero percent chance of rain. 147 00:09:38,490 --> 00:09:39,690 So there we go. 148 00:09:39,720 --> 00:09:42,180 We now have the finalized end point. 149 00:09:42,270 --> 00:09:47,260 That takes in an address and sends the forecast data back from here. 150 00:09:47,280 --> 00:09:50,850 We're going to actually wire that up in the web app. 151 00:09:50,850 --> 00:09:58,230 So we have the input field and we show the forecast on the screen here as a nice rendered HDMI page 152 00:09:58,500 --> 00:10:02,040 as opposed to the format it comes in which is Jason. 153 00:10:02,130 --> 00:10:06,750 That's where we're going to stop for this one and don't worry you're going to get a ton more experience 154 00:10:06,750 --> 00:10:10,050 creating Jason based end points throughout the class. 155 00:10:10,050 --> 00:10:15,350 We're going to work on a major project with database storage and authentication a bit later. 156 00:10:15,420 --> 00:10:19,730 This is just an introduction into the idea of express roots. 157 00:10:19,830 --> 00:10:22,250 Jason and asynchronous development. 158 00:10:22,410 --> 00:10:22,950 All right. 159 00:10:22,950 --> 00:10:27,900 That's where we're going to stop before this video in the next one we're going to continue on integrating 160 00:10:27,900 --> 00:10:30,570 this you are well into our web application.