Transformar una aplicación existente en una aplicación web progresiva (PWA) es uno de los pasos más importantes para llevar un proyecto real al siguiente nivel. En lugar de crear algo desde cero, el enfoque se centra en tomar un e-commerce funcional construido con Angular y dotarlo de capacidades como funcionamiento offline, notificaciones y caché de recursos.
¿Qué es la Platzi Store y por qué es el proyecto ideal?
La Platzi Store es un e-commerce desarrollado durante el curso de Angular que incluye las funcionalidades básicas de una tienda en línea [0:12]. Su estructura ya cuenta con componentes esenciales que la convierten en un caso de estudio perfecto para implementar PWA:
- Un home con sliders para promocionar productos.
- Un header y footer consistentes en toda la aplicación.
- Un formulario de suscripción por correo para recibir notificaciones de productos.
- Una galería de productos renderizada completamente con Angular.
- Vista de detalle del producto con toda la información relevante.
- Funcionalidad para crear y actualizar productos.
- Un carrito de compras construido con programación reactiva.
- Sección de órdenes y una página de contacto.
¿Cómo funciona la programación reactiva en el carrito?
Uno de los aspectos destacados de la Platzi Store es el uso de programación reactiva en el carrito de compras [1:00]. Esto significa que al agregar un producto, el contador del carrito se actualiza automáticamente en tiempo real sin necesidad de recargar la página. Este patrón reactivo es fundamental en Angular y facilita la comunicación entre componentes de forma eficiente.
¿Qué capacidades PWA se van a implementar?
El objetivo principal es tomar esta aplicación completamente funcional y convertirla en una PWA que ofrezca una experiencia similar a una app nativa [1:22]. Las mejoras específicas incluyen:
- Modo offline: la aplicación seguirá siendo usable sin conexión a internet.
- Notificaciones push: los usuarios podrán recibir alertas relevantes.
- Caché de recursos: los archivos estáticos y datos se almacenarán localmente para mejorar el rendimiento.
Estas características son posibles gracias a la librería nativa de Angular para PWA, que se integrará directamente en el proyecto existente.
¿Cómo preparar el entorno de trabajo?
Para comenzar a trabajar con el proyecto es necesario seguir estos pasos [1:35]:
- Descargar el proyecto desde los archivos del curso o clonarlo desde GitHub en el repositorio de Platzi llamado "curso PWA de Angular".
- Instalar todas las dependencias del proyecto con el gestor de paquetes.
- Verificar que la aplicación corre correctamente antes de añadir las funcionalidades PWA.
Este enfoque permite concentrarse exclusivamente en las capacidades progresivas sin preocuparse por la lógica de negocio del e-commerce, que ya está resuelta. Con el proyecto listo, el siguiente paso será integrar el módulo nativo de Angular para comenzar la transformación hacia una aplicación web progresiva completa.
¿Ya tienes el proyecto clonado y funcionando? Comparte en los comentarios si encontraste algún detalle durante la instalación.
