Lista de tareas-routing y plantillas

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


 Lista de Tareas en Node.js con Routing y Plantillas JS

Aquí tienes un ejemplo básico de una aplicación Node.js que gestiona una lista de tareas (solo guardando los nombres) usando routing y plantillas JavaScript (con EJS como motor de plantillas).

Estructura del proyecto

Copy
Download
tareas-app/
├── package.json
├── app.js
├── views/
│   ├── index.ejs
│   └── tareas.ejs
└── routes/
    └── tareas.js

1. Configuración inicial (package.json)

json
Copy
Download
{
  "name": "tareas-app",
  "version": "1.0.0",
  "description": "Lista de tareas simple",
  "main": "app.js",
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "express": "^4.18.2",
    "ejs": "^3.1.9"
  }
}

2. Archivo principal (app.js)

javascript
Copy
Download
const express = require('express');
const path = require('path');
const tareasRouter = require('./routes/tareas');

const app = express();

// Configuración de EJS como motor de plantillas
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

// Middleware
app.use(express.urlencoded({ extended: true }));
app.use(express.static(path.join(__dirname, 'public')));

// Rutas
app.use('/tareas', tareasRouter);

app.get('/', (req, res) => {
  res.render('index');
});

const PORT = 3000;
app.listen(PORT, () => {
  console.log(`Servidor corriendo en http://localhost:${PORT}`);
});

3. Router de tareas (routes/tareas.js)

javascript
Copy
Download
const express = require('express');
const router = express.Router();

// Arreglo para almacenar las tareas (solo nombres)
let tareas = [];

// Mostrar todas las tareas
router.get('/', (req, res) => {
  res.render('tareas', { tareas });
});

// Agregar nueva tarea
router.post('/', (req, res) => {
  const { nombre } = req.body;
  if (nombre && nombre.trim() !== '') {
    tareas.push(nombre.trim());
  }
  res.redirect('/tareas');
});

// Eliminar tarea
router.post('/eliminar/:index', (req, res) => {
  const index = parseInt(req.params.index);
  if (index >= 0 && index < tareas.length) {
    tareas.splice(index, 1);
  }
  res.redirect('/tareas');
});

module.exports = router;

4. Plantilla principal (views/index.ejs)

html
Copy
Download
Run
<!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>
</head>
<body>
  <h1>Bienvenido a la App de Tareas</h1>
  <a href="/tareas">Ver lista de tareas</a>
</body>
</html>

5. Plantilla de tareas (views/tareas.ejs)

html
Copy
Download
Run
<!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>
</head>
<body>
  <h1>Lista de Tareas</h1>
  
  <form action="/tareas" method="POST">
    <input type="text" name="nombre" placeholder="Nueva tarea" required>
    <button type="submit">Agregar</button>
  </form>
  
  <ul>
    <% tareas.forEach((tarea, index) => { %>
      <li>
        <%= tarea %>
        <form action="/tareas/eliminar/<%= index %>" method="POST" style="display: inline;">
          <button type="submit">Eliminar</button>
        </form>
      </li>
    <% }); %>
  </ul>
  
  <a href="/">Volver al inicio</a>
</body>
</html>

Instrucciones para ejecutar la aplicación

  1. Crea la estructura de archivos y carpetas como se muestra arriba

  2. Ejecuta npm install para instalar las dependencias

  3. Ejecuta npm start para iniciar el servidor

  4. Abre tu navegador en http://localhost:3000

Características de la aplicación

  • Almacena solo los nombres de las tareas en un arreglo

  • Usa Express para el routing

  • Utiliza EJS como motor de plantillas

  • Permite agregar y eliminar tareas

  • Las rutas están organizadas en un archivo separado (tareas.js)

Puedes expandir esta aplicación agregando más funcionalidades como editar tareas, marcar como completadas, o persistir los datos en una base de datos.

Explicación Detallada del Código de la Lista de Tareas en Node.js

Voy a explicar cada parte del código para que entiendas cómo funciona todo el sistema.

1. Estructura General

La aplicación sigue una estructura MVC (Modelo-Vista-Controlador) simplificada:

  • Modelo: El arreglo tareas que almacena los datos (aunque en una app real sería una base de datos)

  • Vista: Las plantillas EJS en la carpeta views/

  • Controlador: Las rutas definidas en routes/tareas.js

2. Archivo principal (app.js)

javascript
Copy
Download
const express = require('express');
const path = require('path');
const tareasRouter = require('./routes/tareas');

const app = express();

  • Importamos Express y el módulo path para manejar rutas de archivos

  • Creamos la aplicación Express

  • Importamos el router de tareas que definiremos después

javascript
Copy
Download
// Configuración de EJS como motor de plantillas
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));

  • Configuramos EJS como motor de plantillas

  • Especificamos dónde están las vistas (carpeta views/)

javascript
Copy
Download
// Middleware
app.use(express.urlencoded({ extended: true }));
app.use(express.static(path.join(__dirname, 'public')));

  • express.urlencoded(): Para procesar datos de formularios HTML

  • express.static(): Para servir archivos estáticos (CSS, JS, imágenes)

javascript
Copy
Download
// Rutas
app.use('/tareas', tareasRouter);

app.get('/', (req, res) => {
  res.render('index');
});

  • Montamos el router de tareas en la ruta /tareas

  • Definimos la ruta raíz (/) que muestra la página de inicio

3. Router de tareas (routes/tareas.js)

javascript
Copy
Download
let tareas = [];

  • Aquí almacenamos las tareas (en memoria, se perderán al reiniciar el servidor)

Mostrar tareas (GET /tareas)

javascript
Copy
Download
router.get('/', (req, res) => {
  res.render('tareas', { tareas });
});

  • Cuando se hace GET a /tareas, renderiza la plantilla tareas.ejs

  • Pasamos el arreglo tareas a la plantilla

Agregar tarea (POST /tareas)

javascript
Copy
Download
router.post('/', (req, res) => {
  const { nombre } = req.body;
  if (nombre && nombre.trim() !== '') {
    tareas.push(nombre.trim());
  }
  res.redirect('/tareas');
});

  • Recibe el nombre de la tarea desde un formulario

  • Verifica que no esté vacío

  • Agrega la tarea al arreglo

  • Redirige de vuelta a la lista de tareas

Eliminar tarea (POST /tareas/eliminar/:index)

javascript
Copy
Download
router.post('/eliminar/:index', (req, res) => {
  const index = parseInt(req.params.index);
  if (index >= 0 && index < tareas.length) {
    tareas.splice(index, 1);
  }
  res.redirect('/tareas');
});

  • Recibe el índice de la tarea a eliminar como parámetro en la URL

  • Verifica que el índice sea válido

  • Elimina la tarea del arreglo usando splice()

  • Redirige de vuelta a la lista

4. Plantillas EJS

index.ejs (Página de inicio)

html
Copy
Download
Run
<a href="/tareas">Ver lista de tareas</a>

  • Simple enlace a la lista de tareas

tareas.ejs (Lista de tareas)

Formulario para agregar tareas:

html
Copy
Download
Run
<form action="/tareas" method="POST">
  <input type="text" name="nombre" placeholder="Nueva tarea" required>
  <button type="submit">Agregar</button>
</form>

  • Envía datos por POST a /tareas

  • Campo nombre que coincide con lo que espera el router

Lista de tareas:

html
Copy
Download
Run
<% tareas.forEach((tarea, index) => { %>
  <li>
    <%= tarea %>
    <form action="/tareas/eliminar/<%= index %>" method="POST" style="display: inline;">
      <button type="submit">Eliminar</button>
    </form>
  </li>
<% }); %>

  • Itera sobre el arreglo tareas

  • Muestra cada tarea y un botón para eliminarla

  • El formulario de eliminación envía POST a /tareas/eliminar/X donde X es el índice

Flujo de la Aplicación

  1. El usuario visita http://localhost:3000/

  2. La ruta app.get('/') muestra index.ejs

  3. Al hacer clic en "Ver lista de tareas", va a /tareas

  4. La ruta router.get('/') en tareas.js muestra tareas.ejs con las tareas actuales

  5. Al agregar una tarea:

    • El formulario envía POST a /tareas

    • El router agrega la tarea al arreglo y redirige a /tareas

  6. Al eliminar una tarea:

    • El formulario de eliminación envía POST a /tareas/eliminar/X

    • El router elimina la tarea y redirige a /tareas

¿Por qué usar POST para eliminar?

En aplicaciones web tradicionales:

  • GET: Para obtener recursos (no deberían modificar datos)

  • POST: Para crear/modificar/eliminar recursos

Por eso usamos POST para ambas operaciones que modifican datos (agregar y eliminar).

Posibles Mejoras

  1. Usar una base de datos para persistencia

  2. Agregar validación más robusta

  3. Añadir estilo CSS

  4. Implementar edición de tareas

  5. Agregar autenticación de usuarios


Explicación de los Middlewares en Express

Estas dos líneas son middlewares esenciales en una aplicación Express. Vamos a analizar cada una:

1. app.use(express.urlencoded({ extended: true }));

¿Qué hace?
Este middleware se encarga de procesar los datos que vienen desde formularios HTML enviados con el método POST.

Detalles técnicos:

  • Cuando envías un formulario HTML con method="POST" y enctype="application/x-www-form-urlencoded" (que es el valor por defecto)

  • Los datos llegan al servidor en formato nombre=valor&nombre2=valor2

  • Este middleware parsea (interpreta) esos datos y los convierte en un objeto JavaScript accesible en req.body

El parámetro { extended: true }:

  • extended: false: Solo parsea datos en formato string o array

  • extended: true (recomendado): Permite parsear también objetos anidados (más flexible)

Ejemplo práctico:
Si tienes un formulario:

html
Copy
Download
Run
<form method="POST" action="/tareas">
  <input type="text" name="tarea">
</form>

Al enviarlo, en tu ruta podrás acceder al valor con:

javascript
Copy
Download
router.post('/', (req, res) => {
  console.log(req.body.tarea); // Aquí está el valor del input
});

2. app.use(express.static(path.join(__dirname, 'public')));

¿Qué hace?
Este middleware sirve archivos estáticos (CSS, JavaScript, imágenes, etc.) desde un directorio específico.

Desglose:

  • express.static(): Función que crea el middleware para servir archivos estáticos

  • path.join(__dirname, 'public'): Construye la ruta absoluta al directorio 'public'

    • __dirname: Variable global de Node.js que contiene la ruta del directorio actual

    • 'public': Nombre de la carpeta donde estarán los archivos estáticos

Cómo funciona:

  • Si tienes un archivo public/css/styles.css

  • Podrás acceder a él en el navegador con http://tusitio.com/css/styles.css

  • Express buscará automáticamente en la carpeta public el archivo solicitado

Ejemplo de estructura:

Copy
Download
proyecto/
├── public/
│   ├── css/
│   │   └── styles.css
│   └── js/
│       └── script.js
├── app.js

Uso en HTML:

html
Copy
Download
Run
<link rel="stylesheet" href="/css/styles.css">
<script src="/js/script.js"></script>

¿Por qué son importantes?

  1. express.urlencoded():

    • Sin él, no podrías recibir datos de formularios HTML normales

    • req.body estaría vacío o undefined

    • Es esencial para cualquier aplicación que reciba datos de formularios

  2. express.static():

    • Permite organizar y servir tus recursos frontend

    • Hace que Express actúe como un servidor web tradicional para archivos estáticos

    • Mejora el rendimiento ya que Express optimiza el servicio de estos archivos

Orden de los middlewares

El orden en que colocas estos middlewares es importante. Generalmente se colocan:

  1. Primero los middlewares que procesan la solicitud (como urlencoded)

  2. Luego los que sirven respuestas (como static)

¿Necesitas más detalles sobre algún aspecto específico de estos middlewares?

Comentarios

Publicar un comentario

Entradas más populares de este blog

9-Nuestra Primera Plantilla con EJS

Imagen
  Creando Nuestra Primera Plantilla con EJS y Express   5- EXPRESS            |           V 6- MIDDLEWARE            |           V 7- express.static            |           V 8- Motor de plantilla            |           V      9-Plantilla mi-app/ ├── public/ # Archivos estáticos (opcional) │ ├── css/ │ │ └── style.css │ ├── js/ │ │ └── app.js │ └── images/ │ └── logo.png ├── views/ # Carpeta para las plantillas EJS (obligatoria) │ ├── index.ejs # Vista principal │ └── partials/ # Fragmentos reutilizables (opcional) │ ├── header.ejs │ └── footer.ejs ├── app.js # Archivo principal de la aplicación └── package.json # Configuración del proyecto En este post, aprenderemos...
Leer más

6-Middleware?

Imagen
  Middleware en Node.js con Express: Guía Definitiva      5- EXPRESS            |           V 6-MIDDLEWARE ¿Qué es un Middleware? mi-app/ ├ app.js └── package.json El middleware son  funciones intermedias  que procesan las solicitudes ( req ) y respuestas ( res ) en tu aplicación Express. Actúan como "puentes" entre la recepción de una petición y el envío de la respuesta final. 🔧 Tipos de Middleware 1.  Middleware de Aplicación Se ejecutan en  todas las rutas : javascript Copy Download app . use ( ( req , res , next ) => { console . log ( 'Middleware global' ) ; next ( ) ; // ¡No olvides next()! } ) ; 2.  Middleware de Ruta Específicos para ciertas rutas: javascript Copy Download app . get ( '/ruta' , ( req , res , next ) => { console . log ( 'Middleware solo para /ruta' ) ; next ( ) ; } ) ; 3.  Middleware de Terceros Paquetes externos como  body-...
Leer más

Cómo Iniciar un Proyecto Node.js

  Cómo Iniciar un Proyecto Node.js desde Cero: Guía Paso a Paso Solución 1: Cambiar la política de ejecución (recomendado) Abre PowerShell  como administrador . Ejecuta este comando para permitir la ejecución de scripts firmados: powershell Copy Download Set-ExecutionPolicy RemoteSigned - Scope CurrentUser Si estás comenzando con Node.js, esta guía te mostrará cómo configurar un proyecto básico con las herramientas esenciales. Paso 1: Inicializar el proyecto bash Copy Download npm init --yes Este comando crea automáticamente un archivo  package.json  con valores predeterminados. El  package.json  es el corazón de tu proyecto Node.js, donde se almacenan: Dependencias del proyecto Scripts personalizados Metadatos del proyecto (nombre, versión, descripción, etc.) Paso 2: Instalar dependencias esenciales Express - El framework web bash Copy Download npm install express Express es el framework web más popular para Node.js. Te permite: Crear rutas (endpoints)...
Leer más