Desarrollo de una aplicación móvil utilizando el framework MEAN Stack e IONIC: Un estudio de caso en una compañía de transporte

Mobile App development using the MEAN Stack and IONIC framework: A case study in a transport company

Ecuadorian Science Journal

GDEON, Ecuador

ISSN-e: 2602-8077

Periodicidad: Semestral

vol. 4, núm. 2, 2020

esj@gdeon.org

Recepción: 26 Junio 2020

Aprobación: 22 Agosto 2020

URL: http://portal.amelica.org/ameli/jatsRepo/606/6062588019/index.html

DOI: https://doi.org/10.46480/esj.4.2.74

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial 4.0 Internacional.

Como citar: : Choto Maza, J. D., Avila-Pesantez, D., & Avila Pesantez, L. M. (2020). Mobile App development using the MEAN Stack and IONIC framework: A case study in a transport company. Ecuadorian Science Journal, 4(2), 37-42. DOI: https://doi.org/10.46480/esj.4.2.74

Hoy en día el auge de las aplicaciones móviles está orientada a la innovación tecnológica y brindar soluciones eficaces relacionados a la experiencia del usuario. Esto conlleva al uso del teléfono inteligente en la vida cotidiana del ser humano actual para realizar actividades, además de la variedad y funcionalidades que ofrecen las aplicaciones móviles (Falaki et al., 2010).

Con este antecedente, la compañía de transportes pesado "Torres Revelo S.A" dedicada al transporte de carga por carretera, requiere un sistema móvil para la gestión de rutas para los transportistas, debido a que cada destino puede tener varias opciones de llegadas, y es necesario proporcionar una herramienta para seleccionar y trazar la ruta más corta, utilizando una de las opciones de navegación (GPS, acelerómetro, giroscopio, entre otros) que poseen los teléfonos inteligentes (Nicoară & Haidu, 2014; Bajaj, Ranaweera, & Agrawal, 2002) .

El desarrollo de una aplicación móvil hace uso de la tecnología MEAN Stack, la cual está basada en Java, con conexión a la base de datos no relacional MongoDB. Para la interacción entre el servidor y el cliente se utiliza Node.js y Express.js, por último, para las aplicaciones web por parte del usuario se seleccionó Angular (Karanjit, 2016). En este mismo ámbito, para el desarrollo de la aplicación móvil en la plataforma Android se optó por el framework Ionic (Yusuf, 2016). La metodología SCRUM permitió la gestión del sistema, mediante sus diferentes etapas. Utiliza periodos de tiempo para los entregables (Sprint), en el cual el cliente está inmerso y forma parte fundamental del análisis de los requerimientos (Salazar et al., 2018).

El artículo está estructurado de la siguiente manera: comienza a detallar información relacionada con la metodología SCRUM y la definición de las herramientas utilizadas para el desarrollo de la aplicación móvil. La sección 2 describe el marco teórico, detallando la tecnología para el front-end y el back-end. Además, de las métricas a ser evaluadas de la norma ISO/IEC 25. En la sección 3 se especifica los materiales y métodos, el mismo que detalla las etapas para el desarrollo del proyecto y el análisis estadístico de los resultados obtenidos. Finalmente, se presenta las conclusiones del artículo.

Marco Teórico

Es un hecho real que las aplicaciones para los dispositivos móviles en los últimos años se han popularizado, básicamente en el rastreo de la ubicación del dispositivo. Por lo que los desarrolladores basan sus servicios en el uso del GPS para brindar varias herramientas para permitir al usuario administrar el uso de la geolocalización (Vaughan-Nichols, 2009). El uso de los servicios de Google APIs proporciona ventajas, cuando se sabe la ubicación de un dispositivo como es brindar lugares cercanos, el tráfico, rutas, en otras funcionalidades (Singhal & Shukla, 2012).

Los servicios de ubicación brindan una solución mediante el uso de GPS, que se integran en los teléfonos inteligentes. Estos envían información, por la cual se complementa con la red del dispositivo móvil 3G y 4G para realizar esta operación con más rapidez y sin que el usuario espere demasiado para obtener los resultados deseados (Chandra & Qadeer, 2011). Las aplicaciones móviles son escritas y ejecutadas en varios ambientes, respetando las mejores prácticas de la programación (El-Kassas et al., 2017; McIlroy et al., 2016). Por consiguiente, se adaptan a los nuevos dispositivos que han estado en constante evolución y permiten al usuario tener una experiencia, sin hacer notar estos cambios significativos del sistema desarrollado (Hassan et al., 2018; Sauro & Lewis, 2016). Varias opciones tecnológicas se encuentran disponibles para la implementación de la aplicación móvil, que se describen en la Tabla 1.

Back-End

El entorno de desarrollo MEAN Stack trabaja con lenguaje de programación JavaScript, permitiendo interactuar con sus diferentes componentes, tanto en lado del cliente y el servidor (Bharath & Dey, 2018). El formato JSON es ampliamente utilizado para enviar y recibir datos, derivando un uso sencillo del aplicativo. MEAN Stack se fundamenta de las siguientes tecnologías: MongoDB base de datos, Express como el framework del lado del servidor, AngularJS framework por parte del cliente y finalmente Node.js el entorno por parte del servidor. Por lo cual, todos estos elementos tienen en común el lenguaje de programación, haciendo hincapié del desarrollo en el menor tiempo posible (Heredia & Sailema, 2018).

Front-End

Ionic: Es una herramienta open source, la cual permite el desarrollo de aplicaciones móviles híbridas, complementando el trabajo con angular. Además, este framework utiliza herramientas como JavaScript, HTML y SCSS para la implementación de la parte gráfica del usuario, el soporte brindado se encuentra en constante evolución y la respuesta rápida de la corrección de errores. Mediante el uso del framework Cordova se puede acceder a opciones nativas del teléfono inteligente, para el desarrollo de algoritmos o código para su funcionamiento (Nevalainen, 2018).

Tabla 1.
Tabla comparativa de los framework basada en (Heredia & Sailema, 2018; Nevalainen, 2018; Huynh et al., 2017; Flanagan, 2006; Huenei IT Services, 2017)

De acuerdo con los trabajos de (Enciso-Quispe et al., 2017; García, 2016; Wang et al., 2017) se comparan los diferentes framework para el desarrollo de aplicaciones móviles (ver Tabla 2) y de acuerdo con los resultados, se optó por la elección del framework Ionic en este estudio.

Tabla 2.
Tabla comparativa de los framework

AngularJS: Basado en módulos (Elrom, 2016), este framework trabaja exclusivamente en la parte del cliente básicamente en el front-end. Esto permite realizar código y es eficaz para realizar CRUD de cualquier aplicación, ya que trabaja por separado, con la posibilidad de analizar o reutilizar el código escrito. La aplicación web se considera multiplataforma por la ejecución en distintos dispositivos, sin tomar en cuenta su sistema operativo, solo con la posibilidad de ejecutarse en base al navegador y la disponibilidad al acceso a internet (Ramos & Ramos, 2019). Es por ello, que la información que se maneja o se encuentra en exposición es catalogada síncrona para todo aquel que consuma los servicios web.

Norma ISO/IEC 25010

Es un modelo de calidad en uso, enfocado en trabajar y utilizar las propiedades que brinda el sistema directamente con el cliente, esto hace notar que el cliente manipula el programa (Ouhbi et al., 2015). Por otro lado, se encuentra el producto en su característica principal que es la calidad, para esto existen subcaracterísticas que permiten medir y por la cual se pueden sacar conclusiones dependiendo de los resultados. La norma ISO/IEC 25010 reemplazó a ISO/IEC 9126.

Usabilidad: Es capacidad de utilizar algún servicio o realizar una tarea de una forma básica, es por ello por lo que la facilidad y sencillez debe estar impresa como mecanismo de ayuda para el usuario. El acceso debe ser ilimitado para explorar todo el contenido al igual que las guías para llevar a cabo una tarea determinada.

En el desarrollo del proyecto, se basa completamente en el uso de la metodología ágil SCRUM por lo que se divide en las siguientes fases:

Product backlog: se encuentra listadas las historias de usuarios (HU) para dar cumplimiento a las especificaciones del proyecto, las cuales han sido recopiladas a través de reuniones con el cliente. Además, permitió establecer los módulos a ser desarrollados. Para estimar las historias de usuario, fue necesario utilizar la técnica ¨T-Shirt Poker Cards¨, la cual se basa en las tallas de las camisetas dando como resultado las siguientes siglas: XL, L, M, S, XS. Por lo que, cada punto estimado está comprendido en una hora de trabajo del desarrollador, en la Tabla 3 se muestra los valores.

Sprint Backlog: En el proyecto se han definido 9 Sprint compuesto por 23 HU y 9 historias técnicas. Para cada entregable se estableció un lapso de dos semanas para el desarrollo de la aplicación móvil informativa de rutas para la compañía, desglosado de la siguiente manera: una semana de trabajo tiene un total de 40 horas del mismo modo están relacionadas con los puntos estimados.

Tabla 3.
Valores de la técnica T-Shirt Poker Cards

Producto Final: En esta fase, se culmina cuando todos los requerimientos han sido completados utilizando el proceso de SCRUM, por lo cual se muestra el producto final. Es primordial, que terminado el desarrollo de la aplicación móvil es necesario firmar con el uso de Android Studio (Chellappa, 2017) y así permitir el uso de la aplicación en un dispositivo Android sin restricciones. Además, esto permite subirle a una tienda de aplicaciones. La interfaz de usuario permite la interacción de las funcionalidades de la aplicación y móvil, que se visualiza en la Figura 1 y Figura 2.

Tabulación de datos

La encuesta aplicada evalúa cada subcaracterística de la norma ISO/IEC 25 010: Integridad, Aprendizaje, Operabilidad, Protección frente a errores de usuario, Estética y Accesibilidad. Las opciones de respuesta son cumple, no cumple y no aplica. Mostrada en las siguientes Tablas 4,5,6,7,8,9

Figura 1.
se muestra la pantalla principal de la aplicación móvil dedicada al cliente, en la cual se muestra el acceso rápido a las publicaciones, notificaciones, ayuda, documentos, etc. El cliente puede registrar una nueva publicación con el horario de entrega especificado.

Figura 2
se visualiza la pantalla principal del transportista, la cual permite trazar una ruta hacia un cliente o varios. Además, puede establecer comunicación con el cliente por medio del chat y ver las publicaciones realizadas.

Integridad

Tabla 4.
Tabulación de las preguntas referentes a la subcaracterística de integridad

Aprendizaje

Tabla 5.
Tabulación de las preguntas referentes a la subcaracterística de aprendizaje

Operabilidad

Tabla 6.
Tabulación de las preguntas referentes a la subcaracterística de operabilidad

Protección frente a errores de usuario

Tabla 7.
Tabulación de las preguntas referentes a la subcaracterística de protección frente a errores de usuario

Estética

Tabla 8.
Tabulación de las preguntas referentes a la subcaracterística de estética

Accesibilidad

Tabla 9.
Tabulación de las preguntas referentes a la subcaracterística de accesibilidad

Realizado el proceso de recopilación de resultados, se procedió a aplicar la técnica de Chi Cuadrado. Para demostrar todo el proceso realizado, se planteó dos tipos de hipótesis, descritas a continuación:

Hipótesis nula: Los usuarios establecen que la aplicación móvil y web tiene inconvenientes para utilizar sus diferentes funcionalidades incorporadas, para la compañía de transporte pesado Torres Revelo S.A.

Hipótesis alternativa: Los usuarios establecen que la aplicación móvil y web es fácil de utilizar sus diferentes funcionalidades incorporadas, para la compañía de transporte pesado Torres Revelo S.A.

Con un nivel de significancia e α=0,05, el resultado del chi de la tabla es de 18,3100. Por tanto, el valor de 19,5533 > 18,3100, se acepta la hipótesis alternativa y la hipótesis nula es rechazada. Consecuentemente, los usuarios encuestados califican a la aplicación móvil y web de la compañía de transporte como usable en cuanto a: Integridad, Aprendizaje, Operabilidad, Protección frente a errores de usuario, Estética y Accesibilidad (ver figura 4).

Figura 4.
Se muestra los valores de Chi Cuadrado para la demostración de la hipótesis

El framework MEAN Stack y el framework IONIC permitieron el desarrollo del proyecto, trabajando con una base de datos no relacional y el diseño sensible de la interfaz gráfica, mediante el uso de con Bootstrap. Además, se utilizó el servicio de Google Maps, para indicar la ruta más corta hacia el punto destino y el horario de entrega del cliente, y manejo de mensajería online para la comunicación cliente-transportista. Se aplicó la técnica de Chi Cuadrado, obteniendo un resultado de 19,533, el cual es mayor al valor critico 18,3100, utilizando un nivel de significancia de 0,05 y 10 grados de libertad. Con estos resultados se concluye que los usuarios están de acuerdo que la aplicación móvil y web administrativa es fácil de usar para la gestión de procesos de la compañía de trasporte.

Como citar: : Choto Maza, J. D., Avila-Pesantez, D., & Avila Pesantez, L. M. (2020). Mobile App development using the MEAN Stack and IONIC framework: A case study in a transport company. Ecuadorian Science Journal, 4(2), 37-42. DOI: https://doi.org/10.46480/esj.4.2.74