Desarrollo de una Aplicación Móvil de Realidad Aumentada ...

182
Universidad de La Salle Universidad de La Salle Ciencia Unisalle Ciencia Unisalle Ingeniería en Automatización Facultad de Ingeniería 5-15-2021 Desarrollo de una Aplicación Móvil de Realidad Aumentada para Desarrollo de una Aplicación Móvil de Realidad Aumentada para el Museo de Ciencias de la Universidad de la Salle el Museo de Ciencias de la Universidad de la Salle Laura Gabriela Munevar Barrera Universidad de la Salle, Bogotá, [email protected] Follow this and additional works at: https://ciencia.lasalle.edu.co/ing_automatizacion Part of the Computational Engineering Commons, and the Engineering Education Commons Citación recomendada Citación recomendada Munevar Barrera, L. G. (2021). Desarrollo de una Aplicación Móvil de Realidad Aumentada para el Museo de Ciencias de la Universidad de la Salle. Retrieved from https://ciencia.lasalle.edu.co/ ing_automatizacion/802 This Trabajo de grado - Pregrado is brought to you for free and open access by the Facultad de Ingeniería at Ciencia Unisalle. It has been accepted for inclusion in Ingeniería en Automatización by an authorized administrator of Ciencia Unisalle. For more information, please contact [email protected].

Transcript of Desarrollo de una Aplicación Móvil de Realidad Aumentada ...

Universidad de La Salle Universidad de La Salle

Ciencia Unisalle Ciencia Unisalle

Ingeniería en Automatización Facultad de Ingeniería

5-15-2021

Desarrollo de una Aplicación Móvil de Realidad Aumentada para Desarrollo de una Aplicación Móvil de Realidad Aumentada para

el Museo de Ciencias de la Universidad de la Salle el Museo de Ciencias de la Universidad de la Salle

Laura Gabriela Munevar Barrera Universidad de la Salle, Bogotá, [email protected]

Follow this and additional works at: https://ciencia.lasalle.edu.co/ing_automatizacion

Part of the Computational Engineering Commons, and the Engineering Education Commons

Citación recomendada Citación recomendada Munevar Barrera, L. G. (2021). Desarrollo de una Aplicación Móvil de Realidad Aumentada para el Museo de Ciencias de la Universidad de la Salle. Retrieved from https://ciencia.lasalle.edu.co/ing_automatizacion/802

This Trabajo de grado - Pregrado is brought to you for free and open access by the Facultad de Ingeniería at Ciencia Unisalle. It has been accepted for inclusion in Ingeniería en Automatización by an authorized administrator of Ciencia Unisalle. For more information, please contact [email protected].

DESARROLLO DE UNA APLICACIÓN MÓVIL DE REALIDAD AUMENTADA

PARA EL MUSEO DE CIENCIAS DE LA UNIVERSIDAD DE LA SALLE

Presentado por:

LAURA GABRIELA MUNEVAR BARRERA

UNIVERSIDAD DE LA SALLE

FACULTAD DE INGENIERÍA

Bogotá D.C

2021

DESARROLLO DE UNA APLICACIÓN MÓVIL DE REALIDAD AUMENTADA

PARA EL MUSEO DE CIENCIAS DE LA UNIVERSIDAD DE LA SALLE

Presentado por:

LAURA GABRIELA MUNEVAR BARRERA

Trabajo de grado para optar por el título de

Ingeniera en Automatización

ALVARO ANTONIO PATIÑO FORERO

DIRECTOR DEL PROYECTO

UNIVERSIDAD DE LA SALLE

FACULTAD DE INGENIERÍA

Bogotá D.C

2021

i

Nota de aceptación:

____________________________________

____________________________________

____________________________________

____________________________________

____________________________________

____________________________________

____________________________________

____________________________________

Firma del director

Ing. Álvaro Antonio Patiño Forero

____________________________________

Firma del jurado

Ing. Jorge Eliécer Rangel Díaz

Bogotá D.C, 15 de mayo de 2021

ii

Dedico este trabajo de grado

a mis padres porque con sus

enseñanzas, amor y guía me

han hecho la persona que

soy hoy.

iii

Agradecimientos

En primer lugar quiero agradecer a mi padres por todo el amor, la paciencia y el

apoyo que me han brindado desde que decidí estudiar esta carrera, quiero

agradecer a mis hermanitos de manera especial por ser los rayitos de alegría y

felicidad en mi día a día, mis motivos de ser mejor cada día. A mis amigos Gabo,

Lula, Nicole, Lizzie, Harlito, quienes siempre me brindaron su amistad genuina e

incondicional durante esta etapa. Son las mejores personas con las que me pude

haber cruzado.

Agradezco también a cada uno de los docentes con los cuáles compartí a lo largo

de mi carrera y quiénes dedicaron su tiempo y esfuerzo para hacer de mí una buena

profesional.

Agradezco de manera especial al ingeniero Álvaro por su acompañamiento en el

proceso de desarrollo del proyecto.

viii

RESUMEN

El presente proyecto de grado se enmarca en el desarrollo de una aplicación móvil

de realidad aumentada específicamente para realizar exhibiciones y recorridos en

el museo de ciencias de la Universidad de la Salle. El proceso de presentación de

los temas por parte de los curadores y expositores del museo, debido a la extensión

y complejidad de los temas puede resultar arduo. Por ello se plantea el desarrollo

de un aplicación móvil de realidad aumentada que permita determinar si aplicando

su uso mediante la metodología mobile-D, mejora la facilidad de exposición y el

interés de los visitantes en los temas expuestos.

Desarrollada la aplicación se realizaron pruebas de funcionamiento analizando

caracteristicas como la facilidad de uso de las interfaces, funcionamiento de la

realidad aumentada y el tiempo de reconocimiento de las targets demostrando

buenos resultados y comentarios por parte de los usuarios que probaron la

aplicación.

Palabras clave: Realidad aumentada, Aplicación móvil, Mobile-D, Unity, Museo,

Modelo 3D, target.

ix

ÍNDICE GENERAL

RESUMEN ............................................................................................................ viii

ÍNDICE GENERAL .................................................................................................. ix

ÍNDICE DE TABLAS ............................................................................................... xi

ÍNDICE DE FIGURAS ........................................................................................... xiii

Glosario ................................................................................................................. xv

1. INTRODUCCIÓN .............................................................................................. 1

2. MARCO TEÓRICO ............................................................................................ 3

2.1 Aplicación Móvil .......................................................................................... 3

2.1.1 Tipos de aplicación ............................................................................... 4

2.2 Sistemas Operativos Móviles ...................................................................... 5

2.2.1 Android ................................................................................................. 5

2.2.2 iOS ....................................................................................................... 7

2.2.3 BlackBerry OS ...................................................................................... 8

2.3 Unity............................................................................................................ 9

2.4 Vuforia ...................................................................................................... 10

2.5 Realidad Aumentada ................................................................................ 11

2.6 Metodologías de desarrollo de aplicaciones móviles ................................ 11

2.6.1 Mobile-D ............................................................................................. 12

2.7 Justificación y Selección de las herramientas de diseño .......................... 15

3. DESARROLLO DE LA APLICACIÓN MÓVIL DE REALIDAD AUMENTADA .. 21

3.1 Exploración ............................................................................................... 21

3.1.1 Establecimiento de los grupos de intereses o Stakeholders .............. 21

x

3.1.2 Definición del Alcance ........................................................................ 21

3.1.3 Identificación módulos y requerimientos ............................................ 22

3.1.4 Establecimiento del proyecto ............................................................. 26

3.2 Inicialización ............................................................................................. 27

3.2.1 Configuración del proyecto: ................................................................ 27

3.2.2 Arquitectura del proyecto ................................................................... 28

3.2.3 Planificación Inicial ............................................................................. 29

3.3 Producción ................................................................................................ 44

3.3.1 Tarjetas de historias de usuario ......................................................... 44

3.4 Estabilización ............................................................................................ 52

3.5 Pruebas .................................................................................................... 58

3.5.1 Objetivo .............................................................................................. 58

3.5.2 Estrategia de pruebas: ....................................................................... 59

4. RESULTADOS Y VALIDACIÓN ...................................................................... 64

4.1 Metodología verificación y validación ....................................................... 64

4.2 Resultados de la verificación y validación ................................................. 67

5. CONCLUSIONES Y RECOMENDACIONES .................................................. 85

5.1 CONCLUSIONES ..................................................................................... 85

5.2 RECOMENDACIONES ............................................................................. 86

BIBLIOGRAFÍA ...................................................................................................... 87

ANEXOS ................................................................................................................ 90

xi

ÍNDICE DE TABLAS

Tabla 1. Cuadro comparativo de ventajas y desventajas de herramientas (Fuente:

Autora) ................................................................................................................... 16

Tabla 2. Módulos Por Desarrollar (Fuente: Autora) ............................................... 22

Tabla 3. Requerimientos funcionales (Fuente: Autora) .......................................... 24

Tabla 4.Requerimientos no funcionales (Fuente: Autora) ...................................... 26

Tabla 5. Herramientas para el desarrollo del proyecto (Fuente: Autora) ............... 26

Tabla 6. Planificación por fases (Fuente: Autora) .................................................. 29

Tabla 7. Modelo de Historia de Usuario (Fuente: Autora) ...................................... 32

Tabla 8. Descripción de prototipos (Fuente: Autora) .............................................. 39

Tabla 9. Historia de Usuarios (Fuente: Autora) ...................................................... 44

Tabla 10. Historia de Usuario H001 (Fuente: Autora) ............................................ 45

Tabla 11. Historia de Usuario H002 RF002 (Fuente: Autora) ................................ 46

Tabla 12. Historia de Usuario H002 RF003 (Fuente: Autora) ................................ 46

Tabla 13. Historia de Usuario H002 RF004 (Fuente: Autora) ................................ 47

Tabla 14. Historia de Usuario H003 RF005 (Fuente: Autora) ................................ 47

Tabla 15. Historia de Usuario H004 RF006 (Fuente: Autora) ................................ 48

Tabla 16. Historia de usuario H005 RF007 (Fuente: Autora) ................................. 48

Tabla 17. Historia de Usuario H006 RF008 (Fuente: Autora) ................................ 49

Tabla 18. Historia de Usuario H007 RF009 (Fuente: Autora) ................................ 49

Tabla 19. Historia de Usuario H008 RF010 (Fuente: Autora) ................................ 50

Tabla 20. Historia de usuario H009 RF011 (Fuente: Autora) ................................. 51

Tabla 21. Historia de Usuario H010 (Fuente: Autora) ............................................ 51

Tabla 22. Caso de prueba 1 (Fuente: Autora) ....................................................... 59

Tabla 23. Caso de prueba 2 (Fuente: Autora) ....................................................... 59

Tabla 24. Caso de prueba 3 (Fuente: Autora) ....................................................... 60

Tabla 25. Caso de prueba 4 (Fuente: Autora) ....................................................... 60

Tabla 26. Caso de prueba 5 (Fuente: Autora) ....................................................... 61

Tabla 27. Caso de prueba 6 (Fuente: Autora) ....................................................... 62

Tabla 28. Caso de prueba 7 (Fuente: Autora) ....................................................... 62

xii

Tabla 29. Cuestionario preguntas para los usuarios de la prueba. (Fuente: Autora)

............................................................................................................................... 64

Tabla 30. Respuestas 1era pregunta(Fuente: Autora) ........................................... 67

Tabla 31. Respuestas segunda pregunta (Fuente: Autora) ................................... 68

Tabla 32. Respuestas tercera pregunta (Fuente: Autora) ...................................... 68

Tabla 33. Respuestas cuarta pregunta (Fuente: Autora) ....................................... 69

Tabla 34. Respuesta quinta pregunta (Fuente: Autora) ......................................... 70

Tabla 35. Resultados sexta pregunta (Fuente: Autora) ......................................... 71

Tabla 36. Respuesta séptima pregunta (Fuente: Autora) ...................................... 72

Tabla 37. Tabla octava pregunta (Fuente: Autora) ................................................ 73

Tabla 38. Respuesta novena pregunta (Fuente: Autora) ....................................... 74

Tabla 39. Respuesta decima pregunta (Fuente: Autora) ...................................... 75

Tabla 40. Respuestas décimo primera pregunta (Fuente: Autora) ........................ 76

Tabla 41. Respuestas décimo segunda pregunta (Fuente: Autora) ....................... 77

Tabla 42. Respuestas décimo tercera pregunta (Fuente: Autora) ......................... 78

Tabla 43. Respuestas décimo cuarta pregunta (Fuente: Autora) .......................... 79

Tabla 44. Pruebas de tiempo de reconocimiento usuario 1 (Fuente: Autora) ........ 80

Tabla 45. Media y Mediana prueba usuario 1 (Fuente: Autora) ............................. 82

Tabla 46. Pruebas de tiempo de reconocimiento usuario 2 (Fuente: Autora) ........ 83

Tabla 47. Media y mediana prueba usuario 2 (Fuente: Autora) ............................. 84

xiii

ÍNDICE DE FIGURAS

Figura 1. Sistema Operativo Android (Android OS, 2020) ....................................... 6

Figura 2. Sistema operativo IOS (Apple Inc, 2021) .................................................. 8

Figura 3. BlackBerry 10 OS (Blackberry US Page, 2021) ........................................ 9

Figura 4. Unity logo (Unity, 2021) .......................................................................... 10

Figura 5. Vuforia logo (Vuforia Developer, 2021) ................................................... 10

Figura 6. Realidad Aumentada. (Realidad Aumentada, 2021) ............................... 11

Figura 7. Ciclo de Desarrollo Mobile-D (Meneses & Laveriano, 2016) .................. 13

Figura 12. Arquitectura de la aplicación. (Fuente: Autora) ..................................... 29

Figura 13. Flujo de navegación parte 1. (Fuente: Autora) ...................................... 33

Figura 14. Target visualización Tiburón (Fuente: Autora) ...................................... 34

Figura 15. Target visualización Murciélago (Fuente: Autora) ................................. 35

Figura 16. Target visualización Serpiente (Fuente: Autora) ................................... 35

Figura 17. Flujo de pantalla aplicación parte 2 (Fuente: Autora) ........................... 36

Figura 18. Flujo de pantalla aplicación parte 3 (Fuente: Autora) ........................... 37

Figura 19. Flujo de pantalla aplicación parte 4 (Fuente: Autora) ........................... 38

Figura 20.Flujo de pantalla aplicación parte 5 (Fuente: Autora) ............................ 38

Figura 21. Diagrama de capas del Aplicativo (Fuente: Autora) .............................. 52

Figura 22. Nivel de interfaz de usuario de la aplicación (Fuente: Autora) .............. 53

Figura 23. Nivel de Escenario del aplicativo (Fuente: Autora) ............................... 54

Figura 24. Objetos del juego (Fuente: Autora) ....................................................... 54

Figura 25. Diagrama de clase capa negocio (Fuente: Autora) ............................... 55

Figura 26. Objetos de juego en la aplicación (Fuente: Autora) .............................. 56

Figura 27. Evento del aplicativo. (Fuente: Autora) ................................................. 56

Figura 28. Diagrama de clases capa negocio (Fuente: Autora) ............................. 57

Figura 29. Casos de uso (Fuente: Autora) ............................................................. 58

Figura 30. Diagrama de torta respuestas primera pregunta (Fuente: Autora) ....... 67

Figura 31. Diagrama de torta segunda pregunta (Fuente: Autora) ........................ 68

xiv

Figura 32. Diagrama de torta tercera pregunta (Fuente: Autora) ........................... 69

Figura 33. Diagrama de torta cuarta pregunta (Fuente: Autora) ............................ 70

Figura 34. Diagrama de torta quinta pregunta (Fuente: Autora) ............................ 71

Figura 35. Diagrama de torta sexta pregunta (Fuente: Autora) ............................. 72

Figura 36. Diagrama de torta séptima pregunta (Fuente: Autora).......................... 73

Figura 37. Diagrama de barras octava pregunta (Fuente: Autora)......................... 74

Figura 38. Diagrama de torta novena pregunta (Fuente: Autora) .......................... 75

Figura 39. Diagrama de torta decima pregunta (Fuente: Autora) .......................... 76

Figura 40. Diagrama de barras décimo primera pregunta (Fuente: Autora) .......... 77

Figura 41. Diagrama de torta décimo segunda pregunta (Fuente: Autora) ............ 78

Figura 42. Diagrama de barras décimo tercera pregunta (Fuente: Autora) ........... 79

Figura 43. Diagrama de barras décimo cuarta pregunta (Fuente: Autora) ............. 80

Figura 44. Datos pruebas de reconocimiento target usuario 1 (Fuente: Autora) ... 82

Figura 45. Datos pruebas de reconocimiento target persona 2 (Fuente: Autora) .. 84

xv

Glosario

A

Android: Sistema Operativo que se emplea en dispositivo móviles, por lo general

con pantalla táctil. (Alonso, Artime, Rodríguez, & Baniello, 2011)

Aplicación Móvil: Aplicación informática diseñada para ser ejecutada en teléfonos

inteligentes, tables y otros dispositivos móviles. Generalmente se encuentran

disponibles a través de plataformas de distribución, operadas por las compañías

propietarias de los sistemas operativos móviles como Android, iOS, BlackBerry OS,

Windows Phone, entre otros. (Alonso, Artime, Rodríguez, & Baniello, 2011)

API: Siglas de Interfaz de Programación de Aplicaciones. Es un conjunto de

funciones, métodos o procedimientos que ofrece una biblioteca para ser utilizado

por otro software como una capa de abstracción. (Páez)

APK: Es el formato de archivo utilizado para la instalación de software en el sistema

operativo Android.1

I

IDE: Aplicación compuesta por un conjunto de herramientas útiles para un

programador.1

Interfaz: Conjunto de elementos de la pantalla que permiten al usuario realizar

acciones sobre el sitio web que está visitando.1

M

Metodología: Grupo de mecanismos o procedimientos racionales, empleados para

el logro de un objetivo, o serie de objetivos que dirige una investigación científica.1

1 (Chacon & Tuiro, 2018)

xvi

Mobile-D: Metodología ágil basada en Rational Unified Process, Extreme

Programming y Crystal Methodologies, y su finalidad en intentar obtener pequeños

ciclos de desarrollo de forma rápida en dispositivos, consta de cinco fases: Fase de

exploración, fase de inicialización, fase de producción, fase de estabilización y fase

de pruebas. (Rahimian & Ramsin, 2008)

Multiplataforma: Válido para varios sistemas operativos. (Cuello & Vittone, 2013)

R

Realidad Aumentada: Consiste en combinar el mundo real con el virtual mediante

un proceso informático, enriqueciendo la experiencia visual y mejorando la calidad

de comunicación. (Ding M. , 2017)

S

Script: Archivo de órdenes, archivo de procesamiento por lotes o guion es un

programa usualmente simple, que por lo regular se almacena en archivos de texto

plano. (Juliani, y otros, 2018)

SDK: Conjunto de herramientas y programas de desarrollo que permite al

programador crear aplicaciones para un determinado paquete de software,

estructura de software, plataforma de hardware, los SDK incluyen herramientas

debugger y muchas veces un entorno de programación IDE. (Cuello & Vittone, 2013)

Sistema: Conjunto de partes o elementos organizados y relacionadas que

interactúan entre sí para lograr un objetivo. (Chacon & Tuiro, 2018)

Smartphone: Anglicismo. Teléfono móvil construido sobre una plataforma

informática móvil, con capacidad para almacenar datos y realizar actividades

asemejándose a una minicomputadora. (Alonso, Artime, Rodríguez, & Baniello,

2011)

Software: Conjunto de instrucciones que las computadoras emplean para

manipular datos.

xvii

Stakeholders: Persona o negocio que ha invertido dinero en cualquier tipo de

proyecto comercial. (Rahimian & Ramsin, 2008)

T

Tecnología: Conjunto de técnicas, conocimientos y procesos, que sirven para el

diseño y construcción de objetos para satisfacer necesidades humanas. (Alonso,

Artime, Rodríguez, & Baniello, 2011)

V

Vuforia: SDK que permite construir aplicaciones basadas en la realidad aumentada

utilizando la pantalla del dispositivo donde se entrelazan elementos del mundo real

con elementos virtuales. (Chacon & Tuiro, 2018)

U

Unity: Motor de desarrollo para la creación de juegos y contenidos 3D interactivos,

con las características que es completamente integrado y que ofrece innumerables

funcionalidades para facilitar el desarrollo de videojuegos. (Chacon & Tuiro, 2018)

1

1. INTRODUCCIÓN

El consumo cultural en Colombia según datos del DANE 2017 aparece influenciados

por alta presencia de niños, niñas adolescentes y jóvenes pero en su mayoría son

consumidores por medios digitales, internet, redes sociales, etc. La revolución

tecnológica ha tenido una influencia decisiva en este consumo. Hacer que la

interacción de los temas del museo de la universidad de la Salle se unan a esta

revolución tecnológica, que permita nuevos modos de llegar a su público usando

esta poderosa herramienta facilita acceder de manera más sencilla al público

siendo esta de un modo más usual y acorde con estos avances.

De acuerdo con la Informe Trendwatch 2015, la personalización mediada

digitalmente y el aprendizaje personalizado son dos tendencias mundiales

destacadas en los museos en los últimos años. La mayoría de los museos con más

50.000 visitantes en el sitio están utilizando nueva tecnología solo para dispositivos

móviles. A través de aplicaciones móviles, los museos pueden proporcionar

información complementaria sobre una exposición o el propio museo; o como guía

móvil personalizada a través de la colección del museo o los espacios de la galería.

(Ding M. , 2017)

En diferentes artículos donde se ha estudiado el uso de la tecnología y la realidad

aumentada se destaca como una herramienta muy potente para la interacción y el

aprendizaje de los visitantes.

"Cuando aprenden con simulaciones, los alumnos interactúan con el modelo a

través de una interfaz que les permite cambiar los valores de las variables de

entrada y observar los efectos de estos cambios en las variables de salida. Los

programas de simulación se pueden utilizar como la base para la formación de

conocimientos o habilidades (o una combinación de ambos). En el caso de

aprendizaje de habilidades prácticas, la transferencia a situaciones reales es crucial,

2

por lo que a menudo se prefiere la alta fidelidad. La alta fidelidad significa que el

modelo en la simulación debe ser realista y también que la interfaz (tanto de entrada

como de salida) debe ser cercana a la situación real.” (Sarracino, 2017).

Teniendo en conocimiento el uso de las aplicaciones móviles para distintos campos y

su eficacia el presente trabajo de grado tiene como objetivo diseñar e implementar un

aplicativo móvil con realidad aumentada para el museo de ciencias de la universidad de

la Salle.

3

2. MARCO TEÓRICO

En este capítulo se realizó el trabajo investigativo donde se mencionan los

conceptos necesarios para el desarrollo de este trabajo de grado empezando con

conceptos como los sistemas operativos móviles, entornos de desarrollo para la

programación de realidad aumentada y metodologías para la elaboración de la

aplicación móvil.

2.1 Aplicación Móvil

Es un software de aplicación que es creado para correr en dispositivos

móviles, como smartphones y tablets. Las primeras aplicaciones móviles

surgen a finales de los años 90. Algunas de éstas fueron las apps de

contactos, agenda, editores de ringtone. Fueron y son apps que cubren

funciones muy básicas, pero que facilitan la gestión del día a día. Las

aplicaciones móviles fueron evolucionando y surgieron los primeros juegos

populares como el Tetris, instalado por primera vez en un teléfono móvil en

1994, en Dinamarca; o el famoso juego de Nokia, Snake, mundialmente

reconocido. En 2007, con la entrada de Apple y Android en este mercado, las

reglas del juego cambiaron y surgen nuevas estrategias en el mundo de las

apps, apareciendo las tiendas de aplicaciones móviles que permitieron a

otros desarrolladores y compañías externas estar en este mercado para

poder llegar a todos los usuarios que quisieran disfrutar de la experiencia de

utilizar una app.

El concepto de software cambia, dejando de ser necesario comprar los

programas para instalarlos en el ordenador, ya que bastaba con encontrar la

aplicación que querías e instalarla en tu dispositivo móvil. Estas son las

tiendas más conocidos como Google Play y App Store, los cuales

4

actualmente cuentan con un total de 6 millones de aplicaciones

aproximadamente, según los últimos datos recogidos por Statista. (Juarez,

2019)

2.1.1 Tipos de aplicación

Hay 3 tipos de aplicaciones: nativa, web, e hibrida.

Nativa: Las aplicaciones nativas son específicamente creadas para una

plataforma, como iPhone o Android, y pueden hacer uso de todas las

características del dispositivo, como la cámara, GPS, lista de contactos,

y notificaciones del sistema. Son llamadas aplicaciones nativas porque

son “nativas” de cualquiera que sea el dispositivo para el que fueron

desarrolladas para usar. Estas son las aplicaciones que usted

generalmente puede encontrar en lugares como Google Play o la Tienda

de Aplicaciones de Apple (Apple’s App Store). Estas aplicaciones son

generalmente las más rápidas de los tres tipos de aplicaciones. (Meneses

& Laveriano, 2016)

Web: Una aplicación web es un sitio web que actúa como una aplicación

nativa, pero no están instaladas o implementadas de la misma forma.

Ellas usan un navegador web y usualmente usan HTML5. También se

apoyan en un navegador web en común de acuerdo para interpretar la

aplicación. Sin embargo, la distinción entre aplicaciones nativas y

aplicaciones web está volviéndose cada vez más pequeña mientras más

sitios comienzan a usar HTML5. Una aplicación web puede tener algunas

ventajas sobre una aplicación nativa porque son más fáciles de crear y

desarrollar y proveen compatibilidad entre plataformas. (Meneses &

Laveriano, 2016)

Híbrida: Una aplicación híbrida es justo lo que el nombre indica – una

combinación entre una aplicación web y una aplicación nativa. Ellas

5

“viven” en una tienda de aplicaciones y pueden hacer uso de las

características del dispositivo casi de la misma forma que una aplicación

nativa. (Meneses & Laveriano, 2016)

2.2 Sistemas Operativos Móviles

Los sistemas operativos móviles son sistemas ligeros que controlan un dispositivo

móvil y están orientados a la conectividad inalámbrica. Según lo visto anteriormente,

las empresas desarrolladas de sistemas operativos y aplicaciones móviles ganaron

fuerza a través de los años al darle un importante valor agregado a los dispositivos

móviles.

Hoy en día el mercado de aplicaciones móviles tiene cuatro (4) principales

participantes (Android, Apple, RIM, Microsoft). Nokia, con su sistema operativo

Symbian, era el quinto participante hasta el año 2013, que anunció que no sacaría

más celulares inteligentes con este sistema operativo y que los haría con el sistema

operativo de Microsoft. A su vez, Firefox OS, fue lanzado en el mercado en el 2013

con los celulares ZTE. A continuación, se detalla un poco de las características de

cada sistema operativo móvil:

2.2.1 Android

Sistema operativo basado en Linux, que está enfocado para ser utilizado en

dispositivos móviles como teléfonos inteligentes, tabletas y otros dispositivos.

Tiene una gran comunidad de desarrolladores escribiendo aplicaciones para

extender la funcionalidad de los dispositivos. A la fecha, se encuentra bien

posicionado en el mercado de teléfonos inteligentes. Las aplicaciones

oficiales de Android se encuentran en Google Play, tienda de aplicaciones en

6

línea administrada por Google. Los programas están escritos en lenguaje de

programación Java. No obstante, no es un sistema operativo libre de virus.

Android se compone de un núcleo basado en el núcleo Linux 2.6 y Linux

Kernel 3.x (Android 4.0 en adelante), con middleware, librerías y APIs escrito

en C y el software de la aplicación que se ejecuta en un marco de aplicación

incluye bibliotecas compatibles con Java basado en Apache Harmony.

(Bryan, 2012)

Figura 1. Sistema Operativo Android (Android OS, 2020)

Las características con las que cuentan los dispositivos que tiene Android

como sistema operativo son:

- Se adapta a pantallas de distintas resoluciones.

- Utiliza la base de datos SQLite para el almacenamiento de datos.

- Soporta las tecnologías de conectividad: Bluetooth, Wi-Fi,

GSM/EDGE, CDMA.

- Soporta distintas formas de mensajería cortos y multimedia (SMS y

MMS).

- Cuenta con un navegador web.

7

- Soporta aplicaciones que están escritas en el lenguaje de

programación Java.

- Soporta distintos formatos multimedia.

- Soporte hardware adicional como cámara de foros, de video, pantalla

táctil, GPS, entre otros.

- Cuenta con una tienda online, Google Play, la cual es un catálogo de

aplicaciones gratuitas o de pago que pueden ser descargadas e

instaladas.

- Soporta multitarea, es decir, se pueden ejecutar más de dos

aplicaciones al mismo tiempo y video llamada. (Ruiz, 2015)

2.2.2 iOS

Sistema operativo móvil de Apple. Originalmente desarrollado para el

iPhone, siendo después usado en dispositivos como iPod Touch, iPad y

Apple TV, productos de Apple, creador del sistema operativo. La interfaz

de usuario de iOS está basada en el concepto de manipulación directa,

usando gestos multitáctiles. Los elementos de control consisten en

deslizadores, interruptores y botones. La respuesta a las órdenes del

usuario es inmediata y provee de una interfaz fluida. (Meneses &

Laveriano, 2016)

A nivel de hardware y software para desarrollar aplicaciones para ¡OS se

necesita un ordenador Mac con el Kit de Desarrollador de Software SDK

que en este caso es XCode, el software oficial de Apple para desarrollo

para iPhone e iPad, de descarga gratuita. (Pedrozo, 2012)

8

Figura 2. Sistema operativo IOS (Apple Inc, 2021)

Las características con las que cuenta este sistema operativo son:

- Cuenta con una pantalla principal, en la cual se ubican los iconos

de las aplicaciones.

- Brinda un sistema simple de carpetas, con la cual se brinda

facilidad al usuario de mover aplicaciones.

- Cuenta con un centro de notificaciones, acerca de las

actualizaciones del sistema operativo.

- Soporta multitarea.

- No permite ciertas tecnologías como Adobe Flash ni Java.

(Camazón, 2011)

2.2.3 BlackBerry OS

Sistema operativo móvil desarrollo por la empresa Research In Motion

(RIM) para sus dispositivos BlackBerry. El sistema permite multitarea y

tiene soporte para diferentes métodos de entrada. Los dispositivos

BlackBerry permite el acceso a correo electrónico, navegación web y

9

sincronización con programas de IBM, aparte de hacer las funciones

usuales de un teléfono móvil.

Figura 3. BlackBerry 10 OS (Blackberry US Page, 2021)

Las características con las que cuenta este sistema operativo son:

- Está orientado a uso profesional como gestor de correo electrónico

y agenda.

- Cuenta con un servidor (BES) que proporciona acceso y

organización del email en grandes compañías.

- Identifica a cada usuario con un único BlackBerry PIN.

- Permiten que desarrolladores independientes también puedan

crear programas para BlackBerry, pero con acceso limitado.

(Meneses & Laveriano, 2016)

2.3 Unity

Unity es un motor de juego multiplataforma desarrollado por Unity

Technologies, anunciado y lanzado por primera vez en junio de 2005 en la

Conferencia Mundial de Desarrolladores de Apple Inc. como motor de juego

exclusivo de Mac OS X. Desde entonces, el motor se ha ampliado

gradualmente para admitir una variedad de plataformas de escritorio,

10

dispositivos móviles, consolas y realidad virtual. Es particularmente popular

para el desarrollo de juegos móviles iOS y Android y se usa para juegos como

Pokémon Go, Monument Valley, Call of Duty: Mobile, Beat Sabre y Cuphead.

(Bradshaw & Kruppa, 2020)

Figura 4. Unity logo (Unity, 2021)

2.4 Vuforia

Existe un SDK denominado Vuforia (creado por la empresa Qualcomm), que

permite crear aplicaciones de RA en conjunto con Unity3D. Su ventaja como

multiplataforma son la exportación de proyectos a diversos dispositivos

móviles y ordenadores con muy poco espacio de memoria. Es decir, una de

las principales características de Vuforia es que integra en un solo archivo

todos aquellos elementos necesarios para generar una aplicación de RA.

Estos elementos son: una cámara de RA, botones virtuales, marcadores y

scripts. (Cadeñanes, 2014)

Figura 5. Vuforia logo (Vuforia Developer, 2021)

11

2.5 Realidad Aumentada

Realidad Aumentada: también conocida como AR, proporciona una vista en

vivo de un entorno del mundo real con elementos que se incrementan con

imágenes generadas por computadora. A diferencia de la realidad virtual

(VR), que proporciona todo un entorno artificial, AR hace uso del entorno

existente y superpone nueva información sobre él. Desdibuja la línea entre la

realidad y la información generada por computadora al mejorar lo que vemos,

oímos, sentimos y olemos. (Ding M. , Augmented reality in museums, 2017)

Figura 6. Realidad Aumentada. (Realidad Aumentada, 2021)

2.6 Metodologías de desarrollo de aplicaciones móviles2

En el mundo del desarrollo de software existen muchos métodos de

desarrollo, cada uno con sus puntos fuertes y sus puntos débiles. En el caso

del desarrollo de aplicaciones móviles sucede lo mismo.

2 (Vique, 2019)

12

Una de las características importantes de la gran mayoría de los desarrollos

móviles es su corta duración. Esto se debe a factores como la gran

competencia en el sector, los cambios en el mismo con la aparición, casi

constante, de novedades tanto software como hardware, el hecho de que

muchas aplicaciones nacen con un desarrollo precoz en forma de prototipo y

van evolucionando después o incluso la simplicidad de las aplicaciones, que

no requieren grandes desarrollos. Esta suele ser, salvo algunas excepciones,

la norma de los desarrollos de aplicaciones para dispositivos móviles.

2.6.1 Mobile-D

El método Mobile-D se desarrolló junto con un proyecto finlandés en el

2004. Fue realizado, principalmente, por investigadores de la VIT3 y, a

pesar de que es un método antiguo, sigue en vigor (se está utilizando en

proyectos de éxito y está basado en técnicas que funcionan).

El objetivo es conseguir ciclos de desarrollos muy rápidos en equipos muy

pequeños (de no más de diez desarrolladores) trabajando en un mismo

espacio físico. Según este método, trabajando de esa manera se deben

conseguir productos totalmente funcionales en menos de diez semanas.

Se trata de método basado en soluciones conocidas y consolidadas:

Extreme Programming (XP), Crystal Methodologies y Rational Unified

Process (RUP), XP para las prácticas de desarrollo, Crystal para escalar

los métodos y RUP como base en el diseño del ciclo de vida.

3 VIT: Instituto de investigación finlandés

13

Figura 7. Ciclo de Desarrollo Mobile-D (Meneses & Laveriano, 2016)

2.6.1.1 Fases de la metodología mobile-D

Para llevar a cabo el desarrollo de una aplicación móvil mediante la

metodología mobile-D se efectúan las siguientes fases:

2.6.1.1.1 Exploración

El propósito de la fase de exploración es planear y establecer el

proyecto. Esta fase es importante para establecer las bases para

la arquitectura del producto, la elección del entorno y la

implementación del sistema.

2.6.1.1.2 Inicialización

El propósito de esta fase es posibilitar el éxito de las siguientes

fases del proyecto preparando y verificando todos los problemas

críticos del desarrollo, de manera que todos ellos sean corregidos

con prontitud en el final de la fase de aplicación de los requisitos.

14

Además, se preparan todos los recursos físicos, tecnológicos y de

comunicaciones para las actividades de producción.

2.6.1.1.3 Producción

La fase de producción tiene como propósito implementar la

funcionalidad requerida en el producto aplicando un ciclo de

desarrollo iterativo e incremental. El desarrollo basado en pruebas

es utilizado para implementar las funcionalidades.

2.6.1.1.4 Estabilización

El propósito de la fase de estabilización tiene como finalidad

asegurar la calidad de la implementación del proyecto

2.6.1.1.5 Pruebas del sistema

El propósito de la fase de pruebas del sistema es comprobar si el

producto implementa las funcionalidades requeridas

correctamente, y corregir los errores encontrados.

2.6.1.2 Elementos

Existen 9 elementos principales involucrados en las diferentes

prácticas en

el transcurso del ciclo de desarrollo:

- Ajuste y enfoque de fases: los proyectos se llevan a cabo en

iteraciones donde cada una comienza con un día de

planificación.

15

- Línea de arquitectura: este enfoque es utilizado junto con los

patrones de arquitectura y modelo ágil.

- Desarrollo basado en pruebas: el enfoque de pruebas-primero

es utilizado junto con casos de prueba automatizadas.

- Integración continua: las prácticas de Software Configuration

Manager (SCM) se aplican a través de múltiples medios.

- Programación en pares: la codificación, pruebas y

refactorización se lleva a cabo en pares.

- Métricas: pocas métricas se recogen con rigurosidad y se

utilizan con fines de mejorar la retroalimentación y el proceso

de desarrollo.

- Cliente externo: el cliente participa en las jornadas de

planificación y liberación.

- Enfoque centrado en el usuario: se hace hincapié en la

identificación y el cumplimiento de necesidades del usuario

final.

Estos elementos son prácticas ya establecidas en metodologías

agiles, con la inclusión de la línea de arquitectura, que se usa para

capturar el conocimiento de una organización de soluciones

arquitectónicas, tanto de fuentes internas y externas, y usar estas

soluciones cuando sea necesario.

2.7 Justificación y Selección de las herramientas de diseño

Para la selección de las herramientas se realizó un cuadro comparativo en dónde

se exponen las ventajas y desventajas de diferentes herramientas necesarias para

implementar la aplicación de realidad aumentada. Evaluando desde herramientas

de entorno de desarrollo (IDE) y kits de desarrollo de software (SDK) más viables

para el desarrollo del proyecto:

16

Tabla 1. Cuadro comparativo de ventajas y desventajas de herramientas (Fuente: Autora)

Herramientas Ventajas Desventajas

Unity

- Documentación muy

completa en su página

principal

- Permite el uso de varios

lenguajes de

programación C++, C#

y JavaScript

- Jerarquía de trabajo

muy ordenada (Unity,

2021)

- Monodevelop es un IDE

bastante básico y

funcional. Permite

utilizar otros como

Visual Studio con

relativa facilidad. (Unity,

2021)

- Optimización de tiempo

y característica

multiplataforma. (Unity,

2021)

- Alertas en tiempo real

de errores sintácticos,

compatibilidad o

rendimiento antes de

acabar la aplicación.

- El precio de las licencias

es elevado.

- La licencia gratuita

presenta varias

limitaciones. (Unity,

2021).

- Incluye

obligatoriamente el

splash con el logotipo

de Unity en la carga

inicial de la aplicación y

solo puede usarse si la

facturación total de tu

empresa no supera los

100 dólares anuales.

(Unity, 2021)

17

Android Studio

- Documentación

completa en su página

web y foros de

desarrolladores.

- Permite el desarrollo en

lenguajes como Java y

su lenguaje nativo

Kotlin.

- Compilación rápida

- Alertas en tiempo real

de errores sintácticos,

compatibilidad o

rendimiento antes de

acabar la aplicación.

- Se puede desarrollar

sólo para sistemas

operativos Android.

- Requiere de máquina

son elevados, en cuánto

a procesador y espacio.

Vuforia

- Biblioteca que permite

reconocer y hacer el

seguimiento de

imágenes planas

(Image Targets) y

objetos 3D simples.

- Disponible para

Android, iOS y Unity.

- Incluye la parte NDK

+JNI pre-compilada.

Solo se tiene que incluir

bibliotecas y llamar a los

métodos nativos.

- Targets disponibles:

Image, Cylinder, Text-

Dependencia de NDK + JNI, se

amplían los métodos nativos.

- Se centra en visión por

computador, así que no

tenemos la parte GPS.

- Foro de debate, con menor

orientación a comunidad.

(Chacon & Tuiro, 2018)

18

Word, User-defined,

Cloud Recognition,

Multi-Targets, Frame

markers y Virtual

buttons. (Chacon &

Tuiro, 2018)

Wikitude

- Se estructura en wolds.

- Disponible para

Android, iOS,

Backberry, Windows

Phone, Phonegap y

Titanium. (Alvarez,

2021)

- No hay mucha

documentación sobre el

uso de esta

herramienta.

- No es libre.

- No permite monta un

servidor de recursos

propios. (Chacon &

Tuiro, 2018)

ARCore

- Esta SDK se puede

utilizar en dispositivos

tanto ¡OS como

Android.

- se pueden utilizar en

diferentes lenguajes de

programación: Java,

Unity, Unreal y hasta

iOS. De modo que

muchos desarrolladores

pueden trabajar en esta

herramienta.

(Developers Google,

2021)

- Esta SDK funciona para

versiones de Android

superiores a 7.0 y no

funciona en muchos

dispositivos.

- Requiere un dispositivo

móvil con sensores

acelerómetros,

giroscopio y un

procesador lo

suficientemente potente

para soportar la

Realidad Aumentada.

19

(Developers Google,

2021)

ARKit

Un framework utiliza como

técnica la Odometría Visual

Inercial (VIO). Lo que combina

los sensores de movimiento

con la cámara haciendo las

resaltar de las imágenes sus

caracteristicas más distintivas

sin importar el movimiento.

(Developers Apple, 2021)

- Esta framework solo se

puede encontrar en iOS

11 y superiores, en

móviles como iPhone

6s, 7, 7 plus, 8, 8 plus y

X. (Developers Apple,

2021)

Las herramientas seleccionadas son Unity como entorno de desarrollo ya que esta

herramienta tiene la ventaja de lograr un desarrollo para diferentes plataformas

como lo son Windows, iOS, Android entre otras. la curva de aprendizaje frente a las

demás herramientas es baja/media ya que Unity es bastante intuitivo. El uso de C#

como lenguaje de programación facilita el desarrollo ya que es un lenguaje de

programación bastante familiar y del cuál se puede hallar bastante documentación.

Ya que unity es un motor de juegos los gráficos tanto 2D como 3D se presentarán

de manera óptima y con buena calidad siendo una gran ventaja para la visualización

de los especímenes de realidad aumentada.

Para el kit de desarrollo de software para la realidad aumentada se ha seleccionado

Vuforia ya que esta SDK ofrece reconocimiento de targets como imágenes, texto,

cuboides, cilindros y objetos 3D. una detección rápida y un rastreo robusto, que

significa que la target no se perderá incluso cuándo el dispositivo móvil se mueva.

Cuenta con amplia documentación para su utilización y una de las grandes ventajas

20

de esta SDK es que se integra fácilmente para dispositivos más antiguos y no se

limita a los últimos lanzamientos. Lo que resulta beneficioso para el proyecto porque

una amplia gama de dispositivos podría usar el aplicativo de realidad aumentada

sin que sus equipos sean de gamas altas y funcionar de manera adecuada.

21

3. DESARROLLO DE LA APLICACIÓN MÓVIL DE REALIDAD AUMENTADA

En este apartado se muestra el paso a paso del desarrollo del aplicativo, que se

ciñó a las fases que se describen en la metodología mobile-D que fue diseñada

especialmente para aplicaciones móviles logrando de manera más efectiva

desarrollar y documentar todo el trabajo realizado.

3.1 Exploración

Para el primer paso se realiza la exploración, esta fase se definen los actores

y los papeles que desarrollarán dentro del proyecto, se definen las tareas,

actividades y el alcance de estas para cumplir los objetivos del proyecto.

3.1.1 Establecimiento de los grupos de intereses o Stakeholders

En esta etapa se definió a los involucrados en el proyecto y se identificó

sus tareas, roles y responsabilidades:

• Líder de proyecto: Autora de la presente tesis

• Usuarios de la aplicación: Visitantes del museo de la universidad de

la Salle candelaria.

• Sponsor: Museo de Ciencias de la Universidad de la Salle

• Desarrollador: Autora de la presente tesis

• Asesor: Tutor de la presente tesis

3.1.2 Definición del Alcance

Los puntos que se han considerado para el desarrollo del sistema son los

siguientes:

Con relación a los servicios que ofrece el sistema:

22

• Permitir que cualquier usuario pueda ingresar en el aplicativo.

• Permitir a cualquier usuario utilizar la cámara del smartphone para

combinar la imagen aumentada (modelo 3D) con la real.

• Permitir que cualquier usuario visualice en su smartphone el

modelo 3D en diferentes ángulos e interactuar con diferentes

medios (botones, imágenes, etc.)

• Permitir a cualquier usuario navegar por las diferentes interfaces

haciendo uso de botones de navegación

Con relación al desarrollo y caracteristicas de la elaboración del

aplicativo:

• Estará desarrollado para el uso en Smartphone con sistema

operativo Android 4.4 KitKat

• El desarrollo se realizará con el software Unity 2019.4.26f1 y usando

como lenguaje de programación C#.

• Utilizará la metodología Mobile-D, con 5 fases; exploración,

inicialización, producción, estabilización y prueba.

3.1.3 Identificación módulos y requerimientos

El proyecto consiste en la creación de un aplicativo móvil de realidad

aumentada utilizando un lenguaje de programación C#. El aplicativo móvil

permitirá la comunicación de información sobre temas específicos del

museo de ciencias (texto, imágenes, modelos 3D).

Los módulos del aplicativo serán los siguientes:

Tabla 2. Módulos Por Desarrollar (Fuente: Autora)

Código Módulo Descripción

23

M001 Start App

En este módulo se verá en el inicio

de la aplicación el splash de unity y

con el logo del museo de la Salle

usando los colores del manual de

identidad visual.

M002 Inicio

Se desarrolla la interfaz del

contenido que habrá dentro de la

aplicación, dónde se permitirá

ingresar a la visualización según

sea escogido.

M003

Realidad

Aumentada

Interfaz

Se desarrolla el entorno de realidad

aumentada, dónde habrá un retorno

a menú y encendido de la linterna

de la cámara. Además, para

visualizar el entorno real con los

modelos 3D será imperativo el uso

de la cámara del dispositivo, por lo

cual se pedirán permisos para su

acceso.

M004 Reconocimiento

del target

El aplicativo ubicara la imagen

target predeterminada y realizara

una acción indicada según sea el

modelo seleccionado, haciendo uso

de la cámara.

M005 Realidad

Aumentada

El aplicativo mostrará un modelo 3D

en combinación con el mundo real,

logrando una realidad aumentada

en diferentes escenarios.

24

M006 Navegación

Se desarrollan botones de

navegación en las interfaces para

un correcto flujo en el aplicativo.

M007 Recorridos

Se desarrolla una interfaz para

mostrar información acerca de los

modelos 3D

M008 Museo Se desarrolla una interfaz para

mostrar información sobre el museo

M009 Información

Se desarrolla una interfaz para

mostrar instrucciones sobre el uso

de la realidad aumentada.

M010 Evaluación Se realiza una encuesta a personas

que prueben la aplicación

Para los requerimientos se plantean dos tipos funcionales y no funcionales

que van relacionados con los módulos descritos anteriormente de la siguiente

manera:

Tabla 3. Requerimientos funcionales (Fuente: Autora)

Módulo Código Descripción del requerimiento

M001 RF001

El aplicativo mostrará en la interfaz inicial

un splash de 2 segundos con el logo de

Unity y 5 segundos con el logo del museo

de la universidad.

M002

RF002 habrá un botón Cerrar Sesión que permita

al usuario salir del aplicativo.

RF003 Se mostrarán las opciones de interfaces

en las que el usuario podrá navegar.

RF004 Cada opción diferente mostrará la

información correspondiente al tema.

25

M003 RF005

Se desarrollará la interfaz de realidad

aumentada con opción de navegación

mientras se visualiza por la cámara el

entorno real.

M004 RF006

El aplicativo detecta el target y realizara

una acción indicada según la determinada

target que se esté visualizando con la

cámara.

M005 RF007

Se visualizará los modelos 3D mediante la

interfaz de realidad aumentada y la

cámara logrando la combinación de

objetos virtuales con el entorno real

M006 RF008

Se encontrarán diferentes botones que

permitirán la navegación entre interfaces

del aplicativo

M007 RF009

Se tendrá diferentes botones que

muestren una animación visual con

información sobre los modelos 3D del

aplicativo

Se encontrarán diferentes botones que

permitirán la navegación entre interfaces

del aplicativo

M008 RF010

Se visualizará una interfaz con información

del museo, además de una animación con

los botones de navegación

M009 RF011

Se visualizará una interfaz con información

sobre el uso de la Realidad aumentada,

además de una animación con los botones

de navegación

26

Tabla 4.Requerimientos no funcionales (Fuente: Autora)

Código Requerimiento

RNF001 Debe contar con targets predefinidos de buena

resolución

RNF002 La aplicación debe presentar una interfaz amigable y

fácil de usar.

RNF003 Deben usarse los colores del manual de identidad

visual del museo de la universidad.

RNF004

La aplicación deberá funcionar sobre el sistema

operativo Android desde la versión 4.4 KitKat con una

resolución de pantalla de 1920x1080

RNF005

Las interfaces contarán con el logo del museo en la

parte superior izquierda a excepción de la interfaz de

realidad aumentada.

RNF006

La navegación dentro de la aplicación debe ser fluida,

con tiempos de carga de las interfaces no mayor a 5

segundos.

RNF007 La aplicación debe ser fácil de usar

3.1.4 Establecimiento del proyecto

En esta etapa se determinan los recursos físicos y técnicos necesarios

para el desarrollo del proyecto. Las herramientas que se usarán son las

siguientes:

Tabla 5. Herramientas para el desarrollo del proyecto (Fuente: Autora)

IDE Unity 2019.4.26f1

Librería Vuforia 9.8, JDK, SDK

Editor de texto: Visual Studio 2019

27

Lenguaje de programación: C#

Sistema operativo Windows 10 Pro - 64 bit

Equipos Un Computador con procesador

8GB de RAM y con espacio

disponible en disco de 40GB

Programa de diseño Blender

Metodología de desarrollo Mobile-D

Smartphone:

- Android 10.0, 128GB de

disco duro, 4GB de RAM

- Android 6.0, 16 GB de disco

duro, 2GB de RAM

3.2 Inicialización

En esta segunda etapa del proyecto se realiza la preparación del software y

hardware que se usará para el desarrollo del proyecto, se define el plan de

comunicación que se tendrá con todos los actores que hacen parte del

proyecto. Además se realiza la planificación de las tareas y las iteraciones

que se llevaran a cabo para cumplir los requerimientos funcionales.

3.2.1 Configuración del proyecto:

• Preparación del ambiente

Para esta etapa se estableció la instalación de cada una de las

herramientas y la configuración a usar para desarrollar el proyecto por

eso se tiene lo siguiente:

• 1 computador (8GB RAM, 480GB SSD, Sistema operativo

Windows 10).

• Instalador de Unity 2019.4.26f1.

28

• Descargar e instalar el SDK Vuforia dentro del entorno de

trabajo de unity

• Organizar el entorno de desarrollo de Unity (herramientas,

imágenes, modelos, animaciones, scripts, etc.).

• Plan de comunicación

Se utilizó como canales de comunicación con el propósito de

mantenerse informado del desarrollo del programa y una buena

coordinación en su ejecución.

✓ WhatsApp

✓ Teams

✓ OneDrive

✓ Outlook

3.2.2 Arquitectura del proyecto

29

Figura 8. Arquitectura de la aplicación. (Fuente: Autora)

3.2.3 Planificación Inicial

• Planificación por Fases

Tabla 6. Planificación por fases (Fuente: Autora)

Código Iteración Descripción

Exploración Iteración 0

Se definen los Stakeholders, se definen

los alcances, se identifican los módulos

y el análisis de los requerimientos

funcionales y no funcionales y se

establece el proyecto.

Inicialización Iteración 1

Se prepara el ambiente de desarrollo

tanto físico tecnológico y de

comunicaciones, se planean las

siguientes fases. se capacita el equipo.

30

Producción

Iteración 2

Implementación de la funcionalidad del

módulo M001 interfaz splash con el

logo del museo de la universidad

durante 5 segundos.

Iteración 3

Implementación de la funcionalidad del

módulo M002 diseño de la interfaz de

menú de inicio del aplicativo, realización

de mejoras y actualizaciones de

historia de usuario.

Iteración 4

Implementación de la funcionalidad del

módulo M003 diseño de la interfaz de

menú de inicio del aplicativo, realización

de mejoras y actualizaciones de

historia de usuario.

Iteración 5

Implementación de la funcionalidad del

módulo M004 diseño de la interfaz

realización de mejoras y

actualizaciones historias de usuario.

Generación de las pruebas de

aceptación.

Iteración 6

Implementación de la funcionalidad del

módulo M005 diseño de la interfaz

realización de mejoras y

actualizaciones historias de usuario.

Generación de las pruebas de

aceptación.

Iteración 7

Implementación de la funcionalidad del

módulo M006 diseño de las interfaces

realización de mejoras y

31

actualizaciones historias de usuario.

Generación de las pruebas de

aceptación.

Iteración 8

Implementación de la funcionalidad del

módulo M007 diseño de la interfaz

realización de mejoras y

actualizaciones historias de usuario.

Generación de las pruebas de

aceptación.

Iteración 9

Implementación de la funcionalidad del

módulo M008 diseño de la interfaz

realización de mejoras y

actualizaciones historias de usuario.

Generación de las pruebas de

aceptación.

Iteración 10

Implementación de la funcionalidad del

módulo M009 diseño de la interfaz

realización de mejoras y

actualizaciones historias de usuario.

Generación de las pruebas de

aceptación.

Estabilización Iteración 11

Refactorización de las funciones de

todos los módulos, integración de las

versiones estables para un correcto

funcionamiento

Pruebas Iteración 12

Se realizan las pruebas necesarias del

aplicativo final y se analizan los

resultados

32

• Historias de usuario y tarjeta de tareas

Según la metodología se desarrollan historias de usuario y tarjetas

de tareas para los requerimientos funcionales de esta manera

clasificar estos requerimientos por su dificultad, tipo, prioridad

entre otras.

En la tabla 7 se puede observar cómo se va a llevar a cabo el desarrollo a partir de

historias de usuario referentes a los requerimientos funcionales del proyecto.

Otorgando una dificultad y prioridad a cada tarea.

Tabla 7. Modelo de Historia de Usuario (Fuente: Autora)

ID TIPO

DIFICULTAD PRIORIDAD

ESFUERZO Antes Despué

s 1 - 5

Descripción:

Fecha Estado Comentario

• Requisitos de la Aplicación Móvil:

✓ Android 4.4 KitKat o superior

✓ Cámara de 8mp o superior

✓ Procesador mínimo 2 núcleos.

✓ RAM mínimo 1 GB

33

✓ Pantalla de resolución HD.

✓ Espacio de Almacenamiento disponible de 200MB

✓ Pantalla de preferencia 4,7 y 6 pulgadas.

• Esquema de navegabilidad:

Figura 9. Flujo de navegación parte 1. (Fuente: Autora)

34

En la Figura 13. Se presenta el flujo de los splash 1 y 2, a continuación de estos se

presenta un menú de inicio en el cuál usuario podrá ingresar y seleccionar lo que

desee visualizar.

Al seleccionar la primera opción “Realidad aumentada” se podrá apuntar la cámara

hacia los targets diseñados en conjunto con el diseñador del museo de la

universidad de la Salle (Ver Figura 14-16), teniendo estos captados en pantalla se

podrá visualizar los modelos 3D (Tiburón, Serpiente y Murciélago).

Figura 10. Target visualización Tiburón (Fuente: Autora)

35

Figura 11. Target visualización Murciélago (Fuente: Autora)

Figura 12. Target visualización Serpiente (Fuente: Autora)

36

Figura 13. Flujo de pantalla aplicación parte 2 (Fuente: Autora)

Si cualquiera de las ilustraciones anteriores (14-16) se visualiza en la interfaz de

realidad aumentada deberá visualizarse el modelo tal como se ve en los puntos 4.2),

4.3) y 4.4) de la Figura 17, de otro modo si no se visualiza ninguna tarjeta la cámara

solo observará el entorno real en el que se encuentre el visitante

37

Figura 14. Flujo de pantalla aplicación parte 3 (Fuente: Autora)

Para la Figura 18 se visualiza en flujo de navegación si el usuario se dirige a

información, en ella encontrará las targets que deberá buscar dentro del museo

además de instrucciones de como interactuar con los modelos después de haber

sido identificadas las targets.

38

Figura 15. Flujo de pantalla aplicación parte 4 (Fuente: Autora)

Para la Figura 19 se visualiza en flujo de navegación si el usuario se dirige a Museo

de la Salle, en ella encontrará información sobre ubicación y contacto del museo si

con antelación el usuario descarga el aplicativo para una posterior visita.

Figura 16.Flujo de pantalla aplicación parte 5 (Fuente: Autora)

39

Para la Figura 20 se visualiza en flujo de navegación si el usuario se dirige a

Recorridos, en ella encontrará información adicional de los modelos que se

visualizan en la realidad aumentada, esto con el fin de contextualizar e informar.

• Elaboración de prototipos

En la siguiente tabla se describirán cada uno de los prototipos realizados:

Tabla 8. Descripción de prototipos (Fuente: Autora)

Prototipo Descripción

1) Splash 1 - Prototipo - La interfaz tendrá el

logo de la

herramienta en la que

se desarrolló la

aplicación.

- Se tendrá de color de

fondo el seleccionado

del manual de

entidad visual del

museo.

- Se visualiza en

orientación horizontal

en el dispositivo móvil

- El splash tendrá una

duración de 2

segundos

2) Splash 2 - Prototipo

40

- La interfaz con el

splash debe tener el

logo de la universidad

de la Salle en este

caso se tomó el logo

de la Osa con su

osezno.

- Se tendrá de color de

fondo el seleccionado

del manual de

entidad visual del

museo.

- Se visualiza en

orientación horizontal

en el dispositivo móvil

- El splash tendrá una

duración de 5

segundos.

3) Menú Inicio - Prototipo - La interfaz de menú

de inicio debe tener el

logo en la parte

superior izquierda.

- Debe permitir

ingresar al usuario a

4 diferentes

interfaces según se

seleccione.

41

- Debe permitir

desplegar un slider

donde estará el botón

para salir de la

aplicación.

4) Realidad Aumentada - La interfaz debe

permitir el regreso al

menú de inicio

- La interfaz debe

permitir que en casos

de que la cámara no

tenga buena

iluminación pueda

encenderse la

linterna del

dispositivo móvil

- Debe permitir el

acceso a la cámara si

se dio acceso positivo

a su uso.

- Debe no registrar ni

mostrar ningún

modelo si no se

presenta ninguna

target en la cámara

42

- Debe permitirse

visualizar el modelo

del tiburón si la target

correspondiente se

ha identificado en la

cámara.

- Debe permitirse

visualizar el modelo

de la serpiente si la

target

correspondiente se

ha identificado en la

cámara.

- Debe permitirse

visualizar el modelo

del murciélago si la

target

correspondiente se

ha identificado en la

cámara.

5) Información - La interfaz debe tener

el logo en la parte

superior izquierda.

- Debe permitir la

navegación hacia

otras interfaces.

- Debe mostrar

instrucciones sobre el

43

uso de la realidad

aumentada.

6) Museo - La interfaz debe tener

el logo en la parte

superior izquierda.

- Debe permitir la

navegación hacia

otras interfaces.

- Debe mostrar

información de

contacto y ubicación

sobre el museo.

7) Recorridos - La interfaz debe tener

el logo del museo en

la parte superior

izquierda.

- Debe permitir la

navegación hacia el

menú de inicio.

- Debe permitir

desplegar un slider

particular con

información adicional

sobre el espécimen

del murciélago.

- Debe permitir

desplegar un slider

particular con

información adicional

44

sobre el espécimen

del tiburón.

- Debe permitir

desplegar un slider

particular con

información adicional

sobre el espécimen

del Serpiente.

3.3 Producción

El propósito de esta etapa es generar un calendario para llevar las tareas y las

iteraciones que se deben ejecutar. Los contenidos de cada una se definen en tareas en

las que se lleva un orden determinado de trabajo para ser elaboradas. En la tabla 9 se

define la prioridad de cada una siento 5 alta y 1 baja.

3.3.1 Tarjetas de historias de usuario

En la tabla 9 se muestra la lista de historias de usuario necesarias para

el desarrollo del software:

Tabla 9. Historia de Usuarios (Fuente: Autora)

ID Nombre Prioridad

H001 Splash de Inicio 4

H002 Menú Inicio 5

H003 Realidad Aumentada Interfaz 5

45

H004 Activación de la Cámara 5

H005 Reconocimiento de las targets 5

H006 Realidad Aumentada 5

H007 Información 4

H008 Museo 4

H009 Recorridos 4

H010 Evaluación 5

A continuación siguiendo con los lineamientos de la metodología mobile-D se

mostrarán las historias de usuario que describen sus respectivos requerimientos

funcionales, la descripción de la tarea, la fecha definida y en la que se realizó dicho

requerimiento.

Tabla 10. Historia de Usuario H001 (Fuente: Autora)

ID Tipo

Dificultad Esfuerzo

Prioridad Antes Despué

s Estimado Requerido

RF001 Nuevo Fácil Fácil 3h 4h 4

Descripción:

Al iniciar la aplicación deberán aparecer los splash y luego será redirigida a la

interfaz del menú de inicio.

Fecha Estado Comentario

27/03/202

1

Definido

28/03/202

1

Realizado

46

Tabla 11. Historia de Usuario H002 RF002 (Fuente: Autora)

ID Tipo

Dificultad Esfuerzo

Prioridad Antes Después

Estimad

o Requerido

RF002 Nuevo Moderad

a

Moderad

a 3h 3h 5

Descripción:

botón de cerrar que le permita al usuario salir de la aplicación.

Fecha Estado Comentario

28/03/202

1

Definido

29/03/202

1

Realizado

Tabla 12. Historia de Usuario H002 RF003 (Fuente: Autora)

ID Tipo

Dificultad Esfuerzo

Prioridad Antes Después

Estimad

o

Requerido

RF003 Nuevo Fácil Fácil 1h 2h 5

Descripción:

botón de cerrar que le permita al usuario salir de la aplicación.

Fecha Estado Comentario

29/03/202

1

Definido

30/03/202

1

Realizado

47

Tabla 13. Historia de Usuario H002 RF004 (Fuente: Autora)

ID Tipo

Dificultad Esfuerzo

Prioridad Antes Después

Estimad

o

Requerido

RF004 Nuevo Moderad

a

Moderad

a 5h

5h 5

Descripción:

Debe contar con los botones que permitan al usuario navegar dentro de la

aplicación.

Fecha Estado Comentario

30/03/202

1

Definido

1/04/2021 Realizado

Tabla 14. Historia de Usuario H003 RF005 (Fuente: Autora)

ID Tipo

Dificultad Esfuerzo

Prioridad Antes Después

Estimad

o

Requerido

RF005 Nuevo Moderad

a

Moderad

a 5h

7h 5

Descripción:

Debe contar con los botones que permitan al usuario navegar hacia el menú y

encender la linterna del dispositivo en caso de que en la visualización del entorno

sea muy opaca.

Fecha Estado Comentario

1/04/2021 Definido

2/04/2021 Realizado

48

Tabla 15. Historia de Usuario H004 RF006 (Fuente: Autora)

ID Tipo

Dificultad Esfuerzo

Prioridad Antes Después

Estimad

o

Requerido

RF006 Nuevo Difícil Difícil 5h 6h 5

Descripción:

Para la integración del modelo 3D con el entorno real será necesario el uso de la

cámara del dispositivo móvil, por lo cual la aplicación tendrá los permisos para

ejecutar la cámara.

Fecha Estado Comentario

2/04/2021 Definido

8/04/2021 Implementand

o

15/04/202

1 Realizado

16/04/202

1 Verificado

Tabla 16. Historia de usuario H005 RF007 (Fuente: Autora)

ID Tipo

Dificultad Esfuerzo

Prioridad Antes Después

Estimad

o

Requerido

RF006 Nuevo Difícil Difícil 15h 18h 5

Descripción:

La aplicación debe reconocer la target y realizar la acción correspondiente a la

target que se esté visualizando, haciendo uso de la cámara.

Fecha Estado Comentario

2/04/2021 Definido

49

8/04/2021 Implementand

o

15/04/202

1 Realizado

16/04/202

1 Verificado

Tabla 17. Historia de Usuario H006 RF008 (Fuente: Autora)

ID Tipo

Dificultad Esfuerzo

Prioridad Antes Después

Estimad

o

Requerido

RF007 Nuevo Difícil Difícil 24h 26h 5

Descripción:

La aplicación debe mostrar el modelo 3D en integración con el entorno real,

logrando una realidad aumentada en diferentes escenarios según sea la target

que se esté identificando mediante la cámara.

Fecha Estado Comentario

16/04/202

1 Definido

17/04/202

1

Implementand

o

26/04/202

1 Realizado

27/04/202

1 Verificado

Tabla 18. Historia de Usuario H007 RF009 (Fuente: Autora)

ID Tipo Dificultad Esfuerzo Prioridad

50

Antes Después

Estimad

o

Requerido

RF009 Nuevo Difícil Difícil 4h 4h 4

Descripción:

La interfaz de información debe contener instrucciones de cómo utilizar la realidad

aumentada, además de botones para la navegación hacia otras interfaces.

Fecha Estado Comentario

28/04/202

1 Definido

27/04/202

1

Implementand

o

Tabla 19. Historia de Usuario H008 RF010 (Fuente: Autora)

ID Tipo

Dificultad Esfuerzo

Prioridad Antes Después Estimad

o Requerido

RF010 Nuevo Modera

da

Moderad

a 3h 3h 4

Descripción:

La interfaz de Museo debe contener información de contacto y ubicación del

museo de la universidad de la Salle, además de botones para la navegación hacia

otras interfaces.

Fecha Estado Comentario

28/04/2021 Definido

29/04/2021 Realizad

o

51

Tabla 20. Historia de usuario H009 RF011 (Fuente: Autora)

ID Tipo

Dificultad Esfuerzo

Prioridad Antes Después Estimad

o Requerido

RF010 Nuevo Moderad

a

Moderad

a 3h 3h 4

Descripción:

La interfaz de recorridos debe contener información adicional sobre los modelos

3D que se visualizan en la realidad aumentada, además de botones para la

navegación hacia otras interfaces.

Fecha Estado Comentario

30/04/202

1

Definido

02/05/202

1

Realizado

Tabla 21. Historia de Usuario H010 (Fuente: Autora)

ID Tipo

Dificultad Esfuerzo

Prioridad Antes Después Estimad

o Requerido

RF010 Nuevo Moderad

a

Moderad

a 10h 10h 5

Descripción:

Se realiza encuestas a personas que han puesto a prueba la aplicación para su

posterior evaluación.

Fecha Estado Comentario

03/04/202

1

Definido

52

07/05/202

1

Realizado

3.4 Estabilización

La fase de estabilización tiene como objetivo garantizar la calidad de la integración

de todos los componentes del aplicativo tanto interfaces, como de la realidad

aumentada, de esta manera se verificó la organización del aplicativo, los conceptos

de diseño y el patrón arquitectónico por capas. Además se encontrarán diagramas

de clase de la programación que se integra con los objetos multimedia y finalmente

el diagrama de casos de uso.

Como se ha mencionado anteriormente el patrón arquitectónico usado son las

capas. Usando dos capas. La capa de presentación en la que se encuentra la

interfaz de usuario y el escenario. La capa de negocio contiene los objetos de juego

y aplicación. Como se observa en la Figura 21.

Figura 17. Diagrama de capas del Aplicativo (Fuente: Autora)

53

La capa de Presentación está compuesta por dos partes la interfaz de usuario y el

escenario. Las interfaces son un conjunto de los diversos escenarios que se

desarrollaron.

Interfaz de Usuario: Las interfaces o ventanas contienen la información con la que

se encontrarán los usuarios de la aplicación, es contenido adicional que se brindó

sobre instrucciones para el uso de la realidad aumentada, los modelos 3D que se

visualizan y además información del museo de la Salle. Estas interfaces son lo

primero que podrá apreciar el usuario al entrar y navegar en la aplicación de modo

que se realizaron para que sean intuitivas. Adicionalmente se usa para dar

identidad y relación con el Museo de la Universidad de la Salle el logotipo y colores

del manual de identidad.

Figura 18. Nivel de interfaz de usuario de la aplicación (Fuente: Autora)

Escenario: en la capa de escenario se van a encontrar los objetos multimedia que

se integran en conjunto para realizar las interfaces en las que el usuario va a

interactuar, de esta manera se puede ver en las figura 23 los objetos que en

54

componen un escenario y en conjunto harán parte de la interfaz que visualizará el

usuario.

Figura 19. Nivel de Escenario del aplicativo (Fuente: Autora)

Objetos de juego: Para la capa de negocio específicamente en los objetos de juego

se realiza la integración de módulos que están encargados de ofrecer caracteristicas

propias del aplicativo, en este caso los objetos 3D y sus respectivas animaciones

son los objetos de juego.

Figura 20. Objetos del juego (Fuente: Autora)

55

Aplicación:

En esta capa se integran los objetos del juego en base a la lógica, esta capa está

encargada de proporcionar los recursos disponibles a través de la interfaz de modo

que ocurran eventos o en este caso animaciones. En la figura 25 se presenta la

clase SliderAnimation esta clase va a contener métodos que permitirán que los

objetos, paneles e imágenes tengas animaciones en las diferentes interfaces, de

manera que objetos del escenario en la clase se les atribuye la variable de

GameObject y a los controladores de la animación se les llama en los métodos para

que cuándo el usuario presione un botón los sliders con la información que desea

ver el usuario en la interfaz aparezca o desaparezcan

Figura 21. Diagrama de clase capa negocio (Fuente: Autora)

56

Figura 22. Evento de slider menú principal (Fuente: Autora)

Figura 23. Evento del aplicativo. (Fuente: Autora)

57

Figura 24. Diagrama de clases capa negocio (Fuente: Autora)

El diagrama de clases que se evidencia en la Figura 28 dónde se tienen cuatro

clases distintas para realizar las funciones de trasladar, rotar y escalar. Usando

librerías de LeanTouch que facilita funciones que nos permiten configurar dedos

para la utilización de los métodos y también configurar la sensibilidad al interactuar

con el modelo. Estas clases tienen métodos respectivos Reset, Awake Update que

son los principales encargos de leer la posición del usuario en la pantalla y de esta

manera convertir esos puntos en vectores para mover, rotar o escalar los modelos.

Las variables sensibilidad, inercia y damping serán variables de entrada que se

pueden configurar por cada modelo para que al realizar cualquier interacción con

los modelos está no sea brusca y desoriente al usuario.

La clase de linterna accede a la librería de Vuforia que accede a la cámara y

hardware del dispositivo para encender la linterna cuando se requiera mejorar la

visualización de la target y finalmente SalirAp que contendrá la función que permite

al usuario salir del aplicativo.

58

En la estabilización además de organizarse el aplicativo con la correspondiente

arquitectura se sincronizaron los scripts de código, los objetos de juego, interfaz y

demás elementos que permiten la navegación de la aplicación, tanto como a

diferentes menús como en la interfaz de realidad aumentada para la interacción con

los modelos 3D.

Para tener claridad del uso de estas capas y los eventos que podrá realizar el

usuario dentro de la aplicación se realizó el siguiente caso de uso.

Figura 25. Casos de uso (Fuente: Autora)

3.5 Pruebas

Para garantizar el correcto funcionamiento de las anteriores funciones estabilizadas

y además garantizar que todos los requerimientos planteados para cada módulo

funcionen adecuadamente se realizan y evalúan casos de prueba. Documentando

así el resultado esperado y el resultado obtenido de las pruebas realizadas al

aplicativo por la desarrolladora en este caso la autora del presente trabajo de grado.

3.5.1 Objetivo

Garantizar el cumplimiento de los requerimientos funcionales de manera que

se compruebe el correcto funcionamiento de la aplicación

59

3.5.2 Estrategia de pruebas:

Se realizan casos de prueba en los que se verifica los requerimientos

funcionales, los casos de prueba son los siguientes:

Tabla 22. Caso de prueba 1 (Fuente: Autora)

Identificador Prueba_001

Nombre del caso Start App

Módulo M001

Requerimiento funcional RF001

Objetivo Comprobar la correcta carga del aplicativo

Precondición Ingresar al aplicativo

Paso Resultado esperado Resultado real

Iniciar aplicación

Splash de inicio 1

Splash de inicio 2

Tabla 23. Caso de prueba 2 (Fuente: Autora)

Identificador Prueba_002

Nombre del caso Inicio

Módulo M002

Requerimiento funcional

RF002

RF003

RF004

Objetivo Comprobar la correcta presentación de la interfaz de

menú de inicio

60

Precondición Ingresar al aplicativo

Paso Resultado esperado Resultado real

Iniciar Aplicación Menú Inicio

Tabla 24. Caso de prueba 3 (Fuente: Autora)

Identificador Prueba_003

Nombre del caso Realidad Aumentada Interfaz

Módulo M003

Requerimiento funcional RF005

Objetivo Comprobar la correcta presentación de la interfaz de

Realidad Aumentada

Precondición El usuario ha seleccionado la opción “Realidad

Aumentada”

Paso Resultado esperado Resultado real

Seleccionar opción

“Realidad Aumentada”

Interfaz Realidad

Aumentada

Tabla 25. Caso de prueba 4 (Fuente: Autora)

Identificador Prueba_004

Nombre del caso Reconocimiento de targets, Realidad Aumentada

Módulo M004, M005

Requerimiento funcional RF006

RF007

61

Objetivo Comprobar la correcta identificación por parte de la

cámara de las targets y el renderizado del modelo 3D

después de la identificación.

Precondición El usuario ha seleccionado la opción “Realidad

Aumentada”

Paso Resultado esperado Resultado real

Seleccionar opción

“Realidad Aumentada”

Interfaz Realidad

Aumentada

Tabla 26. Caso de prueba 5 (Fuente: Autora)

Identificador Prueba_005

Nombre del caso Interfaz información

Módulo M007

Requerimiento

funcional

RF009

Objetivo Comprobar el correcto funcionamiento de la interfaz

información

Precondición El usuario ha seleccionado la opción “Información”

62

Paso Resultado esperado Resultado real

Seleccionar opción

“Información” Interfaz Información

Tabla 27. Caso de prueba 6 (Fuente: Autora)

Identificador Prueba_006

Nombre del caso Interfaz Museo

Módulo M008

Requerimiento

funcional

RF010

Objetivo Comprobar el correcto funcionamiento de la interfaz

museo

Precondición El usuario ha seleccionado la opción “Museo”

Paso Resultado esperado Resultado real

Seleccionar opción

“Museo” Interfaz Museo

Tabla 28. Caso de prueba 7 (Fuente: Autora)

Identificador Prueba_007

Nombre del caso Interfaz Recorridos

Módulo M009

63

Requerimiento

funcional

RF011

Objetivo Comprobar el correcto funcionamiento de la interfaz

recorridos

Precondición El usuario ha seleccionado la opción “recorridos”

Paso Resultado esperado Resultado real

Seleccionar opción

“Recorridos” Interfaz Recorridos

64

4. RESULTADOS Y VALIDACIÓN

Para evaluar y verificar los resultados de las anteriores fases se realizan pruebas y

una encuesta que determine la funcionalidad del aplicativo como lo es; el uso en

distintas versiones del sistema operativo Android, el adecuado renderizado de los

modelos 3D además de la navegación y otras funciones del aplicativo, de esta

manera se procedió a definir la metodología y a validar e interpretar los resultados

de la encuesta.

4.1 Metodología verificación y validación

La verificación y validación del funcionamiento del aplicativo se llevó a cabo en dos

partes, la primera fue mediante 38 personas que probaron el aplicativo y resolvieron

un cuestionario y la segunda parte la realizaron dos personas que se encargaron de

poner a prueba y cronometrar el tiempo de la identificación de las targets y posterior

visualización del modelo 3D.

Preguntas del cuestionario:

Tabla 29. Cuestionario preguntas para los usuarios de la prueba. (Fuente: Autora)

N.º Pregunta Respuestas

1 Seleccione el rango de edad al que pertenece

13 – 18 años

19 – 27 años

28 años o más

2 Sí

Algunas

65

¿Suele usar aplicaciones móviles educativas o

de ocio diferentes a las redes sociales

(Instagram, Facebook, Twitter, etc.)?

Muy pocas

No

3 ¿Con qué frecuencia suele usted visitar

museos?

Muy a menudo

Habitualmente

Muy poco

Casi nunca

Nunca

4 La instalación de la aplicación fue:

Muy sencilla

Fácil

Dificultad media

Difícil

Muy complicada

5 El proceso de instalación de la aplicación se

llevó a cabo:

Rápidamente

En el tiempo

estimado

Lentamente

6 ¿Son las interfaces de la aplicación fáciles de

usar?

Mas bien sí

Dificultad media

Mas bien no

No

7 ¿Con qué frecuencia "se cuelga" o "se

bloquea" la aplicación?

Nunca

Casi nunca

A veces

Bastante frecuente

Muy a menudo

8 ¿Cuál es su nivel de satisfacción con el

rendimiento de la aplicación?

1

2

66

3

4

5

9 El uso de la realidad aumentada en la

aplicación le resultó:

Muy sencilla

Fácil

Dificultad intermedia

Difícil

10

¿Le motivaría visitar un museo donde hagan

uso de esta aplicación de realidad

aumentada?

Definitivamente sí

Probablemente sí

No lo sé

Probablemente no

Seguramente no

11

¿Cuál es su nivel de satisfacción la

visualización de realidad aumentada en la

aplicación?

1

2

3

4

5

12 ¿Recomendarías la app a tus conocidos?

Tal vez

No

13 ¿Volverías a usar la aplicación para conocer

museos?

Tal vez

No

14 ¿Qué versión de Android tiene su dispositivo

móvil?

4.4 a 5.1.1(KitKat,

Lollipop)

6.0 a 7.1.2

(Marshmallow,

Nougat)

8.0 a 9.0 (Oreo, Pie)

67

10.0 a 11.0

4.2 Resultados de la verificación y validación

Para la primer parte se tienen los resultados de la encuesta realizada a 38

personas incluidos personal del museo de la universidad de la Salle.

Tabla 30. Respuestas 1era pregunta(Fuente: Autora)

Seleccione el rango de edad al que pertenece

# respuestas Porcentaje (%)

13 – 18 años 2 5.3

19 – 27 años 30 78.9

28 años o más 6 15.8

Figura 26. Diagrama de torta respuestas primera pregunta (Fuente: Autora)

1). Interpretación: se realizaron las pruebas de modo que pudiera haber

rangos de edad diferentes para tener conocimiento de la dificultad de uso del

aplicativo de esta manera se tiene que la mayor parte de quienes probaron

la aplicación tienen entre 19 a 27 años, los otros porcentajes menores a este

corresponden a los rangos de 28 años o más con la cantidad de 6 personas

y en menor cantidad el rango de 13 a 18 años con dos personas.

68

Tabla 31. Respuestas segunda pregunta (Fuente: Autora)

¿Suele usar aplicaciones móviles educativas o de ocio diferentes a las

redes sociales (Instagram, Facebook, Twitter, etc.)?

# respuestas Porcentaje (%)

Sí 21 55.3

Algunas 9 23.7

Muy pocas 8 21.1

No 0 0

Figura 27. Diagrama de torta segunda pregunta (Fuente: Autora)

2). Interpretación: siendo importante tener como conocimiento si la

población manejaba otras aplicaciones móviles aparte de las redes sociales

para saber su capacidad de interactuar con la tecnología resultó que todos

manejaban apps educativas, incluso si fueran pocas.

Tabla 32. Respuestas tercera pregunta (Fuente: Autora)

¿Con qué frecuencia suele usted visitar museos?

# respuestas Porcentaje (%)

69

Muy a menudo 2 5.3

Habitualmente 11 28.9

Muy poco 17 44.7

Casi nunca 8 21.1

Nunca 0 0

Figura 28. Diagrama de torta tercera pregunta (Fuente: Autora)

3). Interpretación: Para contextualizar las preguntas sobre el aplicativo era

necesario saber con qué frecuencia la población visitaba museos siendo que

la gran mayoría iba a los museos muy poco o casi nunca solo el 34.2% de la

población va habitualmente o a menudo.

Tabla 33. Respuestas cuarta pregunta (Fuente: Autora)

La instalación de la aplicación fue:

# respuestas Porcentaje (%)

Muy sencilla 16 42.1

Fácil 16 42.1

Dificultad media 5 13.2

70

Difícil 0 0

Muy complicada 1 2.6

Figura 29. Diagrama de torta cuarta pregunta (Fuente: Autora)

4). Interpretación: Debido a que eran pruebas para la aplicación y esta no

se encuentra aún en la Play Store el aplicativo se dejó en un archivo APK en

la nube para que la población pudiese hacer la descarga e instalación desde

allí. Aún con este procedimiento la población mayormente considero que la

instalación del aplicativo se realizó de manera sencilla.

Tabla 34. Respuesta quinta pregunta (Fuente: Autora)

El proceso de instalación de la aplicación se llevó a cabo:

# respuestas Porcentaje (%)

Rápidamente 26 68.4

En el tiempo estimado 8 21.1

Lentamente 4 10.5

71

Figura 30. Diagrama de torta quinta pregunta (Fuente: Autora)

5). Interpretación: El proceso de instalación para la mayoría de los usuarios

que probaron la aplicación se realizó rápidamente a pesar de que el peso de

la aplicación es de 35MB siendo una app que ocupa más espacio en

comparación con otras usadas habitualmente.

Tabla 35. Resultados sexta pregunta (Fuente: Autora)

¿Son las interfaces de la aplicación fáciles de usar?

# respuestas Porcentaje (%)

Sí 28 73.7

Más bien sí 7 18.4

Dificultad media 3 7.9

Más bien no 0 0

No 0 0

72

Figura 31. Diagrama de torta sexta pregunta (Fuente: Autora)

6). Interpretación: Para el estudio era importante conocer si las interfaces

eran fáciles de usar y navegar ya que los usuarios de este aplicativo pueden

tener rangos de edad muy amplios. Pero para la gran mayoría consideran

que sí y más bien sí. Con un 92.1%

Tabla 36. Respuesta séptima pregunta (Fuente: Autora)

¿Con qué frecuencia "se cuelga" o "se bloquea" la aplicación?

# respuestas Porcentaje (%)

Nunca 16 42.1

Casi nunca 16 42.1

A veces 6 15.8

Bastante frecuente 0 0

Muy a menudo 0 0

73

Figura 32. Diagrama de torta séptima pregunta (Fuente: Autora)

7). Interpretación: las respuestas de los usuarios que probaron la aplicación

es que a 6 personas se les bloqueó a veces, mientras que a 32 personas casi

nunca o nunca se les bloqueó.

Tabla 37. Tabla octava pregunta (Fuente: Autora)

¿Cuál es su nivel de satisfacción con el rendimiento de la aplicación?

# respuestas Porcentaje (%)

5 25 73.5

4 9 26.5

3 0 0

2 0 0

1 0 0

74

Figura 33. Diagrama de barras octava pregunta (Fuente: Autora)

8). Interpretación: el nivel de satisfacción que tiene el aplicativo en general

es bastante bueno ya que 26 personas afirmaron una puntuación de 5 o

estar muy satisfechos con el aplicativo mientras que los 12 restantes

puntuaron con 4.

Tabla 38. Respuesta novena pregunta (Fuente: Autora)

El uso de la realidad aumentada en la aplicación le resultó:

# respuestas Porcentaje (%)

Muy sencilla 20 52.6

Fácil 15 39.5

Dificultad media 3 7.9

Difícil 0 0

75

Figura 34. Diagrama de torta novena pregunta (Fuente: Autora)

9). Interpretación: ya que la realidad aumentada permite interactuar con los

modelos era imperativo conocer la dificultad del usuario manipulando estas

funciones de la aplicación y como resultados a la mayoría con un porcentaje

de 92.1% le resultó muy sencilla y fácil de manipular.

Tabla 39. Respuesta decima pregunta (Fuente: Autora)

¿Le motivaría visitar un museo donde hagan uso de esta aplicación de

realidad aumentada?

# respuestas Porcentaje (%)

Definitivamente sí 27 71.1

Probablemente sí 11 28.9

No lo sé 0 0

Probablemente no 0 0

Seguramente no 0 0

76

Figura 35. Diagrama de torta decima pregunta (Fuente: Autora)

10). Interpretación: como formulación del problema se tenía en el presente

proyecto de grado si hubiera una relación entre la aplicación y la motivación

de posibles usuarios en visitar el museo de este modo esta pregunta en

específico nos muestra que en la población un 71.1% definitivamente sí los

motivaría visitar un museo con esta aplicación de realidad aumentada y el

28.9% restante probablemente sí los motivaría.

Tabla 40. Respuestas décimo primera pregunta (Fuente: Autora)

¿Cuál es su nivel de satisfacción la visualización de realidad aumentada

en la aplicación?

# respuestas Porcentaje (%)

5 27 71.1

4 10 26.3

3 1 2.6

2 0 0

1 0 0

77

Figura 36. Diagrama de barras décimo primera pregunta (Fuente: Autora)

11). Interpretación: en esta pregunta se evidencia la satisfacción de los

usuarios con respecto a la visualización de realidad aumentada resultando

que 27 personas estaban muy satisfechas puntuando con 5 puntos la realidad

aumentada, 10 personas estaban satisfechas y una persona le dio 3 puntos.

Tabla 41. Respuestas décimo segunda pregunta (Fuente: Autora)

¿Recomendarías la app a tus conocidos?

# respuestas Porcentaje (%)

Sí 30 78.9

Tal vez 8 21.1

No 0 0

78

Figura 37. Diagrama de torta décimo segunda pregunta (Fuente: Autora)

12). Interpretación: la satisfacción del usuario va ligado con la

recomendación a que otros usuarios prueben la aplicación de modo que para

evidenciar esto se puede notar que un 78.9% de los usuarios que probaron

la app recomendaría a otras personas su uso y un 21.1% tal vez lo haría.

Tabla 42. Respuestas décimo tercera pregunta (Fuente: Autora)

¿Volverías a usar la aplicación para conocer museos?

# respuestas Porcentaje (%)

Sí 34 89.5

Tal vez 4 10.5

No 0 0

79

Figura 38. Diagrama de barras décimo tercera pregunta (Fuente: Autora)

13). Interpretación: el uso de la realidad aumentada puede darse en muchos

tópicos en los museos, de modo que se cuestionó a la población si volverían

a usar esta aplicación para conocer distintos museos siendo el porcentaje

afirmativo en su mayoría con un 89.5%.

Tabla 43. Respuestas décimo cuarta pregunta (Fuente: Autora)

¿Qué versión de Android tiene su dispositivo móvil?

# respuestas Porcentaje (%)

4.4 a 5.1.1(KitKat, Lollipop) 6 15.8

6.0 a 7.1.2 (Marshmallow,

Nougat) 8 21.1

8.0 a 9.0 (Oreo, Pie) 8 23.7

10.0 a 11.0 15 39.5

80

Figura 39. Diagrama de barras décimo cuarta pregunta (Fuente: Autora)

14). Interpretación: para comprobar que la aplicación funcionará en distintas

versiones de Android se realizó esta pregunta denotando que hay variedad

de versiones en las que funciona la aplicación de realidad aumentada.

En la segunda parte se realizó las pruebas del tiempo de reconocimiento de las

targets:

El primer usuario probó la aplicación en un dispositivo móvil marca Huawei Y7 2019

con versión de Android 8.1.0, RAM de 3GB mostrando como resultado de las

pruebas lo siguiente:

Tabla 44. Pruebas de tiempo de reconocimiento usuario 1 (Fuente: Autora)

N.º Tiempo (s)

Prueba 1 1,76

Prueba 2 1,84

Prueba 3 1,92

Prueba 4 1,8

Prueba 5 1,72

Prueba 6 1,64

Prueba 7 1,67

81

Prueba 8 1,61

Prueba 9 1,42

Prueba 10 1,45

Prueba 11 1,58

Prueba 12 1,65

Prueba 13 1,4

Prueba 14 1,38

Prueba 15 1,38

Prueba 16 1,42

Prueba 17 1,37

Prueba 18 1,33

Prueba 19 1,34

Prueba 20 1,35

Prueba 21 1,38

Prueba 22 1,47

Prueba 23 1,31

Prueba 24 1,2

Prueba 25 1,24

Prueba 26 1,18

Prueba 27 1,2

Prueba 28 1,31

Prueba 29 1,14

Prueba 30 1,2

82

Figura 40. Datos pruebas de reconocimiento target usuario 1 (Fuente: Autora)

Los valores obtenidos para la media y la mediana son:

Tabla 45. Media y Mediana prueba usuario 1 (Fuente: Autora)

Media Mediana

1,455 1,39

Los valores obtenidos para el tiempo de reconocimiento son muy buenos teniendo

un promedio de 1.45 segundos para que la cámara reconozca la target del cualquier

modelo aleatorio.

El segundo usuario probó la aplicación en un dispositivo móvil marca Huawei Y9

Prime 2019 con versión de Android 10.0, RAM de 4GB mostrando como resultado

de las pruebas lo siguiente:

0

0,5

1

1,5

2

2,5

0 5 10 15 20 25 30

Tie

mp

o (

s)

Número de prueba

TIEMPO DE RECONOCIMIENTO DE UNA TARGET

83

Tabla 46. Pruebas de tiempo de reconocimiento usuario 2 (Fuente: Autora)

N.º Tiempo (s)

Prueba 1 1,17

Prueba 2 1,06

Prueba 3 1,04

Prueba 4 1,89

Prueba 5 2,44

Prueba 6 1,65

Prueba 7 1,86

Prueba 8 0,95

Prueba 9 1,51

Prueba 10 1,51

Prueba 11 1,56

Prueba 12 1,28

Prueba 13 1,28

Prueba 14 1,13

Prueba 15 1,76

Prueba 16 1,13

Prueba 17 1,96

Prueba 18 1,13

Prueba 19 2,01

Prueba 20 1,75

Prueba 21 2,74

Prueba 22 1,63

Prueba 23 1,94

Prueba 24 1,16

Prueba 25 1,05

Prueba 26 1,87

84

Prueba 27 1,4

Prueba 28 1,62

Prueba 29 1,65

Prueba 30 1,87

Los valores obtenidos para la media y la mediana son:

Tabla 47. Media y mediana prueba usuario 2 (Fuente: Autora)

Media Mediana

1,57 1,59

Los valores obtenidos para el tiempo de reconocimiento siguen siendo muy buenos

teniendo un promedio de 1.57 segundos para que la cámara reconozca la target

del cualquier modelo aleatorio.

Figura 41. Datos pruebas de reconocimiento target persona 2 (Fuente: Autora)

0

0,5

1

1,5

2

2,5

3

0 5 10 15 20 25 30

Tie

mp

o (

s)

Número de la prueba

TIEMPO DE RECONOCIMIENTO DE UNA TARGET

85

5. CONCLUSIONES Y RECOMENDACIONES

5.1 CONCLUSIONES

- El entorno de realidad aumentada funciona de manera adecuada siendo el

tiempo de reconocimiento de la target aproximadamente 1,5 segundos

siendo un tiempo pequeño para la posterior interacción con el modelo 3D

- Las interfaces de navegación de la aplicación de realidad aumentada son

intuitivas y fáciles de usar según más del 70% de los usuarios que tuvieron a

prueba el aplicativo.

- Se validó que para las versiones Android 4.4 en adelante el aplicativo

funciona correctamente, tanto la realidad aumentada como la navegación

entre las interfaces.

- Más del 71% de los usuarios que probaron la aplicación definitivamente sí

les motivaría visitar el museo de la universidad de la Salle con el fin de

visualizar la realidad aumentada.

- Según resultados y comentarios de la encuesta (Ver Anexo 3) el uso de la

realidad aumentada demostró ser un factor muy estimulante para los

usuarios que probaron la aplicación ya que resaltaron el hecho de poder

apreciar más modelos de realidad aumentada.

- El nivel de satisfacción de los usuarios con respecto a la realidad aumentada

tuvo un porcentaje del 71.1% para usuarios que se sentían muy satisfechos

y puntearon con 5 puntos esta funcionalidad.

- El porcentaje de los usuarios que volverían a usar la aplicación para conocer

museos es del 89.5% demostrando que puede ser una herramienta potente

para la exposición y manejo de los temas dentro de un museo.

86

5.2 RECOMENDACIONES

- Con el fin de mejorar la experiencia de los usuarios al visitar el museo de

ciencias de la universidad de la Salle, se recomienda añadir más modelos 3D

del mismo modo agregar en los recorridos más información sobre los

modelos.

- Como respuesta de muchos usuarios que probaron la aplicación se

recomienda que los modelos 3D aparte de estar animados con movimiento

tengan sonidos para hacerlos más entretenidos.

- Se recomienda continuar con el desarrollo de la aplicación mediante la

metodología mobile-D ya que tiene muchas ventajas a la hora de desarrollar

una aplicación móvil.

- Se recomienda mejorar las interfaces de usuario para que cause más

satisfacción a los usuarios navegar en la aplicación.

- Agregar funciones para que los usuarios puedan fotografiarse con los

modelos de realidad aumentada.

- Reducir el tamaño de la aplicación para que dispositivos móviles antiguos y

con poco espacio de memoria puedan usarla.

87

BIBLIOGRAFÍA

(2021). Obtenido de Apple Inc: http://www.apple.com/ios

(27 de Abril de 2021). Obtenido de Blackberry US Page:

https://www.blackberry.com/us/en/support/devices

Alonso, A., Artime, I., Rodríguez, M., & Baniello, R. (2011). Dispositivos móviles.

PSIG Ing. Telecomunicación Universidad de Oviedo, 12.

Alvarez, N. (2021). Realidad Aumentada, reconocimiento de imágenes y

geolocalización usando google Maps. Obtenido de

https://www.slideshare.net/neonigma/android-radevfestsur

Android OS. (16 de 07 de 2020). Obtenido de

https://www.unocero.com/smartphones/google-creara-nueva-version-

android-equipos-economicos-india/

Bradshaw, T., & Kruppa, M. (2020). Epic and Unity rev their engines for the next era

of entertainment. Financial Times.

Bryan, A. (2012). Android (Operating System) - Unabridged Guide. Estados Unidos.

Cadeñanes, J. J. (2014). Realidad aumentada en libros digitales educativos y juegos

interactivo.

Camazón, J. N. (2011). Sistemas operativos monopuesto. Editex.

Chacon, N. L., & Tuiro, J. M. (2018). Aplicación móvil de realidad aumentada,

utilizando la metodología Mobile-D, para el entrenamiento de técnicos de

mantenimiento de maquinaria pesada en la empresa Zamine Service Perú

SAC.

Cuello, J., & Vittone, J. (2013). Diseñando apps para móviles.

88

Developers Apple. (2021). Obtenido de ArKit:

https://developer.apple.com/augmented-reality/

Developers Google. (2021). Obtenido de ARCore :

https://developers.google.com/ar/discover

Ding, M. (2017). Augmented reality in museums. 1-15.

Ding, M. (2017). Augmented reality in museums. 1-15.

Ding, M. (2017). Augmented reality in museums. Museums & augmented reality–A

collection of essays from the arts management and technology laboratory. 1-

15.

Juliani, A., Berges, V., Teng, E., Cohen, A., Harper, J., Elion, C., & Lange, D. (2018).

Unity: A general platform for intelligent agents. .

Meneses, J. D., & Laveriano, E. C. (2016). Prototipo de aplicación móvil utilizando

la metodología Mobile-D para la verificación de la formalidad en el servicio

de taxi metropolitano en la ciudad de Lima.

Páez, S. (s.f.). API CSI.

Pedrozo, G. (2012). Sistemas Operativos.

Rahimian, V., & Ramsin, R. (2008). IEEE, 337-342.

Realidad Aumentada. (2021). Obtenido de Enfermería Blog:

https://enfermeriablog.com/realidad-aumentada/

Ruiz, F. (2 de Septiembre de 2015). Culturación. Obtenido de

https://culturacion.com/android-principales-caracteristicas-del-sistema-

operativo-de-google/

Salazar, I. A. (2013). Diseño e implementación de un sistema para información

turística basado en realidad aumentada.

89

Sarracino, F. (2017). ¿ Mejora la Realidad Aumentada el aprendizaje de los

alumnos? Una propuesta de experiencia de museo aumentado.

Unity. (10 de 05 de 2021). Obtenido de

https://docs.unity3d.com/es/current/Manual/UnityManual.html

Vique, R. R. (2019). Métodos para el desarrollo de aplicaciones móviles.

Vuforia Developer. (2021). Obtenido de Vuforia Engine:

https://developer.vuforia.com

90

ANEXOS

Anexo 1: Colores predeterminados para la aplicación

Anexo 2: Entorno Vuforia

1) Crear cuenta en Vuforia

91

2) Login - Vuforia

3) Descargar SDK para unity

92

4) Obtener la License key para usarla en el programa

93

5) Crear un database para almacenar las targets

94

6) Subir las targets de realidad aumentada que se van a utilizar en la aplicación

7) Visualizar el rating de cada target que sea igual o mayor a 3

95

8) Visualizar los puntos de reconocimiento de cada target

96

97

Anexo 3: comentarios encuesta

98

99

Anexo 4: Scripts Visual Studio 2019

100

101

102

103

104

105

106

107

108

109

MANUAL DEL

PROGRAMADOR

ÍNDICE GENERAL

ÍNDICE DE TABLAS .......................................................................................................... 3

ÍNDICE DE FIGURAS ........................................................................................................ 4

INTRODUCCIÓN .............................................................................................................. 6

INFORMACIÓN DESTACADA ........................................................................................... 6

OBJETIVOS ...................................................................................................................... 6

REQUERIMIENTOS .......................................................................................................... 6

Herramientas para el desarrollo ..................................................................................... 8

Vuforia ........................................................................................................................ 8

C# o C Sharp .............................................................................................................. 8

Unity ........................................................................................................................... 9

INSTALACIÓN DE APLICACIONES .................................................................................. 9

Instalación de Unity Hub ................................................................................................ 9

Instalación Unity ........................................................................................................... 12

FUNCIONAMIENTO DE LA APLICACIÓN....................................................................... 13

Funcionamiento de la Linterna ..................................................................................... 14

Funcionamiento Salir de la aplicación .......................................................................... 14

Funcionamiento animación panel sliders ..................................................................... 15

Funcionalidad Rotar modelo 3D ................................................................................... 19

Funcionalidad Trasladar modelo 3D ............................................................................. 22

Función escalar modelo 3D .......................................................................................... 28

PROTOTIPOS DE LA INTERFAZ DEL APLICATIVO ...................................................... 35

ÍNDICE DE TABLAS

Tabla 1. Dispositivos compatibles (Fuente: Autora) ........................................................... 7

ÍNDICE DE FIGURAS

Figura 1. Módulos para Unity 2020.3.1f1 (Fuente: Autora) ................................................. 9

Figura 2. Página oficial de Unity (Fuente: Autora) ............................................................ 10

Figura 3. Términos y condiciones instalación de Unity Hub (Fuente: Autora) ................... 10

Figura 4. Acceso para Unity desde Unity Hub (Fuente: Autora) ....................................... 11

Figura 5. Menú principal Unity Hub (Fuente: Autora) ....................................................... 12

Figura 6.Instalación versión de Unity (Fuente: Autora) .................................................... 12

Figura 7. Añadir módulos SDK para unity (Fuente: Autora) ............................................. 13

Ilustración 8. Controladores de Animación (Fuente: Autora) ............................................ 15

Figura 9. Primer prototipo colores del aplicativo (Fuente: Manual de Identidad Museo) ... 35

Figura 10. Splash 1 Inicio a la app (Fuente: Autora) ....................................................... 36

Figura 11.Splash 2 inicio de la app (Fuente: Autora) ....................................................... 36

Figura 12. Menú de Inicio (Fuente: Autora) ...................................................................... 37

Figura 13. Interfaz de Información (Fuente: Autora) ......................................................... 37

Figura 14. Interfaz Museo de la Salle (Fuente: Autora) .................................................... 38

Figura 15. Interfaz de Recorridos (Fuente: Autora) .......................................................... 38

Figura 16. Interfaz de recorridos (Fuente: Autora) ........................................................... 39

Figura 17. Interfaz de recorridos (Fuente: Autora) ........................................................... 39

Figura 18. Colores de identidad del aplicativo (Fuente: Manual de identidad Museo) ...... 40

Figura 19. Splash 1 (Fuente: Autora) ............................................................................... 40

Figura 20. Splash 2 (Fuente: Autora) ............................................................................... 41

Figura 21. Menú de Inicio (Fuente: Autora) ...................................................................... 41

Figura 22. Interfaz de Información (Fuente: Autora) ......................................................... 42

Figura 23. Interfaz de Museo de la Salle (Fuente: Autora) ............................................... 42

Figura 24.Interfaz recorridos (Fuente: Autora) ................................................................. 43

Figura 25. Interfaz recorridos (Fuente: Autora) ................................................................ 43

Figura 26. Interfaz recorridos (Fuente: Autora) ................................................................ 44

Figura 27. Interfaz recorridos (Fuente: Autora) ................................................................ 44

INTRODUCCIÓN

El siguiente documento presenta los aspectos técnicos informáticos de la aplicación de

realidad aumentada del museo de ciencias de la Universidad de la Salle como lo son los

códigos fuentes realizados, animaciones y uso de la librería Vuforia. con el fin de familiarizar

a personal técnico de revisión, solución de conflictos, instalación y configuración las

herramientas del sistema, los requerimientos necesarios para realizar modificaciones entre

otras actividades que se requieran para la aplicación de realidad aumentada.

INFORMACIÓN DESTACADA

El equipo técnico que requiera orientarse sobre el aplicativo con este manual de

desarrollador debe tener conceptos claros de lógica de programación, programación

orientada objetos, conocimientos avanzados en programación C#, manejo de entornos de

programación de videojuegos en este caso el motor de juegos Unity. Conocimientos de

Visual Studio entre otros manejos de plataformas.

OBJETIVOS

- Orientar adecuadamente al lector la programación de la aplicación para que de esta

forma pueda contextualizarse y comprender el trabajo realizado para posteriores

modificaciones

REQUERIMIENTOS

Requerimientos de máquina:

Para el correcto funcionamiento del entorno de desarrollo es necesario para máquina de

trabajo mínimo las siguientes caracteristicas

- - Intel(R) Core (TM) i5-1035G1 CPU @ 1.00GHz 1.19 GHz o más rápido

- 8 GB de RAM (se recomiendan 16 GB).

- 60 GB de espacio disponible en disco duro para la instalación; se requiere espacio libre adicional (aproximadamente 10 GB) durante la instalación.

- Resolución de pantalla de 1280 x 1024 con tarjeta de vídeo de 16 bits

Dispositivos móviles: en la siguiente tabla se especifican los dispositivos que soportan

la aplicación para sistema operativo Android

Tabla 1. Dispositivos compatibles (Fuente: Autora)

Nombre N.º de la versión Año de lanzamiento Nivel de API

KitKat 4.4 – 4.4.4 31 de octubre de 2013 19 – 20

Lollipop 5.0 – 5.1.1 12 de noviembre de 2014 21 – 22

Marshmallow 6.0 – 6.0.1 5 de octubre de 2015 23

Nougat 7.0 – 7.1.2 15 de junio de 2016 24 – 25

Oreo 8.0 – 8.1 21 de agosto de 2017 26 – 27

Pie 9.0 6 de agosto de 2018 28

Android 10 10.0 3 de septiembre de 2019 29

Android 11 11.0 8 de septiembre de 2020 30

Entorno de desarrollo (IDE): UNITY 3D Versión Unity 2019.4.26f1 (64-bit), Monodevelop.

Adicionalmente el uso de Visual Studio 2019 (64-bit)

Lenguaje de programación: C# o C SHARP.

Kit de desarrollo de software (SDK): Vuforia SDK Android, SDK Tools.

Java Development Kit (JDK): Java SE Development Kit 8u271 Windows x64

Herramientas para el desarrollo

Vuforia

Vuforia es un SDK que permite construir un entorno de Realidad Aumentada, donde se

entrelazan elementos del mundo real con objetos virtuales por medio de la cámara del

dispositivo móvil que se tenga en uso.

C# o C Sharp

Actualmente uno de los lenguajes de programación más populares. El objetivo de Microsoft,

que tiene todos los derechos sobre la plataforma de desarrollo .NET Framework en la que

está incluido el lenguaje C#, es permitir a los programadores abordar el desarrollo de

aplicaciones complejas con facilidad y rapidez.

Unity Hub

es una herramienta para la gestión de proyectos Unity, la cual permite gestionar múltiples

instalaciones del editor Unity junto con sus componentes, crear nuevos proyectos y abrir

proyectos existentes. De este modo el programador podrá instalar varias versiones de Unity

y manejar que módulos desea añadir para programar en cada versión

Figura 1. Módulos para Unity 2020.3.1f1 (Fuente: Autora)

Unity

Es un motor de videojuegos multiplataforma que permiten una edición e iteración rápida en

el ciclo de desarrollo de proyectos. Este se apoya tanto en el desarrollo de la tecnología 2D

como el de la 3D con prestaciones y funcionalidades para las necesidades del desarrollador

logrando crear una experiencia de juego sumamente realista y de alto rendimiento.

INSTALACIÓN DE APLICACIONES

Para facilitar la descarga de Unity y los componentes con los que se van a trabajar se

recomienda iniciar con la descarga de Unity Hub de este modo se podrán añadir módulos

de Android, iOS, Windows entre otros

Instalación de Unity Hub

Para proceder con la instalación primero deberás ir a la página oficial de unity y descargar

Unity Hub

Figura 2. Página oficial de Unity (Fuente: Autora)

Figura 3. Términos y condiciones instalación de Unity Hub (Fuente: Autora)

Una vez instalado el programa lo ejecutamos en nuestro pc, solicitará crear una cuenta

para poder ingresar, es necesario para acceder a descargar las versiones de Unity entonces

se debe acceder

Figura 4. Acceso para Unity desde Unity Hub (Fuente: Autora)

Una vez ingresado la interfaz que aparece en pantalla es como la que se visualiza en la

Figura 5.

Figura 5. Menú principal Unity Hub (Fuente: Autora)

Instalación Unity

Una vez allí en la barra izquierda se debe ir a Installs que permitirá agregar versiones de

Unity con la que sea más fácil, en este caso la versión será 2019.4.26.f1

Figura 6.Instalación versión de Unity (Fuente: Autora)

Al continuar como requisito debe seleccionarse las SDK que se requieran para la posterior

compilación de la aplicativo así que se selecciona Android Build support y iOS Build support

que permite que la compilación del aplicativo pueda hacerse para múltiples plataformas.

Figura 7. Añadir módulos SDK para unity (Fuente: Autora)

Del mismo modo correspondiente al año de la versión de unity se instalará Visual Studio

que será el entorno dónde se desarrollará el código de la aplicación.

FUNCIONAMIENTO DE LA APLICACIÓN

En la siguiente sección se mostrarán los scripts realizados en el lenguaje de programación

C# por medio del programa Visual Studio 2019 el cuál se vincula con el proyecto de unity

este permite la edición y compilación del código. para el funcionamiento de la aplicación se

presentan los scripts más importantes del proyecto y su respectiva explicación del

funcionamiento de cada uno dentro de la aplicación de realidad aumentada.

Funcionamiento de la Linterna

Para realizar este método se llama a la librería de Vuforia ya que esta va a permitir el uso

de la cámara y sus componentes, facilitando el acceso. De este modo se realizaron las

funciones Start para instanciar el flash de la cámara en false inicialmente y BotonLinterna

que usa la variable bool Linterna para encender o apagar según lo requiera el usuario:

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

using Vuforia;

public class linterna : MonoBehaviour

{

public bool Linterna = false;

void Start()

{

CameraDevice.Instance.SetFlashTorchMode(false);

}

public void BotonLinterna()

{

Linterna = !Linterna;

CameraDevice.Instance.SetFlashTorchMode(Linterna);

}

}

Funcionamiento Salir de la aplicación

Para realizar la salida de la aplicación se realiza un método que llama de la librería

UnityEngine que cierra la aplicación del reproductor.

using System.Collections; using System.Collections.Generic; using UnityEngine; public class Salir : MonoBehaviour { public void SalirAp()

{ Application.Quit(); }

}

Funcionamiento animación panel sliders

Para el caso de los paneles de recorridos y el panel del menú de inicio que se desliza

presionando un botón se realizó el siguiente script dónde se adjuntaron las animaciones

hechas desde unity a visual studio.

Ilustración 8. Controladores de Animación (Fuente: Autora)

Dentro de los controladores de cada animación hay una rutina que se definió adjuntada a

un parámetro booleano que permite al código acceder a su estado y modificarlo según el

usuario lo requiera para que se visualicen o desaparezcan los paneles.

Ilustración 9. Rutina de animación para slider Murciélago (Fuente: Autora)

Se definen 4 GameObjects uno para cada panel. Para el panel de menú se realiza el método

ShowHideMenu que obtendrá el valor booleano de show en el animator controller del panel

menú y si se presiona el botón este cambiará de estado para que se deslice o se esconda.

Con los métodos ShowHideMur, ShowHideShark y ShowHideSnake se realiza un proceso

similar al anterior pero adicionalmente se agregan todos los paneles de la misma interfaz al

método de modo que no se visualice un panel encima del otro. Que sea un solo panel a la

vez. Si alguno está activo y se presiona el botón para visualizar este diferente el panel se

desactive.

using System.Collections;

using System.Collections.Generic;

using UnityEngine;

public class SliderAnimation : MonoBehaviour

{

public GameObject PanelMenu;

public GameObject Ventana_Murcielago;

public GameObject Ventana_shark;

public GameObject Ventana_snake;

public void ShowHideMenu()

{

if (PanelMenu != null)

{

Animator guerrero2 = PanelMenu.GetComponent<Animator>();

if (guerrero2 != null)

{

bool isOpen = guerrero2.GetBool("show");

guerrero2.SetBool("show", !isOpen);

}

}

}

public void ShowHideMur()

{

if (Ventana_Murcielago != null)

{

Animator ventana_murc = Ventana_Murcielago.GetComponent<Animator>();

Animator ventana_snake = Ventana_snake.GetComponent<Animator>();

Animator ventana_shark = Ventana_shark.GetComponent<Animator>();

if (ventana_murc != null)

{

bool isOpen = ventana_murc.GetBool("show1");

bool isOpen2 = ventana_shark.GetBool("show2");

bool isOpen3 = ventana_snake.GetBool("show3");

isOpen2 = false;

isOpen3 = false;

ventana_murc.SetBool("show1", !isOpen);

ventana_shark.SetBool("show2", isOpen2);

ventana_snake.SetBool("show3", isOpen3);

}

}

}

public void ShowHideShark()

{

if (Ventana_shark != null)

{

Animator ventana_murc = Ventana_Murcielago.GetComponent<Animator>();

Animator ventana_snake = Ventana_snake.GetComponent<Animator>();

Animator ventana_shark = Ventana_shark.GetComponent<Animator>();

if (ventana_shark != null)

{

bool isOpen = ventana_murc.GetBool("show1");

bool isOpen2 = ventana_shark.GetBool("show2");

bool isOpen3 = ventana_snake.GetBool("show3");

isOpen = false;

isOpen3 = false;

ventana_shark.SetBool("show2", !isOpen2);

ventana_snake.SetBool("show3", isOpen3);

ventana_murc.SetBool("show1", isOpen);

}

}

}

public void ShowHideSnake()

{

if (Ventana_snake != null)

{

Animator ventana_snake = Ventana_snake.GetComponent<Animator>();

Animator ventana_shark = Ventana_shark.GetComponent<Animator>();

Animator ventana_murc = Ventana_Murcielago.GetComponent<Animator>();

if (ventana_snake != null)

{

bool isOpen = ventana_snake.GetBool("show3");

bool isOpen2 = ventana_shark.GetBool("show2");

bool isOpen3 = ventana_murc.GetBool("show1");

isOpen2 = false;

isOpen3 = false;

ventana_snake.SetBool("show3", !isOpen);

ventana_shark.SetBool("show2", isOpen2);

ventana_murc.SetBool("show1", isOpen3);

}

}

}

public void HideAll()

{

if (Ventana_Murcielago && Ventana_shark && Ventana_snake != null)

{

Animator ventana_snake = Ventana_snake.GetComponent<Animator>();

Animator ventana_shark = Ventana_shark.GetComponent<Animator>();

Animator ventana_murc = Ventana_Murcielago.GetComponent<Animator>();

if (ventana_snake && Ventana_Murcielago && Ventana_shark != null)

{

bool isOpen = ventana_snake.GetBool("show3");

bool isOpen2 = ventana_shark.GetBool("show2");

bool isOpen3 = ventana_murc.GetBool("show1");

isOpen = false;

isOpen2 = false;

isOpen3 = false;

ventana_snake.SetBool("show3", isOpen);

ventana_shark.SetBool("show2", isOpen2);

ventana_murc.SetBool("show1", isOpen3);

}

}

}

}

Funcionalidad Rotar modelo 3D

Para las funcionalidades que se van a mostrar de ahora en adelante se trabajó con una

librería llamada Lean Touch la cual facilita el uso de la pantalla táctil para manipular objetos

a los cuáles se les asigne el código, en este caso los modelos 3D de la realidad aumentada.

Lo que va a permitir el código es que se pueda modificar el uso de los dedos, la sensibilidad

y la inercia con la que se manipule el modelo 3D. la rotación para el modelo se hará en un

solo eje y se define en Unity después de agregarle al objeto el respectivo script.

using UnityEngine;

using Lean.Common;

using FSA = UnityEngine.Serialization.FormerlySerializedAsAttribute;

namespace Lean.Touch

{

/// <summary>This component allows you to rotate the current GameObject around

the specified axis using finger twists.</summary>

[HelpURL(LeanTouch.HelpUrlPrefix + "LeanTwistRotateAxis")]

[AddComponentMenu(LeanTouch.ComponentPathPrefix + "Twist Rotate Axis")]

public class LeanTwistRotateAxis : MonoBehaviour

{

/// <summary>The method used to find fingers to use with this

component. See LeanFingerFilter documentation for more information.</summary>

public LeanFingerFilter Use = new LeanFingerFilter(true);

/// <summary>The axis of rotation.</summary>

public Vector3 Axis { set { axis = value; } get { return axis; } }

[FSA("Axis")] [SerializeField] private Vector3 axis = Vector3.down;

/// <summary>Rotate locally or globally?</summary>

public Space Space { set { space = value; } get { return space; } }

[FSA("Sensitivity")] [SerializeField] private Space space = Space.Self;

/// <summary>The sensitivity of the rotation.

/// 1 = Default.

/// 2 = Double.</summary>

public float Sensitivity { set { sensitivity = value; } get { return

sensitivity; } } [FSA("Sensitivity")] [SerializeField] private float sensitivity =

1.0f;

/// <summary>If you've set Use to ManuallyAddedFingers, then you can

call this method to manually add a finger.</summary>

public void AddFinger(LeanFinger finger)

{

Use.AddFinger(finger);

}

/// <summary>If you've set Use to ManuallyAddedFingers, then you can

call this method to manually remove a finger.</summary>

public void RemoveFinger(LeanFinger finger)

{

Use.RemoveFinger(finger);

}

/// <summary>If you've set Use to ManuallyAddedFingers, then you can

call this method to manually remove all fingers.</summary>

public void RemoveAllFingers()

{

Use.RemoveAllFingers();

}

#if UNITY_EDITOR

protected virtual void Reset()

{

Use.UpdateRequiredSelectable(gameObject);

}

#endif

protected virtual void Awake()

{

Use.UpdateRequiredSelectable(gameObject);

}

protected virtual void Update()

{

// Get the fingers we want to use

var fingers = Use.UpdateAndGetFingers();

// Calculate the rotation values based on these fingers

var twistDegrees = LeanGesture.GetTwistDegrees(fingers) *

sensitivity;

// Perform rotation

transform.Rotate(axis, twistDegrees, space);

}

}

}

#if UNITY_EDITOR

namespace Lean.Touch.Editor

{

using TARGET = LeanTwistRotateAxis;

[UnityEditor.CanEditMultipleObjects]

[UnityEditor.CustomEditor(typeof(TARGET), true)]

public class LeanTwistRotateAxis_Editor : LeanEditor

{

protected override void OnInspector()

{

TARGET tgt; TARGET[] tgts; GetTargets(out tgt, out tgts);

Draw("Use");

Draw("axis", "The axis of rotation.");

Draw("space", "Rotate locally or globally?");

Draw("sensitivity", "The sensitivity of the rotation.\n\n1 =

Default.\n\n2 = Double.");

}

}

}

#endif

Funcionalidad Trasladar modelo 3D

Para este script como se mencionó anteriormente se usa la librería Lean Touch se usan

como variables la sensibilidad, inercia y damping serán modificados desde el objeto 3D en

unity. Los método principales son Reset, Awake y Update que permiten evaluar la posición

del GameObject que sería el objeto 3D para localizar su posición y localizarla dónde el

usuario la ubique en la pantalla.

using UnityEngine;

using FSA = UnityEngine.Serialization.FormerlySerializedAsAttribute;

using Lean.Common;

namespace Lean.Touch

{

/// <summary>This component allows you to translate the current GameObject

relative to the camera using the finger drag gesture.</summary>

[HelpURL(LeanTouch.HelpUrlPrefix + "LeanDragTranslate")]

[AddComponentMenu(LeanTouch.ComponentPathPrefix + "Drag Translate")]

public class LeanDragTranslate : MonoBehaviour

{

/// <summary>The method used to find fingers to use with this

component. See LeanFingerFilter documentation for more information.</summary>

public LeanFingerFilter Use = new LeanFingerFilter(true);

/// <summary>The camera the translation will be calculated using.

/// None/null = MainCamera.</summary>

public Camera { set { _camera = value; } get { return _camera; } }

[FSA("Camera")] [SerializeField] private Camera _camera;

/// <summary>The movement speed will be multiplied by this.

/// -1 = Inverted Controls.</summary>

public float Sensitivity { set { sensitivity = value; } get { return

sensitivity; } } [FSA("Sensitivity")] [SerializeField] private float sensitivity =

1.0f;

/// <summary>If you want this component to change smoothly over time,

then this allows you to control how quick the changes reach their target value.

/// -1 = Instantly change.

/// 1 = Slowly change.

/// 10 = Quickly change.</summary>

public float Damping { set { damping = value; } get { return damping;

} } [FSA("Damping")] [FSA("Dampening")] [SerializeField] private float damping = -

1.0f;

/// <summary>This allows you to control how much momentum is retained

when the dragging fingers are all released.

/// NOTE: This requires <b>Dampening</b> to be above 0.</summary>

public float Inertia { set { inertia = value; } get { return inertia;

} } [FSA("Inertia")] [SerializeField] [Range(0.0f, 1.0f)] private float inertia;

[SerializeField]

private Vector3 remainingTranslation;

/// <summary>If you've set Use to ManuallyAddedFingers, then you can

call this method to manually add a finger.</summary>

public void AddFinger(LeanFinger finger)

{

Use.AddFinger(finger);

}

/// <summary>If you've set Use to ManuallyAddedFingers, then you can

call this method to manually remove a finger.</summary>

public void RemoveFinger(LeanFinger finger)

{

Use.RemoveFinger(finger);

}

/// <summary>If you've set Use to ManuallyAddedFingers, then you can

call this method to manually remove all fingers.</summary>

public void RemoveAllFingers()

{

Use.RemoveAllFingers();

}

#if UNITY_EDITOR

protected virtual void Reset()

{

Use.UpdateRequiredSelectable(gameObject);

}

#endif

protected virtual void Awake()

{

Use.UpdateRequiredSelectable(gameObject);

}

protected virtual void Update()

{

// Store

var oldPosition = transform.localPosition;

// Get the fingers we want to use

var fingers = Use.UpdateAndGetFingers();

// Calculate the screenDelta value based on these fingers

var screenDelta = LeanGesture.GetScreenDelta(fingers);

if (screenDelta != Vector2.zero)

{

// Perform the translation

if (transform is RectTransform)

{

TranslateUI(screenDelta);

}

else

{

Translate(screenDelta);

}

}

// Increment

remainingTranslation += transform.localPosition - oldPosition;

// Get t value

var factor = LeanHelper.GetDampenFactor(Damping,

Time.deltaTime);

// Dampen remainingDelta

var newRemainingTranslation =

Vector3.Lerp(remainingTranslation, Vector3.zero, factor);

// Shift this transform by the change in delta

transform.localPosition = oldPosition + remainingTranslation -

newRemainingTranslation;

if (fingers.Count == 0 && Inertia > 0.0f && Damping > 0.0f)

{

newRemainingTranslation =

Vector3.Lerp(newRemainingTranslation, remainingTranslation, Inertia);

}

// Update remainingDelta with the dampened value

remainingTranslation = newRemainingTranslation;

}

private void TranslateUI(Vector2 screenDelta)

{

var camera = this._camera;

if (camera == null)

{

var canvas = transform.GetComponentInParent<Canvas>();

if (canvas != null && canvas.renderMode !=

RenderMode.ScreenSpaceOverlay)

{

camera = canvas.worldCamera;

}

}

// Screen position of the transform

var screenPoint =

RectTransformUtility.WorldToScreenPoint(camera, transform.position);

// Add the deltaPosition

screenPoint += screenDelta * Sensitivity;

// Convert back to world space

var worldPoint = default(Vector3);

if

(RectTransformUtility.ScreenPointToWorldPointInRectangle(transform.parent as

RectTransform, screenPoint, camera, out worldPoint) == true)

{

transform.position = worldPoint;

}

}

private void Translate(Vector2 screenDelta)

{

// Make sure the camera exists

var camera = LeanHelper.GetCamera(this._camera, gameObject);

if (camera != null)

{

// Screen position of the transform

var screenPoint =

camera.WorldToScreenPoint(transform.position);

// Add the deltaPosition

screenPoint += (Vector3)screenDelta * Sensitivity;

// Convert back to world space

transform.position =

camera.ScreenToWorldPoint(screenPoint);

}

else

{

Debug.LogError("Failed to find camera. Either tag your

camera as MainCamera, or set one in this component.", this);

}

}

}

}

#if UNITY_EDITOR

namespace Lean.Touch.Editor

{

using TARGET = LeanDragTranslate;

[UnityEditor.CanEditMultipleObjects]

[UnityEditor.CustomEditor(typeof(TARGET), true)]

public class LeanDragTranslate_Editor : LeanEditor

{

protected override void OnInspector()

{

TARGET tgt; TARGET[] tgts; GetTargets(out tgt, out tgts);

Draw("Use");

Draw("_camera", "The camera the translation will be calculated

using.\n\nNone/null = MainCamera.");

Draw("sensitivity", "The movement speed will be multiplied by

this.\n\n-1 = Inverted Controls.");

Draw("damping", "If you want this component to change smoothly

over time, then this allows you to control how quick the changes reach their target

value.\n\n-1 = Instantly change.\n\n1 = Slowly change.\n\n10 = Quickly change.");

Draw("inertia", "This allows you to control how much momentum

is retained when the dragging fingers are all released.\n\nNOTE: This requires

<b>Damping</b> to be above 0.");

}

}

}

#endif

Función escalar modelo 3D

Para esta función al igual que las anteriores se usa la librería Lean Touch y se puede

modificar la sensibilidad, inercia y damping del modelo al momento de escalarse. Los

métodos Reset, Awake y Update son los encargados de hallar la posición dónde el usuario

los coloca en la pantalla y recoger un vector para que sea modificada la escala del objeto

3D que se este visualizando en la pantalla.

using UnityEngine;

using Lean.Common;

using FSA = UnityEngine.Serialization.FormerlySerializedAsAttribute;

namespace Lean.Touch

{

/// <summary>This component allows you to scale the current GameObject

relative to the specified camera using the pinch gesture.</summary>

[HelpURL(LeanTouch.HelpUrlPrefix + "LeanPinchScale")]

[AddComponentMenu(LeanTouch.ComponentPathPrefix + "Pinch Scale")]

public class LeanPinchScale : MonoBehaviour

{

/// <summary>The method used to find fingers to use with this

component. See LeanFingerFilter documentation for more information.</summary>

public LeanFingerFilter Use = new LeanFingerFilter(true);

/// <summary>The camera that will be used to calculate the zoom.

/// None/null = MainCamera.</summary>

public Camera Camera { set { _camera = value; } get { return _camera;

} } [FSA("Camera")] [SerializeField] private Camera _camera;

/// <summary>Should the scaling be performed relative to the finger

center?</summary>

public bool Relative { set { relative = value; } get { return relative;

} } [FSA("Relative")] [SerializeField] private bool relative;

/// <summary>The sensitivity of the scaling.

/// 1 = Default.

/// 2 = Double.</summary>

public float Sensitivity { set { sensitivity = value; } get { return

sensitivity; } } [FSA("Sensitivity")] [SerializeField] private float sensitivity =

1.0f;

/// <summary>If you want this component to change smoothly over time,

then this allows you to control how quick the changes reach their target value.

/// -1 = Instantly change.

/// 1 = Slowly change.

/// 10 = Quickly change.</summary>

public float Damping { set { damping = value; } get { return damping;

} } [FSA("Damping")] [FSA("Dampening")] [SerializeField] private float damping = -

1.0f;

[SerializeField]

private Vector3 remainingScale;

/// <summary>If you've set Use to ManuallyAddedFingers, then you can

call this method to manually add a finger.</summary>

public void AddFinger(LeanFinger finger)

{

Use.AddFinger(finger);

}

/// <summary>If you've set Use to ManuallyAddedFingers, then you can

call this method to manually remove a finger.</summary>

public void RemoveFinger(LeanFinger finger)

{

Use.RemoveFinger(finger);

}

/// <summary>If you've set Use to ManuallyAddedFingers, then you can

call this method to manually remove all fingers.</summary>

public void RemoveAllFingers()

{

Use.RemoveAllFingers();

}

#if UNITY_EDITOR

protected virtual void Reset()

{

Use.UpdateRequiredSelectable(gameObject);

}

#endif

protected virtual void Awake()

{

Use.UpdateRequiredSelectable(gameObject);

}

protected virtual void Update()

{

// Store

var oldScale = transform.localPosition;

// Get the fingers we want to use

var fingers = Use.UpdateAndGetFingers();

// Calculate pinch scale, and make sure it's valid

var pinchScale = LeanGesture.GetPinchScale(fingers);

if (pinchScale != 1.0f)

{

pinchScale = Mathf.Pow(pinchScale, sensitivity);

// Perform the translation if this is a relative scale

if (relative == true)

{

var pinchScreenCenter =

LeanGesture.GetScreenCenter(fingers);

if (transform is RectTransform)

{

TranslateUI(pinchScale,

pinchScreenCenter);

}

else

{

Translate(pinchScale, pinchScreenCenter);

}

}

transform.localScale *= pinchScale;

remainingScale += transform.localPosition - oldScale;

}

// Get t value

var factor = LeanHelper.GetDampenFactor(damping,

Time.deltaTime);

// Dampen remainingDelta

var newRemainingScale = Vector3.Lerp(remainingScale,

Vector3.zero, factor);

// Shift this transform by the change in delta

transform.localPosition = oldScale + remainingScale -

newRemainingScale;

// Update remainingDelta with the dampened value

remainingScale = newRemainingScale;

}

protected virtual void TranslateUI(float pinchScale, Vector2

pinchScreenCenter)

{

var camera = _camera;

if (camera == null)

{

var canvas = transform.GetComponentInParent<Canvas>();

if (canvas != null && canvas.renderMode !=

RenderMode.ScreenSpaceOverlay)

{

camera = canvas.worldCamera;

}

}

// Screen position of the transform

var screenPoint =

RectTransformUtility.WorldToScreenPoint(camera, transform.position);

// Push the screen position away from the reference point based

on the scale

screenPoint.x = pinchScreenCenter.x + (screenPoint.x -

pinchScreenCenter.x) * pinchScale;

screenPoint.y = pinchScreenCenter.y + (screenPoint.y -

pinchScreenCenter.y) * pinchScale;

// Convert back to world space

var worldPoint = default(Vector3);

if

(RectTransformUtility.ScreenPointToWorldPointInRectangle(transform.parent as

RectTransform, screenPoint, camera, out worldPoint) == true)

{

transform.position = worldPoint;

}

}

protected virtual void Translate(float pinchScale, Vector2

screenCenter)

{

// Make sure the camera exists

var camera = LeanHelper.GetCamera(_camera, gameObject);

if (camera != null)

{

// Screen position of the transform

var screenPosition =

camera.WorldToScreenPoint(transform.position);

// Push the screen position away from the reference point

based on the scale

screenPosition.x = screenCenter.x + (screenPosition.x -

screenCenter.x) * pinchScale;

screenPosition.y = screenCenter.y + (screenPosition.y -

screenCenter.y) * pinchScale;

// Convert back to world space

transform.position =

camera.ScreenToWorldPoint(screenPosition);

}

else

{

Debug.LogError("Failed to find camera. Either tag your

cameras MainCamera, or set one in this component.", this);

}

}

}

}

#if UNITY_EDITOR

namespace Lean.Touch.Editor

{

using TARGET = LeanPinchScale;

[UnityEditor.CanEditMultipleObjects]

[UnityEditor.CustomEditor(typeof(TARGET), true)]

public class LeanPinchScale_Editor : LeanEditor

{

protected override void OnInspector()

{

TARGET tgt; TARGET[] tgts; GetTargets(out tgt, out tgts);

Draw("Use");

Draw("_camera", "The camera that will be used to calculate the

zoom.\n\nNone/null = MainCamera.");

Draw("relative", "Should the scaling be performed relative to

the finger center?");

Draw("sensitivity", "The sensitivity of the scaling.\n\n1 =

Default.\n\n2 = Double.");

Draw("damping", "If you want this component to change smoothly

over time, then this allows you to control how quick the changes reach their target

value.\n\n-1 = Instantly change.\n\n1 = Slowly change.\n\n10 = Quickly change.");

}

}

}

#endif

PROTOTIPOS DE LA INTERFAZ DEL APLICATIVO

Siguiendo la guía de identidad visual del museo de ciencias de la Universidad de la Salle

se tiene una amplia gama de colores para utilizar, se usaron dos modelos de colores para

el aplicativo decidiendo así con el museo el uso del color verde. A continuación los

prototipos y las vistas finales de las interfaces.

En su versión 16 en la APK, se contemplaron los siguientes colores del manual de identidad:

Figura 10. Primer prototipo colores del aplicativo (Fuente: Manual de Identidad Museo)

De esta manera el boceto inicial que se plantearon para las interfaces con los respectivos

colores del manual vistos en la Figura 9 se visualizan a continuación:

Figura 11. Splash 1 Inicio a la app (Fuente: Autora)

Figura 12.Splash 2 inicio de la app (Fuente: Autora)

Figura 13. Menú de Inicio (Fuente: Autora)

Figura 14. Interfaz de Información (Fuente: Autora)

Figura 15. Interfaz Museo de la Salle (Fuente: Autora)

Figura 16. Interfaz de Recorridos (Fuente: Autora)

Figura 17. Interfaz de recorridos (Fuente: Autora)

Figura 18. Interfaz de recorridos (Fuente: Autora)

Para otorgar al aplicativo un color distinto de los atribuidos a las páginas por parte de la

universidad se decidió tomar los colores del logotipo que se muestran en la siguiente Figura:

Figura 19. Colores de identidad del aplicativo (Fuente: Manual de identidad Museo)

De este modo también se modificó la orientación de las interfaces para mejor visualización

del imagotipo de la osa y su osezno.

Figura 20. Splash 1 (Fuente: Autora)

Figura 21. Splash 2 (Fuente: Autora)

Figura 22. Menú de Inicio (Fuente: Autora)

Figura 23. Interfaz de Información (Fuente: Autora)

Figura 24. Interfaz de Museo de la Salle (Fuente: Autora)

Figura 25.Interfaz recorridos (Fuente: Autora)

Figura 26. Interfaz recorridos (Fuente: Autora)

Figura 27. Interfaz recorridos (Fuente: Autora)

Figura 28. Interfaz recorridos (Fuente: Autora)

MANUAL DEL

USUARIO

ÍNDICE GENERAL

ÍNDICE DE FIGURAS .............................................................................................. 3

ÍNDICE DE TABLAS ................................................................................................ 4

INTRODUCCIÓN ..................................................................................................... 5

REQUERIMIENTOS ................................................................................................ 5

INSTALACIÓN ......................................................................................................... 6

Uso de la aplicación móvil ....................................................................................... 7

REALIDAD AUMENTADA .................................................................................... 8

INFORMACIÓN .................................................................................................. 10

MUSEO DE LA SALLE ....................................................................................... 11

RECORRIDOS ................................................................................................... 12

ÍNDICE DE FIGURAS

Figura 1. Instalación del aplicativo ........................................................................... 6

Figura 2. Aplicativo instalado ................................................................................... 7

Figura 3. Menú de Inicio .......................................................................................... 8

ÍNDICE DE TABLAS

Tabla 1. Interfaz Realidad Aumentada (Fuente: Autora) .......................................... 9 Tabla 2. Interfaz Información (Fuente: Autora) ...................................................... 10 Tabla 3. Interfaz Museo de la Salle (Fuente: Autora) ............................................. 11 Tabla 4. Interfaz Recorridos (Fuente: Autora) ........................................................ 12

INTRODUCCIÓN

Los usos de las aplicaciones móviles son tan amplios como se pueda imaginar, hoy

en día gracias a la tecnología se pueden realizar en diferentes campos como lo son

el aprendizaje pedagógico y el entretenimiento. Muchos museos alrededor del

mundo han implementado el uso tableros digitales, la gamificación, usando

tecnologías para la impresión 3D de piezas del museo y por último realidad

aumentada.

Como se mostrará por medio de este manual de usuario el uso de una aplicación

móvil de realidad aumentada, enfocada para que cada usuario pueda orientarse en

su uso y en la navegación para que de esta manera pueda sacarle el máximo

provecho a sus funciones mientras realiza una visita al museo de ciencias de la

Universidad de la Salle.

REQUERIMIENTOS

El uso de la aplicación está disponible para dispositivos con sistema operativo

Android y los requerimientos para que la aplicación móvil funcione correctamente

son los siguientes:

1. Sistema operativo 4.4 Kit Kat o superior

2. Procesador de 2.3 GHz

3. Memoria de RAM de mínimo 2GB (lo recomendable es 4GB)

4. Espacio en memoria interna de 50MB

5. Que el dispositivo tenga la cámara en buen estado.

INSTALACIÓN

Como la gestión por parte del museo de la Salle para que el aplicativo sea subido a

la Play Store aún se encuentra en espera podrá acceder al aplicativo siguiendo las

siguientes instrucciones para realizar la instalación del aplicativo:

1. Ingresar desde el navegador web de su aplicativo móvil a la siguiente

dirección

https://drive.google.com/drive/folders/1x04j0gNmXxBqZCsWN_JbA014jgoZ

xQE?usp=sharing

2. Seleccione la aplicación móvil “Museo de la Salle”

3. Siga las instrucciones que aparecen en pantalla para completar la

instalación.

En la Figura 1. se visualiza la pantalla emergente que solicitará al usuario

instalar el aplicativo.

Figura 1. Instalación del aplicativo (Fuente: Autora)

4. Al seleccionar la confirmación para la instalación mostrará esta ventana

emergente. Figura 2.

Figura 2. Aplicativo instalado (Fuente: Autora)

Uso de la aplicación móvil

Si realizó debidamente los pasos descritos anteriormente, la aplicación móvil se

encuentra lista para hacer uso de la realidad aumentada y demás funciones. Lo

primero que ocurrirá al abrir el aplicativo es la visualización de los dos Splash,

seguido de este pedirá el usuario conceda el permiso de acceder a la cámara esto

con el objetivo de poder utilizarla para visualizar la realidad aumentada más

adelante.

Lo primer que se visualizará será el menú de Inicio (Figura 3) con cuatro secciones

a las que el usuario podrá dirigirse.

Figura 3. Menú de Inicio (Fuente: Autora)

Las cuatro secciones son:

1. Realidad Aumentada: en esta sección se visualiza la cámara si el permiso

fue concedido de esta manera se podrá dirigir el foco de la cámara a las

targets para visualizar los modelos de Realidad aumentada e interactuar con

ellos

2. Información: en esta sección se visualizan instrucciones del uso de la

realidad aumentada, imágenes de las targets que el usuario deberá buscar

dentro del museo para apreciar la realidad aumentada.

3. Museo de la Salle: en esta sección el usuario encontrará información de

ubicación y contacto con el museo de la Universidad de la Salle.

4. Recorridos : en esta sección el usuario podrá encontrar información adicional

de los modelos o especímenes que visualiza en la realidad aumentada.

REALIDAD AUMENTADA

Como se dijo anteriormente en este apartado se visualiza la realidad aumentada y

para mostrar de manera general sus funciones se presenta la siguiente tabla:

Tabla 1. Interfaz Realidad Aumentada (Fuente: Autora)

Función Descripción Visualización

Retorno a Menú

En la parte superior derecha se encuentra el

icono de una casa la cuál permite al usuario

regresar al menú de inicio

Linterna

En la parte superior derecha se encuentra un icono de sol, si el usuario se encuentra con poca iluminación para ver la

realidad aumentada podrá encender y apagar la linterna del dispositivo

móvil desde la aplicación

Realidad Aumentada

Visualización de los modelos: para la realidad

aumentada lo primero será la visualización del los modelos cuando se enfoque a las targets

respectivas.

Rotar, trasladar y escalar. Para realizar estas

funciones el usuario debe en

Rotar: usar dos dedos en la pantalla y deslizarlos

suavemente por la

pantalla en la dirección que quiere rotar el modelo Trasladar: con un dedo en

la pantalla debe arrastrarlo a donde quiera

acomodarlo Escalar: con dos dedos

en la pantalla debe intentar acercar o alejar la distancia entre los dedos

INFORMACIÓN

Para el apartado de información se presenta la siguiente tabla con las instrucciones

y descripciones de su uso

Tabla 2. Interfaz Información (Fuente: Autora)

Función Descripción Visualización

Menú de inicio

En la parte superior

derecha se encuentra el

icono de una casa la

cual permite al usuario

regresar al menú de

inicio

Realidad Aumentada

En la parte lateral

derecha se encuentra

un botón que permitirá

al usuario dirigirse a la

cámara para ver la

realidad aumentada

Museo de la Salle

En la parte lateral

derecha se encuentra

un botón que permitirá

al usuario dirigirse a la

interfaz de Museo de la

Salle

Recorridos

En la parte lateral

derecha se encuentra

un botón que permitirá

al usuario dirigirse a la

interfaz de Recorridos

MUSEO DE LA SALLE

Para la interfaz del museo de la Salle donde se encuentra información del museo

se describe en la siguiente tabla sus funciones:

Tabla 3. Interfaz Museo de la Salle (Fuente: Autora)

Función Descripción Visualización

Menú de inicio

En la parte superior

derecha se encuentra el

icono de una casa la

cual permite al usuario

regresar al menú de

inicio

Realidad Aumentada

En la parte lateral

derecha se encuentra

un botón que permitirá

al usuario dirigirse a la

cámara para ver la

realidad aumentada

Información

En la parte lateral

derecha se encuentra

un botón que permitirá

al usuario dirigirse a la

interfaz de información

Recorridos

En la parte lateral

derecha se encuentra

un botón que permitirá

al usuario dirigirse a la

interfaz de Recorridos

RECORRIDOS

Para la interfaz de recorridos se tiene la siguiente tabla con las funciones, como ya

se había descrito anteriormente este menú contiene información adicional de los

modelos de realidad aumentada.

Tabla 4. Interfaz Recorridos (Fuente: Autora)

Función Descripción Visualización

Menú de inicio

En la parte superior

derecha se

encuentra el icono

de una casa la cual

permite al usuario

regresar al menú de

inicio

Botón murciélago

En la parte inferior

se encuentra este

botón que al

oprimirse activara

un panel con la

información del

modelo respectivo

al que se presionó.

Botón tiburón

En la parte inferior

se encuentra este

botón que al

oprimirse activara

un panel con la

información del

modelo respectivo

al que se presionó.

Botón serpiente

En la parte inferior

se encuentra este

botón que al

oprimirse activara

un panel con la

información del

modelo respectivo

al que se presionó.