✕

Buscar en Ladrillera Colombia

Encuentra ladrillos, bloques, servicios y más...

Guía de Configuración de Firebase

Esta guía te llevará paso a paso para configurar Firebase y conectarlo con tu sistema de quiz modal.

Paso 1: Crear Proyecto en Firebase

  1. Ve a Firebase Console
  2. Haz clic en “Agregar proyecto” o “Add project”
  3. Ingresa un nombre para tu proyecto (ejemplo: “mi-sitio-quizzes”)
  4. (Opcional) Puedes desactivar Google Analytics si no lo necesitas
  5. Haz clic en “Crear proyecto”

Paso 2: Registrar tu Aplicación Web

  1. En la página principal de tu proyecto, haz clic en el ícono web </>
  2. Ingresa un nombre para tu app (ejemplo: “Quiz Modal”)
  3. NO marques “Firebase Hosting” (ya tienes GitHub Pages)
  4. Haz clic en “Registrar app”

Paso 3: Obtener las Credenciales

Verás un código similar a este:

const firebaseConfig = {
  apiKey: "AIzaSyXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
  authDomain: "tu-proyecto.firebaseapp.com",
  projectId: "tu-proyecto",
  storageBucket: "tu-proyecto.appspot.com",
  messagingSenderId: "123456789012",
  appId: "1:123456789012:web:abcdef123456",
};

IMPORTANTE: Copia estos valores, los necesitarás en el siguiente paso.

Paso 4: Configurar las Credenciales en tu Sitio

  1. Abre el archivo _includes/js/firebase-config.js
  2. Reemplaza los valores de firebaseConfig con los tuyos:
const firebaseConfig = {
  apiKey: "TU_API_KEY_AQUI",
  authDomain: "TU_PROJECT_ID.firebaseapp.com",
  projectId: "TU_PROJECT_ID",
  storageBucket: "TU_PROJECT_ID.appspot.com",
  messagingSenderId: "TU_MESSAGING_SENDER_ID",
  appId: "TU_APP_ID",
};

Paso 5: Habilitar Firestore Database

  1. En el menú lateral de Firebase Console, haz clic en “Firestore Database”
  2. Haz clic en “Crear base de datos” o “Create database”
  3. Selecciona “Comenzar en modo de prueba” (Start in test mode)
  4. Elige una ubicación cercana a tus usuarios (ejemplo: us-east1 para Colombia)
  5. Haz clic en “Habilitar”

Paso 6: Configurar Reglas de Seguridad

Por defecto, las reglas de prueba permiten lectura/escritura por 30 días. Necesitas configurar reglas más seguras:

  1. En Firestore Database, ve a la pestaña “Reglas” (Rules)
  2. Reemplaza las reglas con estas:
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // Permitir que cualquiera escriba en quiz-submissions
    match /quiz-submissions/{document} {
      allow create: if true;
      allow read, update, delete: if request.auth != null;
    }
  }
}
  1. Haz clic en “Publicar” (Publish)

Explicación de las reglas:

Paso 7: Habilitar Authentication

Para proteger el dashboard de administración:

  1. En el menú lateral, haz clic en “Authentication”
  2. Haz clic en “Comenzar” o “Get started”
  3. En la pestaña “Sign-in method”, habilita “Correo electrónico/contraseña”
  4. Haz clic en “Guardar”

Paso 8: Crear Usuario Administrador

  1. En Authentication, ve a la pestaña “Users”
  2. Haz clic en “Agregar usuario” (Add user)
  3. Ingresa tu email y contraseña
  4. Haz clic en “Agregar usuario”

IMPORTANTE: Guarda estas credenciales, las necesitarás para acceder al dashboard.

Paso 9: Agregar Scripts de Firebase a tu Sitio

En tu archivo _includes/head.html, agrega estos scripts ANTES de tus scripts personalizados:

<!-- Firebase SDK -->
<script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-auth-compat.js"></script>

<!-- Quiz Modal Scripts -->
<script src="/js/firebase-config.js"></script>
<script src="/js/quiz-modal.js"></script>

Paso 10: Crear Índices (Opcional pero Recomendado)

Para queries más eficientes en el dashboard:

  1. En Firestore Database, ve a la pestaña “Índices” (Indexes)
  2. Haz clic en “Crear índice” (Create index)
  3. Configura:
    • Colección: quiz-submissions
    • Campos a indexar:
      • quizId - Ascendente
      • createdAt - Descendente
    • Estado de consulta: Habilitado
  4. Haz clic en “Crear”

Repite para otro índice:

Paso 11: Verificar la Configuración

  1. Abre tu sitio web en el navegador
  2. Abre la consola del navegador (F12)
  3. Deberías ver: “Firebase initialized successfully”
  4. Completa un quiz de prueba
  5. Ve a Firebase Console > Firestore Database
  6. Deberías ver una nueva entrada en la colección quiz-submissions

Configuración para GitHub Pages

Firebase funciona perfectamente con sitios estáticos en GitHub Pages. No necesitas configurar nada adicional en GitHub Pages.

Consideraciones Importantes:

  1. Seguridad de API Keys: Las API keys de Firebase son seguras para uso público en el frontend. Firebase usa reglas de seguridad en el backend para proteger los datos.

  2. Límites del Plan Gratuito (Spark):

    • 50,000 lecturas/día
    • 20,000 escrituras/día
    • 20,000 eliminaciones/día
    • 1 GB de almacenamiento
    • 10 GB de transferencia/mes

    Esto es más que suficiente para la mayoría de sitios web pequeños y medianos.

  3. Monitoreo de Uso:

    • Ve a Firebase Console > Usage and billing
    • Configura alertas para recibir notificaciones si te acercas a los límites

Solución de Problemas

Error: “Firebase not initialized”

Solución: Verifica que los scripts de Firebase estén cargando antes que firebase-config.js y quiz-modal.js.

Error: “Permission denied”

Solución: Revisa las reglas de seguridad en Firestore. Asegúrate de que permitan create sin autenticación.

Los datos no aparecen en Firestore

Solución:

  1. Abre la consola del navegador (F12)
  2. Busca errores en rojo
  3. Verifica que las credenciales en firebase-config.js sean correctas
  4. Asegúrate de que Firestore esté habilitado

Error de CORS

Solución: Firebase maneja CORS automáticamente. Si ves este error, verifica que estés usando las URLs correctas de Firebase.

Próximos Pasos

Una vez configurado Firebase:

  1. ✅ Prueba el quiz en tu sitio
  2. ✅ Verifica que los datos se guarden en Firestore
  3. ✅ Configura el dashboard de administración (próxima guía)
  4. ✅ Personaliza los mensajes y preguntas del quiz

Recursos Adicionales

¿Necesitas ayuda? Revisa la sección de solución de problemas o contacta al desarrollador.