GUIA 5 : FIREBASE - IONIC

Electiva V
Docente: Ernesto Verdugo

Contenido
Introducción .......................................................................................................................................2
Crear cuenta firebase .........................................................................................................................2
Credenciales de firebase ............................................................................................................4
Base de datos firebase ...............................................................................................................5
crear proyecto ....................................................................................................................................6
Instalar plugin para conexión con firebase .................................................................................6
Iniciamos la funcionalidad ..................................................................................................................8
Clase Contacto................................................................................................................................8
Crear página lista de contactos ......................................................................................................8
crear página de nuevocontacto ........................................................................................................10
Navegar de la lista al formulario nuevo ....................................................................................10
Crear formulario .......................................................................................................................11
Conectar y guardar datos en firebase (Crear service) ..............................................................13
Listar contactos ........................................................................................................................15
Agregar acciones a contactos ...........................................................................................................19
Borrar registros ................................................................................................................................21
Editar contacto .................................................................................................................................22
Agregar ruta de editar al path ..................................................................................................23
Redireccionar desde hoja de acción .........................................................................................23
Agregar método getContactoById y editar en el service ..........................................................24
Formulario de editar ................................................................................................................26
Método editar() ........................................................................................................................27
Referencias.......................................................................................................................................29
GUIA 5 : FIREBASE - IONIC
Electiva V
Docente: Ernesto Verdugo

Introducción
Para esta ocasión vamos a retomar la misma funcionalidad de las guias anteriores y vamos a crear
una agenda de contactos, pero crearemos una base de datos externa usando firebase .

Crear cuenta firebase

Firebase es una de las soluciones de Base de datos como servicio (DBaaS) más potentes y
populares disponibles en la actualidad. Proporciona una base de datos NoSQL basada en
documentos, con capacidad en tiempo real, y está alojada como un servicio por Firebase (google),
por lo que no necesita preocuparse por escalar sus propios servidores.

https://console.firebase.google.com/

Esta es la consola de firebase la cual queda asociada con su cuenta de Gmail.

Para crear un nevo proyecto presionamos el botón “Añadir proyecto”

GUIA 5 : FIREBASE - IONIC
Electiva V
Docente: Ernesto Verdugo

En el asistente debemos asignar un nombre al proyecto y la cuenta donde estamos ubicados.

(Pueden asignar el nombre que deseen) y seleccionar la cuenta por defecto de firebase
GUIA 5 : FIREBASE - IONIC
Electiva V
Docente: Ernesto Verdugo

Credenciales de firebase
Una vez creado el proyecto firebase podemos ver/copiar las credenciales de conexión que
usaremos mas adelante.
GUIA 5 : FIREBASE - IONIC
Electiva V
Docente: Ernesto Verdugo

Presionamos el botón “Ir a la Consola”.

Base de datos firebase

Firebase dispone de dos tipos de base de datos realtime database y cloud firestore1,

Para este ejemplo usaremos cloud firestore: Almacena y sincroniza datos con una base de
datos NoSQL alojada en la nube. Los datos se sincronizan con todos los clientes en
tiempo real y se mantienen disponibles cuando tu app está sin conexión.,

1
https://firebase.google.com/docs/firestore/rtdb-vs-firestore
GUIA 5 : FIREBASE - IONIC
Electiva V
Docente: Ernesto Verdugo

Damos clic en el botón “Siguiente”.

Nota: para un sistema de producción no se recomienda que estas opciones estén si seguridad pero
para este ejercicio esta bien.

crear proyecto
Una vez tenemos la cuenta de firebase vamos a proceder a crear nuestro proyecto, como en los
ejemplos anteriores usaremos la plantilla tabs

ionic start guia5 tabs --project-id=evguia5 --package-id=com.ernestoverdugo.guia5

Instalar plugin para conexión con firebase

Para poder realizar la conexión con firebase necesitamos instalar los plugins y dependencias
necesarias. Ejecutamos el siguientes comando

npm install firebase @angular/fire --save

GUIA 5 : FIREBASE - IONIC
Electiva V
Docente: Ernesto Verdugo

Una vez instaladas las librerías debemos agregar las credenciales de nuestro proyecto firebase
(pagina 3) en el archivo src/environments/environment.ts. este archivo fue creado
automáticamente al cargar las librerias

Pantallazo 1 src/environments/environment.ts.

Y vamos a crear la llave de firebase con la información que copiamos de la consola de firebase.

Nota: estas credenciales los debe buscar en la consola del proyecto firebase.

Ahora debemos informarle al AngularFire cuales son las credenciales de conexión con firebase y lo
hacemos en el archivo app/app.module.ts.
GUIA 5 : FIREBASE - IONIC
Electiva V
Docente: Ernesto Verdugo

Iniciamos la funcionalidad

Clase Contacto
Lo primero que vamos a hacer es crear un componente con la clase contacto, la cual nos va a
definir los elementos/propiedades que esperamos que tenga un contacto, datos que están
definidos en el alcance de esta guía.

Debido a que esta clase es un elemento común que puede ser usado por diferentes componentes
de nuestra aplicación lo vamos a crear en la carpeta app, creamos el archivo contacto.ts.

Pantallazo 2 app/contacto.ts (nuevo archivo)

El archivo va a tener la definición de la clase Contacto, y las propiedades

{id,nombre,apellido,empresa,telefono,correo} con sus respectivos tipos de datos.

Ahora podemos empezar a crear las páginas de nuestra aplicación

Crear página lista de contactos

empezamos por crear la pagina contactos que será la pagina de acceso principal de la
funcionalidad

ionic generate page contactos

Abrimos el árbol del proyecto y podemos ver que se creó una nueva carpeta llamada contactos

Y en el archivo tabs-routing.module.ts. agregamos la ruta del nuevo componente (líneas 40-49).

GUIA 5 : FIREBASE - IONIC
Electiva V
Docente: Ernesto Verdugo

Ahora vamos a cambiar el sistema de navegación para que se ajuste a nuestra aplicación, abrimos
el archivo tabs/tabs.page.html
GUIA 5 : FIREBASE - IONIC
Electiva V
Docente: Ernesto Verdugo

Observen que se cambió los títulos de la tercera pestaña <ion-label> para que aparezca en español
y cambiamos el icono2 (<ion-icon name> línea 15).

Al ver la aplicación en el navegador podemos ver que esta sigue funcionando sin ningún problema.

crear página de nuevocontacto

primero vamos a generar la nueva página con el comando generate.

ionic generate page nuevocontacto

Nota: recuerde que debemos agregar la nueva ruta al sistema de navegación en el archivo

tabs-routing.module.ts.(ver ejemplo más arriba) (esta parte no estará en la guía ya que se supone
que deben saber como hacerlo)

Navegar de la lista al formulario nuevo

Vamos a agregar un botón de tipo flotante 3en contactos.html y creamos la función para navegar
hacia nuevocontacto. Y le asignamos la ruta que debe seguir al hacer clic sobre el boton. Abrir
contactos.page.html.

Pantallazo 3 contactos.page.html

Botón flotante

Nota: Probamos en el navegador y comprobamos que el botón abre la página de nuevocontacto.

2
Ionic dispone de una gran fuente de iconos para usar en nuestras aplicaciones, ver
https://ionicframework.com/docs/ionicons/
3
http://ionicframework.com/docs/components/#fabs
GUIA 5 : FIREBASE - IONIC
Electiva V
Docente: Ernesto Verdugo

Crear formulario
Debemos declarar el objeto que estará enlazado con los elementos del formulario, este objeto
debe ser del tipo Contacto. (nuevocontacto.page.ts) (líneas 5 y 15)

Pantallazo 4 nuevocontacto.page.ts

Ahora vamos a crear el formulario en el nuevo componente, podemos copiar el formulario de las
guías anteriores y realizar los ajustes que aparecen en la siguiente imagen.
(nuevocontacto.page.html)
GUIA 5 : FIREBASE - IONIC
Electiva V
Docente: Ernesto Verdugo

Pantallazo 5 nuevocontacto.page.html

El resultado debería ser el siguiente:

https://ionicframework.com/docs/api/select
GUIA 5 : FIREBASE - IONIC
Electiva V
Docente: Ernesto Verdugo

Conectar y guardar datos en firebase (Crear service)

Ahora es necesario crear un service para interactuar con nuestra base de datos. El servicio se
encargará de crear, leer, actualizar y borrar (CRUD), en la lista (collection) de contactos la cual se
llenara de la base de datos.

Empezamos por ejecutar el comando:

ionic g service services/contactos

Se debe crear una nueva carpeta con el servicio contactos.

Vamos a crear los métodos correspondientes para añadir un nuevo contacto a la lista, para esto
usamos la función addDoc de firebase para añadir un nuevo registro(documento) a la collection.

services/contactos.service.ts
GUIA 5 : FIREBASE - IONIC
Electiva V
Docente: Ernesto Verdugo

Ahora que tenemos el formulario y el servicio con las funciones de database de firebase y creamos
el método para crear el nuevo registro en la base de datos.

Pantallazo 6 nuevocontacto.page.ts

Debemos importar el servicio para que el componente pueda acceder a los métodos que vamos a
ir creando, y debemos agregar el servicio en el constructor del componente. (líneas 6 y 22).
GUIA 5 : FIREBASE - IONIC
Electiva V
Docente: Ernesto Verdugo

Pantallazo 7 nuevocontacto.page.ts

Nota: Guardamos y probamos en el navegador, debe aparecer un mensaje indicando que guardo
correctamente.

Si abrimos la base de datos de firebase podemos ver que se registró el nuevo contacto a una lista
llamada “contactos”

Listar contactos
Ahora que hemos alimentado la lista en firebase vamos a realizar la consulta a la base de datos y
mostrar los registros en una lista.

Empezamos creando el método que realiza la consulta en la base de datos en el servicio de

nuestra aplicación
GUIA 5 : FIREBASE - IONIC
Electiva V
Docente: Ernesto Verdugo

Pantallazo 8 contacto.service.ts

Y ahora debemos importar los elementos del servicio. Observe los comentarios en cada línea del
código. (contactos.page.ts).
GUIA 5 : FIREBASE - IONIC
Electiva V
Docente: Ernesto Verdugo

Pantallazo 9 contactos.page.ts

Recuerde agregar el servicio en el constructor del componente (línea 22).

Y en el mismo archivo agregamos el método para consultarla lista de contactos de la base de datos
mediante el servicio.
GUIA 5 : FIREBASE - IONIC
Electiva V
Docente: Ernesto Verdugo

Ya solo falta agregar la lista en la vista para poder visualizar cada registro. (contactos.page.html)

Pantallazo 10 contactos.page.html

Nota: Probamos en el navegador y debemos poder visualizar los registros que tenemos en la base
de datos de firebase.
GUIA 5 : FIREBASE - IONIC
Electiva V
Docente: Ernesto Verdugo

Agregar acciones a contactos

Para realizar las acciones de editar y eliminar vamos a usar una hoja de acciones (action sheets 4).
Las Hojas de acción se deslizan hacia arriba desde el borde inferior de la pantalla del dispositivo y
muestran un conjunto de opciones con la capacidad de confirmar o cancelar una acción. Las hojas
de acción a veces se pueden utilizar como una alternativa a los menús, sin embargo, no deberían
usarse para la navegación.

Para esto debemos agregar el controlador de hojas de acción (ActionSheetController) que viene
con ionic-angular, y también importamos el controlador de alertas (AlertController), abrimos el
archivo contactos.page.ts,

Pantallazo 11 contactos.page.ts

Y agregamos el control de las hojas de acción en el constructor.

Pantallazo 12 contactos.page.ts

Nota: estas ya deben estar en el archivo de las imagenes anteriores de esta guía

4
http://ionicframework.com/docs/components/#action-sheets
GUIA 5 : FIREBASE - IONIC
Electiva V
Docente: Ernesto Verdugo

Y creamos el método selectContacto, que permitirá abrir una hoja de acciones al hacer clic en
cualquier registro de la lista.

Pantallazo 13 contactos.page.ts

Para terminar de crear la lista debemos agregar un manejador del evento click en cada item de la
lista, abrimos el archivo contactos.page.html,

Pantallazo 14 contactos.page.html
GUIA 5 : FIREBASE - IONIC
Electiva V
Docente: Ernesto Verdugo

Probamos en el navegador y podemos ver que al hacer clic sobre alguno de los registros de la lista
se despliega una hoja de acciones.

Borrar registros
Ahora que tenemos la lista de acciones vamos a crear el método para eliminar o borrar un
registro.

Lo primero es crear el método en el servicio para que elimine los registros de firebase; abrimos el
archivo contactos.service.ts y agregamos el siguiente método

services/contactos.service.ts

Ahora abrimos contactos.page.ts para modificar el método borrar() para que invoque
borrarContacto().
GUIA 5 : FIREBASE - IONIC
Electiva V
Docente: Ernesto Verdugo

Nota: el método borrar() ya existía, solo debemos complementar el código, y agregamos el

método para mostrar notificaciones en la aplicación (mostrarMensaje).

Probamos el ejercicio en el navegador podemos ver que nos pide que confirmemos si deseamos
eliminar el contacto de la lista.

Editar contacto
Para finalizar todo el ejercicio vamos a agregar la funcionalidad de editar un contacto.

Primero vamos a generar una nueva página/componente para editar. Debemos ejecutar el
comando:

ionic generate page editarcontacto

GUIA 5 : FIREBASE - IONIC
Electiva V
Docente: Ernesto Verdugo

Agregar ruta de editar al path

Abrimos el archivo tabs-routing.module.ts para agregar la ruta del nuevo componente.

tabs-routing.module.ts

Observe que esta nueva ruta esta acompañada de un parámetro (:id), es decir que debemos
preparar el componente para recibir un parámetro de entrada.

Redireccionar desde hoja de acción

Para empezar vamos a agregar el método editar que va a realizar la redirección a la pagina de
editar esta redirección será un poco diferente a los casos anteriores, ya que además del nombre
de la página que deseamos cargar, debemos pasar un parámetro o valor que tendrá el key del
contacto que deseamos modificar.

contactos.page.ts

Debemos colocar el metodo editar() (líneas 110-112) inmediatamente debajo del método
mostrarMensaje().

Ahora en el método selectContacto() vamos a modificar la acción del botón editar. (línea 62)
GUIA 5 : FIREBASE - IONIC
Electiva V
Docente: Ernesto Verdugo

contactos.page.ts

Nota: Si probamos el ejercicio en el navegador debemos ver que al seleccionar la opción

“modificar” vemos que se carga la página de editar (en blanco).

Agregar método getContactoById y editar en el service

Antes de realizar la gestión del formulario, vamos a crear el método que captura un registro por su
id, y otro método que guarda las modificaciones en la base de datos.
GUIA 5 : FIREBASE - IONIC
Electiva V
Docente: Ernesto Verdugo

contactos.service.ts

Ahora en el componente editarcontacto.page.ts, debemos empezar por importar las

dependencias y librerías correspondientes en la parte superior.

editarcontacto.page.ts
GUIA 5 : FIREBASE - IONIC
Electiva V
Docente: Ernesto Verdugo

Observen que en el constructor declaramos las variables de navegación, de alertas y mensajes, y

activamos el servicio de comunicación con la base de datos

editarcontacto.page.ts

En el evento ngOnInit, vamos a la base de datos y buscamos el id enviado al llamar el formulario,

para esto usamos el método getContactoById() creado hace un momento.

Formulario de editar
Vamos a crear el formulario de editar en el template editarcontacto.page.html. podemos copiar y
pegar el formulario de nuevocontacto.html y hacer los ajustes correspondientes.
GUIA 5 : FIREBASE - IONIC
Electiva V
Docente: Ernesto Verdugo

editarcontacto.page.html

Nota: Podemos probar el ejercicio en el navegador y vemos que al cargar el formulario este viene
con los datos del contacto seleccionado.

Método editar()
Para completar el ejercicio debemos crear el método editar que se encargará de realizar el
llamado al servicio que guarda los cambios en la base de datos.
GUIA 5 : FIREBASE - IONIC
Electiva V
Docente: Ernesto Verdugo

editarcontacto.page.ts
GUIA 5 : FIREBASE - IONIC
Electiva V
Docente: Ernesto Verdugo

Referencias
https://medium.com/@0ka/angular-firebase-create-and-read-e1fa37494f30

https://firebase.google.com/codelabs/firestore-web?hl=es-419#0

https://github.com/firebase/quickstart-js/tree/master/firestore

https://github.com/angular/angularfire/blob/master/docs/compat/firestore/collections.md

https://firebase.google.com/docs/reference/js?hl=es-419

https://devdactic.com/ionic-4-firebase-angularfire-2/

https://www.youtube.com/watch?v=EYLS3-8Ouek

https://github.com/angular/angularfire2

https://ionicthemes.com/tutorials