Integrar Firebase con Ionic y qué librería elegir

Manuel García25-Nov, 2019

Firebase es una tecnología de Google que ofrece un conjunto de herramientas y características orientadas al desarrollo de aplicaciones web y móvil.

Muchas de sus herramientas ofrecen un servicio gratuito, por lo que ayuda a reducir los costes de implementación de una aplicación. Además, todos sus servicios conjuntos forman un stack de herramientas completa para toda la vida de la aplicación web o móvil en cuestión.

En este artículo, se nombrarán algunos servicios y cómo integrarlos en una aplicación de Ionic utilizando para ello librerías concretas, algunas más genéricas y otras más específicas según el tipo de servicio que quiera utilizarse.

Servicios de Firebase

Como se ha comentado, Firebase se compone de numerosas herramientas que pueden utilizarse complementariamente y aportan un valor añadido dependiendo del objetivo de su uso.

La utilización de un servicio o característica de Firebase no depende del empleo de otros servicios, cada uno de ellos puede utilizarse independientemente. Aunque, al final, si el objetivo es usar Firebase como un backend completo para la aplicación que se quiere desarrollar, hay una serie de características que van ligadas y acaba siendo más rentable utilizarlas juntas.

Los servicios más empleados comúnmente, y que podrían considerarse básicos a la hora de utilizar la plataforma, serían:

Cloud Firestore/Realtime Database

Son dos servicios orientados al manejo de los datos, es decir, un gestor de base de datos no relacional. Son dos servicios distintos porque cada uno de ellos aporta características diferentes en la forma de organizar los datos y poder acceder a ellos. Realtime Database nació primero como solución a la gestión de los datos pero, posteriormente, nació Cloud Firestore con mejoras en la organización de estos. Actualmente, es la opción más recomendada para integrar los datos. La utilización de estas características dependerá de si la aplicación necesita organizar los datos de forma no relacional, por lo que para utilizarse conviene tener en cuenta de si la aplicación a desarrollar no es mejor utilizarla con un motor de base de datos relacional tipo MySQL/MariaDB. Quizás, también puede ser interesante una utilización mixta, es decir, puede haber tablas o datos que sean mejor tenerlos relacionados en una base de datos más tradicional con un backend propio en una tecnología concreta y utilizar Firebase para acceder a datos que están organizados de forma no relacional.

Authentication

La solución de Firebase a la autenticación de usuarios es bastante interesante ya que ofrece autenticación con correo electrónico, con número de teléfono, cuenta de Google, etc. Al registrar usuarios, creará un ID asociado que luego podrá utilizarse para guardarlo en Cloud Firestore/Realtime Database o utilizarlo en otro motor de base de datos ajeno a Firebase.

Cloud Storage

Esta característica ayuda si se decide guardar, además de los datos, recursos como imágenes, vídeos, etc. en Firebase.

Cloud Functions

Permite ejecutar funciones como si fueran parte del mismo código de la aplicación. La forma de invocarlas es muy parecida a cómo se haría invocando un servicio web de una API. Se suelen desarrollar en Node.js desde la misma consola de Firebase y es una solución bastante interesante si el objetivo es reducir al máximo el desarrollo de un backend ajeno a Firebase.

Cloud Messaging

Firebase ofrece un servicio de mensajería y notificaciones que puede ser interesante para avisar a los clientes o usuarios de la aplicación de cualquier oferta, novedad o característica nueva que se quiera anunciar.

Librerías para utilizar Firebase en un proyecto Ionic

Para integrar Firebase en un proyecto se dispone de una serie de APIs para integrar sus servicios con diferentes tecnologías o lenguajes de programación.

Este artículo está enfocado a Ionic, por lo que el API de referencia que se necesita será el de Web (Web reference) que se trabaja con JavaScript, a no ser que se requiera realizar algún desarrollo propio de forma nativa. En ese caso, habría que mirar el API de Android o el de iOS.

Al final, para trabajar con Ionic y Firebase, se tiende al uso de librerías que adaptan ese API de referencia en JavaScript al framework concreto de Ionic, que es Angular (si se utiliza con React o Vue.js hay que buscar otras alternativas).

Existen librerías generalistas que intentan adaptar en una misma herramienta las funcionalidades más básicas y/o utilizadas de Firebase, como pueden ser: acceso y manejo de la base de datos (operaciones CRUD), login y registro, etc. y otras más específicas que simplemente hacen de wrapper o comunicador con el API de referencia para adaptar una sola característica, por ejemplo, el manejo de notificaciones.

Además, para Ionic, al existir dos vertientes hacia donde enfocar el desarrollo, ya sea hacia aplicaciones nativas mediante desarrollo para iOS y Android o Web mediante el desarrollo de una PWA, la elección de qué librería usar se complica.

Ionic en su documentación ofrece acceso a plugins de Cordova realizados por la comunidad y orientados al desarrollo de aplicaciones nativas. Entre ellos, si se busca “firebase”, aparecen varios plugins que integran algunos servicios de Firebase:

Como puede verse, muchos de ellos realizan una implementación del API de un servicio concreto de Firebase. La extensión más general es la llamada “Firebase”:

Esta extensión da acceso, entre otras cosas, al sistema de notificaciones push de Firebase. Si se observa de nuevo el anterior listado de búsqueda, ya existe otro plugin que ya hace eso concreto: “Firebase Messaging”. Esto hace que pueda haber confusión sobre cuál utilizar. Lo mejor es leer la documentación original del plugin, normalmente en Github, donde el autor o autores del plugin comentan qué uso específico y qué limitaciones tiene la implementación.

Estos plugins que aparecen en la web de Ionic están destinados en su mayoría a trabajar con un desarrollo más bien nativo, ya que hacen uso de Cordova e integran código Java (Android) y código en Objective C (iOS).

Hay una librería muy completa orientada a desarrollo web y que suele ser la referencia para integrar Firebase en Angular. La librería es AngularFire.

Es de ámbito general y su idea es la de integrar muchas de las funcionalidades de Firebase en una sola extensión o plugin. Su implementación interna es extender el API de referencia de Firebase para web (JavaScript) y adaptarlo para trabajar con Angular. Lógicamente, también se puede integrar fácilmente con Ionic. El uso de esta extensión es muy sencillo y al ser una extensión bastante liviana, es muy recomendable su uso sobre todo para gestionar funcionalidades como el manejo de los datos (creación de entidades, editar información, borrar, etc.) así como también el acceso a la aplicación (login y registro).

Firebase con Ionic: recomendaciones y conclusiones

Para finalizar, a modo de conclusiones del anterior apartado y de cara a saber qué plugin o extensión elegir para trabajar con Firebase en Ionic viendo la cantidad de alternativas que hay, primero hay detectar qué es lo que realmente se necesita.

Si el desarrollo de la aplicación está orientado a desarrollo nativo (Android e iOS), puede utilizarse la documentación de Ionic y de sus plugins referenciados para integrar distintos servicios de Firebase en Ionic. En esta documentación, cada plugin ofrece un apartado para ver con qué plataformas es compatible:

Por el contrario, si el desarrollo es puramente web, AngularFire es la mejor opción al integrar muchos de los servicios de Firebase en una sola extensión. Además, al ser una extensión oficial para Angular, se cuenta con el soporte asegurado y corrección de problemas o bugs que puedan surgir con las actualizaciones.

Del mismo modo, en un desarrollo de una aplicación orientada a desarrollo nativo, podrá utilizarse también Angular Fire para, por ejemplo, el acceso a la base de datos, ya que su API y método de llamadas no cambia independientemente de que el desarrollo sea web o nativo. En cambio, para otras funcionalidades como las notificaciones sí se recomienda utilizar un plugin concreto de Ionic/Cordova que adapte el API de referencia de las plataformas concretas (Android e iOS) para utilizarlas en un proyecto Cordova (Ionic). Esto pasa porque hay algunas limitaciones en el uso del API de referencia Web para utilizarse en plataformas nativas. Esto ocurre, por ejemplo, con las notificaciones en iOS o el registro con número de teléfono, que deben ser utilizando recursos nativos. En estos casos es mejor emplear plugins que den soporte al API de referencia de plataformas nativas (Android e iOS).

Manuel García

Desarrollador full stack web y móvil. En evolución constante.