Gracias por enviar su consulta! Uno de los miembros de nuestro equipo se pondrá en contacto con usted en breve.
Gracias por enviar su reserva! Uno de los miembros de nuestro equipo se pondrá en contacto con usted en breve.
Temario del curso
Introducción a Ionic y el entorno multiplataforma
- Qué es Ionic y cuándo elegirlo frente a soluciones nativas o Flutter
- Arquitectura de Web Components que impulsa la interfaz de usuario de Ionic
- Soporte del framework en los ecosistemas de Angular, React y Vue
- Casos de uso reales para aplicaciones PWA y móviles
Configuración del entorno de desarrollo
- Instalación y configuración de Node.js y npm
- Instalación de la CLI de Ionic
- Creación y estructura inicial de un nuevo proyecto de Ionic
- Ejecución de aplicaciones en el navegador y en modo de dispositivo conectado
Análisis profundo de la estructura y arquitectura del proyecto
- Páginas, módulos y componentes reutilizables
- Comprensión y configuración del sistema de enrutamiento
- Patrones de servicios e inyección de dependencias
- Directorios de activos y configuración del entorno
Componentes de interfaz de usuario principales y diseño
- Uso de ion-header, ion-toolbar e ion-content para la estructura de páginas
- Controles de entrada: ion-input, ion-select, ion-checkbox
- Botones, FAB, tarjetas, listas y el sistema de cuadrícula
- Convenciones modernas de control de formularios en Ionic
- Taller práctico: construcción de una página de inicio de sesión y diseño del panel principal
Estrategias de navegación y enrutamiento
- Integración de Angular Router y React Router
- Patrones de navegación entre páginas y enlaces profundos
- Carga diferida para mejorar el rendimiento
- Patrones de navegación por pestañas y menú lateral
Estilos y personalización visual (Theming)
- Variables CSS y el sistema de colores de Ionic
- Implementación del soporte para modo oscuro
- Fuentes dinámicas y personalización de paletas en Ionic 8
- Estilos responsivos a través de puntos de quiebre de dispositivo
Formularios y validación
- Framework de formularios reactivos para Angular
- Hook personalizados y patrones de validación para React
- Gestión de errores y retroalimentación visual de validación
- Construcción y validación de formularios complejos en múltiples pasos
Servicios e integración con API
- Configuración del cliente HTTP e interceptores
- Ejecución de llamadas API RESTful y manejo de respuestas
- Mejores prácticas para la gestión de estado
- Bordes de error y recuperación ante fallas de red
Capacitor y funciones nativas del dispositivo
- Comprensión del puente de Capacitor y el ecosistema de complementos
- Instalación y configuración de Capacitor en un proyecto existente
- Acceso a la cámara y al selector de imágenes
- Geolocalización e integración de mapas
- Almacenamiento nativo y preferencias del sistema
- Taller práctico: captura de imágenes y almacenamiento de datos en el dispositivo
Componentes avanzados de interfaz de usuario
- Modales, popups y alertas en la versión moderna de Ionic
- Notificaciones toast y superposiciones de carga
- Mejoras de Ionic 8 en eventos y arquitectura de superposiciones
- Consideraciones de rendimiento para superposiciones de interfaz complejas
Técnicas de optimización del rendimiento
- División de código y mejores prácticas de carga diferida
- Reducción del tamaño del paquete y evitar errores comunes
- Optimización del renderizado para listas y conjuntos grandes de datos
Aplicaciones Web Progresivas (PWA) y tubería de construcción
- Conversión de la aplicación a una Progressive Web App
- Configuración de service workers y capacidades sin conexión
- Manifiesto de la app y mensajes de instalación de PWA
Procesos de construcción y despliegue
- Construcción y empaquetado para Android e iOS en producción
- Configuración de requisitos y metadatos para la presentación a tiendas de aplicaciones
- Gestión de configuraciones del entorno entre etapas de preproducción y producción
Proyecto final: Creación de una mini aplicación completa
- Diseño de la arquitectura de la app y flujo de navegación
- Implementación de una página de inicio de sesión con autenticación
- Construcción de un panel principal con integración de datos en tiempo real
- Agregado de una función nativa de cámara mediante Capacitor
- Revisión de código, pruebas y preparación para el despliegue
Requerimientos
- Conocimientos prácticos de HTML, CSS y JavaScript/TypeScript
- Familiaridad con al menos un framework moderno (Angular, React o Vue)
- Experiencia básica con la línea de comandos en Node.js y npm
Audiencia objetivo
- Desarrolladores frontend que se están adentrando en el desarrollo móvil multiplataforma
- Desarrolladores full-stack que construyen aplicaciones móviles híbridas
- Desarrolladores móviles que buscan una base de código unificada para iOS, Android y PWA
14 Horas