1 00:00:11,719 --> 00:00:17,250 Welcome back to BackSpace Academy. In this lecture we're going to be using the 2 00:00:17,250 --> 00:00:21,390 same Lambda function code that we created previously either in Nodejs or 3 00:00:21,390 --> 00:00:26,939 Python and we're going to create a Lambda function with that and then we're 4 00:00:26,939 --> 00:00:32,189 going to create a browser based JavaScript application that is going to 5 00:00:32,189 --> 00:00:36,480 accept some IAM user credentials and it's going to accept them through a 6 00:00:36,480 --> 00:00:41,640 pop-up box, so it won't be hard-coded into that code which won't be secure, so 7 00:00:41,640 --> 00:00:46,410 it will be secure and once it's got those IAM credentials it's going to use 8 00:00:46,410 --> 00:00:51,899 those to connect to Lambda function using the AWS software 9 00:00:51,899 --> 00:00:56,219 development kit and then it will be able to send requests and also receive 10 00:00:56,219 --> 00:01:07,110 responses from our Lambda function. So let's get into it. So starting off in the 11 00:01:07,110 --> 00:01:11,460 Lambda management console. We're going to create another function as before, author 12 00:01:11,460 --> 00:01:17,460 from scratch as before, the function name, we will use the same function name, this 13 00:01:17,460 --> 00:01:21,270 one's going to be in NodeJS but you can use the same Python code whatever you're 14 00:01:21,270 --> 00:01:26,310 comfortable with, I'm going to use nodejs, we'll use that same execution role as 15 00:01:26,310 --> 00:01:38,250 before and will create that function so that's created successfully, we'll just 16 00:01:38,250 --> 00:01:43,290 add in our code and it's the same code that we used in the previous lab, paste 17 00:01:43,290 --> 00:01:49,229 that in there and there is our node.js code nothing needs to change here at all 18 00:01:49,229 --> 00:02:00,649 and we can test that now, just leave that test as well, try that again 19 00:02:00,980 --> 00:02:11,190 and I'll just leave that as it is and test. So I didn't do that right 20 00:02:11,190 --> 00:02:15,390 because I forgot to save it, so I'll just get out of this again and save it 21 00:02:15,390 --> 00:02:19,710 because I upload a new code, we'll do that test again very important to test 22 00:02:19,710 --> 00:02:24,270 code, so we just test that again and there we go so it's done it right there 23 00:02:24,270 --> 00:02:29,370 so we receive value 1 2 & 3, so everything's working fine there, so it 24 00:02:29,370 --> 00:02:32,370 didn't work fine at the first time because I forgot to save it, so that's 25 00:02:32,370 --> 00:02:37,950 all okay, so now that we've got our our Lambda function working we're going to 26 00:02:37,950 --> 00:02:42,209 use this ARN here, which we'll copy later on and we're going to use that to 27 00:02:42,209 --> 00:02:48,090 create a user policy and then we're going to use that policy that is going 28 00:02:48,090 --> 00:02:52,920 to create an IAM user that will have limited access to invoke this Lambda 29 00:02:52,920 --> 00:02:57,030 function and to communicate with this Lambda function so let's go to the IIM 30 00:02:57,030 --> 00:03:07,200 console and we're going to first off create a policy we're going to go to 31 00:03:07,200 --> 00:03:14,580 JSON and it's going to copy from the lab notes here so that I don't make a 32 00:03:14,580 --> 00:03:16,790 mistake 33 00:03:21,180 --> 00:03:27,579 so there's our our policy there so it's going to allow land the invoke list and 34 00:03:27,579 --> 00:03:32,470 get and it's going to be only for that land a resource and we need to get the 35 00:03:32,470 --> 00:03:37,780 Amazon resource number for that Lambda function so we'll just copy it from here 36 00:03:37,780 --> 00:03:45,540 and we'll paste it in there and there is our policy so we'll review that policy 37 00:03:45,900 --> 00:03:52,379 we'll give that policy a name backspace - Lambda - lab from the lab notes in 38 00:03:52,379 --> 00:03:56,709 here you can see we're going to have list read and write access to backspace 39 00:03:56,709 --> 00:04:05,829 - Lambda - lab function will create that policy there we go so now that 40 00:04:05,829 --> 00:04:11,769 we've created that policy we can create an IAM user add user and we'll give that 41 00:04:11,769 --> 00:04:16,299 user a name I'll just copy again from the lab notes so that I don't make it 42 00:04:16,299 --> 00:04:22,030 any different so there we go backspace - lambda' 43 00:04:22,030 --> 00:04:26,860 - browser - lead that will be our user now we only select programmatic access 44 00:04:26,860 --> 00:04:30,789 we're not going to give this user console access we're only going to be 45 00:04:30,789 --> 00:04:35,050 accessing through the software development kit we click on Next 46 00:04:35,050 --> 00:04:40,570 permissions and this is where we attach our existing policy and we'll look for 47 00:04:40,570 --> 00:04:47,199 that backspace policy and there it is backspace - Lambda - lab the policy we 48 00:04:47,199 --> 00:04:53,050 just previously created next tags we'll leave that as it is next review let's 49 00:04:53,050 --> 00:04:58,840 create that user so that's good now what we need to do is that we need to 50 00:04:58,840 --> 00:05:03,820 download this CSV which is going to have our user credentials so we just download 51 00:05:03,820 --> 00:05:09,490 that and we're going to use those to log in with our browser application so we're 52 00:05:09,490 --> 00:05:13,930 going to get the access key which you've got here and our secret access key which 53 00:05:13,930 --> 00:05:18,970 will be in this CSV file we all we need to do is cut and paste it into our login 54 00:05:18,970 --> 00:05:23,550 screen on our application and we'll be fine so it's going to close out of that 55 00:05:23,550 --> 00:05:30,849 close in and that's done ok so the next thing we need to do is start working on 56 00:05:30,849 --> 00:05:34,349 our browser applications so we go to the Backspace Academy 57 00:05:34,349 --> 00:05:41,650 browser template so there's a link to this in the lab notes and the to the two 58 00:05:41,650 --> 00:05:46,599 files that you need to download our index.html and app das keep them in the 59 00:05:46,599 --> 00:05:53,889 same location because the index dot HTML would be referring to the app.js so 60 00:05:53,889 --> 00:05:57,789 i'm just going to get up visual studio code here but you can use whatever you 61 00:05:57,789 --> 00:06:03,880 want and I'm going to cut and paste that code into it so I'm just going to go 62 00:06:03,880 --> 00:06:14,530 into index.HTML click on raw and copy that and paste that in over here 63 00:06:14,530 --> 00:06:29,740 and then I'm going to get my app.js so open that up as well click on 64 00:06:29,740 --> 00:06:42,490 raw and copy all that ok so now that I've got that in in an editor we can 65 00:06:42,490 --> 00:06:48,340 have a look at it so here we've got our index.html and all this is is a very 66 00:06:48,340 --> 00:06:52,630 very simple web page and it's just going to have two buttons on it one button 67 00:06:52,630 --> 00:06:59,050 will be for signing into AWS so when we click on that it's going to open up a 68 00:06:59,050 --> 00:07:06,430 sign in modal and that modal will have two areas to input into your access key 69 00:07:06,430 --> 00:07:13,060 ID and your secret access key and when you click on login the application will 70 00:07:13,060 --> 00:07:17,340 take those credentials and it will use those credentials to login with AWS and 71 00:07:17,340 --> 00:07:22,000 then it also will be another button there to send a command so whatever we 72 00:07:22,000 --> 00:07:25,870 want to do with AWS we can do through this send command button so when we 73 00:07:25,870 --> 00:07:30,250 click on it what we're going to do is we're going to invoke the Lambda 74 00:07:30,250 --> 00:07:33,909 function and send a request to that Lambda function and see what it returns 75 00:07:33,909 --> 00:07:39,460 to us so let's have a look further down is that we're going to load in bootstrap 76 00:07:39,460 --> 00:07:43,419 and then we're going to load oh sorry first off we're going to load in jQuery 77 00:07:43,419 --> 00:07:48,020 then bootstrap and then the AWS software developer 78 00:07:48,020 --> 00:07:52,160 kit and then our application code so you need to do it in that order and you need 79 00:07:52,160 --> 00:07:56,449 to make sure that it is at the bottom of the webpage as well not at the top down 80 00:07:56,449 --> 00:08:02,810 at the bottom so let's look at how apt is it is that application code so up to 81 00:08:02,810 --> 00:08:07,879 stop up the top here we've got a constant for region so to use the 82 00:08:07,879 --> 00:08:13,460 software development kit you need to define a region you cannot log in to the 83 00:08:13,460 --> 00:08:17,870 AWS through this software development kit without having the region as a 84 00:08:17,870 --> 00:08:21,860 parameter then we're going to define some variables what we're going to put 85 00:08:21,860 --> 00:08:27,139 in here so this is purely and simply a bare-bones application as it is now 86 00:08:27,139 --> 00:08:33,669 we're going to add stuff to it and we're going to have some buttons here so the 87 00:08:33,669 --> 00:08:39,050 first one there is a sign-in button and as we said that's going to this 88 00:08:39,050 --> 00:08:42,950 event listener will open up the modal or the sign-in function here which 89 00:08:42,950 --> 00:08:46,959 is going to open up that modal and that and it's going to accept from that modal 90 00:08:46,959 --> 00:08:54,380 the access key ID the secret access key and we're going to create this config 91 00:08:54,380 --> 00:08:59,480 object which will have those credentials and we'll also have the region and we're 92 00:08:59,480 --> 00:09:05,450 going to use those credentials to login with AWS when we need to so then the 93 00:09:05,450 --> 00:09:09,050 next button is going to be our send command button which will open up this 94 00:09:09,050 --> 00:09:14,149 function so first of all it's going to check whether we're ready to communicate 95 00:09:14,149 --> 00:09:18,860 with AWS so it's not going to be ready until we've got those user credentials 96 00:09:18,860 --> 00:09:27,339 so then ready AWS is true and so then we can start to use or instantiate our AWS 97 00:09:27,339 --> 00:09:31,850 software development kit service objects and so the one we're going to use is 98 00:09:31,850 --> 00:09:36,890 lambda so let's start putting in some code in here so the first thing we need 99 00:09:36,890 --> 00:09:45,440 to do is put in our our variables that we're going to be using so just cutting 100 00:09:45,440 --> 00:09:49,220 and pasting from the lab notes here so we're going to have some temporary data 101 00:09:49,220 --> 00:09:53,660 there so this is going to be our Lambda object that we're going to be inverter 102 00:09:53,660 --> 00:09:58,279 using to invoke lambda and then we're going to have our function name which is 103 00:09:58,279 --> 00:10:01,760 a name that we created for our function so ours was callbacks 104 00:10:01,760 --> 00:10:07,610 space - Lambda - lab that's the name of our function so net now that we've got 105 00:10:07,610 --> 00:10:11,660 that information we can pass it through to the software development kit service 106 00:10:11,660 --> 00:10:16,400 and we can start using the Lambda so what I'm going to do again you I'm just 107 00:10:16,400 --> 00:10:20,770 going to paste from the notes here and 108 00:10:25,600 --> 00:10:31,520 there we go so the first thing we're going to do is going to do Lambda is a 109 00:10:31,520 --> 00:10:37,130 new AWS Lambda object so the parameters that we're going to pass we're going to 110 00:10:37,130 --> 00:10:42,830 have to have the function name and the invocation type and the log type so 111 00:10:42,830 --> 00:10:47,300 we'll always be using request/response and tail the function name is going to 112 00:10:47,300 --> 00:10:53,540 again be the name of our backspace - lab Lambda - lab function and then we've got 113 00:10:53,540 --> 00:10:58,070 our payload which is what week the object that we're going to be sending to 114 00:10:58,070 --> 00:11:03,770 our Lambda function and that will be key 1 which will be milk key 2 will be eggs 115 00:11:03,770 --> 00:11:09,020 and key 3 will be bread so once we've created those parameters 116 00:11:09,020 --> 00:11:14,810 or defined those parameters we can invoke that Lambda function so we do 117 00:11:14,810 --> 00:11:20,660 lambda dot invoke parse those parameters and if there's an error rule out put 118 00:11:20,660 --> 00:11:26,390 that error otherwise we're going to get a successful response from our Lambda 119 00:11:26,390 --> 00:11:33,470 function we're going to create some temporary data there with our with our 120 00:11:33,470 --> 00:11:36,710 response and we're going to output that so we're going to output that to the 121 00:11:36,710 --> 00:11:45,950 screen and everything should be fine so that's all okay we can save that and we 122 00:11:45,950 --> 00:11:51,430 can open up up into our into our browser and see how that works 123 00:11:53,200 --> 00:11:58,910 okay so I've just opened up the index.html and everything seems to be 124 00:11:58,910 --> 00:12:04,100 working fine it's it's referenced our app.js by the looks of things. So we 125 00:12:04,100 --> 00:12:08,690 first need to sign it so I just click on AWS signing and we need to get our 126 00:12:08,690 --> 00:12:13,310 access key ID and our secret access key from that I am user that we created so 127 00:12:13,310 --> 00:12:15,529 that'll be in that excel file that we saved 128 00:12:15,529 --> 00:12:26,870 so I'm just going to cut and paste that over and sign in okay so there we can 129 00:12:26,870 --> 00:12:31,009 see it's just out put it here that we've created those credentials for that 130 00:12:31,009 --> 00:12:35,449 access key ID so what we can do now is we can send that command and see what 131 00:12:35,449 --> 00:12:43,639 happens there we go so it's sent the command it's invoked our Lambda function 132 00:12:43,639 --> 00:12:47,779 and we've got a response in that Lambda function that which says item one 133 00:12:47,779 --> 00:12:53,540 received milk item two received eggs item 3 received bread so that's great so 134 00:12:53,540 --> 00:12:57,139 everything's working perfectly so we've created our browser application we have 135 00:12:57,139 --> 00:13:02,089 logged into AWS we're sent a command to invoke that Lambda function we're sent 136 00:13:02,089 --> 00:13:06,199 some information to that Lambda function and it's sent that back to us so that's 137 00:13:06,199 --> 00:13:11,329 how you create a browser application that takes advantage of a Lambda 138 00:13:11,329 --> 00:13:16,069 back-end so that brings us to the end of the lab so the main thing that we need 139 00:13:16,069 --> 00:13:21,670 to do now is that we need to clean this up by deleting that that that land a lab 140 00:13:21,670 --> 00:13:29,870 function so we'll just go to here and delete function and that's all done so I 141 00:13:29,870 --> 00:13:34,389 look forward to seeing you in the next lab.