Este curso está desactualizado y no se puede comprar, pero si lo deseas, puedes suscribirte a la plataforma y acceder a él de inmediato.

En este curso aprenderás a desarrollar una tienda con autenticación, un sistema de administración utilizando roles y carritos de compras utilizando Angular 5 y Firestore gracias a AngularFire.

El curso va a ser desarrollado utilizando Angular CLI y estará basado en módulos, cada zona importante de nuestra aplicación será un módulo el cual ofrecerá toda la lógica necesaria, componentes, servicios, modelos etc, además, tendremos un módulo compartido (Shared) el cual ofrecerá componentes y módulos necesarios a nivel global.

BONUS ANGULAR SSR

Una vez finalices este curso, podrás acceder de forma completamente gratuita y para siempre al curso Angular SSR con Universal y Firebase, más información aquí.

Diseño con Angular Material basado en componentes

El diseño de nuestra aplicación estará basado en Angular Material, gracias a los componentes que nos ofrece será sencillo diseñar nuestro sitio, así que también aprenderás a instalar, configurar y trabajar con Angular Material.

¿Qué es Cloud Firestore?

Si todavía no sabes de qué trata Cloud Firestore, aquí tienes una clara explicación de su web.

Cloud Firestore es una base de datos flexible y escalable para la programación en servidores, dispositivos móviles y web desde Firebase y Google Cloud Platform. Al igual que Firebase Realtime Database, mantiene tus datos sincronizados entre apps cliente a través de agentes de escucha en tiempo real y ofrece asistencia sin conexión para dispositivos móviles y web, por lo que puedes compilar apps con capacidad de respuesta que funcionan sin importar la latencia de la red ni la conectividad a Internet.

Aplicación en tiempo real

Nuestra aplicación va a trabajar en tiempo real para todos los clientes, aunque cada uno accederá a su información haciendo consultas a Firestore, por lo tanto, si el administrador añade algún producto, éste aparecerá en todos los clientes al instante.

Lo mismo pasará con la información del carrito de compras, tendremos un contador en la navegación para saber el número de productos que tenemos actualmente en el carrito, podremos añadir, quitar, cambiar cantidades, y todo trabajará en tiempo real.

Bases de datos con Angular 5 y Firestore

Las bases de datos de Cloud Firestore están basadas en colecciones y documentos, si vienes de bases de datos relacionales, puedes comparar una colección con una tabla y un documento con una fila.

Gracias a AngularFire podremos realizar todas las operaciones de forma sencilla, obtener, filtrar, editar, actualizar y eliminar.

Autenticación y Roles

Nuestra aplicación contará con un sistema de registro, login con email y password y login con Google, además, tendremos un control de acceso a distintas zonas y funcionalidades que será manejada de una forma sencilla a través de guardianes y roles.

• Rol Administrador: Podrá acceder a la administración, podrá dar de alta, editar y eliminar productos, también podrá añadir y eliminar imágenes de los productos, pero no podrá realizar pedidos ni podrá acceder a la zona del carrito o pedidos.
• Rol Editor: Podrá acceder a la administración, podrá dar de alta y editar productos, pero no los podrá eliminar, tampoco podrá añadir o eliminar imágenes de los productos, al igual que el admin, no podrá realizar pedidos ni acceder a la zona del carrito o pedidos.
• Rol Cliente: No podrá acceder a la administración, pero sí podrá crear un carrito para añadir, actualizar o eliminar productos, podrá consultar el estado de su carrito y finalizar los pedidos, también tendrá una zona desde donde podrá consultar todos sus pedidos.

Almacenar archivos en Firebase Storage y relacionarlos con Firestore

Ya que vamos a tener productos y éstos tendrán imágenes adjuntas, tenemos que guardarlos y relacionarlos de alguna forma, para guardar los archivos utilizaremos el sistema de Storage de Firebase y para relacionarlos aplicaremos una lógica muy sencilla haciendo uso de la key con que se guardan los datos.

Reglas con Firestore, asegurando nuestros datos

Para mantener la seguridad de nuestra aplicación, además de controlar los accesos desde el cliente, también nos aseguraremos que todo funciona cómo esperamos utilizando las Reglas de Firestore.

Las reglas de Firestore nos permiten hacer todo lo que necesitemos, nosotros desarrollaremos algunas funciones y escribiremos cierta lógica para asegurarnos que quien accede a los datos es quien realmente tiene permisos.

Carrito de compras

Los clientes de nuestro sitio tendrán en la navegación un enlace llamado Carrito donde aparte del enlace, aparecerá el número de productos que actualmente tiene, una vez pulse en el enlace, podrá ver toda la información de su carrito y actualizar cualquier dato, cantidades, eliminar y, si lo decide, podrá finalizar su pedido.

Aquí tienes un vídeo con lo que vamos a hacer