UNIVERSIDAD POLITÉCNICA DE SINALOA

PROGRAMA ACADÉMICO DE INGENIERÍA EN INFORMÁTICA

“Implementación Sencha Architect en el

Desarrollo del Sistema Cuentas por
Cobrar”
Para obtener la acreditación de las estadías profesionales y contar
con los créditos para el grado de Ingeniero Informática

Autor:

Liliana Guadalupe García Guevara

Asesor:

Dra. Vanessa Guadalupe Félix Aviña

Asesor OR:

ING. Gerardo Morales Tirado

Mazatlán, Sinaloa 21 de septiembre de 2019.

Agradecimientos

Agradezco a mi familia, especialmente a mi mamá por siempre ayudarme a

dar lo mejor de mí y nunca rendirme, gracias a todos los sacrificios que ha hecho
he podido cumplir las metas que me he propuesto a lo largo de mi vida.

A Pyansa por brindarme la oportunidad de realizar las estadías en su

departamento de TICS, además al Ing. Gerardo Morales Tirado por asesorarme
durante mi periodo de estadías y al Ing. Carlos Daniel Zárate Guerrero por
apoyarme con la utilización de nuevas herramientas, además de ayudarme a
integrarme al equipo de trabajo y brindarme su apoyo durante todo el periodo de
estadías.

A la Dra. Vanessa Guadalupe Félix Aviña por apoyarme en la correcta

realización de este documento de investigación y ser un gran ejemplo a seguir en la
vida.

2
3
4
5
6
Índice temático

Resumen ............................................................................................................... 10
Abstract ................................................................................................................. 10
Introducción ........................................................................................................... 11
1.1 Antecedentes .................................................................................................. 13
1.1.1 Localización .................................................................................................. 13
1.1.2 Objetivos de la institución ............................................................................. 14
1.1.3 Misión ........................................................................................................... 14
1.1.4 Visión............................................................................................................ 15
1.2 Planteamiento del problema ............................................................................ 15
1.2.1 Propuesta de investigación .......................................................................... 15
1.3 Objetivos de la investigación ........................................................................... 16
1.3.1 Objetivos generales ...................................................................................... 16
1.3.2 Objetivos específicos.................................................................................... 16
1.4 Preguntas de la investigación .......................................................................... 16
1.5 Hipótesis.......................................................................................................... 17
1.6 Limitaciones y supuestos ................................................................................ 17
1.7 Relevancia....................................................................................................... 17
2.1. ¿Qué es programación web? ......................................................................... 19
2.1.2 Historia de los sitios web .............................................................................. 20
2.1.4 Ventajas sistemas web ................................................................................. 21
2.1.5 Desventajas Sistema Web ........................................................................... 22
2.1.6 Tareas principales de un programador ......................................................... 23
2.2 IDE .................................................................................................................. 23
2.3 Framework ...................................................................................................... 24
2.4. Lenguajes de programación ........................................................................... 26
2.4.1 PHP .............................................................................................................. 27
2.4.2 Cake PHP..................................................................................................... 29
2.4.3 SQL .............................................................................................................. 30
2.4.4 JavaScript..................................................................................................... 31

7
2.4.5 Sencha ......................................................................................................... 33
2.4.5.1 Características de Sencha ........................................................................ 33
2.4.5.2 Sencha Ext JS ........................................................................................... 35
2.4.5.3 Sencha Extreact ........................................................................................ 35
2.4.5.4 Sencha Text .............................................................................................. 35
2.4.5.5 CMD .......................................................................................................... 35
2.4.5.6 Sencha Architect ....................................................................................... 36
2.4.5.7 IDE Plugins................................................................................................ 36
2.4.5.8 Sencha Inspector ...................................................................................... 37
2.4.5.9 Sencha Touch ........................................................................................... 37
2.4.6 Sublime Text ................................................................................................ 37
2.5.7 Cuentas por cobrar ....................................................................................... 40
2.5.8 Factura ......................................................................................................... 42
3.1 Diseño ............................................................................................................. 46
3.2 Desarrollo del sistema ..................................................................................... 49
3.3 Herramientas de Desarrollo............................................................................. 54
Resultados y discusión .......................................................................................... 63
Recomendaciones y/o sugerencias ....................................................................... 64
Conclusión............................................................................................................. 65
Glosario ................................................................................................................. 66
Bibliografía ............................................................................................................ 69

8
Índice de figuras

Figura 1. Ubicación de la empresa PYANSA. ....................................................... 13

Figura 2. Fundamentos del desarrollo web ........................................................... 19
Figura 3. Clasificación de los lenguajes de programación. ................................... 21
Figura 4. Ejemplo de IDE. ..................................................................................... 24
Figura 5. MVC ....................................................................................................... 25
Figura 6. Compiladores ......................................................................................... 27
Figura 7. Páginas Web .......................................................................................... 27
Figura 8. Ejemplo sintaxis PHP ............................................................................. 28
Figura 9. Funciones básicas de SQL .................................................................... 30
Figura 10. Sintaxis de JavaScript .......................................................................... 32
Figura 11. Logotipo de Sencha ............................................................................. 33
Figura 12. Interfaz de Sencha Architect ................................................................ 36
Figura 13. Menú Sublime Text .............................................................................. 38
Figura 14. Interfaz principal Sublime Text. ............................................................ 39
Figura 15. Interfaz de Sistema Cuentas por Cobrar .............................................. 41
Figura 16. Factura ................................................................................................. 42
Figura 17. Product Backlog ................................................................................... 48
Figura 18. Menú Principal...................................................................................... 49
Figura 19. Formulario en Sencha .......................................................................... 51
Figura 20. Grid Panel en Sencha .......................................................................... 53
Figura 21. Función Read ....................................................................................... 55
Figura 22. Función Create ..................................................................................... 55
Figura 23. Función Actualiza ................................................................................. 56
Figura 24. Función Update .................................................................................... 57
Figura 25. Función Load ....................................................................................... 58
Figura 26. Función Create ..................................................................................... 59
Figura 27. Función Actualiza ................................................................................. 60
Figura 28. Función Update .................................................................................... 61
Figura 29. Envío de PDF ....................................................................................... 62

9
Resumen

El departamento de Informática de Pyansa se encarga del desarrollo de los

sistemas de las empresas pertenecientes a Grupo Alerta, debido a que es una
empresa con muchos años al servicio y los sistemas se encuentran en lenguajes
antiguos para los que ya no hay soporte ni se han desarrollado actualizaciones se
ha decidido la actualización de los sistemas a lenguajes más novedosos y sencillos
de utilizar.

Uno de sus sistemas es Cuentas por cobrar, el cual se decidió desarrollar en

el framework Sencha Architect junto con Cake PHP, el cual se planea agilice los
procesos del cliente, mejore la seguridad y disminuya el soporte y mantenimiento.

Abstract

The IT department of Pyansa is responsible for the development of the

systems of the companies belonging to Grupo Alerta, because it is a company with
many years of service and the systems are in old languages for which there is no
longer support or have been developed updates it has been decided to update the
systems to newer and easier to use languages.

One of its systems is Cuentas por Cobrar, which was decided to develop in
the Sencha Architect framework together with Cake PHP, which is planned to
streamline customer processes, improve security and reduce support and
maintenance.

10
Introducción

Debido a la actualización de los sistemas desarrollados en Pyansa se decidió

la creación del sistema Cuentas por Cobran, el cual se creó en lenguajes sencillos
y un framework en el que el diseño se realizará de manera fácil, ahorrando líneas
de código y tiempo al no tener que diseñar cada uno de los componentes que se
muestran en las vistas del sistema.

Además del framework Sencha Architec también se decidió utilizar Cake PHP
como controlador del sistema, el cual se espera que mejore los procesos en los que
se realiza la comunicación entre el sistema y la base de datos.

Durante el desarrollo del sistema se planea que se abarquen distintos

módulos que harán que el proceso de cobros de la empresa a la que va dirigida
mejore y con esto el soporte disminuya de manera considerable.

Algunos de los módulos desarrollados serán: Carnets de colegiaturas e

inscripciones, facturación, cobros, asignación de camiones, cuotas, etc.

11
Capítulo l
Organización/Empresa

12
1.1 Antecedentes
Pyansa fue fundada en el año de 1975 en la ciudad de Culiacán, Sinaloa. Su
función es la de atender a un Grupo de Empresas, brindando asesoría legal en
diferentes áreas como Informática, Impuestos, Contabilidad, Administración y todo
lo que necesiten para desarrollar su función social, alineándose a las reglas de los
Gobiernos Federales, Estatales y Municipales, además de las propias reglas de los
Socios de la Empresa.

Pyansa se traslada a la ciudad de Mazatlán, Sinaloa en el año de 1977,

donde actualmente se encuentra brindando servicio a 47 empresas, asesorándolas
en las áreas de Contabilidad, Administración, Finanzas, Soporte Técnico,
Mantenimiento a Equipo de Cómputo y Desarrollo de Sistemas.

1.1.1 Localización
Pyansa se encuentra ubicada en la avenida Aquiles Serdán No. Ext. 1507,
Int. 2-A, Colonia: Centro C.P. 82000, Mazatlán, Sinaloa.

Localización de la empresa

Fuente: Google Maps

Figura 1. Ubicación de la empresa PYANSA.

13
1.1.2 Objetivos de la institución
Nos esforzamos por desarrollar e implantar estrategias en nuestras
Empresas que aseguren nuestro liderazgo en la creación de valor para nuestros
Clientes, Empleados, Proveedores, Comunidades e Inversionistas, donde opera
cada una de nuestras unidades de negocios. Tenemos la certeza de que una
permanente orientación hacia la competitividad y servicio efectivo son
fundamentales para la Misión de Grupo Alerta.

Creemos que el personal que labora en las Empresas del Grupo, al actuar
con integridad, nos da ventaja competitiva. Al desarrollar nuestras actividades con
honestidad, responsabilidad y respeto, construimos vínculos perdurables de
confianza y de mutuo beneficio en todas nuestras interacciones. Fomentamos la
comunicación clara y directa porque sabemos que la diversidad de opiniones nos
enriquece. Estamos convencidos que la colaboración entre las Empresas del Grupo
y quienes laboran en ellas, agiliza la toma de decisiones y conduce a cada una de
las unidades de negocios a alcanzar mejores resultados.

Expresamos nuestro profesionalismo mediante una permanente

actualización, comunicación efectiva y disposición para compartir nuestro esfuerzo
y conocimiento a trabajar en equipo. Buscamos de manera pro activa e innovadora,
satisfacer las necesidades y expectativas de nuestros grupos de interés. La mejora
continua es uno de nuestros principales hilos conductores.

1.1.3 Misión
La Misión de Grupo Alerta es ofrecer productos y prestar servicios de calidad
que generen clientes totalmente satisfechos, mediante el uso óptimo de los recursos
disponibles en un marco de respeto a los principios y valores éticos fundamentales,
para generar Empresas líderes, rentables y en constante evolución.

14
1.1.4 Visión
Ser uno de los 10 grupos de empresas más importantes de Sinaloa, por su
liderazgo en innovación tecnológica, cultura empresarial y organización.

1.2 Planteamiento del problema

Debido a la ventaja que han tenido en los últimos años los sistemas web la
empresa Pyansa se propuso la actualización de distintos sistemas, uno de los que
ha presentado problemas últimamente y que se decidió desarrollar es el sistema de
Cuentas por cobrar de una de las empresas a las que le brinda sus servicios.

El sistema a desarrollar tendrá que contar con distintos módulos que hagan
posible la creación, actualización, modificación y eliminación de todos los datos
necesario para la generación de carnets de pago y para posteriormente ser
facturados.

El desarrollo se manejará mediante la herramienta Sencha Architect, la cual

debe agilizar los procesos de diseño debido a que cuenta con la posibilidad de
utilizar un entorno gráfico.

1.2.1 Propuesta de investigación

Como solución a lo planteado en el punto anterior se propone:

 La investigación de la herramienta Sencha Arquitect.

 La investigación de las librerías utilizadas por la herramienta mencionada
anteriormente para la generación de reportes en el sistema.
 Una investigación de qué son las cuentas por cobrar, cómo se utilizan, qué
datos son necesarios para facturar y cómo realizar el proceso.
 Un estudio del sistema anterior, enfocándonos en cuáles son los procesos
que están fallando y cuáles se pueden agilizar.
 La realización de los Catálogos necesarios para la facturación y los Carnets.
 El desarrollo de los módulos necesarios para la operación del sistema.

15
1.3 Objetivos de la investigación

1.3.1 Objetivos generales

Desarrollar un sistema por medio de herramientas web para la agilización de

los procesos de cobro y facturación de la empresa en la que se implementará,
además de reducir el soporte brindado en el departamento de TIC´S.

1.3.2 Objetivos específicos

 Desarrollar módulo de catálogos: Contará con las funciones de agregar,

modificar, eliminar y mostrará una tabla con los registros de la base de
datos para las opciones de bancos, uso de CFDI, fechas de ingreso y
movimientos.

 Desarrollar módulo operaciones: Contará con las opciones de facturación,

asignar camiones y carnets.

 Generar de reportes en cada módulo por medio de la librería FPDF.

 Agilizar los procesos de instalación.

1.4 Preguntas de la investigación

 ¿Cuál es la ventaja de implementar herramientas gráficas para la reducción
del tiempo de desarrollo de un sistema web?
 ¿Qué es un sistema de cuentas por cobrar?
 ¿De qué elementos se compone un sistema de cuentas por cobrar?
 ¿Cuál es la ventaja de un sistema web sobre uno de escritorio?

16
  ¿Qué es Sencha Architect?

1.5 Hipótesis
La utilización de herramientas gráficas web agilizará el desarrollo del sistema
de cuentas por cobrar en un 30%, además de reducir el soporte brindado
diariamente y los tiempos de instalación.

1.6 Limitaciones y supuestos

La herramienta utilizada para el desarrollo del sistema web es poco conocida
en la actualidad por lo que dificultará la búsqueda de información.

La implementación del módulo de facturación tendrá dificultad debido a la falta de

experiencia con los lenguajes utilizados para su desarrollo.

1.7 Relevancia
La utilización de herramientas gráficas para el desarrollo de sistemas web
implica una gran optimización de código, lo que conlleva a reducir el tiempo de
desarrollo y por ende el costo y soporte de los sistemas.

17
Capítulo ll
Marco teórico

18
2.1. ¿Qué es programación web?
La programación o desarrollo web, se trata de construir y dar mantenimiento
a sitios web, lo cual debe permitir el funcionamiento correcto, rápido y limpio para
que los usuarios obtengan la mejor experiencia posible, en la figura 2 podemos
observar los fundamentos en los que se base el desarrollo web, los cuales al
elaborarse de manera correcta hacen fácil el mantenimiento y uso de los sistemas
web.

Fundamentos del desarrollo web

Fuente: https://sites.google.com/a/utecnologica.edu.bo/realidad-aumentada-en-la-educacion/4-apa-
tecnico-de-procesos-y-recursos

Figura 2. Fundamentos del desarrollo web

19
2.1.2 Historia de los sitios web
El 20 de diciembre de 1990, Tim Berners-Lee presentó la primera página web
de la historia, alojada en un NeXT Cube (computadora creada por Steve Jobs) del
CERN, convirtiéndose así en el primer servidor web de la historia. Este sitio web
informaba sobre todo lo relativo al proyecto World Wide Web, como los detalles
técnicos o el equipo de personas que habían participado.

EL proyecto evolucionó, incrementando en número de servidores y de sitios

web, con lo que el CERN, viendo el potencial que tenía, no dudó en presentar la
World Wide Web de forma pública el 30 de abril de 1993.

La programación web ha ido evolucionando progresivamente a medida que

se incrementaban las funcionalidades cada vez más complejas que el mercado
demandaba a los sitios webs. Las páginas webs estáticas, en las que sólo se
requería de código HTML, evolucionaron hacia las páginas dinámicas, en las que
ya se necesitaba una aplicación en el servidor que interactuara con las bases de
datos y construyera la página web según las peticiones del internauta.

Estos lenguajes de programación, como los que podemos observar en la

figura 3, eran simples pero muy potentes a la vez, y a medida que aumentaban las
demandas, también fueron evolucionando hasta ser lenguajes más robustos como
lo son ahora, que incorporan herramientas de Programación Orientada a Objetos
(OOP según su sigla en inglés) alcanzando así a los lenguajes de programación
más completos. Una vez llegados a este punto, miles de programadores en todo el
mundo se lanzaron a hacer sus propias aplicaciones web para dar respuesta a la
creciente demanda en complejidad de los sitios webs. Y así comenzaron a surgir
los Frameworks [1].

20
 Lenguajes de programación

Fuente: http://lenguajesproghye.blogspot.com/2015/01/blog-post.html

Figura 3. Clasificación de los lenguajes de programación.

2.1.4 Ventajas sistemas web

 Compatibilidad multiplataforma. Las aplicaciones web tienen un camino

mucho más sencillo para la compatibilidad multiplataforma que las
aplicaciones de software descargables.

 Actualización. Las aplicaciones basadas en web están siempre actualizadas

con el último lanzamiento.

 Inmediatez de acceso. Las aplicaciones basadas en web no necesitan ser

descargadas, instaladas y configuradas. Usted accede a su cuenta online a
trabajar sin importar cuál es su configuración o su hardware.

21
  Menos requerimientos de memoria. Las aplicaciones basadas en web tienen
muchas más razonables demandas de memoria RAM de parte del usuario
final que los programas instalados localmente.

 Menos Bugs. Las aplicaciones basadas en web deberán ser menos

propensas a colgarse y crear problemas técnicos debido a software o
conflictos de hardware con otras aplicaciones existentes, protocolos o
software personal interno. Con aplicaciones basadas en web, todos utilizan
la misma versión, y todos los bugs pueden ser corregidos tan pronto como
son descubiertos.

 Múltiples usuarios concurrentes. Las aplicaciones basadas en web pueden

realmente ser utilizada por múltiples usuarios al mismo tiempo [2].

2.1.5 Desventajas Sistema Web

 Necesaria una conexión a internet.

 La comunicación constante con el servidor que ejecuta la aplicación

establece una dependencia a una buena conexión a internet.

 El tiempo de respuesta puede llegar a ser lento dependiendo de las

características del ordenador y de la conexión a Internet que se utilice.

 Al estar siempre actualizada a la última versión no es posible elegir una

versión anterior.

 La aplicación web desaparece si así lo requiere el desarrollador. Las

aplicaciones tradicionales, en general, pueden seguir usándose en esos
casos [3].

22
2.1.6 Tareas principales de un programador
Los programadores de sistemas informáticos realizan tareas de
investigación, diseño y desarrollo de programas que controlan el funcionamiento
interno de los ordenadores y redes informáticas. Los programadores de sistemas
informáticos escriben programas que sean rápidos, versátiles y eficientes, a menudo
siguiendo las especificaciones proporcionadas por un analista de sistemas
informáticos. También pueden instalar, personalizar y dar soporte a estos sistemas
operativos.

Su objetivo es hacer que los sistemas informáticos (hardware y software)

funcionen de forma más eficiente. Esto incluye el estudio de los ordenadores
manejan los datos y textos, envían información a impresoras y se vinculan a los
sistemas de telecomunicaciones [4].

2.2 IDE
Un entorno de desarrollo integrado, es un entorno de programación que ha
sido empaquetado como un programa de aplicación, es decir, consiste en un editor
de código, un compilador, un depurador y un constructor de interfaz gráfica (GUI).

Los IDE proveen un marco de trabajo amigable para la mayoría de los

lenguajes de programación tales como C++, PHP, Python, Java, C#, Delphi, Visual
Basic, etc., en la figura 4 podemos observar un ejemplo del IDE NeatBeans. En
algunos lenguajes, un IDE puede funcionar como un sistema en tiempo de
ejecución, en donde se permite utilizar el lenguaje de programación en forma
interactiva, sin necesidad de trabajo orientado a archivos de texto [5].

23
 Interfaz de IDE

Fuente: https://www.oracle.com/tools/technologies/netbeans-ide.html

Figura 4. Ejemplo de IDE.

2.3 Framework

Un framework es una aplicación genérica incompleta que se puede configurar

para añadirle las líneas de código que sean necesarias para programar una
determinada aplicación; una analogía de ello podría ser un rompecabezas al que se
le pueden agregar nuevas piezas para hacerlo más completo y detallado o agregarle
nuevas funciones.

Este marco de referencia o marco de trabajo nos provee un conjunto de

código que se puede utilizar y reutilizar en cualquier sistema, bien sea simple o
complejo; ofreciéndonos una forma estándar para trabajar en un lenguaje de
programación determinado; es decir empleando un paradigma ya existente; siendo

24
el Modelo-Vista-Controlador – MVC (como que se muestra en la figura 5) el más
empleado en la actualidad.

Funcionamiento del modelo MVC

Fuente: http://codigoplusplus.blogspot.com/2011/10/ejemplo-de-arquitectura-mvc-en-php.html

Figura 5. MVC

Django es uno de los framework más populares en entornos web para el

lenguaje Python; Ruby on Rails es su par en Ruby, por lo que cuando se se habla
de ellos, Django o Ruby on Rails, no se está hablando de un lenguaje de
programación en concreto sino de frameworks desarrollados para facilitar la
creación (escritura) de código en Python o Ruby.

PHP se ha convertido en el lenguaje más utilizado para desarrollar

aplicaciones web; la mayor parte de programadores, por no decir la totalidad, no
programan desde cero con este lenguaje, sino que emplean frameworks como
Symfony, Laravel, CodeIgniter o Zend, lo que les facilita enormemente el trabajo y
les ahorra mucho tiempo de programación [6].

25
2.4. Lenguajes de programación
En los últimos años los lenguajes de programación han ido evolucionado en
el desarrollo de sistemas o software, con el objetivo principal de facilitar al usuario
las actividades que realiza día con día.

En términos generales, un lenguaje de programación es una herramienta que

permite desarrollar software o programas para computadora. Los lenguajes de
programación son empleados para diseñar e implementar programas encargados
de definir y administrar el comportamiento de los dispositivos físicos y lógicos de
una computadora. Lo anterior se logra mediante la creación e implementación de
algoritmos de precisión que se utilizan como una forma de comunicación humana
con la computadora.

A grandes rasgos, un lenguaje de programación se conforma de una serie de

símbolos y reglas de sintaxis y semántica que definen la estructura principal del
lenguaje y le dan un significado a sus elementos y expresiones.

Programación es el proceso de análisis, diseño, implementación, prueba y

depuración de un algoritmo, a partir de un lenguaje que compila y genera un código
fuente ejecutado en la computadora.

La función principal de los lenguajes de programación es escribir programas

que permiten la comunicación usuario-máquina. Unos programas especiales
(compiladores o intérpretes) convierten las instrucciones escritas en código fuente,
en instrucciones escritas en lenguaje máquina (0 y 1).

Los intérpretes leen la instrucción línea por línea y obtienen el código

máquina correspondiente.

En cuanto a los compiladores, traducen los símbolos de un lenguaje de

programación a su equivalencia escrito en lenguaje máquina (proceso conocido
como compilar, como podemos observar en la figura 6). Por último, se obtiene un
programa ejecutable [7].

26
 Proceso de compilación

Fuente: http://ingsistemascompilador.blogspot.com/p/usos-y-funcion-de-los-compiladores.html

Figura 6. Compiladores

2.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.

Proceso levantamiento de página web

Fuente:https://www.aprenderaprogramar.com/index.php

Figura 7. Páginas Web

27
 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 ?> ( como
podemos observar en la figura 8)que permiten entrar y salir del "modo PHP".

Sintaxis PHP

Fuente: http://www.forosdelweb.com/f18/codigo-php-aparece-comentado-no-ejecuta-1142839/

Figura 8. Ejemplo sintaxis 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.

28
 Lo mejor de utilizar PHP es su extrema simplicidad para el principiante,
pero a su vez ofrece muchas características avanzadas para los programadores
profesionales. No sienta miedo de leer la larga lista de características de PHP. En
unas pocas horas podrá empezar a escribir sus primeros scripts [8].

2.4.2 Cake PHP

CakePHP es un framework de desarrollo de aplicaciones web escrito en PHP,
creado sobre los conceptos de Ruby on Rails.

CakePHP tiene varias características que hacen que sea una gran elección
como framework para el desarrollo de aplicaciones rápidamente y con la menor
cantidad de molestia. Al igual que Ruby On Rails, CakePHP facilita al usuario la
interacción con la base de datos mediante el uso de ActiveRecord. Además, hace
uso del patrón Modelo Vista Controlador.

 Compatible con PHP4 y PHP5

 CRUD de la base de datos integrado
 URLs amigables
 Sistema de plantillas rápido y flexible
 Ayudas para AJAX, Javascript, HTML, forms y más
 Trabaja en cualquier subdirectorio del sitio
 Validación integrada
 Scaffolding de las aplicaciones
 Access Control Lists
 Sanitización de datos
 Componentes de seguridad y sesión [9].

29
2.4.3 SQL

SQL es un lenguaje de computación para trabajar con conjuntos de datos y

las relaciones entre ellos. Los programas de bases de datos relacionales, como
Microsoft Office Access, usan SQL para trabajar con datos. A diferencia de muchos
lenguajes de computación, SQL no es difícil de leer y entender, incluso para un
usuario inexperto. Al igual que muchos lenguajes de computación, SQL es un
estándar internacional reconocido por organismos de estándares como ISO y ANSI.

SQL se usa para describir conjuntos de datos que pueden ayudarle a

responder preguntas. Al usar SQL, debe usar la sintaxis correcta, en la figura 9
podemos observar los procesos básicos de SQL. La sintaxis es el conjunto de reglas
mediante las que se combinan correctamente los elementos de un idioma. La
sintaxis SQL se basa en la sintaxis del idioma inglés y usa muchos de los mismos
elementos que la sintaxis de Visual Basic para Aplicaciones (VBA) [10].

Procesos básicos SQL

Fuente:https://www.google.com/search?biw=1366&bih=608&tbm=isch&sxsrf=ACYBGNR6qV9X
5v8pqcnrVki1YVEamTUyhw%3A1573536475234&sa=1&ei=20LKXerUDYiUtQXrq7TIDA&q=sql+crud&

Figura 9. Funciones básicas de SQL

30
2.4.4 JavaScript

JavaScript es un lenguaje script basado en objetos, diseñado

específicamente para hacer que las páginas web sean dinámicas e interactivas.

JavaScript es un lenguaje para hacer programación web dinámica del lado

del cliente. Un lenguaje script es un lenguaje de programación interpretado que
requiere de un intérprete, quien traduzca las sentencias escritas en el lenguaje 10
Programación de web dinámico a código máquina cada vez que el programa es
ejecutado. JavaScript es interpretado por navegadores web, los cuales representan
a los clientes.

El lenguaje JavaScript está basado en objetos, ya que proporciona una

implementación del DOM, modelo que traduce la estructura de un documento HTML
a un árbol de objetos cuando este es cargado en un navegador web. Cada objeto
tiene métodos y atributos que pueden ser invocados desde código JavaScript para
su manipulación con el propósito de cambiar cualquier elemento del documento
HTML.

JavaScript puede ser incrustado directamente en el código de un documento

HTML (como se puede observar en la figura 10) o mediante archivos separados,
con el fin de que un navegador web los interprete y los ejecute cuando sea
requerido. Los archivos creados con JavaScript son en texto plano, sin formato, que
se almacenan con la extensión .js y están asociados a documentos HTML. El código
JavaScript puede ser interpretado por cualquier navegador web moderno, como
Mozilla Firefox, Google Chrome, Opera, Safari, Internet Explorer, entre otros.

31
 Sintaxis JavaScript

Fuente: https://baulderasec.wordpress.com/programacion/programando-con-
javascript/introduccion-a-la-programacion/sintaxis-de-javascript/

Figura 10. Sintaxis de JavaScript

Ventajas:

 Lenguaje de scripting seguro y fiable.

 Los scripts tienen capacidades limitadas, por razones de seguridad.
 El código Javascript se ejecuta en el cliente.

Desventajas:

 Código visible por cualquier usuario.

 El código debe descargarse completamente.
 Puede poner en riesgo la seguridad del sitio, con el actual problema llamado
XSS (significa en inglés Cross Site Scripting renombrado a XSS por su
similitud con las hojas de estilo CSS) [11].

32
2.4.5 Sencha
El marco de desarrollo de aplicaciones Web de Sencha ayuda a administrar
el ciclo de vida del desarrollo de software de las aplicaciones web. Se puede
diseñar, desarrollar y probar aplicaciones web que hagan un gran uso de datos y
ofrecer una experiencia buena experiencia de usuario, en la figura 11 podemos
observar el logotipo que representa esta aplicación [12].

Logotipo Sencha

Fuente: https://seeklogo.com/vector-logo/296938/sencha

Figura 11. Logotipo de Sencha

2.4.5.1 Características de Sencha

Sencha se utiliza para desarrollo de aplicaciones web interactivas que

además de flexibilizar el manejo de componentes de la página como el DOM,
Peticiones AJAX, DHTML, tiene la gran funcionalidad de crear interfaces de usuario
bastante funcionales. Creado por Jack Slocum, Brian Moeskau, Aaron Conran, Rich
Waters.

33
Ventajas

 Una de las grandes ventajas de utilizar ExtJS es que nos permite crear
aplicaciones complejas utilizando componentes predefinidos.
 Evita el problema de tener que validar el código para que funcione bien en
cada uno de los navegadores (Firefox, IE, Safari, Opera etc.).
 El funcionamiento de las ventanas flotantes lo pone por encima de cualquier
otro.
 Relación entre Cliente-Servidor balanceado: Se distribuye la carga de
procesamiento entre, permitiendo que el servidor pueda atender más clientes
al mismo tiempo.
 Eficiencia de la red: Disminuye el tráfico en la red pues las aplicaciones
cuentan con la posibilidad de elegir que datos desea trasmitir al servidor y
viceversa (Criterio este que puede variar con el uso de aplicaciones de pre-
carga).
 Comunicación asíncrona. En este tipo de aplicación el motor de render puede
comunicarse con el servidor sin necesidad de estar sujeta a un clic o una
acción del usuario, dándole la libertad de cargar información sin que el cliente
se dé cuenta.

Desventajas

 Necesidad de una plataforma: Pues dependemos del paquete ExtJS para

obtener los resultados deseados.
 El costo de una licencia LGPL.

34
2.4.5.2 Sencha Ext JS

Ext JS es un framework de JavaScript para la creación de aplicaciones Web

multiplataforma, que puede ser usado para crear aplicaciones para escritorios,
tablets y smartphones.

La edición Ext JS Premium, incluye Ext JS, D3, Adaptador, Grid de Pivot,
Calendario, Exportador, Sencha Themer, Arquitecto, Cmd, JetBrains, Visual Studio
y Eclipse IDE Plugins, Visual Studio Code Plugin e Inspector [12].

2.4.5.3 Sencha Extreact

ExtReact es el conjunto de componentes de React para la creación de
aplicaciones web intensivas en datos que utilizan React. Los componentes
interactúan entre sí, y se construyen, prueban y mantienen siguiendo una
metodolgía clara y profesional [12].

2.4.5.4 Sencha Text

Sencha Test es una solución de prueba funcional de extremo a extremo para
aplicaciones Ext JS. La solución de pruebas entre navegadores garantiza que
entregue aplicaciones de calidad y reduzca el tiempo de prueba [12].

2.4.5.5 CMD
Sencha Cmd nos ayuda en la construcción de sus aplicaciones Sencha.
Proporciona un conjunto completo de funciones de administración del ciclo de vida,
tales como etructura de proyecto, minificación de código y creación de empaqutedos
para llevar a producción [12].

35
2.4.5.6 Sencha Architect
Sencha Architect permite crear aplicaciones HTML5 arrastrando y soltando
componentes, de modo que se pasa menos tiempo en la codificación manual, se
evitan errores de codificación y el código de su aplicación se optimiza para obtener
un alto rendimiento, en la figura 12 podemos observar la interfaz de esta aplicación
[12].

Interfaz Sencha Architect

Fuente: https://www.sencha.com/blog/sencha-architect-4-0-is-now-generally-available/

Figura 12. Interfaz de Sencha Architect

2.4.5.7 IDE Plugins

Los plugins para los distintos IDE de Sencha permiten optimizar la utilización
de Sencha en los principales IDE. Los complementos admiten funciones como el
auto completado de código y la inspección. Existen plugins para los principales IDES
de desarrollo como son: Eclipse, Visual studio y Visual Estudio Code [12].

36
2.4.5.8 Sencha Inspector
Sencha Inspector es una herramienta de depuración que proporciona acceso
directo a componentes, clases y más para aplicaciones creadas con frameworks
Sencha. Le permite analizar su código para problemas, como el anidamiento
excesivo, y ayuda a mejorar el rendimiento [12].

2.4.5.9 Sencha Touch

Sencha Touch es un framework para aplicaciones web móviles basado en
HTML5 y JavaScript, el objetivo es crear aplicaciones móviles universales. Sencha
Touch está disponible en descarga gratuita. En marzo de 2015, Ext JS y Sencha
Touch se fusionaron en Ext JS 6.0. [12].

2.4.6 Sublime Text

Sublime Text es un editor de código multiplataforma, ligero y con pocas
concesiones a las florituras. Es una herramienta concebida para programar sin
distracciones. Su interfaz de color oscuro y la riqueza de coloreado de la sintaxis,
centra nuestra atención completamente, en la figura 13 podemos observar un
ejemplo del menú de esta herramienta.

37
 Menú Sublime Text

Figura 13. Menú Sublime Text

Fuente:https://www.genbeta.com/herramientas/sublime-text-un-sofisticado-editor-de-codigo
multiplataforma

Permite tener varios documentos abiertos mediante pestañas, e incluso

emplear varios paneles para aquellos que utilicen más de un monitor. Dispone de
modo de pantalla completa, para aprovechar al máximo el espacio visual disponible
de la pantalla.

El programa cuenta “de serie” con 22 combinaciones de color posibles,

aunque se pueden conseguir más. Para navegar por el código cuenta con Minimap,
un panel que permite moverse por el código de forma rápida.

El sistema de resaltado de sintaxis de Sublime Text soporta un gran número

de lenguajes (C, C++, C#, CSS, D, Erlang, HTML, Groovy, Haskell, HTML, Java,
JavaScript, LaTeX, Lisp, Lua, Markdown, Matlab, OCaml, Perl, PHP, Python, R,

38
Ruby, SQL, TCL, Textile and XML), en la figura 14 podemos observar la interfaz de
Sublime.

Ejemplo Interfaz Sublime Text

Fuente: https://www.genbeta.com/herramientas/sublime-text-un-sofisticado-editor-de-codigo-
multiplataforma

Figura 14. Interfaz principal Sublime Text.

El programa dispone de auto-guardado, muchas opciones de

personalización, cuenta con un buen número de herramientas para la edición del
código y automatización de tareas. Soporta macros, Snippets y auto completar,
entre otras funcionalidades. Algunas de sus características son ampliables
mediante plugins.

Sublime Text es un programa de pago, aunque se puede descargar una

versión de prueba, plenamente funcional y sin limitación de tiempo. La licencia
individual cuesta 59 dólares. Cada programador es un pequeño maniático con sus

39
credos y sus fobias respecto de las herramientas que emplea, pero si lo que quieres
es centrarte únicamente en el código, tal vez deberías probar Sublime Text. La
aplicación está disponible para OS X, Linux y Windows [13].

2.5.7 Cuentas por cobrar

Las cuentas por cobrar son derechos de cobro que posee una entidad sobre
terceros para determinada fecha.

También se las puede definir como la prestación que hace un individuo de

algunos de sus bienes con el objetivo de que en un plazo de tiempo los adquiera
nuevamente.
Este préstamo de algún bien es pagado con dinero en sumas parciales, y si
es el caso de que no se cumple con el pago, el individuo cuenta con el derecho de
recuperar lo que vendió a crédito.

Entre las características de esta definición podemos encontrar las siguientes:

Los derechos son cobrados en el plazo acordado ya sea a corto o largo

plazo.
Se evalúa el historial crediticio y financiero del cliente antes de hacer el
préstamo.

Se solicitan referencias para efectuar las cuentas.

Se establecen términos de pagos de intereses y de beneficios por pago
puntual.
Se emplean varios métodos de pago.

En este caso las cuentas por cobrar son de importancia para una empresa
pues representan los derechos que ella tiene sobre los clientes con el fin de obtener

40
beneficios ya sea mediante mercancías o servicios que tenga la empresa y sean
vendidos.

Con este método, la empresa o entidad que registre las cuentas por cobrar
(en la figura 15 se observa un ejemplo de la interfaz), obtiene un inventario sobre
dichos derechos que obtiene y logra beneficiar a los clientes ofreciendo nuevos
métodos de pago, tales como créditos y otras formas beneficiando al cliente, y, por
ende, a la empresa [14].

Sistema de Cuentas por Cobrar

Fuente: http://www.sbperu.net/finanzas-contabilidad-p3.html

Figura 15. Interfaz de Sistema Cuentas por Cobrar

41
2.5.8 Factura
Es un documento que contiene toda la relación de la compra-venta de bienes
o servicios, tiene validez legal y fiscal, en la figura 16 podemos observar un ejemplo.
Es legal porque ampara a los involucrados dando fe que la transacción se llevó a
cabo y fiscal porque permite al contribuyente comprobar sus ingresos y egresos y
es la clave para la declaración de los impuestos. A través de ella el SAT puede
reembolsar los impuestos correspondientes a los contribuyentes.

Factura Electrónica

Fuente: https://milformatos.com/empresas-y-negocios/formato-de-factura/

Figura 16. Factura

42
 Actualmente en México se emite la Factura Electrónica o Comprobante Fiscal
Digital por Internet (CFDI), el cual es un comprobante digital implementado por la
autoridad fiscal de nuestro país, apegado a los estándares definidos por el SAT en
los últimos años. Permite generar, transmitir y almacenar los comprobantes por
medios electrónicos.

Cada factura electrónica cuenta con elementos de seguridad al ser emitida:

 Sello Digital. (Firma Electrónica Avanzada) lo que confirma su origen,

le da validez y la hace única.

 Cadena original. La cual funciona como el resumen del contenido de

la factura.

 Folio. Asignado por el SAT, que indica el número de transacción del

vendedor

 Timbrado. La CFDI requiere ser timbrada por el Proveedor Autorizado

de Certificación (PAC), por lo tanto, se requiere que le compres una cantidad
específica de timbres fiscales, a menos que desees utilizar la aplicación
creada por el SAT, en la cual los timbrados no tienen costo. Si quieres un
formato de factura que no sea el que tiene el SAT revisa la lista de
proveedores aquí.

 Archivo electrónico XML, es la factura que se genera, la cual tiene una

representación impresa (PDF), este archivo es el que realmente es válido
ante el SAT.

 Serie del certificado digital del SAT con el que se realizó el sellado.

 Fecha y hora de Certificación.

Además de los elementos que conformaban las facturas anteriores:

 Registro Federal de Contribuyentes (RFC) de quien expide

 Régimen Fiscal en el que tributen

43
 Lugar y fecha de expedición.

 RFC a favor de quien se le expide la factura

 Descripción de lo que ampara la Factura (Cantidad, unidad de medida

y clase de producto o servicio).

 Valor unitario en número.

 Importe total señalado en número y/o letra.

 Señalamiento expreso de pago (en una exhibición o en parcialidades).

 Cuando proceda, el monto de impuestos trasladados, desglosados por

tasa de impuesto y, en su caso, el monto de impuestos retenidos.

 Forma de Pago (efectivo, transferencia electrónica, cheque

nominativo, tarjeta de débito, crédito o servicio, etc.)

 Número y fecha del documento aduanero, en ventas de primera mano

de productos de importación [15].

44
Capítulo llI
Desarrollo de Sistema y Resultados

45
3.1 Diseño

El control en los procesos de las empresas es una de las principales causas

por las que se decide desarrollar un sistema, Colegio Andes de Mazatlán cuenta
con un sistema desarrollado especialmente para la empresa por el departamento
de TICS de Pyansa.

Debido a que el sistema fue desarrollado hace varios años, este cuenta con
errores que hacen que en una gran cantidad de procesos el usuario tenga que
llamar al departamento de soporte para que sean realizados directamente en el
código del sistema, otro punto importante es que el sistema está desarrollado en
lenguajes de programación que ya no son utilizados en la empresa, lo que hace muy
difícil el mantenimiento y crecimiento de este.

Por las razones mencionadas anteriormente se decidió la realización de un

nuevo sistema de Cuentas por Cobrar para Colegio Andes en el que se planea, se
pueda realizar la generación de carnets para inscripciones y colegiaturas, además
el cobro de estos y por último el proceso de facturación de estos cobros.

El desarrollo del sistema no solo requiere de la experiencia de los

trabajadores, sino también de la correcta utilización de la metodología que sea
seleccionada por la empresa para este, en este caso se decidió manejar Scrum, la
cual es una metodología ágil y flexible para gestionar el desarrollo de software, se
basa en construir primero la funcionalidad de mayor valor para el cliente y en los
principios de inspección continua, adaptación, auto-gestión e innovación.

Algunas de las razones por las que la empresa se decidió a utilizar esta
metodología fueron:

 Flexibilidad a cambios: Alta capacidad de reacción ante los cambios de

requerimientos generados por necesidades del cliente o evoluciones del
mercado. La metodología está diseñada para adaptarse a los cambios de
requerimientos que conllevan los proyectos complejos.

46
  Reducción del Time to Market: El cliente puede empezar a utilizar las
funcionalidades más importantes del proyecto antes de que esté finalizado
por completo.

 Mayor calidad del software: La metódica de trabajo y la necesidad de obtener

una versión funcional después de cada iteración, ayuda a la obtención de un
software de calidad superior.

 Mayor productividad: Se consigue entre otras razones, gracias a la

eliminación de la burocracia y a la motivación del equipo que proporciona el
hecho de que sean autónomos para organizarse.

 Maximiza el retorno de la inversión (ROI): Producción de software

únicamente con las prestaciones que aportan mayor valor de negocio gracias
a la priorización por retorno de inversión.

 Predicciones de tiempos: Mediante esta metodología se conoce la velocidad

media del equipo por sprint (los llamados puntos historia), con lo que
consecuentemente, es posible estimar fácilmente para cuando se dispondrá
de una determinada funcionalidad que todavía está en el Backlog.

 Reducción de riesgos: El hecho de llevar a cabo las funcionalidades de más

valor en primer lugar y de conocer la velocidad con que el equipo avanza en
el proyecto, permite despejar riesgos eficazmente de manera anticipada [16].

Como se muestra en la figura 17, gracias a la metodología Scrum se pueden

crear distintos artefactos, en este caso uno de los productos de mayor importancia
que se desarrolló durante el proceso del diseño del sistema fue el Product Backlog,
en el cual se asignaron cada una de las tareas que el sistema realizaría, el tiempo
estimado y las personas asignadas para la realización de estas.

47
 Ejemplo de Product Backlog

Fuente: https://es.slideshare.net/jorgeabad1/una-introduccin-a-scrum

Figura 17. Product Backlog

48
3.2 Desarrollo del sistema

El sistema de cuentas por cobrar se basa en el cobro de colegiaturas e

inscripciones para la empresa Colegio Andes, dentro de este se desarrollaron una
gran cantidad de módulos para facilitar al usuario el registro de los cobros, así como
la creación de carnets.

En la pantalla principal se muestra el logo creado especialmente para el

sistema, así como una caja de texto con la opción de seleccionar la empresa y el
ciclo escolar en el que se trabajará, en el caso de que el usuario no haya
seleccionado alguno de estos datos los catálogos aparecerán en blanco, debido a
que es información indispensable para el correcto uso del sistema, en la figura 18
podemos observar un ejemplo de una interfaz creada en Sencha.

Ejemplo Menú Principal en Sencha.

Fuente: https://javascriptx.wordpress.com/2015/09/14/layouts-y-contenedores-en-sencha-extjs-
6/

Figura 18. Menú Principal

49
 Este sistema cuenta con un menú que se divide en tres partes: catálogos,
operaciones y configuración.

Catálogos.

Debido a que dentro de un sistema de cuentas por cobrar se realizan

procesos tanto de facturación como de generación de cobros, se necesitan distintos
catálogos que faciliten al usuario dar de alta operaciones, el sistema cuenta con los
siguientes catálogos:

Formas de pago: Se dan de alta las distintas formas con las que el cliente
puede realizar el pago de las inscripciones y colegiaturas, se agrega una clave de
acuerdo a la clave asignada por el SAT para cada una de las formas de pago.

Bancos: Se agregan, modifican y consultan los bancos en los que la empresa

tiene cuentas bancarias, además se agregan todos los datos necesarios para poder
hacer depósitos en esas cuentas.

Datos de Facturación: Se agregan los datos de facturación como la razón

social, RFC, domicilio fiscal y uso de CFDI por familia para posteriormente facturar
con estos.

Usos de CFDI: Este módulo se utiliza para dar de alta los usos que el cliente
le dará a la factura, se agrega el nombre del uso y la clave que le corresponde según
el SAT.

Referencias: En este módulo se dan de alta las referencias de cada uno de

los alumnos para las colegiaturas e inscripciones, siguiendo un criterio de
asignación proporcionado por el banco para la validación del usuario que realizó el
pago y así los pagos se vean reflejados en un futuro directamente al pagar en
ventanilla, sin la necesidad de asistir al colegio para entregar un comprobante de
pago.

Instituciones: En esta opción se dan de alta las instituciones, agregando los

datos de facturación de estas como la razón social, RFC, domicilio fiscal, etc.

50
 Cuotas Colegiaturas: Este catálogo sirve para dar de alta, modificar y
consultar las cuotas de colegiatura, dependiendo del grado del alumno.

Cuotas Inscripciones: Se agregan las cuotas de las inscripciones de acuerdo

a la institución y ciclo seleccionado, también se pueden aplicar promociones de
acuerdo con la fecha en la que se realice el pago.

Cuotas Transportes: Se dan de alta, modifican y cambia el estatus de las

cuotas del transporte del colegio.

Tipos de movimientos: En este catálogo se dan de alta los diferentes

movimientos que se requieren en el sistema, algunos de los cuales debido a las
necesidades con las que cuenta actualmente el sistema pueden ser: colegiaturas e
inscripciones, además de ser dados de alta, los movimientos se pueden desactivar,
modificar y consultar, en la figura 19 podemos observar un formulario creado en
Sencha.

Ejemplo de formulario

Fuente: https://javascriptx.wordpress.com/2015/09/02/desarrollo-simple-de-crud-php-para-aplicaciones-
web-con-sencha-extjs-6/

Figura 19. Formulario en Sencha

51
Operaciones.

Asignar Camión: Se agregan los meses en los que cada alumno tendrá
asignado un camión y el tipo de camión que se solicitó, generando un cobro mensual
dependiendo de las cuotas dadas de alta en el módulo cuotas transporte, el mismo
que se verá reflejado en el carnet de colegiaturas.

Carnets Colegiatura: Para generar un carnet de colegiatura, se debe

seleccionar en el sistema el alumno al que se le generará el carnet, después se
seleccionará si se necesita para todo el ciclo o se seleccionan los meses en los que
se debe generar, el sistema generará un carnet de colegiatura por mes, el cual
podrá se impreso, ya que, tendrá la opción de convertirse en PDF, si el ciclo en el
que se está trabajando es futuro el sistema aumentará el nivel educativo del alumno.

Carnets Inscripción: El módulo de carnets de inscripción funciona de la misma

manera que el módulo de colegiaturas, pero aplicado a la generación de carnets de
inscripción, por lo que solo se genera un carnet por ciclo escolar.

Cobros: En este módulo se agregan los cobros de colegiaturas e

inscripciones, al entrar a este se muestra una tabla con los datos de los cobros
realizados durante el ciclo escolar seleccionado en una caja de texto, se tiene la
opción de agregar un nuevo cobro en donde se puede agregar la matrícula del
alumno o seleccionarla mediante un buscador, también se selecciona el tipo de
carnet que será pagado, este puede ser colegiatura o inscripción, los datos de
facturación, en el caso de no haber dado de alta alguno automáticamente el sistema
selecciona público en general, además el usuario tendrá que seleccionar la forma
de pago y el sistema arrojará los totales, los cuales pueden variar dependiendo de
la beca con la que el alumno cuente, el transporte y los recargos generados por el
pago impuntual de colegiaturas.

Anualidad: Al pagar el usuario la suma de todas las colegiaturas del año, el

sistema por pronto pago se encarga de generar un descuento, dentro de este
módulo se realiza el pago de las colegiaturas y se aplica el descuento otorgado por
el colegio.

52
Utilerías.

Esta parte cuenta solo con el cierre de sesión del sistema, no obstante, se
planea agregar un módulo a este menú en el que se encontrará el manual de usuario
con toda la información necesaria para que el usuario pueda utilizar el sistema.

La mayoría de los módulos cuenta con una tabla (como se muestra en la

figura 20) donde el usuario puede observar la información dada de alta en el
sistema.

Tablas en Sencha

Fuente: https://miltecnologia.blogspot.com/2013/04/personalizar-listview-en-android.html?view=classic

Figura 20. Grid Panel en Sencha

53
3.3 Herramientas de Desarrollo

Cake PHP

El modelo vista controlador es un patrón que se utiliza para el desarrollo de software,

en el que se realiza una separación de la lógica con la que se desarrolla la aplicación
y la interfaz de esta, por lo que da como resultado tres capas, que son: El modelo,
donde se alojan los datos del sistema, los controladores donde se encuentra la
lógica de la aplicación y por último las vistas, que es el diseño de las interfaces de
usuario.

Debido a la gran cantidad de ventajas con las que cuenta Cake PHP se decidió
manejar el controlador de este framework en conjunto con la vista y modelo creados
en Sencha Architect.

En Cake PHP se realizaron principalmente las consultas para solicitudes a las bases
de datos, por lo que se tienen 4 funciones diferentes en las que la consulta varía
dependiendo de las tablas a llamar pero que la estructura se repite en cada uno de
los módulos, estas funciones son: Read, Create, Actualiza y Update, a continuación,
se explicará más a fondo cada una de estas funciones.

Función Read

Esta es la función encargada de hacer las consultas necesarias para mostrar

en las tablas donde el usuario consulta información de la base de datos, se trata de
consultas select donde se les manda un dato directamente del sistema como filtro.

Al igual que en el resto de las funciones se debe realizar la conexión con la

base de datos y llamar los datos necesarios para realizar la consulta, posteriormente
se realiza esta y se agrega a una variable el resultado, en la figura 21 podemos
observar la función.

54
 Ejemplo de función Read

Fuente: Propia

Figura 21. Función Read

Función Create

En la función Create se agrega a la base de datos, esta función cuenta con

un insert desde el cual se mandan los datos que se encuentran en el formulario del
cliente, al igual que la función anterior, el resultado se envía a una variable, en la
figura 22 podemos observar la función.

Ejemplo de función Create

Fuente: Propia

Figura 22. Función Create

55
Función Actualiza

La función Actualiza se utiliza para modificar los registros ya dados de alta

en la base de datos, cuenta con la conexión a esta, un Update que está filtrado por
id y los datos que serán modificados son enviados desde Sencha por el método
Post, en la figura 23 podemos observar la función.

Ejemplo de función Read

Fuente: Propia

Figura 23. Función Actualiza

Función Update

Debido a que la información de los sistemas es de suma importancia y no se

puede perder, los datos en el sistema no se borran, solo cambia el estatus a
cancelado, por lo que la función Update se encarga de realizar este proceso.

Después de realizar la conexión a la base de datos en una variable se

guardan los datos que se van a modificar, se crea un for para que se pueda leer la
variable las veces que el array tenga datos y se hace el Update, guardando los
resultados de este en una variable, en la figura 21 podemos observar la función.

56
 Ejemplo función Update

Fuente: Propia

Figura 24. Función Update

Sencha Architect

Sencha Architect facilita la creación de sitios web debido a que cuenta con
funciones en las que solo se tienen que arrastrar y soltar componentes, lo que ayuda
con el ahorro de tiempo en la codificación manual y se optimiza el código de la
aplicación.

Para la realización del sistema Cuentas por Cobrar se utilizó este framework,
utilizando su modelo y vistas, Sencha Architect es fácil de utilizar por lo que no se
requirió de una gran capacitación, además la mayoría de los procesos creados
fueron repetidos en cada uno de los módulos.

A continuación, se mostrarán los procesos necesarios para mostrar, agregar,

eliminar y modificar los datos en cada uno de los módulos.

57
Load

La función load (como se muestra en la figura 25) se encarga de cargar el

Store donde se encuentra la consulta hecha con Cake PHP y regresar el resultado
de esta, dentro de esta función se pueden enviar datos para realizar el filtrado de la
consulta, si este proceso se hace dentro de una tabla o un formulario y el nombre
de los campos corresponde al del modelo y la consulta hecha, Sencha en
automático carga los datos en la tabla o formulario, agilizando código y optimizando
los procesos.

Función Load

Fuente: Propia

Figura 25. Función Load

Función Create

La función Create (como se muestra en la figura 26) se encarga de enviar los

datos que se encuentran en el formulario al Store donde se encuentra la función de
Cake PHP que agrega a la base de datos, una vez enviados y procesados los datos
da como respuesta si el proceso se realizó exitosamente o falló.

58
 Función Create

Fuente: Propia

Figura 26. Función Create

Función Actualiza

La función actualiza (como se muestra en la figura 27) se encarga de la

modificación de los datos que se encuentran en los formularios, no todos los
módulos del sistema cuentan con esta opción debido a que hay información que es
de suma importancia y no puede ser modificada por el usuario.

Funciona de una manera similar a la función Create, debido a que se encarga

de enviar todos los datos que se encuentran en el formulario al store que manda a
la ruta de la función en Cake PHP donde se encuentra la consulta que modifica cada
uno de los datos que se encuentran en el formulario, como resultado regresa si la
operación se realizó exitosamente.

59
 Función Actualiza

Fuente: Propia

Figura 27. Función Actualiza

Función Update

La función Update (como se muestra en la figura 28) se encarga de modificar

el estatus de los registros dentro del sistema, esta función está dividida en dos
partes: activación del registro y desactivación, por medio de un if el sistema consulta
si el estatus del registro es activo o inactivo y lo modifica, esta consulta al igual que
las anteriores regresa un mensaje con el resultado.

60
 Función Update

Fuente: Propia

Figura 28. Función Update

Librería FPDF

Dentro del sistema se necesitó el envío de un PDF con el carnet de

colegiaturas e inscripciones por medio del correo, por lo que se utilizó la librería
FPDF para el envío de estos.

Para su uso, se necesitó la instalación de esta librería y se utilizó con la

herramienta sublime text programando en PHP cada uno de los reportes. En la
figura 29 se muestra cómo se realizó el envío de correos por medio de esta librería.

61
Envío de PDF por correo

Fuente: Propia

Figura 29. Envío de PDF

62
Resultados y discusión

Los resultados realmente no se han visto, debido a que el sistema aún se

encuentra en desarrollo, se logró finalizar aproximadamente el 60% del total del
sistema, realizando pruebas durante la terminación de cada uno de los módulos.

El sistema de Cuentas por Cobrar se desarrolló en un framework confiable

que ayudó a la optimización de código, haciendo más fácil el desarrollo de este,
durante el periodo de estadías se logró terminar el desarrollo de todos los módulos
del menú catálogos y la mayor parte del menú de operaciones por lo que se avanzó
considerablemente en el desarrollo del proyecto.

Debido a que muchas de las funcionalidades del sistema se tratan de

procesos muy importantes para el colegio, cada una de estas se debe revisar y estar
bajo la supervisión tanto de las personas que manejarán el sistema como los líderes
de proyecto, es por eso que se han planeado juntas donde las encargadas del uso
del sistema lo utilizarán y pondrán a prueba, observando cuáles son los procesos
que han mejorado y cuáles pueden ser optimizados un poco más.

63
Recomendaciones y/o sugerencias

Como recomendación se sugiere que el departamento de TICS esté al

pendiente de los procesos necesarios dentro de las empresas a las que se les
desarrolla software, debido a que muchos de los procesos en los que se trabaja
dentro de los sistemas no estaban claros y entorpecen el proceso de desarrollo de
software a los programadores.

También se recomienda que haya documentación sobre las metodologías y

las formas en las que se trabaja en la empresa, así como los procesos que realizan
los sistemas desarrollados para facilitar la capacitación y los procesos de soporte y
mantenimiento de los sistemas.

Es importa que se revise el avance de los programadores y se haga una

retroalimentación a estos para mejorar procesos que no se están haciendo
correctamente.

64
Conclusión

En la actualidad, el uso de un sistema para manejar los procesos

administrativos y contables de una empresa es indispensable para el correcto
funcionamiento de esta. Es por esto que es de suma importancia que las empresas
cuenten con sistemas capaces de crecer con ellas y que faciliten y hagan confiables
los procesos que manejan.

El sistema no se terminó en su totalidad, debido a que su finalización está

contemplada para el mes de enero, se considera que una vez completado e
implementado agilice los procesos de la empresa para la que fue creado en un 30%.

En cuanto al aprendizaje, gracias al desarrollo del sistema durante el proceso

de estadías se observó el proceso que una empresa debe seguir para el correcto
desarrollo de un sistema, además las características y valores que se buscan en
cada uno de los empleados, como son la puntualidad, responsabilidad, compromiso,
trabajo en equipo, etc. los cuales hacen que los sistemas se puedan desarrollar
fácilmente y en armonía, también se observó que el liderazgo es una parte
importante del desarrollo y se reforzaron los conocimientos adquiridos durante el
periodo escolar, dejando un conocimiento en PHP, SQL y Ext.JS.

65
Glosario

Testing. Investigación técnica de un producto bajo prueba con el fin de brindar

información relativa a la calidad del software, a los diferentes actores involucrados
en un proyecto [17].

Plugins. Un Plugin es un fragmento o componente de código hecho para ampliar

las funciones de un programa o de una herramienta [18].

DOM. DOM es una abreviatura de Document Objet Model, el DOM es la

estructura de objetos que genera el navegador cuando se carga un documento y se
puede alterar mediante Javascript para cambiar dinámicamente los contenidos y
aspecto de la página [19].

AJAX. AJAX significa JavaScript asíncrono y XML (Asynchronous JavaScript and

XML). Es un conjunto de técnicas de desarrollo web que permiten que las
aplicaciones web funcionen de forma asíncrona, procesando cualquier solicitud al
servidor en segundo plano [20].

Bugs. Se refiere a un error o defecto en el software que hace que un programa no

funcione correctamente [21].

Programación Orientada a Objetos. La programación orientada a objetos (POO,

u OOP según sus siglas en inglés) es un paradigma de programación que viene a
innovar la forma de obtener resultados. Los objetos manipulan los datos de entrada
para la obtención de datos de salida específicos, donde cada objeto ofrece una
funcionalidad especial [22].

Multiplataforma. Es un término usado para referirse a los programas, sistemas

operativos, lenguajes de programación, u otra clase de software, que puedan
funcionar en diversas plataformas [23].

66
Navegador. Se conoce como navegador web (o simplemente navegador) o también
explorador web (o simplemente explorador) a un programa informático que permite
al usuario ingresar a las páginas Web que desee, siempre que conozca la dirección
URL en donde se encuentra (por ejemplo: www.google.com) o bien que haga clic
en un hipervínculo que conduzca a dicha página [24].

HTML. Es el lenguaje con el que se define el contenido de las páginas web.

Básicamente se trata de un conjunto de etiquetas que sirven para definir el texto y
otros elementos que compondrán una página web, como imágenes, listas, vídeos,
etc. [25].

Metodología ágil. Son aquellas que permiten adaptar la forma de trabajo a las
condiciones del proyecto, consiguiendo flexibilidad e inmediatez en la respuesta
para amoldar el proyecto y su desarrollo a las circunstancias específicas del entorno
[26].

Product Backlog. El product backlog (o pila de producto) es un listado de todas las

tareas que se pretenden hacer durante el desarrollo de un proyecto [27].

Hardware. Hardware es una palabra inglesa que hace referencia a las partes físicas
tangibles de un sistema informático, es decir, todo aquello que podemos tocar con
las manos. [28]

RAM. Random Access Memory (en español Memoria de Acceso Aleatorio), es una
pequeña memoria de rápidas prestaciones que usa el ordenador para trabajar
internamente y almacenar datos a los que necesita acceso rápido [29].

Software. Este término designa al equipo lógico de una computadora, opuesto a los
aspectos físicos de la misma [30].

CRUD. En computación CRUD es el acrónimo de Crear, Leer, Actualizar y Borrar

(del original en inglés: Create, Read, Update and Delete). Se usa para referirse a
las funciones básicas en bases de datos o la capa de persistencia en un software
[31].

67
Scaffolding. Es una técnica que permite a un desarrollador definir y crear
aplicaciones básicas que pueden crear, leer, actualizar y borrar objetos [32].
LGPL. (GNU Lesser General Public License en español Licencia Pública General
Reducida de GNU) es una licencia de software libre publicada por la Free Software
Foundation [33].

React. Es una librería Javascript focalizada en el desarrollo de interfaces de usuario.

Así se define la propia librería y evidentemente, esa es su principal área de trabajo
[34].

68
Bibliografía

[1] - Programación web: La evolución hacia los Frameworks", Blog Tresce, 2019.
[Online]. Sitio Web: https://www.tresce.com/blog/programacion-web-la-evolucion-
hacia-los-frameworks/.

[2] - Ventajas y beneficios de las aplicaciones Web - 2019. [Online]. Sitio Web:
https://www.internetya.co/ventajas-y-beneficios-de-las-aplicaciones-web/.

[3] - A. Vonica, "Ventajas y desventajas de las aplicaciones web.", APLICACIONES

WEB, 2019. [Online]. Available:
https://lasaplicacioneswebblog.wordpress.com/2016/10/02/ventajas-y-desventajas-
de-las-aplicaciones-web/.

[4] - P. informáticos, "Programador de sistemas informáticos -

educaweb.com", Educaweb.com, 2019. [Online]. Available:
https://www.educaweb.com/profesion/programador-sistemas-informaticos-363/.

[5] - "Entorno de Desarrollo Integrado (IDE).", fergarciac, 2019. [Online]. Sitio Web:
https://fergarciac.wordpress.com/2013/01/25/entorno-de-desarrollo-integrado-ide/.

[6] - "Que es un framework y para que se utiliza en programación", Comenzando de

Cero, 2019. [Online]. Sitio Web: https://comenzandodecero.com/que-es-un-
framework-y-para-que-se-utiliza-en-programacion/.

[7] - "¿Te interesa la informática?", Noticias Universia Argentina, 2019. [Online].

Sitio Web:

https://noticias.universia.com.ar/consejosprofesionales/noticia/2016/02/22/1136443
/conoce-cuales-lenguajes-programacion-populares.html

[8] - "¿Qué puede hacer PHP?", Php, 2019. [Online]. Sitio Web:
https://www.php.net/manual/es/intro-whatcando.php

[9] - "Cakephp - EcuRed", Ecured.cu, 2019. [Online]. Sitio Web:

https://www.ecured.cu/Cakephp.

69
[10] - Microsoft. Access SQL: conceptos básicos, vocabulario y sintaxis (2016). Sitio
Web:https://support.office.com/es-es/article/access-sql-conceptos-
b%C3%A1sicos-vocabulario-y-sintaxis-444d0303-cde1-424e-9a74-e8dc3e460671

[11] - C. Jaimez González, Programación web dinámico, 1 ed. México D.F., 2014,
p. 10.

[12] - DevOps. (2019). Qué es Sencha - DevOps. [online] Sitio Web:

http://devops.mediainline.com/que-es-sencha/

[13] Sublime Text, un sofisticado editor de código multiplataforma. (2019). [online]

Sitio Web: https://www.genbeta.com/herramientas/sublime-text-un-sofisticado-
editor-de-codigo-multiplataforma

[14] “Cuentas por cobrar - ¿Qué son?, tipos, importancia y características”.

(2019).[Online]. Sitio Web: , from https://enciclopediaeconomica.com/cuentas-por-
cobrar/

[15 ] “Formato de Factura > Ejemplos y Formatos” (2019). [Online]. Sitio Web:
https://milformatos.com/empresas-y-negocios/formato-de-factura/

[16] - "Metodología SCRUM para desarrollo de software a medida",

www.softeng.es, 2019. [Online]. Sitio Web: https://www.softeng.es/es-
es/empresa/metodologias-de-trabajo/metodologia-scrum.html.

[17] - "Nuestra visión", Ces.com.uy, 2019. [Online]. Sitio Web:

https://www.ces.com.uy/index.php/ique-es-el-testing/nuestra-vision.

[18] – ¿Qué es un Plugin y para qué sirve? - Neo Wiki | NeoAttack", Neoattack,
2019. [Online]. Sitio Web: https://neoattack.com/neowiki/plugin/.

[19] – "Qué es el DOM", Desarrolloweb.com, 2019. [Online]. Sitio Web:

https://desarrolloweb.com/articulos/que-es-el-dom.html.

[20] - ¿Qué Es AJAX Y Cómo Funciona?", Tutoriales Hostinger, 2019. [Online]. Sitio
Web: https://www.hostinger.mx/tutoriales/que-es-ajax/.

70
[21] - A. Frutos, "¿Qué es bug?", ComputerHoy, 2019. [Online]. Sitio Web:
https://computerhoy.com/noticias/software/que-es-bug-51858.

[22] - "9.3. Programación orientada a objetos — Materiales del entrenamiento de

programación en Python - Nivel básico", Entrenamiento-python-
basico.readthedocs.io, 2019. [Online]. Sitio Web: https://entrenamiento-python-
basico.readthedocs.io/es/latest/leccion9/poo.html.

[23] - Multiplataforma - EcuRed", Ecured.cu, 2019. [Online]. Sitio Web:

https://www.ecured.cu/Multiplataforma.

[24] - "Navegador Web: Concepto, Ejemplos y Qué es un buscador Web",

Concepto.de, 2019. [Online]. Sitio Web: https://concepto.de/navegador-web/.

[25] - "Qué es HTML", Desarrolloweb.com, 2019. [Online]. Sitio Web:

https://desarrolloweb.com/articulos/que-es-html.html.

[26] - V. Villán, "Las metodologías ágiles más utilizadas y sus ventajas dentro de la
empresa", Blog de IEBSchool, 2019. [Online]. Sitio Web:
https://www.iebschool.com/blog/que-son-metodologias-agiles-agile-scrum/.

[27] – J. Ramos, "Scrum: ¿Qué es el Product Backlog?", Programacionymas.com,

2019. [Online]. Sitio Web: https://programacionymas.com/blog/scrum-product-
backlog.

[28] – "Qué es el Hardware? Para qué sirve y definición", Profesional Review, 2019.
[Online]. Sitio Web: https://www.profesionalreview.com/hardware/.

[29] – RAM", Sistemas.com, 2019. [Online]. Sitio Web:

https://sistemas.com/ram.php.

[30] – Software: Concepto, Tipos de software y Cuadro sinóptico", Concepto.de,

2019. [Online]. Sitio Web: https://concepto.de/software/.

[31] – "Definición de CRUD", Lawebdelprogramador.com, 2019. [Online]. Sitio Web:

https://www.lawebdelprogramador.com/diccionario/2562-CRUD.html.

71
[32] – "Scaffolding - 1.3", Book.cakephp.org, 2019. [Online]. Sitio Web:
https://book.cakephp.org/1.3/es/The-Manual/Developing-withCakePHP-
/Scaffolding.html.

[33] – "LGPL", Documentación web de MDN, 2019. [Online]. Sitio Web:

https://developer.mozilla.org/es/docs/Glossary/LGPL.

[34] – "Qué es React. Por qué usar React", Desarrolloweb.com, 2019. [Online]. Sitio
Web: https://desarrolloweb.com/articulos/que-es-react-motivos-uso.html.

72