1 00:00:00,270 --> 00:00:06,180 In this video you're going to learn how to make HDTV requests from your no J.S. application which I'm 2 00:00:06,180 --> 00:00:08,040 very excited to get to. 3 00:00:08,040 --> 00:00:09,660 Why is this so important. 4 00:00:09,690 --> 00:00:14,960 Because this is how your application is going to be able to communicate with the outside world. 5 00:00:15,000 --> 00:00:20,850 So if you want to get real time weather data into your app you're gonna have to make an HDTV request 6 00:00:21,150 --> 00:00:27,890 if you want to send an email to someone from your application that's gonna be a another H TTP request. 7 00:00:27,960 --> 00:00:34,080 And if you wanted to send someone a text message using something like the Twilio API that would also 8 00:00:34,110 --> 00:00:36,390 be an HDTV request. 9 00:00:36,480 --> 00:00:43,370 It is at the core of building real world applications that actually communicate with the outside world. 10 00:00:43,380 --> 00:00:48,480 Now with those three examples the weather data emails sending and text message sending. 11 00:00:48,570 --> 00:00:55,830 It's going to be our node application making HDTV requests to another companies servers to get some 12 00:00:55,830 --> 00:00:57,160 task done. 13 00:00:57,220 --> 00:01:00,240 That means somewhere in our code we're gonna specify the. 14 00:01:00,270 --> 00:01:02,540 You are well we want to make a request to. 15 00:01:02,670 --> 00:01:06,300 This is provided via the api is documentation. 16 00:01:06,300 --> 00:01:11,900 We're going to fire that request off sending some data possibly and getting a response back. 17 00:01:11,970 --> 00:01:17,160 So to get weather information I would send to the location I want the weather information for I would 18 00:01:17,160 --> 00:01:22,500 then get back the weather information and I could use it in whatever way I wanted to. 19 00:01:22,500 --> 00:01:25,260 Now let's go ahead and explore the weather API. 20 00:01:25,260 --> 00:01:33,970 We're gonna use in this video if we head over to the browser we can find this over at Dark Sky dot net. 21 00:01:34,020 --> 00:01:37,350 This is Andrew from the future with a very important update. 22 00:01:37,350 --> 00:01:42,090 If you head over to Dark Sky dot net you'll see this banner right up top right here. 23 00:01:42,120 --> 00:01:46,000 It says that Dark Sky has joined Apple and that is indeed true. 24 00:01:46,050 --> 00:01:49,560 They go into more details about the acquisition right here. 25 00:01:49,560 --> 00:01:56,730 Now one of the many downsides of this acquisition is that the dark sky API is getting shut down so they're 26 00:01:56,730 --> 00:01:58,300 shutting down the API. 27 00:01:58,380 --> 00:02:02,590 They're shutting down the Android app and they're even shutting down the web app. 28 00:02:02,610 --> 00:02:08,400 So by the time you visit dark sky dot net it's possible that this right here doesn't even show up. 29 00:02:08,640 --> 00:02:11,580 You might even get redirected over to Apple dot com. 30 00:02:11,580 --> 00:02:13,800 The app store or somewhere else. 31 00:02:13,800 --> 00:02:16,100 So there was no notice given for this. 32 00:02:16,110 --> 00:02:21,770 So one day I woke up the acquisition went through and all of the sudden the class was broken. 33 00:02:21,870 --> 00:02:24,340 So I'm coming back to update the class. 34 00:02:24,390 --> 00:02:31,770 We'll be switching from the dark sky API to a real time weather API provided by a service called weather 35 00:02:31,770 --> 00:02:32,580 stack. 36 00:02:32,580 --> 00:02:38,190 Now the good news here is that these two API eyes are pretty similar so we'll still be able to build 37 00:02:38,190 --> 00:02:40,920 our real time weather application with node. 38 00:02:40,920 --> 00:02:44,760 We'll just source our weather data from a different API. 39 00:02:44,760 --> 00:02:50,940 Now this will require a few small changes so throughout the next several lessons I'll be coming back 40 00:02:50,940 --> 00:02:57,280 in with interruptions like this one when we need to change something to work with the new API. 41 00:02:57,300 --> 00:03:03,840 Now in the original lesson what we did from here is we signed up for the dark sky API that is no longer 42 00:03:03,840 --> 00:03:04,660 possible. 43 00:03:04,680 --> 00:03:09,420 So instead let's go ahead and sign up for the weather stack API. 44 00:03:09,420 --> 00:03:12,500 We can find that by opening up a brand new tab. 45 00:03:12,600 --> 00:03:16,850 And right here I'll head over to whether stack dot com. 46 00:03:17,010 --> 00:03:21,060 Now like dark sky we can sign up for weather stack for free. 47 00:03:21,150 --> 00:03:23,060 And there's no credit card required. 48 00:03:23,070 --> 00:03:28,460 They also have a generous free tier allowing us to make a thousand requests a month. 49 00:03:28,500 --> 00:03:34,470 So right here let's take a moment to sign up for the API then we'll figure out how we can get that real 50 00:03:34,470 --> 00:03:35,610 time weather data. 51 00:03:35,790 --> 00:03:41,490 Let's continue on by clicking sign up for free to create an account that will redirect us over to their 52 00:03:41,490 --> 00:03:42,320 pricing page. 53 00:03:42,330 --> 00:03:47,130 And as mentioned we'll be using their free tier where no credit card is required. 54 00:03:47,130 --> 00:03:52,470 This comes with the thousand API calls a month which is more than enough for what we're building and 55 00:03:52,470 --> 00:03:57,720 we get access to their real time weather data which is exactly what we're looking for. 56 00:03:57,720 --> 00:04:01,410 So right here let's click sign up under the free tier option. 57 00:04:01,530 --> 00:04:08,070 Then we'll just provide some basic account details starting off with our email and a password to log 58 00:04:08,070 --> 00:04:09,430 in down below. 59 00:04:09,430 --> 00:04:13,620 The only other information we need to provide is our address right here. 60 00:04:13,620 --> 00:04:16,860 So I'll take a quick moment to provide this information. 61 00:04:16,860 --> 00:04:23,160 And once we have that in place we'll be able to use the API to fetch that real time weather data. 62 00:04:23,250 --> 00:04:25,490 So down below I am all done with that. 63 00:04:25,590 --> 00:04:28,900 If we keep scrolling down we are at the end of the form. 64 00:04:28,980 --> 00:04:33,120 We have company details which are not required so I'll leave those off. 65 00:04:33,210 --> 00:04:40,620 Then all we need to do is confirm that we are not a robot and we have to agree to their terms and conditions. 66 00:04:40,620 --> 00:04:43,210 Now you could choose to opt out of this right here. 67 00:04:43,320 --> 00:04:49,800 But when you're signing up for an API that you're using in an application I would recommend always receiving 68 00:04:49,830 --> 00:04:51,740 the notifications they sent. 69 00:04:51,810 --> 00:04:57,840 If the API changes you want to get notified ahead of time so you can change your application before 70 00:04:57,840 --> 00:04:58,930 things break. 71 00:04:58,950 --> 00:05:05,880 If the API goes down you want to get notified so you can pass that information along to your users who 72 00:05:05,880 --> 00:05:08,100 are seeing a broken application. 73 00:05:08,160 --> 00:05:12,580 So it's always best to get notified about the API as you're working with. 74 00:05:12,810 --> 00:05:13,430 Right here. 75 00:05:13,500 --> 00:05:15,300 We should be able to sign up. 76 00:05:15,390 --> 00:05:16,890 It's going through the process. 77 00:05:16,920 --> 00:05:22,260 And when the sign up process is complete we are brought over to this quick start guide. 78 00:05:22,260 --> 00:05:27,190 This gives us all of the information we need to fetch real time weather data. 79 00:05:27,210 --> 00:05:29,690 So let's explore what we have right here. 80 00:05:29,700 --> 00:05:36,870 The first thing we have right here is your API access key so your API Key is a randomly generated string 81 00:05:37,080 --> 00:05:39,780 and your API Key will look different from mine. 82 00:05:39,780 --> 00:05:41,770 This is kind of like a password. 83 00:05:41,850 --> 00:05:47,690 You'll end up using your API key to authenticate when making requests to whether stack. 84 00:05:47,700 --> 00:05:52,770 So when you're working with whether stack you have to have an account in order to fetch data. 85 00:05:52,770 --> 00:05:55,680 And this API key is how weather stack links. 86 00:05:55,680 --> 00:06:01,770 The request you've made with your account that's going to allow it to keep track of how many requests 87 00:06:01,800 --> 00:06:02,880 you've made. 88 00:06:02,910 --> 00:06:08,910 So the API access key is something we'll use in just a minute when we start to fetch real time weather 89 00:06:08,910 --> 00:06:12,600 data and you should treat this like you would any other password. 90 00:06:12,600 --> 00:06:16,200 So it's not something you'd want to share in a public setting. 91 00:06:16,200 --> 00:06:20,880 Next up down below they list out the various API endpoints that are supported. 92 00:06:20,880 --> 00:06:22,670 Now these endpoints are just different. 93 00:06:22,670 --> 00:06:27,810 You are cells that allow us to access the various services that whether stack provides. 94 00:06:27,810 --> 00:06:33,660 So right here we have things like their current weather data their historical weather data and other. 95 00:06:33,680 --> 00:06:39,620 Now as mentioned the only data we get access to on the free plan is the current weather data and that's 96 00:06:39,620 --> 00:06:41,860 fine since that's all we need. 97 00:06:41,870 --> 00:06:44,810 So down below they also have the base you are. 98 00:06:44,960 --> 00:06:51,060 It is a TTP colon forward slash forward slash API weather stack dot com. 99 00:06:51,080 --> 00:06:56,950 So what I'd like to do from here is make our first request for real time weather data. 100 00:06:56,960 --> 00:07:03,500 We'll end up combining this base you are all down below with other information including our API access 101 00:07:03,500 --> 00:07:04,760 key up above. 102 00:07:04,760 --> 00:07:06,360 So let's take our key. 103 00:07:06,650 --> 00:07:12,770 I'll copy that to the clipboard then we'll head over to a brand new tab and we'll make our first API 104 00:07:12,770 --> 00:07:15,680 request for real time weather data. 105 00:07:15,680 --> 00:07:21,350 So right over here for the moment we'll make this request from a browser tab once we understand how 106 00:07:21,350 --> 00:07:27,850 it works and we can see the data we have access to will end up making the same request from our no J 107 00:07:27,850 --> 00:07:32,380 Yes application so we can use the weather data in our weather app. 108 00:07:32,450 --> 00:07:35,730 For now let's just explore the basic structure. 109 00:07:35,750 --> 00:07:44,210 So as mentioned we start off with H TTP colon forward slash forward slash that is API dot weather stack 110 00:07:44,360 --> 00:07:45,260 dot com. 111 00:07:45,380 --> 00:07:50,660 Then to access the current weather data it is a forward slash current. 112 00:07:50,660 --> 00:07:56,150 Now this is a good start but we're still missing some important information we have to provide our API 113 00:07:56,150 --> 00:08:01,940 key as well as the location that we're trying to fetch the weather for to get that done what we'll do 114 00:08:02,120 --> 00:08:08,510 is set up a query string right here we can set up our query string by adding a question mark then we 115 00:08:08,510 --> 00:08:15,650 can set up as many key value pairs as we need to to add things like our API key and our location. 116 00:08:15,800 --> 00:08:20,490 So the format for the query string is key equals value. 117 00:08:20,720 --> 00:08:27,470 If we needed to set up a second key value pair I could do so by using an ampersand followed by my second 118 00:08:27,500 --> 00:08:29,260 key value pair right here. 119 00:08:29,270 --> 00:08:32,840 As an example I could set name equal to Andrew. 120 00:08:33,170 --> 00:08:39,080 So this is the general structure we'll be using we'll end up setting up key value pairs for our API 121 00:08:39,080 --> 00:08:42,850 key and the location we're trying to fetch the weather for. 122 00:08:42,860 --> 00:08:46,520 So right here let's remove everything after the question mark. 123 00:08:46,670 --> 00:08:52,660 And the first query parameter that we have to provide is access underscore key. 124 00:08:52,700 --> 00:08:59,840 This is where we provide our API key so I'll set access key equal to the API key that we just copied 125 00:08:59,840 --> 00:09:00,830 to the clipboard. 126 00:09:00,830 --> 00:09:04,420 Right here I'll paste that in after the API key. 127 00:09:04,520 --> 00:09:09,320 I'll set up an ampersand allowing me to define a second key value pair. 128 00:09:09,440 --> 00:09:11,840 The second one is for the location. 129 00:09:11,870 --> 00:09:19,970 So right here I'll set query equal to and what we'll do is provide a latitude and longitude set of coordinates 130 00:09:20,180 --> 00:09:22,760 for the location we're trying to search for. 131 00:09:22,820 --> 00:09:27,850 Now later on we'll figure out how to search for something by its name like Philadelphia. 132 00:09:27,890 --> 00:09:32,030 Then we'll get to the latitude and longitude so we can use it right here. 133 00:09:32,030 --> 00:09:37,880 But for the moment let's just provide the coordinates for Alcatraz in San Francisco. 134 00:09:37,880 --> 00:09:44,120 So right here that would be 3 7 dot 8 2 6 7. 135 00:09:44,120 --> 00:09:47,420 Then we'll add a comma followed by the longitude. 136 00:09:47,420 --> 00:09:52,320 That would be minus one to two dot for two three three. 137 00:09:52,340 --> 00:09:57,140 So we've set up our base U.R.L. that is all of this stuff over here. 138 00:09:57,140 --> 00:10:02,170 From there we set up our access key making sure that weather stack knows who we are. 139 00:10:02,270 --> 00:10:08,780 Then we've set up our query allowing us to fetch the weather for that specific location. 140 00:10:08,780 --> 00:10:13,340 Now once again this is our request we'll end up making from our code later on. 141 00:10:13,340 --> 00:10:17,180 For now though let's hit enter and see what happens right here. 142 00:10:17,210 --> 00:10:22,590 The request was made and what we're seeing is our weather data for that location. 143 00:10:22,640 --> 00:10:28,820 Now in Firefox when you pull up a U R L and the response is Jason it uses this tool to make that response 144 00:10:28,820 --> 00:10:30,710 a bit easier to work with. 145 00:10:30,710 --> 00:10:34,160 Well I'd like to do though is head over to the Raw Data tab. 146 00:10:34,250 --> 00:10:39,590 So if we switch over to raw data this right here is the raw response. 147 00:10:39,590 --> 00:10:44,970 This is Sam Jason exactly like the Jason we worked with in our notes application. 148 00:10:45,020 --> 00:10:50,450 So if we had access to this in our code we know that we could take it we could pass it and we could 149 00:10:50,450 --> 00:10:53,030 start to access those properties. 150 00:10:53,030 --> 00:10:55,530 Now let's head back over to the Jason tab. 151 00:10:55,550 --> 00:10:58,480 So right here we have our nice past weather data. 152 00:10:58,880 --> 00:11:03,920 So that is it for the differences for the moment now that we have this U.R.L. in place. 153 00:11:03,980 --> 00:11:10,190 We're going to jump back in to the regular lesson now in the regular lesson we'll end up making this 154 00:11:10,210 --> 00:11:17,810 H TTP request from our node application that's going to allow us to access the weather data in our app. 155 00:11:17,810 --> 00:11:23,120 Now there will be a couple of other changes throughout the lesson so I'll jump back in with a couple 156 00:11:23,120 --> 00:11:25,860 of other interruptions as those come up. 157 00:11:25,910 --> 00:11:33,910 For now though let's jump back in to the regular lesson let's go ahead and move into visual studio code 158 00:11:34,150 --> 00:11:37,600 and actually make the same request we're making here. 159 00:11:37,600 --> 00:11:44,200 But from our application to start I'm going to delete everything in app dot and J S we have our little 160 00:11:44,200 --> 00:11:49,270 set time out example and that helped us illustrate how asynchronous programming works. 161 00:11:49,270 --> 00:11:52,990 But now it's time to move on to some more real world stuff. 162 00:11:53,080 --> 00:11:57,490 Now to make HDTV requests there are a few different things we can do. 163 00:11:57,610 --> 00:12:03,610 We can use the core node modules which we will cover a little bit later but those are very low level. 164 00:12:03,640 --> 00:12:09,370 So it requires you to write a lot of unnecessary code to get everything working together. 165 00:12:09,370 --> 00:12:15,490 There are a bunch of NPM modules that are essentially wrappers around that core module making it much 166 00:12:15,550 --> 00:12:20,050 easier and more streamlined to make HDTV requests. 167 00:12:20,050 --> 00:12:22,140 And that's what we're going to use throughout the course. 168 00:12:22,150 --> 00:12:27,580 Although as mentioned we will explore how to do it the bare bones way shortly. 169 00:12:27,580 --> 00:12:34,480 For now we're going to use a single NPM module to make our HDTV requests and appropriately enough it 170 00:12:34,480 --> 00:12:36,120 is called request. 171 00:12:36,160 --> 00:12:43,240 You can find it by googling NPM request that is going to hopefully bring you to the package page. 172 00:12:43,240 --> 00:12:49,230 Right here it is NPM J Ask.com forward slash package forward slash request. 173 00:12:49,330 --> 00:12:54,730 We can visit that page to learn a bit more about what it's going to do for us and this like the other 174 00:12:54,730 --> 00:13:01,880 packages we've used is super popular with about six million weekly downloads. 175 00:13:01,910 --> 00:13:03,780 This is Andrew with a quick update. 176 00:13:03,800 --> 00:13:08,990 If you pull up the NPM package page for request you'll see this message right up top that says this 177 00:13:08,990 --> 00:13:11,660 package has been deprecated and that's true. 178 00:13:11,780 --> 00:13:17,750 If you request package has indeed been deprecated which just means that the original maintainers no 179 00:13:17,750 --> 00:13:23,510 longer plan to release new versions or continue working on the project the existing versions worked 180 00:13:23,510 --> 00:13:27,530 just fine though and you can still use request as you move through the class. 181 00:13:27,530 --> 00:13:31,990 You'll still be able to make those HDTV requests without any problem. 182 00:13:32,060 --> 00:13:35,420 So request is deprecated but it's not going anywhere. 183 00:13:35,420 --> 00:13:42,230 Down below we can see that almost fifty thousand other NPM packages depend on request and the weekly 184 00:13:42,230 --> 00:13:47,090 downloads are at an all time high with 20 million weekly downloads. 185 00:13:47,090 --> 00:13:54,260 So as you go through the class you'll be able to continue using request exactly like I do in the videos. 186 00:13:54,260 --> 00:13:57,960 Now if you're looking for an alternative package that's not deprecated. 187 00:13:58,010 --> 00:14:04,520 The good news is that the postman organization they have forked the request module and they're continuing 188 00:14:04,520 --> 00:14:06,980 to support it releasing new versions. 189 00:14:07,040 --> 00:14:10,660 You can find that by just changing the You are all a little bit. 190 00:14:10,700 --> 00:14:17,980 So right here just before request and right after the forward slash I'll add postman hyphen. 191 00:14:17,990 --> 00:14:23,720 So now we're pulling up the package page for a package called postman hyphen request. 192 00:14:23,720 --> 00:14:30,530 If I go ahead and visit that page right here you can see this is the NPM package page for the alternative 193 00:14:30,530 --> 00:14:31,240 version. 194 00:14:31,400 --> 00:14:33,630 So the postman organization is great. 195 00:14:33,740 --> 00:14:40,100 We'll actually use the tool postman later in the class to test our own API eyes as we start to create 196 00:14:40,100 --> 00:14:46,610 them for the moment though we won't talk about postman but postman request is a nice alternative to 197 00:14:46,640 --> 00:14:48,100 the request module. 198 00:14:48,170 --> 00:14:55,400 It has the same API so you can install the latest version of this and use this exactly like I use request 199 00:14:55,550 --> 00:14:56,680 in the class. 200 00:14:56,690 --> 00:14:57,290 All right. 201 00:14:57,290 --> 00:14:59,150 That's it for this quick interruption. 202 00:14:59,150 --> 00:15:01,330 Let's jump back into the regular video. 203 00:15:01,340 --> 00:15:07,790 Remember you are more than welcome to just use request or you could go ahead and use postman request 204 00:15:09,060 --> 00:15:14,300 now if we scroll down we can see all sorts of different examples as to how this can be used. 205 00:15:14,310 --> 00:15:19,920 We're going to explore more advanced features like promises and async await a little later. 206 00:15:19,980 --> 00:15:23,790 For now we're gonna get started with a nice simple example. 207 00:15:23,940 --> 00:15:29,880 Let's go ahead and actually install this into our project so we can make a request from our node application 208 00:15:30,420 --> 00:15:32,150 over inside of the terminal. 209 00:15:32,190 --> 00:15:36,610 We first need to initialize weather app as an NPM project. 210 00:15:36,630 --> 00:15:41,520 If you remember we got that done by running NPM in it from the root of the project. 211 00:15:41,520 --> 00:15:44,250 So in this case from the weather app folder. 212 00:15:44,250 --> 00:15:49,720 Now when we ran that command we got brought to a questionnaire asking us to fill out a ton of values. 213 00:15:49,800 --> 00:15:53,730 And if you remember we used the default value for all of them. 214 00:15:53,730 --> 00:15:57,620 So what I'm going to do is actually use control C to shut that down. 215 00:15:57,630 --> 00:15:58,800 So I've done nothing. 216 00:15:58,880 --> 00:16:03,280 Then I'm going to use NPM in it again with the Y Aflac. 217 00:16:03,300 --> 00:16:08,550 This just says answer yes to every single question using the default value. 218 00:16:08,550 --> 00:16:13,620 So we don't have to go through that little questionnaire when we do this it automatically generates 219 00:16:13,620 --> 00:16:14,340 the package. 220 00:16:14,340 --> 00:16:18,420 Dot Jason file with all of the default values in place. 221 00:16:18,420 --> 00:16:20,790 We can now customize them to fit our needs. 222 00:16:20,790 --> 00:16:26,430 And now we can run npm install commands to install the modules we need from the terminal. 223 00:16:26,430 --> 00:16:28,520 Let's go ahead and do just that. 224 00:16:28,590 --> 00:16:35,810 I'm going to use NPM I which is short for install to install the request module at the latest version 225 00:16:35,820 --> 00:16:38,610 two point eighty eight point zero. 226 00:16:38,610 --> 00:16:46,760 Now I'm not using the G global flag since this is a module I want to require and use inside of my scripts. 227 00:16:46,770 --> 00:16:48,680 So let's go ahead and get that done. 228 00:16:48,720 --> 00:16:52,890 I'm gonna run the command that is going to install the request module. 229 00:16:52,890 --> 00:16:57,340 Then we're gonna move over to app dot J S to load it in and use it. 230 00:16:57,390 --> 00:16:59,020 So inside of app not J. 231 00:16:59,060 --> 00:17:02,970 S Let's go ahead and start by requiring request. 232 00:17:02,970 --> 00:17:10,280 I'm gonna make a constant called request and I'm going to require the module we just installed which 233 00:17:10,280 --> 00:17:11,900 was indeed a request. 234 00:17:11,900 --> 00:17:16,120 And this is actually going to work because we installed the module we have package. 235 00:17:16,160 --> 00:17:18,130 Jason we have package lock down. 236 00:17:18,200 --> 00:17:25,970 Jason and in the node modules directory we have all of the necessary modules to get request to work. 237 00:17:25,970 --> 00:17:31,860 So we have request itself as well as all of its dependencies showing up inside of there. 238 00:17:32,060 --> 00:17:35,290 Now that we have this in place let's go ahead and use it. 239 00:17:35,330 --> 00:17:41,150 We need to work with that same you are L we just explored in the browser where we got the Jason data 240 00:17:41,330 --> 00:17:43,070 back over in the browser. 241 00:17:43,070 --> 00:17:48,280 I'm going to visit that tab where we were getting the Jason response and I'm going to grab the U.R.L.. 242 00:17:48,320 --> 00:17:53,660 This is the U are L that contains our secret key as well as that random set of coordinates which we 243 00:17:53,660 --> 00:17:55,730 will learn how to change later. 244 00:17:55,730 --> 00:18:01,280 So instead of visiting the You are all in the browser and seeing the data here we're going to visit 245 00:18:01,280 --> 00:18:08,300 it via the request module and we'll get that data back as a variable we can access in our code. 246 00:18:08,300 --> 00:18:10,900 So right here let's start by storing the U.R.L.. 247 00:18:10,990 --> 00:18:17,270 I'm going to create a concept you are all whose value will be a string and I am going to paste the entire 248 00:18:17,270 --> 00:18:23,100 contents of that you are L right here this is Andrew with another quick update. 249 00:18:23,110 --> 00:18:25,080 Make sure you use the weather stack. 250 00:18:25,090 --> 00:18:27,480 You are all that we just explored earlier. 251 00:18:27,490 --> 00:18:29,420 So take the entire U.R.L.. 252 00:18:29,470 --> 00:18:35,180 Copy that to the clipboard and use that as the value for the U.R.L. variable. 253 00:18:35,200 --> 00:18:36,900 You won't be using the dark sky. 254 00:18:36,910 --> 00:18:38,860 You are all like I do in the lesson. 255 00:18:38,860 --> 00:18:41,280 Instead you'll be using your weather stack. 256 00:18:41,290 --> 00:18:45,220 You are all we're not going to change anything for the moment. 257 00:18:45,220 --> 00:18:49,440 We're just going to make their request so we get this exact same data back. 258 00:18:49,480 --> 00:18:57,080 But in our note app now from here we can actually use request which is a function to make the request. 259 00:18:57,100 --> 00:19:01,140 We are going to call it providing to it to arguments. 260 00:19:01,150 --> 00:19:05,560 The first is an options object which outlines what we'd like to do. 261 00:19:05,560 --> 00:19:09,070 That's where we provide the U.R.L. and other information. 262 00:19:09,070 --> 00:19:13,720 The second argument is a function to run once we actually have that response. 263 00:19:13,720 --> 00:19:19,600 So once the data is available for you to use in your application let's start with that first argument. 264 00:19:19,600 --> 00:19:21,910 That is the options object right here. 265 00:19:21,910 --> 00:19:23,670 We're going to set that up. 266 00:19:23,710 --> 00:19:30,820 And as mentioned there is a single required property which is U.R.L. we have to provide the U.R.L. value. 267 00:19:30,850 --> 00:19:34,900 We want to use and I have that in a variable with the same name. 268 00:19:34,900 --> 00:19:37,060 That's all for the first argument. 269 00:19:37,090 --> 00:19:41,250 The second argument after that object is going to be a function. 270 00:19:41,320 --> 00:19:45,730 This is the function to run when we're actually getting the response back. 271 00:19:45,880 --> 00:19:53,300 So right here I'm going to set up that callback function and this function will run when either one 272 00:19:53,450 --> 00:19:55,800 we have the weather data or two. 273 00:19:55,820 --> 00:19:59,090 Something went wrong and we weren't able to get the weather data. 274 00:19:59,180 --> 00:20:03,410 So maybe as an example your machine doesn't have a network connection. 275 00:20:03,410 --> 00:20:05,430 Maybe you're not connected to the Internet. 276 00:20:05,540 --> 00:20:08,780 In that case this request would indeed fail. 277 00:20:08,870 --> 00:20:13,710 Now this function gets called with two arguments it gets called with an error. 278 00:20:13,790 --> 00:20:19,850 If there was one otherwise this argument will be undefined and it gets called with the response where 279 00:20:19,880 --> 00:20:22,160 we can actually access the response. 280 00:20:22,160 --> 00:20:24,890 This includes all sorts of information. 281 00:20:24,980 --> 00:20:28,770 And it does include the Jason response we need. 282 00:20:28,940 --> 00:20:33,830 Now if you're not familiar with the ins and outs of each TTP request that's OK. 283 00:20:33,920 --> 00:20:39,830 We're actually going to dissect them in detail in just a couple of videos for now let's go ahead and 284 00:20:39,830 --> 00:20:43,610 try to use the response in our program to get started. 285 00:20:43,610 --> 00:20:47,150 Let's go ahead and just dump the response object to the console. 286 00:20:47,150 --> 00:20:49,370 So console dialog response. 287 00:20:49,370 --> 00:20:55,510 This is going to contain everything about the response way more information than just that Jason data. 288 00:20:55,580 --> 00:20:58,420 I'm going to run the program from the terminal down below. 289 00:20:58,460 --> 00:21:05,110 I will use clear to clear the terminal output then node A.J. asked to run our script. 290 00:21:05,210 --> 00:21:09,920 Now what's going to happen is a ton of information is going to get dumped to the terminal. 291 00:21:09,950 --> 00:21:13,330 We can see there are hundreds of lines of information. 292 00:21:13,400 --> 00:21:19,490 Response has a lot of properties we can use and those properties have other properties and so on and 293 00:21:19,490 --> 00:21:20,450 so on. 294 00:21:20,450 --> 00:21:25,520 Now if we start to scroll up we can see we have one really long string shown in green. 295 00:21:25,520 --> 00:21:30,950 This is actually the string Jason data that we want to pass and access. 296 00:21:30,950 --> 00:21:36,290 If we scroll up to the top of that string this is on the body property. 297 00:21:36,290 --> 00:21:41,060 Now there are plenty of other properties for getting the response headers or these status code or that 298 00:21:41,060 --> 00:21:44,960 you are L or any other information you would want about their request. 299 00:21:44,960 --> 00:21:49,510 We'll explore those a bit later when we dissect HDTV requests. 300 00:21:49,580 --> 00:21:56,840 For now let's just focus on that one property the body property which contains our data represented 301 00:21:56,870 --> 00:21:58,460 as a Jason string. 302 00:21:58,460 --> 00:22:04,190 Now we already worked with Jason so we know how to pass a Jason string right here. 303 00:22:04,190 --> 00:22:11,600 I'm going to create a concept called data and I'm going to set it equal to we'll be using Jason dot 304 00:22:11,660 --> 00:22:17,930 pass to pass our data and the data lives on response dot body. 305 00:22:17,930 --> 00:22:21,590 Now we're gonna go ahead and actually work with that data. 306 00:22:21,590 --> 00:22:26,550 I'm going to log the data object to the screen right here we have app. 307 00:22:26,630 --> 00:22:28,790 J ust in its modified state. 308 00:22:28,910 --> 00:22:31,070 Let's go ahead and rerun the program. 309 00:22:31,070 --> 00:22:36,500 I can just use the backspace key to bring me back to the terminal down below and from here we're going 310 00:22:36,500 --> 00:22:40,310 to rerun the script with our passing code in place. 311 00:22:40,310 --> 00:22:42,820 So I'm going run node apt at J. 312 00:22:42,810 --> 00:22:47,350 S. This time we're still going to see a lot of stuff print but a lot less. 313 00:22:47,390 --> 00:22:50,930 Now if we scroll up we're going to see an endless amount of information. 314 00:22:50,930 --> 00:22:57,050 For example we have all of these objects I see properties related to wind speed and wind gusts I have 315 00:22:57,050 --> 00:23:03,530 temperature min and max for the day all sorts of useful forecast information and we'll explore more 316 00:23:03,530 --> 00:23:10,310 of this in the next video for now to wrap up I just want to access a single property that is the currently 317 00:23:10,310 --> 00:23:14,480 property so data dot currently. 318 00:23:14,480 --> 00:23:20,940 This is Andrew with one last update for the lesson with the dark sky API it was data dot currently with 319 00:23:20,940 --> 00:23:28,070 the V weather stack API as shown below it is data dot current so make sure to use that property in a 320 00:23:28,070 --> 00:23:33,890 couple of moments I'll talk about properties on the old response that don't exist on weather snack but 321 00:23:33,890 --> 00:23:41,460 don't worry we'll start to talk about the differences in data in the next lesson this contains current 322 00:23:41,460 --> 00:23:48,210 forecast information and if we rerun the program this time we're gonna see a lot less output we have 323 00:23:48,210 --> 00:23:55,800 what maybe 20 lines we have a summary so wherever this location is it is indeed clear and I have information 324 00:23:55,800 --> 00:24:01,560 about things like the temperature it is currently fifty four point two eight degrees I have things about 325 00:24:01,560 --> 00:24:07,890 the humidity pressure wind speed all current weather information for that location. 326 00:24:07,890 --> 00:24:16,680 So now that we have this in place we have indeed accessed our first H TTP API from node j s allowing 327 00:24:16,680 --> 00:24:20,790 us to pull in outside information into our applications. 328 00:24:20,790 --> 00:24:27,510 I'm excited to continue exploring TTP requests asynchronous node end of the weather API in the next 329 00:24:27,510 --> 00:24:28,270 video. 330 00:24:28,350 --> 00:24:30,810 So let's go ahead and jump right in.