Angular 2 y Firebase - PARTE 1 - Como instalar y configurar Firebase sobre Angular 2

En esta ocasión vamos a ver como configurar y utilizar Firebase desde una aplicación en Angular 2.

Lo primero es crear un proyecto en Firebase. Para eso vamos a la página oficial de Firebase:

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

Veremos una página como la siguiente:

  Le damos al botón Comienza gratis y veremos una pantalla con toda la lista de proyectos que tenemos creados. Nosotros tenemos un proyecto  creado para el ejemplo que vamos a ver llamado "tracachat".

   Seleccionamos este proyecto y entraremos en una pantalla donde vemos un menu a la izquierda. De este menu, la opción mas importante para empezar es "Database".   Nosotros tenemos por el momento la base de datos del proyecto tracachat creada con 5 usuarios de prueba.  Si quieres ver como se crea te remitimos al video que hemos subido a Youtube sobre este artículo, y que puedes encontrar aquí. En el minuto 3 aprox, verás como hemos creado estos registros.

    Una vez creada la base de datos de prueba, vamos a explicar como instalar y configurar la librería Firebase  sobre un proyecto de Angular 2.

    Damos por hecho que ya tienes instalado en tu sistema, tanto nodeJS como npm. Pero si no es así, y lo quieres instalar en windows, lo puedes hacer desde aquí: https://nodejs.org/es/download/

   Y para instalar angular 2, lo mas fácil es instalar angular-cli. Para esto, una vez tienes NPM instalado, ejecutas el comando npm install -g angular-cli 

   Tambien necesitarías instalar typescript, ya que Angular2 se apoya en typescript. Para esto ejecuta: 

                   npm install -g typings

        npm install -g typescript

Una vez tenemos todas las herramientas necesarias, para crear nuestro proyecto en Angular2, ejecutamos el comando: 

ng new tracachat

  Después de un par de minutos, tendrás el proyecto creado con todas sus dependencias.  Ahora vamos a instalar y configurar Firebase sobre el proyecto de Angular 2. Esto se explica en la documentación de google que puedes encontrar en: https://github.com/angular/angularfire2/blob/master/docs/1-install-and-setup.md

  Para instalar Firebase tienes que ejecutar el comando : 

npm install angularfire2 firebase --save

    

 A continuación se necesita configurar dentro del código de nuestro proyecto de Angular2, el acceso a la base de datos. Para esto, hay que ir de nuevo a la página de Firebase de nuestro proyecto, y en el menu de la izquierda, pinchar en la primera opción llamada "Overview". En la página que aparece en la zona central, pinchar en el icono titulado "Añade Firebase a tu aplicación web". 

Te aparecerá un código que deberás copiar y pegar en tu aplicación en el fichero app.module.ts, quedandote algo como lo siguiente: 

 import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from 'angularfire2';

// Must export the config
export const firebaseConfig = {
  apiKey: '<your-key>',
  authDomain: 'tracachat.firebaseapp.com',
  databaseURL: 'https://tracachat.firebaseio.com',
  storageBucket: 'tracachat.appspot.com',
  messagingSenderId: '349955783027'
};

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(firebaseConfig)
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

 Notese como en este fichero incluimos la librería angularfire2, que habíamos instalado previamente en nuestro proyecto.
  Lo siguiente es ir a nuestro código del componente principal de la aplicación, el fichero app.componente.ts. En él, simplemente vamos a leer la lista de usuarios que creamos al principio desde la aplicación de Firebase. El código quedaría como sigue:

import { Component } from '@angular/core';

import { AngularFire, FirebaseListObservable } from 'angularfire2';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  

  usuarios: FirebaseListObservable<any[]>;

  constructor(af: AngularFire) {

    this.usuarios = af.database.list('/usuarios');

  }

}

  Obsérvese la facilidad con la que se hace referencia a la librería Firebase. Se añade la librería en el segundo import. Básicamente solo tiene dos objetos a usar desde Angular 2. Uno es FirebaseListObservable, que te dará la lista de objetos de los que cuelga el item que le indiques como parámetro. En este caso, el item que le estamos indicando es "usuarios". Le estamos diciendo que me devuelva toda la lista de objetos que cuelgue de usuarios, y por tanto, nos devolverá la lista de usuarios. Esto lo hacemos en la linea this.usuarios = af.database.list("/usuarios").  Fijaros que this.usuarios en una lista de tipo FirebaseListObservable, de ahí que estemos usuario el método list, en af.database.list.
    Fijaros también que en el constructor ya vamos a recibir el objeto principal de la base de datos. El objeto raíz podríamos decir.
   El otro objeto básico que nos proporciona la librería es FirebaseObjectObservable. 
 Como se intuye ya, sirve para obtener un objeto específico de la jerarquía. Pero de este ya hablaremos en posteriores artículos.

   En el fichero de vista "app.component.html", tenemos un código como el siguiente:

<div class="row">

  <div class="col s12 m6">

    <div class="card blue-grey darken-1">

      <div class="card-content white-text">

        <span class="card-title">Card Title</span>

        <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little

          markup to use effectively.</p>

        <div class="collection">

          <a class="collection-item" *ngFor="let usuario of usuarios | async">

            {{usuario.nick}}

          </a>

        </div>

      </div>

      <div class="card-action">

        <a href="#">This is a link</a>

        <a href="#">This is a link</a>

      </div>

    </div>

  </div>

</div>

 La parte que nos interesa es:

 <a class="collection-item" *ngFor="let usuario of usuarios | async">

    {{usuario.nick}}

</a>

  Recordemos como es nuestra base de datos en Firebase:

Como vemos Firebase ya nos devuelve la lista de usuarios como una lista de objetos, donde cada uno de los objetos corresponde a un usuario. Cada objeto por tanto, tendrá la propiedad nick. ¿Y que pasa con el identificador de cada objeto, el 1 el 2, el 3, así hasta el 5. Los identificadores, Firebase nos los devuelve en la propiedad $key.  Es decir, si pusieramos en el código algo como:
     {{usuario.$key}} : {{usuario.nick}}

   nos mostraría el identificador de cada usuario seguido de 2 puntos y a continuación el nombre de cada usuario.

  Por último, y mientras no veamos todavía nada del tema de la autentificación y permisos, tenemos que poner las reglas de acceso a nuestra base de datos, como de libre acceso. Para esto, vamos a la página de Firebase de nuevo y estando dentro de la sección de base de datos, pinchamos en la opción "Reglas", y dejamos el acceso como indicamos a continuación:

 

  En el siguiente artículo, veremos como empezar a diseñar un pequeño chat con Angular2 y Firebase, y continuaremos expandiendo nuestra base de datos, con mas registros.

   ¡Hasta pronto!