O [Guia de referência da API do AWS SDK para JavaScript V3](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/) descreve em detalhes todas as operações da API para o AWS SDK para JavaScript versão 3 (V3).
As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.
# Criar um chatbot do Amazon Lex
Você pode criar um chatbot do Amazon Lex em um aplicativo Web para engajar os visitantes do seu site. Um chatbot do Amazon Lex é uma funcionalidade que realiza conversas de chat online com os usuários sem fornecer contato direto com uma pessoa. Por exemplo, a ilustração a seguir mostra um chatbot do Amazon Lex que envolve um usuário para reservar um quarto de hotel.
![\[Chatbot interface demonstrating a hotel booking conversation with user inputs and bot responses.\]](http://docs.aws.amazon.com/pt_br/sdk-for-javascript/v3/developer-guide/images/lex_example/chatintro.png)
O chatbot Amazon Lex criado neste AWS tutorial é capaz de lidar com vários idiomas. Por exemplo, um usuário que fala francês pode inserir um texto em francês e receber uma resposta em francês.
![\[Chatbot interface demonstrating Amazon Lex integration with French language support.\]](http://docs.aws.amazon.com/pt_br/sdk-for-javascript/v3/developer-guide/images/lex_example/LanChatBot2.png)
Da mesma forma, um usuário pode se comunicar com o chatbot do Amazon Lex em italiano.
![\[Chat interface showing Italian language exchange between user and Amazon Lex chatbot.\]](http://docs.aws.amazon.com/pt_br/sdk-for-javascript/v3/developer-guide/images/lex_example/LanChatBot3.png)
Este AWS tutorial orienta você na criação de um chatbot do Amazon Lex e na integração dele a um aplicativo web Node.js. O AWS SDK para JavaScript (v3) é usado para invocar esses AWS serviços:
+ Amazon Lex
+ Amazon Comprehend
+ Amazon Translate
**Custo de conclusão:** os AWS serviços incluídos neste documento estão incluídos no [nível AWS gratuito](https://aws.amazon.com/free/?all-free-tier.sort-by=item.additionalFields.SortRank&all-free-tier.sort-order=asc).
**Observação:** certifique-se de encerrar todos os recursos que você cria ao passar por este tutorial para garantir que você não seja cobrado.
**Para criar o aplicativo:**
1. [Pré-requisitos](#lex-bot-example-prerequisites)
1. [Provisionar recursos](#lex-bot-provision-resources)
1. [Criar um chatbot do Amazon Lex](#lex-bot-example-create-lex-bot)
1. [Criar o HTML](#lex-bot-example-html)
1. [Criar o script do navegador](#lex-bot-example-script)
1. [Próximas etapas](#lex-bot-example-next-steps)
## Pré-requisitos
Para configurar e executar este exemplo, você deve primeiro concluir estas tarefas:
+ Configure o ambiente do projeto para executar esses TypeScript exemplos de Node e instale os módulos necessários AWS SDK para JavaScript e de terceiros. Siga as instruções em [ GitHub](https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/javascriptv3/example_code/cross-services/lambda-scheduled-events/README.md).
+ Crie um arquivo de configurações compartilhado com as credenciais de usuário. Para obter mais informações sobre como fornecer um arquivo de credenciais compartilhado, consulte [Arquivos de configuração e credenciais compartilhados](https://docs.aws.amazon.com/sdkref/latest/guide/file-format.html) no Guia de referência de *ferramentas AWS SDKs e ferramentas*.
**Importante**
Este exemplo usa ECMAScript6 (ES6). Isso requer o Node.js versão 13.x ou superior. Para baixar e instalar a versão mais recente do Node.js, consulte [Downloads do Node.js](https://nodejs.org/en/download).
No entanto, se você preferir usar a sintaxe CommonJS, consulte [Sintaxe ES6/CommonJS de JavaScript](sdk-example-javascript-syntax.md).
## Crie os AWS recursos
Este tutorial requer os seguintes recursos:
+ Um perfil do IAM não autenticado com permissões anexadas para:
+ Amazon Comprehend
+ Amazon Translate
+ Amazon Lex
Você pode criar esses recursos manualmente, mas recomendamos provisionar esses recursos usando AWS CloudFormation conforme descrito neste tutorial.
### Crie os AWS recursos usando CloudFormation
CloudFormation permite que você crie e provisione implantações de AWS infraestrutura de forma previsível e repetida. Para obter mais informações sobre CloudFormation, consulte o [Guia AWS CloudFormation do usuário](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/).
Para criar a CloudFormation pilha usando o AWS CLI:
1. Instale e configure as instruções a AWS CLI seguir no [Guia AWS CLI do usuário](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-welcome.html).
1. Crie um arquivo chamado `setup.yaml` no diretório raiz da pasta do seu projeto e copie o conteúdo [aqui GitHub](https://github.com/awsdocs/aws-doc-sdk-examples/blob/main/javascriptv3/example_code/cross-services/lex-bot/setup.yaml) para dentro dele.
**nota**
O CloudFormation modelo foi gerado usando o AWS CDK disponível [aqui em GitHub](https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/resources/cdk/lex_bot_example_iam_unauth_role). Para obter mais informações sobre o AWS CDK, consulte o [Guia do AWS Cloud Development Kit (AWS CDK) desenvolvedor](https://docs.aws.amazon.com/cdk/latest/guide/).
1. Execute o comando a seguir na linha de comando, *STACK\$1NAME* substituindo-o por um nome exclusivo para a pilha.
**Importante**
O nome da pilha deve ser exclusivo dentro de uma AWS região e AWS conta. Você pode especificar até 128 caracteres. São permitidos números e hifens.
```
aws cloudformation create-stack --stack-name STACK_NAME --template-body file://setup.yaml --capabilities CAPABILITY_IAM
```
Para obter mais informações sobre os parâmetros do comando `create-stack`, consulte o [Guia de referência de comandos da AWS CLI](https://docs.aws.amazon.com/cli/latest/reference/cloudformation/create-stack.html) e o [Guia do usuário do CloudFormation](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/using-cfn-cli-creating-stack.html).
Para visualizar os recursos criados, abra o console do Amazon Lex, escolha a pilha e selecione a guia **Recursos**.
## Criar um bot do Amazon Lex
**Importante**
Use a V1 do console do Amazon Lex para criar o bot. Este exemplo não funciona com bots criados usando a V2.
A primeira etapa é criar um chatbot do Amazon Lex usando o Console de Gerenciamento da Amazon Web Services. Neste exemplo, o **BookTrip**exemplo do Amazon Lex é usado. Para obter mais informações, consulte [Reservar viagem](https://docs.aws.amazon.com/lex/latest/dg/ex-book-trip.html).
+ Faça login no Console de Gerenciamento da Amazon Web Services e abra o console do Amazon Lex no [Console da Amazon Web Services](https://console.aws.amazon.com/lex/).
+ Na página Bots, selecione **Criar**.
+ Escolha o **BookTrip**blueprint (deixe o nome padrão do bot **BookTrip**).
![\[Interface for creating a chatbot, showing BookTrip sample with conversation flow and components.\]](http://docs.aws.amazon.com/pt_br/sdk-for-javascript/v3/developer-guide/images/lex_example/pic2.png)
+ Preencha as configurações padrão e escolha **Criar** (o console mostra o **BookTrip**bot). Na guia Editor, analise os detalhes das intenções pré-configuradas.
+ Teste o bot na janela de teste. Comece o teste digitando *Quero reservar um quarto de hotel*.
![\[Chat interface showing a hotel booking conversation with a bot asking for the city.\]](http://docs.aws.amazon.com/pt_br/sdk-for-javascript/v3/developer-guide/images/lex_example/ChatBotTest.png)
+ Escolha **Publicar** e especifique um nome de alias (você precisará desse valor ao usar o AWS SDK para JavaScript).
**nota**
Você precisa referenciar o **nome** e o **alias do bot** em seu JavaScript código.
## Criar o HTML
Crie um arquivo chamado `index.html`. Copie e cole o código abaixo em`index.html`. Esse HTML faz referência a `main.js`. Essa é uma versão integrada do index.js, que inclui os AWS SDK para JavaScript módulos necessários. Você criará esse arquivo em [Criar o HTML](#lex-bot-example-html). `index.html` também faz referência a `style.css`, o qual adiciona os estilos.
```
Amazon Lex - Sample Application (BookTrip)
Amazon Lex - BookTrip
This multiple language chatbot shows you how easy it is to incorporate
Amazon Lex
into your web apps. Try it out.
```
Esse código também está disponível [aqui em GitHub](https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/resources/cdk#running-a-cdk-app).
## Criar o script do navegador
Crie um arquivo chamado `index.js`. Copie e cole o código abaixo em `index.js`. Importe os AWS SDK para JavaScript módulos e comandos necessários. Crie clientes para o Amazon Lex, o Amazon Comprehend e o Amazon Translate. *REGION*Substitua por AWS Região e *IDENTITY\$1POOL\$1ID* pelo ID do grupo de identidades que você criou no[Crie os AWS recursos](#lex-bot-provision-resources). Para recuperar esse ID do banco de identidades, abra o banco de identidades no console do Amazon Cognito, escolha **Editar grupo de identidades** e selecione **Código de exemplo** no menu lateral. O ID do banco de identidades é mostrado em vermelho no console.
Primeiro, crie um diretório `libs` e crie os objetos de cliente de serviço necessários criando três arquivos: `comprehendClient.js`, `lexClient.js` e `translateClient.js`. Cole o código apropriado abaixo em cada um e substitua *REGION* e *IDENTITY\$1POOL\$1ID* em cada arquivo.
**nota**
Use o ID do banco de identidades do Amazon Cognito que você criou em [Crie os AWS recursos usando 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 };
```
Esse código está disponível [aqui em GitHub.](https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/javascriptv3/example_code/cross-services/lex-bot/src/libs) .
Em seguida, crie um arquivo `index.js` e cole o código abaixo nele.
Substitua *BOT\$1ALIAS* e *BOT\$1NAME* pelo alias e nome do seu bot Amazon Lex, respectivamente, e *USER\$1ID* por um ID de usuário. A função assíncrona `createResponse` faz o seguinte:
+ Pega o texto inserido pelo usuário no navegador e usa o Amazon Comprehend para determinar seu código de idioma.
+ Pega o código do idioma e usa o Amazon Translate para traduzir o texto para o inglês.
+ Pega o texto traduzido e usa o Amazon Lex para gerar uma resposta.
+ Publica a resposta na página do navegador.
```
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;
```
Esse código está disponível [aqui em GitHub.](https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/javascriptv3/example_code/cross-services/lex-bot/src/index.html) .
Agora use o webpack para agrupar os AWS SDK para JavaScript módulos `index.js` e em um único arquivo,. `main.js`
1. Caso ainda não tenha feito isso, siga as instruções descritas em [Pré-requisitos](#lex-bot-example-prerequisites) para este exemplo para instalar o webpack.
**nota**
Para obter informações sobre o *webpack*, consulte [Empacotar aplicativos com o webpack](webpack.md).
1. Execute o seguinte na linha de comando para agrupar o deste JavaScript exemplo em um arquivo chamado`main.js`:
```
webpack index.js --mode development --target web --devtool false -o main.js
```
## Próximas etapas
Parabéns\$1 Você criou um aplicativo Node.js que usa o Amazon Lex para criar uma experiência de usuário interativa. Conforme informado no início deste tutorial, certifique-se de encerrar todos os recursos que criar enquanto percorre este tutorial para garantir que você não seja cobrado. Você pode fazer isso excluindo a CloudFormation pilha que você criou no [Crie os AWS recursos](#lex-bot-provision-resources) tópico deste tutorial, da seguinte forma:
1. Abra o [console do CloudFormation]( https://console.aws.amazon.com/cloudformation/home).
1. Na página **Pilhas**, selecione a pilha.
1. Escolha **Excluir**.
Para obter mais exemplos AWS de serviços cruzados, consulte exemplos de [AWS SDK para JavaScript serviços cruzados](https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/tutorials.html).