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

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>