Menú Cerrar

Firebase: guía práctica completa para la Web, Android e iOS | Crear Aplicaciones Web

0 comentarios
Todo lo que necesitas para evaluar, configurar y construir con Firebase incluyendo Web Apps: servicios clave, ejemplos de código listos para copiar, reglas de seguridad, despliegue y mejores prácticas.

Enlace oficial: firebase.google.com

¿Qué es Firebase y cuándo usarlo?

Firebase es una plataforma de Google que acelera el desarrollo de aplicaciones web y móviles al ofrecer servicios administrados como autenticación, base de datos en tiempo real, Firestore, almacenamiento de archivos, funciones serverless, hosting, analítica, mensajería push y más. Su propuesta “Backend as a Service” te permite enfocarte en la experiencia de usuario, delegando infraestructura y operaciones.

Casos ideales

  • MVPs y prototipos: lanzar rápido con autenticación y datos persistentes sin montar servidores.
  • Apps en tiempo real: chats, tableros, colaboraciones y dashboards actualizados al instante.
  • Equipos pequeños: menos DevOps, más foco en producto.

Cuándo considerar alternativas

  • Consultas complejas: si dependes de joins avanzados o reporting pesado, evalúa un data warehouse o una base relacional aparte.
  • Reglas de compliance estrictas: revisa ubicación de datos, cifrado y certificaciones, o combina con otros servicios de Google Cloud.
  • Lock-in: si la portabilidad absoluta es crítica, define una capa de abstracción desde el inicio.

Arquitectura y servicios clave

Autenticación (Authentication)

Proveedores listos (Email/Password, Google, Apple, Facebook, etc.), gestión de sesiones segura y SDKs para Web, Android e iOS.

Base de datos: Firestore vs Realtime Database

Característica Cloud Firestore Realtime Database
Modelo Documentos y colecciones Árbol JSON
Consultas Compuestas, indexadas Básicas, por ruta
Escalabilidad Alta, global Alta, por árbol
Tiempo real Sí (listeners) Sí (suscripciones)

Storage

Almacenamiento de archivos con URLs firmadas, reglas de acceso y soporte para grandes volúmenes de datos.

Cloud Functions

Backend serverless que responde a eventos (HTTP, Firestore, Auth, Storage, etc.) sin administrar servidores.

Hosting

CDN global, HTTPS por defecto, soporte a SPA y previews por canal.

Otros servicios

  • Remote Config y A/B Testing: activa o desactiva features y experimenta sin publicar versiones nuevas.
  • Analytics: métricas de uso, embudo, retención e ingresos.
  • App Check: protege recursos de abuso (bots, emuladores no autorizados).
  • Emulator Suite: prueba localmente sin costo ni riesgo.

Configuración inicial para Web

  1. Crea un proyecto: en Firebase Console.
  2. Registra tu app web: obtiene el objeto de configuración (apiKey, authDomain, projectId, etc.).
  3. Elige SDK: modular (recomendado) vía NPM o CDN.

Opción CDN (rápida para prototipos)

<!-- index.html -->
<script type="module">
  // 1) Importa SDKs (usar versión estable actual)
  import { initializeApp } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-app.js";
  import { getAuth, GoogleAuthProvider, signInWithPopup, onAuthStateChanged, signOut } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-auth.js";
  import { getFirestore, collection, addDoc, getDocs, query, where, orderBy, limit, serverTimestamp } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-firestore.js";
  import { getStorage, ref, uploadBytes, getDownloadURL } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-storage.js";

  // 2) Configuración del proyecto (reemplaza con la tuya)
  const firebaseConfig = {
    apiKey: "TU_API_KEY",
    authDomain: "tu-proyecto.firebaseapp.com",
    projectId: "tu-proyecto",
    storageBucket: "tu-proyecto.appspot.com",
    messagingSenderId: "XXXXXXXXXXXX",
    appId: "1:XXXXXXXXXXXX:web:XXXXXXXXXXXXXX"
  };

  // 3) Inicializa
  const app = initializeApp(firebaseConfig);
  const auth = getAuth(app);
  const db = getFirestore(app);
  const storage = getStorage(app);

  // 4) Ejemplo: login con Google
  const provider = new GoogleAuthProvider();
  async function loginConGoogle() {
    await signInWithPopup(auth, provider);
  }

  onAuthStateChanged(auth, (user) => {
    if (user) {
      console.log("Autenticado:", user.displayName);
    } else {
      console.log("Sesión cerrada");
    }
  });

  async function cerrarSesion() {
    await signOut(auth);
  }

  // 5) Ejemplo: crear documento en Firestore
  async function crearPost(titulo, contenido) {
    const postsRef = collection(db, "posts");
    await addDoc(postsRef, {
      titulo,
      contenido,
      createdAt: serverTimestamp()
    });
  }

  // 6) Ejemplo: consultar posts más recientes
  async function listarPosts() {
    const postsRef = collection(db, "posts");
    const q = query(postsRef, orderBy("createdAt", "desc"), limit(10));
    const snap = await getDocs(q);
    return snap.docs.map(d => ({ id: d.id, ...d.data() }));
  }

  // 7) Ejemplo: subir archivo a Storage
  async function subirArchivo(file) {
    const destino = ref(storage, `uploads/${Date.now()}-${file.name}`);
    await uploadBytes(destino, file);
    return await getDownloadURL(destino);
  }

  // Exponer funciones si lo necesitas (demo)
  window.demo = { loginConGoogle, cerrarSesion, crearPost, listarPosts, subirArchivo };
</script>

Opción NPM (para proyectos con bundler)

# Instala
npm install firebase

// main.js
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const storage = getStorage(app);

Autenticación

Habilita proveedores en Firebase Console > Authentication. En Web, usa el SDK modular para crear flujos con pop-ups o redirecciones.

// Email/Password
import { createUserWithEmailAndPassword, signInWithEmailAndPassword } from "firebase/auth";

async function registrar(email, password) {
  const { user } = await createUserWithEmailAndPassword(auth, email, password);
  return user;
}

async function iniciarSesion(email, password) {
  const { user } = await signInWithEmailAndPassword(auth, email, password);
  return user;
}

Para apps móviles, integra los SDK nativos (Android/iOS) con el mismo proyecto para compartir usuarios y reglas.

Base de datos: Firestore

CRUD básico

import { doc, getDoc, setDoc, updateDoc, deleteDoc } from "firebase/firestore";

async function leerPost(id) {
  const snap = await getDoc(doc(db, "posts", id));
  return snap.exists() ? { id: snap.id, ...snap.data() } : null;
}

async function crearPostConId(id, data) {
  await setDoc(doc(db, "posts", id), { ...data, createdAt: serverTimestamp() });
}

async function actualizarPost(id, data) {
  await updateDoc(doc(db, "posts", id), { ...data, updatedAt: serverTimestamp() });
}

async function eliminarPost(id) {
  await deleteDoc(doc(db, "posts", id));
}

Reglas de seguridad (ejemplo)

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // Lectura pública de /public/*
    match /public/{document=**} {
      allow read: if true;
      allow write: if request.auth != null;
    }

    // Propiedad por usuario: /users/{userId}/posts/{postId}
    match /users/{userId}/posts/{postId} {
      allow read: if true;
      allow create: if request.auth != null && request.auth.uid == userId;
      allow update, delete: if request.auth != null && request.auth.uid == userId;
    }

    // Colección general de posts (si no hay separación por usuario)
    match /posts/{postId} {
      allow read: if true;
      allow create, update, delete: if request.auth != null;
    }
  }
}

Índices

Consultas compuestas requieren índices. La consola sugiere el índice al detectar errores; crea solo los necesarios para controlar costos.

Almacenamiento de archivos (Storage)

Usa rutas por usuario/proyecto y valida accesos con reglas.

Reglas (ejemplo)

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /uploads/{allPaths=**} {
      allow read: if true; // o restringe según tu caso
      allow write: if request.auth != null;
    }
  }
}

Hosting y despliegue

  1. Instala CLI: npm i -g firebase-tools
  2. Login: firebase login
  3. Inicializa: firebase init hosting (elige proyecto y carpeta de distribución)
  4. Build (si aplica): npm run build
  5. Deploy: firebase deploy --only hosting

Para SPA, agrega un rewrite a /index.html en firebase.json para manejar rutas del lado del cliente.

{
  "hosting": {
    "public": "dist",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [{ "source": "**", "destination": "/index.html" }]
  }
}

Cloud Functions (backend serverless)

Ideal para lógica sensible, integraciones de terceros, webhooks y tareas programadas.

HTTP onRequest (Node.js)

# En el directorio del proyecto
firebase init functions
# Elige Node LTS y TypeScript si prefieres

// functions/src/index.ts
import { onRequest } from "firebase-functions/v2/https";
export const apiStatus = onRequest((req, res) => {
  res.status(200).json({ ok: true, ts: Date.now() });
});

// Despliega
firebase deploy --only functions

Mensajería Push (FCM) en la web

Requiere permisos del navegador y un Service Worker. Úsalo para notificaciones transaccionales o re-engagement.

Client

import { getMessaging, getToken, onMessage } from "firebase/messaging";

const messaging = getMessaging(app);
// Clave VAPID pública configurada en Firebase Console
const vapidKey = "TU_CLAVE_VAPID_PUBLICA";

async function solicitarPermiso() {
  const status = await Notification.requestPermission();
  if (status === "granted") {
    const token = await getToken(messaging, { vapidKey });
    console.log("FCM token:", token);
  }
}
onMessage(messaging, (payload) => {
  console.log("Notificación recibida en foreground:", payload);
});

Service Worker

// firebase-messaging-sw.js
importScripts("https://www.gstatic.com/firebasejs/10.12.2/firebase-app-compat.js");
importScripts("https://www.gstatic.com/firebasejs/10.12.2/firebase-messaging-compat.js");

firebase.initializeApp({
  apiKey: "TU_API_KEY",
  authDomain: "tu-proyecto.firebaseapp.com",
  projectId: "tu-proyecto",
  messagingSenderId: "XXXXXXXXXXXX",
  appId: "1:XXXXXXXXXXXX:web:XXXXXXXXXXXXXX"
});

const messaging = firebase.messaging();
messaging.onBackgroundMessage((payload) => {
  self.registration.showNotification(payload.notification.title, {
    body: payload.notification.body,
    icon: "/icon.png"
  });
});

Seguridad y mejores prácticas

  • Reglas primero: escribe, prueba y versiona reglas de Firestore/Storage; usa el Emulador para validarlas.
  • Principio de mínimo privilegio: solo lo necesario para cada ruta/colección.
  • Validación en reglas: tipa campos, tamaños y ownership; no confíes solo en el cliente.
  • Separación de entornos: proyectos Dev/Staging/Prod con datos y claves distintas.
  • App Check: activa para proteger recursos de abuso automatizado.
  • Claves del cliente: la apiKey no es secreta, pero sí restringe acceso vía reglas y dominios autorizados.
  • Observabilidad: usa Analytics, Performance y logs de Functions para detectar problemas temprano.

Costos y planificación

  • Modelo: capa gratuita útil para desarrollo; en producción pagas por uso (lecturas/escrituras, almacenamiento, egress).
  • Presupuestos y alertas: configúralos en Google Cloud para evitar sorpresas.
  • Optimiza lecturas: indexa lo justo, pagina resultados y usa caché en cliente.
  • Batch y colas: consolida escrituras y usa Functions para tareas costosas.

Herramientas para desarrollo local

Emulator Suite te permite probar Auth, Firestore, Storage, Functions y Hosting localmente.

# Instala herramientas
npm i -g firebase-tools

# Emuladores
firebase init emulators
firebase emulators:start

# Ejecuta tests contra emuladores con variables de entorno
FIRESTORE_EMULATOR_HOST=localhost:8080
FIREBASE_AUTH_EMULATOR_HOST=localhost:9099

Recursos recomendados

Conclusión

Firebase reduce la complejidad operativa y acelera el time-to-market con un conjunto de servicios integrados, seguros y escalables. Empieza por autenticación y Firestore, define reglas sólidas, automatiza con Functions y despliega en Hosting. Con el Emulador y buenas prácticas de seguridad/costos, podrás iterar rápido y crecer con confianza.

Explora más en firebase.google.com.

Vistas 27
Publicado en Soporte Tecnico
Etiquetados ,

Te puede interesar...

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


COMPARTIR
Copiar enlace
×