WEBVTT 0 00:00.630 --> 00:08.190 Now that we've seen how we can use APIs to get data from various web sites, including things like quotes 1 00:08.220 --> 00:15.390 or jokes or live weather data, it's time to put it into practice and get these pieces of data from an 2 00:15.390 --> 00:19.460 API and then use it inside our own web apps. 3 00:19.470 --> 00:22.430 This is what the process will roughly look like. 4 00:22.650 --> 00:24.210 The client browser, 5 00:24.230 --> 00:31.860 so this is our user, is going to be typing in our web address into their browser, say Chrome, and that is 6 00:31.860 --> 00:36.750 going to make a request to our server, and that's going to be a GET request. 7 00:37.110 --> 00:42.840 So it's going to try and get the HTML, CSS and Javascript from our server. 8 00:42.840 --> 00:49.300 Now at this point what happens is our server should return all of those pieces of data, 9 00:49.440 --> 00:57.210 the HTML, CSS and Javascript, and that's in the response. But in order to be able to give them that response 10 00:57.270 --> 01:05.340 that includes some data from somebody else's server, we're going to have to make a request to that other 11 01:05.340 --> 01:06.600 server. 12 01:06.600 --> 01:13.230 And it's again going to be a GET request, so that they will give us a response in the form of the data 13 01:13.260 --> 01:13.970 that we need. 14 01:14.560 --> 01:21.420 And we're going to do this via their API, so via the menu that they provided for us to make our requests, 15 01:21.870 --> 01:27.870 where they've specified what are the things that we need to pass over, like what parameters, what paths, 16 01:27.900 --> 01:35.110 what key value pairs we have to use in order to get the response and the data that we want. 17 01:35.130 --> 01:43.020 So then, once we get the data, we can go back and incorporate that data into the files that we send back 18 01:43.020 --> 01:46.780 to our client, the user for our web site. 19 01:46.830 --> 01:51.760 That's just the high level overview of what's going to happen in the code that we're going to write. 20 01:52.020 --> 01:56.200 But effectively we're looking to create something very simple like this. 21 01:56.310 --> 02:01.500 We should be able to display to the user the temperature of a particular location that they're interested 22 02:01.500 --> 02:07.110 in, and also display a weather symbol for the weather conditions there, 23 02:07.470 --> 02:14.340 so something that looks a bit like this. To begin, let's go ahead and create our new project, and we're 24 02:14.340 --> 02:18.110 going to do that on the command line using the Hyper terminal. 25 02:18.120 --> 02:24.800 So go ahead and open up Hyper, and cd over to your desktop. Now 26 02:24.820 --> 02:28.140 once you're there, you're going to create a directory using mkdir, 27 02:28.360 --> 02:35.500 and we're going to call it WeatherProject. Once I hit enter, you'll see my new folder created inside 28 02:35.500 --> 02:36.790 my desktop. 29 02:36.790 --> 02:39.320 And if any of this is confusing to you at all, 30 02:39.400 --> 02:44.740 make sure you go back and complete the command line module, because we've gone through all of this in 31 02:44.740 --> 02:47.070 detail already over there. 32 02:47.080 --> 02:47.830 Let's continue. 33 02:47.860 --> 02:55.890 Now let's go ahead and cd into the WeatherProject, and once we're inside this folder, 34 02:55.900 --> 02:57.000 so we're now here, 35 02:57.190 --> 03:00.640 I'm going to create some new files using the touch command. 36 03:00.640 --> 03:06.430 So I'm going to create a file called the index.html, and then I'm going to create another 37 03:06.430 --> 03:09.170 file called the app.js. 38 03:09.380 --> 03:15.310 And of course you can do this all on one line just by writing ‘touch index.html’, and then 39 03:15.310 --> 03:21.100 ‘ app.js’. I'm not going to hit enter because it's just going to create it all over again, but 40 03:21.280 --> 03:29.070 this is now what we've got. Now the next step is we're going to initialize NPM with npm init, and I'm 41 03:29.070 --> 03:33.260 simply just going to hit enter for all the default settings. 42 03:33.270 --> 03:39.070 So now you can see we've got our package.json created. And using NPM 43 03:39.090 --> 03:46.530 I'm going to install a couple of packages. And the only module we need to install right now is the Express 44 03:46.830 --> 03:47.770 NPM module. 45 03:47.790 --> 03:54.360 So I'm just going to hit enter, and hopefully it's going to fetch everything I need from the Internet, and 46 03:54.420 --> 03:58.760 create my package log and download my node modules. 47 03:59.400 --> 04:04.100 And now I'm ready to open up my weather project inside Atom. 48 04:04.230 --> 04:11.430 Now that I've got Atom open, I'm just going to drag my weather project, the entire folder, into Atom. 49 04:11.430 --> 04:17.610 And now I've opened up my directory here, and I can start editing my index.html and my 50 04:17.610 --> 04:18.240 app.js. 51 04:18.300 --> 04:22.240 So this should all be pretty familiar to you by now. 52 04:22.240 --> 04:29.270 Now I'm gonna focus on my app.js file, and I want to create a new Node app. To do that 53 04:29.280 --> 04:36.270 I'm going to require the Express module, so create a const called express to require 54 04:39.660 --> 04:40.920 my Express module, 55 04:44.220 --> 04:50.610 and then I'm going to create a const called app, which is going to initialize a new Express app. And then at 56 04:50.610 --> 04:52.260 the very bottom I'm going to do 57 04:52.260 --> 05:00.900 app.listen, and I'm going to be listening on port 3000, and I'm going to add my callback function, 58 05:01.650 --> 05:12.240 which is just going to console.log that the server is running on port 3000. Cool. 59 05:12.270 --> 05:17.090 Now all I have to do is to add an app.get, 60 05:17.160 --> 05:21.730 so what should happen when the user tries to go to my home page, 61 05:21.750 --> 05:23.190 the root route. 62 05:23.430 --> 05:32.850 Well, let’s add our callback function, our req and res, and then inside our app.get all I'm going to do 63 05:32.850 --> 05:39.260 for now is just to use res.send to send over some text. 64 05:39.390 --> 05:44.510 Let's just say, “Server is up and running.” 65 05:44.580 --> 05:53.220 So now let's hit save and go back to our Hyper terminal, use Nodemon to run our app.js, and you 66 05:53.220 --> 06:00.720 can see that this is now logging from here, “Server is running on port 3000.”, and we can now go 67 06:00.720 --> 06:05.130 to localhost:3000 and see that our server is up and running. 68 06:05.130 --> 06:06.580 So it's all connected. 69 06:06.750 --> 06:09.020 We're now ready to get started. 70 06:09.090 --> 06:13.900 Now I know that some people like to save all of this boilerplate somewhere, and then just copy and paste 71 06:13.900 --> 06:16.210 it whenever they create a new project, 72 06:16.350 --> 06:21.360 but I think when you first get started working with it, it's quite nice building up a little bit of muscle 73 06:21.360 --> 06:23.790 memory and just typing it out every time. 74 06:23.940 --> 06:29.310 And this way when something does change, you're able to react to it, rather than having to go and debug 75 06:29.310 --> 06:35.530 it because you've copied it from somewhere. Instead of sending, “Server is up and running.”, 76 06:35.580 --> 06:40.620 I'd really prefer to send the current weather data. In order to do that, 77 06:40.800 --> 06:48.930 I have to somehow make a get request to the OpenWeatherMap’s server, and be able to fetch the data back 78 06:49.050 --> 06:51.220 as a JSON, and parse it 79 06:51.240 --> 06:54.810 so I get the relevant piece of information. 80 06:54.990 --> 06:56.310 How do we do that? 81 06:56.310 --> 07:01.950 If we didn't know how to do this, then we'd probably ask our good friend Google, right? 82 07:01.980 --> 07:10.390 Make get requests to external server with node. 83 07:10.410 --> 07:18.780 The first result we get back on Stack Overflow points to a package called request, and, in old versions 84 07:18.780 --> 07:24.420 of this course, I used to point students toward this module, because it's really nice and it has a really 85 07:24.420 --> 07:26.400 simple implementation. 86 07:26.400 --> 07:35.170 But, as of January 2020, the request module is now deprecated, so it's basically being retired. 87 07:35.190 --> 07:42.900 So if you've used request before in one of your previous projects, then it will still work, but for all new 88 07:42.900 --> 07:52.230 students, I recommend to use a different module. And if we take a look at this blog post by Twilio, which 89 07:52.680 --> 08:00.270 came up actually in fact as the first result for our search, they're telling us that there are five ways 90 08:00.330 --> 08:06.980 of doing this, and the first way is the native way, using the Standard Node Library, 91 08:07.140 --> 08:14.160 something called the HTTP module. And in fact they're actually using the HTTPS module, which is the 92 08:14.220 --> 08:24.040 secure version. But in addition you could also use the Request module, Axios, SuperAgent, or Got. 93 08:24.090 --> 08:31.920 Now all of these last four are external NPM packages, but I want to show you how you can do it natively. 94 08:32.430 --> 08:36.820 So we're going to be using the native HTTPS Node module. 95 08:36.990 --> 08:43.530 So if we search for it inside our Node documentation, you can see that somewhere down here, there is the 96 08:43.530 --> 08:53.250 option to form a get request. And all we have to do is to get hold of the HTTPS module, to call the 97 08:53.250 --> 09:01.440 get method on it, and then, once we get our results back, we can either log the status code, or simply just 98 09:01.440 --> 09:03.440 get hold of the data. 99 09:03.480 --> 09:05.400 This is what we're going to use in our code. 100 09:06.270 --> 09:13.470 So right at the top here, I'm going to create a new constant called https, and then I'm going to require 101 09:13.500 --> 09:21.360 this HTTPS module. And we don't actually have to install this using Node, because it's one of the native 102 09:21.450 --> 09:27.870 Node modules, which is already bundled within our Node project, so we can simply just go ahead and use 103 09:27.870 --> 09:33.700 it. Inside my app.get, before I send the result back to my client, 104 09:33.840 --> 09:42.990 I'm going to use my HTTPS module and call the get method. Now the get method is going to need a URL. 105 09:43.920 --> 09:51.180 If we go into Postman, where we've got our already prestructured URL, which includes all the parameters 106 09:51.180 --> 09:52.550 that we've added here. 107 09:52.620 --> 09:59.070 Make sure that you've checked that it actually works, that you actually get back some data, and everything 108 09:59.220 --> 10:00.890 looks like it's working. 109 10:01.170 --> 10:09.570 Then we can copy this entire formatted URL, and then paste it into our get method right here. 110 10:09.930 --> 10:17.100 Now the thing to remember about this URL, though, is it needs to have the strict formatting of the 111 10:17.210 --> 10:25.180 https:// and then the rest of the URL, because even though we could take this URL, 112 10:25.190 --> 10:32.510 paste it into our browser, and our browser will automatically add all the necessary https etc., 113 10:33.150 --> 10:39.040 it doesn't work like that when we use our Node module. We have to have this first part there. 114 10:39.390 --> 10:44.670 Now you can either just paste it into your browser and then select it and copy it, 115 10:45.690 --> 10:52.560 and now when you add this string you'll see that it's automatically included that first part, or you 116 10:52.560 --> 10:54.720 could simply just have typed this as well. 117 10:54.720 --> 11:01.080 It doesn't really matter. Now because this URL is so long, and we can't even see the beginning and 118 11:01.080 --> 11:02.970 end of our get method, 119 11:02.970 --> 11:11.790 what I'm going to do is take this string out of the method, and use a constant to hold it instead. 120 11:11.790 --> 11:16.620 So we'll just call that url, and set it equal to the entire string. 121 11:16.630 --> 11:24.540 Now I can simply pass the URL in as the first parameter, and then I can create my callback function, and 122 11:24.600 --> 11:27.200 I can see everything all in one line, 123 11:27.240 --> 11:28.610 which is brilliant. 124 11:28.650 --> 11:33.690 Now this callback function is going to give us back a response. 125 11:33.690 --> 11:40.320 So normally, when you see it written, say in the documentation, you'll see people shorten it to res, but 126 11:40.320 --> 11:45.780 because we've already got req and res here, I don't want to have another res, because it's kind of confusing, 127 11:46.170 --> 11:52.700 so I'm going to call this the full name, the response, and when we get back our response, all that I'm going to 128 11:52.710 --> 12:01.860 do is just log this response to see whether if this entire process of making a HTTP get request over 129 12:01.860 --> 12:07.890 the Internet to this URL, where we're supposed to fetch some data, whether it actually works, and whether 130 12:07.920 --> 12:09.720 we actually get something back. 131 12:09.750 --> 12:16.620 So now let's hit save, and let's refresh our localhost:3000. 132 12:16.740 --> 12:24.890 Now if we go to our Hyper terminal, you can see that we've gotten back a whole bunch of data, including 133 12:24.920 --> 12:31.430 the method of request that we made, the path that our requests went to, 134 12:31.580 --> 12:39.420 and most importantly the status code that we got back from the external OpenWeatherMap server. 135 12:39.680 --> 12:47.120 And it says 200, which basically means a OK. So now that we've got everything working, in the next 136 12:47.120 --> 12:51.650 lesson we're going to dig into our response a little bit more, and we're going to learn more about the 137 12:51.650 --> 12:56.810 status codes and how to get the actual data out of all of this mess. 138 12:56.870 --> 13:00.020 So for all of that and more, I'll see you on the next lesson.