Angular con Firebase en el frontend

Este artículo presenta un proyecto programado mediante Angular y Firebase para crear un frontend sencillo, rápido y potente combinando ambas tecnologías. El proyecto hace uso de la base de datos proporcionada por Firebase para sincronizar información en tiempo real.

Este artículo está relacionado con el artículo «NodeJs con Firebase en el backend«. Por lo tanto, este artículo es la segunda parte del tutorial. Sin embargo, no es necesario seguir el tutorial completo del backend, no es un requisito indispensable para poder crear un frontend totalmente funcional.

Entorno

El código del proyecto se puede encontrar en el repositorio angularFirebase.

Por otra parte, el proyecto que se presenta en este artículo está desarrollado con las siguientes tecnologías:

• Angular 7.1.0.
• Firebase 5.6.0.
• Angular Material 7.1.1.
• Animate.css 3.7.0.
• Angular Flex-Layout 7.0.0.beta.19.

Angulares un framework para desarrollar aplicaciones web de una sola página (SPA). Utiliza el lenguaje TypeScript para el desarrollo del código JS, es de código abierto y está mantenido por Google.

Firebase es una plataforma para el desarrollo de aplicaciones web y aplicaciones móviles. Entre sus principales funcionalidades destacan
Firebase Auth y Realtime Database. En este artículo solo se hace uso de la segunda funcionalidad.

Angular Material es una librería CSS optimizada especialmente para su uso junto a Angular. Sigue los patrones de diseño Material Design y tiene un listado de componentes extenso en donde apoyarse para tu diseño de aplicaciones web.

Animate.css es una librería CSS que proporciona un listado extenso de animaciones tanto de entrada como de salida. Se utiliza para crear efectos amigables en la interfaz o también para crear transiciones a las acciones realizadas por el usuario.

Angular Flex-Layout es una librería CSS que proporciona una API de diseño sofisticado utilizando Flexbox CSS y mediaQuery. Este módulo proporciona a los desarrolladores de Angular, un motor que automatiza de forma inteligente el proceso de aplicación de Flexbox CSS a las jerarquías de vista del navegador.

Instalación y configuración

La funcionalidad principal del proyecto es leer un listado de noticias desde una base de datos. Una vez obtenidas las noticias, estas se pueden marcar como archivadas o en última instancia se pueden eliminar del listado de noticias archivadas.

En este apartado se enumeran los principales pasos para crear una aplicación Angular e integrar Firebase con este framework.

Es importante destacar que los pasos descritos a continuación son adaptados para este proyecto. En el siguiente enlace se encuentra la documentación oficial de la librería Firebase.

Angular

El primer paso es asegurarse de tener instalado Node, es un requisito indispensable para poder arrancar la aplicación Angular.

El segundo paso es instalar el CLI de Angular:

npm install -g @angular/cli

El tercer paso es generar la aplicación Angular con el CLI instalado anteriormente:

ng new [name-app]

Una vez se ha generado la aplicación, se puede arrancar la aplicación ejecutando el comando: ng serve. El CLI genera un proyecto de ejemplo con lo mínimo para ver una aplicación funcionando en 1 minuto.

Firebase

El cuarto paso es añadir las dependencias necesarias para utilizar Firebase:

npm install @angular/fire firebase --save

El quinto paso es generar un fichero de variables de configuración en donde se configuran las credenciales de la cuenta de Firebase:

// src/environments/environment.ts

export const environment = {
  firebaseConfig: false,
  firebase: {
    apiKey: '<your-key>',
    authDomain: '<your-project-authdomain>',
    databaseURL: '<your-database-URL>',
    projectId: '<your-project-id>',
    storageBucket: '<your-storage-bucket>',
    messagingSenderId: '<your-messaging-sender-id>'
  }
};

Sin aun no tienes configurado un proyecto en Firebase, en el artículo
«NodeJs con Firebase en el backend» se describe como generar y configurar un proyecto en Firebase.

El sexto paso se trata de inyectar la librería Firebase en la aplicación Angular. Esto se realiza mediante una configuración en el fichero app.module.ts:

// src/app/app.module.ts

// Firebase Modules
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { environment } from '../environments/environment';
...

...
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireDatabaseModule,  // Firebase database module
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

El séptimo paso del tutorial es la configuración de un fichero de servicios en donde se centraliza el acceso a la base de datos:

// src/app/service/news.service.ts

import { Injectable } from '@angular/core';
import { News } from '../model/news';  // News data type interface
import { AngularFireDatabase, AngularFireList, AngularFireObject } from '@angular/fire/database';  // Firebase modules for Database

@Injectable({
  providedIn: 'root'
})
export class NewsService {
  newsRef: AngularFireList<any>;  // Reference to News data list

  constructor(private db: AngularFireDatabase) { }

  // Fetch News List
  GetNewList() {
    this.newsRef = this.db.list('News-list');
    return this.newsRef;
  }

  // Update New Object
  ArchiveNew(id: string) {
    this.newRef = this.db.object('News-list/' + id);
    this.newRef.update({
      archived: true
    })
  }
}

En este paso se pueden observar dos métodos principales que gestionan la base de datos. GetNewList devuelve la referencia a la base de datos en donde se guarda el listado de noticias. ArchiveNew se encarga de actualizar una noticia y clasificarla como archivada.

El octavo paso se encarga de utilizar el servicio anteriormente creado, observar el listado de noticias y marcar noticias como archivadas. Es lo que yo llamo el controlador JavaScript.

// src/app/component/news-list/news-list.component.ts

import { Component, OnInit } from '@angular/core';
import { NewsService } from '../../service/news.service';
import { News } from '../../model/news';

@Component({
  selector: 'app-news-list',
  templateUrl: './news-list.component.html',
  styleUrls: ['./news-list.component.css']
})
export class NewsListComponent implements OnInit {
  News: News[];

  constructor(
    public newsApi: NewsService,
  ) { }

  ngOnInit() {
    let s = this.newsApi.GetNewList();
    s.snapshotChanges().subscribe(data => { // Using snapshotChanges() method to retrieve list of data along with metadata($key)

      this.News = [];
      data.forEach(item => {
        let a = item.payload.toJSON();
        a['$key'] = item.key;

        if(!a['archived'] || a['archived'] == false) { // Filter news not archived
          this.News.push(a as News); // Insert news
        }
      })

    })
  }

  ArchiveNew(id: string) {
    this.newsApi.ArchiveNew(id);
  }

}

En el método ngOnInit se obtiene una referencia a la base de datos y se genera un observable sobre dicha referencia. Cada vez que se ejecuta un cambio en la base de datos, este observable se ejecuta y entonces en el código asociado al observable, se actualiza la vista con la nueva información obtenida de BD.

El método ArchiveNew se utiliza desde la vista para que el usuario pueda archivas las noticias que ya haya leído.

En el noveno paso se muestra el código HTML asociado al componente en donde se muestran las noticias.

// src/app/component/news-list/news-list.component.html

<mat-card class="margin-20">
  <mat-card-title>
    <div fxLayout="row" *ngIf="News">
      List of News ({{News.length}})
    </div>
  </mat-card-title>

  <mat-divider></mat-divider>

  <mat-card-content>
    <mat-list>
      <div *ngFor="let item of News">
        <mat-list-item>
          <span>
            <span class="fwb">{{item.title}}</span> - {{item.body}}
          </span>

          <div fxFlex></div>

          <button mat-icon-button color="primary" matTooltip="Archive" (click)="ArchiveNew(item.$key)">
            <mat-icon>archive</mat-icon>
          </button>
        </mat-list-item>

        <mat-divider></mat-divider>
      </div>
    </mat-list>
  </mat-card-content>
</mat-card>

En este último paso, se puede observar cómo se muestra el listado de noticias con un característico bucle de Angular. Por otra parte, también se puede observar como se hace uso de Angular Material junto a Angular Flex-Layout para programar el componente de una forma mucho más sencilla.

Angular Material, Animate.css y Angular Flex-Layout

Estas tres librerías son totalmente opcionales para el desarrollo del proyecto. Como se puede observar son librerías CSS y solo mejoran el aspecto visual de la aplicación. Sin embargo, a pesar de ser opcionales son muy recomendables para cualquier desarrollo.

De todas formas, si alguien quiere integrarlas es relativamente sencillo. Yo recomiendo seguir las instrucciones que publican en Github cada una de las librerías. En caso de tener algún problema, en el proyecto que se presenta en este artículo, Gestá el código que se ha generado y siempre se puede consultar sin problemas.

Conclusión

Me gustaría destacar la flexibilidad y la potencia que tienen la combinación de Angular y Firebase. Mediante estas dos tecnologías, se pueden crear aplicaciones que se actualizan en tiempo real a través de Websocket con una facilidad muy grande.

En la parte del usuario final, esta tecnología proporciona una experiencia de usuario muy buena y soluciona el problema de la sincronización entre múltiples usuarios utilizando la misma aplicación a la vez. Por lo tanto, es una tecnología a tener muy en cuenta en un futuro.

Por otro lado, es importante destacar que aunque no es completamente necesario utilizar Firebase, se puede utilizar una base de datos MongoDB por ejemplo, ambas tecnologías tiene una integración muy buena. Esto probablemente sea debido a que ambas tecnologías son desarrolladas y mantenidas por Google.