¿Quieres añadir un buscador en tu blog, especialmente si lo has hecho con Jamstack?
Pues vamos a ver cómo podemos conseguirlo fácilmente utilizando Algolia.
¿Por qué Algolia? Bueno, Algolia lo que te permite es una plataforma que te permite realizar búsquedas sobre un índice,
así que tienes que crear el índice y tiene una capa gratuita.
Así que vamos a iniciar sesión con Algolia, vamos a decirle que me recuerde.
Vamos a crear la aplicación, yo ya tengo algunas creadas, así que crear aplicación.
Vamos a poner aquí el nombre de nuestra aplicación, MiduDevScherchBlogAlgolia.
Vamos a decirle que vamos a utilizar la gratuita porque entran 10.000 búsquedas al mes hasta 10.000 records.
Records son los elementos que vamos a añadir en el índice en el que vamos a poder buscar.
Así que para nosotros records son artículos y ya te digo yo que menos de 10.000 artículos tengo.
Ahora te pide la región. Bueno, en este caso ten en cuenta que es la región lo que a ti te interesa,
que esté más cerca de tu aplicación. Aquí te recomienda lo que esté más cerca de ti,
pero si yo que soy de España, que estoy aquí, imagínate que mis usuarios son de Latinoamérica,
pues igual me interesa más elegir Brasil o elegir Estados Unidos, lo que sea.
En mi caso voy a poner Holanda, creo que es. Sí, Holanda. O podría ser United Kingdom.
Más o menos están ahí. Total, que elige no el que tenga cerca de ti, sino cerca de tus usuarios.
Le decimos que sí, crea mi aplicación. ¿Y qué vamos a tener que hacer?
Bueno, ahora le decimos que soy nuevo en Algolia porque esto nos va a hacer un tutorial paso a paso.
Dice que 10 minutos. Yo creo que sí, que más o menos 10 minutos, pero para hacerlo todo.
Vamos a crear el índice. El índice básicamente es donde vamos a guardar la información que queremos
que Algolia pueda buscar. En este caso vamos a crear el índice Midudev Articles Index.
Lo creamos. Y ahora lo que vamos a tener que hacer, ¿ves? Ya nos va dando paso a paso lo que tenemos que hacer.
Pero ya te lo cuento yo. No hace falta ir mirando por ahí. Ahora lo que tenemos que hacer es importar los récords.
En este caso serían los elementos, los artículos que queremos que tengamos en el índice para poder buscar.
Lo podemos actualizar, subir el archivo directamente a través de la API o manualmente.
Ya te digo yo que lo vamos a hacer a través de la API. Así que voy a hacer Use the API.
Pero ahora nos aparece la documentación. Ya ves que tienes un montón de lenguajes.
Ruby, JavaScript. Y esto es lo que vamos a hacer.
Así que vamos a hacerlo. Pero no lo vamos a hacer aquí. Sino que lo vamos a hacer ya directamente en el código.
Vámonos al código. Voy a abrir la terminal. Me voy a mi blog.
Voy a levantarlo en modo desarrollo. Y esto me tiene que dejar en el puerto 1313 mi blog.
¿Vale? Esto está en modo desarrollo. Aquí arriba es donde vamos a conseguir que aparezca nuestro buscador.
Pero antes tenemos que añadir nuestros buscadores en ese índice. ¿Cómo lo vamos a hacer?
Bueno, déjame que levante el editor y vamos a ello.
Yo, como casi todos los blogs del mundo, y si no lo hacen lo deberías hacer, tengo un archivo RSS.
¿Ves? En index.xml yo tengo este RSS.
Lo podemos ver mejor si voy aquí, index.xml.
¿Ves? Esto sería un RSS. Este RSS sirve para un montón de cosas.
Puedes utilizarlo como sitemap o para que tengas lectores de feeds o lo que sea.
Y aquí están todos mis artículos y tiene su título, su descripción.
Podría tener contenido, podría tener una imagen, podría tener más cosas.
Pero aquí están todos mis artículos. Así que lo que voy a conseguir es transformar esto en un JSON
y se lo voy a enviar a la API a Algolia para que pueda indexar todo este contenido.
De esta forma, da igual la tecnología que tengas tu blog.
Si tienes un archivo XML, vas a poder enviar toda esta información a Algolia, como vas a ver en este vídeo.
Así que vamos a crear este pequeño script con Node.js.
Vamos aquí a la terminal y... No, no hace falta ir a la terminal.
Vamos al editor y en el editor yo tengo una carpeta aquí llamada scripts.
¿Ves que tengo scripts? Pues vamos a crear uno más que sea read RSS and send to Algolia.js.
¿Vale? Ahora, lo que necesitamos aquí. Bueno, primero el file system, porque vamos a querer leer un archivo.
Luego path, porque vamos a necesitar ver dónde tenemos este archivo.
Y ahora, bueno, tendríamos que utilizar una librería para parsear ese RSS a un JSON.
Voy a utilizar XML to JSON, porque RSS al final no deja de ser un XML.
Así que XML to JSON. Vamos a instalarlo. ¿Vale? Ya se me ha instalado. Perfecto.
Y ahora lo que vamos a hacer es leer el RSS.
Así que utilizamos el file system de forma síncrona.
Le decimos que nos resuelva el path.
Para ello vamos a utilizar el dirname.
Dirname, si no lo sabes, es una variable que indica en qué path está el archivo que estamos ahora mismo ejecutando.
Así que vamos a tener lo que sería scripts, barra, read, RSS, bla, bla, bla.
Y yo quiero llegar a la carpeta public, que la tengo aquí, y leer el index.xml.
Este que tengo aquí.
Así que desde donde está este archivo vamos a intentar llegar a punto, punto, barra, public, barra, index.xml.
Y ahora le decimos que él lo tiene que leer con una codificación de UTF-8.
Con esto ya tendría el contenido del archivo leído.
Ahora vamos a pasarlo a un JSON.
Así que utilizamos el parser, le decimos to JSON.
Y el RSS le decimos además como una opción que recibe el to JSON que nos lo pase a un objeto de JavaScript.
Esto es súper importante porque si no el parser este nos lo convierte a un string en formato JSON.
Pero queremos que sea un objeto de JavaScript porque este JSON lo vamos a querer iterar y luego enviarlo justamente a la API de Algolia.
Muy bien.
Vamos a ver si esto ha funcionado correctamente.
Esto tiene que habernos dejado json.rss.channel.item.
Y item tiene que ser un array con todos y cada uno de los artículos que tengo en mi blog.
Así que vamos a ver si esto funciona correctamente.
Node, scripts y read.rss.
Perfecto.
Mira, ahí tenemos todos nuestros artículos.
Todos nuestros artículos.
Aquí los tenemos con el título y son JSON.
O sea, ya hemos transformado este RSS en un JSON.
Es un array con todos los artículos.
Y cada artículo tiene el título, descripción, la fecha.
Perfecto.
Pues ahora que ya tengo esto, ahora tengo que enviar esta información al índice de Algolia que he creado.
Lo que tengo que hacer primero, antes de nada, es instalar una nueva dependencia que se llama Algolia Search.
Vamos a dejarla aquí como dependencia de desarrollo.
Y ahora que tengo esto, pues nada, la voy a importar aquí.
Algolia Search, require, Algolia Search.
Esta dependencia lo que vamos a hacer es justamente poder enviar esta información al índice de Algolia.
¿Qué necesitamos para utilizarla?
Bueno, necesitamos por un lado el Algolia Application ID, que esto es un API Key, bueno, un ID que ahora recuperaremos en la página de Algolia.
Y Algolia Admin API Key.
Esta API Key no la deberías enseñar.
Yo la voy a hacer en el vídeo, pero porque luego la cambiaré y tal.
Seguramente habría que hacer una variable de entorno.
Prefiero que ahora nos enfoquemos en lo realmente importante de este vídeo.
Más adelante me gustaría hacer todo esto con Github Actions para que se actualice el índice automáticamente.
Y entonces seguramente lo haremos de otra forma y veremos cómo lo podemos hacer mejor.
Pero esta API Key no deberías mostrarla.
¿Dónde recuperamos la API Key?
Nos vamos a Algolia, API Keys.
Y aquí, fíjate, el Application ID es este.
Lo ponemos aquí.
Y el Algolia Admin API Key es este que no se ve.
¿Ves que no se ve?
No se ve porque justamente este es el que no debería mostrar nunca.
Le das aquí para copiarlo y lo pegas aquí.
Yo lo voy a mostrar, pero cuando termine el vídeo le voy a dar a este botón que es Regenerar para que desaparezca y ya no se pueda utilizar el anterior, el que están viendo ahora.
Ahora que tengo la Application ID, el Admin API Key, también necesito el Algolia Index Name, que este nombre se lo hemos dado antes.
Lo podemos encontrar también aquí en índices y es este, MiduDevArticlesIndex.
Así que lo copiamos, lo pegamos, lo ponemos aquí.
Con estas tres cositas lo primero que hago es crear el cliente de Algolia Search.
Le pasamos dos parámetros.
Por un lado, el Application ID y luego el Admin API Key.
Ahora que tenemos el cliente, vamos a inicializar el índice.
Ponemos client.init index y le pasamos el Algolia Index Name.
Ahora que tenemos el índice inicializado, lo que vamos a necesitar es enviarle los posts.
Pero, un momento, porque antes de enviarle los posts vamos a tener que prepararlos.
Así que voy a crear posts como una nueva constante y lo que voy a hacer es iterar todo el JSON, todos los items que hemos visto antes en la consola, los voy a iterar.
Y fíjate lo que voy a hacer, ¿vale?
Para cada item voy a crear, voy a generar un nuevo objeto donde va a tener todas las propiedades que ya tenía el post, el item, pero le voy a añadir una propiedad más que se va a llamar Object ID.
Este Object ID lo puede generar Algolia si no se lo pasas, si le pasas en la configuración que te lo genere.
Pero esto lo que va a hacer es que este post siempre va a tener esta ID única.
¿Y qué podemos utilizar como ID única?
Bueno, pues si vemos aquí un poco el output, verás que tenemos el title, el title no lo podemos utilizar porque pueden dos artículos tener el mismo title.
Pero el width este, que es la URL, sí que es verdad que no puede haber dos artículos que tengan la misma URL.
Así que este width lo podríamos utilizar como Object ID.
Y eso es lo que vamos a utilizar como Object ID.
En este Object ID lo que vamos a hacer es post.width.
Y de esta forma pues será como una forma de identificar de forma única ese artículo.
Así que ya tendríamos el Object ID con todos estos posts.
Ahora solo nos queda, pues nada, en el índice decirle que queremos guardar todos estos objetos que son los posts.
Si ha ido bien, esto nos devuelve una promesa, pues nada, vamos a hacer un console.log y vamos a ver todos los Object IDs que ha guardado.
Vamos a poner aquí Object IDs, que esto debería ser, justamente estos Object IDs deberían ser la URL que hemos visto.
Y si hay algún error, pues venga, vamos a informarnos de ese error por si acaso se nos ha escapado algo.
Vamos a limpiar la terminal y vuelvo a ejecutar el script.
A ver.
Vale, esto era el console.log que teníamos arriba.
Si voy bajando, deberíamos ver de repente todas las URLs.
¿Ves?
Todas las URLs que ha guardado en el índice.
Esta sería la tarea, los Object IDs que ha guardado.
Fíjate, si ahora me voy al Golia, ves que aquí tenía el índice que tenía 0, voy a refrescar.
Fíjate aquí, refrescar.
Y al refrescar, debería ahora ver los resultados que he indexado.
83 artículos y que ocupan 750 bytes.
De hecho, aquí ya me dice que ha ido bien la importación y que aquí puedo buscar.
Si buscas React, ves, ya me está buscando en el title.
Si busco JavaScript, pues aquí en el title.
Bueno, sale el Object ID y el title, pero aquí podéis ver más atributos.
Tenemos el link, el update, git, description.
Una cosa que tienes que tener en cuenta es que, claro, hay veces que yo he puesto aquí JavaScript
y fíjate que me está buscando en el title, en el link, en el git.
O sea, te puedes buscar en un montón de sitios.
Pues esto lo puedes configurar.
Y de hecho, lo que vamos a hacer, nos vamos a ir a configuración.
Y, bueno, es que ya me está chivando esto.
Spoiler, spoiler.
Me dice los atributos que se puedan buscar.
Bueno, ¿qué pasa aquí?
Que tú aquí puedes configurar qué atributos pueden ser los que sean buscables
para evitar buscar en la fecha, que no tiene sentido.
Así que vamos a decir que se puede buscar tanto en el title como en la descripción.
Tiene un montón de cosas.
Por ejemplo, tolerancia a los tipos.
Podrías hacer, bueno, que si buscas React sin la T final, pues que busques React en realidad.
Cosas así.
Ya tenemos configurada la búsqueda y ya tenemos en el index los elementos que queremos buscar.
Ahora nos toca el tema de la UI.
Para hacer la UI, porque aquí lo tengo.
¿Ves cómo va a quedar?
Con la UI va a tener aquí un buscador arriba a la derecha y vas a poder buscar.
Y, bueno, pues te aparecerá así.
Vamos a lograrlo.
¿Cómo lo vamos a hacer?
Esto es nuestro entorno de desarrollo.
Ahora mismo no tengo el buscador.
Lo que vamos a hacer primero es ir a nuestro index.html.
En mi caso es un baseoff.html porque mi blog está hecho así.
Pero básicamente en el HTML donde vayas a cargar los scripts y los estilos, pues lo dejas ahí.
Aquí, ¿qué vamos a hacer?
Por un lado vamos a cargar el motor de búsqueda de Algolia.
¿Vale?
Este script con el motor de búsqueda de Algolia.
Ahora vamos a cargar también un widget que ya está preparado para añadir el buscador.
Y también unos estilos por defecto.
Ahora, el primero es bastante obligatorio si no te quieres pelear con la API directamente de Algolia.
Pero los segundos, este y este, son más del widget que ya viene preparado.
Si te los quieres evitar, pues lo podríamos hacer y podrías hacer un buscador desde cero solo con este SDK, el motor del buscador.
Pero en este caso, para hacerlo rápido lo vamos a hacer así.
Pero seguro, si te gusta y quieres que hagamos más vídeos sobre esto, pues deja un comentario y me animaré a hacer un buscador desde cero y sin widget de ningún tipo.
Pero bueno, como lo que queríamos es hacer un buscador rápido, pues lo vamos a tener en un momentito gracias a esto.
Ahora, ¿dónde vamos a poner el buscador?
El logo.html.
Tengo el logo y tengo toda la parte de arriba.
Pues dentro del nav, como quiero que esté pegado a la derecha, antes del icono de Twitch, voy a poner aquí un div.
Y dentro del div voy a tener un contenedor que le voy a llamar search box a la id.
Y también un id que le voy a llamar hits.
Y aquí es donde voy a renderizar mi buscador y mis resultados.
Ahora veremos dónde se utiliza esto.
Y ahora me faltaría, pues, inicializar toda la parte de JavaScript.
Yo tengo aquí un archivo scripts.js, donde tengo todo el JavaScript, no tengo mucho, pero es todo el JavaScript que tiene mi página.
Y aquí es donde tenemos que inicializar nuestro buscador.
Primero vamos a necesitar el algolia application id, como hemos visto de forma similar antes.
Y aquí, en lugar del admin API key, importantísimo.
Aquí necesitas el search API key, que verás que es diferente.
Ahora lo recupero, ¿vale?
¿Dónde lo recuperamos?
Pues aquí en algolia, API keys, tendríamos el application id, es este.
Lo ponemos aquí.
Y el algolia search API key es este de aquí.
¿Ves que este sí que se ve?
Porque este sí que puede ser público.
¿Por qué?
Hombre, porque es obvio.
Si está en el JavaScript, es imposible que lo puedas ofuscar.
Así que este no te tienes que preocupar.
El único que te tiene que preocupar es el admin API key.
Y este es el que tienes en la parte del servidor, ¿vale?
Así que este es el que no se debería ver.
Pero el search only API key, que solo es para buscar, sí que puede estar público porque es que no te queda otra.
Ahora, ¿qué tenemos esto?
Pues vamos a inicializar el cliente de algolia.
Para eso, vamos a utilizar algolia search.
Algolia search.
Este algolia search viene de este script que hemos cargado aquí.
¿Ves?
De este de aquí.
¿Ves que pone algolia search?
Pues esta variable global viene de ahí.
Que lo tengas en cuenta.
No es que sea magia y ya está.
Le pasamos dos parámetros, el application ID y el algolia search API key.
Ya hemos inicializado el cliente.
Ahora, vamos a inicializar el instant search, que es esto que habíamos instalado aquí, instant search.
Vamos a inicializarlo con el algolia client.
Así que el search lo inicializamos con el instant search.
Y le vamos a pasar, por un lado, el index name, donde tiene que buscar, y un search client, que es el que acabamos de crear, el algolia client.
Y el index name, pues nada, es exactamente el mismo que hemos creado aquí, donde va a tener que estar buscando.
En el midodef articles index.
Así que lo ponemos aquí.
¡Perfecto!
Ahora, claro, hasta aquí hemos inicializado las cosas, pero ¿qué pasa con la parte visual?
Bueno, pues lo que tenemos que decirles es que al search le vamos a añadir unos widgets.
Y esto recibe un array con todos los widgets que queremos añadir.
El primer widget que queremos añadir, bueno, pues al instant search tenemos widgets y vamos a añadir el search box.
Y el search box se va a renderizar en el container que hemos creado antes.
Entonces, search box, aquí, el logo.
¿Ves que habíamos creado el search box y widgets?
Pues para esto es para decirle que este widget se tiene que renderizar en este container.
También podéis aquí customizar algunas cosas, por ejemplo, el playholder.
Pues lo podemos poner así.
¿Qué más?
Otro widget.
Bueno, necesitamos otro widget que va a ser widgets.
Hids son los resultados de la búsqueda.
Y esto lo tenemos que renderizar en widgets, que es justamente el que habíamos creado antes también.
¿Vale?
Aquí nos dice que nos queda una coma porque esto es un array.
Pues tenemos que separarlo por coma.
Y ahora vamos a renderizar.
Bueno, no renderizar porque no es renderizar exactamente.
Pero es configurar.
Widget configure.
Pero hay que ponerlo como si fuese un widget.
¿Vale?
Y aquí le podemos decir, por ejemplo, el número de resultados que tenemos que mostrar.
Pues vamos a decirle que nos muestre 3.
Y finalmente le decimos que el search lo queremos...
Hacemos un start para empezar y ya tendríamos nuestra búsqueda inicializada.
Vamos a ver si funciona.
He guardado los cambios.
Vamos a ir ahora al entorno de desarrollo.
A ver.
Aquí lo teníamos.
Vale.
Pues fíjate, el entorno de desarrollo funcionar me ha añadido este buscador aquí, pero ya me aparece aquí una cosa súper rara, ¿verdad?
Vamos a buscar React.
¿Ves?
Parece que funcionar funciona.
Yo busco JavaScript, me lo encuentra, pero uno, se ve fatal.
Dos.
Nada más entrar, ya estaba inicializada la búsqueda.
¿Ves?
Estaba ya inicializada.
Pues estas dos cosas, tanto que se ve fatal como que ya está inicializada, las vamos a arreglar ahora porque esto no se puede quedar así.
Así que primero vamos a personalizarlo un poco, que sea más bonito.
¿Cómo podemos hacer eso?
Bueno, lo único que se ve muy, muy, muy mal, yo diría que ahora mismo es el resultado de la búsqueda.
¿Vale?
Que se ve aquí como un objeto y tal.
Esto se puede customizar.
Esto aquí en Hits, porque son los resultados de búsqueda, se puede pasar una opción que es Templates y aquí en Templates tienes diferentes plantillas que tú puedes sobreescribir.
Una de ellas es la del Item, digamos cada resultado de la búsqueda.
Y aquí le pasas un String y empiezas a indicar qué plantilla tiene que renderizar para cada resultado de búsqueda.
En este caso vamos a utilizar, sé que se tiene que utilizar Mustache.
No sé si conoces Mustache.
Mustache, mira, Template Engine.
Pero Mustache es como una forma de plantillas bastante mítica, es bastante antigua, pero que sigue funcionando súper bien.
Si tienes alguna duda, pues bueno, te puedes ver un poco el manual.
Pero básicamente, ¿veis?
Esa sería un poco así.
Así, con las dos llaves para evaluar una variable.
Y esto sería como para ejecutar una parte o una utilidad.
Lo vais a ver ahora claramente.
Tampoco hace falta que, no es muy difícil y tampoco hace falta que os volváis unos expertos en esto.
Ya os lo digo yo.
Por ejemplo, en este ejemplo lo vais a ver súper claro.
Yo quiero renderizar un anchor y en el href lo que quiero renderizar es la propiedad link.
Este link no me lo estoy inventando yo.
¿De dónde viene este link?
Pues de aquí, de las propiedades, ¿ves?
Es este link el que se va a renderizar.
Y ahora vas a ver que también voy a renderizar el title y el description.
Y vienen de aquí, de lo que estoy justamente indexando.
Así que aquí tendríamos el link.
Luego, también me gustaría que se renderizase el title.
Pues podríamos poner aquí title.
¿Qué pasa?
Que yo quiero el efecto este de que si yo busco la palabra React, me quede resaltada la palabra React.
Pues para hacer esto, claro, no puedo hacer esto del title así tal cual.
Sino que tengo que utilizar un helper que ya me está proporcionando Algolia, en este caso.
Que se llama Highlight.
Y este helper de Highlight, lo voy a poner aquí.
Y voy a hacer que esto se cierre aquí, ¿vale?
¿Ves? Aquí es donde se iniciaría y aquí es donde terminaría.
Y ahora habría que decirle qué es lo que queremos que haga el highlight.
Pues le vamos a pasar el atributo.
Es el attribute de title, ¿vale?
Fíjate que aquí se le pasa con una sola llave, ¿vale?
Porque esto es como que le estamos pasando el parámetro, el atributo title, al helper's highlight.
Esto sería lo más raro que tiene o lo más interesante.
Si guardo ahora los cambios y vuelvo a mi blog, ¿ves?
Ahora, ¿ves que tengo ya el título, al menos?
Ya tengo el título y cuando paso por encima, pues está haciendo como el link, claro.
Porque si le doy, pues me lleva al enlace que está haciendo.
Voy a dejarlo un poquito mejor y para ello vamos a crear aquí un div.
Con el div y vamos a poner un small porque de forma pequeñita quiero utilizar también otra vez el helper de highlight.
Y aquí, vamos a cerrar aquí el helper's highlight.
Y aquí quiero que me renderice el atributo, attribute, el de description, ¿vale?
Para que aparezca la descripción.
Porque como puede buscar el título y la descripción, pues que vea visualmente si cualquiera de los dos son los que ha encontrado, ¿vale?
Si ahora busco React, fíjate el highlight, está funcionando bien.
¿Ves? Está haciendo el highlight de todo.
React, React, perfecto.
Si busco ahora JavaScript, pues lo mismo, ¿vale?
Ahí lo tendríamos.
Muy bien.
Ahora, cuando refresco, fíjate que el buscador ya está funcionando.
¿Sabes?
Esto no espera a nadie ni a nada.
Esto dice, ya está.
La primera búsqueda para ti.
Esto es un poco raro, ¿vale?
Y es verdad que no sé si Algolia en algún momento va a ponerle una opción para evitar esto de primeras.
Te voy a explicar cómo se puede hacer ahora, pero yo creo que esto Algolia en algún momento lo solucionará de otra forma
porque creo que es evidente que no siempre quieres que se busque desde el principio.
Esto es porque utilizamos estos widgets que ya están preparados de esta forma, ¿vale?
Entonces, si no utilizasemos estos widgets, podríamos hacer que funcionara de otra forma.
Si quieres que creemos nuestro buscador desde cero, toda la parte de UI, cuéntamelo en los comentarios y lo haremos.
Y me animo y lo hacemos, ¿vale?
Entonces, hasta ahora habíamos hecho todo esto para evitar la primera búsqueda.
Lo podemos hacer, lo podemos lograr y lo vamos a hacer.
Tenemos el Algolia Client.
Bueno, voy a crear aquí otra variable que le voy a llamar Search Client.
Y vamos a crear nuestro propio Search Client que le vamos a pasar luego aquí.
Esto tiene que ser un objeto.
Vamos a pasarle el Algolia Client.
Lo que vamos a hacer es extender el objeto de Algolia Client, básicamente.
Así lo que hacemos es un Spread.
Y con el Spread Operator lo que hacemos es una copia de todo lo que hay en Algolia Client.
Lo pasamos al Search Client.
Pero vamos a añadir nuestro propio método Search.
A esto le llegan las requests.
Y en este método Search lo que vamos a hacer es mirar si es la primera carga.
Claro, este First Load todavía no lo tenemos.
Pero este First Load lo podemos poner aquí fuera.
First Load, vamos a hacer que la primera carga al principio es True.
Así que si la primera carga es True, vamos a hacer que First Load pasa a ser False.
Y hacemos un retorno porque no hacemos nada.
Hacemos un retorno y ya está.
Y si no, lo que vamos a hacer es un Algolia Client.searchRequest.
De esta forma vamos a evitar que la primera búsqueda, nada más entrar en la web, ocurra.
Así hasta que no tengamos una request, no haga esta primera búsqueda y quede bastante mejor.
Vamos a guardar los cambios con esto.
Y bueno, antes este Search Client, que lo he creado para algo,
vamos a quitar este Algolia Client y vamos a utilizar el Search Client, el que acabamos de crear.
Y Algolia Client solo lo utilizamos en esta línea de aquí.
Así que vamos a volver a entorno de desarrollo.
¿Ves? Ahora he refrescado y ya no tengo el buscador ahí levantado ni nada.
Me sale el buscar, le doy y ahora puedo buscar Xcode.
Y ya me aparecen aquí todos los de Xcode.
Puedo buscar Svelte y ya me salen todos los míos, mis artículos de Svelte.
React, fíjate lo rápido que es. Es inmediato. Es brutal. Es brutal.
Next. Bueno, pues aquí podemos ver.
Y entonces yo puedo dar curso gratis de Next.js en framework de React.
Le das y ya está. Aquí lo tienes.
Mi curso gratis y tal.
Y puedes seguir buscando Firebase.
No, de Firebase no tengo.
Mira, tengo sin resultados.
Esto también, este sin resultados, también lo podríais personalizar.
De hecho, no sé si lo tengo por aquí apuntado,
pero cuando hemos hecho lo del template, lo podríamos hacer.
Hay diferentes templates.
Lo podéis mirar en la documentación y uno de ellos es el no sin resultados.
¿Veis? Yo he hecho este de item, pero aquí creo que hay uno de empty.
Pues aquí podríais poner no hay resultados y ponerlo en h1 o ponerlo que salga en una cajita o lo que sea.
Podríamos poner el div con lo que sea.
¿Vale? Esto será así.
Esto será un strong.
Así.
Y ponemos aquí una coma.
Creo que es este.
Lo vamos a ver ahora.
Bueno, esto ahora es que he ido a mi blog, pero vamos a volver aquí.
Vamos a poner Firebase.
¿Ves? Que ahora sale en negrita.
Esto es porque he sido yo que lo he puesto aquí.
Así que si queréis también poder estirar los sin resultados, que sepáis que lo podéis hacer así.
Hay diferentes templates que podéis utilizar justamente para personalizar el look and feel de los resultados de búsqueda.
Y con esto lo que hemos logrado es tener esta pedazo de búsqueda súper rápida que te lleva, pues nada, volando justamente allá donde quieras de mi blog.
Con una arquitectura JAMstack y sin necesidad de tener ningún tipo de base de datos y gracias al free tier de Algolia.
Si te interesa, pues que sepas que en la descripción tienes un enlace donde te puedes registrar y creo que te dan algún tipo de beneficio por ir con el enlace.
A mí me dan, no sé, creo que no me dan nada.
Sinceramente no me dan nada.
Pero bueno, seguramente le hará a la gente de Algolia ilusión de ir a través de mi enlace.
Espero que te haya gustado, que te animes.
Si te animas, deja en los comentarios tu blog y dices, mira, he añadido una búsqueda de Algolia.
Una cosa importante, si utilizáis el free tier, que sepáis que tenéis que mostrar aquí abajo o en vuestra página.
Yo, por ejemplo, la muestro aquí.
¿Veis? Patrocinadores, Algolia.
Tenéis que enseñar el logo de Algolia en vuestro sitio, ¿vale?
Ya sea en los resultados, lo podéis poner en los resultados, por ejemplo, o lo podéis poner en vuestro blog.
Buscador por Algolia.
Que lo tengas en cuenta, que si no, os pueden quitar la cuenta.
Pues muchas gracias por verme.
Espero que te haya gustado.
Dale like, comenta y nos vemos en el siguiente vídeo aquí, en MidoDev.
¡Chao!
¡Suscríbete al canal!