🎓 Gem Academy

📋 Índice

• Descripción
• Estructura del Proyecto
• Requisitos Previos
• Instalación
• Configuración
• Uso
• Desarrollo
• Autenticación
• Variables de Entorno
• Resolución de Problemas Comunes

🎯 Descripción

Gem Academy es una plataforma educativa que permite a los usuarios desempeñar roles tanto de profesor como de estudiante. El proyecto está construido con una arquitectura moderna utilizando Symfony en el backend y React en el frontend.

📁 Estructura del Proyecto

gemacademy/
├── backend/                 # Backend Symfony
│   ├── config/             # Configuraciones de Symfony
│   ├── migrations/         # Migraciones de base de datos
│   ├── public/             # Punto de entrada público
│   ├── src/                # Código fuente
│   │   ├── Controller/     # Controladores de la API
│   │   ├── Entity/         # Entidades de la base de datos
│   │   ├── Repository/     # Repositorios de datos
│   │   ├── Service/        # Servicios de la aplicación
│   │   └── DataFixtures/   # Datos de prueba
│   └── tests/              # Pruebas unitarias
│
└── frontend/               # Frontend React
    ├── public/             # Archivos estáticos
    │   ├── src/                # Código fuente
    │   ├── components/     # Componentes React
    │   ├── context/        # Contextos de React
    │   ├── utils/          # Utilidades y helpers
    │   └── styles/         # Estilos CSS
    └── images/             # Imágenes y assets

⚙️ Requisitos Previos

• PHP 8.2 o superior
• Composer
• Node.js v22.12.0 o superior
• MySQL 10.4.32 o superior
• OpenSSL (para JWT)
• Extensión PHP para JWT

Instalación de scoop y symfony

Recomiendo buscar info además en internet Enlace_al_docx

Instalación node

Recomiendo buscar info además en internet descargar_node

Instalación de OpenSSL

Windows

1. Descarga el instalador de OpenSSL desde Win32/Win64 OpenSSL
2. Ejecuta el instalador y sigue las instrucciones
3. Añade la ruta de OpenSSL a las variables de entorno del sistema

Linux

sudo apt-get update
sudo apt-get install openssl

macOS

brew install openssl

🚀 Instalación

Backend (Symfony)

1. Instalar dependencias de Composer:

cd backend
composer install

2. Configurar la base de datos:

php bin/console doctrine:database:create
php bin/console doctrine:migrations:migrate

3. Cargar datos de prueba (opcional):

php bin/console doctrine:fixtures:load

4. Instalar el módulo de JWT si por alguna razón no lo está:

composer require lexik/jwt-authentication-bundle

5. Generar claves JWT:

php bin/console lexik:jwt:generate-keypair --skip-if-exists

Configuración de OpenSSL para JWT

Para la generación correcta de claves JWT, se requiere OpenSSL:

NOTA: Si al generar las claves JWT obtienes errores, probablemente necesites instalar o configurar OpenSSL.

Instalación de OpenSSL en Windows

1. Descarga el instalador desde la página oficial de OpenSSL
2. Importante: Instala la versión completa (no la Light):

   Win64 OpenSSL v3.5.0 EXE | MSI (280MB)
   

3. Sigue las instrucciones del instalador
4. Para una guía visual detallada, puedes consultar este tutorial

Configuración de PHP

Asegúrate de descomentar las siguientes extensiones en tu archivo php.ini:

extension=sodium
extension=openssl
extension=zip

Frontend (React)

1. Instalar dependencias:

cd frontend
npm install

⚡ Configuración

Simplemente recorte el ".example" de cada .env y modifica los valores según tu entorno

NOTA: No he compartido mi clave de aplicación, por lo tanto a la hora de registrar un nuevo usuario tendréis que crear la vuestra siguiendo el formato que hay en el ejemplo, ya que sino no enviará el código de confirmación y tendrás que acceder a él manualmente desde PHPMyadmin o como podáis

Backend

1. Copiar los archivos de configuración de entorno según corresponda:

   Para desarrollo:

   cp .env.example .env.local

   cp .env.dev.example .env.dev

   Para producción:

   cp .env.example .env
   # Modificar APP_ENV=prod en .env

2. Configurar las variables de entorno en el archivo correspondiente.

3. Para desarrollo local, ejecutar el servidor:

# Para acceder desde cualquier IP en la red local
php -S 0.0.0.0:8000 -t public

# O usando el servidor de Symfony
symfony server:start

Frontend

1. Copiar el archivo de configuración correspondiente:

   Para desarrollo:

   cp .env.development.example .env.development

   Para producción:

   cp .env.production.example .env.production

2. Configurar las variables de entorno en el archivo correspondiente.

3. Para desarrollo local:

cd frontend
npm run dev

🔐 Autenticación

El sistema utiliza JWT (JSON Web Tokens) para la autenticación. Las rutas protegidas en el frontend están implementadas usando un contexto de autenticación personalizado.

Estructura de Autenticación

• Backend: Utiliza el bundle lexik/jwt-authentication-bundle
• Frontend: Implementa un sistema de rutas protegidas usando ProtectedRoute.jsx

🌍 Variables de Entorno

El proyecto utiliza diferentes archivos de configuración según el entorno:

Backend

• .env: Configuración base con valores predeterminados
• .env.local: Configuración local que no se sube al repositorio
• .env.dev: Configuración específica para entorno de desarrollo
• .env.prod: Configuración específica para entorno de producción

Frontend

• .env.development: Configuración para entorno de desarrollo
• .env.production: Configuración para entorno de producción

Estos archivos contienen variables como URL de la API, URL del frontend, configuración de CORS y otras configuraciones específicas del entorno.

Ejemplos de configuración

Backend (.env.example)

# Symfony
APP_ENV=dev
APP_SECRET=your_secret_here

# Database
DATABASE_URL="mysql://user:password@127.0.0.1:3306/gem_academy_app?serverVersion=10.4.32-MariaDB&charset=utf8mb4"

# JWT
JWT_SECRET_KEY=%kernel.project_dir%/config/jwt/private.pem
JWT_PUBLIC_KEY=%kernel.project_dir%/config/jwt/public.pem
JWT_PASSPHRASE=your_passphrase_here

# CORS
CORS_ALLOW_ORIGIN='^https?://(localhost|127\.0\.0\.1|192\.168\.1\.)[0-9]+$'

# Mailer
MAILER_DSN=smtp://user:password@smtp.example.com:587

# Frontend URL
FRONTEND_URL=http://localhost:5173

Frontend (.env.example)

# API URL
VITE_API_URL=http://localhost:8000

🛠️ Resolución de Problemas Comunes

Error 500 después de hacer pull desde GitHub

Si después de hacer un git pull recibes errores 500, es posible que el nombre de la carpeta Service haya cambiado a service. Este es un problema común en sistemas que no distinguen mayúsculas y minúsculas (como Windows) versus sistemas que sí lo hacen (como Linux).

Solución:

1. Verificar si la carpeta src/service existe en lugar de src/Service:

ls ./backend/src

2. Si la carpeta está en minúscula, renombrarla:

# En Windows
mv ./backend/src/service ./backend/src/Service_temp
mv ./backend/src/Service_temp ./backend/src/Service

# En Linux/macOS
mv ./backend/src/service ./backend/src/Service

3. Asegurarse de que Git registre el cambio:

git config core.ignorecase false
git add ./backend/src/Service
git commit -m "Fix: Corrección del nombre de la carpeta Service"

🛠️ Desarrollo

Comandos Útiles

Backend

• Crear una nueva entidad:

php bin/console make:entity

• Crear una nueva migración:

php bin/console make:migration

• Actualizar el esquema de la base de datos:

php bin/console doctrine:schema:update --force

Frontend

• Ejecutar el linter:

npm run lint

• Construir para producción:

npm run build

📚 Archivos de Configuración Importantes

Backend

• config/packages/nelmio_cors.yaml: Configuración de CORS
• config/packages/lexik_jwt_authentication.yaml: Configuración de JWT
• config/routes.yaml: Definición de rutas de la API

Frontend

• vite.config.js: Configuración de Vite
• src/utils/axios.js: Configuración de Axios para peticiones HTTP

🤝 Contribución

1. Fork el proyecto
2. Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
3. Commit tus cambios (git commit -m 'Add some AmazingFeature')
4. Push a la rama (git push origin feature/AmazingFeature)
5. Abre un Pull Request

📝 Licencia

Este proyecto está bajo la Licencia MIT. Ver el archivo LICENSE para más detalles.