创建浏览器脚本 - Amazon SDK for JavaScript
Amazon Web Services 文档中描述的 Amazon Web Services 服务或功能可能因区域而异。要查看适用于中国区域的差异,请参阅中国的 Amazon Web Services 服务入门

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

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

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

创建浏览器脚本

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

注意

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

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 存储桶名称的变量。ReplaceBUCKET_NAME用的名称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: "+353861230764", //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在您的浏览器上。