jquery to connect with DynamoDB via Lambda API March 9-10, 2017 CS160 Section

Size: px

Start display at page:

Download "jquery to connect with DynamoDB via Lambda API March 9-10, 2017 CS160 Section"

Anis Hampton
5 years ago
Views:

1 jquery to connect with DynamoDB via Lambda API March 9-10, 2017 CS160 Section

2 Upcoming Assignments Design 05 due 3/15 Programming Assignment 3 due 3/16 You will need your fire tablets! Group assignment Midterm 3/23 There will be a midterm review in class on 3/21 PICKUP FOR FIRE TABLETS BY THIS FRIDAY

3 Outline 1. Setting up DynamoDB 2. Setting up Lambda API gateway 3. Testing HTTP request 4. Using jquery for GET/POST Tutorial for steps 1-3 at: n-tips Guides for setting up JSON for HTTP requests tingstarted.nodejs.03.html#gettingstarted.nodejs.03.03

4 DynamoDB terms Tables: same as database tables for storing data e.g. a table named Cars may contain data about car models Items: correspond to a single row or record in regular databases that can be uniquely identified e.g. a item in a table about car models might contain all attributes of a single model as a single item or record Attributes: similar to columns or field names in databases (define properties or attributes of an item) e.g. a single item in a cars table may have attributes such as year, price, make etc. Primary key: unique identifier for each item; must be declared when creating a table; two types: Partition key (single) Partition + sort key (composite) we will be using this type

5 Partition Key

6 Partition + Sort Key

7 Step 1 - Setting up DynamoDB Sign in to your AWS account Select US East (N. Virg.)

8 Step 1 - Setting up DynamoDB Go to Services Database DynamoDB Click Create Table

9 Step 1 - Setting up DynamoDB Name the table "Tasks" Create a Key named "TaskName" Add a sort key name "TaskContext" Click Create Table

10 Step 1 - Setting up DynamoDB Once table is ready, click on its name

11 Step 1 - Setting up DynamoDB Then click on Items in the tabbed section

12 Step 1 - Setting up DynamoDB Fill out the Task Name and Context To add another attribute, click on the + symbol next to Context, and select Append -> String. Name the new attribute "Importance" Click Save

13 Step 2 - Setting up Lambda API gateway Select the Lambda service Then "Create a Lambda Function" Click "Microservice-http-endpoint" to reach "Configure Triggers" page

14 Step 2 - Setting up Lambda API gateway

15 Step 2 - Setting up Lambda API gateway For APIname do "TaskWS" For access, select "Open" (to make it publicly accessible) Click Next to reach Configuration dialog Fill out the Function Name dialog, e.g. "TaskUpdate" For "Role" select "Create new role from template(s)" Give the role a name such as "TaskUser" Template should be "Simple microservice permissions" Click Save On Review page, click "Create Lambda Function"

16 Step 2 - Setting up Lambda API gateway TaskUser

17 Step 2 - Setting up Lambda API gateway Copy and paste the URL shown in a browser Add a query "?TableName=Tasks"

18 Step 3 - Testing http GET request Query should look like this: Result should look like this:

19 Step 4 - Using jquery for GET/POST Before using jquery, you need to add the following Access Control permissions to Lambda s response headers (in the Code tab of Lambda function): headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Headers': 'x-requested-with', "Access-Control-Allow-Origin" : "*", "Access-Control-Allow-Credentials" : true, }

20 Step 4 - Using jquery for GET/POST

21 Step 4 - Using jquery for GET Create an html file in any editor as below: <!DOCTYPE html> <html> <head> <script src=" <script> $(document).ready(function(){ $("#getreq").click(function(){ $.get(" OF YOUR LAMBDA API GATEWAY?TableName=Tasks", function(data, status){ // alert("data: " + data + "\nstatus: " + status); $("#result").text(json.stringify(data) ); }); }); }); </script> </head> <body> <div> <br> <button id="getreq">send HTTP GET request to a AWS and get result</button> <br> </div> <div id="result"> Result </div> </body> </html>

22 Step 4 - Using jquery for GET Running this file in a browser and clicking on the button should perform the GET method and yield the following result

23 Step 4 - Using jquery for POST Copy and modify previous html file as below: <script src=" <script> $(document).ready(function(){ $("#getreq").click(function(){ $.ajax({ url: ' OF YOUR LAMBDA API GATEWAY?TableName=Tasks', type: 'POST', data: JSON.stringify({"TableName": "Tasks", "Item": {"TaskName":"Do groceries", "TaskContext":"Store", "Importance":"Very high"}}), success: function(data) { alert("posted successfully"); }, error: function(xhr, ajaxoptions, thrownerror) { alert("error"); } }); }); }); </script> </head> <body> <div> <button id="getreq">send HTTP POST request to a AWS</button> </div> </body>

24 Step 4 - Using jquery for POST Running this file in a browser and clicking the button should perform the POST method and yield the alert message:

Session 18. jquery - Ajax. Reference. Tutorials. jquery Methods. Session 18 jquery and Ajax 10/31/ Robert Kelly,

Session 18. jquery - Ajax. Reference. Tutorials. jquery Methods. Session 18 jquery and Ajax 10/31/ Robert Kelly, Session 18 jquery - Ajax 1 Tutorials Reference http://learn.jquery.com/ajax/ http://www.w3schools.com/jquery/jquery_ajax_intro.asp jquery Methods http://www.w3schools.com/jquery/jquery_ref_ajax.asp 2 10/31/2018