Como Integrar Firebase y Angular 7 + Listado de Datos desde Firebase – Parte 2

5 minuto(s)

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


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

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


Y agrega la siguiente tabla que servirá como contenedor para listar los datos

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


Agrega lo siguiente, mencionar que en el código agregamos comentarios para explicar que hacen las partes más importantes del código

Servicio

Paso seguido creamos el Servicio AppService para nuestro proyecto, en tu consola de comandos ejecuta el siguiente comando


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


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


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

Interface

Dentro de la carpeta servicio creamos una Interface llamada App, para crearla ve a tu consola de comandos y ejecuta el siguiente comando


Deberías de tener ahora 3 archivos en tu carpeta servicio


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


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.