Instituto Politécnico Nacional

Escuela Superior de Cómputo

Ingenierı́a en Sistemas Computacionales

Ingenierı́a de Software

Sistema de Reportes de Baches en la CDMX

Bachen’t

Profesor: M. en C. Ulises Vélez Saldaña

OmegaDev:
Gutiérrez de la Rosa Diego Armandoo
Hernández Reséndiz Brandon Iván
Muñoz Balderas Jordy
Rico Apaez Luis Daniel
Segura Bautista Guillermo

3CV3
17 de octubre de 2020
Índice
1. Introducción 3
1.1. Problemática . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.2. Propuesta de solución . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.3. Objetivo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.4. Estado del árte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

2. Marco Teórico 6
2.1. Descripción del sistema. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.2. Elementos, herramientas, plataformas utilizadas . . . . . . . . . . . . . . . . . . . . 6
2.3. Metodologı́a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

3. Analisis 8
3.1. Requerimientos Funcionales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.2. Requerimientos no Funcionales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.3. Casos de uso . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.4. Diagramas UML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.4.1. Diagrama de Casos de Uso . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
3.4.2. Diagramas de Secuencia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
3.4.3. Diagrama Entidad-Relación . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

4. Diseño e implementación 13
4.1. Diseño de la Interfaz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
4.2. Descripción visual de funcionamiento . . . . . . . . . . . . . . . . . . . . . . . . . . 16

5. Conclusiones y trabajo a futuro 17

6. Referencias 18
Índice de figuras
1. Levantamiento de reporte de bache en el SUAC de CDMX . . . . . . . . . . . . . . 3
2. Sistema de Reportes de Baches en la CDMX: Bachen’t . . . . . . . . . . . . . . . . 4
3. Casos de Uso . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
4. Entidad - Relacion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
5. Pantalla de reportar bache . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
6. Pantalla de iniciar sesión . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
7. Pantalla de menu de baches reportados . . . . . . . . . . . . . . . . . . . . . . . . . 14
8. Pantalla para móvil de reportar bache . . . . . . . . . . . . . . . . . . . . . . . . . 14
9. Pantalla para móvil de iniciar sesión . . . . . . . . . . . . . . . . . . . . . . . . . . 15
10. Pantalla para móvil de menu de baches reportados . . . . . . . . . . . . . . . . . . 15
 1 INTRODUCCIÓN

1. Introducción
1.1. Problemática
De acuerdo con el segundo informe de la jefa de gobierno, Claudia Sheinbaum, entre agosto
del 2019 y julio del 2020, se realizaron 756 intervenciones por parte de los juzgados cı́vicos para
determinar si los daños causados por baches presentes en las vı́as de transporte de la CDMX eran
resposabilidad gubernamental. De los casos intervenidos, 718 fueron efectivamente atribuı́dos a la
administración por daños a vehı́culos particulares, casi un 95 % de los casos [1].

Los accidentes automovilı́sticos por baches en la Ciudad de México (CDMX) son abundantes,
por el hecho de que en las vı́as principales se suelen encontrar en gran cantidad estos desperfectos.
En [2], se menciona que los accidentes causados por baches pueden ocasionar daños al vehı́culo tales
como deformaciones de los neumáticos o rines e incluso daños que hacen necesario su reemplazo,
afecciones del sistema de suspensión, o dirección fuera de alineación.

La causa principal de los baches es el paso continuo de los vehı́culos que transitan diariamente
por las calles principales de la CDMX, los cuales generan un desgaste en la carpeta asfáltica que se
incrementan en temporadas de lluvia. Anteriormente existı́an cuadrillas por toda la ciudad con el
objetivo de tapar estos baches, estos eran empleados de las distintas delegaciones, lo cual, según [3],
terminó con la democratización de la ciudad cuando las delegaciones, ahora alcaldı́as, empezaron
a disputar facultades con el gobierno central.

El gobierno de la CDMX ha implementado un programa de Indemnización por baches [6] que

cubre únicamente la zona de vialidades principales de la CDMX. Este programa tiene como in-
conveniente la distinción de vialidades primarias y secundarias por parte del ciudadano, ya que es
muchas ocasiones se desconoce y por ende el responsable de llevar a cabo la reparación no está
claro. [3].

En el año 2016 (aproximadamente) se implementó el programa BACHE-24 en la CDMX, el

cual consiste en una aplicación para dispositivos móviles hecha con la finalidad de permitirle al
ciudadano reportar un bache en una vı́a primaria de la CDMX. Esta aplicación está integrada por
un sencillo sistema de reporte, verificación y asignación de cuadrilla, mismo que al atenderse el
reporte notifica al usuario. [4]. Sin embargo,las reseñas de esta aplicación por parte de los usuarios
en la tienda de aplicaciones de Google indican que esta aplicación actualmente no tiene funciona-
miento alguno [5].

Establecido en 2019, el Sistema Unificado de Atención Ciudadana SUAC, funge como plata-
forma electrónica para atender solicitudes de servicios de distinta ı́ndole dentro de la CDMX [9].
Entre los servicios que se pueden solicitar son los reportes de baches que conciernen al Locatel [10].

Figura 1: Levantamiento de reporte de bache en el SUAC de CDMX

3
1.2 Propuesta de solución 1 INTRODUCCIÓN

1.2. Propuesta de solución

Bachen’t se presenta como una herramienta destinada a auxiliar la notificación de baches de las
calles de la CDMX en vı́as principales, brindando al ciudadano la posibilidad de localizar el bache
en un mapa de Google y generar un reporte en una base de datos para la posterior gestión de estos
por parte de la dependencia u organismo correspondiente. Esto por supuesto, tiene la finalidad de
que se proceda de acuerdo a los protocolos adecuados por parte de las autoridades, con el objetivo
de que se realice una inspección presencial y se proceda con la respectiva reparación del desperfecto.

Figura 2: Sistema de Reportes de Baches en la CDMX: Bachen’t

Un aspecto destacable de esta herramienta, es la posibilidad de llevar a cabo un conteo de

reportes en un mismo bache. Este conteo de reportes pretende establecer un lı́mite máximo de
incidencias, el cúal al verse superado, genere de manera automática una solicitud de atención a la vı́a
en la plataforma electrónica SUAC de la CDMX. Por otra parte, este sistema pretende aprovechar
la información recabada para apoyar la organización y gestión de las cuadrillas encargadas de dar
el servicio a la ciudad.

1.3. Objetivo
General
Desarrollar una aplicación web móvil para reportar los baches dentro de las vı́as
principales de la CDMX para su posterior reparación.

Especı́ficos
1. Diseñar, desarrollar y documentar una aplicación para levantar reportes de
baches.
2. Diseñar e implementar el modelo de datos para mantener los reportes.
3. Implementar un módulo del sistema que se coordine con el sistema electrónico
de solicitudes del SUAC para informar sobre el bache.

1.4. Estado del árte

1. Bache 24 CDMX (Google Play): La aplicación proporcionaba la facilidad di-
recta de reportes con las autoridades pertinentes de la CDMX, el programa
pretendı́a de funcionar las 24 horas los 365 dı́as del año [5].
2. BACHES APP (Google Play): Aplicación para reportar baches en tiempo real
de manera sencilla. [7]

4
1.4 Estado del árte 1 INTRODUCCIÓN

3. UltimoBache (Google Play): Es una aplicación que permite reportar baches

únicamente en la delegación Coyoacán. [8]

5
 2 MARCO TEÓRICO

2. Marco Teórico
2.1. Descripción del sistema.
La aplicación que se pretende desarrollar en principio muestra un menú de inicio
de sesión, al iniciar sesión, el usuario será capaz de reportar un bache completan-
do un sencillo formulario que tiene que ver con el bache encontrado, requiriendo
algunos datos como: ubicación, foto del bache y referencias del lugar. Al reportar
un bache, este quedará registrado por si fuese necesario que otro usuario apruebe
o no la condición del bache, al tener un número de votos mı́nimo, este bache se
considerará como peligroso, por lo que sé generará un reporte electrónico del bache
en la plataforma del SUAC.

La aplicación también mostrará al usuario que caracterı́sticas debe tener un bache

para ser considerado como tal, al igual de cómo se debe considerar una vı́a principal
de la CDMX.

2.2. Elementos, herramientas, plataformas utilizadas

Al ser una aplicación de uso ocasional, se optó por desarrollar una aplicación
web móvil, la cual tiene como caracterı́stica que no debe ser instalada por el usuario
y tendrá la necesidad de utilizar un navegador web ya instalado por defecto en el
dispositivo móvil o anteriormente por el usuario.

Las tecnologı́as que se pretenden usar son:

HTML: Define la estructura básica y código para la definición de contenido
de la página web, aquı́ se presentan los formularios necesarios para reportar el
bache.
CSS: Es utilizado para dar presentación del documento HTML.
jQuery: Es una biblioteca multiplataforma de JavaScript, permite interactuar
con el documento HTML y manipular el árbol DOM.
Bootstrap: Es utilizado para crear el diseño responsivo de la aplicación web
móvil.
PHP: Utilizado para hacer la conexión a la base de datos.
MySql: Como sistema gestor de bases de datos.

2.3. Metodologı́a
Para el desarrollo del sistema se utilizó una combinación de dos metodologı́as/modelos,
Kanban y espiral de Boehm. La primera es una metodologı́a ágil que lleva como ob-
jetivo el gestionamiento de manera general cómo se van completando las tareas y
su ventaja es que es fácil de utilizar, actualizar y asumir por el equipo. Tiene como
principios una calidad garantizada, reducción del desperdicio, una mejora continua
y una gran flexibilidad.
Mientras que el modelo de espiral de Boehm tiene ventajas en cuanto al desarrollo
de software, por ejemplo, su ciclo más interno se relaciona con la factibilidad del
sistema, después tiene la definición de requerimientos, posteriormente el diseño del
sistema, etc.

6
2.3 Metodologı́a 2 MARCO TEÓRICO

Se optaron por estos modelos, en principio, el espiral de Boehm funciona para po-
ner en contexto todos los temas que pudieran relacionarse a entender el problema
planteado, su documentación y desarrollo del sistema, por otro lado, Kanban ayuda
a la gestión y distribución de actividades en el equipo ası́ como mantener un control
de tiempo que cada actividad conlleva. Las herramientas de Kanban consisten en
dividir las fases de cada actividad en al menos tres, que son: pendiente, en proceso
y terminado.

7
3.3 Casos de uso 3 ANALISIS

3. Analisis
3.1. Requerimientos Funcionales

Id Requerimiento
RF1 Enviar reporte al SUAC
RF2 Mostrar guı́a para identificación de baches
RF3 Reportar un bache nuevo en el sistema
RF4 Reportar un bache existente en el sistema
RF5 Mostrar los baches reportados
RF6 Desplegar la información de los baches
RF7 Gestionar los usuarios especiales del sistema (Cuadrillas)
RF8 Mostrar un listado de baches reportados en el sistema

3.2. Requerimientos no Funcionales

Id Requerimiento
RF1 Implementación con tecnologı́as Web
RF2 Diseño responsivo
RF3 Modularización (para futuras expansiones o adaptaciones)*
RF4 Encriptación de las información (En el modelo de datos y las peticiones)**
RF5 Optimización de código***

Para cumplir la mantenibilidad*

Para cumplir la confiabilidad**
Para cumplir la eficiencia***

3.3. Casos de uso

Previo a describir los casos de uso del sistema, se definen los cuatro actores que
en este participan:

Ciudadano Jefe de cuadrilla Cuadrilla Administrador SUAC

El Ciudadano se refiere a un habitante de la CDMX con un dispositivo móvil y

acceso a internet. La cuadrilla y el jefe de la cuadrilla son los equipos de inspección
y reparación designados por la alcadı́a o la jefatura de la CDMX según correspon-
da. El administrador es el funcionario encargado de la gestión de accesos al sistema
por parte de las cuadrillas. Con SUAC se hace referencia directamente al servicio
electrónico de quejas de la CDMX.

Ciudadano
• Generar una nueva entrada de reporte para un bache no registrado en la
base de datos
• Visualizar los baches con reporte indicados con un marcador en el mapa
de Google

8
3.3 Casos de uso 3 ANALISIS

• Seleccionar un bache y desplegar la información de este (Ubicación, reportes

acumulados, fotos)
• Reportar un bache seleccionado desde el mapa (se incrementa el reporte
en la BD) con la posibilida de anexar foto
• Visualizar la guı́a para identificación de baches
Cuadrillas y Jefe de cuadrillas
• Ingresar al sistema con la credenciales autorizadas por el administrador
• Visualizar una lista de baches ordenados en función de número de reportes
y fecha de reporte
Jefe de cuadrillas
• Solicitar la inspección presencial de un bache
• Solicitar la reparación de un bache
Cuadrillas
• Confirmar reparación
• Visualizar lista de reparaciones pendiente
Administrador
• Alta y baja de Jefes de cuadrillas y cuadrillas en el sistema
• Gestionar credenciales de Jefes de cuadrillas y cuadrillas
SUAC
• Enviar reporte electrónico al SUAC

9
3.4 Diagramas UML 3 ANALISIS

3.4. Diagramas UML

3.4.1. Diagrama de Casos de Uso

Figura 3: Casos de Uso

10
3.4 Diagramas UML 3 ANALISIS

3.4.2. Diagramas de Secuencia

Secuencia Iniciar Sesión

Secuencia Reportar Bache

Secuencia Votar por Bache

11
3.4 Diagramas UML 3 ANALISIS

3.4.3. Diagrama Entidad-Relación

Figura 4: Entidad - Relacion

12
 4 DISEÑO E IMPLEMENTACIÓN

4. Diseño e implementación
4.1. Diseño de la Interfaz

Pantalla de reportar bache

Figura 5: Pantalla de reportar bache

Pantalla de iniciar sesión

Figura 6: Pantalla de iniciar sesión

13
4.1 Diseño de la Interfaz 4 DISEÑO E IMPLEMENTACIÓN

Pantalla de menu de baches reportados

Figura 7: Pantalla de menu de baches reportados

Pantalla para móvil de reportar bache

Figura 8: Pantalla para móvil de reportar bache

14
4.1 Diseño de la Interfaz 4 DISEÑO E IMPLEMENTACIÓN

Pantalla para móvil de iniciar sesión

Figura 9: Pantalla para móvil de iniciar sesión

Pantalla para móvil de menu de baches reportados

Figura 10: Pantalla para móvil de menu de baches reportados

15
4.2 Descripción visual de funcionamiento 4 DISEÑO E IMPLEMENTACIÓN

4.2. Descripción visual de funcionamiento

Pantalla de reportar bache.
En esta pantalla se muestra un mapa en el que se podrán visualizar los baches
reportados en la CDMX, en seguida se encuentra un formulario que toma base del
sistema de reportes del SUAC con los datos necesarios para hacer el reporte. Una
vez llenado, se levantará el reporte y se podrá visualizar en la pantalla de menu de
baches reportados.
Otros ciudadanos podrán notificar en esta misma pantalla con ayuda del mapa
si también han visualizado el mismo bache, de esta forma se podrá priorizar en qué
sectores hay más reporte para que sean reparados más rápido.
Pantalla de iniciar sesión.
Aquı́ el personal de las cuadrillas podrán iniciar sesión en una pantalla agena a
los ciudadanos, el personal deberá ser registrado en la base de datos previamente
por el administrador del sistema para que pueda acceder al sistema.
Pantalla de menu de baches reportados.
Esta es la pantalla en la que el personal de las cuadrillas podrán visualizar toda la
información de los reportes hechos por los ciudadanos, aquı́ podrán ver la ubicación
del bache, el estatus del reporte y una imagen referente al bache para ayudar con
su localización. También en esta pantalla, el personal podrá estar notificando acerca
del estado del reporte.
Pantalla para móvil de reportar bache.
Su función es la misma que la pantalla para reportar bache, con la variación de
que se adapta la vista de acuerdo a la pantalla del dispositivo móvil que el usuario
utilice.
Pantalla para móvil de iniciar sesión.
Su función es la misma que la pantalla para iniciar sesión, con la variación de
que se adapta la vista de acuerdo a la pantalla del dispositivo móvil que el usuario
utilice.
Pantalla para móvil de menu de baches reportados.
Su función es la misma que la pantalla de menu de baches, con la variación de
que se adapta la vista de acuerdo a la pantalla del dispositivo móvil que el usuario
utilice.

16
 5 CONCLUSIONES Y TRABAJO A FUTURO

5. Conclusiones y trabajo a futuro

El sistema como se ha mencionado pretende auxiliar el reporte de baches, enfa-
tizando en brindarle al ciudadano un medio de acceso rápido y colaborativo que le
permita a las autoridades correspondientes de la CDMX identificar los casos priorita-
rios y factibles de atender, agilizando de esta forma la disminución de las ocurrencias
de este problema.

Por otra parte la caracterı́stica de soporte a las cuadrillas y sus responsables

genera un enlace directo entre los casos reportados y los actores principales en la
coordinación de la inspección y procesos de reparación de los baches, fomentando
nuevamente, la gestión mas sencilla del proceso que va desde el reporte hasta la
acción y seguimiento.

En cuanto al aspecto técnico del sistema, se prioriza el acceso a la aplicación en

medios generales y con especificaciones mı́nimas, lo cual permita expandir el uso del
sistema por quienes lo requieran sin necesidad de contar con dispositivos de especifi-
caciones tan estrictas. Esto es apoyado por la organización y desarrollo del proyecto
basado en un modelo de proceso de desarrollo y las téncnicas y herramientas con
las que este es compatible, buscando de esta forma cumplir con la entrega de un
producto útil y que cuente con las cualidades mı́nimas que un software debe tener
a dı́a de hoy.

Como plan a futuro quedan abiertos varios caminos de desarrollo, desde la expan-
sión del sistema a otras entidades del paı́s, hasta la integración de funcionalidades
que auxilien problemas que requieran y les sea posible implementar una herramienta
computacional.

17
 REFERENCIAS

6. Referencias

Referencias
[1] . Zamarrón. (2020, septiembre 11) Nueve de cada 10 daños a
los autos por baches son culpa de la CDMX [Online]. Dispo-
nible en: https://www.elsoldemexico.com.mx/metropoli/cdmx/
nueve-de-cada-10-danos-a-los-autos-por-baches-son-culpa-de-la-\
cdmx-danos-indemnizaciones-segundo-informe-5744918.html
[2] . Isita. (2020, septiembre 30) ¿Un bache rompió la llanta de tu co-
che? Esto puede traer otras consecuencias [Online]. Disponible en:
https://www.oinkoink.com.mx/noticias/finanzas-personales/
baches-cdmx-2020-consecuencias-tu-auto/
[3] . Gamboa. (2019, noviembre 6) Los baches [Online]. Disponible en: https://
realestatemarket.com.mx/noticias/infraestructura-y-construccion/
26406-los-baches
[4] DMX. (2016). BACHE-24 CDMX PROGRAMA DE BACHEO DE LA CIU-
DAD DE MÉXICO [Online]. Disponible en: https://bache24.agucdmx.gob.
mx/
[5] DMX. Bache 24 CDMX [Online]. Disponible en: https://play.google.com/
store/apps/details?id=com.cmi.bache24&hl=es_419
[6] obierno de la Ciudad de México. Indemnización por Baches [Online]. Disponible
en: https://tramites.cdmx.gob.mx/inicio/ts/649/0
[7] aches App. [Online] Disponible en: https://play.google.com/store/apps/
details?id=com.bachesapp.mexico.app
[8] abre Importadora SA de CV. UltimoBache [Online] Disponible en: https://
play.google.com/store/apps/details?id=com.ultimobache.ciudadano
[9] one en marcha la ADIP el Sistema Unificado de Atención Ciudadana
(SUAC) [Online] Disponible en: https://adip.cdmx.gob.mx/comunicacion/
nota/adip-pone-en-marcha-suac
[10] ervicios LOCATEL [Online] Disponible en: https://tramites.cdmx.gob.mx/
inicio/ts/905/0

18