SISTEMA DE INFORMACIÓN WEB PARA LA NOTIFICACIÓN Y...

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/

http://repository.udistrital.edu.co/

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

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

https://eldesvandejose.com/2016/06/17/bases-de-datos-sql-i/

http://searchdatacenter.techtarget.com/es/definicion/MySQL

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

http://teoriadaprendizaje.blogspot.com.co/p/pavlov_03.html

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

https://servidoresdealojamientosenlinea.wordpress.com/2016/05/17/que-debemos-saber-acerca-de-los-servidores/

https://servidoresdealojamientosenlinea.wordpress.com/2016/05/17/que-debemos-saber-acerca-de-los-servidores/

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

https://hipertextual.com/archivo/2014/05/que-es-api/

https://hipertextual.com/archivo/2014/05/que-es-api/

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

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-


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:


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-


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


14 Encargado de seguridad

Necesito hacer la notificaciones

Cuando vaya al index y digite la placa del vehículo y el evento


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


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


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.


BACKLOG ID: 02

ID Historia

de usuario


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


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


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


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.


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


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


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


1 30


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


BACKLOG ID: 03

ID Historia

de usuario


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


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


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


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


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


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


BACKLOG ID: 05

ID Historia

de usuario


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


1 30

Envió de la notificación a los usuarios mediante los medios seleccionados y visualización de esta

1 30


● Entregar la interfaz que permite al encargado del parqueadero hacer las

notificaciones

● Enviar notificaciones y que el usuario las reciba.

Cierre y 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.


BACKLOG ID: 05

ID Historia de usuario


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


1 30


● 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


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



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




tabla donde mostrara todos

con las notificaciones

realizadas

N/A

Tabla 15 Historia de usuario, Generar reportes




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




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



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




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





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





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




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




perfil del usuario

N/A

Mostrar datos Se muestra los datos del

usuario

N/A

Tabla 23 Historia de usuario, Modificar datos




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




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




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.

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



https://developers.facebook.com/docs/messenger-platform/product-overview

http://internet-y-ordenadores.practicopedia.lainformacion.com/facebook/como-es-la-historia-de-facebook-20854

http://internet-y-ordenadores.practicopedia.lainformacion.com/facebook/como-es-la-historia-de-facebook-20854

https://platzi.com/blog/guia-scrum/

https://www.scrummanager.net/bok/index.php?title=Modelo_original_de_Scrum_para_desarrollo_de_software

https://www.scrummanager.net/bok/index.php?title=Modelo_original_de_Scrum_para_desarrollo_de_software

https://www.w3.org/TR/html5/

https://dev.mysql.com/doc/

https://docs.oracle.com/cd/E17952_01/

https://httpd.apache.org/docs/

http://php.net/manual/es/

http://devdocs.io/php/

http://tecnologiasciws.com/new/soluciones/parqueaderos/software-para-parqueaderos/CIWSParking

http://tecnologiasciws.com/new/soluciones/parqueaderos/software-para-parqueaderos/CIWSParking

https://www.w3schools.com/php/php_mysql_connect.asp

https://addi.ehu.es/bitstream/handle/10810/15912/Txomin%20Vila_Memoria%20PFC.pdf?sequence=1&isAllowed=y

https://addi.ehu.es/bitstream/handle/10810/15912/Txomin%20Vila_Memoria%20PFC.pdf?sequence=1&isAllowed=y

SISTEMA DE INFORMACIÓN WEB PARA LA NOTIFICACIÓN Y...

Documents

Transcript of SISTEMA DE INFORMACIÓN WEB PARA LA NOTIFICACIÓN Y...