1
00:00:00,481 --> 00:00:02,541
- [Jose] Hi, and welcome back to the course.

2
00:00:02,541 --> 00:00:04,566
In this video, we're
quickly going to go over

3
00:00:04,566 --> 00:00:08,697
how you might call the API
from within Javascript.

4
00:00:08,697 --> 00:00:11,217
In the Resources section for this lecture

5
00:00:11,217 --> 00:00:13,456
you've got an HTML file
that you can download.

6
00:00:13,456 --> 00:00:14,786
That should be somewhere at the top left

7
00:00:14,786 --> 00:00:17,261
of your video player.

8
00:00:17,261 --> 00:00:20,401
All I want you to do is
download that HTML file,

9
00:00:20,401 --> 00:00:24,568
create a templates folder,
and put the HTML file in it.

10
00:00:25,444 --> 00:00:26,929
It's very important that your folder

11
00:00:26,929 --> 00:00:28,669
is called templates, because that's what

12
00:00:28,669 --> 00:00:31,236
Flask is going to look for.

13
00:00:31,236 --> 00:00:33,600
The HTML file looks like this,

14
00:00:33,600 --> 00:00:37,600
and all it really does
is call the API endpoint.

15
00:00:38,856 --> 00:00:40,726
So we've got a HTML code,

16
00:00:40,726 --> 00:00:44,115
which looks like these
opening and closing tags.

17
00:00:44,115 --> 00:00:45,897
This is an opening tag,

18
00:00:45,897 --> 00:00:47,265
and this is a closing tag,

19
00:00:47,265 --> 00:00:49,264
with the forward slash in front.

20
00:00:49,264 --> 00:00:52,264
It's got a head tag, and a body tag.

21
00:00:53,370 --> 00:00:55,829
The body is what we show our users,

22
00:00:55,829 --> 00:00:58,231
and the head has some scripts and things

23
00:00:58,231 --> 00:00:59,221
that we want to run,

24
00:00:59,221 --> 00:01:01,177
but we don't want to show our users.

25
00:01:01,177 --> 00:01:04,646
In the head, we put a JavaScript script,

26
00:01:04,646 --> 00:01:07,166
and there is a function.

27
00:01:07,166 --> 00:01:11,130
This function calls a
URL using a GET request,

28
00:01:11,130 --> 00:01:13,901
and then when it's done,
it calls something else

29
00:01:13,901 --> 00:01:15,850
that we define.

30
00:01:15,850 --> 00:01:17,256
This is not a JavaScript course,

31
00:01:17,256 --> 00:01:20,111
so apologies for the
lack of detail in this,

32
00:01:20,111 --> 00:01:21,769
but I just wanted to show you

33
00:01:21,769 --> 00:01:24,047
that you can call your
API from JavaScript,

34
00:01:24,047 --> 00:01:26,493
and that it's really useful for web APIs,

35
00:01:26,493 --> 00:01:29,811
for web applications,
and things like that.

36
00:01:29,811 --> 00:01:31,351
And also, now that we're here,

37
00:01:31,351 --> 00:01:33,953
I'll also show you how
you can render HTML code

38
00:01:33,953 --> 00:01:36,438
from within your Flask application.

39
00:01:36,438 --> 00:01:38,746
That's not something
that you would want to do

40
00:01:38,746 --> 00:01:40,622
from a REST API.

41
00:01:40,622 --> 00:01:42,282
But it's something that you do want to do

42
00:01:42,282 --> 00:01:45,006
if you want to create a
Flask web application,

43
00:01:45,006 --> 00:01:47,702
as opposed to a web API.

44
00:01:47,702 --> 00:01:48,870
The first thing we have to do,

45
00:01:48,870 --> 00:01:53,249
is to go to Flask and
import 'render_template',

46
00:01:53,249 --> 00:01:55,146
as well as the other things.

47
00:01:55,146 --> 00:01:58,405
And then we're going to
create another endpoint,

48
00:01:58,405 --> 00:02:01,405
such as the 'home',
that is going to return

49
00:02:01,405 --> 00:02:04,238
a render_template of 'index.html'.

50
00:02:05,770 --> 00:02:09,112
Flask automatically looks
into the templates folder,

51
00:02:09,112 --> 00:02:13,195
so this index.html is
going to be this file here.

52
00:02:14,815 --> 00:02:17,509
Okay, so when we render the template,

53
00:02:17,509 --> 00:02:20,614
all we're going to see is
the words 'Hello, world!',

54
00:02:20,614 --> 00:02:23,627
because they are inside this div.

55
00:02:23,627 --> 00:02:25,859
And a div is just an HTML element

56
00:02:25,859 --> 00:02:27,684
that contains other elements.

57
00:02:27,684 --> 00:02:30,791
In this case, it contains some text.

58
00:02:30,791 --> 00:02:33,634
Although this JavaScript
function is defined,

59
00:02:33,634 --> 00:02:35,293
it's never going to run,

60
00:02:35,293 --> 00:02:36,955
because we're not actually running it.

61
00:02:36,955 --> 00:02:38,235
The same way as in Python,

62
00:02:38,235 --> 00:02:39,810
defining a function doesn't run it,

63
00:02:39,810 --> 00:02:41,145
in JavaScript defining a function

64
00:02:41,145 --> 00:02:43,661
doesn't run it either.

65
00:02:43,661 --> 00:02:45,067
So what we're going to do is,

66
00:02:45,067 --> 00:02:47,400
we're going to run this app,

67
00:02:48,909 --> 00:02:51,675
and we're going to go
to the root of the app,

68
00:02:51,675 --> 00:02:53,294
and we're going to see the words,

69
00:02:53,294 --> 00:02:55,852
'Hello, world!', come out.

70
00:02:55,852 --> 00:02:59,005
So let's go over to our terminal,

71
00:02:59,005 --> 00:03:01,620
and do 'python3.5 app.py'.

72
00:03:01,620 --> 00:03:05,399
Remember, you have to be in
the correct folder to do this.

73
00:03:05,399 --> 00:03:07,674
And then your app will start running.

74
00:03:07,674 --> 00:03:10,747
So copy that, go over to Google Chrome,

75
00:03:10,747 --> 00:03:12,987
paste it in here,

76
00:03:12,987 --> 00:03:15,598
and what we get is 'Hello, world!'.

77
00:03:15,598 --> 00:03:19,048
Remember, we're accessing
the root endpoint,

78
00:03:19,048 --> 00:03:21,043
but we can still access the store endpoint

79
00:03:21,043 --> 00:03:25,062
if we want, and it still
returns our json code.

80
00:03:25,062 --> 00:03:27,457
What we're returning
here is the JavaScript

81
00:03:27,457 --> 00:03:28,624
and HTML code.

82
00:03:30,606 --> 00:03:32,433
However, remember we've not called

83
00:03:32,433 --> 00:03:35,374
the Javascript function which
creates the GET request,

84
00:03:35,374 --> 00:03:36,865
so that's something that we should do.

85
00:03:36,865 --> 00:03:38,605
So let's do that now.

86
00:03:38,605 --> 00:03:42,501
Below the function, say 'httpGetAsync',

87
00:03:42,501 --> 00:03:45,668
and then the URL that we want to call,

88
00:03:46,600 --> 00:03:48,709
and finally a callback function.

89
00:03:48,709 --> 00:03:51,395
So a function that is
going to get executed

90
00:03:51,395 --> 00:03:53,472
once the request is successful.

91
00:03:53,472 --> 00:03:55,430
This is very similar to passing functions

92
00:03:55,430 --> 00:03:57,347
to functions in Python.

93
00:04:00,693 --> 00:04:03,421
So what we're going to do here

94
00:04:03,421 --> 00:04:04,254
is this.

95
00:04:05,205 --> 00:04:08,100
The function callback also receives

96
00:04:08,100 --> 00:04:09,850
the response content.

97
00:04:10,953 --> 00:04:14,141
So that will be some JSON string.

98
00:04:14,141 --> 00:04:15,465
And what we're going
to do in this function,

99
00:04:15,465 --> 00:04:17,073
is we're just going to throw an alert

100
00:04:17,073 --> 00:04:18,605
with the response.

101
00:04:18,605 --> 00:04:20,845
Okay, let's go over to the terminal,

102
00:04:20,845 --> 00:04:23,525
stop this using Control
+ C and restart it,

103
00:04:23,525 --> 00:04:26,833
and then go over to Chrome
and refresh the page.

104
00:04:26,833 --> 00:04:29,916
What do you think is going to happen?

105
00:04:32,904 --> 00:04:34,821
We get our alert.

106
00:04:34,821 --> 00:04:38,394
And this alert contains the JSON content,

107
00:04:38,394 --> 00:04:42,519
essentially the string
with this data here.

108
00:04:42,519 --> 00:04:44,337
There are many other thing we could do

109
00:04:44,337 --> 00:04:46,456
from JavaScript at this point.

110
00:04:46,456 --> 00:04:49,202
We could, for example, go more in depth,

111
00:04:49,202 --> 00:04:51,932
and create an element for each store.

112
00:04:51,932 --> 00:04:54,411
Maybe have a list of the
items that it contains.

113
00:04:54,411 --> 00:04:56,183
We could do more interactive things,

114
00:04:56,183 --> 00:04:57,884
like be able to click on a store

115
00:04:57,884 --> 00:04:59,957
to retrieve the items, and so on.

116
00:04:59,957 --> 00:05:02,018
There's loads of things that we could do.

117
00:05:02,018 --> 00:05:03,884
But the key point here

118
00:05:03,884 --> 00:05:06,354
is that I wanted to show you how

119
00:05:06,354 --> 00:05:09,706
JavaScript and the API work together.

120
00:05:09,706 --> 00:05:13,589
JavaScript always has to call your API

121
00:05:13,589 --> 00:05:15,492
using some code like this.

122
00:05:15,492 --> 00:05:17,276
In other cases you can use, for example,

123
00:05:17,276 --> 00:05:20,092
AngularJS, or you can use jQuery.

124
00:05:20,092 --> 00:05:21,427
There's a bunch of JavaScript libraries

125
00:05:21,427 --> 00:05:23,408
that can do this for you.

126
00:05:23,408 --> 00:05:27,213
But JavaScript is always
running on the browser,

127
00:05:27,213 --> 00:05:31,603
and it has to call your API
to retrieve data from it,

128
00:05:31,603 --> 00:05:35,178
so that it can then
show it on the website.

129
00:05:35,178 --> 00:05:39,187
So Python doesn't really
know about the website

130
00:05:39,187 --> 00:05:40,480
in the same way that JavaScript

131
00:05:40,480 --> 00:05:42,502
doesn't know about the Python code.

132
00:05:42,502 --> 00:05:45,470
But they talk to each other via our API,

133
00:05:45,470 --> 00:05:47,220
by passing JSON code.

134
00:05:48,417 --> 00:05:50,323
Again, this is not a JavaScript course,

135
00:05:50,323 --> 00:05:53,844
so for more information
I'd advise you go to

136
00:05:53,844 --> 00:05:57,158
a JavaScript web application
development course.

137
00:05:57,158 --> 00:05:59,426
I have one of those,

138
00:05:59,426 --> 00:06:01,425
but there are also many others in Udemy,

139
00:06:01,425 --> 00:06:03,159
and elsewhere in the internet,

140
00:06:03,159 --> 00:06:05,640
that talk about this stuff.

141
00:06:05,640 --> 00:06:09,034
This was a simple tutorial on how

142
00:06:09,034 --> 00:06:12,050
the JavaScript and Python code interact,

143
00:06:12,050 --> 00:06:13,135
but there are many other things

144
00:06:13,135 --> 00:06:14,170
that you can do with JavaScript,

145
00:06:14,170 --> 00:06:16,693
so don't feel limited
to displaying alerts.

146
00:06:16,693 --> 00:06:18,968
There's many, many more things you can do.

147
00:06:18,968 --> 00:06:20,164
And indeed the point of JavaScript

148
00:06:20,164 --> 00:06:22,914
is to make websites more dynamic.

149
00:06:23,841 --> 00:06:26,039
So that's it for this video.

150
00:06:26,039 --> 00:06:28,068
And we've not tested the API, really.

151
00:06:28,068 --> 00:06:30,639
We've only shown you how it works,

152
00:06:30,639 --> 00:06:32,634
and in the next video
we're going to actually

153
00:06:32,634 --> 00:06:35,368
test the API properly and professionally,

154
00:06:35,368 --> 00:06:37,889
using an API testing tool.

155
00:06:37,889 --> 00:06:39,449
So I'll see you there.