Autenticación con Angular y Firebase
Autenticación con Angular y Firebase


En este tutorial vamos a ver cómo crear aplicaciones en tiempo real con Angular 4, aunque es perfectamente posible utilizar Angular 2.

Para nuestro ejemplo vamos a crear una TodoApp con AngularFire2 donde trabajaremos con todos y tendremos la posibilidad de crear y eliminar.

aplicaciones en tiempo real con Angular

Si no conoces AngularFire2 simplemente debes saber que es la librería oficial de Firebase para Angular 2.

Firebase es una plataforma de google que te permite añadir muchas funcionalidades pensado para aplicaciones web y móvil, para nuestro caso vamos a trabajar con Database, la cual nos permite almacenar y sincronizar datos con una base de datos NoSQL alojada en la nube. Los datos se sincronizan con todos los clientes en tiempo real y siempre seguirán estando disponibles cuando tu app pierda la conexión.


Lo primero que tienes que hacer es crear una cuenta en Firebase y crear una aplicación para la web, verás que todo es muy intuitivo, una vez hayas creado tu proyecto tendrás acceso a las credenciales, que es un objeto cómo el siguiente, pero con las credenciales que te haya asignado Firebase.

Ahora que tenemos las claves, vamos a crear un proyecto nuevo con Angular-Cli, una vez lo tengas, vamos a añadir FirebaseAngular2 y Firebase a nuestra aplicación.

Configurar AngularFire2

Lo primero que debemos hacer es modificar el archivo app.module para añadir la configuración necesaria.

Desarrollar un servicio con AngularFire2

Lo primero que vamos a hacer es desarrollar un servicio para poder obtener, crear y eliminar todos.

Abrimos el archivo src/app/services/firebase-todo-app.ts y añadimos el siguiente código, con esto tenemos suficiente para interactuar con Firebase y Angular 2.

Lo único que debemos hacer es conectar con nuestra base de datos utilizando af.database.list, una vez lo tipamos con FirebaseListObservable podemos utilizar sus métodos save y remove para crear y eliminar todos.

Formulario con Angular 2 para añadir todos

Para poder añadir todos a nuestra app vamos a crear un componente nuevo llamado TodoFormComponent, este componente aceptará un evento con @Output para poder crear un nuevo todo, así que créalo y añade el siguiente código typescript.


Cursos de Angular

Si estás interesado en Angular, visita Cursosdesarrolloweb, tenemos varios cursos sobre Angular que seguro te interesan.

Todos los cursos tienen acceso de forma indefinida 24/7, así que puedes seguirlos adecuando el horario a tus necesidades.




Ya tenemos el formulario que nos permitirá crear nuevos todos, ahora vamos a desarrollar un nuevo componente con Angular 2 para mostrar los todos y así seguir trabajando de forma ordenada.

Componente TodoList para mostrar los todos

Vamos a crear el componente TodoList y a continuación añadimos el siguiente código, este componente será reutilizado así que aceptara un evento con Output y un dato de entrada con Input.

Para poder mostrar los todos en nuestra aplicación abre el archivo todo-list.component.html y añade el siguiente código.

TodoApp con AngularFire2

Para finalizar nuestra aplicación de todos con AngularFire2 abre el archivo app.component y vamos a añadir el siguiente código, el cual estará conectado con nuestro servicio y el resto de componentes que hemos creado hasta ahora.

Como puedes ver el componente es muy sencillo, simplemente inyectamos nuestro servicio e interactuamos con él, para finalizar la aplicación abre el archivo .html y añade lo siguiente.

Lo único que tenemos que hacer es recorrer los todos del servicio y utilizar los métodos remove y save, si ahora ejecutas el comando ng serve verás que tienes una aplicación TodoApp con AngularFire2 completamente funcional.