创建浏览器脚本 - AWS SDK for JavaScript

帮助我们改进AWS SDK for JavaScript版本 3 (V3) 文档,方法是使用反馈链接,或者在上创建议题或拉取请求GitHub.

这些区域有:AWS SDK for JavaScriptV3 API 参考指南详细描述了所有的 API 操作AWS SDK for JavaScript版本 3 (V3)。

本文属于机器翻译版本。若本译文内容与英语原文存在差异,则一律以英文原文为准。

创建浏览器脚本

首先,创建示例所需的服务客户端对象。创建libs目录,创建snsClient.js,然后将以下代码粘贴到此处。Replace领域IDENTITY_POOL_ID在每个。

注意

使用您在中创建的 Amazon Cognito 身份池的 ID创建AWS资源 .

import { CognitoIdentityClient } from "@aws-sdk/client-cognito-identity"; import { fromCognitoIdentityPool } from "@aws-sdk/credential-provider-cognito-identity"; import { SNSClient } from "@aws-sdk/client-sns"; const REGION = "REGION"; const IDENTITY_POOL_ID = "IDENTITY_POOL_ID"; // An Amazon Cognito Identity Pool ID. // Create an Amazon Comprehend service client object. const snsClient = new SNSClient({ region: REGION, credentials: fromCognitoIdentityPool({ client: new CognitoIdentityClient({ region: REGION }), identityPoolId: IDENTITY_POOL_ID, }), }); export { snsClient };

此代码可用此处处: GitHub..

要在此示例中创建浏览器脚本,请在名为的文件夹中DynamoDBApp,创建文件名为的 Node.js 模块add_data.js然后将以下代码粘贴到此处。这些区域有:submitData函数将数据提交到 DynamoDB 表,然后使用 Amazon SNS 向应用程序管理员发送短信。

submitData函数,声明目标电话号码、在应用程序界面上输入的值以及 Amazon S3 存储桶名称的变量。接下来,创建一个参数对象,用于向表中添加项目。如果没有一个值为空,submitData将项目添加到表中,然后发送消息。请记住将该功能提供给浏览器,使用window.submitData = submitData.

// Import required AWS SDK clients and commands for Node.js import { PutItemCommand } from "@aws-sdk/client-dynamodb"; import { PublishCommand } from "@aws-sdk/client-sns"; import { snsClient } from "../libs/snsClient.js"; import { dynamoClient } from "../libs/dynamoClient.js"; export const submitData = async () => { //Set the parameters // Capture the values entered in each field in the browser (by id). const id = document.getElementById("id").value; const title = document.getElementById("title").value; const name = document.getElementById("name").value; const body = document.getElementById("body").value; //Set the table name. const tableName = "Items"; //Set the parameters for the table const params = { TableName: tableName, // Define the attributes and values of the item to be added. Adding ' + "" ' converts a value to // a string. Item: { id: { N: id + "" }, title: { S: title + "" }, name: { S: name + "" }, body: { S: body + "" }, }, }; // Check that all the fields are completed. if (id != "" && title != "" && name != "" && body != "") { try { //Upload the item to the table const data = await dynamoClient.send(new PutItemCommand(params)); alert("Data added to table."); try { // Create the message parameters object. const messageParams = { Message: "A new item with ID value was added to the DynamoDB", PhoneNumber: "PHONE_NUMBER", //PHONE_NUMBER, in the E.164 phone number structure. // For example, ak standard local formatted number, such as (415) 555-2671, is +14155552671 in E.164 // format, where '1' in the country code. }; // Send the SNS message const data = await snsClient.send(new PublishCommand(messageParams)); console.log( "Success, message published. MessageID is " + data.MessageId ); } catch (err) { // Display error message if error is not sent console.error(err, err.stack); } } catch (err) { // Display error message if item is no added to table console.error( "An error occurred. Check the console for further information", err ); } // Display alert if all field are not completed. } else { alert("Enter data in each field."); } }; // Expose the function to the browser window.submitData = submitData;

此示例代码可以找到此处处: GitHub.

最后,在命令提示符下运行以下命令以捆绑 JavaScript 这个例子在一个名为的文件中main.js

webpack add_data.js --mode development --target web --devtool false -o main.js
注意

有关安装 webpack 的信息,请参阅使用 webpack 捆绑应用程序.

要运行该应用程序,请打开index.html在浏览器上。