APLICACIÓN MÓVIL CON TECNOLOGÍA BEACON PARA EL …repository.udistrital.edu.co/bitstream/11349/13422/2/BustosHigueraPaulaAndrea2018.pdfaplicaciÓn mÓvil con tecnologÍa beacon

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 7: Caso de uso CU4……………………………………………………………..49



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



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.


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.






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


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.






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



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.






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.



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.


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.


CASO DE USO CU6

51


horarios

ACTORES:

Administrador

DESCRIPCIÓN: Permite completar la información de una actividad en

algún salón.


Postcondiciones Modificación de un registro del horario de un salón



la aplicación



de calendario


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


En caso de pérdida de la conexión a internet o de caída del servidor, debe reiniciarse la

acción.


CASO DE USO CU7


asignaturas

ACTORES:

Administrador

DESCRIPCIÓN: Permite la creación, edición y eliminación de asignaturas

en el sistema.


52

PostcondicionesCreación, actualización o eliminación de una

asignatura



la aplicación



de asignaturas


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.


En caso de pérdida de la conexión a internet o de caída del servidor, debe reiniciarse la

acción.


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


64

Figura 24. Modelo entidad Relación

2.2.2. Definición De Clases Para Manejo De Base De Datos (DAO)


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


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


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)


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)


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)


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


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


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


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


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


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

Documents

APLICACIÓN MÓVIL CON TECNOLOGÍA BEACON PARA EL …repository.udistrital.edu.co/bitstream/11349/13422/2/BustosHigueraPaulaAndrea2018.pdfaplicaciÓn mÓvil con tecnologÍa beacon