Membangun aplikasi untuk mengirimkan data ke DynamoDB - AWS SDK for JavaScript

Panduan API Referensi AWS SDK for JavaScript V3 menjelaskan secara rinci semua API operasi untuk AWS SDK for JavaScript versi 3 (V3).

Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

Membangun aplikasi untuk mengirimkan data ke DynamoDB

Tutorial Node.js lintas layanan ini menunjukkan cara membuat aplikasi yang memungkinkan pengguna mengirimkan data ke tabel Amazon DynamoDB. Aplikasi ini menggunakan layanan berikut:

  • AWS Identity and Access Management(IAM) dan Amazon Cognito untuk otorisasi dan izin.

  • Amazon DynamoDB (DynamoDB) untuk membuat dan memperbarui tabel.

  • Amazon Simple Notification Service (Amazon SNS) untuk memberi tahu administrator aplikasi saat pengguna memperbarui tabel.

Skenario

Dalam tutorial ini, halaman HTML menyediakan aplikasi berbasis browser untuk mengirimkan data ke tabel Amazon DynamoDB. Aplikasi ini menggunakan Amazon SNS untuk memberi tahu administrator aplikasi saat pengguna memperbarui tabel.

Hubungan antara antarmuka browser, SDK, dan AWS layanan di aplikasi data pengiriman.

Prasyarat

Selesaikan tugas prasyarat berikut:

  • Siapkan lingkungan proyek untuk menjalankan TypeScript contoh Node ini, dan instal modul yang diperlukan AWS SDK for JavaScript dan pihak ketiga. Ikuti instruksi pada GitHub.

  • Buat file konfigurasi bersama dengan kredensi pengguna Anda. Untuk informasi selengkapnya tentang menyediakan file kredensial bersama, lihat File konfigurasi dan kredensial bersama di Panduan Referensi AWSSDK dan Alat.

Buat sumber AWS daya

Aplikasi ini membutuhkan sumber daya berikut:

  • AWS Identity and Access Management(IAM) Peran pengguna Amazon Cognito yang tidak diautentikasi dengan izin berikut:

    • SNS:Publish

    • dinamodb: PutItem

  • Sebuah tabel DynamoDB.

Anda dapat membuat sumber daya ini secara manual di AWS konsol, tetapi kami sarankan untuk menyediakan sumber daya ini menggunakan AWS CloudFormation seperti yang dijelaskan dalam tutorial ini.

Buat sumber AWS daya menggunakan AWS CloudFormation

AWS CloudFormationmemungkinkan Anda untuk membuat dan menyediakan penyebaran AWS infrastruktur yang dapat diprediksi dan berulang kali. Untuk informasi selengkapnya tentang AWS CloudFormation, lihat AWS CloudFormationPanduan Pengguna .

Untuk membuat AWS CloudFormation tumpukan menggunakanAWS CLI:

  1. Instal dan konfigurasikan petunjuk AWS CLI berikut di Panduan AWS CLI Pengguna.

  2. Buat file bernama setup.yaml di direktori root folder proyek Anda, dan salin konten di sini GitHub ke dalamnya.

    catatan

    AWS CloudFormationTemplate dibuat menggunakan yang AWS CDK tersedia di sini GitHub. Untuk informasi selengkapnya tentang AWS CDK, lihat Panduan Developer AWS Cloud Development Kit (AWS CDK).

  3. Jalankan perintah berikut dari baris perintah, ganti STACK_NAME dengan nama unik untuk tumpukan, dan REGION di wilayah Anda. AWS

    penting

    Nama tumpukan harus unik dalam AWS Wilayah dan AWS akun. Anda dapat menentukan hingga 128 karakter, dan angka serta tanda hubung diizinkan.

    aws cloudformation create-stack --stack-name STACK_NAME --template-body file://setup.yaml --capabilities CAPABILITY_IAM --region REGION

    Untuk informasi selengkapnya tentang parameter create-stack perintah, lihat panduan Referensi AWS CLI Perintah, dan Panduan AWS CloudFormation Pengguna.

    Untuk melihat sumber daya yang dibuat, buka AWS CloudFormation di konsol AWS manajemen, pilih tumpukan, dan pilih tab Sumber Daya.

  4. Saat tumpukan dibuat, gunakan AWS SDK for JavaScript untuk mengisi tabel DynamoDB, seperti yang dijelaskan dalam. Mengisi tabel

Mengisi tabel

Untuk mengisi tabel, pertama membuat direktori bernamalibs, dan di dalamnya membuat file bernamadynamoClient.js, dan paste konten di bawah ini ke dalamnya. Ganti REGION dengan AWS Region Anda, dan ganti IDENTITY_POOL_ID dengan ID Kumpulan Identitas Amazon Cognito. Ini menciptakan objek klien 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 };

Kode ini tersedia di sini GitHub.

Selanjutnya, buat dynamoAppHelperFiles folder di folder proyek Anda, buat file update-table.js di dalamnya, dan salin konten di sini GitHub ke dalamnya.

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

Jalankan perintah berikut dari baris perintah.

node update-table.js

Kode ini tersedia di sini GitHub.

Buat halaman front-end untuk aplikasi

Di sini Anda membuat halaman browser HTML front-end untuk aplikasi.

Buat DynamoDBApp direktori, buat file bernamaindex.html, dan salin kode dari sini GitHub. scriptElemen menambahkan main.js file, yang berisi semua yang diperlukan JavaScript untuk contoh. Anda akan membuat main.js file nanti dalam tutorial ini. Kode yang tersisa di index.html membuat halaman browser yang menangkap data yang dimasukkan pengguna.

Kode contoh ini dapat ditemukan di sini GitHub.

Buat skrip browser

Pertama, buat objek klien layanan yang diperlukan untuk contoh. Buat libs direktori, buatsnsClient.js, dan tempel kode di bawah ini ke dalamnya. Ganti REGION dan IDENTITY_POOL_ID di masing-masing.

catatan

Gunakan ID kumpulan identitas Amazon Cognito yang Anda buat. Buat sumber AWS daya

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

Kode ini tersedia di sini GitHub. .

Untuk membuat skrip browser untuk contoh ini, dalam folder bernamaDynamoDBApp, buat modul Node.js dengan nama file add_data.js dan tempel kode di bawah ini ke dalamnya. submitDataFungsi mengirimkan data ke tabel DynamoDB, dan mengirimkan teks SMS ke administrator aplikasi menggunakan Amazon SNS.

Dalam submitData fungsi tersebut, deklarasikan variabel untuk nomor telepon target, nilai yang dimasukkan pada antarmuka aplikasi, dan untuk nama bucket Amazon S3. Selanjutnya, buat objek parameter untuk menambahkan item ke tabel. Jika tidak ada nilai yang kosong, submitData tambahkan item ke tabel, dan kirim pesan. Ingatlah untuk membuat fungsi tersedia untuk browser, denganwindow.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;

Kode contoh ini dapat ditemukan di sini GitHub.

Akhirnya, jalankan yang berikut ini pada command prompt untuk bundel JavaScript untuk contoh ini dalam file bernamamain.js:

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

Untuk informasi tentang menginstal webpack, lihatBundel aplikasi dengan webpack.

Untuk menjalankan aplikasi, buka index.html di browser Anda.

Hapus sumber daya

Seperti yang dinyatakan di awal tutorial ini, pastikan untuk menghentikan semua sumber daya yang Anda buat saat melalui tutorial ini untuk memastikan bahwa Anda tidak dikenakan biaya. Anda dapat melakukan ini dengan menghapus AWS CloudFormation tumpukan yang Anda buat dalam Buat sumber AWS daya topik tutorial ini, sebagai berikut:

  1. Buka AWS CloudFormationdi konsol AWS manajemen.

  2. Buka halaman Stacks, dan pilih tumpukan.

  3. Pilih Hapus.

Untuk contoh AWS lintas layanan lainnya, lihat contoh AWS SDK for JavaScriptlintas layanan.