Uso de una de las stacks de back más populares: Express JS + Mongoose

Veamos primero una breve descripción de cada una de las tecnologías necesarias para usar este stack para desarrollo back de páginas web:

Node.js es un entorno de ejecución para JavaScript en el lado del servidor. Esto permite a los desarrolladores crear aplicaciones en red usando JavaScript, que tradicionalmente se ha usado en el lado del cliente (navegador).

Proporciona una biblioteca de módulos que simplifican la creación de aplicaciones web, incluyendo la gestión de conexiones de red, la manipulación de archivos, y otros aspectos del desarrollo del lado del servidor.

Express.js es un marco (framework) de aplicación web minimalista y flexible para Node.js que proporciona un conjunto robusto de características para desarrollar aplicaciones web y móviles.
Facilita la creación de rutas, la gestión de solicitudes y respuestas, la manipulación de errores, entre otras cosas.

MongoDB es una base de datos NoSQL que permite almacenar y gestionar datos en formato de documentos BSON (similar a JSON).
Se utiliza para almacenar datos de manera escalable y flexible, y es especialmente útil en aplicaciones que necesitan manejar grandes cantidades de datos no estructurados o semi-estructurados.

Mongoose es una biblioteca para MongoDB y Node.js que facilita la interacción con la base de datos.
Proporciona una solución sencilla basada en esquemas para modelar los datos de su aplicación, y contiene métodos de validación de datos, consultas, middleware, y otras características útiles.

Interacción entre estas tecnologías

Node.js como Base:

Node.js sirve como la base sobre la cual se construyen las otras tecnologías. Permite la ejecución de JavaScript en el servidor y proporciona las herramientas necesarias para construir aplicaciones en red.

Express.js sobre Node.js:

Express.js se construye sobre Node.js y simplifica la creación y gestión de servidores web y APIs. Facilita la creación de rutas y la gestión de solicitudes y respuestas HTTP.

MongoDB para la Persistencia de Datos:

MongoDB se utiliza para almacenar y recuperar datos de la aplicación. Puedes interactuar con MongoDB directamente desde Node.js, pero a menudo es más fácil y eficiente hacerlo a través de una biblioteca como Mongoose.

Mongoose como Intermediario entre Node.js y MongoDB:

Mongoose sirve como una capa de abstracción entre Node.js y MongoDB, facilitando la definición de esquemas de datos, la validación, y la interacción con la base de datos.

¿Cómo empezar a usar Express y Mongoose?

1. Instalación y Configuración de Node.js:
   • Descarga e instala Node.js desde su sitio web oficial.
   • Una vez instalado, puedes verificar la instalación ejecutando el siguiente comando en tu terminal: node -v.
2. Creación de un Nuevo Proyecto Node.js:
   • Crea una nueva carpeta para tu proyecto y navega a ella en tu terminal.
   • Inicia un nuevo proyecto Node.js con el comando: npm init -y.
3. Instalación de Express.js:
   • Instala Express.js en tu proyecto con el siguiente comando: npm install express.
4. Creación de un Servidor Express.js:
   • Crea un archivo llamado server.js (o app.js).
   • Añade el siguiente código para crear un servidor Express.js básico:

const express = require('express');
const app = express();
const PORT = process.env.PORT || 3000;

app.get('/', (req, res) => {
  res.send('¡Hola Mundo!');
});

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

5. Instalación de MongoDB:
   • Descarga e instala MongoDB desde su sitio web oficial.
   • Inicia el servidor MongoDB según las instrucciones proporcionadas en su documentación.
6. Instalación de Mongoose:
   • Instala Mongoose en tu proyecto con el siguiente comando: npm install mongoose.
7. Configuración de Mongoose y Definición de un Esquema:
   • Añade el siguiente código en tu server.js para conectar Mongoose a MongoDB y definir un esquema básico:

const mongoose = require('mongoose');

// Conexión a MongoDB
mongoose.connect('mongodb://localhost:27017/mydatabase', { useNewUrlParser: true, useUnifiedTopology: true });

// Definición de un esquema
const UserSchema = new mongoose.Schema({
  name: String,
  email: String
});

// Creación de un modelo
const User = mongoose.model('User', UserSchema);

Manipulación de Datos con Mongoose:

• Ahora puedes usar Mongoose para interactuar con tu base de datos MongoDB, como crear, leer, actualizar y eliminar registros.

// Creando un nuevo usuario
const newUser = new User({ name: 'Diego C Martín', email: 'diego@ejemplo.com' });
newUser.save((err) => {
  if(err) return console.error(err);
  console.log('User created successfully');
});

Cómo montar un formulario de login

Veamos ahora un ejemplo básico de cómo podrías implementar un formulario de inicio de sesión que consulta una base de datos MongoDB utilizando Mongoose, Express.js y Node.js.

Creamos un nuevo proyecto e instalamos dependencias:

mkdir my-login-app
cd my-login-app
npm init -y
npm install express mongoose body-parser

Creamos un archivo “server.js” que contendrá la configuración de tu servidor y la conexión a la base de datos.

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');

// Conexión a MongoDB
mongoose.connect('mongodb://localhost:27017/my-login-db', { useNewUrlParser: true, useUnifiedTopology: true });

// Definición del esquema y modelo para los usuarios
const UserSchema = new mongoose.Schema({
  username: String,
  password: String
});

const User = mongoose.model('User', UserSchema);

const app = express();

// Configuración del analizador de cuerpo para manejar datos POST
app.use(bodyParser.urlencoded({ extended: true }));

// Ruta para mostrar el formulario de inicio de sesión
app.get('/login', (req, res) => {
  res.send(`
    <form action="/login" method="post">
      Username: <input type="text" name="username"><br>
      Password: <input type="password" name="password"><br>
      <input type="submit" value="Login">
    </form>
  `);
});

// Ruta para procesar el formulario de inicio de sesión
app.post('/login', async (req, res) => {
  const { username, password } = req.body;
  
  try {
    const user = await User.findOne({ username, password });
    if (user) {
      res.send('Login successful!');
    } else {
      res.send('Invalid credentials.');
    }
  } catch (err) {
    console.error(err);
    res.status(500).send('Server error.');
  }
});

// Iniciar el servidor
app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

Ahora ejecuta el servidor en la terminal con el comando node server.js.
Abre tu navegador web y ve a http://localhost:3000/login para ver y probar el formulario de inicio de sesión.
Para probar el inicio de sesión primero tendrás que crear un usuario en tu base de datos MongoDB.
Puedes hacer esto a través de la interfaz de línea de comandos de MongoDB o utilizando un cliente de MongoDB como MongoDB Compass.

Introduciendo rutas y condiciones

Extendamos ahora el ejemplo anterior para que cumpla con que si el usuario tiene el rol gestor, sea redirigido a una página en la que pueda dar de alta, modificar o eliminar a otros usuarios.

Para lograr la funcionalidad deseada, necesitaremos hacer varios cambios en el código. Primero, actualizaremos el esquema UserSchema para incluir un campo de role. Luego, agregaremos nuevas rutas y vistas para gestionar usuarios. Además, emplearemos un manejo básico de sesiones para mantener a los usuarios autenticados entre las solicitudes. Finalmente, para simplificar, utilizaremos plantillas EJS para renderizar HTML en el servidor.

Instalamos dependencias adicionales mediante

npm install ejs express-session

Actualizando el archivo server.js:

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const session = require('express-session');

// Conexión a MongoDB
mongoose.connect('mongodb://localhost:27017/my-login-db', { useNewUrlParser: true, useUnifiedTopology: true });

// Definición del esquema y modelo para los usuarios
const UserSchema = new mongoose.Schema({
  username: String,
  password: String,
  role: String  // Nuevo campo
});

const User = mongoose.model('User', UserSchema);

const app = express();

// Configuración de sesiones
app.use(session({
  secret: 'my secret',
  resave: false,
  saveUninitialized: true
}));

// Configuración del analizador de cuerpo y motor de plantillas
app.use(bodyParser.urlencoded({ extended: true }));
app.set('view engine', 'ejs');

// Ruta para mostrar el formulario de inicio de sesión
app.get('/login', (req, res) => {
  res.render('login');  // Renderiza una vista EJS
});

// Ruta para procesar el formulario de inicio de sesión
app.post('/login', async (req, res) => {
  const { username, password } = req.body;
  
  try {
    const user = await User.findOne({ username, password });
    if (user) {
      req.session.user = user;  // Guarda el usuario en la sesión
      if (user.role === 'gestor') {
        res.redirect('/manage-users');
      } else {
        res.send('Login successful!');
      }
    } else {
      res.send('Invalid credentials.');
    }
  } catch (err) {
    console.error(err);
    res.status(500).send('Server error.');
  }
});

// Ruta para gestionar usuarios (solo para gestores)
app.get('/manage-users', (req, res) => {
  if (req.session.user && req.session.user.role === 'gestor') {
    res.render('manage-users', { user: req.session.user });
  } else {
    res.redirect('/login');
  }
});

// Rutas adicionales para crear, modificar o eliminar usuarios (no mostradas)

// Iniciar el servidor
app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

Ahora crearemos un directorio views y dentro de él, los archivos login.ejs y manage-users.ejs:
login.ejs:

<!DOCTYPE html>
<html>
<head>
  <title>Login</title>
</head>
<body>
  <form action="/login" method="post">
    Username: <input type="text" name="username"><br>
    Password: <input type="password" name="password"><br>
    <input type="submit" value="Login">
  </form>
</body>
</html>

manage-users.ejs:

<!DOCTYPE html>
<html>
<head>
  <title>Manage Users</title>
</head>
<body>
  <h1>Welcome, <%= user.username %></h1>
  <!-- Formularios y/o enlaces para crear, modificar o eliminar usuarios -->
</body>
</html>

Ahora, cuando un usuario con el rol de “gestor” inicie sesión, será redirigido a una página para gestionar otros usuarios. Desde aquí, podrías agregar formularios y rutas adicionales para crear, modificar y eliminar usuarios.