La [Guía de referencia de la API de AWS SDK for JavaScript V3](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/) describe en detalle todas las operaciones de la API para la versión 3 (V3) de AWS SDK for JavaScript. 

Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.

# Creación de un chatbot de Amazon Lex
<a name="lex-bot-example"></a>

Puede crear un chatbot de Amazon Lex dentro de una aplicación web para atraer a los visitantes de su sitio web. Un chatbot de Amazon Lex es una funcionalidad que realiza conversaciones de chat en línea con los usuarios sin proporcionar contacto directo con una persona. Por ejemplo, en la siguiente ilustración se muestra un chatbot de Amazon Lex que interactúa con un usuario para que reserve una habitación de hotel.

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


El chatbot Amazon Lex creado en este AWS tutorial puede manejar varios idiomas. Por ejemplo, un usuario que habla francés puede introducir texto en francés y obtener una respuesta en francés.

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


Del mismo modo, un usuario puede comunicarse con el chatbot de Amazon Lex en italiano.

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


Este AWS tutorial le guía a través de la creación de un chatbot de Amazon Lex y su integración en una aplicación web de Node.js. El AWS SDK para JavaScript (v3) se utiliza para invocar estos servicios: AWS 
+ Amazon Lex
+ Amazon Comprehend
+ Amazon Translate

**Costo de finalización:** los AWS servicios incluidos en este documento están incluidos en la capa [AWS gratuita](https://aws.amazon.com/free/?all-free-tier.sort-by=item.additionalFields.SortRank&all-free-tier.sort-order=asc).

**Nota:** Recuerde cancelar todos los recursos que cree mientras sigue este tutorial para asegurarse de que no se le cobre nada.

**Para crear la app:**

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

1. [Aprovisionar recursos](#lex-bot-provision-resources)

1. [Cree el chatbot de Amazon Lex](#lex-bot-example-create-lex-bot)

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

1. [Cree el script del navegador](#lex-bot-example-script)

1. [Pasos siguientes](#lex-bot-example-next-steps)

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

Para configurar y ejecutar este ejemplo, primero debe completar estas tareas:
+ Configure el entorno del proyecto para ejecutar estos TypeScript ejemplos de nodos e instale los módulos necesarios AWS SDK para JavaScript y de terceros. Siga las instrucciones de [ GitHub](https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/javascriptv3/example_code/cross-services/lambda-scheduled-events/README.md).
+ Cree un archivo de configuraciones compartidas con sus credenciales de usuario. Para obtener más información sobre cómo proporcionar un archivo de credenciales compartido, consulte [Archivos de configuración y credenciales compartidos](https://docs.aws.amazon.com/sdkref/latest/guide/file-format.html) en la *Guía de referencia de herramientas AWS SDKs y herramientas*.

**importante**  
En este ejemplo se usa ECMAScript6 (ES6). Requiere la versión 13.x o superior de Node.js. Para descargar e instalar la versión más reciente de Node.js, consulte [Descargas de Node.js](https://nodejs.org/en/download).  
No obstante, si prefiere utilizar la sintaxis CommonJS, consulte [Sintaxis ES6/commonJS de JavaScript](sdk-example-javascript-syntax.md).

## Crea los AWS recursos
<a name="lex-bot-provision-resources"></a>

Este tutorial requiere los siguientes recursos.
+ Un rol de IAM no autenticado con permisos adjuntos para:
  + Amazon Comprehend
  + Amazon Translate
  + Amazon Lex

Puede crear estos recursos manualmente, pero le recomendamos que los aprovisione tal y AWS CloudFormation como se describe en este tutorial.

### Cree los AWS recursos mediante CloudFormation
<a name="lex-bot-example-resources-cli"></a>

CloudFormation le permite crear y aprovisionar despliegues de AWS infraestructura de forma predecible y repetitiva. Para obtener más información al respecto CloudFormation, consulte la Guía del [AWS CloudFormation usuario](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/).

Para crear la CloudFormation pila con AWS CLI:

1. Instale y configure las AWS CLI siguientes instrucciones de la [Guía del AWS CLI usuario](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-welcome.html).

1. Cree un archivo con un nombre `setup.yaml` en el directorio raíz de la carpeta de su proyecto y copie [el contenido GitHub en](https://github.com/awsdocs/aws-doc-sdk-examples/blob/main/javascriptv3/example_code/cross-services/lex-bot/setup.yaml) él.
**nota**  
La CloudFormation plantilla se generó utilizando lo que AWS CDK está [disponible aquí GitHub](https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/resources/cdk/lex_bot_example_iam_unauth_role). Para obtener más información sobre el AWS CDK, consulte la [Guía para AWS Cloud Development Kit (AWS CDK) desarrolladores](https://docs.aws.amazon.com/cdk/latest/guide/).

1. Ejecute el siguiente comando desde la línea de comandos y *STACK\$1NAME* sustitúyalo por un nombre único para la pila.
**importante**  
El nombre de la pila debe ser único en una AWS región y una AWS cuenta. El nombre puede tener una longitud de hasta 128 caracteres, y se permiten números y guiones.

   ```
   aws cloudformation create-stack --stack-name STACK_NAME --template-body file://setup.yaml --capabilities CAPABILITY_IAM
   ```

   Para obtener más información sobre los parámetros de los comandos `create-stack`, consulte la [Guía de referencia de comandos AWS CLI](https://docs.aws.amazon.com/cli/latest/reference/cloudformation/create-stack.html) y la [Guía del usuario de AWS CloudFormation](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/using-cfn-cli-creating-stack.html).

   Para ver los recursos creados, abra la consola Amazon Lex, elija la pila y seleccione la pestaña **Recursos**.

## Crear un bot de Amazon Lex
<a name="lex-bot-example-create-lex-bot"></a>

**importante**  
Utilice la versión 1 de la consola Amazon Lex para crear el bot. Este ejemplo no funciona con los bots creados con la V2.

El primer paso es crear un chatbot de Amazon Lex mediante la consola de administración de Amazon Web Services. En este ejemplo, se utiliza el **BookTrip**ejemplo de Amazon Lex. Para obtener más información, consulte [Book Trip](https://docs.aws.amazon.com/lex/latest/dg/ex-book-trip.html).
+ Inicie sesión en la consola de administración de Amazon Web Services y abra la consola Amazon Lex en la [consola de Amazon Web Services](https://console.aws.amazon.com/lex/).
+ En la página Bots, elija **Crear**.
+ Elija el **BookTrip**plano (deje el nombre del bot predeterminado **BookTrip**).  
![\[Interface for creating a chatbot, showing BookTrip sample with conversation flow and components.\]](http://docs.aws.amazon.com/es_es/sdk-for-javascript/v3/developer-guide/images/lex_example/pic2.png)
+ Rellena la configuración predeterminada y selecciona **Crear** (la consola muestra el **BookTrip**bot). En la pestaña Editor, revise los detalles de la intención preconfigurada ().
+ Pruebe el bot en la ventana de pruebas. Comience la prueba escribiendo *Quiero reservar una habitación de hotel*.  
![\[Chat interface showing a hotel booking conversation with a bot asking for the city.\]](http://docs.aws.amazon.com/es_es/sdk-for-javascript/v3/developer-guide/images/lex_example/ChatBotTest.png)
+ Elija **Publicar** y especifique un nombre de alias (necesitará este valor cuando utilice AWS SDK para JavaScript).

**nota**  
 Debes hacer referencia al **nombre** y al **alias del bot** en tu JavaScript código.

## Creación del HTML
<a name="lex-bot-example-html"></a>

Cree un archivo denominado `index.html`. Copie y pegue el siguiente código en `index.html`. Este HTML hace referencia a `main.js`. Se trata de una versión integrada de index.js, que incluye los AWS SDK para JavaScript módulos necesarios. Creará este archivo en [Creación del HTML](#lex-bot-example-html). `index.html` también hace referencia a `style.css`, que añade los 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>
```

Este código también está disponible [aquí en GitHub](https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/resources/cdk#running-a-cdk-app).

## Crear el script del navegador
<a name="lex-bot-example-script"></a>

Cree un archivo denominado `index.js`. Copie y pegue el siguiente código `index.js` Importe los AWS SDK para JavaScript módulos y comandos necesarios. Cree clientes para Amazon Lex, Amazon Comprehend y Amazon Translate. *REGION*Sustitúyalos por AWS Región y *IDENTITY\$1POOL\$1ID* por el ID del grupo de identidades que creaste en[Crea los AWS recursos](#lex-bot-provision-resources). Para recuperar este ID del grupo de identidades, abra el grupo de identidades en la consola Amazon Cognito, seleccione **Editar grupo de identidades** y elija **Código de muestra** en el menú lateral. Anote el ID del grupo de identidades que se muestra en rojo en la consola.

En primer lugar, cree un directorio `libs` y cree los objetos de cliente de servicio necesarios mediante la creación de tres archivos, `comprehendClient.js`, `lexClient.js` y `translateClient.js`. Pegue el código correspondiente que aparece a continuación en cada uno de ellos *REGION* y reemplace y *IDENTITY\$1POOL\$1ID* en cada archivo.

**nota**  
Utilice el ID del grupo de identidades de Amazon Cognito que creó en [Cree los AWS recursos mediante 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 };
```

Este código está disponible [aquí en GitHub.](https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/javascriptv3/example_code/cross-services/lex-bot/src/libs) .

A continuación, cree un archivo `index.js` y pegue en él el siguiente código.

 Sustituya *BOT\$1ALIAS* y *BOT\$1NAME* por el alias y el nombre de su bot de Amazon Lex, respectivamente, y *USER\$1ID* por un seudónimo. La función asíncrona de `createResponse` hace lo siguiente:
+ Toma el texto introducido por el usuario en el navegador y utiliza Amazon Comprehend para determinar el código de su idioma.
+ Toma el código del idioma y utiliza Amazon Translate para traducir el texto al inglés.
+ Toma el texto traducido y utiliza Amazon Lex para generar una respuesta.
+ Publica la respuesta en la página del 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;
```

Este código está disponible [aquí en GitHub.](https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/javascriptv3/example_code/cross-services/lex-bot/src/index.html) .

Ahora use webpack para agrupar los AWS SDK para JavaScript módulos `index.js` y en un solo archivo,`main.js`.

1. Si aún no lo ha hecho, siga [Requisitos previos](#lex-bot-example-prerequisites) para este ejemplo para instalar Webpack. 
**nota**  
Para obtener más información sobre *Webpack*, consulte [Agrupación de aplicaciones con Webpack](webpack.md).

1. Ejecute lo siguiente en la línea de comandos JavaScript para agrupar este ejemplo en un archivo llamado`main.js`:

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

## Siguientes pasos
<a name="lex-bot-example-next-steps"></a>

¡Enhorabuena\$1 Ha creado una aplicación Node.js que utiliza Amazon Lex para crear una experiencia de usuario interactiva. Como se indicó al principio de este tutorial, asegúrese de cancelar todos los recursos que cree mientras realiza este tutorial para asegurarse de que no se le cobre nada. Para ello, puede eliminar la CloudFormation pila que creó en el [Crea los AWS recursos](#lex-bot-provision-resources) tema de este tutorial, de la siguiente manera:

1. Abra la [consola de AWS CloudFormation]( https://console.aws.amazon.com/cloudformation/home).

1. En la página **Pilas**, seleccione la pila.

1. Elija **Eliminar**.

Para obtener más ejemplos de AWS servicios cruzados, consulte ejemplos de [AWS SDK para JavaScript servicios cruzados.](https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/tutorials.html)