FX Platform

Correr el proyecto rapidamente con Docker:

1. docker compose up --build
2. Accede a http://localhost:8090/frontend/index.html
3. Login con usuario demo: trader1 / password o trader2 / password

Descripción General

Plataforma web interactiva para operaciones de FX (Foreign Exchange) que permite:

• Visualización de instrumentos financieros en tiempo real
• Configuración de parámetros por instrumento
• Envío de configuraciones mediante WebSocket
• Sistema completo de notificaciones
• Gestión de usuarios con autenticación

Los datos de precios son generados aleatoriamente simulando cotizaciones reales de FX.

---

Arquitectura del Sistema

Stack Tecnológico

• Frontend: HTML5 + JavaScript Vanilla + CSS3
• Backend: PHP 8.x
• Base de Datos: MariaDB/MySQL 8.0+
• WebSocket Server: Python 3.8+ con librería websockets
• Servidor Web: Apache (via Laragon)

Estructura del Proyecto

fx-platform/
├── assets/                 # Recursos estáticos (logos, imágenes)
├── backend/               # APIs y lógica del servidor PHP
│   ├── login.php         # Autenticación de usuarios
│   ├── check_session.php # Validación de sesión
│   ├── data_simulation.php # Datos simulados FX
│   └── load_user_configs.php # Configuraciones guardadas
├── db/                   # Scripts de base de datos
│   └── init.sql         # Inicialización completa de BD
├── frontend/             # Interfaz de usuario
│   ├── index.html       # Página de login
│   └── dashboard.html   # Panel principal FX
├── websocket/            # Servidor WebSocket Python
│   ├── websocket_server.py # Servidor principal
│   ├── requirements.txt    # Dependencias Python
│   └── start_server.bat   # Script de inicio Windows
└── README.md            # Esta documentación

---

Instalación y Configuración

Prerrequisitos

• Laragon 6.0+ (o XAMPP/WAMP)
• Python 3.8 o superior
• MariaDB/MySQL 8.0+

Paso 1: Clonar/Copiar el Proyecto

# Opción A: Git
git clone https://github.com/signorinileandro/fx-platform.git C:\laragon\www\fx-platform

# Opción B: Copiar manualmente a C:\laragon\www\fx-platform

Paso 2: Configurar Base de Datos

1. Abrir HeidiSQL (incluido en Laragon)
2. Conectar a MySQL local (usuario: root, sin password)
3. Ejecutar el script completo: db/init.sql
4. Verificar que se crearon las tablas:
   • users
   • instruments
   • user_instrument_configs
   • websocket_submissions
   • notifications

Paso 3: Instalar Dependencias Python

# Abrir terminal en la carpeta websocket/
cd C:\laragon\www\fx-platform\websocket

# Instalar dependencias
pip install -r requirements.txt

Paso 4: Iniciar Servicios

1. Iniciar Laragon (Apache + MySQL)

2. Iniciar WebSocket Server:

   # Opción A: Ejecutar el .bat (Asume que el proyecto está en: C:\laragon\www\fx-platform\)
   start_server.bat
   
   # Opción B: Comando manual
   python websocket_server.py

3. Acceder a la aplicación:

   http://localhost/fx-platform/frontend/index.html
   

---

Usuarios de Prueba

Usuario	Contraseña	Descripción
trader1	password	Usuario con configuraciones EUR/USD y GBP/USD
trader2	password	Usuario con configuraciones USD/ARS y AUD/ARS

---

API Endpoints

Backend PHP

Endpoint	Método	Descripción	Parámetros
/backend/login.php	POST	Autenticación	{username, password}
/backend/check_session.php	GET	Validar sesión activa	-
/backend/data_simulation.php	GET	Datos FX simulados	-
/backend/load_user_configs.php	GET	Configuraciones del usuario	-

Ejemplos de Uso

Login

fetch("/backend/login.php", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    username: "trader1",
    password: "password",
  }),
});

Obtener Datos FX

fetch("/backend/data_simulation.php")
  .then((res) => res.json())
  .then((data) => console.log(data));

---

📡 Protocolo WebSocket

Conexión

const ws = new WebSocket("ws://localhost:8080");

Mensaje de Configuración FX

{
  "type": "fx_config",
  "user_id": 1,
  "username": "trader1",
  "timestamp": "2024-08-08T15:30:00.000Z",
  "configurations": [
    {
      "instrument": "EURUSD",
      "target_price": 1.085,
      "target_qty": 10000.0,
      "operation": "buy"
    },
    {
      "instrument": "USDJPY",
      "target_price": 150.25,
      "target_qty": 5000.0,
      "operation": "sell"
    }
  ]
}

Respuesta de Confirmación

{
  "type": "fx_config_confirmation",
  "status": "success",
  "message": "Configuraciones recibidas y procesadas correctamente",
  "timestamp": "2024-08-08T15:30:01.000Z",
  "user_id": 1,
  "configs_processed": 2,
  "configurations": [...]
}

---

📊 Base de Datos

Diagrama ER Simplificado

users ----< user_instrument_configs >---- instruments
  |              |
  |              |
  v              v
notifications  websocket_submissions

Tablas Principales

users

• Almacena credenciales y datos de usuarios
• Contraseñas hasheadas con password_hash()

instruments

• Instrumentos FX disponibles (USD/ARS, EUR/USD, etc.)
• Base currency y quote currency

user_instrument_configs

• Configuraciones personalizadas por usuario/instrumento
• Precio objetivo, cantidad, tipo de operación

websocket_submissions

• Historial de envíos por WebSocket
• Status de procesamiento y datos JSON

notifications

• Sistema de notificaciones por usuario
• Tipos: success, error, info, warning

---

Testing y Validación

Casos de Prueba Principales

1. Autenticación

• ✅ Login exitoso con credenciales válidas
• ✅ Rechazo con credenciales inválidas
• ✅ Redirección automática al dashboard
• ✅ Protección de rutas sin autenticación

2. Visualización de Datos

• ✅ Carga de instrumentos FX
• ✅ Actualización automática cada 5 segundos
• ✅ Formato correcto de precios (4 decimales)
• ✅ Separadores de miles en cantidades

3. Configuración de Parámetros

• ✅ Inputs por instrumento individual
• ✅ Validación de campos requeridos
• ✅ Persistencia entre sesiones
• ✅ Indicación visual de errores

4. Comunicación WebSocket

• ✅ Conexión automática al cargar dashboard
• ✅ Envío de configuraciones en JSON estructurado
• ✅ Recepción de confirmaciones del servidor
• ✅ Manejo de desconexiones

5. Sistema de Notificaciones

• ✅ Notificaciones de éxito/error
• ✅ Timestamps automáticos
• ✅ Auto-eliminación después de 30 segundos
• ✅ Categorización por colores

Procedimiento de Testing

1. Iniciar todos los servicios (Laragon + WebSocket)
2. Login con trader1 → Verificar configuraciones precargadas
3. Modificar parámetros → Enviar por WebSocket
4. Cerrar sesión → Login con trader2
5. Verificar aislamiento de datos entre usuarios
6. Probar desconexión WebSocket → Reconexión automática

---

Configuración Avanzada

Variables de Entorno

$DB_CONFIG = [
    'host' => $_ENV['DB_HOST'] ?? 'localhost',
    'name' => $_ENV['DB_NAME'] ?? 'fx_platform',
    'user' => $_ENV['DB_USER'] ?? 'root',
    'pass' => $_ENV['DB_PASS'] ?? ''
];

$WS_CONFIG = [
    'host' => $_ENV['WS_HOST'] ?? 'localhost',
    'port' => $_ENV['WS_PORT'] ?? 8080
];

Logs del Sistema

• PHP: error_log() para errores de BD y autenticación
• Python: Logger configurado para conexiones WebSocket
• JavaScript: Console.log para debugging del frontend

---

Docker

Levantar servicios

docker compose up --build

Comandos Docker

# Levantar proyecto
docker compose up

# Detener
docker compose down

---

Autor

Desarrollado por: Leandro Signorini

Email: signorinileandro@gmail.com