Web de 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


3. HTTP y Express

  • Qué es un servidor web.

  • Rutas (app.get, app.post).

  • Middleware básico (express.urlencoded para formularios).

  • Uso de express.static para archivos CSS/JS.

1. Fundamentos Obligatorios (1-2 días)

TemaQué AprenderRecursos
Node.js BásicoMódulos, require, exports, NPMNode.js Docs
HTTP y ExpressCrear servidor, rutas básicas, middlewareExpress Hello World
API RESTVerbos HTTP (GET, POST, PUT, DELETE)REST API Concepts

Aplicación Web de Lista de Tareas con Node.js y Express (No API)

¡Perfecto! Vamos a crear una aplicación web completa con interfaz visual. Usaremos Express + EJS para renderizar HTML en el servidor (Server-Side Rendering).

📌 Estructura del Proyecto

Copy
Download
todo-app/
├── app.js
├── package.json
├── views/
│   ├── index.ejs
│   └── partials/
│       ├── header.ejs
│       └── footer.ejs
└── public/
    ├── css/
    │   └── style.css
    └── js/
        └── script.js

🛠️ Paso 1: Configuración Inicial

bash
Copy
Download
npm init -y
npm install express ejs

💻 Código Base (app.js)

javascript
Copy
Download
const express = require('express');
const app = express();
const PORT = 3000;

// Configuración de EJS y archivos estáticos
app.set('view engine', 'ejs');
app.use(express.static('public'));
app.use(express.urlencoded({ extended: true })); // Para procesar formularios

// "Base de datos" temporal
let tasks = [
  { id: 1, title: 'Aprender Node.js', completed: false },
  { id: 2, title: 'Crear una app To-Do', completed: true }
];

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

app.post('/add', (req, res) => {
  const newTask = {
    id: Date.now(),
    title: req.body.task,
    completed: false
  };
  tasks.push(newTask);
  res.redirect('/');
});

app.get('/complete/:id', (req, res) => {
  const task = tasks.find(t => t.id === parseInt(req.params.id));
  if (task) task.completed = !task.completed;
  res.redirect('/');
});

app.get('/delete/:id', (req, res) => {
  tasks = tasks.filter(task => task.id !== parseInt(req.params.id));
  res.redirect('/');
});

app.listen(PORT, () => {
  console.log(`App running on http://localhost:${PORT}`);
});

🎨 Vista Principal (views/index.ejs)

html
Copy
Download
Run
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Lista de Tareas</title>
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>
  <%- include('partials/header') %>

  <main class="container">
    <h1>Mis Tareas</h1>
    
    <form action="/add" method="POST">
      <input type="text" name="task" placeholder="Nueva tarea..." required>
      <button type="submit">➕ Añadir</button>
    </form>

    <ul class="task-list">
      <% tasks.forEach(task => { %>
        <li class="<%= task.completed ? 'completed' : '' %>">
          <%= task.title %>
          <div>
            <a href="/complete/<%= task.id %>">
              <%= task.completed ? '❌ Desmarcar' : '✅ Completar' %>
            </a>
            <a href="/delete/<%= task.id %>" class="delete">🗑️ Eliminar</a>
          </div>
        </li>
      <% }); %>
    </ul>
  </main>

  <%- include('partials/footer') %>
</body>
</html>

✂️ Partial Views

views/partials/header.ejs

html
Copy
Download
Run
<header>
  <h1>To-Do App</h1>
</header>

views/partials/footer.ejs

html
Copy
Download
Run
<footer>
  <p>© <%= new Date().getFullYear() %> Lista de Tareas</p>
</footer>

🎨 CSS Básico (public/css/style.css)

css
Copy
Download
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  background: #f4f4f4;
}

.container {
  width: 80%;
  margin: 20px auto;
  background: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.task-list {
  list-style: none;
  padding: 0;
}

.task-list li {
  padding: 10px;
  margin: 5px 0;
  background: #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.task-list li.completed {
  text-decoration: line-through;
  opacity: 0.7;
}

.delete {
  color: red;
  margin-left: 10px;
}

🔍 ¿Cómo Funciona?

  1. Añadir tareas: Formulario POST a /add

  2. Completar tareas: GET a /complete/:id (alterna estado)

  3. Eliminar tareas: GET a /delete/:id

🚀 Mejoras Posibles

  1. Base de datos: Usar SQLite o MongoDB

  2. Validaciones: Verificar datos antes de procesar

  3. Sesiones: Usar express-session para múltiples usuarios

  4. JavaScript en cliente: Mejorar interacción sin recargar

📚 Recursos Adicionales

¡Ahora tienes una aplicación web funcional con Node.js y Express! 🌟

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