Configurar a interface do usuário

Nesta página do tutorial do Google Cloud Search, você aprende a configurar uma usando o widget de pesquisa incorporável. Para começar do início deste tutorial, consulte Tutorial de primeiros passos do Cloud Search.

Instalar dependências

1. Se o conector ainda estiver indexando o repositório, abra um novo shell e continuar aí.

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 executando 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 o Cloud Search. APIs de terceiros. Para criar as credenciais:

1. Volte para o console do Google Cloud.

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

3. Na lista suspensa Criar credenciais, selecione ID do cliente OAuth. A opção "Criar ID do cliente OAuth" é exibida.

4. (Opcional). Se você não configurou a tela de consentimento, clique em CONFIGURAR TELA DE CONSENTIMENTO. O "consentimento do OAuth" aparece na tela.

   1. Clique em Interno e em CRIAR. Outro "consentimento do OAuth" tela aparece.

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

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

6. No campo Name, digite "tutorial".

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

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

9. Clique em CRIAR. O "cliente OAuth criado" aparece na tela.

10. Anote o ID do cliente. Esse valor é usado para identificar o aplicativo quando solicitando a autorização do usuário com 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 app de pesquisa é uma representação virtual da interface de pesquisa e seu padrão configuração do Terraform.

1. Volte para o Google Admin Console.
2. Clique no ícone "Apps". "Administração do Google Apps" é exibida.
3. Clique em Google Workspace. "Apps Administração do Google Workspace" é exibida.
4. Role para baixo e clique em Cloud Search. As "Configurações do Google Workspace" página aparece.
5. Clique em Aplicativos de pesquisa. "Apps de pesquisa" é exibida.
6. Clique no ícone amarelo circular +. A opção "Criar um novo app de pesquisa" é exibida.
7. No campo Display name, digite "tutorial".
8. Clique em CRIAR.
9. Clique no ícone de lápis ao lado do app de pesquisa recém-criado. ("Editar app de pesquisa"). Os "Detalhes do aplicativo 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 Ativar. Essa opção ativa a fonte de dados do tutorial para o app de pesquisa recém-criado.
13. À direita do "tutorial", fonte de dados, clique em Opções de exibição.
14. Verifique todos os atributos.
15. Clique em SALVAR.
16. Clique em CONCLUÍDO.

Configurar o aplicativo da Web

Depois de criar as credenciais e o app de pesquisa, atualize o aplicativo 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 anteriormente.
5. Substitua [application-id] pelo ID do app de pesquisa indicado na 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 o navegador e acesse http://localhost:8080.
2. Clique em Fazer login para autorizar o app a consultar o Cloud Search. em seu nome.
3. Na caixa de pesquisa, digite uma consulta, como a palavra "teste", e pressione Enter. A página deve exibir os resultados da consulta junto com os atributos e 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 bootstrap o script for carregado:

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

Depois, o callback onLoad é chamado quando o script está pronto. Em seguida, ele carrega cliente da API do Google, o Login do Google e as bibliotecas de widgets do Cloud Search.

/**
 * 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 forem carregadas.

Processamento da autorização

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

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

<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 manipuladores para eventos de login e logout estão configurados:

/**
 * 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 exige uma pequena quantidade de marcação HTML para a pesquisa e para manter os resultados da pesquisa:

<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 de contêiner durante a inicialização:

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 na por instruções de limpeza.

Anterior Próxima