Se usó la API de Cloud Translation para traducir esta página.

Cómo configurar la interfaz de usuario

En esta página del instructivo de Google Cloud Search, se muestra cómo configurar una aplicación de búsqueda personalizada con el widget de búsqueda incorporable. Para comenzar desde el principio de este instructivo, consulta el instructivo para comenzar a usar Cloud Search.

Instala dependencias

Si el conector aún está indexando el repositorio, abre un shell nuevo y continúa allí.
Desde la línea de comandos, cambia el directorio a cloud-search-samples/end-to-end/search-interface.
Para descargar las dependencias necesarias para ejecutar el servidor web, ejecuta el siguiente comando:

npm install

Crea las credenciales de la aplicación de búsqueda

El conector requiere credenciales de la cuenta de servicio para llamar a las APIs de Cloud Search. 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. Aparecerá la página "Crear ID de cliente de OAuth".
(Opcional) Si no configuraste la pantalla de consentimiento, haz clic en CONFIGURAR PANTALLA DE CONSENTIMIENTO. Aparecerá la pantalla "Consentimiento de OAuth".
1. Haz clic en Interno y, luego, en CREAR. Aparecerá otra pantalla de "Consentimiento de OAuth".
2. Completa los campos obligatorios. Para obtener más instrucciones, consulta la sección de consentimiento del usuario de Configura OAuth 2.0.
Haz clic en la lista desplegable Tipo de aplicación y selecciona Aplicación web.
En el campo Nombre, ingresa "tutorial".
En el campo Orígenes autorizados de JavaScript, haz clic en AGREGAR URI. Aparecerá un campo "URIs" vacío.
En el campo URIs, ingresa http://localhost:8080.
Haz clic en CREAR. Aparecerá la pantalla "Se creó el cliente de OAuth".
Toma nota del ID de cliente. Este valor se usa para identificar la aplicación cuando se 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 predeterminada.

Vuelve a la Consola del administrador de Google.
Haz clic en el ícono de Apps. Aparecerá la página "Administración de apps".
Haz clic en Google Workspace. Aparecerá la página "Administración de aplicaciones de Google Workspace".
Desplázate hacia abajo y haz clic en Cloud Search. Aparecerá la página "Configuración de Google Workspace".
Haz clic en Buscar aplicaciones. Aparecerá la página "Search Applications".
Haz clic en el + amarillo redondo. Aparecerá el diálogo "Crear una nueva aplicación de búsqueda".
En el campo Nombre visible, ingresa "tutorial".
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"). Aparecerá la página "Detalles de la aplicación de búsqueda".
Toma nota del ID de la aplicación.
A la derecha de Fuentes de datos, haz clic en el ícono de lápiz.
Junto a “tutorial”, 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 de la fuente de datos "tutorial", 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 configuración de la aplicación 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 creaste anteriormente.
Reemplaza [application-id] por el ID de la aplicación de búsqueda que anotaste en la sección anterior.
Guarda el archivo.

Ejecuta la aplicación

Ejecuta este comando para iniciar la aplicación:

npm run start

Consulta el índice

Para consultar el índice con el widget de búsqueda, haz lo siguiente:

Abre el navegador y navega a http://localhost:8080.
Haz clic en Acceder para autorizar a la app a consultar Cloud Search en tu nombre.
En el cuadro de búsqueda, ingresa una consulta, como la palabra "prueba", y presiona Intro. En la página, se deben mostrar los resultados de la búsqueda junto con facetas y controles de paginación para navegar por los resultados.

Revisa el código

En las secciones restantes, se analiza cómo se compila la interfaz de usuario.

Cargando el widget

El widget y las bibliotecas relacionadas se cargan en dos fases. Primero, se carga la secuencia de comandos de arranque:

index.html

Ver en GitHub

<script src="https://apis.google.com/js/api.js?mods=enable_cloud_search_widget&onload=onLoad" async defer></script>

En segundo lugar, se llama a la devolución de llamada onLoad una vez que el script está listo. Luego, carga el cliente de la API de Google, el Acceso con Google y las bibliotecas de widgets de Cloud Search.

app.js

Ver en GitHub

/**
 * Load the cloud search widget & auth libraries. Runs after
 * the initial gapi bootstrap library is ready.
 */
function onLoad() {
  gapi.load('client:auth2:cloudsearch-widget', initializeApp)
}

initializeApp controla la inicialización restante de la app una vez que se cargan todas las bibliotecas requeridas.

Cómo controlar la autorización

Los usuarios deben autorizar a la app para que realice consultas en su nombre. Si bien el widget puede solicitar a los usuarios que autoricen el acceso, puedes lograr una mejor experiencia del usuario si controlas la autorización por tu cuenta.

En el caso de la interfaz de búsqueda, la app presenta dos vistas diferentes según el estado de acceso del usuario.

index.html

Ver en GitHub

<div class="content">
  <div id="app" hidden>
    <div id="header">
      <button id="sign-out">Sign-out</button>
    </div>
    <!-- Markup for widget...-->
  </div>
  <div id="welcome" hidden>
    <h1>Cloud Search Tutorial</h1>
    <p>Sign in with your Google account to search.</p>
    <button id="sign-in">Sign-in</button>
  </div>
</div>

Durante la inicialización, se habilita la vista correcta y se configuran los controladores para los eventos de acceso y salida:

app.js

Ver en GitHub

/**
 * Initialize the app after loading the Google API client &
 * Cloud Search widget.
 */
async function initializeApp() {
  await gapi.auth2.init({
      'clientId': searchConfig.clientId,
      'scope': 'https://www.googleapis.com/auth/cloud_search.query'
  });

  let auth = gapi.auth2.getAuthInstance();

  // Watch for sign in status changes to update the UI appropriately
  let onSignInChanged = (isSignedIn) => {
    document.getElementById("app").hidden = !isSignedIn;
    document.getElementById("welcome").hidden = isSignedIn;
    if (resultsContainer) {
      resultsContainer.clear();
    }
  }
  auth.isSignedIn.listen(onSignInChanged);
  onSignInChanged(auth.isSignedIn.get()); // Trigger with current status

  // Connect sign-in/sign-out buttons
  document.getElementById("sign-in").onclick = (e) =>  auth.signIn();
  document.getElementById("sign-out").onclick = (e) => auth.signOut();

  // ...

}

Cómo crear la interfaz de búsqueda

El widget de búsqueda requiere una pequeña cantidad de lenguaje de marcado HTML para la entrada de búsqueda y para contener los resultados de la búsqueda:

index.html

Ver en GitHub

<div id="search_bar">
  <div>
    <div id="suggestions_anchor">
      <input type="text" id="search_input" placeholder="Search for...">
    </div>
  </div>
</div>
<div id="facet_results" ></div>
<div id="search_results" ></div>

El widget se inicializa y se vincula a los elementos de entrada y contenedor durante la inicialización:

app.js

Ver en GitHub

gapi.config.update('cloudsearch.config/apiVersion', 'v1');
resultsContainer = new gapi.cloudsearch.widget.resultscontainer.Builder()
  .setSearchApplicationId(searchConfig.searchAppId)
  .setSearchResultsContainerElement(document.getElementById('search_results'))
  .setFacetResultsContainerElement(document.getElementById('facet_results'))
  .build();

const searchBox = new gapi.cloudsearch.widget.searchbox.Builder()
  .setSearchApplicationId(searchConfig.searchAppId)
  .setInput(document.getElementById('search_input'))
  .setAnchor(document.getElementById('suggestions_anchor'))
  .setResultsContainer(resultsContainer)
  .build();

¡Felicitaciones! Completaste el instructivo correctamente. Continúa para ver las instrucciones de limpieza.

Anterior Siguiente

Cómo configurar la interfaz de usuario Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

Instala dependencias

Crea las credenciales de la aplicación de búsqueda

Crea la aplicación de búsqueda

Configura la aplicación web

Ejecuta la aplicación

Consulta el índice

Revisa el código

Cargando el widget

Cómo controlar la autorización

Cómo crear la interfaz de búsqueda

Cómo configurar la interfaz de usuario