PROGRAMA EDUCATIVO EN

TECNOLOGÍAS DE LA INFORMACIÓN Y
COMUNICACIÓN

TÍTULO DE LA MEMORIA:
CENSO DE POBLACIÓN
“DISEÑO Y PROGRAMACIÓN DE API REST”

NOMBRE DEL ALUMNO:

JULIÁN BARRAGÁN BRAVO

MEMORIA DE ESTADÍA
PARA OBTENER EL TITULO DE:
TÉCNICO SUPERIOR UNIVERSITARIO EN SISTEMAS
INFORMÁTICOS

Tehuacán, Puebla a 09 de agosto del 2019.

Gestión de operaciones técnicas

Memoria de estadía realizada por Julián Barragán Bravo bajo la dirección del comité y
asesor indicado, aprobada y aceptada por el mismo como requerimiento para obtener
el grado de:
Técnico Superior Universitario en Tecnologías de la Información y Comunicación
del área de “Sistemas Informáticos”.

ASESOR INTERNO: _______________________________________

Ing. Luis Alberto Córdova Osorio

ASESOR EXTERNO: _______________________________________

Ing. Mario Castro Salvador

JEFE DE CARRERA: _______________________________________

Ing. Juan Diego Escobedo García
Agradecimientos

Primeramente, doy gracias a Dios por permitirme tener una buena experiencia dentro
de mi universidad, gracias a ella por permitirme convertirme en ser un profesional en lo
que tanto me apasiona, gracias a cada maestro que formo parte de este proceso
integral de formación, que deja como producto terminado en este grupo de graduados,
y como recuerdo y prueba viviente en la historia; esta tesina, que perdurará dentro de
los conocimientos y desarrollo de las demás generaciones que están por llegar.

No ha sido sencillo el camino hasta ahora, pero gracias a los aportes, a el amor, a la
inmensa bondad y apoyo de toda mi familia y amigos, lo complicado de lograr esta
meta se ha notado menos. Les agradezco, y hago mi gran afecto hacia ustedes.

Finalmente agradezco a quien lee este, por permitir a mis experiencias,

investigaciones, y conocimiento, incurrir dentro de su repertorio de información mental.
Contenido
CAPÍTULO I INTRODUCCIÓN.........................................................................................1
1.1 Resumen.....................................................................................................................2
1.2 Abstract......................................................................................................................3
1.3 Introducción...............................................................................................................4
1.4 Justificación...............................................................................................................5
1.6 Objetivo general.........................................................................................................6
1.7 Objetivos específicos................................................................................................6
CAPÍTULO II MARCO HISTÓRICO..................................................................................7
2.1 Antecedentes históricos...........................................................................................8
2.2 Misión..........................................................................................................................9
2.3 Visión..........................................................................................................................9
2.4 Políticas generales....................................................................................................9
2.5 Valores......................................................................................................................11
2.6 Principales áreas de la empresa............................................................................11
2.7 Descripción del área de realización de estadía....................................................12
2.8 Organigrama............................................................................................................13
CAPÍTULO III MARCO TEÓRICO..................................................................................14
3.1 Internet......................................................................................................................15
3.4 JavaScript.................................................................................................................16
3.5 TypeScript.................................................................................................................16
3.7 XAMPP......................................................................................................................17
3.8 JSON.........................................................................................................................17
3.9 Git..............................................................................................................................18
3.9 Github.......................................................................................................................19
3.10 NodeJs....................................................................................................................20
3.11 Express...................................................................................................................20
3.12 Heroku.....................................................................................................................21
3.13 SQLyog...................................................................................................................21
3.14 Visual Studio Code................................................................................................22
3.15 Npm.........................................................................................................................22
3.16 Middelwares...........................................................................................................23
CAPÍTULO IV METODOLOGÍA......................................................................................24
4.1 Descripción de actividades....................................................................................25
4.1.2 Inicio.......................................................................................................................26
4.1.2 Planeación.............................................................................................................26
4.1.3 Ejecución...............................................................................................................26
4.1.5 Evaluación.............................................................................................................51
CAPÍTULO V RESULTADOS Y DISCUSIÓN.................................................................52
5.1 Resultados...............................................................................................................53
5.2 Discusión..................................................................................................................53
5.3 Conclusiones...........................................................................................................54
5.4 Referencias Bibliográficas.....................................................................................55
5.5 Glosario....................................................................................................................56
 ÍNDICE DE FIGURAS

Figura 1. Logo de la empresa.........................................................................................8

Figura 2. Organigrama de la empresa.........................................................................13
Figura 3. Estructura JSON............................................................................................18
Figura 4. Comandos de Git...........................................................................................18
Figura 5. Interfaz web de GitHub, donde se muestra el proyecto compartido.......19
Figura 6. Funciones Heroku.........................................................................................21
Figura 7. Función de una API REST............................................................................23
Figura 8. WBS y Diagrama de Gantt............................................................................25
Figura 9. Pantalla de bajo nivel (Login).......................................................................27
Figura 10. Pantalla de bajo nivel (Integrantes)...........................................................27
Figura 11.Pantalla de bajo nivel (Domicilio)...............................................................27
Figura 12. Pantalla bajo nivel (Uso de agua)..............................................................28
Figura 13. Pantalla bajo nivel (Servicios Básicos).....................................................28
Figura 14. Pantalla bajo nivel (Representante)..........................................................29
Figura 15. Pantalla bajo nivel (Servicios Importancia)..............................................29
Figura 16. Pantalla bajo nivel (Actividades)...............................................................30
Figura 17. Pantalla bajo nivel (Limpieza)....................................................................30
Figura 18. Pantalla de bajo nivel (Servicios o Comercios).......................................30
Figura 19. Pantalla Alto nivel (Login)..........................................................................31
Figura 20. Base de datos CENSO................................................................................32
Figura 21. Dependencias utilizadas en el proyecto...................................................33
Figura 22. Configuración y Middelwares....................................................................33
Figura 23. Archivo de conexión a la base de datos...................................................34
Figura 24. Método connection.on de MySQL.............................................................35
Figura 25. Método GET de usuarios............................................................................36
Figura 26. Declaración de ruta GET para usuarios....................................................37
Figura 27. Requerir la ruta usuarios............................................................................38
Figura 29. Prueba en el navegador de la ruta usuarios.............................................39
Figura 30. Método para insertar un usuario...............................................................40
Figura 31. Ruta para insertar usuarios........................................................................41
Figura 32. Insertar datos mediante Postman..............................................................42
Figura 33. Mensaje de confirmación insertando un usuario....................................42
Figura 34. Método para actualizar un usuario............................................................43
Figura 35. Ruta para la actualización de un usuario.................................................44
Figura 36. Actualizar información de usuario mediante Postman...........................45
Figura 37. Método para eliminar un usuario...............................................................46
Figura 38. Ruta para la eliminación de un usuario....................................................47
Figura 39. Eliminar usuario desde Postman...............................................................48
Figura 40. Carpetas con todos los archivos creados................................................48
Figura 41. Rutas para tablas débiles...........................................................................49
Figura 42. Configuración para los CORS....................................................................50
Figura 43. Lista de verificación....................................................................................51
 CAPÍTULO I
INTRODUCCIÓN.
1.1 Resumen
Este proyecto se llevó a cabo con el objetivo de realizar un conteo y diagnóstico de
todas las personas y viviendas de la comunidad de San Bartolo Teontepec en un
período determinado, con el fin de generar la información estadística necesaria para
diseño e implementación de una Aplicación Móvil y Web. También ofrecer información
sobre las características de las viviendas, el acceso y uso de servicios básicos y su
distribución en el territorio. Así mismo producir bases de datos integradas sobre
población y vivienda, referidas a un mismo período de recolección y un mismo espacio
geográfico, con el propósito de que puedan ser analizados conjuntamente con los
servicios básicos de las viviendas para apoyar procesos de planificación. Para lograr
este proyecto, fue necesario una reunión previa con el presidente de la Junta Auxiliar y
la secretaria del Ayuntamiento los cuales nos proporcionaron un formulario en Excel
donde se especifican los datos que a ellos les interesa recabar con la encuesta. Para
realizar este sistema, se llevó a cabo una planeación bajo la metodología ágil Scrum,
que es muy útil para proyectos que tienen un tiempo de desarrollo demasiado corto.
Más adelante se continuó con la base de datos basándonos en la encuesta que
inicialmente fue proporcionada, en primer caso se analizó completamente la encuesta
para saber que tablas importantes se debían crear y poco a poco ir creando tablas
secundarias, se hicieron pruebas de funcionalidad para poder crear finalmente la base
de datos final en MySQL y en SQLite. Se continuó con la creación de una API REST
(siglas Representational State Transfer (Transferencia de Estado Representacional)),
programada con el lenguaje NodeJs (Back-End) que es utilizada por una Aplicación
Web realizada con el framework Angular (Front-End), la API REST se conecta con la
base de datos para realizar las consultas necesarias. También hace una conexión
cliente-servidor para así poder realizar las cuatro operaciones más usadas GET, POST,
DELETE y PUT. Cuando los integrantes finalizaron las tareas que les fueron asignadas
se procedió a realizar todas las pruebas que fueran necesarias para así garantizar que
no habría ningún tipo de fallo cuando se realizaran las encuestas en la Aplicación Móvil
o al momento de consultar los datos recabados desde la Aplicación Web. Una vez
finalizadas las debidas pruebas se presentó ante los miembros del ayuntamiento una

2
aplicación móvil que podía ser descargada desde PlayStore y una Aplicación Web
instalada en los dispositivos requeridos.

1.2 Abstract
This project was carried out with the aim of counting and diagnosing all the people and
homes of the San Bartolo Teontepec community in a given period, in order to generate
the necessary statistical information for the design and implementation of a Mobile
Application and web. Also, to offer information on the characteristics of the houses, the
access and use of basic services and their distribution in the territory. Likewise, produce
integrated databases on population and housing, referring to the same collection period
and the same geographical space, so that they can be analyzed in conjunction with
basic housing services to support planning processes. To achieve this project, a
previous meeting was necessary with the president of the Auxiliary Board and the
secretary of the City Council who provided us with an Excel form specifying the data
that they are interested in collecting with the survey. To realize this system, a planning
was carried out under the agile Scrum methodology, which is very useful for projects
that have too short development time. Later, the database was continued based on the
survey that was initially provided, in the first case the survey was fully analyzed to know
what important tables should be created and gradually create secondary tables,
functionality tests were made to be able to finally create the final database in MySQL
and in SQLite. Then, it was continued with the creation of a REST API
(Representational State Transfer), programmed with the NodeJs (Back-End) language
that will be used by a Web Application made with the Angular (Front-End) framework,
The REST API connects to the database to perform the necessary queries. It also
makes a client-server connection in order to perform the four most used operations
GET, POST, DELETE and PUT. When the members finished the tasks assigned to
them, they proceeded to perform all the necessary tests to ensure that there would be
no type of failure when the surveys were carried out in the Mobile Application or when
consulting the data collected from the Application Web. Once the due tests were
completed, a mobile application that could be downloaded from PlayStore and a Web

3
Application installed on the required devices were presented to the city council
members.

1.3 Introducción
Se denomina censo, en estadística descriptiva, al recuento de individuos que
conforman una población estadística, definida como un conjunto de elementos de
referencia sobre el que se realizan las observaciones. El censo de una población
estadística consiste, básicamente, en obtener el número total de individuos mediante
las más diversas técnicas de recuento.

Uno de los casos particulares de censo, pero al mismo tiempo, uno de los más
comunes, es el denominado censo de población, en el cual el objetivo es determinar el
número de personas humanas que componen un grupo, normalmente un país o una
nación. En este caso, la población estadística comprendería a los componentes o
habitantes del grupo, país o nación. El censo es el proyecto de generación estadística
de mayor importancia y complejidad, debido a que cubre a toda la población del
territorio nacional en un corto tiempo y proporciona información sobre la cual se apoya
el conocimiento de la realidad del país hasta niveles geográficos más desagregados, ya
sea por entidad federativa, municipio, localidad o manzana.

Es por eso que el Ayuntamiento de San Bartolo Teontepec optó por la creación de una
aplicación móvil de encuesta. Esto con el fin de entrevistar a cada una de las familias
que viven en esta comunidad y favorecer en la inversión de más economía, ganadería,
ventas en sus comercios y ganancias agrícolas.

En la presente memoria de estadía se presenta como capítulo uno la justificación del

tema debido a la importancia que éste tiene de la tecnología específicamente en el
área de desarrollo web y móvil, también el objetivo general y los objetivos específicos.
Se describe brevemente en el capítulo dos la institución, así como sus principales
áreas y giro, el capítulo tres se describen de manera global algunos de los conceptos
que son utilizados de manera recurrente durante el desarrollo de la investigación.
Posteriormente en el capítulo cuatro se planean los conceptos principales incluyendo
su funcionalidad, se muestra el desarrollo del proyecto hasta llegar a su conclusión.

4
Para finalizar en el capítulo cinco se presentan los resultados, las conclusiones y
referencias bibliográficas de la realización de esta memoria.

1.4 Justificación
De acuerdo a la problemática se decidió desarrollar una Aplicación Móvil mediante la
cual se satisfacen muchas necesidades de información estadística sobre temas
sociales, económicos, demográficos, y para propósitos locales, nacionales, regionales
e internacionales. Además, permitirán actualizar y evaluar otros procedimientos y
sistemas de recolección de datos, como las encuestas por muestreo y los registros
administrativos. También proporcionarán datos para el cálculo de indicadores sociales,
en especial aquellos que miden fenómenos que cambian lentamente con el transcurso
del tiempo, y sobre todo aquellos que se necesitan para zonas y localidades más
pequeñas, así como para grupos específicos de población.

De modo que la información censal será un instrumento fundamental para el estudio,

seguimiento y evaluación de políticas públicas y privadas, en sectores tales como:

1. Sector Empleo: los censos generan estadísticas para analizar la magnitud y las
características -a nivel local- de la mano de obra necesaria para la producción y
distribución de bienes y servicios, para proyecciones del empleo y características
del desempleo, y para estudiar los niveles de calificación de la fuerza de trabajo.
2. Sector Educación: los datos del censo revelan la disparidad de oportunidades de
educación entre sexos, grupos de edad o generaciones, así como entre zonas
urbanas y rurales y localidades.
3. Salud Pública: la información censal permite evaluar el acceso de la población a la
salud y la seguridad social. Los datos censales son usados para estudios
epidemiológicos y programas de atención a la población, incluyendo la distribución
optimizada de servicios de salud.
4. Sector Vivienda: al comparar las condiciones de las viviendas con censos
anteriores, se facilita estudiar la evolución en cuanto a calidad, déficit y
necesidades futuras de las viviendas del país. El análisis de la información censal
resulta indispensable para preparar y ejecutar programas nacionales de vivienda y
urbanismo.

5
1.6 Objetivo general
Desarrollar una aplicación móvil que permita recolectar la información de los habitantes
de San Bartolo Teontepec para generar datos estadísticos y reportes en una aplicación
web mediante una conexión realizada por una API REST.

1.7 Objetivos específicos

 Analizar la encuesta proporcionada por la empresa para hacer sugerencias o
resolver dudas analizando punto por punto cada una de las preguntas.
 Diseñar la base de datos usando el modelo Barker.
 Realizar diseños de bajo nivel para la aplicación móvil y web usando Balsamiq
Mockup 3.
 Realizar las interfaces de la aplicación móvil y web ocupando Angular e IDE
Android Studio.
 Realizar la API REST utilizando el lenguaje de programación NodeJs.
 Realizar la base de datos para la aplicación móvil usando SQLite.
 Conectar la API REST para enviar y recibir información enviada por la aplicación
móvil mediante el protocolo HTTPS.

6
CAPÍTULO II
MARCO
HISTÓRICO.

7
2.1 Antecedentes históricos.
Para hablar un poco de la comunidad de San Bartolo Teontepec se cree que se fundó
hace más de 120 años por pequeños grupos indígenas, que empezaron a habitar lo
que hoy es la comunidad. Tuvieron que pasar muchos años para que dichos grupos
empezaran a dar forma y crear una población que actualmente cuenta con más de
10,000 habitantes y que a su vez emprendiera una lucha intensa para la obtención de
los derechos.

Con el paso del tiempo, gracias a la lucha que han emprendido valiosas personas que
han tenido el carácter y la actitud de servicio a su comunidad. Se ganaron la confianza
de las personas, se les dio la oportunidad de ser los encargados de la administración
de los bienes propiedad del pueblo que nos ha visto crecer durante varias
generaciones y quienes se han dedicado a realizar obras que han quedado como
testimonio fiel del desarrollo de la infraestructura y desarrollo social de la comunidad.

Figura 1. Logo de la empresa

8
2.2 Misión.

La administración 2019 - 2022 de San Bartolo Teontepec será un gobierno eficiente e

innovador al administrar, gestionar recursos y prestación de servicios con honradez
transparencia, equidad y eficiencia, cumpliendo sus valores y atribuciones. Para un
mejor desarrollo de la comunidad, así mismo tener una mejor calidad de vida,
apoyándonos de la comunidad y recursos del gobierno con los objetivos planteados en
el plan de desarrollo.

2.3 Visión.

Hacer de San Bartolo Teontepec una sociedad comprometida y participativa con un

desarrollo integral, combatiendo la corrupción, rendir cuentas claras a la ciudadanía y
se les facilite a los contribuyentes, haciendo un trabajo en equipo con resultados
efectivos que sea reconocido por el pueblo y gobierno.

2.4 Políticas generales.

 Realizar todas y cada una de las acciones encomendadas con la calidad
requerida para satisfacción de la ciudadanía.
 Involucrar al personal a participar en una cultura de comunicación para lograr un
desempeño coordinado en el desarrollo de las actividades de la institución.
 Eficientar los recursos materiales con los que se cuenta para el logro de las
metas, esto es, aplicarlos exactamente al propósito para el que fueron
obtenidos, teniendo presente la cultura del ahorro como ejemplo a la ciudadanía
a la que servimos.
 Asegurar que todas las actividades en el trabajo sean efectuadas con alto
sentido de responsabilidad y sobre la base de una cuidadosa planeación que
prevenga retrasos o fracasos, evitando operar bajo condiciones de riesgo y/o
posibles accidentes que atenten contra la integridad física de los trabajadores o
de las instalaciones del H. Ayuntamiento.

9
 Asegurar que el personal contratado cumpla con las habilidades adecuadas para
el puesto de acuerdo con los perfiles requeridos.
 Con estricta vigilancia de los mandos de cada departamento se evitará en el
mayor grado posible que el personal abandone sin causa justificada los lugares
en los que deba desempeñar las labores encomendadas, esto con la intención
de evitar al máximo distractores entre la población que labora en los
departamentos de la administración municipal.
 Generar un clima de satisfacción y motivación en las condiciones de trabajo,
mismas que permitan un mejor ánimo en el trabajador a fin de alcanzar
reconocimientos que lo distingan por el hecho de cumplir sus responsabilidades
con las características de los valores que deben regir el desempeño laboral de
cada individuo que labora en esta administración.
 Para todos los efectos se estará a lo que dispongan las leyes, reglamentos y
disposiciones jurídicas aplicables, así como a los acuerdos aprobados por el
Ayuntamiento.
 En caso de que alguna disposición del presente manual se contraponga al
marco jurídico vigente o a los nuevos acuerdos aprobados por el Ayuntamiento,
se dejará de aplicar el manual en la parte conducente, proveyéndose su
actualización.
 El oficio de aviso de probable próxima sesión del Ayuntamiento se enviará vía
electrónica con una semana de anticipación a los síndicos, regidores, secretarios
de la Administración Pública Municipal, directores de los Organismos Públicos
Descentralizados Municipales y al Coordinador de los abogados adscritos a las
Comisiones del Ayuntamiento.
 El presidente municipal y el secretario del Republicano Ayuntamiento podrán
reducir los plazos señalados en el punto anterior, siempre que no afecte el
cumplimiento de las disposiciones legales aplicables.

10
2.5 Valores.

 Honestidad. El alcalde, los regidores, funcionarios y trabajadores realizan acciones

con honestidad y coherencia entre sus pensamientos, palabras y acciones.

 Transparencia. Todas nuestras acciones son de conocimiento público y se ejecutan

con apego a la legalidad y legitimidad. Construimos un ambiente de confianza y
seguridad entre la ciudadanía.
 Respeto. Se garantiza por parte de los servidores una comunicación y relación de
respeto hacia los pobladores sin importar su condición social, creencias religiosas o
políticas.
 Solidaridad. El alcalde, los regidores, funcionarios y trabajadores practican este
importante valor para fortalecer la unión y amor hacia nuestros semejantes y ante
cualquier adversidad.
 Reconocimiento. Una valoración de actitud a incorporar a las diversas iniciativas,
experiencias y propuestas que se han desarrollado y que se impulsan en los
diferentes ámbitos.
 Responsabilidad. El alcalde los regidores, funcionarios y trabajadores tienen
autoridad necesaria para realizar su trabajo y cumplir sus funciones en beneficio de
la comunidad.

2.6 Principales áreas de la empresa.

Presidencia (Sindicatura).
Integrante esencial, tiene a su cargo la procuración y la defensa de los derechos e
intereses, así como la supervisión del personal, del patrimonio del ayuntamiento entre
otras atribuciones.

Regidurías.
Los regidores son representantes populares integrantes del ayuntamiento, quienes se
desempeñan como consejeros del presidente, en cumplimiento de las diferentes
comisiones o representaciones encomendadas a cada uno, así como de las funciones
específicas que se les confiera.

11
Secretaria.
Es el encargado de despachar asuntos de carácter administrativo y para auxiliares en
sus funciones al presidente, siendo además el encargado de la elaboración y resguardo
de las actas se sesiones ordinarias, extraordinarias y actos solemnes del presidente.

Tesorería.
Servidor público que maneja los fondos y/o valores en la forma y términos que
dispongan la legislación aplicable al ayuntamiento cuanta con las siguientes
coordinaciones contabilidad, coordinación de cuenta pública, coordinación de ingresos,
coordinación de egresos, coordinación de fondos, coordinación de presupuesto y
enlace a fondos municipales y/o federales.

2.7 Descripción del área de realización de estadía.

Nuevas tecnologías.
En dicha área se ponen en marcha los servicios y proyectos necesarios para la
sociedad con herramientas estratégicas, haciendo posible los servicios de las
comunicaciones. Su objetivo es facilitar el acceso de información a la sociedad,
impulsar la economía a través de la innovación y el desarrollo tecnológico.

12
2.8 Organigrama

Figura 2. Organigrama de la empresa

13
 CAPÍTULO III
MARCO TEÓRICO.

14
3.1 Internet
Se conoce como internet a una red de conexiones a través de la cual se comunican de
forma descentralizada las computadoras, esto con ayuda de una serie de protocolos a
los que se les denomina TCP/IP. El internet tiene sus inicios en la década de los
sesenta, en un esfuerzo por el Departamento de Defensa de Estados Unidos para
hallar una alternativa a una posible incomunicación que se produjera por una guerra
atómica. Para 1972 fue llevada a cabo la primera demostración al público del sistema
que se creó, gracias a la colaboración de un grupo de la universidad de Utah con tres
universidades del estado de California, a dicha conexión se le denominó ARPANET
(Advanced Research Projects Agency Network.) (Roxitrglo, 2011)

3.2 Desarrollo Web

Desarrollo web significa construir y mantener sitios web; es el trabajo que tiene lugar en
un segundo plano y que permite que una web tenga una apariencia impecable, un
funcionamiento rápido y un buen desempeño para permitir la mejor experiencia de
usuario. Los desarrolladores web son como duendes con poderes: nunca los ves, pero
son los que hacen que todo esté bien y funcione de manera rápida y eficiente. Los
desarrolladores web lo hacen a través de diversos lenguajes de programación. El
lenguaje que usan en cada momento depende del tipo de tarea que están haciendo. El
desarrollo web se divide, de forma general, en Frontend (la parte cliente) y Backend (la
parte servidor). (Welling, 2005)

3.3 Back-End

Backend es la capa de acceso a datos de un software o cualquier dispositivo, que no

es directamente accesible por los usuarios, además contiene la lógica de la aplicación
que maneja dichos datos. El Backend también accede al servidor, que es una
aplicación especializada que entiende la forma como el navegador solicita cosas.

15
Algunos de los lenguajes de programación de Backend son Python, PHP, Ruby, C# y
Java, y así como en Frontend, cada uno de los anteriores tiene diferentes frameworks
que te permiten trabajar mejor según el proyecto que estás desarrollando. En Platzi
tenemos Django, Laravel, Ruby On Rails y ASP.Net, los hemos elegido sobre todo
porque tienen una gran comunidad que los respalda. (Leroy, 2006)

3.4 JavaScript
Es un lenguaje ligero e interpretado, orientado a objetos con funciones de primera
clase, más conocido como el lenguaje de script para páginas web, pero también usado
en muchos entornos sin navegador, tales como NodeJs, Apache CouchDB y Adobe
Acrobat. Es un lenguaje script multiparadigma, basado en prototipos, dinámico, soporta
estilos de programación funcional, orientada a objetos e imperativa. (Traverso,
Aplicaciones Web 2.0, 2010)

3.5 TypeScript
TypeScript es un lenguaje de programación de código abierto desarrollado por
Microsoft, el cual cuenta con herramientas de programación orientada a objetos, muy
favorable si se tienen proyectos grandes. Anders Hejlsberg, arquitecto principal del
desarrollo del lenguaje de programación C#, es el principal participante en el desarrollo
de este lenguaje. TypeScript convierte su código en JavaScript común. Es llamado
también Superset de JavaScript, lo que significa que, si el navegador está basado en
JavaScript, este nunca llegará a saber que el código original fue realizado con
TypeScript y ejecutará el JavaScript como lenguaje original. (Bronwen, 2018)

3.6 MySQL
MySQL es el servidor de bases de datos relacionales más popular, desarrollado y
proporcionado por MySQL AB. MySQL AB es una empresa cuyo negocio consiste en
proporcionar servicios en torno al servidor de bases de datos. MySQL es un sistema de
administración de bases de datos. Una base de datos es una colección estructurada de
datos. La información que puede almacenar una base de datos puede ser tan simple
como la de una agenda, un contador, o un libro de visitas tan vasta como la de una

16
tienda en línea, un sistema de noticias, un portal, o la información generada en una red
corporativa. Para agregar, acceder, y procesar los datos almacenados en una base de
datos, se necesita un sistema de administración de bases de datos, tal como MySQL.
(Cobo, 2007)

3.7 XAMPP
XAMPP es un servidor independiente de plataforma de código libre. Te permite instalar
de forma sencilla Apache en tu propio ordenador, sin importar tu sistema operativo
(Linux, Windows, MAC o Solaris). Y lo mejor de todo es que su uso es gratuito.XAMPP
incluye además servidores de bases de datos como MySQL y SQLite con sus
respectivos gestores phpMyAdmin y phpSQLiteAdmin. Incorpora también el intérprete
de PHP, el intérprete de Perl, servidores de FTP como ProFTPD o FileZilla FTP Serve,
etc. entre muchas cosas más. (Mifsuf Talón, 2012)

3.8 JSON
JavaScript Object Notation es comúnmente utilizado para transmitir datos en
aplicaciones web. Los JSON son cadenas como se puede observar en la Figura 3 y
son útiles cuando se quiere transmitir datos a través de una red. Debe ser convertido a
un objeto nativo de JavaScript cuando se requiera acceder a sus datos. Esto no es un
problema, dado que JavaScript posee un objeto global JSON que tiene los métodos
disponibles para convertir entre ellos. (Gauchat, 2013)

Figura 3. Estructura JSON

17
3.9 Git
Es un software de control de versiones, se define como control de versiones a la
gestión de los diversos cambios que se realizan sobre los elementos de algún producto
o una configuración del mismo es decir a la gestión de los diversos cambios que se
realizan sobre los elementos de algún producto o una configuración, control de
versiones es lo que se hace al momento de estar desarrollando un software o una
página web. Exactamente es eso que se hace cuando se sube o se actualiza el código
en la nube, o añadirle alguna parte o simplemente editar cosas que no funcionan como
deberían o al menos no como se espera. (Lynn, 2011)

Figura 4. Comandos de Git

3.9 Github
Github es una herramienta que nos permite tener nuestros repositorios de Git en la
nube. Esto nos permite centralizar el contenido del repositorio para poder colaborar con
otros miembros de nuestra organización. Git nos permite conectarnos remotamente,
como veremos al final del artículo, con otros repositorios, pudiendo subir los commits a
este repositorio que se crea en Github y teniendo el proyecto subido y marcado en un
servidor.

18
También, nos ahorramos el mantenimiento de este repositorio pues está alojado en los
servidores de Github, aunque si lo deseamos podemos crear nuestros propios
repositorios con Git en un VPS o para empresas de gran envergadura veremos que
Github ofrece otras soluciones.

Ellos se definen como una herramienta que te permite gestionar el ciclo de desarrollo
completo, desde la planificación hasta el deploy. (Lynn, 2011)

Figura 5. Interfaz web de GitHub, donde se muestra el proyecto compartido.

3.10 NodeJs
NodeJs es un entorno JavaScript de lado de servidor que utiliza un modelo asíncrono y
dirigido por eventos. Además, las capacidades de NodeJs para I/O (Entrada/Salida) son
realmente ligeras y potentes, dando al desarrollador la posibilidad de utilizar a tope la
I/O del sistema.

Node soporta protocolos TCP, DNS y HTTP. Y fue creado por Ryan Dahl en 2009 y su
evolución está apadrinada por la empresa Joyent que además tiene contratado a
Dahl.Uno de los puntos fuertes de NodeJs es su capacidad de mantener muchas
conexiones abiertas y esperando.

19
En Apache por ejemplo el parámetro MaxClients por defecto es 256. Este valor puede
ser aumentado para servir contenido estático, sin embargo, si se sirven aplicaciones
web dinámicas en PHP u otro lenguaje es probable que al poner un valor alto el
servidor se quede bloqueado ante muchas conexiones esto dependerá del trabajo que
la aplicación web de lado del servidor y de su capacidad hardware. (Brooks, 2014)

3.11 Express
Express es una infraestructura de aplicaciones web NodeJs mínima y flexible que
proporciona un conjunto sólido de características para las aplicaciones web y móviles.
Con miles de métodos de programa de utilidad HTTP y middleware a su disposición, la
creación de una API sólida es rápida y sencilla. Express proporciona una delgada capa
de características de aplicación web básicas, que no ocultan las características de
NodeJs que tanto ama y conoce.

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, sesiones, inicios de sesión de
usuario, parámetros URL, datos POST, cabeceras de seguridad y muchos más.
(Colette, 2010)

3.12 Heroku
Heroku es uno de los PaaS más utilizados en la actualidad en entornos empresariales
por su fuerte enfoque en resolver el despliegue de una aplicación. Además, te permite
manejar los servidores y sus configuraciones, escalamiento y la administración como
se observa en la Figura 6. A Heroku solo le dices qué lenguaje de Backend estás
utilizando o qué base de datos vas a utilizar y te preocupas únicamente por el
desarrollo de tu aplicación.

20

Figura 6. Funciones Heroku.

Heroku tiene dos tiers, o niveles, para personas interesadas en aprender: una versión
gratuita similar a la de now.sh, que entra en modo “sleep” cada 30 minutos sin tráfico, y
otra de 7 USD que compite con el servicio básico de 5 USD al mes que ofrece Digital
Ocean, pero agregar las ventajas de que nuestros servidores sean administrados por
nosotros. (Menzinsky, 2016)

3.13 SQLyog
SQLyog es una herramienta de gestión de bases de datos MySQL (también llamada
Frontend o GUI). Soporta las versiones de MySQL desde la 3.23 hasta la 5.1.x y
proporciona una eficiente e intuitiva interfaz de usuario. Por ello, es muy fácil de utilizar
por usuarios inexpertos además de ser muy poderosa para Administradores de Bases
de datos (DBAs), permitiéndoles ahorrar mucho tiempo en tareas administrativas.
SQLyog es software libre y funciona bajo Windows y Linux (con Wine). También existe
una versión Enterprise de pago con algunas herramientas más avanzadas orientadas a
administradores. (Stallings, 2007)

3.14 Visual Studio Code

VS Code es una herramienta que se actualiza constantemente, tiene la posibilidad de
adaptar plugins para trabajar con el cómputo en la nube de Microsoft Azure y desplegar
proyectos directamente. Se le denomina «Intellisense» a la capacidad que tiene un
editor de texto para predecir la instrucción que estamos por escribir, y con esto no
tenemos la necesidad de escribir toda la instrucción, ya que esta se puede

21
autocompletar con el editor, esto nos hace más productivos y acorta la posibilidad de
errores de sintaxis.

VS Code se encuentra en la red social de desarrolladores más popular del momento

«GitHub», por lo que podemos bajarlo a nuestra computadora, analizar el código, hacer
cambios y enviarlos mediante Git al equipo de Microsoft para que los valore y si cree
conveniente, incluirlo como Core del producto. (Microsoft, 2019).

3.15 Npm
Node Package Manager o simplemente npm es un gestor de paquetes, el cual hará
más fáciles nuestras vidas al momento de trabajar con Node, ya que gracias a él
podremos tener cualquier librería disponible con solo una línea de código, npm nos
ayudará a administrar nuestros módulos, distribuir paquetes y agregar dependencias de
una manera sencilla.

Además, existen módulos que ya vienen instalados por defecto en NodeJs por lo que
no será necesario usar npm para traerlas, a estos módulos se les conoce como
“módulos nativos”. (Colette, 2010)

3.16 Middelwares
Middlewares es un concepto muy importante al desarrollar sobre NodeJs, la plataforma
para utilizar a JavaScript en el lado del servidor. Un middleware es un bloque de código
que se ejecuta entre la petición que hace el usuario (request) hasta que la petición llega
al servidor.

Es inevitable utilizar middlewares en una aplicación en NodeJs, y el ejemplo más

común es crear un middleware para dar acceso a una determinada URL a un usuario
logueado. (Brooks, 2014)

3.17 API REST

REST es cualquier interfaz entre sistemas que use HTTP para obtener datos o generar
operaciones sobre esos datos en todos los formatos posibles, como XML y JSON. Es
una alternativa en auge a otros protocolos estándar de intercambio de datos como
SOAP (Simple Object Access Protocol) como se muestra en la Figura 6, que disponen

22
de una gran capacidad, pero también mucha complejidad. A veces es preferible una
solución más sencilla de manipulación de datos como REST.

Figura 7. Función de una API REST

23
 CAPÍTULO IV
METODOLOGÍA.

24
4.1 Descripción de actividades
El presente proyecto se planifico a través de una eficiente herramienta como lo es el
WBS mostrando las fechas correspondientes a cada actividad en un diagrama de
Gantt, con base a la administración de proyectos el cual fue de gran ayuda para
programar y planificar todas las tareas que se tuvieron asignadas para llegar al objetivo
principal del proyecto, como se puede observar en la Figura 7, se presentan todas las
actividades realizadas.

Figura 8. WBS y Diagrama de Gantt.

25
4.1.2 Inicio
Durante la primera semana de estadías en el H. Ayuntamiento de San Bartolo
Teontepec nos presentamos formalmente con el Ing. Mario Castro Salvador quien es el
presidente de la Junta Auxiliar.

En la presentación que se realizó se llevó a cabo el planeamiento del proyecto

empezando con la entrega de un documento el cual está estructurado de acuerdo a las
diferentes áreas de importancia que cubren las preguntas de la encuesta.

En esa semana también se realizó una junta donde se resolvieron dudas y sugerencias
de la encuesta.

4.1.2 Planeación
Se realizó una junta donde se determinaron los requerimientos del proyecto y donde
participaron los integrantes del equipo y los representantes de las áreas del
Ayuntamiento que se vieron beneficiadas con el proyecto.

Los miembros del equipo examinaron el documento de Excel del formulario que había
sido entregado por la secretaria. Una vez terminado el análisis hubo dudas que fueron
resueltas y sugerencias que fueron aceptadas e implementadas.

Posteriormente se planteó una estrategia para el desarrollo del proyecto la cual

consistía en terminar las pantallas de la aplicación móvil que se necesitaran (FrontEnd)
y posteriormente trabajar con la parte lógica (BackEnd). Entre los integrantes del
equipo se determinó cuáles serían las pantallas a desarrollar: Login, Inicio, Información
de la Familia, Servicios Básicos, Agua para Uso Doméstico, Servicios de Importancia,
Comunidad, Servicios y Problemas, Actividad Económica y Miembros de la Familia.

4.1.3 Ejecución
El primer paso fue realizar el diseño en bajo nivel de cada una de las pantallas de la
aplicación correspondiente para después ser aprobada por la secretaria y poder
continuar con la maquetación del proyecto. Se comentó a los encargados del proyecto
que pantallas se realizaron, primeramente, ya que el documento que se entregó para
las preguntas cuenta con secciones ordenadas por importancia. Como se puede

26
observar en la Figura 8, se comenzó con la primera pantalla que sería el Login con
ayuda del software Balsamiq Mockups 3, cada interfaz fue diseñada de esta manera y
por orden de cómo se programó cada interfaz.

Figura 9. Pantalla de bajo nivel (Login).

Como segunda y tercera pantalla se maqueto el apartado de Domicilio e Integrantes de

la Familia donde el encuestador ingresa la calle, numero de casa, colonia o barrio, y
entre que calles vive dicha familia como se puede ver en la Figura 9. Posteriormente
se registra a todos los integrantes que conforman dicha familia empezando con la
cantidad de integrantes para después ingresar datos personales como se observa en la
Figura 10.

Figura 11.Pantalla de bajo nivel Figura 10. Pantalla de bajo nivel

(Domicilio). (Integrantes).

27
Como cuarta y quinta pantalla se maqueto el apartado de Servicios Básicos y Agua
para Uso Doméstico, en la Figura 11 se puede ver que son opciones que el
encuestador selecciona en caso de que la Familia cuente con algunos de esos
servicios proporcionados. La cuarta pantalla es un apartado donde se contiene
información sobre cuantos días cuenta con agua, si tiene alguna toma de agua, en que
la almacena, con qué forma paga el servicio y saber para que ocupa el agua u servicio
como se observa en la Figura 12.

Figura 12. Pantalla Figura 13. Pantalla

bajo nivel (Servicios bajo nivel (Uso de
Básicos). agua).

En la sexta y séptima pantalla se maquetaron los apartados de Servicios de

Importancia y Representantes de la Comunidad. En la Figura 13 se puede observar
que en servicios de importancia es una sola pregunta donde son seleccionadas las
opciones por grado de importancia según considere la persona encuestada.

De igual manera en la Figura 14 se puede ver que solo es una pregunta para tener
conocimiento en caso de que conozca a su representante de la comunidad para que

28
posteriormente con más preguntas se pueda saber sobre el conocimiento que tiene la
familia sobre su comunidad

Estas pantallas no son tan relevantes ya que como se puede notar no cuentan con
mucha información para recabar y que sea relevante sobre la familia.

Figura 15. Pantalla Figura 14. Pantalla

bajo nivel (Servicios bajo nivel
Importancia). (Representante).

Se continuo con el maquetado de la pantalla Trabajo de Limpieza y Actividades, en la

Figura 16 se puede observar que nuevamente es una sola pregunta para tener
conocimiento de cómo ha participado en la limpieza de la comunidad donde se tienen
cinco opciones como en qué forma participa, si ha participado en faenas, si ha dado
alguna aportación económica, si ha aportado con alimentos y una opción para escribir
alguna otra aportación.

29
Se puede observar en la Figura 17 que también es una sola pregunta donde se quiere
saber de qué forma se entera de las actividades de la comunidad que cuenta con una
caja de texto.

Figura 16. Pantalla Figura 17. Pantalla bajo

bajo nivel (Limpieza). nivel (Actividades).

Por último, como se muestra en la Figura 17 se maqueto el apartado de Servicios o

Comercios donde se necesita saber con qué servicios o comercios no cuenta la
comunidad que a su vez se necesita saber que problemas ha tenido frecuentemente la
comunidad. Y con esta pantalla fue como se terminó la maquetación de las pantallas
que contiene la aplicación móvil.

Figura 18. Pantalla de bajo nivel (Servicios o Comercios).

30
Una vez autorizadas las pantallas de bajo nivel, se realizó una reunión donde se acordó
el color, tamaño y tipo de letra que lleva cada uno de los botones en todas las
interfaces, además se eligió en donde programar la aplicación, ya sea en Android
Studio o Ionic y en este caso se optó por Android. El color que se escogió fue un
marrón ya que el logo del Ayuntamiento tiene un color similar como se observa en la
Figura 18.

Figura 19. Pantalla Alto nivel (Login).

Ya determinandos los puntos anteriores y dadas las actividades de cada integrante del
equipo se comenzo con la programacion de la aplicación, una API REST y la aplicación
de escritorio que por otro lado tambien se reestructuraba la base de datos agregando
mas tablas y subtablas que en su momento se irian utilizando para poder complir con
todos los parametros y funcciones necesarias para cada pantalla de dicha aplicación.

Como se puede observar en la Figura 20 ahi se muestra la mayoria de tablas creadas

como requisitos minimos para la funcionalidad de la aplicación movil, web y API REST.
Las tablas mas importantes o utilizadas son Familias, Personas, Ocupación, Usuarios,
Colonias y Comercios.

31
Las demás tablas que se muestran son tablas foreanas que se relacionan con todas las
tablas principales a la hora de hacer las inserciones en las tablas ya mensionadas,
cada una de esas tablas tienen un orden a la hora de insertar datos ya que en la
relación así fue como se decidió.

Figura 20. Base de datos CENSO.

La API REST se empezo a desarrollar de la siguiente manera, se dio inicío con la

creación de un archivo app.js donde ahí se empezo a configurar el inicio de la API el
cual lleva todos los frameworks de Nodejs que utilizaremos para el proyecto tales como
Express, Cors, Morgan, BodyParser y MySQL. Abrimos la carpeta en el editor de
codigo que en este caso se utilizo Visual Studio Code y ejecutamos el comando npm
install que sirve para crear una carpeta llamada node_modules y un archivo

32
package.json que hace funcionar todos los frameworks y dependencias instaladas en el
proyecto como a su vez poder ejecutar nuestro proyecto ya sea en modo de producción
o en modo desarrollador. Ya teniendo esa carpeta, manualmente se crearon 3 carpetas
mas (models, routes y server) como se puede observar en la Figura 21 y llamando a
las dependencias instaladas como se muestra de la linea 1 a la linea 7.

Figura 21. Dependencias utilizadas en el proyecto.

Se prosiguió con la configuración de los Middlewares que se utilizan junto con el puerto
que se ocupa de forma local y de forma en producción como se muestra en la Figura
22, como utilizamos la plataforma Heroku para hacer una prueba de producción se tuvo
que hacer una pequeña función en la línea 29 donde se le indica que puerto ocupar si
estamos en manera local y si encuentra que estamos en manera de producción
entonces el servidor elegirá el puerto a utilizar, ya que no se manejan los mismos
puertos de desarrollo ya estando en manera de producción.

Figura 22. Configuración y Middelwares.

33
De la línea 32 a la 34 se creó una función donde recibe un método GET para poder
obtener el puerto, se realiza un callback y se manda a consola un mensaje junto con el
puerto ya obtenido y eso es el inicio de la aplicación en NodeJs.

Al inicio se creó una carpeta llamada server, ahí se tiene un archivo llamado
connection.js donde ahí se hizo la conexión con la base de datos ya creada en MySQL.
Como se muestra en la Figura 23 en la línea 1 requerimos MySQL y para realizar la
conexión creamos una variable llamada dbConectionInfo que tiene el host que es
proporcionado por la plataforma Heroku ya sea si es en producción o localhost si es de
manera local, user es el nombre de usuario para el servidor al igual que el password,
tendremos un connectionLimit para limitar el número de conexiones que se puede
hacer al servidor que en este caso son 10 y por ultima se tiene la propiedad database
donde va el nombre de la base de datos.

Como podemos observar en la Figura 23 después de la variable con todas las

propiedades ya colocadas se creó otra variable donde se hizo un Pool de conexiones
para hacer peticiones simultáneamente con un método propio de MySQL createPool
que recibe los datos que contiene la variable dbConectionInfo.

Figura 23. Archivo de conexión a la base de datos.

Como en la variable dbconnection se guarda un método de MySQL entonces se
pueden utilizar más métodos proporcionados por la base de datos, en este caso se usa
una función llamada connection.on que tiene varios objetivos, uno de ellos es revisar si

34
la conexión está hecha, así mismo podemos resolver errores como problemas de
desconexión como se muestra en la Figura 24 de la línea 35 a la 42.

Como se observar se vuelve a ocupar la función connection.on varias veces y en esta

ocasión se hizo dos pequeñas funciones, una es por si la conexión devuelve un error
que se imprime en consola que lleva los datos de la fecha, un mensaje escrito por el
programador y el error que manda MySQL.

La segunda función on se usa en caso se allá realizado bien la conexión a la base de

datos, pero durante un tiempo se pierda esa dicha conexión, así mismo como la
primera función se imprime en consola la fecha, el mensaje del programador y el error
de MySQL.

Y ya por último solo queda exportar la conexión para después utilizarla en los demás
archivos.

Figura 24. Método connection.on de MySQL.

Hasta este punto se terminó de programar la carpeta server junto con el archivo
JavaScript connection.js, ahora lo siguiente es situarse en la carpeta models donde ahí
hay varios archivos dependiendo de las tablas de la base de datos. Se empezó con un

35
archivo llamado user.js donde aquí se tiene todas las consultas que se realiza a la base
de datos para los usuarios.

Se comenzó con una constante llamada connection que requiere al archivo ya creado
anteriormente que es la conexión, posteriormente crearemos un objeto de esquema
vacío llamado userModel que después es ocupado por los métodos GET, POST, PUT Y
DELETE.

Se hizo una función llamado getUser que es igual a un callback donde dentro
tendremos una condición, si la conexión del archivo llamado al principio fue
satisfactoria entonces procedemos a utilizar un método de MySQL llamado query como
se puede ver en la Figura 25 con el objetivo de ahí escribir todas las consultas que se
quieren hacer a la base de datos, en este caso se hizo un CRUD de usuarios donde
primeramente se realizó un GET a los usuarios. La función recibe la consulta que como
mencionamos obtendremos a los usuarios y es un SELECT con una condición que más
adelante explicaremos por la condición del estatus, un userData que son los datos
mandados por el usuario mediante un JSON, un error en caso de haberlo y un
resultado.

Volvemos a hacerlo de manera que sea un callback y nuevamente realizamos una

condición donde si hay un error con la palabra throw hacemos que el código genere el
error y la variable que se allá puesto en la función que en este caso es err, en caso
contrario de que no hubiese ningún error devolvemos el callback con la consulta hecha.

Figura 25. Método GET de usuarios.

Ya creada esta función se pasó a la carpeta routes donde ahí se tiene un archivo
llamado userRoutes.js donde primeramente se manda a llamar al archivo user.js que

36
está ubicado en la carpeta models, se hace una constante de tipo Objeto llamado User
para que a continuación se ocupe el método creado para la obtención de los usuarios.

Se tiene que aclarar que para poder ocupar este archivo en el app.js tenemos que
exportar el documento y se hace de la siguiente manera, para leer las rutas que le
indiquemos a Express que es un framework que instalamos en un inicio tenemos que
utilizar una propiedad llamada module.exports que es igual a un nombre que nosotros
vayamos a ocupar para todas las rutas que se crean, en este caso se llama app.
Dentro de esta propiedad ahora se ocupa el método GET (app.get) como se muestra
en la Figura 26.

El método recibe 3 parámetros, la ruta en donde se vaya a mostrar los resultados

obtenidos por la consulta del archivo user.js, un parámetro req es un objeto que
contiene información sobre la solicitud HTTP que provocó el evento y parámetro req
que usa res para enviar de vuelta la respuesta HTTP deseada. Dentro de esa función
se utiliza el objeto que se declara al inicio (User) para ocupar el método getUser creado
en el archivo user.js donde contiene la consulta, recibe un error y los datos de la
consulta, se manda un res.status que sea igual a 200 que significa que la respuesta fue
hecha correctamente junto con un JSON (data) de todos los usuarios que se tiene en
nuestra base de datos y es así como se tiene el primer método GET para usuarios.

Figura 26. Declaración de ruta GET para usuarios.

Como se explica, se exporta este método/archivo para poder utilizarlo, solo queda ir al
archivo principal app.js para mandar a llamarlo como se muestra en la Figura 27 donde

37
solo sé tiene que requerir el archivo userRotes de la carpeta routes. Es indispensable
hacer este paso ya que si no se requiere el archivo dará un error y se caerá el
programa.

Figura 27. Requerir la ruta usuarios.

Para hacer nuestra prueba de funcionalidad sé tuvo que insertar datos falsos en la
base de datos, para probar esta función sé requiere una plataforma llamada Heroku
donde hace la función de un servidor web para que otros usuarios/personas puedan
utilizar la API creada. Heroku al ser un servicio gratuito tiene varias limitantes pero que
no son problema para la implementación en el proyecto.

Se utilizó de igual manera la plataforma GitHub que trabaja en conjunto con Heroku,
para empezar, sé descargo la consola de Heroku y se procedió con la instalación, ya
teniendo instalada la consola nos dirigimos al proyecto en Visual Studio Code ya que
este editor cuenta con una consola integrada donde facilita la ejecución de códigos en
consola.

Iniciamos escribiendo el siguiente código $ git init el cual tiene como función de
inicializar un repositorio, después se ejecuta el siguiente código $ heroku git: remote
-a nombre-proyecto que sirve para combinar los cambios que se realicen a la hora de
subir modificaciones.

Para la implementación de la aplicación se utilizan los comandos básicos de git hub

que son $ git add para añadir archivos creados o modificados a la plataforma, $ git
commit -am "Mensaje" que es para colocar un mensaje de que fue modificado en el
código y finalmente $ git push heroku master que sirve para subir todos los archivos
creados o modificados junto con el mensaje que se realizó en el commit.

38
Cuando ya se subió el proyecto a Heroku fue momento de hacer la prueba para revisar
si el método nos devuelve los usuarios, en el navegador se pone la URL que nos
generó Heroku más aparte la ruta que nosotros le indicamos al método que será /users
como se muestra en la Figura 29.

Figura 28. Prueba en el navegador de la ruta usuarios.

Como se observar el método que se programó en un inicio funciona correctamente ya

que devuelve todos los campos que contiene nuestra tabla usuarios, en este caso
como solo se insertó un solo registro en la base de datos solo devuelve ese solo
registro, en caso de tener más registros la API muestra esos datos en formato JSON
para ser consumidos por la aplicación móvil y web.

La tabla tiene un campo llamado roll que sirve para el Login en la aplicación web y
existen 2 tipos de roles en este caso, uno es “Administrador” que si en el Login detecta
este rol puede acceder a todas las funciones que haya en el Dashboard y está el rol de
“Encuestador” donde inicia solamente sesión en la aplicación móvil para realizar las
encuestas.

39
De igual manera se programó otro método en el archivo user.js que sirve ahora para la
creación de un nuevo usuario. Como se puede observar en la Figura 30 tiene la misma
sintaxis que nuestro primer método para obtener, en este caso solo cambia nuestra
consulta a la base de datos, y el callback que devolvemos al final ya que en esta
ocasión se manda el id del usuario que se insertó.

Figura 29. Método para insertar un usuario.

Ahora en el archivo userRoutes.js se programó el método para que esta consulta

funcione, con el método post se hace la inserción de nuevos usuarios. La ruta es la
misma para todo el CRUD ya que en Postman o cualquier persona que ocupe la API
debe de especificar que método desea utilizar ya sea GET o POST entonces la ruta no
se cambia.

De la línea 11 a la 19 de la Figura 31 se puede ver que está una constante userData,

esta constante sirve para decirle al método los parámetros que debe de recibir en el
formato JSON en el FrontEnd que son el nombre, apellido paterno, apellido, materno, el
roll del usuario, la contraseña y el teléfono, el id_usuario está como null ya que en la
base de datos se declaró que sea auto incremental por ende no se tiene que agregar
manualmente.

40
Se inicia el Objeto User y ocupamos el método creado insertUser que recibe el
userData ya con los parámetros declarados y escritos por el usuario, un err y una data
para continuar con una condición donde si la data de la consulta y la data de nuestro
mensaje del id_usuario fueron insertados correctamente.

Figura 30. Ruta para insertar usuarios.

En consola se manda esa data más a parte un res.json con 3 parámetros, un success,
un mensaje de que el usuario fue insertado y la data del método, en caso contrario de
que no fue satisfactoria la inserción del usuario se manda un status 500 que significa
que algo dentro de la ejecución no funcionó correctamente junto con dos parámetros
más que son el success igual a false y un mensaje de error

41
En Postman se hizo la prueba para revisar el funcionamiento del método, en la barra de
direcciones se pone la URL de la aplicación en Heroku como se muestra en la Figura
32 y seleccionamos la opción POST.

Los datos mandados tienen que ser en formato JSON así que se ponen los campos
que pide el userData del método como se muestra en la Figura 32 y los datos son
enviados.

Figura 31. Insertar datos mediante Postman.

Ya enviados los datos, Postan muestra los resultados de las funciones creadas, se
programó en la función que si todo sale bien debe regresar el id del usuario y así fue,
como se ve en la Figura 33 retorna success, el mensaje de usuario insertado y el id del
usuario creado.

Figura 32. Mensaje de confirmación insertando un usuario.

42
El método PUT en el archivo user.js es deferente ya que como se puede ver en la
Figura 34 se hizo una constante llamada SQL donde se especifica la consulta con los
datos que se vayan a actualizar que en este caso es el userData y ya no en el método
query de MySQL. Después de la constante con los datos que vayamos a recabar en el
método se ocupa el método query y recibe la contante SQL, un error y un resultado,
dentro de ese método hay un condición donde si en el disparo de la consulta llega a
tener un error entonces se crea ese error con la palabra reservada throw y en caso
contrario si la consulta se ejecuta correctamente devuelve un callback con un mensaje
donde avisa que el usuario fue actualizado en la base de datos.

Figura 33. Método para actualizar un usuario.

Terminado este método ahora se programó en el archivo userRoutes.js donde aquí solo
cambió un poco a los métodos anteriores ya programados ya que al querer actualizar
un usuario tiene que indicarle al método el usuario especifico que hace la actualización,
en este caso se hace mediante su id y se manda ese id mediante la ruta que es /users
más el id del usuario por ejemplo /user/12.

43
Como se puede observar en la Figura 35 se utiliza el método PUT que recibe la ruta
junto con una variable para el id del usuario, además como todos los métodos ya
programados recibe un parámetro res y un req. Así mismo se declara una constante
userData para especificar los datos que tiene que mandar el usuario o programador
FrontEnd para hacer la correcta actualización del usuario, posteriormente se ocupa el
método creado en el archivo user.js (updateUser) que recibe la constante userData
más un error y una data de la consulta. Dentro de ese callback se evalúa una condición
donde la data de este método y la data.msg de la consulta son similares entonces se
envía esa data en un formato JSON y en caso contrario de tener un error o que haya
habido algún problema al ejecutar la consulta se envía un estatus 500 en un JSON con
dos propiedades, uno que se llama success que será igual a false y un mensaje de
error.

Figura 34. Ruta para la actualización de un usuario.

Ya teniendo los dos métodos programados para realizar una actualización de datos se
tiene que hacer una o varias pruebas para revisar el correcto funcionamiento de los

44
métodos. En Postman se ocupa el parámetro POST, ahora se cambia a PUT así mismo
en la barra de dirección de Postman se agrega el id del usuario que se actualizará, en
este caso será el mismo usuario que se creó con el método POST del ejemplo anterior.

Como se puede observar en la Figura 36 se pone en la URL el id 202 y en el body del

JSON solo se actualizó el nombre y el apellido paterno, ya que se envió esos dos
únicos datos a la URL se tiene que mandar una data donde contenga el mensaje de
que el usuario fue actualizado y eso quiere decir que los dos métodos de actualizar
funcionan correctamente y solo quedo programar el método DELETE para eliminar
cualquier usuario.

Figura 35. Actualizar información de usuario mediante Postman.

El método DELETE en el archivo user.js es diferente a los demás métodos ya que

dentro tendrá dos diferentes consultas. Se comenzó nombrando al método deleteUser
que recibe como parámetros 2 primeras cosas, uno será el id del usuario que se tiene
que eliminar y otro será un callback, se emplea una condición donde si la conexión a la
base de datos es correcta entonces en una variable guardamos una consulta para

45
primeramente buscar ese usuario en la base de datos, si el usuario llega a existir en la
base de datos se continua haciendo la query donde se recibe a ese usuario con la
consulta de la búsqueda junto con dos parámetros más que son un error y un
resultado. Dentro de esa query se hace otra condición más donde si hay una row para
actualizar entonces en una variable hará la consulta para eliminar, cabe aclarar que
para eliminar un usuario no se elimina verdaderamente de la base de datos ya que
actualmente para eliminar registros de una base se cambia solamente el estatus de esa
tabla a 0, nuestra tabla usuarios cuenta con un atributo llamado estatus que si se
encuentra en 1 eso quiere decir que será visible para el FrontEnd, entonces para
eliminar un usuario solamente se cambia el estatus a 0.

Como se puede ver en la Figura 37 en nuestra variable SQL hace una consulta para
actualizar el estatus a 0, seguido de eso se vuelve a realizar otra query pasando los
parámetros de la variable más un error y un resultado, se realiza una condición para
provocar un error en caso de que las consultas anteriores lleguen a fallar, pero en caso
de que todo salga bien el método devuelve un callback con un mensaje de que el
usuario ha sido eliminado, se tiene otro else de nuestra primera condición donde si no
existe el usuario en la base de datos se devuelve un callback donde diga que no existe
el usuario insertado.

Figura 36. Método para eliminar un usuario.

46
Ahora se programó el método DELETE en el archivo userRoutes.js donde al igual que
el método PUT se tiene que poner el id que recibirá el método junto con un parámetro
res y un req, se llama al Objeto User junto con el método deleteUser que se programó
anteriormente.

Como se muestra en la Figura 38 dentro se hizo una condición donde si la data nos
regresó el mensaje de que se eliminó correctamente o regresó también el mensaje de
que no existe también salió correctamente ya que si funciono el método solo que
usuario no existe, se devuelve un JSON con de parámetros, uno con un success más a
parte con la data que genere el método y en caso de que no haya salido correctamente
se envía un status 500 en formato JSON con un mensaje donde hay un error.

47
 Figura 37. Ruta para la eliminación de un usuario.

Nuevamente en Postman se hicieron pruebas de funcionalidad de los dos métodos ya

programados, en este caso solo se cambió la opción a DELETE y se colocó el id del
usuario a eliminar, si todo sale correcto en método devuelve un mensaje como se
muestra en la Figura 39 donde dirá que el usuario fue eliminado pero el usuario que se
eliminó sigue estando en la base de datos solo que en la consulta de obtener todos los
usuarios hay una condición que solo obtenga a los usuarios con el estatus sea igual a
1.

La estructura del mensaje JSON consta de dos propiedades, un succes con el valor
true donde se sabe que el usuario fue eliminado, un data con un mensaje dentro en el
que manda el mensaje que se declara en la funci

48
 Figura 38. Eliminar usuario desde Postman.

En las carpetas models y routes se tiene varios archivos como se observa en la Figura
40 que son métodos iguales a los ya mencionados solo que cambian la rutas a las que
ira los métodos, los archivos rutasBasicas.js y rutasBasicasRoutes.js son solamente un
poco distintos a los demás ya que ahí hay varias rutas que son las tablas fuertes y
tablas débiles que no era necesario ponerlo en un solo archivo como usuarios y
personas.

Como se Figura 39. Carpetas con todos los archivos creados observa
en la Figura 41 hay tablas que solo hacen la función GET que no necesariamente
tienen que tener un CRUD, pero hay tablas en este mismo archivo que si contienen

49
dicho ese CRUD. Se decidió poner las rutas básicas en un solo archivo ya que los
métodos programados no contienen muchas líneas de código para solo tenerlo en un
solo archivo.

Figura 40. Rutas para tablas débiles.

Finalmente se agregó más código en el archivo principal app.js que son los CORS,
Cuando hacemos peticiones AJAX con jQuery o Angular a un BackEnd o un API REST
es normal que tengamos problemas con el acceso CORS en NodeJs y nos fallen las
peticiones. En un inicio se instaló un plugin para eso, pero a la hora de hacer pruebas
con el FrontEnd no se vio el resultado y no se podio ocupar la API, para eso se
programó una función en forma de Middleware para que en las peticiones HTTPS no
hubiese ningún error a la hora de mandar peticiones GET, POST, PUT, DELETE.

Como se observa en la Figura 42 Express tiene un método llamado setHeader que su

objetivo es mandar en las cabeceras los permisos para poder realizar las peticionas ya
mencionadas

50

Figura 41. Configuración para los CORS.

4.1.4 Implementación

Al terminar con el desarrollo de todos los archivos y métodos de la API REST que
ocupa la aplicación móvil y web, se procedió a verificar el correcto funcionamiento de
forma individual de cada uno de los métodos creados para realizar una encuesta
satisfactoria y así poder ser aprobada para la secretaria de Ayuntamiento.

Una vez autorizada la API REST se procedió con la integración a la aplicación web, es
decir, que se probaran los métodos programados en el FrontEnd sin utilizar Postman el
cuál al principio fue un poco tedioso por la gran cantidad de rutas que había y que al
programador de la aplicación web no sabía.

Para resolver este problema se realizó un índice de todas las rutas que existían para
que el programador FrontEnd no tuviera problemas con las rutas, una vez realizado
esto, los problemas que se generaron anteriormente fueron solucionados de forma
efectiva y se continuo con el proceso de integración.

Se volvieron a realizar pruebas de funcionamiento para comprobar que la aplicación

funcione correctamente, lo cual así lo hace y por consiguiente el sistema fue instalado
de manera local para el cliente, dentro del Ayuntamiento que se desempeñó como
cliente para la evaluación.

Al término del proyecto, el usuario cliente (Ayuntamiento) fue el encargado de realizar

una prueba final donde primeramente se le dio el acceso al administrador que se
encarga de monitorear la aplicación web para que después fuera a la interfaz de Login
donde con su nombre de usuario y contraseña puede acceder al sistema, una vez que
el sistema determino que es un usuario administrador puede registrar a los

51
encuestadores en el apartado de usuarios. Se determino junto con el presidente que el
sistema no será montado en un servidor web si no hasta el mes de septiembre ya que
aún no se cuenta con los recursos necesarios para la adquisición de dicho servidor
web.

4.1.5 Evaluación

Figura 42. Lista de verificación

La lista de verificación muestra los criterios de evaluación de la empresa para validar

que el proyectó estuviera terminado, basándose en los criterios o módulos que fueron
solicitados al inicio del proyecto, los cuales fueron entregados en tiempo y forma, por lo
cual se considera que todo se realizó de manera pertinente.

De esta forma se cumple con los objetivos establecidos durante el arranque del
proyecto, los cuales cubrirán las necesidades básicas y especificas del cliente, de una
manera eficaz y sobre todo ordenada, lo que permite un mejor manejo de rutas y
control de los módulos solicitados por la empresa.

52
 CAPÍTULO V
RESULTADOS Y
DISCUSIÓN.

5.1 Resultados
De manera profesional se concluyó con el objetivo general y específicos determinados
en el proyecto, el cual fue implementar, desarrollar y diseñar las rutas para la obtención
de usuarios, inserción de personas o familias, y la obtención de una encuesta completa
esto gracias al buen análisis de requerimientos realizado al inicio de este proceso de

53
estadía y a la excelente comunicación entablada con el cliente, se obtuvieron reuniones
de calidad que sirvieron de retroalimentación para una correcta construcción del
producto final. Respetando las actividades y objetivos establecidos para el proyecto, se
puede concluir que los resultados fueron muy favorables y cumplieron con las
expectativas del cliente,

Los resultados que se obtuvieron al término de la estadía con la creación de la API

REST fueron los siguientes:

Personalmente pude obtener un mejor desempeño para el ámbito laboral que un futuro
me espera, mejor manejo de los lenguajes de programación y frameworks ya
mencionados.

Tratar con base a una buena comunicación para lograr cumplir con todas las
expectativas del proyecto, sabiendo que cada opinión es indispensable y debe ser
tomada en cuenta.

La realización en tiempo y forma de cada uno de los métodos asignados.

Mejora para la administración de los futuros administradores y programadores que

adquieran el proyecto.

5.2 Discusión
De manera personal, el desarrollo del proyecto, abre una gran oportunidad para las
pequeñas y medianas empresas que se dedican a la realización de conexión para un
BackEnd, de manera que puedan crecer, además que la aplicación tiene la misma
fortaleza de ser aún mejorada en muchos aspectos, ya que tiene un gran alcance para
muchos más proyectos.

Puedo decir que esto no hubiese sido posible sin la ayuda de todos los que
colaboramos dentro de este gran proyecto, además de la gran ayuda que nos brindó el
Ayuntamiento con la información que necesitamos ya que también dieron puntos de
vista de diseño y funcionalidad como a su vez correcciones que me hicieron llegar.

Sin embargo, se debe admitir que la aplicación aún tiene áreas de oportunidad que
serán resueltas en un futuro cercano, por lo que la entrega final de este proyecto

54
representa solo la primera versión de un sistema que será actualizado constantemente
hasta obtener una aplicación de administración robusta que pueda ser utilizada por
distintas instituciones.

Por otra parte, un gran factor importante a la hora de realizar un proceso, fue
determinante antes el probar y guiarse de otros sistemas similares a la aplicación que
se estaba programando, ya sea para basarnos en ella o aportar mejoras en dicho
sistema como a su vez tomar curso del nuevo lenguaje que no se tenía ningún
conocimiento sobre él.

5.3 Conclusiones
Al termino de los objetivos de este proyecto, puedo decir que fue concluido con buena
satisfacción. Lo importante aquí fue lograr la conclusión con toda la API e integrarla al
proyecto de la aplicación móvil y web, con la satisfacción del Ayuntamiento, el proyecto
debe ser de agrado tanto para el desarrollador de la aplicación móvil como al
desarrollador de la aplicación web. No obstante, debo estar satisfecho por mi trabajo y
desempeño en este proyecto, con la seguridad de que aporte lo mejor de mis
conocimientos y habilidades. En pocas palabras mi meta es realizar un buen papel y
demostrar que se pueden superar los límites que en un principio se planificaron. La
experiencia que se tuvo fue de gran valor para mi desarrollo profesional y personal, ya
que trabajé con un lenguaje que no sabía en un principio que requiere de muchos
conocimientos en otros lenguajes. Dando así un buen resultado en conjunto con mis
compañeros de trabajo en conjunto con el Ayuntamiento y en mi persona, teniendo en
cuenta que cada objetivo cumplido es un paso más para el éxito de mi carrera. Es por
lo anterior que, al finalizar este proceso me siento muy feliz y satisfecho de haberlo
concluido con excito, orgulloso de demostrarme a mí mismo que la capacidad de
aprender nuevas cosas y llevarlas a la implementación no tiene un límite, y que solo se
necesita de fuerza de voluntad y ganas de superarse.

5.4 Referencias Bibliográficas.

Duckett, J. (2014). JavaScript and JQuery: Interactive FrontEnd Web Development.

E.U.A: Wiley Publishing.

55
Jepson, B. (2010). Building apps with HTML CSS and JavaScript. United States of
America: O'Reilly Media.
Leroy, X. (2006). Programming a compiler with a proof assistant. New York, NY: ACM
SIGPLAN Notices.
Mifsuf Talón, E. (2012). Apache. Madrid, ES: Ministerio de Educación de España.
Roxitrglo, G. B. (2011). BACKEND PROFIT MULTIPLIERS . Unites States, Us: Pearson
US.
Terán Anciano, J. (2010). Manual de Introducción al lenguaje HTML. Madrid, ES.:
Editorial CEP.
Traverso, H. (. (2010). NODE.JS (PROGRAMACION) (En papel). Madrid España, ES:
Anaya Multimedia.
W3SCHOOLS.COM. (24 de Abril de 2019). W3SCHOOLS. Obtenido de
https://www.w3schools.com/

5.5 Glosario
Callback:

Los callbacks son usados cuando se hacen operaciones asincrónicas, es decir,

ejecuciones de código que se realizan en un tipo de "subproceso", y cuando esa
ejecución termina, se puede obtener su resultado con un callback.

Framework:

Un framework, es una estructura conceptual y tecnológica de soporte definido,

normalmente con artefactos o módulos de software concretos, que puede servir de
base para la organización y desarrollo de software. Vamos, una manera de hacernos
más fácil la programación. Un framework nos evita tener que programar estas partes,
de esta manera nos resulta más fácil centrarnos en programar la aplicación.

Status:

56
Define las funciones de middleware de manejo de errores de la misma forma que otras
funciones de middleware, excepto que las funciones de manejo de errores tienen
cuatro argumentos en lugar de tres: (err, req, res, next).

57