Hoy te voy a enseñar cómo puedes integrar Firestore con Algolia, porque Firestore, que es la base de datos no SQL de Firebase, tiene un montón de ventajas.
Escala muy bien, tiene la sincronización servidor y cliente, también los documentos son con objetos JSON, son muy fáciles de tratar,
pero tiene un pero, y es que no puedes hacer búsquedas de texto libre de una forma sencilla.
Y ahí es donde entra Algolia, porque ahora Firebase y Algolia tienen una extensión oficial que hace que esto sea muy sencillo.
Y te lo voy a mostrar en este vídeo para que aprendas, para que lo utilices y así dejes de sufrir a la hora de hacer búsquedas de texto libre en tu aplicación.
Vamos a verlo. Yo tengo esta aplicación, que es un ejemplo de integración Firestore con Algolia, con un buscador.
Aquí tengo el buscador, que ahora obviamente no funciona.
Si te lo estás preguntando, esto es una aplicación con Next.js y React. Vamos a echarle un vistazo.
Tengo por aquí el SDK de Algolia para hacer la búsqueda. Luego, por aquí tengo unas constantes para inicializarlo.
¿Ves? Inicializo el cliente y el índice. Esto sería exactamente igual para todos los frameworks, si es View, si es Angular, si es Svelte, lo que sea.
Luego aquí tengo la Home y luego hago la búsqueda. Para ello, pues nada, lo que hago es buscar con el valor que tengo en el formulario.
Le digo que solo quiero cinco resultados por página y estos resultados los mapeo y luego los guardo en el estado.
Ya está. Esto sería para hacer la búsqueda.
Cada vez que hago un cambio, pues lo que hago es que si es diferente el valor que hay en el input, pues hago la búsqueda.
Y al hacer el perform search, pues ejecuta este método que te acabo de explicar.
Y aquí luego, pues listo los resultados y todo esto.
Esta aplicación, aparte de tener esta parte con Algolia, también tiene integración con Firebase.
Y veremos un poquito después cómo vamos a añadir en la colección los posts que quiero hacer.
Porque quiero empezar a hacer una aplicación que sea como un agregador de noticias sobre desarrollo.
Pues noticias de JavaScript y todo esto.
Por ahora, si voy a Firebase y voy a mi proyecto, Menea Dev, que es el nombre de la aplicación,
me voy a ir a Firestore Database.
Y aquí en Firestore Database vas a ver que no tengo todavía ninguna colección.
O sea, está totalmente vacío. No he hecho absolutamente nada todavía.
Así que tengo que empezar.
Pero en lugar de ponerme aquí a crear la colección y hacerlo todo a mano,
lo que voy a hacer es crearlo automáticamente.
Luego crearé aquí todos los posts, los enviaré con una API.
Pero lo que voy a hacer ahora, ya que tengo esto preparado, es ir a Firebase Extensions.
Aquí las extensiones tienes que tener una cosa en cuenta.
Y es que necesitas estar en el plan de pago, el de plan Blaze.
Es verdad que estás preparado para que pagues.
Pero ves que por aquí se incluye el uso gratuito del plan Spark.
Eso quiere decir que si nunca pasas de los límites que ves aquí, no pagarías nada.
¿Por qué hacen esto?
Bueno, porque sí que tiene algún coste asociado el activar algunas extensiones,
por algunas ejecuciones de funciones y cosas así.
Suele ser bastante poco, pero suele compensar también.
Bueno, ahora que sabes esto, porque si no, no te dejará activar la extensión,
miramos aquí las extensiones.
Veis que hay un montón.
Y aquí puedes ver la de Search with Algolia.
Pues le vamos a dar a Instalar.
Y aquí ya nos va a preguntar en qué proyecto lo queremos hacer.
Pues he dicho que el de Meneade.
Ahora, pues para hacer esto, me va a pedir unos cuantos pasos.
Ya me dice revisar la API que se va a habilitar, que es la de Cloud Functions.
¿Por qué?
Porque la Cloud Functions lo que va a hacer es que cada vez que nosotros añadamos un documento a la colección,
pues esto lo va a sincronizar.
Va a sincronizar tanto si creamos un documento, si actualizamos el documento,
si eliminamos el documento y así el índice de Algolia va a estar totalmente sincronizado.
Así que le damos a Siguiente.
Aquí ya nos avisa que revisemos la facturación.
Y de Firebase ya te dice que te va a cobrar un pequeño importe por los recursos de Firebase que requiere esta extensión.
Que más o menos, fíjate, es un céntimo al mes.
Pero bueno, ya te avisa.
Vamos a darle, aparte, claro, si luego utilizas mucho la sincronización, vas añadiendo muchos documentos, puede ser que el coste aumente.
Pero puedes poner alertas.
Yo tengo una alerta, por ejemplo, de 20 dólares.
Nunca ha estado ni cerca.
Para ver si te vas a pasar de eso, para evitarlo.
Le damos a Siguiente.
Y ahora hay que configurar la extensión.
Lo primero le tenemos que decir el Collection Path.
Básicamente el nombre de la colección.
Yo voy a utilizar Post, que todavía no lo hemos creado.
Hemos dicho que está vacío, pero luego lo vamos a crear.
¿Por qué lo estoy creando después?
Bueno, es que si tú tienes una colección y ya tienes todos los documentos, ten en cuenta que esta extensión, cuando se active, no va a mirar los documentos que ya estén añadidos en la colección.
Se puede hacer cosas, luego lo veremos, para activarlo manualmente.
Pero lo que voy a hacer es, justamente como ya sé que la quiero activar, antes de crear la colección, pues vamos a activar la extensión.
Ahora le decimos los campos que son los que vamos a querer tener en el índice.
En mi caso voy a querer el Title y el HRF.
El Title porque es sobre el que quiero buscar y el HRF porque quiero que cuando estén los resultados, quiero poder ir y navegar a ese resultado y necesito que el HRF esté en el índice.
Otra opción sería solo el Title para buscar solo sobre el Title y con la ID buscar en Firebase las URLs de esos resultados.
Pero creo que el HRF es algo muy pequeñito, que creo que está bien que esté en el índice de Algolia porque de esta forma va a ser mucho más rápido a la hora de ver los resultados y poder navegar.
Ahora, el nombre del índice.
En este caso ya tendríamos que ir a Algolia a preparar nuestra aplicación.
Así que vamos aquí a Algolia, yo ya tengo mi aplicación prevista, ¿ves? Menea Dev.
Y aquí podríamos en Search, podríamos crear un índice.
Vámonos a Search, Index y aquí fíjate que ahora mismo no tengo ningún récord, no tengo absolutamente nada.
Vamos a crear un nuevo índice que nos sirva para este.
Yo ya tenía uno creado pero le voy a llamar, por ejemplo, Pro Menea Dev Posts.
Le damos a Create y ahora me ha creado mi índice, que hemos dicho que lo vamos a necesitar, así que me lo voy a copiar aquí, que es este índice.
Yo ya tenía uno creado para pruebas pero vamos a utilizar este.
Me he copiado el nombre del índice, volvemos aquí a la extensión, ponemos el nombre del índice.
Ahora la ID de la aplicación.
Para encontrar la ID de la aplicación podemos volver aquí a la casita, Platform, ApiKeys.
Si tienes la UI antigua tienes que ir directamente a ApiKeys, pues venga, ApiKeys.
Y aquí ya tenéis un montón de información.
Application ID, pues nos lo copiamos y nos vamos aquí a la extensión.
Algolia ApiKey, importante con esta.
Lo que te recomiendan es no utilizar la Admin ApiKey.
La Admin ApiKey sería esta que está aquí, que veis aquí.
No pasa nada si ahora mismo veis que están aquí todas estas porque todas estas normalmente son públicas y luego si no las podéis regenerar muy fácilmente.
Especialmente esta, esta es pública, ves, pone Public ApiKey, así que no te preocupes.
La más importante es esta y esta sí que te la dejan aquí para que no se pueda ver.
Vale, como puedes ver ya te recomienda que no utilices la Admin ApiKey.
Entonces deberías crear tu propia ApiKey.
Yo lo que te recomiendo es que vayas a All ApiKeys y le des a New ApiKey.
Y aquí pues pongas alguna descripción, Firebase, Algolia, Extension, ¿en qué índice va a trabajar?
En este caso, promenea dev post, que es el que hemos creado.
Validez va a ser infinita, así que la dejamos vacía, no le damos ningún límite, no ponemos ningún referer.
Y en ACL, esto básicamente es a qué tiene acceso esta ApiKey.
Aquí ya nos dicen que debe ser un Add Object, así que le ponemos aquí y veréis que tenemos un Autocomplete.
Add Object, también sería Delete Object, Delete Index y Edit Settings junto con Settings.
Y con esto ya lo tendríamos.
Ahora le damos a Create y esto nos ha creado ya una nueva ApiKey que vamos a poder utilizar.
Es esta de aquí arriba, la que acabo de crear.
Esta sería la ApiKey, nos la copiamos y la pegamos aquí.
Y ahora tenemos el Cloud Functions Location.
Esto, dependiendo de dónde hayas creado tu aplicación, puede tener más sentido o menos.
Yo, por ejemplo, el índice de Algolia lo he creado en Holanda, pues voy a intentar que sea por Europa también.
En este caso, vamos a poner Frankfurt, que está bastante cerca.
E instalamos la extensión.
La instalación de la extensión puede tardar entre 3 y 5 minutos, así que vamos a esperar para que se instale la extensión
antes de ponernos a guardar documentos en la colección.
3 minutos y 45 segundos más tarde.
Vale, completado.
Muy bien, pues ya tenemos la extensión instalada.
Antes de seguir, por si ya tienes documentos en tu colección, que sepas que aquí tienes las instrucciones
para hacer un reíndex de los documentos actuales.
No es el caso de lo que estamos haciendo ahora, porque todavía no tenemos documentos,
pero que sepas que aquí tienes todos los pasos que deberías hacer para conseguirlo.
Y con esto, ya estamos preparados para crear los post en nuestra colección.
Voy a crear un endpoint que sea addFirebasePost.js.
Vamos a importar getFirebaseAdmin de nextFirebaseAuth y vamos a crear el endpoint functionHandler con rec.res.
Y en este endpoint lo primero es recuperar la base de datos de Firestore, así que getFirebaseAdmin.Firestore.
Ahora que tenemos la base de datos, vamos a recuperar la colección, que es postDB.
Y vamos a hacer dbCollectionPost.
Ahora, los post iniciales los tengo aquí en este archivo post, que es un array de objetos.
Vamos a importarlo.
Import.
From.on.barra.on.barra post.
Vale, ya tenemos aquí initial.json.
¿Qué vamos a hacer con esto?
Vamos a mapearlo y cada post lo vamos a añadir a nuestra base de datos.
Esto, cada uno de estos post nos devuelve una promesa,
Así que ahora como las hemos mapeado podríamos hacer un promisor de todas estas promesas de forma que si todo va bien vamos a hacer aquí un then y devolvemos que la respuesta es un 201 y ponemos un json que el mensaje que todos los posts se han grabado perfectamente.
Podemos hacer un try catch por si algo no funciona correctamente estar avisados vamos a poner aquí en res status 500 punto json y pues eso que no han sido añadidos correctamente vale ya lo tendríamos formateado correcto guardo los cambios y voy a volver a mi aplicación que era esta de aquí y voy a acceder a este endpoint que he creado api barra at firebase post at firebase post.
Vale ya tenemos los post añadidos a firebase y ahora vuelvo a firebase debería haber toda la colección de post creada vamos aquí voy a refrescar y aquí tenemos post y tengo un montón de post aquí o sea que ya los hemos añadido a firebase pero lo interesante está aquí realmente estos post se han sincronizado en algolia vamos a verlo tenemos que volver a algolia vamos a los índices y aquí teníamos dos índices no este es el último
que he creado y parece ser que se haya actualizado hace unos segundos y ves ya tiene 34 récords esto tiene buena pinta si entramos veremos que tenemos toda la información que queríamos indexar el title y el href ahora podríamos buscar por ejemplo azure y ya me encuentra los que son de azure javascript y me encuentra los artículos que tiene que ver con javascript podemos mejorar un poco esto para evitar que me busque en la url
me está encontrando algunos solo por la url y la url no debería ser buscable esto lo podemos configurar podemos ir a configuration searchable attributes y le vamos a decir que solo nos busque por el title le voy a dar review and save save settings y ya lo tendríamos
¿por qué no funciona? porque tenemos que ponerle la información aquí en el index teníamos el application ID vamos a recuperar toda esta información para ver si funciona correctamente vamos a platform API keys application ID search API key que es este de aquí y el algolia index en este caso indexes y es el promenia dev post y lo ponemos aquí
está encontrando perfectamente cada uno de los artículos si pongo azure además es rapidísimo va muy muy muy rápido podemos ver que cualquier cosa que busque lo hace casi inmediatamente pues con esto ya lo tendrías listo ya has visto cómo puedes utilizar la extensión de Firebase con algolia para poder hacer búsquedas de texto libre en tus colecciones de algolia espero que te haya gustado que te sirva si construyes algo con esto si le ves alguna utilidad si lo vas a utilizar déjamelo en los comentarios
y si te interesa ver cómo yo lo uso para construir esta aplicación de menea dev no te olvides seguirme también en Twitch donde voy haciendo directos donde voy construyendo productos y haciendo desarrollos entre otras cosas así que nada nos vemos en el siguiente vídeo cuídate mucho hasta luego chao
y
y