PDF Grado en Ingeniería de Tecnologías de Telecomunicación - UCLM

Actualmente existen diversas aplicaciones para prevenir la obesidad infantil, pero ninguna permite monitorizar el crecimiento de los niños combinado con completar desafíos para animar a los más pequeños a llevar una vida más saludable. En este trabajo fin de carrera se propone desarrollar una aplicación móvil que ayude al usuario a seguir el crecimiento de los niños.

MEMORIA

Motivación

El método utilizado para tratar la obesidad infantil se basa básicamente en la combinación de restricción dietética con aumento de actividad física. El cambio de hábitos mediante la terapia conductual es un componente esencial en el tratamiento de los niños con sobrepeso.

Objetivos

Cuando el niño tiene menos de 5 años, son los padres quienes deben liderar el tratamiento, es decir, responder por el niño de todo lo que interesa a la terapia. Sólo a partir de los 9 o 10 años el niño tendrá un mayor grado de responsabilidad y podrá responder al tratamiento con casi total libertad [4].

Fases del desarrollo

Luego, la API se implementará en producción a través de la plataforma Heroku, accesible a través del dominio https://healtyle.herokuapp.com/. En este paso, se realizan pruebas funcionales de la aplicación a través de Android Studio.

Estructura del proyecto

Desarrollo de aplicaciones: describe el desarrollo reciente y de front-end realizado para crear la aplicación. Conclusiones y trabajo futuro: Se presentan las conclusiones obtenidas durante la realización de este proyecto y las posibles mejoras en la aplicación.

Aplicaciones similares

Growin
Esporti Family
Tabla comparativa
Conclusiones del análisis

Esta iniciativa cuenta con la aprobación de la Asociación Española de Pediatría (AEP) y el apoyo de los pediatras de atención primaria. La aplicación es gratuita, pero también incluye suscripciones premium desde 8€/mes según la opción elegida.

Definición y estructura

Pantalla de inicio de sesión
Pantalla de registro
Pantalla de inicio
Pantalla de retos
Pantalla de dietas
Pantalla menú principal

Botón Desafíos: Segundo botón en el pie de página. Al presionarlo, aparecerá la vista de la pantalla de desafío. Aparece encima de cada una de las pantallas anteriores excepto la pantalla de inicio de sesión y registro.

Conceptualización

Control y gestión del proyecto

Control de versiones
Gestión de proyectos

Este capítulo describe todas las tecnologías y herramientas necesarias para monitorear, administrar, diseñar, desarrollar e implementar la aplicación. Para ello se utiliza esta herramienta que traduce cada uno de estos componentes del desarrollo en tareas organizadas, permitiendo controlar el desarrollo realizado, el desarrollo en curso y el desarrollo aún por realizar.

Diseño de la experiencia del usuario/interfaz del usuario (UX/UI)

Diseño UX
Diseño UI

Estructura: El diseño debe basarse en patrones claros y consistentes, que sean claros y reconocibles para los usuarios, uniendo cosas relacionadas y separando cosas no relacionadas. Visibilidad: El diseño debe hacer visibles todas las opciones y materiales necesarios para una determinada tarea, sin distraer al usuario con información innecesaria o innecesaria.

Herramientas de desarrollo

Como se ve, la pila MERN es excelente para desarrollar una aplicación web, pero el objetivo de este proyecto es desarrollar una aplicación móvil, por lo tanto, la aplicación web debe convertirse en una aplicación móvil. Ionic es una herramienta gratuita desarrollada bajo licencia de código abierto que permite el desarrollo de aplicaciones híbridas multiplataforma basadas en HTML5, CSS y JS.

Arquitectura MERN

MongoBD es la base de datos encargada de almacenar los datos manejados en el front-end. Se accede a esta base de datos mediante API, por lo que no se puede acceder a ella directamente desde la interfaz.

Servidor y despliegue

Express y Node.Js se basan en proporcionar las funciones necesarias para crear la API que utiliza el front-end para mostrar los datos provenientes de la base de datos. MongoDB Atlas es un servicio de base de datos basado en la nube totalmente administrado que aloja bases de datos MongoDB.

Análisis del sistema

Este capítulo explica el análisis del sistema, el diseño técnico y el diseño de la interfaz de usuario de la aplicación.

Análisis de requisitos

Casos de uso

El usuario podrá ver el peso según la edad y la altura según la edad del niño o niña. El usuario podrá comprar nuevos desafíos si tiene suficientes estrellas para desbloquear ese desafío. El usuario puede comprar un avatar si tiene suficientes estrellas para comprarlo.

Diseño de la interfaz de usuario

Pantalla de inicio de sesión
Pantalla de contraseña olvidada
Pantalla de registro
Pantalla de inicio
Pantalla de datos del perfil
Pantalla de IMC
Pantalla de control de peso
Pantalla de actividades
Pantalla de recomendaciones
Pantalla del menú

Después de agregar al niño y completar su información, aparece la pantalla inicial de la aplicación en la Figura 4.10. Al hacer clic en el ícono de menú, aparece el modo avatar (primera imagen en la Figura 4.24). Al hacer clic en el botón Usar avatar, el avatar seleccionado aparece en el menú principal (tercera imagen en la Figura 4.24).

Diseño de la base de datos

Colecciones relacionadas
Colecciones no relacionadas

En esta colección, cada vez que se crea un nuevo participante, se guardarán todos los elementos de la colección "actividades", agregando el campo participanteId correspondiente al _id del participante actualmente seleccionado. En esta colección, cada vez que se crea un nuevo participante, se guardarán todos los elementos de la colección "iconos", agregando el campo participanteId correspondiente al _id del participante actualmente seleccionado. La información de propinas que se muestra en la aplicación se almacenará en esta colección.

Configuración inicial

Configuración del repositorio en GitLab
Instalación de Node.js

Este capítulo describe el proceso de instalación de todas las herramientas necesarias, los comandos básicos, la estructura y el proceso realizado para crear la aplicación. Antes de iniciar el desarrollo o instalación de los frameworks, es necesario instalar Node.Js. Puede verificar que Node.js esté instalado correctamente ejecutando el siguiente comando en la consola CMD.

Instalación de la base de datos

Implementación de la parte back-end

Instalación del proyecto
Inicialización del proyecto
Estructura del proyecto

Durante su ejecución, se solicitan varias cosas, incluido el nombre y la versión de la aplicación y el nombre del archivo de punto de entrada inicial (index.js por defecto). El siguiente comando instala Express.js y lo guarda en la lista de dependencias del archivo package.json. La carpeta src contiene un archivo Database.js para la configuración de la base de datos, un archivo app.js para crear el servidor web con Node.js y configuración Express, un index.js para iniciar el servidor y conectarse a la base de datos, una carpeta de controladores para crear las acciones y operaciones en la base de datos, una carpeta para los middlewares11, una carpeta de modelos para crear los modelos y esquemas de la base de datos, y finalmente una carpeta de rutas donde se definen las rutas a las que responderá la aplicación.

Implementación de la parte front-end

Instalación del proyecto
Inicializar en Android Studio
Estructura del proyecto

Puede ver la estructura de archivos completa del front-end en el Bloque II. En el directorio src está el directorio de dominio donde se almacenan todos los componentes del proyecto. El directorio de estilos contiene los estilos generales de la aplicación, es decir, todos aquellos estilos que se utilizan en los distintos componentes del proyecto.

Desarrollo back-end

Conexión a la base de datos
Creación de modelos en la base de datos
Rutas
Controladores y middlewares

Como acceder o cambiar los documentos en la base de datos, a través de. El primer paso es agregar el cifrado de la contraseña para que se utilice bcrypt. En el proceso de registro, la contraseña debe tener hash17 antes de almacenarse en la base de datos (línea 38).

Desarrollo front-end

Código estático
Fichero de entrada para el cliente
Configuración del enrutamiento
Configuración de las vistas
Desarrollo de los componentes

La configuración de enrutamiento se realiza en el componente principal App.tsx en el directorio src/App.tsx (https://gitlab.com/Crosscipri/healtyle-app-front/-/blob/master/src/App.tsx). Finalmente, el archivo LoginForm.tsx es responsable de la lógica y el diseño del componente. La línea 16 define la ruta URL requerida para llamar al punto final de entrada de la API.

Despliegue back-end

Configuración de Heroku
Configuración del proyecto
Despliegue

Este capítulo describe el proceso realizado para implementar proyectos de back-end y front-end. Finalmente, es necesario crear un archivo llamado Procfile en la raíz del proyecto. Para verificar que la implementación fue exitosa, puede consultar el panel de la aplicación en el sitio web de Heroku.

Despliegue front-end

Configuración del proyecto front-end

Se elige la primera opción para crear un archivo Bundle, ya que reduce significativamente el tamaño de la aplicación en comparación con los archivos APK. Una vez completada la revisión, puede obtener una vista previa y descargar la aplicación desde Play Store. Una vez desarrollada la aplicación de este proyecto, llega el momento de plantearse las conclusiones que hemos obtenido tras su desarrollo y posibles trabajos futuros para aplicar determinadas mejoras.

Conclusiones

Trabajo futuro

Nuevas mejoras
Trabajos futuros

Inicio de sesión de usuarios con plataformas externas: Facilitar el registro en la aplicación iniciando sesión a través de las plataformas de Google y Facebook, la aplicación tendrá un acceso más universal ya que la mayoría de los usuarios tienen cuentas en estas plataformas. Notificaciones: Implemente un sistema de notificación de aplicaciones para indicar información relacionada con la aplicación. Dietas: Inicialmente la aplicación iba a contar con un apartado de gestión y creación de dietas para los usuarios, Figura 8.1, pero por su complejidad y por tratarse de un tema nutricional no avalado por ningún especialista, se decidió eliminarlo para ver.

Libros

Recursos web

PLANOS

Puedes consultar la estructura completa de ficheros back end en el bloque II. El directorio de vistas contiene los componentes principales del proyecto, es decir, las vistas principales de la aplicación. En este caso se trata de la vista de inicio de sesión, la vista de registro y la vista de la aplicación en sí.

Usando la biblioteca Axios, se llama al método POST de la ruta definida en la línea 16. Si todo salió bien (se recibe un 200 OK), el token y el correo electrónico se almacenan en el almacenamiento local del navegador y se redirigen a la ruta principal del solicitud.

PLIEGO DE CONDICIONES

Especificaciónes técnicas del hardware

Portátil Lenovo IdeaPad
Portátil MacBook Air 13
Smartphone Samsung Galaxy S20

Software de diseño de aplicaciones Sketch
Entorno de desarrollo Visual Studio Code
Entorno de desarrollo Android Studio
Interfaz gráfica de usuario MongoDB Compass

Linux (Red Hat): Red Hat Enterprise Linux 7, CentOS 8, Fedora 24 REQUISITOS DEL SISTEMA INFORMÁTICO Procesador de 1,6 GHz o más rápido. Mínimo 4 Gb de RAM, se recomiendan 8 Gb de RAM más 1 Gb adicional para el emulador de Android. 2 Gb de espacio en disco duro para Android Studio, se recomiendan 4 Gb (500 MB para IDE y al menos 1,5 Gb para Android SDK, imágenes del sistema del emulador y cachés).

PRESUPUESTO

Coste del hardware
Coste del software
Coste de licencias
Coste del diseño y desarrollo del proyecto
Coste total del proyecto

El presupuesto de diseño y desarrollo del proyecto es una estimación real de cuánto tiempo ha tomado el diseño y desarrollo desde un punto de vista profesional basado en la experiencia laboral actual del desarrollador.

ANEXOS

Codigo del proyecto

Dada la gran cantidad de archivos de código desarrollados en la aplicación, se ha decidido adjuntar un enlace a un repositorio online donde se pueden consultar todos los archivos de código de una forma más organizada. La organización del archivo se divide en dos partes: la parte trasera y la parte delantera. Anverso: https://gitlab.com/Crosscipri/healtyle-app-front - Atrás: https://gitlab.com/Crosscipri/healtyle-back.

ÍNDICE DE FIGURAS, TABLAS Y CÓDIGOS

Hardware

Software

Licencias

Diseño y desarrollo del proyecto

Coste total

Archivo index.js (healtyle-back)

Componente LoginView.tsx

Fragmento del fichero LoginForm.tsx

Segundo fragmento del fichero LoginForm.tsx

Tercer fragmento del fichero LoginForm.tsx

Cuarto fragmento del fichero LoginForm.tsx