UNIVERSIDAD TÉCNICA DE MANABÍ

FACULTAD DE CIENCIAS INFORMÁTICAS

CARRERA DE TECNOLOGÍA DE LA INFORMACIÓN

MATERIA

DESARROLLO DE APLICACIONES WEB

TEMA

Aplicación Lista de Tareas

DOCENTE

Ing. Edison Solorzano Solorzano

ESTUDIANTE

Jean Rodríguez Millet

Sornoza Ruiz Luis Alexi

Vinces García Juan José

Noviembre 14, 2023

Universidad Técnica de Manabí

 ÍNDICE
INTRODUCCIÓN ................................................................................................ 5

DESARROLLO .................................................................................................... 6

COMPONENTE.............................................................................................................. 6

Importaciones .............................................................................................................. 6

Definición de la interfaz .............................................................................................. 6

Definición del componente .......................................................................................... 6

Clase del componente .................................................................................................. 7

Método ngOnInit ......................................................................................................... 7

Métodos relacionados con el almacenamiento local ................................................... 7

Métodos para manipular la lista de tareas ................................................................... 7

Métodos para filtrar tareas ........................................................................................... 8

Método marcarComoCompletada................................................................................ 9

HTML.............................................................................................................................. 9

Entrada de nueva tarea ................................................................................................. 9

Filtrado de tareas ....................................................................................................... 10

Visualización de tareas .............................................................................................. 10

APLICACIÓN WEB ..................................................................................................... 11

Todas las tareas .......................................................................................................... 11

Tareas completadas.................................................................................................... 11

Tareas pendientes ...................................................................................................... 12

CONCLUSIONES .............................................................................................. 13

Universidad Técnica de Manabí

 INTRODUCCIÓN
En un mundo cada vez más dinámico, la necesidad de una organización eficiente
se ha vuelto primordial. En este contexto, la gestión de tareas se erige como una
herramienta esencial para mantenernos enfocados y productivos. Para abordar esta
necesidad, presentamos nuestro proyecto de Lista de Tareas desarrollado en Angular.

Esta aplicación, construida sobre la robusta arquitectura de Angular, proporciona

una interfaz intuitiva y fácil de usar para gestionar tareas diarias. Con la capacidad de
agregar nuevas tareas, marcarlas como completadas, y filtrarlas según su estado, nuestro
proyecto busca ofrecer una solución integral para la administración efectiva de
responsabilidades.

El componente central de nuestra aplicación, ListaTareasComponent, utiliza el

patrón de dos vías de Angular para enlazar dinámicamente los datos de la interfaz de
usuario con las funciones lógicas en TypeScript. Esta conexión bidireccional permite
una experiencia de usuario fluida y receptiva.

Además, nuestro proyecto implementa el almacenamiento local del navegador

para garantizar la persistencia de la lista de tareas, permitiendo a los usuarios retomar
justo donde lo dejaron en sesiones anteriores.

Universidad Técnica de Manabí

 DESARROLLO
COMPONENTE
El componente ListaTareasComponent es parte de una aplicación que maneja
una lista de tareas y realiza operaciones como agregar, eliminar y filtrar tareas.

Importaciones

Se importan dos decoradores desde el módulo @angular/core. Component se

utiliza para definir componentes Angular, y OnInit es una interfaz que declara el método
ngOnInit, parte del ciclo de vida de los componentes.

Definición de la interfaz

Aquí se define la interfaz llamada Tarea. Esta interfaz especifica la estructura

que deben tener los objetos tipo Tarea, con dos propiedades: nombre (cadena de texto),
completada (booleano) y fechaCreación (date).

Definición del componente

Utilizando el decorador @Component, se configura el componente. selector

define el nombre de la etiqueta HTML que representará este componente. templateUrl y
styleUrls especifican la ubicación del archivo de plantilla HTML y los archivos de estilo
CSS, respectivamente.

Universidad Técnica de Manabí

 Clase del componente

Se define la clase ListaTareasComponent que implementa la interfaz OnInit.

Esta clase contiene propiedades que representan el estado del componente, como
nuevaTarea (para la entrada de nueva tarea), listaTareas (almacena todas las tareas), y
otras listas para tareas completadas y pendientes, junto con banderas para controlar qué
conjunto de tareas se muestra.

Método ngOnInit

El método ngOnInit es parte del ciclo de vida del componente y se ejecuta

cuando el componente se inicializa. En este caso, carga datos desde el almacenamiento
local al iniciar el componente.

Métodos relacionados con el almacenamiento local

Estos métodos se encargan de cargar y guardar la lista de tareas en el

almacenamiento local del navegador. cargarDatosDesdeLocalStorage se llama en
ngOnInit para cargar datos al iniciar.

Métodos para manipular la lista de tareas

Estos métodos realizan operaciones como agregar una nueva tarea, cambiar el
estado de una tarea (completada o pendiente) y eliminar una tarea de la lista.

Universidad Técnica de Manabí

 agregarTarea()
Este método se activa cuando se quiere agregar una nueva tarea a la lista.
Primero, comprueba que el campo nuevaTarea no esté vacío. Si hay texto en ese campo,
crea un objeto Tarea con el nombre de la nueva tarea y la marca como no completada
(completada: false). Luego agrega esta tarea a la lista general listaTareas y a la lista de
tareas pendientes tareasPendientes, y finalmente limpia el campo nuevaTarea.

eliminarTarea(tarea: Tarea)
Elimina una tarea de todas las listas en las que podría encontrarse: listaTareas,
tareasPendientes, y tareasCompletadas. Esto asegura que la tarea sea completamente
eliminada y actualiza los datos en el almacenamiento local.

Métodos para filtrar tareas

mostrarTodas(), mostrarCompletadas(), mostrarPendientes()
Estos métodos controlan qué conjunto de tareas se muestra en la interfaz.
Cambian las banderas mostrarTodasLasTareas, mostrarTareasPendientes, y
mostrarTareasCompletadas, permitiendo que se muestren todas las tareas, solo las
completadas o solo las pendientes, respectivamente.

Universidad Técnica de Manabí

 Método marcarComoCompletada

Este método cambia el estado de una tarea entre completada y pendiente.

Actualiza las listas correspondientes y la persistencia en el almacenamiento local. Este
método se utiliza cuando se marca o desmarca una tarea como completada.

HTML
La plantilla HTML muestra y controla la visualización de tareas, permite agregar
nuevas tareas, filtrar entre tareas completadas y pendientes, y proporciona opciones para
eliminar tareas específicas. Además, utiliza clases condicionales y eventos para reflejar
el estado de las tareas (completadas o pendientes) y las interacciones del usuario con
ellas.

Entrada de nueva tarea

• Un campo de entrada (input) permite al usuario ingresar una nueva tarea.
• Un botón "Agregar" invoca el método agregarTarea() del componente cuando se
hace clic.

Universidad Técnica de Manabí

 Filtrado de tareas
• Tres botones, "Mostrar Todas", "Mostrar Completadas" y "Mostrar Pendientes",
permiten filtrar las tareas a mostrar invocando métodos específicos del
componente (mostrarTodas(), mostrarCompletadas(), mostrarPendientes()).

Visualización de tareas
• Utiliza directivas estructurales *ngIf para mostrar diferentes secciones
dependiendo de las banderas de visualización (mostrarTodasLasTareas,
mostrarTareasCompletadas, mostrarTareasPendientes).

Universidad Técnica de Manabí

 • *ngFor se utiliza para iterar sobre las listas de tareas (listaTareas,
tareasCompletadas, tareasPendientes) y mostrar cada tarea en una lista (ul/li).
• Cada tarea se muestra dentro de un contenedor con su nombre y un botón
"Eliminar" para eliminar esa tarea específica.
• Se utiliza una marca de verificación (✔) que cambia de estilo (ngClass)
dependiendo del estado de completado de la tarea, y al hacer clic sobre ella,
invoca marcarComoCompletada(tarea).

APLICACIÓN WEB
Todas las tareas

Tareas completadas

Universidad Técnica de Manabí

 Tareas pendientes

Universidad Técnica de Manabí

 CONCLUSIONES
En conclusión, nuestro proyecto de Lista de Tareas desarrollado en Angular ha
demostrado ser una herramienta valiosa y efectiva para abordar los desafíos de la
gestión diaria de tareas. La implementación de funcionalidades clave, como la
capacidad de agregar y filtrar tareas, junto con la interactividad dinámica proporcionada
por Angular, ha creado una experiencia de usuario fluida y amigable. La decisión de
incorporar el almacenamiento local ha añadido un elemento crucial de persistencia,
permitiendo a los usuarios mantener la continuidad en sus actividades sin importar las
interrupciones. Este proyecto no solo ha demostrado la potencia y versatilidad de
Angular como marco de desarrollo, sino que también ha ofrecido una solución práctica
y accesible para la optimización de la productividad personal. Con la creación de esta
Lista de Tareas, aspiramos a proporcionar a los usuarios una herramienta efectiva que
facilite la organización y gestión de sus responsabilidades cotidianas de manera
eficiente.

Universidad Técnica de Manabí