file_download
Archivos del curso
N/A
play_circle_outline
vista previa
5 minutos
play_circle_outline
vista previa
3 minutos
play_circle_outline
vista previa
3 minutos
play_circle_outline
vista previa
3 minutos
play_circle_outline
vista previa
12 minutos
play_circle_outline
vista previa
9 minutos
play_circle_outline
vista previa
4 minutos
play_circle_outline
vista previa
4 minutos
play_circle_outline
vista previa
5 minutos
play_circle_outline
Desarrollar componente formulario de autenticación para iniciar sesión y registrarse (II)
4 minutos
play_circle_outline
Estableciendo las Reglas de Firestore
5 minutos
play_circle_outline
vista previa
8 minutos
play_circle_outline
Componente registro de usuarios (II)
11 minutos
play_circle_outline
Iniciando el componente para iniciar sesión con Firebase
7 minutos
play_circle_outline
Guardar los datos del usuario en Firestore cuando accede con Google
5 minutos
play_circle_outline
Finalizar el proceso de Login
4 minutos
play_circle_outline
vista previa
3 minutos
play_circle_outline
Iniciando el módulo de Administración
5 minutos
play_circle_outline
Servicio para manejar Productos
8 minutos
play_circle_outline
Inicio componente Dialog para añadir y editar productos
8 minutos
play_circle_outline
Upsert, añadiendo y actualizando productos
3 minutos
play_circle_outline
Mostrar los productos en la administración con MatTable
10 minutos
play_circle_outline
Disparar el formulario de productos (Ventana Modal) desde el listado de productos
8 minutos
play_circle_outline
Servicio para subir archivos a Storage y relación con Firestore
13 minutos
play_circle_outline
Componente para subir archivos a Cloud Storage (I)
4 minutos
play_circle_outline
Componente para subir archivos a Cloud Storage (II)
6 minutos
play_circle_outline
Mostrar archivos adjuntos a producto
6 minutos
play_circle_outline
Eliminar archivos adjuntos a producto
5 minutos
play_circle_outline
Eliminar producto y archivos relacionados
7 minutos
play_circle_outline
Eliminar producto y archivos relacionados eficientemente con Batch
5 minutos
play_circle_outline
Iniciando el servicio Cart para llevar la lógica del carrito de compras
5 minutos
play_circle_outline
Modificar navegación para mostrar información del carrito de compras
5 minutos
play_circle_outline
Listando los productos de la tienda (I)
9 minutos
play_circle_outline
Listando los productos de la tienda (II)
11 minutos
play_circle_outline
Mostrando el detalle de un producto
10 minutos
play_circle_outline
Lógica para añadir productos al carrito
8 minutos
play_circle_outline
Lógica para actualizar y eliminar productos del carrito
9 minutos
play_circle_outline
Componente para mostrar la información del carrito de compras (I)
6 minutos
play_circle_outline
Componente para mostrar la información del carrito de compras (II)
12 minutos
play_circle_outline
Servicio para acceder a los pedidos de los clientes
5 minutos
play_circle_outline
Componente para mostrar los pedidos y Guardián para proteger rutas de clientes
7 minutos
play_circle_outline
Método para procesar los pedidos desde el carrito de compras
5 minutos
school
¿Qué aprenderás?
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.
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.
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
assignment
Requisitos
- Si no tienes conocimientos de Typescript, te recomiendo leer estos tutoriales de mi blog que estoy seguro te ayudarán a entender las bases.
- Es necesario conocer las bases de Angular 2 o superior, aquí tienes un curso funcional que te ayudará a asentar unas buenas bases.
- Si quieres empezar desde 0 de forma tranquila con Angular y Firestore puedes acceder a este curso donde desarrollamos una aplicación de CRUD paso a paso.
group
¿A quién va dirigido el curso?
- Estás interesado en el desarrollo de interfaces rápidas que trabajen en tiempo real con una de las mejores tecnologías actuales.
- Quieres mejorar tus desarrollos con Angular y necesitas aplicaciones rápidas olvidándote del backend.
- Desarrollo de aplicaciones para entornos profesionales con datos escalables.
help_outline
¿Qué hacer en caso de dudas durante el curso?
Los planes de suscripción trimestral y anual incluyen soporte a través del foro del curso.
Las dudas que se planteen en el foro del curso serán respondidas en un plazo máximo de 24 horas laborables.
Las dudas planteadas deben estar relacionadas con el contenido del curso y no con desarrollos personalizados que no estén relacionados con el curso.
card_membership
Certificado de finalización
emoji_events
Al completar todas las lecciones del curso, obtendrás un certificado de finalización en formato PDF personalizado con tu nombre y un código QR de verificación.
- center_focus_weak Código QR con enlace al curso
- picture_as_pdf Descargable en formato PDF
- person Personalizado con tu nombre
star Disponible exclusivamente para suscriptores.
