• ENTRAR
  • No hay productos en el carrito.

No puedes acceder a esta zona, es solo para alumnos del curso

Este curso está desactualizado y no se puede acceder

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

Contenido del Curso

Archivos
Tienda Angular 5 y Firestore: Archivos 00:00:00
Iniciar proyecto y configuraciones
Tienda Angular 5 y Firestore: Instalar dependencias 00:05:00
Tienda Angular 5 y Firestore: Dar de alta aplicación en Firebase y configurar Angular Material 00:03:00
Tienda Angular 5 y Firestore: SharedModule, módulo con componentes y módulos rehusables 00:03:00
Tienda Angular 5 y Firestore: Clases User y Product para tipar nuestros datos 00:03:00
Lógica de autenticación
Tienda Angular 5 y Firestore: Desarrollar un servicio para manejar la autenticación 00:12:00
Tienda Angular 5 y Firestore: Desarrollar una navegación basada en Roles 00:09:00
Tienda Angular 5 y Firestore: Desarrollar un servicio para mostrar un Preloader Global con Angular Material GRATIS 00:04:00
Tienda Angular 5 y Firestore: Desarrollar un servicio para mostrar un Notificaciones Globales con Angular Material 00:04:00
Tienda Angular 5 y Firestore: Desarrollar componente formulario de autenticación para iniciar sesión y registrarse (I) 00:05:00
Tienda Angular 5 y Firestore: Desarrollar componente formulario de autenticación para iniciar sesión y registrarse (II) 00:04:00
Tienda Angular 5 y Firestore: Estableciendo las Reglas de Firestore 00:05:00
Tienda Angular 5 y Firestore: Componente registro de usuarios (I) GRATIS 00:08:00
Tienda Angular 5 y Firestore: Componente registro de usuarios (II) 00:11:00
Tienda Angular 5 y Firestore: Iniciando el componente para iniciar sesión con Firebase 00:07:00
Tienda Angular 5 y Firestore: Guardar los datos del usuario en Firestore cuando accede con Google 00:05:00
Tienda Angular 5 y Firestore: Finalizar el proceso de Login 00:04:00
Tienda Angular 5 y Firestore: Guardián para proteger rutas que necesitan autenticación GRATIS 00:03:00
Módulo de Administración
Tienda Angular 5 y Firestore: Iniciando el módulo de Administración 00:05:00
Tienda Angular 5 y Firestore: Servicio para manejar Productos 00:08:00
Tienda Angular 5 y Firestore: Inicio componente Dialog para añadir y editar productos 00:08:00
Tienda Angular 5 y Firestore: Upsert, añadiendo y actualizando productos 00:03:00
Tienda Angular 5 y Firestore: Mostrar los productos en la administración con MatTable 00:10:00
Tienda Angular 5 y Firestore: Disparar el formulario de productos (Ventana Modal) desde el listado de productos 00:08:00
Tienda Angular 5 y Firestore: Servicio para subir archivos a Storage y relación con Firestore 00:13:00
Tienda Angular 5 y Firestore: Componente para subir archivos a Cloud Storage (I) 00:04:00
Tienda Angular 5 y Firestore: Componente para subir archivos a Cloud Storage (II) 00:06:00
Tienda Angular 5 y Firestore: Mostrar archivos adjuntos a producto 00:06:00
Tienda Angular 5 y Firestore: Eliminar archivos adjuntos a producto 00:05:00
Tienda Angular 5 y Firestore: Eliminar producto y archivos relacionados 00:07:00
Tienda Angular 5 y Firestore: Eliminar producto y archivos relacionados eficientemente con Batch 00:05:00
Desarrollando el frontal de la tienda
Tienda Angular 5 y Firestore: Iniciando el servicio Cart para llevar la lógica del carrito de compras 00:05:00
Tienda Angular 5 y Firestore: Modificar navegación para mostrar información del carrito de compras 00:05:00
Tienda Angular 5 y Firestore: Listando los productos de la tienda (I) 00:09:00
Tienda Angular 5 y Firestore: Listando los productos de la tienda (II) 00:11:00
Tienda Angular 5 y Firestore: Mostrando el detalle de un producto 00:10:00
Tienda Angular 5 y Firestore: Lógica para añadir productos al carrito 00:08:00
Tienda Angular 5 y Firestore: Lógica para actualizar y eliminar productos del carrito 00:09:00
Tienda Angular 5 y Firestore: Componente para mostrar la información del carrito de compras (I) 00:06:00
Tienda Angular 5 y Firestore: Componente para mostrar la información del carrito de compras (II) 00:12:00
Tienda Angular 5 y Firestore: Servicio para acceder a los pedidos de los clientes 00:05:00
Tienda Angular 5 y Firestore: Componente para mostrar los pedidos y Guardián para proteger rutas de clientes 00:07:00
Tienda Angular 5 y Firestore: Método para procesar los pedidos desde el carrito de compras 00:05:00

Course Reviews

5

1 ratings
  • 1 stars0
  • 2 stars0
  • 3 stars0
  • 4 stars0
  • 5 stars1
  1. Todo bien explicado y sencillo de seguir

    Me ha gustado mucho y me ha ayudado a desarrollar el ejemplo perfectamente.

More Reviews
HACER ESTE CURSO
  • 30,00 9,99
  • ACCESO PARA SIEMPRE
  • Certificado del curso
  • Número de unidades43
  • 4 horas, 35 minutos
28 ALUMNOS MATRICULADOS
Cursosdesarrolloweb ©. Todos los derechos reservados.

Login

Create an Account Back to login/register