Configurare l'interfaccia utente

Questa pagina del tutorial di Google Cloud Search mostra come configurare un'applicazione di ricerca personalizzata utilizzando il widget di ricerca incorporabile. Per iniziare dall'inizio di questo tutorial, consulta il tutorial introduttivo a Cloud Search.

Installa le dipendenze

Se il connettore sta ancora indicizzando il repository, apri una nuova shell e continua da lì.
Dalla riga di comando, cambia directory in cloud-search-samples/end-to-end/search-interface.
Per scaricare le dipendenze necessarie per l'esecuzione del server web, esegui il comando seguente:

npm install

Crea le credenziali dell'applicazione di ricerca

Il connettore richiede le credenziali dell'account di servizio per chiamare le API Cloud Search. Per creare le credenziali:

Torna alla console Google Cloud.
Nel pannello di navigazione a sinistra, fai clic su Credenziali.
Nell'elenco a discesa Crea credenziali, seleziona ID client OAuth. Viene visualizzata la pagina "Crea ID client OAuth".
(Facoltativo) Se non hai configurato la schermata per il consenso, fai clic su CONFIGURA SCHERMATA PER IL CONSENSO. Viene visualizzata la schermata "Consenso OAuth".
1. Fai clic su Interno e poi su CREA. Viene visualizzata un'altra schermata "Consenso OAuth".
2. Compila i campi obbligatori. Per ulteriori istruzioni, consulta la sezione relativa al consenso degli utenti nella configurazione di OAuth 2.0.
Fai clic sull'elenco a discesa Tipo di applicazione e seleziona Applicazione web.
Nel campo Nome, inserisci "tutorial".
Nel campo Origini JavaScript autorizzate, fai clic su AGGIUNGI URI. Viene visualizzato un campo "URI" vuoto.
Nel campo URI, inserisci http://localhost:8080.
Fai clic su CREA. Viene visualizzata la schermata "Client OAuth creato".
Prendi nota dell'ID client. Questo valore viene utilizzato per identificare l'applicazione quando si richiede l'autorizzazione dell'utente con OAuth2. Il client secret non è richiesto per questa implementazione.
Fai clic su OK.

Crea l'applicazione di ricerca

Poi, crea un'applicazione di ricerca nella Console di amministrazione. L'applicazione di ricerca è una rappresentazione virtuale dell'interfaccia di ricerca e della sua configurazione predefinita.

Torna alla Console di amministrazione Google.
Fai clic sull'icona App. Viene visualizzata la pagina "Amministrazione app".
Fai clic su Google Workspace. Viene visualizzata la pagina "Amministrazione app Google Workspace".
Scorri verso il basso e fai clic su Cloud Search. Viene visualizzata la pagina "Impostazioni per Google Workspace".
Fai clic su Applicazioni di ricerca. Viene visualizzata la pagina "Applicazioni di ricerca".
Fai clic sul + giallo rotondo. Viene visualizzata la finestra di dialogo "Crea una nuova applicazione di ricerca".
Nel campo Nome visualizzato, inserisci "tutorial".
Fai clic su CREA.
Fai clic sull'icona a forma di matita accanto all'applicazione di ricerca appena creata ("Modifica applicazione di ricerca"). Viene visualizzata la pagina "Dettagli applicazione di ricerca".
Prendi nota dell'ID applicazione.
A destra di Origini dati, fai clic sull'icona a forma di matita.
Accanto a "tutorial", fai clic sul pulsante di attivazione/disattivazione Attiva. Questo pulsante di attivazione/disattivazione attiva l'origine dati del tutorial per l'applicazione di ricerca appena creata.
A destra dell'origine dati "tutorial", fai clic su Opzioni di visualizzazione.
Seleziona tutte le sfaccettature.
Fai clic su SALVA.
Fai clic su FINE.

Configura l'applicazione web

Dopo aver creato le credenziali e l'app di ricerca, aggiorna la configurazione dell'applicazione in modo da includere questi valori come segue:

Dalla riga di comando, cambia directory in `cloud-search-samples/end-to-end/search-interface/public.'
Apri il file app.js con un editor di testo.
Trova la variabile searchConfig nella parte superiore del file.
Sostituisci [client-id] con l'ID client OAuth creato in precedenza.
Sostituisci [application-id] con l'ID dell'applicazione di ricerca annotato nella sezione precedente.
Salva il file.

Esegui l'applicazione

Avvia l'applicazione eseguendo questo comando:

npm run start

Esegui una query sull'indice

Per eseguire una query sull'indice utilizzando il widget di ricerca:

Apri il browser e vai all'indirizzo http://localhost:8080.
Fai clic su Accedi per autorizzare l'app a eseguire query su Cloud Search per tuo conto.
Nella casella di ricerca, inserisci una query, ad esempio la parola "test", e premi Invio. La pagina dovrebbe mostrare i risultati della query insieme a sfaccettature e controlli di paginazione per navigare tra i risultati.

Esamina il codice

Le sezioni rimanenti esaminano come viene creata l'interfaccia utente.

Carica il widget

Il widget e le librerie correlate vengono caricati in due fasi. Innanzitutto, viene caricato lo script di bootstrap:

index.html

Visualizza su GitHub

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

In secondo luogo, viene chiamata la richiamata onLoad una volta che lo script è pronto. Poi carica le librerie del client API di Google, di Accedi con Google e del widget Ricerca Cloud Search.

app.js

Visualizza su 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)
}

La restante inizializzazione dell'app viene gestita da initializeApp una volta caricate tutte le librerie richieste.

Gestisci l'autorizzazione

Gli utenti devono autorizzare l'app a eseguire query per loro conto. Sebbene il widget possa richiedere agli utenti di autorizzare, puoi ottenere un'esperienza utente migliore gestendo tu stesso l'autorizzazione.

Per l'interfaccia di ricerca, l'app presenta due visualizzazioni diverse a seconda dello stato di accesso dell'utente.

index.html

Visualizza su 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 l'inizializzazione, viene attivata la visualizzazione corretta e vengono configurati i gestori per gli eventi di accesso e disconnessione:

app.js

Visualizza su 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();

  // ...

}

Crea l'interfaccia di ricerca

Il widget di ricerca richiede una piccola quantità di markup HTML per l'input di ricerca e per contenere i risultati di ricerca:

index.html

Visualizza su 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>

Il widget viene inizializzato e associato agli elementi di input e container durante l'inizializzazione:

app.js

Visualizza su 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();

Congratulazioni, hai completato il tutorial. Continua a leggere per le istruzioni di pulizia.

Precedente Avanti

Configurare l'interfaccia utente Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.

Installa le dipendenze

Crea le credenziali dell'applicazione di ricerca

Crea l'applicazione di ricerca

Configura l'applicazione web

Esegui l'applicazione

Esegui una query sull'indice

Esamina il codice

Carica il widget

Gestisci l'autorizzazione

Crea l'interfaccia di ricerca

Configurare l'interfaccia utente