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

4 minuto(s)

Demo

Angular una de las tecnologías más geniales nos ofrece rapidez, dinámica, practicidad, etc. cuando de consumir servicios se trata, en este tutorial vamos hacer uso de Firebase, la plataforma de Google que nos ofrece un conjunto de servicios muy buenos, primero vamos a integrar Firebase con Angular 7 y luego listaremos unos datos desde Firebase Realtime Database, vamos con el tutorial.

Partes

Antes de continuar con este tutorial, por si no estas familiarizado con Firebase te recomendamos leer nuestro artículo Que es Firebase y Otros Detalles.

Nuevo Proyecto en Firebase

Lo primero que debes de hacer es crear un nuevo proyecto en Firebase, para esto ve a la Consola de Firebase y agrega un nuevo proyecto, dale el nombre que desees nosotros llamaremos a nuestro proyecto “Integrar Firebase y Angular”

Bien ahora solo debes de buscar los datos de Seguridad de tu aplicación en Firebase, estos datos los debes de tener a la mano para luego usarlos en Angular 7.

Estos datos los puedes encontrar en la Configuración del proyecto > General y luego haz clic en el icono azul con el símbolo </>

Firebase te va mostrar una ventana con los datos de configuración que deberás tener a la mano en el momento que integremos Firebase con Angular, estos datos son tus llaves de seguridad como el apiKey, authDomain, projectId, etc.

Integrando Firebase con Angular

Ahora vamos a crear un nuevo proyecto en Angular, para esto ejecuta el siguiente comando en tu consola de comandos


En la estructura de archivos y directorios que Angular generó cuando creaste un nuevo proyecto, se te ha generado una carpeta llamada environments en donde se ha creado 2 archivos llamados environment.prod.ts y environment.ts


Dentro de estos archivos vas a colocar los datos de tu aplicación creada en Firebase.

Primero abre el archivo environment.ts y agrega lo siguiente


Ahora abre el archivo llamado environment.prod.ts este archivo por defecto esta vacío, agrega los mismos datos que agregaste en el archivo anterior


Eso es todo ya esta integrado Firebase con Angular, por ende ya podemos consumir los servicios de la plataforma Firebase como Base de Datos, Autenticación, etc.

Hay servicios en Firebase que no son gratuitos, pero si has pagado para usar alguno de sus servicios, la configuración es la misma.

Listar Datos desde Firebase

Vamos a crear un nuevo componente llamado ListaAppComponent, ve a tu consola de comandos y ejecuta el siguiente comando


Angular nos creará una carpeta llamada lista-app en donde colocaremos la lógica para listar los datos desde Firebase, nuestra estructura del proyecto en Angular se debe de ver de la siguiente manera


En la Segunda Parte de este tutorial, listaremos los datos desde Firebase Realtime Database, específicamente una lista de postres , así mismo colocaremos el código del proyecto y una Demo.

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.