En este contexto, la adopción de tecnologías que permitan la reutilización del código y la simplificación del proceso de desarrollo es esencial para mantener la competitividad y la capacidad de respuesta en un mercado en constante cambio.
En este artículo menciono un enfoque innovador y escalable para el desarrollo de 30 nuevas aplicaciones móviles para periódicos regionales, nacionales y deportivos utilizando tecnologías híbridas como Ionic y Angular.
Las tecnologías híbridas ofrecen una solución potente que permite a los desarrolladores escribir una única base de código que puede ejecutarse en múltiples plataformas, reduciendo significativamente el tiempo y los recursos necesarios para el desarrollo. Este enfoque no solo mejora la eficiencia, sino que también facilita la gestión y el mantenimiento de las aplicaciones a lo largo del tiempo.
Este caso se centra en un cliente específico que necesitaba un método eficiente para manejar múltiples aplicaciones con estructuras similares sin sacrificar la independencia y la personalización de cada app.
La capacidad de personalizar cada aplicación para reflejar la identidad única de cada periódico regional, deportivo o nacional, al mismo tiempo que se mantiene una base de código común, fue un requisito clave.
Este enfoque permitió al cliente ofrecer una experiencia de usuario coherente y de alta calidad en todas las aplicaciones, a la vez que se beneficiaba de las ventajas de la reutilización del código y la gestión centralizada.
La necesidad de escalabilidad
Originalmente, el desarrollo de aplicaciones para este cliente se realizaba en proyectos individuales. Cada nueva aplicación se construía replicando código y soluciones de una a otra. Este método, aunque funcional para un número pequeño de aplicaciones, se volvía inmanejable y poco práctico al escalar a un mayor número.
La duplicación de código y la repetición de soluciones resultaban en una considerable pérdida de tiempo y recursos. Además, mantener cada aplicación de manera independiente se convertía en una tarea ardua y costosa.
El cliente se enfrentaba al desafío de expandir su oferta de aplicaciones de tres a treinta. Este crecimiento exponencial exigía una solución más eficiente y sostenible. La gestión de treinta aplicaciones individuales utilizando el método tradicional habría sido prácticamente imposible.
La necesidad de actualizaciones y mejoras constantes para cada aplicación aumentaba la complejidad del mantenimiento. Además, la replicación de código no garantizaba consistencia ni calidad en las aplicaciones. Esto podía llevar a errores y discrepancias entre las distintas versiones.
El método tradicional también limitaba la capacidad de implementar nuevas funcionalidades de manera uniforme en todas las aplicaciones. La falta de un enfoque centralizado dificultaba la incorporación de innovaciones y mejoras tecnológicas. Cada nueva funcionalidad debía ser desarrollada e implementada por separado en cada aplicación. Esto aumentaba significativamente el tiempo de desarrollo y los costes asociados.
¿Cómo implementar una multiapp híbrida?
La solución adoptada para hacer frente a estos retos fue el desarrollo de una multiapp híbrida utilizando Ionic y Angular, tecnologías que facilitan la creación de aplicaciones usando tecnología web (HTML, CSS y JavaScript) que luego se encapsulan dentro de un contenedor nativo.
Este enfoque proporciona la flexibilidad de las aplicaciones web junto con el rendimiento y las capacidades de las aplicaciones nativas.
Se optó por una estructura en la que cada aplicación era un nuevo proyecto de Ionic, pero todos estaban agrupados bajo un mismo directorio y referenciados conjuntamente en el archivo ionic.config.json. Esta estructura organizativa permitió centralizar la gestión de las aplicaciones, facilitando su mantenimiento y actualización.
Mantener un único repositorio conteniendo múltiples aplicaciones fue clave para la eficiencia del desarrollo. Este repositorio común permite aplicar cambios y actualizaciones a todas las aplicaciones de manera simultánea, asegurando consistencia y reduciendo el esfuerzo de mantenimiento.
Cada aplicación, aunque funcional e independiente, comparte un conjunto común de componentes y servicios. Estos componentes comunes incluyen elementos de la interfaz de usuario, funciones de autenticación, manejo de notificaciones y servicios de datos.
La reutilización de estos componentes comunes no solo ahorra tiempo en el desarrollo, sino que también garantiza una experiencia de usuario uniforme en todas las aplicaciones. Además, cualquier mejora o corrección realizada en estos componentes se propaga automáticamente a todas las aplicaciones, mejorando la eficiencia y la calidad general del proyecto.
Para gestionar la personalización y la independencia de cada aplicación, se implementaron configuraciones específicas en archivos separados. Cada aplicación tiene su propio archivo de configuración que define los parámetros particulares como el esquema de colores, logotipos, nombres y otras personalizaciones. Estos archivos de configuración se cargan dinámicamente durante el proceso de construcción de la aplicación, permitiendo ajustes individuales sin afectar a las demás aplicaciones.
El uso de Ionic y Angular también facilitó la integración con diversas APIs y servicios externos. Las aplicaciones pueden conectarse a servicios de noticias, bases de datos de usuarios y plataformas de publicidad, entre otros, mediante configuraciones específicas. Esta flexibilidad permite a cada aplicación ofrecer contenido y servicios personalizados según las necesidades del periódico regional correspondiente.
Además, se implementaron prácticas de desarrollo ágil y DevOps para acelerar el ciclo de vida del desarrollo de software. Utilizando herramientas de integración continua y despliegue continuo (CI/CD), los desarrolladores pueden automatizar pruebas, compilaciones y despliegues, garantizando que cada aplicación esté siempre actualizada y libre de errores.
Este enfoque también facilita la implementación rápida de nuevas funcionalidades y mejoras, adaptándose a las cambiantes demandas del mercado y de los usuarios.
La creación de una biblioteca de componentes comunes
Para maximizar la reutilización del código y simplificar el mantenimiento y las actualizaciones, se creó una biblioteca de componentes en Angular. Esta biblioteca agrupaba componentes, páginas, servicios y directivas que se importaban según las necesidades de cada proyecto individual.
La biblioteca se estructuró en módulos principales que incluían componentes visuales reutilizables, como botones, formularios y elementos de navegación, servicios que gestionaban la lógica de negocio y las interacciones con APIs externas, y directivas y utilidades que facilitaban tareas comunes en el desarrollo.
Al centralizar estos elementos, se garantizó una apariencia y comportamiento consistentes en todas las aplicaciones, y cualquier mejora en estos componentes se reflejaba instantáneamente en todas las aplicaciones que los utilizaban, eliminando la necesidad de actualizaciones individuales.
Las rutas de acceso a estos componentes se definían en archivos raíz de Ionic, asegurando que los módulos fueran fácilmente accesibles y reduciendo la redundancia. Cada proyecto de aplicación importaba solo los módulos necesarios, optimizando el rendimiento y manteniendo el tamaño de la aplicación bajo control.
Esta modularidad también facilitaba el desarrollo de nuevas aplicaciones, ya que los desarrolladores podían rápidamente ensamblar una nueva aplicación a partir de componentes preexistentes.
El uso de una biblioteca común simplificó el mantenimiento y las actualizaciones. Cuando se requería una actualización, como una mejora en un componente de UI o un ajuste en un servicio, los cambios se realizaban en la biblioteca y se propagaban automáticamente a todas las aplicaciones que utilizaban esos componentes. Esto no solo ahorraba tiempo, sino que también garantizaba que todas las aplicaciones permanecieran actualizadas y coherentes en términos de funcionalidad y diseño.
Aunque los componentes eran compartidos, se mantuvo la flexibilidad para personalizar cada aplicación según las necesidades específicas de cada periódico. Los desarrolladores podían extender y modificar los componentes de la biblioteca para adaptarlos a requisitos particulares sin afectar a las otras aplicaciones. Esto se lograba mediante la herencia y la sobreescritura de estilos y funcionalidades específicas en los archivos de configuración individuales de cada aplicación.
Para facilitar el uso de la biblioteca, se creó una documentación detallada que explicaba cómo integrar y utilizar cada componente, servicio y directiva. Esta documentación incluía ejemplos prácticos y mejores prácticas, ayudando a los desarrolladores a aprovechar al máximo la biblioteca. Además, se estableció un sistema de soporte y colaboración, donde los desarrolladores podían compartir sus experiencias, reportar problemas y contribuir a la mejora continua de la biblioteca.
La estructura de las aplicaciones
Cada aplicación mantenía páginas con el contenido mínimo necesario, integrando las páginas de la biblioteca de componentes y pasando parámetros específicos según los requerimientos de cada periódico regional.
Esta arquitectura resolvía el problema de la similitud entre aplicaciones, que generalmente sólo difieren en contenido y logos, y permitía adaptaciones para los diferentes tipos de periódicos (nacionales, regionales y deportivos).
La estructura modular de las aplicaciones también permitía la fácil integración de nuevas funcionalidades.
Los desarrolladores podían agregar nuevas características a la biblioteca de componentes y hacerlas disponibles para todas las aplicaciones con mínimas modificaciones. Esto no solo aceleraba el proceso de desarrollo, sino que también aseguraba que todas las aplicaciones se mantuvieran actualizadas con las últimas mejoras y funcionalidades.
La expansión y diversificación de la biblioteca de componentes
En una segunda fase de desarrollo, la biblioteca de componentes se expandió para incluir una división más compleja de módulos.
Esto permitió una mejor optimización y personalización, permitiendo que cada aplicación cargara únicamente los componentes necesarios para su funcionamiento específico. La división de la biblioteca en módulos más pequeños y especializados mejoró significativamente la eficiencia y la gestión de los recursos.
Los nuevos módulos se diseñaron para abarcar áreas funcionales específicas, como manejo de usuarios, integración de noticias, y gestión de notificaciones.
Esta modularización no solo optimizó el rendimiento de cada aplicación al reducir la carga innecesaria de componentes, sino que también facilitó el mantenimiento y la actualización de las funcionalidades específicas. Cada módulo podía ser desarrollado, probado y actualizado de manera independiente, sin afectar a los demás módulos ni a las aplicaciones que no dependían de ellos.
Además, esta diversificación permitió una mayor flexibilidad en la personalización de las aplicaciones. Los desarrolladores podían seleccionar y combinar módulos según las necesidades específicas de cada periódico, adaptando la funcionalidad y el contenido a los requisitos particulares de cada cliente.
Esta estrategia también facilitó la expansión futura, permitiendo la incorporación de nuevos módulos sin necesidad de reestructurar la biblioteca existente.
La automatización del despliegue
El último gran desafío era el despliegue eficiente de todas estas aplicaciones tanto en las tiendas de aplicaciones Android e iOS como en entornos de preproducción. Para ello, se desarrolló un script en shellscript que automatizaba los comandos necesarios para construir las aplicaciones, sincronizarlas con el código nativo de cada plataforma, generar los bundles, firmarlos y subirlos a las tiendas de aplicaciones. Este proceso no solo optimizaba el tiempo, sino que también minimizaba los errores humanos en un proceso tan repetitivo.
Este caso muestra claramente cómo las tecnologías híbridas y las estrategias de desarrollo modular pueden ser utilizadas para crear soluciones escalables y eficientes en el desarrollo de aplicaciones móviles.
La reutilización de componentes y la automatización de procesos son clave para gestionar múltiples aplicaciones, permitiendo a los desarrolladores y empresas adaptarse rápidamente a las necesidades cambiantes del mercado sin comprometer la calidad o la funcionalidad de las aplicaciones.
Alberto Valverde
Team Leader