En esta página del tutorial de Cloud Search te explicamos cómo configurar una aplicación de búsqueda personalizada con el widget de la Búsqueda insertable. Para empezar desde el principio, consulta el tutorial de introducción de Cloud Search.
Instalar dependencias
Cambia tu directorio de trabajo a cloud-search-samples/end-to-end/search-interface
y, mediante el siguiente comando, descarga las dependencias necesarias para ejecutar el servidor web:
npm install
Crear las credenciales de la aplicación de búsqueda
El conector necesita las credenciales de la cuenta de servicio para realizar llamadas a las API de Cloud Search. Para crear las credenciales:
- En la consola de desarrollo, ve a la página Crear ID de cliente de OAuth.
- En Tipo de aplicación, selecciona Web.
- En Nombre, introduce
tutorial
. - Escribe
http://localhost:8080
en Orígenes de JavaScript autorizados. - Haz clic en Crear.
Anota el ID de cliente que acabas de crear. Este valor se utilizará para identificar la aplicación cuando se solicite la autorización del usuario con OAuth2. En esta implementación, no es necesario el secreto.
Crear la aplicación de búsqueda
A continuación, crea una aplicación de búsqueda en la consola de administración. Esta aplicación es una representación virtual de la interfaz de búsqueda y su configuración predeterminada.
- En la consola de administración, ve a la página de aplicaciones de búsqueda.
- Haz clic en el botón +.
- Introduce
tutorial
en el campo Nombre visible. - Haz clic en Crear.
- Haz clic en Añadir para crear la fuente de datos.
- Pulsa el icono del lápiz situado junto a la fuente de datos que acabas de crear.
- Haz clic en la fila Fuente de datos.
- Localiza tu fuente de datos en la lista y haz clic en el interruptor para activarla.
- Haz clic en Opciones de visualización para seleccionar los operadores con los que se crearán las facetas.
- Comprueba todos los operadores que se muestran.
- Haz clic en Guardar.
- Haz clic en Listo.
Anota el ID de la aplicación de la fuente de datos que acabas de crear.
Configurar la aplicación web
Después de crear las credenciales y la aplicación de búsqueda, actualiza la configuración de la aplicación para que se incluyan estos valores siguiendo estos pasos:
- Abre el archivo
public/app.js
con un editor de texto. - Localiza la variable
searchConfig
en la parte superior del archivo. - Sustituye
[client-id]
por el ID de cliente de OAuth que creaste anteriormente. - Sustituye
[application-id]
por el ID de la aplicación de búsqueda que creaste en la sección anterior. - Guarda el archivo.
Ejecutar la aplicación
Inicia la aplicación ejecutando este comando:
npm run start
Consultar el índice
Para consultar el índice con el widget de la Búsqueda: 1. Abre el navegador y ve a http://localhost:8080
. 2. Haz clic en el botón Iniciar sesión para autorizar a la aplicación a que consulte Cloud Search en tu nombre.
3. Escribe una consulta en el cuadro de búsqueda (por ejemplo, la palabra "prueba") y pulsa Intro.
La página debería mostrar los resultados de la consulta junto con las facetas y los controles de paginación que permiten desplazarse por los resultados.
Comprender el código
Cargar el widget
El widget y las bibliotecas relacionadas se cargan en dos etapas. Primero, se carga la secuencia de comandos de arranque:
En segundo lugar, se realiza una llamada a la retrollamada onLoad
una vez que la secuencia de comandos está lista. A continuación, se cargan el cliente API de Google, el inicio de sesión de Google y las bibliotecas de widgets de Cloud Search.
Una vez que se han cargado todas las bibliotecas necesarias, initializeApp
gestiona el resto del procedimiento de inicialización de la aplicación.
Gestionar la autorización
Los usuarios deben autorizar a la aplicación a hacer consultas en su nombre. Aunque el widget puede pedir a los usuarios que la autoricen, podrás ofrecerles una mejor experiencia si te encargas tú de gestionar la autorización.
En la interfaz de búsqueda, la aplicación presenta dos vistas diferentes según el estado de inicio de sesión del usuario.
Durante la inicialización, se activa la vista correcta y se configuran los controladores de los eventos de inicio y cierre de sesión:
Crear la interfaz de búsqueda
El widget de la Búsqueda necesita una pequeña cantidad de etiquetas HTML para introducir las búsquedas y ofrecer resultados:
El widget se inicializa y, durante este procedimiento, se vincula con los elementos de entrada y contenedor:
¡Enhorabuena, has completado el tutorial correctamente! Si quieres ver instrucciones sobre cómo eliminar los recursos creados durante el tutorial, haz clic en Siguiente.