Guia para desarrolladores

6. Guía para Desarrolladores

Esta sección explica cómo configurar el entorno de desarrollo, instalar las dependencias y ejecutar el proyecto. Está diseñada para ayudar tanto a desarrolladores nuevos como experimentados a ponerse en marcha de manera rápida y eficiente con CapyGaming.

Requisitos Previos

Antes de comenzar, asegúrate de tener los siguientes requisitos instalados en tu máquina:

Node.js (v16 o superior) 🔗 Descargar Node.js
npm (v8 o superior): Instalado junto con Node.js.
PostgreSQL (v14 o superior) 🔗 Descargar PostgreSQL
Git 🔗 Descargar Git
Navegador web recomendado: Google Chrome o Firefox.

Configuración del Entorno

1. Clonar el Repositorio Para obtener el código fuente, ejecuta lo siguiente en tu terminal:

   git clone https://github.com/usuario/CapyGaming.git
   

Luego entra al directorio del proyecto:

   cd CapyGaming

2. Instalar Dependencias

⚙️ Backend
Dirígete al directorio backend e instala las dependencias necesarias:

   cd backend/
   npm install

Se instalarán paquetes como Express.js y pg para gestionar la API y la conexión a la base de datos.

🌐 Frontend
Dirígete al directorio frontend e instala las dependencias:

  cd ../frontend/
  npm install

Estas dependencias incluyen Vue.js, Axios y Vite.

3. Configurar la Base de Datos

Asegúrate de que PostgreSQL esté ejecutándose en tu máquina.

Configura las credenciales de la base de datos en el archivo backend/bd/pool.js:

const pool = new Pool({
user: 'tu_usuario',
host: 'localhost',
database: 'capygaming',
password: 'tu_contraseña',
port: 5232 o el que uses,
});

Ejecuta el script seedProducts.js para inicializar los datos de prueba en la base:

  node backend/bd/seedProducts.js

4. Levantar los Servidores

🖥️ Backend
Desde el directorio backend/, ejecuta:

   npm start

Este comando iniciará el servidor en el puerto 3001 (por defecto):

Backend running on http://localhost:3001

🌐 Frontend
Desde el directorio frontend/, ejecuta:

   npm run dev

Esto iniciará el servidor de desarrollo en el puerto configurado en Vite (por defecto 5173):

  Frontend running on http://localhost:5173  

¿Cómo Probar el Sistema?

Verificar el Frontend Abre tu navegador y dirige a:

 http://localhost:5173

Prueba las siguientes funciones:

• Navegar entre páginas (Home, Productos, Ofertas).
• Agregar productos al carrito.
• Realizar búsquedas.
• Registrarte o iniciar sesión.
• Probar el Backend Puedes utilizar herramientas como Postman o Thunder Client para verificar los endpoints.

Endpoints Disponibles:

• GET /productos: Devuelve la lista de productos.
• POST /usuarios/registro: Registra un nuevo usuario.
• POST /usuarios/login: Inicia sesión y genera un token JWT.

Validar la Base de Datos Usa PostgreSQL para verificar las tablas creadas:

  \c capygaming
  SELECT * FROM productos;
  SELECT * FROM usuarios;

Modo de Producción

Para preparar el proyecto para su implementación en producción:

Realiza la construcción del frontend:

npm run build

Esto generará una carpeta /dist en el directorio frontend/.

Configura el servidor backend para servir el frontend estático y responde a las solicitudes API:

  const express = require('express');
  const path = require('path');
  const app = express();

  app.use(express.static(path.join(__dirname, 'frontend/dist')));
  app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'frontend/dist/index.html'));
  });

  app.listen(3000, () => console.log('Servidor corriendo en producción'));

Consejos Útiles

• Utiliza npm run lint para verificar problemas de estilo o errores en el código Vue.js.
• Usa pgAdmin para administrar la base PostgreSQL visualmente.
• Configura variables de entorno (.env) para mantener seguras las credenciales de la base de datos y claves de API.