Pré-requisitos Criar os recursos da AWS Criar um bot do Amazon Lex Criar o HTML Criar o script do navegador Próximas etapas

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.

O chatbot do Amazon Lex criado neste tutorial da AWS está acessível em 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.

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.

Este tutorial da AWS 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 estes serviços da AWS:

Amazon Lex
Amazon Comprehend
Amazon Translate

Custo para concluir: os serviços da AWS incluídos neste documento estão incluídos no Nível gratuito da AWS.

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.

Pré-requisitos

Para configurar e executar este exemplo, você deve primeiro concluir estas tarefas:

Configure o ambiente do projeto para executar estes exemplos do Node TypeScript e instale os módulos do AWS SDK para JavaScript e de terceiros necessários. Siga as instruções no GitHub.
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 no Guia de referência de ferramentas e SDKs da AWS.

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.

No entanto, se você preferir usar a sintaxe CommonJS, consulte Sintaxe ES6/CommonJS de JavaScript.

Criar os recursos da AWS

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 provisioná-los usando o AWS CloudFormation conforme descrito neste tutorial.

Criar os recursos da AWS usando o CloudFormation

O CloudFormation permite que você crie e provisione implantações de infraestrutura da AWS de maneira previsível e repetida. Para obter mais informações sobre o CloudFormation, consulte o Guia do usuário do AWS CloudFormation.

Para criar a pilha CloudFormation usando a AWS CLI:

Instale e configure a AWS CLI seguindo as instruções no Guia do usuário da AWS CLI.
Crie um arquivo chamado setup.yaml no diretório raiz da pasta do projeto e copie o conteúdo aqui no GitHub para ele.
nota
O modelo CloudFormation foi gerado usando o AWS CDK disponível aqui no GitHub. Para obter mais informações sobre o AWS CDK, consulte o Guia do desenvolvedor do AWS Cloud Development Kit (AWS CDK).
Execute o comando a seguir na linha de comando, substituindo STACK_NAME por um nome exclusivo para a pilha.

Importante
O nome da pilha deve ser exclusivo em uma Região da AWS e na conta da AWS. 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 e o Guia do usuário do CloudFormation.

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. O exemplo BookTrip do Amazon Lex é usado. Para obter mais informações, consulte Reservar viagem.

Faça login no Console de Gerenciamento da Amazon Web Services e abra o console do Amazon Lex no Console da Amazon Web Services.
Na página Bots, selecione Criar.
Escolha o esquema BookTrip (deixe o nome padrão do bot BookTrip).
Preencha as configurações padrão e escolha Criar (o console mostra o bot BookTrip). 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.
Escolha Publicar e especifique um nome de alias (você precisará desse valor quando usar o AWS SDK para JavaScript).

nota

Você precisa referenciar o nome do bot e o alias do bot em seu código JavaScript.

Criar o HTML

Crie um arquivo chamado index.html. Copie e cole o código abaixo emindex.html. Esse HTML faz referência a main.js. Essa é uma versão empacotada do index.js, que inclui os módulos do AWS SDK para JavaScript necessários. Você criará esse arquivo em Criar o HTML. index.html também faz referência a style.css, o qual adiciona os estilos.


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

Esse código também está disponível aqui no GitHub.

Criar o script do navegador

Crie um arquivo chamado index.js. Copie e cole o código abaixo em index.js. Importe os módulos e comandos do AWS SDK para JavaScript necessários. Crie clientes para o Amazon Lex, o Amazon Comprehend e o Amazon Translate. Substitua REGION por Região da AWS e IDENTITY_POOL_ID pelo ID do banco de identidades que você criou em Criar os recursos da AWS. 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_POOL_ID em cada arquivo.

nota

Use o ID do banco de identidades do Amazon Cognito que você criou em Criar os recursos da AWS usando o 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 };

Esse código está disponível aqui no GitHub.

Em seguida, crie um arquivo index.js e cole o código abaixo nele.

Substitua BOT_ALIAS e BOT_NAME pelo alias e nome do seu bot do Amazon Lex, respectivamente, e USER_ID 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 no GitHub.

Agora, use o webpack para empacotar os módulos index.js e AWS SDK para JavaScript em um único arquivo, main.js.

Caso ainda não tenha feito isso, siga as instruções descritas em Pré-requisitos para este exemplo para instalar o webpack.

nota
Para obter informações sobre o webpack, consulte Empacotar aplicativos com o webpack.
Execute o seguinte na linha de comando para empacotar o JavaScript deste exemplo em um arquivo chamado main.js:
```
webpack index.js --mode development --target web --devtool false -o main.js
```

Próximas etapas

Parabéns! 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 pilha CloudFormation que criou no tópico Criar os recursos da AWS deste tutorial, da seguinte forma:

Abra o console de CloudFormation.
Na página Pilhas, selecione a pilha.
Escolha Excluir.

Para obter mais exemplos entre serviços da AWS, consulte Exemplos entre serviços da AWS SDK para JavaScript.

Atenção O Javascript está desativado ou não está disponível no seu navegador.

Para usar a documentação da AWS, o Javascript deve estar ativado. Consulte as páginas de Ajuda do navegador para obter instruções.

Convenções do documento

Entre serviços: eventos programados do Lambda

Exemplos de código