Demo
En esta Parte Nro 2 continuaremos con el tutorial anterior llamado Como Integrar Firebase y Angular 7 + Listado de Datos desde Firebase – Parte 1 y crearemos un componente, servicio, una interface entre otras tareas para hacer el listado de datos desde Firebase Realtime Database, el cual es un servicio para guardar datos en la Nube, los datos que mostraremos específicamente serán una lista de postres, vamos con esta Segunda Parte del tutorial.
Partes
Angular Fire
Como parte del Desarrollo de Software Ágil nosotros recomendamos usar librerías que nos ayuden a realizar de manera rápida nuestras tareas, vamos a usar la librería Angular Fire que nos ayuda a conectar Angular con los principales servicios de Firebase.
Para instalar esta librería te recomendamos instalarla en las 2 formas siguientes para evitar errores en su funcionamiento, ejecuta estos 2 comandos en tu consola de comandos, espera que termine el primer comando y luego ejecuta el segundo comando
|
1 2 3 4 5 |
npm install angularfire2 --save npm install angularfire --save |
Listo ya tenemos la librería instalada en nuestro proyecto con Angular, para verificar si se instalo la librería puedes abrir tu archivo package.json y debería aparecerte las siguientes líneas con las 2 librerías o dependencias de Angular Fire
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
"dependencies": { "@angular/animations": "~7.2.0", "@angular/common": "~7.2.0", "@angular/compiler": "~7.2.0", "@angular/core": "~7.2.0", "@angular/fire": "^5.1.2", // Esta línea "@angular/forms": "~7.2.0", "@angular/platform-browser": "~7.2.0", "@angular/platform-browser-dynamic": "~7.2.0", "@angular/router": "~7.2.0", "angularfire2": "^5.1.2", // Esta línea "core-js": "^2.5.4", "firebase": "^5.9.4", "rxjs": "~6.3.3", "rxjs-compat": "^6.4.0", "tslib": "^1.9.0", "zone.js": "~0.8.26" }, |
Vista
Vamos a crear la vista para listar los datos desde Firebase, abre el archivo lista-app.component.html que se encuentra en la carpeta lista-app
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/angular7-firebase ├── /e2e ├── /src ├── /app ├── /lista-app ├── lista-app.component.css ├── lista-app.component.html // Abre este archivo ├── lista-app.component.spec.ts ├── lista-app.component.ts ├── /assets ├── /environments ├── browserslist ├── favicon.ico ├── index.html ├── karma.conf.js ..... ..... ..... |
Y agrega la siguiente tabla que servirá como contenedor para listar los datos
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<table class="table table-bordered table-responsive-sm table-responsive-md table-responsive-lg"> <thead> <tr> <th scope="col">Id</th> <th scope="col">Nombre</th> <th scope="col">Precio</th> <th scope="col">Stock</th> </tr> </thead> <tbody> <!-- Listamos los datos mediante la directiva ngFor --> <tr *ngFor="let dato of Dato"> <th>{{dato.$key}}</th> <td>{{dato.nombre}}</td> <td>{{dato.precio}}</td> <td>{{dato.stock}}</td> </tr> </tbody> </table> |
Lógica del Componente
Paso seguido crearemos la lógica en el componente, para esto abre el archivo lista-app.component.ts que se encuentra también en la carpeta lista-app
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/angular7-firebase ├── /e2e ├── /src ├── /app ├── /lista-app ├── lista-app.component.css ├── lista-app.component.html ├── lista-app.component.spec.ts ├── lista-app.component.ts // Abre este archivo ├── /assets ├── /environments ├── browserslist ├── favicon.ico ├── index.html ├── karma.conf.js ..... ..... ..... |
Agrega lo siguiente, mencionar que en el código agregamos comentarios para explicar que hacen las partes más importantes del código
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
// Importamos Dependencias import { Component, OnInit, AfterViewInit } from '@angular/core'; import { AppService } from '../shared/app.service'; import { App } from './../shared/app'; @Component({ selector: 'app-lista-app', templateUrl: './lista-app.component.html', styleUrls: ['./lista-app.component.css'] }) export class ListaAppComponent implements OnInit { // Colocamos en la variable Dato la interface App[] Dato: App[]; // Ocultamos datos que se mostrarán cuando presione el usuario un botón 'Listar Datos' ocultarDatos: boolean = false; constructor( // Creamos el método 'leerApp' y pasamos el servicio 'AppService' public leerApp: AppService ){ } // Dentro de ngOninit ngOnInit() { this.dataState(); // Dentro de la variable s colocamos el método leerApp y hacemos llamado al // método listarDatos()que se encuentra en el servicio 'AppService' let s = this.leerApp.listarDatos(); // Llamamos los datos desde Firebase e iteramos los datos con data.ForEach y por // último pasamos los datos a JSON s.snapshotChanges().subscribe(data => { this.Dato = []; data.forEach(item => { let a = item.payload.toJSON(); a['$key'] = item.key; this.Dato.push(a as App); }) }) } // En el método dataState() listamos los datos y cada ves que haya cambios en la base de // datos de Firebase, pues que muestre esos cambios en la vista con la propiedad '.ValueChanges()' y // pasamos a true la variable 'ocultarDatos' para que muestre los datos dataState() { this.leerApp.listarDatos().valueChanges().subscribe(data => { this.ocultarDatos = true; }) } } |
Servicio
Paso seguido creamos el Servicio AppService para nuestro proyecto, en tu consola de comandos ejecuta el siguiente comando
|
1 2 3 4 5 6 |
ng g service servicio/app CREATE src/app/servicio/app.service.spec.ts (318 bytes) CREATE src/app/servicio/app.service.ts (132 bytes) |
Se nos ha creado una carpeta llamada servicios y dentro de esta carpeta se nos creo 2 archivos llamados app.service.spec.ts y otro llamado app.service.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/angular7-firebase ├── /e2e ├── /src ├── /app ├── /lista-app ├── /servicio // Se creo esta carpeta con 2 archivos ├── app.service.spec.ts ├── app.service.ts ├── /assets ├── /environments ├── browserslist ├── favicon.ico ├── index.html ├── karma.conf.js ..... ..... ..... |
Abre el archivo app.service.spec.ts y agrega lo siguiente, colocamos comentarios para explicar que hacen las partes más importantes del código
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
// Instanciamos Dependencias import { TestBed } from '@angular/core/testing'; import { AppService } from './app.service'; // Declaramos a prueba el servicio 'AppService' describe('AppService', () => { // Mediante la función 'beforeEach()' Angular hace una prueba antes de ejecutar el servicio 'AppService' // Angular utiliza el Framework Jasmine para hacer pruebas, https://jasmine.github.io/1.3/introduction.html beforeEach(() => { // Con la interfaz TestBed configuramos e iniciamos un entorno de pruebas para el servicio 'AppService' TestBed.configureTestingModule({ providers: [AppService] }); }); // En el Framework Jasmine para realizar pruebas usamos la función 'it' para definir el caso o tipo de prueba // 'should be created' que significa 'debe ser creado' en español. // Verificamos si los valores son verdaderos con la función '.toBeTruthy()' de Jasmine it('should be created', inject([CrudService], (service: AppService) => { expect(service).toBeTruthy(); })); }); |
En el otro archivo llamado app.service.ts vamos agregar los siguiente, también colocamos comentarios para explicar que hacen las partes más importantes del código
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
// Importamos Dependecias import { Injectable } from '@angular/core'; import { App } from '../shared/app'; import { AngularFireDatabase, AngularFireList, AngularFireObject } from '@angular/fire/database'; @Injectable({ providedIn: 'root' }) export class AppService { // Usamos el Servicio 'AngularFireList' de Angular Fire para listar los datos appsRef: AngularFireList<any>; // Iniciamos el servicio 'AngularFireDatabase' de Angular Fire constructor(private db: AngularFireDatabase) { } // En nuestra función listarDatos() especificamos la colección de datos de Firebase Database Realtime que // queremos usar, la colección que usaremos se llama 'postres' listarDatos() { this.appsRef = this.db.list('postres'); return this.appsRef; } } |
Interface
Dentro de la carpeta servicio creamos una Interface llamada App, para crearla ve a tu consola de comandos y ejecuta el siguiente comando
|
1 2 3 4 |
$ ng g interface servicio/app CREATE src/app/servicio/app.ts (30 bytes) |
Deberías de tener ahora 3 archivos en tu carpeta servicio
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/angular7-firebase ├── /e2e ├── /src ├── /app ├── /lista-app ├── /servicio ├── app.service.spec.ts ├── app.service.ts ├── app.ts // Se creo este archivo (Interface) ├── /assets ├── /environments ├── browserslist ├── favicon.ico ├── index.html ├── karma.conf.js ..... ..... ..... |
En el archivo que creamos llamado app.ts especificaremos los campos que va a contener el listado de datos, como el id($key), nombre, precio y stock
|
1 2 3 4 5 6 7 8 |
export interface App { $key: string; nombre: string; precio: string; stock: string, } |
En la 3ra y última Parte crearemos la ruta y demás flujos para listar los datos desde Firebase, esta 3ra parte la creamos para no hacer esta 2da parte muy extensa.
Notas
- Los pasos mencionados en este tutorial pueden cambiar en el futuro, esto no depende de nosotros si no de los desarrolladores que dan soporte a Firebase y Angular
Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.