Welcome back to BackSpace Academy. In this second lab on the API gateway we're 1
going to look at creating a real application a JavaScript application 2
that will be hosted using Amazon s3 and it will use the API gateway to create a 3
dynamic component to that static website now before we start using the API 4
gateway within our application we need to make sure that cause or cross-origin 5
resource sharing has been enabled the reason being is that they the API domain 6
will be different to the domain that our static website will be running on so we 7
need to make sure that that is allowed so the way that we do that is we go to 8
resources and then we go to actions and then we enable cause and we just click 9
on enable cause I mean we just replaced those and now we're ready to start 10
writing our application now to make life easier for you I've created a github 11
repository that contains a template for using Amazon API gateway with s3 hosted 12
websites so you just go to the the link that is there in the lab notes and 13
you'll get you'll get to this page so what you need to do is you need to 14
download that zip file and unzip it and then open up the app.js application ok 15
so now that I've downloaded that zip file I've extracted it and I've gone 16
into the js folder and I've opened up app.js which will contain the application 17
code in JavaScript, it's a very simple applications only 30 lines of code so 18
the first thing we've got there is a click event listener so when someone 19
clicks on the button on the form that will invoke our get pet function and so 20
our "get pet" function will send that request off to our off to our REST API 21
that we've created him so the first thing we need to do is we need to put 22
our API endpoint because yours will be 23
definitely different to that so we go back to the management console and we 24
rare in stages so we don't want to go to demo we want to go a bit further down to 25
get for pets and that will give us the end point with pets on the end of it so 26
what I'm going to do is just copy that over and paste that in and there we can 27
see it's going to have our end point with slash pets and we also need to put 28
another forward slash on the end of it so to look like that so it'll be our end 29
point forward slash pets and then another forward slash on the end of it so 30
then what we're going to do is that the application is going to get the pet ID 31
that we input into an input box here it's going to check that the numbers 32
okay between 1 and 3 if everything is ok then it's going to send that request off 33
and so the API request will be at that end point there plus the pet ID so if 34
we're looking for a pet number 2 it'll be that plus 2 on the end of it so then 35
we do a jQuery a get command and that will go to do a HTTP get request to that 36
API endpoint and there will be a callback function there that will return 37
the data and the status of that request so if the status was 200 it will come 38
back with status ok and austat set a success and then it will on the next 39
line it will put the type which will be cat dog fish whatever and then it'll put 40
the price which will be whatever the price is and that's all it does and 41
that's what we need to do so we'll just save that now that it's got our new 42
endpoint in and now we need to upload it all to Amazon s3 and create a static 43
website ok so just back it in the AWS management console let's open up the s3 44
management console and we're just going to do that in a new tab to keep the API 45
gateway still there, so the first thing we need to do is to create a bucket we 46
just that whatever we want we'll leave 47
everything else as it is and click on next we'll leave that and we will create 48
a public permission to this, we click on next and create that bucket, ok so that 49
buckets been created what we need to do now is upload our files 50
and we just go on next and again we want to have public access to this and next 51
and next and upload and again we need to go to properties and static website 52
hosting and we'll enable that or put in our index.html and we click on save it's 53
just going to go back to that and just going to open up that endpoint for the 54
website to make sure it's working okay so there we go so we've got our website 55
up and running very quickly so this should be on our racer that very quickly 56
but again this should be very much old hat to you if not going back to section 57
two of the course and redo it so here is our get pet button that we press that 58
will invoke that get pet function and what it will do is it will read the pet 59
ID that we put in here and just say we put in one and it will return the JSON 60
details for that, so let's have a look at it's put in ID one and get pet , 61
Ok so that's done that very quickly it's gone to the API and it's had a status of 62
success and it's returned the dog type and the price being $249 which is 63
exactly what we would have expected let's try something different so we'll 64
put in three and that should return a fish look at that a $0.99 fish and the 65
status of that request was success or a two hundred code was returned so what 66
we've done we've created an API using the API gateway and we've also created 67
an application using a static website that communicates with our API and 68
provides dynamic capability for a static website so you now fully understand API 69
gateway and I'll see you in the next one