Web And Mobile Applicati=
on Development In Real Time, An Evolution=
of Current Applications
Ing. Loarte Cajamarca Byron Gustavo, M=
Sc. [1],
Ing. Maldonado Soliz Ivonne Fernanda, M.Sc.[2]
Recibido: 12-10-2018 / Revisado: 27-1=
1-2018
/Aceptado: 14-12-2018/ Publicado: 05-01-2019
The necessary
exponential evolution in the development of web and mobile applications
produces new trends for companies to introduce and improve in them if they =
want
to keep in the viable market. That is why applications are currently the
instant response to any interaction, which in technology is known as Real t=
ime.
Real-time
communication systems have become more important because it is imperative t=
o be
more and more connected to instant messaging applications, collaborative to=
ols
in graphics editing, and even online video games of virtual reality. The
appearance of new tools for the development of these applications are the k=
ey
to raise a general description on the operational of systems and applicatio=
ns
in real time, rather than delve into each one of these aspects, which has b=
een
looking for is to offer the basic elements to have a wide vision of this ki=
nd
of applications, together with the development of a web and mobile applicat=
ion
with these new trends.
Keywords:
Resumen.
El irrevocable crecimiento exponencial=
del
desarrollo de aplicaciones web y móviles, provocan tendencia en que las
empresas deban implementarlas si quieren seguir siendo competitivos dentro =
del
mercado. Es por ello que actualmente las aplicaciones son la respuesta
inmediata a cualquier interacción, lo que en tecnología se conoce como Tiem=
po
Real.
Los sistemas de comunicación en tiempo
real han cobrado mayor importancia debido a que es imprescindible el estar =
cada
vez más conectados ya sea a aplicaciones de mensajería instantánea,
herramientas de colaboración en la edición de gráficos, y hasta videojuegos
online en realidad virtual. El surgimiento de nuevas herramientas para el
desarrollo de estas aplicaciones son la clave para plantear una descripción
general sobre el funcionamiento de los sistemas y aplicaciones en tiempo re=
al,
más que profundizar en cada uno de estos aspectos, lo que se ha buscado es
ofrecer los elementos básicos para tener una visión amplia de este tipo de
aplicaciones, conjuntamente con el desarrollo de una aplicación web y móvil=
con
estas nuevas tendencias.
Palabras claves:
Tiempo Real, Firebase, AngularJS, WebSocket, =
Ionic
Introducción
En la actualidad es común
ver en las PYMES diferentes tipos de aplicaciones ya sean de tipo: web,
escritorio y móviles; todas y cada una de ellas cumpliendo roles primordial=
es por
un lado mejorar la calidad de vida de las personas y por otra mejorar la ge=
stión
de la información en una organización.
Sin embargo, es por ello=
que
en los últimos años diversas empresas han apostado por remodelar esta gama =
de
aplicaciones para aprovecharse los beneficios que conlleva el uso y desarro=
llo
de aplicaciones en tiempo real y con ello ofrecer una amplia gama de produc=
tos
y servicios.
No obstante, aunque este
termino de tiempo real, parecería que está muy en boga en la actualidad, no=
es
para nada nuevo dentro de los conceptos de aplicaciones cliente/servidor que se ejecutan a través de internet, es por ello que es de vital importancia que cualquier persona que e=
sté
interesado en el desarrollo de estas aplicaciones conozcan los conceptos,
funcionamiento, arquitectura y herramientas.
Antes de entender el con=
cepto
de aplicaciones en tiempo real y todo lo que conlleva es de vital importanc=
ia
entender primeramente que son los Sistemas en tiempo real.
Un Sistema en tiempo rea=
l,
no son más que Sistemas Informáticos que permiten una interacción dinámica
entre los usuarios de dichos sistemas con el objetivo producir respuestas p=
recisas
dentro de unos límites de tiempo, esto supone que puedan enviarse respuestas
inmediatas a las solicitudes realizadas entre los usuarios.
En contra parte con
cualquier Sistemas Informáticos frente a uno de tiempo real, supone que este
último no solo va a depender del resultado lógico de la computación, sino q=
ue
además depende del tiempo en el que el resultado se produjo, es por ello que
una respuesta tardía es prácticamente una respuesta errónea". (Bennet,=
1993)
De la misma manera cabe
destacar que este tipo de Sistemas son utilizados en nuestra vida diaria por
citar algunos, por ejemplo: Sistema de Radar, Control de tráfico aéreo,
Servidores multimedia, Sistema de Satélite, Sistema de control y adquisició=
n de
datos, entre otros servicios que utilizamos diariamente.
Conociendo a breves rasg=
os
lo que implica un Sistema en tiempo real, ahora se da paso para comprender =
que
son las aplicaciones en tiempo real y del porque son indispensables en una =
era
tecnológica de constantes cambios.
Una aplicación en tiempo
real es un programa que nos permite establecer una comunicación bidireccion=
al, dinámica
y fluida, entre un servidor y los usuarios que tienen acceso a dicho servid=
or,
es por ello que el servidor no solo se encarga en procesar los datos relati=
vos
a la información que va a dar a los usuarios finales, sino que además tiene=
que
preocuparse de decidir con que usuario conectarse y cuándo hacerlo.
Un ejemplo claro en el c=
ual
se puede apreciar de mejor manera las principales ventajas que se tienen al
usar aplicaciones en tiempo real son las siguientes:
·&nb=
sp;
En este primer contexto es para las peticiones que se realizan a los
servidores, imaginémonos que 100.000 clientes de un servicio deciden hacer =
una
petición todos a la vez, aquí el servidor puede bloquearse por saturación de
tantas peticiones. Sin embargo, ahora sí son los servidores quienes se van a
encargar de gestionar las conexiones estas situaciones desaparecerían, ya q=
ue
el servidor va a tener la capacidad de distribuir de forma normal todas las
conexiones de forma que no haya problemas de saturación con las n peticione=
s de
los clientes como se mencionó anteriormente.
·&nb=
sp;
El siguiente ejemplo es algo obvio y es la instantaneidad de la
información, es por ello que, si las aplicaciones tienen que preguntar al
servidor normalmente lo hacen a intervalos. Los cuales se puede ir acumulan=
do
con el paso de tiempo y con ello obtener retardos bastante grandes. Ahora c=
on
aplicaciones en tiempo real, estos intervalos desaparecen y la información
llega con un retraso mínimo.
·&nb=
sp;
Finalmente, otra de las ventajas más considerables es la posibilidad =
de
generar menos tráfico de red, que pasa si un cliente esta verificado cada c=
inco
minutos si existen nuevos correos, cada cinco minutos va a estar generando
tráfico si existen o no mensajes nuevos; ocasionando que se genere bastante
tráfico inútil. Sin embargo, ahora si es el servidor es quien avisa al clie=
nte
de la existencia de un nuevo correo, ahora si es factible que se genere trá=
fico
útil cuando existan nuevos correos.
Como se puede apreciar en la actualidad la web tiende a ser un espacio
interactivo en el cual ahora todas las comunicaciones cliente-servidor deben
ser bidireccionales para que la información que se mueve sea en tiempo real=
. Es
por ello que en este apartado se citaran aquellas herramientas que dispone =
los
desarrolladores para atender estas nuevas necesidades.
Es importante mencionar que actualmente existen dos lados importantes
para la construcción de estas aplicaciones en tiempo real: por un lado, el
cliente (navegador web) y por otro lado el lado del servidor, el cual cuenta
con una amplia gama de lenguajes de programación como: ASP.NET, PHP, Python,
Ruby, Java etc. Mientras que del lado del cliente (navegador web) utiliza
tecnologías como HTML, CSS y JavaScript para su estructura, diseño y
programación.
De la misma manera como se mencionó anteriormente todas las aplicacio=
nes
en tiempo real son más bien aplicaciones bidireccionales, lo cual quiere de=
cir
que se puede enviar datos del cliente al servidor y de igual manera del
servidor al cliente; todo esto es posible con la utilizando WebSocket.
Según
Finalmente, con el constante crecimiento de las Tecnologías de la
Información y con una amplia gama de herramientas, patrones, frameworks y
metodologías para el desarrollo, ha permitido que las aplicaciones web se
vuelvan cada vez más indispensables para la gestión de la información en la=
s PYMES,
permitiendo a los usuarios acceder a datos y servicios a través de internet.
Para lo cual en el presente artículo se propone el desarrollo de una aplica=
ción
web en tiempo real abarcando todos los puntos citados anteriormente.
Metodologia.
Para el desarrollo de la
aplicación web se utilizará Scrum, ya que es una metodología ágil donde la
entrega de productos o servicios es primordial a fin de satisfacer los
requisitos del cliente en pequeños incrementos iterativos que sean entregab=
les
tan pronto sea posible
Sin embargo, esta
metodología dispone de artefactos importantes como el product Backlog compu=
esto
de una lista de tareas que llevan una descripción y estimación de esfuerzo =
y el
sprint backlog el cual es un subconjunto de los elementos seleccionados en =
el
product backlog.
Los artefactos mencionad=
os
anteriormente permitirán desarrollar el proyecto de manera organizada y en =
los
tiempos establecidos.
Cabe mencionar que cada =
uno
de los requerimientos de la aplicación web serán recopilados en base a una
serie de historias de usuario a fin de establecer la lista del product back=
log.
Cada uno de los requerimientos se ha distribuido en 3 iteraciones que se
detallan a continuación.
Primera Iteración
En esta iteración se
determina aquellas actividades que tiene que realizar los usuarios finales =
en
la aplicación web, como se ilustra en la tabla 1.
Tabla 1: Primera iteración: Identificación de usuario en=
la
aplicación web.
|
|
Tiempo Estim=
ado
(horas) |
|
Identificaci=
ón del
usuario en la aplicación web |
20 horas |
|
Registro de
usuarios en la aplicación web |
40 horas |
|
Visualizar
usuarios en la aplicación web |
30 horas |
|
Modificar us=
uarios
en la aplicación web |
40 horas |
|
Eliminar usu=
arios
en la aplicación web |
40 horas |
Elaborado por: Grupo de Investigadores=
.
Segunda Iteración
En esta iteración se
determina aquellas actividades relacionadas para la gestión de productos en=
la
aplicación web, como se ilustra en la tabla 2.
Tabla 2: Segunda iteración: Gesti=
ón
de productos en la aplicación web.
|
Enunciado de=
ítem
de product backlog |
Tiempo Estim=
ado
(horas) |
|
Registro de =
productos
en la aplicación web |
40 horas |
|
Visualizar
productos en la aplicación web |
30 horas |
|
Modificar
productos en la aplicación web |
40 horas |
|
Eliminar pro=
ductos
en la aplicación web |
40 horas |
Elaborado por: Grupo de Investigadores.=
Tercera Iteración
En esta iteración se
determina aquellas actividades relacionadas para la visualización de produc=
tos
en la aplicación móvil, como se ilustra en la tabla 3.
Tabla 3: Segunda iteración: Visualización de productos e=
n la
aplicación móvil.
|
Enunciado de=
ítem
de product backlog |
Tiempo Estim=
ado
(horas) |
|
Identificaci=
ón del
usuario en la aplicación móvil |
30 horas |
|
Visualizació=
n de
productos en la aplicación móvil |
30 horas |
Elaborado por: Grupo de Investigadores.=
Resultados.
Los resultados expresan =
como
se fue procedió con el desarrollo de la aplicación web y móvil, de la misma
manera se determina que herramientas se utilizaron, por ejemplo, para el
desarrollo de la aplicación web se utilizó Angular JS el cual, permite desa=
rrollar
aplicaciones basadas en el patrón de arquitectura modelo vista controlador
(MVC), cabe mencionar que su arquitectura se basa en JavaScript y HTML. Fin=
almente
cabe recalcar que este Framework es completamente extensible y funciona
adecuadamente con otras bibliotecas. Las características se pueden modifica=
r o
reemplazar para adaptarse a las necesidades del equipo de desarrollo
Mientras que para la
aplicación móvil se utilizó el framework Ionic, el cual facilita el desarro=
llo
de aplicaciones móviles hibridas basadas en HTML5, CSS3 y JS. No obstante, =
al
tener una arquitectura central robusta, posibilita el desarrollo de
aplicaciones de forma nativa para sistemas operativos con más demanda en el
mercado que son: iOS y Android, finalmente cabe mencionar que este framewor=
k se
encuentra optimizado con AngularJS
Por ultimo para el
almacenamiento de los datos y para que estos puedan ser accedidos en tiempo
real, se utilizó la plataforma Firebase, el cual dentro de su amplia gama de
servicio se utilizó Cloud Firestore, el cual permite mantener los datos
sincronizados en tiempo real que se almacenan en documentos, organizados en
colecciones y al ser un modelo de datos no relacional (NoSQL), admite cualq=
uier
estructura de datos
Creación de la base de datos en la plataforma Fire=
base.
En este apartado se proc=
ede
a la creación de la base de datos, para lo cual se requiere como paso previ=
o una
cuenta de Google, la cual permite crear un proyecto en la proforma https://=
firebase.google.com/.
Posterior a ello se procede con el inicio de sesión, se debe completar los
siguientes campos como se ilustra en la figura 1.
·&nb=
sp;
Seleccionar la opción para añadir proyecto
·&nb=
sp;
Ingresar el nombre del proyecto
·&nb=
sp;
Seleccionar la región
·&nb=
sp;
Aceptar los términos y condiciones
·&nb=
sp;
Presionar el botón crear proyecto
Figur=
a 1: Creación del proyecto en
Firebase.
Elaborado por: Grupo de Investigadores=
.
Posterior e ello al
seleccionar el tipo de almacenamiento que en este caso es Cloud Firestore, =
se procede
a establecer los respectivos elementos y atributos que van a conformar la r=
espectiva
base de datos, creando las colecciones y documentos correspondientes como se
puede ilustra en la figura 2.
Figura 2: Creación de colecciones=
en
Cloud Firestore.
Elaborado por: Grupo de Investigadores=
.
Una vez con la base de d=
atos
ya creada se procede con el desarrollo de la aplicación web, con el objetiv=
o de
cumplir cada uno de las iteraciones propuestas
=
1. Identificación del usuario en la aplicación web
Este módulo de la aplica=
ción
web será de uso exclusivo por el administrador, por ende, el usuario y las
credenciales de acceso estarán definidos por el grupo de investigadores, co=
mo
se ilustra en la figura 3.
Figura 3: Módulo de inicio de ses=
ión
del administrador.
Elaborado por: Grupo de Investigadores=
.
=
2. Registro de usuarios en la aplicación web
Este módulo está conform=
ado
por un formulario de registro para registrar a nuevos usuarios en la aplica=
ción
web, como se ilustra en la figura 4.
Figura 4: Registro de usuarios.
Elaborado por: Grupo de Investigadores=
.
=
3. Visualizar usuarios en la aplicación web
En este módulo una vez q=
ue
los usuarios ya están registrados en la base de datos se puede observar el
listado de usuarios en la aplicación web, como se ilustra en la figura 5.
Figura 5: Visualización de usuari=
os.
Elaborado por: Grupo de Investigadores=
.
=
4. Modificar usuarios en la aplicación web
Este módulo permite
actualizar toda la información de un usuario que ya se encuentre previamente
registrado en la aplicación web, de la misma manera al momento de actualiza=
r la
información el botón cambia de texto por actualizar datos, como se puede
ilustra en la figura 6
.
Elaborado por: Grupo de Investigadores=
.
=
5. Eliminar usuarios en la aplicación web
Finalmente, este módulo
permite eliminar un usuario registrado en la aplicación web, datos que tamb=
ién
serán eliminados automáticamente de la base de datos, como se ilustra en la
figura 7.
Figura 7: Eliminación de usuario.=
Elaborado por: Grupo de Investigadores=
.
A continuación, se proce=
de
con el desarrollo de siguiente iteración.
=
6. Registro de productos en la aplicación web
Este módulo está conform=
ado
por un formulario de registro, el cual permite registrar un nuevo producto =
en
la aplicación web, como se ilustra en la figura 8.
Figura 8: Registro de productos.<= o:p>
Elaborado por: Grupo de Investigadores=
.
=
7. Visualizar productos en la aplicación web
En este módulo una vez q=
ue
los productos ya están registrados en la base de datos se puede observar el
listado de nuevos productos en la aplicación web, como se ilustra en la fig=
ura
9.
Figura 9: Visualización de produc=
tos.
Elaborado por: Grupo de Investigadores=
.
=
8. Modificar productos en la aplicación web
Este módulo permite
actualizar toda la información de un producto que ya se encuentre previamen=
te
registrado en la aplicación web, de la misma manera al momento de actualiza=
r la
información el botón cambia de texto por actualizar datos, como se puede
ilustra en la figura 10.
Figura 10: Modificación de product=
o.
Elaborado por: Grupo de Investigadores=
.
=
9. Eliminar productos en la aplicación web
Finalmente, este módulo
permite eliminar un producto registrado en la aplicación web, datos que tam=
bién
serán eliminados automáticamente de la base de datos, como se ilustra en la
figura 11.
Figura 11: Eliminación de producto=
s.
Elaborado por: Grupo de Investigadores=
.
Finalmente, para dar por
concluido el desarrollo se procede a culminar las actividades de la tercera
iteración.
= 10. Identificación del usuario en la aplicación móvil<= o:p>
Todos los usuarios que
fueron registrados en la aplicación web pueden iniciar sesión automáticamen=
te
en la aplicación móvil para posterior a ello visualizar los productos
registrados, como se ilustra en la figura 12.
Figura 12: Inicio de sesión del
usuario.
Elaborado por: Grupo de Investigadores=
.
11. Visualización de productos en la aplicación móvil<= o:p>
Este módulo de la aplica= ción móvil permite visualizar los respectivos productos que están registrados de= sde la aplicación web, de la misma manera se puede apreciar que por cada produc= to se puede insertar una imagen respectiva, como se ilustra en la figura 13. <= o:p>
Figura 13:
Elaborado por: Grupo de Investigadores=
.
Pruebas de Aceptac=
ión
Finalmente, para comprob=
ar
que toda la funcionalidad tanto de la aplicación web como de la aplicación
cumplen se realizaron las perspectivas pruebas de aceptación. Es por ello q=
ue
continuación se presentan las pruebas de aceptación más relevantes como se
puede observar en las siguientes tablas.
Tabla 4: Prueba de aceptación:
gestión de usuarios en la aplicación web.
|
Prueba de aceptación |
|
|
|
|
|
Nombre prueba de aceptación: Gestión de usuarios e=
n la
aplicación web |
|
|
El usuario administrad=
or tendrá
la posibilidad de registrar, actualizar y eliminar usuarios |
|
|
Pasos de ejecución: Ingresar datos del usu=
ario. Presionar el botón Gua=
rdar
Información. |
|
|
Al ingresar toda la
información de los usuarios se debe visualizar toda la información en la
aplicación web. |
|
|
Evaluación de la prueba: Se visualizó el result=
ado
deseado. |
Elabo=
rado
por:
Grupo de Investigadores.
Tabla=
4: Prueba de aceptación:
gestión de productos en la aplicación web.
|
Prueba de aceptación |
|
|
|
|
|
Nombre prueba de aceptación: Gestión de productos =
en
la aplicación web |
|
|
El usuario administrad=
or
tendrá la posibilidad de registrar, actualizar y eliminar productos |
|
|
Pasos de ejecución: Ingresar datos del
producto. Presionar el botón Gua=
rdar
Información. |
|
|
Al ingresar toda la
información de los productos se debe visualizar toda la información en la
aplicación web. |
|
|
Evaluación de la prueba: Se visualizó el result=
ado
deseado. |
Elaborado por: Grupo de Investigadores=
.
Tabla 4: Prueba de aceptación: visualización de producto=
s en
la aplicación móvil.
|
Prueba de aceptación |
|
|
|
|
|
Nombre prueba de aceptación: Visualización de
productos en la aplicación móvil |
|
|
El usuario que acceda =
a la
aplicación móvil tendrá la posibilidad de visualizar todos los productos =
que
están registrados en la aplicación web. |
|
|
Pasos de ejecución: Visualizar los datos d=
e los
productos. |
|
|
Al ingresar a la
aplicación móvil toda la información de los productos se deben visualizar=
. |
|
|
Evaluación de la prueba: Se visualizó el result=
ado
deseado. |
Elaborado por: Grupo de Investigadores=
.
Conclusiones.
·&nb=
sp;
La incorporación =
adecuada de herramientas
permitió que mientras se iba desarrollando de la aplicación web y móvil se =
pueda
evidenciar de mejor manera el funcionamiento de los datos en tiempo real, y
como la información se fue obteniendo de manera instantánea sin necesidad de
refrescar el navegador web.
·&nb=
sp;
Actualmente la plataforma Firebase cuenta con una amplia gama de
servicios. La incorporación de Cloud Firestore, permitió tener una base de
datos de datos en tiempo real manteniendo de esta manera los datos sincroni=
zados
entre apps cliente a través de agentes de escucha en tiempo real.
·&nb=
sp;
Firebase permitió guardar y sincronizar datos en la nube en tiempo re=
al y
a su vez ofreció la plataforma de administración unificada para gestionar la
aplicación de el mismo proyecto, sin salir de este de esta API.
·&nb=
sp;
Para el desarrollo de la aplicación web y móvil se elaboró con
metodología ágil SCRUM, la cual permite crear ciclos cortos de iteraciones o
sprints para poder alcanzar los objetivos planteados en el desarrollo del p=
royecto
y acortar el periodo de entrega.
·&nb=
sp;
El desarrollo aplicaciones web y móviles han evolucionado en muchos
sentidos en los últimos 10 años, y con ello las facilidades para programar
diversas aplicaciones complejas han aumentado considerablemente. Es por eso=
que
está en la mano de los programadores crear aplicaciones que expriman al máx=
imo
estas capacidades y que los principales beneficiados del manejo de informac=
ión
en tiempo real sean las empresas a futuro.
·&nb=
sp;
Hoy en día el desarrollo de aplicaciones web y móviles ha creciendo de
manera exponencial, debido a que facilitan a las personas estar en contacto=
y
consultar información en el momento que lo desean, superando la barrera de
distancia y convirtiéndose en la principal herramienta para estar conectado=
s.
Para citar el artículo indexado.
Loarte B.&, Maldonado I.
(2019). Desarrollo de una aplicaci=
ón web
y móvil en tiempo real, una evolución de las aplicaciones actuales. Revista electrónica Ciencia Digital 3(1),
201-216<=
/span>.
Recuperado desde: http://cienciadigital.org/revi=
stacienciadigital2/index.php/CienciaDigital/article/view/282/679
El artículo que se
publica es de exclusiva responsabilidad de los autores y no necesariamente
reflejan el pensamiento de la Revi=
sta
Ciencia Digital.
El
artículo queda en propiedad de la revista y, por tanto, su publicación parc=
ial
y/o total en otro medio tiene que ser autorizado por el director de la Revista Ciencia Digital.
[1] Universidad Escuela Politécnica
Nacional, Escuela de Formación de Tecnólogos, Quito, Ecuador, byron.loarteb@epn.edu.ec
[2] Universidad
Escuela Politécnica Nacional, Escuela de Formación de Tecnólogos, Quito,
Ecuador, ivonne.maldonadof@epn.edu.ec
www.cienciadigital.org =
Vol.
3, N°1, p. 201-216, enero - ma=
rzo,
201