Menu

Ionic 4 + Firebase

ionic - September 27, 2018 por Manuel Almarguer
ionic/angular4.0.0-beta7angular/cli6.1.5

AngularFirebase2 que oficialmente ha pasado a llamarse Angularfire nos permite obtener varias caracteristicas que funcionan muy bien con nuestras Apps en Ionic. En esta ocasión vamos a ver como usar Ionic 4 y Angularfire.

Hola Amig@s, como parte de nuestro aprendizaje y aportes a la comunidad de ionic en español, realizaremos varios tutoriales en los que estaremos aprendiendo a trabajar con Ionic 4, AngularFirebase2 que oficialmente ha pasado a llamarse Angularfire y para nuestra Base de Datos utilizaremos Firestore o Firebase.

Sin dar más vueltas al asunto vamos a ver los pasos a seguir para tener listo nuestro entorno y comenzar a trabajar. Si aun no tienes Ionic en tu compu puedes ver en la documentación como instalarlo.

Primero creamos nuestro proyecto con el siguiente comando, debemos integrar cordova cuando nos pregunte, ya que lo necesitaremos luego para el plugin de firebase.

$ionic start ionicFirebase blank —-type=angular

--type=angular es propio de Ionic 4 y le indica a ionic el tipo de proyecto que vamos a utilizar, en este caso angular con su respectivo angular router para la navegación entre páginas, si no se especifica, se utiliza la navegación anterior de la versión 3, la cual ha sido declarada como obsoleta, asegúrate de tener la última versión, puedes consultar tu versión mediante el siguiente comando en tu terminal.

$ionic info

ejecutamos ionic serve para levantar nuestro servidor y ver que todo hasta ahorita ha sido exitoso.

Integrar AngularFire

Vamos ahora a integrar angularfire en nuestro proyecto, para ello ejecutamos el siguiente comando en nuestra terminal:

$npm install firebase @angular/fire — save

Con esto hemos adicionado firebase y angularfire a nuestro proyecto, pero debemos adicionar el plugins para la versión 5 de firebase, debemos especificarle que queremos la versión 5, al momento de este tuto se encontraba el @ionic-native/firebase 5.0.0-beta.21, así que ejecutamos los siguientes comandos

$ionic cordova plugin add cordova-plugin-firebase

y

$npm install --save @ionic-native/firebase@5.0.0-beta.21

Ahora nos toca crear un proyecto en la consola de firebase, vámonos al siguiente link, una vez dentro pinchamos en Añadir Proyecto, le ponemos el nombre, Fijarse en el ID que le asigna google a tu proyecto, lo puedes cambiar por uno que sea de tu agrado ya que normalmente le adiciona números para asegurar que el proyecto sea único. Una vez completados los datos pues creamos el proyecto.

Abrimos nuestro proyecto y nos vamos a la configuración que se encuentra en la esquina superior izquierda.

Una vez dentro de la configuración del proyecto bajamos para añadir Firebase a nuestra aplicación,

Esto nos permitirá adicionar firebase a nuestra aplicación, al hacer clic sobre web nos muestra la configuración y datos de nuestro proyecto firebase. Copiamos la configuración y vamos a añadirla a nuestra app.

Una buena práctica es poner nuestra configuración dendro de las variables de entorno, mantenemos nuestro proyecto organizado y damos muestra de estar haciendo las cosas bien, no olviden cambiar el signo de igualdad por : para la asignación de la variable.

Ahora tenemos que ir a nuestro archivo app.module e importar Firebase y todos sus módulos, también debemos importar environment pues es ahí donde tenemos nuestra configuración de firebase, debe quedarnos de la siguiente forma.

Firebase Real Time es un Json y todos los datos se almacenan en esta estructura, Firestore por su parte tiene varias particularidades las cuales debemos conocer, las más importante es conocer que todo esta organizado en colecciones, y dentro de esta colecciones tenemos documentos, esto últimos no pueden tener mas de 1MB de tamaño. Si fueras a comenzar un nuevo proyecto, pues utiliza Firestore.

Bueno con esto tenemos nuestro entorno preparado para trabajar con Ionic 4 + angularfire + firestore o firebase.

Esto ha sido todo por hoy amigos de la comunidad Ionic en español, vendrán muchos más tutoriales, en el próximo estaremos haciendo consultas a la Base de Datos y trabajando nuestros datos . Luego integraremos Angular Google Maps (AGM) y utilizaremos geofirex para filtrar puntos dentro de nuestro mapa según distancia y ubicación.

Hasta pronto :)

Ver código

¡Compártelo!