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
Se o conector ainda estiver indexando o repositório, abra um novo shell e continuar aí.
Na linha de comando, altere o diretório para
cloud-search-samples/end-to-end/search-interface
: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:
Volte para o console do Google Cloud.
No painel de navegação à esquerda, clique em Credenciais.
Na lista suspensa Criar credenciais, selecione ID do cliente OAuth. A opção "Criar ID do cliente OAuth" é exibida.
(Opcional). Se você não configurou a tela de consentimento, clique em CONFIGURAR TELA DE CONSENTIMENTO. O "consentimento do OAuth" aparece na tela.
Clique em Interno e em CRIAR. Outro "consentimento do OAuth" tela aparece.
Preencha os campos obrigatórios. Para mais instruções, consulte a documentação do seção de consentimento Como configurar o OAuth 2.0.
Clique na lista suspensa Tipo de aplicativo e selecione Aplicativo da Web.
No campo Name, digite "tutorial".
No campo Origens JavaScript autorizadas, clique em ADICIONAR URI. Um valor vazio "URIs" é exibido.
No campo URIs, digite
http://localhost:8080
.Clique em CRIAR. O "cliente OAuth criado" aparece na tela.
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.
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.
- Volte para o Google Admin Console.
- Clique no ícone "Apps". "Administração do Google Apps" é exibida.
- Clique em Google Workspace. "Apps Administração do Google Workspace" é exibida.
- Role para baixo e clique em Cloud Search. As "Configurações do Google Workspace" página aparece.
- Clique em Aplicativos de pesquisa. "Apps de pesquisa" é exibida.
- Clique no ícone amarelo circular +. A opção "Criar um novo app de pesquisa" é exibida.
- No campo Display name, digite "tutorial".
- Clique em CRIAR.
- 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.
- Anote o ID do aplicativo.
- À direita de Fontes de dados, clique no ícone de lápis.
- 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.
- À direita do "tutorial", fonte de dados, clique em Opções de exibição.
- Verifique todos os atributos.
- Clique em SALVAR.
- 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:
- Na linha de comando, altere o diretório para `cloud-search-samples/end-to-end/search-interface/public.'
- Abra o arquivo
app.js
com um editor de texto. - Encontre a variável
searchConfig
na parte de cima do arquivo. - Substitua
[client-id]
pelo ID do cliente OAuth criado anteriormente. - Substitua
[application-id]
pelo ID do app de pesquisa indicado na na seção anterior. - 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:
- Abra o navegador e acesse
http://localhost:8080
. - Clique em Fazer login para autorizar o app a consultar o Cloud Search. em seu nome.
- 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:
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.
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.
Durante a inicialização, a visualização correta é ativada e os manipuladores para eventos de login e logout estão configurados:
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:
O widget é inicializado e vinculado aos elementos de entrada e de contêiner durante a inicialização:
Parabéns! Você concluiu o tutorial. Continue na por instruções de limpeza.