Desarrollo del portal de administración y un prototipo funcional para aplicación web Q-Bus, la cuál permite consultar las rutas de buses disponibles para llegar de un punto a otro y desplegar información de las rutas de transporte público en la Ciudad de

UNIVERSIDAD TECNOLÓGICA EQUINOCCIAL

FACULTAD DE CIENCIAS DE LA INGENIERÍA E

INDUSTRIAS

CARRERA DE INGENIERÍA INFORMÁTICA Y

CIENCIAS DE LA COMPUTACIÓN

DESARROLLO DEL PORTAL DE ADMINISTRACIÓN Y UN

PROTOTIPO FUNCIONAL PARA APLICACIÓN WEB Q-BUS,

LA CUÁL PERMITE CONSULTAR LAS RUTAS DE BUSES

DISPONIBLES PARA LLEGAR DE UN PUNTO A OTRO Y

DESPLEGAR INFORMACIÓN DE LAS RUTAS DE

TRANSPORTE PÚBLICO EN LA CIUDAD DE QUITO

TRABAJO PREVIO A LA OBTENCIÓN DEL TÍTULO

DE INGENIERO EN INFORMÁTICA Y CIENCIAS DE LA COMPUTACIÓN

JULIO CÉSAR BUSTOS NARVÁEZ

DIRECTOR: DR. DIEGO ORDÓÑEZ CAMACHO

DERECHOS DE AUTOR

FORMULARIO DE REGISTRO BIBLIOGRÁFICO

PROYECTO DE TITULACIÓN

DATOS DE CONTACTO

CÉDULA DE IDENTIDAD 1722163829

APELLIDO Y NOMBRES BUSTOS NARVÁEZ JULIO CESAR

DIRECCIÓN AV.MANUEL CÓRDOVA GALARZA

CONJUNTO CIUDAD DEL SOL II CASA #161

EMAIL [email protected]

TELÉFONO FIJO 59323434009

DATOS DE LA OBRA

TITULO:

DESARROLLO DEL PORTAL DE ADMINISTRACIÓN Y UN PROTOTIPO FUNCIONAL PARA APLICACIÓN WEB Q-BUS, LA CUÁL PERMITE CONSULTAR LAS RUTAS DE BUSES

DISPONIBLES PARA LLEGAR DE UN PUNTO A OTRO Y

DESPLEGAR INFORMACIÓN DE LAS RUTAS DE TRANSPORTE PÚBLICO EN LA CIUDAD DE QUITO

AUTOR O

AUTORES: JULIO CÉSAR BUSTOS NARVÁEZ

FECHA DE ENTREGA DEL PROYECTO DE TITULACIÓN: 2016/10/01 DIRECTOR DEL PROYECTO DE TITULACIÓN:

DR. DIEGO ORDÓÑEZ CAMACHO

PROGRAMA PREGRADO POSGRADO

TITULO POR EL

QUE OPTA:

INGENIERO EN INFORMÁTICA Y CIENCIAS DE LA COMPUTACION

RESUMEN

SU NOMBRE, DIBUJARLAS EN EL MAPA CON SUS RESPECTIVAS PARADAS, TAMBIÉN ES POSIBLE BUSCAR LA SUGERENCIA DE RUTAS DISPONIBLES PARA PODER LLEGAR DE UN PUNTO A OTRO EN EL MAPA, ESTA FUNCIONALIDAD DESPLIEGA LAS RUTAS QUE TENGAN REGISTRADAS PARADAS CERCANAS A LOS PUNTOS SEÑALADOS, SE GRAFICA LA RUTA A PIE HACIA LA PARADA MÁS PRÓXIMA, LA RUTA DEL BUS INDICANDO EN QUE PARADA DEBE BAJARSE Y EL TRAYECTO A PIE HACIA EL DESTINO. SE CONFIGURÓ EL CMS DRUPAL EN EL CUAL ESTÁ DESARROLLADO UN SERVICIO WEB EN PHP PARA LA COMUNICACIÓN CON LA BASE DE DATOS IMPLEMENTADA EN MYSQL Y SE PROCEDIÓ CON EL DESPLIEGUE DE LAS PÁGINAS WEB QUE CONFORMAN TANTO EL ADMINISTRADOR WEB COMO EL CLIENTE WEB, APOYADAS PRINCIPALMENTE POR JAVASCRIPT HTML Y CSS. LA LIBRERÍA DE GOOGLE MAPS BRINDA LAS HERRAMIENTAS NECESARIAS PARA INTERACTUAR CON EL MAPA DIGITAL Y ASÍ GENERAR CONTENIDO Y DESPLEGAR INFORMACIÓN.

PALABRAS

CLAVES:

APLICACIÓN WEB, TRANSPORTE PÚBLICO, BUS, QUITO, MAPAS, GOOGLE MAPS, SOFTWARE, DRUPAL, CMS, PROTOTIPOS.

ABSTRACT:

i

ÍNDICE DE CONTENIDOS

PÁGINA

RESUMEN vi

ABSTRACT vii

1. INTRODUCCIÓN 1

2. MARCO TEÓRICO 2

2.1. TRANSPORTE PÚBLICO 2

2.1.1. TRANSPORTE PÚBLICO EN LA CIUDAD DE QUIT 2

2.2. APLICACIONES WEB 2

2.2.1. ARQUITECTURA 3

2.2.1.1. Cliente 3

2.2.1.2. Servidor 3

2.3. TECNOLOGÍAS Y HERRAMIENTAS 4

2.3.1. HTML 4

2.3.2. HTML5 4

2.3.3. CSS 4

2.3.4. JAVASCRIPT 4

2.3.5. JQUERY 5

2.3.6. JSON 5

2.3.7. PHP 5

2.3.8. MYSQL 6

2.4. TWITTER BOOTSTRAP 6

2.5. CMS 6

2.5.1. DRUPAL 6

2.5.1.1. Drupal Themes 7

ii

2.6. GEOLOCALIZACIÓN 7

2.6.1. MAPAS 7

2.6.2. GOOGLE MAPS 7

2.7. INGENIERÍA DE SOFTWARE 8

2.7.1. MODELOS DE DESARROLLO DE SOFTWARE 8

2.7.1.1. Modelo de desarrollo Evolutivo o en espiral 8

2.8. METODOLOGÍAS 9

2.8.1. METODOLOGÍAS PARA EL DESARROLLO ÁGIL DE

SOFTWARE 10

2.9. ESTADO DEL ARTE 11

2.9.1. GOOGLE MAPS 11

2.9.2. CÓMO LLEGO 11

3. METODOLOGÍA 12

3.1. ALCANCE 12

3.2. EQUIPOS 13

3.3. HERRAMIENTAS TÉCNICAS 13

3.4. METODOLOGÍA 14

3.5. MÉTODO BASADO EN PROTOTIPOS 14

3.5.1. PLAN RÁPIDO 14

3.5.2. MODELADO, DISEÑO RÁPIDO 14

3.5.3. CONSTRUCCIÓN DEL PROTOTIPO 15

3.5.4. ENTREGA Y RETROALIMENTACIÓN 15

4. RESULTADOS Y DISCUSIÓN 16

4.1. PLAN RÁPIDO 16

4.1.1. REQUERIMIENTOS FUNCIONALES 16

iii

4.2.1. ESTRUCTURA DEL SISTEMA 18

4.2.2. DISEÑO DE LA BASE DE DATOS 19

4.2.3. DISEÑO DE LA INTERFAZ 20

4.2.3.1. Diseño de la plataforma administrativa: 20

4.2.3.2. Diseño del cliente web 22

4.2.4. PROCESO PARA LA BÚSQUEDA DE SUGERENCIA DE

RUTAS 23

4.3. CONSTRUCCIÓN DEL PROTOTIPO 24

4.3.1. SERVICIO WEB (MÓDULO DE ACCESO A DATOS MAD) 25 4.3.2. DESARROLLO DEL CLIENTE DEL SERVICIO WEB 26

4.3.3. IMPLEMENTACIÓN DE GOOGLE MAPS 27

4.3.4. CONTROLES GRÁFICOS 31

4.4. DESARROLLO, ENTREGA Y RETROALIMENTACIÓN 33

4.4.1. INTERFAZ FINAL 34

5. CONCLUSIONES Y RECOMENDACIONES 35

5.1. CONCLUSIONES 35

5.2. RECOMENDACIONES 35

iv

ÍNDICE DE TABLAS

PÁGINA Tabla 1. Cuadro comparativo de metodologías Ágiles y Tradicionales 10

v

ÍNDICE DE FIGURAS

PÁGINA Figura 1. Servidor todo en uno (Sergio Luján Mora, 2012) 3

Figura 2. Modelo en espiral (Pressman, 2010) 9

Figura 3. Disposición de la arquitectura de la aplicación 18

Figura 4. Modelo relacional de la base de datos de Q-Bus 19

Figura 5. StoryBoard administrador web (plantilla genérica) 20

Figura 6. StoryBoard de Creación de rutas y paradas 21

Figura 7. Story board del cliente web 22

Figura 8. Flujo del proceso de consulta de rutas disponibles para llegar de

un punto a otro 23

Figura 9. Esquema de la disposición de archivos para el módulo de Drupal

que contiene la aplicación web 24

Figura 10. Código de conexión a la base de datos (Archivo

db_Mad_QBus.inc) 25

Figura 11. Código de conexión al servicio web (ws_qBus.js) 26

Figura 12. Código de ejemplo de implementación del cliente del servicio web 27

Figura 13. Código de ejemplo de implementación de Google Maps Api V3 27

Figura 14. Código de ejemplo para graficar un mapa en JavaScript 28

Figura 15. Código de ejemplo para graficar un marcador en el mapa 28

Figura 16. Código de ejemplo para graficar una ruta en el mapa 29

Figura 17. Código de ejemplo para la solicitud de líneas ajustadas a la

carretera 30

Figura 18. Ejemplo de una tabla con Bootstrap Table 31

Figura 19. Ejemplo de una notificación con Bootstrap Notification 32

Figura 20. Ejemplo de un dialogo con Bootstrap Dialog 32

Figura 21. Captura de pantalla creación de ruta 34

vi

RESUMEN

El presente trabajo de titulación corresponde al análisis, diseño e implementación del prototipo funcional para la aplicación web Q-Bus que despliega información sobre las rutas de transporte público, buscar las rutas disponibles para llegar de un punto a otro y administrar su contenido. La aplicación está conformada por una plataforma de administración web y de un cliente web, en la plataforma de administración se puede registrar rutas virtuales del recorrido de un bus utilizando la librería de Google Maps para JavaScript y trazar la ruta sobre el mapa digital con precisión siguiendo los lineamientos de las carreteras, además es posible registrar las paradas de buses que conforman las rutas de manera gráfica mediante clics sobre el mapa, editar información correspondiente a las rutas, paradas y cooperativas. El cliente web permite buscar las rutas de transporte público por su nombre, dibujarlas en el mapa con sus respectivas paradas.

vii

ABSTRACT

1

1. INTRODUCCIÓN

Actualmente la ciudad de Quito brinda un complejo sistema de transporte público el cual permite a los habitantes movilizarse por toda la ciudad, dicho sistema de transporte se conforma de varias cooperativas de buses que a su vez tienen diferentes rutas disponibles. El transporte público está en constante cambio pero a pesar de esto aún no existe la suficiente información sobre las rutas de buses y detalles de su funcionamiento al alcance de los usuarios. Para aportar con el continuo mejoramiento de este servicio se propone la creación de una aplicación web la cual permita consultar las rutas de buses disponibles, junto con un portal web que permita la administración de esta información de manera fácil y amigable con el usuario. De este modo se desea contribuir al desarrollo tecnológico de la ciudad, mejorar la experiencia de los usuarios y modernizar el servicio de transporte público, que en la actualidad no cuenta con un software que permita determinar qué rutas de buses se pueden utilizar para movilizarse de un lugar a otro.

2

2. MARCO TEÓRICO

A continuación se tratará temas referentes al proyecto como el transporte público, aplicaciones web, también algunas herramientas, métodos y metodologías de utilidad.

2.1. TRANSPORTE PÚBLICO

Transporte público son los sistemas de transportación que operan con ruta fija y horarios predeterminados y que pueden ser utilizados por cualquier persona a cambio del pago de una tarifa establecida. (Molinero, 1998)

2.1.1. TRANSPORTE PÚBLICO EN LA CIUDAD DE QUIT

Actualmente en la ciudad de Quito existen dos tipos de transporte público masivo los cuales son los corredores centrales mantenidos por el Municipio de Quito conocidos como Trolebús, Metrobús Q y Ecovía que recorren la ciudad longitudinalmente, es decir de norte sur y por otro lado tenemos el transporte urbano que comprende alrededor de 56 cooperativas con aproximadamente 2100 buses que recorren toda la ciudad. (PrensaQuito, 2014)

2.2. APLICACIONES WEB

3

2.2.1. ARQUITECTURA

Las aplicaciones web se basan en una arquitectura cliente/servidor, el cliente puede ser cualquier navegador web y el servidor es donde se concentra toda la funcionalidad de dicha aplicación, la base de datos, el servicio web y donde se procesa la información.

2.2.1.1. Cliente

Es la interfaz que permite la interacción con el usuario final solicitando al servidor los recursos necesarios para operar correctamente. El cliente web está conformado por código HTML, CSS y JavaScript.

2.2.1.2. Servidor

Es una aplicación que permanentemente está a la espera de las solicitudes del cliente para enviar los recursos necesarios para su funcionamiento. El servidor solicita información a la base de datos y procesa la información antes de ser enviada al cliente.

En la Figura 1 se puede apreciar que la lógica de negocio y la lógica de datos están en un mismo servidor el cual se comunica directamente con el cliente.

4

2.3. TECNOLOGÍAS Y HERRAMIENTAS

2.3.1. HTML

El acrónimo HTML en inglés Hypertext Markup y en español “Lenguaje de Marcas de Hipertexto”, sirve para estructurar documentos, pero no describe o define su apariencia. Está compuesta por dos secciones la cabecera donde se definen las propiedades del documento y el cuerpo que es la sección que contiene los elementos a ser desplegados en la página web. (Vértice, 2009)

2.3.2. HTML5

HTML5 representa el avance en el diseño web, en controles y usabilidad. Provee una manera simple de manipular gráficos, ofrece métodos para agregar audio, video en una página web y corrige errores que se dieron durante la evolución de HTML. Incluye numerosas mejoras como el manejo de la geolocalización, almacenamiento interno en reemplazo de las cookies acceso a periféricos, y la facilidad de convertir páginas web en aplicaciones móviles para navegadores de celular. (Vértice, 2009)

2.3.3. CSS

CSS (Cascading Style Sheets) en español Hoja de Estilos en Cascada permite dar formato a las etiquetas definidas en el archivo HTML.

2.3.4. JAVASCRIPT

5

2.3.5. JQUERY

JQuery es una librería JavaScript que optimiza funciones propias de JavaScript para facilitar la codificación de scripts de una página web. Agrupa varias funciones y las pone en métodos muy útiles para el desarrollador. (w3schools, s.f.)

JQuery implementa el uso de los siguientes componentes para facilitar su uso:

 Manipulación de HTML/DOM

 Manipulación de CSS

 Control de eventos, métodos HTML

 Efectos y animaciones

 AJAX

2.3.6. JSON

JavaScript Object Notation proviene del lenguaje de programación JavaScript, a partir de su estructura de datos, no obstante no es un lenguaje de programación por sí solo, es de hecho un formato de datos el cual se convirtió en un estándar de intercambio de información utilizada por JavaScript para el manejo de objetos. (Apress, 2015)

2.3.7. PHP

6

2.3.8. MYSQL

Desde su lanzamiento en el 2000, MySQL se ha convertido en la base de datos libre más popular del mundo usada por desarrolladores, trabajos simples, proyectos y pequeñas empresas, hasta ser parte de grandes empresas como Facebook, Twitter y Wikipedia consta de alto rendimiento y escalabilidad, ideal para desarrollos web. (Murach, 2015)

2.4. TWITTER BOOTSTRAP

Es un marco de trabajo compuesto de hojas de estilo CSS y JavaScript, creado por dos desarrolladores de Twitter quienes pretendían tener un estándar en la apariencia de sus desarrollos, permite balancear la distribución de los elementos de la pantalla y dar armonía en la estructura y colores. (Shaw, 2014)

2.5. CMS

Es un sistema administrador de contenido por sus siglas en ingles Content Managment System. Permite a sus usuarios crear, administrar, distribuir y publicar el contenido en sus sitios web. Provee herramientas para facilitar estas tareas y alberga una base de datos propia.

2.5.1. DRUPAL

7

2.5.1.1. Drupal Themes

Los temas de Drupal definen la apariencia del sitio, es decir, la distribución del menú, los colores, el tipo de letra, el tamaño de los elementos, el pie de página, cabecera y cada uno de los elementos de la página web.

2.5.1.2. Drupal Modules

Pretenden extender la funcionalidad básica de Drupal Core, estos módulos son diseñados, desarrollados y probados por la comunidad. Los módulos pueden ser descargados de manera gratuita.

2.6. GEOLOCALIZACIÓN

Es la posición geográfica de una persona u objeto en la Tierra triangulada en base a los satélites que orbitan la atmosfera. Los navegadores web tienen la capacidad de desplegar información acerca de su posición, esta información proviene de un dispositivo GPS o por la dirección IP analizada con redes WiFi cercanas, esta información puede se puede ocultar por motivos de privacidad.

2.6.1. MAPAS

Mapa es la representación plana, geométrica simplificada de toda o una sección de la Tierra a una escala. Escala es la proporción entre la realidad y el mapa. (Rafael Prieto-Puga, 2011)

2.6.2. GOOGLE MAPS

8

2.7. INGENIERÍA DE SOFTWARE

La Ingeniería de Software es un proceso intensivo de conocimiento, que incluye la recolección de requerimientos, diseño, desarrollo, pruebas, implementación y mantenimiento. (Gacitúa 2003). Dentro de la Ingeniería de Software es necesario aclarar los conceptos de modelo y metodología.

2.7.1. MODELOS DE DESARROLLO DE SOFTWARE

Es una representación abstracta de un proceso, en este caso es desarrollo de una aplicación o software. Cada modelo se enfoca en una perspectiva diferente para aportar al proceso de creación de software. Estas abstracciones de los procesos o marcos de trabajo pueden ser adaptados para crear procesos aún más específicos.

2.7.1.1. Modelo de desarrollo Evolutivo o en espiral

Entrelaza las actividades de especificación, desarrollo y validación. Consiste en la creación de prototipos de una manera controlada como lo hace el modelo en cascada.

9

Figura 2. Modelo en espiral (Pressman, 2010)

Uno de los tipos de modelo de desarrollo evolutivo es el modelo de prototipos desechables, se basa en la creación de prototipos funcionales en base a los requerimientos del cliente y se experimenta con los requerimientos que no están del todo comprendidos para mejorarlos en una siguiente versión. El modelo evolutivo suele ser más efectivo en la creación de software ya que cumple con los nuevos requerimientos del cliente de inmediato, este modelo presenta problemas al momento de evaluar el desarrollo del proyecto ya que es necesario tener un entregable para poder medir el avance del mismo.

2.8. METODOLOGÍAS

10

2.8.1. METODOLOGÍAS PARA EL DESARROLLO ÁGIL DE SOFTWARE

Los procesos ágiles de desarrollo de software están diseñados para proporcionar software eficaz en el menor tiempo posible. Un punto muy importante es que en las décadas de los 80s los desarrollos eran grandes sistemas llenos de varios programas los cuales se debían realizar con varios equipos de trabajo, por lo que coordinar estas tareas y definir bien todos los requerimientos y procesos era una potente aliado, pero a medida de que el sistema se simplifican, los desarrolladores tardaban más tiempo en organizar el proceso de desarrollo que en desarrollarlo por lo que los se propuso alternativas para mejorar este inconveniente ahora conocidas como metodologías ágiles. A continuación se presenta un cuadro comparativo entre las metodologías agiles y las metodologías tradicionales (Tabla 1).

Tabla 1. Cuadro comparativo de metodologías Ágiles y Tradicionales

Metodología Ágil Metodología Tradicional

Modelos Desechables Modelo es esencial

Menor cantidad de roles y más flexibles Más roles y más específicos

No existe contrato formal Se requiere de un contrato establecido

El cliente forma parte del equipo de desarrollo

El cliente interactúa por medio de reuniones

Orientada a proyectos pequeños y locales Cualquier tipo de proyecto pero

mayormente utilizado en proyectos grandes

Énfasis en el trabajo y su equipo Énfasis en los procesos, roles y actividades

Se define la arquitectura mientras se avanza

La arquitectura se define en etapas tempranas

Basada en heurística Basado en estándares de desarrollo

11

2.9. ESTADO DEL ARTE

Actualmente las aplicaciones web permiten realizar una gran cantidad de tareas remotamente con la ayuda de un navegador web y una conexión a internet, una de las más revolucionarias es el servicio de geo posicionamiento en mapas digitales que permite ubicar al usuario en un mapa digital y permitir su interacción.

2.9.1. GOOGLE MAPS

Google presenta el servicio de trazo de rutas a pie, en automóvil, tren e incluso bicicleta en el mundo y en muchas de las grandes ciudades. El servicio de trazo de rutas en bus, esta funcionalidad no se encuentra disponible para la mayoría de ciudades en el mundo debido a que no hay la información necesaria para esta tarea. Entre los países más cercanos donde ya se encuentra implementada esta funcionalidad es Colombia con su ciudad Bogotá en la cual es posible buscar la ruta de bus que permita llegar de un punto a otro en el mapa.

2.9.2. CÓMO LLEGO

12

3. METODOLOGÍA

Se desarrolló e implementó el prototipo funcional de la aplicación web Q-Bus, la cual consta de un administrador y un cliente web. Se utilizó la metodología de desarrollo basada en prototipos la cual se detalla más adelante en este documento, también se detallan las herramientas y el alcance del proyecto.

3.1. ALCANCE

El desarrollo del prototipo de la aplicación web Q-Bus se limita a la ciudad de Quito, el proyecto se encuentra dividido en dos partes las cuales son el desarrollo de una plataforma de administración para la gestión del contenido de del cliente web que es la segunda parte en donde se pretende mostrar la información de las rutas de buses y que permitirá buscar las sugerencias de rutas para llegar de un lugar a otro. Cabe recalcar que tanto el administrador web y la aplicación web son prototipos los cuales están basados en los requerimientos previamente planteados, y que la información que despliega la aplicación es de prueba ya que levantar la información de todas cooperativas, rutas y paradas de buses no se contempló para el desarrollo del prototipo para tener un enfoque más dedicado al desarrollo y reducir el tiempo de entrega. La aplicación estará disponible en un servidor público con acceso mediante internet. Las aplicaciones funcionan dentro del mismo CMS en el mismo servidor. Tanto la aplicación como el administrador están optimizados para el navegador Google Chrome es decir no se consideró ningún otro explorador web y es posible que se puedan presentar errores a nivel de interfaz en cualquier otro navegador web.

 El administrador web consta de las siguientes características:

o Control de inicio de sesión para usuarios administradores del sistema.

13

o Creación, edición, eliminación de rutas de buses.

o Creación, edición, eliminación de paradas de buses.

o Interfaz de creación de paradas en el mapa digital.

o Interfaz de creación de rutas de buses en el mapa.

o Permite dibujar la ruta en el mapa para ser almacenada.

o Permite seleccionar las paradas pertenecientes a la ruta.

 La aplicación Q-Bus consta de las siguientes funcionalidades:

o Realizar búsquedas de las rutas por el nombre de la cooperativa o de la ruta.

o Seleccionar, ampliar y visualizar el camino y las paradas de una ruta.

o Buscar las rutas disponibles para llegar de un punto a otro en el mapa.

3.2. EQUIPOS

Los equipos a ser utilizados se limitan a los siguientes:

 Computador de Escritorio Windows 7

 Impresora

3.3. HERRAMIENTAS TÉCNICAS

Para el desarrollo de este proyecto se utilizaron las siguientes herramientas:

 Sublime Text 2

 FileZilla

 Fireworks CS

 Google Chrome

 MySQL Workbench

14

3.4. METODOLOGÍA

Se ha elegido la metodología de desarrollo ágil, a continuación se encuentran las razones por las cuales se eligió esta metodología:

 Flexible ante los cambios

 La arquitectura se la define conforme avanza el proyecto

 Los procesos son responsabilidad del desarrollador

 Tiempos de entrega relativamente cortos

3.5. MÉTODO BASADO EN PROTOTIPOS

Se eligió el método basado en prototipos debido a que en un principio no se conocían los requerimientos en su totalidad ya que se acopla mejor a la entrega de un producto de calidad, se puede analizar el estado actual del proyecto al finalizar cada prototipo y efectuar una evaluación constructiva. Se desarrolló el proyecto en las siguientes etapas:

3.5.1. PLAN RÁPIDO

Se procedió a identificar los requerimientos del funcionamiento del sistema así como los principales problemas para su temprana solución.

Mediante la observación se pudo determinar los diferentes requisitos del sistema experimentando las vivencias diarias como usuario del transporte público e identificando las debilidades y aspectos que se pueden mejorar y destacar de este servicio.

3.5.2. MODELADO, DISEÑO RÁPIDO

15 de la aplicación los cuales definen la interfaz de las diferentes pantallas del sistema, la navegación y presentación del contenido.

Para el diseño de la interfaz se utilizaron StoryBoards que permiten ver las pantallas a ser desarrolladas de manera didáctica, fácil, sencilla en poco tiempo. También se hizo uso de herramientas UML que permitieron definir el flujo de la aplicación y la interacción de componentes.

3.5.3. CONSTRUCCIÓN DEL PROTOTIPO

En esta etapa se desarrollaron las características del aplicativo que eran más importantes con anterioridad, continuando con los aspectos complementarios de la aplicación. Se desarrolló primero la gestión del contenido y se procedió a la interacción del usuario con el mapa utilizando Google Maps.

3.5.4. ENTREGA Y RETROALIMENTACIÓN

16

4. RESULTADOS Y DISCUSIÓN

Este proyecto tiene como objetivo principal el desarrollo del prototipo funcional de la aplicación web Q-Bus que consta de un portal de administración y un cliente web, el cual permite consultar las rutas de buses disponibles para llegar de un punto a otro y desplegar información de las rutas de transporte público en la ciudad de Quito. Por lo cual se ha utilizado el modelo de desarrollo basado en prototipos para cumplir con el objetivo antes mencionado.

A continuación se pondrá en evidencia el trabajo realizado en cada una de las etapas del desarrollo del proyecto utilizando el modelo de desarrollo de software basado en prototipos.

4.1. PLAN RÁPIDO

Para la ejecución del plan rápido se realizó el análisis por medio de la observación, los resultados obtenidos mediante esta técnica pueden ser apreciados a continuación los cuales se han listado a manera de requerimientos para el desarrollo del prototipo:

4.1.1. REQUERIMIENTOS FUNCIONALES

Administrador Web debe ser capaz de realizar las siguientes actividades:

 Validar el acceso de usuario

 Administrar las cooperativas de buses (crear, editar y eliminar)

o Nombre de la cooperativa

o Correo electrónico de la cooperativa

o Teléfono de la cooperativa

o Dirección de la cooperativa

 Administrar paradas de buses (crear, editar y eliminar)

o Nombre de la parada

17

o Referencia de la parada

o Coordenadas geográficas

o Seleccionar las coordenadas en el mapa

 Administrar rutas de buses en el mapa (crear, editar y eliminar)

o Nombre de la ruta

o Cooperativa

o Tiempo de Recorrido

o Hora de inicio de operación

o Hora de fin de operación

o Trazo de ruta en el mapa

El cliente web debe:

 Permitir la búsqueda de rutas de buses por nombre

 Buscar las rutas disponibles para llegar de un punto a otro en el mapa

o Indicar la ruta a pie desde el origen hasta la parada de abordaje y desde la parada de desembarque hacia el destino.

o Dibujar la parada de abordaje y de desembarque junto con la ruta del bus al seleccionar una ruta

o Reiniciar la búsqueda (Borrar la ruta del mapa)

o Mostrar la sugerencia de las posibles rutas

Requerimientos no funcionales:

 La interfaz de usuario debe ser amigable e intuitiva para el usuario y administrador

 La aplicación web y el administrador web deben estar funcionando en el mismo entorno es decir el mismo servidor.

 Las rutas que se trazan en el mapa deben estar sujetas a la carretera.

18

4.2. MODELADO, DISEÑO RÁPIDO

4.2.1. ESTRUCTURA DEL SISTEMA

La estructura del sistema consta de tres componentes principales: la base de datos, el servicio web conocido como Módulo de Acceso a Datos (MAD) y la aplicación web conformada por el administrador y el cliente web.

Tanto la base de datos como el servicio web, la plataforma de administración web y el cliente web se encuentran en el mismo servidor.

El servicio web se encarga de recibir las peticiones de los clientes ya sean dispositivos móviles u ordenadores, interpreta estas peticiones y se conecta a la base de datos para extraer la información, la procesa y la envía de regreso al cliente en formato JSON, La Figura 3 muestra la arquitectura previamente explicada.

19

4.2.2. DISEÑO DE LA BASE DE DATOS

El diseño de la base es simple y se ajusta a las necesidades básicas de la aplicación, está diseñada para facilitar las consultas. En la Figura 4 se encuentra el diagrama relacional de la base de datos de Q-Bus.

Figura 4. Modelo relacional de la base de datos de Q-Bus

20

4.2.3. DISEÑO DE LA INTERFAZ

Para esta etapa se realizó el modelado de la interfaz de la aplicación, mediante la herramienta conocida como StoryBoard para una vista preliminar del prototipo, en donde se detalla la estructura de los componentes gráficos dentro de cada una de las páginas que conforman el administrador web y el cliente web.

4.2.3.1. Diseño de la plataforma administrativa:

El diseño de la plataforma administrativa consta de tres partes la creación de cooperativas, paras de buses y rutas.

Para poder crear una ruta es necesario primero crear las paradas y la cooperativa a la cual pertenece. A continuación en la Figura 5 se presenta la plantilla de la interfaz utilizada por la administración de cooperativas, paradas y rutas.

21 El diseño de las páginas de cooperativa, paradas y ruta presentan una interfaz similar en la cual se listan todos los datos los cuales se puede editar, borrar y agregar nuevos registros.

Para la creación de rutas y paradas se presenta otra interfaz en la cual muestra un mapa de la ciudad con una capa sobrepuesta al mapa que permite interactuar directamente para la creación de rutas y paradas como se puede observar en la Figura 6.

22

4.2.3.2. Diseño del cliente web

Para el cliente web se presenta una única interfaz en la cual está el control de búsqueda de rutas del lado izquierdo el cual permite buscar las rutas de buses por nombre y del lado derecho está el control de cómo llego el cual permite buscar las sugerencias de rutas de bus disponibles para trasladarse de un lugar a otro como se muestra en la Figura 7.

Figura 7. Story board del cliente web

23

4.2.4. PROCESO PARA LA BÚSQUEDA DE SUGERENCIA DE RUTAS

Finalmente se planteó el proceso a seguir para poder encontrar las sugerencias de rutas para llegar de un punto a otro y la Figura 8 evidencia el proceso utilizado para obtener esta información.

24

4.3. CONSTRUCCIÓN DEL PROTOTIPO

Para comenzar se configuró el CMS Drupal en el servidor, más luego se implementó la base de datos en MySQL, posteriormente se desarrolló el servicio web en PHP, de tipo REST el cual recibe las peticiones en formato JSON por medio del protocolo de comunicación HTTP.

El servicio web, el administrador y el cliente web están desarrollados de la misma manera, es decir, como un módulo dentro del CMS. El servicio web se encuentra en la carpeta “include” mientras que la aplicación está en la carpeta “view”. El desarrollo está compuesto por código JavaScript y por las directrices del marco de trabajo para diseño de estilos web Bootstrap y sus librerías de apoyo para componentes web. En la Figura 9 se muestra la distribución de los archivos que conforman el módulo de Drupal antes mencionado.

Figura 9. Esquema de la disposición de archivos para el módulo de Drupal que contiene la

25 A partir de este punto se presentará código relacionado al desarrollo que se considera de mayor importancia para explicar el funcionamiento y construcción del prototipo.

4.3.1. SERVICIO WEB (MÓDULO DE ACCESO A DATOS MAD)

Para la creación del servicio web fue necesario crear una conexión con la base de datos en PHP. El archivo db_Mad_QBus.inc contiene los métodos necesarios para conectarse directamente a la base de datos y extraer información. La Figura 10 muestra el código utilizado para establecer esta conexión.

Figura 10. Código de conexión a la base de datos (Archivo db_Mad_QBus.inc)

26

4.3.2. DESARROLLO DEL CLIENTE DEL SERVICIO WEB

Este script realiza la conexión desde el servicio web hacia la base de datos a manera de cliente. Para interactuar con el servicio web se envía y recibe información en formato JSON. En la Figura 11 se encuentra el código fuente de esta clase que es utilizada en todas las páginas web de la aplicación.

27 Un ejemplo de como se utiliza el cleinte JavaScript para comunicarse con el servicio web se presenta en la Figura 12

Figura 12. Código de ejemplo de implementación del cliente del servicio web

4.3.3. IMPLEMENTACIÓN DE GOOGLE MAPS

Para incluir la librería Google Maps Api V3 en una página web se utilizó el siguiente código (Figura 13).

28 En la Figura 14 muestra el código implementado para ver un mapa dentro de una página web con varios parámetros que permiten personalizar el mapa, este código se lo ejecuta una vez que se ha cargado exitosamente la librería de Google Maps Api V3.

Figura 14. Código de ejemplo para graficar un mapa en JavaScript

Para poder graficar un marcador en el mapa con imagen personalizada se utilizó el siguiente código (Figura 15)

29 En la Figura 16 se encuentra el código JavaScript que despliega la herramienta que permite graficar rutas en el mapa. El control con el nombre de DrawingManager permite utilizar el mismo mapa para dibujar una ruta sobre él. Esta herramienta consta de un evento denominado polylinecomplete, que indica que se ha finalizado el trazo de la ruta.

30 Para poder ajustar las líneas creadas a la carretera se utiliza el siguiente servicio de Google Maps conocido como “Snap to road” el cual recibe un una sucesión de coordenadas geográficas que conforman la ruta que se desea ajustar a la carretera.

Este servicio de Google procesa esos puntos y retorna una nueva sucesión de puntos los cuales siguen los lineamientos de las calles en el mapa tomando en cuenta el sentido de las calles. Una vez que se reciben estos datos se procede a dibujar la nueva ruta obtenida. (Figura 17)

31

4.3.4. CONTROLES GRÁFICOS

Se utilizó librerías de apoyo para la parte gráfica que permiten generar controles genéricos de mucha utilidad como tablas, diálogos y notificaciones, estas librerías están basadas en los lineamientos gráficos de Bootstrap por lo que mejoran la apariencia de la aplicación significativamente y permiten establecer un estándar en el diseño de la interfaz. Las librerías que se mencionan a continuación son de libre utilización ya que son desarrolladas y mantenidas por la comunidad.

Bootstrap Table: permite el manejo de tablas dinámicas con controles de búsqueda, filtrado, orden y paginación. Esta librería es utilizada para administrar información a manera de tablas como se puede apreciar en la Figura 18.

32

Bootstrap Notifications: permite desplegar mensajes a manera de notificaciones en la página web (Figura 19).

Figura 19. Ejemplo de una notificación con Bootstrap Notification

Bootstrap DIalog: esta librería permite generar diálogos con muy buena presentación y manejo de acciones en los botones (Figura 20).

33

4.4. DESARROLLO, ENTREGA Y RETROALIMENTACIÓN

Todavía existen detalles por mejorar pero el software cumple con los requerimientos básicos de funcionamiento originalmente establecidos en el diseño, por lo cual el prototipo es deseable y se cierra el ciclo de mejoras del prototipo.

En la Tabla 2 se puede comparar los resultados obtenidos con los deseados para el desarrollo del prototipo funcional.

Tabla 2. Tabla de registro de cumplimiento de requerimientos

Requerimiento Cumple

SI/NO Observación

Permite administrar rutas SI

Crear, editar y borrar rutas. Las rutas solo se pueden editar mientras se crean.

Permite administrar paradas SI Crear, editar y eliminar paradas Permite administrar cooperativas SI Crear, editar y eliminar cooperativas Permite buscar las rutas de buses

por nombre SI

Búsqueda de coincidencia por nombre

Permite buscar la sugerencia de

rutas para llegar de un punto a otro SI

En caso de no encontrar rutas cercanas muestra un mensaje Permite graficar la ruta de bus y

todas sus paradas en el mapa SI Grafica una ruta a la vez

Grafica todas las paradas en el

mapa SI

Muestra todas las paradas

independientemente de las rutas que pasen por esa parada

Permite dibujar una ruta en el mapa SI

No es posible modificar la ruta hasta finalizar el trazo, solo permite correcciones menores

Muestra la ruta a pie hacia la

parada de origen y destino SI

Muestra el camino a pie desde las marcas hasta las paradas

34

4.4.1. INTERFAZ FINAL

Como resultado tenemos estas capturas de pantalla en la Figura 21 la cual refleja el proceso de crear una ruta en el mapa con las paradas seleccionadas y la funcionalidad “Como Llegar” en la Figura 22.

Figura 21. Captura de pantalla creación de ruta

35

5. CONCLUSIONES Y RECOMENDACIONES

5.1. CONCLUSIONES

 La API Google MapsApi V3 permite manejar contenido dinámico en mapas digitales con mucha facilidad debido a todo el soporte que ofrece para el desarrollo web y toda la documentación disponible.

 Adoptar el formato de objetos JSON como estándar para la transmisión de datos facilita la comunicación del cliente con el servicio web debido a la flexibilidad y compatibilidad que presenta en el entorno de desarrollo.

 Ejecutar los procesos en el servidor facilita la carga de procesamiento en el cliente web y mejoran el rendimiento de la aplicación.

 El marco de trabajo Bootstrap permite establecer un estándar en la presentación de la interfaz gráfica así como sus librerías externas y componentes genéricos para el manejo de tablas y diálogos.

 El uso de KML facilitó el almacenamiento de las rutas debido a su agilidad para ser procesado y mostrar este contenido en un mapa digital.

 La aplicación está lista para recibir nuevas rutas, paradas y cooperativas e incluirla en el sistema.

5.2. RECOMENDACIONES

 Para posteriores investigaciones se recomienda considerar el sentido de la ruta.

 Se recomienda tener bien definidas las paradas de una ruta antes de comenzar a dibujar la ruta.

36

 Para futuras versiones se debe considerar la implementación de transbordos para la presentación de las rutas.

 Se recomienda al momento de buscar una ruta, buscarla cerca de una parada para reducir el trazo de la ruta a pie hasta la parada.

37

BIBLIOGRAFÍA

Apress, B. S. (2015). Beginning JSON Expert's voice in Web development. EPMETP. (n.d.). Empresa Metropolitana de Transporte de pasajeros.

Retrieved from

http://www.trolebus.gob.ec/index.php?option=com_content&view=feat ured&Itemid=435

Gacitúa Bustos, R. A. (2003). Métodos de desarrollo de software: El desafío pendiente de la estandarización.

Ian, S. (2005). Ingeniería del software (septima ed.). Madrid, España: Pearson.

Lancker, L. V. (2013). HTML5 y CSS3: Domine los estándares de las aplicaciones Web [2ª edición]. Ediciones ENI, 2013.

Molinero, M. y. (1998). Transporte Público. Planeación, Diseño, Operación y Administración. .

Mora, S. L. (2012). Programación de aplicaciones web: historia, principios básicos y clientes web. Alicante: Editorial Club Universitario.

Murach, J. (2015). Murach’s MySQL, 2nd Edition. Ray Halliday.

PrensaQuito. (2014, 01 02). Prensa Quito. Retrieved from Prensa Quito: http://prensa.quito.gob.ec/Noticias/news_user_view/transporte_public o_en_quito_moderniza_su_recaudacion_con_la_caja_comun--10528 Pressman, R. (2010). Ingeniería de software un enfoque práctico, séptima

edición. Mexico: McGraw.Hill.

Rafael Prieto-Puga, J. S. (2011). Didáctica de la geografía y la historia. Ministerio de Educación.

Shaw, P. (2014). Twitter Bootstrap.

Sotnikov, D. (2016). Web Development with Clojure (2 ed.). The Pragmatic Programmers.

Vértice, E. (2009). Diseño básico de páginas web en HTML. Editorial Vértice. w3schools. (n.d.). w3schools. Retrieved from w3schools: