Das AWS SDK for JavaScript APIV3-Referenzhandbuch beschreibt detailliert alle API Operationen für die AWS SDK for JavaScript Version 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 Sie eine App zum Senden von Daten an DynamoDB

Dieses serviceübergreifende Tutorial zu Node.js zeigt, wie Sie eine App erstellen, mit der Benutzer Daten an eine Amazon DynamoDB-Tabelle senden können. Diese App verwendet die folgenden Dienste:

Das Szenario

In diesem Tutorial bietet eine HTML Seite eine browserbasierte Anwendung zum Senden von Daten an eine Amazon DynamoDB-Tabelle. Die App verwendet AmazonSNS, um den App-Administrator zu benachrichtigen, wenn ein Benutzer die Tabelle aktualisiert.

Voraussetzungen

Führen Sie die folgenden erforderlichen Aufgaben aus:

Erstellen Sie die AWS Ressourcen

Diese App benötigt die folgenden Ressourcen:

Sie können diese Ressourcen manuell in der AWS Konsole erstellen, wir empfehlen jedoch, diese Ressourcen AWS CloudFormation wie in diesem Tutorial beschrieben bereitzustellen.

Erstellen Sie die AWS Ressourcen mit AWS CloudFormation

AWS CloudFormation ermöglicht es Ihnen, AWS Infrastrukturbereitstellungen vorhersehbar und wiederholt zu erstellen und bereitzustellen. Weitere Informationen zu AWS CloudFormation finden Sie im AWS CloudFormation Benutzerhandbuch.

Um den AWS CloudFormation Stack zu erstellen, verwenden Sie AWS CLI:

Auffüllen der Tabelle

Um die Tabelle zu füllen, erstellen Sie zunächst ein Verzeichnis mit dem Namen libs und darin eine Datei mit dem NamendynamoClient.js, und fügen Sie den folgenden Inhalt ein. Ersetzen REGION mit Ihrer AWS Region und ersetzen IDENTITY_POOL_ID mit einer Amazon Cognito Identity Pool ID. Dadurch wird das DynamoDB-Clientobjekt erstellt.

import { CognitoIdentityClient } from "@aws-sdk/client-cognito-identity";
import { fromCognitoIdentityPool } from "@aws-sdk/credential-provider-cognito-identity";
import { DynamoDBClient } from "@aws-sdk/client-dynamodb";

const REGION = "REGION";
const IDENTITY_POOL_ID = "IDENTITY_POOL_ID"; // An Amazon Cognito Identity Pool ID.

// Create an Amazon DynaomDB service client object.
const dynamoClient = new DynamoDBClient({
  region: REGION,
  credentials: fromCognitoIdentityPool({
    client: new CognitoIdentityClient({ region: REGION }),
    identityPoolId: IDENTITY_POOL_ID,
  }),
});

export { dynamoClient };

Dieser Code ist hier auf verfügbar. GitHub

Erstellen Sie als Nächstes einen dynamoAppHelperFiles Ordner in Ihrem Projektordner, erstellen Sie eine Datei update-table.js darin und kopieren Sie den Inhalt von hier aus GitHub in diesen Ordner.

// Import required AWS SDK clients and commands for Node.js
import { PutItemCommand } from "@aws-sdk/client-dynamodb";
import { dynamoClient } from "../libs/dynamoClient.js";

// Set the parameters
export const params = {
  TableName: "Items",
  Item: {
    id: { N: "1" },
    title: { S: "aTitle" },
    name: { S: "aName" },
    body: { S: "aBody" },
  },
};

export const run = async () => {
  try {
    const data = await dynamoClient.send(new PutItemCommand(params));
    console.log("success");
    console.log(data);
  } catch (err) {
    console.error(err);
  }
};
run();

Führen Sie den folgenden Befehl von der Befehlszeile aus.

node update-table.js

Dieser Code ist hier auf verfügbar GitHub.

Erstellen Sie eine Front-End-Seite für die App

Hier erstellen Sie die HTML Frontend-Browserseite für die App.

Erstellen Sie ein DynamoDBApp Verzeichnis, erstellen Sie eine Datei mit dem Namen index.html und kopieren Sie von hier an den GitHub Code. Das script Element fügt die main.js Datei hinzu, die alle JavaScript für das Beispiel erforderlichen Informationen enthält. Sie werden die main.js Datei später in diesem Tutorial erstellen. Mit dem verbleibenden Code index.html wird die Browserseite erstellt, auf der die von Benutzern eingegebenen Daten erfasst werden.

Dieser Beispielcode finden Sie hier unter GitHub.

Erstellen Sie das Browser-Skript

Erstellen Sie zunächst die für das Beispiel erforderlichen Service-Client-Objekte. Erstellen Sie ein libs VerzeichnissnsClient.js, erstellen Sie es und fügen Sie den folgenden Code ein. Ersetzen REGION and IDENTITY_POOL_ID in jedem.

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 hier auf GitHub verfügbar. .

Um das Browserskript für dieses Beispiel zu erstellenDynamoDBApp, erstellen Sie in einem Ordner mit dem Namen ein Modul Node.js mit dem Dateinamen add_data.js und fügen Sie den folgenden Code ein. Die submitData Funktion sendet Daten an eine DynamoDB-Tabelle und sendet über Amazon einen SMS Text an den App-Administrator. SNS

Deklarieren Sie in der submitData Funktion Variablen für die Zieltelefonnummer, die auf der App-Oberfläche eingegebenen Werte und für den Namen des Amazon S3 S3-Buckets. Erstellen Sie als Nächstes ein Parameter-Objekt zum Hinzufügen eines Elements zur Tabelle. Wenn keiner der Werte leer ist, submitData fügt das Element der Tabelle hinzu und sendet die Nachricht. Denken Sie daran, die Funktion für den Browser verfügbar zu machen, 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
      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 finden Sie hier auf GitHub.

Führen Sie abschließend an der Befehlszeile den folgenden Befehl aus, um das JavaScript für dieses Beispiel in einer Datei mit dem Namen zu bündelnmain.js:

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

Um die App auszuführen, öffnen Sie sie index.html in Ihrem Browser.

Löschen Sie die Ressourcen

Wie bereits zu Beginn dieses Tutorials erwähnt, sollten Sie alle Ressourcen beenden, die Sie während der Bearbeitung dieses Tutorials erstellen, um sicherzustellen, dass Ihnen nichts in Rechnung gestellt wird. Sie können dies tun, indem Sie den AWS CloudFormation Stack, den Sie im Erstellen Sie die AWS Ressourcen Thema dieses Tutorials erstellt haben, wie folgt löschen:

Weitere AWS dienstübergreifende Beispiele finden Sie unter AWS SDK for JavaScript serviceübergreifende Beispiele.