Proyecto: TaskFlow

Introducción

A lo largo del curso desarrollarás de forma progresiva una aplicación web denominada TaskFlow.

TaskFlow será una aplicación para la gestión de tareas personales que evolucionará en cada unidad didáctica incorporando nuevas funcionalidades conforme se introduzcan nuevos conceptos del lenguaje JavaScript y de las tecnologías estudiadas en el módulo.

El objetivo es reproducir un flujo de trabajo similar al utilizado en proyectos reales de desarrollo de software, donde una misma aplicación evoluciona de forma incremental a medida que aparecen nuevos requisitos.

Al finalizar el curso, TaskFlow se habrá transformado en una Single Page Application (SPA) desarrollada con Vue 3, capaz de gestionar tareas, almacenar información de forma persistente e interactuar con el usuario mediante una interfaz moderna.

Objetivos

Mediante este proyecto el alumnado aprenderá a:

• Desarrollar una aplicación de forma incremental.
• Aplicar los conocimientos adquiridos en cada unidad didáctica.
• Reutilizar código desarrollado previamente.
• Mejorar progresivamente la estructura de una aplicación.
• Familiarizarse con una metodología de desarrollo similar a la utilizada en proyectos profesionales.

Evolución del proyecto

Durante el curso, la aplicación evolucionará de la siguiente manera:

Unidad	Evolución del proyecto
UD1	Preparación del entorno de desarrollo y creación del proyecto.
UD2	Implementación de la lógica básica utilizando JavaScript.
UD3	Persistencia de datos mediante localStorage y JSON.
UD4	Refactorización mediante funciones, arrays y objetos.
UD5	Desarrollo de la interfaz utilizando el DOM.
UD6	Interacción con el usuario mediante eventos.
UD7	Migración de la aplicación a Vue 3 y desarrollo como SPA.

Estado del proyecto

En esta primera unidad se preparará el entorno de trabajo sobre el que se desarrollará el resto del proyecto.

Al finalizar la unidad deberá existir un proyecto Vite correctamente configurado y ejecutándose en el navegador.

Funcionalidades implementadas

• Configuración del entorno de desarrollo.
• Instalación de Node.js.
• Instalación de Vite.
• Creación del proyecto.
• Ejecución del servidor de desarrollo.
• Comprensión de la estructura inicial del proyecto.

Funcionalidades pendientes

• Lógica de negocio.
• Gestión de tareas.
• Persistencia de información.
• Interfaz de usuario.
• Eventos.
• Desarrollo como SPA mediante Vue 3.

Actividad propuesta

Objetivos

• Preparar el proyecto que servirá de base durante todo el curso.
• Familiarizarse con la estructura de un proyecto Vite.
• Verificar el correcto funcionamiento del entorno de desarrollo.

Enunciado

Crea un nuevo proyecto Vite denominado taskflow utilizando la plantilla Vanilla JavaScript.

Comprueba que el proyecto se ejecuta correctamente y analiza su estructura inicial.

A continuación:

1. Identifica los archivos y carpetas principales del proyecto.
2. Localiza el punto de entrada de la aplicación.
3. Ejecuta el servidor de desarrollo.
4. Comprueba que cualquier modificación realizada sobre el código se refleja automáticamente en el navegador.

Requisitos

• Utiliza la versión LTS de Node.js.
• Crea el proyecto utilizando Vite.
• Mantén la estructura generada por defecto.
• No añadas todavía nuevas funcionalidades a la aplicación.

Ampliación

Personaliza la página inicial sustituyendo el contenido generado por Vite por una página sencilla que muestre:

• El nombre TaskFlow.
• Tu nombre.
• El ciclo formativo.
• El módulo profesional.
• El curso académico.

Esta será la base sobre la que evolucionará el proyecto durante el resto del curso.