1. Introducción a la adición de búsquedas a un sitio web

En este tutorial se crea un sitio web para buscar en un catálogo de libros y, a continuación, se implementa el sitio web en una aplicación web estática de Azure.

La aplicación está disponible:

¿Qué hace el ejemplo?

En este sitio web de ejemplo se proporciona acceso a un catálogo de 10 000 libros. Un usuario puede buscar en el catálogo escribiendo un texto en la barra de búsqueda. Mientras el usuario escribe el texto, el sitio web usa la característica de sugerencias del índice de búsqueda para completar el texto. Una vez finalizada la consulta, se muestra la lista de libros con una parte de los detalles. Un usuario puede seleccionar un libro para ver todos los detalles del libro, almacenados en el índice de búsqueda.

En este sitio web de ejemplo se proporciona acceso a un catálogo de 10 000 libros. Un usuario puede buscar en el catálogo escribiendo un texto en la barra de búsqueda. Mientras el usuario escribe el texto, el sitio web usa la característica de sugerencias del índice de búsqueda para completar el texto. Una vez finalizada la búsqueda, se muestra la lista de libros con una parte de los detalles. Un usuario puede seleccionar un libro para ver todos los detalles del libro, almacenados en el índice de búsqueda.

La experiencia de búsqueda incluye:

  • Búsqueda: proporciona la funcionalidad de búsqueda para la aplicación.
  • Sugerencias: proporciona sugerencias a medida que el usuario escribe en la barra de búsqueda.
  • Búsqueda de documentos: busca un documento por identificador para recuperar todo su contenido para la página de detalles.

¿Cómo se organiza el ejemplo?

El ejemplo incluye lo siguiente:

Aplicación Propósito GitHub
Repositorio
Location
Remoto Aplicación de React (capa de presentación) para mostrar los libros, con la búsqueda. Llama a la aplicación de funciones de Azure. /search-website/src
Servidor Aplicación de funciones de Azure (capa de negocio): llama a Azure Cognitive Search API mediante el SDK para JavaScript /search-website/api
Inserción masiva Archivo JavaScript para crear el índice y agregarle documentos. /search-website/bulk-insert

Configurado su entorno de desarrollo

Instale lo siguiente para el entorno de desarrollo local.

Bifurcación y clonación del ejemplo de búsqueda con git

La bifurcación del repositorio de ejemplo es fundamental para poder implementar la aplicación web estática. Las aplicaciones web determinan las acciones de compilación y el contenido de implementación en función de su propia ubicación de la bifurcación de GitHub. La ejecución de código en la aplicación web estática es remota, Azure Static Web Apps lee desde el código del ejemplo bifurcado.

  1. En GitHub, bifurque el repositorio de ejemplo.

    Complete el proceso de bifurcación en el explorador web con su cuenta de GitHub. En este tutorial se usa la bifurcación como parte de la implementación en una aplicación web estática de Azure.

  2. En un terminal de Bash, descargue la aplicación de ejemplo en el equipo local.

    Reemplace YOUR-GITHUB-ALIAS por su alias de GitHub.

    git clone https://github.com/YOUR-GITHUB-ALIAS/azure-search-javascript-samples
    
  3. En Visual Studio Code, abra la carpeta local del repositorio clonado. Las tareas restantes se realizan desde Visual Studio Code, a menos que se especifique.

Creación de un grupo de recursos para los recursos de Azure

  1. En Visual Studio Code, abra la barra de actividad y seleccione el icono de Azure.

  2. En la barra lateral, haga clic con el botón derecho en la suscripción de Azure en el área Resource Groups y seleccione Create resource group (Crear grupo de recursos).

    En la barra lateral, haga clic con el botón derecho en la suscripción de Azure en el área de grupos de recursos y seleccione **Crear grupo de recursos**.

  3. Escriba el nombre de un grupo de recursos; por ejemplo, cognitive-search-website-tutorial.

  4. Seleccione una ubicación cercana.

  5. Al crear los recursos de Cognitive Search y Static Web Apps más adelante en el tutorial, use este grupo de recursos.

    La creación de un grupo de recursos proporciona una unidad lógica para administrar los recursos, lo que incluye eliminarlos cuando haya terminado de usarlos.

Pasos siguientes