1
00:00:00,330 --> 00:00:00,720
All right.

2
00:00:00,720 --> 00:00:01,890
Welcome back.

3
00:00:01,890 --> 00:00:08,250
So we're going to move on from high level talking about what AP guys are how they work and how they

4
00:00:08,640 --> 00:00:10,470
are structured and what they respond with.

5
00:00:10,470 --> 00:00:16,500
Jay Sonic's M-L we're going to move on from that to actually getting dirty with AAPI is actually working

6
00:00:16,500 --> 00:00:20,010
with them incorporating them into an application.

7
00:00:20,010 --> 00:00:20,800
Before we do that.

8
00:00:20,820 --> 00:00:26,040
Going to do a quick refresher on how you can make h h t t p requests.

9
00:00:26,040 --> 00:00:32,170
So the most common way that you've seen probably your whole life on the web is just using the browser

10
00:00:32,200 --> 00:00:32,320
.

11
00:00:32,640 --> 00:00:36,380
So I can open up a window and go to Google dot com.

12
00:00:36,720 --> 00:00:38,240
I made a request.

13
00:00:38,580 --> 00:00:42,280
I hit enter I click this button that makes me a request.

14
00:00:42,390 --> 00:00:44,510
I do a search for dog.

15
00:00:45,390 --> 00:00:50,700
That's a request I click on that dog link to wikipedia and that's a request.

16
00:00:50,700 --> 00:00:50,960
OK.

17
00:00:50,970 --> 00:00:52,190
So that's one way.

18
00:00:52,530 --> 00:00:58,260
But I can also make requests through code which is what we're going to learn about here is how do I

19
00:00:58,260 --> 00:01:00,630
write javascript that will make a request for me.

20
00:01:00,630 --> 00:01:08,800
How do I write javascript that will fetch Jaison from the Yahoo weather API or from the Reddit API.

21
00:01:09,030 --> 00:01:14,790
That's our whole goal here is to write some code that will go and get information from an API through

22
00:01:14,790 --> 00:01:20,470
a request and then do something with it like save it to a database or show it to a user.

23
00:01:20,790 --> 00:01:25,500
And the secret to that is that you don't have to make a request through the browser.

24
00:01:25,560 --> 00:01:27,840
You can make a request through code.

25
00:01:27,840 --> 00:01:34,200
We're going to see how to do it using a package called request oddly enough but there's also other ways

26
00:01:34,200 --> 00:01:34,940
of doing it.

27
00:01:35,070 --> 00:01:40,130
A tool called Currall see you Arel is a way to make requests from the command line.

28
00:01:40,380 --> 00:01:46,710
So not necessarily for an application but just to show you that requests are you know independent browsers

29
00:01:47,220 --> 00:01:59,070
I can request HGP colon slash slash www.youtube.com from my terminal and I get this content the exact

30
00:01:59,070 --> 00:02:03,000
same response that I do when I go to Google dot com.

31
00:02:03,030 --> 00:02:09,330
The key difference of course is that in a browser that information is then rendered back to me.

32
00:02:09,420 --> 00:02:18,120
So I see this but the underlying text him that sent back is what I'm seeing here.

33
00:02:18,480 --> 00:02:23,520
So most the time in our code we're not going to be asking for him out from a web page.

34
00:02:23,520 --> 00:02:26,120
I mean this is such a mess to work with.

35
00:02:26,880 --> 00:02:33,020
Instead we're usually asking for Jaison or X-amount from an API but the same idea holds true.

36
00:02:33,020 --> 00:02:35,580
I can request an API using Currall.

37
00:02:35,760 --> 00:02:43,170
So I just do Kerl on an API you IRL but that's not what we're going to do really for most applications

38
00:02:43,170 --> 00:02:43,220
.

39
00:02:43,230 --> 00:02:47,930
That's just kind of an educational demonstration that you can do it from the command line.

40
00:02:48,060 --> 00:02:53,480
We're going to do it inside of an application and we're going to start really really simple.

41
00:02:53,530 --> 00:02:56,340
We're going to show you how you make a request in node.

42
00:02:56,760 --> 00:03:05,210
So I'm going to make a new directory here API eyes and then I'm going to make a new file.

43
00:03:05,430 --> 00:03:09,210
I'm just going to call it first request.

44
00:03:09,240 --> 00:03:10,730
Jay Yes.

45
00:03:10,890 --> 00:03:15,420
So all we're going to do is make a request from a javascript file.

46
00:03:15,480 --> 00:03:18,150
So we'll just request Googlebot column again which is what we do.

47
00:03:18,270 --> 00:03:20,360
Which is what we just did using cURL.

48
00:03:20,940 --> 00:03:23,450
And I know it's kind of all this can be a lot to take in.

49
00:03:23,580 --> 00:03:27,430
The whole point is just we made a request in the browser by refreshing the page.

50
00:03:27,540 --> 00:03:29,340
We made a request and the command line.

51
00:03:29,340 --> 00:03:32,470
It works the same way as far as the content we get back.

52
00:03:32,550 --> 00:03:33,830
Now let's do the same thing.

53
00:03:33,840 --> 00:03:36,520
But from a javascript file.

54
00:03:37,060 --> 00:03:39,170
So I'm going to open up that file.

55
00:03:40,950 --> 00:03:44,200
And we want to put our code here that will make the request.

56
00:03:44,220 --> 00:03:45,210
So how do we do that.

57
00:03:45,210 --> 00:03:47,130
How do we make a request from node.

58
00:03:47,430 --> 00:03:50,220
There's a lot of different libraries packages you can use.

59
00:03:50,370 --> 00:03:57,870
The one we're going to use is called request and this is probably the most common so get have that com

60
00:03:57,870 --> 00:03:59,380
slash request to get you there.

61
00:03:59,400 --> 00:04:05,540
Just google node request simplified aged UDP request client.

62
00:04:05,760 --> 00:04:08,690
So this is how we can make a simple request.

63
00:04:08,700 --> 00:04:10,800
This is kind of the basic syntax.

64
00:04:10,920 --> 00:04:18,840
If you take a look we first included by requiring request setting into a variable just like every other

65
00:04:18,840 --> 00:04:28,620
package then what we do is make a request to a u r l and then we have a function that we pass it and

66
00:04:28,620 --> 00:04:34,070
there's multiple parts of this function or multiple arguments and error response and body.

67
00:04:34,450 --> 00:04:41,720
So we use a callback here because making a request takes time sometimes will be very fast a matter milliseconds

68
00:04:41,730 --> 00:04:42,030
.

69
00:04:42,030 --> 00:04:47,670
Sometimes the request if you're requesting a web page that doesn't exist or a server that's down it

70
00:04:47,670 --> 00:04:48,840
will get hung up.

71
00:04:48,900 --> 00:04:55,290
And so you need to wait often times to do anything until you have a response whether it's good or bad

72
00:04:55,300 --> 00:04:55,630
.

73
00:04:55,950 --> 00:04:59,380
So we'll see and we'll talk about what these are and how you use them.

74
00:04:59,490 --> 00:05:07,110
For now let's just copy this over and I'm actually going to retype it line by line but I'm just going

75
00:05:07,110 --> 00:05:08,540
to keep it here so you can see it.

76
00:05:08,820 --> 00:05:16,040
And the very first thing we need to do of course is install the package request so NPM install request

77
00:05:18,250 --> 00:05:23,600
that you go get a request and we'll be able to require it correctly appear.

78
00:05:23,890 --> 00:05:24,340
OK.

79
00:05:24,370 --> 00:05:25,240
So we've done that.

80
00:05:25,240 --> 00:05:30,020
I'm going to just resize a little bit here and there is going to rewrite this.

81
00:05:30,040 --> 00:05:31,920
Rewrite this or we can go over it.

82
00:05:32,170 --> 00:05:35,130
Require requests.

83
00:05:35,290 --> 00:05:36,880
Nice and simple to start.

84
00:05:37,450 --> 00:05:41,320
So the next line is actually making that request.

85
00:05:41,710 --> 00:05:49,110
So this app if you want to call the nap whenever we run it we'll just run node first request.

86
00:05:49,320 --> 00:05:49,790
Yes.

87
00:05:49,840 --> 00:05:53,410
All it will do is print out the iChat him out from Google.

88
00:05:53,420 --> 00:05:54,840
They'll be the first thing we do.

89
00:05:55,140 --> 00:05:57,690
So have our request equals require request.

90
00:05:57,700 --> 00:06:02,510
Then we make our request so we'll do HTP colon slash slash W.W..

91
00:06:02,600 --> 00:06:03,740
Google.com.

92
00:06:04,030 --> 00:06:10,980
Exactly what we did with Currall the same you are ill and we expect the same age timeo.

93
00:06:12,010 --> 00:06:14,390
So that's the first part that will make the request.

94
00:06:14,420 --> 00:06:18,940
But to do anything with the information that comes back we need a callback.

95
00:06:19,030 --> 00:06:22,510
And as they explained that's because it's not instantaneous.

96
00:06:22,510 --> 00:06:24,200
It takes time.

97
00:06:24,220 --> 00:06:28,690
This request has to go all the way to a server somewhere potentially thousands of miles away.

98
00:06:28,780 --> 00:06:34,110
Then come all the way back to us and then our computer has to understand it and make sense of it.

99
00:06:34,570 --> 00:06:41,770
So there are three things that we pass in error response and body.

100
00:06:41,770 --> 00:06:47,890
The first one which is error is will hold any potential error that we get.

101
00:06:47,890 --> 00:06:54,580
So if there's a problem the server does is down or the request times out or we don't have an internet

102
00:06:54,580 --> 00:06:59,150
connection for instance if I turn my wife off and try that we'll get an error back.

103
00:06:59,170 --> 00:07:01,010
So we'll see how to play with that in a little bit.

104
00:07:01,090 --> 00:07:03,800
But it's important that you check for an error.

105
00:07:04,000 --> 00:07:13,850
So we'll do something like this if there's an error and then we'll have an else.

106
00:07:13,900 --> 00:07:18,800
So if there's an error let's just cancel don't log.

107
00:07:20,620 --> 00:07:27,790
Something went wrong and then will also cancel that log the error itself.

108
00:07:27,910 --> 00:07:31,460
Otherwise that means that we got something back.

109
00:07:31,930 --> 00:07:37,750
You can see there's a second thing that they're checking for here in this example if response does status

110
00:07:37,750 --> 00:07:39,430
code is 200.

111
00:07:39,610 --> 00:07:44,400
So we're not going to go into status codes all that much but you probably are familiar with the 404

112
00:07:44,410 --> 00:07:50,030
status code whenever you try and request a page that doesn't exist anymore.

113
00:07:50,410 --> 00:07:57,460
If we look up for a for status code that not found error message that you see you know if you're trying

114
00:07:57,460 --> 00:08:01,020
to request something that can't be found.

115
00:08:01,030 --> 00:08:03,550
There are a lot of other status codes though.

116
00:08:04,240 --> 00:08:07,490
So you can see here the most important one though is 200.

117
00:08:07,510 --> 00:08:08,160
Stands for.

118
00:08:08,170 --> 00:08:12,280
OK it's a standard response for successful requests.

119
00:08:12,280 --> 00:08:18,730
So if things went well and we got a response we want to check if it's status code is 200 because we

120
00:08:18,730 --> 00:08:24,700
could potentially get a response that has a status code of something else other than 200 like the page

121
00:08:24,700 --> 00:08:26,400
has moved.

122
00:08:26,530 --> 00:08:29,490
And that's not going to be two hundred and we want to handle that differently.

123
00:08:29,500 --> 00:08:35,620
So this is something you can kind of just hard not hard code but you can always assume that you want

124
00:08:35,620 --> 00:08:37,960
to check if the status quo is 200.

125
00:08:38,590 --> 00:08:47,440
So we'll do that in here for now is a nested IF statement so if response that status code equals equals

126
00:08:47,450 --> 00:08:48,650
200.

127
00:08:48,940 --> 00:08:56,420
So if we get here things worked OK.

128
00:08:56,500 --> 00:09:01,300
So if that happened let's just do a to that log.

129
00:09:01,990 --> 00:09:03,750
And we're going to printout body.

130
00:09:03,880 --> 00:09:09,940
So that's the last piece of information which is the actual response body the stuff that came back that

131
00:09:09,940 --> 00:09:13,940
will be our or exceed our age to him out from Google.

132
00:09:14,500 --> 00:09:15,970
So there's a lot to take in.

133
00:09:16,390 --> 00:09:17,620
I'm going to get rid of this for now.

134
00:09:17,620 --> 00:09:19,020
Just cut that all out.

135
00:09:19,060 --> 00:09:23,630
Save my file and let's see what happens.

136
00:09:23,650 --> 00:09:28,390
So node first request Yes that's the name of our file.

137
00:09:28,480 --> 00:09:34,390
And wow we get all the age Tim print printed out.

138
00:09:34,750 --> 00:09:36,080
Great.

139
00:09:36,100 --> 00:09:39,470
So let's also try changing that you are.

140
00:09:39,730 --> 00:09:44,770
Let's go to read it dotcom safe file.

141
00:09:44,860 --> 00:09:46,510
Run it.

142
00:09:47,590 --> 00:09:54,190
And here is I read it to him all we could do the exact same thing with an API.

143
00:09:54,340 --> 00:10:01,710
So if we go back to the Yahoo weather endpoint this is to get the sunset time for Hawai not expecting

144
00:10:01,780 --> 00:10:04,080
you to type this or follow this exactly.

145
00:10:04,430 --> 00:10:12,700
But if I pace that you are here this giant you are l This is the API for Yahoo weather that will give

146
00:10:12,700 --> 00:10:14,070
me sunset time.

147
00:10:14,070 --> 00:10:15,270
Let's see if it worked.

148
00:10:16,060 --> 00:10:19,130
And did we have that information back.

149
00:10:19,750 --> 00:10:20,260
Awesome.

150
00:10:20,380 --> 00:10:22,220
So I'm actually going to get rid of that for a second.

151
00:10:22,420 --> 00:10:25,690
Now let's take a look at if I change some things.

152
00:10:25,720 --> 00:10:28,960
So what if my request HTP colon slash size.

153
00:10:28,980 --> 00:10:42,040
I mean I don't Google and a bunch of random stuff dotcom and I save the file and I make a request I

154
00:10:42,040 --> 00:10:43,870
get something went wrong.

155
00:10:43,900 --> 00:10:45,850
So that means we've got an error.

156
00:10:46,570 --> 00:10:53,500
And on top of that the error itself has some information from Consta that log error the error is not

157
00:10:53,500 --> 00:10:54,320
found.

158
00:10:54,730 --> 00:10:56,370
So our page wasn't found.

159
00:10:56,710 --> 00:11:03,510
So that's the use of the checking for the error is you can make sure that the request worked.

160
00:11:03,670 --> 00:11:06,610
So if we didn't we just automatically handled it.

161
00:11:06,670 --> 00:11:11,640
And in this case already is printing the body but let's say we're saving data to the database.

162
00:11:11,680 --> 00:11:16,060
We want to make sure that we got the data first and at the request worked and we didn't make it to the

163
00:11:16,060 --> 00:11:19,330
wrong place or that you know something went wrong.

164
00:11:19,870 --> 00:11:23,170
But we can simplify this all as you can see up here.

165
00:11:23,260 --> 00:11:27,880
This is the shortened version where you just have one if statement checks for both of those at the same

166
00:11:27,880 --> 00:11:29,740
time.

167
00:11:29,740 --> 00:11:35,910
All right so that's how we make a request from node using this request library or request package.

168
00:11:35,920 --> 00:11:40,230
Very simple in the sense that it's pretty much always going to be the same.

169
00:11:40,420 --> 00:11:46,390
You're just going to require requests and then you're going to add that you are Elen that your request

170
00:11:46,960 --> 00:11:51,050
and will change us back to just Google dot com.

171
00:11:51,250 --> 00:11:53,720
Then you have your callback function.

172
00:11:53,830 --> 00:11:59,950
Three pieces of information check for an error check for the status code and the response and then do

173
00:11:59,950 --> 00:12:01,430
something with the body.

174
00:12:01,510 --> 00:12:06,670
Usually you don't just print it out but this is where we would do something with it is if there's no

175
00:12:06,670 --> 00:12:09,120
error and status code is 200.

176
00:12:09,190 --> 00:12:12,790
So I know it's a lot but it's kind of a recipe you can follow.

177
00:12:13,120 --> 00:12:13,620
OK.

178
00:12:13,750 --> 00:12:18,800
So in the next video we're going to explore a little bit more with API is actually request to Jason

179
00:12:18,820 --> 00:12:21,260
API and do something with it.

180
00:12:21,310 --> 00:12:21,780
Great.