Integrar Ionic con Firebase

En la actualidad para la usabilidad y el desarrollo óptimo de una aplicación, se debe de realizar una conexión a una base de datos en tiempo real, esta debe de permitir a los usuarios de nuestra aplicación el acceso a la información al instante.

En el siguiente artículo conectaremos nuestra aplicación creada con Ionic con la base de dato en tiempo real Firebase.

Para comenzar debemos de tener instalado correctamente Ionic en nuestro ordenador.

Para comprobar que tenemos instalado Ionic antes de comenzar solicitaremos conocer nuestra version de Ionic colocando lo siguiente:

    $ ionic --version

    5.2.4

Si todo está correctamente instalado, entonces procederemos a crear un proyecto.

Existen diferentes maneras de crearlo, por ejemplo al colocar:

    $ionic start 

Y seguir los pasos correspondiente del CLI, tal como se muestra el la siguiente imagen:

Ó puede realizarse directamente en una entrada en la consola, tal como se muestra a contituación:

Una vez generada nuestra aplicación, debemos acceder a ella utilizando

    $ cd <<Nombre de tu proyecto>> 
    $ ionic serve

Si todo está funcionando correctamente, al iniciar el servidor debe de verse algo como esto:

Ya que tenemos nuestro proyecto listo y funcionando en nuestro servidor, debemos de acceder a la consola de firebase.

Añadimos un nuevo proyecto seleccionando la opción:

Ya que clickeamos en añadir un proyecto tenemos que seguir los siguientes pasos para poder considerar el proyecto listo para usarse.

• Asignar un nombre al proyecto.
• Aceptar o declinar el uso de los servicios que googe

Ya que creamos nuestro proyecto en Firebase, lo que debemos de hacer añadirlo a nuestro proyecto de Ionic. Debido a que Ionic trabaja con el manto de Angular podemos asumir que el proyecto será web, asi que debemos seleccionar la opción de agregar una aplicación web.

Procedemos a registrar nuestra aplicación asignando un nombre (Por convención se espera que sea el nombre del proyecto).

Terminado este paso debemos de seleccionar lo siguiente:

Ya que tenemos seleccionada la variable que queremos, nos dirigimos a nuestro proyecto en la dirección "src/enviroments" dentro de esta carpeta nosotros debemos de crear un nuevo archivo, que lleve por nombre firebaseconfig.ts, el cual contendrá lo que previamente seleccionamos en la página de Firebase.

El archivo debe de verse más o menos así:

    export const firebaseConfig = {
    apiKey: "AIzaSyD0YIZRICDtZxoRw4RYP1KBP092312R7Q-4g",
    authDomain: "ionfirecft.firebaseapp.com",
    databaseURL: "https://ionfirecft.firebaseio.com",
    projectId: "ionfirecft",
    storageBucket: "ionfirecft.appspot.com",
    messagingSenderId: "792673927783",
    appId: "1:792673927783:web:2b5e8007021b22b6"
  }

Si todo se ha realizado correctamente, ahora debemos de dirigirnos a nuestra carpeta App que se encuentra en Src, dentro de esta debemos acceder al archivo llamado app.module.ts e importar el archivo de configuración. Se importa de la siguiente manera

    import { firebaseConfig } from '../enviroments/firebaseconfig';
    import { AngularFirestoreModule } from '@angular/fire/firestore
    import { AngularFireModule } from '@angular/fire';
    import {AngularFireAuthModule} from '@angular/fire/auth'

Ahora dedemos proceder a agregar nuestras importaciones de la siguiente manera:

De esta manera es como implementamos firebase con ionic, es una de las diferentes maneras de implementación, ya una vez con esto en nuestro proyecto podremos realizar la autenticación por usuarios, tal como podría ser un login y muchas cosas más.

Esto es todo por ahora, nos leemos en otro artículo.