[Panduan Referensi API AWS SDK untuk JavaScript V3](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/) menjelaskan secara rinci semua operasi API untuk AWS SDK untuk 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 chatbot Amazon Lex
<a name="lex-bot-example"></a>

Anda dapat membuat chatbot Amazon Lex dalam aplikasi web untuk melibatkan pengunjung situs web Anda. Chatbot Amazon Lex adalah fungsi yang melakukan percakapan obrolan online dengan pengguna tanpa memberikan kontak langsung dengan seseorang. Misalnya, ilustrasi berikut menunjukkan chatbot Amazon Lex yang melibatkan pengguna tentang pemesanan kamar hotel.

![\[Chatbot interface demonstrating a hotel booking conversation with user inputs and bot responses.\]](http://docs.aws.amazon.com/id_id/sdk-for-javascript/v3/developer-guide/images/lex_example/chatintro.png)


Chatbot Amazon Lex yang dibuat dalam AWS tutorial ini mampu menangani beberapa bahasa. Misalnya, pengguna yang berbicara bahasa Prancis dapat memasukkan teks Prancis dan mendapatkan kembali tanggapan dalam bahasa Prancis.

![\[Chatbot interface demonstrating Amazon Lex integration with French language support.\]](http://docs.aws.amazon.com/id_id/sdk-for-javascript/v3/developer-guide/images/lex_example/LanChatBot2.png)


Demikian juga, pengguna dapat berkomunikasi dengan chatbot Amazon Lex dalam bahasa Italia.

![\[Chat interface showing Italian language exchange between user and Amazon Lex chatbot.\]](http://docs.aws.amazon.com/id_id/sdk-for-javascript/v3/developer-guide/images/lex_example/LanChatBot3.png)


 AWS Tutorial ini memandu Anda melalui pembuatan chatbot Amazon Lex dan mengintegrasikannya ke dalam aplikasi web Node.js. AWS SDK untuk JavaScript (v3) digunakan untuk memanggil layanan ini AWS :
+ Amazon Lex
+ Amazon Comprehend
+ Amazon Translate

**Biaya untuk menyelesaikan:** AWS Layanan yang termasuk dalam dokumen ini termasuk dalam [Tingkat AWS Gratis](https://aws.amazon.com/free/?all-free-tier.sort-by=item.additionalFields.SortRank&all-free-tier.sort-order=asc).

**Catatan:** Pastikan untuk menghentikan semua sumber daya yang Anda buat saat mengikuti tutorial ini untuk memastikan bahwa Anda tidak dikenakan biaya.

**Untuk membangun aplikasi:**

1. [Prasyarat](#lex-bot-example-prerequisites)

1. [Sumber daya penyediaan](#lex-bot-provision-resources)

1. [Buat chatbot Amazon Lex](#lex-bot-example-create-lex-bot)

1. [Buat HTML](#lex-bot-example-html)

1. [Buat skrip browser](#lex-bot-example-script)

1. [Langkah selanjutnya](#lex-bot-example-next-steps)

## Prasyarat
<a name="lex-bot-example-prerequisites"></a>

Untuk mengatur dan menjalankan contoh ini, Anda harus terlebih dahulu menyelesaikan tugas-tugas ini:
+ Siapkan lingkungan proyek untuk menjalankan TypeScript contoh Node ini, dan instal modul yang diperlukan AWS SDK untuk JavaScript dan pihak ketiga. Ikuti instruksi pada [ GitHub](https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/javascriptv3/example_code/cross-services/lambda-scheduled-events/README.md).
+ 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 Alat](https://docs.aws.amazon.com/sdkref/latest/guide/file-format.html) dan Alat.AWS SDKs *

**penting**  
Contoh ini menggunakan ECMAScript6 (ES6). Ini membutuhkan Node.js versi 13.x atau lebih tinggi. Untuk mengunduh dan menginstal versi terbaru dari Node.js, lihat [unduhan Node.js.](https://nodejs.org/en/download) .  
Namun, jika Anda lebih suka menggunakan sintaks CommonJS, silakan merujuk ke. [JavaScript ES6/CommonJS sintaks](sdk-example-javascript-syntax.md)

## Buat sumber AWS daya
<a name="lex-bot-provision-resources"></a>

Tutorial ini membutuhkan sumber daya berikut.
+ Peran IAM yang tidak diautentikasi dengan izin terlampir untuk:
  + Amazon Comprehend
  + Amazon Translate
  + Amazon Lex

Anda dapat membuat sumber daya ini secara manual, tetapi kami merekomendasikan penyediaan sumber daya ini menggunakan AWS CloudFormation seperti yang dijelaskan dalam tutorial ini.

### Buat sumber AWS daya menggunakan CloudFormation
<a name="lex-bot-example-resources-cli"></a>

CloudFormation memungkinkan Anda untuk membuat dan menyediakan penyebaran AWS infrastruktur yang dapat diprediksi dan berulang kali. Untuk informasi selengkapnya CloudFormation, lihat [Panduan AWS CloudFormation Pengguna](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/).

Untuk membuat CloudFormation tumpukan menggunakan AWS CLI:

1. Instal dan konfigurasikan petunjuk AWS CLI berikut di [Panduan AWS CLI Pengguna](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-welcome.html).

1. Buat file bernama `setup.yaml` di direktori root folder proyek Anda, dan salin konten [di sini GitHub](https://github.com/awsdocs/aws-doc-sdk-examples/blob/main/javascriptv3/example_code/cross-services/lex-bot/setup.yaml) ke dalamnya.
**catatan**  
 CloudFormation Template dibuat menggunakan yang AWS CDK tersedia [di sini GitHub](https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/resources/cdk/lex_bot_example_iam_unauth_role). Untuk informasi selengkapnya tentang AWS CDK, lihat [Panduan AWS Cloud Development Kit (AWS CDK) Pengembang](https://docs.aws.amazon.com/cdk/latest/guide/).

1. Jalankan perintah berikut dari baris perintah, ganti *STACK\$1NAME* dengan nama unik untuk tumpukan.
**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
   ```

   Untuk informasi selengkapnya tentang parameter `create-stack` perintah, lihat [panduan Referensi AWS CLI Perintah](https://docs.aws.amazon.com/cli/latest/reference/cloudformation/create-stack.html), dan [Panduan CloudFormation Pengguna](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/using-cfn-cli-creating-stack.html).

   Untuk melihat sumber daya yang dibuat, buka konsol Amazon Lex, pilih tumpukan, dan pilih tab **Sumber Daya**.

## Buat bot Amazon Lex
<a name="lex-bot-example-create-lex-bot"></a>

**penting**  
Gunakan V1 dari konsol Amazon Lex untuk membuat bot. Contoh ini tidak berfungsi dengan bot yang dibuat menggunakan V2.

Langkah pertama adalah membuat chatbot Amazon Lex dengan menggunakan Amazon Web Services Management Console. Dalam contoh ini, contoh Amazon Lex **BookTrip**digunakan. Untuk informasi selengkapnya, lihat [Pesan Perjalanan](https://docs.aws.amazon.com/lex/latest/dg/ex-book-trip.html).
+ Masuk ke Amazon Web Services Management Console dan buka konsol Amazon Lex di [Amazon Web Services Console](https://console.aws.amazon.com/lex/).
+ Pada halaman Bots, pilih **Buat**.
+ Pilih **BookTrip**cetak biru (tinggalkan nama bot default). **BookTrip**  
![\[Interface for creating a chatbot, showing BookTrip sample with conversation flow and components.\]](http://docs.aws.amazon.com/id_id/sdk-for-javascript/v3/developer-guide/images/lex_example/pic2.png)
+ Isi pengaturan default dan pilih **Buat** (konsol menunjukkan **BookTrip**bot). Pada tab Editor, tinjau detail maksud yang telah dikonfigurasi sebelumnya.
+ Uji bot di jendela uji. Mulai tes dengan mengetik *Saya ingin memesan kamar hotel*.  
![\[Chat interface showing a hotel booking conversation with a bot asking for the city.\]](http://docs.aws.amazon.com/id_id/sdk-for-javascript/v3/developer-guide/images/lex_example/ChatBotTest.png)
+ Pilih **Publikasikan** dan tentukan nama alias (Anda akan memerlukan nilai ini saat menggunakan AWS SDK untuk JavaScript).

**catatan**  
 Anda perlu mereferensikan **nama bot** dan **alias bot** dalam JavaScript kode Anda.

## Buat HTML
<a name="lex-bot-example-html"></a>

Buat file bernama `index.html`. Salin dan tempel kode di bawah ini ke`index.html`. Referensi HTML ini`main.js`. Ini adalah versi bundel dari index.js, yang mencakup AWS SDK untuk JavaScript modul yang diperlukan. Anda akan membuat file ini di[Buat HTML](#lex-bot-example-html). `index.html`juga referensi`style.css`, yang menambahkan gaya. 

```
<!doctype html>
<head>
  <title>Amazon Lex - Sample Application (BookTrip)</title>
  <link type="text/css" rel="stylesheet" href="style.css" />
</head>

<body>
  <h1 id="title">Amazon Lex - BookTrip</h1>
  <p id="intro">
    This multiple language chatbot shows you how easy it is to incorporate
    <a
      href="https://aws.amazon.com/lex/"
      title="Amazon Lex (product)"
      target="_new"
      >Amazon Lex</a
    >
    into your web apps. Try it out.
  </p>
  <div id="conversation"></div>
  <input
    type="text"
    id="wisdom"
    size="80"
    value=""
    placeholder="J'ai besoin d'une chambre d'hôtel"
  />
  <br />
  <button onclick="createResponse()">Send Text</button>
  <script type="text/javascript" src="./main.js"></script>
</body>
```

Kode ini juga tersedia [di sini GitHub](https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/resources/cdk#running-a-cdk-app).

## Buat skrip browser
<a name="lex-bot-example-script"></a>

Buat file bernama `index.js`. Salin dan tempel kode di bawah ini ke dalam`index.js`. Impor AWS SDK untuk JavaScript modul dan perintah yang diperlukan. Buat klien untuk Amazon Lex, Amazon Comprehend, dan Amazon Translate. Ganti *REGION* dengan AWS Region, dan *IDENTITY\$1POOL\$1ID* dengan ID kumpulan identitas yang Anda buat di[Buat sumber AWS daya](#lex-bot-provision-resources). Untuk mengambil ID kumpulan identitas ini, buka kumpulan identitas di konsol Amazon Cognito, **pilih Edit kumpulan identitas**, dan **pilih Contoh** kode di menu samping. ID kumpulan identitas ditampilkan dalam teks merah di konsol.

Pertama, buat `libs` direktori buat objek klien layanan yang diperlukan dengan membuat tiga file,`comprehendClient.js`,`lexClient.js`, dan`translateClient.js`. Tempelkan kode yang sesuai di bawah ini ke masing-masing, *REGION* dan ganti dan *IDENTITY\$1POOL\$1ID* di setiap file.

**catatan**  
Gunakan ID kumpulan identitas Amazon Cognito yang Anda buat. [Buat sumber AWS daya menggunakan CloudFormation](#lex-bot-example-resources-cli)

```
import { CognitoIdentityClient } from "@aws-sdk/client-cognito-identity";
import { fromCognitoIdentityPool } from "@aws-sdk/credential-provider-cognito-identity";
import { ComprehendClient } from "@aws-sdk/client-comprehend";

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

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

export { comprehendClient };
```

```
import { CognitoIdentityClient } from "@aws-sdk/client-cognito-identity";
import { fromCognitoIdentityPool } from "@aws-sdk/credential-provider-cognito-identity";
import { LexRuntimeServiceClient } from "@aws-sdk/client-lex-runtime-service";

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

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

export { lexClient };
```

```
import { CognitoIdentityClient } from "@aws-sdk/client-cognito-identity";
import { fromCognitoIdentityPool } from "@aws-sdk/credential-provider-cognito-identity";
import { TranslateClient } from "@aws-sdk/client-translate";

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

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

export { translateClient };
```

Kode ini tersedia [di sini GitHub.](https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/javascriptv3/example_code/cross-services/lex-bot/src/libs) .

Selanjutnya, buat `index.js` file, dan tempel kode di bawah ini ke dalamnya.

 Ganti *BOT\$1ALIAS* dan *BOT\$1NAME* dengan alias dan nama bot Amazon Lex Anda masing-masing, dan *USER\$1ID* dengan id pengguna. Fungsi `createResponse` asinkron melakukan hal berikut:
+ Mengambil teks yang dimasukkan oleh pengguna ke browser dan menggunakan Amazon Comprehend untuk menentukan kode bahasanya.
+ Mengambil kode bahasa dan menggunakan Amazon Translate untuk menerjemahkan teks ke dalam bahasa Inggris.
+ Mengambil teks yang diterjemahkan dan menggunakan Amazon Lex untuk menghasilkan respons.
+ Memposting respons ke halaman browser.

```
import { DetectDominantLanguageCommand } from "@aws-sdk/client-comprehend";
import { TranslateTextCommand } from "@aws-sdk/client-translate";
import { PostTextCommand } from "@aws-sdk/client-lex-runtime-service";
import { lexClient } from "./libs/lexClient.js";
import { translateClient } from "./libs/translateClient.js";
import { comprehendClient } from "./libs/comprehendClient.js";

let g_text = "";
// Set the focus to the input box.
document.getElementById("wisdom").focus();

function showRequest() {
  const conversationDiv = document.getElementById("conversation");
  const requestPara = document.createElement("P");
  requestPara.className = "userRequest";
  requestPara.appendChild(document.createTextNode(g_text));
  conversationDiv.appendChild(requestPara);
  conversationDiv.scrollTop = conversationDiv.scrollHeight;
}

function showResponse(lexResponse) {
  const conversationDiv = document.getElementById("conversation");
  const responsePara = document.createElement("P");
  responsePara.className = "lexResponse";

  const lexTextResponse = lexResponse;

  responsePara.appendChild(document.createTextNode(lexTextResponse));
  responsePara.appendChild(document.createElement("br"));
  conversationDiv.appendChild(responsePara);
  conversationDiv.scrollTop = conversationDiv.scrollHeight;
}

function handletext(text) {
  g_text = text;
  const xhr = new XMLHttpRequest();
  xhr.addEventListener("load", loadNewItems, false);
  xhr.open("POST", "../text", true); // A Spring MVC controller
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //necessary
  xhr.send(`text=${text}`);
}

function loadNewItems() {
  showRequest();

  // Re-enable input.
  const wisdomText = document.getElementById("wisdom");
  wisdomText.value = "";
  wisdomText.locked = false;
}

// Respond to user's input.
const createResponse = async () => {
  // Confirm there is text to submit.
  const wisdomText = document.getElementById("wisdom");
  if (wisdomText?.value && wisdomText.value.trim().length > 0) {
    // Disable input to show it is being sent.
    const wisdom = wisdomText.value.trim();
    wisdomText.value = "...";
    wisdomText.locked = true;
    handletext(wisdom);

    const comprehendParams = {
      Text: wisdom,
    };
    try {
      const data = await comprehendClient.send(
        new DetectDominantLanguageCommand(comprehendParams),
      );
      console.log(
        "Success. The language code is: ",
        data.Languages[0].LanguageCode,
      );
      const translateParams = {
        SourceLanguageCode: data.Languages[0].LanguageCode,
        TargetLanguageCode: "en", // For example, "en" for English.
        Text: wisdom,
      };
      try {
        const data = await translateClient.send(
          new TranslateTextCommand(translateParams),
        );
        console.log("Success. Translated text: ", data.TranslatedText);
        const lexParams = {
          botName: "BookTrip",
          botAlias: "mynewalias",
          inputText: data.TranslatedText,
          userId: "chatbot", // For example, 'chatbot-demo'.
        };
        try {
          const data = await lexClient.send(new PostTextCommand(lexParams));
          console.log("Success. Response is: ", data.message);
          const msg = data.message;
          showResponse(msg);
        } catch (err) {
          console.log("Error responding to message. ", err);
        }
      } catch (err) {
        console.log("Error translating text. ", err);
      }
    } catch (err) {
      console.log("Error identifying language. ", err);
    }
  }
};
// Make the function available to the browser.
window.createResponse = createResponse;
```

Kode ini tersedia [di sini GitHub.](https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/javascriptv3/example_code/cross-services/lex-bot/src/index.html) .

Sekarang gunakan webpack untuk menggabungkan AWS SDK untuk JavaScript modul `index.js` dan ke dalam satu file,`main.js`.

1. Jika Anda belum melakukannya, ikuti contoh ini [Prasyarat](#lex-bot-example-prerequisites) untuk menginstal webpack. 
**catatan**  
Untuk informasi tentang *webpack*, lihat[Bundel aplikasi dengan webpack](webpack.md).

1. Jalankan yang berikut ini di baris perintah untuk menggabungkan JavaScript untuk contoh ini ke dalam file bernama`main.js`:

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

## Langkah selanjutnya
<a name="lex-bot-example-next-steps"></a>

Selamat\$1 Anda telah membuat aplikasi Node.js yang menggunakan Amazon Lex untuk menciptakan pengalaman pengguna yang interaktif. 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 CloudFormation tumpukan yang Anda buat dalam [Buat sumber AWS daya](#lex-bot-provision-resources) topik tutorial ini, sebagai berikut:

1. Buka [konsol CloudFormation]( https://console.aws.amazon.com/cloudformation/home).

1. Pada halaman **Stacks**, pilih tumpukan.

1. Pilih **Hapus**.

Untuk contoh AWS lintas layanan lainnya, lihat contoh [AWS SDK untuk JavaScript lintas layanan](https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/tutorials.html).