aplicaciÓn mÓvil con tecnologÍa beacon para el...
TRANSCRIPT
APLICACIÓN MÓVIL CON TECNOLOGÍA BEACON PARA EL APOYO DE LA
DIFUSIÓN DE INFORMACIÓN DE LOS ESPACIOS DEL CAMPUS
UNIVERSITARIO
JORGE EDUARDO ADÁN BELTRÁN
20152678016
PAULA ANDREA BUSTOS HIGUERA
20161678011
UNIVERSIDAD DISTRITAL FRANCISCO JOSÉ DE CALDAS
FACULTAD TECNOLÓGICA
INGENIERÍA TELEMÁTICA
BOGOTÁ, 2018
APLICACIÓN MÓVIL CON TECNOLOGÍA BEACON PARA EL APOYO DE LA
DIFUSIÓN DE INFORMACIÓN DE LOS ESPACIOS DEL CAMPUS
UNIVERSITARIO
JORGE EDUARDO ADÁN BELTRÁN
20152678016
PAULA ANDREA BUSTOS HIGUERA
2161678011
PROYECTO PRESENTADO COMO REQUISITO PARA OPTAR POR EL TÍTULO
DE INGENIERO (A) EN TELEMÁTICA
TUTOR
LUIS FELIPE WANUMEN SILVA
INGENIERO DE SISTEMAS
UNIVERSIDAD DISTRITAL FRANCISCO JOSÉ DE CALDAS
FACULTAD TECNOLÓGICA
INGENIERÍA TELEMÁTICA
BOGOTÁ, 2018
2
TABLA DE CONTENIDO
1. PLANIFICACIÓN 15
TÍTULO 13
TEMA 13
PLANTEAMIENTO DEL PROBLEMA 13
Descripción 13
Planteamiento del problema 14
OBJETIVOS 15
Objetivo general 15
Objetivos específicos 15
ALCANCES Y LIMITACIONES. 16
1.5.1. Alcances 16
1.5.2. Limitaciones 16
1.6. JUSTIFICACIÓN 17
1.7 MARCO DE REFERENCIA 18
1.7.1. Marco histórico 18
1.7.2 Marco Teórico. 19
1.7.3 MARCO CONCEPTUAL 37
1.7.4 MARCO METODOLÓGICO 37
1.8.1 Factibilidad de Desarrollo 40
1.8.1.1 Factibilidad Técnica 40
1.8.1.2 Factibilidad Operativa. 41
1.8.1.3 Factibilidad Legal 41
1.8.1.4 Factibilidad Económica 41
2. DESARROLLO DEL PROYECTO 43
2.1. ANÁLISIS DE LA SOLUCIÓN (SPRINT 1) 42
2.1.1 Catálogo de actores 42
2.1.1. Definición De Requisitos 43
2.1.2. Establecimiento De Alcances 45
2.1.3. Casos De Uso 46
2.1.3 Documentación de casos de uso 48
2.1.4. Diseño Arquitectónico 56
2.1.4.1 Introductoria 56
2.1.4.2 Organización 57
2.1.4.3 Cooperación de Actores 57
3
2.1.4.4 Funciones de Negocio 58
2.1.4.5 Proceso de Negocio 58
2.1.4.6 Producto 59
2.1.4.7 Comportamiento de Aplicación 59
2.1.4.8 Cooperación Aplicación 60
2.1.4.9 Estructura de Aplicación 60
2.1.4.10 Infraestructura 61
2.1.4.11 Mapa General 61
2.1.5. Definición de Arquitectura 62
2.1.6. Review 66
2.2. DISEÑO DE BASE DE DATOS Y CLASES DE APP WEB Y API (SPRINT 2) 66
2.2.1. Modelo Entidad Relación 66
2.2.2. Definición De Clases Para Manejo De Base De Datos (DAO) 67
2.2.3. Definición De Clases Del BackEnd 69
2.2.4. Review 70
2.3. DISEÑO DE CLASES APP Y DISEÑO DE GUI (SPRINT 3) 70
2.4. COMPONENTES Y PROCEDIMIENTOS APLICACIÓN WEB (SPRINT 4)76
2.5. COMPONENTES Y PROCEDIMIENTOS SERVICIO WEB (SPRINT 5) 78
2.6. COMUNICACIÓN APP - SERVICIO WEB (SPRINT 6) 78
2.6.1 Definición de arquitectura de comunicación 79
2.6.2 Review 81
2.7. IMPLEMENTACIÓN PLUGIN IBEACON (SPRINT 7) 81
2.7.1 REVIEW 83
2.8 EMPALME CAPAS VISTA Y CONTROLADOR EN EL APP (SPRINT 8) 83
2.8.1 Review 85
2.9. MANEJO DE LOCAL STORAGE EN MÓVIL (SPRINT 9) 85
2.9.1 Review 86
2.10. PRIMERA VERSIÓN DE USUARIO WEB Y ANDROID (SPRINT 10) 87
2.10.1 Versión aplicativo web 87
2.10.2 Versión aplicación móvil 90
2.10.3 Review 93
2.11. LEVANTAMIENTO DE DATOS PARA CARGA A PRODUCCIÓN (SPRINT 10) 94
2.11.1 LECTURA DE PDF PARA CARGA DE HORARIOS 94
2.11.2 Review 95
4
ANÁLISIS DE RESULTADOS 94
CONCLUSIONES 97
RECOMENDACIONES 98
BIBLIOGRAFÍA 99
INFOGRAFÍA 100
5
LISTA DE TABLAS
Tabla 1: Factibilidad Económica…………………………………...…………………..39
Tabla 2: Catálogo de actores…………………………………………………………...40
Tabla 3: Definición de requisitos……………………………………………………….42
Tabla 4: Caso de uso CU1……………………………………………………………...46
Tabla 5: Caso de uso CU2……………………………………………………………...47
Tabla 6: Caso de uso CU3……………………………………………………………...48
Tabla 7: Caso de uso CU4……………………………………………………………..49
Tabla 8: Caso de uso CU5……………………………………………………………...50
Tabla 9: Caso de uso CU6……………………………………………………………...51
Tabla 10: Caso de uso CU7…………………………………………………………….52
6
LISTA DE FIGURAS
Diagrama Scrum Agile………………………………..………………..………..………42
Caso de uso usuario anónimo………………………………….……………...……….49
Caso de uso usuario profesor………………………………………….……….….…..50
Caso de uso usuario administrador…………………………………………………....50
Vista introductoria…………………..…………………………………………………....58
Vista de organización ……………..…………………………………………………....60
Cooperación de Actores …………..…………………………………………………....61
Funciones del negocio …..………..…………………………………………………....61
Proceso de negocio ...……………..…………………………………………………....62
Vista de Producto ……………..…………………………………………………..........62
Comportamiento de aplicación…...…………………………………………………....63
Cooperación de aplicación……......…………………………………………………....64
Estructura de aplicación…...…………………………………………………...............65
Infraestructura……………………....…………………………………………………....65
Mapa general…………………….....…………………………………………………....66
Lineamientos arquitectónicos…………………………………………………………..66
Subsistemas arquitectónicos….………………………………………………………..67
Definición de infraestructura 1 …………………......................................................67
Definición de infraestructura 2 …………………......................................................68
Definición de infraestructura 3 …………………......................................................68
Soporte de recursos internos . …………………......................................................69
Soporte de escalabilidad.......….….….….….….......................................................69
Diseño TopDown .....................…………………......................................................69
Burndown Chart Sprint 1 …………………………………………………………….....70
Modelo Entidad/Relación………………………………………………………………..70
Modelo de clases DAO……………………………………………….………...……….71
Modelo de clase DAO User………………………………….………...…………..…...72
Modelo de clases Back-End……………………………………….....…..…………....73
7
BurnDown Chart Sprint 2………………………………………………..……………...74
BackBone EmberJS…………………………………………………..……...…...…….75
Diagrama de arquitectura Ember……………….……..………….…….…..….……..75
Menú animado autodesplazamiento………………………………………..…………76
Diseño de Formularios……………………………………………………...…………..77
Diseño de panel de Salón……………………….………………………………....…..77
Diseño de vista de mensajes……………………………………………..…..………..78
Diseño de vista horario…………………………………….……………...……...…….78
Diseño de lista de mensajes…………………………………………….….…………..79
Burndown Chart sprint 3……………………………………………….…….………….80
Definición de procedimientos aplicación web…………………..…………………….81
Burndown Chart sprint 4………………………………………………..……………….81
Definición de procedimientos de backend api rest…………………………………...82
Arquitectura ember de comunicación REST………………………………………….83
Comunicación HTTP entre Emberjs y API REST de Symfony……..….…..……….84
Burndown Chart sprint 5………………………….…......…..….……….…….….…….85
Funcionamiento Beacon - Dispositivo Móvil…….….……….…..….….……………..86
Definición de métodos de interacción con las balizas Beacon…………………….86
Burndown Chart sprint 6………………………………………………………………...87
Flujo de datos entre capas. …………………..….……….………….…….…………..88
Burndown Chart sprint 7………………………………………………………………...89
Almacenamiento de los datos en el lado del cliente………...………………………90
Burndown chart sprint 8………………………..……….……….……..….…………....90
Formulario de inicio de sesión………………………………………………………….91
Listado de salones……………………………..………………………….…………….91
Vista de horario para el salón B2 Salon 103…………….…………………………...92
Formulario para edición/creación de usuarios……………….……………………….93
Listado de asignaturas cargadas……………………...……………………………….94
Formulario de edición de asignaturas………………………………….…..………….94
Icono del app tras ser instalada en un teléfono………………………..……………..95
8
pantalla de reconocimiento de salón……………………...…………………………...96
Pantalla al consultar horario de un salón……………………………………………...97
Listado de mensajes de un docente……………………………………...……………98
Burndown chart sprint 10……………………………………………………….….……98
Enlace disponible en el sistema de gestión académica…………………….….……99
Burndown Chart sprint 11……………………………………………………….…..100
9
GLOSARIO
ADMINISTRADOR: Persona encargada de gestionar el backoffice del sistema, es
decir, la aplicación web donde se gestiona la información que alimenta la
aplicación móvil.
APLICACIÓN WEB: Conjunto de instrucciones lógicas codificadas en un lenguaje
apto para ser ejecutado en un navegador web a través de internet.
APLICACIÓN MÓVIL: Es una aplicación informática diseñada para ser ejecutada
en teléfonos inteligentes, tabletas y otros dispositivos móviles. Esta app permite al
usuario efectuar una tarea concreta de cualquier tipo.
BASE DE DATOS: Colección de datos organizada de tal modo que el ordenador
pueda acceder rápidamente a ella. Una base de datos relacional es aquella en la
que las conexiones entre los distintos elementos que forman la base de datos
están almacenadas explícitamente con el fin de ayudar a la manipulación y el
acceso a éstos.
BEACON: Dispositivo emisor de Bluetooth de bajo consumo, creado para
aplicaciones de localización precisa con el fin de proporcionar información
asociada al lugar donde se encuentra ubicado.
ESTUDIANTE: Persona que usa la aplicación móvil sin tener ninguna credencial
de acceso al backoffice ni al app.
FRAMEWORK: 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
10
interpretado, entre otras herramientas, para así ayudar a desarrollar y unir los
diferentes componentes de un proyecto.
HORARIO: Conjunto de actividades (clases) que se llevan a cabo con una
periodicidad y duración definida, asociada a una ubicación (salón)
MENSAJE: Corta comunicación dejada por un docente asociada a un salón,
programada para ser visible en una fecha y hora determinada, con una duración
limitada y de mínimo una hora.
11
RESUMEN
En el siguiente documento, se contextualiza la construcción de un sistema
compuesto por dos productos, una aplicación móvil y una aplicación web que
tienen como finalidad apoyar los procesos de difusión de información dentro de los
espacios del campus de la facultad tecnológica usando como principal recurso
tecnológico dispositivos beacon, planificada bajo la metodología de desarrollo ágil
basada en scrum, construída integrando diferentes frameworks, en el backend
Symfony, framework para PHP, en frontend Emberjs como alternativa para generar
aplicaciones móviles multiplataforma, y Bootstrap como framework de diseño para
todas las vistas a usuario.
En el primer capítulo, aparece la planificación del sistem, se desarrollan las
actividades de planteamiento del problema, objetivos, alcances y limitaciones,
justificación, marco de referencia, entre otras para hacernos entender ante el
lector sobre el porqué de la solución tecnológica elegida y de las herramientas
para el desarrollo de la misma.
El segundo capítulo se plasma la ejecución del desarrollo del proyecto, es decir el
análisis completo del problema y la solución que se va a dar, entendiendo en un
contexto global las reglas del negocio, el alcance dentro de la universidad como
organización, pudiendo así identificar los requisitos, actores, estructura de la
información y la interacción de todos estos para lograr un diseño adecuado de
clases, de interfaces, de objetos y de vistas sobre el producto sobre el que
interactúan los interesados del sistema. Se pone en evidencia el trabajo mediante
metodología ágil, dejando sprint a sprint pruebas del cumplimiento de los objetivos
al resolver las historias.
12
ABSTRACT
In the following document, the construction of a system composed of two products,
a mobile application and a web application that aims to support the processes of
information dissemination within the campus spaces of the technological faculty
using as the main technological resource is contextualized. beacon devices,
planned under the agile development methodology based on scrum, built
integrating different frameworks, in the Symfony backend, framework for PHP,
frontend Emberjs as an alternative to generate multiplatform mobile applications,
and Bootstrap as a design framework for all views to user.
In the first chapter, the planning of the system appears, the problem-solving
activities are developed, objectives, scope and limitations, justification, reference
framework, among others to make us understand before the reader about the
reason for the chosen technological solution and the tools for the development of it.
The second chapter is the execution of the development of the project, that is to
say the complete analysis of the problem and the solution that is going to be given,
understanding in a global context the rules of the business, the scope within the
university as an organization, being able to identify the requirements, actors,
structure of the information and the interaction of all these to achieve an adequate
design of classes, interfaces, objects and views on the product on which the
stakeholders of the system interact. The work is shown through agile methodology,
leaving sprint to sprint proof of compliance with the objectives when solving the
stories.
13
INTRODUCCIÓN
La ingeniería es definida como el conjunto de conocimientos científicos y
tecnológicos para la innovación, invención, desarrollo y mejora de técnicas y
herramientas para satisfacer las necesidades y resolver los problemas de las
empresas y la sociedad, por esto se aborda en este proyecto uno de los
problemas más comunes pero poco visibles dentro de la Universidad Distrital,
(para el caso de estudio en la facultad tecnológica) que es el desconocimiento de
las actividades que se llevan a cabo en los espacios de ésta, una gran parte de los
estudiantes desconoce los horarios, no ubica con facilidad algunos salones o
debido a la logística de distribución de espacios los horarios originales se
modifican a lo largo del semestre, o los profesores deciden a última hora
desplazarse a otras ubicaciones para efectuar las labores académicas. Por esto
surge la idea de aplicar la tecnología bluetooth con un dispositivo que está
teniendo mucho éxito en mercadeo y publicidad, el Beacon. Este pequeño aparato
permite proporcionar información a las personas a través de sus smartphones,
basada en la ubicación exacta dada por el reconocimiento del beacon.
A lo largo del documento se muestra el desarrollo de la solución, inicia con la
planificación de los sistemas que están involucrados, pensando en los procesos
que afecta directa o indirectamente, abstrayendo la solución a niveles superiores
del negocio para reconocer todos los elementos que interactúan y contemplarlos
en cada paso del desarrollo, para plasmar todo este análisis se usa ArchiMate
como herramienta de apoyo para la visualización de los procesos del negocio y
flujos de información, y para el control del desarrollo a nivel técnico se usa la
metodología ágil, donde sprint a sprint se generan objetivos creados a partir de
historias que llevan a la creación de una característica del producto final y se
evalúa el rendimiento de trabajo con gráficas de quema de puntos de historias
(Burndown chart).
14
1. PLANIFICACIÓN
1.1 TÍTULO
Aplicación móvil con tecnología Beacon para el apoyo de la difusión de
información de los espacios del campus universitario.
1.2 TEMA
Aplicaciones web, Aplicaciones móviles, bases de datos, programación web,
Beacons.
1.3 PLANTEAMIENTO DEL PROBLEMA
1.3.1 Descripción
La Universidad Distrital Francisco José de Caldas en cada una de sus cinco
facultades, dispone de diversos espacios para la ejecución de las actividades
pertinentes a su naturaleza, dichos espacios son asignados semestralmente
buscando generar disponibilidad y organización para el correcto uso de los
mismos, en la facultad tecnológica está la programación desde las asignaturas en
los salones hasta los horarios de laboratorios para prácticas, edificios
administrativos, sala de profesores, áreas comunes y con programación
establecida como los entrenamientos en el coliseo, en el gimnasio, la
disponibilidad de la cancha de microfútbol o la sintética, la cancha de voleibol, la
franja del apoyo alimentario, la agenda para citas médicas en bienestar
institucional, etc. Actualmente esta información se encuentra en el sitio web de la
facultad y en el sistema de gestión académica (antes Cóndor), pero no siempre
estos recursos están disponibles y en muchas ocasiones la información se
encuentra desactualizada debido a cambios extraordinarios o a ineficiencia en las
labores de los responsables de estos portales, hay una permanente dependencia
de los administradores de los sitios lo que dificulta tener la información necesaria
en tiempo real y de forma certera. Adicionalmente, los demás mecanismos de
15
difusión actuales en los espacios de la universidad son los clásicos que se limitan
a condiciones: que haya Wi-Fi, que haya personal presente para brindar
información o que haya algún tipo de material impreso informativo publicado en
paredes o tableros.
Es sabido que Colombia es el tercer mayor consumidor de tecnología móvil en
Latinoamérica, de los 53’583.664 alrededor de la mitad son dispositivos
inteligentes1 y de estos un 80% pertenecen a población adolescente y adulto
joven, esto permite deducir que la mayoría de los estudiantes que ingresan a la
universidad cuentan con esta tecnología de bolsillo (SmartPhone) todos dotados
de tecnología bluetooth.
1.3.2 Planteamiento del problema
¿Cómo brindar información oportuna y certera sobre los espacios dentro del
campus universitario a la comunidad universitaria?¿Cómo obtener la información
en el menor tiempo posible para ser transmitida a los usuarios? ¿Cómo
aprovechar las tecnologías cotidianas para resolver los problemas de información?
¿Cómo generar un servicio altamente disponible y de fácil uso? ¿Cómo desarrollar
una solución de bajo costo y de fácil implementación?
1.4 OBJETIVOS
1.4.1 Objetivo general
Desarrollar una aplicación móvil multiplataforma dirigida a la comunidad de la
Facultad Tecnológica de la Universidad Distrital Francisco José de Caldas cuyo
propósito es interactuar con los dispositivos Beacon instalados en diferentes
puntos del campus para proporcionar información de las actividades que se llevan
a cabo en los espacios de la facultad.
1 (Portal web revista Semana, 2015 ) Colombia, el país de los ‘smartphones’, recuperado de http://www.semana.com/tecnologia/articulo/colombia-el-pais-de- los-smartphones/432806- 3
16
1.4.2 Objetivos específicos
- Implementar Beacons como solución tecnológica para la transmisión de
información del día a día de la facultad a los estudiantes.
- Usar bluetooth como tecnología para realizar la comunicación entre los
dispositivos beacon y los teléfonos móviles de los usuarios.
- Crear una aplicación móvil que aproveche la tecnología inalámbrica bluetooth y
los dispositivos beacons para consultar y exponer información relevante para el
usuario en función de su ubicación en el espacio cubierto por dichos dispositivos.
- Desarrollar un módulo de administración del contenido que estará disponible.
- Permitir el registro de usuarios para la autorización dentro de la aplicación móvil.
- Publicar un link para la descarga gratuita del apk que instala la aplicación.
1.5 ALCANCES Y LIMITACIONES.
1.5.1. Alcances
El flujo de uso de la aplicación móvil comprende un inicio sesión en el
smartphone y a medida que inicia el recorrido por el campus, se pueden recibir
notificaciones push de los eventos en curso, y al usar la aplicación, se obtiene
información de los horarios en los lugares más cercanos.
Se pretenden desarrollar tres subsistemas: Un servicio web que se encargará de
comunicar la base de datos con las aplicaciones móvil y web, Una aplicación
móvil capaz de funcionar en plataformas Android y iOS y una aplicación web para
la administración de los contenidos.
17
También se incluye la integración de la aplicación móvil con los dispositivos
beacon, para lograr la ubicación de la persona en el campus y así mostrar la
información pertinente a ese lugar.
El proyecto finaliza con la publicación de un apk en un enlace público fuera de
los dominios de la universidad, cuya disponibilidad estará limitada a los servicios
gratuitos ofrecidos por Google.
1.5.2. Limitaciones
Las funcionalidades de esta solución están limitadas a brindar información al
usuario con muy poca interacción, no es un route tracking ni un GPS, tampoco
un mapa ni un organizador personalizado. La aplicación tampoco modifica o crea
horarios y/o eventos, es independiente de las plataformas de la Universidad. No
será tampoco una fuente de difusión de noticias o comunicados provenientes de
la Universidad, ni servirá para comprobar la presencia de personas en el campus
universitario ni para reemplazar la fuentes oficiales de información.
1.6. JUSTIFICACIÓN
Llegar a la universidad, es un paso importante para cualquier persona en su vida,
y esto incluye pasar por un cambio en su estilo de vida, uno de los aspectos es
conocer el campus universitario y aprender a moverse en él, para lo cual es
importante encontrar información real y oportuna de los espacios disponibles.
Los recursos a los que acceden los estudiantes para obtener información sobre
los espacios de la universidad provienen de los sitios oficiales de difusión como
la página de la universidad, el sitio web de la facultad y del proyecto curricular,
por otro lado en las propias instalaciones de la facultad hay carteleras
informativas donde se adhieren papeles con la información de interés. Toda esta
información es difundida por personas designadas para tal fin, generalmente
estudiantes monitores cuya función es mantener la disponibilidad del recurso y
18
actualizada la información a mostrar, desafortunadamente, no se cumplen a
cabalidad estas funciones, ya sea por factores externos como accesos a los
sitios administrativos, permisos especiales o aprobación para la publicación de
información o por omisión de algunas de las responsabilidades del cargo. Es
común encontrar en los sitios de las diferentes dependencias errores de página
no encontrada, recurso no disponible o publicaciones de años atrás; Del mismo
modo en las carteleras ubicadas en el campus, se pueden encontrar afiches o
anuncios con fechas del pasado, y en los salones de clase las hojas informativas
con los horarios se deterioran y desaparecen en las primeras semanas tras
iniciar un semestre.
Este proyecto tiene como finalidad apoyar la difusión de información confiable
relacionada con las actividades que se llevan a cabo en cada área o espacio
físico de la universidad, por el momento en la facultad Tecnológica.
1.7 MARCO DE REFERENCIA
1.7.1. Marco histórico
OU LIBRARIES NAVAPP. 2[1]
Autor: Universidad de Oklahoma
Qué hace:
Implementó beacons en en las bibliotecas, exposiciones y campus, La app de la
universidad emplea faros bluetooth para alimentar la navegación interior, enviar
notificaciones push en función de la proximidad del lugar buscado, y aporta otros
servicios de compromiso móviles basados en la localización. La aplicación está
organizada en función del tipo de usuario (estudiantes, profesores o visitantes),
de tal manera que éstos únicamente encuentran información relevante para ellos.
2(Using Beacons, 2015) Nadie se pierde ahora en la Universidad de Oklahoma, recuperado de http://www.usingbeacons.com/los-estudiantes-profesores-y-visitantes-de-la-universidad-de-oklahoma-ya-no-se-pierden/
19
Además, una vez dentro de los edificios, la aplicación ayuda a los usuarios a
localizar recursos, galería de exposiciones, ascensores e incluso baños.
En qué se diferencia el proyecto referenciado, con el planteado:
La implementación del app desarrollada por la universidad de Oklahoma funciona
únicamente en la biblioteca, posee funcionalidades que la solución planteada no
incluye, como: navegación GPS interior para la Biblioteca Bizzell Memorial y
direcciones a Sucursales y Colecciones Especiales, seguimiento de rutas y
mapas guiados, asistencia para personas con discapacidad y situaciones de
emergencia, múltiples idiomas.
Las herramientas que se usarán, difieren debido a los lenguajes de programación
usados, el sistema de información planteado, requiere herramientas orientadas al
desarrollo web, al contrario de las del proyecto referenciado, que es una
aplicación nativa.
1.7.2 Marco Teórico.
Aplicación Móvil3:
Es un programa que se instala en un dispositivo móvil -ya sea teléfono o tableta-
y que se puede integrar a las características del equipo, como su cámara o
sistema de posicionamiento global (GPS). Además se puede actualizar para
añadirle nuevas características con el paso del tiempo.
Las aplicaciones proveen acceso instantáneo a un contenido sin tener que
buscarlo en Internet y, una vez instaladas, generalmente se puede acceder a
ellas sin necesidad de una conexión a la Red.
Historia de las aplicaciones móviles:
3 (Portal web La Nacion, 2013 ) Qué son y para qué sirven las "apps", recuperado de http://www.lanacion.com.ar/1365035-que-son-y-para-que-sirven-las-apps
20
Las primeras aplicaciones fueron desarrolladas a finales de los años 90', estas
eran las que conocemos como agenda, arcade games, contactos, ringtones y en
algunos casos email; las cuales cumplían con funciones muy elementales y eran
muy simples. La evolución de las aplicaciones se dio rápidamente gracias a las
innovaciones de la tecnología WAP (Wireless Application Protocol) y en la
transmisión de datos (EDGE), esto vino acompañado de un desarrollo muy fuerte
de los celulares y de las aplicaciones ya existentes; pero las restricciones de los
fabricantes que hacían sus propios sistemas operativos conllevó a que los
desarrolladores externos no ayudarán a la expansión y evolución de las
aplicaciones y esto no hacía más que estancar la industria. Era una época en la
que se prestaba más atención al hardware y a los “features”, la evolución de la
industria móvil era desordenada y no tenía un rumbo fijo. Todo cambia con la
aparición en el año 2007 del Iphone de Apple que plantea una nueva estrategia,
cambiando las reglas de juego, ofreciendo su teléfono como una plataforma para
correr aplicaciones que dejaban a desarrolladores y compañías externas
ofrecerlas en su App Store.
Desde el momento en que Apple y Android aparecen en el mercado el resto de
empresas empieza a desarrollar nuevas tecnologías y lanza Smartphones cada
vez más innovadores y cada vez más potentes. Nokia junto a Sony Ericsson y
otras empresas aparecen con symbian OS, están también BlackBerry, Brew,
Samsung, palm OS. Pero eso no diferencia a los Smartphone de los teléfonos
celulares de los años 90’ pero, las aplicaciones y la disposición de estas quienes
generaron esa diferencia.
Aplicación web:
¿Qué es una aplicación web?4
4 (Portal Universidad de Murcia, 2012) Historia del desarrollo de aplicaciones Web, Recuperado de: http://www.um.es/docencia/barzana/DIVULGACION/INFORMATICA/Historia-desarrollo-aplicaciones-web.html
21
Desde la perspectiva de un usuario, puede ser difícil percibir la diferencia entre
un sitio web y una aplicación web. Según el Diccionario Oxford en línea, nos
enteramos que una aplicación es "un programa o conjunto de programas para
ayudar al usuario de un ordenador para procesar una tarea específica". Una
aplicación web es básicamente una manera de facilitar el logro de una tarea
específica en la Web, a diferencia de un sitio web estático que es más bien una
herramienta, no menos importante, para la comunicación. El término más
decisivo de esta definición es "tarea específica".
Historia de Aplicaciones Web
Las aplicaciones Web interactivas poco a poco han revolucionado la forma de
utilizar internet, aumentando el contenido de las páginas con texto estático (texto
que no evoluciona, sino que permanecen como es) a un contenido rico e
interactivo, por lo tanto escalable.
El concepto de la aplicación web no es nuevo. De hecho, uno de los primeros
lenguajes de programación para el desarrollo de aplicaciones web es el "Perl".
Fue inventado por Larry Wall en 1987 antes de que internet se convirtiera en
accesible para el público en general. Pero fue en 1995 cuando el programador
Rasmus Lerdorf puso a disposición el lenguaje PHP con lo que todo el desarrollo
de aplicaciones web realmente despegó. Hoy en día, incluso muchas de estas
aplicaciones se han desarrollado en PHP, como Google, Facebook y Wikipedia.
Unos meses más tarde, Netscape, el navegador web más antiguo y popular,
anunció una nueva tecnología, JavaScript, lo que permite a los programadores
cambiar de forma dinámica el contenido de una página Web que había sido hasta
el momento texto estático. Esta tecnología permite un nuevo enfoque para el
desarrollo de aplicaciones Web, que eran, y aún hoy, mucho más interactivas
para los usuarios. Por ejemplo, la instantánea de Google, que muestra los
resultados de búsqueda en un momento en que la palabra se escribe, hace un
uso intensivo de JavaScript. Las actualizaciones del sitio web de productos de
Microsoft también utiliza esta tecnología.
22
Al año siguiente, en 1996, dos desarrolladores, Sabeer Bhatia y Jack Smith
lanzaron Hotmail (no fue un desarrollo original de Microsoft), un servicio de
correo en línea que permite (por primera vez) para el público en general para
acceder y consultar el correo electrónico siempre que sea los usuarios pudieran
estar en cualquier sitio lejos de su ordenador.
Luego vino la famosa plataforma Flash utiliza para añadir contenido interactivo
para sitios Web. Flash hizo su aparición en 1997, conocido como Shockwave
Flash. Más tarde, después de ser adquirido por Macromedia y Adobe, Flash se
convirtió en una plataforma para desarrollar aplicaciones web interactivas.
El año siguiente marcó un punto de inflexión para los medios de comunicación en
línea. De hecho, el 17 de enero de 1998, el sitio web The Drudge Report anunció
por primera vez un informe de noticias antes de que se difundiera en los medios
de televisión y la prensa tradicional. Se informó el escándalo Clinton/Lewinsky.
Este evento fue el detonante del periodismo en línea tal como lo conocemos hoy
en día. Antes de esa fecha, internet nunca había sido considerado uno de los
medios de comunicación más importantes.
El mismo año, la compañía Google desarrolló su primer motor de búsqueda en
línea que, por su nueva forma de indexar páginas web, facilita enormemente la
búsqueda de información en internet. Google sigue innovando y se convirtió en
uno de los más prolíficos en cuanto a las aplicaciones Web, con indicación del
muy popular Google Maps, Google Docs, Gmail y en aumento.
A principios de 2001, poco después de la explosión de la burbuja de internet,
Wikipedia se lanzó como un subproyecto de Nupedia, una enciclopedia en línea
tradicional. Para desarrollar su plataforma, se utiliza un tipo de Wikipedia de la
aplicación web denominada "wiki", que permite a cualquier usuario agregar
contenido. Las contribuciones no se hicieron esperar, y al final del primer año de
funcionamiento, Wikipedia ya contaba con 20000 páginas en 18 idiomas. Hoy en
día, casi 21 millones de artículos en 285 idiomas conforman el sexto sitio más
visitado en el mundo, siendo el primero Google.
23
En 2003, MySpace fue fundado y más tarde, de 2005 a 2008, el sitio se convirtió
en el medio de comunicación social más visitado. MySpace fue una plataforma
de lanzamiento para otras aplicaciones web conocidos como YouTube, y
Slide.com! RockYou, todos los cuales comenzaron como módulos adicionales
para los usuarios de MySpace antes de convertirse en sus propios sitios web en
su propio derecho.
Entonces, tres acontecimientos muy importantes ocurrieron en 2004. En primer
lugar, en una conferencia de la Web 2.0 a cargo de John Battelle y Tim O'Reilly,
el concepto de "web como plataforma" fue mencionado por primera vez. Esta
innovación allanó el camino para futuras aplicaciones web, es decir, un software
que aprovecha las ventajas de la conexión a internet y que se desvían del uso
tradicional del escritorio. En segundo lugar, el sitio interactivo de Digg se puso en
marcha. Propuso una forma innovadora de crear y encontrar contenido en
internet mediante la promoción de noticias y enlaces democráticamente votado
por los usuarios. Y, por último, el tercer gran evento, pero no menos importante,
fue el lanzamiento de Facebook, que estaba entonces en su infancia, abierto sólo
a los estudiantes. Con un millón de suscriptores a finales de 2004, Facebook se
ha convertido en el medio de comunicación social más utilizado con más de 900
millones de usuarios. Este es el segundo sitio más visitado en el planeta y tiene
la mayor cantidad de fotos compartidas por los usuarios con un total de casi
500000 millones de fotos subidas a la plataforma. Facebook ha revolucionado la
miríada de aspectos relacionados con la vida social la comercialización, y la
política en la Web.
En 2005, YouTube fue lanzado oficialmente, permite a los usuarios compartir
vídeos en línea. De simple sitio para compartir vídeos en internet a una
plataforma madura que se conoce hoy en día, YouTube ahora ofrece cerca de
4000 millones de videos al día, además de un servicio de alquiler de películas en
línea, y, finalmente, episodios de emisión para las empresas o las películas de
MGM, LionsGate Entertainment y CBS.
24
Twitter, por su parte, se puso en marcha en 2006. Con los años, la popularidad
de Twitter ha aumentado de 1,6 millones de 'tweets' en 2007 con la
impresionante cifra de 340 millones de dólares por día en marzo de 2012
(equivalente a casi 4000 'tweets' por segundo).
El año 2007 estuvo marcado por la aparición del iPhone, que fue sin duda
responsable de la llegada de la nueva moda para las plataformas móviles y
aplicaciones web. Ahora son accesibles por teléfono inteligente.
A principios de 2011, la empresa Kickstarter, que facilita la financiación de
proyectos en línea de forma participativa, ha llegado a los 4000 proyectos con
más de 30 millones de dólares en donaciones. Por otra parte, casi el 44% de los
proyectos se han iniciado con éxito desde esta plataforma.5
Bases de Datos
Colección o depósito de datos integrados con redundancia controlada y con una
estructura que refleje las interrelaciones y restricciones existentes en el mundo
real.
Los datos, que han de ser compartidos por diferentes usuarios y aplicaciones,
deben mantenerse independiente de éstas, y su definición y descripción, únicas
para cada tipo de datos, han de estar almacenadas junto con los mismos.
Los procedimientos de actualización y recuperación comunes y bien
determinados, habrán de ser capaces de conservar la integridad y
confidencialidad del conjunto de datos.
Evolución histórica
● Partieron de los sistemas basados en archivos, empezando a desarrollarse
para el proyecto lunar Apollo en la década de los 60, desarrollándose GUAM
(GenerallizedUpdateAccesMethod)
● A mediado de los 60 apareció IDS (Integrated Data Store) de General Electric y
IMS (Integrated Management System) de IBM
5Rafael Menéndez-Barzanallana Asensio. Departamento Informática y Sistemas. Universidad de Murcia, España, 2010.
25
● En 1967 se creó la organización DBTG (DatabaseTask Group) para la
especificación de un estándar dando origen a CODASYL o DBTG
● Codd de IBM definió el modelo de datos relacional abriéndose el campo de las
BD comerciales.
● Proyecto system R de IBM que condujo a desarrollar SQL e implementación de
productos como DB2, SQL/DB y Oracle
● Todo ello dio paso a los SGBD relacionales.
● Problemas de capacidad de modelado y falta de expresividad
● Finales de los 60’s: sistemas orientados a los datos
● 70’s Modelo relacional de Codd
● 80’s Orientación a Objetos
● 90’s Bases de Datos Objeto relacionales. 6[2]
Bases de datos MySql
MySQL es la base de datos de código abierto más popular del mundo que
permite la entrega de forma rentable de aplicaciones de comercio electrónico, de
procesamiento de transacciones en línea y de bases de datos integradas que
son fiables, de alto rendimiento y escalables. Constituye una base de datos
integrada de transacciones seguras que es compatible con ACID y que dispone
de capacidades completas de confirmación, reversión, recuperación tras bloqueo
y bloqueo de nivel por filas. MySQL ofrece facilidad de uso, escalabilidad y alto
rendimiento, al igual que un conjunto completo de controladores de bases de
datos y herramientas visuales que ayudan a los programadores y a los
administradores de bases de datos a compilar y gestionar sus aplicaciones
MySQL. 7[3]
6(Escuela Técnica Superior de Ingeniería Informática, s.f.) Origen y evolución de las BD, Recuperado de http://www.lsi.us.es/docencia/get.php?id=53967(Souhrada K, 2010) Bases de datos MySql, Recuperado de http://www.mysql.com/products/enterprise/mysql-datasheet.es.pdf
26
Inicialmente, MySQL carecía de algunos elementos esenciales en las bases de
datos relacionales, tales como integridad referencial y transacciones. A pesar de
esto, atrajo a los desarrolladores de páginas web con contenido dinámico, debido
a su simplicidad, de tal manera que los elementos faltantes fueron
complementados por la vía de las aplicaciones que la utilizan. Poco a poco estos
elementos faltantes, están siendo incorporados tanto por desarrolladores
internos, como por desarrolladores de software libre. En las últimas versiones se
pueden destacar las siguientes características principales:
● El principal objetivo de MySQL es velocidad y robustez.
● Soporta gran cantidad de tipos de datos para las columnas.
● Gran portabilidad entre sistemas, puede trabajar en distintas plataformas y
sistemas operativos.
● Cada base de datos cuenta con 3 archivos: Uno de estructura, uno de datos y
uno de índice y soporta hasta 32 índices por tabla.
● Aprovecha la potencia de sistemas multiproceso, gracias a su implementación
multihilo.
● Flexible sistema de contraseñas (passwords) y gestión de usuarios, con un
muy buen nivel de seguridad en los datos.
● El servidor soporta mensajes de error en distintas lenguas8[4]
PHP.
PHP tal y como se conoce hoy en día es en realidad el sucesor de un producto
llamado PHP/FI. Creado en 1994 por Rasmus Lerdorf, la primera encarnación de
PHP era un conjunto simple de ficheros binarios Common Gateway Interface
(CGI) escritos en el lenguaje de programación C. Originalmente utilizado para
rastrear visitas de su currículum online, llamó al conjunto de scripts "Personal
Home Page Tools", más frecuentemente referenciado como "PHP Tools". Con el
8(Universidad Autónoma del Estado de México, s.f) ¿Qué es MySql?, Recuperado de http://www.gridmorelos.uaem.mx/~mcruz//cursos/miic/MySQL.pdf
27
paso del tiempo se quiso más funcionalidad, y Rasmus reescribió PHP Tools,
produciendo una implementación más grande y rica. Este nuevo modelo fue
capaz de interaccionar con bases de datos, y mucho más, proporcionando un
entorno de trabajo sobre cuyos usuarios podían desarrollar aplicaciones web
dinámicas sencillas tales como libros de visitas. En junio de 1995, Rasmus »
publicó el código fuente de PHP Tools, lo que permitió a los desarrolladores
usarlo como considerasen apropiado. Esto también permitió -y animó- a los
usuarios a proporcionar soluciones a los errores del código, y generalmente a
mejorarlo.
En septiembre de ese mismo año, Rasmus amplió PHP y -por un corto periodo
de tiempo- abandonó el nombre de PHP. Ahora, refiriéndose a las herramientas
como FI (abreviatura de "FormsInterpreter"), la nueva implementación incluía
algunas de las funciones básicas de PHP tal y como la conocemos hoy. Tenía
variables como las de Perl, interpretación automática de variables de formulario y
sintaxis incrustada HTML. La sintaxis por sí misma era similar a la de Perl,
aunque mucho más limitada, simple y algo inconsistente. De hecho, para
embeber el código en un fichero HTML, los desarrolladores tenían que usar
comentarios de HTML. Aunque este método no era completamente bien recibido,
FI continuó gozando de expansión y aceptación como una herramienta CGI ---
pero todavía no completamente como lenguaje. Sin embargo, esto comenzó a
cambiar al mes siguiente; en octubre de 1995 Rasmus publicó una versión nueva
del código. Recordando el nombre PHP, ahora era llamado (resumidamente)
"Personal Homepage Construction Kit," y fue la primera versión que presumía de
ser, en aquel momento, considerada como una interfaz de scripts avanzada. El
lenguaje fue deliberadamente diseñado para asemejarse a C en estructura,
haciéndolo una adopción sencilla para desarrolladores familiarizados con C, Perl,
y lenguajes similares. Habiendo sido así bastante limitado a sistemas UNIX y
compatibles con POSIX, el potencial para una implementación de Windows NT
estaba siendo explorada.
28
El código fue completamente rehecho de nuevo, y en abril de 1996, combinando
los nombres de versiones anteriores, Rasmus introdujo PHP/FI. Esta
implementación de segunda generación comenzó realmente a desarrollar PHP
desde un conjunto de herramientas dentro de un lenguaje de programación de
derecho propio. Incluía soporte interno para DBM, mSQL, y bases de datos
Postgres95, cookies, soporte para funciones definidas por el usuario, y mucho
más. Ese mes de junio, PHP/FI brindó una versión 2.0. Sin embargo, un
interesante hecho sobre esto, es que sólo había una única versión completa de
PHP 2.0. Cuando finalmente pasó de la versión beta en noviembre de 1997, el
motor de análisis subyacente ya estaba siendo reescrito por completo.
Aunque vivió una corta vida de desarrollo, continuó gozando de un crecimiento
de popularidad en el aún joven mundo del desarrollo. En 1997 y 1998, PHP/FI
tenía un culto de varios miles de usuarios en todo el mundo. Una encuesta de
Netcraft en mayo de 1998 indicó que cerca de 60,000 dominios reportaron que
tenían cabeceras que contenían "PHP", indicando en efecto que el servidor host
lo tenía instalado. Este número se correspondía con aproximadamente el 1% de
todos los dominios de Internet del momento. A pesar de estas impresionantes
cifras, la maduración de PHP/FI estaba condenada por limitaciones; mientras
había varios contribuidores menores, aún era desarrollado principalmente por un
individuo.
Según crecía PHP, empezó a ser reconocido como una popular plataforma de
desarrollo web. Una de las más interesantes formas de ver esta tendencia fue
observando los libros de PHP que han ido publicando a lo largo de los años.
Por lo que nosotros sabemos, el primer libro dedicado a PHP fue 'PHP - (PHP -
Creando aplicaciones interactivas en internet) - un libro checo publicado en 1999,
cuyo autor fue Jirka Kosek. Al mes siguiente le siguió un libro alemán cuyos
autores fueron Egon Schmid, Christian Cartus y Richard Blume. El primer libro en
inglés sobre PHP se publicó poco después, y fue 'Core PHP Programming' de
Leon Atkinson. Los dos libros cubrían PHP 3.0.
29
Mientras estos libros fueron los primeros de su tipo - fueron seguidos por un gran
número de libros de una multitud de autores y editores. ¡Existen más 400 libros
en inglés, 100 libros en alemán, y más de 50 libros en francés o español!
Además, se pueden encontrar libros sobre PHP en la mayoría de las demás
lenguas, incluyendo coreano, japonés y hebreo.
Evidentemente, este gran número de libros, escritos por diferentes autores,
publicados por muchos editores, y su disponibilidad en tantas lenguas - son un
fuerte testimonio del éxito mundial de PHP. 9[5]
Symfony Framework
Symfony es un conjunto de componentes de PHP, un marco de aplicaciones
Web, una filosofía y una comunidad, todos trabajando juntos en armonía.10
Symfony tiene como objetivo acelerar la creación y mantenimiento de
aplicaciones web y reemplazar las tareas de codificación repetitivas.Tiene una
sobrecarga de bajo rendimiento utilizada con una memoria caché de bytecode.
Symfony está dirigido a construir aplicaciones robustas en un contexto
empresarial, y tiene como objetivo dar a los desarrolladores control total sobre la
configuración: desde la estructura de directorios hasta las librerías externas, casi
todo puede personalizarse. Para que coincida con las directrices de desarrollo
empresarial, Symfony incluye herramientas adicionales para ayudar a los
desarrolladores a probar, depurar y documentar proyectos.
Symfony es patrocinado por SensioLabs, un desarrollador de software francés y
proveedor de servicios profesionales. El primer nombre fue Sensio Framework, y
todas las clases fueron prefijadas con sf. Posteriormente, cuando se decidió
lanzarlo como un framework de código abierto, la lluvia de ideas dio como
resultado el nombre symfony (que se renombró a Symfony a partir de la versión 2
9(PHP Group, s.f) Historia de php y Proyectos relacionados, Recuperado de http://www.php.net/manual/es/history.php.books.php
10 (SensioLabs, s.f) What is Symfony, Recuperado de https://symfony.com/what-is-symfony
30
y sucesivamente), el nombre que describe los prefijos de nombre de tema y
clase. [6]
Symfony es utilizado por el servicio Q&A de código abierto Askeet y muchas más
aplicaciones, incluyendo Delicious. En un momento se utilizó para 20 millones de
usuarios de Yahoo! Bookmarks. A partir de febrero de 2009, Dailymotion.com ha
portado parte de su código para usar Symfony, y continúa la transición. Symfony2
es utilizado por OpenSky, una plataforma social de compras, y el framework
Symfony también es utilizado por el eRepublik, un juego de navegador online
masivo multijugador, y por el framework de gestión de contenido eZ Publish en la
versión 5. Drupal 8, phpBB y una serie de otras aplicaciones de gran tamaño han
incorporado componentes de Symfony. Symfony2 también es utilizado por
Meetic, una de las mayores plataformas de citas en línea del mundo, en la
mayoría de sus sitios web para implementar su lógica de negocio en el backend.
Los componentes de Symfony también se utilizan en otros marcos de
aplicaciones web, incluyendo Laravel, que es otro framework fullstack, y Silex,
que es un microframework.
A partir del 12 de febrero de 2013, el gigantesco sitio web de juegos de video
wiki-base de datos GiantBomb.com se convirtió de Django a Symfony tras una
adquisición. El sitio web de Vogue París también se basa en el framework
Symfony 11
TWIG
Twig es un motor de plantilla para el lenguaje de programación PHP. Su sintaxis se
origina en las plantillas de Jinja y Django. Es un producto de código abierto con
licencia bajo licencia BSD y mantenido por Fabien Potencier. La versión inicial fue
creada por Armin Ronacher. Symfony2 framework PHP viene con un paquete de
soporte para Twig como su motor de plantilla por defecto.12[7]
Algunas de sus características son:
11 (SensioLabs, s.f) Projects Using Symfony, recuperado de http://symfony.com/projects12 (Sensiolabs, s.f) Twig For Template Design. Recuperado de https://twig.symfony.com/doc/templates.html
31
- Rápido: Twig compila las plantillas hasta el código PHP optimizado. La
sobrecarga en comparación con el código PHP normal se redujo al mínimo.- Seguro: Twig tiene un modo de sandbox para evaluar el código de plantilla
no confiable. Esto permite que Twig se utilice como un lenguaje de plantilla
para aplicaciones en las que los usuarios puedan modificar el diseño de la
plantilla.- Flexible: Twig es alimentado por un lexer y un parser flexibles. Esto permite
al desarrollador definir sus propias etiquetas y filtros personalizados y crear
su propia DSL.13
EMBERJS14
Ember.js es un framework web de JavaScript de código abierto, basado en el
patrón Model-view-viewmodel (MVVM). Permite a los desarrolladores crear
aplicaciones web escalables de una sola página mediante la incorporación de
modismos comunes y mejores prácticas en el framework.
Ember se usa en muchos sitios web populares, incluidos Discourse, Groupon,
LinkedIn, Vine, Live Nation, etc. Aunque se consideró principalmente un
framework para la web, también es posible crear aplicaciones de escritorio y
móviles en Ember. El ejemplo más notable de una aplicación de escritorio Ember
es Apple Music,una característica de la aplicación de escritorio de iTunes. [8]
Desde el principio, Ember se diseñó en torno a varias ideas clave:
Centrarse en aplicaciones web ambiciosas: Ember se propone proporcionar una
solución completa al problema de la aplicación del lado del cliente. Esto está en
contraste con muchos frameworks de JavaScript que comienzan brindando una
solución a la V en MVC (Model-View-Controller) e intentan crecer desde allí.
Más productivo fuera de la caja: Ember es un componente de un conjunto de
herramientas que trabajan juntas para proporcionar una pila de desarrollo
13 (Sensiolabs. s.f) Twig is a modern template engine for PHP. Recuperado de https://twig.symfony.com/14 (Creative Commons. 2016) Ember.js. Recuperado de https://en.wikipedia.org/wiki/Ember.js
32
completa. El objetivo de estas herramientas es hacer que el desarrollador sea
productivo de inmediato. Por ejemplo Ember CLI, proporciona una estructura de
aplicación estándar y una canalización de construcción. También tiene una
arquitectura conectable y más de 3500 complementos para mejorarlo y ampliarlo.
Estabilidad sin estancamiento: Esta es la idea de que la compatibilidad con
versiones anteriores es importante y se puede mantener sin dejar de innovar y
desarrollar el marco. Futuros estándares web de previsión: Ember ha sido uno de
los primeros en adoptar y pionero de muchos estándares en torno a JavaScript y
la web, incluidas las promesas, componentes web y la sintaxis ES6. Yehuda
Katz, uno de los cofundadores de Ember, es miembro de TC39, que es el comité
responsable de las versiones futuras del lenguaje JavaScript.
CSS3 (CASCADING STYLE SHEETS)15
Las hojas de estilos aparecieron poco después que el lenguaje de etiquetas
SGML, alrededor del año 1970. Desde la creación de SGML, se observó la
necesidad de definir un mecanismo que permitiera aplicar de forma consistente
diferentes estilos a los documentos electrónicos.
El gran impulso de los lenguajes de hojas de estilos se produjo con el boom de
Internet y el crecimiento exponencial del lenguaje HTML para la creación de
documentos electrónicos. La guerra de navegadores y la falta de un estándar
para la definición de los estilos dificultaban la creación de documentos con la
misma apariencia en diferentes navegadores.
El organismo W3C (World Wide Web Consortium), encargado de crear todos los
estándares relacionados con la web, propuso la creación de un lenguaje de hojas
de estilos específico para el lenguaje HTML y se presentaron nueve propuestas.
Las dos propuestas que se tuvieron en cuenta fueron la CHSS (Cascading HTML
Style Sheets) y la SSP (Stream-based Style SheetProposal).[9]
La propuesta CHSS fue realizada por HåkonWium Lie y SSP fue propuesto por
BertBos. Entre finales de 1994 y 1995 Lie y Bos se unieron para definir un nuevo
15 (Refsnes Data, 2015) CSS tutorial, recuperado de http://www.w3schools.com/css/
33
lenguaje que tomaba lo mejor de cada propuesta y lo llamaron CSS (Cascading
Style Sheets).
En 1995, el W3C decidió apostar por el desarrollo y estandarización de CSS y lo
añadió a su grupo de trabajo de HTML. A finales de 1996, el W3C publicó la
primera recomendación oficial, conocida como "CSS nivel 1".
A principios de 1997, el W3C decide separar los trabajos del grupo de HTML en
tres secciones: el grupo de trabajo de HTML, el grupo de trabajo de DOM y el
grupo de trabajo de CSS. El 12 de Mayo de 1998, el grupo de trabajo de CSS
publica su segunda recomendación oficial, conocida como "CSS nivel 2". La
versión de CSS que utilizan todos los navegadores de hoy en día es CSS 2.1,
una revisión de CSS 2 que aún se está elaborando (la última actualización es del
8 de septiembre de 2009). Al mismo tiempo, la siguiente recomendación de CSS,
conocida como "CSS nivel 3", continúa en desarrollo desde 1998 y hasta el
momento sólo se han publicado borradores.
La adopción de CSS por parte de los navegadores ha requerido un largo periodo
de tiempo. El mismo año que se publicó CSS 1, Microsoft lanzaba su navegador
Internet Explorer 3.0, que disponía de un soporte bastante reducido de CSS. El
primer navegador con soporte completo de CSS 1 fue la versión para Mac de
Internet Explorer 5, que se publicó en el año 2000. Por el momento, ningún
navegador tiene soporte completo de CSS 2.1.16
A partir del año 2005 se comenzó a definir el sucesor de esta versión, al cual se
lo conoce como CSS3 o Cascading Style SheetsLevel 3. Actualmente en
definición, esta versión nos ofrece una gran variedad de opciones muy
importantes para las necesidades del diseño web actual. Desde opciones de
sombreado y redondeado, hasta funciones avanzadas de movimiento y
transformación, CSS3 es el estándar que dominará la web por los siguientes
años.17[10]
16(Eguiluz J, 2014) Introducción a css, Recuperado de http://librosweb.es/css/capitulo_1/breve_historia_de_css.html17(Rangel J, 2012) ¿Qué es para qué sirve CSS3?, recuperado de http://tc2-proyectodegradoingdesistemas.blogspot.com/2012/05/que-es-y-para-que-sirve-css3.html
34
BOOTSTRAP
Bootstrap es un kit de herramientas de código abierto para desarrollar con HTML,
CSS y JS. Permite hacer un prototipo rápido de sus ideas o crear aplicaciones
completas con variables y mixins de Sass, sistema de cuadrícula sensible,
componentes precompilados extensos y potentes complementos basados en
jQuery.[11]
El preprocesamiento de CSS es excelente. Bootstrap ofrece archivos LESS para
aquellos de nosotros que sabemos cómo usarlo, pero también proporciona el
antiguo archivo CSS simple para aquellos que no desean usar el
preprocesamiento de CSS.
Bootstrap se basa en cuadrículas, diseños y componentes receptivos de 12
columnas. Si necesita una grilla fija o una respuesta, es solo cuestión de unos
pocos cambios. Compensación y anidamiento de columnas también es posible
en diseños de ancho fijo y fluido. Otro conjunto útil de características son las
clases de utilidad receptiva con las que puede hacer aparecer un cierto bloque
de contenido u ocultarlo solo en dispositivos basados en el tamaño de su
pantalla. Muy útil cuando se quiere ocultar contenido según el tamaño de la
pantalla.
Bootstrap no solo ofrece estilo para casi todos los elementos que requiere un
sitio web o una aplicación web típica, sino que también proporciona una
excelente documentación con ejemplos y demostraciones que solo hacen que
sea más fácil incluso para alguien nuevo. 18
BLUETOOTH 19
18 (OS Training, 2017) 6 Reasons to Choose the Bootstrap CSS Framework, recuperado de https://www.ostraining.com/blog/coding/bootstrap/19 (Bluetooth SIG, 2017) How it works, recuperado de https://www.bluetooth.com/what-is-bluetooth-technology/how-it-works
35
Bluetooth es una tecnología de conectividad inalámbrica de baja potencia
utilizada para transmitir audio, transferir datos y difundir información entre
dispositivos. Hay dos tipos de tecnología Bluetooth, Basic Rate / Enhanced Data
Rate (BR / EDR) y Low Energy (LE).[12]
BASIC RATE/ENHANCED DATA RATE (BR/EDR)
Bluetooth BR / EDR permite conexiones inalámbricas continuas y utiliza una
topología de red punto a punto (P2P) para establecer comunicaciones de
dispositivo uno a uno. El flujo de audio Bluetooth BR / EDR es ideal para
altavoces inalámbricos, auriculares y sistemas manos libres para automóviles.
LOW ENERGY (LE)
Bluetooth LE permite conexiones inalámbricas de corta duración y utiliza
múltiples topologías de red, incluyendo punto a punto, difusión y malla.
Bluetooth envía y recibe ondas de radio en una banda de 79 frecuencias
diferentes (canales) centradas en 2,45 GHz, separadas de la radio, la televisión y
los teléfonos celulares, y reservadas para uso de aparatos industriales,
científicos y médicos. Los transmisores de corto alcance de Bluetooth son uno de
sus mayores puntos positivos. No utilizan prácticamente energía y, debido a que
no viajan lejos, son teóricamente más seguros que las redes inalámbricas que
operan en intervalos más largos, como Wi-Fi.
Los dispositivos Bluetooth detectan y conectan automáticamente entre sí y hasta
ocho de ellos pueden comunicarse en cualquier momento. No interfieren entre sí
porque cada par de dispositivos utiliza uno diferente de los 79 canales
disponibles. Si dos dispositivos quieren hablar, eligen un canal al azar y, si ya
está tomado, cambian aleatoriamente a uno de los otros (una técnica conocida
como salto de frecuencia de espectro ensanchado). Para minimizar los riesgos
de interferencia de otros aparatos eléctricos (y también para mejorar la
seguridad), los pares de dispositivos cambian constantemente la frecuencia que
están usando-miles de veces por segundo.
36
Cuando un grupo de dos o más dispositivos Bluetooth están compartiendo
información juntos, forman una especie de ad-hoc, una mini red informática
llamada piconet. Otros dispositivos pueden unirse o abandonar una piconet
existente en cualquier momento. Un dispositivo actúa como el controlador global
de la red, mientras que los otros obedecen sus instrucciones. [13]
BEACON
Los Beacon son pequeños transmisores Bluetooth que se colocan en lugares
estratégicos, a menudo dentro de las tiendas y supermercados. Este dispositivo
detecta la presencia de teléfonos inteligentes dentro de su rango, y puede
entregar contenido y experiencias a esos dispositivos, con el permiso del usuario.
La clave para los Beacon es el uso de la tecnología "Low Energy" de Bluetooth
que permite que uno de éstos funcionen con energía interna durante mucho
tiempo sin necesidad de una conexión eléctrica o frecuentes cambios de batería.
Las Beacon transmiten un identificador único UUID que ayuda a un dispositivo a
"entender dónde está" y mostrar contenido contextualmente relevante para esa
ubicación, según lo definido por el individuo o la compañía que colocó el aparato.
Además de transmitir mensajes a teléfonos, los Beacons también pueden usarse
para entender los patrones de tráfico en la tienda y otros comportamientos
detectando la ubicación y la ruta de los dispositivos móviles individuales. [14]
1.7.3 MARCO CONCEPTUAL
Para asegurar la comprensión común se presentan los términos específicos para
este documento.
API: Se usará este término para hacer referencia al web service, uno de los
productos a desarrollar.
APP: Abreviatura para la aplicación móvil.
Aplicación: El término hace referencia al aplicativo web desarrollado en PHP para
la administración de contenido.
37
1.7.4 MARCO METODOLÓGICO
La metodología elegida para el desarrollo de este proyecto corresponde a Scrum
bajo un marco de trabajo Agile, que es una tendencia moderna y cada vez más
aceptada dentro de la comunidad de desarrollo de software en el mundo.
Esta metodología comprende 5 fases iterativas para completar exitosamente el
desarrollo:
● Iniciación del proyecto: En esta etapa se definen las historias del backlog,
donde se definen requerimientos basados en actividades rol/acción
basadas en criterios de aceptación generados por el Product Owner tras
conocer las necesidades del usuario final.● Planeación del Sprint: Esta fase implica la construcción de la definición de
“hecho”(terminado) para no cometer errores en el alcance de las historias y
tener la mayor claridad posible en las tareas que debe realizar el
desarrollador.● Scrum Diario: Esta fase contiene la reunión diaria, donde el equipo de
trabajo se sincroniza, se autogestiona y se realimenta de acuerdo a las
actividades en progreso, se planean las actividades del día.● Retrospectiva del sprint: Esta fase se ejecuta al finalizar cada una de los
sprints, se habla de lo que se hizo, las dificultades que surgen y de cómo se
superaron, para mantener una alta calidad del producto en desarrollo y
mejorar la productividad.● Demo: Las demostraciones son esencialmente el “showtime”; para
proyectos ágiles. En ausencia de maquetas detalladas y especificaciones,
la demostración es donde el equipo técnico determina si el producto
entregado cumple con las expectativas. [15]
Cada una de estas cinco fases corresponde a lo que se debe hacer en cada
sprint, lo que lo convierte en una actividad iterativa hasta culminar el
proyecto.
38
Dado que se usa la estructura de trabajo de Scrum, se presentan los roles
que toman parte en la metodología ágil:
Equipo de desarrollo Scrum[16]
- Interfuncional (por ejemplo, incluye miembros con habilidades de
prueba y otros no llamados tradicionalmente desarrolladores:
analistas de negocios, Diseñadores, expertos en dominios, etc.)- Autoorganización / autogestión, sin funciones asignadas
externamente.- Planea un Sprint a la vez con el P.O- Tiene autonomía en cuanto a cómo desarrollar cada historia- Intensamente colaborativo- Es más exitoso cuando se reúne en una sala de juntas,
especialmente en los primeros sprints.
Dueño del producto (P.O)
- Una sola persona responsable de maximizar el retorno de la
inversión (ROI) del esfuerzo de desarrollo.- Responsable de la visión del producto- Constantemente prioriza el Backlog de Producto, ajustando cualquier
requerimiento.- El árbitro final de las preguntas sobre los requisitos- Decide si se debe liberar- Decide si continúa el desarrollo- Considera los intereses de las partes interesadas- Puede contribuir como miembro del equipo- Tiene un papel de liderazgo
Scrum Master
- Trabaja con la organización para hacer posible Scrum- Se asegura de que la metodología Scrum es clara por todo el equipo- Crea un ambiente propicio para la auto-organización del equipo- Protege al equipo de interferencias externas y distracciones para
mantener el flujo de trabajo intacto.- Promueve mejores prácticas de ingeniería- No tiene autoridad de gestión sobre el equipo- Ayuda a resolver los impedimentos. [17]
39
Figura 1: Diagrama Scrum Agile[18]
1.8 FACTIBILIDAD
1.8.1 Factibilidad de Desarrollo
1.8.1.1 Factibilidad Técnica
El aplicativo web, será alojado en una máquina virtual provista por Amazon Web
Services cuyo servidor web será configurado con Apache2, motor de bases de
datos MySql, las interfaces serán desarrolladas en Atom IDE, Sobre el sistema
operativo Ubuntu Linux Server 16.04. Se cuenta con un equipo de cómputo Sony
Vaio VPCEG13EL, procesador Intel Core i5 de 2.6 Ghz caché de 3 Mb, Memoria
RAM de 4.0 Gb, DD de 500Gb; un equipo de escritorio Asus Core i5 de 3.2Ghz,
memoria RAM de 8.0 Gb, HDD de 2Tb, SSD 120Gb y un equipo Apple MacBook
Pro. Adicionalmente se cuenta con tres dispositivos Beacon Estimote, estos
40
Beacon de proximidad cuentan con una batería cuya vida es de 2 años, rango de
70 metros, cuenta con sensor de movimiento y de temperatura.
1.8.1.2 Factibilidad Operativa.
El desarrollo del proyecto se encuentra estimado en un tiempo de 6 meses, se
cuenta con el respaldo y la asesoría del Ingeniero de Sistemas Luis Felipe
Wanumen Silva (Tutor del Proyecto, perteneciente a la Universidad Distrital
Francisco José de Caldas). Y como gestores del proyecto Paula Andrea Bustos
Higuera y Jorge Eduardo Adan Beltran, estudiantes de la Universidad Distrital
quienes están optando por el título de Ingeniero en Telemática, que cuentan con el
conocimiento y el tiempo para desarrollar el proyecto.
1.8.1.3 Factibilidad Legal
Se cuenta con el completo licenciamiento del software requerido para el desarrollo
del proyecto, y se trabajará teniendo en cuenta las leyes que rigen la normatividad
de desarrollo de software. Este Software está compuesto por el sistema operativo,
Ubuntu Linux 16.04, MySql 5.0, Apache2, PHP 7.0, Atom IDE.
1.8.1.4 Factibilidad Económica
En la tabla 1 se relacionan los gastos relacionados con la ejecución del proyecto.
RECURSO ESTUDIANTE UNIVERSIDAD
Bibliografía $100.000 0
Papelería $50.000 0
Telecomunicaciones $360.000 0
Equipos de cómputo $7.000.000 0
Beacon $ 510.000 0
Transporte $ 552.000 0
1 año de Hosting $1’200.000 0
41
Trabajo Estudiante
(Valor por hora)
$ 35.000 $ 0
Trabajo Director (Valor por
hora)
$ 0 $ 50.000
Trabajo Asesor (Valor por hora) $ 0 $ 50.000
Total horas 520 104
Subtotal $ 36.400.000 $ 5.200.000
Imprevistos $ 1’000.000 $ 0
Total $ 47.172.000 $ 5.200.000
Tabla 1: Factibilidad Económica
2. DESARROLLO DEL PROYECTO
2.1. ANÁLISIS DE LA SOLUCIÓN (SPRINT 1)
2.1.1 Catálogo de actores
ACTOR DESCRIPCIÓN
Estudiante También denominado como usuario
anónimo, es quien usa la aplicación sin
iniciar sesión, cuya utilidad radica en
conocer la información del salón en el que
se encuentra ubicado.
Docente/Profesor Es un actor de la aplicación, con
credenciales de acceso en el app móvil,
quien además de consultar los salones por
reconocimiento de Beacon, puede dejar
información en dichos salones para su
posterior visualización por parte de
estudiantes. Este tiene acceso a
42
información remota de los salones.
Administrador Es quien tiene credenciales de acceso tanto
en app como en sitio web, que es donde se
administra la información central que luego
se suministra a través de los Beacon.
Tabla 2: Catálogo de actores
2.1.1. Definición De Requisitos
Puntos estimados: 5
PRODUCTO REQUISITOS
WEB SERVICE - API REST ● Ruta que devuelve la información en el
primer uso● Ruta de verificación de estado de
actualización de bd local por beacon● ruta de actualización de información
por beacon● Ruta de edición de contenido del
mensaje por parte del profesor● Ruta republicar mensaje● Ruta de cambiar contraseña● Ruta de login
APLICACIÓN WEB ○ Subir pdf de los horarios publicados en
cóndor y crear horarios
automáticamente○ Vista de horario semanal con filtros
bloque y salon○ Gestionar docentes
43
○ Asignar beacon a salon
APP MÓVIL ○ Rol estudiante■ puede ver la información del salón
más cercano a su celular■ ver mapa miniatura de una parte del
piso en el que está ubicado
maximizable○ Rol profesor (menú: salones,
mensajes, buscar salón libre, escanear
salon, cambiar contraseña y salir)■ editar campo de información del
salón.■ republicar mensaje ■ Navegación de salones■ ver mensajes publicados■ buscar salón libre■ escanear salon■ cambiar contraseña ■ salir
○ No puede haber un usuario con sesión
activa en dos teléfonos a la vez
Tabla 3: Definición de requisitos
2.1.2. Establecimiento De Alcances
Puntos estimados: 5
Incluye la integración de la aplicación móvil con los dispositivos beacon, para
lograr la ubicación de la persona en el campus y así mostrar la información
pertinente a ese lugar, actualizada siempre y cuando el usuario tenga una
conexión a internet activa desde su dispositivo.
44
El proyecto no incluye la instalación definitiva de la totalidad de beacons
requeridos para la implementación de la solución, se hará la prueba de
funcionamiento con 3 dispositivos beacon, en ubicaciones arbitrarias.
La aplicación de administración de contenidos en la web estará a cargo de una
persona (monitor) asignada por la universidad, quién recibirá la capacitación
necesaria para actualizar la información de los dispositivos beacon, la aplicación
está en la capacidad de escalar el número de beacons que administra; la
veracidad de la información difundida depende del usuario administrador.
El proyecto finaliza con la publicación de un apk en un enlace público fuera de los
dominios de la universidad, cuya disponibilidad estará limitada a los servicios
gratuitos ofrecidos por Google.
Las funcionalidades de la aplicación para usuarios anónimos son asequibles
únicamente dentro de las instalaciones de la facultad tecnológica de la
universidad, por su parte los usuarios logeados (profesores) pueden acceder a
funciones adicionales relacionadas con la administración del contenido sobre los
beacons desde una conexión a internet remota.
2.1.3. Casos De Uso
Puntos estimados: 8.
45
46
Figura 2. Caso de uso usuario anónimo
Figura 3. Caso de uso usuario profesor
2.1.3 Documentación de casos de uso
CASO DE USO CU1
IDENTIFICACIÓN 01
NOMBRE: Consultar
salon de Beacon
detectado
ACTORES: Usuario
anónimo/Estudiante/
Profesor
DESCRIPCIÓN: Consiste en la consulta automática que realiza la
aplicación cuando está cerca de un Beacon, que resulta en conocer
la actividad que se está llevando a cabo en el momento en que se
reconoce el dispositivo.
Precondiciones
Tener la aplicación instalada, haber concedido los
permisos de ubicación y bluetooth, tener conexión
a internet
PostcondicionesSe muestra el nombre del salón correspondiente y
la actividad del momento si la hay
CURSO NORMAL DE LOS EVENTOS
ACCIÓN DEL ACTOR RESPUESTA DEL SISTEMA1. El usuario abre la
aplicación 2. La aplicación inicia escaneo de beacon
47
Figura 4. Caso de uso usuarioadministrador
3. La aplicación muestra salón y actividad según la hora del
día.
MANEJO DE SITUACIONES EXCEPCIONALES
Si el usuario no tiene el bluetooth encendido o no tiene conexión a internet, la pantalla
que la aplicación muestra es la de cargando, la cual no desaparecerá hasta que se
cumplan las precondiciones.
Tabla 4: Caso de uso CU1
CASO DE USO CU2
IDENTIFICACIÓN 02NOMBRE: Consultar
horario del salon ubicado
ACTORES: Usuario
anónimo/Estudiante
DESCRIPCIÓN: Consiste en la consulta del horario del salon
localizado en el escaneo beacon
PrecondicionesTener bluetooth encendido, tener conexión a
internet y estar cerca a un Beacon
Postcondiciones Se muestra el horario del salón asociado.
CURSO NORMAL DE LOS EVENTOS
ACCIÓN DEL ACTOR RESPUESTA DEL SISTEMA1. El usuario visualiza el
salon reconocido
2. La aplicación inicia escaneo de beacon
3. La aplicación muestra salón y actividad según la hora del
día.
4. El usuario hace click en
el ícono de calendario
5. La aplicación muestra el horario completo del salón en el
que esté ubicado.
MANEJO DE SITUACIONES EXCEPCIONALES
Si el usuario no tiene el bluetooth encendido o no tiene conexión a internet, la pantalla
que la aplicación muestra es la de cargando, la cual no desaparecerá hasta que se
cumplan las precondiciones.
Tabla 5: Caso de uso CU2
CASO DE USO CU3
48
IDENTIFICACIÓN 03NOMBRE: Crear mensaje
para salónACTORES: Docente
DESCRIPCIÓN: Permite la creación de un mensaje para un
determinado salón que será visible a cierta hora, durante un tiempo
limitado
PrecondicionesTener la aplicación instalada, y tener conexión a
internet
Postcondiciones
Se visualiza el mensaje en el listado de mensajes
y se habilita el mensaje en el momento que se
haya programado
CURSO NORMAL DE LOS EVENTOS
ACCIÓN DEL ACTOR RESPUESTA DEL SISTEMA1. El usuario se loguea en
la aplicación
2. La aplicación inicia el escaneo
3. El usuario abre el menú
y elige dejar mensaje
4. La aplicación despliega el listado de bloques.
5. El usuario elige el bloque
donde esté el salón en el
cual desea poner el
mensaje
6. La aplicación despliega el listado de salones del bloque
elegido
7. El usuario elige el salón
en el que desea poner el
mensaje
8. La aplicación muestra el formulario para la creación del
mensaje
9. El usuario diligencia la
totalidad de los campos del
formulario
10. La aplicación guarda el mensaje diligenciado.
11. El mensaje es visible en el listado de mensajes del
docente
12. El mensaje es visible en la hora programada en el salón
elegido.
MANEJO DE SITUACIONES EXCEPCIONALES
Si el usuario no tiene el bluetooth encendido o no tiene conexión a internet, la pantalla
que la aplicación muestra es la de cargando, la cual no desaparecerá hasta que se
cumplan las precondiciones.
Tabla 6: Caso de uso CU3
49
CASO DE USO CU4
IDENTIFICACIÓN 04NOMBRE: Republicar
mensaje para salónACTORES: Docente
DESCRIPCIÓN: Permite reusar un mensaje existente para su
posterior publicación
PrecondicionesTener la aplicación instalada, tener conexión a
internet y tener mensajes creados
Postcondiciones Se visualiza el mensaje en el listado de mensajes
y se habilita el mensaje en el momento que se
haya programado
CURSO NORMAL DE LOS EVENTOS
ACCIÓN DEL ACTOR RESPUESTA DEL SISTEMA1. El usuario se loguea en
la aplicación
2. La aplicación inicia el escaneo
3. El usuario abre el menú
y elige mis mensajes
4. La aplicación despliega el listado de mensajes
5. El usuario elige el
mensaje que desea
republicar y usa la pestaña
para buscar la opción de
republicar
6. La aplicación muestra el formulario de crear mensaje,
correctamente diligenciado en base al mensaje elegido.
7. El usuario modifica datos
en el formulario según lo
requiera
10. La aplicación guarda el mensaje diligenciado.
11. El mensaje es visible en el listado de mensajes del
docente
12. El mensaje es visible en la hora programada en el salón
elegido.
MANEJO DE SITUACIONES EXCEPCIONALES
Si el usuario no tiene el bluetooth encendido o no tiene conexión a internet, la pantalla
que la aplicación muestra es la de cargando, la cual no desaparecerá hasta que se
cumplan las precondiciones.
Tabla 7: Caso de uso CU4
50
CASO DE USO CU5
IDENTIFICACIÓN 05NOMBRE: Gestión de
usuarios
ACTORES:
Administrador
DESCRIPCIÓN: Permite realizar acciones de creación, edición,
actualización y eliminación de usuarios en la aplicación móvil y web
Precondiciones Tener acceso a internet
PostcondicionesCreación, modificación o eliminación de un usuario
en el sistema.
CURSO NORMAL DE LOS EVENTOS
ACCIÓN DEL ACTOR RESPUESTA DEL SISTEMA1. El usuario se loguea en
la aplicación
2. La aplicación muestra el home del sistema.
3. El usuario ubica el menú
de usuarios
4. La aplicación despliega una tabla con la información de
los usuarios del sistema
5. El usuario elige el icono
de la acción que desea
ejecutar, si editar un
usuario, eliminar o añadir
uno nuevo
6. La aplicación muestra el formulario de usuario diligenciado
si es para editar o en blanco para crear uno nuevo.
7. El usuario modifica datos
en el formulario según lo
requiera
10. La aplicación guarda la información diligenciada.
11. La aplicación retorna al listado de usuarios del sistema.
MANEJO DE SITUACIONES EXCEPCIONALES
Si al guardar la información de algún usuario se genera error, deben verse los errores de
validación del formulario para ser corregidos y hacer el reintento de guardar.
Tabla 8: Caso de uso CU5
CASO DE USO CU6
51
IDENTIFICACIÓN 06NOMBRE: Gestión de
horarios
ACTORES:
Administrador
DESCRIPCIÓN: Permite completar la información de una actividad en
algún salón.
Precondiciones Tener acceso a internet
Postcondiciones Modificación de un registro del horario de un salón
CURSO NORMAL DE LOS EVENTOS
ACCIÓN DEL ACTOR RESPUESTA DEL SISTEMA1. El usuario se loguea en
la aplicación
2. La aplicación muestra el home del sistema.
3. El usuario ubica el menú
de calendario
4. La aplicación despliega una tabla con la información de
los Bloques de la facultad
5. El usuario elige el bloque
del salon buscado
6. La aplicación despliega una tabla con el listado de salones
7. El usuario elige el salon
deseado y hace click en el
icono de calendario
8. La aplicación muestra la vista horario de toda la semana
para el salon.
9. El usuario hace click
sobre la hora que desea
modificar
10. La aplicación muestra un pop up donde se puede
modificar la asignatura y el docente a cargo.
11. El usuario presiona
guardar cambios
12. El sistema guarda los cambios en BD
MANEJO DE SITUACIONES EXCEPCIONALES
En caso de pérdida de la conexión a internet o de caída del servidor, debe reiniciarse la
acción.
Tabla 9: Caso de uso CU6
CASO DE USO CU7
IDENTIFICACIÓN 07NOMBRE: Gestión de
asignaturas
ACTORES:
Administrador
DESCRIPCIÓN: Permite la creación, edición y eliminación de asignaturas
en el sistema.
Precondiciones Tener acceso a internet
52
PostcondicionesCreación, actualización o eliminación de una
asignatura
CURSO NORMAL DE LOS EVENTOS
ACCIÓN DEL ACTOR RESPUESTA DEL SISTEMA1. El usuario se loguea en
la aplicación
2. La aplicación muestra el home del sistema.
3. El usuario ubica el menú
de asignaturas
4. La aplicación despliega una tabla con la información de
las asignaturas
5. El usuario elige la
asignatura buscada y da
click en el lápiz
6. La aplicación muestra un formulario para completar o
modificar la información del salón.
7. El usuario modifica la
información o presiona el
botón eliminar
8. El sistema guarda los cambios en BD
9. La aplicación retorna al listado de asignaturas.
MANEJO DE SITUACIONES EXCEPCIONALES
En caso de pérdida de la conexión a internet o de caída del servidor, debe reiniciarse la
acción.
Tabla 10: Caso de uso CU7
53
2.1.4. Diseño Arquitectónico
2.1.4.1 Vista Introductoria
Figura 4. Vista introductoria
2.1.4.2 Organización
Figura 5. Vista de organización
54
2.1.4.3 Cooperación de Actores
Figura 6. Cooperación de actores
55
2.1.4.4 Funciones de Negocio
Figura 7. Funciones del negocio
2.1.4.5 Proceso de Negocio
Figura 8. Proceso de negocio
56
2.1.4.6 Vista de Producto
Figura 9. Vista de producto
2.1.4.7 Comportamiento de Aplicación
Figura 10. Comportamiento de aplicación
57
2.1.4.8 Cooperación Aplicación
Figura 11. Cooperación de aplicación
2.1.4.9 Estructura de Aplicación
Figura 12. Estructura de aplicación
58
2.1.4.10 Infraestructura
Figura 13. Infraestructura
2.1.4.11 Mapa General
Figura 14. Mapa general
59
2.1.5. Definición de Arquitectura
Figura 15. Lineamientos arquitectónicos.
Figura 16. Subsistemas arquitectónicos
60
Figura 17. Definición de infraestructura 1
Figura 18. Definición de Infraestructura 2
61
Figura 19. Soporte de recursos internos
Figura 20. Soporte escalabilidad
62
Figura 21. Soporte de seguridad
Figura 22. Diseño TopDown
63
2.1.6. Review
Figura 23. Burndown Chart sprint
2.2. DISEÑO DE BASE DE DATOS Y CLASES DE APP WEB Y API (SPRINT 2)
2.2.1. Modelo Entidad Relación
Puntos estimados: 13.
64
Figura 24. Modelo entidad Relación
2.2.2. Definición De Clases Para Manejo De Base De Datos (DAO)
Puntos estimados: 8.
Symfony está diseñado para realizar un mapeo completo del modelo de base de
datos, facilitando la normalización y manejo de los datos a través de objetos de
php. Se puede ver a continuación el modelado de la base de datos en clases php.
65
Figura 26. Modelo de clases AOD
Figura 27. Modelo de clase AOD User
66
2.2.3. Definición De Clases Del BackEnd
Puntos estimados: 13.
En este diagrama de clases, se hace visibles todos los métodos que tendrá a
disposición la aplicación móvil para consumir a través de rest.
Estos métodos incluyen desde simples consultas a los salones y horarios, hasta la
creación y modificación de mensajes.
Figura 28. Modelo de clases Back-End
67
2.2.4. Review
Figura 29. Burndown Chart sprint 2
2.3. DISEÑO DE CLASES APP Y DISEÑO DE GUI (SPRINT 3)
2.3.1 Diseño de backbone
Puntos estimados: 21
El diseño del backbone está completamente basado en la arquitectura de la
filosofía ember, que abstrae los componentes esenciales del siguiente modo:
68
Figura 30. Backbone emberjs. Recuperado de http://mrbool.com/angularjs-ember-js-and-backbone-js-a-
comparison-of-resources/32006
Figura 31. Diagrama de arquitectura Ember
69
2.3.2 Diseño de GUI
Puntos estimados: 13
Basados en la filosofía de bootstrap y en ofrecer una experiencia de usuario
agradable, se opta por incorporar un menú dinámico y vistas simples con toda la
información:
Figura 32. Menú animado auto desplazamiento
70
Figura 33. Diseño de formularios.
Figura 34. Diseño de panel de salón.
71
Figura 35. Diseño de vista de mensajes
Figura 36. Diseño de vista horario
Figura 37. Diseño de lista de mensajes.
2.3.3 Review
72
Figura 38. BurndownChart Sprint 3
2.4. COMPONENTES Y PROCEDIMIENTOS APLICACIÓN WEB (SPRINT 4)
Puntos estimados: 34
Figura 39. Definición de procedimientos aplicación web
2.4.2 Review
73
Figura 40. Burndown Chart Sprint 4
2.5. COMPONENTES Y PROCEDIMIENTOS SERVICIO WEB (SPRINT 5)
Puntos estimados: 34
Los objetos que atañen a la aplicación móvil, están asociados a los elementos
principales: los beacon y los mensajes. Cada uno de estos a su vez están
relacionados con los salones y los sendos horarios.
2.5.1 DEFINICIÓN DE CONTROLADORES Y PROCEDIMIENTOS
74
Figura 41. Definición de procedimientos de backend api rest
2.6. COMUNICACIÓN APP - SERVICIO WEB (SPRINT 6)
Puntos estimados: 21
2.6.1 Definición de arquitectura de comunicación
Ember posee estrategias para realizar una integración efectiva con cualquier tipo
de backend, para este proyecto, se desarrolló el API REST con Symfony PHP y se
configuró del siguiente modo:
75
Figura 42. Arquitectura ember de comunicación REST. Recuperado de https://emberigniter.com/fit-any-
backend-into-ember-custom-adapters-serializers/
Así, la comunicación entre el App y el Backend es una comunicación HTTP:
76
Figura 43. Comunicación HTTP entre Emberjs y API REST de Symfony
77
2.6.2 Review
Figura 44. Burndown Chart Sprint 5
2.7. IMPLEMENTACIÓN PLUGIN IBEACON (SPRINT 7)
La comunicación de la aplicación móvil con los dispositivos beacon se lleva a cabo
mediante el plugin de cordova llamado ibeacon-plugin20
El funcionamiento técnico del sistema consiste en intercambio de datos a través
de ondas de Bluetooth de baja energía, el siguiente esquema muestra su
funcionamiento.
Figura 45. Funcionamiento Beacon - Dispositivo Móvil. Recuperado de
https://apps.griddynamics.com/hubfs/beacons_1-03.png
20 (github. 2017). An ibeacon Plugin. Recuperado de https://github.com/petermetz/cordova-plugin-ibeacon
78
Adicional a esto, el plugin provee métodos específicos para el monitoreo y
reconocimiento de las balizas en el espacio correspondiente.
Figura 46. Definición de métodos de interacción con las balizas Beacon.
79
2.7.1 REVIEW
Figura 47. Burndown Chart Sprint 7
2.8 EMPALME CAPAS VISTA Y CONTROLADOR EN EL APP (SPRINT 8)
El empalme de las capas bajo el modelo vista controlador y usando el core de
Ember para realizar este proceso se puede observar en el siguiente esquema:
80
Figura 48. Flujo de datos entre capas. Recuperado de https://guides.emberjs.com/v2.15.0/getting-started/core-
concepts/
81
2.8.1 Review
Figura 49. Burndown Chart Sprint 8
2.9. MANEJO DE LOCAL STORAGE EN MÓVIL (SPRINT 9)
Gracias a que ember permite realizar el mapeo del modelo de base de datos, y
generando copias de los datos en el storage soportado por el navegador del
usuario del lado del cliente, por su parte la configuración de la comunicación con el
api para backend hace que los request generados por ember correspondan a los
endpoint del api.
Como resultado, se obtienen los datos en el lado del cliente, como se evidencia en
la siguiente imagen.
82
Figura 50. Almacenamiento de los datos en el lado del cliente. Complemento ember para chrome.
2.9.1 Review
Figura 51. Burndown chart sprint 9
83
2.10. PRIMERA VERSIÓN DE USUARIO WEB Y ANDROID (SPRINT 10)
2.10.1 Versión aplicativo web
Puntos estimados: 8
Tras completar los objetivos de los sprints anteriores, se consigue poner a prueba
la primera versión de la aplicación web, cuya evidencia de las principales pantallas
se incluyen a continuación:
Figura 52. Formulario de inicio de sesión.
Figura 53. Listado de salones.
84
Figura 54. Vista de horario para el salón B2 Salon 103
Figura 55. Formulario para edición/creación de usuarios.
85
Figura 56. Listado de asignaturas cargadas.
Figura 57. Formulario de edición de asignaturas.
2.10.2 Versión aplicación móvil
Puntos estimados: 26
La primera versión del app móvil es una compilación para el sistema operativo android, con
las funcionalidades completas que los requerimientos plantean.
86
Figura 58. Icono del app tras ser instalada en un teléfono
Figura 59. pantalla de reconocimiento de salón
87
88
Figura 60. Pantalla al consultar horario de un salón
Figura 61. Listado de mensajes de un docente.
89
2.10.3 Review
Figura 62. Burndown Chart Sprint 10
2.11. LEVANTAMIENTO DE DATOS PARA CARGA A PRODUCCIÓN (SPRINT
10)
2.11.1 LECTURA DE PDF PARA CARGA DE HORARIOS
Puntos estimados: 8
Se aprovecha que los horarios de cada semestre son publicados en un enlace
público en la plataforma virtual de PortalOAS (Sistema de Gestión Académica).
90
Figura 63. Enlace disponible en el sistema de gestión académica
Este enlace lleva a la descarga de un pdf, el cual contiene la información de todos
los horarios de todos los salones, esta información es leída por php a través de la
librería smalot/pdfparser21 y con esta se crean las asignaturas, los salones y los
horarios de cada uno.
2.11.2 Review
21 https://github.com/smalot/pdfparser
91
Figura 64. Burndown Chart sprint 11
92
ANÁLISIS DE RESULTADOS
Los resultados de desarrollo de esta solución son bastante positivos, sin embargo como
todos los procesos que se inician de cero, dejan un conjunto de grandes enseñanzas y
experiencias.
Gracias a que la carrera de Ingeniería Telemática está divida en dos ciclos, al momento de
emprender un nuevo proyecto de grado ya hay experiencia en la creación de documentación
requerida como soporte del trabajo, y también experiencia profesional, que contribuye a
encontrar salidas rápidas a las dificultades que se presentan y a elegir con mejor criterio las
herramientas tecnológicas que se usan.
Dado que la especialidad de los dos participantes de este proyecto es desarrollar backend en
PHP, representó un reto crear una aplicación móvil cuyo diseño y funcionalidad Front end
debía ser en otro lenguaje de programación, bajo paradigmas distintos al desarrollo full
stack con PHP. Entender la filosofía de Ember y reducir la carga de los procesos en el lado
de servidor es importante para hacer un código limpio, funcional y escalable.
La comunicación entre php y ember usando JSON estándar reduce significativamente los
tiempos de procesamiento de la información, ya que en el cliente queda una copia temporal
de los datos con la misma estructura, pero con la posibilidad de crear campo computados
para facilitar la forma en que se muestra la información, como es el caso de los mensajes,
que en la aplicación son campos separados la fecha de la hora, pero que en la base de datos
de mysql es un único campo.
Configurar dos proveedores para la seguridad y sesiones del sistema fue algo interesante, ya
que abrió la posibilidad de reutilizar todo el proyecto de symfony para la aplicación web de
backoffice para escribir las funcionalidades del API, usando la misma base de datos y
coexistiendo el JWT como autenticador del api y FOS User Bundle como autenticador de la
aplicación web.
93
Usar el plugin Ibeacon construido en cordova, y pretender su uso transparente en
un framework diferente como lo es ember, genera inconsistencias en el
comportamiento del mismo, ya sea por diferencias en versiones de las
dependencias, o incluso en el sistema operativo que se esté corriendo.
Pensar en leer el pdf con los horarios es una característica que aporta mucho al
trabajo del administrador del sistema, ya que cada semestre se parte de una guía
de horarios, y hace que el sistema sea más usable al tener una carga real de
información, además de hacer uso de un recurso público y agregar un elemento
colaborativo externo a la vista de procesos del negocio.
Utilizar proyectos de código abierto, en comunidades tan concurridas por gente
profesional como github, hace que implementar mejoras sea tan simple como
incluir la dependencia en el proyecto, además de que los errores o dificultades de
compatibilidad casi siempre tienen solución en los foros de las mismas
comunidades, como fue en particular para el caso del menú “ember-burguer” y el
uso de momentjs para mostrar las fechas en un formato más humano, tipo
facebook.
Uno de los aspectos más interesantes de emberJS es el uso del patrón MVC del
lado del cliente porque permite que sea éste quien se ocupe de sincronizar en
cada momento los cambios en el documento HTML con el DOM, gracias a la
información contenida en las variables de la vista.
94
CONCLUSIONES
Symfony es un framework que permite desarrollo muy rápido, contiene todos los elementos
de una aplicación de alta calidad, disponible, escalable y mantenible, optimizada para su
uso incluso en grandes volúmenes de información y de tráfico.
Una elección errónea de tecnologías en la fase de selección, o peor aún no hacer
fase de selección de tecnologías, acarrea retrasos importantes en el desarrollo de
la solución.
Cuando se desarrolla un servicio back-end construyendo un API, se asegura que,
desde cualquier sistema o cliente, se pueda consumir. El API no devuelve más que
datos, que están desacoplados a cualquier modo de visualización.
Tener experiencia profesional mejora los resultados del producto, tener dominio
sobre el saber-hacer de las cosas y usar las metodologías de trabajo que se usan
en entornos empresariales genera resultados visible, retroalimentación inmediata y
corrección rápida de errores y bugs.
Usar productos que están siendo utilizados en contextos diferentes al académico
mantiene a la universidad a la vanguardia tecnológicamente hablando, es
importante reconocer la innovación en los proyectos, ya que más allá de la
problemática que se solucione, se mantiene a toda la comunidad al tanto de las
potenciales tecnologías en el mercado.
Todo el desarrollo de los productos fue llevado a cabo con herramientas de uso
libre, por lo que se está respetando cualquier derecho de autor existente.
95
RECOMENDACIONES
Para la aplicación web del back office está hecha para ser ejecutada a través de internet, se
recomienda el uso de navegadores actualizados, preferiblemente Google Chrome®.
Se recomienda que los monitores de las diferentes aulas de práctica y laboratorios de la
facultad, tengan un usuario administrador para rellenar a cabalidad la información de estos
espacios que dependen de ser apartadas con anterioridad.
Se recomienda mantener una conexión plena a internet, ya sea por el wifi que presta la
universidad o por dato móviles, se garantiza que el consumo de datos es inferior a 1Mb por
uso del sistema.
El proyecto planteado puede ser mejorado, puede hacerse una integración con GPS para
poder generar indicaciones si se quiere llegar a un salón determinado, se pueden añadir
mapas interactivos para que no solo sea informativa sino también rastreadora.
96
BIBLIOGRAFÍA
Wargo J. 2015. Apache Cordova 4 Programming. West Flagler Branch Library. Miami FL.
Eguiluz J, 2014. Introducción a css. Biblioteca Luis Ángel Arango, Bogotá DC
Salehi S. 2016. Mastering Symfony. Google Play Books.
97
INFOGRAFÍA
[1] (Using Beacons, 2015) Nadie se pierde ahora en la Universidad de Oklahoma,
recuperado de
http://www.usingbeacons.com/los-estudiantes-profesores-y-visitantes-de-la-
universidad-de-oklahoma-ya-no-se-pierden/
[2] (Escuela Técnica Superior de Ingeniería Informática, s.f.) Origen y evolución
de
las BD, Recuperado de http://www.lsi.us.es/docencia/get.php?id=5396
[3] (Souhrada K, 2010) Bases de datos MySql, Recuperado de
http://www.mysql.com/products/enterprise/mysql-datasheet.es.pdf
[4] (Universidad Autónoma del Estado de México, s.f) ¿Qué es MySql?,
Recuperado de http://www.gridmorelos.uaem.mx/~mcruz//cursos/miic/MySQL.pdf
[5] PHP Group, 2009. Historia de php y Proyectos relacionados. Biblioteca Virgilio
Barco, Bogotá DC
[6] Potencier, Fabien and Zaninotto, François. (2007). The Definitive Guide to
symfony.
[7] (Sensiolabs, s.f) Twig For Template Design. Recuperado de
https://twig.symfony.com/doc/templates.html
[8] (Creative Commons. 2016) Ember.js. Recuperado de
https://en.wikipedia.org/wiki/Ember.js
98
[9] (Refsnes Data, 2015) CSS tutorial, recuperado de
http://www.w3schools.com/css/
[10] (Rangel J, 2012) ¿Qué es para qué sirve CSS3?, recuperado de http://tc2-
proyectodegradoingdesistemas.blogspot.com/2012/05/que-es-y-para-que-sirve-
css3.html
[11] (Bootstrap, s.f) Bootstrap, the most popular html, css and js library in the
world, recuperado de https://getbootstrap.com/
[12] (Bluetooth SIG, 2017) How it works, recuperado de
https://www.bluetooth.com/what-is-bluetooth-technology/how-it-works
[13] (Woodford C, 2016), How Bluetooth Works. Recuperado de
http://www.explainthatstuff.com/howbluetoothworks.html
[14] (Nichols J, 2015) All about beacons, ibeacons and eddystone beacons.
Recuperdo de https://apsalar.com/2015/11/all-about-beacons-ibeacons-and-
eddystone-beacons/
[15] (IT Business Edge, 2014) Five Phases of Agile Keep Quick Development
Under Control, recuperado de
http://www.itbusinessedge.com/cm/blogs/itdownloads/five-phases-of-agile-keep-
quick-development-under-control/?cs=48548
[16] (kontact, 2017) iBeacon Parameters: UUID, Major and Minor, recuperado de
https://support.kontakt.io/hc/en-gb/articles/201620741-iBeacon-Parameters-UUID-
Major-and-Minor
99
[17] (James M, 2017). Scrum Reference Card. Recuperado de
https://www.collab.net/sites/default/files/uploads/CollabNet_scrumreferencecard.pd
f
[18] (CPrime) What is AGILE? What is SCRUM?. Recuperado de
https://www.cprime.com/resources/what-is-agile-what-is-scrum/
100