Nota
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
En este tutorial se crea un sitio web que busca en un catálogo de libros y, a continuación, se implementa el sitio web en una aplicación web estática de Azure.
¿Qué hace la muestra?
En este sitio web de ejemplo se proporciona acceso a un catálogo de 10 000 libros. Puede buscar en el catálogo escribiendo un texto en la barra de búsqueda. Mientras escribe el texto, el sitio web usa la característica de sugerencias del índice de búsqueda para autocompletar el texto. Cuando finaliza la consulta, el sitio web muestra la lista de libros con una parte de los detalles. Puede seleccionar cualquier libro para ver todos sus detalles, que están 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.
- Sugerencia: proporciona sugerencias a medida que el usuario escribe en la barra de búsqueda.
- Facetas y filtros: proporciona una estructura de navegación por facetas que filtra por autor o idioma.
- Resultados paginados: proporciona controles de paginación para desplazarse por los resultados.
- Búsqueda de documentos: busca un documento por identificador para recuperar todo su contenido para la página de detalles.
¿Cómo se organiza la muestra?
El código de ejemplo incluye los siguientes componentes:
| Aplicación | Propósito | GitHub Repositorio Ubicación |
|---|---|---|
| cliente | 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. | /azure-search-static-web-app/client |
| api | La aplicación de funciones de .NET de Azure (capa empresarial) llama a la API de Azure AI Search mediante el SDK de .NET. | /azure-search-static-web-app/api |
| inserción masiva | Proyecto de .NET para crear el índice y agregarle documentos. | /azure-search-static-web-app/bulk-insert |
Configure su entorno de desarrollo
Cree servicios e instale el siguiente software para el entorno de desarrollo local.
- Búsqueda de Azure AI, cualquier región o nivel
- .NET 9 o la versión más reciente
- Git
- Visual Studio Code
- Extensión de herramientas de desarrollo de C# para Visual Studio Code
- Extensión Azure Static Web App para Visual Studio Code
Este tutorial no ejecuta la API de funciones de Azure localmente. Si quiere ejecutarlo localmente, instale azure-functions-core-tools.
Bifurcar y clonar el ejemplo de búsqueda con Git
Para implementar la Aplicación Web Estática, debe clonar el repositorio de ejemplo. Las aplicaciones web usan la ubicación del fork en GitHub para decidir las acciones de compilación y los elementos de despliegue. La ejecución de código en la aplicación web estática se produce de forma remota, con Azure Static Web Apps leyendo el código del ejemplo bifurcada.
En GitHub, haga un fork del repositorio azure-search-static-web-app.
Completa el proceso de bifurcación en tu navegador web con tu 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.
En un terminal de Bash, descargue la aplicación de ejemplo bifurcada en el equipo local.
Reemplace
YOUR-GITHUB-ALIASpor su alias de GitHub.git clone https://github.com/YOUR-GITHUB-ALIAS/azure-search-static-web-app.gitEn el mismo terminal de Bash, vaya al repositorio bifurcada para este ejemplo de búsqueda de sitio web:
cd azure-search-static-web-appUse el comando de Visual Studio Code
code .para abrir el repositorio bifurcado. Puedes realizar las tareas restantes desde Visual Studio Code, a menos que se especifique lo contrario.code .