Angular + Material + Firebase

Tutorial que pretende usar tres conocidas tecnologías de Google: Material para el frontend, Firebase para el backend y Angular.

Índice de contenidos

1. Introducción

Angular es un framework en JavaScript para generar aplicaciones webs SPA.

El framework usa la arquitectura MVVM (model, view, view-model):

  • El modelo representa los datos como suele ser habitual.
  • La vista representa la interfaz gráfica. Lo habitual es definir las vistas con archivos XML.
  • La Vista-Modelo contiene la lógica de negocio y expone los datos a la vista.

La ventaja de esta arquitectura es que permite aprovechar el concepto two-way data binding que permite que los cambios en el modelo sean reflejados de forma inmediata en la vista.

El código lo podéis encontrar en el repositorio https://github.com/Kiketic/bigfood.

2. Entorno

El tutorial está escrito usando el siguiente entorno:

  • Hardware: portátil MacBook Pro 17′ (3 Ghz Intel Core 2 Duo, 8GB DDR3)
  • Sistema operativo: Mac OS El Capitan 10.11
  • Angular 4.3.1
  • Node 7.9.0
  • npm 4.2.0

3. Instalación y configuración

3.1. Angular

Lo primero que recomiendo es instalar angular/cli para poder empezar, fácilmente, un proyecto con la estructura de angular:

También debemos comprobar que tenemos al menos node 6.9.x y npm 3.x.x.

Una vez hecho esto, podemos generar el proyecto:

Esto nos crea una carpeta con el nombre del proyecto y un código de ejemplo preparado para ejecutar. Ahora nos situamos dentro de esta carpeta:

3.1.1. Dependencias

Nos aseguramos que trabajamos con la versión 4 de angular.

dependencias

3.2. Material

Para instalar material ejecutamos el siguiente comando en el directorio del proyecto:

Después instalamos las animaciones:

No debemos olvidar añadir en app.module tanto las animaciones como los componentes de material que vayamos a usar.

Para darle estilo, seleccionamos uno de los temas que material tiene por defecto e incluimos este import en styles.css:

Ahora añadimos los iconos de material al fichero index.html.


3.2.1. Componentes

El uso de estos componente es realmente sencillo, únicamente debemos usar las etiquetas adecuadas para cada caso.

La lista de componentes la podemos encontrar en https://material.angular.io/components.

3.3. Firebase

Firebase es una plataforma móvil que permite desarrollar el backed de tus aplicaciones. Ofrece aplicación multiplataforma con API integradas a SDK individuales para Android, iOS y JavaScript. Pasa a una plataforma diferente sin modificar tu infraestructura.

Este apartado se divide en varios puntos: generar proyecto, instalar Firebase y configurar Firebase.

Entre los servicios de backend, la autenticación de usuarios es una parte esencial, y Firebase la gestiona de una manera muy simple.

Todos los datos de Firebase Realtime Database se almacenan como objetos JSON. A diferencia de bases de datos SQL, no existen tablas ni registros. Cuando se agregan datos al árbol JSON, estos se convierten en un nodo en la estructura JSON existente.


3.3.1. Generar proyecto en Firebase

Nos dirigimos a la página de Firebase, accedemos a la consola y generamos un proyecto nuevo.


3.3.2. Configurar acceso

En el menú de Firebase, tenemos la opción de autentificación:

Para que los usuarios puedan acceder a nuestra aplicación, podemos configurar la forma de acceso de diferentes formas: mail, cuenta de Google, Twitter…

Si se decide permitir acceso mediante correo electrónico, tenemos incluidas unas plantillas (¡en varios idiomas!), de esta forma enviará un mail al usuario cuando éste realice el alta (verificación), cuando quiera cambiar la contraseña (restablecimiento) o cuando quiera cambiar la dirección de email (cambio de dirección). La opción de verificación por SMS,permite que los usuarios accedan con una contraseña de un solo uso que se envía al móvil mediante SMS.

En nuestro caso, hemos elegido que permita acceso, únicamente, mediante cuenta de Google. Luego veremos cómo desarrollar la pantalla de login y cómo, con una llamada a Firebase, nos autenticamos rápidamente.


3.3.3. Database

En la sección database podremos dar de alta nuestro modelo de datos:

Pulsando el boton ‘…’ situado en la parte derecha de la pantalla, nos sale el siguiente menú y, haciendo clic en importar JSON, se nos abrirá una pantalla donde podremos subir nuestro modelo.

Podemos subir un modelo con datos, pero para ello debemos tener información (registros). Como carecemos de registros, iremos subiendo datos y generando la BD según vayamos codificando los metodos de alta de nuestras clases.

Una vez configurado el acceso, ya podemos instalar en local Firebase y configurarlo en nuestra app.


3.3.4. Instalar Firebase en el proyecto

Para instalar Firebase ejecutamos en consola:

Ahora, en nuestro module.app, importamos los módulos de Firebase:


3.3.5. Configurar Firebase

Seguimos en nuestro module.app y añadimos la constante “firebaseConfig” con los datos de tu proyecto en Firebase:

Añadimos los módulos en el “imports” de “NgModule”

4. Nuestra aplicación

Vamos a crear una aplicación donde podamos autenticarnos en Firebase mediante la cuenta de Google. También realizaremos un CRUD contra la base de datos en la nube. Todo esto lo dejaremos bonito con material. Cool, ¿no? Vamos a ello.

4.1. Autentificación

Hasta aquí se podría decir que tenemos todo configurado. Lo primero que tenemos que hacer es ver si funciona todo el tinglado, para ello vamos a probar la conexión mediante la autentificación de nuestro usuario mediante el login.

Nos creamos un servicio, fireService, donde incluiremos todos los metodos que conecten con Firebase:

Con la línea del método “loginWithGoogle”, llamaremos al proceso de autentificación de Firebase mediante el proceso elegido (cuenta de Google). Más abajo está el “logout” que nos servirá para salirnos de la sesión.

Para poder llamar a estos métodos necesitamos generar una vista con el cuadro de login, pero para llevar al cuadro de login, primero le decimos a nuestra aplicación que cuando entre se dirija a ella. En app.component.ts nos suscribimos al estado de autentificación y, si no está autenticado, nos envía a la pantalla de login y, si lo está, nos envía a la pantalla home:

Creamos login-page.component.html y añadimos:

Y su fichero typescript correspondiente, login-page.component.ts:

Quedando nuestra pantalla de login de la siguiente forma:

Ahora, cuando pulsemos el botón de login, nos solicitará la cuenta de Google con la que deseamos entrar en nuestra aplicación, junto a su contraseña.

Después de terminar con el proceso de login, si ejecutamos la aplicación, veremos como en firebase se da de alta nuestro usuario.

Ahora ya tenemos el usuario de firebase, con la interfaz UserInfo. Aquí podemos ver el “uid” que será nuestra clave única y que usaremos para dar de alta cualquier dato en cualquier “tabla”.

4.2. Creación de “tablas”

Para crear tablas con datos, únicamente debemos dar de alta un registro, pasando el nombre de nuestra tabla:

En nuestro servicio, añadimos un método “setUserProfile” que nos creara nuestro perfil en la “tabla” profiles:

Nuestra clase profile:

En Firebase nos dará de alta la “tabla” “profiles”, con nuestro registro. Si nos fijamos, la raíz del registro es nuestro uid:

4.3. Recuperar datos

Para obtener datos de nuestra BD en la nube, realizamos un método en nuestro servicio que nos permita realizar esta tarea, este método llevara la siguiente linea:

De esta forma tan sencilla recuperamos un registro de la “tabla” que deseemos, pero, y si necesitamos recuperar una lista, ¿cómo lo haríamos?

Easy piece! 😉

¡Ya sabemos enviar y recibir datos!

Como veo que esto se alarga, lo dejamos aquí y nos vemos en la segunda parte de este gran tutorial, donde abordaremos el resto de la aplicación. 😉

Saludos

5. Conclusiones

Ya sabemos que todo lo que Google toca se convierte en oro, así que Firebase tiene muchas papeletas de convertirse en el próximo estándar de base de datos. A mí me ha encantado.

6. Referencias