Questa pagina del tutorial su Google Cloud Search mostra come configurare un di ricerca utilizzando il widget di ricerca incorporabile. Per iniziare dall'inizio di questo tutorial, consulta Tutorial introduttivo su 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 richieste sul server web, esegui questo comando:
npm install
Crea le credenziali dell'applicazione di ricerca
Il connettore richiede le credenziali dell'account di servizio per chiamare Cloud Search su quelle di livello inferiore. Per creare le credenziali:
Torna alla console Google Cloud.
Nel menu di navigazione a sinistra, fai clic su Credenziali.
Nell'elenco a discesa Crea credenziali, seleziona ID client OAuth. L'opzione "Crea ID client OAuth" .
(Facoltativo) Se non hai configurato la schermata per il consenso, fai clic su CONFIGURA SCHERMATA DI CONSENSO. L'opzione "Consenso OAuth" viene visualizzata la schermata iniziale.
Fai clic su Interno e poi su CREA. Un altro "Consenso OAuth" schermata .
Compila i campi obbligatori. Per ulteriori istruzioni, chiedi all'utente relativo al consenso Configurare 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. Un campo vuoto "URI" .
Nel campo URI, inserisci
http://localhost:8080
.Fai clic su CREA. Il riquadro "Client OAuth creato" viene visualizzata la schermata iniziale.
Prendi nota dell'ID client. Questo valore viene utilizzato per identificare l'applicazione quando richiedere l'autorizzazione dell'utente con OAuth2. Il client secret non è obbligatorio per questa implementazione.
Fai clic su OK.
Crea l'applicazione di ricerca
Quindi, crea un'applicazione di ricerca nella Console di amministrazione. L'applicazione di ricerca è una rappresentazione virtuale dell'interfaccia di ricerca e la sua configurazione predefinita configurazione.
- Torna alla Console di amministrazione Google.
- Fai clic sull'icona App. La sezione "Amministrazione app" .
- Fai clic su Google Workspace. La pagina "Amministrazione di Google Workspace per le app" .
- Scorri verso il basso e fai clic su Cloud Search. Le "Impostazioni per Google Workspace" pagina .
- Fai clic su Applicazioni di ricerca. La sezione "Search Appplications" (Applicazioni di ricerca) .
- Fai clic sul pulsante giallo rotondo +. L'opzione "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"). La sezione "Dettagli dell'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 sull'opzione di attivazione/disattivazione Attiva. Questa opzione di attivazione/disattivazione consente l'origine dati del tutorial per l'applicazione di ricerca appena creata.
- A destra del "tutorial" dell'origine dati, fai clic su Opzioni di visualizzazione.
- Controlla tutti i facet.
- Fai clic su SALVA.
- Fai clic su FINE.
Configura l'applicazione web
Dopo aver creato le credenziali e l'app di ricerca, aggiorna l'applicazione configurazione per 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. - Individua 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 applicazione di ricerca indicato in sezione precedente. - Salva il file.
Eseguire l'applicazione
Avvia l'applicazione eseguendo questo comando:
npm run start
Eseguire una query sull'indice
Per eseguire una query sull'indice utilizzando il widget di ricerca:
- Apri il browser e vai a
http://localhost:8080
. - Fai clic su Accedi per autorizzare l'app a eseguire query in 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 ai facet e controlli di impaginazione per navigare tra i risultati.
Revisione del codice
Le restanti sezioni esaminano il modo in cui è creata l'interfaccia utente.
Caricamento del widget in corso...
Il widget e le relative librerie vengono caricati in due fasi. Innanzitutto, il bootstrap dello script caricato:
In secondo luogo, il callback onLoad
viene chiamato quando lo script è pronto. Quindi carica
le librerie dei widget del client API di Google, di Accedi con Google e di Cloud Search.
La restante inizializzazione dell'app viene gestita da initializeApp
una volta caricate tutte le librerie richieste.
Gestione delle autorizzazioni
Gli utenti devono autorizzare l'app a eseguire query per loro conto. Mentre il widget puoi chiedere agli utenti di autorizzare, puoi migliorare l'esperienza utente e gestire personalmente l'autorizzazione.
Per l'interfaccia di ricerca, l'app presenta due visualizzazioni diverse a seconda sullo stato di accesso dell'utente.
Durante l'inizializzazione viene abilitata la visualizzazione corretta e i gestori del Gli eventi di accesso e uscita siano configurati:
Creazione dell'interfaccia di ricerca
Il widget di ricerca richiede una piccola quantità di markup HTML per la ricerca e contenere i risultati di ricerca:
Il widget è inizializzato e associato agli elementi di input e container durante l'inizializzazione:
Congratulazioni, hai completato correttamente il tutorial. Continua su per istruzioni per la pulizia.