Batseñal: Aplicación móvil Android y servidor basado en cloud de Amazon para configuración de dispositivo IoT de señal luminosa

i Trabajo Fin de Grado Grado en Ingeniería de las Tecnologías de Telecomunicación Batseñal: Aplicación móvil Android y servidor basado en cloud de Amazon para configuración de dispositivo IoT de señal luminosa. Autor: Denis Ortega Luis Tutor: María Teresa Ariza Gómez Dpto. de Ingeniería Telemática Escuela Técnica Superior de Ingeniería Universidad de Sevilla Sevilla, 2022 iii Trabajo Fin de Grado Grado en Ingeniería de las Tecnologías de Telecomunicación Batseñal: Aplicación móvil Android y servidor basado en cloud de Amazon para configuración de dispositivo IoT de señal luminosa. Autor: Denis Ortega Luis Tutor: María Teresa Ariza Gómez Profesora titular Dpto. de Ingeniería Telemática Escuela Técnica Superior de Ingeniería Universidad de Sevilla Sevilla, 2022 v Trabajo Fin de Grado: Batseñal: Aplicación móvil Android y servidor basado en cloud de Amazon para configuración de dispositivo IoT de señal luminosa. Autor: Denis Ortega Luis Tutor: María Teresa Ariza Gómez El tribunal nombrado para juzgar el Proyecto arriba indicado, compuesto por los siguientes miembros: Presidente: Vocales: Secretario: Acuerdan otorgarle la calificación de: Sevilla, 2022 El Secretario del Tribunal vii Agradecimientos Me gustaría mostrar mis agradecimientos a varias personas que me han acompañado durante la realización de este proyecto y sin las cuales no habría sido posible. Me gustaría comenzar agradeciendo a Gustavo, el cocreador de este proyecto. Juntos dimos forma a la idea en la que hemos trabajado durante el último año y medio, consiguiendo traerla a la realidad. Sin su trabajo y apoyo, nada de lo descrito en este documento podría haber sido posible. Agradecer a mi tutora en este trabajo, María Teresa Ariza Gómez por haberme guiado y aconsejado durante la realización del mismo. Por último, agradecer a mis padres y amigos por el apoyo aportado durante todo este tiempo. Sin ellos habría perdido la motivación por este proyecto hace mucho y sin duda el resultado del mismo habría sido uno completamente distinto. ix Resumen Gracias a internet y sobre todo desde la llegada de los dispositivos móviles nos encontramos más conectados que nunca. Constantemente recibimos información sobre todo lo que ocurre en el mundo, mensajes de nuestros amigos, llamadas, notificaciones provenientes de las redes sociales… Hasta el punto en el que nos sentimos tan abrumados que queremos silenciar el móvil y no escuchar nada más. Pero ¿qué ocurre cuando nos encontramos a la espera de un mensaje de un familiar? ¿O de la llegada de un correo importante? ¿Y si estoy esperando un mensaje, pero necesito estar concentrado en algo mientras tanto? Hay veces que necesitamos que un aviso en concreto destaque sobre el resto. En este documento se propone una solución a este problema, mediante el desarrollo de unos dispositivos de señal luminosa que se conectan entre sí mediante internet para encenderse simultáneamente cuando sea necesario. Eso conlleva no solo el desarrollo del dispositivo, sino también el de una aplicación móvil en Android y la configuración de un servidor en la cloud de Amazon. Índice de Tablas Tabla 1: CU-01 32 Tabla 2: CU-02 33 Tabla 3: CU-03 34 Tabla 4: CU-04 36 Tabla 5: CU-05 37 Tabla 6: CU-06 37 Tabla 7: CU-07 38 Tabla 8: CU-08 39 Tabla 9: CU-09 40 Tabla 10: CU-10 41 Tabla 11: CU-11 41 Tabla 12: CU-12 42 Tabla 13: CU-13 43 Tabla 14: CU-14 43 Tabla 15: CU-15 44 Tabla 16: CU-16 45 Tabla 17: CU-17 46 Tabla 18: CU-18 47 Tabla 19: CU-19 48 Tabla 20: CU-20 49 Tabla 21: CU-21 50 Tabla 22: CU-22 51 Tabla 23: CU-23 51 Tabla 24: CU-24 52 Tabla 25: CU-25 53 Tabla 26: CU-26 54 xvii Índice de Imágenes Ilustración 1: Primera versión Batseñal 12 Ilustración 2: Batseñal elaborada en este proyecto 13 Ilustración 3: Esquema de la arquitectura 14 Ilustración 4: Logotipo Android 16 Ilustración 5 : Declaración de variables 17 Ilustración 6: Protección contra valores null. 17 Ilustración 7: Definición de función 18 Ilustración 8: Ejemplo de uso de función anónima 18 Ilustración 9: Función de orden superior 19 Ilustración 10: Logotipo AWS 20 Ilustración 11: Ejemplo función Lambda 21 Ilustración 12: Función Lambda asociada a una ruta 21 Ilustración 13: Ejemplo de configuración de un slicer (Ultimate Cura) 23 Ilustración 14: Logotipo Android Studio 24 Ilustración 15: Logotipo Github Desktop 24 Ilustración 16: Consola AWS 25 Ilustración 17: Logotipo Postman 25 Ilustración 18: Captura Cinema4D 26 Ilustración 19: Captura Adobe XD 27 Ilustración 20: Logotipo pgAdmin 4 27 Ilustración 21: Logotipo VS Code 27 Ilustración 22: Logotipo PlatformIO 28 Ilustración 23: Logotipo Aseprite. 28 Ilustración 24: Logotipo diagrams.net 28 Ilustración 25: Captura Carbon 29 Ilustración 26: Artillery Genius 30 Ilustración 27: Diagrama de componentes 31 Ilustración 28: Diagrama de casos de uso de Autenticación del usuario 32 Ilustración 29: Diagrama de casos de uso de la configuración de la Batseñal 35 Ilustración 30: Diagrama de casos de uso de gestión de amistades 44 xix Ilustración 31: Diagrama de casos de uso de administración de melodías 47 Ilustración 32: Diagrama de casos de uso del Foro de melodías 50 Ilustración 33: Entorno de desarrollo de funciones Lambda. 57 Ilustración 34: Estructura del identificador único 60 Ilustración 35: Formato URL 61 Ilustración 36: Ejemplo de cuerpo de petición HTTP. 61 Ilustración 37: Esquema resumen API Rest 62 Ilustración 38: Interfaz RDS. 63 Ilustración 39: Diagrama de la Base de Datos 64 Ilustración 40: Captura consola WAS IoT Core. 67 Ilustración 41: Esquema de fragmentos de ActivityMain 69 Ilustración 42: Esquema de fragmentos de ActivityPrincipal 70 Ilustración 43: Ejemplo de uso de viewBinding 70 Ilustración 44: Implementación petición HTTP 72 Ilustración 45: Permisos durante la instalación. 73 Ilustración 46: Comprobación y solicitud de permisos. 73 Ilustración 47: Clase Bluetooth. 74 Ilustración 48: Captura inicio de sesión 75 Ilustración 49: Secuencia de mensajes para vinculado de Batseñal con cuenta de usuario. 77 Ilustración 50: Paso de mensajes Bluetooth para configurar Batseñal 78 Ilustración 51: Vinculado de Batseñal con cuenta de usuario (Parte 1) 81 Ilustración 52: Vinculado con cuenta de usuario (Parte 2) 82 Ilustración 53: Establecimiento de conexión con la Batseñal 86 Ilustración 54: Muestra de las invitaciones de pertenencia a grupo disponibles. 86 Ilustración 55: Aceptado de invitación y cierre de conexión. 88 Ilustración 56: Diagrama de secuencia para compartir melodía (Parte 1) 91 Ilustración 57 : Diagrama de secuencia para compartir melodía (Parte 2) 93 Ilustración 58: Botón en diferentes estados. 95 Ilustración 59: Editor imágenes 9-Patch en Android Studio. 96 Ilustración 60: Pantalla inicio de sesión 97 Ilustración 61: Datos introducidos erróneos en el inicio de sesión. 98 Ilustración 62: Pantalla de registro en el sistema 99 Ilustración 63: Campo erróneo en el formulario de registro en el sistema. 100 Ilustración 64: Pantalla ‘Mis Batseñales’ 101 Ilustración 65: Pantalla de selección de dispositivo bluetooth 102 Ilustración 66: Pantalla de configuración de la Batseñal sin grupo 103 Ilustración 67: Error durante el vinculado de la Batseñal. 103 Ilustración 68: Pantalla de configuración de Batseñal sin conexión establecida 104 Ilustración 69: Pantalla de configuración de redes WIFI 105 Ilustración 70: Estado de conexión WIFI de la Batseñal. 105 Ilustración 71: Ventana de configuración de grupo. 106 Ilustración 72: Pantalla de invitación de grupo. 107 Ilustración 73: Pantalla de configuración de grupo. 108 Ilustración 74: Opción de configuración de grupo de Batseñales con un grupo asociado 108 Ilustración 75: Ventana de creación de grupo. 109 Ilustración 76: Cambio del botón de Demo en función del estado de la demostración. 110 Ilustración 77: Sección de 'Mis Batseñales' con una Batseñal vinculada 111 Ilustración 78: Pantalla de la sección de 'Mis Melodías'. 112 Ilustración 79: Editor de melodías. 113 Ilustración 80: Ventana de guardado de melodía. 115 Ilustración 81: Pantalla para subir melodía en foro de melodías. 115 Ilustración 82: Ventana para confirmar el eliminado de melodía almacenada localmente. 116 Ilustración 83: Buscador del foro de melodías. 117 Ilustración 84: Resultado de la búsqueda en el foro de melodías. 118 Ilustración 85: Comentarios publicados en una melodía. 119 Ilustración 86: Pantalla de comentarios con las respuestas cargadas. 120 Ilustración 87: Ventana de publicación de comentario. 120 Ilustración 88: Ventana de edición de comentario. 121 Ilustración 89: Ventana de confirmación de eliminado de comentario. 121 Ilustración 90: Sección de perfil. 122 Ilustración 91: Invitaciones de amistad recibidas. 122 Ilustración 92: Ventana de envío de solicitud de amistad. 123 Ilustración 93: Diseño Batseñal 124 Ilustración 94: Componentes del foco 125 Ilustración 95: Soporte logotipo 126 Ilustración 96: Foco 126 Ilustración 97: Soporte foco 127 Ilustración 98: Sujeción inferior del soporte del foco 127 Ilustración 99: Tornillo y tuerca 128 Ilustración 100: Caja Batseñal 128 Ilustración 101: Pantalla principal API Gateway. 132 Ilustración 102: Selección de tipo de API a crear. 132 Ilustración 103: Elegir un nombre para la API. 133 Ilustración 104: Ventana principal de configuración de la API 133 Ilustración 105: Ventana de selección de rutas. 134 Ilustración 106: Ventana de creación de rutas. 134 Ilustración 107: Ventana de creación de integración. 135 Ilustración 108: Ventana principal de funciones Lambda. 135 xxi Ilustración 109: Pantalla de creación de función. 136 Ilustración 110: Entorno de desarrollo integrado en AWS Lambda. 136 Ilustración 111: Pantalla principal del servicio RDS. 137 Ilustración 112: Configuración de la Base de Datos. 137 Ilustración 113: Conexión con la Base de datos desde pgAdmin 4. 138 Ilustración 114: Creación de una nueva tabla en pgAdmin. 138 Ilustración 115: Ventana principal de IoT Core. 139 Ilustración 116: Descarga de certificados. 140 Ilustración 117: Ventana de ‘Policies' de AWS IoT Core. 140 Ilustración 118: Ventana de creación de ‘Policy’ en AWS IoT Core. 141 Ilustración 119: Recuento de 4 líneas de pared en slicer. 163 Ilustración 120: Porcentaje de relleno de 40% frente a un 20%. 164 Ilustración 121: Ejemplo de pieza impresa con soportes. 164 Ilustración 122: Ejemplo de pieza con borde. 165 Ilustración 123: Fragmento de archivo ‘gcode’. 165 11 1 INTRODUCCIÓN 1.1 Motivación Es innegable que internet es una parte fundamental de nuestras vidas. Con el desarrollo de las tecnologías móviles y el aumento de popularidad de estas, estamos más conectados que nunca. Pero, aunque nos facilite la vida en numerosos aspectos, podemos llegar a sentirnos abrumados. Recibimos tantas notificaciones a diario provenientes de redes sociales y publicidad que, a menudo, necesitamos silenciar el teléfono para poder centrarnos en nuestro trabajo, estudios, o para simplemente relajarnos. Pero ¿qué ocurre cuando nos encontramos a la espera de un mensaje de un familiar? ¿O de la llegada de un correo importante? ¿Y si estoy esperando un mensaje, pero necesito estar concentrado en algo mientras tanto? Hay veces que necesitamos que un aviso en concreto destaque sobre el resto. En mi caso particular, mi amigo Gustavo (el cocreador de este proyecto junto conmigo) y yo, solemos jugar a videojuegos juntos. Generalmente estudiamos hasta que estamos cansados, cuando nos avisamos mutuamente para jugar mediante un mensaje de texto. A priori, este método puede parecer suficiente, pero hay situaciones en las que falla. Me explico: solemos estudiar con el móvil en silencio o apartado para no recibir interrupciones, por lo que se suele dar el caso en el que, por ejemplo, Gustavo termina de estudiar y me manda un mensaje. Yo, por tener el móvil apartado, no me percato de este aviso y él acaba buscando partida por su cuenta. El problema llega cuando, al cabo de unos minutos, yo termino de estudiar y al revisar el móvil, me doy cuenta de su aviso. Para ese momento, Gustavo ya se encuentra en partida, por lo que tenemos que esperar a que termine para poder jugar los dos juntos. Esta situación, aunque parezca fortuita, se solía repetir multitud de ocasiones hasta el punto de resultar molesto. Por casualidad, nos encontramos por internet las llamadas “Lámparas de la Amistad”, las cuales se conectaban por internet, y cuando se encendía una se encendía la otra. Entonces se nos ocurrió que podría ser divertido hacer eso mismo, pero con algo más personalizado. Decidimos ponernos manos a la obra y, con nuestros rudimentarios conocimientos de arduino, conseguimos crear nuestra primera versión de la Batseñal. Se trataban de dos focos con un botón para llamar y otro para colgar. Cada uno de nosotros tenía uno en su casa y, cuando alguno de los dos pulsaba el botón de llamar, se encendían ambos focos produciendo una melodía, y en función de lo que respondiese el otro, un led indicaba si la llamada había sido aceptada o rechazada. En aquel momento nos pareció una solución bastante efectiva, pues el número de situaciones en las que no contactábamos el uno con el otro se redujo drásticamente. Nos gustó tanto nuestro pequeño invento que pensamos que a más gente le podría interesar, no solo para jugar, sino para cualquier situación en la que tengas que avisar a un grupo de personar para algo específico. Es por ello por lo que empezamos a trabajar en una nueva versión mejorada que, en un futuro, pudiera ser producida en masa y comercializada. 1.2 Objetivos Nuestra primera solución constaba de 2 microcontroladores los cuales se conectaban a internet a través de wifi, actuando uno como cliente y otro como servidor. Estos controlaban a un par de botones, una tira de leds y un altavoz. La Batseñal que actuaba de servidor almacenaba el estado de la llamada y respondía a peticiones http a modo de servidor web, mientras que la que actuaba de cliente realizaba consultas periódicas a la Batseñal servidor mediante peticiones HTTP. Disponía de un led que indicaba la respuesta del otro usuario y un foco principal que indicaba si se estaba realizando una llamada. A continuación se muestra una imagen de la primera solución desarrollada. Introducción 12 12 Ilustración 1: Primera versión Batseñal Aunque esta solución fuese suficiente para nuestro propósito original, si queríamos comercializar nuestra idea, necesitábamos realizar una serie de modificaciones. • Configuración sencilla y rápida: No podemos pretender que el usuario final se lleve horas configurando su Batseñal, por lo que debe existir una forma cómoda de configurarla. • Personalizable: Aunque nos encantaba cómo quedaba nuestra melodía de la serie de Batman de los 60, creemos que al usuario final le gustaría poder elegir su propia melodía o quizás el color del que se ilumine su Batseñal. • Flexibilidad en la creación de grupos: Creemos que a mucha gente le puede interesar que, en vez de poder llamar a una única persona, se puedan formar grupos de Batseñales y así no dejar a ningún amigo fuera. • Respuesta inmediata (o casi): En nuestra primera versión era el cliente el que hacía sondeos periódicos para comprobar si el servidor estaba llamando. Encontramos que esta solución producía situaciones en las que, al pulsar el botón, la otra Batseñal tardaba unos 5s en encenderse, lo que dejaba al usuario dudando de si había pulsado bien o no el botón. Por ello decidimos reducir ese tiempo en la medida de lo posible. • Escalable y diseñado para durar: Debemos tener en cuenta que nuestra solución será usada por un gran número de usuarios y además debe tener una vida útil larga (al menos 5 años). 1.3 Descripción de la solución Tras dedicar unas semanas de investigación, conseguimos llegar a una solución que creemos cumple los objetivos planteados. La nueva solución conlleva un rediseño de la propia Batseñal, permitiéndola conectarse a un grupo de hasta 5 Batseñales. Para conectar una Batseñal a un grupo se hará uso de una aplicación móvil compatible con dispositivos Android. Esta aplicación permite, además de configurar al grupo que pertenece una Batseñal, modificar la melodía que suena al realizarse una llamada. Se muestra a continuación la Batseñal que se ha desarrollado en esta solución: 13 Ilustración 2: Batseñal elaborada en este proyecto Como se puede apreciar en la anterior imagen, la nueva Batseñal dispone de los siguientes elementos: • Un foco principal. Este foco se iluminará cuando se reciba una llamada, pero también servirá para informar al usuario de otros aspectos del funcionamiento como, por ejemplo, si la Batseñal se encuentra o no en modo configuración permitiendo a la aplicación móvil conectarse a ella. • 5 leds de estado. Cada uno de estos leds está asociado a un usuario del grupo, mostrando si su Batseñal se encuentra conectada cuando se realiza una llamada, si ha contestado positiva o negativamente a la llamada, o si no ha respondido. Se puede configurar a qué usuario está asociado cada led desde la aplicación móvil. • Un botón de aceptar llamada grande, y otro de colgar algo más pequeño. Además, dispone de un interruptor que permite silenciar la melodía que suena durante una llamada. tecnologías utilizadas 20 20 además de poder alquilar un servidor directamente, se tiene la opción de contratar únicamente los servicios que se van a utilizar. Ilustración 10: Logotipo AWS La ventaja de usar servicios frente al alquiler de un servidor tradicional es que no nos tenemos que preocupar por el mantenimiento del servidor, si no que de ello se encarga Amazon. Los servicios permiten una implementación más rápida y sencilla, son escalables y se adaptan al uso que necesitemos. Gracias a ellos conseguimos centrarnos únicamente en desarrollar nuestro proyecto y no tener que lidiar con otros factores. Como extra, AWS ofrece una capa gratuita de un año la cual no nos viene nada mal. 2.2.1 IoT Core Entrando en más detalles, nuestra Batseñal se conecta directamente a AWS a través de un servicio llamado IoT Core, el cual es un bróker MQTT. MQTT es un protocolo de mensajería publicador/subscriptor diseñado para ser simple, ligero y fácil de implementar (5). Mediante este servicio, nuestra Batseñal se comunica con las demás Batseñales que forman parte de un mismo grupo, y permite establecer llamadas entre las mismas. Esto se corresponde con el funcionamiento normal del sistema, es decir, cuando uno de los integrantes del grupo enciende una Batseñal y las demás se encienden automáticamente, permitiendo al resto de integrantes aceptar o rechazar la llamada. La ventaja de usar un bróker MQTT frente a nuestra alternativa en la primera solución mencionada en el anterior capítulo, es que es mucho más rápido (del orden de los 10ms según nuestras pruebas) y además consume muy pocos recursos. Durante su funcionamiento normal, la Batseñal estaría únicamente conectada por wifi al bróker MQTT. 2.2.2 API REST Por otro lado, nuestra aplicación Android se comunicará con AWS mediante una API Rest. En el lado del servidor, hacemos uso de un servicio llamado Lambda, que permite ejecutar código cuando nosotros deseemos. Para saber cuándo ejecutar este código, nos valemos de otro servicio llamado API Gateway, el cual acciona el código Lambda cuando recibe una petición HTTP a una URL concreta y devuelve la salida de la ejecución de este código al cliente. A su vez, el código Lambda realiza consultas a un servidor de base de datos Postgre SQL, administrado en AWS mediante el servicio RDS. Todo esto permite brindar a la Batseñal (a través de la aplicación Android) la información necesaria para su correcto funcionamiento. 2.2.2.1 Lambda Lambda es un servicio que permite ejecutar código sin necesidad de administrar ni mantener un servidor. Soporta multitud de lenguajes, aunque en este proyecto se ha utilizado Python. Dispone de un editor de código que permite trabajar desde cualquier navegador. A continuación se muestra la sección de la consola AWS que permite elegir qué servicio activa la función lambda. 21 Ilustración 11: Ejemplo función Lambda Este servicio puede tanto accionar otros servicios como ser accionado por éstos. A la hora de organizar el código, se puede optar por crear una función Lambda por cada operación que se desee realizar, o agrupar las funcionalidades en una misma función y ejecutar una sección de código diferente en función de los parámetros de entrada. Es este proyecto se ha optado por una solución híbrida, agrupando funcionalidades relacionadas en una misma función Lambda. En total se han creado un total de 5 funciones., las cuales reciben información por parte del usuario y, tras consultar con la base de datos, devuelven información al mismo o realizan acciones sobre el contenido de la base de datos. 2.2.2.2 API Gateway Como mencionamos anteriormente, las funciones Lambda inician su ejecución al ser accionados por otro servicio, y el encargado de esta tarea es el llamado API Gateway. Este servicio tiene como función accionar otros servicios cuando recibe una petición HTTP. Tiene asociada una URL a la que pueden enviarse peticiones. Ilustración 12: Función Lambda asociada a una ruta HTTP de cualquier tipo y, en función del método (POST, GET…) y de la ruta a la que se envíe, se puede accionar un servicio u otro (como se puede apreciar en la ilustración 12). En el caso de este proyecto se ha asociado una ruta a cada una de las funciones Lambda mencionadas anteriormente. API Gateway permite, además de accionar una función Lambda, enviar información a la misma, de manera que, en nuestro caso, se le envía a la función Lambda información contenida en el cuerpo de la tecnologías utilizadas 22 22 petición. Además, todas las consultas se realizan mediante peticiones POST, de manera que si se realizase con otro no se ejecutaría nada. Una vez la función Lambda haya realizado todas las operaciones necesarias nos devuelve algún tipo de información, ya sean códigos que nos informen sobre el éxito de una operación o información solicitada por el usuario. API Gateway se encarga entonces de enviar una respuesta al usuario con la información devuelta por la función Lambda. 2.2.2.3 RDS RDS es un servicio que facilita la configuración y operación de una Base de Datos. Permite usar distintos motores como MySQL, MariaDB o Oracle, pero en este proyecto se ha decidido utilizar PostgreSQL. Esta base de datos se encarga de almacenar toda la información necesaria para el correcto funcionamiento del proyecto. Se han creado un total de 8 tablas: • Amigos: Contiene datos relativos a las relaciones de amistad entre los distintos usuarios. • Usuarios: Almacena información relativa a los usuarios, como nombres de usuario o contraseñas. • Sesiones • Melodías: Alberga las melodías subidas por los usuarios de la aplicación. • Comentarios: Contiene todos los comentarios publicados en respuesta a una melodía subida. • Votos • Grupos: Contiene toda la información sobre las Batseñales y los grupos a los que pertenece. Aquí reside la información que posteriormente se enviará a la Batseñal para su correcto funcionamiento. 2.3 Impresión 3D Para la elaboración de la carcasa nos valimos de una impresora 3D. La impresión 3D es una tecnología de fabricación que se basa en la adición sucesiva de capas de material para formar un objeto tridimensional. Es una tecnología ideal para el prototipado, dado que permite crear piezas de gran complejidad de manera muy rápida y barata. Existen numerosas tecnologías, pero la impresora que hemos usado se basa en la técnica conocida como Modelado de Deposición Fundida (FDM). Es una de las técnicas de impresión 3d más conocidas, y consiste en fundir un filamento de un material sólido a temperatura ambiente para después depositarlo capa por capa sobre una superficie. Las ventajas de utilizar una impresora 3D es que permite modificar el diseño sin que suponga un coste adicional, como sí ocurre por ejemplo en el moldeo por inyección. Para poder crear una pieza en 3D personalizada, primero es necesario modelarla con un software de modelado 3D. Cuando la pieza está diseñada, se crea un archivo con extensión STL el cual incluye toda la información necesaria sobre la geometría de la pieza. Este archivo se pasa entonces a otro programa conocido como Slicer, el cual permite configurar todos los parámetros de impresión necesarios: altura de capa, soportes, grosor de paredes, etc. Finalizada la configuración genera un archivo legible por la impresora 3D que dicta los movimientos que debe realizar en todo momento: a qué temperatura debe estar el filamento, en qué posición se debe colocar el extrusor, cuánta cantidad de filamento hay que depositar, etc. Una vez generado este archivo, se le pasa a la impresora quien se encarga de crear la pieza en 3D. A continuación se puede apreciar una imagen del slicer utilizado en este proyecto: Ultimate Cura. 23 Ilustración 13: Ejemplo de configuración de un slicer (Ultimate Cura) Herramientas utilizadas 24 24 3 HERRAMIENTAS UTILIZADAS Para el desarrollo de este proyecto se ha hecho uso de una serie de herramientas tanto software como hardware. 3.1 Herramientas Software 3.1.1 Android Studio Ilustración 14: Logotipo Android Studio Para el desarrollo de la aplicación móvil se ha hecho uso de Android Studio, el cual es el entorno de desarrollo oficial para el desarrollo de aplicaciones en Android (6). Está basado en IntelliJ IDEA y contiene una gran cantidad de funcionalidades. Por nombrar algunas: • Compilador basado en Gradle. • Emulador de dispositivos Android. • Integración con GitHub. • Editor de código con predicciones de código muy útiles. 3.1.2 GitHub Desktop Dado que este es un proyecto colaborativo y nos encontrábamos continuamente cambiando de equipo, se decidió crear un repositorio en GitHub. Cada uno dispone de una rama diferente a la principal en la que guarda el código desarrollado. Ilustración 15: Logotipo Github Desktop Además, para mayor facilidad de uso, se ha usado GitHub Desktop, el cual dispone de una interfaz gráfica simple 25 e intuitiva que permite realizar las operaciones básicas de control de versiones sin tener que atender a comandos. 3.1.3 AWS Console Para el desarrollo en la nube de Amazon se ha utilizado el portal web del que dispone, dado que viene con todo lo necesario para configurar todos los servicios. Incluso viene con un editor de código integrado para programar las funciones Lambda. A continuación se puede apreciar la página principal de la consola de AWS. Ilustración 16: Consola AWS Además de venir con una aplicación web super útil para configurar sus servicios, AWS dispone de una gran cantidad de documentación que ha sido de gran ayuda a la hora de aprender a usar estos servicios. 3.1.4 Postman Se trata de una herramienta diseñada para el diseño y prueba de APIs. Se ha usado en este proyecto para testear la API Rest creada en AWS. Permite editar todos los campos de las peticiones HTTP a realizar en una interfaz intuitiva y fácil de usar. Ilustración 17: Logotipo Postman 3.1.5 Cinema 4D Como se mencionó anteriormente, para imprimir una pieza en 3D primero es necesaria modelarla. Existen infinidad de programas enfocados en el modelado en 3D, incluso específicamente diseñados para la impresión 3D. Cinema 4D no es un software orientado para ingenieros o diseñadores (como sí podrían serlo Fusion360 o AutoCAD), sino que se trata de un software de diseño, modelado, renderizado y animación enfocado para desarrollo de videojuegos, efectos especiales, realidad aumentada, etc. Pese a que existan mejores soluciones, se ha decidido usar Cinema 4D porque me encuentro familiarizado con el uso de este software. Llevo usándolo durante los últimos 7 años y, pese a que existan opciones más eficientes, me llevaría menos tiempo usar Cinema Herramientas utilizadas 26 26 4D que aprender otro software desde 0. A continuación se puede apreciar una captura del proyecto que se ha realizado en Cinema 4D para el diseño e impresión de la carcasa de la Batseñal. Ilustración 18: Captura Cinema4D 3.1.6 Ultimate Cura Este programa es lo que se conoce como un Slicer. Es un software encargado de generar las instrucciones legibles por las impresoras 3D y que permite configurar una gran cantidad de parámetros de impresión. Su curva de aprendizaje no es muy complicada si el objetivo es imprimir piezas no demasiado complejas, pero dispone de parámetros muy precisos para personalizar la configuración lo máximo posible a tu impresora. Además, como punto a favor, es de los Slicers más utilizados, por lo que existe una gran cantidad de documentación online. 3.1.7 Adobe XD Para el diseño básico de la interfaz de usuario, se ha usado Adobe xD. Este programa te permite diseñar la UI (Intefaz de usuario) y la UX (Experiencia de usuario). Se ha utilizado de forma básica para plantear la distribución de las pantallas en la aplicación, así como determinar los pasos que debe seguir un usuario para realizar las diferentes funcionalidades. Se puede apreciar en la siguiente captura que se ha realizado un diseño esquemático sin entrar en detalles en los aspectos estéticos. 27 Ilustración 19: Captura Adobe XD 3.1.8 pgAdmin 4 Pese a que AWS ofrece un servicio de base de datos, no ofrece ninguna forma de configurarla. Para ello hemos usado pgAdmin 4, uno de los softwares diseñados para configurar y manejar bases de datos PostgreSQL más usado. Este software permite conectarse a una base de datos y administrarla. Dispone de una interfaz gráfica para crear, configurar y visualizar tablas, haciendo estas acciones más cómodas de realizar con respecto a un cliente por consola. Ilustración 20: Logotipo pgAdmin 4 3.1.9 Visual Studio Code Aunque no me haya centrado en la programación de la Batseñal durante el desarrollo de este proyecto, se ha utilizado Visual Studio Code, junto con su extensión Platform.io, para poder subir código a la Batseñal y hacer pruebas de comunicación Bluetooth con la aplicación móvil. Ilustración 21: Logotipo VS Code Herramientas utilizadas 28 28 Ilustración 22: Logotipo PlatformIO La principal diferencia de usar platform.io con usar el propio ide de Arduino, es que gracias a que se usa en Visual Studio Code, obtienes todas las cualidades que éste posee. El IDE de Arduino es bastante limitado en cuanto a edición de código y no permite realizar ciertas acciones como vaciar la memoria del microcontrolador o comprobar la memoria usada en el mismo. 3.1.10 Aseprite Se trata de una herramienta ideada para el diseño de imágenes pixeladas, conocidas como ‘Pixel Art’. En este proyecto se ha utilizado para la creación de los fondos aplicados a los elementos personalizados en la aplicación desarrollada, como botones, selectores o barras de navegación. Ilustración 23: Logotipo Aseprite. 3.1.11 Diagrams.net Para la elaboración de algunos diagramas usados en este documento, se ha utilizado la aplicación web diagram.io, que permite realizar de forma rápida y sencilla diagramas de todo tipo. Además, viene con multitud de imágenes predefinidas que son de gran utilidad. Ilustración 24: Logotipo diagrams.net 3.1.12 Carbon Para crear las imágenes que contienen código, se ha utilizado esta aplicación web. Permite realizar capturas de prácticamente cualquier lenguaje, así como personalizar los colores con los que aparece. 29 Ilustración 25: Captura Carbon 3.2 Herramientas Hardware En cuanto a las herramientas físicas utilizadas, tenemos las siguientes: 3.2.1 Esp32 DevKit-C Para el desarrollo de la Batseñal y la realización de pruebas se ha utilizado un kit de desarrollo que contiene el mismo microcontrolador (Con algo menos de memoria) que se utiliza en la Batseñal. Es muy cómoda de usar dado que dispone de una conexión micro USB que permite conectarla directamente al ordenador. 3.2.2 Artillery Genius Para poder imprimir se ha utilizado una impresora 3D de la marca Artilley. Es una impresora muy cómoda de usar dado que funciona casi perfectamente con los parámetros predefinidos de serie. Dispone de una superficie de impresión con capacidad de calentarse (cama caliente) que permite una mayor adherencia de las piezas. Sin duda es recomendada si se desea iniciar en el mundo de la impresión 3D. Arquitectura y análisis 36 36 Tabla 4: CU-04 CU-04 Vincular una nueva Batseñal. CU-01 Precondición El usuario debe haber iniciado sesión en el sistema y debe tener una Batseñal encendida cerca. CU-01, CU-02. Descripción Proceso que debe seguir el usuario para vincular una Batseñal a su cuenta. Secuencia nominal Paso Acción 1 El usuario pulsa el botón de añadir una nueva Batseñal. 2 Se pide al usuario que acepte los permisos necesarios y que active Bluetooth. Una vez aceptados los permisos y activado Bluetooth, se muestra una lista con los dispositivos Bluetooth cercanos. 3 El usuario selecciona uno de los dispositivos que aparecen. 4 En el caso de que el dispositivo sea una Batseñal y no esté vinculado a ninguna cuenta, aparecerá un mensaje para informar de la conexión con el dispositivo y se desbloqueará el botón de continuar. El usuario pulsa el botón de continuar. Postcondición Se vincula el dispositivo con la cuenta del usuario y se avanza a la ventana de configuración de la Batseñal. Excepciones Paso Acción E.1 El dispositivo seleccionado no es una Batseñal. E1.1 Se informa al usuario que el usuario que el dispositivo introducido no es una Batseñal. E.2 El dispositivo seleccionado es una Batseñal pero ya se encuentra vinculado a una cuenta. E.2.1 Se informa al usuario que la Batseñal se encuentra vinculada a una cuenta de usuario. E.3 Se produce algún error a la hora de vincular el dispositivo (fallo de conexión bluetooth, fallo al conectar con los servidores AWS...). E.3.1 Se informa al usuario un mensaje de error genérico y se redirige al menú principal. E.4 El usuario rechaza los permisos necesarios o el activar Bluetooth. E.4.1 Cuando el usuario vuelva a acceder a esa ventana o pulse el botón de recargar, se le solicitará de nuevo activar Bluetooth y aceptar los permisos necesarios. Comentarios Si la Batseñal está vinculada a la cuenta del usuario que realiza la petición de vincular sigue apareciendo el mensaje descrito en E2. 37 Tabla 5: CU-05 CU-05 Acceder al menú de configuración de una Batseñal. Precondición El usuario debe haber iniciado sesión en el sistema y tener una Batseñal vinculada. CU01 CU-02, CU-04. Descripción Proceso que debe seguir el usuario para configurar una Batseñal. Secuencia nominal Paso Acción 1 El usuario accede a la sección de “Mis Batseñales” en el menú principal. 2 El usuario selecciona la Batseñal que desea configurar. 3 El usuario acepta los permisos Bluetooth y la aplicación se intentará conectar a la Batseñal correspondiente. Postcondición El usuario puede acceder a las distintas opciones de configuración. Excepciones Paso Acción E.1 El usuario rechaza la activación Bluetooth o los permisos necesarios. E1.1 Se volverá a solicitar la activación de Bluetooth hasta que el usuario acepte. E.2 La aplicación no consigue conectarse con la Batseñal mediante Bluetooth. E.2.1 Se informa al usuario que el dispositivo no ha podido conectarse y se le muestra un botón para reintentar la conexión. E.2.2 Al pulsar el botón de reintentar, la aplicación volverá a intentar conectarse a la Batseñal. E.3 La Batseñal no aparece en la sección de “Mis Batseñales”. E.3.1 El usuario arrastra la lista de Batseñales hacia abajo (incluso aunque no aparezca ninguna) y se volverán a consultar al servidor por las Batseñales vinculadas. Si está vinculada a la cuenta del usuario, aparecerá en la lista de Batseñales. Comentarios Ninguno. Tabla 6: CU-06 CU-06 Desvincular la Batseñal de la cuenta. Precondición El usuario debe encontrarse en la ventana de configuración de la Batseñal que desee Arquitectura y análisis 38 38 desvincular. CU-01, CU-02, CU-04, CU-05. Descripción Proceso que debe seguir el usuario para desvincular una Batseñal de su cuenta asociada. Secuencia nominal Paso Acción 1 El usuario, esté o no esté la aplicación conectada a la Batseñal, pulsa el botón de “Desvincular Batseñal”. 2 La aplicación desvincula la Batseñal de la cuenta del usuario. Postcondición Se llevará al usuario a la ventana principal de la sección de “Mis Batseñales” Excepciones Paso Acción E.1 Se produce algún error de conexión con la Batseñal o con el servidor a la hora del desvinculado. E1.1 Se informa al usuario que se ha producido un error y se cancela el desvinculado. Comentarios En el caso que se produzca algún error y se desvincule la Batseñal del sistema, pero ésta siga pensando que está vinculada a un usuario, se pueden restablecer los valores por defecto de la Batseñal si se mantiene pulsado durante 5s el botón de colgar. Tabla 7: CU-07 CU-07 Configurar conexión Wifi de una Batseñal. Precondición El usuario debe haber iniciado sesión en el sistema, tener una Batseñal vinculada y encontrarse en el correspondiente menú de configuración. CU-01, CU-02, CU-04, CU05. Descripción Proceso que debe seguir el usuario para configurar la conexión Wifi de una Batseñal y permitirle conectarse a internet. Secuencia nominal Paso Acción 1 El usuario selecciona la opción de “Configurar Wifi”. 2 Se solicitarán al usuario los permisos necesarios y se le mostrará, en caso de aceptarlos, una lista con las redes Wifi disponibles. 3 El usuario selecciona una red Wifi y se le muestra un formulario para introducir la contraseña. 4 El usuario introduce una contraseña válida y pulsa el botón de conectar. 5 Se pasarán los datos necesarios a la Batseñal y esta intentará conectarse a la red Wifi seleccionada. En caso de realizarse una conexión satisfactoria, se desbloqueará el botón de continuar y se devolverá al usuario a la ventana de configuración. 39 Postcondición En la ventana de configuración se mostrará el SSID de la red Wifi a la que la Batseñal configurada se intentará conectar, así como el estado de la conexión. Excepciones Paso Acción E.1 La Batseñal no es capaz de conectarse a la red Wifi solicitada. E1.1 Se informa al usuario que no se ha podido realizar la conexión. Comentarios Las redes mostradas son las que detecta el dispositivo móvil, por lo que puede darse el caso en el que se detecte una red pero que la Batseñal no sea capaz de conectarse a la misma. Tabla 8: CU-08 CU-08 Crear un grupo de Batseñales. Precondición El usuario debe haber iniciado sesión en el sistema, tener una Batseñal vinculada y encontrarse en el correspondiente menú de configuración. Además, la Batseñal no debe encontrarse unida a ningún grupo. CU-01, CU-02, CU-04, CU-05. Descripción Proceso que debe seguir el usuario para crear un grupo de Batseñales. Secuencia nominal Paso Acción 1 El usuario selecciona la opción de “Crear o unirse a un grupo”. 2 Se le muestra al usuario una ventana con dos opciones: crear un grupo o unirse a uno existente. El usuario selecciona la opción de crear un grupo. 3 Se muestra al usuario una ventana donde puede seleccionar la posición dentro del grupo, es decir, el led de estado asociado a su cuenta. El usuario entonces selecciona una posición y pulsa el botón de crear. 4 El grupo se crea satisfactoriamente. Postcondición Se muestran al usuario varios botones que permiten regresar al menú anterior, guardar de nuevo la posición (por si se desea modificar la posición), e invitar amigos al grupo recién creado. Será necesario entonces guardar los cambios en la Batseñal, CU-12. Excepciones Paso Acción E.1 En el paso 2 se clica fuera de la ventana. E1.1 Se cancela la operación. E.2 Se produce un error al crear el grupo. E2.1 Se informa al usuario que se ha producido un error. Comentarios Ninguno. Arquitectura y análisis 40 40 Tabla 9: CU-09 CU-09 Unirse a un grupo Precondición El usuario debe haber iniciado sesión en el sistema, tener una Batseñal vinculada y encontrarse en el correspondiente menú de configuración. Además, la Batseñal no debe encontrarse unida a ningún grupo y un integrante del grupo debe haber enviado al usuario una invitación para unirse al grupo. CU-01, CU-02, CU-04, CU-05, CU-10. Descripción Proceso que debe seguir el usuario para asociar una Batseñal a un grupo ya existente. Secuencia nominal Paso Acción 1 El usuario pulsa la sección de “Crear o unirse a un grupo”. 2 Se le muestra al usuario una ventana con dos opciones: crear un grupo o unirse a uno existente. El usuario selecciona la opción de unirse a un grupo. 3 Se le muestra al usuario una lista de invitaciones. El usuario entonces selecciona una invitación. 4 Se muestra una ventana donde el usuario puede elegir una posición dentro del grupo siempre y cuando no se encuentre ocupada por otro usuario. El usuario puede aceptar o rechazar la invitación. 4.1 El usuario pulsa el botón de aceptar la invitación. 4.1.1 Se muestran al usuario varios botones que permiten regresar al menú anterior, guardar de nuevo la posición (por si se desea modificar la posición), e invitar amigos al grupo recién creado. Además, se elimina la invitación. 4.2 El usuario pulsa el botón de rechazar. 4.2.1 Se cancela la invitación, se elimina y se regresa al usuario al menú de configuración. Postcondición Será necesario guardar los cambios en la Batseñal, CU-12. Excepciones Paso Acción E.1 En el paso 2 se clica fuera de la ventana. E1.1 Se cancela la operación. E.2 Se produce un error al crear el grupo. E.2.1 Se informa al usuario que el usuario que se ha producido un error. Comentarios Ninguno. 41 Tabla 10: CU-10 CU-10 Invitar a otro usuario a unirse a un grupo. Precondición El usuario debe haber iniciado sesión en el sistema, tener una Batseñal vinculada y encontrarse en el correspondiente menú de configuración. Además, la Batseñal debe encontrarse unida a un grupo y el usuario que se desee invitar debe ser amigo del usuario que envía la invitación. CU-01, CU-02, CU-04, CU-05, CU-08/CU-09, CU-XX. Descripción Proceso que debe seguir el usuario para invitar a otro usuario a unirse a un grupo. Secuencia nominal Paso Acción 1 El usuario accede a la sección de Grupo. Como el usuario se encuentra actualmente en un grupo, aparece la información básica del mismo. 2 Se muestra la ventana de configuración de grupo. El usuario pulsa sobre el botón de invitar a amigos. 3 Se abre una ventana con los amigos del usuario que no se encuentran en el grupo actualmente. Al lado de cada nombre aparece un botón que permite invitar a ese usuario. El usuario pulsa el botón correspondiente a los amigos que desee invitar. 3 Se eliminan los botones de aquellos amigos que hayan sido invitados correctamente, y se muestra un mensaje indicando esto mismo. Postcondición El usuario pulsa fuera de la ventana o en el botón cancelar para volver al menú de configuración de grupo. Excepciones Paso Acción E.1 Se produce algún error al enviar la invitación. E1.1 Se vuelve a mostrar el botón para invitar a ese amigo. Comentarios Ninguno. Tabla 11: CU-11 CU-11 Salir de un grupo. Precondición El usuario debe haber iniciado sesión en el sistema, tener una Batseñal vinculada y encontrarse en el correspondiente menú de configuración. Además, la Batseñal debe encontrarse unida a un grupo. CU-01, CU-02, CU-04, CU-05, CU-09/CU-08 Descripción Proceso que debe seguir el usuario para desvincular una Batseñal del grupo al que pertenece. Secuencia nominal Paso Acción 1 El usuario accede a la sección de Grupo. Como el usuario se encuentra Arquitectura y análisis 42 42 actualmente en un grupo, aparece la información básica del mismo. 2 El usuario pulsa el botón de salir del grupo. 3 Aparece un mensaje para confirmar que se desea salir del grupo. El usuario selecciona la opción de aceptar. 4 Se procede a eliminar la Batseñal del grupo. Postcondición Será necesario guardar los cambios en la Batseñal, CU-12. Excepciones Paso Acción E.1 Se produce algún error al salir del grupo. E1.1 Se muestra al usuario un mensaje diciendo que se ha producido un error y se mostrará de nuevo la ventana de configuración de grupo. Comentarios Ninguno. Tabla 12: CU-12 CU-12 Guardar los datos en la Batseñal. Precondición El usuario debe haber iniciado sesión en el sistema, tener una Batseñal vinculada y encontrarse en el correspondiente menú de configuración. CU-01, CU-02, CU-04, CU05. Descripción Proceso que debe seguir el usuario para guardar cualquier cambio realizado en el grupo o al cambiar la melodía. Secuencia nominal Paso Acción 1 El usuario pulsa el botón de Guardar y se pasa tanto la información del grupo al que pertenece como la melodía en caso de haberse seleccionado alguna. Postcondición El usuario vuelve a la pantalla principal de “Mis Batseñales”. Excepciones Paso Acción E.1 Se produce algún error de conexión Bluetooth al enviar los datos a la placa. E1.1 Se muestra un mensaje de error al usuario y se mantiene en la misma pantalla para poder guardar los datos de nuevo. Comentarios En caso de haberse realizado algún cambio en el grupo, pero no guardarse ese cambio en la Batseñal, esta seguirá comportándose de la misma forma que antes de modificar el grupo en la aplicación. Como todos los cambios se almacenan también en el servidor, se puede entrar de nuevo en la configuración de la Batseñal y pulsar para guardar los datos, de manera que se enviarán a la Batseñal los datos actualizados. 43 Tabla 13: CU-13 CU-13 Modificar tono de llamada de la Batseñal. Precondición El usuario debe haber iniciado sesión en el sistema, tener una Batseñal vinculada y encontrarse en el correspondiente menú de configuración. CU-01, CU-02, CU-04, CU05. Descripción Proceso que debe seguir un usuario para modificar el tono de llamada que suena cuando se activa la Batseñal. Secuencia nominal Paso Acción 1 En el desplegable que se encuentra en la sección “Melodía”, el usuario selecciona una melodía. Postcondición Será necesario guardar los cambios en la Batseñal, CU-12. Excepciones Paso Acción E.1 En el paso 1 se selecciona la primera entrada “ – “. E1.1 Al pulsar la opción de guardar no se envía ninguna melodía. Comentarios Ninguno. Tabla 14: CU-14 CU-14 Realizar una demostración de la Batseñal. Precondición El usuario debe haber iniciado sesión en el sistema, tener una Batseñal vinculada y encontrarse en el correspondiente menú de configuración. CU-01, CU-02, CU-04, CU05. Descripción Proceso que debe seguir el usuario para que la Batseñal se encienda y reproduzca la melodía asignada, así como posteriormente detenerla. Secuencia nominal Paso Acción 1 El usuario pulsa el botón de “Demo”. 2 La Batseñal actúa como si estuviese recibiendo una llamada. 3 El usuario pulsa de nuevo el botón, ahora con el texto “Parar”. 4 La demostración se detiene Postcondición Ninguna. Excepciones Ninguna. Arquitectura y análisis 44 44 Comentarios Si el usuario selecciona una melodía en el desplegable situado encima del botón, la demostración se ejecutará con esa melodía y la Batseñal establecerá la melodía seleccionada como el tono de llamada. Si no se pulsa el botón de “Parar”, la Batseñal se detendrá automáticamente tras 30s. 4.2.3 Gestión de amistades. Éstos son los casos de uso relacionados con la gestión de las amistades. Esto es necesario dado que sólo podrás invitar a un grupo de Batseñales a aquellos usuarios que sean tu amigo. Ilustración 30: Diagrama de casos de uso de gestión de amistades Tabla 15: CU-15 CU-15 Enviar solicitud de amistad. Precondición El usuario debe estar registrado en el sistema y haber iniciado sesión en el mismo. CU01, CU-02. Descripción Proceso que debe seguir el usuario enviar una solicitud de amistad a otro usuario. Secuencia nominal Paso Acción 1 El usuario se dirige a la sección de “Perfil”. 2 El usuario pulsa en el botón con una imagen de un “+”. 3 Se le muestra al usuario una ventana donde puede escribir el nombre de usuario del destinatario. 4 El usuario escribe el nombre del usuario al que desea enviar la invitación de amistad y pulsa el botón “Añadir”. 45 5 El botón muestra una animación de cargando, y cuando se envíe la solicitud se mostrará un mensaje advirtiendo al usuario que la solicitud ha sido enviada. Postcondición Ninguna. Excepciones Paso Acción E.1 En el paso 2 se clica fuera de la ventana. E1.1 Se cancela la operación. Comentarios Ninguno. Tabla 16: CU-16 CU-16 Aceptar solicitud de amistad. Precondición El usuario debe estar registrado en el sistema, así como haber iniciado sesión en el mismo. CU-01, CU-02. Descripción Proceso que debe seguir el usuario para aceptar una solicitud de amistad. Secuencia nominal Paso Acción 1 El usuario se dirige a la sección de “Perfil”. 2 El usuario pulsa en el botón con una imagen de un sobre de una carta. 3 Se le muestra al usuario una lista de invitaciones. El usuario entonces puede decidir entre aceptar o rechazar la invitación. 3.1 El usuario pulsa el botón de aceptar la invitación. 3.1.1 El usuario remitente de la invitación aparecerá en la lista de amigos y se elimina la invitación de la lista de invitaciones. 3.2 El usuario pulsa el botón de rechazar. 3.2.1 Se cancela la invitación y se elimina. Postcondición Ninguna Excepciones Paso Acción E.1 En el paso 3 se clica fuera de la ventana. E1.1 Se cancela la operación. E.2 Se produce un error al responder la invitación. E.2.1 Se informa al usuario que se ha producido un error. Arquitectura y análisis 52 52 Descripción Proceso que debe seguir el usuario para añadir un comentario a una publicación de melodía subida por otro usuario o por él mismo. Secuencia nominal Paso Acción 1 El usuario se dirige a la sección de “Melodías on-line” 2 El usuario pulsa sobre alguna de las publicaciones. 3 El usuario pulsa sobre el botón con forma de flecha . 4 Se le muestra al usuario entonces una ventana con un campo para insertar texto, un botón “Publicar” y otro “Cancelar”. El usuario introduce un comentario y pulsa el botón de “Publicar”. Postcondición Ninguna. Excepciones Paso Acción E.1 Se produce un error durante la subida E.1.1 Se hace saber al usuario que se ha producido un error durante la publicación de su comentario. E.2 En el paso 4, el usuario pulsa fuera de la ventana o pulsa el botón cancelar. E.2.1 Se cancela la operación Comentarios Ninguno. Tabla 24: CU-24 CU-24 Eliminar un comentario. Precondición El usuario debe estar registrado en el sistema, así como haber iniciado sesión en el mismo. Además, debe existir una publicación con un comentario. CU-01, CU-02, CU-19, CU23. Descripción Proceso que debe seguir un usuario para eliminar un comentario publicado por él mismo. Secuencia nominal Paso Acción 1 El usuario se dirige a la sección de “Melodías On-line”. 2 El usuario selecciona la publicación que contenga el comentario a eliminar. 3 El usuario pulsa sobre el botón con forma de cubo de basura . 4 Se muestra un mensaje al usuario para confirmar que desea eliminar el comentario, con las opciones “Aceptar” y “Cancelar”. El usuario pulsa sobre el 53 botón de “Aceptar”. Postcondición Se muestra un icono de cargando sobre el comentario y cuando se completa la eliminación, se muestra un mensaje de “Eliminado” en el lugar donde se encontraba el comentario. Si se regresa a la pantalla principal de “Melodías On-line” y se selecciona de nuevo esa publicación, no aparecerá el mensaje. Excepciones Paso Acción E.1 En el paso 4 se clica fuera de la ventana o pulsa el botón “Cancelar”. E1.1 Se cancela la operación. E.2 Ocurre un error durante la eliminación del comentario. E.2.1 Se muestra al usuario un mensaje, haciéndole saber que se ha producido un error durante la publicación. Comentarios En el caso de que el mensaje sea respondido por otros, éste aparecerá como mensaje eliminado aunque se seguirán pudiendo ver las respuestas del mismo. Tabla 25: CU-25 CU-25 Responder un comentario. Precondición El usuario debe estar registrado en el sistema, así como haber iniciado sesión en el mismo. Además, debe existir una publicación con un comentario publicado por él. CU-01, CU02, CU-19, CU-23. Descripción Proceso que debe seguir el usuario para subir una melodía al foro de la aplicación, permitiendo que otros usuarios puedan descargarla. Secuencia nominal Paso Acción 1 El usuario se dirige a la sección de “Melodías On-line”. 2 El usuario selecciona una de las publicaciones. 3 El usuario pulsa sobre el botón con forma de flecha en uno de los comentarios. 4 Se le muestra al usuario entonces una ventana con un campo para insertar texto, un botón “Publicar” y otro “Cancelar”. El usuario introduce un comentario y pulsa el botón de “Publicar”. 5 El nuevo comentario se subirá al foro mostrándose como respuesta al comentario sobre el que se pulsó el botón de responder . Postcondición Ninguna. Arquitectura y análisis 54 54 Excepciones Paso Acción E.1 En el paso 4 se clica fuera de la ventana o pulsa el botón “Cancelar”. E1.1 Se cancela la operación. E.2 Ocurre un error durante la publicación del comentario. E.2.1 Se muestra al usuario un mensaje, haciéndole saber que se ha producido un error durante la publicación. Comentarios Ninguno. Tabla 26: CU-26 CU-26 Eliminar una publicación de melodía. Precondición El usuario debe estar registrado en el sistema, así como haber iniciado sesión en el mismo. Además, debe haber realizado una publicación anteriormente. CU-01, CU-02, CU-19. Descripción Proceso que debe seguir un usuario para eliminar una publicación de melodía publicada por él mismo. Secuencia nominal Paso Acción 1 El usuario se dirige a la sección de “Melodías On-line”. 2 El usuario pulsa sobre el botón con forma de cubo de basura que sólo aparecerá en aquellas publicaciones en las que el usuario sea el autor. 3 Se muestra un mensaje al usuario para confirmar que desea eliminar el comentario, con las opciones “Aceptar” y “Cancelar”. El usuario pulsa sobre el botón de “Aceptar”. Postcondición Se elimina la publicación de melodía. Excepciones Paso Acción E.1 En el paso 3 se clica fuera de la ventana o pulsa el botón “Cancelar”. E1.1 Se cancela la operación. Comentarios Ninguno. 55 Desarrollo en Amazon Web Services 56 56 5 DESARROLLO EN AMAZON WEB SERVICES Como se ha mencionado en el punto 2.2 de este documento, se ha utilizado AWS para la realización de una parte importante de este proyecto. La elección de este servicio de computación en la nube frente a otras alternativas como pueden ser Microsoft Azure o la propuesta de Google, Google Cloud, fue tomada desde un punto de vista económico. Las tres compañías ofrecen los servicios necesarios para la realización de este proyecto: una base de datos, alguna forma de implementar una API Rest, y un bróker MQTT. Si bien las tres opciones ofrecen distintas formas de periodos de prueba gratuitos, se llegó a la conclusión de que, según las necesidades de este proyecto, la cloud de Amazon ofrecía una solución más económica. AWS ofrece una capa gratuita de 1 año que incluye todos los servicios que se necesitan para el desarrollo de este proyecto. Antes del comienzo del desarrollo del proyecto, no disponía de ningún conocimiento acerca de la cloud de Amazon, por lo que se dedicaron unas semanas de investigación sobre los distintos servicios que ofrece AWS. Existe gran cantidad de información acerca de los servicios ofrecidos por AWS, tanto oficial como procedente de terceros (principalmente páginas web creadas por desarrolladores y plataformas de vídeo como Youtube), que permite introducirse de manera rápida al funcionamiento de estos servicios. 5.1.1 Desarrollo de API Rest Comenzaremos con el desarrollo de la API Rest. Como se mencionó en la descripción de las tecnologías utilizadas de este documento (capítulo 2), AWS dispone de varios servicios diseñados para crear una API Rest. Se han utilizado tres servicios diferentes para el desarrollo de este proyecto. Por un lado, se encuentra Lambda, el cual puede considerarse como el núcleo de la API y permite ejecutar secciones de código cuando se lo indique otro servicio de AWS. Por otro lado, el encargado de activar estos fragmentos de código es API Gateway, que recibe peticiones HTTP y actúa en consecuencia. Por último, se encuentra RDS, que es el encargado de gestionar la base de datos de la que hará uso Lambda, la cual almacenará la información necesaria para el correcto funcionamiento del proyecto. 5.1.1.1 Utilización del servicio Lambda Lambda es un servicio cuya característica principal es la capacidad de ejecutar código sin necesidad de tener que gestionar ningún servidor. La idea es que el desarrollador se preocupe únicamente del correcto funcionamiento del código que esté desarrollando, mientras que Amazon se encarga del mantenimiento del servidor donde se ejecuta este código. Este servicio dispone de multitud de lenguajes compatibles, aunque por comodidad, se ha decidido utilizar Python 3.8, dado que es un lenguaje con el que me encuentro familiarizado y que he utilizado en varias ocasiones anteriormente. Además, dispone de un entorno de desarrollo accesible a través de un navegador web (Ilustración 33) que permite desarrollar el código necesario, así como testearlo o monitorizar las ejecuciones de las funciones. 57 Ilustración 33: Entorno de desarrollo de funciones Lambda. La forma de utilizar este servicio es simple: se crean funciones Lambda, que podrían considerarse como pequeños programas que se ejecutan cuando lo indica otro servicio, en nuestro caso, API Gateway. Existen 2 estrategias a seguir en cuanto a la creación de funciones Lambda. Se puede crear una función por cada tarea que se desee realizar en el servidor, o se puede optar por utilizar una única función lambda que, en función de los parámetros de entrada, realice una acción u otra. Para la realización de este proyecto se ha decidido utilizar una estrategia híbrida: agrupar las funciones que se encarguen de una funcionalidad parecida en una misma función Lambda. En concreto se han desarrollado 6 funciones Lambda: • Login: Todo lo relacionado con la gestión de la cuenta del usuario, es decir, inicio de sesión, creación de cuenta, etc. • Vinculado: Aquellas funciones encargadas de vincular una Batseñal a una cuenta de usuario y mostrar o editar información relacionada con la misma. • Basic: Aquí se agrupan las funciones que se encargan del funcionamiento básico de la aplicación. Son las encargadas de gestionar la información relacionada con los grupos de Batseñales y de las invitaciones. Por ejemplo, permiten crear grupos de Batseñales, invitar a usuarios a un grupo o unirse a un grupo ya existente. • Foro: Son todas las funciones relacionadas con la funcionalidad de compartir melodías con otros usuarios. Permiten subir canciones, descargarlas, aplicar filtros de búsqueda, gestionar comentarios, etc. • Amigos: Aquellas funciones que permiten añadir a un usuario como amigo. Esto es importante dado que un usuario no puede unirse a un grupo a menos que un amigo perteneciente al mismo lo invite. • Administración: Son aquellas funciones relacionadas con la administración del proyecto y que no son accesibles al usuario final. Aquí se encuentran las funciones que calculan identificadores únicos que son asignados a las Batseñales. Profundizando un poco en cada una de las funciones, en cada función se pueden encontrar las siguientes funciones Lambda: 5.1.1.1.1 Función Lambda: Login Contiene las acciones relacionadas con la gestión de la cuenta de un usuario. Se disponen de las siguientes funciones. • login: inicia la sesión de un usuario en el sistema. Devuelve un identificador de sesión que identifica al usuario sin necesidad de enviar la contraseña y el nombre del usuario cada vez que se llama a una Desarrollo en Amazon Web Services 58 58 función Lambda. • logout: cierra una sesión del usuario en el sistema. • crea: Crea una cuenta, recibiendo como parámetros un nombre de usuario que no debe encontrarse ocupado por ninguna otra cuenta, un correo que tampoco debe haberse usado en ninguna otra cuenta y una contraseña. • elimina: Elimina una cuenta de usuario, así como todas las referencias a esta cuenta. Para identificar una cuenta de usuario que tiene iniciada una sesión se utiliza el identificador devuelto por la función log in. Esto permite identificar a un usuario sin necesidad de estar pasando continuamente como parámetro la contraseña y el nombre de usuario, así como elimina la necesidad de comprobar si la contraseña pasada como parámetro coincide con la contraseña asociada a una cuenta. 5.1.1.1.2 Función Lambda: Vinculado Permite vincular y desvincular una placa de una cuenta de usuario, así como modificar ciertas propiedades del vinculado. Para identificar una Batseñal se utiliza un identificador único a cada Batseñal que esta almacena permanentemente. Este identificar se pasa como parámetro a las funciones para identificar una Batseñal. • vincula: crea una relación de vinculado entre una Batseñal y una cuenta de usuario. • desvincula: elimina la relación de vinculado entre una cuenta de usuario y una Batseñal especificada. • cambiaNombre: modifica el nombre con el que una cuenta de usuario especificada identifica una Batseñal. • getPlacas: Obtiene las Batseñales vinculadas a una cuenta de usuario especificada. 5.1.1.1.3 Función Lambda: Basic Aquí se agrupan las funciones que se encargan del funcionamiento básico de la aplicación. Son las encargadas de gestionar la información relacionada con los grupos a los que pertenece una Batseñal, de gestionar las invitaciones a un grupo o de poner una Batseñal conectada a internet en modo configuración. • creaGrupo: Elimina una Batseñal correspondiente a un usuario del grupo al que pertenezca (si pertenece a alguno) y crea un nuevo grupo en el que introduce a la Batseñal en la posición especificada dentro del grupo. Devuelve un identificador único que identifica al grupo. • invitaGrupo: Envía una invitación a un usuario, siempre que éste tenga una relación de amistad con el usuario que envía la invitación. Es necesario especificar el grupo al que corresponde la invitación. • getInvitaciones: Devuelve las invitaciones a grupos cuyo usuario destino sea el que realiza la petición. Cada invitación se identifica con un identificador único. • abreInvitacion: Devuelve los integrantes del grupo al que pertenece una invitación y su posición dentro del mismo. Se usa para ver los integrantes antes de responder a la invitación. • respondeInvitacion: responde una invitación especificada positiva o negativamente, siempre que la invitación exista y el usuario que realice la petición sea el destinatario de la invitación. En caso de aceptar la invitación añade a la Batseñal especificada a un grupo en la posición especificada. • getGrupo: Obtiene los datos del grupo al que pertenece una Batseñal en caso de pertenecer. Es necesario especificar el identificador de la Batseñal de la que se desea obtener el grupo, así como identificar al usuario propietario de la Batseñal con su identificador de sesión. • editaGrupo: En caso de pertenecer a un grupo, es posible modificar la posición relativa dentro de un grupo. Para ello se usa esta función identificando a la Batseñal que pertenece al grupo que se desea modificar, indicando la nueva posición y el usuario propietario de la Batseñal. • configuraPlaca: envía un mensaje a la Batseñal especificada para que se ponga en modo configuración. 59 • eliminaGrupo: elimina el grupo al que pertenece una Batseñal especificada. 5.1.1.1.4 Función Lambda: Foro En esta función Lambda se engloban las acciones relacionadas con el foro de melodías. • addMelodia: permite subir una melodía al foro de melodías. • delMelodia: elimina una melodía subida al foro siempre que el usuario que realiza la petición sea el mismo que subió la melodía al foro. Las melodías se identifican con un identificador único. • getMelodías: obtiene una cantidad especificada de melodías subidas en el foro en función de unos filtros de búsqueda. Es posible filtrar por título o autor, ordenar por fecha de subida, cantidad de votos positivos, número de descargas, etc. • addComentario; Añade un comentario a una publicación o responde a otro comentario, según el elemento que se especifique. • delComentario: Elimina un comentario especificado siempre que el usuario que envía la petición sea el autor del comentario. Los comentarios se identifican con un identificador único. • editaComentario: Existe la posibilidad de editar un comentario publicado en el foro siempre que seas el autor del mismo. • getComentarios: Obtiene una cantidad específica de comentarios, ordenados por la puntuación de los comentarios. • addVoto: Añade un voto a una publicación o a un comentario. El voto se aplicará siempre que no se haya realizado ningún voto anteriormente o si se cambia el voto. Es necesario especificar el usuario que realiza el voto y el voto en sí (positivo o negativo). • addDescarga: incrementa el contador de descargas de una publicación. Es necesario especificar la publicación que se desea descargar. • getPerfil: obtiene la puntuación y el correo electrónico asociado a un usuario específico. Tanto las funciones getComentarios y getMelodías permiten especificar la cantidad de elementos que se desean obtener así como un offset que indica la posición a partir de la que se desea obtener datos. Esto permite que, a la hora de cargar los datos en la aplicación móvil, no sea necesario obtener todos los datos, sino que se puedan ir cargando conforme se va avanzando (primero se cargan los 10 primeros elementos y cuando se llega al final se cargan los siguientes 10). 5.1.1.1.5 Función Lambda: Admin En esta función Lambda se encuentran funciones cuyo uso está destinado a nosotros los desarrolladores del proyecto. Encontramos las clases aniadirID y eliminaID, las cuales nos permiten obtener un identificador único y asignarlo a una Batseñal. Esto es necesario dado que toda Batseñal debe poderse identificar unívocamente. Podría considerarse que con la MAC bluetooth de las ESP32 bastaría, pero, aunque estas direcciones deberían ser únicas, no tienen por qué serlas. Es por ello que se asignan identificadores que pueden confirmarse como únicos para cada una de las Batseñales. 5.1.1.1.6 Función Lambda: Amigos Aquí se agrupan las funciones encargadas de gestionar las relaciones de amistad. • enviaSolicitud: se envía una invitación de amistad a un usuario especificado, en caso de encontrarse registrado en el sistema. Desarrollo en Amazon Web Services 60 60 • respondesolicitud: responde a una invitación de amistad positiva o negativamente. Es necesario especificar la invitación y la respuesta a la misma. • eliminaAmigo: elimina la relación de amistad entre dos usuarios, siendo estos el usuario que realiza la petición y el usuario especificado en la misma. • getAmigos: Obtiene aquellos usuarios con los que el usuario que solicita la operación tiene una relación de amistad. • getSolicitudes: Obtiene las solicitudes de amistad cuyo destinatario sea el usuario que realiza la petición. 5.1.1.1.7 Identificadores únicos A lo largo de esta sección se han mencionado una serie de identificadores únicos, los cuales se utilizan para hacer referencias a grupos, melodías, comentarios o Batseñales. Estos identificadores se crean dinámicamente a la hora de ejecutar ciertas funciones. Ilustración 34: Estructura del identificador único Como se puede apreciar en la ilustración 34, los identificadores usados se componen de varias partes. • Tipo: Identifica el tipo de objeto al que el identificador hace referencia. Disponemos de GRP (grupo), PLC (Batseñal), COM (Comentario) y MEL (Melodía). • Una cadena aleatoria de 10 caracteres generada en el momento que se genera el identificador. • Los 10 dígitos menos significativos de la timestamp del momento en el que se realiza la consulta. Esto nos da una precisión de 1 segundo. Con esta codificación conseguiríamos generar más de 16 Billones (16.679.880.978.201) identificadores únicos cada segundo para cada tipo de elemento. En la práctica no se podrían generar tantos, dado que se trata de una secuencia aleatoria de caracteres y podría generarse un identificador repetido sin que se hayan generado todas las combinaciones posibles, pero la probabilidad de que se generen 2 identificadores iguales es muy baja. Además, cada vez que se almacena un identificador se comprueba que sea único antes de insertarlo en la base de datos. 5.1.1.2 Utilización del servicio API Gateway API Gateway es un servicio que te permite recibir peticiones HTTP y actuar en consecuencia. Este servicio dispone de 2 opciones principales: REST API y HTTP API. Ambas tienen objetivos similares, solo que HTTP API es más recortada en cuanto a las características que ofrece frente a REST API, aunque para la mayoría de los casos, HTTP API es más que suficiente. Es por ello por lo que se decidió utilizar esta última en este proyecto, dado que adicionalmente, HTTP API es más sencillo de configurar y más barato. Un API Rest en el servicio API Gateway es una colección de recursos y métodos que se integran con el Backend mediante puntos de enlace HTTP (7). Este servicio permite enlazar una URL proveniente de una petición HTTP a una acción concreta, incluso puede realizar una acción distinta en función del método usado. Pero antes de entrar en más detalle, se realizará un repaso rápido a la estructura de una URL. En la siguiente ilustración (Ilustración 35) se detallan las partes que componen una URL: 61 Ilustración 35: Formato URL En este proyecto, el dominio es común a todas las peticiones a las que responde el servidor y es establecido por AWS, aunque existe la posibilidad de utilizar un dominio personalizado en caso de disponer uno. Para diferenciar entre una función Lambda y otra se hace uso de la ruta, enlazando una ruta diferente a cada función Lambda. Esto permite especificar la función Lambda utilizada, pero como se ha visto en el apartado anterior, cada función Lambda tiene una serie de funciones que, además, reciben unos parámetros específicos. Para resolver este problema se hace uso de la capacidad de las peticiones HTTP de transmitir información. La forma más rápida y usada para transmitir pequeñas cantidades de información es usando la propia URL de la petición, haciendo uso de los parámetros o querystring. En este proyecto, en cambio, se optó por usar otra forma de transmitir información, usando el cuerpo o body de la petición HTTP, que permite enviar una mayor cantidad de información. Además, se ha utilizado el método POST en todas las peticiones. Para enviar información en el body se utiliza el formato JSON (4), como se mencionó en el capítulo 2 de este documento. La forma en la que se estructura este JSON varía en cada petición, pero en todas las solicitudes se puede apreciar la existencia de un elemento en común: la función que se desea ejecutar, que identifica con una cadena de caracteres a una función que se desea llamar dentro de una función Lambda. Los demás elementos del JSON son otros datos que toman las funciones como argumentos de entrada y varían entre una función y otra. Se puede apreciar un ejemplo a continuación (Ilustración 36). Ilustración 36: Ejemplo de cuerpo de petición HTTP. Una vez termina la ejecución de la función Lambda, esta devuelve información que necesita ser entregada al emisor de la petición HTTP. Para ello se envía la información necesaria en el body de la respuesta HTTP haciendo uso, de nuevo, del formato JSON. Como particularidad a destacar, en la gran mayoría de las ocasiones se recibe un código que indica si la ejecución se ha realizado correctamente junto con la información relevante para el emisor de la petición o, en caso de haberse producido un fallo, un código que permite identificar el error ocurrido (datos erróneos, error en el servidor, etc.). A continuación se puede apreciar un esquema resumen de las peticiones que se pueden realizar a la API desarrollada (Ilustración 37). Desarrollo de aplicación móvil. 68 68 6 DESARROLLO DE APLICACIÓN MÓVIL. Continuamos con el desarrollo de la aplicación móvil. Como se ha mencionado en la sección 2.2, se ha decidido realizar una aplicación móvil nativa en Android que permite, entre otras cosas, la configuración de la Batseñal. Esta sección abarca la mayor parte del tiempo empleado para la realización de este proyecto, aproximadamente un 60% del tiempo total empleado. En esta sección se detallarán los aspectos más importantes del diseño y desarrollo de la aplicación móvil. 6.1 Arquitectura de la aplicación La aplicación está diseñada para cumplir 3 tareas principales: configurar una Batseñal, crear una melodía y compartir una melodía creada con la comunidad de usuarios de la aplicación. • Configurar una Batseñal. Se trata de la funcionalidad principal de la aplicación y el motivo principal por el que se decidió realizar la misma. Es necesario que la aplicación pueda vincular y desvincular una Batseñal de una cuenta de usuario, administrar los grupos a los que pertenece una Batseñal, configurar la conexión Wifi de la Batseñal y personalizar la melodía que suena como tono de llamada. • Crear una melodía. Como se mencionó en la introducción del documento, uno de los atractivos de la Batseñal es su capacidad de personalización, lo que implica entre otras cosas, la capacidad de crear un tono de llamada personalizado. Para ello se ha diseñado y desarrollado un editor de melodías personalizado que permite crear cualquier melodía. • Compartir melodías. Una vez creada una melodía personalizada, la evolución natural es la capacidad de poder compartirla con otros usuarios, por lo que se ha decidido crear un espacio en el que poder subir melodías creadas y descargar otras melodías creadas por otros usuarios. Además, se ha añadido la capacidad añadida de interacción mediante la capacidad de publicar comentarios y realizar votaciones positivas o negativas sobre melodías y sobre otros comentarios. Estas 3 tareas conforman las partes principales de la aplicación sobre las que se ha diseñado la arquitectura de la misma. Entrando en detalles más concretos, se ha decidido hacer uso tanto de las llamadas Activities como de Fragmentos o Fragments. La manera tradicional en la que se construyen aplicaciones en Android es mediante el uso de Activities. Estas son pantallas sobre las que se añaden distintos elementos como textos, botones e imágenes. Para realizar una transición entre una Activity y otra es necesario inicializar la nueva Activity explícitamente y se puede hacer algo complicado trabajar en aplicaciones con gran diversidad de ventanas o con distintos tamaños de pantallas. Es por ello que, en la versión de la API 11 de Android, se añadieron los Fragmentos. Estos aportan, junto con el componente Navigator, una gran facilidad a la hora de trabajar con muchas ventanas. Para estructurar la aplicación desarrollada, se ha decidido utilizar una Activity con un componente navigator que alberga los fragmentos relacionados con el inicio de sesión y la creación de cuentas de usuario que llamaremos “ActivityMain”, y otra Activity con el resto de los fragmentos que compone la aplicación que llamaremos “ActivityPrincipal”. Al abrir la aplicación, se inicializa siempre la primera Activity que permite al usuario iniciar sesión en el sistema y crear una nueva cuenta de usuario en caso de no disponer de ninguna. Una vez iniciada la sesión en la aplicación, se inicializa la segunda Activity que contiene el resto de funcionalidades de la aplicación. A continuación, podemos apreciar las transiciones entre fragmentos en ActivityMain (Ilustración 41). 69 Ilustración 41: Esquema de fragmentos de ActivityMain Y en la siguiente imagen (Ilustración 42) podemos apreciar las transiciones entre fragmentos correspondientes al “ActivityPincipal”. Desarrollo de aplicación móvil. 70 70 Ilustración 42: Esquema de fragmentos de ActivityPrincipal Además, para acceder a los elementos que componen la interfaz de usuario como pueden ser botones, textos u otros elementos (conocidos con el nombre de “componentes”), se ha hecho uso del llamado viewBinding. Si no se hiciera uso del view Binding, habría que encontrar primero el elemento al que queremos acceder mediante una llamada a findViewById(), y después modificar este elemento. En cambio, utilizando viewBinding, únicamente es necesario obtener una instancia del viewBinding al inicio de la clase asignándole el valor a una propiedad, y después bastaría con acceder a esa propiedad que, a su vez, tiene como propiedad todos los componentes del layout. Este permite acceder a los componentes del layout de una forma más sencilla y eficiente, al no tener que buscar un elemento cada vez que se quiera modificar. En la siguiente figura (Ilustración 43) se puede ver un ejemplo de acceso a un textView utilizando viewBinding y sin utilizarlo. Ilustración 43: Ejemplo de uso de viewBinding 6.1.1 Organización de los fragmentos. Como se puede apreciar en el anterior esquema de fragmentos de ActivityPrincipal (Ilustración 42), los 71 fragmentos de esta Activity se organizan en 4 grupos. Comenzando por el más grande, se encuentra el grupo de fragmentos encargados de la configuración de la Batseñal. El fragmento principal de este grupo, MainPlacasFragment muestra las Batseñales vinculadas a la cuenta del usuario que ha iniciado sesión en el sistema. De este fragmento parten los siguientes: • PlacaBluetoothFragment: se encarga de vincular una nueva Batseñal a la cuenta del usuario que ha iniciado sesión en el dispositivo. • PlacaManuFragment: encargado de poner la Batseñal en modo configuración. Además, en este fragmento se guarda la melodía de tono de llamada en la Batseñal, se crean nuevos grupos de Batseñales o se muestran las invitaciones a grupos de Batseñales. • PlacaGrupoConfigFragment: Este fragmento se encarga de editar la posición relativa dentro de un grupo de Batseñales, así como enviar y aceptar invitaciones a grupos de batseñales. • PlacaWifiFragment: Este fragmento es el encargado de enviar las credenciales de Wifi (SSID y contraseña) a la Batseñal. Esta versión únicamente permite conectarse a redes domésticas, pero se planea añadir la opción de conectar la Batseñal a redes Wifi corporativas que utilicen, por ejemplo, autenticación basada en radius o diameter. Justo debajo de este primer grupo, se encuentra un grupo cuyo fragmento principal es MainMelodiasFragment y es el encargado de mostrar las melodías almacenadas localmente. De este fragmento parte únicamente una transición a otro llamado MusicEditorFragment el cual alberga el editor de melodías. Se trata de un editor de melodías creado desde cero que permite elaborar una melodía básica para después almacenarla en la memoria interna del dispositivo, ofreciendo la posibilidad de compartirla en un foro de melodías. Se entrará en más detalles acerca de la elaboración de este fragmento más adelante. Otro grupo que se puede encontrar en el esquema anterior, a la izquierda de la imagen, es el encargado de la conexión con el foro de melodías. El fragmento principal de este grupo es MainForoFragment y en él se encuentra toda la funcionalidad que permite buscar las melodías compartidas por otros usuarios del sistema. En este grupo encontramos el fragmento ForoCancionFragment que muestra la información relativa a una melodía compartida en el Foro. Además, muestra todos los comentarios realizados sobre esta melodía y permite añadir comentarios o responder otros, así como editar o eliminar aquellos comentarios publicados por el usuario que ha iniciado sesión en el dispositivo. Como detalle a destacar, dado que puede haber una gran cantidad de comentarios o publicaciones de melodía guardados en el sistema, resulta inviable cargarlos todos a la vez al poder tardar en exceso si se trata de muchos datos. Es por ello que se van cargando paulatinamente, y conforme se va haciendo scroll hacia abajo en la lista de comentarios o publicaciones de melodía, se van cargando más. Finalmente encontramos un último fragmento llamado MainPerfilFragment. Este fragmento permite, entre otras cosas, ver la lista de amistades del usuario que inicia sesión en el dispositivo, así como añadir amigos y enviar solicitudes de amistad a otros usuarios de la aplicación. 6.2 Implementación de consumición de API Rest. Como se mencionó en capítulo 2, esta aplicación consume una API Rest desarrollada en la cloud de Amazon, y para integrar las llamadas a la API se ha utilizado Volley. Se trata de una librería que hace fácil y rápido el uso de internet en Android (8) y permite realizar peticiones HTTP que en nuestro caso van dirigidas a nuestra API. Para lograr el correcto funcionamiento, primero es necesario crear una cola de peticiones HTTP y posteriormente insertar en esta cola las peticiones que se desean realizar. Para ello se han creado un par de clases VolleySingleton y peticionHTTP que se encargan de realizar estas operaciones. Desarrollo de aplicación móvil. 72 72 Ilustración 44: Implementación petición HTTP Como se puede apreciar en la Ilustración 44, para enviar una petición HTTP, se crea una instancia de peticionHTTP la cual recibe por parámetros: • Un objeto JSON que contiene los datos necesarios para que el servidor pueda realizar las operaciones necesarias. • Una ruta que indica a qué función del servidor se está llamando. • Una función que será la encargada de gestionar la respuesta por parte del servidor. A esta función se le envía la respuesta en formato JSON por parte del servidor y si se ha producido o no un error durante la operación. De esta forma es posible determinar en caso de error, si este viene dado por un problema en la red o si el usuario ha introducido unos datos erróneos (mediante unos códigos devueltos por el servidor). Por seguridad y robustez de la aplicación, se han tenido en cuenta todos los casos en los que se produzca algún tipo de error en una llamada a la API, no actualizando la información al usuario a menos que la comunicación se haya producido satisfactoriamente. 73 6.3 Implementación de la comunicación Bluetooth. Para que la aplicación pueda comunicarse con la Batseñal de forma cómoda, se ha decidido utilizar Bluetooth. Esta tecnología permite una comunicación inalámbrica de corto alcance con la Batseñal. A la hora de integrar bluetooth en la aplicación es necesario seguir una serie de pasos. Primero es necesario obtener todos los permisos necesarios por parte del usuario. Según la versión de Android que se encuentre usando el usuario serán necesarios unos permisos u otros (9). Algunos permisos se aportan a la hora de instalar la aplicación (Ilustración 45). Ilustración 45: Permisos durante la instalación. Mientras que otros deben ser aceptados por el usuario en tiempo de ejecución (Ilustración 46). Ilustración 46: Comprobación y solicitud de permisos. Cuando se dispongan de todos los permisos, se activa bluetooth y se comienzan a buscar dispositivos. Al encontrar el dispositivo deseado, se empareja con el dispositivo móvil y se establece una conexión, creándose un hilo para ello. Si la conexión se ha establecido satisfactoriamente se inicia otro hilo que se mantiene a la escucha de mensajes externos y permite enviar mensajes al destino. Como medida de seguridad, cada mensaje enviado hacia la Batseñal por parte de la aplicación debe ser respondido, activándose un temporizador para detectar aquellos casos en los que no haya respuesta y así poder actuar en consecuencia. De esta forma se garantiza que la Batseñal dispone de toda la información necesaria. Para la creación de los hilos de establecimiento de conexión y de comunicación se hace uso de una clase a la que se le pasa un Handler. Este será el encargado de comunicar el hilo de comunicación con la sección de código donde sea necesario enviar o recibir un mensaje (Ilustración 47). Desarrollo de aplicación móvil. 74 74 Ilustración 47: Clase Bluetooth. 6.4 Modelo de datos de la aplicación. A continuación, se detalla la forma en la que se almacenan datos de manera local. En este proyecto se han utilizado 2 formas de almacenamiento de datos: las llamadas shared preferences para almacenar datos permanentes en la memoria interna del teléfono, y el llamado view model a modo de caché para almacenar datos temporales. Aunque se van a explicar estos dos métodos, existen otros métodos que permiten el intercambio de información entre Activities o entre fragmentos, aunque no serán explicados dado que se usan en situaciones muy puntuales. 6.4.1 Shared Preferences Este método permite almacenar distintos tipos de datos mediante pares clave-valor en la memoria del dispositivo. Los datos almacenados se encuentran en un fichero de texto almacenado en la carpeta de instalación de la aplicación, y permanecerán ahí siempre que la aplicación esté instalada en el dispositivo, aunque desaparecerá si la aplicación es desinstalada. Este método suele utilizarse para almacenar credenciales de usuario o preferencias de inicio en la aplicación. En este proyecto se utiliza este método de almacenamiento para almacenar por un lado el nombre de usuario y contraseña en caso de establecer el inicio de sesión automático, y por otro para almacenar las melodías de manera local. Adicionalmente se utiliza un fichero independiente por cada usuario, de manera que un usuario que inicie sesión en la aplicación no pueda acceder a la información perteneciente a otro usuario. 6.4.1.1.1 Credenciales de usuario Al iniciar la aplicación móvil aparece una pantalla que permite iniciar sesión en el sistema. Además de los campos de “usuario” y “contraseña” aparece una opción llamada “Mantener la sesión iniciada”, como se puede apreciar en la siguiente captura (Ilustración 48). 75 Ilustración 48: Captura inicio de sesión Cuando se inicia sesión en el sistema y se marca la opción de “Mantener sesión iniciada”, se almacenan en las Shared Preferences el nombre de usuario y la contraseña introducidas, así como un indicador de que esta opción ha sido marcada. Al iniciar la aplicación se comprueba si el indicador de “Mantener sesión iniciada” está marcado y en caso de estarlo, se leen las credenciales almacenadas y se intenta un inicio de sesión. 6.4.1.1.2 Melodías almacenadas localmente Cuando se crea una nueva melodía en el editor de melodías o se descarga una del foro, se comprueba primero que el nombre de la melodía almacenada no se encuentre repetido y, en caso de estarlo, se añade al final del nombre de la melodía “(1)”. De nuevo se comprueba si este nombre existe y en caso de existir se modifica la extensión añadida por “(2)”, y así sucesivamente incrementando el número hasta encontrar un nombre no repetido. Una vez encontrado el nombre con el que almacenar la melodía, se almacena la melodía en formato JSON utilizando como clave una cadena con la estructura “cancionX”, siendo X un número entero. Se comprueba la primera combinación libre comenzando con X = 0 incrementando de uno en uno y una vez encontrado se almacena en el fichero Shared Preferences. Desarrollo de aplicación móvil. 76 76 La forma en la que se almacenan las melodías localmente se basa en el formato JSON. En concreto se almacenan los siguientes datos: • Canción: se trata de un array de JSON que almacena las notas que conforman la melodía. En concreto, cada JSON consta de los siguientes datos: o Altura: frecuencias de las notas que conforman la melodía. o Duración: la duración en milisegundos de cada nota que conforma la melodía. o Ligada: especifica si la nota está ligada o no. Actualmente sirve para que dos notas sucesivas de la misma altura que estén ligadas suenen como una única nota, cuya duración será la suma de las duraciones de las notas ligadas. o Silencio: Indica si una nota es un silencio o no. Si una nota es un silencio no producirá ningún sonido durante la duración de la misma. • Autor: Nombre del usuario creador de la melodía. • Fecha de creación: Fecha en la que se creó la melodía en caso de tratarse de una melodía creada localmente, o la fecha de subida de la melodía en caso de haberse descargado del foro de melodías. • Título: Nombre con el que se guarda la melodía, se obtiene de la manera descrita en el punto 4.4.4.1.2 en caso de tratarse de una melodía almacenada localmente, o el nombre especificado sin ninguna alteración en caso de tratarse de una melodía subida al foro de melodías. • Tempo: Ritmo o velocidad a la que avanza la melodía. Se permite un rango de valores entre 40 y 160 la negra, es decir, la cantidad de notas con duración de negra que caben en un minuto puede ser entre 40 y 160. 6.4.2 View model El otro método utilizado en la aplicación para almacenar datos es el llamado View Model. En la documentación oficial de Android (10) se indica que View Model se utiliza para almacenar datos de la UI de manera optimizada para los ciclos de vida, pero, pese a ser esta su utilidad principal, en este proyecto se ha utilizado a modo de caché para almacenar información a la que se accede frecuentemente. Esta caché permite acceder a ciertos datos sin necesidad de realizar consultas redundantes a la API, o almacenar otros datos a los cuales sería difícil de acceder de otra forma. Algunos de los datos almacenados en el View Model son los siguientes: • Los resultados de una búsqueda en el foro de melodías, de manera que al seleccionar una melodía o al cambiar de ventana y regresar al buscador de melodías, no se realice automáticamente una consulta. • Las Batseñales vinculadas a una cuenta de usuario para que, al igual que en el foro de melodías, no sea necesario consultar de nuevo las Batseñales vinculadas. • El hilo que mantiene la conexión bluetooth, de manera que sea posible mantener una conexión bluetooth sin necesidad de establecerla de nuevo cada vez que se cambie de pantalla. • Las credenciales del usuario que inicia sesión, así como el id de sesión devuelto por la API al iniciar la sesión en el sistema. • Los usuarios que comparten una relación de amistad con el usuario que inicia sesión en el sistema, para no tener que consultarlos continuamente. 6.5 Diagramas de paso de mensajes Bluetooth. En esta sección se muestran los distintos pasos de mensajes realizados entre la aplicación móvil y la Batseñal a través de bluetooth. La Batseñal únicamente responde a mensajes, nunca inicia una comunicación. 77 A continuación (Ilustración 49) se muestra el paso de mensajes que sucede cuando se vincula una Batseñal a una cuenta de usuario. En este caso la Batseñal no se encuentra anteriormente vinculada a ninguna otra cuenta, dado que, en caso de encontrarse, responde de otra manera. El funcionamiento es el siguiente, se envía un mensaje indicando que se quiere establecer un vínculo con la Batseñal que, en caso de no estar vinculada a otro usuario, responde indicando que no se encuentra vinculada a otro usuario y que se puede proceder. A continuación, la aplicación pide a la Batseñal su identificador único y esta responde. Finalmente, la aplicación le envía a la Batseñal las credenciales de la cuenta de usuario que se desea vincular con la Batseñal y ésta responde indicando que se han procesado los datos correctamente. El mensaje que confirma la recepción de datos es “Ahsoka tano” y se utiliza en numerosas ocasiones durante una conexión bluetooth con la Batseñal. Como algunos lectores de este documento habrán podido detectar, aquellos mensajes que envían siempre la misma información están codificados en referencia a personajes de Star Wars. Ilustración 49: Secuencia de mensajes para vinculado de Batseñal con cuenta de usuario. Una vez vinculada una Batseñal a una cuenta de usuario, se puede pasar a configurar la misma. A continuación, se muestra (Ilustración 50) un paso de mensajes para configurar el wifi, configurar el grupo al que pertenece la Batseñal y para modificar la melodía. 85 Desarrollo de aplicación móvil. 86 86 Ilustración 53: Establecimiento de conexión con la Batseñal Una vez establecida la conexión, el usuario clica sobre la opción de configuración del grupo y se le da la opción de unirse a un grupo de Batseñales. Si selecciona esta opción, se muestran las invitaciones recibidas y se permite seleccionar alguna. Se puede apreciar este proceso en la ilustración 54. Ilustración 54: Muestra de las invitaciones de pertenencia a grupo disponibles. Después se muestra al usuario los integrantes del grupo al que ha sido invitado y se le da la opci86ón de unirse al mismo. En caso de aceptar, se realiza una llamada a la API 87 aceptando la invitación y a continuación se permite almacenar los datos en la Batseñal. Por último, se cierra la conexión con la Batseñal. Todo esto se puede apreciar en la ilustración 55. Desarrollo de aplicación móvil. 88 88 Ilustración 55: Aceptado de invitación y cierre de conexión. 89 Hay que resaltar que en este diagrama se han simplificado algunas cosas y omitido otras dado que si no sería un paso de mensajes muy largo y complejo de entender. Por ejemplo, en el establecimiento de conexión, el paso de mensajes realizado entre la aplicación desarrollada y la Batseñal se resume en un simple ‘Establecer conexión’, cuando en realidad, según se puede apreciar en el apartado anterior (6.5), se realiza comunicación mediante mensajes bluetooth que permite autenticar al usuario. De igual forma, no se muestran todas las llamadas a la base de datos realizadas por la función Lambda a la hora de obtener las invitaciones o de aceptar la invitación seleccionada. Además, se asume que no se produce ningún error de conexión con la API o con la Batseñal. En la realidad, y sobre todo durante el desarrollo del proyecto, es posible que se produzcan errores durante la conexión de la aplicación móvil con la Batseñal, y a la hora de recibir datos desde la base de datos. Se han considerado todos los casos posibles de manera que en cuanto algo no funcione como debería, se cancele la operación y se muestra un mensaje al usuario. 6.6.3 Compartir una melodía en el foro de melodías. En este diagrama de secuencia se muestra el proceso que permite compartir una melodía al foro de melodías. Para mostrar un comportamiento más completo de la aplicación, se asumirá que el usuario dispone de una melodía creada y que no se encuentra en la sección de ‘Mis melodías’. En este diagrama (ilustraciones 56 y 57) se pueden apreciar los siguientes componentes: • El usuario que realiza la acción. • La aplicación desarrollada. • viewModel: el View model utilizado para almacenar datos temporales (en este caso se accede al id de sesión). • sharedPrefs: Mediante este método de almacenar datos, se almacenan las melodías guardadas localmente. • Melodía: se trata de una clase que se encarga de convertir los datos almacenados en los sharedPrefs a información legible por el editor de melodías o que se pueda almacenar en la base de datos. • Volley: De nuevo como se mencionó con anterioridad, se utiliza Volley como interfaz a la hora de realizar llamadas a la API. Esta clase es la que se encarga de realizar las peticiones HTTP y de tratar la respuesta recibida. • API Gateway: En el servidor de AWS este servicio es el encargado de recibir las pertciones HTTP. Esto se explica en mayor detalle en el capítulo 5. • Lambda: De nuevo como se explicó en el capítulo 5, en Lambda se ejecuta el código que procesa la llamada a la API. • DataBase: Se refiere a la base de datos que contiene toda la información relativa al proyecto. 91 Ilustración 56: Diagrama de secuencia para compartir melodía (Parte 1) 93 Ilustración 57 : Diagrama de secuencia para compartir melodía (Parte 2) Recorrido por la Aplicación desarrollada 100 100 Ilustración 63: Campo erróneo en el formulario de registro en el sistema. 7.2 Mis Batseñales Una vez iniciada sesión en el sistema se puede ver una barra de navegación en la parte inferior de la pantalla. Clicando en cada uno de los botones se puede acceder a las distintas secciones de la aplicación, y en la parte superior de la pantalla se encuentra un título que indica la sección en la que se encuentra el usuario. Al iniciar sesión aparece por defecto la sección de ‘Mis Batseñales’ (Ilustración 64). En esta pantalla aparecen las Batseñales que se encuentran vinculadas con la cuenta del usuario, aunque si es la primera vez que se accede a la aplicación o no se dispone de ninguna Batseñal vinculada, aparecerá un mensaje indicándolo. 101 Ilustración 64: Pantalla ‘Mis Batseñales’ 7.2.1 Vincular una nueva Batseñal En la esquina inferior derecha de esta pantalla se puede apreciar un botón flotante, el cual permite vincular una nueva Batseñal. Al pulsarlo se abre una ventana en la que se muestran los dispositivos bluetooth cercanos (Ilustración 65), aunque la primera vez que se abra la aplicación, se pedirá al usuario que se otorguen los permisos necesarios para utilizar bluetooth. En caso de no tener bluetooth activado en el dispositivo, se pedirá además al usuario que active bluetooth. Recorrido por la Aplicación desarrollada 102 102 Ilustración 65: Pantalla de selección de dispositivo bluetooth Al pulsar sobre uno de los dispositivos, la aplicación se intentará conectar a él y, en caso de producirse una conexión satisfactoria, indicará que la conexión se ha establecido correctamente. En caso de que el dispositivo no sea una Batseñal o se produzca un error en la conexión se mostrará un mensaje indicando que la conexión ha fallado. En cambio, si se puede establecer conexión pero el dispositivo al que se intenta conectar es una Batseñal ya vinculada a un usuario, aparecerá un mensaje indicándolo. En la parte inferior de la pantalla se pueden apreciar dos botones: uno con la etiqueta ‘Cancelar’ que permite regresar a la pantalla anterior y otro con la etiqueta ‘Continuar’ que permanecerá bloqueado hasta que se establezca una conexión con una Batseñal. Al pulsar el botón de ‘Continuar’, se procederá con el vinculado de la Batseñal a la cuenta del usuario, mostrando un mensaje en caso de fallo y regresando al menú principal. Si la operación de vinculado resulta satisfactoria, se llevará al usuario a la pantalla de configuración de la Batseñal (Ilustración 66). En cambio, si se produce un error durante el proceso de vinculado, se mostrará al usuario un mensaje de error (Ilustración 67). 103 Ilustración 66: Pantalla de configuración de la Batseñal sin grupo Ilustración 67: Error durante el vinculado de la Batseñal. En la pantalla de configuración de la Batseñal se pueden realizar varias acciones, pero para ello es necesario una conexión bluetooth con la propia Batseñal. Es por ello que, si no existe una conexión establecida entre la aplicación desarrollada y la Batseñal, no se permite realizar ninguna acción (Ilustración 68). En este caso, aparecerá un botón que permite reintentar el establecimiento de conexión. Recorrido por la Aplicación desarrollada 104 104 Ilustración 68: Pantalla de configuración de Batseñal sin conexión establecida 7.2.2 Configuración WIFI La primera opción disponible, después de la conexión bluetooth, es la configuración de la red wifi. Como se ha mencionado anteriormente, la Batseñal se conecta a internet a través de Wifi, por lo que es necesario pasarle a la Batseñal las credenciales Wifi. Al clicar sobre esta opción, se llevará al usuario a una pantalla en la que se muestran las distintas redes wifi disponibles. Al clicar sobre una de ellas, aparece un campo para introducir la contraseña de la red wifi seleccionada (Ilustración 69). 105 Ilustración 69: Pantalla de configuración de redes WIFI Al pulsar el botón con la etiqueta ‘Conectar’, se enviarán los datos a la Batseñal y ésta intentará establecer una conexión con la red WIFI. Si la Batseñal consigue establecer una conexión con la red WIFI, se desbloqueará el botón con la etiqueta ‘Continuar’, la cual al ser pulsada llevará al usuario de vuelta a la pantalla de configuración. En caso de pulsar el botón de ‘Volver’, se llevará al usuario de vuelta a la pantalla de configuración sin necesidad de que la Batseñal haya podido establecer una conexión WIFI. Si la Batseñal tiene una red wifi a la que conectarse, mostrará el SSID de la misma junto con el estado de la conexión en el menú de configuración de la Batseñal (Ilustración 70). Ilustración 70: Estado de conexión WIFI de la Batseñal. Recorrido por la Aplicación desarrollada 106 106 7.2.3 Configuración del grupo al que pertenece una Batseñal Continuando con el menú de configuración, la siguiente opción disponible es la configuración de grupo. En ella se puede configurar el grupo al que pertenece la Batseñal. Inicialmente, si la Batseñal no pertenece a ningún grupo, aparecerá un mensaje indicando esto mismo, y al pulsar sobre la opción se mostrará un mensaje: crear un grupo o unirse a uno (Ilustración 71). Ilustración 71: Ventana de configuración de grupo. Si se selecciona la opción de ‘Unirse’, se mostrarán las invitaciones de adhesión a un grupo disponibles, pudiendo seleccionar una de ellas. Al seleccionarla, se llevará al usuario a la ventana de configuración de grupo en la que se muestran a los distintos integrantes del grupo en su posición relativa dentro del mismo (Ilustración 72). 107 Ilustración 72: Pantalla de invitación de grupo. En este caso se ha abierto una invitación enviada por el usuario ‘userTest1’ a un grupo en el que el único integrante es él mismo. En esta ventana el usuario puede aceptar o rechazar la invitación, previamente seleccionando uno de los huecos vacíos en caso de desear aceptarla. Si el usuario pulsa sobre el botón de ‘Rechazar’, se eliminará la invitación recibida y se llevará al usuario de vuelta al menú de configuración. En caso contrario, si el usuario pulsa sobre el botón de ‘Aceptar’, se asociará la Batseñal con el grupo al que pertenece la invitación, eliminándose de igual forma la invitación recibida. Una vez aceptada la invitación, se mostrará un botón que permite al usuario salirse del grupo al que se acaba de unir. Así mismo, los botones inferiores cambian su etiqueta por ‘Volver’ y ‘Guardar’ (Ilustración 73), de manera que si se pulsa sobre el botón de ‘Guardar’ se actualizará la posición de la Batseñal dentro del grupo por la que se encuentre seleccionada. Recorrido por la Aplicación desarrollada 108 108 Ilustración 73: Pantalla de configuración de grupo. A partir de ahora, al acceder al menú de configuración de la Batseñal, se mostrará el grupo al que pertenece la misma, como se puede apreciar en la ilustración 74. Debajo de ella aparece una opción que permite enviar invitaciones a otros usuarios para que se unan al grupo. Ilustración 74: Opción de configuración de grupo de Batseñales con un grupo asociado Si en la ventana de configuración de grupo (Ilustración 71) se elige la opción de ‘Crear’, la ventana que aparecería sería la siguiente (Ilustración 73). Al igual que en la ventana de invitación de grupo, aparecen dos botones y, al pulsar el botón de ‘Crear’, se crearía un grupo nuevo, procediendo a mostrar la misma ventana que cuando se acepta una invitación de grupo. 109 Ilustración 75: Ventana de creación de grupo. 7.2.4 Modificación de melodía y demo. Otra opción disponible en el menú de configuración es la de configurar la melodía que suena en la Batseñal al producirse una llamada. En esta sección se encuentra un selector que permite elegir la melodía deseada, junto con un botón que permite reproducir la melodía en el dispositivo. Debajo del selector hay un botón con la etiqueta ‘Demo’. Al pulsar este botón, se actualiza la melodía que suena en la Batseñal, la cual comienza a sonar simulando un estado de llamada. Si se pulsa de nuevo el botón, se detiene la reproducción de la melodía. En la ilustración 76 se puede apreciar que el texto que aparece sobre el botón de Demo cambia en función del estado en el que se encuentre la demostración. Recorrido por la Aplicación desarrollada 116 116 Ilustración 82: Ventana para confirmar el eliminado de melodía almacenada localmente. 7.4 Foro de melodías Continuando con la tercera sección de la aplicación, se va a describir el foro de melodías. Como se ha mencionado en el apartado anterior, en el editor de melodías existe la posibilidad de compartir una melodía con el resto de usuarios de la aplicación. La ventana principal de esta sección es el buscador de melodías (Ilustración 83). Como su propio nombre indica, permite realizar una búsqueda de las melodías aplicando distintos filtros. 117 Ilustración 83: Buscador del foro de melodías. En la parte superior de esta pantalla se encuentra una barra que permite introducir un título por el que filtrar las melodías mostradas. Además, debajo de la barra de búsqueda se encuentra un desplegable que permite al usuario elegir el orden por el que se mostrarán los resultados. Si se pulsa el botón que se encuentra a la derecha del desplegable, se muestran otros dos desplegables que permiten filtrar por el título o por el nombre del autor, y limitar las melodías mostradas según su fecha de publicación. Debajo de la sección de filtrado se muestra una lista con las melodías obtenidas de la búsqueda realizada (por defecto se ordenan por su puntuación). Si por ejemplo se realiza una búsqueda filtrando por el nombre de ‘mario’ se encontrará la melodía compartida en el apartado anterior (Ilustración 84) Recorrido por la Aplicación desarrollada 118 118 Ilustración 84: Resultado de la búsqueda en el foro de melodías. En cada uno de los elementos del listado de melodías encontradas se pueden apreciar los siguientes elementos: • Un botón que permite reproducir la melodía en el dispositivo. • Un botón de descarga que, al ser pulsado, almacena la melodía en la memoria interna del dispositivo. Esta aparecerá en la sección de ‘Mis Melodías’ con el mismo nombre que se muestra en el foro de melodías. Al igual que al guardar una melodía desde el editor, si existe otra melodía almacenada con ese mismo nombre, se modificará el nombre de la melodía descargada hasta que éste sea único. • El nombre de la melodía, el autor y la fecha en la que se realizó la subida. • Un contador con el número de descargas que se han producido de esa melodía. • Un contador con la puntuación de la melodía. • Un botón que permite valorar positiva o negativamente una melodía, incrementando o decrementando en una unidad la puntuación de la melodía, respectivamente. Al pulsar sobre una de las melodías, se ampliará la tarjeta que contiene la melodía y se mostrarán los comentarios correspondientes a esa publicación de melodía. El usuario, además de poder valorar la melodía, tiene la posibilidad de añadir un comentario a una melodía o incluso responder a otro comentario. En la siguiente ilustración (85) se muestran los comentarios realizados sobre una melodía del foro. 119 Ilustración 85: Comentarios publicados en una melodía. Se puede apreciar que en los comentarios existe un botón con la etiqueta ‘Respuesta’. Esto indica que el comentario dispone de respuestas que aún no han sido cargadas. Si se pulsa sobre este botón se cargarán todas estas respuestas (Ilustración 86). Además, todos los comentarios y sus respuestas pueden valorarse positiva y negativamente. Recorrido por la Aplicación desarrollada 120 120 Ilustración 86: Pantalla de comentarios con las respuestas cargadas. Para añadir un comentario o responder a otro, se debe pulsar el botón con forma de flecha. Al pulsarse se abrirá una ventana que permite introducir el comentario a publicar (Ilustración 87). Ilustración 87: Ventana de publicación de comentario. Para aquellos comentarios publicados por el usuario, se podrán tanto editar como eliminar, pulsando sobre el botón con forma de lápiz (Ilustración 88) y con forma de cubo de basura (Ilustración 89), respectivamente. 121 Ilustración 88: Ventana de edición de comentario. Ilustración 89: Ventana de confirmación de eliminado de comentario. Si el usuario es el autor de la melodía seleccionada, aparece una opción que permite eliminar la melodía. 7.5 Perfil Finalmente, la última sección de la aplicación desarrollada se trata de la sección de perfil (Ilustración 90). En ella se pueden realizar operaciones relativas a las relaciones de amistad. Recorrido por la Aplicación desarrollada 122 122 Ilustración 90: Sección de perfil. En la zona superior de la pantalla de perfil se muestra el correo electrónico al que se encuentra asociada la cuenta, así como la puntuación de la misma. La puntuación se trata de la suma de todas las valoraciones realizadas por otros usuarios de la aplicación sobre melodías y comentarios publicados por el usuario. Debajo de esta zona, se encuentra la zona de amigos. En ella se muestra un listado con aquellos usuarios de la aplicación que se tiene una relación de amistad. En la esquina inferior derecha se encuentran dos botones relacionados con las invitaciones de amistad. El primer botón abre una ventana con las invitaciones de amistad recibidas, otorgando la posibilidad de aceptarlas o rechazarlas (Ilustración 91). Ilustración 91: Invitaciones de amistad recibidas. 123 Al pulsar el segundo botón se abre una ventana que permite enviar invitaciones de amistad. Esta ventana contiene un cuadro de texto que permite introducir el nombre del usuario deseado, y un botón que permite enviar la misma (Ilustración 92). Ilustración 92: Ventana de envío de solicitud de amistad. Por último, en la parte inferior de la pantalla se encuentra un botón con la etiqueta ‘Cerrar sesión’, el cual al ser pulsado regresa al usuario a la pantalla de inicio de sesión. Diseño e impresión de la carcasa 124 124 8 DISEÑO E IMPRESIÓN DE LA CARCASA Como se ha mencionado en el tema introductorio de este documento, se ha diseñado una carcasa personalizada que contenga los componentes de la Batseñal. En los siguientes apartados se repasará con mayor detalle tanto el diseño de la carcasa como su posterior impresión en 3D. 8.1 Diseño de la carcasa El diseño de la carcasa se ha realizado teniendo en cuenta una serie de características que ésta debe de poseer. Para empezar, la carcasa debe disponer de un fácil acceso a su interior. La carcasa no es más que un mero contenedor del PCB, botones y demás componentes que conforman la Batseñal, y al encontrarse ésta en estado de desarrollo, es natural pensar que será necesario acceder a los componentes. Ya sea para conectar o desconectar cables, o para pulsar los botones de ‘Reset’ soldados directamente al PCB, el acceso al interior de la carcasa es algo que se va a repetir en muchas ocasiones a lo largo del desarrollo del proyecto, por lo que es necesario que se realice de la manera más cómoda posible. Otra cualidad importante es que la carcasa refleje las ideas generales del diseño final. Es cierto que no es necesario que tenga una gran cantidad de detalles, dado que se utilizará para el desarrollo del proyecto, pero sí debería contener los aspectos principales. Éstos son: un foco orientable en todas las direcciones, una sección donde se encuentren los botones de llamada, y un lugar donde anclar el PCB. Por último, debe ser fácilmente imprimible en 3D. A la hora de diseñar piezas que serán impresas en 3D, deben tenerse en cuenta una serie de consideraciones con el objetivo de facilitar el proceso de impresión, así como tener en cuenta las limitaciones de este proceso de fabricación. Algunos aspectos a tener en cuenta pueden ser: un mínimo de grosor de pared, el uso de soportes en voladizos con ángulo superior a 45º, dejar un espacio de margen entre las piezas que hacen contacto, dado que las piezas tienden a quedar algo más grandes de lo que se pueda plantear originalmente, etc. Tras un período de bocetado y diseño, se llegó a un diseño que satisface en la medida de lo posible estas características (Ilustración 93). Ilustración 93: Diseño Batseñal Uno de los mecanismos utilizados en esta carcasa es el conocido como ‘Snap fit’ (11), y es utilizado en una 125 inmensa cantidad de productos. Se trata de un mecanismo de enganche que permite unir dos piezas sin necesidad de ningún tipo de pegamento. Consta de dos partes: una parte fija y otra flexible, de manera que cuando se van a unir las dos partes, la parte fija obliga a la parte flexible a doblarse hasta que llega a la posición de enganche, y una vez enganchadas, ambas piezas mantienen su posición. A continuación, se describen cada una de las piezas diseñadas. 8.1.1 Foco Esta parte de la carcasa es la que alberga el foco luminoso que se enciende cuando se realiza una llamada. Está diseñado de manera que se pueda regular la orientación del mismo en cualquier dirección. Como se puede apreciar en la siguiente imagen (Ilustración 94), el foco está compuesto de un total de 6 piezas distintas. En concreto se compone de: • Sujeción de logotipo. • Foco. • Soporte del foco. • Sujeción del soporte. • Tornillo. • Tuerca. Ilustración 94: Componentes del foco 8.1.1.1 Sujeción del logotipo. Esta parte del foco es la encargada de sujetar una lámina de material translúcido situada delante del foco. Éste está formado por una serie de leds, y gracias a la lámina translúcida se consigue una iluminación uniforme. Opcionalmente, se puede fijar a la lámina translúcida una capa de un material más opaco (con una forma específica, como una cartulina recortada) por la cara que mira al interior del foco. De esta manera, cuando se enciende el foco, se puede distinguir la silueta. La idea es que el usuario recorte la silueta que más le guste, añadiendo un nivel de personalización a la Batseñal. Anexo A: Puesta en marcha del servidor 132 132 ANEXO A: PUESTA EN MARCHA DEL SERVIDOR En este anexo se explican de manera más detallada los pasos a seguir para poner en marcha los servicios de AWS utilizados para el desarrollo del proyecto. Todos los servicios pueden configurarse desde la consola de AWS a través de un navegador web. Como requisito previo, es necesario disponer de una cuenta en AWS. Es un proceso gratuito, dado que se paga por los servicios utilizados, aunque es necesario introducir una forma de pago al crear la cuenta. Además, desde el momento de creación de la cuenta, dispones de un año de una capa gratuita que incluye todos los servicios utilizados en este proyecto. API Gateway Para la puesta en marcha de este servicio nos dirigimos al servicio API Gateway. En la siguiente imagen (Ilustración 101) se muestra la pantalla principal de este servicio. Ilustración 101: Pantalla principal API Gateway. En esta ventana pulsamos el botón “Create API”, el cual nos llevará a una ventana en la que podremos elegir el tipo de API a crear (Ilustración 102). En nuestro caso se ha hecho uso de la HTTP API, por lo que nos dirigimos a la primera opción y pulsamos en el botón ‘Build’. Ilustración 102: Selección de tipo de API a crear. Ahora se nos abrirá una ventana (Ilustración 103) en la que podemos configurar algunos aspectos de la API, 133 aunque también es posible configurarlos más adelante, por lo que introduciremos un nombre y clicaremos sobre el botón ‘Review and Create’ y en la siguiente ventana pulsamos ‘Create’. Ilustración 103: Elegir un nombre para la API. Una vez creada la API, nos aparecerá en el listado de datos disponibles como se puede apreciar en la ilustración 104, y al seleccionarla, se nos abrirá la ventana principal de configuración de la API. Ilustración 104: Ventana principal de configuración de la API Como se mencionó anteriormente en este documento, este servicio se encarga de asociar una petición HTTP hacia una URL específica con un desencadenante, en nuestro caso, una función Lambda. En esta ventana podemos ver una URL bajo la sección ‘Invoke URL’. Ésta será la URL a la que será necesario realizar las peticiones. A continuación, vamos a ver cómo crear una ruta para posteriormente asociarla a una función Lambda. Para ello nos dirigimos a la sección de ‘Routes’ en el panel lateral. Se nos abrirá la siguiente ventana (Ilustración 105): Anexo A: Puesta en marcha del servidor 134 134 Ilustración 105: Ventana de selección de rutas. Para crear una nueva ruta, clicamos el botón ‘Create’. Entonces se nos abrirá una ventana (Ilustración 106) que permite elegir el método HTTP y definir la ruta. Ilustración 106: Ventana de creación de rutas. Una vez introducidos los datos deseados, clicaremos en el botón de ‘Create’ y se nos creará nuestra ruta, la cual podremos ver en la sección de rutas. Para asociar una función Lambda, podemos clicar sobre la ruta creada o dirigimos a la sección de ‘Integrations’ en el panel izquierdo. Entonces se nos mostrará la siguiente ventana (Ilustración 107): 135 Ilustración 107: Ventana de creación de integración. En esta ventana podremos elegir el servicio a ejecutar, que en nuestro caso será ‘Lambda function’, y tras seleccionarla podremos elegir la función concreta que se desencadenará. Es necesario disponer de una función Lambda para poder asociarse, por lo que será necesario crear una nueva. Cuando la hayamos creado, podemos volver a esta sección y asociarla a esta ruta. Una vez elegida la función a asociar, podemos pulsar sobre ‘Create’ y se nos creará esta nueva integración. Como último paso, tendríamos que pulsar sobre el botón de ‘Deploy’ situado en la pantalla principal de configuración de la API creada (Ilustración 101). A partir de este momento, al enviar una petición HTTP a la URL que podemos encontrar en la ventana de configuración seguida de la ruta creada, se nos ejecutará la función Lambda recién asociada. Lambda Para configurar el servicio Lambda, comenzaremos dirigiéndonos a la pantalla principal del servicio. Una vez allí, podremos ver una ventana como la siguiente (Ilustración 108): Ilustración 108: Ventana principal de funciones Lambda. Para crear una nueva función, basta con clicar sobre el botón ‘Create function’. Entonces se nos mostrará la siguiente pantalla (Ilustración 109) en la que podremos elegir el lenguaje de programación en el que desarrollar la función y el nombre de la función, junto con algunos parámetros de configuración adicionales. Además, permite crear una función a partir de una plantilla o desde una imagen de contenedor. Anexo A: Puesta en marcha del servidor 136 136 Ilustración 109: Pantalla de creación de función. Una vez terminada la configuración necesaria, pulsaremos sobre el botón ‘Create function’ y se nos creará la función. A partir de ahora nos aparecerá en la pantalla de inicio de este servicio (Ilustración 108), donde podemos clicar sobre ella y nos dirigirá hacia un entorno de desarrollo online. En él podremos escribir todo el código necesario, realizar test y muchas más opciones. A continuación se muestra una imagen del editor (Ilustración 110): Ilustración 110: Entorno de desarrollo integrado en AWS Lambda. RDS La puesta en marcha del servicio RDS es bastante sencilla. Para ello, basta con dirigirnos al servicio en la consola de AWS, donde se nos mostrará la siguiente pantalla (Ilustración 111). En ella se muestran las bases de datos que tengamos creadas. 137 Ilustración 111: Pantalla principal del servicio RDS. Para crear una nueva base de datos debemos pulsar el botón ‘Create database’. Entonces se nos abrirá una ventana en la que podemos configurar numerosos parámetros de la nueva base de datos (Ilustración 112), como la tecnología utilizada o los credenciales de acceso. Ilustración 112: Configuración de la Base de Datos. Una vez configurada la base de datos, pulsamos sobre el botón ‘Create Database’. Entonces, en la ventana principal del servicio aparecerá la nueva base de datos creada, la cual seleccionamos y clicamos sobre el desplegable ‘Actions’ situado en la esquina superior derecha de la pantalla. En ella seleccionamos la opción ‘Start’. A partir de este momento, nuestra nueva base de datos está desplegada. Aunque aún faltan por crear todas las tablas necesarias. Para ello es necesario conectarse a la base de datos desde un cliente PSQL y crear cada una de las tablas manualmente. Este paso será diferente en función del cliente utilizado para configurar la base de datos. En el caso de psAdmin 4 tenemos primero que establecer una conexión con la base de datos. Para ello seleccionamos la opción de ‘Create new Server’ en la pantalla principal. En la pantalla que aparece (Ilustración 113) debemos introducir las credenciales configuradas en la creación de la base de datos, y se establecerá la conexión. Anexo A: Puesta en marcha del servidor 138 138 Ilustración 113: Conexión con la Base de datos desde pgAdmin 4. Para crear una tabla podemos optar por ejecutar un script, o utilizar la interfaz gráfica. Para hacerlo mediante la interfaz gráfica, desplegamos la base de datos, seleccionamos schemas>public>tables, hacemos click derecho y seleccionamos ‘Create’>’Table…’. En la ventana que aparece (Ilustración 114) rellenamos toda la información necesaria en cada una de las pestañas, y finalmente clicamos en ‘Save’. Ilustración 114: Creación de una nueva tabla en pgAdmin. Una vez creadas todas las tablas, será posible el uso de la API. 139 Despliegue de IoT Core Para este servicio se usan las llamadas Things, las cuales son representaciones virtuales del dispositivo físico que vamos a conectar. No es necesario crear una nueva por cada Batseñal, aunque a la hora de conectarla con este servicio hay que hacerlo con un nombre único a todos los dispositivos que se conecten mediante esta Thing. Ilustración 115: Ventana principal de IoT Core. Primero es necesario crear una Thing. Para ello nos situamos en la pantalla principal del servicio (Ilustración 115) y clicamos sobre el botón ‘Create thing’. Entonces la consola nos llevará por una serie de pasos para configurar la nueva Thing. Lo más importante de estos pasos es la descarga de los certificados digitales (Ilustración 116). En concreto, será necesario descargar los siguientes certificados: • Device certificate. • Private key. • Amazon Root CA. Tanto el Root CA como el Device certificate son comunes para todas las Things, siendo la Private Key única para cada una de ellas. Anexo A: Puesta en marcha del servidor 140 140 Ilustración 116: Descarga de certificados. Una vez creada la Thing y descargados los certificados, es necesario asignarle una política, la cual dicta a qué elementos de AWS tiene acceso. En nuestro caso queremos que acceda al servicio IoT Core, pudiendo conectarse al mismo, publicar y escuchar mensajes, y suscribirse a un tópico. Para ello primero es necesario crear la política que queremos asignar, por lo que nos dirigimos a la sección de ‘Policies’ en el panel situado a la izquierda, y pulsamos en el botón ‘Create policy’ (Ilustración 117). Ilustración 117: Ventana de ‘Policies' de AWS IoT Core. Entonces se nos abrirá una ventana (Ilustración 118) en la que deberemos asignar un nombre, y en la sección inferior llamada ‘Policy statements’, crear una nueva sentencia por cada una de estas acciones, con efecto de ‘Allow’: ‘iot:Connect’, ‘iot:Subscribe’, ‘iot:Receive’, ‘iot:Publish’. Una vez terminados pulsamos sobre el botón ‘Create’. 141 Ilustración 118: Ventana de creación de ‘Policy’ en AWS IoT Core. Por último, para asociar la nueva política a la nueva Thing nos dirigiremos a la sección de ‘Security’>’Certificates’. En ella encontraremos un nuevo certificado correspondiente a la Thing recién creada. Entonces lo seleccionamos, y en el desplegable que dice ‘Actions’ seleccionamos la opción ‘Attach to policy’. Indicamos que se asocie a la Thing que acabamos de crear y ya quedaría configurado el servicio. A partir de ahora ya podemos conectar nuestras Batseñales al bróker MQTT de AWS y podrá comunicarse con las demás Batseñales.