Erstellen des Browser-Skripts - AWS SDK for JavaScript

Hilf uns, das zu verbessernAWS SDK for JavaScriptVersion 3 (V3) -Dokumentation, indem Sie Feedback mithilfe derFeedbackverlinken, oder erstellen Sie ein Issue oder Pull Request aufGitHub.

DieAWS SDK for JavaScriptReferenzhandbuch zur V3-APIbeschreibt ausführlich alle API-Operationen für denAWS SDK for JavaScriptVersion 3 (V3).

Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

Erstellen des Browser-Skripts

Erstellen Sie zunächst die für das Beispiel erforderlichen Service-Client-Objekte. Erstellen eineslibsVerzeichnissnsClient.js, und fügen Sie den folgenden Code ein. ErsetzenREGIONundIDENTITÄTS_POOL_IDin jedem

Anmerkung

Verwenden Sie die ID des Amazon Cognito Cognito-Identitäten-Pools, den Sie inErstellen derAWSRessourcen aus.

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 };

Dieser Code ist verfügbarHier GitHubaus.aus.

So erstellen Sie das Browserskript für dieses Beispiel in einem Ordner mit dem NamenDynamoDBApp, erstellen Sie ein Modul Node.js mit dem Dateinamenadd_data.jsund fügen Sie den folgenden Code ein. DiesubmitData-Funktion übermittelt Daten an eine DynamoDB-Tabelle und sendet mithilfe von Amazon SNS einen SMS-Text an den App-Administrator.

In dersubmitData, deklarieren Sie Variablen für die Zieltelefonnummer, die in der App-Oberfläche eingegebenen Werte und für den Namen des Amazon S3 S3-Buckets. Erstellen Sie als Nächstes ein Parameter-Objekt, um der Tabelle ein Element hinzuzufügen. Wenn keiner der Werte leer ist,submitDatafügt das Element der Tabelle hinzu und sendet die Nachricht. Denken Sie daran, die Funktion dem Browser zur Verfügung zu stellen, mitwindow.submitData = submitDataaus.

// 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;

Diesen Beispielcode findenHier GitHubaus.

Führen Sie abschließend den folgenden Befehl in der Befehlszeile aus, um die JavaScript für dieses Beispiel in einer Datei mit dem Namenmain.js:

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

Weitere Informationen zur Installation von Webpack finden Sie unterBündeln von Anwendungen mit Webpackaus.

Um die App auszuführen, öffnen Sieindex.htmlin Ihrem Browser