SISTEMA DE INFORMACIÓN WEB PARA LA NOTIFICACIÓN Y REGISTRO DE EVENTOS EN
PARQUEADEROS
BRAYAN DANIEL NAVARRO ORTIZ
CRISTIAN NICOLAS GARCIA GARCIA
UNIVERSIDAD DISTRITAL FRANCISCO JOSÉ DE CALDAS
FACULTAD TECNOLÓGICA
TEC. SISTEMATIZACIÓN DE DATOS
BOGOTA D.C
2018
2
SISTEMA DE INFORMACIÓN WEB PARA LA NOTIFICACIÓN Y REGISTRO DE EVENTOS EN
PARQUEADEROS
BRAYAN DANIEL NAVARRO ORTIZ
CRISTIAN NICOLAS GARCIA GARCIA
TUTOR:
Ing. Sonia Alexandra Pinzon Nuñez
UNIVERSIDAD DISTRITAL FRANCISCO JOSÉ DE CALDAS
FACULTAD TECNOLÓGICA
TEC. SISTEMATIZACIÓN DE DATOS
BOGOTA D.C
2018
3
Nota de Aceptación
______________________________
______________________________
______________________________
______________________________
______________________________
______________________________
_______________________
Firma del Tutor
_______________________
Firma del Jurado
_______________________
Firma del Jurado
Bogotá 05 de febrero de 2018
4
Contenido
AGRADECIMIENTOS .................................................................................................................. 8
RESUMEN ................................................................................................................................. 9
ABSTRACT .............................................................................................................................. 10
INTRODUCCIÓN ...................................................................................................................... 11
1. PLANEACIÓN ................................................................................................................... 12
1.1. Título ....................................................................................................................... 12
1.2. Tema ....................................................................................................................... 12
1.3. Planteamiento del problema .................................................................................... 12
1.3.1. Descripción ...................................................................................................... 12
1.3.2. Formulación ..................................................................................................... 12
1.4. Objetivos ................................................................................................................. 12
1.4.1. General ............................................................................................................ 12
1.4.2. Específicos ........................................................................................................ 13
1.5. Justificación ............................................................................................................. 13
1.6. Alcances y delimitaciones ......................................................................................... 13
1.6.1. Alcances ........................................................................................................... 13
1.6.2. Delimitaciones .................................................................................................. 13
1.7. Marco teórico .......................................................................................................... 14
1.7.1. Estado del arte ................................................................................................. 14
1.7.2. Marco conceptual ............................................................................................. 15
1.8. Metodología del proyecto ........................................................................................ 20
1.9. Factibilidad .............................................................................................................. 21
1.9.1. Técnica ............................................................................................................. 21
1.9.2. Operativa ......................................................................................................... 22
1.9.3. Económica ........................................................................................................ 23
1.10. Cronograma ......................................................................................................... 24
2. ANÁLISIS ......................................................................................................................... 25
2.1. Identificación de los roles ......................................................................................... 25
2.2. Lista de actividades por rol ....................................................................................... 25
2.3. Definición de actores ............................................................................................... 26
2.4. Historias de usuario ................................................................................................. 26
2.5. Sprint Planning ........................................................................................................ 28
5
3. DISEÑO ........................................................................................................................... 29
3.1. Identificación de la información ............................................................................... 29
3.2. Descripción de los procesos ...................................................................................... 29
3.3. Diagrama relacional ................................................................................................. 31
3.4. Modelo de interfaz .................................................................................................. 32
4. DESARROLLO ................................................................................................................... 33
4.1. Sprint 1 .................................................................................................................... 34
4.2. Sprint 2 .................................................................................................................... 36
4.3. Sprint 3 .................................................................................................................... 40
4.4. Sprint 4 .................................................................................................................... 44
4.5. Sprint 5 .................................................................................................................... 47
4.6. Diagrama de componentes ....................................................................................... 48
4.7. Diagrama de contexto .............................................................................................. 49
5. Testing ............................................................................................................................ 50
6. Conclusiones ................................................................................................................... 56
ANEXOS.................................................................................................................................. 57
BIBLIOGRAFIA E INFOGRAFIA .................................................................................................. 73
6
Lista de tablas
Tabla 1 Factibilidad técnica. Características del computador de desarrollo y lector de código de
barras..................................................................................................................................... 21
Tabla 2 Factibilidad técnica. Características del Software para desarrollo. ................................ 22
Tabla 3 Factibilidad operativa del proyecto. ............................................................................ 23
Tabla 4 Factibilidad económica del proyecto. .......................................................................... 23
Tabla 5 Roles del proyecto ...................................................................................................... 25
Tabla 6 Actividades por rol ...................................................................................................... 25
Tabla 7 Definición de actores .................................................................................................. 26
Tabla 8 Historias de usuario .................................................................................................... 27
Tabla 9 Sprints ........................................................................................................................ 28
Tabla 10 Descripción de procesos ............................................................................................ 30
Tabla 11 Backlog sprint 1 ........................................................................................................ 34
Tabla 16 Historia de usuario, Generar claves nuevo ingreso ..................................................... 51
Tabla 17 Historia de usuario, Ver usuarios empresa ................................................................. 51
Tabla 18 Historia de usuario, Visualizar notificaciones empresa ............................................... 51
Tabla 19 Historia de usuario, Generar reportes ........................................................................ 51
Tabla 20 Historia de usuario, Registro usuario ......................................................................... 52
Tabla 21 Historia de usuario, Visualización notificaciones ........................................................ 52
Tabla 22 Historia de usuario, Ver vehículo ............................................................................... 52
Tabla 23 Historia de usuario, Editar vehículo ........................................................................... 53
Tabla 24 Historia de usuario, Agregar vehículo ........................................................................ 53
Tabla 25 Historia de usuario, Modificar los medios envío de notificación ................................. 53
Tabla 26 Historia de usuario, Ver datos ................................................................................... 54
Tabla 27 Historia de usuario, Modificar datos .......................................................................... 54
Tabla 28 Historia de usuario, Realizar notificaciones ................................................................ 54
Tabla 29 Historia de usuario, Realizar ingreso y salida de vehículos .......................................... 55
7
Lista de imágenes
Ilustración 1 Cronograma............................................................................................. 24
Ilustración 2 Esquema relacional base de datos ........................................................... 31
Ilustración 3 Modelo de interfaz .................................................................................. 32
Ilustración 4 Arquitectura del sistema .......................................................................... 33
Ilustración 5 Nuevo usuario ......................................................................................... 35
Ilustración 6 Nuevo vehículo ........................................................................................ 36
Ilustración 7 Ver perfil ................................................................................................. 39
Ilustración 8 Ver vehículos ........................................................................................... 40
Ilustración 9 Vista de notificaciones – Admin ............................................................... 43
Ilustración 10 Vista generar clave- Admin .................................................................... 44
Ilustración 11 Vista de usuarios- Admin ....................................................................... 44
Ilustración 12 Hacer notificación .................................................................................. 46
Ilustración 13 Ingreso al parqueadero .......................................................................... 48
Ilustración 14 Diagrama de componentes .................................................................... 49
Ilustración 15 Diagrama de contexto ............................................................................ 49
8
AGRADECIMIENTOS
Expresamos nuestros agradecimientos a todas y cada una de las personas que han sido
parte de este proceso, las cuales han sido de gran ayuda para finalizar este proyecto.
A Dios quien nos dio la sabiduría y paciencia para sobrepasar cada obstáculo y poder llegar
hasta el final.
A nuestros padres y familiares que han sido un apoyo incondicional y fundamental, tanto
como moral como económicamente y han estado siempre acompañándonos en todos los
obstáculos que paso a paso se han generado en la culminación de este proyecto.
Finalmente a los docentes que han sido una parte esencial en el desarrollo de este proyecto
ya que nos han brindado toda su sabiduría y paciencia, dándonos a conocimiento sobre
ciertos aspectos que han sido fundamentales en el desarrollo de este, además siempre al
tanto de responder cualquier inquietud que se generaba.
9
RESUMEN
El proyecto “Sistema de información web para la notificación y registro de eventos en
parqueaderos” es un sistema web que permitirá apoyar y brindar un soporte a los usuarios
de los parqueaderos que sirve para notificar de algún inconveniente presentado con el
vehículo en el parqueadero y se pueda contactar con dicho usuario de una forma eficaz.
Este sistema web tiene un uso de fácil manejo, lo que permite a los encargados de la
seguridad del parqueadero brindar soporte a los usuarios de este de manera eficiente y
eficaz.
Este proyecto se trabajó utilizando herramientas de desarrollo como lenguaje PHP como
entorno de desarrollo principal, usando MySQL como motor de bases de datos, además del
framework Bootstrap el cual se implementó para ayudar a que la interfaz de dicho sistema
tuviera una apariencia ordenada para el usuario.
10
ABSTRACT
The project “Sistema de información web para la notificación y registro de eventos en
parqueaderos” is a web system that offers a support for parking users, this system has a
with a direct notification service to inform the owner about any misunderstanding with
his/her vehicle and make a fast contact for the user.
Our web system has an easy access use, which allows managers or security personnel in the
parking can contact with others to give an efficient support and make solutions to any
problem or question for customers.
This project was main designed focused on PHP, (Hypertext Preprocessor), using MySQL as
a database engineer. Also, Bootstrap framework, which was implemented to set the
interface with an organized appearance for the users.
11
INTRODUCCIÓN
Hoy en día la cantidad de usuarios que tiene un parqueadero ya sea de una empresa,
universidad o institución puede generar incidentes con los vehículos que en estos se
estacionan como golpes, rayones, caídas, etc. También los usuarios pueden generar eventos
como llaves olvidadas, puertas abiertas, luces encendidas, etc. Lo que lleva a que los
usuarios se preocupen y desconfíen de la seguridad de dichos parqueaderos. Estos lugares
pueden contar con software que ayuda al control de ingreso y salida de los vehículos pero
no permiten notificar a sus usuarios de los eventos anteriormente mencionados.
Por lo anterior, se desarrolla un sistema de información web para la notificación y registro
de eventos en parqueaderos, que busca de forma eficiente y eficaz alertar a los usuarios de
incidentes o eventos que puedan pasar con su vehículo. Para ello se dispone de dos
alternativas para recibir la notificación, una por medio de correo electrónico y la segunda
por medio de mensaje privado de una red social.
Las herramientas utilizadas para el desarrollo del sistema de información son PHP como
lenguaje de programación con ayuda del framework CakePHP el cual proporciona una
estructura base y herramientas que permiten un ágil desarrollo y Mysql como motor de
bases de datos. Para alcanzar los objetivos del proyecto se trabajó en base a la metodología
de desarrollo SCRUM
12
1. PLANEACIÓN
1.1. Título
Sistema de información web para la notificación y registro de eventos en parqueaderos.
1.2. Tema
Sistema de información web para los usuarios de los parqueaderos de una empresa o
institución para la notificación de inconvenientes presentados con los vehículos.
1.3. Planteamiento del problema
1.3.1. Descripción
Las personas que poseen un vehículo y utilizan el servicio de parqueaderos en donde existe
un gran número de usuarios como estudiantes, funcionarios y docentes, suelen tener
eventos con sus vehículos tales como llaves olvidadas en el switch, luces encendidas, baúl
abierto, moto encendida, alarma encendida, llanta baja de aire, espejos retrovisores
averiados, rayones en el vehículo, motos derribadas, entre otros. Es muy difícil ubicar a los
propietarios rápidamente ya que al ingresar solo se registran los datos del vehículo.
Según los estudios realizados en la Universidad Distrital Francisco José de Caldas sede
tecnológica (anexo 1 ) los usuarios del parqueadero no están conformes con la seguridad
de este, ya que los problemas no son reportados a tiempo y solo al volver a la moto se
evidencian dichos problemas, a esto se suma el control de ingreso a la institución que se
hace mediante la entrega del carnet por parte del usuario a cambio de una ficha de cartón
o nada cuando se acaban, por lo cual no se sabe cuántos vehículos hacen uso del
parqueadero ni quiénes son sus dueños.
A pesar de que la comunidad continuamente reporta a los vigilantes encargados algún tipo
de irregularidad con las motos, el dueño no es notificado de ninguna forma, es decir, la
notificación se queda en el encargado de seguridad o se pierde si hay cambio de turno. Todo
sucede porque no existe un sistema que controle el ingreso al parqueadero ni un sistema
de notificación instantánea para dar reporte a los propietarios.
1.3.2. Formulación
¿El diseño de un sistema de notificaciones facilitaría solucionar a tiempo posibles incidentes
en un parqueadero con muchos usuarios?
1.4. Objetivos
1.4.1. General
Desarrollar un sistema de información web de notificación y registro de eventos para
parqueaderos.
13
1.4.2. Específicos
● Desarrollar un módulo de registro que permita capturar los datos del vehículo y
del propietario.
● Desarrollar un módulo de notificaciones que permita el envío del reporte de los
eventos presentados con el vehículo.
● Desarrollar módulos que permitan la administración de los registros y el detalle
del histórico de notificaciones para cada usuario.
● Utilizar una api de servicio de mensajería de texto (SMS) para lograr contactar el
usuario de forma rápida, además se dará uso de la notificación por medio del
correo electrónico para así tener un respaldo de la notificación creada.
1.5. Justificación
Tener un vehículo en el parqueadero en el lugar donde trabaja o estudia no significa que no
se va a presentar algún inconveniente, lo cual genera preocupación en el usuario y tener
una problema cuando por fin termina su rutina se tiene que enfrentar al inconveniente
presentado con su vehículo y tratar de solucionarlo, además para el parqueadero es
importante tener los datos del usuario de este ya que de algún modo los puede contactar.
Al pasar del tiempo la forma de comunicarnos y ubicarnos es mucho más fácil ya que la
tecnología avanza muy rápido y nos permite estar en contacto unos con otros casi
instantáneamente de esta manera se puede comunicar al usuario de algún inconveniente
casi al momento que se descubre de la anomalía presentada en el vehículo.
1.6. Alcances y delimitaciones
1.6.1. Alcances
Se desarrollara un sistema de notificaciones el cual alertará al propietario de posibles
incidentes con su vehículo en los parqueaderos universitarios. El sistema
constará principalmente de una aplicación móvil para uso de usuarios y vigilantes
encargados, por otra parte tendrá una pequeña página web para el soporte administrativo.
● El encargado de vigilancia podrá reportar cualquier evento que se presente con
un vehículo al propietario de este.
● El usuario contará con un módulo de registro en el cual podrá incluir datos
personales como correo y número telefónico.
● Mediante la página web el administrador podrá llevar el registro de los
vehículos ingresados al parqueadero, a su vez designar a las personas que van a
realizar el registro de ingreso de los vehículos (vigilantes encargados).
1.6.2. Delimitaciones
14
Las delimitaciones para el desarrollo del proyecto son de carácter geográfico para definir
en donde se realizará el proyecto, por último la temporal que concreta el tiempo de
desarrollo y la entrega del proyecto.
1.6.2.1. Geográfico
El sistema se realizará para cualquier universidad en la ciudad de Bogotá pero el
prototipo se hará en la Universidad Distrital Francisco José de Caldas facultad
tecnológica.
1.6.2.2. Temporal
El proyecto tiene una estimación de tiempo de desarrollo de 20 semanas a partir de la
aprobación del mismo.
1.7. Marco teórico
A continuación se mostrara el marco teórico el cual es la base de la sustentación del
proyecto de grado, ya que en este se muestra la investigación respecto al tema a trabajar.
1.7.1. Estado del arte
En los repositorios de trabajos de grado de la Universidad Distrital Francisco José de Caldas
(disponible en http://repository.udistrital.edu.co/) no cuenta con algún trabajo de grado
similar a la idea propuesta.
Actualmente el software para parqueadero es instalado de forma local y hechos como
sistemas POS, algunos de esos son:
● Merlin: Este software está especialmente diseñado para parqueaderos, que
desean optimizar sus servicios de una manera ágil y sin margen de error1.
o Puede de manera OPCIONAL ser operado mediante pantallas táctiles y
tabletas.
o Las tabletas pueden ser usadas
o Registra los vehículos que ingresan al parqueadero y el tiquete impreso
en el computador que está en caja. Este procedimiento agiliza el proceso
y minimiza los errores.
o Permite registrar el valor por minutos, cuartos de hora, media hora y por
horas utilizado por cada vehículo.
1 Merlín Sistemas S.A.S. Software Para Parqueaderos. Programacontabilidad. http://programacontabilidad.co/software-para-parqueaderos/
15
o Maneja mensualidades y tarifas especiales.
o Permite el manejo de tarifas plenas.
o incluye manejo de convenios.
● CIWSParking: Es un software para la administración básica y avanzada
de parqueaderos bajo tecnología Web (PHP, HTML y MySQL - No necesita
Internet), este sistema cuenta con las siguientes características2:
o Sistema de creación avanzada de tarifas (Segmentación por días y horas)
o Tarificación por minutos o por fracciones configurables
o Ingreso y salida de vehículos por medio de carnets o tirilla de código de
barras.
o Compatible con tablets y teléfonos inteligentes (Administración y
consulta de informes)
o Módulo de caja especializada en el cual se capta el dinero y se expide una
factura.
o Generación de convenios, cobros especiales y facturación especializada
de mensualidades.
o Administración de empresas y convenios.
o Administración de turnos.
1.7.2. Marco conceptual
Bases de datos
Las bases de datos, (BBDD) son estructuras en las que se almacena información siguiendo
unas pautas de disposición y ordenación para el posterior procesado de los datos. Es una
definición tan buena como cualquier otra. Seguramente, si usted lee cincuenta libros al
respecto. Encuentre otras tantas definiciones al respecto, pero todas coincidieron en lo
esencial. Como sistema de almacenamiento de datos, las BBDD son por mucho más
eficientes que los archivos de texto que conocemos. Y esto por varias razones pero,
principalmente, porque nos permiten un acceso directo a los datos que necesitamos sin que
sea preciso recorrer todo un fichero para encontrarlo. Además, los modernos sistemas de
gestión de BBDD relacionales admiten el almacenamiento de muchos tipos de datos, no
sólo texto plano. Hablamos de BBDD relacionales cuando podemos establecer relaciones
entre las distintas informaciones que componen una base de datos. Por ejemplo, suponga
que usted quiere guardar la lista de clientes de una empresa de servicios. Por otro lado,
2 Tecnologías Ciws SAS. CIWSParking. Tecnologiasciws. http://www.tecnologiasciws.com/new/soluciones/parqueaderos/software-para-parqueaderos/CIWSParking
16
tiene una lista de los servicios que ofrece dicha entidad. Además conserva una relación
histórica de los servicios empleados por cada cliente3.
Mysql
Es un sistema de gestión de bases de datos relacional desarrollado bajo licencia dual
GPL/Licencia comercial por Oracle Corporation y está considerada como la base datos open
source más popular del mundo, y una de las más populares en general junto a Oracle y
Microsoft SQL Server, sobre todo para entornos de desarrollo web4.
Existen muchos tipos de bases de datos, desde un simple archivo hasta sistemas
relacionales orientados a objetos. MySQL, como base de datos relacional, utiliza múltiples
tablas para almacenar y organizar la información. MySQL fue escrito en C y C++ y destaca
por su gran adaptación a diferentes entornos de desarrollo, permitiendo su interactuación
con los lenguajes de programación más utilizados como PHP, Perl y Java y su integración en
distintos sistemas operativos.
En aplicaciones web hay baja concurrencia en la modificación de datos y en cambio el
entorno es intensivo en lectura de datos, lo que hace a MySQL ideal para este tipo de
aplicaciones. Sea cual sea el entorno en el que va a utilizar MySQL, es importante
monitorizar de antemano el rendimiento para detectar y corregir errores tanto de SQL
como de programación.
PHP
PHP (acrónimo recursivo de PHP: Hypertext Preprocessor) es un lenguaje de código abierto
muy popular especialmente adecuado para el desarrollo web y que puede ser incrustado
en HTML5.
Lo que distingue a PHP de algo del lado del cliente como Javascript es que el código es
ejecutado en el servidor, generando HTML y enviándolo al cliente. El cliente recibirá el
resultado de ejecutar el script, aunque no se sabrá el código subyacente que era. El servidor
web puede ser configurado incluso para que procese todos los ficheros HTML con PHP, por
lo que no hay manera de que los usuarios puedan saber qué se tiene debajo de la manga.
Lo mejor de utilizar PHP es su extrema simplicidad para el principiante, pero a su vez ofrece
muchas características avanzadas para los programadores profesionales. No sienta miedo
3 El desván de Jose. Recursos para programadores. eldesvandejose.com. https://eldesvandejose.com/2016/06/17/bases-de-datos-sql-i/ 4 TechTarget, S.A. TechTarget SearchDataCenter en Español. searchdatacenter.techtarget.com. http://searchdatacenter.techtarget.com/es/definicion/MySQL 5 PhP. ScotlandPHP. Php.net. http://php.net/manual/es/intro-whatis.php
17
de leer la larga lista de características de PHP. En unas pocas horas podrá empezar a escribir
sus primeros scripts.
Notificaciones
Todos los usuarios de smartphone reciben una gran cantidad de notificaciones de muchas
aplicaciones que se encuentran en el dispositivo, en ellas se encuentran notificaciones
programadas que sirven para recordar ciertas cosas y también están las notificaciones push
en donde las notificaciones son enviadas de forma remota.
Estas notificaciones generan ciertos comportamientos en nosotros y eso se debe al
condicionamiento clásico expuesto por Iván Petrovich Pavlov6, donde explica cómo los
animales pueden aprender a responder a determinados estímulos, pero esto no solo pasa
con los animales sino también con los humanos, por ejemplo hay olores o sonidos que nos
recuerdan a momentos y nos hacen reaccionar de una determinada manera, por esto es
que damos más importancia a ciertas notificaciones ya que por el sonido que emiten hace
que reaccionemos de distintas formas y dándole importancia a ciertos avisos que genera
nuestro móvil; por esto las notificaciones deben contener mensajes que atrapen al usuario
y algún tipo de aviso con el cual más adelante pueda reconocer sobre qué se trata el aviso
que le llegó.
Servicios web
Son un conjunto de aplicaciones con capacidad de interoperar en la web, estas
intercambian datos para así dar ofrecer un servicio a un usuario, los proveedores ofrecen
los servicios y los clientes solicitan dicho servicio a través de la red7.
Estos servicios son mecanismos de comunicación entre diferentes aplicaciones que
interactúan entre sí para brindar información a los usuarios de una forma dinámica, estos
ayudan a la interoperabilidad y extensibilidad entre las aplicaciones para así poder realizar
operaciones complejas entre las aplicaciones.
Servidor web
Es Los servidores web son aquellos cuya tarea es alojar sitios y/o aplicaciones, las cuales son
accedidas por los clientes utilizando un navegador que se comunica con el servidor
6 Somos Pedagogía. Teorias del aprendizaje. teoriadaprendizaje.blogspot.com.co. http://teoriadaprendizaje.blogspot.com.co/p/pavlov_03.html 7 Pastorini, A. Servicios Web. TRIA – Tecnólogo Informático. https://www.fing.edu.uy/tecnoinf/mvd/cursos/ria/material/teorico/ria-06-ServiciosWeb.pdf
18
utilizando el protocolo HTTP (hypertext markup language)8. Básicamente un servidor WEB
consta de un intérprete HTTP el cual se mantiene a la espera de peticiones de clientes y le
responde con el contenido según sea solicitado. El cliente, una vez recibido el código, lo
interpreta y lo exhibe en pantalla. Además los servidores pueden disponer de un intérprete
de otros lenguajes de programación que ejecutan código embebido dentro del código HTML
de las páginas que contiene el sitio antes de enviar el resultado al cliente. Esto se conoce
como programación de lado del servidor y utiliza lenguajes como ASP, PHP, Perl y Ajax. Las
ventajas de utilizar estos lenguajes radica en la potencia de los mismos ejecutando tareas
más complejas como, por ejemplo acceder a bases de datos abstrayendo al cliente de toda
la operación.
Modelo vista-controlador
El patrón Modelo- Vista- Controlador (MVC) es el patrón de diseño más adecuado y
recomendado para aplicaciones interactivas que distribuyen las funcionalidades de dicha
aplicación entre los distintos objetos que la componen, de manera que el grado de
acoplamiento entre los objetos de la aplicación sea mínimo. MVC divide una aplicación
interactiva en tres áreas: procesamiento, salida y entrada9. Para esto utiliza las siguientes
abstracciones: -Modelo: Encapsula la información que maneja el sistema, incluyendo la
información de negocio y las lógicas de acceso a los mismos. El modelo avisa a la vista
cuando se produce alguna modificación en los datos del modelo y le permite consultar el
estado de los mismos. También permite al controlador acceder a las funcionalidades de la
aplicación encapsuladas por el modelo. El modelo es independiente de cualquier
representación de salido y/o comportamiento de entrada. -Vista: Es la interfaz de usuario,
es decir, decide cómo se presenta la información del modelo al usuario, actualizando la
interfaz cuando se produce alguna modificación de los mismos. La vista también reenvía la
entrada del usuario al 28 controlador. Pueden existir múltiples vistas del modelo. Cada vista
tiene asociado un componente controlador. -Controlador: recibe las entradas, usualmente,
como eventos que codifican los movimientos o pulsación de botones del ratón, pulsaciones
de teclas, etc. Responde a dichos eventos modificando el modelo y pudiendo producir, por
tanto, cambios en la vista. Así pues, el controlador interpreta la entrada del usuario y la
correspondencia en acciones que serán llevadas a cabo por el modelo. Un controlador
8 SERVIDORESALOJAMIENTOS. (17 MAYO, 2016). SERVIDORES DE ALOJAMIENTOS. https://servidoresdealojamientosenlinea.wordpress.com/2016/05/17/que-debemos-saber-acerca-de-los-servidores/ 9 López, C. A. (23 de octubre de 2009). Cómo mantener el patrón modelo vista controlador en una aplicación orientada a la WEB. http://biblioteca.uniminuto.edu/ojs/index.php/Inventum/article/viewFile/132/125
19
escoge la siguiente vista a mostrar basándose en las interacciones del usuario y los
resultados de las operaciones de modelo.
API
La interfaz de programación de aplicaciones, abreviada como API del inglés: Application
Programming Interface, es un conjunto de subrutinas, funciones y procedimientos (o
métodos, en la programación orientada a objetos) que ofrece cierta biblioteca para ser
utilizado por otro software como una capa de abstracción10.
Una API representa la capacidad de comunicación entre componentes de software. Se trata
del conjunto de llamadas a ciertas bibliotecas que ofrecen acceso a ciertos servicios desde
los procesos y representa un método para conseguir abstracción en la programación,
generalmente (aunque no necesariamente) entre los niveles o capas inferiores y los
superiores del software. Uno de los principales propósitos de un API consiste en
proporcionar un conjunto de funciones de uso general, por ejemplo, para dibujar ventanas
o iconos en la pantalla. De esta forma, los programadores se benefician de las ventajas del
API haciendo uso de su funcionalidad, evitándose el trabajo de programar todo desde el
principio. Las API asimismo son abstractas: el software que proporciona una cierta API
generalmente es llamado la implementación de esa API.
Framework web
Es un conjunto estandarizado de conceptos, prácticas y criterios para enfocar un tipo de
problemática particular que sirve como referencia, para enfrentar y resolver nuevos
problemas de índole similar11.
En el desarrollo de software, un entorno de trabajo es una estructura conceptual y
tecnológica de asistencia definida, normalmente, con artefactos o módulos concretos de
software, que puede servir de base para la organización y desarrollo de software.
Típicamente, puede incluir soporte de programas, bibliotecas, y un lenguaje interpretado,
entre otras herramientas, para así ayudar a desarrollar y unir los diferentes componentes
de un proyecto.
Representa una arquitectura de software que modela las relaciones generales de las
entidades del dominio, y provee una estructura y una especial metodología de trabajo, la
cual extiende o utiliza las aplicaciones del dominio.
10 Andrearrs. (15/05/14). ¿Qué es una API? Hipertextual. https://hipertextual.com/archivo/2014/05/que-es-api/ 11 Ictea. Base de Conocimientos. Ictea.com. http://www.ictea.com/cs/knowledgebase.php?action=displayarticle&id=8991
20
CakePHP
CakePHP es un marco de desarrollo [framework] rápido para PHP, libre, de código abierto.
Se trata de una estructura que sirve de base a los programadores para que éstos puedan
crear aplicaciones Web12. Nuestro principal objetivo es que puedas trabajar de forma
estructurada y rápida, sin pérdida de flexibilidad.
Con CakePHP el desarrollo web ya no es monótono porque ofrece las herramientas para
empezar a escribir el código que realmente se necesita: la lógica específica de la aplicación.
1.8. Metodología del proyecto
Luego de realizar un estudio de los diferentes enfoques metodológicos, se decidió que para
desarrollar este proyecto se implementará metodología scrum ya que esta metodología
está diseñada para desarrollo ágil del software, además nos permite mostrar resultados al
cliente en poco tiempo, creando la parte fundamental del proyecto y que tenga un
funcionamiento ya real y aplicable, para la satisfacción del cliente.
Pregame
En esta etapa de la metodología como es un nuevo proyecto se enfocara en que desea el
usuario, los cuales requieren un sistema de notificación sobre sus vehículos, y en que
beneficiara a la comunidad con la creación de este proyecto, todo esto será analizado
durante esta etapa.
Planificación
Esta parte está dentro de la primera etapa el pregame, en esta determinaremos las
versiones que mejor se acomoden para lograr el objetivo, además de la evaluación de
riesgos a los que nos tenemos que enfrentar durante el desarrollo del proyecto.
Game
Esta etapa consta del desarrollo de los sprint los cuales son los compromisos que el equipo
se compromete a entregar en determinado tiempo, teniendo en cuenta que un sprint tiene
una entrega mínima de 1 semana y 4 semanas como máximo, esto nos ayudará a que el
grupo de trabajo trabaje con metas propuestas y que los resultados se puedan ver durante
cada avance del proyecto.
12 CakePHP. ¿Qué es CakePHP y por qué hay que utilizarlo? CakePHP 1.3 Cookbook. https://book.cakephp.org/1.3/es/The-Manual/Beginning-With-CakePHP/What-is-CakePHP-Why-Use-it.html
21
Dentro de esta etapa encontramos 4 factores importantes que tiene que resolver un sprint
los cuales son:
● Desarrollo: Consiste en el proceso de descubrir, innovar e implementar cambios
necesarios para cumplir el objetivo.
● Envoltura: Cierre de los módulos creados por los sprint y crear una versión que
nos sustente los avances creados por este grupo de trabajo.
● Revisión: Se reunirán todos los grupos de trabajos con sus diferentes sprints para
mostrar los avances, además facilita identificar posibles errores para dar
solución a estos.
● Ajuste: Reunir toda la información obtenida de la revisión y trabajar en base a
dicha información.
Postgame
En esta etapa se obtendrá el producto final el cual fue solicitado por el cliente, las
intervenciones de los sprinter terminan ya que se logró el objetivo y los equipos de trabajo
comienzan hablar de una nueva versión del trabajo, así dando totalmente terminado el
proyecto.
1.9. Factibilidad
1.9.1. Técnica
Para el correcto desarrollo de este proyecto es necesario un adecuado software y hardware
que permita la programación, aunque para el desarrollo de este se puede trabajar con
pocos recursos el ideal es que el equipo de trabajo se sienta cómodo, para poder realizar
las correspondientes pruebas del funcionamiento (ver tabla 1 y tabla 2).
Las especificaciones de los equipos que se manejaran dentro del proyecto están definidas
por las siguientes herramientas:
Tabla 1 Factibilidad técnica. Características del computador de desarrollo y lector de
código de barras.
COMPUTADOR DE DESARROLLO Y LECTOR DE CODIGO DE BARRAS
Marca: ASUS X453M
Sistema Operativo: Windows 8.1
Procesador: Intel Pentium N3540
22
Memoria RAM: 4GB
Disco Duro: 500 GB
Lector de código de barras Compatible con el sistema operativo
Fuente: Autores
Tabla 2 Factibilidad técnica. Características del Software para desarrollo.
SOFTWARE
Sistema Operativo: Windows
Sistema Gestor de Base de
Datos:
MySQL
Interfaz de Desarrollo: Sublime Text
Lenguaje de Programación: PHP 5.6.30
Programas de modelado StarUML, Bizagi Modeler
Fuente: Autores
1.9.2. Operativa
Desde el punto de vista operativo, el sistema de información web se podrá desarrollar
satisfactoriamente ya que la necesidad que ayudará a resolver esta idea es central,
enfocada y concreta.
Además as herramientas de programación que son necesarias para el desarrollo del sistema
son de fácil acceso y el recurso humando (ver tabla 3) dispuesto para este proyecto es justo,
ya que se encuentra capacitado para el correcto desarrollo.
23
Tabla 3 Factibilidad operativa del proyecto.
EJECUTOR FUNCION
Sonia Alexandra Pinzón Núñez Director Proyecto
Brayan Daniel Navarro Ortiz Desarrollador
Cristian Nicolas Garcia Garcia Desarrollador
Fuente: Autores
1.9.3. Económica
En lo que concierne a la factibilidad económica se refiere, en la siguiente tabla (ver tabla 4)
en la cual se re muestran los diferentes gastos que son requeridos para la elaboración del
proyecto, así también se muestra el total necesario para el desarrollo del mismo:
Tabla 4 Factibilidad económica del proyecto.
RECURSO DESCRIPCION CANTIDAD VALOR
UNITARIO VALOR TOTAL
Equipo de
Desarrollo ASUS X453M 1 $ 1.000.000 $ 1.000.000
Desarrollador de
Software
Desarrolladores
del proyecto
832 horas
(el total de las
horas entre los
dos
desarrolladores)
$ 12.000
($/h) $ 9.984.000
Horas Tutor Director del
Proyecto 160 horas $30.000 ($/h) $4.800.000
Total $15.784.000
Fuente: Autores
24
1.10. Cronograma
Ilustración 1 Cronograma
25
2. ANÁLISIS
2.1. Identificación de los roles
En la siguiente tabla se encontraran los roles y el responsable de cada uno de ellos con
una breve descripción sobre la tarea a realizar.
Tabla 5 Roles del proyecto
ROL RESPONSABLE DESCRIPCIÓN
Scrum master
Cristian Nicolas Garcia Garcia
Persona que lidera al equipo guiándolo para que cumpla las reglas y procesos de la metodología
Product owner
Brayan Daniel Navarro Ortiz
Representante de los accionistas y clientes que usan el software. Se focaliza en la parte de negocio y él es responsable del ROI del proyecto (entregar un valor superior al dinero invertido).
Team
Brayan Daniel
Navarro Ortiz-
Cristian Nicolas Garcia Garcia
Grupo de profesionales con los conocimientos técnicos necesarios y que desarrollan el proyecto de manera conjunta llevando a cabo las historias a las que se comprometen al inicio de cada sprint.
Fuente: Autores
2.2. Lista de actividades por rol
El siguiente listado determina cada una de las tareas que se realizarán en cada rol,
obteniendo un orden y un entendimiento de que debe hacer cada responsable.
Tabla 6 Actividades por rol
ROL RESPONSABLE ACTIVIDAD
Scrum master:
Cristian Nicolas Garcia Garcia
Resolver los conflictos que obstaculicen el ritmo normal del proyecto.
Incentivar y motivar al equipo de trabajo.
Fomentar la autogestión de sus colaboradores durante el proceso.
Negociar y renegociar las condiciones con el cliente.
Evitar la intromisión de terceros en las labores.
Product owner
Brayan Daniel Navarro Ortiz
Transmite las necesidades del negocio ante el director y su equipo de trabajo.
Decide las características funcionales del producto o servicio.
26
Protege los intereses del negocio; maximiza el valor de la inversión.
Revisa el producto al final de cada iteración.
Sugiere cambios y adaptaciones al término de cada nueva iteración.
Team Brayan Daniel Navarro Ortiz-
Cristian Nicolas Garcia Garcia
Desarrollar cada una de las tareas incluidas en el plan de trabajo.
Poner al servicio del proyecto sus conocimientos y técnicas.
Fuente: Autores
2.3. Definición de actores
Se definen los actores como se muestra en la tabla a continuación
Tabla 7 Definición de actores
ROLES DESCRIPCIÓN
Administrador Este rol es el encargado de controlar los usuarios como
encargados de seguridad y generar reportes.
Encargado de seguridad
Este rol es el encargado de registrar el ingreso y la
salida de los vehículos al parqueadero, además es el
encargado de enviar la notificación al usuario cuando
se presente alguna anomalía.
Usuario Este rol es el encargado de registrarse en el sistema.
Fuente: Autores
2.4. Historias de usuario
En esta parte del proyecto se definieron por parte los autores del presente documento, las
características y funciones que se esperan cumpla el sistema web, plasmándolas en un
formato como historias de usuario, dando prioridad a las funciones más relevantes y
descartando aquellas que por sí solas no conformarían una historia de usuario.
27
Tabla 8 Historias de usuario
# Rol Funcionalidad Evento Resultado
1 Admin Necesito poder generar claves de nuevo ingreso
Cuando vaya a la sección generar clave
El sistema generará una cadena de forma aleatoria
2 Admin Necesito poder ver los usuarios de mi empresa
Cuando vaya al index
El sistema generará una tabla con los usuarios
3 Admin Necesito poder ver la notificaciones de mi empresa
Cuando vaya a la sección notificaciones
El sistema generará una tabla con las notificaciones
4 Admin Necesito poder generar reportes
Cuando vaya a la sección reportes y de click en generar
El sistema generará un reporte
5 Usuario Necesito poder registrarme
Cuando vaya a registro y llene el formulario
El sistema verificara la información ingresada y la guardara en la base de datos
6 Usuario Necesito ver mis notificaciones
Cuando vaya a la sección notificaciones
El sistema generará una tabla con las notificaciones
7 Usuario Necesito poder ver mis vehículos
Cuando vaya a la sección vehículos y de click en mis vehículos
El sistema generará una tabla con los vehículos
8 Usuario Necesito poder editar mis vehículos
Cuando vaya a la sección vehículos y de click en editar vehículos
El sistema verificara la información ingresada y la guardará en la base de datos
9 Usuario Necesito poder agregar mis vehículos
Cuando vaya a la sección vehículos y de click en nuevo vehículo
El sistema verificara la información ingresada y la guardará en la base de datos
10 Usuario Necesito modificar los medios envío de notificación
Cuando vaya a la sección medio de envio y seleccione el o los medios
El sistema verificara la información seleccionada y la guardara en la base de datos
28
11 Usuario Necesito ver el historial de ingreso al parqueadero
Cuando vaya a la sección ingresos
El sistema generará una tabla con los ingresos
12 Usuario Necesito ver mis datos
Al hacer click sobre su nombre y luego ver perfil
El sistema mostrará los datos personales del usuario
13 Usuario Necesito modificar mis datos
Al hacer click sobre su nombre y luego editar perfil
El sistema verificara la información ingresada y la guardara en la base de datos
14 Encargado de seguridad
Necesito hacer la notificaciones
Cuando vaya al index y digite la placa del vehículo y el evento
El sistema verificara la información ingresada y la guardara en la base de datos
15 Encargado de seguridad
Necesito hacer el ingreso y salida de los vehículos
Cuando vaya al index y digite el código del usuario
El sistema verificara la información ingresada y la guardara en la base de datos
Fuente: Autores
2.5. Sprint Planning
La siguiente tabla muestra los Sprints con los que se realizara el proyecto, con su
respectivo nombre y una breve descripción de su objetivo.
Tabla 9 Sprints
Sprints Nombre Descripción
Sprint1 Módulo de registro Registro de los usuarios y sus vehículos
Sprint2 Módulo de usuario Muestra información de su vehículo, su perfil y notificaciones
Sprint3 Módulo de administración
Permite administrar los medios, eventos, reportes, usuarios y notificaciones.
Sprint4 Módulo de notificación
Permite el envío de la notificación
Sprint5 Módulo de control de ingreso y salida
Permite hacer el registro de la entrada y salida de los vehículos del parqueadero
Fuente: Autores
29
Sprint 1
Historias asignadas: 5 registro usuario, 9 registros de vehículo
Sprint 2
Historias asignadas: 6 ver notificaciones, 7 ver vehículos, 8 editar vehículos, 10 editar
medios de envío, 11 historial de ingreso, 12 ver perfil y 13 editar perfil.
Sprint 3
Historias asignadas: 1 generar claves, 2 ver usuarios por empresa, 3 ver notificaciones por
empresa y 4 generar reportes.
Sprint 4
Historias asignadas: 14 hacer notificaciones
Sprint 5
Historias asignadas: 15 hacer ingreso y salida de vehículos
3. DISEÑO
A continuación encontrara los diagramas y procesos hechos para el diseño del sistema.
3.1. Identificación de la información
El equipo de trabajo (Brayan Daniel Navarro Ortiz y Cristian Nicolas Garcia Garcia) se
identificó la problemática que se presencia en estos ambientes de gran estrés, viendo esto
decidimos realizar un estudio en la universidad Distrital Francisco José de Caldas Sede
Tecnológica lo que dio a conocer que la comunidad nota el problema ya presentado
anteriormente de que se necesita un sistema que les notifique de los inconvenientes
presentados con su vehículo, esta información se consiguió gracias a la comunidad que usa
el parqueadero y al sistema de seguridad (encargados de seguridad) respondiendo
preguntas que se generaba el equipo de trabajo, las cuales se realizaron mediante una
encuesta. Ver anexo 1.
3.2. Descripción de los procesos
A continuación se presentaran los procesos que se llevarán a cabo en el sistema en donde
se verá reflejada la dinámica del mismo.
30
Los procesos que se describen, hacen referencia al sistema de información WEB para la
notificación y registro de eventos en parqueaderos.
Tabla 10 Descripción de procesos
Proceso Descripción
Registro
La información solicitada por el sistema se debe diligenciar. Si el
registro que se intenta ingresar existe, o la información
diligenciada o contestada está incompleta el sistema no
permitirá que el proceso termine.
Notificación Se genera la notificación y se envía por el medio que el usuario
haya seleccionado
Ingreso
Se genera el ingreso del vehículo y se guarda el registro. Si el
vehículo no existe en el sistema no se genera el ingreso y no se
guarda el registro
Reporte
Se genera la consulta a través de una fecha definida previamente
a la hora del registro. Si el reporte requerido no existe el sistema
no arroja resultados, si existe se visualiza la información
solicitada al sistema
Medios La notificación es enviada por un medio. Si el medio no ha sido
seleccionado no se envía la notificación.
Eventos Se seleccionan los eventos que irán en la notificación. Si no
existe el evento, se debe describir en ‘otros’
Fuente: Autores
31
3.3. Diagrama relacional
Ilustración 2 Esquema relacional base de datos
32
3.4. Modelo de interfaz
Ilustración 3 Modelo de interfaz
33
4. DESARROLLO
El Sistema de información web para la notificación y registro de eventos en parqueaderos
está diseñado y desarrollado para trabajar sobre los siguientes componentes.
Motor de base de datos: Mysql
Lenguaje de programación: PHP 5.6.30
Framework PHP: CakePHP 3.5.4
Framework web: Bootstrap 3.3.7
Framework javascript: jQuery 3.2.1, jQuery UI
El framework CakePHP provee una estructura base que permite un desarrollo rápido con
soporte para versión de PHP desde 5.6.0, a partir de dicha base se implementan las
diferentes clases que provee el núcleo del framework el cual sigue el patrón modelo vista
controlador. Con lo anterior se puede definir la arquitectura del sistema.
Ilustración 4 Arquitectura del sistema
Bootstrap provee un sistema de grilla que permite hacer el sistema web responsive.
Requiere de jQuery para el correcto funcionamiento de algunos de sus componentes.
Para el envío de correos se usó la clase Cake\Mailer\Email de CakePHP la cual permite
enviar correos desde cualquier sitio dentro del proyecto con tan solo dos líneas de código.
34
4.1. Sprint 1
Para este Sprint se atendieron las historias de usuario 5 y 9, con ellas se construyó la pila de
Sprint que conformara la primera parte de la aplicación al final de esta iteración como se
observa a continuación.
Tabla 111 Backlog sprint 1
BACKLOG ID: 01
ID Historia
de usuario
Tarea Prioridad Esfuerzo
05 Definición de vista de desarrollo creación de elementos que permitan codificar el registro e ingreso a el aplicativo.
1 10
Creación y codificación del módulo de registro en la que al ingresar los datos de cada tipo usuario permita ingresar a la pantalla de inicio del mismo.
1 20
Creación del código fuente que permitirá el desarrollo de cada funcionalidad.
1 30
09 Definición de vista de desarrollo creación de elementos que permitan codificar el registro de los vehículos.
1 10
Creación del código fuente que permitirá el desarrollo de cada funcionalidad.
1 30
35
Objetivos del sprint
● Entregar interfaz que permite a un usuario registrar sus datos por medio de un
formulario
o En este formulario se debe incluir una clave única que ha sido previamente
dada por el encargado de la empresa (admin), esto se hace para tener el
control de a qué empresa pertenece el usuario que se está registrando.
● Entregar la interfaz que permite al usuario agregar su vehículo
Una vez el usuario está registrado se usa el componente de autentificación de CakePHP para
permitir o restringir el acceso del usuario a ciertos módulos.
Cierre y entrega
Cumplidos los objetivos del sprint 1, se da por finalizado el sprint y se hace la entrega.
Ilustración 5 Nuevo usuario
Para la interfaz que permite agregar vehículos, en el campo ‘placa’ mediante CSS se
convierte a mayúsculas la entrada de ese campo, esto se realiza para mejorar visualmente
la aplicación y para facilitar las búsquedas en la base de datos.
36
Ilustración 6 Nuevo vehículo
4.2. Sprint 2
Para este Sprint se atendieron las historias de usuario 6, 7, 8, 12, 11, 12 y 13, con ellas se
construyó la pila de Sprint que conformara la segunda parte de la aplicación al final de esta
iteración como se observa a continuación.
Tabla 12 Backlog sprint 2
BACKLOG ID: 02
ID Historia
de usuario
Tarea Prioridad Esfuerzo
06 Definición de vista de desarrollo creación de elementos que permitan codificar la visualización de las notificaciones
1 10
Creación y codificación de la vista de notificaciones en la que al ingresar se muestre una tabla con las notificaciones recibidas.
1 20
37
Creación del código fuente que permitirá el desarrollo de cada funcionalidad.
1 30
07 Definición de vista de desarrollo creación de elementos que permitan codificar la visualización de los vehículos registrados.
1 10
Creación y codificación de la vista de vehículos en la que al ingresar se muestre la información de los vehículos registrados.
1 20
Creación del código fuente que permitirá el desarrollo de cada funcionalidad.
1 30
08 Definición de vista de desarrollo creación de elementos que permitan codificar la edición de los vehículos registrados
1 10
Creación y codificación de la vista de edición de vehículos en la que al ingresar se muestre un formulario con la información del vehículo a editar.
1 20
Creación del código fuente que permitirá el desarrollo de cada funcionalidad.
1 30
10 Definición de vista de desarrollo creación de elementos que permitan codificar la edición de las preferencias de envío de notificación.
1 10
Definición de lógica de desarrollo que permita incluir envío de notificación mediante Facebook
1 20
Creación y codificación de la vista de edición de medios de envío de notificación en la que
1 20
38
al ingresar se las opciones disponibles y las seleccionadas con anterioridad.
Creación del código fuente que permitirá el desarrollo de cada funcionalidad.
1 30
11 Definición de vista de desarrollo creación de elementos que permitan codificar la visualización del historial de ingreso.
1 10
Creación y codificación de la vista del historial de ingreso a parqueaderos en la que al ingresar se muestre una tabla con el historial.
1 20
Creación del código fuente que permitirá el desarrollo de cada funcionalidad.
1 30
12 Definición de vista de desarrollo creación de elementos que permitan codificar la visualización de la información de cada usuario.
1 10
Creación y codificación de la vista de perfil de usuario en la que al ingresar se muestre la información de cuenta.
1 20
Creación del código fuente que permitirá el desarrollo de cada funcionalidad.
1 30
13
Definición de vista de desarrollo creación de elementos que permitan codificar la edición de la información de cada usuario.
1 10
Creación y codificación de la vista de edición de la información de cuenta en la que al ingresar se muestre un formulario con la información usuario.
1 20
39
Creación del código fuente que permitirá el desarrollo de cada funcionalidad.
1 30
Objetivos del sprint
● Entregar la interfaz que permite a los usuarios ver y editar sus datos personales
● Entregar la interfaz que permite a los usuarios ver sus notificaciones
● Entregarla interfaz que permite a los usuarios ver y editar sus vehículos
● Entregar la interfaz que permite a los usuarios ver el historial de ingreso
Cierre y entrega
Cumplidos los objetivos del sprint 2, se da por finalizado el sprint y se hace la entrega
Ilustración 7 Ver perfil
La información de los vehículos ira apareciendo dinámicamente mediante paneles.
40
Ilustración 8 Ver vehículos
4.3. Sprint 3
Para este Sprint se atendieron las historias de usuario 1, 2, 3 y 4, con ellas se construyó la
pila de Sprint que conformara la tercera parte de la aplicación al final de esta iteración como
se observa a continuación.
Tabla 13 Backlog sprint 3
BACKLOG ID: 03
ID Historia
de usuario
Tarea Prioridad Esfuerzo
01 Definición de vista de desarrollo creación de elementos que permitan codificar la generación de claves de empresa para nuevos usuarios.
1 10
41
Definición de lógica de desarrollo para la construcción de claves con caracteres aleatorios.
1 20
Creación y codificación del módulo de generación de claves en la que al ingresar, se muestre un formulario con la clave de empresa y correo del nuevo usuario.
1 20
Creación del código fuente que permitirá el desarrollo de cada funcionalidad.
1 30
02 Definición de vista de desarrollo creación de elementos que permitan la visualización de los usuarios por empresa.
1 10
Creación y codificación de la vista de lista de usuarios en la que al ingresar, se muestre un formulario con la clave de empresa y correo del nuevo usuario.
1 20
Creación del código fuente que permitirá el desarrollo de cada funcionalidad.
1 30
03 Definición de vista de desarrollo creación de elementos que permitan la visualización de las notificaciones por empresa.
1 10
Creación y codificación de la vista de lista de notificaciones por empresa en la que al ingresar, se muestre una tabla con las notificaciones.
1 20
42
Creación del código fuente que permitirá el desarrollo de cada funcionalidad.
1 30
04 Definición de vista de desarrollo creación de elementos que permitan generación de reportes.
1 10
Creación y codificación de la vista de generación de reportes en la que al ingresar, se muestre las opciones de reportes para descargar.
1 20
Creación del código fuente que permitirá el desarrollo de cada funcionalidad.
1 30
43
Objetivos de sprint
● Entregar la interfaz que permite al admin ver los usuarios de su empresa
● Entregar la interfaz que permite al admin ver las notificaciones de su empresa
● Entregar la interfaz que permite al admin generar la clave de nuevo ingreso
● Entregar la interfaz que permite al admin generar reportes.
Cierre y entrega
Cumplidos los objetivos del sprint 3, se da por finalizado el sprint y se hace la entrega
Ilustración 9 Vista de notificaciones – Admin
Para la interfaz que permite generar claves se usó una función random que genera cadenas de 15
caracteres entre números y letras.
44
Ilustración 10 Vista generar clave- Admin
Para la interfaz de vista de usuarios en este caso la vista ‘Home’ del Admin se utilizó una tabla
responsive de Bootstrap.
Ilustración 11 Vista de usuarios- Admin
4.4. Sprint 4
Para este Sprint se atendieron las historias de usuario 14, con ella se construyó la pila de
Sprint que conformara la cuarta parte de la aplicación al final de esta iteración como se
observa a continuación.
45
Tabla 14 Backlog sprint 4
BACKLOG ID: 05
ID Historia
de usuario
Tarea Prioridad Esfuerzo
14 Definición de vista de desarrollo creación de elementos que permitan realizar la notificación.
1 10
Creación y codificación de la vista de notificación en la que al ingresar los datos del vehículo se haga la notificación por los medios seleccionados.
1 30
Creación del código fuente que permitirá el desarrollo de cada funcionalidad.
1 30
Envió de la notificación a los usuarios mediante los medios seleccionados y visualización de esta
1 30
Objetivos del sprint
● Entregar la interfaz que permite al encargado del parqueadero hacer las
notificaciones
● Enviar notificaciones y que el usuario las reciba.
Cierre y entrega
Cumplidos los objetivos del sprint 4, se da por finalizado el sprint y se hace la entrega
46
Ilustración 12 Hacer notificación
Ilustración 13 Visualización de las notificaciones enviadas al usuario por los medios seleccionados (correo electrónico y SMS)
47
4.5. Sprint 5
Para este Sprint se atendieron las historias de usuario 15, con ella se construyó la pila de
Sprint que conformara la quinta y última parte de la aplicación al final de esta iteración
como se observa a continuación.
Tabla 15 Backlog sprint 5
BACKLOG ID: 05
ID Historia de usuario
Tarea Prioridad Esfuerzo
15 Definición de vista de desarrollo creación de elementos que permitan realizar el registro del ingreso y la salida de los vehículos.
1 10
Creación y codificación de la vista de ingreso y salida de vehículos en la que al ingresar los datos del vehículo se haga el registro.
1 30
Creación del código fuente que permitirá el desarrollo de cada funcionalidad.
1 30
Objetivos del sprint
● Entregar la interfaz que permite al encargado de seguridad hacer el registro de la
entrada y salida de vehículos.
o En este módulo los encargados de seguridad pueden registrar la entrada y
salida de los vehículos en los parqueaderos; esto permite que una
notificación no sea enviada por error a un usuario.
o El ingreso o salida del parqueadero se hace con un formulario que con la
ayuda de un lector de código de barras o manualmente capta el código o id
del usuario y comparando con fecha y hora hace la respectiva entrada o
salida del parqueadero.
Cierre y entrega
48
Cumplidos los objetivos del sprint 5, se da por finalizado el sprint y se hace la entrega
Ilustración 14 Ingreso al parqueadero
4.6. Diagrama de componentes A continuación se mostrara el diagrama de componentes el cual muestra las
dependencias entre estos componentes dentro del proyecto. Ver ilustración 16.
Cake ORM: Se especializa en base de datos relacionales.
Evento: Es el componente en donde se presenta un inconveniente con algún
vehículo en el parqueadero.
Medio: Este es el que se encarga de enviar la notificación.
Notificación: Es la alerta que se generara al usuario para darle a conocer que se
presentó un evento con su vehículo.
49
Ilustración 15 Diagrama de componentes
4.7. Diagrama de contexto
A continuación se presenta el diagrama de contexto el cual define los límites del sistema.
Ilustración 16 Diagrama de contexto
En este diagrama de contexto se muestra el funcionamiento de la aplicación Parking
Notifier, se puede observar que existe una parte de administración la cual es la encargada
de como su nombre lo dice administrar la aplicación, esta creara nuevos usuarios quienes
usaran la aplicación, además es la encargada de crear reportes en general de la aplicación.
También se encuentra en este el apartado del lector de código de barras el cual es
50
importante para un optimo funcionamiento de la aplicación ya que este se encarga de leer
la información que esta almacenada en los códigos de barras que poseen los usuarios del
parqueadero, y llevarla a la aplicación para guardar dichos datos y realizar los procesos
correspondientes.
Los usuarios es la parte fundamental de la aplicación ya que de ellos depende que funcione
y preste el servicio correctamente, estos usuarios están encargados de registrarse, tener un
vehículo y dar uso al parqueadero y así generar ingreso a este, enviar y recibir notificaciones
de algún evento presentado dentro del parqueadero, cabe mencionar que existen varios
usuarios como lo son el encargado de seguridad, administrador, usuario normal, etc.
Además las notificaciones push en cuestión de móviles, son las mismas que están
implementadas en las aplicaciones de Facebook y la de cualquier aplicación para correo
electrónico, estas son importantes ya que nos ayudar a darle al usuario seguridad de que
se le va a notificar y la notificación llegara y será vista por el usuario.
El correo electrónico y la Api de Facebook nos permite el registro y vinculación de cuentas
a la aplicación además este nos ayuda para el envió de notificaciones el cual, estas son el
medio por el cual van a enviar la alerta del usuario vía correo electrónico y/o Facebook, el
usuario se encargara de seleccionar cual de estas desea o si desea las dos. Si es vía correo
electrónico esta se realiza por una función de php llamada PHP mail(),en esta con los
parámetros to, subject y message se puede enviar la notificación desde un servidor o pagina
web, para Facebook en este caso usamos la api de Facebook llamada apiFacebook en esta
lo que realizamos es que el usuario vincule su cuenta de Facebook con la aplicación para
obtener el id de usuario de Facebook mediante los permisos que el autoriza y luego
mediante scripts se envía la notificación al usuario.
5. Testing
Se muestran en las siguientes tablas las pruebas realizadas en cada historia de usuario
Usuarios disponibles:
Super Admin (SA): Son los desarrolladores de la aplicación tiene acceso a todas las vistas,
además son los encargados de crear las cuentas de los administradores.
Administrador: Es el encargado de generar las cuentas a los usuarios staff.
Staff: Es el encargado de seguridad de la empresa o sucursal, este también se encargara
de generar los ingresos del parqueadero y enviar las notificaciones.
Usuario: Es el que da uso del parqueadero y usa un vehículo.
51
Tabla 12 Historia de usuario, Generar claves nuevo ingreso
Operación Descripción del resultado Correcciones
Inicio de la aplicación Correcto, se inicia
aplicación y se carga
formulario para el envió de
notificaciones
N/A
Despliegue de formulario
generar nuevas claves
Se genera el formulario con
los campos para poder
generar nuevas claves
Se modifica el campo que
genera las claves para los
nuevos usuarios y así poder
enviarlos.
Generar clave Se genera nueva clave
vinculada al correo del
usuario
N/A.
Tabla 13 Historia de usuario, Ver usuarios empresa
Operación Descripción del resultado Correcciones
Inicio de la aplicación Correcto, se inicia
aplicación y se carga la
tabla donde mostrara todos
los usuarios de la empresa
registrados.
Se modifican tamaños de la
tabla para que se vea
mejor.
Tabla 14 Historia de usuario, Visualizar notificaciones empresa
Operación Descripción del resultado Correcciones
Inicio de la aplicación Correcto, se inicia
aplicación y se carga la
tabla donde mostrara todos
con las notificaciones
realizadas
N/A
Tabla 15 Historia de usuario, Generar reportes
Operación Descripción del resultado Correcciones
Inicio de la aplicación Correcto, se inicia
aplicación y se carga
N/A
52
formulario para el envió de
reportes.
Despliegue de formulario
generar reportes
Se genera el formulario con
los campos para poder
generar reportes
N/A
Generar reporte Se genera un nuevo reporte
con las consultas deseadas
Se mejoran la forma de
hacer las consultas.
Tabla 16 Historia de usuario, Registro usuario
Operación Descripción del resultado Correcciones
Inicio de la aplicación Correcto, se inicia
aplicación y se carga
formulario para el registro
de un nuevo usuario.
Cambio de colores para que
se vea más claro el
formulario.
Verificación campos Se verifica que el usuario
llene todos los campos del
formulario
Se hace el aviso cuando no
se ha llenado un campo.
Tabla 17 Historia de usuario, Visualización notificaciones
Operación Descripción del resultado Correcciones
Inicio de la aplicación Correcto, se inicia
aplicación y se carga el
apartado de notificaciones
N/A
Visualización notificaciones Se observa una tabla con
las notificaciones que se
han realizado
N/A
Tabla 18 Historia de usuario, Ver vehículo
Operación Descripción del resultado Correcciones
Inicio de la aplicación Correcto, se inicia
aplicación y se carga la
sección de vehículos
N/A
53
Visualizar vehículos Se muestra una tabla con
los vehículos que el usuario
ha registrado
Se modifica el tamaño de la
tabla para una mejor
visualización.
Tabla 19 Historia de usuario, Editar vehículo
Operación Descripción del resultado Correcciones
Inicio de la aplicación Correcto, se inicia
aplicación y se carga la
sección de vehículos
N/A
Editar vehículos Se muestra una tabla con
los vehículos que el usuario
ha registrado y la opción de
editar estos
N/A
Tabla 20 Historia de usuario, Agregar vehículo
Operación Descripción del resultado Correcciones
Inicio de la aplicación Correcto, se inicia
aplicación y se carga la
sección de vehículos
N/A
Agregar vehículos Se muestra el apartado
para agregar un nuevo
vehículo, despliega el
formulario para guardar
esta información
N/A
Tabla 21 Historia de usuario, Modificar los medios envío de notificación
Operación Descripción del resultado Correcciones
Inicio de la aplicación Correcto, se inicia
aplicación y se carga la
sección de medios de envío
notificaciones.
N/A
Modificar medio
notificación
Se carga la opción de editar
medio, para que pueda
N/A
54
seleccionar entre los dos
medios disponibles
Tabla 22 Historia de usuario, Ver datos
Operación Descripción del resultado Correcciones
Inicio de la aplicación Correcto, se inicia
aplicación y se carga el
perfil del usuario
N/A
Mostrar datos Se muestra los datos del
usuario
N/A
Tabla 23 Historia de usuario, Modificar datos
Operación Descripción del resultado Correcciones
Inicio de la aplicación Correcto, se inicia
aplicación y se carga el
perfil del usuario
N/A
Editar datos Se muestra botón para
editar datos
N/A
Guardar datos Se muestra un formulario
con los datos a modificar y
se guarda la información
N/A
Tabla 24 Historia de usuario, Realizar notificaciones
Operación Descripción del resultado Correcciones
Inicio de la aplicación Correcto, se inicia
aplicación y se carga el
formulario para enviar
notificaciones
N/A
Enviar notificación Se digita la placa del
vehículo y se selecciona el
evento
N/A
55
Tabla 25 Historia de usuario, Realizar ingreso y salida de vehículos
Operación Descripción del resultado Correcciones
Inicio de la aplicación Correcto, se inicia
aplicación y se carga el
formulario para registrar
ingreso o salida de usuarios
N/A
Realizar ingreso y salida de
usuarios
Se detecta el código y se
genera un ingreso si no esta
registrado, si no se genera
una salida.
N/A
56
6. Conclusiones
● El uso de los framework Boostrap y cakePHP, generó ciertos inconvenientes como
dedicar más tiempo al aprendizaje de estos dos framework’s, pero proporcionó
muchas herramientas para el desarrollo del proyecto en relación a agilizar la
generación de código y poder dar una solución eficaz a este.
● El diseñar un sistema de información web tiene varios retos, como las curvas de
aprendizaje de los frameworks y tratar que todo lo que se haga quede de forma
óptima para el usuario, los cuales hay que ir sobrepasando cada vez que se avanza
en este, además para dar una solución tecnológica a este sistema se requiere de
ciertas habilidades y conocimientos los cuales no se tenían en totalidad, y se fueron
adquiriendo mientras se avanzaba en el proyecto.
● Una de las ventajas del desarrollo de este proyecto es el motor de bases de datos
que usamos (MySQL), ya que este es muy utilizado en aplicaciones web con el
lenguaje de programación que usamos (PHP), dado que por ser software libre y
tener mayor compatibilidad con el lenguaje de programación, permitió realizar de
forma rápida lo relacionado con el acceso y administración de datos.
● Realizar el registro de los vehículos que ingresan y salen del parqueadero donde
quede almacenado en varias vistas para tener un buen control, este para que todos
los usuarios puedan tener un detalle de los registros hechos tales como los ingreso
y/o salida del parqueadero además de las notificaciones que se hagan.
● El uso del servicio de amazon sns para el envió de las notificaciones vía mensajería
de texto (SMS) proporciono conocimiento de esta herramienta y nos dio a conocer
lo sencilla y practica que es para usarla.
● Uno de los limitantes para el proyecto es el servidor proxy ya que este limita el
servicio de amazon sns y no puede enviar la notificación de mensajería de texto
(SMS).
57
ANEXOS
58
1) Encuesta clientes potenciales
Encuesta realizada en la Universidad Distrital Francisco José de Caldas sede Tecnológica
sobre el funcionamiento del parqueadero y si es necesario un sistema de notificación.
Tabla Seguridad Parqueadero.
Calificación Total
Deficiente 0
Malo 33
Regular 36
Bueno 32
Muy bueno 33
Encuestados 134
0
33
36
32 33
0
5
10
15
20
25
30
35
40
Deficiente Malo Regular Bueno Muy bueno
Seguridad de parqueadero
59
Tabla Problema con vehículos.
Problema Total
Llaves olvidadas en el
vehículo 42
Luces encendidas 23
Moto encendida 14
Alarma encendida 11
Baúl abierto 25
Llanta baja de aire 0
Ninguna 51
Tabla sobre si gustaría que se le notificara de algún problema con el vehículo.
Gusto Total
Si 134
No 0
42
23
1411
25
0
51
0
10
20
30
40
50
60
Llavesolvidadas enel vehículo
Lucesencendidas
Motoencendida
Alarmaencendida
Baúl abierto Llanta bajade aire
Ninguna
Problemas con vehículos
60
Tabla Sobre la necesidad de un sistema de notificación.
Necesario Total
Si 134
No 0
134
00
20
40
60
80
100
120
140
160
Si No
Les gustaria que se les notofique si se presenta algún problema con el vehículo
134
00
20
40
60
80
100
120
140
160
Si No
Creen necesario un sistema de notificación
61
Tabla medio de notificaión.
Notificación Total
Correo electronico 44
Mensaje de texto 25
Vía Facebook 60
Llamada telefonica 15
44
25
60
15
0
10
20
30
40
50
60
70
Correo electronico Mensaje de texto Vía Facebook Llamada telefonica
Medio de notificación
62
2) Manual de usuario Introducción
La aplicación Parking Notifier es una herramienta para ayudar al funcionamiento de los
parqueaderos en universidades o lugares laborales donde los cuales se puede llevar un registro y
un seguimiento a los vehículos que ingresan a este, los servicios que presta esta herramienta son
los siguientes:
Registro de usuarios que utilizan el parqueadero.
Registro de ingreso y salida de los vehículos al parqueadero.
Envió de notificación al usuario mediante los medios seleccionados (correo electrónico y/o
mensajería de texto SMS).
Descripción de la aplicación
ParkingNotifier es un sistema web que permitirá apoyar y brindar un soporte a los usuarios
de los parqueaderos que sirve para notificar de algún inconveniente presentado con el
vehículo en el parqueadero y se pueda contactar con dicho usuario de una forma eficaz.
Requerimientos
● Computador de mesa o portátil.
A continuación se mostraran algunas características económicas, que son viables
para trabajar en esta pla7aforma web.
o Intel Pentium, Core2duo, Amd x2.
o 2 gb de ram.
o Disco duro de 500gb.
o Pantalla lcd 15’’
o Mouse y teclado. (en caso de ser computador de mesa)
● Lector de código de barras.
A continuación se mencionaran algunos lectores de códigos de barras económicos
en el mercado.
o Lector Codigo Barras Plug&play Usb Anti Shok LS-4209
o Lector De Códigos De Barras Alta Precisión Sat Ld101
o Lector Escaner Pistola Codigo De Barra Fj-6.
● Conexión a internet.
Se recomienda una conexión a internet de mínimo 3Mb, esto dependerá de que
tanto usuarios estarán conectados a esta red, así se necesitara aumentar el ancho
de banda.
● Navegador que soporte php.
Google Chrome.
Mozilla Firefox.
63
Funcionamiento
Ingresar a la página ParkingNotifier la cual dara al inicio de esta mostrando quienes somos,
un apartado para contactar a la empresa (ParkingNotifer, y en la parte superior el botón
para iniciar sesión para cualquiera de los 4 roles, los cuales son:
● Super admin
● Administrador
● Encargado de seguridad
● Usuario
Login
Si la clave de empresa no es válida, puede solicitar una nueva al administrador.
Registro
64
Super admin: La función principal de este usuario es crear las cuentas para los
administradores de las empresas que van a usar el servicio de ParkingNotifier. Para agregar
un administrador deberá ir al menú desplegable de usuarios y dar click en ‘Nuevo
administrador’, llenar el formulario y dar click en ‘Crear’ en la parte inferior izquierda.
También podrá ser capaz de agregar y editar empresas y sucursales Para ello deberá
dirigirse al menú y dar click en ‘empresas’ luego en el detalle de empresa; una vez allí
podrá editar los datos de la empresa o agregar sucursales con los botones ‘Editar’ y
‘Nuevo’ respectivamente.
65
Por último podrá crear y editar medios y eventos. Dirigirse al apartado de eventos dar
click e ‘Nuevo evento’, llenar el formulario y dar click en ‘crear’.
De igual forma con los medios.
Administrador: Es el encargado de la empresa que solicita el servicio de ParkingNotifer y
las acciones que puede realizar son las de crear las cuentas de los encargados de seguridad
de la empresa en el parqueadero, habilitar mediante un token el registro al sistema a los
usuarios para el uso del sistema, ver la notificaciones en su empresa, además acciones
normales como editar sus datos.
Para generar token o clave deberá dirigirse al menú y dar click en ‘generar clave’, por
defecto aparecerá una clave, terminar el formulario y dar en ‘generar’.
66
Para ver los usuarios de su empresa deberá ir a Inicio e intercambiar entre las pestañas
‘staff’ y ‘usuarios’
Encargado de seguridad: Este se encarga de registrar el ingreso y la salida de los usuarios
al parqueadero, además de enviar las notificaciones a dichos usuarios cuando se presenta
un inconveniente con el vehículo, también podrá editar sus propios datos.
El encargado de seguridad al entrar a su cuenta en el inicio se mostrara el registro de ingreso
y salida de vehículos listos para comenzar a realizar el trabajo.
En caso de que el código no se encuentre en la base de datos, se puede hacer el ingreso
como invitado dando click en la parte inferior derecha.
Para realizar una notificación deberá ir al apartado ‘Notiifcar’ en el menú, teclear la placa
del usuario y seleccionar el o los eventos que han ocurrido, una vez hecho esto dar click en
‘Enviar’.
67
En caso de que el evento no se encuentre en la lista se podrá escribir en el campo ‘Otro’
Usuario: Es el que va a usar el parqueadero y tendrá que registrar en el sistema datos como
placa del vehículo, correo electrónico, vincular su cuenta de Facebook (opcional).
El usuario al iniciar sesión en el inicio se mostrara el historial de las notificaciones que se le
han generado.
Para ver sus vehículos deberá ir al menú desplegable ‘Vehículos’ y seleccionar ‘Mis
Vehículos’, se mostrara la información del vehículo y la opción de editarlo.
68
Para agregar vehículos deberá ir al menú desplegable ‘Vehículos’ y seleccionar ‘Nuevo
Vehículo’, se mostrara un formulario, una vez diligenciado dará click en el botón ‘Crear’
Para ver los medios seleccionados de envío de notificación deberá ir a ‘Medios de envío’, se
mostrara el o los medios seleccionados.
69
Todos los usuarios tienen la posibilidad de ver y editar sus datos. En cualquier tipo de sesión
debe dar click en el menú desplegable con su nombre y podrá escoger entre ver, editar su
perfil o cerrar la sesión.
70
Problemas y fallos
El sistema esta diseñado para que cualquier dato erróneo, repetido o que no exista de un
aviso al usuario en la interfaz que se encuentre, para solucionarlo deberá leer el mensaje
que se arrojara en ese mismo momento.
Si se presenta alguno de estos problemas.
Sin conexión a internet
71
404 not found
No se encuentra la pagina solicitada.
Deberá contactar al administrador de la empresa, universidad, etc, para que solucionen
estos problemas, ya sea arreglando la conexión a internet revisando cual es el problema o
contactar a los encargados de la página, ya que con estos dos problemas no se puede
acceder a la página y no se podrá realizar alguna labor dentro de ella.
72
73
BIBLIOGRAFIA E INFOGRAFIA
PRESSMAN, Roger. Ingeniería del software un enfoque práctico. Mc Graw Hill. pp
980
Pastorini. A. Servicios web. Disponible en:
https://www.fing.edu.uy/tecnoinf/mvd/cursos/ria/material/teorico/ria-06-
ServiciosWeb.pdf
Facebook, Plataforma de Messenger. Disponible en:
https://developers.facebook.com/docs/messenger-platform/product-overview
Lainformacion.com, Como es la historia de Facebook. Disponible en :
http://internet-y-ordenadores.practicopedia.lainformacion.com/facebook/como-
es-la-historia-de-facebook-20854
Lara W (2015), Cómo funciona la metodología de trabajo Scrum. Disponible en:
https://platzi.com/blog/guia-scrum/
scrummanager, Modelo original de Scrum para desarrollo de software. Disponible
en:
https://www.scrummanager.net/bok/index.php?title=Modelo_original_de_Scrum
_para_desarrollo_de_software
W3C, HTML5. Disponible en: https://www.w3.org/TR/html5/
MySQL, MySQL Documentation. Disponible en : https://dev.mysql.com/doc/
Oracle, MySQL Documentation. Disponible en:
https://docs.oracle.com/cd/E17952_01/
Apache, Apache HTTP Server Documentation. Disponible en:
https://httpd.apache.org/docs/
php, PHP Manual. Disponible en: http://php.net/manual/es/
devdocs, PHP: Hypertext Preprocessor. Disponible en: http://devdocs.io/php/
Ciwsparking, Ciwsparking. Disponible en :
http://tecnologiasciws.com/new/soluciones/parqueaderos/software-para-
parqueaderos/CIWSParking
w3schools, PHP Connect to MySQL. Disponible en:
https://www.w3schools.com/php/php_mysql_connect.asp
Txomin V (2015), Centro de gestión de notificaciones Push para dispositivos móviles
basados en IOS y Android. Disponible en:
https://addi.ehu.es/bitstream/handle/10810/15912/Txomin%20Vila_Memoria%20
PFC.pdf?sequence=1&isAllowed=y