How to Build Great React Search Experiences Quickly

Cómo crear rápidamente experiencias de búsqueda excelentes en React

Crea tu propio bot de búsqueda con Slack, Zapier y Elastic App Search ¡Sin codificación!

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

Creación de un bot de búsqueda con Slack, Zapier y Elastic App Search

La búsqueda rápida y relevante es importante. Pero la experiencia también debería sentirse bien. Elastic App Search y React pueden ayudarte a crear experiencias de búsqueda atractivas.

Cuando un usuario busca algo, quiere obtener resultados relevantes. Pero los resultados relevantes son solo una parte de lo que convencerá a un visitante, su búsqueda también debe sentirse bien. La búsqueda debe ser rápida, reaccionar a la entrada y sentirse inteligente y efectiva.
En este tutorial aprenderás sobre la búsqueda de aplicaciones a través de una demostración sobre cómo crear una experiencia de búsqueda robusta y fluida con React y el <a href="https://github.com/swiftype/swiftype-app-search-javascript" target="_self">cliente JavaScript de Elastic&nbsp;App&nbsp;Search</a>. Al finalizar, tendrás una aplicación React-ificada, relevante y atractiva que te permitirá buscar en varios paquetes npm en tiempo real mediante clasificación por facetas y el estado mantenido como parte de la URI.
El código completo puede encontrarse en <a href="https://github.com/swiftype/app-search-demo-react" target="_self">GitHub</a>.
<hr />
¡Oye!
Tenemos un nuevo artículo sobre cómo crear una búsqueda estupenda incluso más rápido con Search&nbsp;UI, una biblioteca open source de Elastic.
<a href="/es/blog/how-to-build-great-react-search-experiences-quickly" target="_self">Lee ese artículo en lugar de este</a>.
<hr />
<h2>Requisitos</h2>
Para proceder, necesitarás lo siguiente…
<ol>
 <li>Una versión reciente de <a href="https://nodejs.org/en/" target="_self">Node.js</a></li>
 <li>Una versión reciente de <a href="https://www.npmjs.com/" target="_self">npm</a></li>
 <li>Una cuenta de Elastic&nbsp;App&nbsp;Search&nbsp;Service o una <a href="https://info.elastic.co/app-search-trial.html?elektra=blog" target="_self">prueba gratuita de 14&nbsp;días</a> activa</li>
 <li>Unos 30&nbsp;minutos</li>
</ol>
<h2>App&nbsp;Search, una introducción</h2>
Las aplicaciones se desarrollan en torno a los datos. Facebook explotó en nuestros círculos sociales gracias a que presentaba los datos de "amigos" de forma interesante. eBay comenzó siendo la forma más optimizada de encontrar y comprar productos usados. Wikipedia hizo que sea fácil para los lectores aprender sobre… bueno, ¡todo!
Las aplicaciones existen para resolver problemas de datos. En este esfuerzo, la búsqueda es una compañera esencial. Si la aplicación es grande, una parte clave de su oferta será la búsqueda: encontrar amigos, productos, conversaciones o artículos. Mientras más grande e interesante sea el set de datos, más popular será la aplicación; en especial si la búsqueda es relevante y gratificante.
<a href="/es/cloud/app-search-service" target="_self">Elastic&nbsp;App&nbsp;Search</a> está desarrollado a partir de <a href="https://github.com/elastic/elasticsearch" target="_self">Elasticsearch</a>, un motor de búsqueda RESTful distribuido y open source. Con Elastic&nbsp;App&nbsp;Search, los desarrolladores reciben acceso a un set robusto de endpoints de API optimizados para encargarse de casos de uso de búsqueda de aplicaciones prémium.
<h2>Ponte en marcha</h2>
Para comenzar, crea un motor dentro de App&nbsp;Search.
Un motor ingesta objetos para indexación. Un objeto son los datos; el perfil de un amigo, el producto o la página de la Wiki. Una vez que los datos se ingestaron en App&nbsp;Search, se indexan respecto a un esquema flexible y se optimizan para la búsqueda. A partir de allí, podemos aprovechar distintas bibliotecas cliente a fin de elaborar una experiencia de búsqueda agradable.
A los fines de este ejemplo, llamaremos a nuestro motor: node-modules.
Una vez que el motor se creó, necesitaremos tres datos de la página <a href="https://app.swiftype.com/as/credentials" target="_self">Credentials</a> (Credenciales):
<ol>
 <li>El Host Identifier (Identificador del host), con el prefijo host-</li>
 <li>Una Private API Key (Clave de API privada), con el prefijo private-</li>
 <li>Una Public Search Key (Clave de búsqueda pública), con el prefijo search-</li>
</ol>
Con esto, podemos clonar el proyecto, ingresar al directorio, ver la rama "iniciador" y luego ejecutar una instalación 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>
Excelente; tenemos una aplicación preparada y lista. Pero para buscar, se necesitan datos…
<h2>Ingesta ~</h2>
En la mayoría de los casos, los objetos residirán en una base de datos o una API de backend. Como esto es un ejemplo, usaremos un archivo .json estático. El repositorio contiene dos scripts: init-data.js e index-data.js. El primero es un raspador que se usó para adquirir datos de node-module bien formateados a partir de npm. Los datos existen en el archivo node-modules.json. El segundo es un indexador que ingestará esos datos en tu App&nbsp;Search&nbsp;Engine para indexación.
A fin de ejecutar el script indexador, tendremos que pasar nuestro Host Identifier (Identificador de host) y Private API Key (Clave de API privada) junto con él.<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>
Los objetos se envían rápidamente a App&nbsp;Search&nbsp;Engine en lotes de 100 y el índice se crea.
Ahora deberíamos tener un Dashboard para nuestro recientemente creado <a href="https://app.swiftype.com/as/engines/node-modules" target="_self">motor</a> con ~9500&nbsp;paquetes de npm indexados como documentos. Puede ser útil explorar los datos para familiarizarnos con el contenido.
<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>Reactividad</h2>
Con nuestro motor completo y listo, podemos comenzar a crear la aplicación central.<pre class="prettyprint" style="font-size: 12.6px;">$ npm start </pre>
Iniciar npm desde adentro del directorio del proyecto abrirá el modelo de React. Toma el estilo de App.css; nos permite personalizarlo mejor para que se adapte a nuestras necesidades.
En el futuro cercano, necesitaremos un cuadro de búsqueda en el que podamos escribir nuestras consultas de búsqueda. Los usuarios buscarán estos rectángulos útiles porque los motores de búsqueda y los navegadores ya los entrenaron bien: escribe aquí y encuentra lo que buscas.<pre class="prettyprint" style="font-size: 12.6px;">//App.css ... .App-search-box { height: 40px; width: 500px; font-size: 1em; margin-top: 10px; } </pre>
También tendremos que poner nuestras credenciales de acceso de App&nbsp;Search en un lugar seguro, como un archivo .env.
Crea uno en el directorio raíz del proyecto y complétalo, así:<pre class="prettyprint" style="font-size: 12.6px;">//.env REACT_APP_HOST_IDENTIFIER={your host identifier, prefixed with host-} REACT_APP_SEARCH_KEY={your public search key, prefixed with search-} </pre>
Con las variables guardadas de forma segura, podemos comenzar a escribir nuestra lógica de búsqueda.
<h2>Comenzar a buscar</h2>
El archivo App.js es donde residirá la lógica central. Este archivo (junto con la mayoría de los demás archivos iniciadores) se creó con <a href="https://github.com/facebook/create-react-app" target="_self">create-react-app</a>, una herramienta para ayudar a iniciar aplicaciones React sin ninguna configuración. Antes de escribir cierta lógica para probar la búsqueda, debemos instalar la biblioteca de cliente JavaScript de Swiftype&nbsp;App&nbsp;Search:<pre class="prettyprint" style="font-size: 12.6px;">$ npm install --save swiftype-app-search-javascript </pre>
Coloca el siguiente código en App.js. Realizará una búsqueda básica.
Codificaremos de forma rígida foo como nuestro término de búsqueda de ejemplo:<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 buscar cualquier cosa -- foo es nuestro ejemplo. const query = "foo"; const options = {}; client.search(query, options) .then(resultList =&gt; console.log(resultList)) .catch(error =&gt; console.log(error)) </pre>
El navegador se actualizará y creará una matriz resultList a través de console.log. Para explorar la matriz, podemos abrir la consola del desarrollador de nuestro navegador. Podemos probar algunas búsquedas más reemplazando la búsqueda foo con otro texto. Una vez cambiada la búsqueda y actualizada la página, podemos ver cómo se adaptó el resultado.
Excelente ~ con eso, ya estamos buscando en nuestro node-modules.
<h2>Beneficios resultantes</h2>
Tenemos un patrón más simple para buscar, pero los resultados no son muy útiles si están ocultos en un console.log. Quitaremos el estilo de React básico y nuestro código anterior, luego extenderemos las cosas.
Crearemos…
<ol>
 <li>Una variable de estado que tendrá una propiedad de respuesta.</li>
 <li>Un método performQuery que buscará en App&nbsp;Search usando client.search. Almacenará los resultados de búsqueda dentro de la propiedad de respuesta.</li>
 <li>Un hook de ciclo de vida componentDidMount, que se ejecutará una vez en la carga de la aplicación. Buscaremos foo nuevamente, pero podemos usar cualquier búsqueda que queramos.</li>
 <li>HTML estructurado para que mantenga la salida de datos resultante y la cantidad total de resultados.</li>
</ol><pre class="prettyprint" style="font-size: 12.6px;">//App.js // ... Truncado class App extends Component { state = { 	// Una nueva propiedad de estado, que mantiene la respuesta de búsqueda más reciente 	response: null }; componentDidMount() { 	/*Llamar esto en componentDidMount asegura que los resultados se muestren en 	la pantalla cuando la app se cargue por primera vez*/ 	this.performQuery("foo"); } // Método para realizar una búsqueda y almacenar la respuesta performQuery = queryString =&gt; { 	client.search(queryString, {}).then( 	response =&gt; { 	// Agrega esto por ahora para poder inspeccionar la respuesta 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;Node Module Search&lt;/h1&gt;&lt;br&gt; 	&lt;/header&gt;&lt;br&gt; 	{/*Muestra el recuento total de resultados de esta búsqueda*/}&lt;br&gt; 	&lt;h2&gt;{response.info.meta.page.total_results} Results&lt;/h2&gt;&lt;br&gt; 	{/*Itera por los resultados y muestra su nombre y descripción*/}&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; 	); } } // ... Truncado </pre>
En el momento en que hacemos clic en guardar, los resultados aparecerán en http://localhost:3000 — 27&nbsp;resultados y algunos módulos interesantes. Si algo salió mal, podemos comprobar la consola, dado que tenemos dos console.logs anidados en el código.
<h2>Cuadros sofisticados</h2>
Codificamos de forma rígida foo en nuestras búsquedas. Lo que hace que la búsqueda sea más valiosa es que comienza con una expresión libre. Una vez que desarrollaste una experiencia de búsqueda estupenda, podrás optimizar para expresiones más comunes, adaptando los sets de resultados más relevantes. Todo comienza con un lienzo en blanco: el cuadro de búsqueda.
Para crear un cuadro de búsqueda capaz, agregaremos una propiedad al estado denominada queryString. A fin de mantener queryString actualizada con los textos nuevos, crearemos un método updateQuery; aprovecharemos el controlador onChange para actualizar queryString y desencadenaremos una nueva búsqueda cada vez que un usuario cambie el texto en el cuadro.
Nuestra clase de App completa ahora se ve así:<pre class="prettyprint" style="font-size: 12.6px;">//src/App.js // ... Truncado class App extends Component { state = { 	// Una propiedad de estado nuevo, que rastrea el valor a partir del cuadro de búsqueda 	queryString: "", 	response: null }; componentDidMount() { 	// Elimina la búsqueda codificada de forma rígida de "node" 	this.performQuery(this.state.queryString); } // Se ocupa del evento onChange cada vez que el usuario escribe en el cuadro de búsqueda. updateQuery = e =&gt; { 	const queryString = e.target.value; 	this.setState( 	{ 	queryString // Guarda el texto de búsqueda que ingresó el usuario 	}, 	() =&gt; { 	this.performQuery(queryString); // Desencadena una búsqueda nueva 	} 	); }; 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;Node Module Search&lt;/h1&gt;&lt;br&gt; 	&lt;/header&gt;&lt;br&gt; 	{/*Un cuadro de búsqueda, conectado a nuestro valor de texto de búsqueda y controlador&lt;br&gt; 	onChange*/}&lt;br&gt; 	&lt;input&lt;br&gt; 	className="App-search-box"&lt;br&gt; 	type="text"&lt;br&gt; 	placeholder="Enter a search term here"&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; 	); } } // ... Truncado </pre>
<h2>Debounce</h2>
Dentro de esta iteración, cada vez que se detecta un cambio dentro del cuadro, se realizará una búsqueda; esto puede tornarse intensivo para los sistemas. A fin de corregirlo, aplicaremos una función _debounce_, cortesía de <a href="https://lodash.com/" target="_self">Lodash</a>.<pre class="prettyprint" style="font-size: 12.6px;">$ npm install --save lodash </pre>
Debounce es un método de limitación de la velocidad de la cantidad de solicitudes entrantes conforme a una cantidad definida de milésimas de segundos. Cuando un usuario piensa sobre cómo redactar la búsqueda, comete errores tipográficos o escribe muy rápido, no necesitamos buscar con cada cambio detectado.
Al incluir nuestro método performQuery en una función debounce de Lodash, podemos especificar un límite de velocidad de 200&nbsp;ms; deben pasar 200&nbsp;ms sin que se realice una entrada para que comience la próxima consulta de búsqueda:<pre class="prettyprint" style="font-size: 12.6px;">//App.js // ... Truncado import { debounce } from "lodash"; // Importa debounce // ... Truncado performQuery = debounce(queryString =&gt; { client.search(queryString, {}).then( 	response =&gt; { 	this.setState({ 	response 	}); 	}, 	error =&gt; { 	console.log(`error: ${error}`); 	} ); }, 200); // 200 milliseconds. // ... Truncado </pre>
Además de darle un respiro a nuestros servidores, limitar la velocidad puede ayudar a que las búsquedas de los usuarios sean más fluidas. ¡Ayuda mucho! Se siente importante.
<h2>A continuación…</h2>
Es el inicio de una experiencia de búsqueda React-ificada de calidad. En adelante, hay muchas cosas estupendas para agregar. Podríamos agregar estilo o implementar características de App&nbsp;Search dinámicas, 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">curaciones</a> o <a href="https://swiftype.com/documentation/app-search/guides/search-customizations#relevance-tuning" target="_self">ajuste de relevancia</a>. O podríamos explorar el <a href="/es/blog/introducing-the-analytics-api-suite-in-elastic-app-search" target="_self">Conjunto de API de analíticas</a> para descubrir información valiosa sobre la actividad de búsqueda de los usuarios.
Si quisiéramos profundizar mucho, en el archivo <a href="https://github.com/swiftype/app-search-demo-react/blob/master/README.md" target="_self">README</a> dentro de la rama maestra se amplía el tutorial para crear la gestión de estados basada en URI, agregar estilos eficientes, paginación, filtrado y búsqueda facetada. Con algunas personalizaciones de estilo, puede convertirse en la base de una experiencia de búsqueda de alta calidad.
<h2>Resumen</h2>
Antes, crear una búsqueda de aplicaciones relevante y gratificante era complicado. Elastic&nbsp;App&nbsp;Search es una forma gestionada y conveniente de escribir una búsqueda valiosa y adaptable en las aplicaciones web. ¿Lo mejor? Tanto los ingenieros como las partes interesadas con menos conocimiento técnico pueden gestionar características clave desde un dashboard eficiente e intuitivo. Puedes comenzar directamente con App&nbsp;Search con una <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">prueba gratuita de 14&nbsp;días</a>; no se requiere tarjeta de crédito.

dazzling_full_bleed.jpg

dazzling_thumbnail.jpg

How to Build Application Search with React and Elastic App Search

Cómo crear búsqueda de aplicaciones con React y Elastic App Search

Start free trial

Blog Footer CTA

Sign up for Elastic Cloud free trial

headshot-jason-stoltzfus-300x300.jpg

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

Al enviar, confirma que ha leído y acepta nuestras <a href="/es/legal/elastic-cloud-account-terms" target="_self">Condiciones de servicio</a>, y que acepta recibir las <a href="/es/legal/privacy-statement#how-we-use-the-information" target="_self">comunicaciones seleccionadas</a> en los detalles de contacto que proporcionó anteriormente. Consulte la <a href="/es/legal/privacy-statement/" target="_self">Declaración de privacidad de Elastic</a> para obtener más información o para cancelar su suscripción en cualquier 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

Al enviar, confirma que ha leído y acepta nuestras <a href="/es/legal/serverless-preview-terms" target="_self">Condiciones de servicio</a>, y que Elastic puede <a href="/es/legal/privacy-statement#how-we-use-the-information" target="_self">ponerse en contacto con usted</a> acerca de nuestros productos y servicios relacionados. Consulte la <a href="/es/legal/privacy-statement/" target="_self">Declaración de privacidad de Elastic</a> para obtener más información o para cancelar su suscripción en cualquier 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

Al enviar esta información, aceptas los <a href="/es/agreements/global/cloud-services-monthly" rel="nofollow">Términos de servicio de Elastic</a>. Los datos personales se procesarán de conformidad con la <a href="/es/legal/privacy-statement">declaración de privacidad de 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

Al enviar, confirma que ha leído y acepta nuestras <a href="/es/legal/terms-of-use" target="_self">Condiciones de servicio</a>, y que Elastic puede <a href="/es/legal/privacy-statement#how-we-use-the-information" target="_self">ponerse en contacto con usted</a> acerca de nuestros productos y servicios relacionados. Consulte la <a href="/es/legal/privacy-statement/" target="_self">Declaración de privacidad de Elastic</a> para obtener más información o para cancelar su suscripción en cualquier momento.

Hosted by

All Solutions

Follow us on Youtube

Watch now (no PT)

Articles by

Share by Email

Filters

All (no PT translation)

Contact information

See when this webinar starts in my time zone

Ver cuándo comienza este webinar en mi zona horaria

Thank you for your interest!

Register to Attend

Small image for

Register to Watch

Continue reading

Featured webinar

What to explore next...

Reset all

Load more press releases

Sign In to Attend

Share

Upcoming webinar

Learn more

Search Integrations

Share on Reddit

Share on Twitter

Share on Facebook

Load more news

View more posts

On-demand webinar

Follow us on Facebook

Author

Press Release

You'll also receive an email with related content.

You'll also receive an email with related content

Además, te enviaremos contenidos relevantes

Print

Contact Info

Overview

Video for

Read less

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

El contenido de esta página no está disponible en el idioma seleccionado. Elastic está trabajando para garantizar que el contenido esté disponible en varios idiomas.Gracias por tu paciencia mientras trabajamos.

Register now

Share this story

See All Posts

See all top stories

View next

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

¿No puedes asistir? Regístrate y te enviaremos la grabación. También recibirás un correo electrónico con contenido relacionado.

Follow us on LinkedIn

Highlights

Explore similar demos

Follow us on Twitter

Share on LinkedIn

Load More

See more insights

Speakers

Close

Thank you for registering. We will send you a confirmation email soon.

Gracias por registrarte. Te enviaremos un correo electrónico de confirmación pronto.

Author

Articles by Jason Stoltzfus

Software Engineer, Elastic

Cómo crear rápidamente experiencias de búsqueda excelentes en React

Creación de un bot de búsqueda con Slack, Zapier y Elastic App Search

Cómo crear búsqueda de aplicaciones con React y Elastic App Search