0
1
00:00:02,870 --> 00:00:09,750
Welcome back to BackSpace Academy. In
this second lab on the API gateway we're
1

2
00:00:09,750 --> 00:00:14,099
going to look at creating a real
application a JavaScript application
2

3
00:00:14,099 --> 00:00:20,430
that will be hosted using Amazon s3 and
it will use the API gateway to create a
3

4
00:00:20,430 --> 00:00:27,870
dynamic component to that static website
now before we start using the API
4

5
00:00:27,870 --> 00:00:33,059
gateway within our application we need
to make sure that cause or cross-origin
5

6
00:00:33,059 --> 00:00:38,670
resource sharing has been enabled the
reason being is that they the API domain
6

7
00:00:38,670 --> 00:00:42,900
will be different to the domain that our
static website will be running on so we
7

8
00:00:42,900 --> 00:00:46,890
need to make sure that that is allowed
so the way that we do that is we go to
8

9
00:00:46,890 --> 00:00:55,800
resources and then we go to actions and
then we enable cause and we just click
9

10
00:00:55,800 --> 00:01:06,390
on enable cause I mean we just replaced
those and now we're ready to start
10

11
00:01:06,390 --> 00:01:13,740
writing our application now to make life
easier for you I've created a github
11

12
00:01:13,740 --> 00:01:22,710
repository that contains a template for
using Amazon API gateway with s3 hosted
12

13
00:01:22,710 --> 00:01:27,510
websites so you just go to the the link
that is there in the lab notes and
13

14
00:01:27,510 --> 00:01:31,140
you'll get you'll get to this page so
what you need to do is you need to
14

15
00:01:31,140 --> 00:01:41,490
download that zip file and unzip it and
then open up the app.js application ok
15

16
00:01:41,490 --> 00:01:46,170
so now that I've downloaded that zip
file I've extracted it and I've gone
16

17
00:01:46,170 --> 00:01:52,920
into the js folder and I've opened up
app.js which will contain the application
17

18
00:01:52,920 --> 00:01:57,570
code in JavaScript, it's a very simple
applications only 30 lines of code so
18

19
00:01:57,570 --> 00:02:00,659
the first thing we've got there is a
click event listener so when someone
19

20
00:02:00,659 --> 00:02:07,500
clicks on the button on the form that
will invoke our get pet function and so
20

21
00:02:07,500 --> 00:02:11,910
our "get pet" function will send that
request off to our off to our REST API
21

22
00:02:11,910 --> 00:02:15,360
that we've created him so the first
thing we need to do is we need to put
22

23
00:02:15,360 --> 00:02:17,910
our
API endpoint because yours will be
23

24
00:02:17,910 --> 00:02:22,920
definitely different to that so we go
back to the management console and we
24

25
00:02:22,920 --> 00:02:30,000
rare in stages so we don't want to go to
demo we want to go a bit further down to
25

26
00:02:30,000 --> 00:02:35,370
get for pets and that will give us the
end point with pets on the end of it so
26

27
00:02:35,370 --> 00:02:46,620
what I'm going to do is just copy that
over and paste that in and there we can
27

28
00:02:46,620 --> 00:02:51,330
see it's going to have our end point
with slash pets and we also need to put
28

29
00:02:51,330 --> 00:02:54,870
another forward slash on the end of it
so to look like that so it'll be our end
29

30
00:02:54,870 --> 00:03:01,739
point forward slash pets and then
another forward slash on the end of it so
30

31
00:03:01,739 --> 00:03:05,910
then what we're going to do is that the
application is going to get the pet ID
31

32
00:03:05,910 --> 00:03:09,630
that we input into an input box here
it's going to check that the numbers
32

33
00:03:09,630 --> 00:03:14,250
okay between 1 and 3 if everything is ok
then it's going to send that request off
33

34
00:03:14,250 --> 00:03:21,239
and so the API request will be at that
end point there plus the pet ID so if
34

35
00:03:21,239 --> 00:03:27,630
we're looking for a pet number 2 it'll
be that plus 2 on the end of it so then
35

36
00:03:27,630 --> 00:03:36,480
we do a jQuery a get command and that
will go to do a HTTP get request to that
36

37
00:03:36,480 --> 00:03:41,190
API endpoint and there will be a
callback function there that will return
37

38
00:03:41,190 --> 00:03:47,760
the data and the status of that request
so if the status was 200 it will come
38

39
00:03:47,760 --> 00:03:54,660
back with status ok and austat set a
success and then it will on the next
39

40
00:03:54,660 --> 00:04:00,180
line it will put the type which will be
cat dog fish whatever and then it'll put
40

41
00:04:00,180 --> 00:04:05,130
the price which will be whatever the
price is and that's all it does and
41

42
00:04:05,130 --> 00:04:09,030
that's what we need to do so we'll just
save that now that it's got our new
42

43
00:04:09,030 --> 00:04:13,290
endpoint in and now we need to upload it
all to Amazon s3 and create a static
43

44
00:04:13,290 --> 00:04:21,389
website ok so just back it in the AWS
management console let's open up the s3
44

45
00:04:21,389 --> 00:04:25,020
management console and we're just going
to do that in a new tab to keep the API
45

46
00:04:25,020 --> 00:04:29,909
gateway still there, so the first thing
we need to do is to create a bucket we
46

47
00:04:29,909 --> 00:04:33,600
just
that whatever we want we'll leave
47

48
00:04:33,600 --> 00:04:39,900
everything else as it is and click on
next we'll leave that and we will create
48

49
00:04:39,900 --> 00:04:51,000
a public permission to this, we click on
next and create that bucket, ok so that
49

50
00:04:51,000 --> 00:04:56,810
buckets been created what we need to do
now is upload our files
50

51
00:05:04,490 --> 00:05:11,810
and we just go on next and again we want
to have public access to this and next
51

52
00:05:11,810 --> 00:05:21,030
and next and upload and again we need to
go to properties and static website
52

53
00:05:21,030 --> 00:05:31,050
hosting and we'll enable that or put in
our index.html and we click on save it's
53

54
00:05:31,050 --> 00:05:35,060
just going to go back to that and just
going to open up that endpoint for the
54

55
00:05:35,060 --> 00:05:40,560
website to make sure it's working okay
so there we go so we've got our website
55

56
00:05:40,560 --> 00:05:44,550
up and running very quickly so this
should be on our racer that very quickly
56

57
00:05:44,550 --> 00:05:48,960
but again this should be very much old
hat to you if not going back to section
57

58
00:05:48,960 --> 00:05:55,290
two of the course and redo it so here is
our get pet button that we press that
58

59
00:05:55,290 --> 00:06:01,140
will invoke that get pet function and
what it will do is it will read the pet
59

60
00:06:01,140 --> 00:06:06,240
ID that we put in here and just say we
put in one and it will return the JSON
60

61
00:06:06,240 --> 00:06:13,530
details for that, so let's have a look at
it's put in ID one and get pet , 
61

62
00:06:13,530 --> 00:06:20,160
Ok so that's done that very quickly it's
gone to the API and it's had a status of
62

63
00:06:20,160 --> 00:06:26,820
success and it's returned the dog type
and the price being $249 which is
63

64
00:06:26,820 --> 00:06:31,110
exactly what we would have expected
let's try something different so we'll
64

65
00:06:31,110 --> 00:06:40,380
put in three and that should return a
fish look at that a $0.99 fish and the
65

66
00:06:40,380 --> 00:06:48,090
status of that request was success or a
two hundred code was returned so what
66

67
00:06:48,090 --> 00:06:54,330
we've done we've created an API using
the API gateway and we've also created
67

68
00:06:54,330 --> 00:06:59,400
an application using a static website
that communicates with our API and
68

69
00:06:59,400 --> 00:07:07,080
provides dynamic capability for a static
website so you now fully understand API
69

70
00:07:07,080 --> 00:07:11,660
gateway and I'll see you in the next one