Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,630 --> 00:00:08,189
Now that we've seen how we can use APIs to get data from various web sites, including things like quotes
2
00:00:08,220 --> 00: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
3
00:00:15,390 --> 00:00:19,460
API and then use it inside our own web apps.
4
00:00:19,470 --> 00:00:22,430
This is what the process will roughly look like.
5
00:00:22,650 --> 00:00:24,210
The client browser,
6
00:00:24,230 --> 00: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
7
00:00:31,860 --> 00:00:36,750
going to make a request to our server, and that's going to be a GET request.
8
00:00:37,110 --> 00:00:42,840
So it's going to try and get the HTML, CSS and Javascript from our server.
9
00:00:42,840 --> 00:00:49,300
Now at this point what happens is our server should return all of those pieces of data,
10
00:00:49,440 --> 00: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
11
00:00:57,270 --> 00:01:05,340
that includes some data from somebody else's server, we're going to have to make a request to that other
12
00:01:05,340 --> 00:01:06,600
server.
13
00:01:06,600 --> 00: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
14
00:01:13,260 --> 00:01:13,970
that we need.
15
00:01:14,560 --> 00: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,
16
00:01:21,870 --> 00:01:27,870
where they've specified what are the things that we need to pass over, like what parameters, what paths,
17
00:01:27,900 --> 00:01:35,110
what key value pairs we have to use in order to get the response and the data that we want.
18
00:01:35,130 --> 00: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
19
00:01:43,020 --> 00:01:46,780
to our client, the user for our web site.
20
00:01:46,830 --> 00: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.
21
00:01:52,020 --> 00:01:56,200
But effectively we're looking to create something very simple like this.
22
00:01:56,310 --> 00:02:01,500
We should be able to display to the user the temperature of a particular location that they're interested
23
00:02:01,500 --> 00:02:07,110
in, and also display a weather symbol for the weather conditions there,
24
00:02:07,470 --> 00: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
25
00:02:14,340 --> 00:02:18,110
going to do that on the command line using the Hyper terminal.
26
00:02:18,120 --> 00:02:24,800
So go ahead and open up Hyper, and cd over to your desktop. Now
27
00:02:24,820 --> 00:02:28,140
once you're there, you're going to create a directory using mkdir,
28
00:02:28,360 --> 00:02:35,500
and we're going to call it WeatherProject. Once I hit enter, you'll see my new folder created inside
29
00:02:35,500 --> 00:02:36,790
my desktop.
30
00:02:36,790 --> 00:02:39,320
And if any of this is confusing to you at all,
31
00:02:39,400 --> 00:02:44,740
make sure you go back and complete the command line module, because we've gone through all of this in
32
00:02:44,740 --> 00:02:47,070
detail already over there.
33
00:02:47,080 --> 00:02:47,830
Let's continue.
34
00:02:47,860 --> 00:02:55,890
Now let's go ahead and cd into the WeatherProject, and once we're inside this folder,
35
00:02:55,900 --> 00:02:57,000
so we're now here,
36
00:02:57,190 --> 00:03:00,640
I'm going to create some new files using the touch command.
37
00:03:00,640 --> 00:03:06,430
So I'm going to create a file called the index.html, and then I'm going to create another
38
00:03:06,430 --> 00:03:09,170
file called the app.js.
39
00:03:09,380 --> 00:03:15,310
And of course you can do this all on one line just by writing ‘touch index.html’, and then
40
00:03:15,310 --> 00:03:21,100
‘ app.js’. I'm not going to hit enter because it's just going to create it all over again, but
41
00:03:21,280 --> 00: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
42
00:03:29,070 --> 00:03:33,260
simply just going to hit enter for all the default settings.
43
00:03:33,270 --> 00:03:39,070
So now you can see we've got our package.json created. And using NPM
44
00:03:39,090 --> 00: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
45
00:03:46,830 --> 00:03:47,770
NPM module.
46
00:03:47,790 --> 00: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
47
00:03:54,420 --> 00:03:58,760
create my package log and download my node modules.
48
00:03:59,400 --> 00:04:04,100
And now I'm ready to open up my weather project inside Atom.
49
00:04:04,230 --> 00:04:11,430
Now that I've got Atom open, I'm just going to drag my weather project, the entire folder, into Atom.
50
00:04:11,430 --> 00:04:17,610
And now I've opened up my directory here, and I can start editing my index.html and my
51
00:04:17,610 --> 00:04:18,240
app.js.
52
00:04:18,300 --> 00:04:22,240
So this should all be pretty familiar to you by now.
53
00:04:22,240 --> 00: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
54
00:04:29,280 --> 00:04:36,270
I'm going to require the Express module, so create a const called express to require
55
00:04:39,660 --> 00:04:40,920
my Express module,
56
00:04:44,220 --> 00: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
57
00:04:50,610 --> 00:04:52,260
the very bottom I'm going to do
58
00:04:52,260 --> 00:05:00,900
app.listen, and I'm going to be listening on port 3000, and I'm going to add my callback function,
59
00:05:01,650 --> 00:05:12,240
which is just going to console.log that the server is running on port 3000. Cool.
60
00:05:12,270 --> 00:05:17,090
Now all I have to do is to add an app.get,
61
00:05:17,160 --> 00:05:21,730
so what should happen when the user tries to go to my home page,
62
00:05:21,750 --> 00:05:23,190
the root route.
63
00:05:23,430 --> 00: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
64
00:05:32,850 --> 00:05:39,260
for now is just to use res.send to send over some text.
65
00:05:39,390 --> 00:05:44,510
Let's just say, “Server is up and running.”
66
00:05:44,580 --> 00: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
67
00:05:53,220 --> 00:06:00,720
can see that this is now logging from here, “Server is running on port 3000.”, and we can now go
68
00:06:00,720 --> 00:06:05,130
to localhost:3000 and see that our server is up and running.
69
00:06:05,130 --> 00:06:06,580
So it's all connected.
70
00:06:06,750 --> 00:06:09,020
We're now ready to get started.
71
00:06:09,090 --> 00:06:13,900
Now I know that some people like to save all of this boilerplate somewhere, and then just copy and paste
72
00:06:13,900 --> 00:06:16,210
it whenever they create a new project,
73
00:06:16,350 --> 00: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
74
00:06:21,360 --> 00:06:23,790
memory and just typing it out every time.
75
00:06:23,940 --> 00:06:29,310
And this way when something does change, you're able to react to it, rather than having to go and debug
76
00:06:29,310 --> 00:06:35,530
it because you've copied it from somewhere. Instead of sending, “Server is up and running.”,
77
00:06:35,580 --> 00:06:40,620
I'd really prefer to send the current weather data. In order to do that,
78
00:06:40,800 --> 00:06:48,930
I have to somehow make a get request to the OpenWeatherMap’s server, and be able to fetch the data back
79
00:06:49,050 --> 00:06:51,220
as a JSON, and parse it
80
00:06:51,240 --> 00:06:54,810
so I get the relevant piece of information.
81
00:06:54,990 --> 00:06:56,310
How do we do that?
82
00:06:56,310 --> 00:07:01,950
If we didn't know how to do this, then we'd probably ask our good friend Google, right?
83
00:07:01,980 --> 00:07:10,390
Make get requests to external server with node.
84
00:07:10,410 --> 00:07:18,780
The first result we get back on Stack Overflow points to a package called request, and, in old versions
85
00:07:18,780 --> 00:07:24,420
of this course, I used to point students toward this module, because it's really nice and it has a really
86
00:07:24,420 --> 00:07:26,400
simple implementation.
87
00:07:26,400 --> 00:07:35,170
But, as of January 2020, the request module is now deprecated, so it's basically being retired.
88
00:07:35,190 --> 00: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
89
00:07:42,900 --> 00:07:52,230
students, I recommend to use a different module. And if we take a look at this blog post by Twilio, which
90
00:07:52,680 --> 00:08:00,270
came up actually in fact as the first result for our search, they're telling us that there are five ways
91
00:08:00,330 --> 00:08:06,980
of doing this, and the first way is the native way, using the Standard Node Library,
92
00:08:07,140 --> 00:08:14,160
something called the HTTP module. And in fact they're actually using the HTTPS module, which is the
93
00:08:14,220 --> 00:08:24,040
secure version. But in addition you could also use the Request module, Axios, SuperAgent, or Got.
94
00:08:24,090 --> 00: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.
95
00:08:32,429 --> 00:08:36,820
So we're going to be using the native HTTPS Node module.
96
00:08:36,990 --> 00:08:43,530
So if we search for it inside our Node documentation, you can see that somewhere down here, there is the
97
00:08:43,530 --> 00: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
98
00:08:53,250 --> 00: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
99
00:09:01,440 --> 00:09:03,440
get hold of the data.
100
00:09:03,480 --> 00:09:05,400
This is what we're going to use in our code.
101
00:09:06,270 --> 00: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
102
00:09:13,500 --> 00:09:21,360
this HTTPS module. And we don't actually have to install this using Node, because it's one of the native
103
00:09:21,450 --> 00:09:27,870
Node modules, which is already bundled within our Node project, so we can simply just go ahead and use
104
00:09:27,870 --> 00:09:33,700
it. Inside my app.get, before I send the result back to my client,
105
00:09:33,840 --> 00: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.
106
00:09:43,920 --> 00:09:51,180
If we go into Postman, where we've got our already prestructured URL, which includes all the parameters
107
00:09:51,180 --> 00:09:52,550
that we've added here.
108
00:09:52,620 --> 00:09:59,070
Make sure that you've checked that it actually works, that you actually get back some data, and everything
109
00:09:59,220 --> 00:10:00,890
looks like it's working.
110
00:10:01,170 --> 00:10:09,570
Then we can copy this entire formatted URL, and then paste it into our get method right here.
111
00:10:09,930 --> 00:10:17,100
Now the thing to remember about this URL, though, is it needs to have the strict formatting of the
112
00:10:17,210 --> 00:10:25,180
https:// and then the rest of the URL, because even though we could take this URL,
113
00:10:25,190 --> 00:10:32,510
paste it into our browser, and our browser will automatically add all the necessary https etc.,
114
00:10:33,150 --> 00:10:39,040
it doesn't work like that when we use our Node module. We have to have this first part there.
115
00:10:39,390 --> 00:10:44,670
Now you can either just paste it into your browser and then select it and copy it,
116
00:10:45,690 --> 00:10:52,560
and now when you add this string you'll see that it's automatically included that first part, or you
117
00:10:52,560 --> 00:10:54,720
could simply just have typed this as well.
118
00:10:54,720 --> 00:11:01,080
It doesn't really matter. Now because this URL is so long, and we can't even see the beginning and
119
00:11:01,080 --> 00:11:02,970
end of our get method,
120
00:11:02,970 --> 00: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.
121
00:11:11,790 --> 00:11:16,620
So we'll just call that url, and set it equal to the entire string.
122
00:11:16,630 --> 00:11:24,540
Now I can simply pass the URL in as the first parameter, and then I can create my callback function, and
123
00:11:24,600 --> 00:11:27,200
I can see everything all in one line,
124
00:11:27,240 --> 00:11:28,610
which is brilliant.
125
00:11:28,650 --> 00:11:33,690
Now this callback function is going to give us back a response.
126
00:11:33,690 --> 00:11:40,320
So normally, when you see it written, say in the documentation, you'll see people shorten it to res, but
127
00:11:40,320 --> 00: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,
128
00:11:46,170 --> 00: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
129
00:11:52,710 --> 00:12:01,860
do is just log this response to see whether if this entire process of making a HTTP get request over
130
00:12:01,860 --> 00:12:07,890
the Internet to this URL, where we're supposed to fetch some data, whether it actually works, and whether
131
00:12:07,920 --> 00:12:09,720
we actually get something back.
132
00:12:09,750 --> 00:12:16,620
So now let's hit save, and let's refresh our localhost:3000.
133
00:12:16,740 --> 00: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
134
00:12:24,920 --> 00:12:31,430
the method of request that we made, the path that our requests went to,
135
00:12:31,580 --> 00:12:39,420
and most importantly the status code that we got back from the external OpenWeatherMap server.
136
00:12:39,680 --> 00:12:47,120
And it says 200, which basically means a OK. So now that we've got everything working, in the next
137
00:12:47,120 --> 00: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
138
00:12:51,650 --> 00:12:56,810
status codes and how to get the actual data out of all of this mess.
139
00:12:56,870 --> 00:13:00,020
So for all of that and more, I'll see you on the next lesson.
15729
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.