Angular & Spring Boot: Creando Webapp Full Stack
Desarrollo frontend con Angular y backend Spring Boot, RESTFul, JPA, Spring Security JWT, Redux
Así estudias: curso autodidacta
- Autodidacta y 100% en línea: contenido disponible 24/7.
- Avanzas a tu ritmo: la plataforma guarda tu progreso.
- Sin tutor ni clases en vivo: el curso está diseñado para estudiarse por tu cuenta.
- Te evalúas con actividades automáticas, sin entregas a un tutor.
Lo que serás capaz de hacer
Bienvenido al curso de Angular con Spring Boot , aprenderás linea a linea y desde cero a desarrollar aplicaciones web de una sola página (SPA), desde los conceptos más básicos de Angular hasta un completo sistema conectado a la base de datos mediante API Rest para implementar un CRUD (crear, leer, actualizar y eliminar) con relaciones de tablas, Hibernate/JPA, paginación, subida de archivos, manejo de errores, validación de formulario y mucho más. Además aprenderás a dar seguridad a tu aplicación con Spring Security con JWT (JSON Web Token), deploy, entre otros temas más. El curso es completamente funcional con Angular 21+ . Angular es un framework JavaScript para desarrollar aplicaciones web de una sola página (SPA - single page application), asíncronas, reactivas y escalables, creado por Google. Unos de los framework más utilizados hoy en día en la industria para crear aplicaciones web y móviles en el lado del cliente/front-end. Aprenderás todo lo que necesitas saber para trabajar por el lado del cliente con Angular (front-end) y por el lado del servidor con Spring (back-end): Por el lado de Angular veremos TypeScript, ReactiveX, Angular CLI, Operadores RX, Componentes, Eventos/Hooks, Observable, Pipe, Directivas, Interceptores Http, servicios, Redux, SockJS, Stompjs y mucho más. Por el lado de Spring veremos IoC, Spring MVC, API RESTful, Validaciones, Spring Data JPA, Hibernate, Paginación, JWT y más. También vamos a ver en detalle todo lo relacionado al despliegue en producción (deploy), con diferentes alternativas, de forma local y en servicios en la nube AWS. Todos los materiales del curso están en español y al finalizar recibes un diploma UDEMY digital certificando tu aprobación con validez internacional y LinkedIn. ¿Porqué elegir nuestros cursos? Acceso 7 x 24 a nuestra Plataforma e-learning. Soporte online con profesor Java Al finalizar recibes un certificado digital Somos pioneros en brindarte este tipo de acceso para darte la libertad que necesitas para estudiar, donde quiera que te encuentres. Excelente relación calidad-precio. Conocimiento aplicable a proyectos reales del mercado laboral. Atención rápida y satisfactoria a las dudas por parte del profesor. Interactividad del curso ya que contiene foros y comunicación para resolver dudas. Si quieres ser un desarrollador full-stack con Spring Framework y avanzar al siguiente nivel, es casi obligatorio este curso, te invito a que te inscribas, nos vemos adentro.
- Desarrolla aplicaciones web full-stack con Angular (frontend), Spring Framework y Spring Boot + JPA (backend)
- Desarrolla una aplicación de Chat en tiempo real con WebSocket usando Angular y Spring Boot
- Desarrolla una aplicación de carro de compras con Angular + Spring Boot + Hibernate/JPA
- Desarrolla una aplicación de CRUD completa usando Angular + Spring Boot + JPA + Restful
- Maneja los componentes, directivas, rutas, pipes y servicios de una aplicación Angular
- Aprende a manejar el estado de Angular con Redux
Temario
UNIDAD 1 - Introducción al curso · 20 leccionesUNIDAD 1 - Introducción al curso
UNIDAD 1 - Introducción al curso
- Introducción
- Antes de Comenzar
- Introduccción a Angular
- Herramientas necesarias
- Instalación de angular
- ¿Cómo hacer preguntas?
- Creando nuestra primera aplicación
- Levantando nuestra aplicación
- Pasando valores a la vista html
- La directiva ngFor
- La directiva ngIf
- Directiva ngIf y botón mostrar/ocultar
- Flujo de Control nueva sintaxis desde Angular 17
- Introduccción a los Componentes
- Creando nuevo componente counter
- Persistiendo el estado con sessionStorage y localStorage
- Pasando datos desde el componente padre al componente hijo con @Input
- Transmitiendo datos desde el componente hijo al padre con @Output
- Revisando y solucionando error del sessionStorage en modo SSR
- Descargar Código Fuente
UNIDAD 2 - Aplicación Facturación · 17 leccionesUNIDAD 2 - Aplicación Facturación
UNIDAD 2 - Aplicación Facturación
- Creando proyecto InvoiceApp
- Creando las clases de TypeScript del modelo
- La data de la factura y service
- La data como código
- Maquetando datos de la factura e items en el componente
- Profundizando conceptos de tipos de datos y otros
- Agregando estilos CSS con Bootstrap
- Creando Sub-Componentes de factura
- Composición Dividiendo componente en Sub-Componentes
- Calculando el total de la factura
- Añadiendo el componente Total
- Eliminando un item de la factura
- Eliminando en el Service y actualizando el Gran Total
- Añadiendo componente Form Item
- Submit Form
- Validando Form
- Descargar Código Fuente
UNIDAD 3 - Aplicación Carro de Compras · 21 leccionesUNIDAD 3 - Aplicación Carro de Compras
UNIDAD 3 - Aplicación Carro de Compras
- Creando proyecto CartApp
- Data de los productos y Service
- La data como código
- Maquetando productos view HTML
- Maquetando catálogo CSS Bootstrap
- Dividiendo en Sub-componentes
- Añadiendo Cart Component
- Maquetando Cart Component HTML CSS
- Implementando evento click y Agragar al carro
- Actualizar la cantidad del producto
- Eliminar producto del carrito
- Actualizar el total del carrito
- Guardar los items del carrito en el sessionStorage
- Open/Close Cart
- Navbar
- Copiar estilos CSS para la siguiente clase
- Ventana Modal o Dialogo del Cart
- Modal Componente
- DevTools herramientas de desarrollador en Google Chrome
- El evento OnChanges
- Descargar Código Fuente
UNIDAD 4 - Angular Routes en Aplicación Carro de Compras · 10 leccionesUNIDAD 4 - Angular Routes en Aplicación Carro de Compras
UNIDAD 4 - Angular Routes en Aplicación Carro de Compras
- Eliminando Modal
- Añadiendo el route del shopping cart (la ruta url)
- Compartiendo los datos al route del componente Cart
- Eliminando items del carro usando EventEmitter
- Añadiendo la ruta al componente Catalog
- Agregando item al carro usando EventEmitter
- Redirigiendo a otras rutas/componentes con navigate rute
- Confgurando la pagina por defecto
- Agregando mensajes de alertas con Sweet Alert 2
- Descargar Código Fuente
UNIDAD 5 - Introducción a Redux · 8 leccionesUNIDAD 5 - Introducción a Redux
UNIDAD 5 - Introducción a Redux
- Introducción a Redux
- Creando proyecto e instalando NgRx
- Añadiendo el componente Counter
- Implementando Redux action y funciones Reducer
- Despachando acciones en el componente con Dispatch
- Payload en las acciones usando props
- Extensión ReduxDevtools Chrome para debug
- Descargar Código Fuente
UNIDAD 6 - Redux en Aplicación Carro de Compras · 12 leccionesUNIDAD 6 - Redux en Aplicación Carro de Compras
UNIDAD 6 - Redux en Aplicación Carro de Compras
- Implementando action de Redux
- Escribiendo functions Reducer
- Dispatch acciones en el componente
- Optimizando save session
- Optimizando total
- Debug del store con ReduxDevtools Chrome
- Escribiendo action y functions Reducer para el catalgo de productos
- Despachando accion para cargar productos (dispatch)
- Añadiendo las acciones y reducer para el effects
- Escribiendo la clase Effects (efectos secundarios del Store)
- Introducción a los Observable
- Descargar Código Fuente
UNIDAD 7 - Aplicación Usuarios · 14 leccionesUNIDAD 7 - Aplicación Usuarios
UNIDAD 7 - Aplicación Usuarios
- Creando el proyecto
- Datos y el Service
- Bootstrap y dividiendo en sub-componentes
- Creando el componente Form
- Campos del formulario HTML
- Validando el formulario
- Eliminando usuario
- Seleccionar usuario para actualizar
- Actualizar usuario
- Mensajes de alertas con Sweet Alert 2
- Open/Close Form
- Copiar estilos CSS para la siguiente clase
- Modal Form
- Descargar Código Fuente
UNIDAD 8 - Routes en Aplicación Usuarios · 9 leccionesUNIDAD 8 - Routes en Aplicación Usuarios
UNIDAD 8 - Routes en Aplicación Usuarios
- Configurando Rutas
- Agregando componente Navbar y enlaces con RouterLink
- Compartiendo datos en componentes enrutados con state
- Añadiendo Service Data Sharing para compartir datos entre paginas
- Agragando, actualizando y eliminando con EventEmitter
- Navigate Route navegando entre rutas entre componentes
- Pasando parámetro id de la ruta parte I
- Pasando parámetro id de la ruta parte II
- Descargar Código Fuente
UNIDAD 9 - Backend Spring Boot App Usuarios · 17 leccionesUNIDAD 9 - Backend Spring Boot App Usuarios
UNIDAD 9 - Backend Spring Boot App Usuarios
- Instalación JDK MacOS
- Instalación JDK Windows
- Instalación IDE STS Visual Code
- Introducción a Spring Boot
- Creando proyecto Backend con Spring Boot
- La clase Entity de persistencia JPA
- Introducción a los repositorios (CrudRepository de Spring Data JPA)
- Implementando el componente Repository de acceso a datos
- Implementando el componente Service
- Implementando el controlador RestController metodos handler GET
- RestController metodo handler POST PUT y DELETE
- Configurando en el application.properties conexión MySQL
- Instalando Base de Datos MySQL MacOS
- Instalando Base de Datos MySQL Windows
- Probando la conexión a MySQL y creando la BBDD y tabla
- Probando API Restful en la herramienta Postman
- Descargar Código Fuente
UNIDAD 10 - Comunicación entre Frontend Angular y Backend Spring · 7 leccionesUNIDAD 10 - Comunicación entre Frontend Angular y Backend Spring
UNIDAD 10 - Comunicación entre Frontend Angular y Backend Spring
- Consumindo desde Angular el API RESTful GET del Backend
- Consumindo desde Angular el API RESTful GET findById del Backend
- Consumindo desde Angular el API RESTful POST/PUT del Backend
- Repasando algunos detalles
- Consumindo desde Angular el API RESTful DELETE del Backend
- Ajustando algunos detalles del estado
- Descargar Código Fuente
UNIDAD 11 - Backend Spring Boot Usuarios: Validaciones · 2 leccionesUNIDAD 11 - Backend Spring Boot Usuarios: Validaciones
UNIDAD 11 - Backend Spring Boot Usuarios: Validaciones
- Anotaciones de validación del API Java Bean Validation
- Validando el controller los metodos POST y PUT
UNIDAD 12 - Frontend Angular integrando validación del Backend · 2 leccionesUNIDAD 12 - Frontend Angular integrando validación del Backend
UNIDAD 12 - Frontend Angular integrando validación del Backend
- Integrando validación del backend en Angular
- Mostrando los mensajes de errores en el form de Angular
UNIDAD 13 - Implementando paginación · 8 leccionesUNIDAD 13 - Implementando paginación
UNIDAD 13 - Implementando paginación
- Implementando paginación en Repository y API REST
- Probando paginación API REST en POSTMAN
- Integrando paginador en Angular
- Configurando paginador en Angular
- Creando componente Paginator e implementando links de las páginas
- Implementando links para la primera, siguiente, atrás y última página
- Afinando el paginador con optimizaciones y mejoras
- Descargar Código Fuente
UNIDAD 14 - Backend Users Spring Security JWT · 25 leccionesUNIDAD 14 - Backend Users Spring Security JWT
UNIDAD 14 - Backend Users Spring Security JWT
- Introducción Spring Security JWT
- Creando la estructura de tablas de la base de datos
- Clases entity Role y relación Many To Many con User
- Implementando componente UserDetailsService
- Creando clase de configuracion de Spring Security
- Configurando reglas de seguridad http en los endpoint
- Creando y configurando JWT Authentication Filter
- JWT: JSON Web Token for Java
- Implementando método successful authentication
- Generando respuesta Json con token JWT
- Agregando roles en los claims cuando se genera el token
- Password encriptado con bcrypt para la siguiente clase
- Configurando Password Encoder
- Implementando método unsuccessful authentication
- Creando el Filtro JwtValidationFilter en la Configuración de Spring Security
- Validando y autenticando con el token JWT
- MixIn SimpleGrantedAuthority
- Probando en Postman
- Codificando password con BCrypt
- Agregando la Clase UserRequest para el update
- Asignando ROLE_USER
- Asignando ROLE_ADMIN
- Cors en Spring Security
- Agregando si es Admin en los claims del token
- Descargar Código Fuente
UNIDAD 15 - Angular integrando login JWT con Backend Spring · 14 leccionesUNIDAD 15 - Angular integrando login JWT con Backend Spring
UNIDAD 15 - Angular integrando login JWT con Backend Spring
- Creando componente Auth y Login Page
- Enrutando Login Page
- Añadiendo Guard Auth
- Emitiendo username y password
- Implementando AuthService y realizando login JWT
- Probando login en Angular
- Almacenando credenciales/estado del Login
- Implementando métodos getters Service
- Ocultar/Mostrar botones CRUD
- Logout
- Guard Authenticated
- Componente Forbidden 403
- Interceptor Token HTTP
- Descargar Código Fuente
UNIDAD 16 - Redux Usuarios App · 18 leccionesUNIDAD 16 - Redux Usuarios App
UNIDAD 16 - Redux Usuarios App
- Users Actions
- Users Reducer
- Users Reducer CRUD
- Users Dispatch
- Inmutabilidad del Store
- Load Users Effects
- Load Users Effects con paginador
- Add User Effects
- Add User Effects y Validation
- Probando Add User
- Update User Effects
- Probando Update User
- Reset Form State
- Remove User Effects
- Probando Remove User
- Mejora Remove Effects desde Angular
- Optimizando Redux
- Descargar Código Fuente
UNIDAD 17 - Redux Auth · 8 leccionesUNIDAD 17 - Redux Auth
UNIDAD 17 - Redux Auth
- Creando el Store
- Integrando el Store en el Service
- Moviendo logica del Login en el Auth Component
- Probando el Store auth en redux devtools
- Effects
- Effects LoginSuccess y LoginError
- Probando Auth Effects
- Descargar Código Fuente
UNIDAD 18 - Deploy Amazon Web Services (AWS) · 14 leccionesUNIDAD 18 - Deploy Amazon Web Services (AWS)
UNIDAD 18 - Deploy Amazon Web Services (AWS)
- Introducción AWS Amazon
- Creando la Base de Datos en Amazon RDS (Amazon Relational Database Service)
- Security Group Firewall y conexión desde Workbeanch
- Creando las tablas en Amazon RDS y Probando en Postman con BBDD Amazon RDS
- Lanzando instancia Amazon EC2
- Concectando via SSH a la instancia EC2 (o maquina virtual)
- Instalando Java JDK Amazon Corretto en nuestra instancia EC2
- Generar jar del Backend y deploy en EC2
- Probando en postman y en Angular el Backend publicado en EC2
- Añadiendo isLoading con Spinners mientras está cargando los datos
- Angular generando build para producción
- Política de Bucket para la siguiente clase
- Deploy Angular App en Amazon S3
- Eliminar servicios y recursos AWS
UNIDAD 19 - Bonus Extra · 3 leccionesUNIDAD 19 - Bonus Extra
UNIDAD 19 - Bonus Extra
- Crear usuarios con Role Admin en Angular
- Actualizar usuarios con Role Admin en Angular
- Descargar Código Fuente
UNIDAD 20 - Agradecimientos y despedida · 1 leccionesUNIDAD 20 - Agradecimientos y despedida
UNIDAD 20 - Agradecimientos y despedida
- Hemos llegado al final del curso
UNIDAD 21 - Bonus Extra: Sistema de Chat en tiempo real con WebSocket · 20 leccionesUNIDAD 21 - Bonus Extra: Sistema de Chat en tiempo real con WebSocket
UNIDAD 21 - Bonus Extra: Sistema de Chat en tiempo real con WebSocket
- Demostración visual de lo que lograremos al finalizar la sección
- Introducción a la tecnología WebSocket
- ¿Qué es el Protocolo Stomp y cómo se relaciona con WebSocket?
- Actualización: Nueva ubicación dependencia WebSocket al crear el proyecto
- Creando el proyecto backend y configurando el servidor WebSocket (el Broker)
- Creando el controlador ChatController y el Mensaje
- Creando el proyecto frontend Angular
- Instalando librerías para el cliente WebSocket en Angular (sockjs y stompjs)
- Maquetando y escribiendo el contenido HTML para el chat
- Implementando el conectar y desconectar del servidor WebSocket
- Implementando el enviar y recibir mensajes del Chat
- Notificar cuando un nuevo usuario se conecta al chat
- Dando un color al username cuando se conecta al servidor
- Notificar cuando un usuario está escribiendo
- Instalación Mongo DB
- Qué es Mongo y algunos ejemplos
- Instalando Robo 3T una herramienta GUI para MongoDB
- Agregando Clases del Modelo Document y Repository
- Historial de mensajes del chat con MongoDB
- Descargar Código Fuente
UNIDAD 22 - Fin del curso · 1 leccionesUNIDAD 22 - Fin del curso
UNIDAD 22 - Fin del curso
- Agradecimientos y despedida
Certificado con validez SEP: lo emite la SEP, no solo una plataforma
Al demostrar la competencia recibes un certificado emitido por la Secretaría de Educación Pública a través del Gobierno del Estado de México: un documento oficial que puedes presentar con confianza ante cualquier empleador o institución.
Tu certificado con INEC
- Lo emite la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México
- Documento oficial con folio verificable en línea
- Lo otorga la Universidad Tecnológica Fidel Velázquez
Otras plataformas en línea
- Constancia privada emitida por la misma plataforma
- Solo acredita horas cursadas o asistencia
- Sin respaldo de una autoridad educativa
Tu itinerario, de la inscripción al certificado
- 1
Inscripción con pago único
Pagas $2,800 MXN una sola vez y entras de inmediato al curso.
- 2
Estudias a tu ritmo
22 unidades con videos, lecturas y actividades, disponibles 24/7 durante 12 meses.
- 3
Cuestionarios por unidad
Cuestionarios para comprobar lo aprendido.
- 4
Certificado
Emitido por la SEP a través del Gobierno del Estado de México, con folio verificable.
Un certificado oficial de la SEP
Muestra · verificable por folio y QR
- Emitido por la Secretaría de Educación Pública (SEP), a través del Gobierno del Estado de México. No es una constancia privada: es un documento oficial, y ese respaldo marca la diferencia frente a otras plataformas en línea.
- Contenido impartido por Andrés Guzmán.
- Folio y QR verificables para compartirlo con quien te contrate.
Empieza hoy, a tu ritmo
Un solo pago y acceso inmediato al curso completo durante 12 meses.
- 22 unidades · 251 lecciones · 60 h
- 12 meses de acceso
- Certificado emitido por la SEP (Gob. del Estado de México) con folio verificable
Sobre tu inscripción
¿Cómo es el pago?
Un solo pago de $2,800 MXN. No hay mensualidades ni cargos recurrentes.
¿Cuánto tiempo tengo acceso?
12 meses desde tu inscripción, 24/7, para avanzar a tu ritmo.
¿Quién imparte el contenido?
El curso es impartido por Andrés Guzmán; INEC gestiona tu inscripción, evaluación y certificado.
¿Qué pasa cuando vence mi acceso?
Puedes renovar tu cuenta tú mismo desde la plataforma, sin trámites ni esperas.
¿El curso tiene validez SEP?
Sí. Al completar el curso recibes un certificado emitido por la SEP a través del Gobierno del Estado de México, con folio verificable.
¿El curso tiene tutor o clases en vivo?
No. Es un curso autodidacta: estudias por tu cuenta, a tu ritmo, sin tutor ni sesiones en vivo.
¿Cómo se evalúa?
Te evalúas con actividades automáticas, sin entregas a un tutor.
Cursos relacionados
Incluido en la Membresía Educativa
Este curso forma parte de los 647 cursos autodidactas con certificado que incluye la membresía, por un solo pago anual.
Membresía Educativa: cursos en línea con validez SEP
