AWS SDK for JavaScript V3 APIリファレンスガイドでは、バージョン 3 (V3) のすべてのAPIオペレーション AWS SDK for JavaScript について詳しく説明します。

翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

DynamoDB にデータを送信するアプリケーションを構築します

このクロスサービス Node.js チュートリアルでは、ユーザーが Amazon DynamoDB 表にデータの送信を有効にするアプリケーションを構築する方法について示します。このアプリケーションでは、次のサービスを使用します。

シナリオ

このチュートリアルでは、HTMLAmazon DynamoDB テーブルにデータを送信するためのブラウザベースのアプリケーションを提供します。ユーザーがテーブルを更新すると、アプリは Amazon を使用してアプリ管理者SNSに通知します。

前提条件

以下の前提条件を満たしてください。

AWS リソースを作成する

このアプリケーションは、次のリソースが必要になります。

これらのリソースは AWS コンソールで手動で作成できますが、このチュートリアルで説明されている AWS CloudFormation ように、 を使用してこれらのリソースをプロビジョニングすることをお勧めします。

を使用して AWS リソースを作成する AWS CloudFormation

AWS CloudFormation では、 AWS インフラストラクチャデプロイを予測可能かつ繰り返し作成およびプロビジョニングできます。の詳細については AWS CloudFormation、AWS CloudFormation 「 ユーザーガイド」を参照してください。

を使用して AWS CloudFormation スタックを作成するには AWS CLI：

表に入力します

テーブルにデータを入力するには、まず libs という名前のディレクトリを作成し、そこに dynamoClient.js という名前のファイルを作成し、それに以下の内容を貼り付けます。置換 REGION を AWS リージョンに置き換えます。IDENTITY_POOL_ID Amazon Cognito Identity Pool ID を持つ。これにより DynamoDB クライアントオブジェクトが作成されます。

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

このコードは、 で GitHub入手できます。

次に、プロジェクトdynamoAppHelperFilesフォルダにフォルダを作成し、そのフォルダupdate-table.jsにファイルを作成し、そのフォルダに GitHubコンテンツをコピーします。

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

コマンドラインから、以下のコマンドを実行します。

node update-table.js

このコードは、 で GitHub入手できます。

アプリケーションのフロントエンドページを作成します

ここでは、アプリケーションのフロントエンドHTMLブラウザページを作成します。

DynamoDBApp ディレクトリを作成し、 という名前のファイルを作成しindex.html、 のここからコードをコピーします GitHub。script 要素は main.js ファイルを追加します。これには、例に必要な JavaScriptすべての が含まれます。このチュートリアルの後半で、main.jsファイルを作成します。index.htmlの残りのコードは、ユーザーが入力するデータをキャプチャするブラウザページを作成します。

このサンプルコードは、「」で GitHub確認できます。

ブラウザスクリプトを作成

まず、この例に必要なサービスクライアントオブジェクトを作成します。libsディレクトリの作成、snsClient.jsを作成し、それに以下のコードをペーストします。置換 REGION また、IDENTITY_POOL_ID それぞれに。

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というフォルダに、ファイル名add_data.jsで Node.js モジュールを作成し、それに以下のコードをペーストします。このsubmitData関数は DynamoDB テーブルにデータを送信し、Amazon を使用してアプリケーション管理者にSMSテキストを送信します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
      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

アプリケーションを実行するには、ブラウザでindex.htmlを開きます。

リソースを削除します

このチュートリアルの冒頭で説明したように、このチュートリアルを進めるうえで作成したすべてのリソースを終了して料金が発生しないようにしてください。これを行うには、このチュートリアルのAWS リソースを作成する トピックで作成した AWS CloudFormation スタックを次のように削除します。

AWS クロスサービスの例については、AWS SDK for JavaScript 「クロスサービスの例」を参照してください。