app-search-blog-banner.png

app-search-blog-thumb.png

How to Build Great React Search Experiences Quickly

Como desenvolver rapidamente excelentes experiências de pesquisa no React

Crie seu próprio Searchbot usando o Slack, o Zapier e o Elastic App Search. Não precisa escrever código!

robots_full.jpg

robots_thumb.jpg

Building a Searchbot using Slack, Zapier, and Elastic App Search

Criando um Searchbot usando o Slack, o Zapier e o Elastic App Search

Uma busca rápida e relevante é importante. Mas a experiência também deve ser ótima! O Elastic App Search e o React podem ajudar você a criar experiências de busca envolventes.

Quando um usuário faz uma busca, ele quer receber resultados relevantes. Mas resultados relevantes são apenas parte do que conquistará a simpatia do visitante; a busca também deve ser uma boa experiência. Deve ser rápida, reagir às entradas e parecer inteligente e eficaz.
Neste tutorial, demonstraremos como criar uma experiência de busca fluida e robusta na aplicação usando o React e o <a href="https://github.com/swiftype/swiftype-app-search-javascript" target="_self">cliente JavaScript do Elastic App Search</a>. No final, você terá uma aplicação com React de boa aparência e relevante que lhe permitirá fazer buscas em vários pacotes do npm em tempo real com classificação por facetas e o estado mantido como parte do URI.
O código completo pode ser encontrado no <a href="https://github.com/swiftype/app-search-demo-react" target="_self">GitHub</a>.
<hr />
Uma observação importante:
Temos um artigo mais recente sobre como criar ótimas buscas ainda mais rapidamente usando o Search UI, uma biblioteca open source da Elastic.
<a href="/pt/blog/how-to-build-great-react-search-experiences-quickly" target="_self">Não deixe de lê-lo</a>!
<hr />
<h2>Requisitos</h2>
Para prosseguir, você precisará ter o seguinte:
<ol>
 <li>Uma versão recente do <a href="https://nodejs.org/en/" target="_self">Node.js</a>.</li>
 <li>Uma versão recente do <a href="https://www.npmjs.com/" target="_self">npm</a>.</li>
 <li>Uma conta do Elastic App Search Service ou uma <a href="https://info.elastic.co/app-search-trial.html?elektra=blog" target="_self">avaliação gratuita de 14 dias</a> ativa.</li>
 <li>Cerca de 30 minutos.</li>
</ol>
<h2>App Search: uma introdução</h2>
As aplicações são construídas em torno de dados. O Facebook explodiu em nossos círculos sociais ao apresentar dados de “amigos” de uma forma interessante. O eBay começou como a forma mais simplificada de encontrar e comprar produtos usados. A Wikipédia facilitou o aprendizado dos leitores sobre... bem, tudo!
As aplicações existem para resolver problemas de dados. Nesse esforço, a busca é uma companheira essencial. Se for uma aplicação importante, uma parte fundamental do que ela oferece será a busca: encontrar amigos, produtos, conversas ou artigos. Quanto maior e mais interessante for o conjunto de dados, mais popular será a aplicação — especialmente se a busca for relevante e recompensadora.
O <a href="/pt/cloud/app-search-service" target="_self">Elastic App Search</a> foi desenvolvido com base no <a href="https://github.com/elastic/elasticsearch" target="_self">Elasticsearch</a>, um mecanismo de busca RESTful distribuído e open source. Com o Elastic App Search, os desenvolvedores recebem acesso a um conjunto robusto de endpoints de API otimizados para lidar com casos de uso diferenciados de busca em aplicações.
<h2>Coloque seus mecanismos para funcionar</h2>
Para começar, crie um mecanismo no App Search.
Um mecanismo ingere objetos para indexação. Um objeto são seus dados; é o perfil do amigo, o produto ou a página wiki. Depois que os dados são ingeridos no App Search, são indexados em um esquema flexível e otimizados para busca. A partir daí, podemos utilizar diferentes bibliotecas de clientes para criar uma experiência de busca agradável.
Para este exemplo, chamaremos nosso mecanismo: node-modules.
Depois que o mecanismo for criado, precisaremos de três itens da página <a href="https://app.swiftype.com/as/credentials" target="_self">Credencials</a> (Credenciais):
<ol>
 <li>O identificador do host, prefixado com host-</li>
 <li>Uma chave de API privada, prefixada com private-</li>
 <li>Uma chave de busca pública, prefixada com search-</li>
</ol>
Com isso, podemos clonar o projeto, entrar no diretório, verificar a ramificação inicial e executar uma instalação do npm:<pre class="prettyprint" style="font-size: 12.6px;">$ git clone https://github.com/swiftype/app-search-demo-react.git $ cd react-tutorial &amp;&amp; git checkout starter &amp;&amp; npm install </pre>
Ótimo — temos uma aplicação preparada e pronta. Mas para fazer buscas, são necessários dados...
<h2>Ingestão ~</h2>
Na maioria dos casos, seus objetos residiriam em um banco de dados ou em uma API de backend. Como este é um exemplo, usaremos um arquivo .json estático. O repositório contém dois scripts: init-data.js e index-data.js. O primeiro é um scraper que foi usado para adquirir dados do node-module bem formatados do npm. Os dados existem no arquivo node-modules.json. O último é um indexador que fará a ingestão desses dados no mecanismo do App Search para indexação.
Para executar o script indexador, precisaremos passar nosso identificador de host e a chave de API privada junto com ele.<pre class="prettyprint" style="font-size: 12.6px;">$ REACT_APP_HOST_IDENTIFIER={Your Host Identifier} \ REACT_APP_API_KEY={Your Private API Key} \ npm run index-data </pre>
Os objetos são enviados rapidamente para nosso mecanismo do App Search em lotes de 100, e o índice é construído.
Agora devemos ter um dashboard para nosso <a href="https://app.swiftype.com/as/engines/node-modules" target="_self">mecanismo</a> recém-criado com aproximadamente 9.500 pacotes do npm indexados como documentos. Pode ser útil dar uma olhada nos dados para nos familiarizarmos com seu conteúdo.
<img src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/bltb780390565978c73/5c304feb5a7621286e3e90af/app_search_engine_overview.png" data-sys-asset-uid="bltb780390565978c73" alt="app_search_engine_overview.png" style="margin-top: auto;margin-right: auto;margin-bottom: auto;margin-left: auto;display: block;" />
<h2>Reatividade</h2>
Com nosso mecanismo preenchido e pronto, podemos começar a construir nossa aplicação básica.<pre class="prettyprint" style="font-size: 12.6px;">$ npm start </pre>
Iniciar o npm no diretório do projeto abrirá o padrão do React. Ele extrai seu estilo do App.css — vamos customizá-lo melhor para atender às nossas necessidades.
Num futuro próximo, precisaremos de uma caixa de busca onde possamos digitar nossas consultas. Os usuários procurarão esses retângulos úteis porque os mecanismos de busca e os navegadores os habituaram a esse formato: digite aqui e encontre o que deseja!<pre class="prettyprint" style="font-size: 12.6px;">//App.css ... .App-search-box { height: 40px; width: 500px; font-size: 1em; margin-top: 10px; } </pre>
Também precisaremos colocar nossas credenciais de acesso do App Search em um local seguro, como um arquivo .env.
Crie um dentro do diretório raiz do projeto e preencha-o, assim:<pre class="prettyprint" style="font-size: 12.6px;">//.env REACT_APP_HOST_IDENTIFIER={seu identificador do host, prefixado com host-} REACT_APP_SEARCH_KEY={sua chave de busca pública, prefixada com search-} </pre>
Com as variáveis guardadas com segurança, podemos começar a escrever nossa lógica de busca.
<h2>Começando a buscar</h2>
O arquivo App.js é onde a lógica principal ficará. Esse arquivo — junto com a maioria dos outros arquivos iniciais — foi criado por <a href="https://github.com/facebook/create-react-app" target="_self">create-react-app</a>, uma ferramenta para ajudar a inicializar aplicações do React sem qualquer configuração. Antes de escrevermos alguma lógica para testar a busca, precisamos instalar a biblioteca do cliente JavaScript do Swiftype App Search:<pre class="prettyprint" style="font-size: 12.6px;">$ npm install --save swiftype-app-search-javascript </pre>
Coloque o código a seguir no App.js. Ele realizará uma busca básica.
Codificaremos foo como nosso termo de busca de exemplo:<pre class="prettyprint" style="font-size: 12.6px;">import * as SwiftypeAppSearch from "swiftype-app-search-javascript"; const client = SwiftypeAppSearch.createClient({ hostIdentifier: process.env.REACT_APP_HOST_IDENTIFIER, apiKey: process.env.REACT_APP_SEARCH_KEY, engineName: "node-modules" }); //Podemos consultar qualquer coisa -- foo é o nosso exemplo. const query = "foo"; const options = {}; client.search(query, options) .then(resultList =&gt; console.log(resultList)) .catch(error =&gt; console.log(error)) </pre>
O navegador será atualizado e criará uma matriz resultList via console.log. Para explorar a matriz, podemos abrir o console do desenvolvedor do nosso navegador. Podemos tentar mais algumas consultas substituindo a consulta foo por outra string. Depois que a consulta for alterada e a página atualizada, podemos ver como o conjunto de resultados se adaptou.
Ótimo — com isso, já estamos buscando em nossos node-modules.
<h2>Bondade resultante</h2>
Temos um padrão simples para buscar, mas os resultados são de pouca utilidade se ficam escondidos em um console.log. Vamos remover o estilo do React básico e nosso código anterior e, em seguida, estender as coisas.
Vamos criar...
<ol>
 <li>Uma variável de estado que conterá uma propriedade de resposta.</li>
 <li>Um método performQuery que consultará o App Search usando client.search. Ele armazenará os resultados da consulta na propriedade de resposta.</li>
 <li>Um gancho de ciclo de vida componentDidMount, que será executado uma vez após o carregamento da aplicação. Consultaremos foo novamente, mas poderemos usar qualquer consulta que desejarmos.</li>
 <li>HTML estruturado para armazenar a saída de dados resultante e o número total de resultados.</li>
</ol><pre class="prettyprint" style="font-size: 12.6px;">//App.js // ... Truncated! class App extends Component { state = { 	// Uma nova propriedade de estado, que contém a resposta da consulta mais recente 	response: null }; componentDidMount() { 	/*Chamar isso em componentDidMount garante que os resultados sejam exibidos na 	tela quando o app for carregado pela primeira vez*/ 	this.performQuery("foo"); } // Método para realizar uma consulta e armazenar a resposta performQuery = queryString =&gt; { 	client.search(queryString, {}).then( 	response =&gt; { 	// Adicione isto por enquanto para que você possa inspecionar a resposta completa 	console.log(response); 	this.setState({ response }); 	}, 	error =&gt; { 	console.log(`error: ${error}`); 	} 	); }; render() { 	const {response} = this.state; 	if (!response) return null; 	return ( &lt;div classname="App"&gt;&lt;br&gt; 	&lt;header classname="App-header"&gt;&lt;br&gt; 	&lt;h1 classname="App-title"&gt;Busca do módulo de nó&lt;/h1&gt;&lt;br&gt; 	&lt;/header&gt;&lt;br&gt; 	{/*Mostrar a contagem total de resultados desta consulta*/}&lt;br&gt; 	&lt;h2&gt;{response.info.meta.page.total_results} Results&lt;/h2&gt;&lt;br&gt; 	{/*Iterar os resultados e mostrar seu nome e descrição*/}&lt;br&gt; 	{response.results.map(result =&amp;gt; (&lt;br&gt; 	&lt;div key="{result.getRaw(&amp;quot;id&amp;quot;)}"&gt;&lt;br&gt; 	&lt;p&gt;Name: {result.getRaw("name")}&lt;/p&gt;&lt;br&gt; 	&lt;p&gt;Description: {result.getRaw("description")}&lt;/p&gt;&lt;br&gt; 	&lt;/div&gt;&lt;br&gt; 	))}&lt;br&gt; 	&lt;/div&gt; 	); } } // ... Truncated! </pre>
No momento em que clicarmos em salvar, os resultados aparecerão em http://localhost:3000 — 27 resultados e alguns módulos que soam bem bacana. Se algo deu errado, podemos verificar o console, pois temos dois console.logs aninhados no código.
<h2>Criação de uma caixa chique</h2>
Estávamos codificando foo em nossas consultas. O que torna a busca mais valiosa é que ela começa com uma expressão livre. Depois de desenvolver uma ótima experiência de busca, você poderá otimizar para as expressões mais comuns, selecionando os conjuntos de resultados mais relevantes. Tudo começa com uma tela em branco: a caixa de busca.
Para criar uma caixa de busca adequada, adicionaremos uma propriedade ao estado chamada queryString. Para manter a propriedade queryString atualizada com novas strings, criaremos um método updateQuery; utilizaremos um manipulador onChange para atualizar queryString e disparar uma nova busca cada vez que um usuário alterar o texto na caixa.
Nossa classe App completa agora se parece com isto:<pre class="prettyprint" style="font-size: 12.6px;">//src/App.js // ... Truncated! class App extends Component { state = { 	// Uma nova propriedade de estado, que rastreia o valor da caixa de busca 	queryString: "", 	response: null }; componentDidMount() { 	// Remover a busca codificada por "node" 	this.performQuery(this.state.queryString); } // Manipula o evento onChange toda vez que o usuário digita na caixa de busca. updateQuery = e =&gt; { 	const queryString = e.target.value; 	this.setState( 	{ 	queryString // Salva a string de consulta inserida pelo usuário 	}, 	() =&gt; { 	this.performQuery(queryString); // Disparar uma nova busca 	} 	); }; performQuery = queryString =&gt; { 	client.search(queryString, {}).then( 	response =&gt; { 	this.setState({ 	response 	}); 	}, 	error =&gt; { 	console.log(`error: ${error}`); 	} 	); }; render() { 	const {response, queryString} = this.state; 	if (!response) return null; 	return ( &lt;div classname="App"&gt;&lt;br&gt; 	&lt;header classname="App-header"&gt;&lt;br&gt; 	&lt;h1 classname="App-title"&gt;Busca do módulo de nó&lt;/h1&gt;&lt;br&gt; 	&lt;/header&gt;&lt;br&gt; 	{/*Uma caixa de busca, conectada ao valor da string de consulta e ao onChange&lt;br&gt; 	handler*/}&lt;br&gt; 	&lt;input&lt;br&gt; 	className="App-search-box"&lt;br&gt; 	type="text"&lt;br&gt; 	placeholder="Insira um termo de busca aqui"&lt;br&gt; 	value={queryString}&lt;br&gt; 	onChange={this.updateQuery}&lt;br&gt; 	/&amp;gt;&lt;br&gt; 	&lt;h2&gt;{response.info.meta.page.total_results} Results&lt;/h2&gt;&lt;br&gt; 	{response.results.map(result =&amp;gt; (&lt;br&gt; 	&lt;div key="{result.getRaw(&amp;quot;id&amp;quot;)}"&gt;&lt;br&gt; 	&lt;p&gt;Name: {result.getRaw("name")}&lt;/p&gt;&lt;br&gt; 	&lt;p&gt;Description: {result.getRaw("description")}&lt;/p&gt;&lt;br&gt; 	&lt;/div&gt;&lt;br&gt; 	))}&lt;br&gt; 	&lt;/input&lt;br&gt;&lt;/div&gt; 	); } } // ... Truncated! </pre>
<h2>Debounce!</h2>
Dentro desta iteração, cada vez que uma alteração for detectada na caixa, uma busca ocorrerá, o que pode se tornar intenso em nossos sistemas. Para remediar isso, aplicaremos uma função _debounce_, cortesia da <a href="https://lodash.com/" target="_self">Lodash</a>.<pre class="prettyprint" style="font-size: 12.6px;">$ npm install --save lodash </pre>
Debounce é um método de limitação de taxa do número de solicitações de entrada com base em um número definido de milissegundos. Um usuário está pensando em como formular sua consulta, cometendo erros de digitação ou digitando muito rápido... e assim, não precisamos consultar cada alteração detectada.
Ao agrupar nosso método performQuery em uma função debounce da Lodash, podemos especificar um limite de taxa de 200 ms — 200 ms devem decorrer sem nenhuma entrada antes do início da próxima consulta de busca:<pre class="prettyprint" style="font-size: 12.6px;">//App.js // ... Truncated! import { debounce } from "lodash"; // Importar debounce // ... Truncated! performQuery = debounce(queryString =&gt; { client.search(queryString, {}).then( 	response =&gt; { 	this.setState({ 	response 	}); 	}, 	error =&gt; { 	console.log(`error: ${error}`); 	} ); }, 200); // 200 milissegundos. // ... Truncated! </pre>
Além de dar uma folga aos nossos servidores, a limitação de taxa pode ajudar a suavizar as consultas dos usuários. Vai longe! Sentir é importante.
<h2>A seguir…</h2>
Este é o início de uma experiência de busca de qualidade com React. Daqui para a frente, há muitas coisas excelentes a acrescentar. Poderíamos adicionar estilo ou implementar recursos dinâmicos do App Search, como <a href="https://swiftype.com/documentation/app-search/guides/facets" target="_self">facetas</a>, <a href="https://swiftype.com/documentation/app-search/guides/curations" target="_self">curadorias</a> ou <a href="https://swiftype.com/documentation/app-search/guides/search-customizations#relevance-tuning" target="_self">ajuste de relevância</a>. Ou podemos explorar o <a href="/pt/blog/introducing-the-analytics-api-suite-in-elastic-app-search" target="_self">Analytics API Suite</a> para descobrir insights valiosos sobre a atividade de busca do usuário.
Se quisermos nos aprofundar realmente, o <a href="https://github.com/swiftype/app-search-demo-react/blob/master/README.md" target="_self">README</a> na ramificação master estende o tutorial para criar gerenciamento de estado baseado em URI, além de adicionar estilo elegante, paginação, filtragem e busca facetada. Com algumas personalizações estilísticas, pode se tornar a base para uma experiência de busca de alta qualidade.
<h2>Resumo</h2>
No passado, construir uma busca na aplicação que fosse relevante e recompensadora era complicado. O Elastic App Search é uma maneira conveniente e gerenciada de escrever buscas valiosas e ajustáveis em aplicações web. A melhor parte? Tanto os engenheiros quanto as partes interessadas menos técnicas podem gerenciar os principais recursos em um dashboard elegante e intuitivo. Você pode acessar diretamente o App Search com uma <a href="https://info.elastic.co/app-search-trial-v9.html?ultron=how-to-build-application-search-with-react-and-elastic-app-search&blade=blog&hulk=cpc" target="_self">avaliação gratuita de 14 dias</a>, sem necessidade de cartão de crédito.

dazzling_full_bleed.jpg

dazzling_thumbnail.jpg

How to Build Application Search with React and Elastic App Search

Como construir uma busca na aplicação com o React e o Elastic App Search

Start free trial

Blog Footer CTA

Sign up for Elastic Cloud free trial

Software Engineer

Jason Stoltzfus

By submitting you acknowledge that you've read and agree to our <a href="/legal/elastic-cloud-account-terms" target="_self">Terms of Service</a>, and you agree to receive the <a href="/legal/privacy-statement#how-we-use-the-information" target="_self">selected communications</a> at the contact details you provided above. See <a href="/legal/privacy-statement/" target="_self">Elastic’s Privacy Statement</a> for more details or to opt-out at any time.

Communication Preferences - ONLY for /communication-preferences

Ao enviar a confirmação, você reconhece que leu e concorda com nossos <a href="/pt/legal/elastic-cloud-account-terms" target="_self">Termos de Serviço</a> e também concorda em receber <a href="/pt/legal/privacy-statement#how-we-use-the-information" target="_self">comunicações especiais</a> por meio dos dados de contato que forneceu acima. Consulte a <a href="/pt/legal/privacy-statement/" target="_self">Declaração de Privacidade da Elastic</a> para saber mais detalhes ou para cancelar a qualquer momento.

By submitting you acknowledge that you've read and agree to our <a href="/legal/serverless-preview-terms" target="_blank">Terms of Service</a>, and that Elastic may <a href="/legal/privacy-statement#how-we-use-the-information" target="_blank">contact you</a> about our related products and services, using the details you provide above. See <a href="/legal/privacy-statement/" target="_blank">Elastic’s Privacy Statement</a> for more details or to opt-out at any time.

Serverless GDPR Text

Ao enviar a confirmação, você reconhece que leu e concorda com nossos <a href="/pt/legal/serverless-preview-terms" target="_self">Termos de Serviço</a> e que a Elastic pode <a href="/pt/legal/privacy-statement#how-we-use-the-information" target="_self">entrar em contato com você</a> para divulgar nossos produtos e serviços relacionados usando os dados que você forneceu acima. Consulte a <a href="/pt/legal/privacy-statement/" target="_self">Declaração de Privacidade da Elastic</a> para saber mais detalhes ou para cancelar a qualquer momento.

By submitting you agree to <a href="/agreements/global/cloud-services-monthly" rel="nofollow">Elastic Cloud Terms of Service</a>. Your personal data will be processed in accordance with <a href="/legal/privacy-statement">Elastic's Privacy Statement</a>.

Cloud Trial GDPR Text

Ao enviar, você concorda com os <a href="/pt/agreements/global/cloud-services-monthly" rel="nofollow">Termos de Serviço do Elastic Cloud</a>. Seus dados pessoais serão tratados de acordo com a <a href="/pt/legal/privacy-statement">Declaração de Privacidade da Elastic</a>.

By submitting you acknowledge that you've read and agree to our <a href="/legal/terms-of-use" target="_blank">Terms of Service</a>, and that Elastic may <a href="/legal/privacy-statement#how-we-use-the-information" target="_blank">contact you</a> about our related products and services, using the details you provide above. See <a href="/legal/privacy-statement/" target="_blank">Elastic’s Privacy Statement</a> for more details or to opt-out at any time.

Newsletter GDPR Text

Ao enviar a confirmação, você reconhece que leu e concorda com nossos <a href="/pt/legal/terms-of-use" target="_self">Termos de Serviço</a> e que a Elastic pode <a href="/pt/legal/privacy-statement#how-we-use-the-information" target="_self">entrar em contato com você</a> para divulgar nossos produtos e serviços relacionados usando os dados que você forneceu acima. Consulte a <a href="/pt/legal/privacy-statement/" target="_self">Declaração de Privacidade da Elastic</a> para saber mais detalhes ou para cancelar a qualquer momento.

Explore similar demos

Explore outras demonstrações semelhantes

Overview

Load More

Speakers

Close

See more insights

The content on this page is not available in the selected language. As Elastic grows globally, we continue to support content in multiple languages.

The content on this page is not available in the selected language.

O conteúdo desta página não está disponível no idioma selecionado. A Elastic está trabalhando para garantir que o conteúdo esteja disponível em vários idiomas.Agradecemos a compreensão.

Author

Articles by

Learn more

Watch now (no PT)

Watch now

See all top stories

All (no PT translation)

Contact information

Press Release

Share on Reddit

Share this story

Share by Email

Thank you for your interest!

Contact Info

Follow us on Youtube

Share on LinkedIn

Follow us on LinkedIn

Search Integrations

All Solutions

Video for

Follow us on Twitter

See when this webinar starts in my time zone

Consultar a hora de início do webinar no meu fuso horário

Register to Watch

Register now

See All Posts

Can't make it? Register and we'll send you the recording. You'll also receive an email with related content

Não vai conseguir participar? Inscreva-se e nós lhe enviaremos a gravação. Você também receberá um email com conteúdo relacionado.

Author

Articles by Jason Stoltzfus

Software Engineer, Elastic

Como desenvolver rapidamente excelentes experiências de pesquisa no React

Criando um Searchbot usando o Slack, o Zapier e o Elastic App Search

Como construir uma busca na aplicação com o React e o Elastic App Search