EventYou: Aplicación móvil con Flutter y FlutterFire

Equation Chapter 1 Section 1 Trabajo Fin de Grado Grado en Ingeniería de las Tecnologías de Telecomunicación EventYou: Aplicación móvil con Flutter y FlutterFire Autor: Álvaro Menacho Rodríguez Tutor: José Manuel Fornés Rumbao Dpto. Ingeniería Telemática Escuela Técnica Superior de Ingeniería Universidad de Sevilla Sevilla, 2020 ii iii Trabajo Fin de Grado Grado en Ingeniería de las Tecnologías de Telecomunicación EventYou: Aplicación móvil con Flutter y FlutterFire Autor: Álvaro Menacho Rodríguez Tutor: José Manuel Fornés Rumbao Profesor titular Dpto. Ingeniería Telemática Escuela Técnica Superior de Ingeniería Universidad de Sevilla Sevilla, 2020 iv v Trabajo Fin de Grado: EventYou: Aplicación móvil con Flutter y FlutterFire Autor: Álvaro Menacho Rodríguez Tutor: José Manuel Fornés Rumbao El tribunal nombrado para juzgar el Trabajo arriba indicado, compuesto por los siguientes miembros: Presidente: Vocales: Secretario: Acuerdan otorgarle la calificación de: Sevilla, 2020 El Secretario del Tribunal vi vii A mi familia y mis amigos viii ix Agradecimientos Quiero agradecer en estas líneas a todos los que me apoyan día a día y me han apoyado durante estos años para llegar aquí. A mi familia por estar siempre conmigo, confiar en mí, apoyarme y animarme siempre para seguir luchando. A ellos y a mis amigos por soportar mis ausencias. A mis amigos por convertirse en mi familia en Sevilla. A mis compañeros por hacer más ameno el día a día y haber estado en los buenos y en los malos momentos luchando juntos. A mi tutor por dejarme hacer realidad este proyecto personal. A todas las personas que ahora son parte de mí. Álvaro Menacho Rodríguez Sevilla, 2020 xvi Anexos 46 Anexo A: Modelo de datos 46 Anexo B: Funciones en Firebase Cloud Functions 47 xvii ÍNDICE DE FIGURAS Ilustración 1: Visión del sistema Flutter [6] 2 Ilustración 2: Arquitectura Flutter en un terminal 3 Ilustración 3: Lógica de ejecución de Flutter en Android [7] 3 Ilustración 4: Lógica de ejecución de Flutter en iOS [7] 4 Ilustración 5: Instalación de plugins en Android Studio 5 Ilustración 6: Creación de un proyecto Flutter 5 Ilustración 7: Estructura de un proyecto Flutter 6 Ilustración 8: Flutter Outline 7 Ilustración 9: Flutter Inspector 7 Ilustración 10: Flutter Performance 8 Ilustración 11: Enlace de descarga de la aplicación. 13 Ilustración 12: Enlace de invitación a un evento. 14 Ilustración 13: Pantalla de inicio de sesión 16 Ilustración 14: Pantalla de recuperación de contraseña 16 Ilustración 15: Pantalla de registro (I) 17 Ilustración 16: Pantalla de registro (II) 17 Ilustración 17: Menú lateral de navegación 18 Ilustración 18: Pantalla del calendario 19 Ilustración 19: Pantalla de invitaciones 19 Ilustración 20: Pantalla de creación de evento (I) 20 Ilustración 21: Pantalla de creación de evento (II) 21 Ilustración 22: Pantalla de creación de evento (III) 21 Ilustración 23: Pantalla de creación de evento (IV) 22 Ilustración 24: Pantalla de creación de evento (V) 22 Ilustración 25: Pantalla de información del evento. Rol organizador 23 Ilustración 26: Pantalla de información del evento. Rol asistente 24 Ilustración 27: Pantalla de organizadores de evento. Rol organizador 24 Ilustración 28: Pantalla de organizadores del evento. Rol asistente 25 Ilustración 29: Pantalla de asistentes del evento. Rol organizador 26 Ilustración 30: Pantalla de invitación mediante grupos 26 Ilustración 31: Pantalla de búsqueda de usuarios 27 Ilustración 32: Pantalla del chat del evento 27 Ilustración 33: Pantalla de galería del evento 28 Ilustración 34: Opciones del contenido multimedia 28 Ilustración 35: Pantalla de creación de una tarea 29 xviii Ilustración 36: Pantalla principal de tareas del evento (I) 29 Ilustración 37: Pantalla de modificación de una tarea 30 Ilustración 38: Pantalla principal de tareas del evento (II) 30 Ilustración 39: Pantalla de perfil (I) 31 Ilustración 40: Pantalla de perfil (II) 31 Ilustración 41: Pantalla de eventos organizados 32 Ilustración 42: Pantalla de eventos asistidos 32 Ilustración 43: Pantalla de contactos de la agenda 33 Ilustración 44: Pantalla de gestión de grupos 34 Ilustración 45: Pantalla de detalle de un grupo 34 Ilustración 46: Pantalla de creación de un nuevo grupo 35 Ilustración 47: Pantalla de notificaciones 36 Ilustración 48: Indicador del número de notificaciones sin leer 36 Ilustración 49: Notificación de nuevos mensajes en el chat 36 Ilustración 50: Notificación de asignación de tarea 36 Ilustración 51: Pantalla de la sección de ajustes 37 Ilustración 52: Pantalla de licencias 37 Ilustración 53: Panel de distribución de Firebase para Android 38 Ilustración 54: Panel de distribución de Firebase para iOS 39 Ilustración 55: Aplicación "App Tester" de Firebase 39 Ilustración 56: Panel de gestión de versiones en Google Play Console 40 Ilustración 57: Panel de gestión de versiones en TestFlight 40 Ilustración 58: Aplicación TestFlight 41 Ilustración 59: Modelo de datos de EventYou 46 1 INTRODUCCIÓN El uso de teléfonos móviles está ampliamente extendido en nuestra sociedad actual, y más concretamente el uso de smartphones. Según las últimas estimaciones el mundo cuenta con aproximadamente tres billones y medio de usuarios de smartphones [1]. A nivel nacional, según datos de la CNMC, el 86% de las personas que tienen un teleféfono móvil disponen realmente de un smartphone [2]. Se han consolidado como el dispositivo más utilizado para acceder a Internet entre los españoles. Las posibilidades que ofrecen en cuanto a prestaciones y utilidades no dejan de aumentar casi mensualmente. Acompañados en todo momento por el desarrollo de aplicaciones cada vez más complejas y variadas que permiten realizar acciones hasta hace unos años inimaginables. No podemos imaginar nuestras vidas actuales sin el uso diario de aplicaciones utilizadas mundialmente como redes sociales o aplicaciones de mensajería, de las que somos inseparables. Prácticamente de cualquier tema que pensemos existe una aplicación en el mercado; y esto es gracias a una “democratización” del desarrollo, en la que es más sencillo que alguien sin idea previa pueda aprender a desarrollar aplicaciones e incluso herramientas que permiten diseñar una aplicación sin tener ni idea de programación. Aunque en los primeros años existían más sistemas operativos, y, por ende, más empresas dedicadas a su desarrollo, en la actualidad el mercado se divide casi en su totalidad entre: Android de Google y iOS de Apple. Esto se traduce en la casi obligación, para un desarrollador que quiera tener un éxito extendido, de lanzar su aplicación en ambas plataformas. La manera de alcanzar este objetivo es diversa y existen diversos enfoques: el desarrollo nativo para cada plataforma, el desarrollo web, el desarrollo híbrido, que combina las dos anteriores, y el desarrollo en lenguajes multiplataforma que son posteriormente compilados a código nativo. Este trabajo expone este último enfoque. Estructura Este trabajo se ha organizado en cuatro capítulos: • Flutter: este capítulo tiene como objetivo poner en contexto el framework utilizado en el desarrollo de la aplicación. • FlutterFire: este capítulo se centra en el backend utilizado para el funcionamiento de la aplicación. • EventYou: este capítulo presenta la aplicación desarrollada y sus diferentes funcionalidades, aportando los detalles del frontend. • Conclusiones: este capítulo presenta los resultados tras la realización de este trabajo. Objetivos La idea de este trabajo proviene de dos fuentes distintas. Por un lado, la detección de la necesidad de una aplicación destinada a eventos sociales privados y por otro el interés que me despertó la asignatura de Diseño de Aplicaciones Móviles al realizar el trabajo final. Por estos dos motivos tenía claro que este era el tipo de trabajo final de grado que quería realizar. Los objetivos que persigue este trabajo son: • Diseñar y desarrollar una aplicación móvil multiplataforma utilizando el nuevo framework de desarrollo móvil creado por Google llamado Flutter. • Constituir la base de la idea EventYou para su posterior comercialización en Google Play Store y Apple App Store. 2 2 FLUTTER Flutter es un kit de desarrollo software de interfaz gráfica open source creado por Google. Fue mencionado por primera vez en la cumbre de desarrolladores de Dart de 2015 con el nombre en clave “Sky” [3] y su primer lanzamiento antes de la versión estable sucedió en los Días de los Desarrolladores de Google de 2017 en Shanghai. El lanzamiento de la versión estable fue el 4 de diciembre de 2018 en el Flutter Live Event [4]. Es utilizado actualmente en el desarrollo de aplicaciones para Android, iOS, Windows, Mac, Linux, Google Fuchsia y web a partir de un único código base. El proceso utilizado es la compilación del código en lenguaje Dart a código nativo de cada plataforma. Este framework escrito en C, C++ y Dart se encuentra bajo licencia New BSD. Este hecho hace que se apoye mucho en una comunidad cada vez más numerosa y que se esté convirtiendo en la habilidad con más expansión entre ingenieros de software en la red profesional Linkedin [5]. Los paquetes oficiales y todos aquellos desarrollados por la comunidad, tanto para Flutter como para Dart están disponibles en https://pub.dev/. Mientras que la página oficial con toda la documentación es https://flutter.dev/. Framework Este framework de estilo reactivo se complementa con un motor de renderizado 2D, widgets listos para utilizar y herramientas de desarrollo. La arquitectura de Flutter se divide en los siguientes componentes: • Plataforma Dart: para dispositivos móviles se realiza compilación AOT que permite que Flutter tenga un rendimiento elevado. Además, permite hot reload durante el desarrollo, es decir, permite realizar cambios y ver su comportamiento sin necesidad de volver a compilar toda la aplicación. • Motor de Flutter: escrito en C++ y con soporte de renderizado de bajo nivel gracias a las librerías de gráficos de Skia de Google. Interactúa con el SDK específico de cada plataforma para implementar gráficos, entrada y salida de ficheros y de red, así como el tiempo de ejecución de Dart. • Widgets específicos para cada plataforma, concretamente widgets de Material Design que implementan el lenguaje de diseño de Google y widgets Cupertino que implementan las guías de interfaz humana de iOS de Apple. Además, existe la posibilidad de crear tus propios widgets ya que en Flutter todo es un widget. Ilustración 1: Visión del sistema Flutter [6] 3 Ilustración 2: Arquitectura Flutter en un terminal Ilustración 3: Lógica de ejecución de Flutter en Android [7] 4 Ilustración 4: Lógica de ejecución de Flutter en iOS [7] El framework se puede utilizar actualmente desde los editores Android Studio/ IntelliJ o Visual Studio Code. En el primero mediante la instalación de los plugins de Flutter y de Dart; mientras que en segundo mediante la instalación del complemento para Flutter. Instalación Para este trabajo el framework se ha instalado en Windows 10 para utilizarlo mediante el plugin para Android Studio. Para su funcionamiento es necesario PoweShell 5.0 y Git 2.x para Windows, por lo que debemos asegurarnos de tenerlos instalados previamente. En primer lugar, se ha descargado el SDK de Flutter desde https://flutter.dev/docs/get-started/install y se ha descomprimido en la carpeta elegida. A continuación, se ha actualizado la variable de entorno PATH para incluir la ruta hacia el SDK. Finalmente se han instalalo los plugins en Android Studio desde Opciones > Plugins. 5 Ilustración 5: Instalación de plugins en Android Studio Uso Una vez instalados los plugins necesarios se podrá comenzar un nuevo proyecto de Flutter desde Android Studio. Ilustración 6: Creación de un proyecto Flutter 6 El proyecto se organiza en: módulo de Android, módulo de iOS y carpeta lib. Como sus nombres indican en el primero encontramos toda la estructura de un proyecto Android y en el segundo la estructura de un proyecto de Xcode. Mientras que en la carpeta lib situaremos todo el código Dart de la aplicación. Recién creado el proyecto esta carpeta solo contendrá el main.dart con el método main para iniciar la aplicación. Ilustración 7: Estructura de un proyecto Flutter Es muy importante también el fichero pubspec.yaml ya que es el encargado de gestionar las versiones y las dependencias de otros paquetes del proyecto. Mediante los comandos flutter pub get, flutter pub upgrade y flutter doctor se puede descargar y actualizar las dependencias, actualizar el SDK y comprobar que la configuración del SDK es correcta respectivamente. El plugin incorpora a Android Studio cuatro elementos muy útiles durante el desarrollo: Dart Analysis, Flutter Outline, Flutter Inspector y Flutter Perfomance. El primero es una herramienta de análisis sintactico para el lenguaje Dart. El segundo es una herramienta para visualizar e interactuar con las clases de un fichero concreto, con todas las variables y métodos declarados, permitiendo la edición de propiedades y la envoltura automática de un widget dentro de otro. El tercero es una herramienta para visualizar el árbol de widgets que se está renderizando en una ejecución en marcha, y el cuarto es un panel de información sobre los tiempos de renderizado de las pantallas y sobre el rendimiento en memoria de la aplicación. 7 Ilustración 8: Flutter Outline Ilustración 9: Flutter Inspector 14 Ilustración 12: Enlace de invitación a un evento. Firebase Cloud Messaging Este producto de Firebase [18] implementa un servicio de mensajería multiplataforma que permite enviar desde un entorno de confianza (Firebase Cloud Functions o un servidor con Admin SDK) mensajes de notificación o mensajes de datos a las aplicaciones clientes. La distribución de estos mensajes puede ser a dispositivos individuales, grupos de dispositivos o a dispositivos subscritos a temas. En la aplicación se hace uso de este producto [19] para notificar a los usuarios tres situaciones principalmente: • Cambios en la información de un evento en el que figuremos como organizador o asistente. • Nuevos mensajes en el chat de un evento. • Asignación al usuario de una nueva tarea en un evento en el que figure como organizador. El entorno de confianza seleccionado y que ejecuta la lógica es, como ya se ha mencionado anteriormente, Firebase Cloud Functions. La función utilizada puede consultarse en el Anexo B. Firebase In-app messaging Esta solución de Firebase [20] permite enviar mensajes contextuales a los usuarios de la aplicación en función de disparadores o de forma manual para interactuar con ellos cuando están usando la aplicación. Se puede utilizar para informar, ofrecer descuentos y promociones, solicitar feedback o dirigir a sitios concretos de la aplicación. En la aplicación se ha utilizado [21] para instar a los usuarios a que instalen la última actualización disponible. Firebase Extensions Las extensions de Firebase [22] son soluciones empaquetadas que utilizan otros productos de Firebase para ofrecer una funcionalidad completa capaz de operar autónomamente después de ser configurada. Actualmente las extensiones disponibles son: modificación del tamaño de imágenes, traducción de texto, sincronización con Mailchimp, activación de correo electrónico, exportación de colecciones a BigQuery, acortamiento de URLs, contadores distribuidos, limitación de nodos secuendarios en Realtime Databse y eliminación de datos de usuario. En la aplicación se ha utilizado la última extensión mencionada para automatizar la eliminación completa de un usuario, tanto si esta ocurre desde la consola de Firebase como desde la aplicación al solicitarla el usuario. El proceso configurado elimina al usuario de la colección de usuarios de Cloud Firestore, su nombre de usuario de la colección de nicknames y su carpeta de Firebase Cloud Storage. 15 4 EVENTYOU Actualmente la organización de un evento social privado puede resultar tediosa y llevar mucho tiempo. El uso habitual de aplicaciones de mensajería para este cometido origina pérdidas de información además de no contar de herramientas e interfaz nativa para este cometido, mientras que el uso de herramientas especializadas en eventos públicos se antoja excesiva al estar dedicadas a un público elevado. Las aplicaciones de mensajería no permiten tener toda la información concentrada y no garantizan llegar a todos los invitados, ya que algunos puede que no se encuentren en dicha aplicación o no hayan leído un determinado mensaje dentro de la vorágine de mensajes que con asiduidad acompañan a un grupo creado con este fin. Es una oportunidad dotar a los organizadores de una herramienta que les permita mantener el control de la situación y contar con un canal de comunicación fácil de usar y ameno. EventYou pretense ser esa herramienta fácil de usar y de uso masivo que permita organizar y gestionar, abarcando todo el ciclo de vida del evento. Para conseguirlo incorpora las siguientes características: • Un calendario personal con los eventos organizados y a los que se ha asistido o se va a asistir. • Un sistema de invitaciones que permite aceptar o rechazar la asistencia a un evento. • Una pantalla de creación de eventos fácil de usar y que permite establecer toda la información básica de una sola vez. • Un apartado de perfil personal en el que se puede modificar el nombre de usuario o el número de teléfono asociado y realizar acciones como eliminar la cuenta o cambiar la contraseña de acceso. • Un apartado que presenta un histórico de los eventos organizados, asistidos y a los que se va a asistir. • Un apartado de gestión de contactos que permite ver qué contactos de la agenda del teléfono están registrados en la aplicación y organizarlos en grupos para agilizar las invitaciones a eventos. • Una pantalla de visualización de notificaciones asociadas a los eventos en los que figura el usuario. • Un apartado de ajustes en el que activar o desactivar alguno de los tipos de notificación disponible. • Pantallas dentro de cada evento para visualizar la información, gestionar los organizadores y los asistentes, hablar por chat, subir contenido multimedia a la galería del evento o asignar tareas entre los organizadores. Desarrollo 4.1.1 Inicio de sesión y registro La primera pantalla disponible en la aplicación tras la pantalla de carga es la correspondiente al inicio de sesión. Esta pantalla permite realizar cuatro acciones: iniciar sesión, acceder a la pantalla de registro, acceder a la pantalla de recuperación de contraseña y enviar un email a la dirección de correo de soporte técnico. En el diseño de la aplicación se ha decidido utilizar como método de autenticación la combinación correo electrónico/contraseña. Se establece una sesión permanente en el dispositivo de forma que el usuario por regla general no tiene que volver a autenticarse. Por otro lado, se han diseñado dos pantallas de registro en las que se pide al usuario que introduzca el correo electrónico que desea utilizar, una contraseña, el nombre de usuario que quiere utilizar, previa comprobación de su disponibilidad y un número de teléfono móvil. Tras aceptar los términos de uso y la política de privacidad y comprobado que el email no está en uso y que la contraseña cumple la política de contraseñas, se envía un correo electrónico de verificación con un enlace de activación de la cuenta. Una vez realizado este paso se podrá iniciar sesión. 16 En cuanto a la pantalla de recuperación de contraseña se realiza una comprobación previa de si el email indicado está registrado, ya que se ha establecido que ha de usarse como correo de recuperación el mismo utilizado en el registro. Una vez hecho se envía un correo electrónico con un enlace para restablecer la contraseña. Ilustración 13: Pantalla de inicio de sesión Ilustración 14: Pantalla de recuperación de contraseña 17 Ilustración 15: Pantalla de registro (I) Ilustración 16: Pantalla de registro (II) 18 4.1.2 Pantalla principal La pantalla principal de la aplicación está compuesta por cinco elementos: un menú desplegable lateral de navegación, un botón flotante para la creación de eventos, un botón de refresco, una página con el calendario personal y una página para gestionar las invitaciones de los eventos. El menú lateral dirige la navegación hacia todas las secciones de la aplicación y es por tanto esencial en la fluidez de uso. Mientras que el botón de refresco es vital para sincronizar la aplicación con el backend. Ilustración 17: Menú lateral de navegación 4.1.2.1 Calendario Esta página presenta un calendario personal que refleja los eventos del usuario, tanto los organizados como aquellos en los que figura como asistente. Disponiendo de tres vistas diferentes de las fechas: mes, dos semanas y una semana. Los eventos del día seleccionado son desplegados debajo del calendario ofreciendo los detalles y la oportunidad de acceder a las pantallas de dicho evento. 19 Ilustración 18: Pantalla del calendario 4.1.2.2 Invitaciones Esta página presenta una lista de las invitaciones de eventos pendientes de gestionar por parte del usuario. Cada invitación refleja la información principal de cada evento y permite aceptar o declinar. Una vez seleccionada la opción la invitación desaparecerá y el evento será accesible desde el calendario y desde la sección de Mis eventos. Además, el usuario será agregado a la lista de asistentes en caso de haber sido aceptada. Ilustración 19: Pantalla de invitaciones 20 4.1.2.3 Creación de eventos La pantalla de creación de los eventos pretende ofrecer una interfaz sencilla muy desacoplada en cada paso para aportar toda la información de forma amena. Los pasos que seguir durante la configuración son: • Introducción del nombre, descripción y tipo del evento. Los tipos disponibles actualmente son: cumpleaños, almuerzo, cena, desayuno, merienda, barbacoa, fiesta, reunión u otro. • Introducción de la hora y la fecha. • Introducción opcional de una ubicación inicial para el evento. Posteriormente es posible añadir varias localizaciones una vez dentro de la pantalla del evento. • Introducción de los organizadores iniciales. Posteriormente es posible agregar más organizadores y a todos los asistentes. • Generación del enlace de invitación al evento y botón para compartirlo en redes sociales o aplicaciones de mensajería. Ilustración 20: Pantalla de creación de evento (I) 21 Ilustración 21: Pantalla de creación de evento (II) Ilustración 22: Pantalla de creación de evento (III) 22 Ilustración 23: Pantalla de creación de evento (IV) Ilustración 24: Pantalla de creación de evento (V) 23 4.1.3 Evento Los eventos de los que forma parte el usuario son accesibles desde la pantalla del calendario o desde la sección Mis eventos. El conjunto de información, acciones, gestión y comunicación del evento se realizan desde las pantallas que se van a comentar a continuación. Estas pantallas varían dependiendo del rol que ejerza el usuario en el evento: organizador o asistente. 4.1.3.1 Información La pantalla de información presenta los campos: nombre, descripción, tipo de evento, fecha y hora, y ubicaciones. Con el rol de organizador se pueden modificar todos los campos y en el caso concreto de ubicaciones se pueden agregar nuevas o eliminarlas. Las ubicaciones al pulsarlas abrirán la aplicación de mapas disponible en el dispositivo. Además, también se puede cancelar el evento. Mientras que con el rol de asistente solo se pueden ver. Con independencia del rol cualquier cambio realizado en alguno de los campos será motivo de notificación a todos los participantes. Ilustración 25: Pantalla de información del evento. Rol organizador 30 Ilustración 37: Pantalla de modificación de una tarea Ilustración 38: Pantalla principal de tareas del evento (II) 31 4.1.4 Perfil La sección Mi perfil permite gestionar la información personal del usuario. En concreto, cambiar la foto de perfil seleccionando una imagen desde la galería o utilizando la cámara, cambiar el nombre de usuario, previa comprobación de la disponibilidad, y cambiar el número de teléfono asociado a la cuenta. Por otro lado, esta pantalla permite realizar tres acciones de control sobre la cuenta de usuario: cambiar la contraseña, cerrar sesión y eliminar la cuenta. Ilustración 39: Pantalla de perfil (I) Ilustración 40: Pantalla de perfil (II) 32 4.1.5 Eventos organizados y asistidos La sección Mis eventos consta de dos pantallas que despliegan los eventos organizados y los eventos asistidos o a los que se va a asistir respectivamente. Estas listas ordenadas cronológicamente pretenden servir de histórico y también proporcionar un rápido acceso a los eventos sin tener que desplazarnos por el calendario de la pantalla principal hasta la fecha correspondiente. El acceso a los eventos se realizará mediante la pulsación sobre su tarjeta y acorde al rol que tenga el usuario en ese evento. Ilustración 41: Pantalla de eventos organizados Ilustración 42: Pantalla de eventos asistidos 33 4.1.6 Contactos La sección Mis contactos pretende ayudar al usuario a encontrar a familiares, amigos y conocidos que también tengan cuenta en la aplicación. Además, los contactos que estén pueden ser organizados en grupos para facilitar el proceso de invitación a los eventos que organice el usuario. Siempre que el usuario haya dado permiso para acceder a los contactos de su agenda se desplegará una lista con todos ellos que mostrará un botón de invitación para aquellos que no tengan cuenta. Por otro lado, el apartado de grupos consta de una pantalla para la creación o eliminación de ellos. La creación requerirá de un nombre y de los integrantes, que deberán ser mínimo dos y no podrá incluirse uno mismo. Una vez creado, se podrá acceder, pulsando en ellos, a una pantalla de detalle de los integrantes en la que se podrá agregar o quitar a cualquiera de ellos. Ilustración 43: Pantalla de contactos de la agenda 34 Ilustración 44: Pantalla de gestión de grupos Ilustración 45: Pantalla de detalle de un grupo 35 Ilustración 46: Pantalla de creación de un nuevo grupo 4.1.7 Notificaciones En la aplicación se han contemplado tres tipos de notificaciones: cambios en la información de un evento, nuevos mensajes en el chat y la asignación de una tarea al usuario. Las notificaciones se mostrarán en la bandeja de entrada del sistema cuando la aplicación se encuentre en segundo plano o cerrada; mientras que en primer plano solo las notificaciones de información entrarán a la sección de Notificaciones. En dicha sección se presenta una pantalla con las notificaciones de información en una lista con las más recientes en primer lugar. Cada notificación, encabezada por el nombre del evento al que pertenece, contiene el tipo de cambio que se ha realizado junto con el organizador que lo ha ejecutado. 36 Ilustración 47: Pantalla de notificaciones Ilustración 48: Indicador del número de notificaciones sin leer Ilustración 49: Notificación de nuevos mensajes en el chat Ilustración 50: Notificación de asignación de tarea 4.1.8 Ajustes La sección de ajustes está compuesta por los siguientes elementos: • Tres interruptores para activar o desactivar la recepción de notificaciones de cada uno de los tipos disponibles. 37 • Una pantalla que muestra todas las licencias de los paquetes de terceros utilizados en el desarrollo. • La versión de la aplicación instalada en el dispositivo. Ilustración 51: Pantalla de la sección de ajustes Ilustración 52: Pantalla de licencias 38 Pruebas Durante el desarrollo de la aplicación, así como una vez terminado, se han utilizado mecanismos de pruebas con el fin de comprobar el correcto funcionamiento de todos los elementos tanto visuales como de lógica. Además de cubrir la necesidad de verificar los flujos de interacción que se espera que tengan los usuarios para encontrar fallos. Para este fin se hacía imprescindible contar con usuarios reales que tuvieran el rol de tester, tanto en Android como en iOS. Los mecanismos de distribución de las versiones que se iban liberando han sido dos diferentes. Durante casi todo el desarrollo se utilizó el producto de Firebase denominado App Distribution y en la fase final se utilizaron los canales oficiales de Google y Apple para dicho propósito. Para el uso del primer mecanismo es necesario que el tester tenga cuenta de Google mientras que, en el segundo, en el caso del canal oficial de Google también y en el caso de Apple es necesario tener un id de Apple. El producto App Distribution permite gestionar la distribución, a testers individuales o grupos, de la aplicación de forma manual mediante enlaces de invitación o de forma automática. El sistema automático se encarga de enviar correos electrónicos con las instrucciones para participar en las pruebas y de notificar a los participantes cuando se libera una nueva versión. Además, gracias a la integración con los otros productos de Firebase de analíticas y crashlytics es posible detectar errores en versiones concretas, lo que redunda en un seguimiento muy detallado de cómo se están comportando las versiones. En Android se puede instalar la aplicación, habilitando el permiso para orígenes desconocidos, de forma manual o más cómodamente mediante la aplicación auxiliar “App Tester” de Firebase, que es distribuida ad hoc mediante el correo con las instrucciones. Mientras que en iOS hay que utilizar dicha aplicación auxiliar de forma obligatoria. Ilustración 53: Panel de distribución de Firebase para Android 39 Ilustración 54: Panel de distribución de Firebase para iOS Ilustración 55: Aplicación "App Tester" de Firebase El mecanismo comentado aporta agilidad en la distribución, así como información muy valiosa. No obstante, aunque la interfaz es intuitiva y no tiene complejidad, tiene un enfoque destinado a personas con cierto manejo del tema. Por este motivo, y dada la necesidad de hacer llegar la aplicación de la forma más sencilla y familiar posible a todo el mundo decidí cambiar a los mecanismos de los canales oficiales. Los canales oficiales, Google Play Console y App Store Connect, ofrecen todas las funcionalidades de distribución con el añadido de pasar las revisiones oficiales de estas plataformas. Esto supone aumentar los plazos, pues hay que esperar a dichas revisiones, y rellenar toda la documentación oficial para cada plataforma. Para Android se ha creado un segmento cerrado de pruebas denominado “TFG” que permite a las cuentas de Google indicadas acceder a la ficha y por lo tanto a la aplicación mediante Google Play Store. Una gran ventaja es la optimización de la aplicación para las diferentes arquitecturas móviles. 46 ANEXOS Anexo A: Modelo de datos Ilustración 59: Modelo de datos de EventYou 47 Anexo B: Funciones en Firebase Cloud Functions const functions = require('firebase-functions'); const admin = require('firebase-admin'); admin.initializeApp(); exports.notificationTrigger = functions.firestore.document('usuarios/ {usuario}/notificaciones/{notificacion}') .onCreate((snapshot, context) => { var notificacion = snapshot.data(); var token = ''; var payload = { "notification": { "title": notificacion.title, "body": notificacion.body, "sound": "default" }, "data": { "idEvento": notificacion.idEvento, } } snapshot.ref.parent.parent.get().then((docUsuario) => { var usuario = docUsuario.data(); switch (notificacion.type) { case 'notificationType.info': { if (usuario.notificacionesInfo) { token = usuario.token; } break; } case 'notificationType.chat': { if (usuario.notificacionesChat) { token = usuario.token; } break; } case 'notificationType.tareas': { if (usuario.notificacionesTareas) { token = usuario.token; } break; } default: break; } if (token === '') { return console.log('No se envía notificación al no estar acti vada'); } else { return admin.messaging().sendToDevice(String(token), payload) ; } 48 }).catch((err) => { console.log(err); }) console.log('Función completada'); return 0; }) Código 1: Función para enviar notificaciones exports.deleteUserFromGroups = functions.firestore.document('usuarios/{usuario}').onDelete( (snapshot, context) => { var usuario = snapshot.data(); let queryGrupos = admin.firestore().collectionGroup('grupos'); queryGrupos = queryGrupos.where('contactos', 'array-contains', usuario.uid); return queryGrupos.get().then(querySnapshot => { return querySnapshot.forEach(documentSnapshot => { var field = documentSnapshot.get('contactos'); for (i = 0; i < field.length; i++) { if (field[i] === usuario.uid) { field.splice(i, 1); documentSnapshot.ref.update({ 'contactos': field }); } } return console.log(`User removed from groups`); }); }); } ) Código 2: Función para eliminar al usuario de los grupos exports.deleteUserFromAssistants = functions.firestore.document('usuarios/{usuario}').onDelete( (snapshot, context) => { var usuario = snapshot.data(); let queryAsistentes = admin.firestore().collectionGroup('asistentes'); queryAsistentes = queryAsistentes.where('uid', '==', usuario.uid); return queryAsistentes.get().then(querySnapshot => { return querySnapshot.forEach(documentSnapshot => { documentSnapshot.ref.delete(); return console.log('User removed from assistants'); }) }) } ) Código 3: Función para eliminar al usuario de los eventos a los que asiste 49 exports.deleteUserFromOrganizers = functions.firestore.document('usuarios/{usuario}').onDelete( (snapshot, context) => { var usuario = snapshot.data(); let queryOrganizadores = admin.firestore().collectionGroup('organizadores'); queryOrganizadores = queryOrganizadores.where('uid', '==', usuario.uid); return queryOrganizadores.get().then(querySnapshot => { return querySnapshot.forEach(documentSnapshot => { documentSnapshot.ref.delete(); return console.log('User removed from organizers'); }) }) } ) Código 4: Función para eliminar al usuario de los eventos organizados exports.deleteUserFromTasks = functions.firestore.document('usuarios/{usuario}').onDelete( (snapshot, context) => { var usuario = snapshot.data(); let queryTareas = admin.firestore().collectionGroup('tareas'); queryTareas = queryTareas.where('encargados', 'array-contains', usuario.uid); return queryTareas.get().then(querySnapshot => { return querySnapshot.forEach(documentSnapshot => { var field = documentSnapshot.get('encargados'); for (i = 0; i < field.length; i++) { if (field[i] === usuario.uid) { field.splice(i, 1); documentSnapshot.ref.update({ 'encargados': field }); } } return console.log(`User removed from tasks`); }); }); } ) Código 5: Función para eliminar al usuario de las tareas asignadas