# Google OAuth
G_OAUTH_CLIENT_ID=tu_client_id.apps.googleusercontent.com
G_OAUTH_CLIENT_SECRET=tu_client_secret

# Supabase
SUPABASE_URL=LINK_TO_YOUR_SUPABASE_INSTANCE
SUPABASE_ANON_KEY=KEY_FOR_ANON_ACCESS
SUPABASE_SERVICE_KEY=KEY_FOR_SERVICE_ACCESS

📝 Nota: Las credenciales de Supabase las obtienes creando un proyecto gratuito en supabase.com y en Google OAuth

⏰ POSDATA: En el proyecto que he enviado al Tutor tiene los archivos .env + usuario.md con las credenciales del usuario admin para accder como admnistrador a la aplicación , para no tener que crear todas las credenciales de nuevo. Ojo, si realizas la instalacion con el incio rapido clonando el repositorio, hay no los encontraras .env + usuario.md, solo estan disponibles para el Tutor . Igualmente si quieres crear tus propias credenciales de Supabase y Google OAuth puedes seguir los siguientes tutoriales:

➡️ Tutorial Credenciales Supabase ➡️ Tutorial Credenciales Google OAuth

# Tutoriales Disponibles

# Tutoriales Backend y autenticación

• 🔑 Supabase | Configuración de autenticación |
• 👑 Tutorial:Login con Rol Admin / para Supabase - Asignar rol de admin
• 🔗 Google OAuth | Configuración de login con Google |

# Tutoriales Mapas y geolocalización

• 📍 API Nominatim | Geocodificación de direcciones |
• 🗺️ Leaflet | Librería de mapas interactivos |
• 🌎 OpenStreetMap | Mapas gratuitos y código abierto |

# Tutorial Mobile Android APK

• 📱 Tutorial: APK Android con Capacitor - Cómo crear y configurar la APK |

# Tutoriales

• 📊 Tutorial: Panel Admin - Gestión de reportes
• 🚀 Tutorial: Despliegue Namecheap - Publicar en producción

# Guías

• 🔓 Tutorial: Autenticación - Cómo funciona el login
• 📝 Tutorial: Crear Reporte - Guía paso a paso
• 🔌 Tutorial: API Endpoints - Referencia de APIs
• 🎨 Tutorial: Estilos CSS - Personalización de estilos

# Arquitectura

• 📐 Arquitectura MVC

# Glosario de términos

• 📚 Glosario de Términos | Diccionario de términos técnicos |

# Scripts Útiles

# Ver estado de Git
git status

# Subir cambios
git add .
git commit -m "descripción del cambio"
git push

# Tecnologías

# Estructura del Proyecto

UrbanManager/
│
├── 📁 public/                       # Punto de entrada público
│   ├── index.php                    # Front Controller (enrutador principal)
│   ├── .htaccess                    # Configuración de reescritura de URL
│   ├── 📁 assets/                   # Recursos estáticos
│   │   ├── 📁 css/
│   │   │   ├── style.css            # Estilos compilados (Tailwind + personalizado)
│   │   │   └── tailwind.css         # Archivo fuente de Tailwind (no modificar)
│   │   ├── 📁 js/
│   │   │   ├── 📁 admin/
│   │   │   │   └── adminDashboard.js      # Lógica del dashboard admin
│   │   │   └── 📁 user/
│   │   │       ├── userDashboard.js       # Lógica del dashboard usuario
│   │   │       ├── userReport.js          # Lógica para crear/editar reportes
│   │   │       └── userProfile.js         # Lógica para editar perfil
│   │   └── 📁 img/
│   ├── 📁 uploads/reports/             # Almacenamiento de archivos subidos
│   ├── 📁 apk/                         # APK de la aplicación Android
│   │   └── urbanmanager.apk
│   ├── 📁 auth/                        # Puntos de entrada para autenticación
│   └── 📁 views/                       # Puntos de entrada para vistas
│
├── 📁 src/                         # Código fuente (no accesible desde web)
│   ├── 📁 Config/                  # Configuración del proyecto
│   │   ├── database.php            # Conexión a MySQL
│   │   ├── supabase.php            # Configuración de Supabase
│   │   └── env.php                 # Variables de entorno
│   │
│   ├── 📁 Controllers/             # Controladores de la API REST
│   │   ├── _auth.php               # Autenticación común (se incluye en todas las APIs)
│   │   ├── reports.php             # API de reportes (CRUD)
│   │   ├── profile.php             # API de perfil de usuario
│   │   ├── media.php               # API de medios (fotos)
│   │   ├── user.php                # API de gestión inicial de usuario
│   │   ├── refresh.php             # API de auto-refresh del panel admin
│   │   └── AuthController.php      # Controlador de autenticación
│   │
│   ├── 📁 Middleware/              # Middlewares de seguridad
│   │   ├── AuthMiddleware.php      # Verificación de autenticación
│   │   └── AdminMiddleware.php     # Verificación de rol admin
│   │
│   ├── 📁 Views/                   # Vistas PHP (HTML + PHP)
│   │   ├── 📁 admin/
│   │   │   └── AdminDashboardView.php
│   │   ├── 📁 auth/
│   │   │   ├── login.php
│   │   │   ├── callback.php
│   │   │   └── logout.php
│   │   └── 📁 user/
│   │       ├── UsuarioDashboardView.php
│   │       ├── profileModal.php
│   │       ├── reportModal.php
│   │       └── 📁 components/
│   │           └── report-card.php
│   │
│   ├── 📁 Layout/                  # Componentes reutilizables
│   │   ├── header.php
│   │   ├── footer.php
│   │   └── navigation.php
│   │
│   ├── 📁 Helpers/                 # Funciones auxiliares
│   │   └── mapeos.php
│   │
│   └── Router.php                   # Enrutador centralizado
│
├── 📁 routes/                      # Definición de rutas de la API
│   └── web.php
│
├── 📁 android/                     # Proyecto Android (Capacitor)
│   └── android/
│
├── 📁 sql/                         # Scripts de base de datos
│   └── urba.sql
│
├── 📁 docs/                        # Documentación del proyecto
│   ├── anexo.md
│   ├── tutoriales/
│   ├── referencias/
│   └── ...
│
├── tailwind.config.js               # Configuración de Tailwind
├── package.json                     # Dependencias npm
├── .env                             # Variables de entorno (NO subir a Git)
└── LICENSE.md                       # Licencia del proyecto

# Requisitos

# Cómo Funciona

# 🔐 Flujo de Autenticación

Usuario → Login.php → Supabase OAuth → Callback.php → Dashboard

1. Usuario hace clic en "Iniciar sesión con Google"
2. Supabase verifica las credenciales
3. Callback.php crea/actualiza el usuario en MySQL
4. Redirige al dashboard correspondiente (usuario)
5. Para crear un usuario con rol de admin . → Tutorial: Rol Admin

# 📝 Flujo de un Reporte

1. Ciudadano crea reporte → POST /src/Controllers/reports.php
2. Imagen se guarda → POST /src/Controllers/media.php  
3. Admin ve el reporte → GET /src/Controllers/refresh.php
4. Admin cambia estado → POST /src/Controllers/reports.php

# 🏗️ Arquitectura MVC Simplificada

┌─────────────────────────────────────────────────┐
│  VISTA (Views)                                  │
│  - Archivos .php con HTML                       │
│  - Muestran la interfaz al usuario              │
│  Ubicación: src/Views/                          │
├─────────────────────────────────────────────────┤
│  CONTROLADOR (API)                              │
│  - public/api/*.php                             │
│  - Reciben peticiones y devuelven JSON          │
│  Ubicación: public/api/                         │
├─────────────────────────────────────────────────┤
│  MODELO (Database)                              │
│  - src/Config/database.php                      │
│  - Consultas SQL directas (sin ORM)             │
│  Ubicación: src/Config/                         │
└─────────────────────────────────────────────────┘

# 📝 Convenciones de Código

# 📜 Variables (JavaScript)

// camelCase para variables
let reporteIdActual = 0;
let totalReportes = 10;

// MAYÚSCULAS para constantes
const MAXIMO_INTENTOS = 3;
const API_URL = '/urbanmanager/api/';

# ⚙️ Funciones (JavaScript)

// verbo + acción en español
async function obtenerReportes() { ... }
function mostrarModal() { ... }
function calcularTotales() { ... }

# 🐘 Variables (PHP)

// snake_case para variables PHP
$usuario_actual = 'Juan';

// camelCase también válido
$usuarioActual = 'Juan';

# 💬 Comentarios

/* Comentario multilinea estilo C */
// Comentario de una línea

# ⚠️ Archivos Importantes

# Licencia

Este proyecto está bajo licencia de Uso Privado con Attribution-NoCommercial-ShareAlike (BY-NC-SA).

Para más detalles sobre los términos de uso, restricciones y condiciones, consulte el archivo LICENSE.md.

Resumen de la licencia:

• ✅ Permitido: Uso personal y aprendizaje
• ✅ Permitido: Compartir y adaptar el material con Attribution
• ❌ Prohibido: Uso comercial sin autorización
• ❌ Prohibido: Distribución no autorizada

# Autor

# 👨‍💻 **Iván Bazaga**

Desarrollador Frontend especializado en Angular y ecosistemas web modernos. Estudiante intermedio con pasión por crear aplicaciones web modernas y eficientes.

# 📞 Información de Contacto

# 🧰 Stack Tecnológico de Especialización

Frontend: Java SpringBoot • Astro • Angular 20 • TypeScript • RxJS • Bootstrap 5 • HTML5 • CSS3
Backend: PHP 8.x • Node.js • Express • MySQL
Tools: Angular CLI • Git • VS Code • Prettier • npm
Learning: NgRx • PWA • Oracle • Supabase

© 2026 Iván Bazaga. Todos los derechos reservados.