Contacta con nosotros

Temario del curso

Introducción a Ionic y el Ecosistema Multiplataforma

  • ¿Qué es Ionic y cuándo elegirlo frente a soluciones nativas o Flutter?
  • Arquitectura de Web Components que potencia la interfaz de usuario de Ionic
  • Soporte de frameworks en los ecosistemas de Angular, React y Vue
  • Casos de uso reales para PWA y aplicaciones 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 generación de un nuevo proyecto de Ionic
  • Ejecución de aplicaciones en el navegador y 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 Principal y Disposición

  • Uso de ion-header, ion-toolbar e ion-content para la estructura de la página
  • Controles de entrada: ion-input, ion-select, ion-checkbox
  • Botones, FAB, tarjetas, listas y el sistema de cuadrícula
  • Convenciones modernas de controles de formulario en Ionic
  • Práctica: construcción de una página de inicio de sesión y un diseño de panel de control

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 Temas

  • Variables CSS y el sistema de colores de Ionic
  • Implementación del soporte para modo oscuro
  • Fuentes dinámicas y personalización de la paleta en Ionic 8
  • Estilos responsivos entre diferentes puntos de quiebre de dispositivos

Formularios y Validación

  • Framework de formularios reactivos para Angular
  • Ganchos personalizados (hooks) y patrones de validación para React
  • Gestión de errores y retroalimentación visual de la interfaz de usuario
  • Construcción y validación de formularios complejos en múltiples pasos

Servicios e Integración con API

  • Configuración del cliente HTTP y interceptores
  • Ejecución de llamadas a API RESTful y manejo de respuestas
  • Mejores prácticas para la gestión del estado
  • Barreras de error y recuperación ante fallos de red

Capacitor y Funciones Nativas del Dispositivo

  • Comprensión del puente de Capacitor y el ecosistema de complementos (plugins)
  • 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
  • Práctica: captura de imágenes y almacenamiento de datos en el dispositivo

Componentes Avanzados de la Interfaz

  • Módulos emergentes, popovers y alertas en Ionic moderno
  • 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

  • Mejores prácticas para la división de código y carga diferida
  • Reducción del tamaño del paquete y evitación de errores comunes
  • Optimización del renderizado para listas y conjuntos grandes de datos

Aplicación Web Progresiva (PWA) y Pipeline de Compilación

  • Conversión de la aplicación a una Aplicación Web Progresiva
  • Configuración de service workers y capacidades sin conexión
  • Manifiesto de la aplicación y solicitudes de instalación de PWA

Procesos de Compilación y Despliegue

  • Compilación y empaquetado para producción en Android e iOS
  • Configuración de requisitos y metadatos para la presentación a las tiendas de aplicaciones
  • Gestión de la configuración del entorno entre entornos de prueba y producción

Proyecto Final: Construcción de una Mini Aplicación Completa

  • Diseño de la arquitectura de la aplicación y el flujo de navegación
  • Implementación de una página de inicio de sesión con autenticación
  • Construcción de un panel de control con integración de datos en tiempo real
  • Agregado de una característica de cámara nativa a través de Capacitor
  • Revisión del 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 en la línea de comandos con Node.js y npm

Público Objetivo

  • Desarrolladores front-end que se mudan al 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

Número de participantes


Precio por participante

Próximos cursos

Categorías Relacionadas