1
00:00:00,540 --> 00:00:06,840
In this lesson, we are going to be creating mini up that's going to be connecting to a weather forecast

2
00:00:06,840 --> 00:00:12,990
standpoint and there are some limits that we can only do 50 per every 60 minutes.

3
00:00:13,260 --> 00:00:19,380
And this is something to be keep in mind as you're making connections and also doing some troubleshooting

4
00:00:19,380 --> 00:00:23,950
with some of the core issues that we might experience when connecting to end points.

5
00:00:24,270 --> 00:00:32,670
So just using the sample data from the weather API, we're going to loop through the weather API and

6
00:00:32,670 --> 00:00:36,330
pick up some of the sample content that we can output onto the page.

7
00:00:36,540 --> 00:00:41,670
And then using the data from the page, we're going to display some of that content and provide more

8
00:00:41,670 --> 00:00:48,200
options and make additional Thach requests to the endpoints that are coming in from the API itself.

9
00:00:48,480 --> 00:00:50,730
So that's all coming up in this lesson.

10
00:00:51,630 --> 00:00:58,170
So I prepared the HTML file and we've got our basic HTML structure that we've used the same as another

11
00:00:58,170 --> 00:00:58,650
lessons.

12
00:00:58,860 --> 00:01:07,170
And I'm linking to up six charts, cleaned out the J.S. file, selecting only the elements on the page

13
00:01:07,410 --> 00:01:12,360
as objects and then also adding the button text and then adding an event listener.

14
00:01:12,370 --> 00:01:13,770
So the button is clicked.

15
00:01:13,920 --> 00:01:15,270
We get ready in the console.

16
00:01:15,550 --> 00:01:20,270
So that means that we're ready to try out some more APIs and connections to the various APIs.

17
00:01:20,640 --> 00:01:24,990
So going over to sample start open weather map, dawg.

18
00:01:25,200 --> 00:01:29,420
We see we get some content being returned here as a little bit hard to read.

19
00:01:29,430 --> 00:01:34,280
There's a lot of data here and this is giving us some sample API that we can connect to.

20
00:01:34,590 --> 00:01:44,850
So ideally, we want to use this new URL and connect to this and put it on the page so that we can easier

21
00:01:44,850 --> 00:01:51,780
read the content as an object and then get the contents of that object and make use of it within the

22
00:01:51,780 --> 00:01:52,730
Web application.

23
00:01:53,070 --> 00:01:57,870
So let's make our Futch request and create a function.

24
00:02:00,120 --> 00:02:01,890
I just call it get values.

25
00:02:01,890 --> 00:02:06,210
It's going to require a euro parameter and I'll just call this.

26
00:02:06,210 --> 00:02:10,680
You are a one so that we can pass and you are a real one and to get values.

27
00:02:11,280 --> 00:02:19,860
And right now we can use fetch to the euro.

28
00:02:22,090 --> 00:02:30,550
And making the promise, getting the response and then returning the response back as a response and

29
00:02:30,820 --> 00:02:42,580
in Jason structure, then getting the data and as we get the data back, we want to put the data into

30
00:02:42,580 --> 00:02:43,210
the console.

31
00:02:47,870 --> 00:02:55,820
So it looks like we've run into a course error, we're not able to make the request using the local

32
00:02:55,820 --> 00:02:59,270
address, so it's been blocked by the courts policy.

33
00:02:59,610 --> 00:03:03,530
And as we saw in the last lesson, that course comes up fairly often.

34
00:03:03,530 --> 00:03:09,500
And this is something that you can't control because it's at the endpoint and it's some of the restrictions

35
00:03:09,500 --> 00:03:11,650
that are added in from the endpoint.

36
00:03:12,020 --> 00:03:17,430
So let's try it with cource anywhere and add that in.

37
00:03:17,450 --> 00:03:18,200
I just called this.

38
00:03:18,200 --> 00:03:18,950
You are, too.

39
00:03:19,460 --> 00:03:26,150
And this is where the course anywhere can be located and then add in and we'll concatenate to you or

40
00:03:26,150 --> 00:03:26,900
else together.

41
00:03:29,220 --> 00:03:30,780
And see what happens now.

42
00:03:32,310 --> 00:03:36,480
So now we made the request and we were able to access the endpoint.

43
00:03:36,900 --> 00:03:44,940
So on this particular open weather map, Doug, if you do want to do some testing from a local, then

44
00:03:44,940 --> 00:03:49,330
you should be using that course anywhere, which gives you access to the API.

45
00:03:49,710 --> 00:03:56,580
So now we're able to return the content and we've got the products, listings, the samples, the name

46
00:03:56,580 --> 00:04:02,750
is samples and we've got the various products and then documentation on these products.

47
00:04:03,510 --> 00:04:06,860
So docs and then it's got a number of sample arrays.

48
00:04:07,110 --> 00:04:15,240
So if you want to get the forecast for five days, let's see if we can access that data within the products.

49
00:04:17,580 --> 00:04:20,060
And I'm going to just do that within the console.

50
00:04:20,250 --> 00:04:22,800
And as we click it, we're going to build down.

51
00:04:22,950 --> 00:04:27,060
And till we get to the content that we want to loop through that we want to iterate through.

52
00:04:27,600 --> 00:04:37,350
So forecast for five days, take that property name and other products forecast five days as the property

53
00:04:37,350 --> 00:04:38,550
name that we want to access.

54
00:04:39,120 --> 00:04:44,660
And then within the samples, this is where we've got access to the sample you URLs.

55
00:04:45,180 --> 00:04:52,110
So that means that we're ready to loop through that and let's create another function that we can handle

56
00:04:52,110 --> 00:04:53,470
the making of it.

57
00:04:53,910 --> 00:04:56,550
So just give it the name of data and we'll call it.

58
00:04:56,550 --> 00:05:00,930
So log the data object out and then from the function.

59
00:05:01,140 --> 00:05:07,220
Then at that point, then we can start to look to see the content and output it on the page.

60
00:05:07,620 --> 00:05:15,480
So we've made the console data and getting the content and now we can take data samples.

61
00:05:18,000 --> 00:05:20,250
And loop through for each.

62
00:05:23,310 --> 00:05:32,220
And return back to the elements and let's lock logout each one of the elements that are contained within

63
00:05:32,220 --> 00:05:32,910
this object.

64
00:05:33,930 --> 00:05:43,290
And so what it has is it's got just you, Earles, and then these URLs are returning back additional

65
00:05:44,100 --> 00:05:44,500
data.

66
00:05:44,610 --> 00:05:49,590
So we want to make requests to the Urals and output the results.

67
00:05:52,840 --> 00:05:53,530
Into.

68
00:05:56,620 --> 00:06:02,020
Our Web page, so these are just different end points that we can make such requests to.

69
00:06:09,860 --> 00:06:13,760
And let's also take a look at what we've got at Document Dock's.

70
00:06:15,780 --> 00:06:18,510
And, well, output the data dock's.

71
00:06:22,590 --> 00:06:27,480
And that as well is going to be a document you, Earl, that if we open that up.

72
00:06:30,250 --> 00:06:32,890
It provides us some additional details.

73
00:06:34,360 --> 00:06:37,720
That we can get and we can make the requests to.

74
00:06:38,920 --> 00:06:45,340
So this is just documentation on the open weather API and this is another one of those where you are

75
00:06:45,340 --> 00:06:53,170
going to need to have an API key to work fully within the Web application, within the API to make proper

76
00:06:53,170 --> 00:06:53,620
calls.

77
00:06:55,040 --> 00:07:00,650
It gives you some information about the required field, so the query is required, the APD is required.

78
00:07:02,850 --> 00:07:11,430
And here they've got a sample app ID and also a query for it, so an ID and an app I.D. for the forecast.

79
00:07:12,720 --> 00:07:15,720
So those are the required fields.

80
00:07:19,460 --> 00:07:25,250
And Jason, in this case is a default, and that's why we're seeing the content being sent back.

81
00:07:25,250 --> 00:07:32,450
And Jason, so what we want to do is as we iterate through, we want to make another fetch request to

82
00:07:32,450 --> 00:07:33,260
that content.

83
00:07:34,010 --> 00:07:36,570
So function get more.

84
00:07:37,340 --> 00:07:40,390
And this is going to be as well passing in the euro.

85
00:07:41,300 --> 00:07:44,120
And from here, we're going to make a feature request.

86
00:07:46,420 --> 00:07:53,800
So you can come at the structure for the Futch request and in this case, we'll do a console log of

87
00:07:53,800 --> 00:07:54,640
the data.

88
00:08:01,990 --> 00:08:03,430
And as we loop through.

89
00:08:07,890 --> 00:08:14,580
And again, we've run into the course error, so let's solve that by doing the same thing that we did

90
00:08:14,580 --> 00:08:24,090
before, where we're going to be attending the URL to the Eurail to so making a fetch request to you

91
00:08:24,090 --> 00:08:24,870
URL to.

92
00:08:25,050 --> 00:08:28,350
And so that way we can make the Thach request.

93
00:08:32,610 --> 00:08:39,960
And here we've got the city information, so once we get the response information back, we can output.

94
00:08:42,500 --> 00:08:45,620
This content onto the page within the output area.

95
00:08:46,700 --> 00:08:55,850
So let's finalize that where as we loop through, we've got these new objects and from these objects,

96
00:08:55,850 --> 00:08:58,690
we want to output the the page content.

97
00:08:59,390 --> 00:09:03,530
So the name the county and the coordinates of that location.

98
00:09:06,300 --> 00:09:12,630
So function and we just double check and make sure I didn't use our already.

99
00:09:15,690 --> 00:09:21,480
And this would just get data and from here we'll just cancel, logout the data that we've got to work

100
00:09:21,480 --> 00:09:21,720
with.

101
00:09:24,010 --> 00:09:28,240
And instead of logging, adults will log it out to the outer.

102
00:09:33,180 --> 00:09:35,880
And I'll get rid of some of the excess console messages.

103
00:09:38,280 --> 00:09:41,970
So that we only getting the final data that we actually want to output and use on the page.

104
00:09:44,250 --> 00:09:48,570
It looks like one of them isn't structured properly, that's what it looks like, we're throwing an

105
00:09:48,570 --> 00:09:50,910
error there, so we're just going to ignore that.

106
00:09:50,910 --> 00:09:54,810
And if you were creating the application, then.

107
00:10:00,150 --> 00:10:06,560
You would want to be using an actual API key and then making the connection to get the proper data,

108
00:10:06,570 --> 00:10:11,310
and if you do have any types of issues like this, then you'd have to troubleshoot it and find out why

109
00:10:11,550 --> 00:10:12,900
there's such an error.

110
00:10:13,020 --> 00:10:15,000
And this is a decent structure error.

111
00:10:15,330 --> 00:10:17,790
So that's what we've encountered before as well.

112
00:10:18,750 --> 00:10:21,510
So once we're outputting the data.

113
00:10:24,140 --> 00:10:30,620
Let's first put the city and create the city contents with the coordinates.

114
00:10:32,980 --> 00:10:41,230
So constructing and creating a main parent div using the documents creates elements and the element

115
00:10:41,230 --> 00:10:49,840
that we're creating is going to be a div and then using output and append the div to the output and

116
00:10:49,840 --> 00:10:54,050
within the div, the inner html and template literal.

117
00:10:54,080 --> 00:10:55,260
So those are the biotech's.

118
00:10:56,200 --> 00:11:03,370
Let's select the data for the city information and I'll create another object that's going to reference

119
00:11:03,370 --> 00:11:05,380
the data and city.

120
00:11:06,040 --> 00:11:10,910
So it's just easier when I'm coding to access that information.

121
00:11:11,260 --> 00:11:12,670
So for the city.

122
00:11:15,380 --> 00:11:17,810
And use the curly brackets city.

123
00:11:20,540 --> 00:11:26,000
And I'm trying to output the city and other city, we've got a name.

124
00:11:29,110 --> 00:11:39,850
And we can also add in the country code, so that's under a country, it's a city country, we can also

125
00:11:40,180 --> 00:11:41,980
go deeper and get the coordinates.

126
00:11:47,190 --> 00:11:55,740
So that's city and that's an object within, so get the coordinates and within here, there's a latitude

127
00:11:55,740 --> 00:11:57,780
and longitude so that.

128
00:12:02,160 --> 00:12:03,390
And longitude.

129
00:12:09,510 --> 00:12:16,920
So that puts that information onto the page, so it's throwing an error that there's been too many requests

130
00:12:17,280 --> 00:12:24,700
from the Hiroku up and point and doesn't look like I'm able to get any additional information.

131
00:12:25,380 --> 00:12:28,530
So this is essentially what you can do.

132
00:12:28,530 --> 00:12:31,380
And it is a really good practice appx.

133
00:12:31,560 --> 00:12:37,800
And this is one of the disadvantages of actually just using the practice API, where we're not able

134
00:12:37,800 --> 00:12:41,010
to make as many requests as we want.

135
00:12:41,460 --> 00:12:47,790
And Cruz is actually one of the most common questions that I get when making requests to Paris and points.

136
00:12:48,360 --> 00:12:51,540
So if you do want to find out more information about how Kurs works.

137
00:12:53,120 --> 00:12:58,790
It's short for crosswords and resource sharing, there's more information at the Mozilla developer network

138
00:12:59,150 --> 00:13:05,720
and basically it's had a base mechanism that allows you to serve, indicate any other origins from the

139
00:13:05,720 --> 00:13:06,380
domain name.

140
00:13:06,620 --> 00:13:15,110
So it allows us to do a cross origin request and it served from this uses the X X Amelle HTP request

141
00:13:15,110 --> 00:13:17,540
object to request to this end point.

142
00:13:17,810 --> 00:13:23,950
And for security reasons, there are restrictions on from browsers for cross origin requests.

143
00:13:24,290 --> 00:13:29,120
So this is again not sitting on the server depending on what their headers are set to.

144
00:13:29,270 --> 00:13:35,150
And in this case, what we saw is that there are certain limits to making requests from certain endpoints

145
00:13:35,810 --> 00:13:37,630
from certain certain websites.

146
00:13:38,180 --> 00:13:43,760
So there are some limitations to how many requests can be made and there's more information about how

147
00:13:43,760 --> 00:13:45,250
the CRS will work.

148
00:13:47,130 --> 00:13:52,350
And when we are making the request, essentially, we're making the requests from the client going over

149
00:13:52,350 --> 00:13:58,140
to the server, so the Web application is acting the same way as a Web browser where we're going over

150
00:13:58,140 --> 00:14:03,800
to the website and we're getting the content that the server is providing at that particular point.

151
00:14:05,490 --> 00:14:10,770
And this is also a common security feature for the post requests, which we are going to be looking

152
00:14:10,770 --> 00:14:12,640
at in more detail later on.

153
00:14:14,010 --> 00:14:19,860
There's a number of other additional proxies that you can use in order to make the requests or you can

154
00:14:19,860 --> 00:14:26,460
upload it to a website, and that will change where the client site is making the request to the end

155
00:14:26,520 --> 00:14:26,970
point.

156
00:14:27,120 --> 00:14:31,460
And that will also provide you some more options in order to make those requests.

157
00:14:32,550 --> 00:14:35,280
Challenge for this lesson is to connect to the end point.

158
00:14:35,500 --> 00:14:43,080
Also try when you're developing locally to try out with proxy in order to connect to the endpoint.

159
00:14:43,090 --> 00:14:48,210
So it's not coming from a local machine and then output the JSON data onto the webpage.