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. # Despliegue Amazon Kendra **nota** La compatibilidad de características varía según el tipo de índice y la API de búsqueda que se use. Para comprobar si esta característica es compatible con el tipo de índice y la API de búsqueda que usa, consulte [Tipos de índices](https://docs.aws.amazon.com/kendra/latest/dg/hiw-index-types.html). Cuando llegue el momento de implementar la Amazon Kendra búsqueda en tu sitio web, te proporcionamos el código fuente que puedes usar con React para empezar con tu aplicación. El código fuente se proporciona sin cargo alguno en virtud de una licencia del MIT modificada. Puede usarlo tal cual o cambiarlo según sus propias necesidades. La aplicación React proporcionada es un ejemplo para ayudarlo a comenzar. No es una aplicación lista para producción. Para implementar una aplicación de búsqueda sin código y generar una URL de punto de conexión para su página de búsqueda con control de acceso, consulte [Amazon Kendra Experience Builder](https://docs.aws.amazon.com/kendra/latest/dg/deploying-search-experience-no-code.html). El siguiente código de ejemplo añade la Amazon Kendra búsqueda a una aplicación web de React existente: + [https://kendrasamples.s3.amazonaws.com/kendrasamples-react-app.zip](https://kendrasamples.s3.amazonaws.com/kendrasamples-react-app.zip): archivos de muestra que los desarrolladores pueden usar para crear una experiencia de búsqueda funcional en su aplicación web React existente. Los ejemplos se basan en la página de búsqueda de la consola. Amazon Kendra Tienen las mismas características para buscar y mostrar los resultados de búsqueda. Puede usar el ejemplo completo o elegir solo una de las características para su propio uso. Para ver los tres componentes de la página de búsqueda en la Amazon Kendra consola, selecciona el icono de código (****) en el menú de la derecha. Sitúe el puntero del ratón sobre cada sección para ver una breve descripción del componente y obtener la URL de la fuente del componente. **Topics** + [Descripción general de](#example-overview) + [Requisitos previos](#example-prereqs) + [Configurar el ejemplo](#example-install) + [Página de búsqueda principal](#main-component) + [Componente de búsqueda](#search-component) + [Componente de resultados](#results-component) + [Componente de facetas](#facets-component) + [Componente de paginación](#pagination-component) + [Creación de una experiencia de búsqueda sin código](deploying-search-experience-no-code.md) ## Descripción general de Para activar la búsqueda, agrega el código de ejemplo a una aplicación web de React existente. El código de ejemplo incluye un archivo Readme con los pasos para configurar un nuevo entorno de desarrollo de React. Los datos de ejemplo del código de ejemplo se pueden usar para demostrar una búsqueda. Los archivos y componentes de búsqueda del código de ejemplo se estructuran de la siguiente manera: + Página de búsqueda principal (`Search.tsx`): es la página principal que contiene todos los componentes. Aquí es donde se integra la aplicación con la Amazon Kendra API. + Barra de búsqueda: es el componente en el que el usuario introduce un término de búsqueda y llama a la función de búsqueda. + Resultados: este es el componente desde el que se muestran los resultados. Amazon Kendra Tiene tres componentes: respuestas sugeridas, resultados de preguntas frecuentes y documentos recomendados. + Facetas: este es el componente que muestra las facetas en los resultados de la búsqueda y permite elegir una faceta para restringir la búsqueda. + Paginación: este es el componente desde el que se pagina la respuesta de Amazon Kendra. ## Requisitos previos Antes de comenzar, necesitará lo siguiente: + Node.js y npm [instalados](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm). Se requiere la versión 19 o anterior de Node.js. + Python 3 o Python 2 [descargados e instalados](https://www.python.org/downloads/). + [SDK para Java](https://docs.aws.amazon.com/sdk-for-java/latest/developer-guide/setup.html) o [AWS SDK para JavaScript](https://docs.aws.amazon.com/sdk-for-javascript/latest/developer-guide/welcome.html) para realizar llamadas a la API a Amazon Kendra. + Una aplicación web de React existente. El código de ejemplo incluye un archivo Readme con los pasos sobre cómo configurar un nuevo entorno de desarrollo de React, incluido utilizar los marcos/bibliotecas necesarios. También puede seguir las instrucciones de inicio rápido de la [documentación de React para crear una aplicación web de React](https://create-react-app.dev/docs/getting-started). + Las bibliotecas y dependencias necesarias configuradas en su entorno de desarrollo. El código de ejemplo incluye un archivo Readme que enumera las bibliotecas y las dependencias de paquetes necesarias. Tenga en cuenta que `sass` es obligatorio, ya que `node-sass` está obsoleto. Si instaló anteriormente `node-sass`, desinstálelo e instale `sass`. ## Configurar el ejemplo Un procedimiento completo para añadir una Amazon Kendra búsqueda a una aplicación de React se encuentra en el archivo readme incluido en el ejemplo de código. **Para empezar a usar .zip kendrasamples-react-app** 1. Asegúrese de haber completado los [Requisitos previos](#example-prereqs), incluida la descarga e instalación de Node.js y npm. 1. Descarga kendrasamples-react-app .zip y descomprímelo. 1. Abra su terminal y vaya a `aws-kendra-example-react-app/src/services/`. Abra `local-dev-credentials.json` y proporcione sus credenciales. No añada este archivo a ningún repositorio público. 1. Vaya a `aws-kendra-example-react-app` e instale las dependencias en `package.json`. Ejecute `npm install`. 1. Inicie una versión de demostración de la aplicación en su servidor local. Ejecute `npm start`. Puede detener el servidor local ingresando en su teclado `Cmd/Ctrl + C`. 1. Para cambiar el puerto o el host (por ejemplo, la dirección IP), vaya a `package.json` y actualice el host y el puerto: `"start": "HOST=[host] PORT=[port] react-scripts start"`. Si utiliza Windows: `"start": "set HOST=[host] && set PORT=[port] && react-scripts start"`. 1. Si tiene un dominio de sitio web registrado, puede especificarlo en `package.json` después del nombre de su aplicación. Por ejemplo, `"homepage": "https://mywebsite.com"`. Debe volver a ejecutar `npm install` para actualizar las nuevas dependencias y, a continuación, ejecutar `npm start`. 1. Para compilar la aplicación, ejecute `npm build`. Cargue el contenido del directorio de compilación a su proveedor de alojamiento. **aviso** La aplicación React **no** está lista para producción. Es un ejemplo de cómo implementar una aplicación de búsqueda Amazon Kendra . ## Página de búsqueda principal La página de búsqueda principal (`Search.tsx`) contiene todos los componentes de búsqueda de ejemplo. Incluye el componente de barra de búsqueda para la salida, los componentes de resultados para mostrar la respuesta de la API [Query](https://docs.aws.amazon.com/kendra/latest/APIReference/API_Query.html) y un componente de paginación para paginar la respuesta. ## Componente de búsqueda El componente de búsqueda proporciona un cuadro de texto para introducir el texto de la consulta. La función `onSearch` es un enlace que llama a la función principal en `Search.tsx` para realizar la llamada a la API de [Query](https://docs.aws.amazon.com/kendra/latest/APIReference/API_Query.html) de Amazon Kendra . ## Componente de resultados El componente de resultados muestra la respuesta de la API `Query`. Los resultados se muestran en tres áreas distintas. + Respuestas sugeridas: estos son los principales resultados devueltos por la API `Query`. Contiene hasta tres respuestas sugeridas. En la respuesta, tienen el tipo de resultado `ANSWER`. + Respuestas a las preguntas frecuentes: son los resultados de las preguntas frecuentes que arroja la respuesta. FAQs se añaden al índice por separado. En la respuesta, tienen el tipo `QUESTION_ANSWER`. Para obtener más información, consulte [Preguntas y respuestas](https://docs.aws.amazon.com/kendra/latest/dg/in-creating-faq.html). + Documentos recomendados: son documentos adicionales que aparecen en Amazon Kendra la respuesta. En la respuesta de la API `Query`, tienen el tipo `DOCUMENT`. Los componentes de resultados comparten un conjunto de componentes para características como el resaltado, los títulos, los enlaces, etc. Los componentes compartidos deben estar presentes para que los componentes de resultados funcionen. ## Componente de facetas El componente de facetas muestra las facetas disponibles en los resultados de la búsqueda. Cada faceta clasifica la respuesta en función de una dimensión específica, como el autor. Puede restringir la búsqueda a una faceta específica seleccionando una de la lista. Tras seleccionar una faceta, el componente llama a `Query` con un filtro de atributos que restringe la búsqueda a los documentos que coincidan con la faceta. ## Componente de paginación El componente de paginación le permite mostrar los resultados de búsqueda de la API `Query` en varias páginas. Llama a la API `Query` con los parámetros `PageSize` y `PageNumber` para obtener una página de resultados específica.