Configurar la interfaz de usuario

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:

  1. En la consola de desarrollo, ve a la página Crear ID de cliente de OAuth.

    Ir a la página Crear ID de cliente de OAuth

  2. En Tipo de aplicación, selecciona Web.
  3. En Nombre, introduce tutorial.
  4. Escribe http://localhost:8080 en Orígenes de JavaScript autorizados.
  5. 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.

  1. En la consola de administración, ve a la página de aplicaciones de búsqueda.

    Ir a la página de aplicaciones de búsqueda

  2. Haz clic en el botón +.
  3. Introduce tutorial en el campo Nombre visible.
  4. Haz clic en Crear.
  5. Haz clic en Añadir para crear la fuente de datos.
  6. Pulsa el icono del lápiz situado junto a la fuente de datos que acabas de crear.
  7. Haz clic en la fila Fuente de datos.
  8. Localiza tu fuente de datos en la lista y haz clic en el interruptor para activarla.
  9. Haz clic en Opciones de visualización para seleccionar los operadores con los que se crearán las facetas.
  10. Comprueba todos los operadores que se muestran.
  11. Haz clic en Guardar.
  12. 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:

  1. Abre el archivo public/app.js con un editor de texto.
  2. Localiza la variable searchConfig en la parte superior del archivo.
  3. Sustituye [client-id] por el ID de cliente de OAuth que creaste anteriormente.
  4. Sustituye [application-id] por el ID de la aplicación de búsqueda que creaste en la sección anterior.
  5. 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:

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

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.

app.js
/**
 * 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)
}

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.

index.html
<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 activa la vista correcta y se configuran los controladores de los eventos de inicio y cierre de sesión:

app.js
/**
 * 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();

  // ...

}

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:

index.html
<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, durante este procedimiento, se vincula con los elementos de entrada y contenedor:

app.js
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();

¡Enhorabuena, has completado el tutorial correctamente! Si quieres ver instrucciones sobre cómo eliminar los recursos creados durante el tutorial, haz clic en Siguiente.

Anterior Siguiente