Fuego de datos
Educación
## Capítulo 1 – Visión General de la Plataforma Firebase
### Página 1 – Introducción a la Consola de Firebase y una aplicación web "Hello Firebase"
---
#### Objetivos de aprendizaje
Al final de esta página, el lector podrá:
1. Localizar y navegar la **Consola de Firebase**.
2. Definir los bloques de construcción principales de un proyecto Firebase (Proyecto, Aplicación, Autenticación, Base de datos en tiempo real, Cloud Firestore, Hosting, Cloud Functions).
3. Crear una aplicación web mínima que se conecte a un proyecto Firebase recién creado y muestre un mensaje sencillo obtenido de la **Base de datos en tiempo real** de la consola.
4. Identificar los errores comunes que los desarrolladores novatos encuentran al inicializar una aplicación Firebase.
5. Anticipar los próximos temas del capítulo, que profundizarán la comprensión de cada servicio y mostrarán cómo interactúan entre sí.
---
#### 1. La Consola de Firebase – Tu centro de desarrollo
La **Consola de Firebase** (https://console.firebase.google.com) es un panel basado en la web que agrupa todos los servicios de Firebase bajo un mismo paraguas visual. Sigue un modelo centrado en proyectos:
- **Proyecto** – El contenedor de nivel superior que agrupa todos los recursos (instancias de bases de datos, proveedores de autenticación, sitios de hosting, etc.).
- **Aplicación** – Una representación de una plataforma cliente específica (iOS, Android, Web) que vive dentro de un proyecto. Cada aplicación recibe un **objeto de configuración de Firebase** único (clave API, ID del proyecto, etc.).
- **Servicios** – Funcionalidades como Autenticación, Base de datos en tiempo real, Firestore, Hosting y Functions se habilitan a nivel de Proyecto y pueden ser accedidas por cualquier Aplicación dentro de ese Proyecto.
> **Ayuda visual** – Imagina la pantalla principal de la consola como un panel de control con mosaicos etiquetados *Authentication*, *Realtime Database*, *Firestore*, *Hosting*, *Functions* y *Analytics*. Al hacer clic en un mosaico se expande un panel que muestra detalles de configuración, estadísticas de uso y guías de inicio rápido.
**Punto de control 1** – La consola debe estar abierta, hacer clic en *Add project* y proporcionar el nombre **"hello‑firebase‑demo"**. Se debe anotar el ID del proyecto; aparecerá más adelante en el fragmento de configuración.
---
#### 2. Conceptos clave de un vistazo
| Concepto | Propósito | Caso de uso típico |
|----------|-----------|--------------------|
| **Authentication** | Gestionar usuarios y asegurar recursos | Inicio de sesión con email/contraseña, OAuth de Google |
| **Realtime Database** | Almacenamiento JSON de baja latencia | Chat en vivo, edición colaborativa |
| **Cloud Firestore** | Almacén de documentos estructurado y consultable | Catálogos de e‑commerce, analítica |
| **Hosting** | Despliegue de sitios estáticos con CDN | Páginas de aterrizaje, aplicaciones de una sola página |
| **Cloud Functions** | Lógica backend sin servidor activada por eventos | Redimensionado de imágenes, procesamiento de pagos |
Estos servicios están débilmente acoplados; un solo proyecto puede usar cualquier combinación. El ejemplo **Hello Firebase** tocará solo dos servicios (Hosting y Realtime Database) para mantener la curva de aprendizaje suave.
---
#### 3. Ejemplo práctico – Construyendo una aplicación web "Hello Firebase"
El objetivo es servir una página HTML estática desde Firebase Hosting que lea un saludo de la Realtime Database y lo muestre.
**Paso 1 – Habilitar Realtime Database**
1. En la consola, selecciona el mosaico *Realtime Database*.
2. Haz clic en **Create Database** → *Start in Test Mode* (permite lectura/escritura pública para este tutorial).
3. En la pestaña *Data*, agrega un nodo:
```json
{
"greeting": "Hello, Firebase!"
}
```
La consola muestra la URL de la Realtime Database (p. ej., `https://<PROJECT_ID>.firebaseio.com`). Firestore se accede mediante el SDK y no tiene una URL directa mostrada en la consola.
**Paso 2 – Instalar la CLI de Firebase**
```bash
npm install -g firebase-tools # Node.js debe estar instalado
firebase login # Autenticar con la cuenta de Google
```
**Paso 3 – Inicializar un proyecto local**
```bash
mkdir hello-firebase && cd hello-firebase
firebase init hosting # Elige el proyecto creado arriba
```
Cuando se solicite, acepta el directorio público predeterminado (`public`) y configúralo como una **aplicación de una sola página** – una aplicación web que carga una única página HTML y actualiza dinámicamente el contenido sin recargar toda la página.
**Paso 4 – Añadir el HTML y JavaScript**
Crea `public/index.html` con el siguiente contenido:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Hello Firebase</title>
<script src="https://www.gstatic.com/firebasejs/9.x.x/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.x.x/firebase-database-compat.js"></script>
</head>
<body>
<h1 id="msg">Loading…</h1>
<script>
// 1️⃣ Firebase configuration – copy from console > Project settings > General > Your apps
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "hello-firebase-demo.firebaseapp.com",
databaseURL: "https://hello-firebase-demo.firebaseio.com",
projectId: "hello-firebase-demo",
storageBucket: "hello-firebase-demo.appspot.com",
messagingSenderId: "YOUR_SENDER_ID",
appId: "YOUR_APP_ID"
};
// 2️⃣ Initialize Firebase
firebase.initializeApp(firebaseConfig);
// 3️⃣ Reference the "greeting" node and display it
const dbRef = firebase.database().ref('greeting');
dbRef.once('value')
.then(snapshot => {
document.getElementById('msg').textContent = snapshot.val();
})
.catch(err => {
console.error('Error fetching greeting:', err);
document.getElementById('msg').textContent = 'Failed to load greeting.';
});
</script>
</body>
</html>
```
Los valores de marcador de posición (`YOUR_API_KEY`, etc.) deben reemplazarse con las claves reales mostradas en la sección **Web app** de la consola.
**Paso 5 – Desplegar a Firebase Hosting**
```bash
firebase deploy
```
Después de una breve carga, la CLI imprime una URL pública como `https://hello-firebase-demo.web.app`. Abrir esa URL en un navegador debería mostrar **"Hello, Firebase!"** obtenido directamente de la base de datos.
---
#### 4. Errores comunes y consejos
| Error | Por qué ocurre | Solución |
|-------|----------------|----------|
| **Usar la URL de base de datos incorrecta** | La consola muestra dos URLs (Realtime vs. Firestore). | Asegúrate de que `databaseURL` apunte al endpoint de Realtime Database (`*.firebaseio.com`). |
| **Dejar Test Mode habilitado en producción** | Test Mode otorga acceso abierto de lectura/escritura. | Cambia a *Locked Mode* y define reglas de seguridad antes de lanzar públicamente. |
| **Olvidar reemplazar las claves API de marcador** | El esqueleto incluye cadenas genéricas. | Copia los valores exactos de *Project settings → General → Your apps*. |
| **Desplegar desde el directorio equivocado** | La CLI asume `public/` por defecto. | Verifica que `index.html` esté dentro de la carpeta pública seleccionada. |
**Consejo** – Ejecuta `firebase emulators:start` (o `firebase emulators:start --only hosting`) localmente antes de desplegar; proporciona recarga en vivo y un entorno de emulación completo.
---
#### 5. Resumen
- La consola de Firebase centraliza todos los servicios bajo un **proyecto**.
- Los servicios principales (Authentication, Realtime Database, Firestore, Hosting, Functions) pueden combinarse libremente.
- Una aplicación mínima **Hello Firebase** demuestra el flujo completo: crear un proyecto, habilitar un servicio, escribir una configuración del lado del cliente y desplegar mediante la CLI.
- Dominar este esqueleto prepara al aprendiz para exploraciones más profundas de flujos de autenticación, seguridad de datos y funciones sin servidor que se cubrirán en páginas posteriores.
---
#### 6. Preguntas de repaso
1. ¿Cuáles son las dos entidades jerárquicas en Firebase (Proyecto → Aplicación) y cómo se relacionan los servicios con ellas?
2. Describe el propósito del **Test Mode** frente al **Locked Mode** en las reglas de seguridad de Realtime Database, incluyendo por qué Test Mode es inseguro para producción (cualquiera que conozca la URL de la base de datos puede leer o escribir datos).
3. Enumera los pasos necesarios para obtener un valor de la Realtime Database en un cliente web.
4. ¿Por qué es importante reemplazar los valores de clave API de marcador con los generados para el proyecto?
---
#### 7. Lecturas adicionales
- *Documentación de Firebase – Primeros pasos con la consola* (firebase.google.com/docs/console)
- *Referencia de la CLI de Firebase* (firebase.google.com/docs/cli)
- *Reglas de seguridad de Realtime Database* (firebase.google.com/docs/database/security)
---
*Habiendo construido una aplicación funcional "Hello Firebase", el lector ahora está preparado para profundizar. Las páginas siguientes explorarán cada servicio de Firebase en detalle—estrategias de autenticación, datos estructurados con Cloud Firestore, lógica sin servidor con Cloud Functions y monitoreo de rendimiento—culminando en la página final de este capítulo, que sintetiza las capacidades de la plataforma en una arquitectura cohesiva y lista para producción.*
---
#### Ejercicio práctico
Modifica la aplicación para leer un segundo nodo llamado `author` de la base de datos y mostrarlo debajo del saludo.