Introducción

La concienciación medioambiental se ha convertido en uno de los principales retos de la sociedad actual. Cada vez más personas desean adoptar hábitos sostenibles, pero en muchas ocasiones carecen de herramientas que les permitan organizar, controlar y realizar un seguimiento de sus acciones ecológicas. Ante esta necesidad surge EcoTaskApp, una aplicación web desarrollada con Angular cuyo objetivo es facilitar la gestión de tareas relacionadas con el cuidado del medioambiente y promover hábitos sostenibles mediante un sistema de seguimiento y recompensas.

EcoTaskApp permite a los usuarios registrarse, iniciar sesión, crear tareas ecológicas, clasificarlas por categorías, controlar su estado de realización y consultar estadísticas de progreso. Además, incorpora un sistema de roles que diferencia entre usuarios estándar y administradores, permitiendo una gestión más eficiente y segura de la información.

El desarrollo de esta aplicación ha supuesto la aplicación práctica de tecnologías modernas de desarrollo web, utilizando Angular como framework principal, TypeScript como lenguaje de programación, Bootstrap para el diseño visual y JWT para la simulación de un sistema de autenticación seguro.

Objetivos del Proyecto

Objetivo General

Desarrollar una aplicación web moderna que permita gestionar tareas ecológicas de forma intuitiva y eficiente, fomentando hábitos sostenibles mediante herramientas de seguimiento y control.

Objetivos Específicos

Implementar un sistema de autenticación de usuarios.
Desarrollar un sistema de gestión de tareas completo.
Crear un dashboard con estadísticas actualizadas en tiempo real.
Diferenciar permisos mediante un sistema de roles.
Garantizar una experiencia de usuario intuitiva y responsive.
Aplicar una arquitectura escalable basada en componentes reutilizables.
Utilizar buenas prácticas de programación y desarrollo frontend.

Justificación del Proyecto

La sostenibilidad es un aspecto fundamental en la actualidad. Muchas personas desean participar activamente en la protección del medioambiente, pero no cuentan con herramientas que les ayuden a organizar sus acciones diarias.

EcoTaskApp nace como una solución tecnológica que permite planificar actividades ecológicas como:

Reciclaje de residuos.
Reducción del consumo energético.
Uso responsable del agua.
Transporte sostenible.
Participación en actividades medioambientales.

La aplicación transforma estas actividades en tareas organizadas que pueden ser gestionadas y monitorizadas por los usuarios, facilitando la adquisición de hábitos sostenibles.

Tecnologías Utilizadas

Angular

Angular es el framework principal utilizado para el desarrollo de EcoTaskApp.

La elección de Angular se debe a las numerosas ventajas que ofrece:

Arquitectura basada en componentes

Angular permite dividir la aplicación en pequeños componentes independientes y reutilizables.

Por ejemplo:

LoginComponent
RegisterComponent
DashboardComponent
TaskListComponent
TaskFormComponent

Esta organización mejora considerablemente el mantenimiento del proyecto.

Routing

Angular proporciona un sistema de navegación que permite crear aplicaciones SPA (Single Page Application), donde los cambios entre páginas se realizan sin necesidad de recargar el navegador.

Inyección de Dependencias

La inyección de dependencias facilita la reutilización de servicios y mejora la modularidad del código.

Escalabilidad

Angular es una solución ampliamente utilizada en aplicaciones empresariales debido a su capacidad para crecer sin comprometer el rendimiento.

TypeScript

TypeScript es una extensión de JavaScript desarrollada por Microsoft.

Se ha utilizado porque permite:

Tipado Estático

Detecta errores durante el desarrollo antes de ejecutar la aplicación.

Mayor Legibilidad

Facilita la comprensión del código gracias a la definición explícita de tipos.

Mejor Mantenimiento

Permite desarrollar aplicaciones grandes de forma más organizada.

Compatibilidad con Angular

Angular está diseñado específicamente para trabajar con TypeScript.

Node.js

Node.js se utiliza como entorno de ejecución para gestionar el proyecto Angular.

Sus principales funciones dentro de EcoTaskApp son:

Gestión de dependencias mediante npm.
Ejecución del servidor de desarrollo.
Compilación de la aplicación.
Instalación de paquetes externos.

Gracias a Node.js se simplifica enormemente el proceso de desarrollo y despliegue.

JWT (JSON Web Token)

JWT es un estándar utilizado para la autenticación de usuarios.

En EcoTaskApp se utiliza un JWT simulado para representar el funcionamiento de un sistema de autenticación real.

Funcionamiento

El usuario inicia sesión.
Se validan sus credenciales.
Se genera un token.
El token se almacena en LocalStorage.
El sistema verifica el token antes de permitir el acceso a rutas protegidas.

Ventajas

Seguridad.
Escalabilidad.
Compatibilidad con APIs REST.
Gestión eficiente de sesiones.

La utilización de JWT prepara la aplicación para una futura integración con un backend real.

RxJS

RxJS es una biblioteca de programación reactiva utilizada por Angular.

EcoTaskApp utiliza:

Observables

Permiten reaccionar automáticamente a los cambios de datos.

BehaviorSubject

Se utiliza para compartir información entre componentes y mantener sincronizado el estado de la aplicación.

Gracias a RxJS los cambios realizados en las tareas se reflejan inmediatamente en todas las vistas correspondientes.

Bootstrap

Bootstrap se utiliza para el diseño visual de la aplicación.

Beneficios

Diseño responsive.
Componentes visuales reutilizables.
Compatibilidad entre navegadores.
Reducción del tiempo de desarrollo.

Gracias a Bootstrap la aplicación se adapta correctamente a dispositivos móviles, tablets y ordenadores.

Arquitectura de EcoTaskApp

La arquitectura implementada sigue el patrón recomendado por Angular.

Componentes

Los componentes son responsables de la interfaz gráfica.

Entre ellos destacan:

LoginComponent

Gestiona el inicio de sesión.

RegisterComponent

Permite registrar nuevos usuarios.

DashboardComponent

Muestra estadísticas generales.

TaskListComponent

Visualiza las tareas registradas.

TaskFormComponent

Permite crear y editar tareas.

UserManagementComponent

Gestiona usuarios desde el panel de administración.

Servicios

Los servicios contienen la lógica de negocio.

AuthService

Gestiona:

Registro.
Login.
Logout.
Gestión del token.
Estado de autenticación.

TaskService

Gestiona:

Creación de tareas.
Edición.
Eliminación.
Filtrado.
Estadísticas.

Guards

Los Guards protegen las rutas.

AuthGuard

Impide el acceso a usuarios no autenticados.

AdminGuard

Restringe determinadas páginas únicamente a administradores.

Sistema de Autenticación

La autenticación es uno de los módulos más importantes de EcoTaskApp.

Registro

Durante el registro se almacenan:

Nombre.
Correo electrónico.
Contraseña.
Rol asignado.

Inicio de Sesión

El sistema compara las credenciales introducidas con los datos almacenados.

Si son correctas:

Se genera el token JWT.
Se almacena la sesión.
Se redirige al Dashboard.

Cierre de Sesión

Al cerrar sesión:

Se elimina el token.
Se borra la información temporal.
Se bloquea el acceso a rutas protegidas.

Gestión de Tareas

El núcleo funcional de EcoTaskApp es el sistema de tareas.

Cada tarea contiene:

Título.
Descripción.
Categoría.
Prioridad.
Estado.
Fecha.
Puntuación asociada.

Crear Tareas

Los usuarios pueden registrar nuevas actividades ecológicas.

Editar Tareas

Permite modificar información previamente almacenada.

Eliminar Tareas

Facilita la eliminación de registros innecesarios.

Completar Tareas

Cuando una tarea se marca como completada:

Se actualiza el estado.
Se asignan puntos.
Se recalculan las estadísticas.

Dashboard y Estadísticas

El Dashboard proporciona una visión global de la actividad del usuario.

Se muestran indicadores como:

Número total de tareas.
Tareas completadas.
Tareas pendientes.
Porcentaje de progreso.
Puntos acumulados.
Actividad reciente.

Estos datos permiten evaluar el compromiso del usuario con los objetivos ecológicos establecidos.

Seguridad Implementada

Aunque EcoTaskApp es un proyecto académico, incorpora mecanismos inspirados en aplicaciones profesionales.

Protección de rutas

Mediante AuthGuard y AdminGuard.

Gestión de sesiones

Utilizando JWT.

Control de permisos

Basado en roles.

Persistencia segura

Mediante almacenamiento local controlado.

Pruebas Realizadas

Durante el desarrollo se realizaron diferentes pruebas funcionales.

Pruebas de Registro

Verificación del alta de nuevos usuarios.

Pruebas de Login

Validación de credenciales correctas e incorrectas.

Pruebas de Roles

Comprobación de permisos de administrador y usuario.

Pruebas de Gestión de Tareas

Creación, edición, eliminación y finalización de tareas.

Pruebas de Navegación

Verificación del correcto funcionamiento de las rutas protegidas.

Mejoras Futuras

Las futuras versiones de EcoTaskApp podrían incorporar:

Backend con Express.js.
Base de datos MySQL o MongoDB.
JWT firmado por servidor.
Notificaciones en tiempo real.
Sistema de logros.
Ranking de usuarios.
Integración con APIs medioambientales.
Aplicación móvil multiplataforma.

Conclusiones

EcoTaskApp representa una solución tecnológica orientada a fomentar hábitos sostenibles mediante la gestión organizada de tareas ecológicas. El proyecto ha permitido aplicar conocimientos relacionados con Angular, TypeScript, JWT, Node.js, Bootstrap y programación reactiva mediante RxJS.

La arquitectura desarrollada facilita el mantenimiento, la escalabilidad y la reutilización del código, mientras que la implementación de autenticación, roles y estadísticas proporciona una experiencia de usuario completa y cercana a aplicaciones profesionales.

Además de cumplir los objetivos inicialmente planteados, EcoTaskApp constituye una base sólida para futuras ampliaciones, pudiendo evolucionar hacia una plataforma completa de gestión medioambiental con integración de servicios externos y almacenamiento persistente en servidor.

Autor: Daniel Perez Diaz

Máster: Desarrollo Full Stack + Arquitecturas Cloud

Centro: Tajamar Tech

Año académico: 2025 – 2026

GitHub: https://github.com/DanielPerezz17/EcoTasks

Recursos:

Angular:

https://angular.dev

https://angular.dev/installation

Node:

http://nodejs.org/docs/latest/api/https://nodejs.org/en/download