Lista de Tareas
Inicializar el proyecto
bash
npm init --yes
Express - El framework web
bash
npm install express
Morgan - Logger para desarrollo
bash
npm install morgan
Motor de plantillas
bash
npm install ejs
npm install
npm start
Aplicación de Lista de Tareas con Node.js y Express
Voy a enseñarte cómo crear una aplicación web básica de lista de tareas usando Node.js y Express, donde solo guardaremos el nombre de cada tarea.
Estructura del proyecto
/todo-app
├── app.js # Archivo principal de la aplicación
├── package.json # Archivo de configuración del proyecto
├── views/ # Carpeta para las plantillas
│ ├── index.ejs # Plantilla principal
└── public/ # Carpeta para archivos estáticos (CSS, JS)Paso 1: Configuración inicial
Primero, crea un nuevo proyecto Node.js:
mkdir todo-app
cd todo-app
npm init -yPaso 2: Instalar dependencias
Instala Express y EJS (motor de plantillas):
npm install express ejsPaso 3: Crear el archivo principal (app.js)
const express = require('express');
const app = express();
// Configuración
app.set('view engine', 'ejs'); // Usar EJS como motor de plantillas
app.use(express.urlencoded({ extended: true })); // Para procesar datos de formularios
app.use(express.static('public')); // Servir archivos estáticos
// Array para almacenar las tareas (en memoria)
let tasks = [];
// Rutas
app.get('/', (req, res) => {
res.render('index', { tasks: tasks });
});
app.post('/add', (req, res) => {
const newTask = req.body.taskName;
if (newTask && newTask.trim() !== '') {
tasks.push(newTask.trim());
}
res.redirect('/');
});
app.get('/delete/:id', (req, res) => {
const taskId = req.params.id;
if (taskId >= 0 && taskId < tasks.length) {
tasks.splice(taskId, 1);
}
res.redirect('/');
});
// Iniciar el servidor
const PORT = 3000;
app.listen(PORT, () => {
console.log(`Servidor corriendo en http://localhost:${PORT}`);
});Paso 4: Crear la vista (views/index.ejs)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lista de Tareas</title>
<style>
body { font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; }
h1 { color: #333; }
form { margin-bottom: 20px; }
input[type="text"] { padding: 8px; width: 70%; }
button { padding: 8px 15px; background-color: #4CAF50; color: white; border: none; cursor: pointer; }
ul { list-style-type: none; padding: 0; }
li { padding: 10px; background-color: #f9f9f9; margin-bottom: 5px; display: flex; justify-content: space-between; }
.delete-btn { background-color: #f44336; color: white; border: none; padding: 5px 10px; cursor: pointer; }
</style>
</head>
<body>
<h1>Lista de Tareas</h1>
<form action="/add" method="POST">
<input type="text" name="taskName" placeholder="Nueva tarea" required>
<button type="submit">Agregar</button>
</form>
<ul>
<% tasks.forEach((task, index) => { %>
<li>
<%= task %>
<a href="/delete/<%= index %>" class="delete-btn">Eliminar</a>
</li>
<% }); %>
</ul>
</body>
</html>Paso 5: Ejecutar la aplicación
node app.jsAbre tu navegador en http://localhost:3000
Explicación del código
Configuración básica:
Usamos Express como framework web.
Configuramos EJS como motor de plantillas.
Habilitamos el middleware para procesar datos de formularios.
Almacenamiento de tareas:
Usamos un array en memoria (
tasks) para almacenar las tareas (solo sus nombres).En una aplicación real, usarías una base de datos.
Rutas principales:
GET /: Muestra la lista de tareas.POST /add: Agrega una nueva tarea al array.GET /delete/:id: Elimina una tarea según su índice.
Vista (index.ejs):
Muestra un formulario para agregar tareas.
Lista todas las tareas con un botón para eliminarlas.
Usa EJS para renderizar dinámicamente el contenido.
Flujo de la aplicación
El usuario ingresa a la página principal (
/) y ve la lista de tareas (vacía al principio).Completa el formulario y envía una nueva tarea (
POST /add).La aplicación agrega la tarea al array
tasksy redirige a la página principal.La página principal ahora muestra la tarea agregada.
Para eliminar, el usuario hace clic en el botón "Eliminar" que hace una petición
GET /delete/{id}.La aplicación elimina la tarea del array y redirige a la página principal.
Limitaciones
Los datos se pierden al reiniciar el servidor (están solo en memoria).
No hay autenticación de usuarios.
Es una implementación básica para aprender los conceptos fundamentales.
Para hacerla más robusta, podrías añadir una base de datos como MongoDB o SQLite, pero esto cubre los conceptos básicos de Node.js y Express.
Comentarios
Publicar un comentario