Conexión a Bases de datos en Tiempo Real con IONIC – FIREBASE

Firebase es una plataforma de Google que nos ofrece un BaaS (Backend as a

Service), lo que nos permite librarnos de la tarea de tener nuestro propio servidor y
programar toda la lógica del backend, autenticación de usuarios, etc, ahorrando
tiempo e infraestructura. Dentro de sus principales funcionalidades encontramos:

 Analíticas: Provee una solución gratuita para tener todo tipo de medidas
(hasta 500 tipos de eventos), para gestionarlo todo desde un único panel.

 Desarrollo: Permite construir mejores apps, permitiendo delegar

determinadas operaciones en Firebase, para poder ahorrar tiempo, evitar
bugs y obtener un aceptable nivel de calidad. Entre sus características
destacan el almacenamiento, testeo, configuración remota, mensajería en
la nube o autenticación, entre otras.

 Crecimiento: Permite gestionar los usuarios de las aplicaciones, pudiendo

además captar nuevos. Para ello dispondremos de funcionalidades como
las de invitaciones, indexación o notificaciones.

 Monetización: Permite ganar dinero gracias a AdMob.


Firebase nos permite tener una base de datos en la nube y ver los cambios que se
produzcan en tiempo real, entre otros servicios también ofrece almacenamiento
de archivos en la nube, mensajería, hosting y autenticación de usuarios. Para
aprender a integrar firebase con Ionic vamos a retomar nuestra App de guardar
sitios y vamos ha hacer que nuestros sitios se guarden en la base de datos de
firebase para tenerlos almacenados en la nube en lugar de localmente.
1. Creamos un proyecto Firebase

2. Una vez creado el proyecto, seleccionamos la opción agregar FireBase a tu App Web

3. Se generan unas credenciales que debemos utilizar en la configuración el ts del

proyecto Ionic
4. Creamos una base de datos

5. Seleccionamos la opción bases de datos en tiempo real

6. En la base de datos, seleccionamos la opción reglas para agregarle los permisos de
lectura y escritura y damos clic en publicar
Finalmente debemos agregar el componente de firebase a Ionic. (npm install firebase
angularfire2) En este caso sería sobre el proyecto Myapp 1 sobre el cual estoy
trabajando

Para enviar y eliminar datos con FireBase debemos crear un proyecto Ionic y en el
archivo app.module.ts
El archivo Home.html debe tener una interfaz como la que se muestra a continuación

El archivo home.ts debe recuperar de Firebase los datos y enviarlos a la vista en Ionic

La aplicación se debe ver de la siguiente forma: