Configurar a interface do usuário

Nesta página do tutorial do Google Cloud Search, mostramos como configurar um app de pesquisa personalizado usando o widget de pesquisa incorporável. Para começar do início deste tutorial, consulte Tutorial de introdução do Cloud Search.

Instalar dependências

  1. Se o conector ainda estiver indexando o repositório, abra um novo shell e continue lá.

  2. Na linha de comando, altere o diretório para cloud-search-samples/end-to-end/search-interface.

  3. Para fazer o download das dependências necessárias para executar o servidor da Web, execute o seguinte comando:

npm install

Criar as credenciais do app de pesquisa

O conector exige credenciais da conta de serviço para chamar as APIs do Cloud Search. Para criar as credenciais:

  1. Volte para o console do Google Cloud.

  2. No menu de navegação à esquerda, clique em Credenciais.

  3. Na lista suspensa Criar credenciais, selecione ID do cliente OAuth. A página "Criar ID do cliente OAuth" é exibida.

  4. (Opcional) Se você não configurou a tela de consentimento, clique em CONFIGURAR TELA DE CONSENTIMENTO. A tela "Consentimento OAuth" será exibida.

    1. Clique em Interno e em CRIAR. Outra tela de "consentimento do OAuth" é exibida.

    2. Preencha os campos obrigatórios. Para mais instruções, consulte a seção de consentimento do usuário em Como configurar o OAuth 2.0.

  5. Clique na lista suspensa Tipo de aplicativo e selecione Aplicativo da Web.

  6. No campo Nome, digite "tutorial".

  7. No campo Origens JavaScript autorizadas, clique em ADICIONAR URI. Um campo "URIs" vazio será exibido.

  8. No campo URIs, insira http://localhost:8080.

  9. Clique em CRIAR. A tela "Cliente OAuth criado" é exibida.

  10. Anote o ID do cliente. Esse valor é usado para identificar o aplicativo ao solicitar a autorização do usuário com o OAuth2. A chave secreta do cliente não é necessária para essa implementação.

  11. Clique em OK.

Criar o app de pesquisa

Em seguida, crie um app de pesquisa no Admin Console. O aplicativo de pesquisa é uma representação virtual da interface de pesquisa e sua configuração padrão.

  1. Volte para o Google Admin Console.
  2. Clique no ícone "Apps". A página "Administração dos apps" é exibida.
  3. Clique em Google Workspace. A página "Apps de administração do Google Workspace" aparece.
  4. Role para baixo e clique em Cloud Search. A página "Configurações do Google Workspace" é exibida.
  5. Clique em Aplicativos de pesquisa. A página "Search Appplications" é exibida.
  6. Clique no ícone + redondo em amarelo. A caixa de diálogo "Criar um novo app de pesquisa" será exibida.
  7. No campo Nome de exibição, insira "tutorial".
  8. Clique em CRIAR.
  9. Clique no ícone de lápis ao lado do aplicativo de pesquisa recém-criado ("Editar aplicativo de pesquisa"). A página "Detalhes do app de pesquisa" é exibida.
  10. Anote o ID do aplicativo.
  11. À direita de Fontes de dados, clique no ícone de lápis.
  12. Ao lado de "tutorial", clique no botão de alternância Ativar. Essa opção ativa a fonte de dados do tutorial para o app de pesquisa recém-criado.
  13. À direita da fonte de dados "tutorial", clique em Opções de exibição.
  14. Verifique todas as facetas.
  15. Selecione SALVAR.
  16. Clique em CONCLUÍDO.

Configurar o aplicativo da Web

Depois de criar as credenciais e o app de pesquisa, atualize a configuração para incluir esses valores da seguinte maneira:

  1. Na linha de comando, altere o diretório para "cloud-search-samples/end-to-end/search-interface/public".
  2. Abra o arquivo app.js com um editor de texto.
  3. Encontre a variável searchConfig na parte de cima do arquivo.
  4. Substitua [client-id] pelo ID do cliente OAuth criado.
  5. Substitua [application-id] pelo ID do app de pesquisa anotado na seção anterior.
  6. Salve o arquivo.

Execute o aplicativo

Execute este comando para iniciar o aplicativo:

npm run start

consultar o índice

Para consultar o índice usando o widget de pesquisa:

  1. Abra seu navegador e acesse http://localhost:8080.
  2. Clique em Fazer login para autorizar o aplicativo a consultar o Cloud Search em seu nome.
  3. Na caixa de pesquisa, insira uma consulta, como a palavra "teste", e pressione Enter. A página precisa exibir os resultados da consulta, bem como os atributos e os controles de paginação para navegar pelos resultados.

Como revisar o código

As seções restantes examinam como a interface do usuário é criada.

Carregar o widget

O widget e as bibliotecas relacionadas são carregados em duas fases. Primeiro, o script de inicialização é carregado:

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

Segundo, o callback onLoad é chamado quando o script está pronto. Em seguida, ele carrega o cliente da API do Google, o Login do Google e as bibliotecas de widgets do 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)
}

A inicialização restante do app é processada por initializeApp depois que todas as bibliotecas necessárias são carregadas.

Processamento da autorização

Os usuários precisam autorizar o app a fazer consultas em nome deles. O widget pode solicitar a autorização dos usuários, mas você pode melhorar a experiência do usuário fazendo a autorização por conta própria.

Para a interface de pesquisa, o app apresenta duas visualizações diferentes, dependendo do estado de login do usuário.

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 a inicialização, a visualização correta é ativada e os gerenciadores de eventos de login e logout são configurados:

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

  // ...

}

Como criar a interface de pesquisa

O widget de pesquisa requer uma pequena quantidade de marcação HTML para a entrada de pesquisa e para armazenar os resultados da pesquisa:

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>

O widget é inicializado e vinculado aos elementos de entrada e contêiner durante a inicialização:

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

Parabéns, você concluiu o tutorial. Continue para conferir instruções de limpeza.

Anterior Próxima