En esta página del instructivo de Google Cloud Search, se muestra cómo configurar una campaña de búsqueda con el widget de búsqueda incorporable. Para comenzar desde el principio de este instructivo, consulta Instructivo para comenzar a usar Cloud Search.
Instala dependencias
Si el conector sigue indexando el repositorio, abre una nueva shell y continuar ahí.
Desde la línea de comandos, cambia el directorio a
cloud-search-samples/end-to-end/search-interface
Para descargar las dependencias necesarias para con el servidor web, ejecuta el siguiente comando:
npm install
Crea las credenciales de la aplicación de búsqueda
El conector requiere credenciales de cuenta de servicio para llamar a Cloud Search APIs Para crear las credenciales, sigue estos pasos:
Regresa a la consola de Google Cloud.
En el panel de navegación izquierdo, haz clic en Credenciales.
En la lista desplegable Crear credenciales, selecciona ID de cliente de OAuth. La opción “Crear ID de cliente de OAuth” .
(Opcional) Si no configuraste la pantalla de consentimiento, haz clic en CONFIGURAR PANTALLA DE CONSENTIMIENTO. El “consentimiento de OAuth” aparecerá una pantalla.
Haz clic en Interno y, luego, en CREAR. Otro "consentimiento de OAuth" pantalla .
Completa los campos obligatorios. Para obtener más instrucciones, consulta al usuario sección de consentimiento de Configura OAuth 2.0.
Haz clic en la lista desplegable Tipo de aplicación y selecciona Aplicación web.
En el campo Nombre, escribe "tutorial".
En el campo Orígenes autorizados de JavaScript, haz clic en AGREGAR URI. Un campo de “URI” .
En el campo URI, ingresa
http://localhost:8080
.Haz clic en CREAR. El “cliente de OAuth creado” aparecerá una pantalla.
Anota el ID de cliente. Este valor se usa para identificar la aplicación cuando que solicita la autorización del usuario con OAuth2. No se requiere el secreto del cliente para esta implementación.
Haz clic en Aceptar.
Crea la aplicación de búsqueda
A continuación, crea una aplicación de búsqueda en la Consola del administrador. La aplicación de búsqueda es una representación virtual de la interfaz de búsqueda y su configuración configuración.
- Regresa a la Consola del administrador de Google.
- Haz clic en el ícono Aplicaciones. La sección “Administración de Google Apps” .
- Haz clic en Google Workspace. La sección “Administración de apps de Google Workspace” .
- Desplázate hacia abajo y haz clic en Cloud Search. La “Configuración de Google Workspace” página .
- Haz clic en Aplicaciones de búsqueda. Las “Aplicaciones de Búsqueda” .
- Haz clic en el signo + redondo amarillo. Crea una nueva aplicación de búsqueda .
- En el campo Nombre visible, escribe "instructivo".
- Haz clic en CREAR.
- Haz clic en el ícono de lápiz junto a la aplicación de búsqueda recién creada. ("Editar aplicación de búsqueda"). Los “Detalles de la aplicación de búsqueda” .
- Anota el ID de aplicación.
- A la derecha de Fuentes de datos, haz clic en el ícono de lápiz.
- Junto a "Instructivo", haz clic en el botón de activación Habilitar. Este botón de activación habilita la fuente de datos del instructivo para la aplicación de búsqueda recién creada
- A la derecha del "instructivo" fuente de datos, haz clic en Opciones de visualización.
- Verifica todas las facetas.
- Haz clic en GUARDAR.
- Haz clic en LISTO.
Configura la aplicación web
Después de crear las credenciales y la app de búsqueda, actualiza la aplicación de Terraform para incluir estos valores de la siguiente manera:
- Desde la línea de comandos, cambia el directorio a `cloud-search-samples/end-to-end/search-interface/public.'
- Abre el archivo
app.js
con un editor de texto. - Busca la variable
searchConfig
en la parte superior del archivo. - Reemplaza
[client-id]
por el ID de cliente de OAuth que se creó antes. - Reemplaza
[application-id]
por el ID de aplicación de búsqueda que se indica en sección anterior. - Guarda el archivo.
Ejecuta la aplicación
Inicia la aplicación con este comando:
npm run start
Consulta el índice
Para consultar el índice con el widget de búsqueda, haz lo siguiente:
- Abre el navegador y ve a
http://localhost:8080
. - Haz clic en Acceder para autorizar que la aplicación realice consultas en Cloud Search. por ti.
- En el cuadro de búsqueda, ingresa una consulta, como la palabra "prueba", y presiona Intro. La página debería mostrar los resultados de la consulta junto con las facetas y de paginación para navegar por los resultados.
Revisa el código
En las secciones restantes, se examina cómo se compila la interfaz de usuario.
Cómo cargar el widget
El widget y las bibliotecas relacionadas se cargan en dos fases. Primero, el arranque se carga la siguiente secuencia de comandos:
En segundo lugar, se llama a la devolución de llamada onLoad
una vez que la secuencia de comandos está lista. Luego se carga.
el cliente de la API de Google, el Acceso con Google y las bibliotecas de widgets de Cloud Search.
initializeApp
controla la inicialización restante de la app.
una vez que se carguen todas las bibliotecas requeridas.
Administra autorizaciones
Los usuarios deben autorizar la aplicación para que realice consultas en su nombre. Si bien el widget puedes pedirles a los usuarios que autoricen, puedes lograr una mejor experiencia del usuario manejando tú mismo la autorización.
Para la interfaz de búsqueda, la app presenta dos vistas diferentes en función según el estado de acceso del usuario.
Durante la inicialización, se habilita la vista correcta y los controladores para se configuran los eventos de acceso y salida:
Crea la interfaz de búsqueda
El widget de búsqueda requiere una pequeña cantidad de lenguaje de marcado HTML para la búsqueda. y mantener los resultados de la búsqueda:
El widget se inicializa y se vincula a los elementos de entrada y contenedor. durante la inicialización:
¡Felicitaciones! Completaste correctamente el instructivo. Continuar por instrucciones de limpieza.