Desarrollo de una Aplicación Web de Gestión de Tareas

1. Descripción

En este trabajo práctico, se espera que los estudiantes desarrollen una aplicación web de gestión
de tareas utilizando una combinación de tecnologías, incluyendo React para la interfaz de
usuario, Python con Django para la lógica del servidor y la gestión de la base de datos mediante
SQL. La aplicación permitirá a los usuarios crear, editar, eliminar y marcar como completadas sus
tareas, y se centrará en la comunicación eficiente entre el frontend y el backend utilizando
Django Rest Framework.

2. Requisitos Funcionales

• Registro de Usuarios: Los usuarios podrán registrarse en la aplicación proporcionando

un nombre de usuario y una contraseña.
• Autenticación: Los usuarios podrán iniciar sesión en la aplicación utilizando sus
credenciales de registro.
• Lista de Tareas: Después de iniciar sesión, los usuarios verán una lista de sus tareas
pendientes con la opción de marcarlas como completadas.
• Creación y Edición de Tareas: Los usuarios podrán crear nuevas tareas y editar las
existentes, incluyendo la asignación de un título y una descripción.
• Eliminación de Tareas: Los usuarios podrán eliminar tareas que ya no deseen mantener.
• API Restful: Utilizando Django Rest Framework, se debe implementar una API que
permita la comunicación entre el frontend y el backend para las operaciones de creación,
edición, eliminación y obtención de tareas.

3. Requisitos Técnicos

• Frontend en React: Desarrollar el frontend de la aplicación utilizando React, incluyendo

componentes reutilizables y una navegación fluida entre las diferentes vistas.
• Backend en Django: Implementar el backend utilizando Django, incluyendo modelos de
datos para representar las tareas y usuarios, así como vistas y controladores para
gestionar las operaciones CRUD.
• Base de Datos con SQL: Utilizar una base de datos SQL (por ejemplo, SQLite) para
almacenar la información de las tareas y los usuarios.
• Autenticación y Autorización: Implementar un sistema de autenticación y autorización
en Django para proteger las rutas y las operaciones relevantes.
• Comunicación entre Frontend y Backend: Utilizar Django Rest Framework para crear una
API RESTful que permita la comunicación eficiente entre el frontend y el backend.

4. Hitos

Los estudiantes deberán entregar el código fuente completo de la aplicación, incluyendo tanto
el frontend como el backend siguiendo los hitos propuetos.

1
 4.1. Hito 1: Desarrollo del Frontend en React (1/9)

En este primer hito, los estudiantes se centrarán en el desarrollo del frontend de la aplicación
utilizando React/NEXT. El objetivo es crear una interfaz de usuario atractiva y funcional que
permita a los usuarios registrarse, iniciar sesión y ver una lista básica de tareas.

Tareas:

• Crear una página de registro y una de inicio de sesión utilizando componentes de

React./NEXT
• Implementar la navegación entre las páginas utilizando enrutamiento de React./NEXT.
• Mostrar una lista de tareas ficticias en la página principal.
• Aplicar estilos y diseño a la interfaz utilizando CSS o bibliotecas de diseño.

Entregables:

Código fuente de React./NEXT con las páginas de registro, inicio de sesión y la interfaz inicial.

Ejemplos de Tareas: en este hitos las tareas de backend o API se simularan

• Crear una Nueva Tarea:

o Descripción: Agregar la funcionalidad para que los usuarios puedan crear una
nueva tarea.
o Pasos:
▪ Implementar un formulario en el frontend para ingresar el título y la
descripción de la nueva tarea.
▪ Enviar los datos del formulario al backend a través de la API.
▪ En el backend, crear una nueva entrada en la base de datos para
representar la tarea.
• Editar una Tarea Existente:
o Descripción: Permitir a los usuarios editar los detalles de una tarea existente.
o Pasos:
▪ Agregar un botón de "Editar" en cada tarea en la interfaz.
▪ Al hacer clic en "Editar", mostrar un formulario prellenado con los
detalles actuales de la tarea.
▪ Enviar los datos editados al backend a través de la API y actualizar la
entrada correspondiente en la base de datos.
• Marcar una Tarea como Completada:
o Descripción: Implementar la capacidad de marcar una tarea como completada.
o Pasos:
▪ Agregar un botón o una casilla de verificación en cada tarea en la
interfaz.
▪ Al marcar la casilla o hacer clic en el botón, enviar la solicitud al backend
a través de la API.
▪ En el backend, actualizar el estado de la tarea en la base de datos para
reflejar su estado como completada.
• Eliminar una Tarea:
o Descripción: Permitir a los usuarios eliminar una tarea que ya no deseen
mantener.
o Pasos:
▪ Agregar un botón de "Eliminar" en cada tarea en la interfaz.

2
 ▪ Al hacer clic en "Eliminar", enviar la solicitud al backend para eliminar la
tarea de la base de datos.
▪ Actualizar la lista de tareas en el frontend para reflejar la eliminación.
• Filtrar y Ordenar Tareas:
o Descripción: Agregar opciones de filtrado y ordenamiento a la lista de tareas.
o Pasos:
▪ Implementar botones o selectores en la interfaz para permitir a los
usuarios elegir un criterio de filtrado (por estado, por fecha, etc.).
▪ Configurar la comunicación entre el frontend y el backend para enviar el
criterio de filtrado y recibir la lista correspondiente de tareas.
▪ Implementar la lógica en el backend para filtrar y ordenar las tareas
según el criterio seleccionado
4.2. Hito 2: Desarrollo del Backend con Django y SQL (15/9)

En este segundo hito, los estudiantes trabajarán en el desarrollo del backend utilizando Django
y SQL. El objetivo es crear la lógica para gestionar la autenticación de usuarios, así como los
modelos y las vistas necesarias para manejar las tareas.

Tareas:

• Configurar un nuevo proyecto de Django y crear las aplicaciones necesarias.

• Implementar modelos de datos para usuarios y tareas, y configurar la base de datos SQL.
• Desarrollar las vistas y controladores para la autenticación de usuarios.
• Configurar la comunicación entre el frontend y el backend mediante solicitudes HTTP.

Entregables:

Código fuente de Django con modelos, vistas y controladores para la autenticación y las tareas.

4.3. Hito 3: Implementación de la API REST y Conexión Frontend-Backend (29/9)

En este tercer hito, los estudiantes se centrarán en implementar la API REST utilizando Django
Rest Framework y conectar el frontend con el backend. El objetivo es permitir la comunicación
eficiente entre las partes y completar la funcionalidad de gestión de tareas.

Tareas:

• Configurar Django Rest Framework en el proyecto de Django existente.

• Crear endpoints de API para operaciones CRUD de tareas.
• Conectar el frontend con los endpoints de la API para mostrar y manipular tareas.
• Realizar pruebas exhaustivas de la comunicación frontend-backend y la funcionalidad de
la API.

Entregables:

Código fuente final de Django con la API implementada y documentada.

Código fuente actualizado de React con la comunicación con la API.