Demo tạo Form HTML kết nối AWS Lambda và insert vào AWS DynamoDB

Written by Tommy Tran

Posted on Tue, 02/02/2021 - 10:08

60 views

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>