Integración de las tecnologías

En esta sección aprenderás cómo conectar los diferentes componentes del stack MERN (MongoDB, Express, React y Node.js) para construir una aplicación web completa. También veremos buenas prácticas para la gestión de claves API y variables de entorno, esenciales para integrar servicios externos de manera segura.

Flujo de trabajo básico

Frontend (React):
- Consume la API para obtener o enviar datos al servidor.
- Maneja la interfaz de usuario y las interacciones del usuario.
Backend (Node.js y Express):
- Define los endpoints que conectan el frontend con la base de datos.
- Procesa las solicitudes del cliente y realiza operaciones en la base de datos.
Base de datos (MongoDB):
- Almacena los datos de la aplicación, como usuarios, productos o pedidos.
- Se conecta al backend utilizando Mongoose.

Ejemplo básico de integración

Paso 1: Configurar el backend con Express y MongoDB Define un endpoint en Express que devuelva datos almacenados en MongoDB:

const express = require('express');
const mongoose = require('mongoose');

const app = express();

// Conexión a MongoDB
mongoose.connect(process.env.MONGO_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

// Definir modelo
const Producto = mongoose.model('Producto', {
  nombre: String,
  precio: Number,
  descripcion: String,
});

// Endpoint para obtener productos
app.get('/api/productos', async (req, res) => {
  const productos = await Producto.find();
  res.json(productos);
});

app.listen(5000, () => console.log('Servidor corriendo en el puerto 5000'));

Paso 2: Consumir la API desde React Configura un componente en React para consumir el endpoint /api/productos:

import { useEffect, useState } from 'react';

function Productos() {
  const [productos, setProductos] = useState([]);

  useEffect(() => {
    const fetchProductos = async () => {
      const response = await fetch('/api/productos');
      const data = await response.json();
      setProductos(data);
    };

    fetchProductos();
  }, []);

  return (
    <div>
      <h1>Lista de Productos</h1>
      <ul>
        {productos.map((producto) => (
          <li key={producto._id}>
            {producto.nombre} - ${producto.precio}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Productos;

Gestión de claves API y variables de entorno

¿Qué son las claves API?

Las claves API son identificadores únicos utilizados para autenticar tu aplicación con servicios externos, como MongoDB Atlas o PayPal.

Buenas prácticas para la gestión de claves

No incluyas claves en el código: Usa un archivo .env para almacenarlas.
Usa variables de entorno: Accede a las claves en el código utilizando la biblioteca dotenv.
Protege el archivo .env: Añádelo al archivo .gitignore para evitar que se suba al repositorio.

Ejemplo: Configuración de MongoDB Atlas

Genera tu clave de conexión:

Obtén la cadena de conexión desde MongoDB Atlas e inclúyela en un archivo .env:

MONGO_URI=mongodb+srv://usuario:contraseña@cluster.mongodb.net/nombreDB

Usa la clave en tu código:

Instala dotenv y úsalo para cargar las variables de entorno:

const mongoose = require('mongoose');
require('dotenv').config();

mongoose.connect(process.env.MONGO_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

Recursos útiles

Nota: La integración puede parecer compleja al principio, pero una vez que entiendas los fundamentos de cada tecnología, todo se conectará de manera intuitiva.