Firebase en Ionic – ¿Qué es y cómo se utiliza? con Ejemplos / Examples

Firebase en Ionic – ¿Qué es y cómo se utiliza? con Ejemplos / Examples
5 (100%) 2 votes

En el artículo de esta semana vamos a hablar de uno de los componentes que está tomando mucha importancia en el desarrollo de aplicaciones con Ionic, se trata del componente de conectividad con Firebase Ionic. Para quien no lo sepa, Firebase es una suite de analítica puesta a nuestra disposición por parte de Google. Sencilla, potente, y versátil… Nada más que decir señoría, empecemos con el curso de firebase.

Firebase Ionic

Yepaaaa lector/a, bienvenid@ de vuelta por aquí. ¿Qué tal va pasando la entrada del verano? La verdad que yo lo llevo muy mal, estos calores son mortales para mí… e imagino que para muchos más también.

En el capítulo de hoy vamos a ver algo muy, pero que muy, interesante para los que pretendemos (o lo estamos ya) vivir de esto. Se trata de una suite que nos permite medir la mayoría de las cosas importantes del comportamiento del usuario dentro de nuestra app, hacer uso de bases de datos, autentificación de usuarios y muchas otras cosas. La veremos en profundidad y con varios ejemplos, ¿te quedas conmigo hasta el final? Apuesto a que sí… 🙂

Nota: Como esta biblioteca / librería es tan grande partiré el curso de Firebase para Ionic en varios artículos que colgarán de este, estate atento porque vamos a hablar de todo el conjunto de funcionalidades aquí, en ComoProgramar.net.

¿Qué es Firebase?

Si ya lo conoces, puedes pasar de este punto. Vamos a hacer un resumen de lo que trata este plugin.

Imagen de firebase y ionic

Pues bien, Firebase, como hemos visto antes, se trata de una enorme Suite de desarrollo de aplicaciones puesta a nuestra disposición por parte de Google, y cuando digo enorme, es que es enorme.

Su uso es gratuito, en cierto modo (hasta un límimte de usos diarios), y cuenta con las siguientes posibilidades:

Nota: Todas las funciones que voy a listar a continuación se ejecutarás sobre los servidores de Google.

  • Autentificación OAuth de usuarios.
    • Permite que los usuarios puedan Loguear sobre los servidores de Firebase usando la cuenta de Google. Permite el acceso a los datos de este usuario para poder trabajar con ellos.
  • Uso de Bases de datos SQL y NOSQL.
    • Nos permite la integración y uso de una base de datos sobre los servidores de FireBase. Podremos, por ejemplo, usar MySql en caso de Bases de datos relacionales o MongoDB en caso de los NOSql.
  • Almacenamiento en la nube para archivos grandes.
    • Almacenamiento de Imágenes, vídeos, sonidos, etc…
  • Hosting (Similar a FTP)
    • Para poder alojar nuestros Scripts, por ejemplo, PHP o NodeJS
  • Machine Learning
    • En la hora de escribir estas líneas, el sistema esta en fase BETA, pero permite hacer uso de está tecnología para aplicarla en nuestros proyectos. Yo la estoy empezando a utilizar en una app de unas 100.000 descargas y es muy potente.
  • Una plataforma de codificación llamada Functions para ejecutar Scripts en el servidor.
    • Sirve como server para nuestras apps pero sin la necesidad de tener que codificar el servidor nosotros.
  • Análisis de errores de nuestra app.
    • Mediante una interfaz sencilla nos muestra la pila de errores que están afectando a los usuarios de nuestra aplicación.
  • Análisis de rendimiento de nuestra app.
    • Similar a lo anterior en el uso, pero nos da datos, por ejemplo, de los cuellos de botella que tenemos en nuestra app. (Es algo compleja, yo no lo he implementado en ningún proyecto aún)
  • Plataforma de TEST para nuestras apps.
    • Podemos hacer test sobre nuestra aplicación mediante sentencias sencillas para depurar posibles errores en nuestras aplicaciones.
  • Analítica para aplicaciones, similar a Google Analitycs para la web.
    • Como su propio nombre indica, nos permite ver a nuestros usuarios por país, idioma, página en la que están ahora mismo, etc…
  • Tracking de Eventos dentro de la app.
    • Configurable en cuanto a eventos, hace que se nos notifique cuando, por ejemplo, un usuario abre la app por primera vez o realiza una compra in app.
  • Eventos de conversiones.
    • Similar a las conversiones de Analitycs, nos notificará, por ejemplo, cuando un usuario pasa más de 5 minutos en nuestra app. Estos valores de conversión los puedes ajustar como te apetezca.
  • Análisis de audiencias.
    • Nos reporta un informe segmentado por tipos de audiencia, que nosotros también podemos editar a gusto.
  • Funnels de venta.
    • Similar a la anterior, pero para Funnels de venta.
  • Análisis de las propiedades de los usuarios.
    • Similar a las anteriores, pero para analizar las propiedades del usuario. Por ejemplo, y dependiendo de su perfil, sus gustos personales.
  • Análisis de las versiones de la aplicación por separado.
    • Para medir el rendimiento en cuanto a conversión se refiere de nuestros usuarios alrededor de nuestra aplicación.
  • Análisis de retención de usuarios.
    • Similar a la anterior, pero para medir la retención de nuestra app en el conjunto de usuarios.
  • Plataforma para ver el uso de la app a tiempo real sobre un mapa del mundo.
    • Interesante a la vez que entretenida esta opción. Aunque no tenga gran utilidad nos permite saber, a tiempo real, donde están los usuarios que utilizan nuestro software.
  • Plataforma de depuración sobre cliente-servidor.
    • Permite depurar los envíos y recepciones de datos desde nuestra app al servidor de Firebase.
  • Un sistema de predicción de cualidades.
    • Super interesante punto, nos permite segmentar los usuarios mediante predicciones para que nuestras acciones tengan más exito. Un ejemplo claro es el envío de una notificación Push, pero no nos interesa que la reciban todos los usuarios, solo los que son propensos a desintalarla a los dos días de la instalación. Pues esta api nos devuelve ese tipo de usuarios.
  • Pruebas A/B.
    • Nos permite poner 2 versiones diferenciadas de código dentro de nuestra app y mirar cual es la que da mejor rendimiento.
  • Cloud messaging.
    • Para el envío de notificaciones push mediante los servidores de Firebase.
  • Configuración remota para nuestra app.
    • Como su nombre indica, nos permite alterar variables de nuestra aplicación mediante tuneling sobre esta.
  • Generación de enlaces dinámicos.
    • Para que la aplicación pueda ser indexadas en las páginas de busqueda de Google.
  • Integración con ADMOB.
    • Permite integrar anuncios sin necesidad de tener que configrar también ADMOB en nuestra aplicación.

Yo aún no he probado todas así que no se la potencia que tiene cada una, pero el caso de las que he probado he quedado un poco impresionado.

Bueno, pues aquí está la vista periférica de lo que podemos hacer con Firebase Analytics, ahora vamos a ver como podemos usarlo en Ionic.

Cómo integrar Ionic Firebase ( Ejemplos / Examples )

Como nos tienen acostumbrados, y más desde las útimas versiones de Ionic, tenemos que instalar las dependencias de la siguiente manera:

 

ionic cordova plugin add cordova-plugin-firebase
npm install --save @ionic-native/firebase

La primera línea instala el plugin de comunicación nativa y la segunda instala el controlador TS para tener acceso al plugin.

Con esto ya estamos en disposición de usar el componente de Firebase en nuestro software.

El siguiente paso es importar la dependencia en nuestra aplicación, nos dirigimos a app.module.ts y agregamos las siguientes líneas:

 

...  
imports: [
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseConfig), //Esta es la línea importante pero no te preocupes ahora mismo, lo vamos a ver más a delante.
    AngularFireDatabaseModle
  ],
...

 

Como has podido ver, la importación es sencilla y similar a la que hacemos con cualquier otro componente de Ionic.

Ahora nos toca ir a nuestro componente en cuestión para hacer uso de él.

Nota importante: Firebase es una librería que debería de ejecutarse, con la mayoría de sus funciones, en background. Son sistemas de analítica que actuan sobre toda la app. Así que me parece oportuno decirte que inyectarla en el componente principal es lo más correcto.

Para hacerlo solo tenemos que hacer lo siguiente:

...
import { Firebase } from '@ionic-native/firebase';
...

export class MyApp{

...

   constructor(private firebase: Firebase) { }

... 

}

Ya estariamos en disposición de utilizar Firebase en nuestra app, ¿véis que facil es? Vale vale, para el carro amigo, se que estás deseando ponerte manos a la obra, pero nos hace falta un par de cosas más para poder empezar a usarla.

La primera y más importante de todas, es conectarnos con Firebase. Para ello vamos a hacer uso de un componente que vienen dentro de la librería de Firebase:

  • AngularFireModule

Nota: Todo lo que vamos a ver ahora se tendrá que codificar en el archivo app.module.ts

import { AngularFireModule } from 'angularfire2'; //Tenemos que usar este import dentro de nuestro componente

Con esta línea ya estamos en disposición de hacer la conexión, continuemos.

 

export const firebaseConfig = {
  apiKey: "AIzaSyDnAX0CQbbsMYuOTJ66ox_F0GwzPM4XPXY",
  authDomain: "angularfire2-list-example.firebaseapp.com",
};

Este ejemplo nos servira para poder conectarnos con nuestra consola de firebase. Recuerda que esto es solo el ejemplo, si quisieramos usar, por ejemplo, bases de datos tendríamos que agregar el dominio de la base de datos ahí. Pero eso en la siguiente parte del curso.

Ahora tendremos que crear el interceptor que nos permit conectarnos con Firebase:

@NgModule({
  ...
  imports: [
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseConfig), //Esta es la línea importante.
    AngularFireDatabaseModle
  ],
 ...
})
export class AppModule {}

Pues ahora sí, ya estariamos a disposición de usar Firebase en nuestra app.

Antes de nada, déjame decirte que para poder usar toda la funcionalidad de Firebase en Ionic tendremos que crear nuestra aplicación dentro de la consola como una Web App. Al fin y al cabo es una web lo que estamos montando ¿de acuerdo? Si no sabes como échale un ojo a esta foto:

Ionic Firebase

Como ves, dentro de la consola de Firebase al pulsar sobre agregar nueva aplicación nos da la opción de elegir que tipo de aplicación es. Basta, como he dicho antes, con seleccionar Web App y listo, ahí tendremos todos los parámetros de configuración.

Contenidos del curso

Aquí iré añadiendo los enlaces de los contenidos del curso, no os lo perdáis. Cada vez que suba algo lo podréis ver aquí.

Y el regalito final, como siempre

Venga, que no quiero entretenerte mucho más. Artículos así de largos algunas veces se hacen un poco pesados. Pues muchas gracias lector/a por una tarde más conmigo, nos vemos en el siguiente artículo 🙂

Comparte esto en: