Erstellen des Browser-Skripts - AWS SDK for JavaScript

Helfen Sie uns, dasAWS SDK for JavaScriptVersion 3 (V3) -Dokumentation durch Feedback unter Verwendung derFeedbackLink oder erstellen Sie ein Problem oder ziehen Sie eine Anfrage anGitHubaus.

DieAWS SDK for JavaScriptReferenzhandbuch zur V3-API-Referenzbeschreibt ausführlich alle API-Operationen für dieAWS 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 Dienstclientobjekte, die für das Beispiel erforderlich sind. Erstellen eineslibsErstellen Sie im VerzeichnissnsClient.jsFügen Sie den folgenden Code ein. ErsetzenREGIONundIDENTITY_POOL_IDin jedem.

Anmerkung

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

const { SNSClient } = require("@aws-sdk/client-sns"); const REGION = "REGION"; //e.g. "us-east-1" const IdentityPoolId = "IDENTITY_POOL_ID"; const snsClient = new SNSClient({ region: REGION, credentials: fromCognitoIdentityPool({ client: new CognitoIdentityClient({ region: REGION }), identityPoolId: IdentityPoolId }), }); export { snsClient };

Dieser Code ist verfügbarauf GitHub:aus.

Um das Browserskript für dieses Beispiel zu erstellen, müssen Sie in einem Ordner namensDynamoDBAppErstellen Sie ein Node.js -Modul mit dem Dateinamenadd_dat.jsund fügen Sie den folgenden Code ein. DiesubmitDatasendet Daten an eine DynamoDB -Tabelle und sendet mithilfe von Amazon SNS einen SMS-Text an den App-Administrator.

In dersubmitData, deklarieren Variablen für die Zieltelefonnummer, die in der App-Schnittstelle eingegebenen Werte und für den Namen des Amazon S3 Buckets. ErsetzenBUCKET_NAMEmit dem Namen desS3-Bucket, den Sie erstellt haben. Erstellen Sie als Nächstes ein Parameterobjekt zum Hinzufügen eines Elements zur Tabelle. 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 = 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;

Diesen Beispielcode finden Sie unter.hier auf GitHubaus.

Führen Sie schließlich Folgendes an der Eingabeaufforderung aus, um das JavaScript für dieses Beispiel in einer Datei namensmain.js:

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

Weitere Informationen zur Installation von Webpack finden Sie unterAnwendungsbündelung mit Webpackaus.

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