WEBVTT 0 00:00.790 --> 00:07.720 In the last lessons, we've done the difficult part, which is fetching live data from the OpenWeatherMap 1 00:07.720 --> 00:14.620 API, and then getting that data formatted and placed onto our web site, 2 00:14.680 --> 00:21.300 like so. But it's a little bit boring if it just displays the weather for London, right? 3 00:21.300 --> 00:22.940 That's not much of a web site. 4 00:22.950 --> 00:29.520 What if we could get the user to type in the city that they're interested in, and then we simply replace 5 00:29.550 --> 00:32.730 this query with whatever city they want, 6 00:32.760 --> 00:39.540 so like, maybe, Paris? So we could say, well, Paris currently has scattered clouds and it's about the same 7 00:39.540 --> 00:45.210 temperature. But of course we'll have to change this, and we'll have to add some sort of input to let 8 00:45.210 --> 00:51.370 the user be able to do this. Instead of having an entire long string here, 9 00:51.420 --> 00:55.110 I'm going to break down each of the parts of our URL. 10 00:55.200 --> 01:03.120 So I'm going to create a const called query, and I'm going to set that to equal London, at least for now, and 11 01:03.120 --> 01:11.650 then I'm going to delete this part here and replace it with the query. Now 12 01:11.660 --> 01:19.970 additionally, I'm also going to take out my app ID, and I'm going to save that as a separate const as 13 01:19.970 --> 01:28.410 well, and I'll call that apiKey. And we'll save it under these two names. 14 01:28.410 --> 01:36.630 And then I can replace that with my apiKey. 15 01:37.070 --> 01:43.800 And finally I'm just going to take out the units, and add it on at the end as well. 16 01:50.600 --> 01:58.670 So now all we have to do to change the data that we get back is to update this query. 17 01:58.850 --> 02:00.550 So how can we do that? 18 02:00.560 --> 02:01.820 How do we update it? 19 02:02.390 --> 02:10.220 Well, if we go into our index.html, which currently is completely blank, we can start off by creating 20 02:10.310 --> 02:19.180 a HTML template, and our title will be called our Weather App, and inside the body 21 02:19.340 --> 02:23.680 all I'm going to do is add a text input. 22 02:23.720 --> 02:34.670 So this is going to be a input of type text, and it's going to have a name which is called the cityName, 23 02:34.670 --> 02:38.820 and it's not going to have any value at the moment. 24 02:38.840 --> 02:47.240 Now in addition to an input, I also want to have a label, and it's the label for this particular input. 25 02:47.240 --> 02:59.750 So let's give it an id, and let's call the id the cityInput, and let's put cityInput here as well. 26 02:59.750 --> 03:05.390 Now our label is going to say “City Name:”. Hit save. 27 03:05.720 --> 03:13.460 And now we want to be able to render this index.html when the user calls app.get at the root 28 03:13.460 --> 03:13.820 route. 29 03:14.360 --> 03:23.710 So instead of all of this, I'm going to cut it out and I'm going to paste it down here, and I'm just going 30 03:23.710 --> 03:26.850 to comment out this code for now. 31 03:26.870 --> 03:35.180 Now our web site is again quite simple, and inside our app.get I'm going to try and send this file, 32 03:35.270 --> 03:39.410 index.html, over to the browser. 33 03:39.410 --> 03:45.800 I'm going to call res.sendFile, and then I'm going to get hold of the directory name, and I'm going 34 03:45.800 --> 03:49.510 to add “/index.html”. 35 03:49.910 --> 03:55.380 And hopefully, when I refresh my web site now, it's going to display that web site. 36 03:55.430 --> 03:59.190 It's going to show my label and my input. 37 03:59.180 --> 04:05.980 So now that I'm free to type whatever it is I want in here, I need some way of sending that data, right? 38 04:06.080 --> 04:08.330 So I need a button in here as well. 39 04:08.330 --> 04:15.670 So let's add a button, and the type of button is going to be a submit button. 40 04:15.740 --> 04:21.910 Now this button doesn't really need a name, but what it does need is some text. 41 04:21.950 --> 04:24.580 So we'll just call that ‘Go’. 42 04:24.830 --> 04:35.240 And if I wrap all of this inside a form, then I'll be able to create a post request when the user hits 43 04:35.240 --> 04:42.560 this button. And that post request is ready here in the method, but the action is actually going to go 44 04:42.560 --> 04:52.760 to our root route. Our form is going to make a post request to this route on our server, and we would have 45 04:52.760 --> 05:02.060 to catch it using app.post, then specifying the root route, which is the one that we said we would 46 05:02.060 --> 05:10.070 hit up over in our form, and then create our function with our req and res. Inside here we’re just going 47 05:10.070 --> 05:17.670 to log, “Post received.” 48 05:17.770 --> 05:23.790 So now let's refresh our web site. We can see our label, our input, and our submit button. 49 05:23.800 --> 05:31.150 Let me just write the word ‘London’ in here, click go, and then go into our Hyper terminal, and we can see 50 05:31.180 --> 05:32.560 “Post request received.” 51 05:32.560 --> 05:36.740 So it's hit up our post route, and this is why we're getting that logged. 52 05:37.300 --> 05:44.560 But in order for us to actually get the text that the user typed into the input, we have to do a little 53 05:44.560 --> 05:45.070 bit more. 54 05:45.640 --> 05:52.120 We have to actually install another package that we've been using previously. 55 05:52.150 --> 05:59.500 So I'm using Control C to exit out of Nodemon, so that I see my prompt again, and I'm going to use NPM 56 05:59.620 --> 06:09.310 to install Body Parser, body-parser. And body-parser is the package that's going to allow me to look 57 06:09.310 --> 06:17.710 through the body of the post request and fetch the data based on the name of my input, which is called 58 06:17.800 --> 06:28.980 cityName. So now let's go ahead and create a constant called bodyParser, which is going to require the 59 06:29.010 --> 06:37.110 body-parser module, and then let's get our app to use 60 06:37.110 --> 06:51.230 bodyParser, and we're going to set the urlencoded to use the extended as true setting. From 61 06:51.230 --> 06:56.540 previous modules, we've used this a few times, and this is just the necessary code for us to be able 62 06:56.540 --> 07:00.140 to start parsing through the body of the post request. 63 07:00.140 --> 07:06.320 But once we've done all of that, instead of console logging, “Post request received.”, we can go one step 64 07:06.320 --> 07:17.300 better than that. We can say request.body. the name of the input, which is called cityName, and we 65 07:17.300 --> 07:25.250 should now be able to console.log the text that went into that input. So let's delete the previous console. 66 07:25.250 --> 07:34.990 log, hit save, start up our server again with ‘nodemon app.js’, and now go to refresh our web site, 67 07:35.390 --> 07:44.750 type in ‘London’, hit ‘Go’, and check our Hyper terminal. And you can see we're now receiving our data from our 68 07:44.750 --> 07:51.050 post request. Now that we've parsed through the body of the request, you can see now how we can start 69 07:51.050 --> 08:00.320 using that as our query, right? Let’s go ahead and take all of this, and paste it into our post request, 70 08:00.770 --> 08:09.050 and then uncomment it using Command /, and instead of console logging the request.body 71 08:09.050 --> 08:14.110 .cityName, we're going to be using that, of course, as the query. 72 08:14.120 --> 08:22.550 So instead of having our hardcoded ‘London’, we're going to write request.body.cityName, and we 73 08:22.550 --> 08:25.400 can delete our console.log now. 74 08:25.400 --> 08:32.120 So now if we hit save, go back to our web site, refresh, let’s type in a different one, let's say what's 75 08:32.120 --> 08:39.320 the weather like in Paris. And now it sends us the weather, but of course we need to modify this text 76 08:39.410 --> 08:40.460 as well. 77 08:40.610 --> 08:49.060 So down here where it says ‘London’, let's get rid of that and let's instead add the query in here. 78 08:50.030 --> 08:54.350 So let's go back and let's check a different place. 79 08:54.350 --> 08:58.150 Let's see what is the weather like in Bali. 80 08:58.150 --> 08:59.640 Here you go. 81 08:59.660 --> 09:04.770 The temperature in Bali is 30 degrees, pretty nice, but there's currently thunderstorms. 82 09:04.880 --> 09:08.790 And that's what our image shows as well. 83 09:09.070 --> 09:14.760 So now we're able to get dynamic data based on what the user typed into the input, 84 09:14.940 --> 09:22.770 catch that data in our app.post, and then use that query to structure our URL and get the data for 85 09:22.770 --> 09:25.070 that particular location. 86 09:25.080 --> 09:34.860 Now we've seen all aspects of our API in use, including authentication, including paths, including queries, 87 09:35.250 --> 09:43.230 and we've been able to parse the JSON data we get back and send it over to the browser using our Express 88 09:43.380 --> 09:46.020 and Node modules. 89 09:46.020 --> 09:51.090 Now in the next lesson we're going to be taking this one step further, and we're going to be building 90 09:51.180 --> 09:57.840 our final project, which is our newsletter email collection web site, which is basically going to be a 91 09:57.840 --> 10:02.030 landing page that you can use to collect user emails. 92 10:02.160 --> 10:05.460 So for all of that and more, I'll see you on the next lesson.