1 00:00:00,270 --> 00:00:05,100 In this video it's time for you to do the same thing we just did to geo code. 2 00:00:05,100 --> 00:00:07,380 But for fetching the forecast. 3 00:00:07,380 --> 00:00:09,540 Now of course there are challenged comments. 4 00:00:09,540 --> 00:00:14,460 I'm going to walk you through exactly what I'd like you to do although it's going to be very similar 5 00:00:14,460 --> 00:00:16,130 to what we just did. 6 00:00:16,140 --> 00:00:22,470 Now before I even pull those up we can remove the old commented out code where we were making our geo 7 00:00:22,470 --> 00:00:29,430 code request that's no longer necessary as we have a replacement for that over in the geo code file. 8 00:00:29,430 --> 00:00:35,850 Now I am going to still leave the commented out forecast code in place as there's no need to re go through 9 00:00:35,850 --> 00:00:37,330 the logic in our head. 10 00:00:37,380 --> 00:00:41,620 We can essentially copy and paste that stuff into the new function. 11 00:00:41,640 --> 00:00:43,440 We're gonna end up creating. 12 00:00:43,440 --> 00:00:48,660 Now it's time to talk about what I'd like you to do and I do have comments for this challenge. 13 00:00:48,690 --> 00:00:54,150 Now I'm going to include an example function call as well so I'll show you where you can find all of 14 00:00:54,150 --> 00:00:55,440 that on the web. 15 00:00:55,440 --> 00:01:00,920 Once again it is over at Lynx dot Mead dot I O forward slash. 16 00:01:00,930 --> 00:01:08,160 This one is forward slash forecast when you visit that it is going to bring you over to a set of challenge 17 00:01:08,160 --> 00:01:15,130 comments as well as an example function call to make sure we're all working towards the same goal. 18 00:01:15,180 --> 00:01:17,660 I'm gonna take the contents of this file. 19 00:01:17,760 --> 00:01:24,480 I'm gonna bring them over to app dot J S and I'll paste them down at the bottom below the call to geo 20 00:01:24,480 --> 00:01:25,760 code if you'd like. 21 00:01:25,770 --> 00:01:28,470 You could also comment out the call to geo code. 22 00:01:28,500 --> 00:01:31,210 So you're not seeing so much output in the terminal. 23 00:01:31,290 --> 00:01:34,100 Now let's go ahead and talk about what I'd like you to do. 24 00:01:34,110 --> 00:01:40,470 The goal here is to create a reusable function for getting the forecast much like we created a reusable 25 00:01:40,470 --> 00:01:43,910 function for geo coding a given address. 26 00:01:43,920 --> 00:01:48,030 Now you're going to create this function forecast in a separate file. 27 00:01:48,150 --> 00:01:53,910 You can create it in the forecast dot J S file which you'll make in the utilize directory. 28 00:01:53,910 --> 00:02:00,420 Once you have the basics set up once you have the function defined and exported you can require it in 29 00:02:00,420 --> 00:02:03,900 app dot J S and call it as shown below. 30 00:02:03,900 --> 00:02:08,460 So this is a sample call you can use as you're building out the function. 31 00:02:08,460 --> 00:02:13,250 It's nice to know what we're working towards in terms of the arguments expected. 32 00:02:13,380 --> 00:02:18,720 Now step three once you have that basic structure in place it's time to fill out the function. 33 00:02:18,720 --> 00:02:23,210 In the end of the day you're going to use the same conditional logic we used up above. 34 00:02:23,220 --> 00:02:25,450 If there's an error we're gonna do one thing. 35 00:02:25,620 --> 00:02:29,190 If there is an error property on the body we're gonna do something else. 36 00:02:29,220 --> 00:02:33,970 Otherwise we will go ahead and generate that forecast strength down below. 37 00:02:34,020 --> 00:02:38,430 You're still going to do those same three things right here for each of those. 38 00:02:38,430 --> 00:02:44,370 You're going to call the callback function exactly like we did for geo code where we have three separate 39 00:02:44,370 --> 00:02:50,250 distinct calls to callback depending on what exactly happened when the request was made. 40 00:02:50,250 --> 00:02:56,790 So over here for low level errors pass a string for the error just like we did with GEO code we got 41 00:02:56,790 --> 00:03:01,570 a string argument back and the same thing is gonna be true for coordinate errors. 42 00:03:01,620 --> 00:03:06,870 You can always test that by converting one of these to a string and adding a letter inside of it. 43 00:03:07,110 --> 00:03:14,010 Last up the success case in this case I would expect that our callback gets called with not an error 44 00:03:14,160 --> 00:03:20,790 but with data now data should be a string matching up with the forecast string we had generated up above 45 00:03:21,120 --> 00:03:26,280 where we use the summary and then we move on to say it's currently the temperature out and there's an 46 00:03:26,280 --> 00:03:28,020 X percent chance of rain. 47 00:03:28,620 --> 00:03:32,740 So in the end of the day the goal isn't to change the functionality at all. 48 00:03:32,790 --> 00:03:38,580 The goal is to just break all of that out into this separate function that we can then use and reuse 49 00:03:38,610 --> 00:03:40,160 throughout our application. 50 00:03:40,350 --> 00:03:43,460 If at any point along the way you're not quite sure what to do. 51 00:03:43,470 --> 00:03:48,740 Just look at the code you wrote for the geo coding example because in the end of the day both are going 52 00:03:48,740 --> 00:03:56,060 to look very similar though obviously the response data and the U.R.L. are slightly different just as 53 00:03:56,060 --> 00:04:01,700 a reminder if you're using the weather stack API you already have the correct stuff in place so you 54 00:04:01,700 --> 00:04:07,350 shouldn't need to make any code changes that you are L you're going to copy is already the weather stack 55 00:04:07,410 --> 00:04:13,340 U.R.L. and the data you're going to print will already work with the weather stack response as it did 56 00:04:13,340 --> 00:04:14,060 before. 57 00:04:15,400 --> 00:04:25,070 All right take some time to knock that out test your work and when you're done come back and click play. 58 00:04:25,090 --> 00:04:26,050 How did you do. 59 00:04:26,050 --> 00:04:29,530 Hopefully you were able to get through that without too much trouble. 60 00:04:29,530 --> 00:04:32,770 As always we're going to work through these solution together now. 61 00:04:32,770 --> 00:04:36,910 This was by far the most code you had to write for a challenge. 62 00:04:37,000 --> 00:04:42,770 And as these challenges get harder you might have a harder time solving them and that is okay. 63 00:04:42,790 --> 00:04:44,070 It is by design. 64 00:04:44,080 --> 00:04:50,730 The goal is to give you more room to experiment play and learn and less guidance. 65 00:04:50,800 --> 00:04:53,350 And that is going to be an important piece to the puzzle. 66 00:04:53,350 --> 00:04:59,140 Though it can be frustrating at first because you'll feel like you just learned this thing and you get 67 00:04:59,140 --> 00:05:01,870 it but you can't put it into action and that's OK. 68 00:05:01,930 --> 00:05:04,000 That's what the challenges are here to help with. 69 00:05:04,540 --> 00:05:06,230 So let's go ahead and get started. 70 00:05:06,250 --> 00:05:08,620 I want to create that function in a new file. 71 00:05:08,650 --> 00:05:16,090 Export it and require it over here in utilize dot J S I'm going to create the forecast J S file. 72 00:05:16,180 --> 00:05:21,820 Let's go ahead and start by not misspelling things then we're gonna go ahead and do what we need to 73 00:05:21,820 --> 00:05:24,780 do which is to create a forecast function. 74 00:05:24,820 --> 00:05:28,480 So right here forecast equals a brand new function. 75 00:05:28,540 --> 00:05:34,300 We'll worry about the arguments in just a moment and once we have this function in place what are we 76 00:05:34,300 --> 00:05:34,970 going to do. 77 00:05:34,990 --> 00:05:36,360 We are going to export it. 78 00:05:36,430 --> 00:05:40,010 So down below module dot exports. 79 00:05:40,150 --> 00:05:42,630 Exporting the forecast function. 80 00:05:42,700 --> 00:05:47,530 Now we can go ahead and require this file to get the function in app dot J. 81 00:05:47,560 --> 00:05:51,760 S that's gonna make our function call actually work up above. 82 00:05:51,790 --> 00:06:01,290 Let's go ahead and get that done const forecast equals I'll be using require to require one of my own 83 00:06:01,290 --> 00:06:01,950 files. 84 00:06:01,980 --> 00:06:05,270 So dot forward slash in the utilize directory. 85 00:06:05,370 --> 00:06:07,470 Forward slash the file name. 86 00:06:07,470 --> 00:06:10,770 Forecast leaving off the J.S. extension. 87 00:06:10,770 --> 00:06:16,650 So now we actually have access to that function which means that when I try to call it at least things 88 00:06:16,650 --> 00:06:18,330 won't crash and burn. 89 00:06:18,360 --> 00:06:21,030 So that is step one and step two. 90 00:06:21,120 --> 00:06:23,430 We have the basic functions set up. 91 00:06:23,430 --> 00:06:27,020 We've loaded it in and we have our example call down below. 92 00:06:27,060 --> 00:06:31,630 From here we actually need to fill out that function and let's start with its arguments. 93 00:06:31,620 --> 00:06:34,150 Now as I showed you below we have the latitude. 94 00:06:34,230 --> 00:06:35,810 Then we have the longitude. 95 00:06:35,850 --> 00:06:37,830 Then we have the callback function. 96 00:06:37,920 --> 00:06:45,040 So we have to setup all three as arguments for forecast right here latitude. 97 00:06:45,080 --> 00:06:48,070 Next up would be longitude. 98 00:06:48,170 --> 00:06:52,520 And then finally the callback which once again you could have called anything at all. 99 00:06:52,520 --> 00:06:54,890 These names are particularly important. 100 00:06:54,920 --> 00:07:00,830 You could pick anything that makes sense in my opinion though these make the most sense down below. 101 00:07:00,830 --> 00:07:04,190 It's time to start the process of making that request. 102 00:07:04,190 --> 00:07:09,580 Now if we are going to use the request module we should probably load it in right here. 103 00:07:09,590 --> 00:07:11,680 Const request equals. 104 00:07:11,810 --> 00:07:18,890 I'll use require to load in the request module and once we have it loaded in we're going to actually 105 00:07:18,950 --> 00:07:19,630 use it. 106 00:07:19,640 --> 00:07:26,120 Now we do need the U.R.L. and we already have that you are L an aspect J s so you could have copy and 107 00:07:26,120 --> 00:07:28,400 pasted this over up above. 108 00:07:28,580 --> 00:07:34,400 I'm going to grab the U.R.L. I'll grab everything inside of the quotes I'm going to copy it to the clipboard 109 00:07:34,880 --> 00:07:39,050 scroll back down and bring it over to the forecast file right here. 110 00:07:39,080 --> 00:07:45,760 I will also create a concept you are El variable I'm going to paste the value in and now we need to 111 00:07:45,760 --> 00:07:52,270 swap out thirty seven point eight to six seven with whatever value we have for latitude and we want 112 00:07:52,270 --> 00:07:58,300 to swap out the minus 1 1 2 with whatever value is passed in for the longitude right here. 113 00:07:58,300 --> 00:07:59,550 Let's go ahead and get that done. 114 00:07:59,560 --> 00:08:02,280 Remember we need a comma in between. 115 00:08:02,350 --> 00:08:07,530 So I'm gonna remove the LAT end the long and the comma ending with that forward slash. 116 00:08:07,630 --> 00:08:13,570 Then I will concatenate on the latitude by referencing that variable after the plus operator and then 117 00:08:13,570 --> 00:08:16,280 I'm gonna concatenate on a comma. 118 00:08:16,360 --> 00:08:19,240 Then finally Elkin can it on the longitude. 119 00:08:19,240 --> 00:08:23,920 Perfect it's Andrew with another weather stack update. 120 00:08:23,940 --> 00:08:29,520 So up top that we have the old the dark sky U.R.L. with those variables in place down below we have 121 00:08:29,520 --> 00:08:35,820 what you should have which is the weather stack U.R.L. with the latitude and longitude variables in 122 00:08:35,820 --> 00:08:36,650 place. 123 00:08:36,690 --> 00:08:38,570 So we set up the base U.R.L.. 124 00:08:38,700 --> 00:08:44,190 Then we add the latitude from there we add our comma followed by the longitude. 125 00:08:44,250 --> 00:08:47,680 And finally we wrap things up by setting up our units. 126 00:08:47,790 --> 00:08:55,440 So make sure you have that bottom line in place to successfully set things up now this is going to be 127 00:08:55,440 --> 00:08:59,230 the complete U R L with dynamic coordinates inside. 128 00:08:59,370 --> 00:09:05,160 We can now actually fire off the request to get the response which would be the forecast information 129 00:09:05,430 --> 00:09:07,690 for this particular location. 130 00:09:07,710 --> 00:09:13,260 I'm gonna kick things off by calling request like we have done plenty of times before with those two 131 00:09:13,260 --> 00:09:13,990 arguments. 132 00:09:14,010 --> 00:09:19,650 Our options object being the first one and the callback function being the second one. 133 00:09:19,650 --> 00:09:25,200 Now we can provide the correct options for the options object we have U.R.L. which is going to come 134 00:09:25,200 --> 00:09:25,600 from the. 135 00:09:25,610 --> 00:09:29,460 You are all variable and we have Jason the value true. 136 00:09:29,460 --> 00:09:30,360 Perfect. 137 00:09:30,360 --> 00:09:32,990 Next up we have the callback function itself. 138 00:09:33,000 --> 00:09:38,120 This is for request and we know that it gets called with an error if any and a response. 139 00:09:38,130 --> 00:09:44,050 If there is no error now we can actually set up the if statement much like we had before. 140 00:09:44,100 --> 00:09:49,710 So we'll start by checking if there are any low level errors by looking for the existence of the error 141 00:09:49,740 --> 00:09:50,760 object. 142 00:09:50,760 --> 00:09:51,810 Next up we'll use. 143 00:09:51,810 --> 00:09:58,770 Else if to check if the coordinates are bad right here to do that we're gonna look at a response dot 144 00:09:58,770 --> 00:10:03,590 body dot error and that is exactly what we did before an app that J. 145 00:10:03,600 --> 00:10:07,980 S the old code used that condition from there. 146 00:10:07,980 --> 00:10:13,690 We have to set up some code to run if the coordinates are bad and last but definitely not least. 147 00:10:13,710 --> 00:10:16,000 Else this is the code we run. 148 00:10:16,050 --> 00:10:22,620 If everything went well and there's a forecast to provide now let's go ahead and actually call the callback 149 00:10:22,620 --> 00:10:25,540 function which currently is not being used. 150 00:10:25,590 --> 00:10:29,210 So if there is a low level error what are we going to choose to do. 151 00:10:29,250 --> 00:10:35,370 We are going to go ahead and call the callback with the first argument the error and no value for the 152 00:10:35,370 --> 00:10:37,620 second argument which is data. 153 00:10:37,620 --> 00:10:42,410 So we want to provide a value here and we don't want to provide a value here. 154 00:10:42,480 --> 00:10:43,740 Let's go ahead and get that done. 155 00:10:44,160 --> 00:10:50,310 I'm gonna call a callback passing in a string for the first argument and undefined for the second. 156 00:10:50,310 --> 00:10:56,100 Now once again you can leave the second argument off completely as undefined as the default value for 157 00:10:56,100 --> 00:10:58,570 an on provided argument anyways. 158 00:10:58,650 --> 00:11:04,920 Now we can pick our message I'm going to use the message we used before unable to connect to weather 159 00:11:05,340 --> 00:11:06,180 service. 160 00:11:06,180 --> 00:11:07,170 Perfect. 161 00:11:07,200 --> 00:11:11,810 Next up if there's a problem with the coordinates we are once again gonna call callback. 162 00:11:11,820 --> 00:11:18,420 Now things went poorly so we provide a value for the first argument and we leave off a value for the 163 00:11:18,420 --> 00:11:19,830 second argument. 164 00:11:19,830 --> 00:11:24,450 We can pick whatever message we like for this one I'll use the same one we had before. 165 00:11:24,900 --> 00:11:28,960 Unable to find location now inside of else. 166 00:11:29,070 --> 00:11:35,700 This is where things went well so we want to leave off the first argument to call back for that we are 167 00:11:35,700 --> 00:11:37,950 gonna have to provide undefined. 168 00:11:37,950 --> 00:11:42,060 Then as the second argument we can provide our forecast string. 169 00:11:42,090 --> 00:11:45,340 Now we already have that string created in app dot J. 170 00:11:45,350 --> 00:11:46,750 S Up above. 171 00:11:46,920 --> 00:11:52,020 It starts right here in console dialog where we use response to get the summary. 172 00:11:52,110 --> 00:11:57,370 It goes all the way to the end where we close the single quote right here. 173 00:11:57,540 --> 00:12:03,020 I'm going to shift click to highlight everything in between and I'm just going to take that I'm going 174 00:12:03,020 --> 00:12:09,690 to copy it to the clipboard scroll back down to the call and over in forecast dot J S we can paste it 175 00:12:09,690 --> 00:12:13,170 right here between the comma and the closing parentheses. 176 00:12:13,170 --> 00:12:15,320 I'm gonna paste it in and there we go. 177 00:12:15,330 --> 00:12:19,000 We now have our four cached string getting sent back correctly. 178 00:12:19,020 --> 00:12:24,240 Now the function is done and we already have a call in place so we can go ahead and file things off 179 00:12:24,240 --> 00:12:27,140 in their current state to get the forecast. 180 00:12:27,150 --> 00:12:29,490 This time it should not produce an error. 181 00:12:29,490 --> 00:12:33,970 I'm gonna run node app dot J S and that is exactly what we end up getting. 182 00:12:34,050 --> 00:12:39,210 Right here we have the data defined we have our summary with our temperature and percent chance of rain 183 00:12:39,510 --> 00:12:40,230 and up above. 184 00:12:40,230 --> 00:12:43,260 We have undefined for the error. 185 00:12:43,300 --> 00:12:49,090 This is just a reminder that since you're using the weather stack API you'd see a similar forecast to 186 00:12:49,090 --> 00:12:55,240 what you saw before it would start off with a description of the weather followed by the actual temperature 187 00:12:55,450 --> 00:12:59,740 followed by the apparent feels like temperature. 188 00:12:59,750 --> 00:13:03,770 Now let's go ahead and make sure that the error message shows up when it should. 189 00:13:03,770 --> 00:13:08,210 The first thing I'm going to do is just do something like shut down my internet connection. 190 00:13:08,360 --> 00:13:14,530 Right here I'll turn off Wi-Fi and then going to rerun the script and I do indeed get unable to connect 191 00:13:14,530 --> 00:13:16,610 it to weather service which is great. 192 00:13:16,670 --> 00:13:22,110 Let's go ahead and test that middle case by providing a bad coordinate value up above. 193 00:13:22,160 --> 00:13:28,510 I'm going to bring myself back online and then I'm going to update either one or the other. 194 00:13:28,640 --> 00:13:34,580 I'm gonna make this first value a string and all I'm gonna do is put a letter inside which is indeed 195 00:13:34,640 --> 00:13:36,940 an invalid caught in a pair. 196 00:13:36,950 --> 00:13:40,910 From here we can go ahead and rerun the script down below. 197 00:13:40,970 --> 00:13:42,620 I'm gonna run things and what do I get. 198 00:13:42,650 --> 00:13:46,290 I get unable to find a location which is fantastic. 199 00:13:46,340 --> 00:13:53,240 Now we can remove the challenge comments and we can see how much easier our code got to use right here. 200 00:13:53,300 --> 00:13:57,320 I have a call to geo code right here I have a call to forecast. 201 00:13:57,320 --> 00:14:04,140 I could easily take these four lines move them into the callback and then do one thing before the next. 202 00:14:04,160 --> 00:14:07,900 That is exactly what we're going to end up doing in the next video. 203 00:14:07,970 --> 00:14:13,380 Now that we have these two functions in place it's gonna be easy to use them together and it's gonna 204 00:14:13,400 --> 00:14:17,620 be easy to reuse them throughout our code should we need to. 205 00:14:17,630 --> 00:14:24,770 All right I'm gonna wrap this video up by undoing that change I made I'll remove the letter A and remove 206 00:14:24,770 --> 00:14:26,500 the quotes. 207 00:14:26,610 --> 00:14:30,930 I'm gonna save the file and that's where we're gonna stop for this one up above. 208 00:14:30,930 --> 00:14:38,010 Before we go we can actually also remove the old commented out forecast request leaving ourselves with 209 00:14:38,010 --> 00:14:45,120 just 13 lines of code an app dot J S we can actually make that twelve because request actually isn't 210 00:14:45,120 --> 00:14:51,810 being used in this file anymore which means we can remove that first line entirely bringing us down 211 00:14:51,900 --> 00:14:52,910 to twelve. 212 00:14:53,010 --> 00:14:55,230 All right I'll see you in the next one.