Pré-requisitos Crie os AWS recursos Criar um bot do Amazon Lex Crie 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 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.

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

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 esses TypeScript exemplos de Node e instale os módulos necessários AWS SDK for JavaScript e de terceiros. Siga as instruções em 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 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.

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

Crie os AWS recursos

Este tutorial requer os seguintes recursos:

Uma IAM função não autenticada 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 AWS CloudFormation

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

Para criar a AWS CloudFormation pilha usando o AWS CLI:

Instale e configure as instruções a AWS CLI seguir no Guia AWS CLI do usuário.
Crie um arquivo chamado setup.yaml no diretório raiz da pasta do seu projeto e copie o conteúdo aqui GitHub para dentro dele.
nota
O AWS CloudFormation modelo foi gerado usando o AWS CDK disponível aqui em GitHub. Para obter mais informações sobre o AWS CDK, consulte o Guia do AWS Cloud Development Kit (AWS CDK) desenvolvedor.
Execute o seguinte comando na linha de comando, substituindo STACK_NAME com 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 e o Guia do usuário do AWS 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. Neste exemplo, o BookTripexemplo 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 BookTripblueprint (deixe o nome padrão do bot BookTrip).
Preencha as configurações padrão e escolha Criar (o console mostra o BookTripbot). 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 ao usar o AWS SDK for JavaScript).

nota

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

Crie o HTML

Crie um arquivo chamado index.html. Copie e cole o código abaixo emindex.html. Isso HTML faz referênciamain.js. Essa é uma versão integrada do index.js, que inclui os AWS SDK for JavaScript módulos necessários. Você criará esse arquivo em Crie 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 em GitHub.

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 for JavaScript módulos e comandos necessários. Crie clientes para o Amazon Lex, o Amazon Comprehend e o Amazon Translate. Substituir REGION com a AWS região, e IDENTITY_POOL_ID com o ID do grupo de identidades que você criou noCrie os AWS recursos . 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 Crie os AWS recursos usando 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 };

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

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

Substituir BOT_ALIAS e BOT_NAME com o alias e o nome do seu bot Amazon Lex, respectivamente, e USER_ID com 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. .

Agora use o webpack para agrupar os AWS SDK for JavaScript módulos index.js e 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 Agrupe aplicativos com o webpack.
Execute o seguinte na linha de comando para agrupar o deste JavaScript exemplo em um arquivo chamadomain.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 AWS CloudFormation pilha que você criou no Crie os AWS recursos tópico deste tutorial, da seguinte forma:

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

Para obter mais exemplos AWS de serviços cruzados, consulte exemplos de AWS SDK for JavaScript serviços cruzados.

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