Aplicación con Angular 6 y AngularFire

0
1575


En Angular 6 han cambiado algunas cosas, una de las más afectadas es la librería rxjs y sus namespaces, pero no es algo tan grave que no se pueda resolver con pequeños cambios.

En esta entrada vamos a ver cómo podemos crear una Aplicación con Angular 6 y AngularFire utilizando bases de datos Firestore al igual que hacemos en los cursos de Angular 5 de la plataforma, donde con unos pequeños ajustes veremos que son completamente funcionales con la última versión de Angular.

Crear proyecto e instalar dependencias

Primero crearemos el proyecto con AngularCLI y a continuación instalaremos las dependencias que vamos a utilizar.

Obtener y configurar claves de Firebase

Una vez hecho debes crear tu aplicación con Firebase y obtener las claves, las cuales las pondremos dentro del archivo src/environments/environment.ts.

Desarrollar una lista de tareas con Angular 6

Ahora vamos a crear un componente y un servicio para interactuar con firebase.

Con lo anterior podemos abrir el archivo app.module.ts y modificar el código por el siguiente.

Recuerda también modificar el app-routing.module.ts para añadir las nuevas rutas.

Servicio para conectar con Firestore

Ahora abre el archivo afire.service.ts y reemplaza el código por el siguiente.

Simplemente cargamos nuestro servicio en el app.module.ts, inyectamos AngularFirestore y realizamos un par de operaciones con Firestore para obtener, crear y eliminar datos.

Componente TODO para interactuar con Firestore

Abre el archivo todoapp.component.ts y reemplaza el código por el siguiente.

Cómo puedes ver, no cambia demasiado, en lugar de acceder a los datos directamente a través de map, ahora lo hacemos a través de la tubería (pipe), y sólo entonces utilizamos map, finalmente sólo necesitamos sacar estos datos en la vista para que todo funcione.

Aquí realmente no cambia nada, pero algo interesante es ver cómo podemos convertir nuestro observable todos en una variable para saber si contiene datos o no y así mostrar un contenido u otro.

Espero que te haya resultado interesante, y si es así, te invito a que tomes el curso de Angular 5 con Firestore el cual con dos ajustes es 100% funcional, recuerda que todos los cursos que existen a día de hoy se han visto afectados por esta actualización, aunque no es grave, recuerda que también tienes el curso disponible en Udemy.