3USD tu primer mes de Premium 馃槺 Canjear promo No me interesa

notifications Notificaciones

Marcar todas como le铆das

Ver m谩s

lightbulb_outline

Integrar Ionic con Firebase

timer 3 Min.

remove_red_eye 439

calendar_today

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.

Otros art铆culos del blog

Comunidad