UNIVERSIDAD POLITÉCNICA DE SINALOA

PROGRAMA ACADÉMICO DE INGENIERÍA EN

INFORMÁTICA

Tesina
“Desarrollo de aplicaciones web
utilizando JavaScript”

Para obtener la acreditación de las estadías

profesionales y contar con los créditos para el
grado de Ingeniero en Informática.

Autor:
Cristal Esmeralda Germain Ramírez
Asesor:
Dr. Rodolfo Ostos Robles
Asesor OR:
Brandon Aguilar Celis

Mazatlán, Sinaloa 3 de diciembre de 2020.

1
2
3
4
5
AGRADECIMIENTOS
Considero que es importante reconocer el trabajo arduo y el esfuerzo de las
personas al lograr objetivos. Y considero que es igual de importante reconocer el
apoyo y los estímulos externos que favorecen el cumplimiento de metas; detrás del
logro de una persona y de su esfuerzo, existen pilares que le sostienen en momentos
difíciles o que le motivan para dar la mejor cara. Para mí, esos pilares fundamentales
son mis padres y mis amigos.

Mis padres se han esforzado, desde que tengo memoria, para darme todo lo
que necesito, procurando que no me falte nada. Durante la universidad, me apoyaron
aun cuando era difícil cubrir los gastos. Gracias a ellos, estoy donde estoy ahora
mismo. Agradezco profundamente su apoyo y su cuidado.

Mis amigos han sido mi fortaleza en los momentos más difíciles. Gracias al
apoyo emocional que me ofrecieron soy la persona que soy. He aprendido bastante
con las vivencias y experiencias junto a ellos.

Debo agradecer particularmente a Germán, por ser mi mejor amigo durante

esta travesía en la universidad; no conocí a una persona como él antes y espero
mantener su amistad por mucho más tiempo. También, debo agradecer a Enrique
que, a pesar de la distancia que existe entre nosotros, su apoyo ha sido incondicional.
Finalmente, debo agradecer a Duarte; mi mentalidad cambió bastante al convivir con
él, he aprendido y analizado muchos aspectos de la vida en general.

Gracias a ellos, me es posible escribir este documento en la actualidad.

6
ÍNDICE TEMÁTICO
Resumen ............................................................................................................................ 10
Abstract .............................................................................................................................. 10
CAPÍTULO 1 ....................................................................................................................... 11
1.1. Antecedentes ..................................................................................................................... 12
1.1.1. Localización ............................................................................................................... 13
1.1.2. Objetivos de la institución......................................................................................... 13
1.1.3. Misión ......................................................................................................................... 13
1.1.4. Visión.......................................................................................................................... 14
1.2. Planteamiento del problema ........................................................................................ 14
1.2.1. Propuesta de investigación ...................................................................................... 14
1.2.2. Objetivos .................................................................................................................... 15
1.2.3. Preguntas de investigación ...................................................................................... 15
1.2.4. Hipótesis .................................................................................................................... 15
1.2.5. Limitaciones y supuestos ......................................................................................... 16
1.2.6. Relevancia ................................................................................................................. 16
CAPÍTULO 2 ....................................................................................................................... 17
2.1. Marco conceptual............................................................................................................... 18
2.1.1. Sistema ERP ............................................................................................................... 18
2.1.2. Programación web ...................................................................................................... 22
2.1.3. Tipo de aplicaciones ................................................................................................... 26
2.1.4. Lenguajes de programación para desarrollo web .................................................... 29
CAPÍTULO 3 ....................................................................................................................... 44
3.1. Diseño ................................................................................................................................. 45
3.1.1. Enfoque........................................................................................................................ 45
3.1.2. Método de investigación............................................................................................. 45
3.1.3. Tecnologías ................................................................................................................. 46
3.2. Desarrollo ........................................................................................................................... 48
3.2.1. Herramientas y entorno .............................................................................................. 49
3.2.2. Estructura .................................................................................................................... 50
3.2.3. Funcionamiento y código ........................................................................................... 53
3.3. Resultados y discusión ...................................................................................................... 57
3.3.1. El sistema como aplicación web................................................................................ 57

7
 3.3.2. Beneficios de una aplicación web ante una aplicación de escritorio ..................... 57
3.3.3. Beneficios de JavaScript en las aplicaciones web................................................... 58
3.3.4. Optimización ................................................................................................................ 59
3.4. Conclusiones ...................................................................................................................... 60
3.5. Bibliografía .......................................................................................................................... 63
3.6. Anexos ................................................................................................................................ 66
3.6.1. Glosario........................................................................................................................ 66

8
ÍNDICE DE IMÁGENES
CAPÍTULO 1

Imagen 1.1. Ubicación de la empresa. ........................................................................................ 13

CAPÍTULO 2

Imagen 2.1. Modelo de la relación entre HTML, HTTP y URL. ................................................ 23

Imagen 2.2. Relación entre cliente y servidor. ........................................................................... 26
Imagen 2.3. Logo de PHP. ........................................................................................................... 30
Imagen 2.4. Fragmento de código en PHP. ............................................................................... 30
Imagen 2.5. Logo de Python. ....................................................................................................... 33
Imagen 2.6. Fragmento de código en Python. ........................................................................... 35
Imagen 2.7. Logo de JavaScript. ................................................................................................. 35
Imagen 2.8. Representación de los componentes en la programación web. .......................... 36
Imagen 2.9. Fragmento de código en JavaScript. ..................................................................... 38

CAPÍTULO 3

Imagen 3.1. Modelo de la interacción entre cliente y servidor mediante Internet. .................. 47
Imagen 3.2. Logo de Ant Design junto al logo de React JS...................................................... 48
Imagen 3.3. Conexión a la base de datos en la nube. .............................................................. 49
Imagen 3.4. Logo de Visual Studio Code. .................................................................................. 50
Imagen 3.5. Carpetas principales del proyecto del lado del cliente. ........................................ 51
Imagen 3.6. Contenido de la carpeta “src” en el lado del cliente.............................................. 51
Imagen 3.7. Carpetas principales del proyecto del lado del servidor. ...................................... 52
Imagen 3.8. Contenido de la carpeta “src” en el lado del servidor. .......................................... 52
Imagen 3.9. Flujo entre el lado del cliente y el lado del servidor. ............................................. 53
Imagen 3.10. Código para conectar la base de datos con el programa en JavaScript. ......... 54
Imagen 3.11. Creación del servicio http. ..................................................................................... 55
Imagen 3.12. Configuración de la conexión con la base de datos. .......................................... 56
Imagen 3.13. Rutas para consumir la API. ................................................................................. 56
Imagen 3.14. Pantalla del módulo de usuarios del sistema migrado. ...................................... 57
Imagen 3.15. Fragmento de código para realizar pruebas con React JS................................ 59

9
Resumen
En esta investigación, se plantea el tema del desarrollo web como alternativa
para los sistemas ERP de escritorio, ya que las aplicaciones web presentan muchas
ventajas sobre las aplicaciones de escritorio, dependiendo de los objetivos que se
tengan respecto al sistema deseado. Entonces, en esta investigación, se aborda el
uso de JavaScript como alternativa para el desarrollo de una aplicación web; esto bajo
una situación particular, donde se migra un sistema ERP de escritorio a una aplicación
web, manteniendo sus funcionalidades, pero optimizando la estructura para adaptar
el sistema a funcionalidades futuras.

De esta manera, se resaltan los beneficios que traen consigo las aplicaciones
web y el uso de JavaScript para desarrollarlas.

Abstract
In this research, the issue of web development is raised as an alternative to
desktop ERP systems, since web applications have many advantages over desktop
applications, depending on the objectives that are taken with respect to the desired
system. Therefore, in this research, the use of JavaScript is addressed as an
alternative for the development of a web application; this under a particular situation,
where a desktop ERP system is migrated to a web application, maintaining its
functionalities, but optimizing the structure to adapt the system to future functionalities.

In this way, the benefits of web applications and the use of JavaScript to develop
them are highlighted.

10
 CAPÍTULO 1
Antecedentes y planteamiento del problema

11
1.1. Antecedentes

Bixdy es una empresa mexicana. Fue fundada por tres jóvenes talentosos:
Markos, Alexis y Brandon Aguilar. Los tres hermanos, originarios de la ciudad de
Mazatlán, se han desarrollado en el ámbito tecnológico desde 2012. Markos y
Brandon se especializan en el ámbito informático, ambos en desarrollo de software y,
en el caso de Markos, en administración de proyectos, mientras que Alexis se
desarrolla en el ámbito informático como ingeniero de software y en el ámbito de
electrónica como ingeniero en diseño de hardware.

Los tres jóvenes fundadores han sido proactivos desde muy temprana edad y,
a lo largo de su vida, han desarrollado proyectos personales y/o participado en
proyectos importantes de las empresas en las que han laborado.

Bixdy se establece oficialmente en mayo de 2019, pero nace de la idea y

voluntad de los tres hermanos desde algunos años antes. La visión de los fundadores
era juntar su conocimiento y experiencia para realizar proyectos que apoyen a las
personas; pues, antes de la idea de fundar Bixdy, cada uno trabajaba en proyectos
personales.

Por ejemplo, Brandon, durante la época de preparatoria, desarrolló una

aplicación para adoptar mascotas en su localidad y creó una aplicación con fines de
red social; también en esas épocas, participaba en concursos regionales y nacionales,
por lo que tomó mucha experiencia desde muy joven. Por otro lado, Alexis realizó
proyectos importantes para la Universidad Autónoma de Sinaloa y para la Universidad
de Medellín durante sus prácticas profesionales; también, participó en un proyecto de
investigación en la Universidad de Durham en Reino Unido. Markos, inició su vida
laboral desde que egresó de la universidad y cuenta con aproximadamente 10 años
de experiencia en desarrollo de software, especialmente en la creación de sistemas
CRM y un poco en realidad aumentada y desarrollo de videojuegos; también cuenta
con 6 años de experiencia en administración de proyectos y como Project Manager.

12
 De esta manera, los hermanos decidieron juntar sus conocimientos para
trabajar en proyectos con fines de marketing y/o ventas como un inicio. Sin embargo,
este fue el punto de partida, pues el enfoque que mantiene Bixdy es crear productos
que aporten utilidad y soluciones a la sociedad, creando e innovando con sus
conocimientos sobre el ámbito tecnológico.

1.1.1. Localización

Imagen 1.0.1. Ubicación de la empresa.

Fuente: Google Maps.

Bixdy se encuentra ubicada en Playa de Chamela 3525 C.P. 45058 Zapopan,

Jalisco.

1.1.2. Objetivos de la institución

Consolidarse como un ente líder en tecnología nacional e internacionalmente y

aportar productos innovadores que apoyen a la sociedad a crecer como individuos y
organizaciones y que estén al alcance de la mayor cantidad de personas posible.

1.1.3. Misión

Contribuir con la evolución mental, social y empresarial, solucionando

problemas y necesidades de la sociedad moderna mediante la implementación de

13
tecnologías, como aplicaciones web, aplicaciones móviles, internet de las cosas (IoT),
optimización de redes, entre otras.

1.1.4. Visión

Ser una de las empresas líderes mundiales en tecnología, conformando un

equipo único con convicción y crecimiento y manteniendo la misión y valores iniciales
(contribuir a la sociedad y apoyar a las personas). Además, ofrecer aplicaciones que
se adapten a la mayor cantidad de situaciones posibles y que sean líderes a nivel
mundial en el área correspondiente.

1.2. Planteamiento del problema

Actualmente las aplicaciones web son muy comunes en cualquier empresa

como sistemas internos y como productos, ya que traen consigo muchas ventajas en
cuanto a portabilidad, rendimiento y funcionalidad.

En este caso, el problema radica en que el potencial de estas aplicaciones no

es explotado y no es totalmente eficiente. Bixdy tiene un sistema tipo ERP para
administrar sus proyectos internos, sus usuarios, sus servicios, entre muchos otros
factores más. Sin embargo, el sistema es una aplicación de escritorio que, si bien
hasta hoy ha funcionado correctamente, se ve limitado en cuanto a planes a futuro,
ya que los líderes de la empresa planean usar ese sistema para más fines y no sólo
como un sistema interno. Entonces, para evitar la realización de más aplicaciones, es
posible utilizar el mismo sistema migrándolo a la web y haciendo de este una
aplicación web. Además, esto último traería más ventajas en cuanto a usabilidad,
como el fácil acceso, la optimización de rendimiento, etc.

1.2.1. Propuesta de investigación

Para dar solución a este problema, lo ideal es partir de la creación de una

aplicación web, investigando las herramientas más convenientes y cómo es posible
hacer sinergia entre las diferentes tecnologías para satisfacer la necesidad que cubrirá
la aplicación en cuestión.

14
1.2.2. Objetivos
1.2.2.1. General

 Iniciar el desarrollo de una aplicación web que cumpla con las funcionalidades
actuales del sistema de escritorio que Bixdy utiliza para administrarse
internamente.

1.2.2.2. Particulares

Los siguientes puntos son los objetivos específicos de la actual investigación:

 Demostrar los beneficios de las aplicaciones web.

 Demostrar los beneficios de JavaScript en las aplicaciones web.
 Desarrollar un módulo de una aplicación web tipo ERP, migrando el sistema
actual que utiliza la empresa internamente a web.
 Investigar los puntos clave para optimizar y explotar el potencial de las
aplicaciones web.

1.2.3. Preguntas de investigación

Es importante establecer las preguntas base para realizar la investigación. Dichas

preguntas son las siguientes:

 ¿Cuáles son los beneficios de las aplicaciones web?

 ¿Qué tecnologías sirven para desarrollar aplicaciones web?
 ¿Qué puntos se deben considerar para desarrollar un ERP con tecnologías
web?
 ¿Cuáles son los puntos clave para optimizar una aplicación web?

1.2.4. Hipótesis

Se cree que al migrar el sistema de Bixdy que se utiliza para administrarse

internamente, será posible integrar (a mediano plazo) más funcionalidades que en
escritorio serían muy difícil de implementar, como el contactar y automatizar el
contacto con usuarios, lo cual es una funcionalidad muy importante para el sistema en

15
cuestión. Además, el sistema como aplicación web tendrá muchas más ventajas que
como aplicación de escritorio, como el hecho de no necesitar instalación para ingresar
a él y el abrir paso a la modalidad home office.

1.2.5. Limitaciones y supuestos

La principal limitación es la cuestión de la distancia, ya que por motivos

sanitarios y de salud, esta investigación se realiza con una modalidad home office, por
lo que la comunicación y la fluidez de la investigación en sí puede verse afectada.

Otra limitación es que, al tomar como base el sistema interno de Bixdy, se debe
respetar la privacidad de la empresa, por lo que es posible que se omita información
particular del sistema; se debe de tener cuidado en cuanto a contradecir la política de
privacidad de la misma.

1.2.6. Relevancia

La importancia de esta investigación radica en la optimización del ERP actual,

ya que el resultado de la actual investigación permitirá la integración de
funcionalidades que, en corto y mediano plazo, serán necesarias. También, se aporta
a la documentación de software de la empresa; esta investigación podría beneficiar a
los nuevos integrantes para entender el sistema y mantener la estructura del mismo,
lo cual también beneficia a la empresa en sí.

16
CAPÍTULO 2
Estado del arte

17
2.1. Marco conceptual
2.1.1. Sistema ERP

Los Sistemas Integrados de Gestión (ERP) surgen en los años noventa como
una evolución de los existentes hasta la fecha: sistemas de gestión de inventarios y
planificación de la producción, en sus distintas dos versiones; la primera, Material
Requirements Planning (MRP) de los años setenta; la segunda, Manufacturing
Resources Planning (MRP II) de los años ochenta; programas de contabilidad;
aplicaciones de gestión de la facturación; etc.

En el seno del ejército de Estados Unidos se gestó el desarrollo de los primeros

equipos informáticos, con una función de gestión logística. Años más tarde, cuando el
mundo de la informática se abre al mundo empresarial, surgen los sistemas de gestión
de empresas, cuyo perfeccionamiento y evolución culmina en el actual ERP.

Los sistemas ERP permiten integrar los flujos de información de los distintos
departamentos de la empresa y facilitan el seguimiento de las actividades que
constituyen la cadena de valor. Los modernos sistemas ERP incluyen el soporte y la
integración de las actividades de los proveedores y los distribuidores: SCM (Supply
Chain Management) y CRM (Customer Relationship Management). Por lo tanto,
podemos definir un sistema ERP como un sistema integrado de software de gestión
empresarial, compuesto por un conjunto de módulos funcionales (logística, finanzas,
recursos humanos, etc.) susceptibles de ser adaptados a las necesidades de cada
cliente [1].

Este tipo de software brinda todas las herramientas tecnológicas para gestionar
la información clave de una compañía. Según una encuesta de “Panorama Consulting”
de 2013, un 40% de las empresas que adquieren un ERP notan un aumento la
productividad. Un sistema ERP combina la funcionalidad de los distintos programas
de gestión en uno solo, basándose en una única base de datos centralizada. Esto
permite garantizar la integridad y unicidad de los datos a los que accede cada
departamento, evitando que éstos tengan que volver a ser introducidos en cada
aplicación o módulo funcional que los requiera (así, por ejemplo, si una factura ha sido

18
registrada en el módulo de clientes, ya no es necesario introducirla de nuevo en el
módulo de contabilidad y finanzas).

En pocas palabras, ERP es el vehículo para integrar personas, procesos y

tecnologías en una empresa.

Algunas características de un ERP son las siguientes:

 Se enfoca en el funcionamiento interno de la compañía.

 Brinda acceso a una base de datos centralizada.
 Captura datos de forma automática.
 Es un sistema configurable.
 Estructura del trabajo según módulos.
 Demanda sincronización entre departamentos.

En la actualidad hay muchas compañías que ofrecen un ERP. Algunos

ejemplos de ERP son los siguientes: SAP, Odoo, Oracle ERP, Microsoft Dynamics,
Epicor, etc. La mayoría de los ERP adoptan una estructura modular que soporta los
diferentes procesos de una empresa: el módulo de gestión financiera, el módulo de
gestión de compras, el módulo de gestión de ventas, el módulo de recursos humanos,
etc. Todos estos módulos están interconectados y comparten una base de datos
común, garantizando de este modo la coherencia e integración de los datos generados
[2].

Los principales procesos de un ERP son los siguientes:

 Gestión financiera y control.

 Aprovisionamiento y logística interna.
 Ventas y logística externa.
 Producción.
 Gestión de medios técnicos.
 Gestión de relaciones.
 Gestión de recursos humanos.

19
 Un sistema ERP es una solución informática integral que está formada por
unidades interdependientes denominadas Módulos. Los primeros y fundamentales
son los denominados Módulos Básicos, de adquisición obligatoria, y alrededor de los
cuales se agregan los otros módulos opcionales, que no se adquieren
obligatoriamente y se agregan para incorporar nuevas funciones al sistema ERP.
También existen los llamados Módulos verticales y corresponden a módulos
opcionales diseñados específicamente para resolver las funciones y procesos del
negocio de un sector económico específico [3]. La estructura básica conlleva los
siguientes módulos:

Módulo de aprovisionamiento.

El proceso de aprovisionamiento en una empresa comprende la gestión de

materiales y la relación con los proveedores. Este módulo se apoya en dos bases de
datos fundamentales: la base de datos de materiales, que permite registrar para cada
referencia su código, descripción, peso, dimensiones, calidad, cantidad en stock, etc.;
la base de datos de proveedores, que almacena los datos sobre cada uno de los
proveedores seleccionados: nombre, personas de contacto, dirección de pedido,
datos fiscales para facturación, etc., así como precios y condiciones de entrega de los
productos que ofrece. El módulo de aprovisionamiento facilita la planificación de los
pedidos a proveedores a partir de las necesidades de compra de la empresa

Módulo de producción

El módulo de producción se encarga de gestionar los materiales y servicios

empleados en la cadena de producción de una empresa, así como los recursos
(máquinas, utillaje, personal) utilizados en ésta.

Módulo de ventas.

Se ocupa de la relación de la empresa con los clientes, dando soporte a todas

las actividades comerciales preventa (contactos, presupuestos…) y post-venta
(entrega, factura, devoluciones...). Así mismo, facilita la gestión y configuración de los

20
pedidos, la logística de distribución, la preparación de entregas, la expedición y el
transporte.

Módulo de finanzas.

El módulo de finanzas se encarga de la contabilidad y de la gestión financiera

de la empresa. Se trata de un módulo esencial dentro del sistema ERP, ya que va a
estar totalmente integrado con los restantes módulos. Entre sus múltiples funciones
relacionadas con la operativa financiera y contable podemos destacar las siguientes:
contabilización de las operaciones de la empresa (generación de asientos contables);
elaboración de los balances y de la cuenta de resultados; elaboración de
presupuestos, generación de informes y análisis de desviaciones; gestión de la
tesorería (control de flujos de cobros y pagos, gestión de cuentas corrientes, líneas de
crédito y de depósitos, etc.); gestión de activos, etc.

Módulo de recursos humanos.

Permite gestionar la información relacionada con los empleados de una

organización (datos personales, formación recibida, experiencia, ocupación, salario,
historial profesional, períodos vacacionales, bajas por enfermedad, premios,
sanciones, etc.).

Módulo de gestión de medios técnicos y mantenimiento.

Facilita el control de los recursos materiales y técnicos de la empresa,

maquinaria, elementos de transporte y repuestos; e integran las funciones
empresariales de compras y mantenimiento para asegurar la disponibilidad de estos
recursos en las operaciones empresariales.

La implantación de un sistema ERP puede implicar cambios importantes en los

procesos, que pueden afectar tanto a la estructura organizativa, como a las
actividades y puestos de trabajo desempeñados por el personal. Por este motivo, para
minimizar los problemas derivados del proceso de implantación, es muy importante

21
prestar una especial atención a la participación y formación de los empleados de la
organización que se van a convertir en los principales usuarios del sistema.

La implantación del sistema comienza con el estudio técnico y funcional, que

debe tener en cuenta las restricciones económicas y temporales para la ejecución del
proyecto.

En esta primera etapa, por lo tanto, se definen el alcance funcional (qué

módulos se van a implantar), el alcance organizativo (qué departamentos y procesos
se verán afectados) y la viabilidad del proyecto, teniendo en cuenta las restricciones
económicas (presupuesto disponible), las restricciones técnicas (integración con otros
sistemas y plataformas disponibles), las restricciones temporales (calendario de
implantación), así como el nivel de compromiso interno de la empresa. Así mismo, se
determinan los desarrollos específicos necesarios para cubrir la funcionalidad
requerida por la empresa [4].

2.1.2. Programación web

Internet y la Web han influido enormemente tanto en el mundo de la informática

como en la sociedad en general. Las aplicaciones web permiten la generación
automática de contenido, la creación de páginas personalizadas según el perfil del
usuario o el desarrollo del comercio electrónico. Además, una aplicación web permite
interactuar con los sistemas informáticos de gestión de una empresa, como puede ser
gestión de clientes, contabilidad o inventario, a través de una página web.

Al igual que Internet, el desarrollo de la Web no se debe a una única persona,

pero si se desea nombrar un único padre de la Web, ese es Tim Bernes-Lee. A él se
deben los tres elementos que fueron clave en el nacimiento de la Web:

 HTML como lenguaje para crear los contenidos de la Web, basado en Standard
Generalized Markup Language (SGML).
 HTTP como protocolo de comunicación entre los ordenadores de la Web,
encargado de la transferencia de las páginas web y demás recursos.

22
  URL como medio de localización (direccionamiento) de los distintos
recursos en Internet.

Imagen 2.0.1. Modelo de la relación entre HTML, HTTP y URL.

Fuente: [5].

El primer navegador web, que también era editor, fue programado por Tim
Berners- Lee a finales de 1990. Al principio lo llamó World Wide Web, pero después
cambió el nombre por Nexus, ya que empezaba a usarse World Wide Web para
referirse de forma genérica al sistema de comunicación que había ideado. Este primer
navegador se programó en Objective-C en un ordenador NeXT [5].

2.1.2.1. Cliente servidor

Las aplicaciones web se encuadran dentro de las arquitecturas cliente/servidor:

un ordenador solicita servicios (el cliente) y otro está a la espera de recibir solicitudes
y las responde (el servidor).

Cliente/servidor es una arquitectura de red en la que cada ordenador o

proceso en la red es cliente o servidor. Normalmente, los servidores son ordenadores
potentes dedicados a gestionar unidades de disco (servidor de cheros), impresoras
(servidor de impresoras), tráfico de red (servidor de red), datos (servidor de bases de
datos) o incluso aplicaciones (servidor de aplicaciones), mientras que los clientes son
máquinas menos potentes y usan los recursos que ofrecen los servidores.

La arquitectura cliente/servidor nos permite la separación de funciones en tres

niveles:

23
  Lógica de presentación. Se encarga de la entrada y salida de la aplicación
con el usuario. Sus principales tareas son: obtener información del usuario,
enviar la información del usuario a la lógica de negocio para su procesamiento,
recibir los resultados del procesamiento de la lógica de negocio y presentar
estos resultados al usuario.
 Lógica de negocio (o aplicación). Se encarga de gestionar los datos a nivel de
procesamiento. Actúa de puente entre el usuario y los datos. Sus principales
tareas son: recibir la entrada del nivel de presentación, interactuar con la lógica
de datos para ejecutar las reglas de negocio que tiene que cumplir la aplicación
(facturación, cálculo de nóminas, control de inventario, etc.) y enviar el
resultado del procesamiento al nivel de presentación.
 Lógica de datos. Se encarga de gestionar los datos a nivel de almacenamiento.
Sus principales tareas son: almacenar los datos, recuperar los datos, mantener
los datos y asegurar la integridad de los datos.

El cliente

El cliente web es un programa con el que interacciona el usuario para solicitar

a un servidor web el envío de los recursos que desea obtener mediante HTTP.

La parte cliente de las aplicaciones web suele estar formada por el código
HTML que forma la página web más algo de código ejecutable realizado en lenguaje
de script del navegador (JavaScript o VBScript) o mediante pequeños programas
(applets) realizados en Java. También se suelen emplear plugins que permiten
visualizar otros contenidos multimedia (como Macromedia Flash), aunque no se
encuentran tan extendidos como las tecnologías anteriores y plantean problemas de
incompatibilidad entre distintas plataformas. Por tanto, la misión del cliente web es
interpretar las páginas HTML y los diferentes recursos que contienen (imágenes,
sonidos, etc.).

Las tecnologías que se suelen emplear para programar el cliente web son:

 HTML.

24
  CSS.
 DHTML.
 Lenguajes de script: JavaScript, VBScript, etc. ActiveX.
 Applets programados en Java.
 Distintas tecnologías que necesitan la existencia de un plug-in en el navegador:
Adobe Acrobat Reader, Autodesk MapGuide, Live Picture PhotoVista,
Macromedia Flash, Macromedia Shockwave, Virtual Reality Modeling
Language (VRML), etc.

El servidor

El servidor web es un programa que está esperando permanentemente las

solicitudes de conexión mediante el protocolo HTTP por parte de los clientes web.

La parte servidor de las aplicaciones web está formada por:

 Páginas estáticas (documentos HTML) que siempre muestran el mismo

contenido.
 Recursos adicionales (multimedia, documentos adicionales, etc.) que se
pueden emplear dentro de las páginas o estar disponibles para ser
descargados y ejecutados (visualizados) en el cliente.
 Programas o scripts que son ejecutados por el servidor web cuando el
navegador del cliente solicita algunas páginas. La salida de este script suele
ser una página HTML estándar que se envía al navegador del cliente.
Tradicionalmente este programa o script que es ejecutado por el servidor web
se basa en la tecnología CGI. En algunos casos pueden acceder a bases de
datos [5].

25
 Imagen 2.0.2. Relación entre cliente y servidor.

Fuente: [5].

2.1.3. Tipo de aplicaciones

Las aplicaciones, en informática, son tipos de programas que cumplen con

tareas específicas para los usuarios. Es posible instalar nuevas aplicaciones en un
ordenador, o bien, actualizar o borrar una ya existente. Las aplicaciones suelen usarse
para realizar tareas de manera automatizada en la computadora. Sin embargo, las
posibilidades son bastante amplias en cuanto a uso de las mismas y las necesidades
que surgen en la vida cotidiana son aún más variadas. Por este motivo, existen
diferentes plataformas y tipos de aplicaciones; tal variedad es para satisfacer
necesidades en el ámbito laboral, académico, personal, asuntos de salud, de
organización, de gobierno, etc.

Entonces, las aplicaciones se pueden clasificar según la plataforma utilizada.

Una plataforma es el hardware en el que el sistema operativo ejecuta la aplicación.
De tal manera que las plataformas comunes son tres: escritorio, móvil y web [6].

2.1.3.1. Aplicación de escritorio

Este tipo de aplicaciones se caracterizan por ejecutarse en sistemas operativos

de escritorio, tales como Mac, Windows, Linux, etc. Son aquellas que se encuentran
instaladas en el ordenador o en un sistema de almacenamiento y pueden ser
ejecutadas sin internet, por lo que sólo se requiere del sistema operativo.

26
 Hay una gran variedad de ejemplos de aplicaciones de escritorio, ya que una
gran cantidad de productos utilizados en el día a día tiene una versión como sitio web,
como aplicación móvil y como aplicación de escritorio. Algunos ejemplos de
aplicaciones de escritorio son la paquetería de Office, aplicaciones de música como
Spotify, navegadores como Opera o Firefox, aplicaciones de streaming como Netflix,
entre muchos otros [6].

2.1.3.2. Aplicación Web

Son aquellas que se ejecutan por medio de un navegador, sin necesidad de

tener la aplicación instalada en el dispositivo usado, por lo que presenta una gran
ventaja para cubrir una gran cantidad de necesidades.

Se relacionan estrechamente con el almacenamiento de datos en la nube, ya

que toda la información requerida está en servidores web, que además de alojar la
información, la envían a nuestros dispositivos cuando es requerida.

Existen muchas empresas dedicadas a alquilar espacios en servidores web, lo

que se conoce como servicio de hosting; se brinda a empresas para respaldar y
almacenar toda la información que requieran y que puede ser consultada a través de
aplicaciones, según los permisos otorgados.

El uso de estas aplicaciones es muy amplio en cuanto a posibilidades que

incluyen la actividad de un negocio o startup, por ejemplo:

 Aplicaciones para gestión interna: facturación, stock, clientes, usuarios, socios,

contabilidad, gestión de personal, etc.
 Herramientas de trabajo: intranets, gestión documentos, trabajo en red,
servicios compartidos por múltiples usuarios.
 Herramientas de comunicación digital como: mails, boletines digitales,
comunicaciones personalizadas, etc.
 Herramientas web como: tiendas virtuales, repositorios y buscadores, gestión
de ventas online.

27
  Otros tipos de servicios: gestión de inmuebles, comunidades de propietarios,
turismo, mapas, formación, colegios, tiendas y mucho más [7].

A pesar de la similitud de los términos, no hay que confundir aplicación web y

sitio web, pues los propósitos de ambas plataformas digitales son diferentes. Las
aplicaciones web dan respuesta a necesidades e interacciones, se enfoca en
acciones, mientras que un sitio web aporta información; una aplicación web está
compuesta por un mayor número de tareas y funciones y son mucho más complejas
[8].

En las aplicaciones web suelen distinguirse tres niveles, como en las

arquitecturas cliente/servidor de tres niveles: el nivel superior que interacciona con el
usuario (el cliente web, normalmente un navegador), el nivel inferior que proporciona
los datos (la base de datos) y el nivel intermedio que procesa los datos (el servidor
web).

Una aplicación web es un tipo especial de aplicación cliente/servidor, donde

tanto el cliente (el navegador, explorador o visualizador) como el servidor (el servidor
web) y el protocolo mediante el que se comunican (HTTP) están estandarizados y no
han de ser creados por el programador de aplicaciones.

No existe en la actualidad una metodología de desarrollo de sitios web

ampliamente aceptada. Sin embargo, una posible metodología es la que se presenta
a continuación. Algunas de las fases de esta metodología se pueden realizar en
paralelo o no acabar hasta el final del desarrollo del sitio web:

1. Se estudian los requisitos y especificaciones del sitio web: cuál es el

contenido del sitio web, qué se pretende conseguir, a quién se destina y
número de visitas previsto, qué inversión se desea realizar, de cuánto tiempo
se dispone, etc.
2. A partir de los requisitos se decide la arquitectura y tecnología del sitio web:
empleo de un servidor web propio o alojamiento (hospedaje) en un servidor
alquilado, ancho de banda de la comunicación del servidor web con Internet,

28
 páginas estáticas o tecnología de generación dinámica de páginas (ASP, CGI,
etc.), datos almacenados en cheros o en un servidor de bases de datos, etc.
3. A continuación, se diseña la estructura lógica o de navegación del sitio web:
página inicial, página principal, empleo de marcos, los menús, división en
secciones, relación entre las distintas secciones, página de novedades, etc.
4. Se define la estructura física, que puede ser igual a la lógica o totalmente
independiente.
5. Se crean los contenidos del sitio web. Si se emplea una base de datos, se
realiza la carga de datos.
6. Se realiza el diseño gráfico y ergonómico: colores, montaje, tipografía, botones
de navegación, logotipos y demás elementos gráficos, etc.
7. Se crean las páginas estáticas y los elementos multimedia.
8. Desarrollo de los scripts y páginas dinámicas.
9. Por último, se verifica el correcto funcionamiento del sitio web: se comprueba
la conexión con la base de datos, se verifica que no existan enlaces rotos, se
confirma que todos los recursos empleados (imágenes, ficheros con código de
script, etc.) se encuentran en el sitio web y en su lugar correspondiente, etc.
Además, se comprueba el sitio web con distintos navegadores para asegurar
su compatibilidad. También se realizan pruebas de carga para evaluar el
rendimiento.
10. Puesta en marcha [5].

2.1.4. Lenguajes de programación para desarrollo web

2.1.4.1. PHP

PHP (acrónimo recursivo de PHP: Hypertext Preprocessor) es un lenguaje de

código abierto muy popular especialmente adecuado para el desarrollo web y que
puede ser incrustado en HTML.

29
 Imagen 2.0.3. Logo de PHP.
Fuente: [9].

En lugar de usar muchos comandos para mostrar HTML (como en C o en Perl),

las páginas de PHP contienen HTML con código incrustado que hace "algo" (en este
caso, mostrar "¡Hola, soy un script de PHP!”). El código de PHP está encerrado entre
las etiquetas especiales de comienzo y final “<? php” y “?>” que permiten entrar y salir
del "modo PHP".

Lo que distingue a PHP de algo del lado del cliente como JavaScript es que el
código es ejecutado en el servidor, generando HTML y enviándolo al cliente. El cliente
recibirá el resultado de ejecutar el script, aunque no se sabrá el código subyacente
que era. El servidor web puede ser configurado incluso para que procese todos los
ficheros HTML con PHP, por lo que no hay manera de que los usuarios puedan saber
qué se tiene debajo de la manga.

La siguiente imagen es un ejemplo de código en PHP (imagen 2.4):

Imagen 2.0.4. Fragmento de código en PHP.

Fuente: [10].

30
 Fue originalmente diseñado en Perl, con base en la escritura de un grupo de
CGI binarios escritos en el lenguaje C por el programador danés-canadiense Rasmus
Lerdorf en el año 1994 para mostrar su currículum vítae y guardar ciertos datos, como
la cantidad de tráfico que su página web recibía. El 8 de junio de 1995 fue publicado
"Personal Home Page Tools" después de que Lerdorf lo combinara con su propio
Form Interpreter para crear PHP/FI.

Dos programadores israelíes del Technion, Zeev Suraski y Andi Gutmans,

reescribieron el analizador sintáctico (parser, en inglés) en 1997 y crearon la base del
PHP3, y cambiaron el nombre del lenguaje por PHP: Hypertext Preprocessor.
Inmediatamente comenzaron experimentaciones públicas de PHP3, y se publicó
oficialmente en junio de 1998. Para 1999, Suraski y Gutmans reescribieron el código
de PHP, y produjeron lo que hoy se conoce como motor Zend [10].

PHP se utiliza principalmente para crear páginas web, para crear contenido
dinámico y para trabajar con bases de datos y HTML.

Soporta la mayoría de bases de datos, MySQL, PostgreSQL, SQL Server,

MongoDB… para casi todas existen drivers, y si no es así es posible utilizar el driver
ODBC, que se conecta a cualquier base de datos [11].

Las características principales de PHP son las siguientes:

 Orientado al desarrollo de aplicaciones web dinámicas con acceso a

información almacenada en una base de datos.
 Es considerado un lenguaje fácil de aprender, ya que en su desarrollo se
simplificaron distintas especificaciones, como es el caso de la definición de las
variables primitivas, ejemplo que se hace evidente en el uso de php arrays.
 El código fuente escrito en PHP es invisible al navegador web y al cliente, ya
que es el servidor el que se encarga de ejecutar el código y enviar su resultado
HTML al navegador.
 Capacidad de conexión con la mayoría de los motores de base de datos que
se utilizan en la actualidad, destaca su conectividad con MySQL y PostgreSQL.

31
  Capacidad de expandir su potencial utilizando módulos (llamados extensiones).
 Posee una amplia documentación en su sitio web oficial, entre la cual se
destaca que todas las funciones del sistema están explicadas y ejemplificadas
en un único archivo de ayuda.
 Es libre, por lo que se presenta como una alternativa de fácil acceso para todos.
 Permite aplicar técnicas de programación orientada a objetos.
 No requiere definición de tipos de variables, aunque sus variables se pueden
evaluar también por el tipo que estén manejando en tiempo de ejecución.
 Tiene manejo de excepciones (desde PHP5).
 Si bien PHP no obliga a quien lo usa a seguir una determinada metodología a
la hora de programar, aun haciéndolo, el programador puede aplicar en su
trabajo cualquier técnica de programación o de desarrollo que le permita
escribir código ordenado, estructurado y manejable. Un ejemplo de esto son
los desarrollos que en PHP se han hecho del patrón de diseño Modelo Vista
Controlador (MVC), que permiten separar el tratamiento y acceso a los datos,
la lógica de control y la interfaz de usuario en tres componentes
independientes.
 Debido a su flexibilidad ha tenido una gran acogida como lenguaje base para
las aplicaciones WEB de manejo de contenido, y es su uso principal [10].

2.1.5.2. Python

Python es un lenguaje de programación interpretado cuya filosofía hace

hincapié en la legibilidad de su código. Se trata de un lenguaje de programación
multiparadigma, ya que soporta orientación a objetos, programación imperativa y, en
menor medida, programación funcional. Es un lenguaje interpretado, dinámico y
multiplataforma.

Es administrado por la Python Software Foundation. Posee una licencia de

código abierto. Python fue creado a finales de los ochenta por Guido van Rossum en
el Centro para las Matemáticas y la Informática (CWI, Centrum Wiskunde &
Informatica), en los Países Bajos, como un sucesor del lenguaje de programación
ABC, capaz de manejar excepciones e interactuar con el sistema operativo Amoeba.

32
 El nombre del lenguaje proviene de la afición de su creador por los humoristas
británicos Monty Python.

Imagen 2.0.5. Logo de Python.

Fuente: [12].

Python es un lenguaje de scripting independiente de plataforma y orientado a

objetos, preparado para realizar cualquier tipo de programa, desde aplicaciones
Windows a servidores de red o incluso, páginas web. Es un lenguaje interpretado, lo
que significa que no se necesita compilar el código fuente para poder ejecutarlo, lo
que ofrece ventajas como la rapidez de desarrollo. En los últimos años el lenguaje se
ha hecho muy popular, gracias a varias razones como:

 La cantidad de librerías que contiene, tipos de datos y funciones incorporadas

en el propio lenguaje, que ayudan a realizar muchas tareas habituales sin
necesidad de tener que programarlas desde cero.
 La sencillez y velocidad con la que se crean los programas. Un programa en
Python puede tener de 3 a 5 líneas de código menos que su equivalente en
Java o C.
 La cantidad de plataformas en las que podemos desarrollar, como Unix,
Windows, OS/2, Mac, Amiga y otros.
 Además, Python es gratuito, incluso para propósitos empresariales.

Entre sus características principales se encuentran:

33
 Se pueden crear todo tipo de programas. No es un lenguaje creado
específicamente para la web, aunque entre sus posibilidades sí se encuentra
el desarrollo de páginas.
 Hay versiones disponibles de Python en muchos sistemas informáticos
distintos. Originalmente se desarrolló para Unix, aunque cualquier sistema es
compatible con el lenguaje siempre y cuando exista un intérprete programado
para él.
 Es interpretado, es decir, no se debe compilar el código antes de su ejecución.
 Python dispone de un intérprete por línea de comandos en el que se pueden
introducir sentencias.
 La programación orientada a objetos está soportada en Python y ofrece en
muchos casos una manera sencilla de crear programas con componentes
reutilizables.
 Dispone de muchas funciones incorporadas en el propio lenguaje, para el
tratamiento de strings, números, archivos, etc.
 Python tiene una sintaxis muy visual, gracias a una notación indentada (con
márgenes) de obligado cumplimiento. En muchos lenguajes, para separar
porciones de código, se utilizan elementos como las llaves o las palabras clave
begin y end. Para separar las porciones de código en Python se debe tabular
hacia dentro, colocando un margen al código que iría dentro de una función o
un bucle [13].

El siguiente es un ejemplo de código en Python:

34
 Imagen 2.0.6. Fragmento de código en Python.
Fuente: [14].

2.1.5.3. JavaScript

JavaScript es un lenguaje de programación o de secuencias de comandos que

permite implementar funciones complejas en páginas web, cada vez que una página
web hace algo más que mostrar información estática para que el usuario únicamente
vea el contenido, muestra oportunas actualizaciones de contenido, mapas
interactivos, animación de Gráficos 2D/3D, desplazamiento de máquinas
reproductoras de vídeo, etc., probablemente JavaScript está involucrado. Es la tercera
capa del pastel de las tecnologías web estándar (HTML y CSS). Observe la imagen
2.8.

Imagen 2.0.7. Logo de JavaScript.

Fuente: [15].

35
 Imagen 2.0.8. Representación de los componentes en la programación web.
Fuente: [16].

JavaScript (abreviado comúnmente JS) es un lenguaje de programación

interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos,
basado en prototipos, imperativo, débilmente tipado y dinámico.

Se utiliza principalmente del lado del cliente, implementado como parte de un

navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas
y JavaScript del lado del servidor (Server-side JavaScript o SSJS). Su uso en
aplicaciones externas a la web, por ejemplo, en documentos PDF, aplicaciones de
escritorio (mayoritariamente widgets) es también significativo.

Desde 2012, todos los navegadores modernos soportan completamente

ECMAScript 5.1, una versión de JavaScript. Los navegadores más antiguos soportan
por lo menos ECMAScript 3. La sexta edición se liberó en julio de 2015.

JavaScript se diseñó con una sintaxis similar a C, aunque adopta nombres y

convenciones del lenguaje de programación Java. Sin embargo, Java y JavaScript
tienen semánticas y propósitos diferentes.

Todos los navegadores modernos interpretan el código JavaScript integrado en

las páginas web. Para interactuar con una página web se provee el lenguaje
JavaScript de una implementación del Document Object Model (DOM) [17].

36
 JavaScript es un lenguaje creado por Netscape, la compañía propietaria de un
navegador con el mismo nombre hoy desaparecido, que fue precursor del actual
Firefox. Su lanzamiento se produjo en 1995 en la versión de Netscape 2.0. Su autor,
un programador llamado Brendan Eich, se dice que lo creó en el tiempo de una
semana.

Originalmente JavaScript tomó el nombre de Mocha, aunque antes de su

lanzamiento fue renombrado a LiveScript. Sin embargo, ese nombre se cambiaría
finalmente a JavaScript como consecuencia de un acuerdo entre Netscape y Sun
Microsystems, que por aquella época era la propietaria del lenguaje Java.

Para entender el enfoque de JavaScript es necesario trasladarse a los primeros

años de la web, en los que las páginas eran principalmente contenido y enlaces,
puesto que por aquel entonces solo existía HTML. Sin embargo, era necesario aportar
algún grado de interacción con el usuario, que fuera capaz de cubrir las necesidades
básicas de los desarrolladores en aquella época. Así que se creó un lenguaje capaz
de ejecutar pequeños programas en el contexto de una página web, con un juego de
instrucciones capaz de interaccionar con el usuario como respuesta a las acciones en
la página.

Sus usos más importantes son los siguientes:

 Desarrollo de sitios web del lado del cliente (frontend, en el navegador).

 Desarrollo de todo tipo de aplicaciones gracias a la plataforma Node JS.
 Desarrollo de aplicaciones para dispositivos móviles, híbridas o que compilan
a nativo.
 Desarrollo de aplicaciones de escritorio para sistemas Windows, Linux y Mac,
pudiendo escribir un código compatible con todas las plataformas.

Populares librerías como jQuery o React, o frameworks como Angular, Vue o

Ionic están basados en JavaScript, sin olvidarse de estándares ampliamente usados
como Web Components y librerías basadas en ellos como Stencil o LitElement. Para

37
abordar cualquiera de estas herramientas, y muchas otras, el aprendizaje sólido
JavaScript es un importante requisito [18].

El siguiente fragmento es un ejemplo de cómo se utiliza el código en JavaScript:

Imagen 2.0.9. Fragmento de código en JavaScript.

Fuente: [19].

React JS

React es una biblioteca escrita en JavaScript, desarrollada en Facebook para

facilitar la creación de componentes interactivos, reutilizables, para interfaces de
usuario. Se utiliza en Facebook para la producción de componentes, e Instagram está
escrito enteramente en React. Uno de sus puntos más destacados, es que no sólo se
utiliza en el lado del cliente, sino que también se puede representar en el servidor, y
trabajar juntos [20].

Es software libre y a partir de su liberación acapara una creciente comunidad

de desarrolladores y entusiastas. Su creación se realizó en base a unas necesidades
concretas, derivadas del desarrollo de la web de la popular red social. Además de
facilitar el desarrollo ágil de componentes de interfaces de usuario, el requisito
principal con el que nació React era ofrecer un elevado rendimiento, mayor que otras
alternativas existentes en el mercado.

38
 Detectaron que el típico marco de binding y doble binding ralentizaba un poco
su aplicación, debido a la cantidad de conexiones entre las vistas y los datos. Como
respuesta crearon una nueva dinámica de funcionamiento, en la que optimizaron la
forma como las vistas se renderizan frente al cambio en los datos de la aplicación.

Sirve para desarrollar aplicaciones web de una manera más ordenada y con
menos código que si se usa JavaScript puro o librerías como jQuery centradas en la
manipulación del DOM. Permite que las vistas se asocien con los datos, de modo que,
si cambian los datos, también cambian las vistas.

El código spaguetti que se suele producir mediante librerías como jQuery se

pretende arquitecturizar y el modo de conseguirlo es a través de componentes. Una
interfaz de usuario es básicamente creada a partir de un componente, el cual
encapsula el funcionamiento y la presentación. Unos componentes se basan además
en otros para solucionar necesidades más complejas en aplicaciones. También
permite crear otras piezas de aplicación cómodamente, como los test [21].

React JS está construido en torno a hacer funciones, que toman las

actualizaciones de estado de la página y que se traduzcan en una representación
virtual de la página resultante. Siempre que React es informado de un cambio de
estado, vuelve a ejecutar esas funciones para determinar una nueva representación
virtual de la página, a continuación, se traduce automáticamente ese resultado en los
cambios del DOM necesarios para reflejar la nueva presentación de la página.

A primera vista, esto suena como que fuera más lento que el enfoque
JavaScript habitual de actualización de cada elemento, según sea necesario. Detrás
de escena, sin embargo, React.js hace justamente eso: tiene un algoritmo muy
eficiente para determinar las diferencias entre la representación virtual de la página
actual y la nueva. A partir de esas diferencias, hace el conjunto mínimo de cambios
necesarios en el DOM.

Pues utiliza un concepto llamado el DOM virtual que hace selectivamente sub-
árboles de los nodos sobre la base de cambios de estado, desarrollando esto, con la

39
menor cantidad de manipulación DOM posible, con el fin de mantener los
componentes actualizados, estructurando sus datos [20].

Con respecto a librerías sencillas como jQuery, React aporta una serie de
posibilidades muy importantes. Al tener las vistas asociadas a los datos, no es
necesario escribir código para manipular la página cuando los datos cambian. Esta
parte en librerías sencillas es muy laboriosa de conseguir y es algo que React hace
automáticamente.

También en comparación con jQuery permite una arquitectura de desarrollo

más avanzada, con diversos beneficios como la encapsulación del código en
componentes, que ofrecen una serie de ventajas más importantes que los plugin,
como la posibilidad de que esos componentes conversen e interaccionen entre sí, algo
que sería muy difícil de conseguir con plugins [21].

Node JS

Node.js es un entorno de tiempo de ejecución de JavaScript (de ahí su

terminación en .js haciendo alusión al lenguaje JavaScript). Este entorno de tiempo
de ejecución en tiempo real incluye todo lo que se necesita para ejecutar un programa
escrito en JavaScript. También aporta muchos beneficios y soluciona muchísimos
problemas, por lo que sería más que interesante realizar nuestro curso de Node.js
para obtener las bases, conceptos y habilidades necesarias que motiven a profundizar
en sus opciones e iniciar la programación.

Node.js fue creado por los desarrolladores originales de JavaScript. Lo

transformaron de algo que solo podía ejecutarse en el navegador en algo que se
podría ejecutar en los ordenadores como si de aplicaciones independientes se tratara.
Gracias a Node.js se puede ir un paso más allá en la programación con JavaScript no
solo creando sitios web interactivos, sino teniendo la capacidad de hacer cosas que
otros lenguajes de secuencia de comandos como Python pueden crear.

Tanto JavaScript como Node.js se ejecutan en el motor de tiempo de ejecución

JavaScript V8 (V8 es el nombre del motor de JavaScript que alimenta Google Chrome.

40
Es lo que toma JavaScript y lo ejecuta mientras navega con Chrome). Este motor toma
el código JavaScript y lo convierte en un código de máquina más rápido. El código de
máquina es un código de nivel más bajo que la computadora puede ejecutar sin
necesidad de interpretarlo primero, ignorando la compilación y por lo tanto
aumentando su velocidad.

Node.js utiliza un modelo de entrada y salida sin bloqueo controlado por

eventos que lo hace ligero y eficiente (solicitudes y respuestas). Puede referirse a
cualquier operación, desde leer o escribir archivos de cualquier tipo hasta hacer una
solicitud HTTP.

La idea principal de Node.js es usar el modelo de entrada y salida sin bloqueo

y controlado por eventos para seguir siendo liviano y eficiente frente a las aplicaciones
en tiempo real de uso de datos que se ejecutan en los dispositivos. Es una plataforma
que no dominará el mundo del desarrollo web, pero sí que satisface las necesidades
de una gran mayoría de programadores.

La finalidad de Node.js no tiene su objetivo en operaciones intensivas del

procesador, de hecho, usarlo para programación de más peso eliminará casi todas
sus ventajas. Donde Node.js realmente brilla es en la creación de aplicaciones de red
rápidas, ya que es capaz de manejar una gran cantidad de conexiones simultáneas
con un alto nivel de rendimiento, lo que equivale a una alta escalabilidad [22].

Axios

Se trata de una librería JavaScript capaz de ejecutarse tanto en el navegador

como en Node JS, que facilita todo tipo de operaciones como cliente HTTP.

Con Axios se puede realizar solicitudes contra un servidor, completamente

configurables, y recibir la respuesta de una manera sencilla de procesar. La librería
está basada en promesas, por lo que al usarla es posible generar un código asíncrono
bastante ordenado. Incluso es capaz de usar Async / Await para mejorar la sintaxis.

Axios es una alternativa que nos ofrece diversas ventajas:

41
  Ofrece una API unificada para las solicitudes Ajax
 Está altamente pensado para facilitar el consumo de servicios web, API REST
que devuelvan datos JSON.
 Es muy sencillo de usar y puede ser un complemento ideal para sitios web
convencionales, donde no se esté usando jQuery y aplicaciones frontend
modernas basadas en librerías como React o Polymer, que no disponen en su
"core" de mecanismos para hacer de cliente HTTP.
 Tiene muy poco peso (13Kb minimizado y todavía menos si contamos que el
servidor lo envía comprimido), en unas pocas Kb nos ahorrará mucho trabajo
de codificación en las aplicaciones [23].

Express

Express es una infraestructura de aplicaciones web Node.js mínima y flexible

que proporciona un conjunto sólido de características para las aplicaciones web y
móviles [24].

Express es el framework web más popular de Node, y es la librería subyacente

para un gran número de otros frameworks web de Node populares. Proporciona
mecanismos para:

 Escritura de manejadores de peticiones con diferentes verbos HTTP en

diferentes caminos URL (rutas).
 Integración con motores de renderización de "vistas" para generar respuestas
mediante la introducción de datos en plantillas.
 Establecer ajustes de aplicaciones web como qué puerto usar para conectar, y
la localización de las plantillas que se utilizan para renderizar la respuesta.
 Añadir procesamiento de peticiones "middleware" adicional en cualquier punto
dentro de la tubería de manejo de la petición.

A pesar de que Express es en sí mismo bastante minimalista, los

desarrolladores han creado paquetes de middleware compatibles para abordar casi
cualquier problema de desarrollo web. Hay librerías para trabajar con cookies,

42
sesiones, inicios de sesión de usuario, parámetros URL, datos POST, cabeceras de
seguridad y muchos más [25].

43
 CAPÍTULO 3
Diseño y desarrollo

44
3.1. Diseño
3.1.1. Enfoque

El enfoque actual es cualitativo en su totalidad; si bien, se manejan datos

cuantitativos y exactos, el problema que se aborda en el documento recae en la
situación particular de Bixdy, por lo que es necesario tomar en cuenta solamente este
caso de estudios y, por tanto, es necesario considerar solamente las necesidades que
han surgido y siguen surgiendo dentro de Bixdy. No se considera un enfoque mixto,
porque los datos cuantitativos no son importantes directamente para el desarrollo de
la solución planteada en la hipótesis.

Además, la investigación requiere acciones concretas para obtener resultados,

por lo que el diseño tiene preponderancia experimental.

3.1.2. Método de investigación

Debido a la naturaleza de la investigación, en la recolección de datos es crucial

incluir las experiencias personales de los colaboradores en Bixdy, ya que no es
suficiente contar con los requerimientos para optimizar; es importante considerar los
problemas que surgen en el día a día para dar los resultados esperados.

Recapitulando los objetivos de la actual investigación, se planea encontrar las

respuestas a algunos dilemas actuales mediante la migración del sistema de escritorio
a web (se reserva el nombre por cuestiones de confidencialidad), es decir, mediante
el desarrollo de un sistema web. De esta manera, si bien la recolección de datos recae
en la observación del sistema ya existente, será importante realizar una breve
entrevista tanto al encargado del departamento como al colaborador que desarrolla el
sistema a migrar.

La investigación se centra en la migración de un sólo módulo, notando el

contraste desde la raíz. Entonces, el flujo de desarrollo se realizará de la siguiente
manera: se reúnen los requerimientos a partir del testing del sistema existente;
después, se realizarán las preguntas pertinentes al encargado; se crea el proyecto y
se organiza según el estándar utilizado en la empresa y, por último, se comienza a

45
codificar tanto el backend como el frontend. Previamente el encargado decidió, junto
con el equipo, las tecnologías a utilizar. De tal manera que el sistema será
desarrollado en JavaScript, mediante Node JS para el lado del servidor y React JS
para el lado del cliente.

3.1.3. Tecnologías

Tal como se declaró anteriormente, para el desarrollo de la aplicación Web se

utilizará JavaScript, pero, ¿por qué se decidió usar este lenguaje para el desarrollo
del sistema en vez de otros como PHP o Python?

JavaScript es un lenguaje bastante sencillo y rápido, permite la ejecución de

miles de líneas de código en cuestión de segundos. Además, es soportado por la
mayoría de los navegadores actualmente. Sin embargo, la principal razón reside en el
poder que tiene para ser trabajado tanto en el lado del servidor y en el lado del cliente;
en ambos casos, JavaScript conserva la practicidad y efectividad. Gracias a la gran
cantidad de frameworks con los que cuenta, JavaScript permite versatilidad en los
resultados. Esta opción para trabajar full stack es una gran ventaja contra lenguajes
como PHP y Python, pero no es la única razón. Si bien, Python permite un manejo
libre de la seguridad y si bien PHP ha sido pionero del desarrollo web, gracias a la
evolución y refinamiento constante de ECMAScript, es posible manejar una buena
seguridad de manera sencilla con JavaScript y retomar muchas ventajas de PHP, pero
con una manera de codificar más sencilla y limpia.

Ahora bien, hasta ahora se ha mencionado el lado del cliente y el lado del
servidor. En el capítulo anterior se analiza cómo funciona la programación web;
retomando esta parte, dichos términos tienen un origen: en la programación web hay
un cliente que realiza la petición de datos a un servidor y este último procesa tales
peticiones para emitir una respuesta; el procesamiento de peticiones no es automático
por sí solo, necesita ser programado y por este motivo existen lenguajes de
programación para el backend o para el lado del servidor; a su vez, los dispositivos
clientes son los que interactúan con el usuario, por lo que necesitan una interfaz

46
diseñada (programada, en este caso) para ser usados, por ello existen tecnologías
para el frontend o para el lado del cliente.

Imagen 3.0.1. Modelo de la interacción entre cliente y servidor mediante Internet.

Fuente: [26].

En este caso, se utilizará React JS para el frontend. Este framework se basa

en componentes, lo que permite una eficaz reutilización de código. Es una herramienta
muy poderosa, pues permite utilizar HTML, JSX, CSS y código JavaScript dentro de
un mismo archivo Javascript, lo cual ayuda bastante a estructurar el código de manera
sencilla y limpia. Además, existen muchas librerías de diseño para React JS que
facilitan bastante el desarrollo de una aplicación web estética. Tal es el caso de Ant
Design.

“Ant Design, un lenguaje de diseño para middleware, es refinado por el

Departamento de Tecnología de Experiencia de Ant Financial, tiene como objetivo
uniformar las especificaciones de la interfaz de usuario para proyectos de middleware,
reducir el costo innecesario de las diferencias de diseño y la implementación y liberar
los recursos de diseño y desarrollo front-end”.

47
 Imagen 3.0.2. Logo de Ant Design junto al logo de React JS.
Fuente: [27].

Ant Design ofrece una gran variedad de componentes para utilizar libremente,
los cuales admiten estilos de diseño propios. También, la librería ofrece íconos en
forma de componentes para facilitar su uso. Y, cabe destacar que la documentación
es bastante clara y amigable para el usuario, por lo que es muy sencillo encontrar la
usabilidad de los componentes y sus propiedades, así como ejemplos de utilización
de los mismos.

Por otro lado, la funcionalidad es la parte más importante en este caso en

particular, por lo que hay un énfasis en el backend y gracias a Node JS será posible
realizar una aplicación web mediante el uso de Restful Web Services, lo cual más
adelante se mostrará con más detalle. Node JS es un entorno de ejecución en tiempo
real que puede ejecutarse en ordenadores, posicionando a JavaScript como un
lenguaje multiplataforma. Es perfecto para manejar peticiones simultáneas y esto lo
hace idóneo para una aplicación web, especialmente una con muchas entradas.

Ahora bien, para el diseño, se utilizará CSS3, combinando esto con la librería
de Ant Design.

3.2. Desarrollo

En esta sección se relata el desarrollo del proyecto desde los puntos más
importantes y sólo los esenciales; por cuestiones de privacidad y confidencialidad, no
es posible mostrar todo el proceso libremente con imágenes.

48
 Cabe mencionar que en esta sección se hace uso del tiempo presente y
pasado, ya que las actividades mencionadas fueron finalizadas, pero el sistema en su
totalidad sigue en desarrollo, por lo que hay ciertos puntos que aún son válidos en el
presente de la creación del actual documento.

3.2.1. Herramientas y entorno

La base de datos que se utilizó en la aplicación web es la misma que utilizaban

en el sistema actual. Es una base de datos relacional almacenada en la nube; se utilizó
Amazon Web Service (AWS) para este aspecto y se usó PostgreSQL para el manejo
de la misma.

Para realizar pruebas durante el desarrollo del sistema, es necesario contar con
un gestor de base de datos. Para ello, se ha utilizado pgAdmin y, para ingresar a la
base de datos, se requieren los datos de conexión, como la dirección de host, el
puerto, el usuario, la contraseña, etc. Observe la imagen 3.3.

Imagen 3.0.3. Conexión a la base de datos en la nube.

Fuente: Autor.

49
 Para codificar, se ha manejado el editor de texto Visual Studio Code, pues los
snippets y extensiones disponibles hacen de la tarea más ágil. Hay algunos para
manejar colores de manera sencilla; otros, para autocompletar palabras; otros, para
cerrar etiquetas; otros, para indentar el código automáticamente, entre muchos otros.
Además, es muy óptimo en cuanto a rendimiento.

Imagen 3.0.4. Logo de Visual Studio Code.

Fuente: [28].

Por último, dado a que el proyecto fue creado por el encargado del proyecto,
para los desarrolladores sólo queda ejecutar el sistema y, para ello, es necesario
utilizar la consola. En este caso, se ha trabajado con Windows PowerShell. Este
detalle no es importante, cualquier consola es útil. Lo que sí es importante es ejecutar
los comandos correctos: para ejecutar el frontend se escribe “npm start”, mientras que
para ejecutar el backend se ha configurado un comando sólo para development “npm
run dev”. De esta manera, se montará el sistema y estará listo para probarse.

3.2.2. Estructura

La estructura del sistema es un punto muy importante, ya que aquí radica una
de las ventajas que tiene el migrar el sistema actual a una aplicación web.

La estructura debe representar una manera óptima de trabajar, por lo que lo

ideal fue seguir el estándar que suele utilizarse al programar en React JS:

50
 Imagen 3.0.5. Carpetas principales del proyecto del lado del cliente.
Fuente: Autor.

De la imagen 3.5 se pueden observar tres principales carpetas: node_modules,

public y src. La primera, es la carpeta que se crea al instalar los paquetes de Node
JS; aquí se almacena toda la información y los recursos necesarios para trabajar con
React, toda la configuración en sí. La segunda carpeta es la que almacena datos
públicos que podrán estar a la vista de cualquier usuario; en este caso, ahí se
almacenarán las traducciones y algunas imágenes genéricas. La tercera carpeta es la
más importante en cuanto a la organización del sistema, ya que aquí se almacenan
todas las vistas, componentes y servicios necesarios para conectarse con el backend.

Imagen 3.0.6. Contenido de la carpeta “src” en el lado del cliente.

Fuente: Autor.

51
 Ahora, para el backend, la estructura es la siguiente (imagen 3.7):

Imagen 3.0.7. Carpetas principales del proyecto del lado del servidor.
Fuente: Autor.

De la misma forma que en la estructura del frontend, se utiliza la carpeta “src”

como el principal contenedor. Aquí se almacenan las rutas que se usarán mediante la
API resultante, los modelos que contienen la información necesaria para obtener la
información o para guardarla en la base de datos.

Imagen 3.0.8. Contenido de la carpeta “src” en el lado del servidor.

Fuente: Autor.

52
3.2.3. Funcionamiento y código

Ya se ha mencionado sobre la tecnología que se utilizó para el desarrollo del

sistema. Si bien esta investigación se centrará en un sólo módulo como resultado, no
es relevante hablar del módulo en sí porque todos tendrán un proceso muy similar en
cuanto a su desarrollo, los cambios en cada uno son referentes a los campos
utilizados al mostrar y guardar la información.

Entonces, mencionado lo anterior, el funcionamiento del módulo a desarrollar

será el siguiente (imagen 3.9):

Imagen 3.0.9. Flujo entre el lado del cliente y el lado del servidor.
Fuente: Autor.

En el lado del cliente, se tienen las vistas y componentes. Aquí se realiza la

programación necesaria para interactuar con el usuario. Las vistas mostrarán y
recibirán información, por lo tanto, consumirán la API mediante un servicio que
manejará las operaciones POST, GET, PUT y DELETE. Los destinos finales de la API
son los controladores que, a su vez, emitirán y recibirán la información del modelo. En

53
este último se encuentran las queries necesarias para obtener o guardar información
en la base de datos.

Así, se utilizará Modelo Vista Controlador (MVC) para la aplicación web,

conservando las buenas prácticas de una aplicación de escritorio, pero optimizando
la organización y el flujo de datos al momento de rendir.

Entonces, para comenzar con el módulo, primero es importante configurar la

conexión a la base de datos, crear el servicio con Axios, crear el servicio HTTP con
Express y crear las rutas de la API. Estos puntos son fundamentales para la creación
de una aplicación web con Node JS, las funcionalidades del sistema son particulares,
por lo que no son fundamentales en el documento. Para que todo el sistema funcione
correctamente manteniendo estándares de seguridad, será necesario crear más
archivos para validar el ambiente de producción y de desarrollo, pero se omitirá esa
situación porque no es relevante para la investigación.

Para la conexión a la base de datos, se utilizó la siguiente sintaxis para

PostgreSQL en un archivo en el proyecto para backend (imagen 3.10):

Imagen 3.0.10. Código para conectar la base de datos con el programa en JavaScript.
Fuente: Autor.

54
 Procurando la seguridad del sistema, se establecieron variables del entorno
que protegen las credenciales de la base de datos.

Para crear el servicio que permitirá consumir la API, se usó la librería Axios.
Esto es en el proyecto del frontend, con el fin de consumir el servicio brindado por el
proyecto del backend, utilizando Express. Para hacer uso de la librería y crear el
servicio se usó la siguiente sintaxis:

Imagen 3.0.11. Creación del servicio http.

Fuente: Autor.

El URL al que el sistema debe conectarse es el URL para acceder al host donde
se encuentra el servicio (backend). En el caso de la imagen 3.11 se utilizó el servicio
en local, por lo que fue posible utilizar ese URL.

Ahora, por el lado del servidor, para crear el servicio HTTP con Express se
establecen el puerto y el host, para posteriormente hacer uso del servicio y las rutas:

55
 Imagen 3.0.12. Configuración de la conexión con la base de datos.
Fuente: Autor.

Para establecer las rutas al usar la librería Express, se crearon rutas según el
módulo. La imagen 3.13 es un ejemplo (se cubrieron los nombres de las rutas reales):

Imagen 3.0.13. Rutas para consumir la API.

Fuente: Autor.

56
 De esta manera, se ofrece un servicio HTTP mediante el código del backend y
se crea un servicio para consumir API mediante el código del frontend. Esto, utilizando
React JS y Node JS.

3.3. Resultados y discusión

3.3.1. El sistema como aplicación web

A continuación, se muestra una ventana del sistema resultante (imagen 3.14):

Imagen 3.0.14. Pantalla del módulo de usuarios del sistema migrado.

Fuente: Autor.

La migración del sistema ha traído cinco módulos funcionales, listos para utilizarse. A
partir de la migración, surgen cambios inmediatos.

3.3.2. Beneficios de una aplicación web ante una aplicación de escritorio

Las aplicaciones de escritorio tienen muchas ventajas sobre otro tipo de

sistemas; decidir qué tipo de aplicación se desea depende del objetivo que se persiga.
En este caso en particular, se cree que, a largo plazo, una aplicación web trae consigo
más ventajas que una aplicación de escritorio. Sin embargo, no es posible mencionar

57
con certeza cada cambio a largo plazo, pero es pertinente mencionar los cambios
inmediatos que la migración del sistema trajo consigo.

Originalmente, el sistema ERP desarrollado en Java funcionaba localmente e

internamente se utilizaba para administrar los proyectos y usuarios actuales. Aun así,
era necesario utilizar internet para conectarse a la base de datos. Entonces, uno de
los beneficios que tiene el sistema en web es que el acceso a él es más sencillo: desde
cualquier dispositivo y en cualquier momento. Esto representa una gran ventaja,
porque abre camino a la modalidad home office, modalidad que en la actualidad es
indispensable.

Otro cambio significativo es el diseño, ya que el sistema en web es más intuitivo

y luce mejor estéticamente. Existe más libertad en cuanto a diseño gracias al uso de
JSX y al uso de CSS. En contraste con Java (C, C# o C++), en el entorno de desarrollo
web hay una gran variedad de librerías para mejorar (aún más) el aspecto y
animaciones del sistema, por lo que la interacción usuario - interfaz es más eficiente,
mientras que los lenguajes de escritorio suelen ser limitados en este aspecto, en
especial en cuanto a animaciones.

3.3.3. Beneficios de JavaScript en las aplicaciones web.

Ahora bien, el usar JavaScript fue beneficioso para el sistema, ya que fue
posible utilizar un sólo lenguaje de programación para ambos lados (del servidor y del
cliente), lo cual facilita la estructuración del código.

Además, gracias a que Axios funciona con promesas, el manejo de errores se

facilita.

También, un beneficio muy importante que se consigue con JavaScript es que

funciona asíncronamente y soporta peticiones en tiempo real, mientras que otros
lenguajes manejan la información de manera síncrona y se tiene un límite de usuarios
debido a ello.

58
3.3.4. Optimización

Gracias a este último punto, el flujo de datos es óptimo, sin necesidad de

preocuparse por ahorrar memoria. Al trabajar, Node, de forma asíncrona, se obtienen
peticiones sin generar nuevos hilos de ejecución por cada una.

Además, la capacidad de manejar datos de Node (mediante API RESTful) es

bastante benéfica para cualquier sistema. En este caso, es posible integrar
funcionalidades de reportes, de autenticación, de seguridad, más módulos, entre más,
gracias al manejo de JSON como respuesta a las peticiones.

Otro punto importante en cuanto a optimización es la capacidad que se tiene

para testear cada componente, ya que React maneja una librería llamada “testing-
library” que permite hacer pruebas unitarias a cada componente o a una serie de
componentes. El desarrollador decide cómo hacer estas pruebas, pero sin duda es
una herramienta poderosa. La sintaxis básica de prueba es la siguiente:

Imagen 3.15. Fragmento de código para realizar pruebas con React JS.
Fuente: Autor.

Actualmente, las pruebas unitarias se están desarrollando en conjunto con los

módulos. Esto es algo nuevo, ya que antes de la migración del sistema no se

59
manejaban pruebas de manera formal y, mucho menos, documentadas. Ahora,
gracias a esta librería es posible realizar pruebas simultáneas al desarrollo del
sistema.

3.4. Conclusiones

Las aplicaciones de escritorio y las aplicaciones web tienen diferentes

enfoques; ningún tipo es mejor que el otro, su implementación depende de los
objetivos a seguir. En este caso, el sistema ERP que se utilizaba para administrar
usuarios afiliados a la empresa y proyectos existentes en la misma necesitaba
reajustes en cuanto a funcionalidad; más validaciones, más módulos y el diseño tenía
mucho potencial para mejorar. Entonces, se optó por trabajar en dichos detalles y
planear el futuro del sistema.

Los sistemas ERP hasta hace pocos años solían ser aplicaciones de escritorio,
aprovechando así las funcionalidades nativas de los sistemas operativos. Sin
embargo, en algunas empresas las necesidades son diferentes y no es necesario
profundizar en lo que las aplicaciones de escritorio ofrecen y, por otro lado, a veces
es más conveniente trabajar en la web. De tal manera que en Bixdy se optó por migrar
el sistema ERP de escritorio a una aplicación web.

Para la mejoría del sistema se tomaron en cuenta tres aspectos principalmente:

el fácil acceso al sistema, la fluidez y eficiencia del sistema y el diseño del mismo.

Se retomaron los módulos existentes, pero se planearon más funcionalidades

para el sistema: sistema de contacto con los clientes, sistema de marketing, sistema
de análisis para fines internos y visualización del mismo. Dichos módulos se siguen
desarrollando actualmente, pero el hecho de que el sistema ahora sea en web facilita
bastante el desarrollo y la función de los mismos. Además, se rediseñó la interfaz
gráfica; ahora, consiste en una tabla por cada módulo donde se muestra la información
más importante de cada registro y por medio de una ventana emergente es posible
guardar y editar información. La interacción sistema-usuario y las validaciones fueron
una parte importante de la migración, pues la mejoría en esos aspectos fue inmediata.

60
 En el aspecto del fácil acceso al sistema claramente hubo una mejoría, ya que
no requiere instalación ni configuración para acceder a él ahora que se encuentra en
la web; basta con iniciar sesión con el usuario dado.

Y, la parte más importante: gracias al uso de Node JS fue posible establecer

una estructura clara de código que funcionara eficientemente, descartando posibles
errores de saturación o problemas con el tráfico. De tal manera que el sistema es
capaz de crecer gracias a la estructura y la API que provee.

Era posible desarrollar el sistema en otro lenguaje como PHP y utilizar librerías
como JQuery para el frontend o bien algún framework como Angular, pero los
beneficios que trae Node JS en conjunto con React no sólo se nota en el
funcionamiento del sistema, también da paso al inicio de la documentación del sistema
y a la creación de librerías personalizadas, lo cual no era parte del plan inicial, pero
actualmente es posible debido a la sinergia de ambas tecnologías y la clara estructura
del proyecto.

Bajo este contexto, es posible mencionar que el objetivo general del actual
documento se logró junto a los objetivos particulares, los cuales implican un desarrollo
a mediano plazo para demostrar óptimos resultados. Se demostró que una aplicación
web es una alternativa que arroja resultados factibles para utilizar un sistema ERP y,
a su vez, se demostró que JavaScript es un lenguaje muy rentable para desarrollar
una aplicación web gracias a las tecnologías disponibles alrededor de este lenguaje.
Y, por tanto, las respuestas a las preguntas de investigación que fungieron como guía
para realizar la investigación fueron reflejadas al cumplir los objetivos particulares.

Entonces, es posible resumir los resultados de la investigación de la siguiente

manera: los beneficios inmediatos de una aplicación web como alternativa para un
sistema ERP de escritorio se reflejan en el fácil acceso al sistema, la mejora de la
interfaz gráfica, la optimización en funcionalidad y la optimización en las pruebas; los
beneficios a mediano y largo plazo son inciertos, pero se abrió paso a funcionalidades
potenciales como el e-commerce y el contacto automatizado con los clientes; estas
ventajas surgen con el desarrollo de la aplicación web, independientemente de la

61
tecnología que se haya usado, pero la utilización de JavaScript trae consigo beneficios
como la optimización en la estructura del código y la facilidad para combinar
tecnologías para el desarrollo del lado del cliente y del lado del servidor, por lo que el
uso de tal lenguaje también arrojó resultados notorios.

En conclusión, hay muchas tecnologías que permiten el desarrollo de

aplicaciones web completas; Node JS y React JS son unas fuertes alternativas para
el desarrollo web y ofrecen un amplio panorama de posibilidades. Por lo tanto, la
migración del sistema ERP de escritorio a web fue un éxito y promete beneficios a
mediano y largo plazo.

62
3.5. Bibliografía

[1] «¿Qué es un sistema ERP y para qué sirve?,» 2018. [En línea]. Available:
https://www.ticportal.es/temas/enterprise-resource-planning/que-es-sistema-erp. [Último
acceso: 15 octubre 2020].

[2] «Evolución e historia del ERP. De la primera a la cuarta revolución industrial,» 11 ocutubre 2017.
[En línea]. [Último acceso: 15 octubre 2020].

[3] Oracle, «¿Qué es un ERP?,» [En línea]. Available:

https://www.oracle.com/mx/applications/erp/what-is-erp.html. [Último acceso: 15 octubre
2020].

[4] I. Rivera y M. D. R. Pérez Salazar, «Guía de selección de ERP en las pequeñas y medianas
empresas mexicanas,» Arbor, Vols. %1 de %2189-760, 2013.

[5] S. L. Mora, Programación de aplicaciones web. Historia, principios básicos y clientes web,
Alicante: Club Universitario de Alicante.

[6] B. Hussain, «Applications Platforms and different types of Software,» 26 marzo 2017. [En línea].
Available: https://medium.com/computing-technology-with-it-fundamentals/applications-
platforms-and-different-types-of-software-28f0fc1ef075. [Último acceso: 18 octubre 2020].

[7] «¿Qué es una Aplicación Web?,» 30 julio 2019. [En línea]. Available:
https://www.strappinc.com/blog/strapp-datos/que-es-una-aplicacion-web. [Último acceso: 19
octubre 2020].

[8] Mr Houston Tech Solutions, «Qué son las Aplicaciones Web,» 18 enero 2018. [En línea].
Available: https://mrhouston.net/blog/que-son-las-aplicaciones-web/. [Último acceso: 19
octubre 2020].

[9] T. Punt, «Contributing to PHP: How to Fix Bugs in the PHP Core,» 11 abril 2016. [En línea].
Available: https://www.sitepoint.com/contributing-to-php-how-to-fix-bugs-in-the-php-core/.
[Último acceso: 25 noviembre 2020].

[10] «PHP,» 10 noviembre 2019. [En línea]. Available: https://es.wikipedia.org/wiki/PHP. [Último

acceso: 21 octubre 2020].

[11] A. A. Solano, «Qué es PHP: Características y usos,» 1 enero 2019. [En línea]. Available:
https://openwebinars.net/blog/que-es-php/. [Último acceso: 25 octubre 2020].

[12] «Python,» 2019. [En línea]. Available: https://es.wikipedia.org/wiki/Python.. [Último acceso: 25

noviembre 2020].

63
[13] «Qué es Python,» 19 noviembre 2016. [En línea]. Available:
https://desarrolloweb.com/articulos/1325.php. [Último acceso: 25 octubre 2020].

[14] «Código de Python - Calcular el máximo común divisor de dos numeros,» 5 mayo 2015. [En
línea]. Available: https://www.lawebdelprogramador.com/codigo/Python/3152-Calcular-el-
maximo-comun-divisor-de-dos-numeros.html#v3174. [Último acceso: 25 noviembre 2020].

[15] «JavaScript,» 2019. [En línea]. Available: https://es.wikipedia.org/wiki/JavaScript. [Último acceso:

25 noviembre 2020].

[16] J. Delgado, «¿Qué es JavaScript?,» 8 agosto 2020. [En línea]. Available:

https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps/Qu%C3%A9_es_JavaScript.
[Último acceso: 26 noviembre 2020].

[17] «JavaScript,» 12 noviembre 2019. [En línea]. Available: https://es.wikipedia.org/wiki/JavaScript.

[Último acceso: 30 octubre 2020].

[18] «Javascript,» 4 junio 2018. [En línea]. Available: https://desarrolloweb.com/home/javascript.

[Último acceso: 1 noviembre 2020].

[19] «Programación en JavaScript/Ejemplos de código,» 30 octubre 2017. [En línea]. Available:

https://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript/Ejemplos_de_c%C3%B3digo.
[Último acceso: 25 noviembre 2020].

[20] Next U, «¿Qué es y como funciona React JS?,» 2019. [En línea]. Available:
https://www.nextu.com/blog/que-es-y-como-funciona-react-js/. [Último acceso: 3 noviembre
2020].

[21] «Qué es React. Por qué usar React,» 25 febrero 2019. [En línea]. Available:
https://desarrolloweb.com/articulos/que-es-react-motivos-uso.html. [Último acceso: 3
noviembre 2020].

[22] J. Lucas, «Qué es NodeJS y para qué sirve,» 4 septiembre 2019. [En línea]. Available:
https://openwebinars.net/blog/que-es-nodejs/. [Último acceso: 5 noviembre 2020].

[23] «Librería Axios: cliente HTTP para Javascript,» 14 septiembre 2018. [En línea]. Available:
https://desarrolloweb.com/articulos/axios-ajax-cliente-http-javascript.html. [Último acceso: 5
noviembre 2020].

[24] Express, «Express. Infraestructura web rápida, minimalista y flexible para Node.js,» [En línea].
Available: http://expressjs.com/es/. [Último acceso: 5 noviembre 2020].

[25] Developer Mozilla, «Introducción a Express/Node,» [En línea]. Available:

https://developer.mozilla.org/es/docs/Learn/Server-side/Express_Nodejs/Introduction. [Último
acceso: 5 noviembre 2020].

64
[26] «Cliente-servidor,» 2019. [En línea]. Available: https://es.wikipedia.org/wiki/Cliente-servidor.
[Último acceso: 25 noviembre 2020].

[27] XTech, «Ant Design,» 2020. [En línea]. Available: https://ant.design/. [Último acceso: 5
noviembre 2020].

[28] J. Dugan, «Visual Studio Code vs. Sublime Text,» 3 noviembre 2015. [En línea]. Available:
https://john-dugan.com/visual-studio-code-vs-sublime-text/. [Último acceso: 26 noviembre
2020].

[29] L. Fischer, «Guía para principiantes de HTTP y REST,» 4 diciembre 2016. [En línea]. Available:
https://code.tutsplus.com/es/tutorials/a-beginners-guide-to-http-and-rest--net-16340. [Último
acceso: 25 noviembre 2020].

[30] P. Halliday, «Using TypeScript with React,» 11 febrero 2019. [En línea]. Available:
https://www.digitalocean.com/community/tutorials/react-typescript-with-react. [Último acceso:
25 noviembre 2020].

[31] C. Villafraz, «Configurando un proyecto con React y TypeScript,» 2019. [En línea]. Available:
https://platzi.com/blog/configurando-proyecto-con-react-y-typescript/. [Último acceso: 25
noviembre 2020].

65
3.6. Anexos
3.6.1. Glosario

Ajax

Acrónimo de Asynchronous JavaScript And XML, es una tecnología que permite hacer
peticiones de manera asíncrona al servidor desde el cliente (se ejecuta en el
navegador).

API

Acrónimo de Application Programming Interfaces, es un conjunto de protocolos,

funciones, procesos que se utiliza dentro de otro software, permitiendo la
comunicación entre las dos aplicaciones a través de un conjunto de reglas.

Backend

Es la parte de código que se encarga de los datos y la información en sí; en esta parte
se trabaja la funcionalidad y no la interacción con el usuario.

Código

Conjunto de instrucciones escritos en cierto lenguaje que la computadora interpreta

para realizar las funciones descritas.

Frontend

Es la parte del código (o de desarrollo en sí) que se encarga de la interacción con el

usuario, en mayor medida. Por medio de esta parte, el usuario “llega” al backend y,
por tanto, recibe o manda datos desde aquí.

JQuery

Es una biblioteca multiplataforma de JavaScript que permite simplificar la manera de

interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos,
desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web.

66
Lenguaje de programación

En informática, se conoce como lenguaje de programación a un programa destinado

a la construcción de otros programas informáticos.

Servidor

Es un ordenador remoto que provee los datos solicitados por parte de los navegadores
de otras computadoras. En redes locales se entiende como el software que configura
un PC como servidor para facilitar el acceso a la red y sus recursos.

Startup

Podría definirse como una empresa de nueva creación que presenta unas grandes
posibilidades de crecimiento. Aunque el término de startup puede referirse a
compañías de cualquier ámbito, normalmente suele utilizarse para aquellas que tienen
un fuerte componente tecnológico y que están relacionadas con el mundo de Internet
y las TICs.

67