Documento del proyecto

innosoft-calendar

• Grupo 2
• Curso escolar: 2021/2022
• Asignatura: Evolución y gestión de la configuración

Miembros del equipo (en orden alfabético según apellido): escala de 1 al 10 con el esfuerzo hecho en el proyecto (10 mayor implicación, 1 menor implicación)

Miembro	Implicación
Atienza Carretero, Carlos	10
Galera Barrera, Tomás	10
Pérez Ruiz, Lucas	10
Rondán Domínguez, Borja	10
Santisteban Corchos, Alejandro	10

Enlaces de interés:

• Repositorio de código
• Repositorio de la API
• Sistema desplegado (APK)

Indicadores del proyecto

Miembro del equipo	Horas	Commits	LoC	Test	Issues	Incremento
Atienza Carretero, Carlos	46	9	1264	5	7	Creación de la sección de Inicio y Ponentes de la APP móvil.
Galera Barrera, Tomás	46	10	1273	10	4	Creación de la Sección de Sobre nosotros de la APP móvil.
Pérez Ruiz, Lucas	46	5	715	5	3	Creación del backend de la sección del Chat y el menú desplegable de la APP.
Rondán Domínguez, Borja	47	18	1281	5	5	Creación de la Sección de Noticias y un socket para el Chat de la APP.
Santisteban Corchos, Alejandro	49	91	2671	72	11	Creación de la API y de la sección Programa de la APP.
TOTAL	234	133	6934	97	28	=====================================

NOTA: Se han contado las líneas de código de forma aproximada, ya que al trabajar con node e instalar dependencias se crean muchas líneas extras en los archivos package.json y package-lock.json. Por tanto, se han contado únicamente las líneas creadas por nosotros mismos descartando posibles duplicaciones o líneas generadas al instalar dependencias al proyecto. Se pueden consultar las evidencias de las líneas de código, así como de los commits y los tests a través del apartado insights del repositorio de github:

InnosoftAPP Contributors

InnosoftAPI Contributors

Adicionalmente, se pueden ver el total de issues creadas en el siguiente enlace:

Innosoft Issues

Integración con otros equipos

No procede.

Resumen ejecutivo

Este proyecto consiste en una aplicación móvil para iOS y Android donde los usuarios pueden acceder a toda la información relevante sobre las Jornadas Innosoft, obteniendo los datos de su página web (hecha con Wordpress). La app dispone de un menú lateral desplegable que consta de diversas secciones:

• Inicio: Esta es la sección principal, en ella se explica la funcionalidad de la aplicación a los usuarios, con una interfaz amigable. Además, en caso de que fuese necesario, los organizadores tienen la posibilidad de modificar esta vista y publicar mensajes de especial importancia.

• Noticias: En esta sección aparecen todas las noticias acerca de las jornadas que hayan sido publicadas en la web.

• Programa: Aquí aparece un calendario con toda la programación de las jornadas y sus detalles. Podemos encontrar tanto las ponencias que se celebran este año, como las de ediciones anteriores. Para cada ponencia que haya programada, se puede ver la fecha de celebración, la sala de la ETSII en la que se celebra y el ponente.

• Ponentes: En esta sección aparecen todos los ponentes de las jornadas y detalles acerca de su vida profesional.

• Sobre nosotros: Aquí podemos acceder a toda la información sobre el equipo que organiza las Jornadas Innosoft. También nos permite contactar con ellos por los distintos canales y redes sociales, y así estar al día de las novedades. Además, contiene una subsección donde aparecen detalles sobre como llegar al lugar de celebración de las Jornadas, mostrando las líneas y paradas de los autobuses de TUSSAM, del Consorcio de transporte metropolitano, de los trenes cercanías, así como las estaciones de SEVICI cercanas.

• Chat: La aplicación también dispone de un chat, donde los usuarios solo necesitarán introducir un alias, sin necesidad de iniciar sesión. La finalidad de este chat es facilitar a los ponentes la comunicación con el público durante sus ponencias, pudiendo realizar consultas a los oyentes y fomentando el debate. Para llevar a cabo esta tarea, se ha elaborado un sistema de salas donde el usuario, tras introducir su alias, deberá insertar inmediatamente después un código (cedido por el ponente), para conectarse a la sala correspondiente. Además, se dispone de una sala general, donde los usuarios podrán comunicarse entre sí.

Descripción del sistema

La aplicación de Innosoft tiene como finalidad enriquecer la experiencia de los asistentes a las Jornadas, facilitando su acceso a la información sobre las estas.

El frontend de la app está construido con React Native (version 0.64.3) y puede ejecutarse tanto en iOS como en Android.

El backend de la aplicación consta de una API RESTful que conecta con la base de datos de la web de Wordpress de Innosoft, y ha sido desarrollada con el framework Express.js de Node, siguiendo la especificación OpenApi 3.0. Además, utiliza tecnología WebSocket, destinado principalmente para el chat de la aplicación donde se intercambian mensajes a tiempo real.

Se utiliza una base de datos MySQL para almacenar los datos de la Web de Innosoft y una base de datos en MongoDB para almacenar las conversaciones del chat.

A continuación se muestra un esquema sobre la arquitectura de la aplicación:

Como podemos ver, todo el entorno de backend está desplegado en un contenedor de Docker.

A continuación, se muestra la estructura de carpetas del código fuente de React:

├── assets
├── components
├── MyDrawers
└── views

• assets: En esta carpeta se almacenan todos los recursos estáticos que se utilizan en la app. Principalmente imágenes, logos e iconos. Está dividido en sub carpetas, una por cada sección que aparece en el menú de la App.

• components: Aquí se almacenan componentes de React que son usados en la App.

• MyDrawers: Almacena los componentes relacionados con el menú de la aplicación. Si se desea añadir una nueva sección al menú, se debe configurar aquí.

• views: Aquí se recojen todas las vistas de la App.

Visión global del proceso de desarrollo

En este apartado daremos una visión global de las distintas herramientas y procesos que se han seguido durante el desarrollo de todo el proyecto. Las herramientas usadas en el proyecto y en que parte del desarrollo han afectado:

• Para la gestión del versionado se ha usado la herramienta de Github donde pertenecemos a una organización en la que se encuentran los integrantes de los distintos equipos de nuestro grupo. Dentro de esta organización dividimos el trabajo en dos repositorios distintos cada uno encargado de gestionar el versionado de los distintos servicios del sistema explicado anteriormente. El primer repositorio llamado InnosoftApi donde se encuentra la aplicación Node que engloba la API REST, con la cual se obtiene información de las jornadas de la base de datos, y el servicio de WebSokect, con el que se gestiona las comunicaciones de la aplicación de chat. El segundo repositorio llamado InnosoftApp contiene los archivos de la aplicación móvil junto con todo el resto de los documentos de gestión del proyecto en su sección de Wiki. En el repositorio principal se ha seguido un flujo de trabajo basado en GitFlow contando con 2 ramas principales main y develop, donden se encuentran las últimas versiones estables de producción y desarrollo respectivamente. Además, tendremos las ramas secundarias feature/featureName, para la implementación de la nueva funcionalidad, y release/releaseVersion, gestionar los conflictos generados de hacer merge de las distintas ramas.

• Para el desarrollo se ha hecho uso de las herramientas de Visual Studio Code como editor de código. Dado que se ha decidido como lenguaje JavaScript se ha hecho uso del entorno de ejecución Node.js con la infraestructura web de Express para la API y el framework Expo para el desarrollo de la aplicación móvil.

• Para el despliegue se ha utilizado Docker para la automatización de la infraestructura de la API y las bases de datos. En el caso de la aplicación móvil se ha hecho uso de las propias herramientas de Expo para realizar las builds de los distintos sistemas operativos.

En el apartado especifico del Entorno de desarrollo se explicará más específicamente su uso, versiones usadas y como instalarlas correctamente.

En la gestión de un nuevo cambio se seguirán los siguientes pasos para el proceso:

1. Una vez detectado el problema en la aplicación y siguiendo las instrucciones del CONTRIBUTING.MD se abrirá una nueva Issue en el repositorio y se asignará al proyecto de GitHub que se encuentra en la organización, quedando localizado en la columna To Do del tablero de este.

2. En la próxima reunión que se haga, posterior a la creación de una nueva Issue, se discutirán entre los miembros del grupo y se asignara a un miembro que haya tenido experiencia en esa funcionalidad o este libre de trabajo en ese momento.

3. De manera previa a comenzar a desarrollar dicha Issue la persona asignada deberá actualizar su estado en el proyecto, colocándola en la columna In progress y creará su rama correspondiente siguiendo la estrategia de ramificación acordada por el grupo.

4. Llegados a este punto el miembro se clonará la rama recién creada y realizará las modificaciones pertinentes en la funcionalidad para satisfacer la Issue. Estos cambios serán subidos mediante un commit siguiendo las reglas de la especificación de Conventional Commits.

5. De nuevo en GitHub el encargado realizara la pull request de la rama con los nuevos cambios a develop y asignara como reviewer a otro miembro del grupo para que verifique todos los cambios.

6. Si la persona encargada de la revisión no detecta ningún problema, se aceptarán los cambios y se mergearán los cambios a la rama develop. En caso contrario, se resolverán los problemas en la misma pull request antes de confirmar los cambios.

7. Por ultimo se cierra la Issue con un comentario explicativo en caso de necesitarse y registrando el commit donde esta ha sido resuelta, haciendo que automáticamente pase a la columna de Done en el proyecto.

Todos los pasos se explicarán nuevamente en detalle, paso por paso, usando el ejemplo de la Issue: "Los usuarios de IOS no pueden volver hacia atrás en la aplicación #32" en el punto de Ejercicio de propuesta de cambio.

Entorno de desarrollo

Nuestro proyecto ha consistido en el desarrollo de una aplicación móvil que se basa en la tecnología React Native. Junto a esto, también se ha desarrollado una API de apoyo, usando la herramienta OAS-Generator y el framework Express.js , de la cual se obtiene toda la información que se usa en la aplicación móvil, además de que hace uso de Sockets para permitir la comunicación en tiempo real entre personas que se encuentran en el chat. Es por lo cual que es necesario la instalación de las siguientes herramientas para que el proyecto funcione de manera correcta:

1. Node.js. Se ha usado la versión 16.13.0. Es el entorno de tiempo de ejecución JavaScript que se ha usado para ejecutar el código desarrollado.

2. Expo+ React Native. Se ha usado la versión 44.0.0 de Expo. Cuyo fin es permitirnos ejecutar localmente la aplicación para así divisar los cambios e implementaciones de manera más rápida y cómoda que se vayan realizando localmente. Se ha usado su CLI y el comando para su instalación es npm install --global expo-cli.
   Por otra parte, se ha utilizado junto a React Native ya que es una librería JavaScript que nos permite crear aplicaciones compatibles tanto en Android como iOS, en concreto se ha utilizado la versión 0.64.3.

3. Visual Studio Code. Se ha usado la versión 1.63.2. Se recomienda que para trabajar con el código de la aplicación se utilice este editor de código, dado que a partir de las extensiones que tiene, nos facilita la construcción del código.

4. Docker. Se ha utilizado la versión 20.10.11. A través de Docker se nos permite automatizar el despliegue de aplicaciones creando contenedores, en nuestro proyecto se ha usado para poder desplegar mediante contenedores los servicios que ofrece la API (obtención de ponentes, noticias, eventos y comunicación en tiempo real en el chat) desarrollada, para poder hacer uso de los servicios de esta de manera local, aunque posteriormente se desplegó el propio Docker de la API en un servidor Azure que poseía un compañero.

---

Así que, definido el entorno de desarrollo necesario para nuestro proyecto, se realizará una guía para arrancar el proyecto.

1. Una vez que se han instalado las versiones especificadas para cada herramienta, abrimos Visual Studio Code.

   • Importamos el proyecto de la aplicación móvil mediante: git clone https://github.com/Pingu-Developers/InnosoftApp.git
   • Ejecutamos el siguiente comando en la terminal de Visual: npm install –legacy-peer-deps

2. En este paso tendremos que desplegar la API de manera local haciendo uso del siguiente fichero docker-compose.yml para crear el contenedor Docker.

version: '3.1'

services:
  db:
    container_name: mysql_db
    image: percona
    restart: always
    environment:
      - MYSQL_ROOT_PASSWORD=innosoft
    ports:
      - "3306:3306"

  innoChatDb:
    container_name: innoChatDb
    image: mongo
    volumes:
      - 'innoChatDb:/data/db'
    restart: 'unless-stopped'
    ports:
      - '27017:27017'

  phpmyadmin:
    container_name: phpmyadmin
    image: phpmyadmin
    restart: 'unless-stopped'
    ports:
      - '8080:80'
    environment:
      - PMA_ARBITRARY=1

  innoApi:
    container_name: innoApi
    image: pingudevelop/innosoft-api:develop
    restart: 'unless-stopped'
    ports:
      - '5000:80'
      - '5001:5001'
    environment:
        - DB_HOST=mysql_db
        - DB_PORT=3306
        - DB_USER=root
        - DB_PASSWORD=innosoft
        - DB_NAME=innosoft
        - MONGO_HOST=innoChatDb
        - MONGO_PORT=27017
        - MONGO_DBNAME=innoChat
        - SOCKET_PORT=5001
volumes:
  innoChatDb: null

• Una vez tenemos el siguiente fichero ejecutamos docker-compose up para crear y ejecutar los contenedores. Así creamos los contenedores Docker a partir del archivo docker-compose.yaml dado y se tendrá desplegado el contenedor de manera local. Más información sobre el despliegue de la API puede encontrarse en la documentación
• Ejecutado los contenedores si queremos tener la base de datos poblada, se debe importar la base datos que se encuentra en el proyecto de la API a través del phpMyAdmin.
• Modificaremos el archivo .env del proyecto de la aplicación móvil así que cambiaremos el valor de las variables API_HOST y API_PORT por la IP de nuestro ordenador y por el puerto 5000 respectivamente. También deberemos asegurarnos de crear una variable denominada SOCKET_PORT y que tome el valor 5001.

3. Descargamos la aplicación Expo Go en nuestro dispositivo móvil ANDROID o iOS.

4. Ahora procedemos a arrancar el proyecto mediante el comando npm run start y se nos abrirá una pestaña en el navegador en la cual se muestra un código QR, que escanearemos con la cámara de nuestro móvil y posteriormente se abrirá la aplicación en el dispositvo.

5. En este punto ya tendremos todo lo necesario para trabajar en nuestro proyecto y observar los cambios que realicemos en el código directamente en nuestro dispositivo.

Ejercicio de propuesta de cambio

Para cualquier propuesta de cambio, cualquier miembro del equipo deberá seguir siempre el siguiente proceso:

En primer lugar, se llevará a cabo la creación de una incidencia que describa el problema o cambio propuesto siguiendo la plantilla de issues que se puede encontrar en la raíz del proyecto (archivo CONTRIBUTING.MD).

Para explicar el proceso, se utilizará una issue creada durante el desarrollo del proyecto:

Cuando cualquier miembro cree una issue a través del sistema que ofrece el propio repositorio de Github. Debe asegurarse de establecer un título descriptivo y una descripción detallada del cambio que va a solucionar. Además, debe establecer las labels con el tipo de issue y la prioridad de esta tal y como se explica en las plantillas. Por último, el creador de la issue deberá asignarse la issue para que el resto del equipo sepa de quien se está encargando de ella.

Tras la creación quedará visible en la columna ToDo de nuestro tablero Kanban provisto por GitHub, pudiendo así cualquier miembro ver en qué estado se encuentra, así como su contenido.

Posteriormente, y de manera previa a comenzar a desarrollar dicha issue la persona asignada deberá actualizar su estado en el tablero Kaban, colocándola en la columna In progress.

Siguiendo la estrategia de ramificación explicada en apartados anteriores, se deberá crear una rama a partir de develop para trabajar en los cambios que se hayan planteado en la issue. Esta se creará a través de la propia interfaz del repositorio de GitHub:

Una vez realizado este proceso, a través de la terminal se clonará el repositorio utilizando el comando:

git clone https://github.com/Pingu-Developers/InnosoftApp.git

Si ya se tuviese una versión anterior, se podría optar por borrarla si no es necesaria y clonarse de nuevo el repositorio o bien en la versión en la que nos encontremos utilizar el comando:

git fetch

De esta forma se actualizará y descargará la nueva rama creada.

Tras cualquiera de los pasos anteriores, mediante la terminal nos situaremos en la rama recién creada mediante el comando:

git checkout feature/SwipeBack

Con todos los pasos anteriores realizados, lo siguiente es abrir la herramienta Visual Studio Code y comenzar a desarrollar e implementar los nuevos cambios propuestos. De manera previa, se deberá desplegar en local la aplicación mediante la utilización del comando:

npm run start

Además para ello también será necesario utilizar la APP “ExpoGo” en el móvil para poder tener una versión local de la APP móvil. De esta forma, se puede tratar de reproducir el error o ir consultando los cambios que se van programando antes de subirlo al repositorio.

Si la issue requiriese de la creación de tests, deberán de crearse de forma previa a la subida a la rama para poder comprobar y solventar cualquier error no tratado o fallo que se haya podido producir. Se introducirá el siguiente comando en la terminal para correr todos los tests:

npm run test:unit

Finalmente, tras la realización de todo lo anterior, mediante la terminal subiremos los archivos al staging, los comitearemos y subiremos a la rama que creamos antes:

git commit -am “feat:SwipeBack Button implemente”

git push origin feature/SwipeBack

Es importante seguir el estándar definido de los commits, además así el CI podrá incluirlo en el Changelog que autogenera en cada release.

Una vez subido a la rama, se deberá crear una pull request para mergear desde la rama creada a develop a través de GitHub donde se indique en el título el propósito de esta. Además, es importante dejar asignado a un reviewer (cualquier otro miembro del grupo) para que revise los cambios realizados, así como para verificar que todo funciona bien antes de mergear.

Si no hay ningún problema, se aceptarán los cambios y se mergearán los cambios a la rama develop. En caso contrario, se resolverán los problemas en la misma pull request antes de confirmar los cambios.

Para terminar, se deberá modificar la issue y mover a la columna Done, y además escribir un comentario en la issue donde quede registrado el commit que la resolvió, cerrándola al terminar de escribir dicho comentario. Un ejemplo se puede apreciar en la siguiente imagen:

Conclusiones y trabajo futuro

Tras finalizar el trabajo realizado, se ha logrado aprender y comprender un nuevo framework, React Native, para el desarrollo por primera vez de una aplicación móvil. Durante todo el proceso de desarrollo, se realizaron varias investigaciones en Internet para conocer las mejoras formas de trabajo para el desarrollo móvil, así como la utilización de aplicaciones que permitiesen un despliegue local en nuestros propios dispositivos móviles y que nos permitiesen ver de forma dinámica los cambios que íbamos realizando (ExpoGo).

Además, se han trabajado con diversas tecnologías como Docker, Vagrant, GitHub Actions… las cuales nos han permitido alcanzar un resultado mucho mejor. Dado que conocer y aprender estas tecnologías punteras nos ha permitido obtener una mejor formación como Ingenieros del Software. En concreto Docker, nos ha permitido aislar y automatizar el despliegue de la API, de manera que de forma rápida teníamos todo lo necesario para trabajar con los datos de la base de datos de Innosoft. Por otra parte, mediante GitHub Actions hemos podido automatizar nuestro sistema de integración y despliegue continuo, ya que en cada push a la rama develop se buildeaba la aplicación para cada sistema operativo móvil y se realizaba la release con las mejoras implementadas.

Como posibles mejoras de la aplicación móvil, se podrían añadir nuevos apartados que contengan información que aparezca en la web pero que no aparezca actualmente en la app móvil (lo cual podría suponer también realizar modificaciones en la API implementada para así poder consumir dicha información).

Otra posible mejora, sería dotar al Chat móvil de más funciones, como pueden ser:

• Crear salas especificas para cada ponencia o taller de innosoft, de manera que sea independiente del chat general y los asistentes pueden comunicarse de manera más fluida mediante esa sala concreta.
• Establecer un sistema de login que permita la creación de un usuario, de modo que cada persona que utilice el chat pueda modificar su perfil, como por ejemplo modificar su foto de perfil, modificar su nombre…
• Mejorar la apariencia de la sala del chat, como por ejemplo que cuando una misma persona mande varios mensajes aparezcan en el mismo bocadillo y no en varios separados, también se podría añadir que se pudieran mandar imágenes, vídeos o notas de audio.

Así que, de manera general, la asignatura nos ha resultado de gran interés debido a que se nos ha formado en tecnologías que usan hoy en día en concreto para CI/CD como las mencionadas anteriormente. Con respecto al trabajo en grupo, ha sido excelente dado que nos conocíamos previamente y esto ha ayudado a tener una clara y correcta comunicación y resolución de los problemas que han aparecido, conduciendo todo esto al desarrollo con éxito del proyecto. Por último, cabe destacar que el hecho de poder realizar un proyecto que pueda aportar para futuras jornadas Innosoft también nos resulta satisfactorio como alumnos de la asignatura, dado que con esta aplicación pretendemos ayudar a que las personas que asistan o pretendan asistir puedan acceder a la información sobre las jornadas de manera sencilla y rápida, además de poder comunicarse con el chat desarrollado