Tremendo Curso Nico! Gracias. Aunque si fue un poco extenso. Ahora toca mejorarlo con la combinación del curso de Trello para agregar los Auths!
Introducción a Angular y Fundamentos
Desarrollo de Aplicaciones Modernas con Angular
Creando tu primer proyecto en Angular
Creación de componentes y rutas en Angular para gestión de tareas
String Interpolation en Angular: Transmisión de Datos a Templates
Modificación de Propiedades HTML con Angular: Property Binding
Eventos en Angular: click, doble click y cambio de input
Eventos de Teclado en JavaScript: Uso de KeyDown y Change
Reactividad Granular con Signals en Angular
Reactividad en HTML: Implementación de Signals en JavaScript
Estructuras de control en Angular
Estructuras de Control y Renderizado Dinámico en Angular
Gestión Dinámica de Tareas en JavaScript: Creación y Eliminación
Estructuración de Tareas en JavaScript: Uso de Interfaces y Typing
Actualización de tareas con Angular y programación inmutable
Uso de ngIf y ngFor para control de flujos en Angular
Pluralización y ngSwitch en Angular para manejo de condiciones múltiples
Manejo Avanzado de Formularios Reactivos en Angular
Validaciones de Inputs en Formularios Reactivos con Angular
Alistando tu aplicación para producción
Validación de formularios y estilos dinámicos en Angular
Activación dinámica de clases en Angular con validaciones
Edición de Tareas Dinámicas en Aplicaciones Web
Estados Computados en Programación Reactiva con Signals
Persistencia de Tareas con LocalStorage en Angular
Compilación y Optimización de Aplicaciones Angular para Producción
Lanzamiento de Aplicaciones con Fiverr Hosting y Angular
Nuevas Sintaxis Declarativas en Angular Inspiradas en Svelte
Sintaxis y rendimiento de for y switch en JavaScript moderno
Migración Automática a Nueva Sintaxis de Angular
Componentes Reutilizables y Comunicación
Creación de Tienda en Línea con Angular y Tailwind CSS
Creación y Organización de Componentes en Angular
Componentes Reutilizables en Angular: Creación y Maquetado de Productos
Uso de Angular DevTools para Debugging en Angular
Inputs en Angular: Comunicación de Datos entre Componentes
Outputs en Angular: Comunicación del Hijo al Padre
Maquetación de Galería de Productos con Tailwind CSS
Ciclo de vida de los componentes
Ciclo de Vida de Componentes en Angular
Creación y Uso de Componentes en Angular: Ciclo de Vida y Comunicación
Ciclo de Vida de Componentes en Angular: Eventos Clave
Detección de Cambios en Inputs con ngOnChange en Angular
Prevención de fugas de memoria con ngOnDestroy en Angular
Creación de un Reproductor de Audio con WaveSurfer.js en Angular
Mejoras de la página About en e-commerce: audio y contador dinámico
Mejorando la interfaz del producto
Componentización y Manejo de Datos en Angular
Creación de Headers en Páginas Web con Angular
Implementación de Interfaz Gráfica para Carrito de Compras Interactivo
Implementación de Reactividad en Carrito de Compras con Angular
Gestión de Carrito de Compras en Angular con ngOnChanges
Gestión de Estado en Angular: Solución al InputDrilling
Gestión de Estado Global en Angular con Servicios y Señales
Inyección de Dependencias en Angular: Conceptos y Prácticas
Integración y Datos
Conexión de Angular a REST API usando Fake Store API de Platzi
Creación de Alias para Imports Cortos en Proyectos JavaScript
Transformación de Datos con Pipes en Angular
Creación y uso de pipes personalizados en Angular
Manipulación de Fechas en Angular con Date Functions
Manipulación del DOM con Directivas en Angular
Deployment de Aplicaciones Angular en Vercel
Enrutamiento y Navegación
Creación de Página 404 en Angular: Manejo de Rutas No Encontradas
Implementación de Router Link en Angular para SPA eficiente
Implementación de Layouts Compartidos en Angular para Vistas Anidadas
Uso de RouterLinkActive en Angular para Navegación Activa
Routing en Angular: Creación de Páginas de Detalle de Producto
Consulta dinámica de detalles de producto con Angular y REST API
Galería de Productos Dinámica con Angular y TypeScript
Mejoras en Detalle de Producto: Precio, Carrito e Imagen Activa
Perfeccionando tu e-commerce
Filtrado de Productos por Categoría en E-commerce
Filtros de Productos con Query Params en Angular
Optimización de Aplicaciones con Lazy Loading y Code Splitting
Optimización de JavaScript en Angular con Lazy Loading
Optimización de Carga de Chunks con Preloading en Angular
Migración de Angular a Nueva Sintaxis con ng generate
Despliegue de Aplicaciones con Verzal en Entornos Productivos
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Despliegue de Aplicaciones con Verzal en Entornos Productivos
71/71Recursos
¿Cómo lanzar tu aplicación a producción?
Has llegado al punto crucial donde tu aplicación está lista para ser lanzada al mundo. Este proceso puede parecer desafiante, pero con la herramienta adecuada se convierte en un paseo por el parque. En esta clase revisamos cómo usar Verzal para desplegar tu aplicación de manera efectiva y eficiente, asegurándonos de que todo funcione correctamente en un entorno productivo.
¿Qué es Verzal y cómo funciona?
Verzal es una herramienta de despliegue que facilita el lanzamiento de aplicaciones al gestionar la actualización y el deployment de manera automática. Cuando introduces el comando verzal, el sistema:
- Sube los assets de tu proyecto a la nube.
- Realiza el build necesario.
- Actualiza la aplicación.
Este proceso no solo es sencillo, sino que también ofrece la ventaja de ver cómo ocurre en tiempo real. Una vez completado el proceso, Verzal proporciona un enlace para que puedas inspeccionar tu proyecto ya desplegado.
Explorando tu aplicación en producción
Después de que Verzal haga su magia, puedes visitar tu aplicación en la URL proporcionada. Aquí, te adentrarás en un entorno productivo donde todas las funcionalidades que desarrollaste estarán operativas. Algunos aspectos que puedes explorar incluyen:
- Detalle de características: Revisa cada funcionalidad desarrollada.
- Carrito reactivo: Observa cómo se calculan en tiempo real los precios en el carrito de compras.
- Navegación entre secciones: Mueve entre las diferentes páginas desarrolladas con fluidez.
- Gestión de rutas: Comprueba cómo se maneja cuando se introduce una ruta inexistente y el usuario es redirigido a la página principal.
- Filtros por categoría: Explora filtros efectivos dentro de tu e-commerce.
¿Qué hacer al finalizar tu proyecto?
Llegaste al final de tu curso con un proyecto ambicioso y profesional que puedes agregar orgullosamente a tu portafolio. Ahora que has finalizado el desarrollo, es momento de:
- Subir tu proyecto: Esto te permitirá obtener el certificado del curso.
- Rendir el examen: Si lo prefieres, puedes optar por esta opción.
- Seguir aprendiendo: Sigue al instructor en redes sociales para actualizaciones y nuevos cursos.
- Calificar el curso: Una opinión sincera siempre es bienvenida.
Recuerda, el final de este proyecto es solo el comienzo de nuevas oportunidades para seguir creciendo como desarrollador. Mantente motivado, sigue explorando, y nunca dejes de aprender. ¡Nos vemos en el próximo curso de Angular o en la Escuela de Desarrollo Web!
Aportes 26
Preguntas 1
Ordenar por:
Seria bueno un curso de testing de este mismo proyecto
Tomé este curso por necesidad de aprender Angular para el puesto de trabajo en el que me encuentro. Vengo de aprender React.js y si les soy sincero no entiendo cual es el pleito de React vs Angular. Llegados a este punto ambos me parecen frameworks estupendos para crear aplicaciones web.
Este es uno de los cursos más largos que he tomado en Platzi y la verdad que se me hizo corto de lo bien que lo enseño el profesor Nicolas.
Sin duda encantado de aprender un framework nuevo !! 🚀🤩
Muy buen curso. :)
Como sujerencia, la API, debería tener una version mas privada que no permita que los almunos del otro curso de Angular creen productos, es un poco molesto estar en el curso y ver que algunas imagenes no funcionen o tengan nombres raros.
De resto, gran curso.
Tengo una consulta con respecto al examen final del curso, ya que hay una pregunta que dice "¿Cuál de los siguientes métodos se llama una sola vez después de que un componente ha sido inicializado en Angular?" en donde las opciones son ngOnInit, ngOnChanges y ngdocheck. Según lo aprendido la respuesta correcta sería ngOnInit no? espero puedan resolver mi duda. Gracias.
Cada uno de nosotros sabe lo que cuesta y lo que representa culminar cada curso.
Felicitaciones, Máquinas.
Gracias por el curso.
Llegamos!!!! 🥳🥳🥳🥳🥳
otra clase de angular plis , excelente!!! ♥ me gustó.
Aprende angular por necesidad ya que estaba mas del lado de .Net blazor pero ahora con angular puedo optimizar mas y entender mejor muchas cosas en blazor :)
Contenido básico, puede mejorarse, cubre aspectos generales del framework muy superficiales.
Nice curso. Lo he terminado en este 2025 usando Angular 19 ya que me tocó aplicar Angular en un trabajo laboral. Ha sido un curso genial Nico, como siempre, un gran profesor.
Excelente curso Nico!
Subí mi curso a vercel. Fácil y rápido en productivo
<https://store-eight-lilac.vercel.app/>
Si sale este error al ejecutar vercel
Lo solucioné de la siguiente manera
```ts
import { RenderMode, ServerRoute } from '@angular/ssr';
export const serverRoutes: ServerRoute[] = [
{
path: 'product/:id',
renderMode: RenderMode.Server
},
{
path: '**',
renderMode: RenderMode.Prerender
}
];
```
Gracias Platzi, Gracias Nico, definitivamente se aprende un mundo en esta plataforma, y gracias a ustedes estoy trabajando programación en una de las empresas más grandes de Noruega.
Este es el Link de mi proyecto.
<https://smart-shop-eight.vercel.app/>
Excelente curso nico! de verdad que el aprendizaje a sido mucho, gracias nico y platzi por educacion de tanta calidad!
Muchas gracias aprendí muchísimo, muy buen curso
El mejor curso a la fecha que he realizado, gracias Nico !!!
Nico muchas gracias!!!!
En los recursos del curso el GitHub esta vació <https://github.com/platzi/curso-angular-ecommerce>
cuales son los links donde puedo descargar los recursos del curso.
Muchas gracias, muy bueno el curso Nico.
Cuál archivo se debe subir para certificarse por proyecto?
Gracias por el curso!
<https://shoppingcart-black.vercel.app/>
Excelente curso!!! Gracias!
gracias
Excelente curso!
Nico muchas gracias siempre es un deleite estar en tus cursos
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?