Pilih preferensi cookie Anda

Kami menggunakan cookie penting serta alat serupa yang diperlukan untuk menyediakan situs dan layanan. Kami menggunakan cookie performa untuk mengumpulkan statistik anonim sehingga kami dapat memahami cara pelanggan menggunakan situs dan melakukan perbaikan. Cookie penting tidak dapat dinonaktifkan, tetapi Anda dapat mengklik “Kustom” atau “Tolak” untuk menolak cookie performa.

Jika Anda setuju, AWS dan pihak ketiga yang disetujui juga akan menggunakan cookie untuk menyediakan fitur situs yang berguna, mengingat preferensi Anda, dan menampilkan konten yang relevan, termasuk iklan yang relevan. Untuk menerima atau menolak semua cookie yang tidak penting, klik “Terima” atau “Tolak”. Untuk membuat pilihan yang lebih detail, klik “Kustomisasi”.

Membangun chatbot Amazon Lex - 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.

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 chatbot Amazon Lex

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.

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.

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

Chat interface showing Italian language exchange between user and Amazon Lex chatbot.

AWS Tutorial ini memandu Anda melalui pembuatan chatbot Amazon Lex dan mengintegrasikannya ke dalam aplikasi web Node.js. AWS SDK for 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.

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

Prasyarat

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 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 Alat 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. .

Namun, jika Anda lebih suka menggunakan sintaks CommonJS, silakan merujuk ke. JavaScript ES6/CommonJS sintaks

Buat sumber AWS daya

Tutorial ini membutuhkan sumber daya berikut.

  • Peran yang tidak diautentikasi IAM 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 AWS CloudFormation

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

Untuk membuat AWS CloudFormation tumpukan menggunakan AWS 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 CloudFormation Template dibuat menggunakan yang AWS CDK tersedia di sini GitHub. Untuk informasi selengkapnya tentang ini AWS CDK, lihat Panduan AWS Cloud Development Kit (AWS CDK) Pengembang.

  3. Jalankan perintah berikut dari baris perintah, ganti STACK_NAME 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, dan Panduan AWS CloudFormation Pengguna.

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

Buat bot Amazon Lex

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 BookTripdigunakan. Untuk informasi selengkapnya, lihat Pesan Perjalanan.

  • Masuk ke Amazon Web Services Management Console dan buka konsol Amazon Lex di Amazon Web Services Console.

  • Pada halaman Bots, pilih Buat.

  • Pilih BookTripcetak biru (tinggalkan nama bot default). BookTrip

    Interface for creating a chatbot, showing BookTrip sample with conversation flow and components.
  • Isi pengaturan default dan pilih Buat (konsol menunjukkan BookTripbot). 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.
  • Pilih Publikasikan dan tentukan nama alias (Anda akan memerlukan nilai ini saat menggunakan AWS SDK for JavaScript).

catatan

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

Buat HTML

Buat file bernama index.html. Salin dan tempel kode di bawah ini keindex.html. HTMLReferensi inimain.js. Ini adalah versi bundel dari index.js, yang mencakup AWS SDK for JavaScript modul yang diperlukan. Anda akan membuat file ini diBuat HTML. index.htmljuga referensistyle.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.

Buat skrip browser

Buat file bernama index.js. Salin dan tempel kode di bawah ini ke dalamindex.js. Impor AWS SDK for JavaScript modul dan perintah yang diperlukan. Buat klien untuk Amazon Lex, Amazon Comprehend, dan Amazon Translate. Ganti REGION dengan AWS wilayah, dan IDENTITY_POOL_ID dengan ID kumpulan identitas yang Anda buat diBuat sumber AWS daya . 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, dantranslateClient.js. Tempelkan kode yang sesuai di bawah ini ke masing-masing, dan ganti REGION and IDENTITY_POOL_ID di setiap file.

catatan

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

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. .

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

Ganti BOT_ALIAS and BOT_NAME dengan alias dan nama bot Amazon Lex Anda masing-masing, dan USER_ID dengan user id. 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. .

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

  1. Jika Anda belum melakukannya, ikuti contoh ini Prasyarat untuk menginstal webpack.

    catatan

    Untuk informasi tentang webpack, lihatBundel aplikasi dengan webpack.

  2. Jalankan yang berikut ini di baris perintah untuk menggabungkan JavaScript untuk contoh ini ke dalam file bernamamain.js:

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

Langkah selanjutnya

Selamat! 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 AWS CloudFormation tumpukan yang Anda buat dalam Buat sumber AWS daya topik tutorial ini, sebagai berikut:

  1. Buka konsol AWS CloudFormation.

  2. Pada halaman Stacks, pilih tumpukan.

  3. Pilih Hapus.

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

PrivasiSyarat situsPreferensi cookie
© 2025, Amazon Web Services, Inc. atau afiliasinya. Semua hak dilindungi undang-undang.