TechPeopleCare Assets

Texto completo

(1)Universidad Politécnica de Madrid Escuela Técnica Superior de Ingenieros Informáticos. Grado en Ingeniería Informática. Trabajo Fin de Grado TECHPEOPLECARE ASSETS. Autor: Javier Cuéllar Torres Tutor(a): Ángel Herranz Nieva. Madrid, Junio - 2020.

(2) Este Trabajo Fin de Grado se ha depositado en la ETSI Informáticos de la Universidad Politécnica de Madrid para su defensa.. Trabajo Fin de Grado Grado en Ingeniería Informática Título: TECHPEOPLECARE ASSETS Junio - 2020. Autor: Javier Cuéllar Torres Tutor: Ángel Herranz Nieva Lenguajes y Sistemas Informáticos e Ingeniería del Software ETSI Informáticos Universidad Politécnica de Madrid. 2.

(3) Tabla de contenidos Resumen. iii. Abstract. v. 1. Introducción 1.1. Glosario de términos 1.2. Contexto . . . . . . . . 1.3. TechPeopleCare . . . 1.4. Motivación . . . . . . 1.5. Objetivos . . . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. . . . . .. 2. Estado del arte 3. Tecnología 3.1. Editor de código . . . . . . . . . 3.2. Lenguaje de programación . . . 3.3. Framework . . . . . . . . . . . . 3.4. Sistema de base de datos . . . . 3.5. Sistema de control de versiones 3.6. Librerías y APIs . . . . . . . . . . 3.6.1. jQuery . . . . . . . . . . . 3.6.2. Datatables . . . . . . . . . 3.6.3. Materialize . . . . . . . .. 1 1 1 2 2 3 5. . . . . . . . . .. . . . . . . . . .. . . . . . . . . .. . . . . . . . . .. . . . . . . . . .. . . . . . . . . .. . . . . . . . . .. . . . . . . . . .. . . . . . . . . .. . . . . . . . . .. 4. Desarrollo 4.1. Modelo de datos . . . . . . . . . . . . . . . . . . . 4.1.1. Entidades de la base de datos . . . . . . . 4.1.2. Migraciones de Phoenix . . . . . . . . . . . 4.1.3. Esquemas de Phoenix . . . . . . . . . . . . 4.2. Historias de usuario . . . . . . . . . . . . . . . . . 4.2.1. Subir uno o varios vídeos . . . . . . . . . . 4.2.2. Ver una lista de vídeos subidos al servidor 4.2.3. Crear un curso . . . . . . . . . . . . . . . . 4.2.4. Ver una lista de cursos creados . . . . . . 4.2.5. Crear un set de cursos . . . . . . . . . . . 4.2.6. Ver una lista de sets de cursos creados . . 4.2.7. Editar un vídeo . . . . . . . . . . . . . . . . 4.2.8. Editar un curso . . . . . . . . . . . . . . . . 4.2.9. Editar un set de cursos . . . . . . . . . . . i. . . . . . . . . .. . . . . . . . . . . . . . .. . . . . . . . . .. . . . . . . . . . . . . . .. . . . . . . . . .. . . . . . . . . . . . . . .. . . . . . . . . .. . . . . . . . . . . . . . .. . . . . . . . . .. . . . . . . . . . . . . . .. . . . . . . . . .. . . . . . . . . . . . . . .. . . . . . . . . .. . . . . . . . . . . . . . .. . . . . . . . . .. . . . . . . . . . . . . . .. . . . . . . . . .. . . . . . . . . . . . . . .. . . . . . . . . .. . . . . . . . . . . . . . .. . . . . . . . . .. . . . . . . . . . . . . . .. . . . . . . . . .. . . . . . . . . . . . . . .. . . . . . . . . .. . . . . . . . . . . . . . .. . . . . . . . . .. 9 9 10 11 12 13 14 14 14 15. . . . . . . . . . . . . . .. 17 17 17 19 21 23 23 24 24 24 25 25 25 26 26.

(4) TABLA DE CONTENIDOS 4.3. Navegación . . . . . . . . . . . . . . . 4.3.1. Home: / . . . . . . . . . . . . . 4.3.2. Login: /login . . . . . . . . . . 4.3.3. Videos: /videos . . . . . . . . . 4.3.4. Videos: /videos/new . . . . . . 4.3.5. Videos: /videos/{id}/edit . . . 4.3.6. Videos: /videos/{id} . . . . . . 4.3.7. Cursos: /courses . . . . . . . . 4.3.8. Cursos: /courses/new . . . . . 4.3.9. Cursos: /courses/{id}/edit . . 4.3.10.Cursos: /courses/{id} . . . . . 4.3.11.Set de cursos: /sets . . . . . . 4.3.12.Sets de cursos: /sets/new . . 4.3.13.Sets de cursos: /sets/{id}/edit 4.3.14.Sets de cursos: /sets/{id} . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . .. 27 27 27 28 28 29 29 30 30 31 31 31 32 32 33. 5. Resultados y conclusiones 35 5.1. Objetivos cumplidos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 Bibliografía. 37. Anexo .1. Historias de usuario adicionales . . . . . . . . . . . . . . . . . . . . . .1.1. Generar un JSON por cada set de cursos creado . . . . . . . .1.2. Estandarizar los idiomas de los cursos . . . . . . . . . . . . . .1.3. Inhabilitar un set de cursos . . . . . . . . . . . . . . . . . . . .1.4. Mostrar tablero con set de cursos visitados por la aplicación .1.5. Mostrar tablero con accesos realizados a los sets de cursos . .1.6. Mostrar tablero con estadísticas sobre los vídeos . . . . . . .. 38 39 39 39 39 40 40 40. ii. . . . . . . .. . . . . . . .. . . . . . . ..

(5) Resumen La rápida y constante evolución de la tecnología y los servicios online ha hecho que muchas personas tengan unos conocimientos muy limitados sobre el manejo de los mismos. Como respuesta a esta analfabetización digital surge TechPeopleCare Android App, una aplicación que permite descargar cursos de carácter individual para todas aquellas personas que desconocen cómo utilizar determinados servicios online. Esta aplicación es una iniciativa de Tedeco Group. Dado el gran éxito de la iniciativa TechPeopleCare Android App, la demanda de cursos de alfabetización digital ha ido en aumento, y con ella la complejidad, estructuración y organización de los cursos. Es por ello que ahora surge la iniciativa TechPeopleCare Assets, un sistema que permita al personal de Tedeco Group subir vídeos a un servidor remoto y gestionar los cursos de los que dispondrá TechPeopleCare Android App. Tras conocer y comprender la estructura y arquitectura de los cursos, se ha procedido a implementar una base de datos en Postgres que permita unificar y gestionar todos los recursos de video, así como implementar la aplicación web de subida de vídeos y creación de cursos mediante el framework Phoenix, un framework basado en la programación funcional del lenguaje Elixir y en el modelo-vista-controlador (MVC).. iii.

(6)

(7) Abstract The fast and constant evolution of technology and online services means that many people have limited knowledge about manage them. In response to this digital illiteracy, TechPeopleCare Android App emerges, an application that allows to download individual purpose courses for all those people who do not know how to use certain online services. This application is a initiative of Tedeco Group. Given the great success of the TechPeopleCare Android App initiative, digital literacy courses demand has been increasing, and with it the complexity, structuring and organization of the courses. Because of that, TechPeopleCare Assets initiative is now emerging, a system which allows Tedeco Group staff to upload videos to a remote server and manage the available courses in TechPeopleCare Android App. After knowing and understanding the courses structure and architecture, a Postgres database has been implemented which allows to unify and manage all video resources, as well as implement the web application for uploading videos and creating courses trough the Phoenix framework, a framework based on the functional programming language Elixir and the model-view-controller (MVC).. v.

(8)

(9) Capítulo 1. Introducción 1.1.. Glosario de términos. Primero se van a aclarar y especificar ciertos términos que se usarán durante el desarrollo de este trabajo para tener una nomenclatura clara, concisa y saber en todo momento de qué se está hablando. Video file (fichero de vídeo): fichero que contiene el recurso de vídeo. Se sube desde la máquina del usuario. Video (vídeo): entidad o estructura del sistema empleada para representar un recurso de vídeo. Cada vídeo tiene un código único alfanumérico que lo representa. Video in course (vídeo en curso): entidad o estructura del sistema empleada para representar la aparición de un vídeo en un curso. Cada vídeo dentro de un curso tiene un código único alfanumérico que lo representa. Course (curso): entidad o estructura del sistema empleada para representar un curso (conjunto ordenado de vídeos). Cada curso tiene un código único alfanumérico que lo representa. Course set (set de cursos): entidad o estructura del sistema empleada para representar un conjunto de cursos ordenados. Cada set de cursos tiene un código único alfanumérico que lo representa. También se genera un set de cursos único para cada curso creado individualmente. Code (código): entidad almacenada en la base de datos para representar un código alfanumérico único aleatoriamente generado de 5 caracteres, utilizado para identificar un curso o set de cursos concreto y para que el usuario pueda acceder al recurso que identifica. Dicho código sólo puede contener caracteres en minúscula y números.. 1.2.. Contexto. La meta de este proyecto consiste en estudiar cómo funcionan el lenguaje de programación Elixir y el framework Phoenix para desarrollar una aplicación web de administración de vídeos y cursos. 1.

(10) 1.3. TechPeopleCare Dicha aplicación web debe permitir la subida de ficheros de vídeo a un servidor remoto y la gestión y creación de cursos con dichos recursos de vídeo, que posteriormente permitirá que los usuarios de TechPeopleCare Android App tengan acceso a determinados cursos de la plataforma. Asímismo, también debe permitir crear sets de cursos, que son paquetes que contienen varios cursos creados bajo un código identificativo alfanumérico único, utilizado para acceder a dicho paquete de cursos por parte de los usuarios de TechPeopleCare Android App. Esta aplicación web podrá ser utilizada por el personal de TechPeopleCare desde cualquier ordenador personal con conexión a Internet para las tareas antes mencionadas. Los archivos de vídeo se almacenan en el servidor remoto con un nombre identificativo único(uuid) acompañado de la versión del vídeo(integer), en un directorio llamado uploads, el cual se crea dinámicamente si no existe dentro del directorio priv del sistema de ficheros del proyecto.. 1.3.. TechPeopleCare. TechPeopleCare es una empresa social formada por el grupo de Tecnología para el Desarrollo y la Cooperación (TEDECO) de la Universidad Politécnica de Madrid, y su objetivo es eliminar la brecha digital 1 mediante el apoyo a instituciones gubernamentales sin ánimo de lucro y a empresas privadas con responsabilidad social.. 1.4.. Motivación. La aplicación web TechPeopleCare Assets surge debido a la gran demanda de cursos de alfabetización digital 2 y la necesidad de gestionar una gran cantidad de vídeos y cursos por parte de la empresa TechPeopleCare. Para solventar esta necesidad no basta con subir archivos de vídeo a un servidor remoto organizándolos en diferentes directorios y carpetas, también se debe llevar un registro actualizado de los ficheros de vídeo subidos y las relaciones existentes entre los vídeos presentes en el servidor y los cursos creados por el personal de TechPeopleCare. Esto es necesario por los siguientes motivos: Anteriormente la subida y edición de los vídeos y cursos debía hacerse manualmente generando archivos JSON a mano, lo cual es un trabajo arduo. Se deben identificar inequívocamente los vídeos para su posterior acceso a la hora de crear los cursos. Se debe limitar el acceso a los cursos por parte de los usuarios de la aplicación TechPeopleCare Android App. Se deben registrar qué vídeos pertenecen a qué curso. 1. Se entiende por brecha digital la "distribución desigual en términos de acceso y uso de la tecnología de la información y la comunicación", artículo Brecha digital, Wikipedia https://es.wikipedia.org/ wiki/Brecha_digital 2 Se entiende por alfabetización digital la "habilidad para localizar, analizar, organizar, entender y evaluar información utilizando tecnología digital", artículo Alfabetismo digital, Wikipedia https://es. wikipedia.org/wiki/Alfabetismo_digital. 2.

(11) Introducción De la misma manera también se debe registrar qué curso pertenece a qué set de cursos. Se debe establecer y autogenerar un código único para el acceso a los cursos y a los sets de cursos. Este código se le expide a los usuarios instaladores de la aplicación TechPeopleCare Android App. Se debe poder editar y actualizar la información y composición de los vídeos, cursos y sets de cursos. Gracias al desarrollo de la aplicación web TechPeopleCare Assets, se proporciona una interfaz gráfica online que permite llevar a cabo todas las acciones antes mencionadas, ahorrando tiempo de organización y gestión de cursos al personal de TechPeopleCare.. 1.5.. Objetivos. Inicialmente la aplicación web de subida de ficheros de vídeo iba a llamarse Tedeco Uploads y únicamente permitía la subida de ficheros de vídeo de manera organizada y estructurada en un servidor remoto, sin un registro actualizado en una base de datos. Los ficheros de vídeo se subían a un árbol de directorios y carpetas bajo el nombre de las categorías, subcategorías y cursos a los que pertenecían los vídeos en cuestión. Tras un estudio posterior de las necesidades que surgen del equipo administrador de TechPeopleCare, se decidió cambiar el nombre de la aplicación web a TechPeopleCare Assets, la cual iba a tener unos objetivos más ambiciosos y profundos que permitieran una gestión y control total sobre la subida y edición de vídeos, cursos y sets de cursos. Los objetivos de este proyecto van ligados a las historias de usuario de la aplicación que se verán en su correspondiente sección, y entre ellos están: Aprender sobre el lenguaje de programación Elixir. Aprender sobre el framework de programación Phoenix. Crear un proyecto de Phoenix. Implementar la subida de uno o varios ficheros de vídeo a un servidor remoto. Implementar la visualización de la lista de vídeos disponibles en el servidor remoto, con posibilidad de poder filtrarlos, ordenarlos y buscarlos. Implementar la edición de un vídeo previamente subido. Implementar la creación y montaje de un curso mediante la selección de los vídeos disponibles en el servidor remoto. Implementar la visualización de la lista de cursos creados, con posibilidad de poder filtrarlos, ordenarlos y buscarlos. Implementar la edición de un curso previamente creado, permitiendo añadir, eliminar y ordenar vídeos. 3.

(12) 1.5. Objetivos Implementar la creación y montaje de un set de cursos mediante la selección de cursos previamente creados. Implementar la visualización de la lista de sets de cursos creados, con posibilidad de poder filtrarlos, ordenarlos y buscarlos. Implementar la edición de un set de cursos previamente creado, permitiendo añadir o eliminar cursos.. 4.

(13) Capítulo 2. Estado del arte Actualmente existe una gran cantidad de aplicaciones web que permiten gestionar vídeos y cursos de manera gráfica, así como permitir la difusión y venta de dichos cursos a todo el público que esté interesado en ellos. Estas aplicaciones web pueden ser utilizadas por cualquier persona que esté dispuesta a mostrar su conocimiento al mundo y puedan pagar cierta tasa mensual para poder difundir sus cursos a través de estas plataformas. Ejemplos de estos tipos de aplicaciones serían:. Figura 2.1: Diferentes aplicaciones web para la gestión y difusión de cursos online. Edmodo (https://new.edmodo.com/?go2url=%2Fhome) 5.

(14) Figura 2.2: Página principal de la web de Edmodo. Edx (https://www.edx.org/). Figura 2.3: Página principal de la web de Edx. Exelearning (https://exelearning.net/) 6.

(15) Estado del arte. Figura 2.4: Página principal de la web de Exelearning. Miriadax (https://miriadax.net/home). Figura 2.5: Página principal de la web de Miriadax. Moodle (https://moodle.org/?lang=es) 7.

(16) Figura 2.6: Página principal de la web de Moodle Tutellus (https://www.tutellus.com/). Figura 2.7: Página principal de la web de Tutellus Muchas de estas aplicaciones permiten incluso realizar tests o exámenes online a los alumnos registrados en un curso, así como ofrecer zonas de chat y discusiones para poner en contacto a alumnos y profesores, además de consultar dudas. Este no es el caso que ocupa para la aplicación TechPeopleCare Assets, ya que para esta aplicación interesa que sea de uso privado, que únicamente pueda acceder a ella el personal administrador de TechPeopleCare. Además, no requiere la suscripción de alumnos ni chats ya que es la aplicación TechPeopleCare Android App la encargada de mostrar los cursos y vídeos a los usuarios finales. TechPeopleCare Assets se desarrolla como una herramienta complementaria y auxiliar a la aplicación Android ya existente del grupo TechPeopleCare. 8.

(17) Capítulo 3. Tecnología En este capítulo se pasará a mostrar y explicar un poco las diferentes tecnologías y herramientas con las que se desarrolla el proyecto TechPeopleCare Assets.. 3.1.. Editor de código. Para el desarrollo y la escritura de código se ha utilizado el editor de código fuente Sublime Text 3 (https://www.sublimetext.com/), una herramienta capaz de modificar y mover varias líneas de código simultáneamente sin alterar el resto del código. Además, es un software de carácter gratuito. Ofrece numerosas herramientas de búsqueda de ficheros y texto para su edición, permite indexar y agrupar código, comentar, mostrar números de línea y es compatible con multitud de lenguajes de programación, en este caso con el lenguaje de programación Elixir, con los HTML EEX Templates del framework Phoenix, ficheros JavaScript y ficheros CSS. También deja la posibilidad de instalar plugins y paquetes para obtener funcionalidades de autocompletado de código y snippets, que permiten escribir bloques de código repetitivo con sólo introducir una palabra o comando. Permite abrir varios ficheros y directorios a la vez, y muestra un árbol de directorios con todos los ficheros de un proyecto para poder navegar entre ellos.. Figura 3.1: Logo del editor de código fuente Sublime Text 3 9.

(18) 3.2. Lenguaje de programación. Figura 3.2: Interfaz gráfica del editor de código fuente Sublime Text 3. 3.2.. Lenguaje de programación. El lenguaje de programación base sobre el que se desarrolla TechPeopleCare Assets es Elixir, un lenguaje de programación funcional que rechaza el uso de la habitual práctica de la programación orientada a objetos (POO), por tanto, no existe el uso de instancias de clase ni declaraciones de clases como tal. Elixir se basa en obtener estructuras o mapas de datos como argumentos de funciones y al mismo tiempo devuelve estructuras o mapas de datos nuevos o modificados, ya que es la única forma que tiene de mantener la persistencia de datos, puesto que no se pueden instanciar objetos ni declarar variables globales. Posee una peculiaridad llamada ’Pattern Matching’ que le permite comparar patrones y estructuras de datos, algo muy útil a la hora de obtener y desestructurar los datos en ’variables’, independientemente de lo complejo que sea un mapa de datos. Este lenguaje es perfecto para conseguir aplicaciones escalables. Posee una herramienta de compilación llamada Mix que ofrece la posibilidad de crear proyectos y componentes de forma sencilla, así como ejecutar tareas y pruebas. Elixir se ejecuta en la máquina virtual Erlang, permitiendo crear aplicaciones que se ejecutan dentro de subprocesos ligeros y tolerantes a fallos, algo muy útil en este caso donde hay que tener en cuenta la red, los sistemas de archivos y otros recursos de terceros. 10.

(19) Tecnología. Figura 3.3: Logo del lenguaje de programación Elixir. 3.3.. Framework. El framework utilizado para crear el proyecto TechPeopleCare Assets ha sido Phoenix, montado sobre el lenguage de programación Elixir explicado en la sección anterior. Phoenix permite crear aplicaciones web interactivas de forma rápida, ya que utiliza la herramienta de compilación de Elixir (Mix) para crear proyectos, componentes y ejecutar tareas de desarrollo y testing, así como de arranques de servidor; y de igual manera está montado sobre la máquina virtual Erlang, que le permite beneficiarse de todas sus características. Phoenix permite modificar la información de las páginas web de forma dinámica en tiempo real gracias al uso de Web Sockets y la nueva funcionalidad LiveView, que minimiza el uso de tecnologías como JavaScript, todo ello desde el lado del servidor. Este framework mantiene una buena estructura de directorios dentro del proyecto siguiendo el modelo MVC (Modelo Vista Controlador ó Model View Controller), que permite tener separada la capa de datos, la capa de presentación de usuario y la capa de manejo de datos. La capa de datos se sitúa en el directorio /lib/{nombre_proyecto}, y almacena todos los ficheros relacionados con la definición de estructuras de datos de la aplicación. La capa de presentación se sitúa en el directorio /lib/{nombre_proyecto}_web/templates, y almacena todas las plantillas web en formato HTML EEX, un modelo especial de plantilla basado en el lenguaje de programación HTML 5 que permite incrustar código de Elixir, algo muy útil para la presentación de datos en pantalla. La capa controladora se sitúa en el directorio /lib/{nombre_proyecto}_web/controllers, que contiene todos los ficheros encargados del tratamiento de los datos. A través de estos controladores se obtienen y envían datos desde y hacia la base de datos; se obtienen y envían datos desde y hacia las distintas plantillas de la aplicación; y se tratan los datos para diversos fines.. Figura 3.4: Logo del framework Phoenix 11.

(20) 3.4. Sistema de base de datos. Figura 3.5: Estructura de directorios del framework Phoenix. 3.4.. Sistema de base de datos. El sistema de persistencia de datos o base de datos utilizada por el framework Phoenix es PostgreSQL, un sistema de base de datos relacional con una amplia comunidad de código abierto que lo hace crecer cada día. PostgreSQL es además compatible con la mayoría de los sistemas operativos que existen hoy en día, ofrece integridad en el almacenamiento de los datos y es tolerante a fallos, algo que como se dijo anteriormente es muy útil de cara al desarrollo de una aplicación web. Este sistema cumple y conforma al menos 160 de las 179 características de conformidad del núcleo de SQL 2016, y cumple su función independientemente de lo 12.

(21) Tecnología pequeña o grande que sea la base de datos que tenga que albergar. PostgreSQL tiene compatibilidad con multitud de lenguajes de programación sin necesidad de tener que recompilar la base de datos cada vez que se cambia de lenguaje.. Figura 3.6: Logo del sistema de base de datos PostgreSQL. Figura 3.7: Entorno gráfico de administración de base de datos de PostgreSQL. 3.5.. Sistema de control de versiones. Durante el desarrollo de la aplicación web TechPeopleCare Assets se ha utilizado el sistema GitLab, un servicio web de control de versiones basado en Git. GitLab permite gestionar y administrar repositorios bajo una licencia de código abierto, llevando un histórico de los cambios realizados en las direrentes etapas del ciclo de vida de la aplicación, además de ofrecer la posibilidad de conectar e integrar los repositorios con diferentes aplicaciones. La principal característica de este sistema de control de versiones es que permite a los equipos de desarrollo colaborar simultáneamente sobre el mismo código, permitiendo flujos paralelos de desarrollo y la unión de código. 13.

(22) 3.6. Librerías y APIs. Figura 3.8: Logo del sistema de control de versiones GitLab. 3.6.. Librerías y APIs. 3.6.1. jQuery jQuery es una librería multiplataforma de JavaScript que simplifica la forma de manejar los elementos DOM de un documento HTML, permitiendo controlar eventos, animaciones y estilos CSS. Esta librería de software libre y código abierto permite ahorrar mucho código de programación en JavaScript, reduciendo los tiempos de desarrollo de la aplicación y permitiendo interacturar de forma dinámica con los elementos de una plantilla web (template). Además, mantiene la compatibilidad entre diferentes navegadores web, algo que JavaScript por sí solo no era capaz de conseguir, lo cual es perfecto para el desarrollo de la aplicación TechPeopleCare Assets. También soporta el trabajo con archivos JSON, lo cual será necesario para futuras modificaciones de la aplicación como se verá más adelante en la sección de Anexo.. Figura 3.9: Logo de la librería jQuery. 3.6.2. Datatables Datatables es un plugin para la librería jQuery de JavaScript mencionada en el apartado anterior, que permite crear tablas para representar datos y añadir ciertas funcionalidades, tales como filtrar por texto, filtrar por número de registros, paginar, ordenar por columna y muchas más funcionalidades. Todas las características antes mencionadas son las que hacen propicio el uso de este plugin para el desarrollo de la aplicación TechPeopleCare Assets, ya que cumple con muchos de los requisitos exigidos durante el desarrollo. Este plugin permite además integrar temas de Bootstrap 3 y 4, consiguiendo que los datatables sean responsive y mobile friendly, adaptándolos a cualquier tipo de pantalla. Datatables es un software libre de código abierto y por ello permite la integración de diversas fuentes de datos, ya que el origen de datos de los datatables pueden proceder del documento DOM, de JavaScript, de Ajax o venir preprocesados del lado del servidor. 14.

(23) Tecnología. Figura 3.10: Logo del plugin Datatables. Figura 3.11: Página web del plugin Datatables. 3.6.3. Materialize Materialize es un framework para desarrollo front-end que permite aplicar los principios de Material Design a los elementos DOM de los documentos HTML. Este framework hace uso de estilos CSS y scripts JavaScript para mimetizar o asemejar los estilos y eventos proporcionados por Material Design, dando a las plantillas web una apariencia intuitiva y más familiar, ya que usa el mismo estilo que los usuarios están acostumbrados a ver en sus smartphones. La mayor parte del trabajo está hecho, con sólo utilizar unas clases en determinados elementos DOM ya se aplican diversos estilos CSS y eventos de JavaScript que hacen que la aplicación cobre vida, lo cual facilita y agiliza mucho el tiempo de desarrollo.. Figura 3.12: Logo del framework Materialize 15.

(24) 3.6. Librerías y APIs. Figura 3.13: Página web del framework Materialize. 16.

(25) Capítulo 4. Desarrollo 4.1.. Modelo de datos. En esta sección se detallan las entidades de la base de datos de la aplicación TechPeopleCare Assets y se muestran las relaciones entre ellas. La base de datos está montada sobre Postgres.. 4.1.1. Entidades de la base de datos. Figura 4.1: Modelado de las tablas presentes en la base de datos de la aplicación. A continuación se pasará a explicar en detalle la información guardada en cada entidad de la base de datos Postgres: Video: Representa a la entidad Video dentro de la aplicación y guarda información sobre el fichero de vídeo físico almacenado en el servidor. Sus campos son: id: Código identificativo alfanumérico único, utilizado para identificar inequívocamente al recurso de Vídeo. Es de tipo uuid. 17.

(26) 4.1. Modelo de datos title: Nombre del fichero de vídeo subido al servidor remoto, se almacena para conocer el nombre original del fichero y obtener su extensión de archivo. Es de tipo string. description: Descripción que se le puede añadir al vídeo una vez subido al servidor, es un campo opcional y no tiene por qué contener información. Es de tipo string. version: Es un número que indica la versión del vídeo. Al subir un vídeo por primera vez al servidor se establece la versión 1, y las posteriores ediciones del vídeo irán incrementando este número. Es de tipo integer. releaseDate: Es la fecha de la última edición del vídeo. Cuando se sube un fichero de vídeo nuevo al servidor se establece la fecha de subida, y cuando se edita dicho vídeo se sobreescribe el valor con la nueva fecha de edición. Es de tipo date. Course: Representa a la entidad de curso dentro de la aplicación y guarda información sobre un curso creado. Sus campos son: id: Código identificativo alfanumérico único, utilizado para identificar inequívocamente al recurso de curso. Es de tipo uuid. title: Nombre o título descriptivo del curso. Es de tipo string. version: Es un número que indica la versión del curso. Al crear o montar un curso por primera se establece la versión 1, y las posteriores ediciones del curso irán incrementando este número. Es de tipo integer. language: Es el idioma en el que se imparte el curso. Es de tipo string. VideoInCourse: Representa la relación existente entre un vídeo y un curso, guarda información específica sobre un vídeo dentro de un curso, ya que el mismo vídeo puede aparecer dentro de otros cursos con otra información. Sus campos son: id: Código identificativo alfanumérico único, utilizado para identificar inequívocamente la relación entre un vídeo y un curso. Es de tipo uuid. video_id: Código identificativo alfanumérico único, utilizado para identificar inequívocamente al vídeo involucrado en la relación, es una clave foránea. Es de tipo uuid. course_id: Código identificativo alfanumérico único, utilizado para identificar inequívocamente al curso involucrado en la relación, es una clave foránea. Es de tipo uuid. title: Es el título descriptivo que recibe el vídeo dentro de un curso específico, es un campo opcional y no tiene por qué contener información, por lo que si no se agrega un título se hereda el título de la entidad Video a la que referencia video_id. Es de tipo string. topic: Es otro título añadido al vídeo dentro de un curso que también es de carácter opcional. Es de tipo string. order: Es un número utilizado para indicar el orden del vídeo dentro de un curso. Es de tipo integer. 18.

(27) Desarrollo Code: Representa a la entidad de código dentro de la aplicación, la cual se utiliza para identificar y acceder a un curso o set de cursos por parte de los usuarios de TechPeopleCare Android App. Sus campos son: id: Código identificativo alfanumérico único compuesto por 5 caracteres, se genera automáticamente al crear un set de cursos o un curso y sirve para identificarlos y acceder a ellos. Es de tipo string. CourseSet: Representa un set de cursos que a su vez es la relación existente entre un código y un curso o conjunto de cursos, ya que el mismo curso puede aparecer en diferentes sets de cursos y con diferentes códigos de acceso. Sus campos son: id: Código identificativo alfanumérico único, utilizado para identificar inequívocamente la relación entre un código y un curso. Es de tipo uuid. code_id: Código identificativo alfanumérico único de 5 caracteres, utilizado para identificar inequívocamente al código involucrado en la relación, es una clave foránea. Es de tipo string. course_id: Código identificativo alfanumérico único, utilizado para identificar inequívocamente al curso involucrado en la relación, es una clave foránea. Es de tipo uuid. User: Representa una entidad de usuario dentro de la aplicación, se utiliza únicamente con fines de autenticación. Sus campos son: id: Código identificativo alfanumérico único, utilizado para identificar inequívocamente a un usuario administrador. Es de tipo uuid. email: Email de registro del usuario administrador, debe coincidir con las credenciales de login de GitHub o GitLab, así se evita el acceso a la aplicación por parte de usuarios no autorizados. Es de tipo string.. 4.1.2. Migraciones de Phoenix Por otra parte, están las migraciones que se hacen desde el framework Phoenix para crear las entidades mencionadas en el apartado anterior, cuyo código se pasa a mostrar a continuación: Video: 1 2. defmodule Tpcassets.Repo.Migrations.CreateVideos do use Ecto.Migration. 3 4 5 6 7 8 9 10 11 12 13. def change do create table(:videos, primary_key: false) do add :id, :uuid, primary_key: true, default: Ecto.UUID.generate() add :title, :string add :description, :string add :version, :integer add :releaseDate, :date end end end. Course: 19.

(28) 4.1. Modelo de datos. 1 2. defmodule Tpcassets.Repo.Migrations.CreateCourses do use Ecto.Migration. 3 4 5 6 7 8 9 10. def change do create table(:courses, primary_key: false) do add :id, :uuid, primary_key: true, default: Ecto.UUID.generate() add :title, :string add :version, :integer add :language, :string end. 11 12 13. end end. VideoInCourse: 1 2. defmodule Tpcassets.Repo.Migrations.CreateVideosincourse do use Ecto.Migration. 3 4 5 6 7 8 9 10 11 12. def change do create table(:videosincourse, primary_key: false) do add :id, :uuid, primary_key: true, default: Ecto.UUID.generate() add :title, :string add :topic, :string add :order, :integer add :course_id, references(:courses, type: :uuid) add :video_id, references(:videos, type: :uuid) end. 13 14 15. end end. Code: 1 2. defmodule Tpcassets.Repo.Migrations.CreateCodes do use Ecto.Migration. 3 4 5 6 7. def change do create table(:codes, primary_key: false) do add :id, :string, primary_key: true end. 8 9 10. end end. CourseSet: 1 2. defmodule Tpcassets.Repo.Migrations.CreateCoursesets do use Ecto.Migration. 3 4 5 6 7 8 9. def change do create table(:coursesets, primary_key: false) do add :id, :uuid, primary_key: true, default: Ecto.UUID.generate() add :course_id, references(:courses, type: :uuid) add :code_id, references(:codes, type: :string) end. 10 11 12. end end. User:. 20.

(29) Desarrollo. 1 2. defmodule Tpcassets.Repo.Migrations.CreateUsers do use Ecto.Migration. 3 4 5 6 7 8 9 10. def change do create table(:users, primary_key: false) do add :id, :uuid, primary_key: true, default: Ecto.UUID.generate() add :email, :string end end end. 4.1.3. Esquemas de Phoenix Como último tratamiento del modelado de datos, el framework Phoenix utiliza los esquemas o ’schemas’, que son los encargados de interpretar los registros procedentes de la base de datos y recogerlos en forma de una estructura de datos válida y operativa desde el lenguaje de programación Elixir. También se utilizan para enviar uno o varios registros de información a la base de datos. El código de definición de cada uno de los esquemas se pasa a mostrar a continuación: Video: 1 2 3. defmodule Tpcassets.Video do use Ecto.Schema import Ecto.Changeset. 4 5 6 7 8 9 10 11 12 13. @primary_key {:id, Ecto.UUID, autogenerate: true} @foreign_key_type Ecto.UUID schema "videos" do field :description, :string field :releaseDate, :date field :title, :string field :version, :integer has_many :videosInCourse, Tpcassets.VideoInCourse end. 14 15 16 17 18 19 20 21. @doc false def changeset(video, attrs) do video |> cast(attrs, [:id, :title, :version, :releaseDate, :description]) |> validate_required([:title, :version, :releaseDate]) end end. Course: 1 2 3. defmodule Tpcassets.Course do use Ecto.Schema import Ecto.Changeset. 4 5 6 7 8 9 10 11 12 13. @primary_key {:id, Ecto.UUID, autogenerate: true} @foreign_key_type Ecto.UUID schema "courses" do field :language, :string field :title, :string field :version, :integer has_many :videosInCourse, Tpcassets.VideoInCourse has_many :courseSets, Tpcassets.CourseSet end. 14 15 16. @doc false def changeset(course, attrs) do. 21.

(30) 4.1. Modelo de datos. 17 18 19 20 21. course |> cast(attrs, [:title, :version, :language]) |> validate_required([:title, :version, :language]) end end. VideoInCourse: 1 2 3. defmodule Tpcassets.VideoInCourse do use Ecto.Schema import Ecto.Changeset. 4 5 6 7 8 9 10 11 12 13. @primary_key {:id, Ecto.UUID, autogenerate: true} @foreign_key_type Ecto.UUID schema "videosincourse" do field :order, :integer field :title, :string field :topic, :string belongs_to :course, Tpcassets.Course belongs_to :video, Tpcassets.Video end. 14 15 16 17 18 19 20 21. @doc false def changeset(video_in_course, attrs) do video_in_course |> cast(attrs, [:title, :topic, :order]) |> validate_required([:title, :order]) end end. Code: 1 2 3. defmodule Tpcassets.Code do use Ecto.Schema import Ecto.Changeset. 4 5 6 7 8 9. @primary_key {:id, :string, autogenerate: false, read_after_writes: true} @foreign_key_type :string schema "codes" do has_many :courseSets, Tpcassets.CourseSet end. 10 11 12 13 14 15 16. @doc false def changeset(code, attrs) do code |> cast(attrs, [:id]) |> validate_required([:id]) end. 17 18 19 20 21 22 23 24 25 26 27. def generate_code(size) do characterSet = "abcdefghijklmnopqrstuvwxyz0123456789" characterSet = String.graphemes(characterSet) path = Enum.to_list(1..size) output = for _i <- path do Enum.random(characterSet) end List.to_string(output) end end. CourseSet: 1 2 3. defmodule Tpcassets.CourseSet do use Ecto.Schema import Ecto.Changeset. 22.

(31) Desarrollo. 4. @primary_key {:id, Ecto.UUID, autogenerate: true} @foreign_key_type Ecto.UUID schema "coursesets" do belongs_to :course, Tpcassets.Course belongs_to :code, Tpcassets.Code, foreign_key: :code_id, type: :string end. 5 6 7 8 9 10 11 12 13 14 15 16 17 18. @doc false def changeset(course_set, attrs) do course_set |> cast(attrs, []) |> validate_required([]) end end. User: 1 2 3. defmodule Tpcassets.User do use Ecto.Schema import Ecto.Changeset. 4. @primary_key {:id, Ecto.UUID, autogenerate: true} @foreign_key_type Ecto.UUID schema "users" do field :email end. 5 6 7 8 9 10 11 12 13 14 15 16 17. @doc false def changeset(user, attrs) do user |> cast(attrs, [:email]) |> validate_required([:email]) end end. 4.2.. Historias de usuario. En esta sección se especifica el único tipo de usuario que tendrá acceso a la aplicación TechPeopleCare Assets, y las posibles acciones que puede llevar a cabo dentro de la aplicación. Sólo hay un tipo de usuario que puede acceder a la aplicación web TechPeopleCare Assets, se trata de un usuario administrador encargado de realizar las labores de subida de vídeos; creación y montaje de cursos y sets de cursos; reedición de vídeos subidos previamente; reedición de cursos y sets de cursos creados previamente. Este usuario navegará por la aplicación mediante un ordenador personal con acceso a Internet y obtendrá códigos de acceso para cada curso y set de cursos creados.. 4.2.1. Subir uno o varios vídeos Como usuario administrador quiero subir uno o varios vídeos: 1. Seleccionar un proveedor de servicios en la página principal de login de la aplicación y clickear sobre el botón ’Sign up’. 2. Hacer login con las credenciales del proveedor de servicios seleccionado. 23.

(32) 4.2. Historias de usuario 3. Clickear sobre la pestaña ’Videos’ en la barra de navegación de la aplicación para navegar hacia la página que lista los vídeos. 4. Clickear sobre el botón de la esquina inferior derecha de la pantalla con el símbolo ’+’ para navegar hacia la página de subida de ficheros de vídeo. 5. Clickear sobre el botón ’Files’ para seleccionar el/los fichero/os de vídeo que se quiere/en subir al servidor. 6. Clickear sobre el botón de la esquina inferior derecha de la pantalla con el símbolo de subida para subir al servidor los ficheros de vídeo previamente seleccionados.. 4.2.2. Ver una lista de vídeos subidos al servidor Como usuario administrador quiero ver un listado de los vídeos disponibles en el servidor: 1. Seleccionar un proveedor de servicios en la página principal de login de la aplicación y clickear sobre el botón ’Sign up’. 2. Hacer login con las credenciales del proveedor de servicios seleccionado. 3. Clickear sobre la pestaña ’Videos’ en la barra de navegación de la aplicación para navegar hacia la página que lista los vídeos.. 4.2.3. Crear un curso Como usuario administrador quiero crear un curso con los vídeos disponibles en el servidor: 1. Seleccionar un proveedor de servicios en la página principal de login de la aplicación y clickear sobre el botón ’Sign up’. 2. Hacer login con las credenciales del proveedor de servicios seleccionado. 3. Clickear sobre la pestaña ’Courses’ en la barra de navegación de la aplicación para navegar hacia la página que lista los cursos. 4. Clickear sobre el botón de la esquina inferior derecha de la pantalla con el símbolo ’+’ para navegar hacia la página de creación de cursos. 5. Introducir en el cuadro de texto el título que se le va a dar al curso. 6. Introducir el lenguaje en el que se desarrolla el curso. 7. Clickear sobre los vídeos que se desean añadir al curso. 8. Modificar los datos de los vídeos seleccionados si se desea cambiar el título del vídeo o añadirle un ’topic’. 9. Clickear sobre el botón de la esquina inferior derecha de la pantalla con el símbolo de ’aceptar’ para crear y registrar el curso.. 4.2.4. Ver una lista de cursos creados Como usuario administrador quiero ver un listado de los cursos creados previamente: 24.

(33) Desarrollo 1. Seleccionar un proveedor de servicios en la página principal de login de la aplicación y clickear sobre el botón ’Sign up’. 2. Hacer login con las credenciales del proveedor de servicios seleccionado. 3. Clickear sobre la pestaña ’Courses’ en la barra de navegación de la aplicación para navegar hacia la página que lista los cursos.. 4.2.5. Crear un set de cursos Como usuario administrador quiero crear un set de cursos con los cursos creados previamente: 1. Seleccionar un proveedor de servicios en la página principal de login de la aplicación y clickear sobre el botón ’Sign up’. 2. Hacer login con las credenciales del proveedor de servicios seleccionado. 3. Clickear sobre la pestaña ’Courses sets’ en la barra de navegación de la aplicación para navegar hacia la página que lista los sets de cursos. 4. Clickear sobre el botón de la esquina inferior derecha de la pantalla con el símbolo ’+’ para navegar hacia la página de creación de sets de cursos. 5. Clickear sobre los cursos que se desean añadir al set de cursos. 6. Clickear sobre el botón de la esquina inferior derecha de la pantalla con el símbolo de ’aceptar’ para crear y registrar el set de cursos.. 4.2.6. Ver una lista de sets de cursos creados Como usuario administrador quiero ver un listado de los sets de cursos creados previamente: 1. Seleccionar un proveedor de servicios en la página principal de login de la aplicación y clickear sobre el botón ’Sign up’. 2. Hacer login con las credenciales del proveedor de servicios seleccionado. 3. Clickear sobre la pestaña ’Courses sets’ en la barra de navegación de la aplicación para navegar hacia la página que lista los sets de cursos.. 4.2.7. Editar un vídeo Como usuario administrador quiero editar un vídeo previamente subido al servidor: 1. Seleccionar un proveedor de servicios en la página principal de login de la aplicación y clickear sobre el botón ’Sign up’. 2. Hacer login con las credenciales del proveedor de servicios seleccionado. 3. Clickear sobre la pestaña ’Videos’ de la barra de navegación de la aplicación para navegar hacia la página que lista los vídeos. 4. Buscar el vídeo que se desea editar y clickear sobre el botón del lápiz de ese vídeo para navegar hacia la página de edición de vídeos. 25.

(34) 4.2. Historias de usuario 5. Modificar los datos actuales del vídeo con los nuevos datos pertinentes(título y/o descripción). 6. Opcionalmente se puede clickear sobre el botón ’Files’ para subir una nueva versión del fichero de vídeo. 7. Clickear sobre el botón de la esquina inferior derecha de la pantalla con el símbolo de ’aceptar’ para editar y registrar los cambios en el vídeo.. 4.2.8. Editar un curso Como usuario administrador quiero editar un curso previamente creado: 1. Seleccionar un proveedor de servicios en la página principal de login de la aplicación y clickear sobre el botón ’Sign up’. 2. Hacer login con las credenciales del proveedor de servicios seleccionado. 3. Clickear sobre la pestaña ’Courses’ de la barra de navegación de la aplicación para navegar hacia la página que lista los cursos. 4. Buscar el curso que se desea editar y clickear sobre el botón del lápiz de ese curso para navegar hacia la página de edición de cursos. 5. Modificar los datos actuales del curso con los nuevos datos pertinentes(título y/o idioma). 6. (Opcional) Modificar los datos de los vídeos del curso(orden, título, tema) en la primera tabla. 7. (Opcional) Eliminar los vídeos del curso haciendo click sobre el botón del cubo de basura de cada vídeo, en la primera tabla. 8. (Opcional) Añadir nuevos vídeos al curso haciendo click sobre los registros de vídeo que se encuentran en la segunda tabla. 9. Clickear sobre el botón de la esquina inferior derecha de la pantalla con el símbolo de ’aceptar’ para editar y registrar los cambios en el curso.. 4.2.9. Editar un set de cursos Como usuario administrador quiero editar un set de cursos previamente creado: 1. Seleccionar un proveedor de servicios en la página principal de login de la aplicación y clickear sobre el botón ’Sign up’. 2. Hacer login con las credenciales del proveedor de servicios seleccionado. 3. Clickear sobre la pestaña ’Courses sets’ en la barra de navegación de la aplicación para navegar hacia la página que lista los sets de cursos. 4. Buscar el set de cursos que se desea editar y clickear sobre el botón del lápiz de ese set para navegar hacia la página de edición de set de cursos. 5. (Opcional) Eliminar los cursos del set haciendo click sobre el botón del cubo de basura de cada curso, en la primera tabla. 26.

(35) Desarrollo 6. (Opcional) Añadir nuevos cursos al set haciendo click sobre los registros de curso que se encuentran en la segunda tabla. 7. Clickear sobre el botón de la esquina inferior derecha de la pantalla con el símbolo de ’aceptar’ para editar y registrar los cambios en el set de cursos.. 4.3.. Navegación. En esta sección se muestra el mapa de navegación de la aplicación TechPeopleCare Assets siguiendo la metodología Restful, así como los tipos de peticiones u operaciones web que acepta cada ruta.. Figura 4.2: Mapa de navegación de la aplicación siguiendo la metodología Restful. 4.3.1. Home: / La ruta raíz ’/’ redirige automáticamente a la ruta de ’/login’ cuando se intenta acceder a ella. Únicamente acepta peticiones GET.. 4.3.2. Login: /login La ruta de ’/login’ acepta peticiones GET para cargar la página de entrada a la aplicación, la cual muestra dos opciones para hacer login en la aplicación mediante una cuenta de GitHub o una cuenta de GitLab. 27.

(36) 4.3. Navegación. Figura 4.3: Página de inicio y login de la aplicación. 4.3.3. Videos: /videos La ruta de ’/videos’ acepta peticiones GET para cargar la página de listado de vídeos disponibles, y acepta peticiones POST con formularios para crear un recurso Video y subir ficheros al servidor. De esta ruta caen otras subrutas para mostrar los formularios de edición y creación de vídeos y realizar las operaciones CRUD.. Figura 4.4: Página de listado de vídeos. 4.3.4. Videos: /videos/new La ruta de ’/videos/new’ acepta peticiones GET para cargar la página de subida de vídeos. 28.

(37) Desarrollo. Figura 4.5: Página de subida de ficheros de vídeo. 4.3.5. Videos: /videos/{id}/edit La ruta de ’/videos/{id}/edit’ acepta peticiones GET para cargar la página de edición de un vídeo.. Figura 4.6: Página de edición de un vídeo. 4.3.6. Videos: /videos/{id} La ruta de ’/videos/{id}’ acepta peticiones PUT con formularios para modificar los datos de un recurso de vídeo. Se ha dejado la posibilidad de implementar las peticiones DELETE para eliminar dicho recurso de vídeo en un futuro. 29.

(38) 4.3. Navegación. 4.3.7. Cursos: /courses La ruta de ’/courses’ acepta peticiones GET para cargar la página de listado de cursos disponibles, y acepta peticiones POST con formularios para crear un recurso Course y registrarlo en el sistema. De esta ruta caen otras subrutas para mostrar los formularios de edición y creación de cursos y realizar las operaciones CRUD.. Figura 4.7: Página de listado de cursos. 4.3.8. Cursos: /courses/new La ruta de ’/courses/new’ acepta peticiones GET para cargar la página de creación de cursos.. Figura 4.8: Página de creación de un curso 30.

(39) Desarrollo. 4.3.9. Cursos: /courses/{id}/edit La ruta de ’/courses/{id}/edit’ acepta peticiones GET para cargar la página de edición de un curso.. Figura 4.9: Página de edición de un curso. 4.3.10. Cursos: /courses/{id} La ruta de ’/courses/{id}’ acepta peticiones PUT con formularios para modificar los datos de un recurso de curso. Se ha dejado la posibilidad de implementar las peticiones DELETE para eliminar dicho recurso de curso en un futuro.. 4.3.11. Set de cursos: /sets La ruta de ’/sets’ acepta peticiones GET para cargar la página de listado de sets de cursos disponibles, y acepta peticiones POST con formularios para crear un recurso Set y registrarlo en el sistema. De esta ruta caen otras subrutas para mostrar los formularios de edición y creación de sets de cursos y realizar las operaciones CRUD. 31.

(40) 4.3. Navegación. Figura 4.10: Página de listado de sets. 4.3.12. Sets de cursos: /sets/new La ruta de ’/sets/new’ acepta peticiones GET para cargar la página de creación de sets de cursos.. Figura 4.11: Página de creación de un set de cursos. 4.3.13. Sets de cursos: /sets/{id}/edit La ruta de ’/sets/{id}/edit’ acepta peticiones GET para cargar la página de edición de un set de cursos. 32.

(41) Desarrollo. Figura 4.12: Página de edición de un set de cursos. 4.3.14. Sets de cursos: /sets/{id} La ruta de ’/sets/{id}’ acepta peticiones PUT con formularios para modificar los datos de un recurso de set de cursos. Se ha dejado la posibilidad de implementar las peticiones DELETE para eliminar dicho recurso de set de cursos en un futuro.. 33.

(42)

(43) Capítulo 5. Resultados y conclusiones Durante el desarrollo de la aplicación web TechPeopleCare Assets se han podido lograr y alcanzar la mayoría de los objetivos planteados hasta la fecha, salvo uno pocos objetivos o mejor dicho mejoras de la aplicación que surgieron con posterioridad y que se pasarán a explicar en la sección de Anexo. En los inicios del proyecto se dedicó un total de 50 horas al autoaprendizaje del lenguaje de programación Elixir y el framework Phoenix. Tras la primera etapa de aprendizaje se pasó a la etapa de desarrollo, acumulando un total de 245 horas o más de programación de la aplicación, el cuál supuso un proceso largo y arduo debido al desconocimiento inicial de Elixir y Phoenix, a pesar de la etapa de autoaprendizaje. Finalmente, se establecieron 50 horas para documentar el desarrollo de la aplicación TechPeopleCare Assets y explicar en profundidad su funcionamiento y arquitectura, definiendo cada una de las partes que lo componen y las tecnologías utilizadas en su desarrollo. Como persona física y desarrollador de TechPeopleCare Assets, debo decir que el desarrollo de este proyecto me ha ayudado no sólo a aprender nuevos lenguajes de programación y frameworks, sino a ganar una confianza en mí mismo que perdí hace tiempo, me siento realizado con mi trabajo ya que ayudará a mucha gente, pero sé que puedo hacerlo mejor y puedo mejorar, de modo que seguiré este camino de autoaprendizaje continuo y mantendré mi labor como desarrollador en futuros proyectos. Posiblemente todos los conocimientos adquiridos durante mis años de facultad hayan sido los que me han ayudado a sentar las bases sobre las que se cimienta esta aplicación.. 5.1.. Objetivos cumplidos. Como se estableció al inicio del proyecto, los objetivos a cumplir han sido alcanzados satisfactoriamente en su mayoría, exceptuando unas pocas modificaciones y mejoras pendientes surgidas con posterioridad que, como se ha explicado anteriormente, se pasarán a explicar en la sección de Anexo. 35.

(44) 5.1. Objetivos cumplidos A continuación se vuelve a mostrar la lista de objetivos cumplimentados y logrados hasta la fecha: Aprender sobre el lenguaje de programación Elixir. Aprender sobre el framework de programación Phoenix. Crear un proyecto de Phoenix. Implementar la subida de uno o varios ficheros de vídeo a un servidor remoto. Implementar la visualización de la lista de vídeos disponibles en el servidor remoto, con posibilidad de poder filtrarlos, ordenarlos y buscarlos. Implementar la edición de un vídeo previamente subido. Implementar la creación y montaje de un curso mediante la selección de los vídeos disponibles en el servidor remoto. Implementar la visualización de la lista de cursos creados, con posibilidad de poder filtrarlos, ordenarlos y buscarlos. Implementar la edición de un curso previamente creado, permitiendo añadir, eliminar y ordenar vídeos. Implementar la creación y montaje de un set de cursos mediante la selección de cursos previamente creados. Implementar la visualización de la lista de sets de cursos creados, con posibilidad de poder filtrarlos, ordenarlos y buscarlos. Implementar la edición de un set de cursos previamente creado, permitiendo añadir o eliminar cursos.. 36.

(45) Bibliografía [1] R.C.Martin, Clean Code: A Handbook of Agile Software Craftsmanship, 1.ª ed. USA: Prentice Hall PTR, 2008, ISBN: 0132350882. [2] R.C.Martin, Agile Software Development: Principles, Patterns and Practices, 1.ª ed. Pearson, 2002, ISBN: 978-0135974445. [3] A. Syromiatnikov y D. Weyns, A Journey through the Land of Model-View-Design Patterns, abr. de 2014, págs. 21-30, ISBN : 978-1-4799-3412-6. [4] Elixir Documentation, [Online], Available: https://elixir-lang.org/docs. html, [5] Phoenix Framework Documentation, [Online], Available: https://hexdocs.pm/ phoenix/Phoenix.html [6] Ecto Documentation, [Online], Available: https://hexdocs.pm/ecto/Ecto. html [7] jQuery API Documentation, [Online], Available: https://api.jquery.com/ [8] Datatables Plugin Documentation, [Online], Available: https://datatables. net/manual/index [9] Materialize Framework //materializecss.com/. Documentation,. [Online],. Available:. https:. [10] Material Design Icons Documentation, [Online], Available: https://material. io/resources/icons/?style=baseline. 37.

(46)

(47) Anexo .1.. Historias de usuario adicionales. En esta sección del anexo se pasará a explicar algunas funcionalidades u objetivos extras que no se han podido implementar por falta de tiempo y que han surgido como posibles opciones de mejora para la aplicación TechPeopleCare Assets.. .1.1. Generar un JSON por cada set de cursos creado A la hora de crear un set de cursos o cuando se cree un curso (el cual genera automáticamente un set de un solo curso), debe poder generarse un archivo JSON que contenga toda la información del set o curso en cuestión. La ruta para acceder o descargar los archivos JSON será /json/{codigo}.json, donde codigo será el código de acceso al set de cursos cuyo archivo JSON se desea obtener. Un ejemplo sería que si se desea obtener el JSON del set de cursos identificado con el código ab5cd, la ruta de descarga del archivo JSON sería /json/ab5cd.json.. .1.2. Estandarizar los idiomas de los cursos Actualmente, a la hora de montar o crear un curso, el usuario puede introducir manualmente el idioma del curso, siendo vulnerable a erratas y errores de usuario a la hora de introducir texto. Como opción alternativa de mejora, se ha planteado la posibilidad de cambiar ese cuadro de texto para introducir el idioma por una lista desplegable, la cuál dará al usuario una cantidad limitada y controlada de idiomas en los que se puede desarrollar el curso, evitando así el fallo humano. Derivado de esto último, se ha planteado la opción de estandarizar los idiomas, y en vez de guardar en la base de datos idiomas completos como sería por ejemplo ’Español’, guardar un código estandarizado del idioma como por ejemplo ’es’, evitando utilizar nomenclaturas muy variadas.. .1.3. Inhabilitar un set de cursos Otra mejora que se plantea es la de poder inhabilitar un set de cursos para evitar que los usuarios de TechPeopleCare Android App tengan acceso al mismo. La opción de inhabilitar no consistiría en un borrado físico de los datos en la base de datos, sino un borrado lógico en la base de datos, un simple campo booleano 39.

(48) .1. Historias de usuario adicionales que permita hacer visible o invisible un set de cursos de cara a los usuarios de TechPeopleCare Android App.. .1.4. Mostrar tablero con set de cursos visitados por la aplicación Una mejora más extensa y que requiere de una cierta conexión y sincronización con la aplicación TechPeopleCare Android App sería la de implementar un Dashboard o tablero de administración. Este Dashboard o tablero de administración recogería datos estadísticos tales como qué cursos se han visitado a través de la aplicación TechPeopleCare Android App, mostrados en un datatable o similar.. .1.5. Mostrar tablero con accesos realizados a los sets de cursos Al igual que en el caso anterior, consistiría en tener acceso a un Dashboard o tablero de administración que permita visualizar cuántos accesos se han realizado a cada set de cursos a través de la aplicación TechPeopleCare Android App.. .1.6. Mostrar tablero con estadísticas sobre los vídeos Nuevamente al igual que en los dos casos anteriores, la posibilidad de acceder a un Dashboard o tablero de administración que en este caso permita ver estadísticos sobre los vídeos, como por ejemplo el número de visitas y visualizaciones que ha tenido un vídeo desde la aplicación TechPeopleCare Android App.. 40.

(49) Este documento esta firmado por Firmante Fecha/Hora Emisor del Certificado Numero de Serie Metodo. CN=tfgm.fi.upm.es, OU=CCFI, O=Facultad de Informatica - UPM, C=ES Fri Jun 05 10:52:58 CEST 2020 [email protected], CN=CA Facultad de Informatica, O=Facultad de Informatica - UPM, C=ES 630 urn:adobe.com:Adobe.PPKLite:adbe.pkcs7.sha1 (Adobe Signature).

(50)