Questa pagina del tutorial di Ricerca Google Cloud mostra come configurare un'applicazione di ricerca personalizzata utilizzando il widget di ricerca incorporabile. Per iniziare dall'inizio di questo tutorial, consulta la guida introduttiva di 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 eseguire il server web, esegui il seguente comando:
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 menu 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 del consenso, fai clic su CONFIGURA SCHERMATA DI CONSENSO. Viene visualizzata la schermata "Consenso OAuth".
Fai clic su Interno e poi su CREA. Viene visualizzata un'altra schermata "Consenso OAuth".
Compila i campi obbligatori. Per ulteriori istruzioni, consulta la sezione relativa al consenso degli utenti nella pagina 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. 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 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 della relativa 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 di Google Workspace per le app".
- Scorri verso il basso e fai clic su Ricerca cloud. Viene visualizzata la pagina "Impostazioni per Google Workspace".
- Fai clic su Applicazioni di ricerca. Viene visualizzata la pagina "Cerca applicazioni".
- Fai clic sul segno + 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.
- 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 la configurazione dell'applicazione in modo da includere questi valori come segue:
- Dalla riga di comando, cambia la 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 indicato nella sezione precedente. - Salva il file.
Eseguire 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 a
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, come la parola "test", e premi Invio. La pagina dovrebbe visualizzare i risultati della query insieme ai facet e ai controlli di paginazione per navigare tra i risultati.
Revisione del codice
Le sezioni rimanenti esaminano la modalità di creazione dell'interfaccia utente.
Caricamento del widget
Il widget e le librerie correlate vengono caricati in due fasi. Per prima cosa, viene caricato lo script di bootstrap:
In secondo luogo, il callback onLoad
viene chiamato quando lo script è pronto. Quindi carica il client dell'API Google, Accedi con Google e le librerie dei widget di Cloud Search.
L'inizializzazione rimanente dell'app viene gestita da initializeApp
una volta caricate tutte le librerie richieste.
Gestione dell'autorizzazione
Gli utenti devono autorizzare l'app a eseguire query per loro conto. Sebbene il widget possa chiedere agli utenti di autorizzare, puoi offrire un'esperienza utente migliore gestendo l'autorizzazione autonomamente.
Per l'interfaccia di ricerca, l'app presenta due visualizzazioni diverse a seconda dello stato di accesso dell'utente.
Durante l'inizializzazione viene abilitata la visualizzazione corretta e vengono configurati i gestori per gli eventi di accesso e disconnessione:
Creazione dell'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:
Il widget viene inizializzato e associato agli elementi di input e contenitore durante l'inizializzazione:
Complimenti, hai completato il tutorial. Continua per le istruzioni di pulizia.