In this tutorial, we are going to connect together everything we learned in the previous AWS Tutorial videos and make a static website that calls our API Gateway which then calls our Lambda Functions and finally writes to or reads from our DynamoDB.
Hàm write các bạn tạo tại Lambda Function
// Loads in the AWS SDK const AWS = require('aws-sdk'); // Creates the document client specifing the region // The tutorial's table is 'in us-east-1' const ddb = new AWS.DynamoDB.DocumentClient({region: 'us-east-1'}); exports.handler = async (event, context, callback) => { // Captures the requestId from the context message const requestId = context.awsRequestId; if(event.name && event.email && event.message) { // Handle promise fulfilled/rejected states await createMessage(requestId, event).then(() => { callback(null, { statusCode: 201, body: '', headers: { 'Access-Control-Allow-Origin' : '*' } }); }).catch((err) => { console.error(err) }) } else { callback(null, { statusCode: 400, body: 'Bad Request', headers: { 'Access-Control-Allow-Origin' : '*' } }); } }; // Function createMessage // Writes message to DynamoDb table Message function createMessage(requestId, event) { const params = { TableName: 'Message', Item: { 'messageId' : requestId, 'name' : event.name, 'email' : event.email, 'message' : event.message } } return ddb.put(params).promise(); }
Form HTML bên dưới
<html> <script> async function getMessages() { fetch( 'YOUR API URL HERE', { method: 'GET' }) .then(response => response.json()) .then((response) => { console.log(response.body); response.body.forEach(element => { document.getElementById("messages").innerHTML += "<p>"+element.message+"</p>"; // Adds each message to div }); }); } async function submitMessage() { var name = document.getElementById("name").value; var email = document.getElementById("email").value; var message = document.getElementById("message").value; fetch( 'YOUR API URL HERE', { method: 'POST', body: JSON.stringify({ "name": name, "email": email, "message": message }) }) .then(response => response.json()) .then((response) => { console.log(response); document.getElementById("messages").innerHTML += "<p>"+message+"</p>"; // Add new message to message list }); } getMessages(); // Calls get message on load </script> <head> <title>Test Form</title> </head> <body> <form onsubmit="submitMessage();return false;"> <label for="name">Name:</label><br> <input type="text" id="name" name="name" value=""/><br> <label for="email">Email:</label><br> <input type="text" id="email" name="email" value=""/><br> <label for="message">Message:</label><br> <textarea id="message" name="message" value="" rows="10" cols="30"></textarea><br><br> <input type="submit" value="Submit"> </form> <strong>Messages from DynamoDB</strong> <div id="messages"> </div> </body> </html>
Add new comment