Saltar al contenido principal

Desarrollo

Guía para desarrollar en Floutic.

Flujo de Trabajo Recomendado​

1. Iniciar el Entorno​

./start-dev.sh

2. Verificar que Todo Funciona​

./status-dev.sh

3. Desarrollar​

  • Backend: Edita archivos en backend/ y los cambios se reflejan automáticamente
  • Frontend: Edita archivos en frontend/ y los cambios se reflejan automáticamente
  • Documentación: Edita archivos en docs-site/docs/ y reconstruye el sitio

4. Ejecutar Tests​

# Tests del backend
./test-dev.sh

# Tests del frontend
./scripts/test_frontend_unit.sh
./scripts/test_e2e.sh

5. Detener el Entorno​

./stop-dev.sh

Estructura del Proyecto​

floutic/
├── backend/          # API FastAPI
├── frontend/        # Frontend Astro + React
├── docs-site/       # Documentación Docusaurus
├── docs/            # Documentación en Markdown
└── scripts/         # Scripts de utilidades

Desarrollo del Backend​

Estructura​

backend/
├── app/
│   ├── api/v1/endpoints/  # Endpoints de la API
│   ├── models/            # Modelos de base de datos
│   ├── schemas/            # Esquemas Pydantic
│   ├── services/           # Servicios de negocio
│   └── core/               # Configuración
├── alembic/                # Migraciones
└── tests/                  # Tests

Comandos Útiles​

# Ejecutar migraciones
docker compose exec backend alembic upgrade head

# Crear nueva migración
docker compose exec backend alembic revision --autogenerate -m "descripción"

# Ver logs
docker compose logs -f backend

# Acceder al shell
docker compose exec backend bash

Desarrollo del Frontend​

Estructura​

frontend/
├── src/
│   ├── components/    # Componentes React
│   ├── pages/        # Páginas Astro
│   ├── layouts/      # Layouts
│   ├── stores/       # Stores Zustand
│   └── lib/          # Utilidades
└── tests/            # Tests

Comandos Útiles​

# Ver logs
docker compose logs -f frontend

# Acceder al shell
docker compose exec frontend bash

# Ejecutar tests
docker compose exec frontend npm test

Desarrollo de Documentación​

Estructura​

docs-site/
├── docs/            # Archivos Markdown/MDX
├── src/             # Componentes React personalizados
└── static/          # Archivos estáticos

Comandos Útiles​

# Reconstruir documentación
docker compose exec docs npm run build

# Ver documentación localmente
docker compose exec docs npm run start

Debugging​

Backend​

# Ver logs en tiempo real
docker compose logs -f backend

# Acceder a la base de datos
docker compose exec postgres psql -U ${POSTGRES_USER} -d ${POSTGRES_DB}

# Verificar Redis
docker compose exec redis redis-cli

Frontend​

# Ver logs en tiempo real
docker compose logs -f frontend

# Inspeccionar en el navegador
# Abre DevTools en http://localhost:3000

Próximos Pasos​