Revista Científica Ciencia y Tecnología Vol 21 No 31 gs. 5-16
http://cienciaytecnologia.uteg.edu.ec
Aplicación Web progresiva para la adopción de mascotas
empleando la tecnología Angular-Ionic & CodeIgniter
Progressive Web application for the adoption of pets using
Angular-Ionic & CodeIgniter technology
Danny Usca Farinango
1
danny.usca@espoch.edu.ec
https://orcid.org/0000-0001-5332-0065
Diego Avila-Pesantez
2
davila@espoch.edu.ec
https://orcid.org/0000-0001-8394-5621
George Figueras Benitez
3
genriquef@usb.ve
https://orcid.org/0000-0001-8693-1217
Raúl Rosero Miranda
4
raul.rosero@espoch.edu.ec
https://orcid.org/0000-0002-2315-9773
Recibido: 07/04/2021, Aceptado: 20/06/2021
Resumen
En la actualidad, una aplicación web progresiva permite la ejecución de su código
en cualquier navegador compatible con los estándares de universalidad. En este
sentido, este trabajo desarrolla una aplicación multiplataforma dedicada a la
adopción y rescate de mascotas para la corporación “LADRA”. En el desarrollo del
aplicativo web y móvil se aplicó la metodología ágil SCRUM con ayuda de los
frameworks Angular-Ionic y CodeIgniter basados en TypeScript y PHP
respectivamente. Además, de un plan de pruebas definido en TestLink, que
garantizó la creación de un software eficiente. Para evaluar la calidad del producto
software se utilizó la métrica de Usabilidad, definida en la norma ISO/IEC 25010,
aplicando una encuesta basada en el cuestionario USE de Arnold Lund; logrando
medir las subcaracterísticas de inteligibilidad, operabilidad y estética. Al realizar
un análisis descriptivo e inferencial se obtuvo valores positivos en la medición,
dando como resultado que el aplicativo web tiene una interfaz agradable, útil,
cil de usar, satisface los requerimientos funcionales planteados y ahorra tiempo
de proceso, siendo más productivos.
___________________
1
Ingeniero de Sistemas Informáticos Escuela Superior Politécnica de Chimborazo. Facultad de
Informática y Electrónica, Riobamba, Ecuador.
2
Profesor Principal. Escuela Superior Politécnica de Chimborazo. Facultad de Informática y
Electrónica, Riobamba, Ecuador.
3
Profesor instructor. Universidad Simón Bolívar. Facultad de Electrónica. Caracas, Venezuela.
4
Profesor Principal. Escuela Superior Politécnica de Chimborazo. Facultad de Informática y
Electrónica, Riobamba, Ecuador.
Palabras clave: Ingeniería de Software, Aplicación web progresiva, LADRA,
Usabilidad, TestLink.
&
Revista Ciencia & Tecnología
No. 31, 31 de julio de 2021
ISSN impreso: 1390 - 6321
ISSN online: 2661 - 6734
Usca, Ávila-Pesantez, Figueras, Rosero. Aplicación Web progresiva para la adopción de
mascotas empleando la tecnología Angular-Ionic & CodeIgniter
Introducción
La forma exponencial como va creciendo la tecnología, hace que la sociedad
comience a depender más de ella, y la acople en su diario vivir como una
herramienta importante, para realizar sus diferentes actividades cotidianas
(Rodríguez, 2017). Específicamente el uso de plataformas web y móviles son
utilizadas para la mayoría de las actividades diarias, desde acceder a
entretenimiento, estudio, noticias, libros, comercio electrónico hasta usarlas
como herramientas indispensables para facilitar el trabajo (Jaimez-González,
2017). En la actualidad se puede observar varias plataformas web y móviles
destinadas a la búsqueda y adopción de mascotas (ANIPAL, 2018; PetLife, 2018).
Sin embargo, los aplicativos no están centralizados en brindar una solución
integral utilizando herramientas mediante redes sociales.
La finalidad de la plataforma web y móvil denominada “LADRA” (Legión Activista
por la Defensa y Respeto Animal) es compartir publicaciones de mascotas (perros
y gatos) que se encuentren extraviadas, en adopciones o rescate en la ciudad de
Riobamba, Ecuador. Para el desarrollo de dicho aplicativo se utilizó la metodología
ágil SCRUM, que brinda un ambiente de buenas prácticas y garantiza mejores
resultados. Conjuntamente, se utilizaron los frameworks Angular-Ionic,
CodeIgniter, el gestor de base de datos MySQL y un plan de pruebas definido en
TestLink. Finalmente, como parte del análisis de los resultados se utilizó el modelo
de Calidad del Producto Software (ISO/IEC 25010) para evaluar la Usabilidad de
la plataforma implementada.
A. Fundamentación
En las últimas décadas se han creado diferentes tipos de aplicaciones nativas,
híbridas, web progresiva, y de página única, en beneficio del usuario, que se
detallan en la Tabla 1. A continuación se describe las dos más importantes.
Aplicaciones Web Progresiva (PWA) es similar a una aplicación web, que pueden
ejecutarse en cualquier plataforma y dispositivos móviles (Tandel, Jamadar, &
Technology, 2018). Además, una PWA tiene aspectos importantes que resaltan
su uso, como el tamaño de instalación, tiempo de inicio y tiempo de renderizado
de la barra de herramientas (Sheppard & Sheppard, 2017). Por otro lado, las
Aplicaciones de Página Única (SPA) se establece dentro de las aplicaciones web,
por lo que carga todos los recursos necesarios y no vuelve a actualizar la página
mientras este en uso. El trabajo de todo este proceso se lo atribuye al navegador,
por lo que utiliza el internet para su conexión y el servidor para almacenar
información 6WHIDQRYLü.
Para el óptimo desarrollo de este trabajo se ha seleccionado el uso de una
aplicación web progresiva en la parte de desarrollo móvil, y una aplicación de
página única para el aplicativo Web. En la tabla 1 se visualiza una comparativa
de las principales aplicaciones.
Servicios Web RESTFUL - BackEnd
Contar con una correcta comunicación entre el FrontEnd y Backend es crucial al
momento de desarrollar un aplicativo web o móvil, y es considerada como una
pieza fundamental para seleccionar un framework.
6
&
Revista Ciencia & Tecnología
No. 31, 31 de julio de 2021
ISSN impreso: 1390 - 6321
ISSN online: 2661 - 6734
Revista Científica Ciencia y Tecnología Vol 21 No 31 págs. 5-16
http://cienciaytecnologia.uteg.edu.ec
En este trabajo se escogió CodeIgniter, ya que contiene un núcleo potente y
sencillo desarrollado para el lenguaje de programación PHP. Esto permite crear
aplicaciones usando la arquitectura Modelo Vista Controlador (CodeIgniter, 2017).
Una de sus características principales es su amplia gama de librerías, debido a
ello lo hace ideal para configurar un servidor web RESTFUL en cuestión de minutos
a diferencia de otros frameworks basados en PHP (Sidik, 2018). En comparación
con otros frameworks para desarrollo de servicios web RESTFUL (ver Tabla 2),
CodeIgniter cuenta con características positivas para la creación de un Backend
potente.
Tabla 1. Características principales de las aplicaciones informáticas
Características
Tipo de aplicación
Nativa
Híbrida
Web
PWA
SPA
Presencia en
tienda de
aplicaciones
Si Si No No No
Velocidad Muy rápida Rápida Rápida
Muy
rápida
Muy
rápida
Tamaño Pesada Pesada
Poco
pesada
Ligera Ligera
Disponible offline
Si
Si
No
Si
No
Interfaz de usuario
Buena
Buena
Regular
Buena
Buena
Multiplataforma
No
Si
Si
Si
Si
Posicionamiento
SEO (Search
Engine
Optimization)
No No Si Si Si
Fuente: Jobe, 2013
Frameworks para FrontEnd
Angular es un framework de código abierto, que permite construir aplicaciones
SPA mediante el modelo vista controlador (MVC) (Griffith, 2017). Además, Angular
crea aplicaciones en el FrontEnd y brinda una experiencia de usuario excelente,
utilizando bibliotecas basadas en JavaScript, y posee la división de código para
efectuar una reutilización de objetos (Fain & Moiseev, 2017). Por otro lado, Ionic
está basado en HTML5, CSS, JavaScript para crear aplicaciones multiplataformas,
móviles, progresivas e hibridas, que brindan una experiencia similar a una
aplicación móvil nativa. Además, proporciona el desarrollo de interfaces y
aplicaciones complejas en un corto de tiempo reducido. En la tabla 3 se resalta
sus características.
7
&
Revista Ciencia & Tecnología
No. 31, 31 de julio de 2021
ISSN impreso: 1390 - 6321
ISSN online: 2661 - 6734
Usca, Ávila-Pesantez, Figueras, Rosero. Aplicación Web progresiva para la adopción de
mascotas empleando la tecnología Angular-Ionic & CodeIgniter
Tabla 2. Comparativa entre frameworks para desarrollo de servicios web RESTFUL
Características
Framework
Symfony
CodeIgniter
Documentación
Amplia
Amplia
Curva de aprendizaje
Media
Baja
Flexibilidad
Si
Si
Escalabilidad
Si
Si
Seguridad Integrada
No
Si
Arquitectura MVC
Si
Si
Ideal para pequeños
proyectos
No No Si
Fuente (Laaziri, Benmoussa, Khoulji, & Kerkeb, 2019)
Tabla 3. Comparativa entre frameworks para desarrollo
Característica
Framework
React Native
Flutter
Xamarin
Angular-Ionic
Curva de
aprendizaje
Media Alta Alta Media
Documentació
n
Amplia Poca Amplia Muy amplia
Comunidad
Media
Baja
Media
Alta
Reusabilidad
de código
Hasta un 90%
De 50% al
90%
Hasta un 96% Hasta un 98%
Rendimiento
móvil
Bueno Bueno Bueno Muy bueno
Rendimiento
web
Muy bueno Pobre Bueno Excelente
Precio Código abierto
Código
abierto
Código abierto Código abierto
Fuente: Isitan Koklu, 2017
ISO/IEC 25010
La Norma ISO/IEC 25010 (SQuaRE - Requisitos y evaluación de la calidad del
software y del sistema) es un modelo para la evaluación de la calidad del producto
software. Se maneja a través de características para evaluar las propiedades y los
requisitos de los usuarios (Calabrese et al., 2017). La Usabilidad es la medida en
8
&
Revista Ciencia & Tecnología
No. 31, 31 de julio de 2021
ISSN impreso: 1390 - 6321
ISSN online: 2661 - 6734
Revista Científica Ciencia y Tecnología Vol 21 No 31 págs. 5-16
http://cienciaytecnologia.uteg.edu.ec
que un producto pude ser utilizado por usuarios específicos para lograr objetivos
con eficacia, eficiencia y satisfacción (Speicher, 2015).
TestLink
TestLink es una herramienta que permite crear y gestionar casos de pruebas
basado en la web y posee una licencia Open Source. Por medio de los planes de
prueba permite al grupo de trabajo ejecutar casos de test y registrarlos
dinámicamente, de la misma manera genera informes y mantiene el objetivo de
los requerimientos. Además, permite la gestión de actividades o proyectos de
testing con la integración de herramientas como: bugtrakers, JIRA, entre otras
(Cortés Pabón, 2020).
Materiales y métodos
Para el desarrollo del proyecto se utilizó la metodología ágil SCRUM, el cual tiene
como base la creación de ciclos breves para el desarrollo, que comúnmente se
llaman iteraciones conocidos como Sprints. De esta manera se trabajó
directamente con el cliente y los entregables pasaron por un plan de pruebas
mediante el uso del software TestLink. Dentro de la metodología ágil se ha definido
las siguientes fases.
Product Backlog: Mediante reuniones mantenidas con personal que labora en la
Corporación LADRA, se logró recabar información, que fue la recolección de los
requerimientos, que fueron definidas en las historias de usuario (HU). Para dar
valor de prioridad a las HU se asignan puntos de estimación, utilizando la técnica
T-Shirt (ver Tabla 4) para la estimación de tiempos en el desarrollo de cada HU.
Tabla 4. Puntos estimados T-Shirt
Talla
Puntos Estimados
Horas-Trabajo
XS
5
5
S
10
10
M
12
12
L
20
20
XL
40
40
Fuente: elaboración propia
Sprint Backlog: En el proyecto se obtuvo un total de 37 HU y 8 historias técnicas
divididas en los diferentes sprints, contabilizando un total de 15 sprints y cada uno
tuvo un plazo de dos semanas para su entrega, trabajando un total de 40 horas
de trabajo.
Desarrollo: Básicamente en esta fase se codificó los requerimientos recolectados
para el desarrollo de la multiplataforma LADRA, además se definió la arquitectura
del sistema, estándar de codificación, el diseño de la base de datos e interfaces
de usuario y el plan de pruebas.
9
&
Revista Ciencia & Tecnología
No. 31, 31 de julio de 2021
ISSN impreso: 1390 - 6321
ISSN online: 2661 - 6734
Usca, Ávila-Pesantez, Figueras, Rosero. Aplicación Web progresiva para la adopción de
mascotas empleando la tecnología Angular-Ionic & CodeIgniter
La arquitectura del sistema propuesto está basada en la comunicación de los
componentes (web y móvil), se usa el patrón MVC (ver Figura 1) permitiendo
separar la interfaz de usuario, la lógica de negocio y el acceso a datos, para tener
ventajas en su desarrollo y estructura.
Sprint Backlog: En el proyecto se obtuvo un total de 37 HU y 8 historias técnicas
divididas en los diferentes sprints, contabilizando un total de 15 sprints y cada uno
tuvo un plazo de dos semanas para su entrega, trabajando un total de 40 horas
de trabajo.
Desarrollo: Básicamente en esta fase se codificó los requerimientos recolectados
para el desarrollo de la multiplataforma LADRA, además se definió la arquitectura
del sistema, estándar de codificación, el diseño de la base de datos e interfaces
de usuario y el plan de pruebas. La arquitectura del sistema propuesto está basada
en la comunicación de los componentes (web y móvil), se usa el patrón MVC (ver
Figura 1) permitiendo separar la interfaz de usuario, la lógica de negocio y el
acceso a datos, para tener ventajas en su desarrollo y estructura.
Figura 1. Arquitectura del sistema - Patrón MVC
El estándar de codificación para el desarrollo de los aplicativos fue
LowerCamelCase, obteniendo una consistencia en la definición de métodos,
atributos, variables, clases, entre otros. Esto facilitó la lectura de código y su
mantenimiento, bajo buenas prácticas de programación. Complementando esta
tarea, se diseñó de la base de datos (ver figura 2) enfocada en la persistencia de
los datos e información de los aplicativos web y móvil de la Corporación “LADRA”.
En este proyecto se utilizó MySQL, normalizada hasta la tercera forma normal
(3FN).
10
&
Revista Ciencia & Tecnología
No. 31, 31 de julio de 2021
ISSN impreso: 1390 - 6321
ISSN online: 2661 - 6734
Revista Científica Ciencia y Tecnología Vol 21 No 31 págs. 5-16
http://cienciaytecnologia.uteg.edu.ec
El diseño de las interfaces se realizó juntamente con el cliente, para llegar a un
producto final. En base al logotipo se obtuvo un diseño minimalista para las
diferentes pantallas. La maquetación se lo realizó con HTML basado en el sistema
de mallado (Grid) y SASS (Syntactically Awesome StyleSheets) para los estilos,
como se visualiza en la Figura 3 y Figura 4.
Mediante el uso de la herramienta TestLink se ejecutó un plan de pruebas y se
creó diferentes suites, con casos de pruebas para la codificación de un software
de calidad. De esta manera, se buscó cumplir el desarrollo de los requerimientos
al tener un valor positivo frente a la Norma IEC/ISO 25010 - Usabilidad. El éxito
o fracaso en la ejecución de un caso de prueba dependió de las precondiciones y
pasos asignados. Una vez ejecutado el caso de prueba se guarda la información
ingresada que generó un reporte (ver Figura 5), de esta manera se asegura dar
una solución rápida en caso de ser necesario para obtener un software eficiente.
Figura 2. Diseño físico de la base de datos
Fuente: elaboración propia
11
&
Revista Ciencia & Tecnología
No. 31, 31 de julio de 2021
ISSN impreso: 1390 - 6321
ISSN online: 2661 - 6734