Crear una aplicación de búsqueda con Blazor y Elasticsearch

Elasticsearch ofrece a los desarrolladores el conjunto de herramientas de búsqueda más completo, desde la búsqueda vectorial hasta las potentes API REST. Descubre los cuadernos de muestra en GitHub para probar algo nuevo. También puedes iniciar tu prueba gratuita o ejecutar Elasticsearch localmente hoy mismo.

En este artículo, aprenderás cómo aprovechar tus habilidades en C# para crear una aplicación de búsqueda usando Blazor y Elasticsearch. Vamos a usar el cliente Elasticsearch .NET para ejecutar consultas de texto completo, semánticas y búsquedas híbridas .

NOTA Si conoces la versión anterior del cliente Nest de Elasticsearch en C#, lee esta entrada del blog sobre la deprecación del cliente NEST y las nuevas funciones. NEST fue la generación anterior del cliente .NET que fue reemplazado por el Elastic.Clients.Elasticsearch package

• ¿Qué es Blazor?
• ¿Qué es ESRE?
• Configuración de ELSER
• Datos de indexación
• Aplicación en edificios

¿Qué es Blazor?

Blazor es un framework sitio web de código abierto basado en HTML, CSS y C# creado por Microsoft para permitir a los desarrolladores crear aplicaciones sitio web que se ejecuten en el cliente o en el servidor. Blazor también permite crear componentes reutilizables para construir aplicaciones más rápido; permite a los desarrolladores construir la vista HTML y las acciones en C# dentro del mismo archivo, lo que ayuda a mantener un código legible y limpio. Además, con Blazor Hybrid puedes crear aplicaciones móviles nativas accediendo a las capacidades nativas de la plataforma mediante código .NET.

Algunas de las características que hacen de Blazor un excelente marco para trabajar:

• Opciones de renderizado tanto en el lado servidor como en el cliente
• Componentes reutilizables de la interfaz
• Actualizaciones en tiempo real con SignalR
• Gestión del estado integrada
• Sistema de enrutamiento integrado
• Comprobaciones fuertes de tipado y tiempo de compilación

¿Por qué Blazor?

Blazor ofrece varios beneficios sobre otros frameworks y librerías: permite a los desarrolladores usar C# tanto para el código cliente como para el servidor, proporcionando una fuerte verificación de tipado y compilación que mejora la fiabilidad. Se integra perfectamente con el ecosistema .NET, permitiendo la reutilización de librerías y herramientas .NET, y ofrece un soporte robusto para depuración.

¿Qué es ESRE?

El Elasticsearch Relevance Engine™ (ESRE) es un conjunto de herramientas para construir aplicaciones de búsqueda empleando aprendizaje automático e inteligencia artificial sobre el poderoso motor de búsqueda Elasticsearch.

Para saber más sobre ESRE, puedes leer nuestra interesante entrada de blog aquí

Configuración de ELSER

Para aprovechar las capacidades ESRE de Elastic, vamos a emplear ELSER como nuestro proveedor de modelos.

Nota: para usar los modelos ELSER de Elasticsearch, debes tener una licencia Platinum o Enterprise, y disponer de un nodo mínimo dedicado de Machine Lerning (ML) de 4GB de tamaño. Lee más sobre esto aquí.

Empieza creando el punto final de inferencia:

Si es la primera vez que usas ELSER, puede que te encuentres con un error 502 de Mal Gateway mientras el modelo se carga en segundo plano. Puedes consultar el estado del modelo en Machine Learning > Trained Models en Kibana. Una vez desplegado, puedes pasar al siguiente paso.

Datos de indexación

Puedes descargar el conjunto de datos aquí y luego importar los datos usando Kibana. Para ello, ve a la página principal y haz clic en "Subir datos". Luego, sube el archivo y haz clic Import. Por último, ve a la pestaña Advanced y pega los siguientes mapeos:

Vamos a crear un índice capaz de ejecutar consultas semánticas y de texto completo. El tipo de campo semantic_text se encargará del fragmento de datos y la incrustación. Ten en cuenta que estamos indexando longDescription como semantic_text, puedes usar copy_to si quieres indexar un campo tanto como semantic_text como texto'.

Construcción de la app con Blazor & Elasticsearch

Clave API

Lo primero que tenemos que hacer es crear una clave API para autenticar nuestras solicitudes a Elasticsearch. La clave API debe ser de solo lectura y solo permitir consultar el índice de books-blazor .

Verás algo así:

Almacena el valor del campo de respuesta encoded cuando sea necesario más adelante. Si usas Elastic Cloud, también necesitarás tu ID de la nube. (Puedes encontrarlo aquí).

Creación del proyecto Blazor

Empieza instalando Blazor y creando un proyecto de muestra siguiendo las instrucciones oficiales.

Una vez que tengas el proyecto creado, la estructura de carpetas y los archivos deberían ver así:

La aplicación plantilla incluye Bootstrap v5.1.0 para peinar.

Termina la configuración del proyecto instalando el cliente Elasticsearch .NET :

Una vez que completes este paso, tu página debería ver así:

Estructura de carpetas

Ahora, vamos a organizar nuestras carpetas de la siguiente manera:

Archivos explicados:

• Components/Pages/Search.razor: página principal que contiene la barra de búsqueda, los resultados y los filtros.
• Componentes/Páginas/Search.razor.css: estilos de página.
• Components/Elasticsearch/SearchBar.razor: componente de la barra de búsqueda.
• Components/Elasticsearch/Results.razor: componente de resultados.
• Components/Elasticsearch/Facet.razor: componente de filtros.
• Components/Svg/GlassIcon.razor: icono de búsqueda.
• Components/_Imports.razor: esto importará todos los componentes.
• Modelos/Book.cs: esto almacenará el esquema del campo libro.
• Modelos/Response.cs: esto almacenará el esquema de respuesta, incluyendo los resultados de búsqueda, facetas y resultados totales.
• Servicios/ElasticsearchService.cs: Servicio Elasticsearch. Se encargará de la conexión y las consultas a Elasticsearch.

Configuración inicial

Empecemos con una limpieza.

Elimina los archivos:

• Componentes/Páginas/Counter.razor
• Componentes/Páginas/Weather.razor
• Componentes/Páginas/Home.razor
• Componentes/Layout/NavMenu.razor
• Componentes/Diseño/NavMenu.razor.css

Revisa el archivo /Components/_Imports.razor . Deberías tener las siguientes importaciones:

Integración de Elastic en el proyecto

Ahora, importemos los componentes de Elasticsearch:

Vamos a eliminar la barra lateral predeterminada para tener más espacio para nuestra aplicación eliminándola del archivo /Components/Layout/MainLayout.razor :

Ahora introduzcamos las credenciales de Elasticsearch para los secretos de usuario:

Con este enfoque, .Net 8 almacena datos sensibles en una ubicación separada, fuera de la carpeta del proyecto, y los hace accesibles mediante la interfaz IConfiguration . Estas variables estarán disponibles para cualquier proyecto .Net que emplee los mismos secretos de usuario.

Luego, modifiquemos el archivo Program.cs para leer los secretos y montar el cliente Elasticsearch:

Primero, importa las bibliotecas necesarias:

• BlazorApp.Services: contiene el servicio Elasticsearch.
• Elastic.Clients.Elasticsearch: importa la biblioteca cliente .Net 8 de Elasticsearch.
• Elastic.Transport: importa la biblioteca de transporte Elasticsearch, que nos permite usar la clase ApiKey para autenticar nuestras solicitudes.

Segundo, inserta el siguiente código antes de la línea var app = builder.Build() :

Este código leerá las credenciales de Elasticsearch de los secretos de usuario y creará una instancia cliente de Elasticsearch.

Tras la inicialización del cliente ElasticSearch, agrega la siguiente línea para registrar el servicio Elasticsearch:

El siguiente paso será construir la lógica de búsqueda en el archivo /Services/ElasticsearchService.cs :

Primero, importa las bibliotecas y modelos necesarios:

Segundo, agregar la clase ElasticsearchService, constructor y variables:

Configuración de búsqueda

Ahora, vamos a construir nuestra lógica de búsqueda:

• BuildFilters construirá los filtros para la consulta de búsqueda usando las facetas seleccionadas por el usuario.
• BuildHybridQuery construirá una consulta de búsqueda híbrida que combine texto completo y búsqueda semántica.

A continuación, agrega el método de búsqueda:

• SearchBooksAsync: realizará la búsqueda usando la consulta híbrida y devolverá los resultados incluidas agregaciones para construir las facetas.
• FormatFacets: formateará la respuesta de agregación en un diccionario.
• ConvertFacetDictionary: convertirá el diccionario de facetas en un formato más legible.

El siguiente paso es crear los modelos que representarán los datos devueltos en el hits de la consulta de Elasticsearch que se imprimirán como resultados en nuestra página de búsqueda.

Comenzamos creando el /Models/Book.cs de archivo y agregando lo siguiente:

Luego, configurar la respuesta Elastic en el archivo /Models/Response.cs y agregar lo siguiente:

Configuración de una interfaz básica

A continuación, agrega el componente Barra de búsqueda. En el archivo /Components/Elasticsearch/SearchBar.razor y agrega lo siguiente:

Este componente contiene una barra de búsqueda y un botón para realizar la búsqueda.

Blazor ofrece una gran flexibilidad al permitir generar HTML dinámicamente usando código C# dentro del mismo archivo.

Después, en el archivo /Components/Elasticsearch/Results.razor construiremos el componente de resultados que mostrará los resultados de búsqueda:

Finalmente, necesitaremos crear facetas para filtrar los resultados de búsqueda.

Nota: Los facetos son filtros que permiten a los usuarios reducir los resultados de búsqueda en función de atributos o categorías específicas, como el tipo de producto, el rango de precio o la marca. Estos filtros suelen presentar como opciones clicables, a menudo en forma de casillas para marcar, para ayudar a los usuarios a refinar su búsqueda y encontrar resultados relevantes con mayor facilidad. En el contexto de Elasticsearch, las facetas se crean mediante agregaciones.

Configuramos facetas poniendo el siguiente código en el archivo /Components/Elasticsearch/Facet.razor:

Este componente lee de una agregación terms en los campos author, categoriesy status , y luego produce una lista de filtros para enviar de vuelta a Elasticsearch.

Ahora, vamos a juntar todo.

En /Components/Pages/Search.razor expediente:

¡Nuestra página funciona!

Como puedes ver, la página es funcional pero carece de estilos. Vamos a agregar algo de CSS para que parezca más organizado y receptivo.

Empecemos a reemplazar los estilos de distribución. En el archivo Components/Layout/MainLayout.razor.css :

Agrega los estilos de la página de búsqueda en el archivo Components/Pages/Search.razor.css :

Nuestra página empieza a ver mejor:

Vamos a darle los toques finales:

Crea los siguientes archivos:

• Componentes/Elasticsearch/Facet.razor.css
• Components/Elasticsearch/Results.razor.css

Y agrega los estilos para Facet.razor.css:

Para Results.razor.css:

Resultado final:

Para ejecutar la aplicación puedes usar el siguiente comando:

dotnet watch

¡Lo conseguiste! Ahora puedes buscar libros en tu índice de Elasticsearch usando la barra de búsqueda y filtrar los resultados por autor, categoría y estado.

Realización de búsqueda en texto completo y semántica

Por defecto, nuestra app realiza una búsqueda híbrida usando tanto texto completo como búsqueda semántica. Puedes cambiar la lógica de búsqueda creando dos métodos separados, uno para texto completo y otro para búsqueda semántica, y luego seleccionar uno para construir la consulta basar en la entrada del usuario.

Agrega los siguientes métodos a la clase ElasticsearchService en el archivo /Services/ElasticsearchService.cs :

Ambos métodos funcionan de forma similar al método BuildHybridQuery , pero solo realizan búsqueda en texto completo o semántica.

Puedes modificar el método SearchBooksAsync para usar el método de búsqueda seleccionado:

Puedes encontrar la solicitud completa aquí

Conclusión

Blazor es un framework eficaz que te permite crear aplicaciones sitio web usando C#. Elasticsearch es un poderoso motor de búsqueda que te permite crear aplicaciones de búsqueda. Combinando ambos, puedes construir fácilmente aplicaciones de búsqueda robustas, aprovechando el poder de ESRE para crear una experiencia de búsqueda semántica en poco tiempo.

Preguntas frecuentes