En esta serie de artículos vamos a explorar la integración de Firebase a React Native. Veremos como trabajar con diversos módulos, por ejemplo, Analytics, Autenticación, DataBase, etc.

En Bouncing Shield hacemos uso constante de esta genial plataforma, Firebase nos permite escalar nuestras aplicaciones de manera rápida y eficiente, con el tiempo que ahorramos usando Firebase podemos dedicarnos a idear y aplicar nuevas funcionalidades a nuestros clientes.

En este tutorial veremos como integrar el modulo principal de RNFirebase a nuestra nueva aplicación. Y comenzaremos a utilizar uno de los módulos mas utilizados de Firebase, el módulo de Analytics. Con este módulo podremos tener un log de eventos que suceden en nuestra aplicación; Analytics nos permite guardar eventos como un login de usuario, cuántas personas ven cierta pantalla de nuestra aplicación, cuántas dan click a un botón, etc.

Tener Analytics en nuestra aplicación sera muy importante a lo largo de la vida del producto, pues podremos iterar y hacer cambios en nuestra plataforma y sabremos el impacto que estos cambios tienen en el tiempo.

Puedes ver toda la documentación de RNFirebase aquí: https://rnFirebase.io

Empezaremos por crear nuestra aplicación react-native base. Por ahora nuestra aplicación sera muy simple y sólo mostrará un botón, al presionar este botón crearemos un evento que llamaremos ‘onPressComprar’ y ese evento lo veremos reflejado en nuestra consola de Firebase.

He creado una aplicación base con:

Para enviar los eventos de nuestra aplicación a la consola de Firebase, debemos tener un proyecto creado allí, para ello iremos a la pagina web de Firebase https://console.Firebase.google.com y crearemos nuestro proyecto:

Haciendo click en Añadir Proyecto, y llenaremos los datos que nos solicitan:

Ahora que tenemos el proyecto creado en la consola de Firebase, vamos a instalar el plugin de RNFirebase en nuestra aplicación.

En el siguiente paso, instalaremos el plugin RNFirebase en IOS. Puedes encontrar toda la documentación oficial en este enlace: https://rnFirebase.io/docs/v3.2.x/installation/ios.

Iremos a nuestro terminal y ejecutaremos el comando de instalación del plugin:

Para que nuestra aplicación pueda conectarse con la consola de Firebase necesitamos un archivo que indique los valores asociados a nuestra cuenta. Ese archivo es el GoogleService-Info.plist . Este archivo lo podemos generar desde la web de la consola de Firebase:

Seguiremos los pasos y descargaremos el archivo GoogleService-Info.plist , el cual guardaremos en la carpeta ios de nuestro proyecto asi:

Ahora agregaremos el SDK de Firebase a nuestra aplicación: Necesitamos tener instalado CocoaPods ; Para ello ejecutaremos lo siguiente en nuestro terminal desde la carpeta ios de nuestra aplicación:

Abre el archivo Podfile y añade lo siguiente:

Guarda el archivo.

Y ejecuta lo siguiente:

Veras que se instalan algunos módulos de RNFirebase, además esto creara un archivo .xcworkspace para la aplicación. Usa el archivo para las futuras tareas de desarrollo de tu aplicación.

Ahora iniciamos el plugin en nuestra aplicación, en el archivo ios/[tu_aplicación]/aplicaciónDelegate.m :

En las primeras lineas del archivo importamos la librería:

Al comienzo del método didFinishLaunchingWithOptions:(NSDictionary *)launchOptions

Quedando de este modo:

Y eso es todo, puedes encontrar la documentación de la instalación en la pagina oficial de React Native Firebase https://rnFirebase.io/docs/v3.2.x/installation/ios.

Para android: https://rnFirebase.io/docs/v3.2.x/installation/android

El módulo de FirebaseAnalytics se instala por defecto al hacer la instalación del Core Plugin, asi que ya podremos usar la librería sin agregar nada mas.

Puedes ver toda la documentación del módulo en este enlace: https://rnFirebase.io/docs/v3.2.x/Analytics/reference/Analytics

Esta será una aplicación sencilla y básicamente queremos tener información de dos eventos puntuales:

Esta sera la pantalla de nuestra aplicación: