Angular + Firebase

Cuando tenemos un proyecto en angular, hay una buena cantidad de casos que necesitan autenticación, Base de datos, subir archivos a un servidor o enviar notificaciones a nuestros usuarios. Nuestra herramienta será Firebase debido a que es fácil aprender, la cosa está en acomodarlo a tus necesidades.

Pero cuando empeze con angular tenía la pregunta de cómo podría conectar una base de datos de firebase con mi proyecto angular. Lastimosamente en ese momento no le di mucha importancia debido a que estaba empezando con el desarrollo en angular.Pero se dio la situación que necesitaba firebase para un pequeño proyecto, entonces me puse a investigar.

Lo primero que me apareció cuando busque angular firebase fue un repositorio en github llamado angularfire. Entre por mera curiosidad estaba el repositorio en inglés pero decía que era la librería oficial para angular y firebase. Al leer esto me quedé sorprendido al enterarme que había una librería Oficial.

En este post escribiré cómo inicializar tu proyecto con angularfire, lo primero que nos dice la documentación es crear un proyecto

una vez creado entramos al proyecto instalamos las dependencias con el comando npm install firebase @angular/fire — save

ahora nos vamos a firebase.com le damos a comenzar y nos mandara a un panel le damos en nuevo proyecto y aceptamos todo

Se debería ver como la imagen de abajo

una vez creado le damos click al icono </>, nos aparecerá un dialogo, copiamos desde apiKey hasta messagingSenderId

Una vez instaladas las dependencias lo que se debe hacer es entrar a la carpeta src/environments/environments.ts en nuestro proyecto, y escribimos lo siguiente remplazando con lo copiado en firebase.com

por último hacemos esto en nuestro módulo

Y ya está listo nuestro proyecto para ser usado con firebase, dejaré la documentación para que puedas usar base de datos, autenticación y storge, espero que te sea útil

angular/angularfire2
The official Angular library for Firebase. Contribute to angular/angularfire2 development by creating an account on…github.com

© 2020 Devferx • Crafted with ❤️